@semiont/react-ui 0.5.11 → 0.5.12

package/dist/index.js

@@ -1,7 +1,8 @@
 'use client';
 import {
-  setPdfWorkerSrc
-} from "./chunk-O2MD7TGE.js";
+  setPdfWorkerSrc,
+  toViewportAnchorRect
+} from "./chunk-VXASXU4K.js";
 import {
   AVAILABLE_LOCALES,
   SemiontProvider,
@@ -2462,6 +2463,9 @@ var FacetProvider = class {
       }
     };
   }
+  get extension() {
+    return this;
+  }
 };
 function compareArray(a15, b8, compare2) {
   if (a15.length != b8.length)
@@ -2636,6 +2640,9 @@ var PrecExtension = class {
     this.inner = inner;
     this.prec = prec2;
   }
+  get extension() {
+    return this;
+  }
 };
 var Compartment = class _Compartment {
   /**
@@ -2665,6 +2672,9 @@ var CompartmentInstance = class {
     this.compartment = compartment;
     this.inner = inner;
   }
+  get extension() {
+    return this;
+  }
 };
 var Configuration = class _Configuration {
   constructor(base2, compartments, dynamicSlots, address, staticValues, facets) {
@@ -2772,6 +2782,8 @@ function flatten(extension, compartments, newCompartments) {
     } else {
       let content2 = ext.extension;
       if (!content2)
+        throw new Error(`Unrecognized extension value in extension set (${ext}).`);
+      if (content2 == ext)
         throw new Error(`Unrecognized extension value in extension set (${ext}). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.`);
       inner(content2, prec2);
     }
@@ -4964,8 +4976,11 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function maxOffset(node) {
   return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
-function flattenRect(rect, left) {
-  let x8 = left ? rect.left : rect.right;
+function flattenRect(rect, toLeft) {
+  let { left, right } = rect;
+  if (left == right)
+    return rect;
+  let x8 = toLeft ? left : right;
   return { left: x8, right: x8, top: rect.top, bottom: rect.bottom };
 }
 function windowRect(win) {
@@ -6047,7 +6062,7 @@ var Tile = class {
   covers(side) {
     return true;
   }
-  coordsIn(pos, side) {
+  coordsIn(pos, side, rtl) {
     return null;
   }
   domPosFor(off, side) {
@@ -6255,7 +6270,7 @@ var LineTile = class _LineTile extends CompositeTile {
         if (end >= pos2) {
           if (child.isComposite()) {
             scan(child, pos2 - off);
-          } else if ((!after || after.isHidden && (side > 0 || forCoords && onSameLine(after, child))) && (end > pos2 || child.flags & 32)) {
+          } else if ((!after || after.isHidden && (side > 0 && !(after.flags & 32) || forCoords && onSameLine(after, child))) && (end > pos2 || child.flags & 32)) {
             after = child;
             afterOff = pos2 - off;
           } else if (off < pos2 || child.flags & 16 && !child.isHidden) {
@@ -6270,11 +6285,11 @@ var LineTile = class _LineTile extends CompositeTile {
     let target = (side < 0 ? before : after) || before || after;
     return target ? { tile: target, offset: target == before ? beforeOff : afterOff } : null;
   }
-  coordsIn(pos, side) {
+  coordsIn(pos, side, rtl) {
     let found = this.resolveInline(pos, side, true);
     if (!found)
       return fallbackRect(this);
-    return found.tile.coordsIn(Math.max(0, found.offset), side);
+    return found.tile.coordsIn(Math.max(0, found.offset), side, rtl);
   }
   domIn(pos, side) {
     let found = this.resolveInline(pos, side);
@@ -6344,7 +6359,7 @@ var TextTile = class _TextTile extends Tile {
   toString() {
     return JSON.stringify(this.text);
   }
-  coordsIn(pos, side) {
+  coordsIn(pos, side, rtl) {
     let length = this.dom.nodeValue.length;
     if (pos > length)
       pos = length;
@@ -6371,7 +6386,7 @@ var TextTile = class _TextTile extends Tile {
     let rect = rects[(flatten2 ? flatten2 < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten2 && rect.width == 0)
       rect = Array.prototype.find.call(rects, (r13) => r13.width) || rect;
-    return flatten2 ? flattenRect(rect, flatten2 < 0) : rect || null;
+    return rtl == null ? rect : flattenRect(rect, (flatten2 ? flatten2 > 0 : side < 0) == rtl);
   }
   static of(text, dom) {
     let tile = new _TextTile(dom || document.createTextNode(text), text);
@@ -6453,8 +6468,9 @@ var WidgetBufferTile = class extends Tile {
   get overrideDOMText() {
     return Text.empty;
   }
-  coordsIn(pos) {
-    return this.dom.getBoundingClientRect();
+  coordsIn(pos, side, rtl) {
+    let rect = this.dom.getBoundingClientRect();
+    return rtl == null ? rect : flattenRect(rect, side > 0 == rtl);
   }
 };
 var TilePointer = class {
@@ -6814,7 +6830,7 @@ var TileCache = class {
   find(cls, test, type = 2) {
     let i13 = cls.bucket;
     let bucket = this.buckets[i13], off = this.index[i13];
-    for (let j7 = bucket.length - 1; j7 >= 0; j7--) {
+    for (let j7 = 0; j7 < bucket.length; j7++) {
       let index = (j7 + off) % bucket.length, tile = bucket[index];
       if ((!test || test(tile)) && !this.reused.has(tile)) {
         bucket.splice(index, 1);
@@ -7019,7 +7035,7 @@ var TileUpdate = class {
   }
   emit(from, to) {
     let pendingLineAttrs = null;
-    let b8 = this.builder, markCount = 0;
+    let b8 = this.builder, markCount = -1;
     let openEnd = RangeSet.spans(this.decorations, from, to, {
       point: (from2, to2, deco, active, openStart, index) => {
         if (deco instanceof PointDecoration) {
@@ -7069,7 +7085,8 @@ var TileUpdate = class {
         markCount = active.length;
       }
     });
-    this.openWidget = openEnd > markCount;
+    if (markCount > -1)
+      this.openWidget = openEnd > markCount;
     if (!this.openWidget)
       b8.addLineStartIfNotCovered(pendingLineAttrs);
     this.openMarks = openEnd;
@@ -7438,7 +7455,7 @@ var DocView = class {
   domAtPos(pos, side) {
     let { tile, offset } = this.tile.resolveBlock(pos, side);
     if (tile.isWidget())
-      return tile.domPosFor(pos, side);
+      return tile.domPosFor(offset, side);
     return tile.domIn(offset, side);
   }
   inlineDOMNearPos(pos, side) {
@@ -7474,14 +7491,16 @@ var DocView = class {
       after = null;
     return before && side < 0 || !after ? before.domIn(beforeOff, side) : after.domIn(afterOff, side);
   }
-  coordsAt(pos, side) {
+  // Get the coord of the element at the given side of the given
+  // position. If rtl is given, flatten it using that text direction.
+  coordsAt(pos, side, rtl) {
     let { tile, offset } = this.tile.resolveBlock(pos, side);
     if (tile.isWidget()) {
       if (tile.widget instanceof BlockGapWidget)
         return null;
       return tile.coordsInWidget(offset, side, true);
     }
-    return tile.coordsIn(offset, side);
+    return tile.coordsIn(offset, side, rtl);
   }
   lineAt(pos, side) {
     let { tile } = this.tile.resolveBlock(pos, side);
@@ -7652,7 +7671,6 @@ var DocView = class {
     this.blockWrappers = this.view.state.facet(blockWrappers).map((v4) => typeof v4 == "function" ? v4(this.view) : v4);
   }
   scrollIntoView(target) {
-    var _a2;
     if (target.isSnapshot) {
       let ref = this.view.viewState.lineBlockAt(target.range.head);
       this.view.scrollDOM.scrollTop = ref.top - target.yMargin;
@@ -7668,7 +7686,7 @@ var DocView = class {
       }
     }
     let { range } = target;
-    let rect = this.coordsAt(range.head, (_a2 = range.assoc) !== null && _a2 !== void 0 ? _a2 : range.empty ? 0 : range.head > range.anchor ? -1 : 1), other;
+    let rect = this.coordsAt(range.head, range.assoc || (range.head > range.anchor ? -1 : 1)), other;
     if (!rect)
       return;
     if (!range.empty && (other = this.coordsAt(range.anchor, range.anchor > range.head ? -1 : 1)))
@@ -8615,6 +8633,7 @@ var InputState = class {
     this.view = view;
     this.lastKeyCode = 0;
     this.lastKeyTime = 0;
+    this.touchActive = false;
     this.lastTouchTime = 0;
     this.lastTouchX = 0;
     this.lastTouchY = 0;
@@ -8623,6 +8642,7 @@ var InputState = class {
     this.lastScrollLeft = 0;
     this.lastWheelEvent = 0;
     this.pendingIOSKey = void 0;
+    this.lastIOSMomentumScroll = 0;
     this.tabFocusMode = -1;
     this.lastSelectionOrigin = null;
     this.lastSelectionTime = 0;
@@ -8994,8 +9014,11 @@ function doPaste(view, input) {
   });
 }
 observers.scroll = (view) => {
-  view.inputState.lastScrollTop = view.scrollDOM.scrollTop;
-  view.inputState.lastScrollLeft = view.scrollDOM.scrollLeft;
+  let iState = view.inputState;
+  iState.lastScrollTop = view.scrollDOM.scrollTop;
+  iState.lastScrollLeft = view.scrollDOM.scrollLeft;
+  if (browser.ios && !iState.touchActive)
+    iState.lastIOSMomentumScroll = Date.now();
 };
 observers.wheel = observers.mousewheel = (view) => {
   view.inputState.lastWheelEvent = Date.now();
@@ -9008,6 +9031,7 @@ handlers.keydown = (view, event) => {
 };
 observers.touchstart = (view, e6) => {
   let iState = view.inputState, touch = e6.targetTouches[0];
+  iState.touchActive = true;
   iState.lastTouchTime = Date.now();
   if (touch) {
     iState.lastTouchX = touch.clientX;
@@ -9018,6 +9042,9 @@ observers.touchstart = (view, e6) => {
 observers.touchmove = (view) => {
   view.inputState.setSelectionOrigin("select.pointer");
 };
+observers.touchend = (view, e6) => {
+  view.inputState.touchActive = false;
+};
 handlers.mousedown = (view, event) => {
   view.observer.flush();
   if (view.inputState.lastTouchTime > Date.now() - 2e3)
@@ -12059,7 +12086,7 @@ var EditorView = class _EditorView {
             } else {
               let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height : this.viewState.lineBlockAt(scrollAnchorPos).top;
               let diff = (newAnchorHeight - scrollAnchorHeight) / this.scaleY;
-              if ((diff > 1 || diff < -1) && (scroll == this.scrollDOM || this.hasFocus || Math.max(this.inputState.lastWheelEvent, this.inputState.lastTouchTime) > Date.now() - 100)) {
+              if ((diff > 1 || diff < -1) && !(browser.ios && this.inputState.lastIOSMomentumScroll > Date.now() - 100) && (scroll == this.scrollDOM || this.hasFocus || Math.max(this.inputState.lastWheelEvent, this.inputState.lastTouchTime) > Date.now() - 100)) {
                 scrollOffset = scrollOffset + diff;
                 if (scroll)
                   scroll.scrollTop += diff;
@@ -12350,12 +12377,9 @@ var EditorView = class _EditorView {
   */
   coordsAtPos(pos, side = 1) {
     this.readMeasured();
-    let rect = this.docView.coordsAt(pos, side);
-    if (!rect || rect.left == rect.right)
-      return rect;
     let line = this.state.doc.lineAt(pos), order = this.bidiSpans(line);
     let span = order[BidiSpan.find(order, pos - line.from, -1, side)];
-    return flattenRect(rect, span.dir == Direction.LTR == side > 0);
+    return this.docView.coordsAt(pos, side, span.dir == Direction.RTL);
   }
   /**
   Return the rectangle around a given character. If `pos` does not
@@ -17744,32 +17768,13 @@ function useLineNumbers() {
 }
 
 // src/hooks/useHoverDelay.ts
-import { useState as useState5, useCallback as useCallback5 } from "react";
+import { useState as useState4, useCallback as useCallback5 } from "react";
 
 // src/hooks/useHoverEmitter.ts
-import { useRef as useRef3, useCallback as useCallback4, useEffect as useEffect5 } from "react";
+import { useRef as useRef3, useCallback as useCallback4, useEffect as useEffect4 } from "react";
 import { HOVER_DELAY_MS } from "@semiont/sdk";
-
-// src/hooks/useObservable.ts
-import { useState as useState4, useEffect as useEffect4 } from "react";
-function useObservable(obs$) {
-  const [value, setValue] = useState4(() => {
-    if (!obs$) return void 0;
-    const getValue = obs$.getValue;
-    return typeof getValue === "function" ? getValue.call(obs$) : void 0;
-  });
-  useEffect4(() => {
-    if (!obs$) return;
-    const sub = obs$.subscribe(setValue);
-    return () => sub.unsubscribe();
-  }, [obs$]);
-  return value;
-}
-
-// src/hooks/useHoverEmitter.ts
 import { HOVER_DELAY_MS as HOVER_DELAY_MS2 } from "@semiont/sdk";
-function useHoverEmitter(annotationId2, hoverDelayMs = HOVER_DELAY_MS) {
-  const session = useObservable(useSemiont().activeSession$);
+function useHoverEmitter(session, annotationId2, hoverDelayMs = HOVER_DELAY_MS) {
   const currentHoverRef = useRef3(null);
   const timerRef = useRef3(null);
   const onMouseEnter = useCallback4(() => {
@@ -17793,7 +17798,7 @@ function useHoverEmitter(annotationId2, hoverDelayMs = HOVER_DELAY_MS) {
       session?.client.beckon.hover(null);
     }
   }, [session]);
-  useEffect5(() => {
+  useEffect4(() => {
     return () => {
       if (timerRef.current !== null) {
         clearTimeout(timerRef.current);
@@ -17806,7 +17811,7 @@ function useHoverEmitter(annotationId2, hoverDelayMs = HOVER_DELAY_MS) {
 
 // src/hooks/useHoverDelay.ts
 function useHoverDelay() {
-  const [hoverDelayMs, setHoverDelayMsState] = useState5(() => {
+  const [hoverDelayMs, setHoverDelayMsState] = useState4(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("hoverDelayMs");
       return stored ? Number(stored) : HOVER_DELAY_MS2;
@@ -17865,7 +17870,7 @@ function useObservableExternalNavigation() {
 }
 
 // src/hooks/usePanelWidth.ts
-import { useState as useState6, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useState as useState5, useEffect as useEffect5, useRef as useRef4 } from "react";
 function usePanelWidth({
   defaultWidth = 384,
   // 24rem
@@ -17875,9 +17880,9 @@ function usePanelWidth({
   // 50rem
   storageKey = "semiont-panel-width"
 } = {}) {
-  const [width, setWidthInternal] = useState6(defaultWidth);
+  const [width, setWidthInternal] = useState5(defaultWidth);
   const userChangedRef = useRef4(false);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const saved = localStorage.getItem(storageKey);
     if (saved) {
@@ -17891,7 +17896,7 @@ function usePanelWidth({
     userChangedRef.current = true;
     setWidthInternal(constrained);
   };
-  useEffect6(() => {
+  useEffect5(() => {
     if (!userChangedRef.current) return;
     localStorage.setItem(storageKey, width.toString());
   }, [width, storageKey]);
@@ -17899,7 +17904,7 @@ function usePanelWidth({
 }
 
 // src/hooks/useRovingTabIndex.ts
-import { useRef as useRef5, useEffect as useEffect7, useCallback as useCallback7 } from "react";
+import { useRef as useRef5, useEffect as useEffect6, useCallback as useCallback7 } from "react";
 function useRovingTabIndex(itemCount, options = {}) {
   const { orientation = "horizontal", loop = true, cols = 1 } = options;
   const containerRef = useRef5(null);
@@ -17979,7 +17984,7 @@ function useRovingTabIndex(itemCount, options = {}) {
     },
     [orientation, cols, getFocusableItems, focusItem]
   );
-  useEffect7(() => {
+  useEffect6(() => {
     const items = getFocusableItems();
     if (items.length === 0) return;
     items.forEach((item, i13) => {
@@ -18015,6 +18020,24 @@ function useRovingTabIndex(itemCount, options = {}) {
 
 // src/hooks/useSessionExpiry.ts
 import { useEffect as useEffect8, useState as useState7 } from "react";
+
+// src/hooks/useObservable.ts
+import { useState as useState6, useEffect as useEffect7 } from "react";
+function useObservable(obs$) {
+  const [value, setValue] = useState6(() => {
+    if (!obs$) return void 0;
+    const getValue = obs$.getValue;
+    return typeof getValue === "function" ? getValue.call(obs$) : void 0;
+  });
+  useEffect7(() => {
+    if (!obs$) return;
+    const sub = obs$.subscribe(setValue);
+    return () => sub.unsubscribe();
+  }, [obs$]);
+  return value;
+}
+
+// src/hooks/useSessionExpiry.ts
 function useSessionExpiry() {
   const session = useObservable(useSemiont().activeSession$);
   useObservable(session?.token$);
@@ -29512,7 +29535,7 @@ function AnnotationOverlay({
                   className: "semiont-annotation-overlay__shape",
                   "data-hovered": isHovered ? "true" : "false",
                   "data-selected": isSelected ? "true" : "false",
-                  onClick: () => session?.client.browse.click(annotation.id, annotation.motivation),
+                  onClick: (e6) => session?.client.browse.click(annotation.id, annotation.motivation, e6.currentTarget.getBoundingClientRect()),
                   onMouseEnter: () => handleMouseEnter(annotation.id),
                   onMouseLeave: handleMouseLeave
                 }
@@ -29527,7 +29550,7 @@ function AnnotationOverlay({
                   style: { userSelect: "none" },
                   onClick: (e6) => {
                     e6.stopPropagation();
-                    session?.client.browse.click(annotation.id, annotation.motivation);
+                    session?.client.browse.click(annotation.id, annotation.motivation, e6.currentTarget.getBoundingClientRect());
                   },
                   onMouseEnter: () => handleMouseEnter(annotation.id),
                   onMouseLeave: handleMouseLeave,
@@ -29557,7 +29580,7 @@ function AnnotationOverlay({
                   className: "semiont-annotation-overlay__shape",
                   "data-hovered": isHovered ? "true" : "false",
                   "data-selected": isSelected ? "true" : "false",
-                  onClick: () => session?.client.browse.click(annotation.id, annotation.motivation),
+                  onClick: (e6) => session?.client.browse.click(annotation.id, annotation.motivation, e6.currentTarget.getBoundingClientRect()),
                   onMouseEnter: () => handleMouseEnter(annotation.id),
                   onMouseLeave: handleMouseLeave
                 }
@@ -29572,7 +29595,7 @@ function AnnotationOverlay({
                   style: { userSelect: "none" },
                   onClick: (e6) => {
                     e6.stopPropagation();
-                    session?.client.browse.click(annotation.id, annotation.motivation);
+                    session?.client.browse.click(annotation.id, annotation.motivation, e6.currentTarget.getBoundingClientRect());
                   },
                   onMouseEnter: () => handleMouseEnter(annotation.id),
                   onMouseLeave: handleMouseLeave,
@@ -29606,7 +29629,7 @@ function AnnotationOverlay({
                   className: "semiont-annotation-overlay__shape",
                   "data-hovered": isHovered ? "true" : "false",
                   "data-selected": isSelected ? "true" : "false",
-                  onClick: () => session?.client.browse.click(annotation.id, annotation.motivation),
+                  onClick: (e6) => session?.client.browse.click(annotation.id, annotation.motivation, e6.currentTarget.getBoundingClientRect()),
                   onMouseEnter: () => handleMouseEnter(annotation.id),
                   onMouseLeave: handleMouseLeave
                 }
@@ -29621,7 +29644,7 @@ function AnnotationOverlay({
                   style: { userSelect: "none" },
                   onClick: (e6) => {
                     e6.stopPropagation();
-                    session?.client.browse.click(annotation.id, annotation.motivation);
+                    session?.client.browse.click(annotation.id, annotation.motivation, e6.currentTarget.getBoundingClientRect());
                   },
                   onMouseEnter: () => handleMouseEnter(annotation.id),
                   onMouseLeave: handleMouseLeave,
@@ -29753,6 +29776,7 @@ function SvgDrawingCanvas({
     const MIN_DRAG_DISTANCE = 10;
     if (dragDistance < MIN_DRAG_DISTANCE) {
       if (existingAnnotations.length > 0) {
+        let hitRect;
         const clickedAnnotation = existingAnnotations.find((ann) => {
           if (typeof ann.target === "string") return false;
           const svgSelector = ann.target.selector;
@@ -29770,12 +29794,16 @@ function SvgDrawingCanvas({
             const displayY = y4 * scaleY;
             const displayWidth = width * scaleX;
             const displayHeight = height * scaleY;
-            return endPoint.x >= displayX && endPoint.x <= displayX + displayWidth && endPoint.y >= displayY && endPoint.y <= displayY + displayHeight;
+            const hit = endPoint.x >= displayX && endPoint.x <= displayX + displayWidth && endPoint.y >= displayY && endPoint.y <= displayY + displayHeight;
+            if (hit && imageRef.current) {
+              hitRect = toViewportAnchorRect(imageRef.current.getBoundingClientRect(), displayX, displayY, displayWidth, displayHeight);
+            }
+            return hit;
           }
           return false;
         });
         if (clickedAnnotation) {
-          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation, hitRect);
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -30414,7 +30442,7 @@ function fallbackTextPosition(content2, selectedText) {
 
 // src/components/resource/AnnotateView.tsx
 import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-KWQ7XDWT.js").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
+var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-75GY2EDR.js").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 function AnnotateView({
   content: content2,
   mimeType = "text/plain",
@@ -31072,42 +31100,37 @@ import { createHoverHandlers as createHoverHandlers3 } from "@semiont/sdk";
 import { lazy as lazy2, Suspense as Suspense2, memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-
-// src/components/viewers/ImageViewer.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
-function ImageViewer({ imageUrl, alt = "Resource image" }) {
-  return /* @__PURE__ */ jsx25("div", { className: "semiont-image-viewer", children: /* @__PURE__ */ jsx25(
-    "img",
-    {
-      src: imageUrl,
-      alt,
-      className: "semiont-image-viewer__image",
-      style: { imageRendering: "auto" }
-    }
-  ) });
-}
-
-// src/components/resource/browse-renderers.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-KWQ7XDWT.js").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
+var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-75GY2EDR.js").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 var MemoizedMarkdown = memo(function MemoizedMarkdown2({ content: content2 }) {
-  return /* @__PURE__ */ jsx26(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content2 });
+  return /* @__PURE__ */ jsx25(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content2 });
 });
 function TextBrowseRenderer({ content: content2 }) {
-  return /* @__PURE__ */ jsx26(MemoizedMarkdown, { content: content2 });
+  return /* @__PURE__ */ jsx25(MemoizedMarkdown, { content: content2 });
 }
-function ImageBrowseRenderer({ content: content2, mimeType }) {
-  return /* @__PURE__ */ jsx26(ImageViewer, { imageUrl: content2, mimeType, alt: "Resource content" });
+function ImageBrowseRenderer({ content: content2, resourceUri, annotations, session }) {
+  return /* @__PURE__ */ jsx25(
+    SvgDrawingCanvas,
+    {
+      imageUrl: content2,
+      resourceUri,
+      existingAnnotations: annotations,
+      drawingMode: null,
+      selectedMotivation: null,
+      session
+    }
+  );
 }
-function PdfBrowseRenderer({ content: content2, resourceUri, annotations }) {
-  return /* @__PURE__ */ jsx26(Suspense2, { fallback: /* @__PURE__ */ jsx26("div", { className: "semiont-browse-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx26(
+function PdfBrowseRenderer({ content: content2, resourceUri, annotations, session }) {
+  return /* @__PURE__ */ jsx25(Suspense2, { fallback: /* @__PURE__ */ jsx25("div", { className: "semiont-browse-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx25(
     PdfAnnotationCanvas2,
     {
       pdfUrl: content2,
       resourceUri,
       existingAnnotations: annotations,
       drawingMode: null,
-      selectedMotivation: null
+      selectedMotivation: null,
+      session
     }
   ) });
 }
@@ -31118,7 +31141,7 @@ var defaultBrowseRenderers = {
 };
 
 // src/components/resource/BrowseView.tsx
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var BrowseView = memo2(function BrowseView2({
   content: content2,
   mimeType,
@@ -31166,12 +31189,13 @@ var BrowseView = memo2(function BrowseView2({
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
       if (!annotationElement) return;
+      const selection2 = window.getSelection();
+      if (selection2 && !selection2.isCollapsed) return;
       const annotationId2 = annotationElement.getAttribute("data-annotation-id");
-      const annotationType = annotationElement.getAttribute("data-annotation-type");
-      if (annotationId2 && annotationType === "reference") {
+      if (annotationId2) {
         const annotation = allAnnotations.find((a15) => a15.id === annotationId2);
         if (annotation) {
-          session.client.browse.click(annotation.id, annotation.motivation);
+          session.client.browse.click(annotation.id, annotation.motivation, annotationElement.getBoundingClientRect());
         }
       }
     };
@@ -31274,12 +31298,12 @@ var BrowseView = memo2(function BrowseView2({
   const mediaRenderers = { ...defaultBrowseRenderers, ...renderers };
   const Renderer = render === "none" ? void 0 : mediaRenderers[render];
   if (!Renderer) {
-    return /* @__PURE__ */ jsx27("div", { ref: containerRef, className: `semiont-browse-view semiont-browse-view--unsupported${inlineMod}`, "data-mime-type": "unsupported", children: /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view__empty", children: [
+    return /* @__PURE__ */ jsx26("div", { ref: containerRef, className: `semiont-browse-view semiont-browse-view--unsupported${inlineMod}`, "data-mime-type": "unsupported", children: /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view__empty", children: [
       /* @__PURE__ */ jsxs19("p", { className: "semiont-browse-view__empty-message", children: [
         "Preview not available for ",
         mimeType
       ] }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(
         "a",
         {
           href: `/api/resources/${resourceUri}`,
@@ -31291,7 +31315,7 @@ var BrowseView = memo2(function BrowseView2({
     ] }) });
   }
   return /* @__PURE__ */ jsxs19("div", { className: `semiont-browse-view${inlineMod}`, "data-mime-type": render, children: [
-    showToolbar && /* @__PURE__ */ jsx27(
+    showToolbar && /* @__PURE__ */ jsx26(
       AnnotateToolbar,
       {
         selectedMotivation: null,
@@ -31305,14 +31329,14 @@ var BrowseView = memo2(function BrowseView2({
         compact: inline
       }
     ),
-    /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view__content", onClick: handleContentClick, children: /* @__PURE__ */ jsx27(Renderer, { content: content2, mimeType, resourceUri, annotations: allAnnotations }) })
+    /* @__PURE__ */ jsx26("div", { ref: containerRef, className: "semiont-browse-view__content", onClick: handleContentClick, children: /* @__PURE__ */ jsx26(Renderer, { content: content2, mimeType, resourceUri, annotations: allAnnotations, session }) })
   ] });
 });
 
 // src/components/resource/ResourceViewer.tsx
 import { useState as useState23, useCallback as useCallback19, useRef as useRef18, useMemo as useMemo7 } from "react";
 import { getExactText as getExactText3, getTargetSelector as getTargetSelector4, isHighlight as isHighlight5, isAssessment as isAssessment4, isReference as isReference6, isComment as isComment5, isTag as isTag5, getBodySource as getBodySource5 } from "@semiont/core";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function ResourceViewer({
   resource,
   annotations,
@@ -31441,7 +31465,7 @@ function ResourceViewer({
       return;
     }
   }, [annotateMode, selectedClick, focusAnnotation, onOpenResource]);
-  const handleAnnotationClickEvent = useCallback19(({ annotationId: annotationId2, motivation }) => {
+  const handleAnnotationClickEvent = useCallback19(({ annotationId: annotationId2, motivation, anchorRect }) => {
     const metadata = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation({ motivation }));
     if (!metadata?.hasSidePanel) {
       const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
@@ -31459,7 +31483,7 @@ function ResourceViewer({
       }
       return;
     }
-    onOpenPanel?.({ panel: "annotations", scrollToAnnotationId: annotationId2, motivation });
+    onOpenPanel?.({ panel: "annotations", scrollToAnnotationId: annotationId2, motivation, ...anchorRect ? { anchorRect } : {} });
   }, [highlights, references, assessments, comments, tags3, handleAnnotationClick2, selectedClick, onOpenPanel]);
   useSessionEventSubscriptions(session, {
     // Annotation cache invalidation
@@ -31485,7 +31509,7 @@ function ResourceViewer({
     return referencedResource ? getExactText3(getTargetSelector4(referencedResource.target)) : void 0;
   }, [references]);
   return /* @__PURE__ */ jsxs20("div", { ref: documentViewerRef, className: `semiont-resource-viewer${inline ? " semiont-resource-viewer--inline" : ""}`, children: [
-    activeView === "annotate" ? /* @__PURE__ */ jsx28(
+    activeView === "annotate" ? /* @__PURE__ */ jsx27(
       AnnotateView,
       {
         content: resource.content,
@@ -31509,7 +31533,7 @@ function ResourceViewer({
         session,
         newAnnotationIds
       }
-    ) : /* @__PURE__ */ jsx28(
+    ) : /* @__PURE__ */ jsx27(
       BrowseView,
       {
         content: resource.content,
@@ -31529,14 +31553,14 @@ function ResourceViewer({
         inline
       }
     ),
-    jsonLdAnnotation && /* @__PURE__ */ jsx28(
+    jsonLdAnnotation && /* @__PURE__ */ jsx27(
       PopupContainer,
       {
         isOpen: showJsonLdView,
         onClose: () => setShowJsonLdView(false),
         position: getJsonLdModalPosition(),
         wide: true,
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx27(
           JsonLdView,
           {
             annotation: jsonLdAnnotation,
@@ -31554,7 +31578,7 @@ function ResourceViewer({
       const targetSelector = getTargetSelector4(annotation.target);
       const selectedText = getExactText3(targetSelector);
       const motivationEmoji = metadata?.iconEmoji || "\u{1F4DD}";
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx27(
         PopupContainer,
         {
           isOpen: !!deleteConfirmation,
@@ -31562,17 +31586,17 @@ function ResourceViewer({
           position: deleteConfirmation.position,
           children: /* @__PURE__ */ jsxs20("div", { className: "semiont-delete-confirmation", children: [
             /* @__PURE__ */ jsxs20("div", { className: "semiont-delete-confirmation__header", children: [
-              /* @__PURE__ */ jsx28("span", { className: "semiont-delete-confirmation__icon", children: motivationEmoji }),
-              /* @__PURE__ */ jsx28("h3", { className: "semiont-delete-confirmation__title", children: t12("deleteConfirmationTitle") })
+              /* @__PURE__ */ jsx27("span", { className: "semiont-delete-confirmation__icon", children: motivationEmoji }),
+              /* @__PURE__ */ jsx27("h3", { className: "semiont-delete-confirmation__title", children: t12("deleteConfirmationTitle") })
             ] }),
-            selectedText && /* @__PURE__ */ jsx28("div", { className: "semiont-delete-confirmation__quote", children: /* @__PURE__ */ jsxs20("p", { className: "semiont-delete-confirmation__text", children: [
+            selectedText && /* @__PURE__ */ jsx27("div", { className: "semiont-delete-confirmation__quote", children: /* @__PURE__ */ jsxs20("p", { className: "semiont-delete-confirmation__text", children: [
               '"',
               selectedText.length > 100 ? selectedText.substring(0, 100) + "..." : selectedText,
               '"'
             ] }) }),
-            /* @__PURE__ */ jsx28("p", { className: "semiont-delete-confirmation__message", children: t12("deleteConfirmationMessage") }),
+            /* @__PURE__ */ jsx27("p", { className: "semiont-delete-confirmation__message", children: t12("deleteConfirmationMessage") }),
             /* @__PURE__ */ jsxs20("div", { className: "semiont-delete-confirmation__actions", children: [
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx27(
                 "button",
                 {
                   onClick: () => setDeleteConfirmation(null),
@@ -31580,7 +31604,7 @@ function ResourceViewer({
                   children: t12("deleteConfirmationCancel")
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx27(
                 "button",
                 {
                   onClick: () => {
@@ -31615,7 +31639,7 @@ function renderAgentLabel(agent) {
 }
 
 // src/components/resource/panels/AssessmentEntry.tsx
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function formatRelativeTime2(isoString) {
   const date = new Date(isoString);
   const now = /* @__PURE__ */ new Date();
@@ -31645,13 +31669,13 @@ function getAssessmentText(annotation) {
   return null;
 }
 function AssessmentEntry({
+  session,
   assessment,
   isFocused,
   isHovered = false,
   ref
 }) {
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(assessment.id);
+  const hoverProps = useHoverEmitter(session, assessment.id);
   const selectedText = getAnnotationExactText(assessment);
   const assessmentText = getAssessmentText(assessment);
   return /* @__PURE__ */ jsxs21(
@@ -31672,7 +31696,7 @@ function AssessmentEntry({
           selectedText.length > 100 ? "..." : "",
           '"'
         ] }),
-        assessmentText && /* @__PURE__ */ jsx29("div", { className: "semiont-annotation-entry__body", "data-type": "assessment", children: assessmentText }),
+        assessmentText && /* @__PURE__ */ jsx28("div", { className: "semiont-annotation-entry__body", "data-type": "assessment", children: assessmentText }),
         /* @__PURE__ */ jsxs21("div", { className: "semiont-annotation-entry__metadata", children: [
           "By ",
           typeof assessment.creator === "string" ? assessment.creator : assessment.creator?.name || "Unknown",
@@ -31694,8 +31718,9 @@ import { getTextPositionSelector as getTextPositionSelector3, getTargetSelector
 
 // src/components/resource/panels/AssistSection.tsx
 import { useState as useState24, useEffect as useEffect28, useCallback as useCallback20 } from "react";
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function AssistSection({
+  session,
   annotationType,
   isAssisting,
   locale,
@@ -31704,7 +31729,6 @@ function AssistSection({
 }) {
   const panelName = annotationType === "highlight" ? "HighlightPanel" : annotationType === "assessment" ? "AssessmentPanel" : "CommentsPanel";
   const t12 = useTranslations(panelName);
-  const session = useObservable(useSemiont().activeSession$);
   const [instructions, setInstructions] = useState24("");
   const [tone, setTone] = useState24("");
   const defaultDensity = annotationType === "comment" ? 5 : annotationType === "assessment" ? 4 : annotationType === "highlight" ? 5 : 5;
@@ -31747,8 +31771,8 @@ function AssistSection({
         "aria-expanded": isExpanded,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx30("span", { children: t12(annotationType === "highlight" ? "annotateHighlights" : annotationType === "assessment" ? "annotateAssessments" : "annotateComments") }),
-          /* @__PURE__ */ jsx30("span", { className: "semiont-panel__section-chevron", "data-expanded": isExpanded, children: "\u203A" })
+          /* @__PURE__ */ jsx29("span", { children: t12(annotationType === "highlight" ? "annotateHighlights" : annotationType === "assessment" ? "annotateAssessments" : "annotateComments") }),
+          /* @__PURE__ */ jsx29("span", { className: "semiont-panel__section-chevron", "data-expanded": isExpanded, children: "\u203A" })
         ]
       }
     ),
@@ -31766,7 +31790,7 @@ function AssistSection({
                 " ",
                 t12("optional")
               ] }),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx29(
                 "textarea",
                 {
                   value: instructions,
@@ -31795,18 +31819,18 @@ function AssistSection({
                   onChange: (e6) => setTone(e6.target.value),
                   className: "semiont-select",
                   children: [
-                    /* @__PURE__ */ jsx30("option", { value: "", children: "Default" }),
+                    /* @__PURE__ */ jsx29("option", { value: "", children: "Default" }),
                     annotationType === "comment" && /* @__PURE__ */ jsxs22(Fragment4, { children: [
-                      /* @__PURE__ */ jsx30("option", { value: "scholarly", children: t12("toneScholarly") }),
-                      /* @__PURE__ */ jsx30("option", { value: "explanatory", children: t12("toneExplanatory") }),
-                      /* @__PURE__ */ jsx30("option", { value: "conversational", children: t12("toneConversational") }),
-                      /* @__PURE__ */ jsx30("option", { value: "technical", children: t12("toneTechnical") })
+                      /* @__PURE__ */ jsx29("option", { value: "scholarly", children: t12("toneScholarly") }),
+                      /* @__PURE__ */ jsx29("option", { value: "explanatory", children: t12("toneExplanatory") }),
+                      /* @__PURE__ */ jsx29("option", { value: "conversational", children: t12("toneConversational") }),
+                      /* @__PURE__ */ jsx29("option", { value: "technical", children: t12("toneTechnical") })
                     ] }),
                     annotationType === "assessment" && /* @__PURE__ */ jsxs22(Fragment4, { children: [
-                      /* @__PURE__ */ jsx30("option", { value: "analytical", children: t12("toneAnalytical") }),
-                      /* @__PURE__ */ jsx30("option", { value: "critical", children: t12("toneCritical") }),
-                      /* @__PURE__ */ jsx30("option", { value: "balanced", children: t12("toneBalanced") }),
-                      /* @__PURE__ */ jsx30("option", { value: "constructive", children: t12("toneConstructive") })
+                      /* @__PURE__ */ jsx29("option", { value: "analytical", children: t12("toneAnalytical") }),
+                      /* @__PURE__ */ jsx29("option", { value: "critical", children: t12("toneCritical") }),
+                      /* @__PURE__ */ jsx29("option", { value: "balanced", children: t12("toneBalanced") }),
+                      /* @__PURE__ */ jsx29("option", { value: "constructive", children: t12("toneConstructive") })
                     ] })
                   ]
                 }
@@ -31815,7 +31839,7 @@ function AssistSection({
             (annotationType === "comment" || annotationType === "assessment" || annotationType === "highlight") && /* @__PURE__ */ jsxs22("div", { className: "semiont-form-field", children: [
               /* @__PURE__ */ jsxs22("div", { className: "semiont-form-field__header", children: [
                 /* @__PURE__ */ jsxs22("label", { className: "semiont-form-field__label semiont-form-field__label--with-checkbox", children: [
-                  /* @__PURE__ */ jsx30(
+                  /* @__PURE__ */ jsx29(
                     "input",
                     {
                       type: "checkbox",
@@ -31825,7 +31849,7 @@ function AssistSection({
                       "data-variant": annotationType
                     }
                   ),
-                  /* @__PURE__ */ jsx30("span", { children: t12("densityLabel") })
+                  /* @__PURE__ */ jsx29("span", { children: t12("densityLabel") })
                 ] }),
                 useDensity && /* @__PURE__ */ jsxs22("span", { className: "semiont-form-field__info", children: [
                   density,
@@ -31833,7 +31857,7 @@ function AssistSection({
                 ] })
               ] }),
               useDensity && /* @__PURE__ */ jsxs22(Fragment4, { children: [
-                /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx29(
                   "input",
                   {
                     type: "range",
@@ -31845,8 +31869,8 @@ function AssistSection({
                   }
                 ),
                 /* @__PURE__ */ jsxs22("div", { className: "semiont-slider__labels", children: [
-                  /* @__PURE__ */ jsx30("span", { children: t12("densitySparse") }),
-                  /* @__PURE__ */ jsx30("span", { children: t12("densityDense") })
+                  /* @__PURE__ */ jsx29("span", { children: t12("densitySparse") }),
+                  /* @__PURE__ */ jsx29("span", { children: t12("densityDense") })
                 ] })
               ] })
             ] }),
@@ -31858,15 +31882,15 @@ function AssistSection({
                 "data-variant": "assist",
                 "data-type": annotationType,
                 children: [
-                  /* @__PURE__ */ jsx30("span", { className: "semiont-button-icon", children: "\u2728" }),
-                  /* @__PURE__ */ jsx30("span", { children: t12("annotate") })
+                  /* @__PURE__ */ jsx29("span", { className: "semiont-button-icon", children: "\u2728" }),
+                  /* @__PURE__ */ jsx29("span", { children: t12("annotate") })
                 ]
               }
             )
           ] }),
           progress && /* @__PURE__ */ jsxs22("div", { className: "semiont-annotation-progress", "data-type": annotationType, children: [
             progress.requestParams && progress.requestParams.length > 0 && /* @__PURE__ */ jsxs22("div", { className: "semiont-annotation-progress__params", "data-type": annotationType, children: [
-              /* @__PURE__ */ jsx30("div", { className: "semiont-annotation-progress__params-title", children: "Request Parameters:" }),
+              /* @__PURE__ */ jsx29("div", { className: "semiont-annotation-progress__params-title", children: "Request Parameters:" }),
               progress.requestParams.map((param, idx) => /* @__PURE__ */ jsxs22("div", { className: "semiont-annotation-progress__param", children: [
                 /* @__PURE__ */ jsxs22("span", { className: "semiont-annotation-progress__param-label", children: [
                   param.label,
@@ -31878,10 +31902,10 @@ function AssistSection({
             ] }),
             /* @__PURE__ */ jsxs22("div", { className: "semiont-annotation-progress__status", children: [
               /* @__PURE__ */ jsxs22("div", { className: "semiont-annotation-progress__message", children: [
-                /* @__PURE__ */ jsx30("span", { className: "semiont-annotation-progress__icon", children: "\u2728" }),
-                /* @__PURE__ */ jsx30("span", { children: progress.message })
+                /* @__PURE__ */ jsx29("span", { className: "semiont-annotation-progress__icon", children: "\u2728" }),
+                /* @__PURE__ */ jsx29("span", { children: progress.message })
               ] }),
-              !isAssisting && /* @__PURE__ */ jsx30(
+              !isAssisting && /* @__PURE__ */ jsx29(
                 "button",
                 {
                   onClick: handleDismissProgress,
@@ -31901,10 +31925,10 @@ function AssistSection({
 }
 
 // src/components/resource/panels/PanelHeader.tsx
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function PanelHeader({ count: count2, title }) {
-  return /* @__PURE__ */ jsx31("div", { className: "semiont-panel-header", children: /* @__PURE__ */ jsxs23("h2", { className: "semiont-panel-header__title", children: [
-    /* @__PURE__ */ jsx31("span", { className: "semiont-panel-header__text", children: title }),
+  return /* @__PURE__ */ jsx30("div", { className: "semiont-panel-header", children: /* @__PURE__ */ jsxs23("h2", { className: "semiont-panel-header__title", children: [
+    /* @__PURE__ */ jsx30("span", { className: "semiont-panel-header__text", children: title }),
     /* @__PURE__ */ jsxs23("span", { className: "semiont-panel-header__count", children: [
       "(",
       count2,
@@ -31914,7 +31938,7 @@ function PanelHeader({ count: count2, title }) {
 }
 
 // src/components/resource/panels/AssessmentPanel.tsx
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function getSelectorDisplayText(selector) {
   if (Array.isArray(selector)) {
     const quoteSelector = selector.find((s11) => s11.type === "TextQuoteSelector");
@@ -31929,6 +31953,7 @@ function getSelectorDisplayText(selector) {
   return null;
 }
 function AssessmentPanel({
+  session,
   resourceId: resourceId2,
   annotations,
   pendingAnnotation,
@@ -31942,7 +31967,6 @@ function AssessmentPanel({
   hoveredAnnotationId
 }) {
   const t12 = useTranslations("AssessmentPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const [newAssessmentText, setNewAssessmentText] = useState25("");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState25(null);
   const containerRef = useRef19(null);
@@ -32021,20 +32045,20 @@ function AssessmentPanel({
     setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     "browse:click": handleAnnotationClick2
   });
   return /* @__PURE__ */ jsxs24("div", { className: "semiont-panel", children: [
-    /* @__PURE__ */ jsx32(PanelHeader, { annotationType: "assessment", count: annotations.length, title: t12("title") }),
+    /* @__PURE__ */ jsx31(PanelHeader, { annotationType: "assessment", count: annotations.length, title: t12("title") }),
     pendingAnnotation && pendingAnnotation.motivation === "assessing" && /* @__PURE__ */ jsxs24("div", { className: "semiont-annotation-prompt", "data-type": "assessment", children: [
-      /* @__PURE__ */ jsx32("div", { className: "semiont-annotation-prompt__quote", children: (() => {
+      /* @__PURE__ */ jsx31("div", { className: "semiont-annotation-prompt__quote", children: (() => {
         const displayText = getSelectorDisplayText(pendingAnnotation.selector);
         if (displayText) {
           return `"${displayText.substring(0, 100)}${displayText.length > 100 ? "..." : ""}"`;
         }
         return t12("fragmentSelected");
       })() }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx31(
         "textarea",
         {
           value: newAssessmentText,
@@ -32052,7 +32076,7 @@ function AssessmentPanel({
           "/2000"
         ] }),
         /* @__PURE__ */ jsxs24("div", { className: "semiont-annotation-prompt__actions", children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx31(
             "button",
             {
               onClick: () => {
@@ -32064,7 +32088,7 @@ function AssessmentPanel({
               children: t12("cancel")
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx31(
             "button",
             {
               onClick: handleSaveNewAssessment,
@@ -32077,9 +32101,10 @@ function AssessmentPanel({
       ] })
     ] }),
     /* @__PURE__ */ jsxs24("div", { ref: containerRef, className: "semiont-panel__content", children: [
-      annotateMode && /* @__PURE__ */ jsx32(
+      annotateMode && /* @__PURE__ */ jsx31(
         AssistSection,
         {
+          session,
           annotationType: "assessment",
           isAssisting,
           locale,
@@ -32087,9 +32112,10 @@ function AssessmentPanel({
           progress
         }
       ),
-      /* @__PURE__ */ jsx32("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx32("p", { className: "semiont-panel__empty", children: t12("noAssessments") }) : sortedAnnotations.map((assessment) => /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx31("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx31("p", { className: "semiont-panel__empty", children: t12("noAssessments") }) : sortedAnnotations.map((assessment) => /* @__PURE__ */ jsx31(
         AssessmentEntry,
         {
+          session,
           assessment,
           isFocused: assessment.id === focusedAnnotationId,
           isHovered: assessment.id === hoveredAnnotationId,
@@ -32102,7 +32128,7 @@ function AssessmentPanel({
 }
 
 // src/components/resource/panels/CollaborationPanel.tsx
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function CollaborationPanel({
   state,
   eventCount,
@@ -32138,20 +32164,20 @@ function CollaborationPanel({
     }
   }
   return /* @__PURE__ */ jsxs25("div", { className: "semiont-collaboration-panel", children: [
-    /* @__PURE__ */ jsx33("h3", { className: "semiont-collaboration-panel__title", children: t12("title") }),
-    knowledgeBaseName && /* @__PURE__ */ jsx33("div", { style: { padding: "0 0.75rem 0.5rem", fontSize: "0.8rem", color: "var(--semiont-color-neutral-400)" }, children: knowledgeBaseName }),
+    /* @__PURE__ */ jsx32("h3", { className: "semiont-collaboration-panel__title", children: t12("title") }),
+    knowledgeBaseName && /* @__PURE__ */ jsx32("div", { style: { padding: "0 0.75rem 0.5rem", fontSize: "0.8rem", color: "var(--semiont-color-neutral-400)" }, children: knowledgeBaseName }),
     /* @__PURE__ */ jsxs25("div", { className: "semiont-collaboration-panel__section", children: [
-      /* @__PURE__ */ jsx33("h3", { className: "semiont-collaboration-panel__heading", children: t12("connectionStatus") }),
+      /* @__PURE__ */ jsx32("h3", { className: "semiont-collaboration-panel__heading", children: t12("connectionStatus") }),
       /* @__PURE__ */ jsxs25("div", { className: "semiont-collaboration-panel__status", children: [
         /* @__PURE__ */ jsxs25("span", { className: "semiont-collaboration-panel__indicator", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx32(
             "span",
             {
               className: "semiont-collaboration-panel__dot",
               "data-connected": isHealthy ? "true" : "false"
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx32(
             "span",
             {
               className: "semiont-collaboration-panel__status-text",
@@ -32168,16 +32194,16 @@ function CollaborationPanel({
       ] }),
       /* @__PURE__ */ jsxs25("div", { className: "semiont-collaboration-panel__details", children: [
         /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx33("span", { className: "semiont-collaboration-panel__label", children: t12("lastSync") }),
+          /* @__PURE__ */ jsx32("span", { className: "semiont-collaboration-panel__label", children: t12("lastSync") }),
           " ",
           lastSyncText
         ] }),
-        /* @__PURE__ */ jsx33("div", { children: isHealthy ? t12("realtimeActive") : t12("reconnecting") })
+        /* @__PURE__ */ jsx32("div", { children: isHealthy ? t12("realtimeActive") : t12("reconnecting") })
       ] })
     ] }),
     /* @__PURE__ */ jsxs25("div", { className: "semiont-collaboration-panel__section semiont-collaboration-panel__section--bordered", children: [
-      /* @__PURE__ */ jsx33("h3", { className: "semiont-collaboration-panel__heading", children: t12("sharing") }),
-      /* @__PURE__ */ jsx33("p", { className: "semiont-collaboration-panel__description", children: t12("collaborationComingSoon") })
+      /* @__PURE__ */ jsx32("h3", { className: "semiont-collaboration-panel__heading", children: t12("sharing") }),
+      /* @__PURE__ */ jsx32("p", { className: "semiont-collaboration-panel__description", children: t12("collaborationComingSoon") })
     ] })
   ] });
 }
@@ -32185,7 +32211,7 @@ function CollaborationPanel({
 // src/components/resource/panels/CommentEntry.tsx
 import { useState as useState26, useEffect as useEffect30, useRef as useRef20, useImperativeHandle } from "react";
 import { getAnnotationExactText as getAnnotationExactText2, getCommentText } from "@semiont/core";
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function formatRelativeTime3(isoString) {
   const date = new Date(isoString);
   const now = /* @__PURE__ */ new Date();
@@ -32201,6 +32227,7 @@ function formatRelativeTime3(isoString) {
   return date.toLocaleDateString();
 }
 function CommentEntry({
+  session,
   comment: comment2,
   isFocused,
   isHovered = false,
@@ -32208,8 +32235,7 @@ function CommentEntry({
   ref
 }) {
   const t12 = useTranslations("CommentsPanel");
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(comment2.id);
+  const hoverProps = useHoverEmitter(session, comment2.id);
   const [isEditing, setIsEditing] = useState26(false);
   const [editText, setEditText] = useState26("");
   const internalRef = useRef20(null);
@@ -32254,7 +32280,7 @@ function CommentEntry({
           '"'
         ] }),
         isEditing ? /* @__PURE__ */ jsxs26("div", { className: "semiont-annotation-entry__edit", onClick: (e6) => e6.stopPropagation(), children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx33(
             "textarea",
             {
               value: editText,
@@ -32271,7 +32297,7 @@ function CommentEntry({
               "/2000"
             ] }),
             /* @__PURE__ */ jsxs26("div", { className: "semiont-annotation-entry__button-group", children: [
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx33(
                 "button",
                 {
                   onClick: handleSave,
@@ -32280,7 +32306,7 @@ function CommentEntry({
                   children: t12("save")
                 }
               ),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx33(
                 "button",
                 {
                   onClick: handleCancel,
@@ -32290,7 +32316,7 @@ function CommentEntry({
               )
             ] })
           ] })
-        ] }) : /* @__PURE__ */ jsx34("div", { className: "semiont-annotation-entry__body", children: commentText }),
+        ] }) : /* @__PURE__ */ jsx33("div", { className: "semiont-annotation-entry__body", children: commentText }),
         !isEditing && /* @__PURE__ */ jsxs26("div", { className: "semiont-annotation-entry__footer", children: [
           /* @__PURE__ */ jsxs26("div", { className: "semiont-annotation-entry__metadata", children: [
             "By ",
@@ -32302,7 +32328,7 @@ function CommentEntry({
             "Via ",
             Array.isArray(comment2.generator) ? comment2.generator.map(renderAgentLabel).join(", ") : renderAgentLabel(comment2.generator)
           ] }),
-          annotateMode && /* @__PURE__ */ jsx34("div", { className: "semiont-annotation-entry__actions", onClick: (e6) => e6.stopPropagation(), children: /* @__PURE__ */ jsx34(
+          annotateMode && /* @__PURE__ */ jsx33("div", { className: "semiont-annotation-entry__actions", onClick: (e6) => e6.stopPropagation(), children: /* @__PURE__ */ jsx33(
             "button",
             {
               onClick: handleEditClick,
@@ -32320,7 +32346,7 @@ function CommentEntry({
 // src/components/resource/panels/CommentsPanel.tsx
 import { useState as useState27, useEffect as useEffect31, useRef as useRef21, useCallback as useCallback22, useMemo as useMemo9 } from "react";
 import { getTextPositionSelector as getTextPositionSelector4, getTargetSelector as getTargetSelector6 } from "@semiont/core";
-import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function getSelectorDisplayText2(selector) {
   if (Array.isArray(selector)) {
     const quoteSelector = selector.find((s11) => s11.type === "TextQuoteSelector");
@@ -32335,6 +32361,7 @@ function getSelectorDisplayText2(selector) {
   return null;
 }
 function CommentsPanel({
+  session,
   resourceId: resourceId2,
   annotations,
   pendingAnnotation,
@@ -32348,7 +32375,6 @@ function CommentsPanel({
   hoveredAnnotationId
 }) {
   const t12 = useTranslations("CommentsPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const [newCommentText, setNewCommentText] = useState27("");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState27(null);
   const containerRef = useRef21(null);
@@ -32405,7 +32431,7 @@ function CommentsPanel({
     setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     "browse:click": handleAnnotationClick2
   });
   const handleSaveNewComment = () => {
@@ -32431,16 +32457,16 @@ function CommentsPanel({
     return () => document.removeEventListener("keydown", handleEscape);
   }, [pendingAnnotation, session]);
   return /* @__PURE__ */ jsxs27("div", { className: "semiont-panel", children: [
-    /* @__PURE__ */ jsx35(PanelHeader, { annotationType: "comment", count: annotations.length, title: t12("title") }),
+    /* @__PURE__ */ jsx34(PanelHeader, { annotationType: "comment", count: annotations.length, title: t12("title") }),
     pendingAnnotation && pendingAnnotation.motivation === "commenting" && /* @__PURE__ */ jsxs27("div", { className: "semiont-annotation-prompt", "data-type": "comment", children: [
-      /* @__PURE__ */ jsx35("div", { className: "semiont-annotation-prompt__quote", children: (() => {
+      /* @__PURE__ */ jsx34("div", { className: "semiont-annotation-prompt__quote", children: (() => {
         const displayText = getSelectorDisplayText2(pendingAnnotation.selector);
         if (displayText) {
           return `"${displayText.substring(0, 100)}${displayText.length > 100 ? "..." : ""}"`;
         }
         return t12("fragmentSelected");
       })() }),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx34(
         "textarea",
         {
           value: newCommentText,
@@ -32458,7 +32484,7 @@ function CommentsPanel({
           "/2000"
         ] }),
         /* @__PURE__ */ jsxs27("div", { className: "semiont-annotation-prompt__actions", children: [
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx34(
             "button",
             {
               onClick: () => {
@@ -32470,7 +32496,7 @@ function CommentsPanel({
               children: t12("cancel")
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx34(
             "button",
             {
               onClick: handleSaveNewComment,
@@ -32484,9 +32510,10 @@ function CommentsPanel({
       ] })
     ] }),
     /* @__PURE__ */ jsxs27("div", { ref: containerRef, className: "semiont-panel__content", children: [
-      annotateMode && /* @__PURE__ */ jsx35(
+      annotateMode && /* @__PURE__ */ jsx34(
         AssistSection,
         {
+          session,
           annotationType: "comment",
           isAssisting,
           locale,
@@ -32494,9 +32521,10 @@ function CommentsPanel({
           progress
         }
       ),
-      /* @__PURE__ */ jsx35("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx35("p", { className: "semiont-panel__empty", children: t12("noComments") }) : sortedAnnotations.map((comment2) => /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx34("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx34("p", { className: "semiont-panel__empty", children: t12("noComments") }) : sortedAnnotations.map((comment2) => /* @__PURE__ */ jsx34(
         CommentEntry,
         {
+          session,
           comment: comment2,
           isFocused: comment2.id === focusedAnnotationId,
           isHovered: comment2.id === hoveredAnnotationId,
@@ -32527,13 +32555,13 @@ function formatRelativeTime4(isoString) {
   return date.toLocaleDateString();
 }
 function HighlightEntry({
+  session,
   highlight,
   isFocused,
   isHovered = false,
   ref
 }) {
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(highlight.id);
+  const hoverProps = useHoverEmitter(session, highlight.id);
   const selectedText = getAnnotationExactText3(highlight);
   return /* @__PURE__ */ jsxs28(
     "div",
@@ -32571,8 +32599,9 @@ function HighlightEntry({
 // src/components/resource/panels/HighlightPanel.tsx
 import { useEffect as useEffect32, useState as useState28, useRef as useRef22, useCallback as useCallback23, useMemo as useMemo10 } from "react";
 import { getTextPositionSelector as getTextPositionSelector5, getTargetSelector as getTargetSelector7 } from "@semiont/core";
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 function HighlightPanel({
+  session,
   resourceId: resourceId2,
   annotations,
   pendingAnnotation,
@@ -32585,7 +32614,6 @@ function HighlightPanel({
   sourceLanguage
 }) {
   const t12 = useTranslations("HighlightPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState28(null);
   const containerRef = useRef22(null);
   const entryRefs = useRef22(/* @__PURE__ */ new Map());
@@ -32639,7 +32667,7 @@ function HighlightPanel({
     setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     "browse:click": handleAnnotationClick2
   });
   useEffect32(() => {
@@ -32652,20 +32680,22 @@ function HighlightPanel({
     }
   }, [pendingAnnotation, session]);
   return /* @__PURE__ */ jsxs29("div", { className: "semiont-panel", children: [
-    /* @__PURE__ */ jsx36(PanelHeader, { annotationType: "highlight", count: annotations.length, title: t12("title") }),
+    /* @__PURE__ */ jsx35(PanelHeader, { annotationType: "highlight", count: annotations.length, title: t12("title") }),
     /* @__PURE__ */ jsxs29("div", { ref: containerRef, className: "semiont-panel__content", children: [
-      annotateMode && /* @__PURE__ */ jsx36(
+      annotateMode && /* @__PURE__ */ jsx35(
         AssistSection,
         {
+          session,
           annotationType: "highlight",
           isAssisting,
           progress,
           sourceLanguage
         }
       ),
-      /* @__PURE__ */ jsx36("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx36("p", { className: "semiont-panel__empty", children: t12("noHighlights") }) : sortedAnnotations.map((highlight) => /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx35("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx35("p", { className: "semiont-panel__empty", children: t12("noHighlights") }) : sortedAnnotations.map((highlight) => /* @__PURE__ */ jsx35(
         HighlightEntry,
         {
+          session,
           highlight,
           isFocused: highlight.id === focusedAnnotationId,
           isHovered: highlight.id === hoveredAnnotationId,
@@ -32712,7 +32742,7 @@ function useResourceGraph(id2) {
 }
 
 // src/components/resource/panels/JsonLdPanel.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 function JsonLdPanel({ resourceId: resourceId2 }) {
   const editorRef = useRef23(null);
   const viewRef = useRef23(null);
@@ -32760,8 +32790,8 @@ function JsonLdPanel({ resourceId: resourceId2 }) {
   };
   return /* @__PURE__ */ jsxs30("div", { className: "semiont-jsonld-panel", children: [
     /* @__PURE__ */ jsxs30("div", { className: "semiont-jsonld-panel__header", children: [
-      /* @__PURE__ */ jsx37("h3", { className: "semiont-jsonld-panel__title", children: "JSON-LD" }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx36("h3", { className: "semiont-jsonld-panel__title", children: "JSON-LD" }),
+      /* @__PURE__ */ jsx36(
         "button",
         {
           onClick: handleCopyToClipboard,
@@ -32772,9 +32802,9 @@ function JsonLdPanel({ resourceId: resourceId2 }) {
         }
       )
     ] }),
-    loading && /* @__PURE__ */ jsx37("p", { className: "semiont-jsonld-panel__status", role: "status", children: "Loading JSON-LD\u2026" }),
-    error && !loading && /* @__PURE__ */ jsx37("p", { className: "semiont-jsonld-panel__status semiont-jsonld-panel__status--error", role: "alert", children: "Failed to load JSON-LD." }),
-    /* @__PURE__ */ jsx37(
+    loading && /* @__PURE__ */ jsx36("p", { className: "semiont-jsonld-panel__status", role: "status", children: "Loading JSON-LD\u2026" }),
+    error && !loading && /* @__PURE__ */ jsx36("p", { className: "semiont-jsonld-panel__status semiont-jsonld-panel__status--error", role: "alert", children: "Failed to load JSON-LD." }),
+    /* @__PURE__ */ jsx36(
       "div",
       {
         ref: editorRef,
@@ -32833,21 +32863,20 @@ function getTagSchemaId(annotation) {
 }
 
 // src/components/resource/panels/ReferenceEntry.tsx
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 function ReferenceEntry({
+  session,
   reference,
   isFocused,
   isHovered = false,
-  routes,
+  onOpenResource,
   annotateMode = true,
   isGenerating = false,
   ref
 }) {
   const t12 = useTranslations("ReferencesPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const semiont = session?.client;
-  const navigate = useObservableExternalNavigation();
-  const hoverProps = useHoverEmitter(reference.id);
+  const hoverProps = useHoverEmitter(session, reference.id);
   const selectedText = getAnnotationExactText4(reference) || "";
   const isResolved = isBodyResolved2(reference.body);
   const resolvedResourceUri = isResolved ? getBodySource6(reference.body) : null;
@@ -32862,7 +32891,7 @@ function ReferenceEntry({
   const resourceIcon = getResourceIcon(resolvedDocumentMediaType);
   const handleOpen = () => {
     if (resolvedResourceUri) {
-      navigate(routes.resourceDetail(resolvedResourceUri), { resourceId: resolvedResourceUri });
+      onOpenResource?.(resolvedResourceUri);
     }
   };
   const source = typeof reference.target === "object" && "source" in reference.target ? reference.target.source : "";
@@ -32907,7 +32936,7 @@ function ReferenceEntry({
       children: [
         /* @__PURE__ */ jsxs31("div", { className: "semiont-annotation-entry__header", children: [
           /* @__PURE__ */ jsxs31("div", { className: "semiont-reference-icon-group", children: [
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx37(
               "button",
               {
                 className: `semiont-reference-icon${iconIsClickable ? " semiont-reference-icon--clickable" : ""}`,
@@ -32918,7 +32947,7 @@ function ReferenceEntry({
                 children: isResolved ? "\u{1F517}" : "\u2753"
               }
             ),
-            annotateMode && isResolved && /* @__PURE__ */ jsx38(
+            annotateMode && isResolved && /* @__PURE__ */ jsx37(
               "button",
               {
                 className: "semiont-reference-unlink",
@@ -32938,8 +32967,8 @@ function ReferenceEntry({
               selectedText.length > 100 ? "..." : "",
               '"'
             ] }),
-            !selectedText && /* @__PURE__ */ jsx38("div", { className: "semiont-annotation-entry__meta", children: annotationType }),
-            resolvedDocumentName && /* @__PURE__ */ jsx38("div", { className: "semiont-reference-link", children: /* @__PURE__ */ jsxs31("span", { children: [
+            !selectedText && /* @__PURE__ */ jsx37("div", { className: "semiont-annotation-entry__meta", children: annotationType }),
+            resolvedDocumentName && /* @__PURE__ */ jsx37("div", { className: "semiont-reference-link", children: /* @__PURE__ */ jsxs31("span", { children: [
               "\u2192 ",
               resourceIcon,
               " ",
@@ -32947,7 +32976,7 @@ function ReferenceEntry({
             ] }) })
           ] })
         ] }),
-        entityTypes.length > 0 && /* @__PURE__ */ jsx38("div", { className: "semiont-annotation-entry__tags", children: entityTypes.map((type, index) => /* @__PURE__ */ jsx38(
+        entityTypes.length > 0 && /* @__PURE__ */ jsx37("div", { className: "semiont-annotation-entry__tags", children: entityTypes.map((type, index) => /* @__PURE__ */ jsx37(
           "span",
           {
             className: "semiont-tag",
@@ -32968,7 +32997,7 @@ function ReferenceEntry({
 // src/components/resource/panels/ReferencesPanel.tsx
 import { useState as useState30, useRef as useRef24, useEffect as useEffect35, useCallback as useCallback24, useMemo as useMemo11 } from "react";
 import { getTextPositionSelector as getTextPositionSelector6, getTargetSelector as getTargetSelector9 } from "@semiont/core";
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 function getSelectorDisplayText3(selector) {
   if (Array.isArray(selector)) {
     const quoteSelector = selector.find((s11) => s11.type === "TextQuoteSelector");
@@ -32983,6 +33012,8 @@ function getSelectorDisplayText3(selector) {
   return null;
 }
 function ReferencesPanel({
+  session,
+  onOpenResource,
   resourceId: resourceId2,
   annotations = [],
   isAssisting,
@@ -33002,7 +33033,6 @@ function ReferencesPanel({
   sourceLanguage
 }) {
   const t12 = useTranslations("ReferencesPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const [selectedEntityTypes, setSelectedEntityTypes] = useState30([]);
   const [lastAnnotationLog, setLastDetectionLog] = useState30(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState30([]);
@@ -33073,7 +33103,7 @@ function ReferencesPanel({
     setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     "browse:click": handleAnnotationClick2
   });
   const handleAssist = () => {
@@ -33128,9 +33158,9 @@ function ReferencesPanel({
     return () => document.removeEventListener("keydown", handleEscape);
   }, [pendingAnnotation, session]);
   return /* @__PURE__ */ jsxs32("div", { className: "semiont-panel", children: [
-    /* @__PURE__ */ jsx39(PanelHeader, { annotationType: "reference", count: annotations.length, title: t12("title") }),
+    /* @__PURE__ */ jsx38(PanelHeader, { annotationType: "reference", count: annotations.length, title: t12("title") }),
     pendingAnnotation && pendingAnnotation.motivation === "linking" && /* @__PURE__ */ jsxs32("div", { className: "semiont-annotation-prompt", "data-type": "reference", children: [
-      /* @__PURE__ */ jsx39("div", { className: "semiont-annotation-prompt__quote", children: (() => {
+      /* @__PURE__ */ jsx38("div", { className: "semiont-annotation-prompt__quote", children: (() => {
         const displayText = getSelectorDisplayText3(pendingAnnotation.selector);
         if (displayText) {
           return `"${displayText.substring(0, 100)}${displayText.length > 100 ? "..." : ""}"`;
@@ -33138,8 +33168,8 @@ function ReferencesPanel({
         return t12("fragmentSelected");
       })() }),
       allEntityTypes.length > 0 && /* @__PURE__ */ jsxs32("div", { className: "semiont-form-field", children: [
-        /* @__PURE__ */ jsx39("p", { className: "semiont-form-field__label", children: t12("entityTypesOptional") }),
-        /* @__PURE__ */ jsx39("div", { className: "semiont-tag-selector", children: allEntityTypes.map((type) => /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx38("p", { className: "semiont-form-field__label", children: t12("entityTypesOptional") }),
+        /* @__PURE__ */ jsx38("div", { className: "semiont-tag-selector", children: allEntityTypes.map((type) => /* @__PURE__ */ jsx38(
           "button",
           {
             onClick: () => togglePendingEntityType(type),
@@ -33150,8 +33180,8 @@ function ReferencesPanel({
           type
         )) })
       ] }),
-      /* @__PURE__ */ jsx39("div", { className: "semiont-annotation-prompt__footer", children: /* @__PURE__ */ jsxs32("div", { className: "semiont-annotation-prompt__actions", children: [
-        /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx38("div", { className: "semiont-annotation-prompt__footer", children: /* @__PURE__ */ jsxs32("div", { className: "semiont-annotation-prompt__actions", children: [
+        /* @__PURE__ */ jsx38(
           "button",
           {
             onClick: () => {
@@ -33187,24 +33217,24 @@ function ReferencesPanel({
             "aria-expanded": isAssistExpanded,
             type: "button",
             children: [
-              /* @__PURE__ */ jsx39("span", { children: t12("annotateReferences") }),
-              /* @__PURE__ */ jsx39("span", { className: "semiont-panel__section-chevron", "data-expanded": isAssistExpanded, children: "\u203A" })
+              /* @__PURE__ */ jsx38("span", { children: t12("annotateReferences") }),
+              /* @__PURE__ */ jsx38("span", { className: "semiont-panel__section-chevron", "data-expanded": isAssistExpanded, children: "\u203A" })
             ]
           }
         ),
         isAssistExpanded && /* @__PURE__ */ jsxs32(Fragment5, { children: [
-          !isAssisting && /* @__PURE__ */ jsx39("div", { className: "semiont-assist-widget", "data-type": "reference", children: /* @__PURE__ */ jsxs32(Fragment5, { children: [
-            lastAnnotationLog && lastAnnotationLog.length > 0 && /* @__PURE__ */ jsx39("div", { className: "semiont-assist-widget__log", children: /* @__PURE__ */ jsx39("div", { className: "semiont-assist-widget__log-items", children: lastAnnotationLog.map((item, index) => /* @__PURE__ */ jsxs32("div", { className: "semiont-assist-widget__log-item", children: [
-              /* @__PURE__ */ jsx39("span", { className: "semiont-assist-widget__log-check", children: "\u2713" }),
+          !isAssisting && /* @__PURE__ */ jsx38("div", { className: "semiont-assist-widget", "data-type": "reference", children: /* @__PURE__ */ jsxs32(Fragment5, { children: [
+            lastAnnotationLog && lastAnnotationLog.length > 0 && /* @__PURE__ */ jsx38("div", { className: "semiont-assist-widget__log", children: /* @__PURE__ */ jsx38("div", { className: "semiont-assist-widget__log-items", children: lastAnnotationLog.map((item, index) => /* @__PURE__ */ jsxs32("div", { className: "semiont-assist-widget__log-item", children: [
+              /* @__PURE__ */ jsx38("span", { className: "semiont-assist-widget__log-check", children: "\u2713" }),
               /* @__PURE__ */ jsxs32("span", { className: "semiont-assist-widget__log-type", children: [
                 item.entityType,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx39("span", { children: t12("found", { count: item.foundCount }) })
+              /* @__PURE__ */ jsx38("span", { children: t12("found", { count: item.foundCount }) })
             ] }, index)) }) }),
             /* @__PURE__ */ jsxs32("div", { className: "semiont-assist-widget__entity-types", children: [
-              /* @__PURE__ */ jsx39("p", { className: "semiont-assist-widget__label", children: t12("selectEntityTypes") }),
-              /* @__PURE__ */ jsx39("div", { className: "semiont-assist-widget__chips", children: allEntityTypes.length > 0 ? allEntityTypes.map((type) => /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx38("p", { className: "semiont-assist-widget__label", children: t12("selectEntityTypes") }),
+              /* @__PURE__ */ jsx38("div", { className: "semiont-assist-widget__chips", children: allEntityTypes.length > 0 ? allEntityTypes.map((type) => /* @__PURE__ */ jsx38(
                 "button",
                 {
                   onClick: () => {
@@ -33219,12 +33249,12 @@ function ReferencesPanel({
                   children: type
                 },
                 type
-              )) : /* @__PURE__ */ jsx39("p", { className: "semiont-assist-widget__no-types", children: t12("noEntityTypes") }) })
+              )) : /* @__PURE__ */ jsx38("p", { className: "semiont-assist-widget__no-types", children: t12("noEntityTypes") }) })
             ] }),
-            selectedEntityTypes.length > 0 && /* @__PURE__ */ jsx39("p", { className: "semiont-assist-widget__count", children: t12("typesSelected", { count: selectedEntityTypes.length }) }),
+            selectedEntityTypes.length > 0 && /* @__PURE__ */ jsx38("p", { className: "semiont-assist-widget__count", children: t12("typesSelected", { count: selectedEntityTypes.length }) }),
             /* @__PURE__ */ jsxs32("div", { className: "semiont-assist-widget__checkbox-group", children: [
               /* @__PURE__ */ jsxs32("label", { className: "semiont-assist-widget__checkbox-label", children: [
-                /* @__PURE__ */ jsx39(
+                /* @__PURE__ */ jsx38(
                   "input",
                   {
                     type: "checkbox",
@@ -33233,9 +33263,9 @@ function ReferencesPanel({
                     className: "semiont-assist-widget__checkbox"
                   }
                 ),
-                /* @__PURE__ */ jsx39("span", { children: t12("includeDescriptiveReferences") })
+                /* @__PURE__ */ jsx38("span", { children: t12("includeDescriptiveReferences") })
               ] }),
-              /* @__PURE__ */ jsx39("p", { className: "semiont-assist-widget__checkbox-hint", children: t12("descriptiveReferencesTooltip") })
+              /* @__PURE__ */ jsx38("p", { className: "semiont-assist-widget__checkbox-hint", children: t12("descriptiveReferencesTooltip") })
             ] }),
             /* @__PURE__ */ jsxs32(
               "button",
@@ -33247,13 +33277,13 @@ function ReferencesPanel({
                 "data-variant": "assist",
                 "data-type": "reference",
                 children: [
-                  /* @__PURE__ */ jsx39("span", { className: "semiont-button-icon", children: "\u2728" }),
-                  /* @__PURE__ */ jsx39("span", { children: t12("annotate") })
+                  /* @__PURE__ */ jsx38("span", { className: "semiont-button-icon", children: "\u2728" }),
+                  /* @__PURE__ */ jsx38("span", { children: t12("annotate") })
                 ]
               }
             )
           ] }) }),
-          isAssisting && progress && /* @__PURE__ */ jsx39(
+          isAssisting && progress && /* @__PURE__ */ jsx38(
             AnnotateReferencesProgressWidget,
             {
               progress,
@@ -33273,19 +33303,20 @@ function ReferencesPanel({
         ] })
       ] }),
       /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx39("div", { className: "semiont-panel__divider", children: /* @__PURE__ */ jsxs32("h3", { className: "semiont-panel__subtitle", children: [
+        /* @__PURE__ */ jsx38("div", { className: "semiont-panel__divider", children: /* @__PURE__ */ jsxs32("h3", { className: "semiont-panel__subtitle", children: [
           t12("outgoingReferences"),
           " (",
           sortedAnnotations.length,
           ")"
         ] }) }),
-        /* @__PURE__ */ jsx39("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx39("p", { className: "semiont-panel__empty-message", children: t12("noReferences") }) : sortedAnnotations.map((reference) => /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx38("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx38("p", { className: "semiont-panel__empty-message", children: t12("noReferences") }) : sortedAnnotations.map((reference) => /* @__PURE__ */ jsx38(
           ReferenceEntry,
           {
+            session,
             reference,
             isFocused: reference.id === focusedAnnotationId,
             isHovered: reference.id === hoveredAnnotationId,
-            routes,
+            onOpenResource,
             annotateMode,
             isGenerating: reference.id === generatingReferenceId,
             ref: (el) => setEntryRef(reference.id, el)
@@ -33294,7 +33325,7 @@ function ReferencesPanel({
         )) })
       ] }),
       /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx39("div", { className: "semiont-panel__divider", children: /* @__PURE__ */ jsxs32("h3", { className: "semiont-panel__subtitle", children: [
+        /* @__PURE__ */ jsx38("div", { className: "semiont-panel__divider", children: /* @__PURE__ */ jsxs32("h3", { className: "semiont-panel__subtitle", children: [
           t12("incomingReferences"),
           " (",
           referencedBy.length,
@@ -33305,12 +33336,12 @@ function ReferencesPanel({
             ")"
           ] })
         ] }) }),
-        referencedBy.length > 0 ? /* @__PURE__ */ jsx39("div", { className: "semiont-panel__list", children: referencedBy.map((ref) => {
+        referencedBy.length > 0 ? /* @__PURE__ */ jsx38("div", { className: "semiont-panel__list", children: referencedBy.map((ref) => {
           const resourceId3 = ref.target.source;
           return /* @__PURE__ */ jsxs32("div", { className: "semiont-reference-item semiont-reference-item--incoming", children: [
             /* @__PURE__ */ jsxs32("div", { className: "semiont-reference-item__header", children: [
-              /* @__PURE__ */ jsx39("span", { className: "semiont-reference-item__title", children: ref.resourceName || t12("untitledResource") }),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx38("span", { className: "semiont-reference-item__title", children: ref.resourceName || t12("untitledResource") }),
+              /* @__PURE__ */ jsx38(
                 Link,
                 {
                   href: routes.resourceDetail(resourceId3),
@@ -33326,7 +33357,7 @@ function ReferencesPanel({
               '"'
             ] })
           ] }, ref.id);
-        }) }) : /* @__PURE__ */ jsx39("p", { className: "semiont-panel__empty-message semiont-panel__empty-message--small", children: referencedByLoading ? t12("loadingEllipsis") : t12("noIncomingReferences") })
+        }) }) : /* @__PURE__ */ jsx38("p", { className: "semiont-panel__empty-message semiont-panel__empty-message--small", children: referencedByLoading ? t12("loadingEllipsis") : t12("noIncomingReferences") })
       ] })
     ] })
   ] });
@@ -33335,8 +33366,9 @@ function ReferencesPanel({
 // src/components/resource/panels/ResourceInfoPanel.tsx
 import { formatLocaleDisplay } from "@semiont/core";
 import { resourceId as makeResourceId } from "@semiont/core";
-import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function ResourceInfoPanel({
+  session,
   resourceId: resourceId2,
   documentEntityTypes,
   documentLocale,
@@ -33352,52 +33384,51 @@ function ResourceInfoPanel({
   onGenerate
 }) {
   const t12 = useTranslations("ResourceInfoPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const attribution = wasAttributedTo ? Array.isArray(wasAttributedTo) ? wasAttributedTo : [wasAttributedTo] : generator ? Array.isArray(generator) ? generator : [generator] : [];
   return /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel", children: [
-    /* @__PURE__ */ jsx40("h3", { className: "semiont-resource-info-panel__title", children: t12("title") }),
+    /* @__PURE__ */ jsx39("h3", { className: "semiont-resource-info-panel__title", children: t12("title") }),
     /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__section", children: [
-      /* @__PURE__ */ jsx40("h3", { className: "semiont-resource-info-panel__heading", children: t12("locale") }),
-      documentLocale ? /* @__PURE__ */ jsx40("div", { className: "semiont-resource-info-panel__value", children: formatLocaleDisplay(documentLocale) }) : /* @__PURE__ */ jsx40("div", { className: "semiont-resource-info-panel__value semiont-resource-info-panel__value--empty", children: t12("notSpecified") })
+      /* @__PURE__ */ jsx39("h3", { className: "semiont-resource-info-panel__heading", children: t12("locale") }),
+      documentLocale ? /* @__PURE__ */ jsx39("div", { className: "semiont-resource-info-panel__value", children: formatLocaleDisplay(documentLocale) }) : /* @__PURE__ */ jsx39("div", { className: "semiont-resource-info-panel__value semiont-resource-info-panel__value--empty", children: t12("notSpecified") })
     ] }),
     (primaryMediaType || primaryByteSize !== void 0) && /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__section", children: [
-      /* @__PURE__ */ jsx40("h3", { className: "semiont-resource-info-panel__heading", children: t12("representation") }),
+      /* @__PURE__ */ jsx39("h3", { className: "semiont-resource-info-panel__heading", children: t12("representation") }),
       /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__field-group", children: [
         primaryMediaType && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("mediaType") }),
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__value", children: primaryMediaType })
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("mediaType") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__value", children: primaryMediaType })
         ] }),
         primaryByteSize !== void 0 && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("byteSize") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("byteSize") }),
           /* @__PURE__ */ jsxs33("span", { className: "semiont-resource-info-panel__value", children: [
             primaryByteSize.toLocaleString(),
             " bytes"
           ] })
         ] }),
         storageUri && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("storageUri") }),
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__value", children: storageUri })
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("storageUri") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__value", children: storageUri })
         ] })
       ] })
     ] }),
     (dateCreated || dateModified || attribution.length > 0 || wasDerivedFrom) && /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__section", children: [
-      /* @__PURE__ */ jsx40("h3", { className: "semiont-resource-info-panel__heading", children: t12("provenance") }),
+      /* @__PURE__ */ jsx39("h3", { className: "semiont-resource-info-panel__heading", children: t12("provenance") }),
       /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__field-group", children: [
         dateCreated && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("createdAt") }),
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__value", children: new Date(dateCreated).toLocaleString() })
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("createdAt") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__value", children: new Date(dateCreated).toLocaleString() })
         ] }),
         dateModified && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("modifiedAt") }),
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__value", children: new Date(dateModified).toLocaleString() })
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("modifiedAt") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__value", children: new Date(dateModified).toLocaleString() })
         ] }),
         attribution.length > 0 && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("attributedTo") }),
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__value", children: attribution.map(renderAgentLabel).join(", ") })
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("attributedTo") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__value", children: attribution.map(renderAgentLabel).join(", ") })
         ] }),
         wasDerivedFrom && /* @__PURE__ */ jsxs33("div", { children: [
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__label", children: t12("derivedFrom") }),
-          /* @__PURE__ */ jsx40("span", { className: "semiont-resource-info-panel__value", children: (Array.isArray(wasDerivedFrom) ? wasDerivedFrom : [wasDerivedFrom]).map((id2, i13) => /* @__PURE__ */ jsxs33(
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__label", children: t12("derivedFrom") }),
+          /* @__PURE__ */ jsx39("span", { className: "semiont-resource-info-panel__value", children: (Array.isArray(wasDerivedFrom) ? wasDerivedFrom : [wasDerivedFrom]).map((id2, i13) => /* @__PURE__ */ jsxs33(
             "button",
             {
               className: "semiont-resource-info-panel__link",
@@ -33413,8 +33444,8 @@ function ResourceInfoPanel({
       ] })
     ] }),
     documentEntityTypes.length > 0 && /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__section", children: [
-      /* @__PURE__ */ jsx40("h3", { className: "semiont-resource-info-panel__heading", children: t12("entityTypeTags") }),
-      /* @__PURE__ */ jsx40("div", { className: "semiont-resource-info-panel__tag-list", children: documentEntityTypes.map((tag) => /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx39("h3", { className: "semiont-resource-info-panel__heading", children: t12("entityTypeTags") }),
+      /* @__PURE__ */ jsx39("div", { className: "semiont-resource-info-panel__tag-list", children: documentEntityTypes.map((tag) => /* @__PURE__ */ jsx39(
         "span",
         {
           className: "semiont-tag",
@@ -33436,7 +33467,7 @@ function ResourceInfoPanel({
           ]
         }
       ),
-      /* @__PURE__ */ jsx40("p", { className: "semiont-resource-info-panel__description", children: t12("generateDescription") })
+      /* @__PURE__ */ jsx39("p", { className: "semiont-resource-info-panel__description", children: t12("generateDescription") })
     ] }),
     /* @__PURE__ */ jsxs33("div", { className: "semiont-resource-info-panel__action-section", children: [
       /* @__PURE__ */ jsxs33(
@@ -33450,9 +33481,9 @@ function ResourceInfoPanel({
           ]
         }
       ),
-      /* @__PURE__ */ jsx40("p", { className: "semiont-resource-info-panel__description", children: t12("cloneDescription") })
+      /* @__PURE__ */ jsx39("p", { className: "semiont-resource-info-panel__description", children: t12("cloneDescription") })
     ] }),
-    /* @__PURE__ */ jsx40("div", { className: "semiont-resource-info-panel__action-section", children: isArchived ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
+    /* @__PURE__ */ jsx39("div", { className: "semiont-resource-info-panel__action-section", children: isArchived ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
       /* @__PURE__ */ jsxs33(
         "button",
         {
@@ -33464,7 +33495,7 @@ function ResourceInfoPanel({
           ]
         }
       ),
-      /* @__PURE__ */ jsx40("p", { className: "semiont-resource-info-panel__description", children: t12("unarchiveDescription") })
+      /* @__PURE__ */ jsx39("p", { className: "semiont-resource-info-panel__description", children: t12("unarchiveDescription") })
     ] }) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
       /* @__PURE__ */ jsxs33(
         "button",
@@ -33477,14 +33508,14 @@ function ResourceInfoPanel({
           ]
         }
       ),
-      /* @__PURE__ */ jsx40("p", { className: "semiont-resource-info-panel__description", children: t12("archiveDescription") })
+      /* @__PURE__ */ jsx39("p", { className: "semiont-resource-info-panel__description", children: t12("archiveDescription") })
     ] }) })
   ] });
 }
 
 // src/components/resource/panels/StatisticsPanel.tsx
 import { isBodyResolved as isBodyResolved3 } from "@semiont/core";
-import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 function StatisticsPanel({
   highlights,
   comments,
@@ -33503,48 +33534,48 @@ function StatisticsPanel({
     });
   });
   const entityTypesList = Array.from(entityTypeCounts.entries()).sort((a15, b8) => b8[1] - a15[1]);
-  return /* @__PURE__ */ jsx41("div", { className: "semiont-statistics-panel", children: /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__content", children: [
-    /* @__PURE__ */ jsx41("h2", { className: "semiont-statistics-panel__title", children: t12("title") }),
+  return /* @__PURE__ */ jsx40("div", { className: "semiont-statistics-panel", children: /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__content", children: [
+    /* @__PURE__ */ jsx40("h2", { className: "semiont-statistics-panel__title", children: t12("title") }),
     /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__list", children: [
       /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__item", children: [
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__label", children: t12("highlights") }),
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__value", children: highlights.length })
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__label", children: t12("highlights") }),
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__value", children: highlights.length })
       ] }),
       /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__item", children: [
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__label", children: t12("comments") }),
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__value", children: comments.length })
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__label", children: t12("comments") }),
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__value", children: comments.length })
       ] }),
       /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__item", children: [
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__label", children: t12("assessments") }),
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__value", children: assessments.length })
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__label", children: t12("assessments") }),
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__value", children: assessments.length })
       ] }),
       /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__item", children: [
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__label", children: t12("tags") }),
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__value", children: tags3.length })
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__label", children: t12("tags") }),
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__value", children: tags3.length })
       ] }),
       /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__item", children: [
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__label", children: t12("references") }),
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__value", children: references.length }),
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__label", children: t12("references") }),
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__value", children: references.length }),
         /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__subitems", children: [
           /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__subitem", children: [
-            /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__sublabel", children: t12("stub") }),
-            /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__subvalue", children: stubCount })
+            /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__sublabel", children: t12("stub") }),
+            /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__subvalue", children: stubCount })
           ] }),
           /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__subitem", children: [
-            /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__sublabel", children: t12("resolved") }),
-            /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__subvalue", children: resolvedCount })
+            /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__sublabel", children: t12("resolved") }),
+            /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__subvalue", children: resolvedCount })
           ] })
         ] })
       ] }),
       entityTypesList.length > 0 && /* @__PURE__ */ jsxs34("div", { className: "semiont-statistics-panel__entity-types", children: [
-        /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__label", children: t12("entityTypes") }),
-        /* @__PURE__ */ jsx41("div", { className: "semiont-statistics-panel__entity-list", children: entityTypesList.map(([type, count2]) => /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__label", children: t12("entityTypes") }),
+        /* @__PURE__ */ jsx40("div", { className: "semiont-statistics-panel__entity-list", children: entityTypesList.map(([type, count2]) => /* @__PURE__ */ jsxs34(
           "div",
           {
             className: "semiont-statistics-panel__entity-item",
             children: [
-              /* @__PURE__ */ jsx41("span", { className: "semiont-statistics-panel__entity-name", children: type }),
-              /* @__PURE__ */ jsx41("span", { className: "semiont-tag", "data-variant": "blue", children: count2 })
+              /* @__PURE__ */ jsx40("span", { className: "semiont-statistics-panel__entity-name", children: type }),
+              /* @__PURE__ */ jsx40("span", { className: "semiont-tag", "data-variant": "blue", children: count2 })
             ]
           },
           type
@@ -33557,15 +33588,15 @@ function StatisticsPanel({
 // src/components/resource/panels/TagEntry.tsx
 import { useMemo as useMemo12 } from "react";
 import { getAnnotationExactText as getAnnotationExactText5 } from "@semiont/core";
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 function TagEntry({
+  session,
   tag,
   isFocused,
   isHovered = false,
   ref
 }) {
-  const session = useObservable(useSemiont().activeSession$);
-  const hoverProps = useHoverEmitter(tag.id);
+  const hoverProps = useHoverEmitter(session, tag.id);
   const selectedText = getAnnotationExactText5(tag);
   const category = getTagCategory(tag);
   const schemaId = getTagSchemaId(tag);
@@ -33588,8 +33619,8 @@ function TagEntry({
       "data-focused": isFocused ? "true" : "false",
       children: [
         /* @__PURE__ */ jsxs35("div", { className: "semiont-annotation-entry__header", children: [
-          /* @__PURE__ */ jsx42("span", { className: "semiont-tag-badge", "data-variant": "tag", children: category }),
-          schema && /* @__PURE__ */ jsx42("span", { className: "semiont-annotation-entry__meta", children: schema.name })
+          /* @__PURE__ */ jsx41("span", { className: "semiont-tag-badge", "data-variant": "tag", children: category }),
+          schema && /* @__PURE__ */ jsx41("span", { className: "semiont-annotation-entry__meta", children: schema.name })
         ] }),
         /* @__PURE__ */ jsxs35("div", { className: "semiont-annotation-entry__quote", "data-type": "tag", children: [
           '"',
@@ -33609,7 +33640,7 @@ function TagEntry({
 // src/components/resource/panels/TaggingPanel.tsx
 import { useState as useState31, useEffect as useEffect36, useRef as useRef25, useCallback as useCallback25, useMemo as useMemo13 } from "react";
 import { getTextPositionSelector as getTextPositionSelector7, getTargetSelector as getTargetSelector10 } from "@semiont/core";
-import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
 function getSelectorDisplayText4(selector) {
   if (Array.isArray(selector)) {
     const quoteSelector = selector.find((s11) => s11.type === "TextQuoteSelector");
@@ -33624,6 +33655,7 @@ function getSelectorDisplayText4(selector) {
   return null;
 }
 function TaggingPanel({
+  session,
   resourceId: resourceId2,
   annotations,
   annotateMode = true,
@@ -33637,7 +33669,6 @@ function TaggingPanel({
   sourceLanguage
 }) {
   const t12 = useTranslations("TaggingPanel");
-  const session = useObservable(useSemiont().activeSession$);
   const tagSchemas$ = useMemo13(
     () => session?.client.browse.tagSchemas() ?? null,
     [session]
@@ -33667,7 +33698,7 @@ function TaggingPanel({
     setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     "browse:click": handleAnnotationClick2
   });
   const entryRefs = useRef25(/* @__PURE__ */ new Map());
@@ -33763,32 +33794,32 @@ function TaggingPanel({
     return () => document.removeEventListener("keydown", handleEscape);
   }, [pendingAnnotation, session]);
   return /* @__PURE__ */ jsxs36("div", { className: "semiont-panel", children: [
-    /* @__PURE__ */ jsx43(PanelHeader, { annotationType: "tag", count: annotations.length, title: t12("title") }),
+    /* @__PURE__ */ jsx42(PanelHeader, { annotationType: "tag", count: annotations.length, title: t12("title") }),
     /* @__PURE__ */ jsxs36("div", { ref: containerRef, className: "semiont-panel__content", children: [
       pendingAnnotation && pendingAnnotation.motivation === "tagging" && /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-prompt", "data-type": "tag", children: [
-        /* @__PURE__ */ jsx43("h3", { className: "semiont-annotation-prompt__title", children: t12("createTagForSelection") }),
-        /* @__PURE__ */ jsx43("div", { className: "semiont-annotation-prompt__quote", children: /* @__PURE__ */ jsx43("p", { className: "semiont-annotation-prompt__text", children: (() => {
+        /* @__PURE__ */ jsx42("h3", { className: "semiont-annotation-prompt__title", children: t12("createTagForSelection") }),
+        /* @__PURE__ */ jsx42("div", { className: "semiont-annotation-prompt__quote", children: /* @__PURE__ */ jsx42("p", { className: "semiont-annotation-prompt__text", children: (() => {
           const displayText = getSelectorDisplayText4(pendingAnnotation.selector);
           if (displayText) {
             return `"${displayText.substring(0, 100)}${displayText.length > 100 ? "..." : ""}"`;
           }
           return t12("fragmentSelected");
         })() }) }),
-        noSchemasRegistered && /* @__PURE__ */ jsx43("p", { className: "semiont-form__help", "data-type": "tag-no-schemas", children: t12("noSchemas") }),
+        noSchemasRegistered && /* @__PURE__ */ jsx42("p", { className: "semiont-form__help", "data-type": "tag-no-schemas", children: t12("noSchemas") }),
         !noSchemasRegistered && /* @__PURE__ */ jsxs36("div", { className: "semiont-form-field", children: [
-          /* @__PURE__ */ jsx43("label", { className: "semiont-form-field__label", children: t12("selectSchema") }),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx42("label", { className: "semiont-form-field__label", children: t12("selectSchema") }),
+          /* @__PURE__ */ jsx42(
             "select",
             {
               value: selectedSchemaId,
               onChange: (e6) => handleSchemaChange(e6.target.value),
               className: "semiont-select",
-              children: schemas.map((schema) => /* @__PURE__ */ jsx43("option", { value: schema.id, children: schema.name }, schema.id))
+              children: schemas.map((schema) => /* @__PURE__ */ jsx42("option", { value: schema.id, children: schema.name }, schema.id))
             }
           )
         ] }),
         selectedSchema && /* @__PURE__ */ jsxs36("div", { className: "semiont-form-field", children: [
-          /* @__PURE__ */ jsx43("label", { className: "semiont-form-field__label", children: t12("selectCategory") }),
+          /* @__PURE__ */ jsx42("label", { className: "semiont-form-field__label", children: t12("selectCategory") }),
           /* @__PURE__ */ jsxs36(
             "select",
             {
@@ -33816,13 +33847,13 @@ function TaggingPanel({
               },
               defaultValue: "",
               children: [
-                /* @__PURE__ */ jsx43("option", { value: "", children: t12("chooseCategory") }),
-                selectedSchema.tags.map((tag) => /* @__PURE__ */ jsx43("option", { value: tag.name, children: tag.name }, tag.name))
+                /* @__PURE__ */ jsx42("option", { value: "", children: t12("chooseCategory") }),
+                selectedSchema.tags.map((tag) => /* @__PURE__ */ jsx42("option", { value: tag.name, children: tag.name }, tag.name))
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx43("div", { className: "semiont-annotation-prompt__footer", children: /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx42("div", { className: "semiont-annotation-prompt__footer", children: /* @__PURE__ */ jsx42(
           "button",
           {
             onClick: () => session?.client.mark.cancelPending(),
@@ -33841,31 +33872,31 @@ function TaggingPanel({
             "aria-expanded": isAssistExpanded,
             type: "button",
             children: [
-              /* @__PURE__ */ jsx43("span", { children: t12("annotateTags") }),
-              /* @__PURE__ */ jsx43("span", { className: "semiont-panel__section-chevron", "data-expanded": isAssistExpanded, children: "\u203A" })
+              /* @__PURE__ */ jsx42("span", { children: t12("annotateTags") }),
+              /* @__PURE__ */ jsx42("span", { className: "semiont-panel__section-chevron", "data-expanded": isAssistExpanded, children: "\u203A" })
             ]
           }
         ),
         isAssistExpanded && /* @__PURE__ */ jsxs36("div", { className: "semiont-assist-widget", "data-assisting": isAssisting && progress ? "true" : "false", "data-type": "tag", children: [
           !isAssisting && !progress && /* @__PURE__ */ jsxs36(Fragment7, { children: [
-            noSchemasRegistered && /* @__PURE__ */ jsx43("p", { className: "semiont-form__help", "data-type": "tag-no-schemas", children: t12("noSchemas") }),
+            noSchemasRegistered && /* @__PURE__ */ jsx42("p", { className: "semiont-form__help", "data-type": "tag-no-schemas", children: t12("noSchemas") }),
             !noSchemasRegistered && /* @__PURE__ */ jsxs36("div", { className: "semiont-form-field", children: [
-              /* @__PURE__ */ jsx43("label", { className: "semiont-form-field__label", children: t12("selectSchema") }),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx42("label", { className: "semiont-form-field__label", children: t12("selectSchema") }),
+              /* @__PURE__ */ jsx42(
                 "select",
                 {
                   value: selectedSchemaId,
                   onChange: (e6) => handleSchemaChange(e6.target.value),
                   className: "semiont-select",
-                  children: schemas.map((schema) => /* @__PURE__ */ jsx43("option", { value: schema.id, children: schema.name }, schema.id))
+                  children: schemas.map((schema) => /* @__PURE__ */ jsx42("option", { value: schema.id, children: schema.name }, schema.id))
                 }
               ),
-              selectedSchema && /* @__PURE__ */ jsx43("p", { className: "semiont-form__help", children: selectedSchema.description })
+              selectedSchema && /* @__PURE__ */ jsx42("p", { className: "semiont-form__help", children: selectedSchema.description })
             ] }),
             selectedSchema && /* @__PURE__ */ jsxs36("div", { className: "semiont-form-field", children: [
-              /* @__PURE__ */ jsx43("label", { className: "semiont-form-field__label", children: t12("selectCategories") }),
+              /* @__PURE__ */ jsx42("label", { className: "semiont-form-field__label", children: t12("selectCategories") }),
               /* @__PURE__ */ jsxs36("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem" }, children: [
-                /* @__PURE__ */ jsx43(
+                /* @__PURE__ */ jsx42(
                   "button",
                   {
                     onClick: handleSelectAll,
@@ -33875,7 +33906,7 @@ function TaggingPanel({
                     children: t12("selectAll")
                   }
                 ),
-                /* @__PURE__ */ jsx43(
+                /* @__PURE__ */ jsx42(
                   "button",
                   {
                     onClick: handleDeselectAll,
@@ -33886,8 +33917,8 @@ function TaggingPanel({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx43("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: selectedSchema.tags.map((category) => /* @__PURE__ */ jsxs36("div", { className: "semiont-form__checkbox-field", children: [
-                /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx42("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: selectedSchema.tags.map((category) => /* @__PURE__ */ jsxs36("div", { className: "semiont-form__checkbox-field", children: [
+                /* @__PURE__ */ jsx42(
                   "input",
                   {
                     type: "checkbox",
@@ -33904,13 +33935,13 @@ function TaggingPanel({
                     className: "semiont-form__checkbox-label",
                     style: { display: "flex", flexDirection: "column", gap: "0.25rem" },
                     children: [
-                      /* @__PURE__ */ jsx43("span", { style: { fontWeight: 500 }, children: category.name }),
-                      /* @__PURE__ */ jsx43("span", { style: { fontSize: "var(--semiont-text-xs)", color: "var(--semiont-text-secondary)" }, children: category.description })
+                      /* @__PURE__ */ jsx42("span", { style: { fontWeight: 500 }, children: category.name }),
+                      /* @__PURE__ */ jsx42("span", { style: { fontSize: "var(--semiont-text-xs)", color: "var(--semiont-text-secondary)" }, children: category.description })
                     ]
                   }
                 )
               ] }, category.name)) }),
-              /* @__PURE__ */ jsx43("p", { className: "semiont-form__help", children: t12("categoriesSelected", { count: selectedCategories.size }) })
+              /* @__PURE__ */ jsx42("p", { className: "semiont-form__help", children: t12("categoriesSelected", { count: selectedCategories.size }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs36(
@@ -33922,14 +33953,14 @@ function TaggingPanel({
               "data-variant": "assist",
               "data-type": "tag",
               children: [
-                /* @__PURE__ */ jsx43("span", { className: "semiont-button-icon", children: "\u2728" }),
-                /* @__PURE__ */ jsx43("span", { children: t12("annotate") })
+                /* @__PURE__ */ jsx42("span", { className: "semiont-button-icon", children: "\u2728" }),
+                /* @__PURE__ */ jsx42("span", { children: t12("annotate") })
               ]
             }
           ),
           isAssisting && progress && /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-progress", "data-type": "tag", children: [
             progress.requestParams && progress.requestParams.length > 0 && /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-progress__params", "data-type": "tag", children: [
-              /* @__PURE__ */ jsx43("div", { className: "semiont-annotation-progress__params-title", children: "Request Parameters:" }),
+              /* @__PURE__ */ jsx42("div", { className: "semiont-annotation-progress__params-title", children: "Request Parameters:" }),
               progress.requestParams.map((param, idx) => /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-progress__param", children: [
                 /* @__PURE__ */ jsxs36("span", { className: "semiont-annotation-progress__param-label", children: [
                   param.label,
@@ -33941,8 +33972,8 @@ function TaggingPanel({
             ] }),
             /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-progress__status", children: [
               /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-progress__message", children: [
-                /* @__PURE__ */ jsx43("span", { className: "semiont-annotation-progress__icon", children: "\u2728" }),
-                /* @__PURE__ */ jsx43("span", { children: progress.message })
+                /* @__PURE__ */ jsx42("span", { className: "semiont-annotation-progress__icon", children: "\u2728" }),
+                /* @__PURE__ */ jsx42("span", { children: progress.message })
               ] }),
               progress.currentCategory && /* @__PURE__ */ jsxs36("div", { className: "semiont-annotation-progress__details", children: [
                 "Processing: ",
@@ -33956,7 +33987,7 @@ function TaggingPanel({
                 ] })
               ] })
             ] }),
-            progress.percentage !== void 0 && /* @__PURE__ */ jsx43("div", { className: "semiont-progress-bar", children: /* @__PURE__ */ jsx43(
+            progress.percentage !== void 0 && /* @__PURE__ */ jsx42("div", { className: "semiont-progress-bar", children: /* @__PURE__ */ jsx42(
               "div",
               {
                 className: "semiont-progress-bar__fill",
@@ -33967,9 +33998,10 @@ function TaggingPanel({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx43("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx43("p", { className: "semiont-panel__empty", children: t12("noTags") }) : sortedAnnotations.map((tag) => /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx42("div", { className: "semiont-panel__list", children: sortedAnnotations.length === 0 ? /* @__PURE__ */ jsx42("p", { className: "semiont-panel__empty", children: t12("noTags") }) : sortedAnnotations.map((tag) => /* @__PURE__ */ jsx42(
         TagEntry,
         {
+          session,
           tag,
           isFocused: tag.id === focusedAnnotationId,
           isHovered: tag.id === hoveredAnnotationId,
@@ -33983,7 +34015,7 @@ function TaggingPanel({
 
 // src/components/resource/panels/UnifiedAnnotationsPanel.tsx
 import { useState as useState32, useEffect as useEffect37 } from "react";
-import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 var TAB_ORDER = ["statistics", "reference", "highlight", "assessment", "comment", "tag"];
 function UnifiedAnnotationsPanel(props) {
   const t12 = useTranslations("UnifiedAnnotationsPanel");
@@ -34046,38 +34078,38 @@ function UnifiedAnnotationsPanel(props) {
     return `semiont-unified-panel__tab-button${isActive ? " semiont-unified-panel__tab-button--active" : ""}`;
   };
   return /* @__PURE__ */ jsxs37("div", { className: "semiont-unified-panel", children: [
-    /* @__PURE__ */ jsx44("h3", { className: "semiont-unified-panel__title", children: t12("title") }),
-    /* @__PURE__ */ jsx44("div", { className: "semiont-unified-panel__tabs", children: TAB_ORDER.map((key) => {
+    /* @__PURE__ */ jsx43("h3", { className: "semiont-unified-panel__title", children: t12("title") }),
+    /* @__PURE__ */ jsx43("div", { className: "semiont-unified-panel__tabs", children: TAB_ORDER.map((key) => {
       if (key === "statistics") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           "button",
           {
             onClick: () => handleTabClick(key),
             className: tabButtonClass(key),
             title: t12(key),
             "aria-pressed": activeTab === key,
-            children: /* @__PURE__ */ jsx44("span", { className: "semiont-unified-panel__tab-icon", children: "\u{1F4CA}" })
+            children: /* @__PURE__ */ jsx43("span", { className: "semiont-unified-panel__tab-icon", children: "\u{1F4CA}" })
           },
           key
         );
       }
       const annotator = props.annotators[key];
       if (!annotator) return null;
-      return /* @__PURE__ */ jsx44(
+      return /* @__PURE__ */ jsx43(
         "button",
         {
           onClick: () => handleTabClick(key),
           className: tabButtonClass(key),
           title: t12(key),
           "aria-pressed": activeTab === key,
-          children: /* @__PURE__ */ jsx44("span", { className: "semiont-unified-panel__tab-icon", children: annotator.iconEmoji })
+          children: /* @__PURE__ */ jsx43("span", { className: "semiont-unified-panel__tab-icon", children: annotator.iconEmoji })
         },
         key
       );
     }) }),
-    /* @__PURE__ */ jsx44("div", { className: "semiont-unified-panel__content", children: (() => {
+    /* @__PURE__ */ jsx43("div", { className: "semiont-unified-panel__content", children: (() => {
       if (activeTab === "statistics") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           StatisticsPanel,
           {
             highlights: grouped.highlight || [],
@@ -34094,6 +34126,7 @@ function UnifiedAnnotationsPanel(props) {
       const isAssisting = props.assistingMotivation === annotator.motivation;
       const progress = isAssisting ? props.progress ?? null : null;
       const commonProps = {
+        session: props.session,
         resourceId: props.resourceId,
         annotations,
         pendingAnnotation: props.pendingAnnotation,
@@ -34107,7 +34140,7 @@ function UnifiedAnnotationsPanel(props) {
         hoveredAnnotationId: props.hoveredAnnotationId
       };
       if (activeTab === "highlight") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           HighlightPanel,
           {
             ...commonProps
@@ -34115,9 +34148,11 @@ function UnifiedAnnotationsPanel(props) {
         );
       }
       if (activeTab === "reference") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           ReferencesPanel,
           {
+            session: commonProps.session,
+            onOpenResource: props.onOpenResource,
             resourceId: commonProps.resourceId,
             annotations: commonProps.annotations,
             pendingAnnotation: commonProps.pendingAnnotation,
@@ -34139,7 +34174,7 @@ function UnifiedAnnotationsPanel(props) {
         );
       }
       if (activeTab === "assessment") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           AssessmentPanel,
           {
             ...commonProps
@@ -34147,7 +34182,7 @@ function UnifiedAnnotationsPanel(props) {
         );
       }
       if (activeTab === "comment") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           CommentsPanel,
           {
             ...commonProps
@@ -34155,7 +34190,7 @@ function UnifiedAnnotationsPanel(props) {
         );
       }
       if (activeTab === "tag") {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx43(
           TaggingPanel,
           {
             ...commonProps
@@ -34167,6 +34202,20 @@ function UnifiedAnnotationsPanel(props) {
   ] });
 }
 
+// src/components/viewers/ImageViewer.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+function ImageViewer({ imageUrl, alt = "Resource image" }) {
+  return /* @__PURE__ */ jsx44("div", { className: "semiont-image-viewer", children: /* @__PURE__ */ jsx44(
+    "img",
+    {
+      src: imageUrl,
+      alt,
+      className: "semiont-image-viewer__image",
+      style: { imageRendering: "auto" }
+    }
+  ) });
+}
+
 // src/components/navigation/Footer.tsx
 import { useState as useState33 } from "react";
 import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -44157,6 +44206,8 @@ function ResourceViewerPage({
               activePanel === "annotations" && !resource.archived && /* @__PURE__ */ jsx93(
                 UnifiedAnnotationsPanel,
                 {
+                  session: session ?? null,
+                  onOpenResource: handleViewerOpenResource,
                   annotations,
                   annotators: ANNOTATORS,
                   annotateMode,
@@ -44193,6 +44244,7 @@ function ResourceViewerPage({
               activePanel === "info" && /* @__PURE__ */ jsx93(
                 ResourceInfoPanel,
                 {
+                  session: session ?? null,
                   resourceId: rUri,
                   documentEntityTypes,
                   documentLocale: getLanguage(resource),