@semiont/react-ui 0.2.33-build.81 → 0.2.33-build.83

package/dist/index.mjs

@@ -1,22 +1,32 @@
 'use client';
+import {
+  HOVER_DELAY_MS,
+  createHoverHandlers,
+  useAttentionFlow,
+  useEventSubscription,
+  useEventSubscriptions,
+  useHoverEmitter
+} from "./chunk-FC6SGLLT.mjs";
 import {
   AVAILABLE_LOCALES,
   ApiClientProvider,
-  EventBusProvider,
   OpenResourcesProvider,
   SessionProvider,
   ToastContainer,
   ToastProvider,
   TranslationProvider,
-  resetEventBusForTesting,
   useApiClient,
-  useEventBus,
   useOpenResources,
   usePreloadTranslations,
   useSessionContext,
   useToast,
   useTranslations
-} from "./chunk-QB52Q7EQ.mjs";
+} from "./chunk-YPYLOBA2.mjs";
+import {
+  EventBusProvider,
+  resetEventBusForTesting,
+  useEventBus
+} from "./chunk-XS27QKGP.mjs";
 import "./chunk-D7NBW4RV.mjs";
 import {
   __commonJS,
@@ -18930,123 +18940,11 @@ function useCacheManager() {
   return context;
 }
 
-// src/contexts/useResolutionFlow.ts
-import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef7, useState as useState8 } from "react";
-import { resourceAnnotationUri, accessToken as accessToken3 } from "@semiont/api-client";
-import { uriToAnnotationIdOrPassthrough } from "@semiont/core";
-function toAccessToken2(token) {
-  return token ? accessToken3(token) : void 0;
-}
-function useResolutionFlow(emitter, config) {
-  const token = useAuthToken();
-  const [searchModalOpen, setSearchModalOpen] = useState8(false);
-  const [pendingReferenceId, setPendingReferenceId] = useState8(null);
-  const onCloseSearchModal = useCallback8(() => {
-    setSearchModalOpen(false);
-  }, []);
-  const configRef = useRef7(config);
-  useEffect10(() => {
-    configRef.current = config;
-  });
-  useEffect10(() => {
-    const getCurrentConfig = () => configRef.current;
-    const handleAnnotationUpdateBody = async (event) => {
-      try {
-        const { client: currentClient, resourceUri: currentResourceUri } = getCurrentConfig();
-        const annotationIdSegment = uriToAnnotationIdOrPassthrough(event.annotationUri);
-        const nestedUri = resourceAnnotationUri(`${currentResourceUri}/annotations/${annotationIdSegment}`);
-        await currentClient.updateAnnotationBody(nestedUri, {
-          resourceId: event.resourceId,
-          operations: event.operations
-        }, { auth: toAccessToken2(token) });
-        emitter.emit("annotation:body-updated", { annotationUri: event.annotationUri });
-      } catch (error) {
-        console.error("Failed to update annotation body:", error);
-        emitter.emit("annotation:body-update-failed", { error });
-      }
-    };
-    const handleReferenceLink = (event) => {
-      emitter.emit("resolution:search-requested", {
-        referenceId: event.annotationUri,
-        searchTerm: event.searchTerm
-      });
-    };
-    emitter.on("annotation:update-body", handleAnnotationUpdateBody);
-    emitter.on("reference:link", handleReferenceLink);
-    return () => {
-      emitter.off("annotation:update-body", handleAnnotationUpdateBody);
-      emitter.off("reference:link", handleReferenceLink);
-    };
-  }, [emitter, token]);
-  useEffect10(() => {
-    const handleResolutionSearchRequested = (event) => {
-      setPendingReferenceId(event.referenceId);
-      setSearchModalOpen(true);
-    };
-    emitter.on("resolution:search-requested", handleResolutionSearchRequested);
-    return () => {
-      emitter.off("resolution:search-requested", handleResolutionSearchRequested);
-    };
-  }, [emitter]);
-  return { searchModalOpen, pendingReferenceId, onCloseSearchModal };
-}
-
-// src/contexts/useEventSubscription.ts
-import { useEffect as useEffect11, useRef as useRef8, useMemo } from "react";
-function useEventSubscription(eventName, handler) {
-  const eventBus = useEventBus();
-  const handlerRef = useRef8(handler);
-  useEffect11(() => {
-    handlerRef.current = handler;
-  });
-  useEffect11(() => {
-    const stableHandler = (payload) => {
-      handlerRef.current(payload);
-    };
-    eventBus.on(eventName, stableHandler);
-    return () => {
-      eventBus.off(eventName, stableHandler);
-    };
-  }, [eventName]);
-}
-function useEventSubscriptions(subscriptions) {
-  const eventBus = useEventBus();
-  const handlersRef = useRef8(subscriptions);
-  useEffect11(() => {
-    handlersRef.current = subscriptions;
-  });
-  const eventNames = useMemo(
-    () => Object.keys(subscriptions).sort(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [Object.keys(subscriptions).sort().join(",")]
-  );
-  useEffect11(() => {
-    const stableHandlers = /* @__PURE__ */ new Map();
-    for (const eventName of eventNames) {
-      const stableHandler = (payload) => {
-        const currentHandler = handlersRef.current[eventName];
-        if (currentHandler) {
-          currentHandler(payload);
-        } else {
-          console.warn("[useEventSubscriptions] No current handler found for:", eventName);
-        }
-      };
-      stableHandlers.set(eventName, stableHandler);
-      eventBus.on(eventName, stableHandler);
-    }
-    return () => {
-      for (const [eventName, stableHandler] of stableHandlers) {
-        eventBus.off(eventName, stableHandler);
-      }
-    };
-  }, [eventNames]);
-}
-
 // src/contexts/ResourceAnnotationsContext.tsx
-import { createContext as createContext6, useContext as useContext6, useState as useState10, useCallback as useCallback10, useMemo as useMemo2 } from "react";
+import { createContext as createContext6, useContext as useContext6, useState as useState9, useCallback as useCallback9, useMemo } from "react";
 
 // src/components/LiveRegion.tsx
-import { useState as useState9, createContext as createContext5, useContext as useContext5, useCallback as useCallback9 } from "react";
+import { useState as useState8, createContext as createContext5, useContext as useContext5, useCallback as useCallback8 } from "react";
 import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var LiveRegionContext = createContext5(null);
 function useLiveRegion() {
@@ -19058,9 +18956,9 @@ function useLiveRegion() {
   return context;
 }
 function LiveRegionProvider({ children }) {
-  const [politeMessage, setPoliteMessage] = useState9("");
-  const [assertiveMessage, setAssertiveMessage] = useState9("");
-  const announce = useCallback9((message, priority = "polite") => {
+  const [politeMessage, setPoliteMessage] = useState8("");
+  const [assertiveMessage, setAssertiveMessage] = useState8("");
+  const announce = useCallback8((message, priority = "polite") => {
     if (priority === "assertive") {
       setAssertiveMessage(message);
       setTimeout(() => setAssertiveMessage(""), 1e3);
@@ -19095,14 +18993,14 @@ function LiveRegionProvider({ children }) {
 }
 function useSearchAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceSearchResults = useCallback9((count2, query) => {
+  const announceSearchResults = useCallback8((count2, query) => {
     if (count2 === 0) {
       announce(`No results found for ${query}`, "polite");
     } else {
       announce(`${count2} result${count2 === 1 ? "" : "s"} found for ${query}`, "polite");
     }
   }, [announce]);
-  const announceSearching = useCallback9(() => {
+  const announceSearching = useCallback8(() => {
     announce("Searching...", "polite");
   }, [announce]);
   return {
@@ -19112,26 +19010,26 @@ function useSearchAnnouncements() {
 }
 function useDocumentAnnouncements(annotators) {
   const { announce } = useLiveRegion();
-  const announceDocumentSaved = useCallback9(() => {
+  const announceDocumentSaved = useCallback8(() => {
     announce("Document saved successfully", "polite");
   }, [announce]);
-  const announceDocumentDeleted = useCallback9(() => {
+  const announceDocumentDeleted = useCallback8(() => {
     announce("Document deleted", "polite");
   }, [announce]);
-  const announceAnnotationCreated = useCallback9((annotation) => {
+  const announceAnnotationCreated = useCallback8((annotation) => {
     const metadata = annotators ? Object.values(annotators).find((a15) => a15.matchesAnnotation(annotation)) : null;
     const message = metadata?.announceOnCreate ?? "Annotation created";
     announce(message, "polite");
   }, [announce, annotators]);
-  const announceAnnotationDeleted = useCallback9(() => {
+  const announceAnnotationDeleted = useCallback8(() => {
     announce("Annotation deleted", "polite");
   }, [announce]);
-  const announceAnnotationUpdated = useCallback9((annotation) => {
+  const announceAnnotationUpdated = useCallback8((annotation) => {
     const metadata = annotators ? Object.values(annotators).find((a15) => a15.matchesAnnotation(annotation)) : null;
     const message = `${metadata?.displayName ?? "Annotation"} updated`;
     announce(message, "polite");
   }, [announce, annotators]);
-  const announceError = useCallback9((message) => {
+  const announceError = useCallback8((message) => {
     announce(`Error: ${message}`, "assertive");
   }, [announce]);
   return {
@@ -19145,18 +19043,18 @@ function useDocumentAnnouncements(annotators) {
 }
 function useResourceLoadingAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceResourceLoading = useCallback9((resourceName) => {
+  const announceResourceLoading = useCallback8((resourceName) => {
     const message = resourceName ? `Loading ${resourceName}...` : "Loading resource...";
     announce(message, "polite");
   }, [announce]);
-  const announceResourceLoaded = useCallback9((resourceName) => {
+  const announceResourceLoaded = useCallback8((resourceName) => {
     announce(`${resourceName} loaded successfully`, "polite");
   }, [announce]);
-  const announceResourceLoadError = useCallback9((resourceName) => {
+  const announceResourceLoadError = useCallback8((resourceName) => {
     const message = resourceName ? `Failed to load ${resourceName}` : "Failed to load resource";
     announce(message, "assertive");
   }, [announce]);
-  const announceResourceUpdating = useCallback9((resourceName) => {
+  const announceResourceUpdating = useCallback8((resourceName) => {
     announce(`Updating ${resourceName}...`, "polite");
   }, [announce]);
   return {
@@ -19168,16 +19066,16 @@ function useResourceLoadingAnnouncements() {
 }
 function useFormAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceFormSubmitting = useCallback9(() => {
+  const announceFormSubmitting = useCallback8(() => {
     announce("Submitting form...", "polite");
   }, [announce]);
-  const announceFormSuccess = useCallback9((message) => {
+  const announceFormSuccess = useCallback8((message) => {
     announce(message || "Form submitted successfully", "polite");
   }, [announce]);
-  const announceFormError = useCallback9((message) => {
+  const announceFormError = useCallback8((message) => {
     announce(message || "Form submission failed. Please check your entries and try again.", "assertive");
   }, [announce]);
-  const announceFormValidationError = useCallback9((fieldCount) => {
+  const announceFormValidationError = useCallback8((fieldCount) => {
     const message = fieldCount === 1 ? "There is 1 field with an error" : `There are ${fieldCount} fields with errors`;
     announce(message, "assertive");
   }, [announce]);
@@ -19190,10 +19088,10 @@ function useFormAnnouncements() {
 }
 function useLanguageChangeAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceLanguageChanging = useCallback9((newLanguage) => {
+  const announceLanguageChanging = useCallback8((newLanguage) => {
     announce(`Changing language to ${newLanguage}...`, "polite");
   }, [announce]);
-  const announceLanguageChanged = useCallback9((newLanguage) => {
+  const announceLanguageChanged = useCallback8((newLanguage) => {
     announce(`Language changed to ${newLanguage}`, "polite");
   }, [announce]);
   return {
@@ -19206,11 +19104,11 @@ function useLanguageChangeAnnouncements() {
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ResourceAnnotationsContext = createContext6(void 0);
 function ResourceAnnotationsProvider({ children }) {
-  const [newAnnotationIds, setNewAnnotationIds] = useState10(/* @__PURE__ */ new Set());
+  const [newAnnotationIds, setNewAnnotationIds] = useState9(/* @__PURE__ */ new Set());
   const { announceAnnotationCreated, announceError } = useDocumentAnnouncements();
   const annotations = useAnnotations();
   const createAnnotationMutation = annotations.create.useMutation();
-  const createAnnotation = useCallback10(async (rUri, motivation, selector, body = []) => {
+  const createAnnotation = useCallback9(async (rUri, motivation, selector, body = []) => {
     try {
       const createData = {
         motivation,
@@ -19242,14 +19140,14 @@ function ResourceAnnotationsProvider({ children }) {
       throw err;
     }
   }, [createAnnotationMutation, announceAnnotationCreated, announceError]);
-  const clearNewAnnotationId = useCallback10((id2) => {
+  const clearNewAnnotationId = useCallback9((id2) => {
     setNewAnnotationIds((prev) => {
       const next = new Set(prev);
       next.delete(id2);
       return next;
     });
   }, []);
-  const triggerSparkleAnimation = useCallback10((annotationId) => {
+  const triggerSparkleAnimation = useCallback9((annotationId) => {
     setNewAnnotationIds((prev) => new Set(prev).add(annotationId));
     setTimeout(() => {
       setNewAnnotationIds((prev) => {
@@ -19259,7 +19157,7 @@ function ResourceAnnotationsProvider({ children }) {
       });
     }, 6e3);
   }, []);
-  const contextValue = useMemo2(
+  const contextValue = useMemo(
     () => ({
       newAnnotationIds,
       createAnnotation,
@@ -19279,7 +19177,7 @@ function useResourceAnnotations() {
 }
 
 // src/components/CodeMirrorRenderer.tsx
-import { useEffect as useEffect12, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useRef as useRef7 } from "react";
 
 // ../../node_modules/@codemirror/autocomplete/dist/index.js
 var CompletionContext = class {
@@ -26754,18 +26652,18 @@ function CodeMirrorRenderer({
   getTargetDocumentName,
   generatingReferenceId
 }) {
-  const containerRef = useRef9(null);
-  const viewRef = useRef9(null);
-  const contentRef = useRef9(content4);
+  const containerRef = useRef7(null);
+  const viewRef = useRef7(null);
+  const contentRef = useRef7(content4);
   const convertedSegments = convertSegmentPositions(segments, content4);
-  const segmentsRef = useRef9(convertedSegments);
-  const lineNumbersCompartment = useRef9(new Compartment());
-  const eventBusRef = useRef9(eventBus);
-  const getTargetDocumentNameRef = useRef9(getTargetDocumentName);
+  const segmentsRef = useRef7(convertedSegments);
+  const lineNumbersCompartment = useRef7(new Compartment());
+  const eventBusRef = useRef7(eventBus);
+  const getTargetDocumentNameRef = useRef7(getTargetDocumentName);
   segmentsRef.current = segments;
   eventBusRef.current = eventBus;
   getTargetDocumentNameRef.current = getTargetDocumentName;
-  useEffect12(() => {
+  useEffect10(() => {
     if (!containerRef.current || viewRef.current) return;
     const annotationDecorationsField = createAnnotationDecorationsField();
     const state = EditorState.create({
@@ -26855,31 +26753,31 @@ function CodeMirrorRenderer({
     contentRef.current = content4;
     containerRef.current.__cmView = view;
     const container = view.dom;
+    const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
+      (annotationId) => eventBusRef.current?.emit("annotation:hover", { annotationId })
+    );
     const handleMouseOver = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
       const annotationId = annotationElement?.getAttribute("data-annotation-id");
-      if (annotationId && eventBusRef.current) {
-        eventBusRef.current.emit("annotation:hover", { annotationId });
-      }
+      if (annotationId) handleMouseEnter(annotationId);
     };
     const handleMouseOut = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
-      if (annotationElement && eventBusRef.current) {
-        eventBusRef.current.emit("annotation:hover", { annotationId: null });
-      }
+      if (annotationElement) handleMouseLeave();
     };
     container.addEventListener("mouseover", handleMouseOver);
     container.addEventListener("mouseout", handleMouseOut);
     return () => {
       container.removeEventListener("mouseover", handleMouseOver);
       container.removeEventListener("mouseout", handleMouseOut);
+      cleanupHover();
       view.destroy();
       viewRef.current = null;
     };
   }, []);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current) return;
     const currentContent = viewRef.current.state.doc.toString();
     if (content4 === currentContent) return;
@@ -26895,19 +26793,19 @@ function CodeMirrorRenderer({
     });
     contentRef.current = content4;
   }, [content4]);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current) return;
     viewRef.current.dispatch({
       effects: lineNumbersCompartment.current.reconfigure(showLineNumbers ? lineNumbers() : [])
     });
   }, [showLineNumbers]);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current) return;
     viewRef.current.dispatch({
       effects: updateAnnotationsEffect.of({ segments: convertedSegments, ...newAnnotationIds && { newAnnotationIds } })
     });
   }, [convertedSegments, newAnnotationIds]);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current || !enableWidgets) return;
     viewRef.current.dispatch({
       effects: updateWidgetsEffect.of({
@@ -26919,7 +26817,7 @@ function CodeMirrorRenderer({
       })
     });
   }, [content4, convertedSegments, enableWidgets, generatingReferenceId]);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current || !hoveredAnnotationId) return void 0;
     const view = viewRef.current;
     const element2 = view.contentDOM.querySelector(
@@ -26947,7 +26845,7 @@ function CodeMirrorRenderer({
       element2.classList.remove("annotation-pulse");
     };
   }, [hoveredAnnotationId]);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current || !hoveredCommentId) return void 0;
     const view = viewRef.current;
     const element2 = view.contentDOM.querySelector(
@@ -26975,7 +26873,7 @@ function CodeMirrorRenderer({
       element2.classList.remove("annotation-pulse");
     };
   }, [hoveredCommentId]);
-  useEffect12(() => {
+  useEffect10(() => {
     if (!viewRef.current || !scrollToAnnotationId) return;
     const view = viewRef.current;
     const element2 = view.contentDOM.querySelector(
@@ -27174,7 +27072,7 @@ function AsyncErrorBoundary({ children }) {
 }
 
 // src/components/ResizeHandle.tsx
-import { useRef as useRef10, useCallback as useCallback11, useEffect as useEffect13, useState as useState11 } from "react";
+import { useRef as useRef8, useCallback as useCallback10, useEffect as useEffect11, useState as useState10 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function ResizeHandle({
   onResize,
@@ -27183,14 +27081,14 @@ function ResizeHandle({
   position: position3 = "left",
   ariaLabel = "Resize panel"
 }) {
-  const [isDragging, setIsDragging] = useState11(false);
-  const startXRef = useRef10(0);
-  const startWidthRef = useRef10(0);
-  const onResizeRef = useRef10(onResize);
-  useEffect13(() => {
+  const [isDragging, setIsDragging] = useState10(false);
+  const startXRef = useRef8(0);
+  const startWidthRef = useRef8(0);
+  const onResizeRef = useRef8(onResize);
+  useEffect11(() => {
     onResizeRef.current = onResize;
   });
-  const handleMouseDown = useCallback11((e6) => {
+  const handleMouseDown = useCallback10((e6) => {
     e6.preventDefault();
     setIsDragging(true);
     startXRef.current = e6.clientX;
@@ -27199,7 +27097,7 @@ function ResizeHandle({
       startWidthRef.current = parent.offsetWidth;
     }
   }, []);
-  const handleMouseMove = useCallback11((e6) => {
+  const handleMouseMove = useCallback10((e6) => {
     if (!isDragging) return;
     const deltaX = e6.clientX - startXRef.current;
     const widthDelta = position3 === "left" ? -deltaX : deltaX;
@@ -27207,10 +27105,10 @@ function ResizeHandle({
     const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
     onResizeRef.current(constrainedWidth);
   }, [isDragging, minWidth, maxWidth, position3]);
-  const handleMouseUp = useCallback11(() => {
+  const handleMouseUp = useCallback10(() => {
     setIsDragging(false);
   }, []);
-  const handleKeyDown = useCallback11((e6) => {
+  const handleKeyDown = useCallback10((e6) => {
     const parent = e6.target.parentElement;
     if (!parent) return;
     const currentWidth = parent.offsetWidth;
@@ -27238,7 +27136,7 @@ function ResizeHandle({
       onResizeRef.current(constrainedWidth);
     }
   }, [minWidth, maxWidth, position3]);
-  useEffect13(() => {
+  useEffect11(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -27396,7 +27294,7 @@ function Toolbar({
 }
 
 // src/components/settings/SettingsPanel.tsx
-import React6, { useEffect as useEffect14 } from "react";
+import React6, { useEffect as useEffect12 } from "react";
 import { LOCALES } from "@semiont/api-client";
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function SettingsPanel({
@@ -27414,7 +27312,7 @@ function SettingsPanel({
     announceLanguageChanging(localeName);
     eventBus.emit("settings:locale-changed", { locale: newLocale });
   };
-  useEffect14(() => {
+  useEffect12(() => {
     if (locale !== previousLocale && !isPendingLocaleChange) {
       const localeName = LOCALES.find((l10) => l10.code === locale)?.nativeName || locale;
       announceLanguageChanged(localeName);
@@ -27511,7 +27409,7 @@ function SettingsPanel({
 }
 
 // src/components/annotation/AnnotateToolbar.tsx
-import React7, { useState as useState12, useRef as useRef11, useEffect as useEffect15 } from "react";
+import React7, { useState as useState11, useRef as useRef9, useEffect as useEffect13 } from "react";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function DropdownGroup({
   label,
@@ -27522,7 +27420,7 @@ function DropdownGroup({
   onPin,
   containerRef
 }) {
-  const dropdownRef = useRef11(null);
+  const dropdownRef = useRef9(null);
   const handleKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -27585,23 +27483,23 @@ function AnnotateToolbar({
     const annotator = Object.values(annotators).find((a15) => a15.motivation === motivation);
     return annotator?.iconEmoji || "\u2753";
   };
-  const [modeHovered, setModeHovered] = useState12(false);
-  const [modePinned, setModePinned] = useState12(false);
-  const [clickHovered, setClickHovered] = useState12(false);
-  const [clickPinned, setClickPinned] = useState12(false);
-  const [selectionHovered, setSelectionHovered] = useState12(false);
-  const [selectionPinned, setSelectionPinned] = useState12(false);
-  const [shapeHovered, setShapeHovered] = useState12(false);
-  const [shapePinned, setShapePinned] = useState12(false);
-  const modeRef = useRef11(null);
-  const clickRef = useRef11(null);
-  const selectionRef = useRef11(null);
-  const shapeRef = useRef11(null);
+  const [modeHovered, setModeHovered] = useState11(false);
+  const [modePinned, setModePinned] = useState11(false);
+  const [clickHovered, setClickHovered] = useState11(false);
+  const [clickPinned, setClickPinned] = useState11(false);
+  const [selectionHovered, setSelectionHovered] = useState11(false);
+  const [selectionPinned, setSelectionPinned] = useState11(false);
+  const [shapeHovered, setShapeHovered] = useState11(false);
+  const [shapePinned, setShapePinned] = useState11(false);
+  const modeRef = useRef9(null);
+  const clickRef = useRef9(null);
+  const selectionRef = useRef9(null);
+  const shapeRef = useRef9(null);
   const modeExpanded = modeHovered || modePinned;
   const clickExpanded = clickHovered || clickPinned;
   const selectionExpanded = selectionHovered || selectionPinned;
   const shapeExpanded = shapeHovered || shapePinned;
-  useEffect15(() => {
+  useEffect13(() => {
     const handleClickOutside = (event) => {
       if (modePinned && modeRef.current && !modeRef.current.contains(event.target)) {
         setModePinned(false);
@@ -27619,7 +27517,7 @@ function AnnotateToolbar({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [modePinned, clickPinned, selectionPinned, shapePinned]);
-  useEffect15(() => {
+  useEffect13(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         setModePinned(false);
@@ -27719,10 +27617,17 @@ function AnnotateToolbar({
         onHoverChange: setClickHovered,
         onPin: () => setClickPinned(!clickPinned),
         containerRef: clickRef,
-        collapsedContent: /* @__PURE__ */ jsxs6("div", { className: "semiont-dropdown-display", children: [
-          /* @__PURE__ */ jsx15("span", { className: "semiont-dropdown-icon", children: clickActions.find((a15) => a15.action === selectedClick)?.icon }),
-          /* @__PURE__ */ jsx15("span", { className: "semiont-dropdown-label", children: clickActions.find((a15) => a15.action === selectedClick)?.label })
-        ] }),
+        collapsedContent: /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: "semiont-dropdown-display",
+            "data-delete": clickActions.find((a15) => a15.action === selectedClick)?.isDelete ? "true" : "false",
+            children: [
+              /* @__PURE__ */ jsx15("span", { className: "semiont-dropdown-icon", children: clickActions.find((a15) => a15.action === selectedClick)?.icon }),
+              /* @__PURE__ */ jsx15("span", { className: "semiont-dropdown-label", children: clickActions.find((a15) => a15.action === selectedClick)?.label })
+            ]
+          }
+        ),
         expandedContent: /* @__PURE__ */ jsx15(Fragment2, { children: clickActions.map(({ action, icon, label, isDelete }) => /* @__PURE__ */ jsx15(React7.Fragment, { children: renderButton(icon, label, selectedClick === action, () => handleClickClick(action), isDelete) }, action)) })
       }
     ),
@@ -27794,7 +27699,7 @@ function AnnotateToolbar({
 }
 
 // src/components/annotation-popups/JsonLdView.tsx
-import { useEffect as useEffect16, useRef as useRef12 } from "react";
+import { useEffect as useEffect14, useRef as useRef10 } from "react";
 
 // ../../node_modules/@lezer/json/dist/index.js
 var jsonHighlighting = styleTags({
@@ -27998,14 +27903,14 @@ var oneDark = [oneDarkTheme, /* @__PURE__ */ syntaxHighlighting(oneDarkHighlight
 // src/components/annotation-popups/JsonLdView.tsx
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function JsonLdView({ annotation, onBack }) {
-  const editorRef = useRef12(null);
-  const viewRef = useRef12(null);
+  const editorRef = useRef10(null);
+  const viewRef = useRef10(null);
   const { showLineNumbers } = useLineNumbers();
-  const onBackRef = useRef12(onBack);
-  useEffect16(() => {
+  const onBackRef = useRef10(onBack);
+  useEffect14(() => {
     onBackRef.current = onBack;
   });
-  useEffect16(() => {
+  useEffect14(() => {
     const handleKeyDown = (e6) => {
       if (e6.key === "Escape") {
         onBackRef.current();
@@ -28014,7 +27919,7 @@ function JsonLdView({ annotation, onBack }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  useEffect16(() => {
+  useEffect14(() => {
     if (!editorRef.current) return;
     const isDarkMode = document.documentElement.classList.contains("dark");
     const jsonContent = JSON.stringify(annotation, null, 2);
@@ -29684,7 +29589,7 @@ function PopupContainer({ children, position: position3, onClose, isOpen, wide =
 }
 
 // src/components/image-annotation/AnnotationOverlay.tsx
-import { useRef as useRef13 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { getSvgSelector, isHighlight as isHighlight3, isReference as isReference3, isAssessment as isAssessment2, isComment as isComment3, isTag as isTag4, isBodyResolved, isResolvedReference as isResolvedReference3 } from "@semiont/api-client";
 import { parseSvgSelector } from "@semiont/api-client";
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -29730,19 +29635,10 @@ function AnnotationOverlay({
 }) {
   const scaleX = displayWidth / imageWidth;
   const scaleY = displayHeight / imageHeight;
-  const currentHover = useRef13(null);
-  const handleMouseEnter = (annotationId) => {
-    if (currentHover.current !== annotationId) {
-      currentHover.current = annotationId;
-      eventBus?.emit("annotation:hover", { annotationId });
-    }
-  };
-  const handleMouseLeave = () => {
-    if (currentHover.current !== null) {
-      currentHover.current = null;
-      eventBus?.emit("annotation:hover", { annotationId: null });
-    }
-  };
+  const { handleMouseEnter, handleMouseLeave } = useMemo2(
+    () => createHoverHandlers((annotationId) => eventBus?.emit("annotation:hover", { annotationId })),
+    [eventBus]
+  );
   return /* @__PURE__ */ jsx18(
     "svg",
     {
@@ -29908,7 +29804,7 @@ function AnnotationOverlay({
 }
 
 // src/components/image-annotation/SvgDrawingCanvas.tsx
-import { useRef as useRef14, useState as useState14, useEffect as useEffect18, useCallback as useCallback12, useMemo as useMemo3 } from "react";
+import { useRef as useRef11, useState as useState13, useEffect as useEffect16, useCallback as useCallback11, useMemo as useMemo3 } from "react";
 import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector as parseSvgSelector2 } from "@semiont/api-client";
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function getMotivationColor(motivation) {
@@ -29945,14 +29841,14 @@ function SvgDrawingCanvas({
     const resourceId = resourceUri2.split("/").pop();
     return `/api/resources/${resourceId}`;
   }, [resourceUri2]);
-  const containerRef = useRef14(null);
-  const imageRef = useRef14(null);
-  const [imageDimensions, setImageDimensions] = useState14(null);
-  const [displayDimensions, setDisplayDimensions] = useState14(null);
-  const [isDrawing, setIsDrawing] = useState14(false);
-  const [startPoint, setStartPoint] = useState14(null);
-  const [currentPoint, setCurrentPoint] = useState14(null);
-  useEffect18(() => {
+  const containerRef = useRef11(null);
+  const imageRef = useRef11(null);
+  const [imageDimensions, setImageDimensions] = useState13(null);
+  const [displayDimensions, setDisplayDimensions] = useState13(null);
+  const [isDrawing, setIsDrawing] = useState13(false);
+  const [startPoint, setStartPoint] = useState13(null);
+  const [currentPoint, setCurrentPoint] = useState13(null);
+  useEffect16(() => {
     const img = new Image();
     img.onload = () => {
       setImageDimensions({
@@ -29962,7 +29858,7 @@ function SvgDrawingCanvas({
     };
     img.src = imageUrl;
   }, [imageUrl]);
-  useEffect18(() => {
+  useEffect16(() => {
     const updateDisplayDimensions = () => {
       if (imageRef.current) {
         setDisplayDimensions({
@@ -29990,7 +29886,7 @@ function SvgDrawingCanvas({
       }
     };
   }, []);
-  const getRelativeCoordinates = useCallback12((e6) => {
+  const getRelativeCoordinates = useCallback11((e6) => {
     if (!imageRef.current) return null;
     const rect = imageRef.current.getBoundingClientRect();
     return {
@@ -29998,7 +29894,7 @@ function SvgDrawingCanvas({
       y: e6.clientY - rect.top
     };
   }, []);
-  const handleMouseDown = useCallback12((e6) => {
+  const handleMouseDown = useCallback11((e6) => {
     if (!drawingMode) return;
     const point4 = getRelativeCoordinates(e6);
     if (point4) {
@@ -30007,14 +29903,14 @@ function SvgDrawingCanvas({
       setCurrentPoint(point4);
     }
   }, [drawingMode, getRelativeCoordinates]);
-  const handleMouseMove = useCallback12((e6) => {
+  const handleMouseMove = useCallback11((e6) => {
     if (!isDrawing || !startPoint) return;
     const point4 = getRelativeCoordinates(e6);
     if (point4) {
       setCurrentPoint(point4);
     }
   }, [isDrawing, startPoint, getRelativeCoordinates]);
-  const handleMouseUp = useCallback12((e6) => {
+  const handleMouseUp = useCallback11((e6) => {
     if (!isDrawing || !startPoint || !drawingMode) return;
     const endPoint = getRelativeCoordinates(e6);
     if (!endPoint || !displayDimensions || !imageDimensions) return;
@@ -30110,7 +30006,7 @@ function SvgDrawingCanvas({
     setStartPoint(null);
     setCurrentPoint(null);
   }, [isDrawing, startPoint, drawingMode, displayDimensions, imageDimensions, getRelativeCoordinates, selectedMotivation, existingAnnotations]);
-  const handleMouseLeave = useCallback12(() => {
+  const handleMouseLeave = useCallback11(() => {
     if (isDrawing) {
       setIsDrawing(false);
       setStartPoint(null);
@@ -30398,7 +30294,7 @@ function KeyboardShortcutsHelpModal({ isOpen, onClose }) {
 }
 
 // src/components/modals/ProposeEntitiesModal.tsx
-import { useEffect as useEffect19, useState as useState15, Fragment as Fragment5 } from "react";
+import { useEffect as useEffect17, useState as useState14, Fragment as Fragment5 } from "react";
 import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var STORAGE_KEY = "userPreferredEntityTypes";
 function ProposeEntitiesModal({
@@ -30406,11 +30302,11 @@ function ProposeEntitiesModal({
   onConfirm,
   onCancel
 }) {
-  const [selectedTypes, setSelectedTypes] = useState15([]);
+  const [selectedTypes, setSelectedTypes] = useState14([]);
   const entityTypesAPI = useEntityTypes();
   const { data: entityTypesData } = entityTypesAPI.list.useQuery();
   const allEntityTypes = entityTypesData?.entityTypes || [];
-  useEffect19(() => {
+  useEffect17(() => {
     if (isOpen) {
       try {
         const saved = sessionStorage.getItem(STORAGE_KEY);
@@ -30520,11 +30416,11 @@ function ProposeEntitiesModal({
 }
 
 // src/components/resource/AnnotateView.tsx
-import { useRef as useRef15, useEffect as useEffect20, useCallback as useCallback13, lazy, Suspense } from "react";
+import { useRef as useRef12, useEffect as useEffect18, useCallback as useCallback12, lazy, Suspense } from "react";
 import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType as isPdfMimeType2, resourceUri as toResourceUri } from "@semiont/api-client";
 import { findTextWithContext } from "@semiont/api-client";
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
-var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-RAJRPQLU.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
+var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-FGV33CWN.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 function extractContext(content4, start2, end) {
   const CONTEXT_LENGTH = 32;
   const result = {};
@@ -30606,25 +30502,25 @@ function AnnotateView({
   annotateMode
 }) {
   const { newAnnotationIds } = useResourceAnnotations();
-  const containerRef = useRef15(null);
+  const containerRef = useRef12(null);
   const eventBus = useEventBus();
   const category = getMimeCategory(mimeType);
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
   const segments = segmentTextWithAnnotations(content4, allAnnotations);
   const { selectedMotivation, selectedClick, selectedShape, hoveredAnnotationId, hoveredCommentId, scrollToAnnotationId } = uiState;
-  const onUIStateChangeRef = useRef15(onUIStateChange);
+  const onUIStateChangeRef = useRef12(onUIStateChange);
   onUIStateChangeRef.current = onUIStateChange;
-  const handleToolbarSelectionChanged = useCallback13(({ motivation }) => {
+  const handleToolbarSelectionChanged = useCallback12(({ motivation }) => {
     onUIStateChangeRef.current?.({ selectedMotivation: motivation });
   }, []);
-  const handleToolbarClickChanged = useCallback13(({ action }) => {
+  const handleToolbarClickChanged = useCallback12(({ action }) => {
     onUIStateChangeRef.current?.({ selectedClick: action });
   }, []);
-  const handleToolbarShapeChanged = useCallback13(({ shape }) => {
+  const handleToolbarShapeChanged = useCallback12(({ shape }) => {
     onUIStateChangeRef.current?.({ selectedShape: shape });
   }, []);
-  const handleAnnotationHover = useCallback13(({ annotationId }) => {
+  const handleAnnotationHover = useCallback12(({ annotationId }) => {
     onUIStateChangeRef.current?.({ hoveredAnnotationId: annotationId });
   }, []);
   useEventSubscriptions({
@@ -30633,7 +30529,7 @@ function AnnotateView({
     "toolbar:shape-changed": handleToolbarShapeChanged,
     "annotation:hover": handleAnnotationHover
   });
-  useEffect20(() => {
+  useEffect18(() => {
     const container = containerRef.current;
     if (!container) return;
     let clickedOnAnnotation = false;
@@ -30830,11 +30726,11 @@ function AnnotateView({
 }
 
 // src/components/resource/AnnotationHistory.tsx
-import { useEffect as useEffect22, useRef as useRef17 } from "react";
+import { useEffect as useEffect20, useRef as useRef14 } from "react";
 import { getAnnotationUriFromEvent as getAnnotationUriFromEvent2 } from "@semiont/core";
 
 // src/components/resource/HistoryEvent.tsx
-import { useRef as useRef16, useCallback as useCallback14, useEffect as useEffect21 } from "react";
+import { useRef as useRef13, useCallback as useCallback13, useEffect as useEffect19 } from "react";
 import { getAnnotationUriFromEvent } from "@semiont/core";
 
 // src/components/resource/event-formatting.ts
@@ -31074,12 +30970,12 @@ function HistoryEvent({
   const annotationUri2 = getAnnotationUriFromEvent(event);
   const creationDetails = getResourceCreationDetails(event);
   const entityTypes = getEventEntityTypes(event);
-  const hoverTimeoutRef = useRef16(null);
-  const onEventHoverRef = useRef16(onEventHover);
-  useEffect21(() => {
+  const hoverTimeoutRef = useRef13(null);
+  const onEventHoverRef = useRef13(onEventHover);
+  useEffect19(() => {
     onEventHoverRef.current = onEventHover;
   });
-  const handleEmojiMouseEnter = useCallback14(() => {
+  const handleEmojiMouseEnter = useCallback13(() => {
     if (!annotationUri2 || !onEventHoverRef.current) return;
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -31088,7 +30984,7 @@ function HistoryEvent({
       onEventHoverRef.current?.(annotationUri2);
     }, 300);
   }, [annotationUri2]);
-  const handleEmojiMouseLeave = useCallback14(() => {
+  const handleEmojiMouseLeave = useCallback13(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
       hoverTimeoutRef.current = null;
@@ -31180,15 +31076,15 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
   const { data: eventsData, isLoading: loading, isError: error } = resources.events.useQuery(rUri);
   const { data: annotationsData } = resources.annotations.useQuery(rUri);
   const annotations = annotationsData?.annotations || [];
-  const eventRefs = useRef17(/* @__PURE__ */ new Map());
-  const containerRef = useRef17(null);
+  const eventRefs = useRef14(/* @__PURE__ */ new Map());
+  const containerRef = useRef14(null);
   const events2 = !eventsData?.events ? [] : [...eventsData.events].filter((e6) => {
     const eventType = e6.event.type;
     return eventType !== "job.started" && eventType !== "job.progress" && eventType !== "job.completed";
   }).sort(
     (a15, b8) => a15.metadata.sequenceNumber - b8.metadata.sequenceNumber
   );
-  useEffect22(() => {
+  useEffect20(() => {
     if (containerRef.current && events2.length > 0) {
       requestAnimationFrame(() => {
         if (containerRef.current) {
@@ -31197,7 +31093,7 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
       });
     }
   }, [events2.length]);
-  useEffect22(() => {
+  useEffect20(() => {
     if (!hoveredAnnotationId) return;
     const eventElement = eventRefs.current.get(hoveredAnnotationId);
     if (eventElement && containerRef.current) {
@@ -31255,7 +31151,7 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
 }
 
 // src/components/resource/BrowseView.tsx
-import { useEffect as useEffect24, useRef as useRef18, useCallback as useCallback15, lazy as lazy2, Suspense as Suspense2 } from "react";
+import { useEffect as useEffect22, useRef as useRef15, useCallback as useCallback14, lazy as lazy2, Suspense as Suspense2 } from "react";
 
 // ../../node_modules/devlop/lib/default.js
 function ok2() {
@@ -33130,7 +33026,7 @@ var urlAttributes = {
 
 // ../../node_modules/react-markdown/lib/index.js
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useState as useState16 } from "react";
+import { useEffect as useEffect21, useState as useState15 } from "react";
 
 // ../../node_modules/mdast-util-to-string/lib/index.js
 var emptyOptions2 = {};
@@ -45588,7 +45484,7 @@ function ImageViewer({ resourceUri: resourceUri2, alt = "Resource image" }) {
 
 // src/components/resource/BrowseView.tsx
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-RAJRPQLU.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
+var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-FGV33CWN.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 function prepareAnnotations(annotations) {
   return annotations.map((ann) => {
     const targetSelector = getTargetSelector3(ann.target);
@@ -45618,12 +45514,12 @@ function BrowseView({
 }) {
   const { newAnnotationIds } = useResourceAnnotations();
   const eventBus = useEventBus();
-  const containerRef = useRef18(null);
+  const containerRef = useRef15(null);
   const category = getMimeCategory2(mimeType);
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
   const preparedAnnotations = prepareAnnotations(allAnnotations);
-  useEffect24(() => {
+  useEffect22(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const handleClick = (e6) => {
@@ -45639,20 +45535,19 @@ function BrowseView({
         }
       }
     };
+    const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
+      (annotationId) => eventBus.emit("annotation:hover", { annotationId })
+    );
     const handleMouseOver = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
       const annotationId = annotationElement?.getAttribute("data-annotation-id");
-      if (annotationId) {
-        eventBus.emit("annotation:hover", { annotationId });
-      }
+      if (annotationId) handleMouseEnter(annotationId);
     };
     const handleMouseOut = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
-      if (annotationElement) {
-        eventBus.emit("annotation:hover", { annotationId: null });
-      }
+      if (annotationElement) handleMouseLeave();
     };
     if (newAnnotationIds) {
       const annotationSpans = container.querySelectorAll("[data-annotation-id]");
@@ -45670,9 +45565,10 @@ function BrowseView({
       container.removeEventListener("click", handleClick);
       container.removeEventListener("mouseover", handleMouseOver);
       container.removeEventListener("mouseout", handleMouseOut);
+      cleanupHover();
     };
   }, [content4, allAnnotations, newAnnotationIds]);
-  const scrollToAnnotation = useCallback15((annotationId, removePulse = false) => {
+  const scrollToAnnotation = useCallback14((annotationId, removePulse = false) => {
     if (!containerRef.current || !annotationId) return;
     const element2 = containerRef.current.querySelector(
       `[data-annotation-id="${CSS.escape(annotationId)}"]`
@@ -45698,10 +45594,10 @@ function BrowseView({
       }, 2e3);
     }
   }, []);
-  const handleAnnotationHover = useCallback15(({ annotationId }) => {
+  const handleAnnotationHover = useCallback14(({ annotationId }) => {
     scrollToAnnotation(annotationId);
   }, [scrollToAnnotation]);
-  const handleAnnotationFocus = useCallback15(({ annotationId }) => {
+  const handleAnnotationFocus = useCallback14(({ annotationId }) => {
     scrollToAnnotation(annotationId, true);
   }, [scrollToAnnotation]);
   useEventSubscriptions({
@@ -45802,7 +45698,7 @@ function BrowseView({
 }
 
 // src/components/resource/ResourceViewer.tsx
-import { useState as useState17, useEffect as useEffect25, useCallback as useCallback16, useRef as useRef19 } from "react";
+import { useState as useState16, useEffect as useEffect23, useCallback as useCallback15, useRef as useRef16 } from "react";
 import { getExactText as getExactText3, getTargetSelector as getTargetSelector4, resourceUri, isHighlight as isHighlight4, isAssessment as isAssessment3, isReference as isReference4, isComment as isComment4, isTag as isTag5, getBodySource as getBodySource4 } from "@semiont/api-client";
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function ResourceViewer({
@@ -45813,7 +45709,7 @@ function ResourceViewer({
   hoveredAnnotationId: hoveredAnnotationIdProp
 }) {
   const t12 = useTranslations("ResourceViewer");
-  const documentViewerRef = useRef19(null);
+  const documentViewerRef = useRef16(null);
   const eventBus = useEventBus();
   const navigate = useObservableExternalNavigation();
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
@@ -45829,38 +45725,38 @@ function ResourceViewer({
     return "text/plain";
   };
   const mimeType = getMimeType();
-  const [annotateMode, setAnnotateMode] = useState17(() => {
+  const [annotateMode, setAnnotateMode] = useState16(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("annotateMode") === "true";
     }
     return false;
   });
-  useEffect25(() => {
+  useEffect23(() => {
     if (typeof window !== "undefined") {
       localStorage.setItem("annotateMode", annotateMode.toString());
     }
   }, [annotateMode]);
-  const handleViewModeToggle = useCallback16(() => {
+  const handleViewModeToggle = useCallback15(() => {
     setAnnotateMode((prev) => !prev);
   }, []);
   const activeView = annotateMode ? "annotate" : "browse";
   const cacheManager = useCacheManager();
-  const handleAnnotationAdded = useCallback16(() => {
+  const handleAnnotationAdded = useCallback15(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
-  const handleAnnotationRemoved = useCallback16(() => {
+  const handleAnnotationRemoved = useCallback15(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
-  const handleAnnotationUpdated = useCallback16(() => {
+  const handleAnnotationUpdated = useCallback15(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
-  const [selectedMotivation, setSelectedMotivation] = useState17(() => {
+  const [selectedMotivation, setSelectedMotivation] = useState16(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("semiont-toolbar-selection");
       if (stored === "null") return null;
@@ -45870,7 +45766,7 @@ function ResourceViewer({
     }
     return "linking";
   });
-  const [selectedClick, setSelectedClick] = useState17(() => {
+  const [selectedClick, setSelectedClick] = useState16(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("semiont-toolbar-click");
       if (stored && ["detail", "follow", "jsonld", "deleting"].includes(stored)) {
@@ -45880,45 +45776,45 @@ function ResourceViewer({
     return "detail";
   });
   const selectorType = getSelectorType(mimeType);
-  const [selectedShape, setSelectedShape] = useState17(() => {
+  const [selectedShape, setSelectedShape] = useState16(() => {
     return getSelectedShapeForSelectorType(selectorType);
   });
-  const handleToolbarSelectionChanged = useCallback16(({ motivation }) => {
+  const handleToolbarSelectionChanged = useCallback15(({ motivation }) => {
     setSelectedMotivation(motivation);
   }, []);
-  const handleToolbarClickChanged = useCallback16(({ action }) => {
+  const handleToolbarClickChanged = useCallback15(({ action }) => {
     setSelectedClick(action);
   }, []);
-  const handleToolbarShapeChanged = useCallback16(({ shape }) => {
+  const handleToolbarShapeChanged = useCallback15(({ shape }) => {
     setSelectedShape(shape);
   }, []);
-  useEffect25(() => {
+  useEffect23(() => {
     if (selectedMotivation === null) {
       localStorage.setItem("semiont-toolbar-selection", "null");
     } else {
       localStorage.setItem("semiont-toolbar-selection", selectedMotivation);
     }
   }, [selectedMotivation]);
-  useEffect25(() => {
+  useEffect23(() => {
     localStorage.setItem("semiont-toolbar-click", selectedClick);
   }, [selectedClick]);
-  useEffect25(() => {
+  useEffect23(() => {
     saveSelectedShapeForSelectorType(selectorType, selectedShape);
   }, [selectorType, selectedShape]);
-  useEffect25(() => {
+  useEffect23(() => {
     const shapeForType = getSelectedShapeForSelectorType(selectorType);
     if (shapeForType !== selectedShape) {
       setSelectedShape(shapeForType);
     }
   }, [selectorType]);
-  const [showJsonLdView, setShowJsonLdView] = useState17(false);
-  const [jsonLdAnnotation, setJsonLdAnnotation] = useState17(null);
-  const [deleteConfirmation, setDeleteConfirmation] = useState17(null);
+  const [showJsonLdView, setShowJsonLdView] = useState16(false);
+  const [jsonLdAnnotation, setJsonLdAnnotation] = useState16(null);
+  const [deleteConfirmation, setDeleteConfirmation] = useState16(null);
   const hoveredAnnotationId = hoveredAnnotationIdProp ?? null;
-  const [hoveredCommentId, _setHoveredCommentId] = useState17(null);
-  const [scrollToAnnotationId, setScrollToAnnotationId] = useState17(null);
-  const [_focusedAnnotationId, setFocusedAnnotationId] = useState17(null);
-  const focusAnnotation = useCallback16((annotationId) => {
+  const [hoveredCommentId, _setHoveredCommentId] = useState16(null);
+  const [scrollToAnnotationId, setScrollToAnnotationId] = useState16(null);
+  const [_focusedAnnotationId, setFocusedAnnotationId] = useState16(null);
+  const focusAnnotation = useCallback15((annotationId) => {
     setFocusedAnnotationId(annotationId);
     setScrollToAnnotationId(annotationId);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
@@ -45932,10 +45828,10 @@ function ResourceViewer({
       y: Math.max(0, (window.innerHeight - popupHeight) / 2)
     };
   };
-  const handleDeleteAnnotation = useCallback16((id2) => {
+  const handleDeleteAnnotation = useCallback15((id2) => {
     eventBus.emit("annotation:delete", { annotationId: id2 });
   }, []);
-  const handleAnnotationClick = useCallback16((annotation, event) => {
+  const handleAnnotationClick = useCallback15((annotation, event) => {
     const metadata = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation(annotation));
     if (metadata?.hasSidePanel) {
       if (selectedClick === "detail") {
@@ -45969,7 +45865,7 @@ function ResourceViewer({
       return;
     }
   }, [annotateMode, selectedClick, focusAnnotation]);
-  const handleAnnotationClickEvent = useCallback16(({ annotationId, motivation }) => {
+  const handleAnnotationClickEvent = useCallback15(({ annotationId, motivation }) => {
     const metadata = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation({ motivation }));
     if (!metadata?.hasSidePanel) {
       const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
@@ -46011,7 +45907,7 @@ function ResourceViewer({
     hoveredAnnotationId,
     scrollToAnnotationId
   };
-  const getTargetDocumentName = useCallback16((documentId) => {
+  const getTargetDocumentName = useCallback15((documentId) => {
     const referencedResource = references.find((a15) => getBodySource4(a15.body) === documentId);
     return referencedResource ? getExactText3(getTargetSelector4(referencedResource.target)) : void 0;
   }, [references]);
@@ -46156,6 +46052,7 @@ var AssessmentEntry = forwardRef(
     isHovered = false
   }, ref) {
     const eventBus = useEventBus();
+    const hoverProps = useHoverEmitter(assessment.id);
     const selectedText = getAnnotationExactText(assessment);
     const assessmentText = getAssessmentText(assessment);
     return /* @__PURE__ */ jsxs19(
@@ -46168,12 +46065,7 @@ var AssessmentEntry = forwardRef(
         onClick: () => {
           eventBus.emit("annotation:click", { annotationId: assessment.id, motivation: assessment.motivation });
         },
-        onMouseEnter: () => {
-          eventBus.emit("annotation:hover", { annotationId: assessment.id });
-        },
-        onMouseLeave: () => {
-          eventBus.emit("annotation:hover", { annotationId: null });
-        },
+        ...hoverProps,
         children: [
           selectedText && /* @__PURE__ */ jsxs19("div", { className: "semiont-annotation-entry__quote", "data-type": "assessment", children: [
             '"',
@@ -46195,11 +46087,11 @@ var AssessmentEntry = forwardRef(
 );
 
 // src/components/resource/panels/AssessmentPanel.tsx
-import { useState as useState19, useEffect as useEffect27, useRef as useRef20, useCallback as useCallback18, useMemo as useMemo4 } from "react";
+import { useState as useState18, useEffect as useEffect25, useRef as useRef17, useCallback as useCallback17, useMemo as useMemo4 } from "react";
 import { getTextPositionSelector as getTextPositionSelector3, getTargetSelector as getTargetSelector5 } from "@semiont/api-client";
 
 // src/components/resource/panels/DetectSection.tsx
-import { useState as useState18, useEffect as useEffect26, useCallback as useCallback17 } from "react";
+import { useState as useState17, useEffect as useEffect24, useCallback as useCallback16 } from "react";
 import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function DetectSection({
   annotationType,
@@ -46209,21 +46101,21 @@ function DetectSection({
   const panelName = annotationType === "highlight" ? "HighlightPanel" : annotationType === "assessment" ? "AssessmentPanel" : "CommentsPanel";
   const t12 = useTranslations(panelName);
   const eventBus = useEventBus();
-  const [instructions, setInstructions] = useState18("");
-  const [tone, setTone] = useState18("");
+  const [instructions, setInstructions] = useState17("");
+  const [tone, setTone] = useState17("");
   const defaultDensity = annotationType === "comment" ? 5 : annotationType === "assessment" ? 4 : annotationType === "highlight" ? 5 : 5;
-  const [density, setDensity] = useState18(defaultDensity);
-  const [useDensity, setUseDensity] = useState18(true);
-  const [isExpanded, setIsExpanded] = useState18(() => {
+  const [density, setDensity] = useState17(defaultDensity);
+  const [useDensity, setUseDensity] = useState17(true);
+  const [isExpanded, setIsExpanded] = useState17(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem(`detect-section-expanded-${annotationType}`);
     return stored ? stored === "true" : true;
   });
-  useEffect26(() => {
+  useEffect24(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem(`detect-section-expanded-${annotationType}`, String(isExpanded));
   }, [isExpanded, annotationType]);
-  const handleDetect = useCallback17(() => {
+  const handleDetect = useCallback16(() => {
     const motivation = annotationType === "highlight" ? "highlighting" : annotationType === "assessment" ? "assessing" : "commenting";
     eventBus.emit("detection:start", {
       motivation,
@@ -46236,7 +46128,7 @@ function DetectSection({
     setInstructions("");
     setTone("");
   }, [annotationType, instructions, tone, useDensity, density]);
-  const handleDismissProgress = useCallback17(() => {
+  const handleDismissProgress = useCallback16(() => {
     eventBus.emit("detection:dismiss-progress", void 0);
   }, []);
   return /* @__PURE__ */ jsxs20("div", { className: "semiont-panel__section", children: [
@@ -46441,10 +46333,10 @@ function AssessmentPanel({
 }) {
   const t12 = useTranslations("AssessmentPanel");
   const eventBus = useEventBus();
-  const [newAssessmentText, setNewAssessmentText] = useState19("");
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState19(null);
-  const containerRef = useRef20(null);
-  const entryRefs = useRef20(/* @__PURE__ */ new Map());
+  const [newAssessmentText, setNewAssessmentText] = useState18("");
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState18(null);
+  const containerRef = useRef17(null);
+  const entryRefs = useRef17(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo4(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector3(getTargetSelector5(a15.target));
@@ -46453,14 +46345,14 @@ function AssessmentPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback18((id2, element2) => {
+  const setEntryRef = useCallback17((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect27(() => {
+  useEffect25(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -46475,7 +46367,7 @@ function AssessmentPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect27(() => {
+  useEffect25(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -46502,7 +46394,7 @@ function AssessmentPanel({
       setNewAssessmentText("");
     }
   };
-  useEffect27(() => {
+  useEffect25(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -46513,7 +46405,7 @@ function AssessmentPanel({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [pendingAnnotation]);
-  const handleAnnotationClick = useCallback18(({ annotationId }) => {
+  const handleAnnotationClick = useCallback17(({ annotationId }) => {
     setFocusedAnnotationId(annotationId);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
@@ -46674,7 +46566,7 @@ function CollaborationPanel({
 }
 
 // src/components/resource/panels/CommentEntry.tsx
-import { useState as useState20, useEffect as useEffect28, useRef as useRef21, forwardRef as forwardRef2, useImperativeHandle } from "react";
+import { useState as useState19, useEffect as useEffect26, useRef as useRef18, forwardRef as forwardRef2, useImperativeHandle } from "react";
 import { getAnnotationExactText as getAnnotationExactText2, getCommentText } from "@semiont/api-client";
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function formatRelativeTime3(isoString) {
@@ -46700,13 +46592,14 @@ var CommentEntry = forwardRef2(
   }, ref) {
     const t12 = useTranslations("CommentsPanel");
     const eventBus = useEventBus();
-    const [isEditing, setIsEditing] = useState20(false);
-    const [editText, setEditText] = useState20("");
-    const internalRef = useRef21(null);
+    const hoverProps = useHoverEmitter(comment2.id);
+    const [isEditing, setIsEditing] = useState19(false);
+    const [editText, setEditText] = useState19("");
+    const internalRef = useRef18(null);
     useImperativeHandle(ref, () => internalRef.current);
     const commentText = getCommentText(comment2) || "";
     const selectedText = getAnnotationExactText2(comment2);
-    useEffect28(() => {
+    useEffect26(() => {
       if (isFocused && internalRef.current) {
         internalRef.current.scrollIntoView({
           behavior: "smooth",
@@ -46735,12 +46628,7 @@ var CommentEntry = forwardRef2(
         onClick: () => {
           eventBus.emit("annotation:click", { annotationId: comment2.id, motivation: comment2.motivation });
         },
-        onMouseEnter: () => {
-          eventBus.emit("annotation:hover", { annotationId: comment2.id });
-        },
-        onMouseLeave: () => {
-          eventBus.emit("annotation:hover", { annotationId: null });
-        },
+        ...hoverProps,
         children: [
           selectedText && /* @__PURE__ */ jsxs24("div", { className: "semiont-annotation-entry__quote", "data-type": "comment", children: [
             '"',
@@ -46810,7 +46698,7 @@ var CommentEntry = forwardRef2(
 );
 
 // src/components/resource/panels/CommentsPanel.tsx
-import { useState as useState21, useEffect as useEffect29, useRef as useRef22, useCallback as useCallback19, useMemo as useMemo5 } from "react";
+import { useState as useState20, useEffect as useEffect27, useRef as useRef19, useCallback as useCallback18, useMemo as useMemo5 } from "react";
 import { getTextPositionSelector as getTextPositionSelector4, getTargetSelector as getTargetSelector6 } from "@semiont/api-client";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function getSelectorDisplayText2(selector) {
@@ -46838,10 +46726,10 @@ function CommentsPanel({
 }) {
   const t12 = useTranslations("CommentsPanel");
   const eventBus = useEventBus();
-  const [newCommentText, setNewCommentText] = useState21("");
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState21(null);
-  const containerRef = useRef22(null);
-  const entryRefs = useRef22(/* @__PURE__ */ new Map());
+  const [newCommentText, setNewCommentText] = useState20("");
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState20(null);
+  const containerRef = useRef19(null);
+  const entryRefs = useRef19(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo5(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector4(getTargetSelector6(a15.target));
@@ -46850,14 +46738,14 @@ function CommentsPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback19((id2, element2) => {
+  const setEntryRef = useCallback18((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect29(() => {
+  useEffect27(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -46874,7 +46762,7 @@ function CommentsPanel({
       }
     }
   }, [scrollToAnnotationId]);
-  useEffect29(() => {
+  useEffect27(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -46890,7 +46778,7 @@ function CommentsPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick = useCallback19(({ annotationId }) => {
+  const handleAnnotationClick = useCallback18(({ annotationId }) => {
     setFocusedAnnotationId(annotationId);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
@@ -46907,7 +46795,7 @@ function CommentsPanel({
       setNewCommentText("");
     }
   };
-  useEffect29(() => {
+  useEffect27(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -47020,6 +46908,7 @@ var HighlightEntry = forwardRef3(
     isHovered = false
   }, ref) {
     const eventBus = useEventBus();
+    const hoverProps = useHoverEmitter(highlight.id);
     const selectedText = getAnnotationExactText3(highlight);
     return /* @__PURE__ */ jsxs26(
       "div",
@@ -47031,12 +46920,7 @@ var HighlightEntry = forwardRef3(
         onClick: () => {
           eventBus.emit("annotation:click", { annotationId: highlight.id, motivation: highlight.motivation });
         },
-        onMouseEnter: () => {
-          eventBus.emit("annotation:hover", { annotationId: highlight.id });
-        },
-        onMouseLeave: () => {
-          eventBus.emit("annotation:hover", { annotationId: null });
-        },
+        ...hoverProps,
         children: [
           selectedText && /* @__PURE__ */ jsxs26("div", { className: "semiont-annotation-entry__quote", "data-type": "highlight", children: [
             '"',
@@ -47057,7 +46941,7 @@ var HighlightEntry = forwardRef3(
 );
 
 // src/components/resource/panels/HighlightPanel.tsx
-import { useEffect as useEffect30, useState as useState22, useRef as useRef23, useCallback as useCallback20, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect28, useState as useState21, useRef as useRef20, useCallback as useCallback19, useMemo as useMemo6 } from "react";
 import { getTextPositionSelector as getTextPositionSelector5, getTargetSelector as getTargetSelector7 } from "@semiont/api-client";
 import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function HighlightPanel({
@@ -47072,9 +46956,9 @@ function HighlightPanel({
 }) {
   const t12 = useTranslations("HighlightPanel");
   const eventBus = useEventBus();
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState22(null);
-  const containerRef = useRef23(null);
-  const entryRefs = useRef23(/* @__PURE__ */ new Map());
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState21(null);
+  const containerRef = useRef20(null);
+  const entryRefs = useRef20(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo6(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector5(getTargetSelector7(a15.target));
@@ -47083,14 +46967,14 @@ function HighlightPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback20((id2, element2) => {
+  const setEntryRef = useCallback19((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect30(() => {
+  useEffect28(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -47105,7 +46989,7 @@ function HighlightPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect30(() => {
+  useEffect28(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -47121,14 +47005,14 @@ function HighlightPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick = useCallback20(({ annotationId }) => {
+  const handleAnnotationClick = useCallback19(({ annotationId }) => {
     setFocusedAnnotationId(annotationId);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
     "annotation:click": handleAnnotationClick
   });
-  useEffect30(() => {
+  useEffect28(() => {
     if (pendingAnnotation && pendingAnnotation.motivation === "highlighting") {
       eventBus.emit("annotation:create", {
         motivation: "highlighting",
@@ -47163,13 +47047,13 @@ function HighlightPanel({
 }
 
 // src/components/resource/panels/JsonLdPanel.tsx
-import { useEffect as useEffect31, useRef as useRef24 } from "react";
+import { useEffect as useEffect29, useRef as useRef21 } from "react";
 import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function JsonLdPanel({ resource: semiontResource }) {
-  const editorRef = useRef24(null);
-  const viewRef = useRef24(null);
+  const editorRef = useRef21(null);
+  const viewRef = useRef21(null);
   const { showLineNumbers } = useLineNumbers();
-  useEffect31(() => {
+  useEffect29(() => {
     if (!editorRef.current) return;
     const isDarkMode = document.documentElement?.classList.contains("dark") ?? false;
     const jsonLdContent = JSON.stringify(semiontResource, null, 2);
@@ -47247,6 +47131,7 @@ var ReferenceEntry = forwardRef4(
     const t12 = useTranslations("ReferencesPanel");
     const eventBus = useEventBus();
     const navigate = useObservableExternalNavigation();
+    const hoverProps = useHoverEmitter(reference.id);
     const selectedText = getAnnotationExactText4(reference) || "";
     const isResolved = isBodyResolved2(reference.body);
     const resolvedResourceUri = isResolved ? getBodySource5(reference.body) : null;
@@ -47309,12 +47194,7 @@ var ReferenceEntry = forwardRef4(
         onClick: () => {
           eventBus.emit("annotation:click", { annotationId: reference.id, motivation: reference.motivation });
         },
-        onMouseEnter: () => {
-          eventBus.emit("annotation:hover", { annotationId: reference.id });
-        },
-        onMouseLeave: () => {
-          eventBus.emit("annotation:hover", { annotationId: null });
-        },
+        ...hoverProps,
         children: [
           /* @__PURE__ */ jsxs29("div", { className: "semiont-annotation-entry__header", children: [
             /* @__PURE__ */ jsx38("span", { className: "semiont-reference-icon", title: isResolved ? t12("resolved") : t12("stub"), children: isResolved ? "\u{1F517}" : "\u2753" }),
@@ -47405,7 +47285,7 @@ var ReferenceEntry = forwardRef4(
 );
 
 // src/components/resource/panels/ReferencesPanel.tsx
-import { useState as useState23, useRef as useRef25, useEffect as useEffect32, useCallback as useCallback21, useMemo as useMemo7 } from "react";
+import { useState as useState22, useRef as useRef22, useEffect as useEffect30, useCallback as useCallback20, useMemo as useMemo7 } from "react";
 import { getTextPositionSelector as getTextPositionSelector6, getTargetSelector as getTargetSelector9 } from "@semiont/api-client";
 import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 function getSelectorDisplayText3(selector) {
@@ -47440,22 +47320,22 @@ function ReferencesPanel({
   const t12 = useTranslations("DetectPanel");
   const tRef = useTranslations("ReferencesPanel");
   const eventBus = useEventBus();
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState23([]);
-  const [lastDetectionLog, setLastDetectionLog] = useState23(null);
-  const [pendingEntityTypes, setPendingEntityTypes] = useState23([]);
-  const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState23(false);
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState23(null);
-  const containerRef = useRef25(null);
-  const [isDetectExpanded, setIsDetectExpanded] = useState23(() => {
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState22([]);
+  const [lastDetectionLog, setLastDetectionLog] = useState22(null);
+  const [pendingEntityTypes, setPendingEntityTypes] = useState22([]);
+  const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState22(false);
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState22(null);
+  const containerRef = useRef22(null);
+  const [isDetectExpanded, setIsDetectExpanded] = useState22(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem("detect-section-expanded-reference");
     return stored ? stored === "true" : true;
   });
-  useEffect32(() => {
+  useEffect30(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem("detect-section-expanded-reference", String(isDetectExpanded));
   }, [isDetectExpanded]);
-  const entryRefs = useRef25(/* @__PURE__ */ new Map());
+  const entryRefs = useRef22(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo7(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector6(getTargetSelector9(a15.target));
@@ -47464,14 +47344,14 @@ function ReferencesPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback21((id2, element2) => {
+  const setEntryRef = useCallback20((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect32(() => {
+  useEffect30(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -47490,7 +47370,7 @@ function ReferencesPanel({
       console.warn("[ReferencesPanel] Element not found for scrollToAnnotationId:", scrollToAnnotationId);
     }
   }, [scrollToAnnotationId]);
-  useEffect32(() => {
+  useEffect30(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -47506,7 +47386,7 @@ function ReferencesPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick = useCallback21(({ annotationId }) => {
+  const handleAnnotationClick = useCallback20(({ annotationId }) => {
     setFocusedAnnotationId(annotationId);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
@@ -47523,8 +47403,8 @@ function ReferencesPanel({
       }
     });
   };
-  const hasSavedLogRef = useRef25(false);
-  useEffect32(() => {
+  const hasSavedLogRef = useRef22(false);
+  useEffect30(() => {
     if (isDetecting) {
       hasSavedLogRef.current = false;
       return;
@@ -47551,7 +47431,7 @@ function ReferencesPanel({
       setPendingEntityTypes([]);
     }
   };
-  useEffect32(() => {
+  useEffect30(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -47942,6 +47822,7 @@ var TagEntry = forwardRef5(
     isHovered = false
   }, ref) {
     const eventBus = useEventBus();
+    const hoverProps = useHoverEmitter(tag.id);
     const selectedText = getAnnotationExactText5(tag);
     const category = getTagCategory(tag);
     const schemaId = getTagSchemaId(tag);
@@ -47953,12 +47834,7 @@ var TagEntry = forwardRef5(
         onClick: () => {
           eventBus.emit("annotation:click", { annotationId: tag.id, motivation: tag.motivation });
         },
-        onMouseEnter: () => {
-          eventBus.emit("annotation:hover", { annotationId: tag.id });
-        },
-        onMouseLeave: () => {
-          eventBus.emit("annotation:hover", { annotationId: null });
-        },
+        ...hoverProps,
         className: `semiont-annotation-entry${isHovered ? " semiont-annotation-pulse" : ""}`,
         "data-type": "tag",
         "data-focused": isFocused ? "true" : "false",
@@ -47980,7 +47856,7 @@ var TagEntry = forwardRef5(
 );
 
 // src/components/resource/panels/TaggingPanel.tsx
-import { useState as useState24, useEffect as useEffect33, useRef as useRef26, useCallback as useCallback22, useMemo as useMemo8 } from "react";
+import { useState as useState23, useEffect as useEffect31, useRef as useRef23, useCallback as useCallback21, useMemo as useMemo8 } from "react";
 import { getTextPositionSelector as getTextPositionSelector7, getTargetSelector as getTargetSelector10 } from "@semiont/api-client";
 import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function getSelectorDisplayText4(selector) {
@@ -48008,27 +47884,27 @@ function TaggingPanel({
 }) {
   const t12 = useTranslations("TaggingPanel");
   const eventBus = useEventBus();
-  const [selectedSchemaId, setSelectedSchemaId] = useState24("legal-irac");
-  const [selectedCategories, setSelectedCategories] = useState24(/* @__PURE__ */ new Set());
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState24(null);
-  const containerRef = useRef26(null);
-  const [isDetectExpanded, setIsDetectExpanded] = useState24(() => {
+  const [selectedSchemaId, setSelectedSchemaId] = useState23("legal-irac");
+  const [selectedCategories, setSelectedCategories] = useState23(/* @__PURE__ */ new Set());
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState23(null);
+  const containerRef = useRef23(null);
+  const [isDetectExpanded, setIsDetectExpanded] = useState23(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem("detect-section-expanded-tag");
     return stored ? stored === "true" : true;
   });
-  useEffect33(() => {
+  useEffect31(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem("detect-section-expanded-tag", String(isDetectExpanded));
   }, [isDetectExpanded]);
-  const handleAnnotationClick = useCallback22(({ annotationId }) => {
+  const handleAnnotationClick = useCallback21(({ annotationId }) => {
     setFocusedAnnotationId(annotationId);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
     "annotation:click": handleAnnotationClick
   });
-  const entryRefs = useRef26(/* @__PURE__ */ new Map());
+  const entryRefs = useRef23(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo8(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector7(getTargetSelector10(a15.target));
@@ -48037,14 +47913,14 @@ function TaggingPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback22((id2, element2) => {
+  const setEntryRef = useCallback21((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect33(() => {
+  useEffect31(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -48059,7 +47935,7 @@ function TaggingPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect33(() => {
+  useEffect31(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -48110,7 +47986,7 @@ function TaggingPanel({
       setSelectedCategories(/* @__PURE__ */ new Set());
     }
   };
-  useEffect33(() => {
+  useEffect31(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -48160,6 +48036,11 @@ function TaggingPanel({
                         type: "TextualBody",
                         value: e6.target.value,
                         purpose: "tagging"
+                      },
+                      {
+                        type: "TextualBody",
+                        value: selectedSchemaId,
+                        purpose: "classifying"
                       }
                     ]
                   });
@@ -48332,7 +48213,7 @@ function TaggingPanel({
 }
 
 // src/components/resource/panels/UnifiedAnnotationsPanel.tsx
-import { useState as useState25, useEffect as useEffect34 } from "react";
+import { useState as useState24, useEffect as useEffect32 } from "react";
 import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var TAB_ORDER = ["statistics", "reference", "highlight", "assessment", "comment", "tag"];
 function UnifiedAnnotationsPanel(props) {
@@ -48354,7 +48235,7 @@ function UnifiedAnnotationsPanel(props) {
     }
   }
   const grouped = groups;
-  const [activeTab, setActiveTab] = useState25(() => {
+  const [activeTab, setActiveTab] = useState24(() => {
     if (typeof window === "undefined") return props.initialTab || "statistics";
     const storageKey = props.resourceId ? `annotations-tab-${props.resourceId}` : "annotations-tab-global";
     const stored = localStorage.getItem(storageKey);
@@ -48363,17 +48244,17 @@ function UnifiedAnnotationsPanel(props) {
     }
     return props.initialTab || "statistics";
   });
-  useEffect34(() => {
+  useEffect32(() => {
     if (typeof window === "undefined") return;
     const storageKey = props.resourceId ? `annotations-tab-${props.resourceId}` : "annotations-tab-global";
     localStorage.setItem(storageKey, activeTab);
   }, [activeTab, props.resourceId]);
-  useEffect34(() => {
+  useEffect32(() => {
     if (props.initialTab && props.initialTabGeneration !== void 0) {
       setActiveTab(props.initialTab);
     }
   }, [props.initialTabGeneration]);
-  useEffect34(() => {
+  useEffect32(() => {
     if (props.pendingAnnotation) {
       const motivationToTab = {
         "linking": "reference",
@@ -48513,7 +48394,7 @@ function UnifiedAnnotationsPanel(props) {
 }
 
 // src/components/navigation/Footer.tsx
-import { useState as useState26 } from "react";
+import { useState as useState25 } from "react";
 import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 function Footer({
   Link,
@@ -48524,7 +48405,7 @@ function Footer({
   apiDocsUrl = "/api/docs",
   sourceCodeUrl = "https://github.com/The-AI-Alliance/semiont"
 }) {
-  const [showCookiePreferences, setShowCookiePreferences] = useState26(false);
+  const [showCookiePreferences, setShowCookiePreferences] = useState25(false);
   return /* @__PURE__ */ jsxs36(Fragment11, { children: [
     /* @__PURE__ */ jsx45("footer", { role: "contentinfo", className: "semiont-footer", children: /* @__PURE__ */ jsx45("div", { className: "semiont-footer__container", children: /* @__PURE__ */ jsxs36("div", { className: "semiont-footer__content", children: [
       /* @__PURE__ */ jsx45("div", { className: "semiont-footer__copyright", children: t12("copyright", { year: (/* @__PURE__ */ new Date()).getFullYear() }) }),
@@ -48662,7 +48543,7 @@ function NavigationMenu({
 }
 
 // src/components/navigation/ObservableLink.tsx
-import { useCallback as useCallback23, useRef as useRef27, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback22, useRef as useRef24, useEffect as useEffect33 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function ObservableLink({
   href,
@@ -48672,11 +48553,11 @@ function ObservableLink({
   ...anchorProps
 }) {
   const eventBus = useEventBus();
-  const onClickRef = useRef27(onClick);
-  useEffect35(() => {
+  const onClickRef = useRef24(onClick);
+  useEffect33(() => {
     onClickRef.current = onClick;
   });
-  const handleClick = useCallback23((e6) => {
+  const handleClick = useCallback22((e6) => {
     eventBus.emit("navigation:link-clicked", {
       href,
       label
@@ -48695,7 +48576,7 @@ function ObservableLink({
 }
 
 // src/components/navigation/SimpleNavigation.tsx
-import { useState as useState27, useRef as useRef28, useEffect as useEffect36 } from "react";
+import { useState as useState26, useRef as useRef25, useEffect as useEffect34 } from "react";
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 function SimpleNavigation({
   title,
@@ -48710,12 +48591,12 @@ function SimpleNavigation({
 }) {
   const ChevronLeftIcon = icons.chevronLeft;
   const BarsIcon = icons.bars;
-  const [isDropdownOpen, setIsDropdownOpen] = useState27(false);
-  const dropdownRef = useRef28(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState26(false);
+  const dropdownRef = useRef25(null);
   const eventBus = useEventBus();
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
-  useEffect36(() => {
+  useEffect34(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         closeDropdown();
@@ -48791,14 +48672,14 @@ function SimpleNavigation({
 }
 
 // src/components/navigation/CollapsibleResourceNavigation.tsx
-import { useCallback as useCallback29, useState as useState31, useRef as useRef33, useEffect as useEffect41 } from "react";
+import { useCallback as useCallback28, useState as useState30, useRef as useRef30, useEffect as useEffect39 } from "react";
 
 // ../../node_modules/@dnd-kit/core/dist/core.esm.js
-import React20, { createContext as createContext7, useContext as useContext7, useEffect as useEffect38, useState as useState29, useCallback as useCallback26, useMemo as useMemo10, useRef as useRef30, memo, useReducer, cloneElement, forwardRef as forwardRef6 } from "react";
+import React20, { createContext as createContext7, useContext as useContext7, useEffect as useEffect36, useState as useState28, useCallback as useCallback25, useMemo as useMemo10, useRef as useRef27, memo, useReducer, cloneElement, forwardRef as forwardRef6 } from "react";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
 
 // ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
-import { useMemo as useMemo9, useLayoutEffect, useEffect as useEffect37, useRef as useRef29, useCallback as useCallback24 } from "react";
+import { useMemo as useMemo9, useLayoutEffect, useEffect as useEffect35, useRef as useRef26, useCallback as useCallback23 } from "react";
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -48866,13 +48747,13 @@ function getOwnerDocument(target) {
   }
   return document;
 }
-var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect37;
+var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect35;
 function useEvent(handler) {
-  const handlerRef = useRef29(handler);
+  const handlerRef = useRef26(handler);
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = handler;
   });
-  return useCallback24(function() {
+  return useCallback23(function() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -48880,11 +48761,11 @@ function useEvent(handler) {
   }, []);
 }
 function useInterval() {
-  const intervalRef = useRef29(null);
-  const set = useCallback24((listener, duration) => {
+  const intervalRef = useRef26(null);
+  const set = useCallback23((listener, duration) => {
     intervalRef.current = setInterval(listener, duration);
   }, []);
-  const clear = useCallback24(() => {
+  const clear = useCallback23(() => {
     if (intervalRef.current !== null) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -48896,7 +48777,7 @@ function useLatestValue(value, dependencies) {
   if (dependencies === void 0) {
     dependencies = [value];
   }
-  const valueRef = useRef29(value);
+  const valueRef = useRef26(value);
   useIsomorphicLayoutEffect(() => {
     if (valueRef.current !== value) {
       valueRef.current = value;
@@ -48905,7 +48786,7 @@ function useLatestValue(value, dependencies) {
   return valueRef;
 }
 function useLazyMemo(callback, dependencies) {
-  const valueRef = useRef29();
+  const valueRef = useRef26();
   return useMemo9(
     () => {
       const newValue = callback(valueRef.current);
@@ -48918,8 +48799,8 @@ function useLazyMemo(callback, dependencies) {
 }
 function useNodeRef(onChange) {
   const onChangeHandler = useEvent(onChange);
-  const node2 = useRef29(null);
-  const setNodeRef = useCallback24(
+  const node2 = useRef26(null);
+  const setNodeRef = useCallback23(
     (element2) => {
       if (element2 !== node2.current) {
         onChangeHandler == null ? void 0 : onChangeHandler(element2, node2.current);
@@ -48932,8 +48813,8 @@ function useNodeRef(onChange) {
   return [node2, setNodeRef];
 }
 function usePrevious(value) {
-  const ref = useRef29();
-  useEffect37(() => {
+  const ref = useRef26();
+  useEffect35(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
@@ -49074,7 +48955,7 @@ function findFirstFocusableNode(element2) {
 }
 
 // ../../node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js
-import React19, { useState as useState28, useCallback as useCallback25 } from "react";
+import React19, { useState as useState27, useCallback as useCallback24 } from "react";
 var hiddenStyles = {
   display: "none"
 };
@@ -49117,8 +48998,8 @@ function LiveRegion(_ref) {
   }, announcement);
 }
 function useAnnouncement() {
-  const [announcement, setAnnouncement] = useState28("");
-  const announce = useCallback25((value) => {
+  const [announcement, setAnnouncement] = useState27("");
+  const announce = useCallback24((value) => {
     if (value != null) {
       setAnnouncement(value);
     }
@@ -49133,7 +49014,7 @@ function useAnnouncement() {
 var DndMonitorContext = /* @__PURE__ */ createContext7(null);
 function useDndMonitor(listener) {
   const registerListener = useContext7(DndMonitorContext);
-  useEffect38(() => {
+  useEffect36(() => {
     if (!registerListener) {
       throw new Error("useDndMonitor must be used within a children of <DndContext>");
     }
@@ -49142,12 +49023,12 @@ function useDndMonitor(listener) {
   }, [listener, registerListener]);
 }
 function useDndMonitorProvider() {
-  const [listeners] = useState29(() => /* @__PURE__ */ new Set());
-  const registerListener = useCallback26((listener) => {
+  const [listeners] = useState28(() => /* @__PURE__ */ new Set());
+  const registerListener = useCallback25((listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   }, [listeners]);
-  const dispatch = useCallback26((_ref) => {
+  const dispatch = useCallback25((_ref) => {
     let {
       type,
       event
@@ -49208,8 +49089,8 @@ function Accessibility(_ref) {
     announcement
   } = useAnnouncement();
   const liveRegionId = useUniqueId("DndLiveRegion");
-  const [mounted, setMounted] = useState29(false);
-  useEffect38(() => {
+  const [mounted, setMounted] = useState28(false);
+  useEffect36(() => {
     setMounted(true);
   }, []);
   useDndMonitor(useMemo10(() => ({
@@ -50545,11 +50426,11 @@ function useAutoScroller(_ref) {
     disabled: !enabled
   });
   const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
-  const scrollSpeed = useRef30({
+  const scrollSpeed = useRef27({
     x: 0,
     y: 0
   });
-  const scrollDirection = useRef30({
+  const scrollDirection = useRef27({
     x: 0,
     y: 0
   });
@@ -50566,8 +50447,8 @@ function useAutoScroller(_ref) {
         return draggingRect;
     }
   }, [activator, draggingRect, pointerCoordinates]);
-  const scrollContainerRef = useRef30(null);
-  const autoScroll = useCallback26(() => {
+  const scrollContainerRef = useRef27(null);
+  const autoScroll = useCallback25(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) {
       return;
@@ -50577,7 +50458,7 @@ function useAutoScroller(_ref) {
     scrollContainer.scrollBy(scrollLeft, scrollTop);
   }, []);
   const sortedScrollableAncestors = useMemo10(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
-  useEffect38(
+  useEffect36(
     () => {
       if (!enabled || !scrollableAncestors.length || !rect) {
         clearAutoScrollInterval();
@@ -50718,16 +50599,16 @@ function useDroppableMeasuring(containers, _ref) {
     dependencies,
     config
   } = _ref;
-  const [queue, setQueue] = useState29(null);
+  const [queue, setQueue] = useState28(null);
   const {
     frequency,
     measure,
     strategy
   } = config;
-  const containersRef = useRef30(containers);
+  const containersRef = useRef27(containers);
   const disabled = isDisabled();
   const disabledRef = useLatestValue(disabled);
-  const measureDroppableContainers = useCallback26(function(ids2) {
+  const measureDroppableContainers = useCallback25(function(ids2) {
     if (ids2 === void 0) {
       ids2 = [];
     }
@@ -50741,7 +50622,7 @@ function useDroppableMeasuring(containers, _ref) {
       return value.concat(ids2.filter((id2) => !value.includes(id2)));
     });
   }, [disabledRef]);
-  const timeoutId = useRef30(null);
+  const timeoutId = useRef27(null);
   const droppableRects = useLazyMemo((previousValue) => {
     if (disabled && !dragging) {
       return defaultValue;
@@ -50767,10 +50648,10 @@ function useDroppableMeasuring(containers, _ref) {
     }
     return previousValue;
   }, [containers, queue, dragging, disabled, measure]);
-  useEffect38(() => {
+  useEffect36(() => {
     containersRef.current = containers;
   }, [containers]);
-  useEffect38(
+  useEffect36(
     () => {
       if (disabled) {
         return;
@@ -50780,7 +50661,7 @@ function useDroppableMeasuring(containers, _ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [dragging, disabled]
   );
-  useEffect38(
+  useEffect36(
     () => {
       if (queue && queue.length > 0) {
         setQueue(null);
@@ -50789,7 +50670,7 @@ function useDroppableMeasuring(containers, _ref) {
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(queue)]
   );
-  useEffect38(
+  useEffect36(
     () => {
       if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
         return;
@@ -50847,7 +50728,7 @@ function useMutationObserver(_ref) {
     } = window;
     return new MutationObserver2(handleMutations);
   }, [handleMutations, disabled]);
-  useEffect38(() => {
+  useEffect36(() => {
     return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
   }, [mutationObserver]);
   return mutationObserver;
@@ -50871,7 +50752,7 @@ function useResizeObserver(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled]
   );
-  useEffect38(() => {
+  useEffect36(() => {
     return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
   }, [resizeObserver]);
   return resizeObserver;
@@ -50883,7 +50764,7 @@ function useRect(element2, measure, fallbackRect2) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, setRect] = useState29(null);
+  const [rect, setRect] = useState28(null);
   function measureRect() {
     setRect((currentRect) => {
       if (!element2) {
@@ -50941,7 +50822,7 @@ function useRectDelta(rect) {
 }
 var defaultValue$1 = [];
 function useScrollableAncestors(node2) {
-  const previousNode = useRef30(node2);
+  const previousNode = useRef27(node2);
   const ancestors = useLazyMemo((previousValue) => {
     if (!node2) {
       return defaultValue$1;
@@ -50951,15 +50832,15 @@ function useScrollableAncestors(node2) {
     }
     return getScrollableAncestors(node2);
   }, [node2]);
-  useEffect38(() => {
+  useEffect36(() => {
     previousNode.current = node2;
   }, [node2]);
   return ancestors;
 }
 function useScrollOffsets(elements) {
-  const [scrollCoordinates, setScrollCoordinates] = useState29(null);
-  const prevElements = useRef30(elements);
-  const handleScroll = useCallback26((event) => {
+  const [scrollCoordinates, setScrollCoordinates] = useState28(null);
+  const prevElements = useRef27(elements);
+  const handleScroll = useCallback25((event) => {
     const scrollingElement = getScrollableElement(event.target);
     if (!scrollingElement) {
       return;
@@ -50972,7 +50853,7 @@ function useScrollOffsets(elements) {
       return new Map(scrollCoordinates2);
     });
   }, []);
-  useEffect38(() => {
+  useEffect36(() => {
     const previousElements = prevElements.current;
     if (elements !== previousElements) {
       cleanup(previousElements);
@@ -51011,15 +50892,15 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
   if (dependencies === void 0) {
     dependencies = [];
   }
-  const initialScrollOffsets = useRef30(null);
-  useEffect38(
+  const initialScrollOffsets = useRef27(null);
+  useEffect36(
     () => {
       initialScrollOffsets.current = null;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     dependencies
   );
-  useEffect38(() => {
+  useEffect36(() => {
     const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
     if (hasScrollOffsets && !initialScrollOffsets.current) {
       initialScrollOffsets.current = scrollOffsets;
@@ -51031,7 +50912,7 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
   return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
 }
 function useSensorSetup(sensors) {
-  useEffect38(
+  useEffect36(
     () => {
       if (!canUseDOM) {
         return;
@@ -51082,7 +50963,7 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect2 = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, setRects] = useState29(defaultValue$2);
+  const [rects, setRects] = useState28(defaultValue$2);
   function measureRects() {
     setRects(() => {
       if (!elements.length) {
@@ -51115,8 +50996,8 @@ function useDragOverlayMeasuring(_ref) {
   let {
     measure
   } = _ref;
-  const [rect, setRect] = useState29(null);
-  const handleResize = useCallback26((entries) => {
+  const [rect, setRect] = useState28(null);
+  const handleResize = useCallback25((entries) => {
     for (const {
       target
     } of entries) {
@@ -51136,7 +51017,7 @@ function useDragOverlayMeasuring(_ref) {
   const resizeObserver = useResizeObserver({
     callback: handleResize
   });
-  const handleNodeChange = useCallback26((element2) => {
+  const handleNodeChange = useCallback25((element2) => {
     const node2 = getMeasurableNode(element2);
     resizeObserver == null ? void 0 : resizeObserver.disconnect();
     if (node2) {
@@ -51371,7 +51252,7 @@ function RestoreFocus(_ref) {
   } = useContext7(InternalContext);
   const previousActivatorEvent = usePrevious(activatorEvent);
   const previousActiveId = usePrevious(active == null ? void 0 : active.id);
-  useEffect38(() => {
+  useEffect36(() => {
     if (disabled) {
       return;
     }
@@ -51448,7 +51329,7 @@ function useLayoutShiftScrollCompensation(_ref) {
     initialRect,
     config = true
   } = _ref;
-  const initialized = useRef30(false);
+  const initialized = useRef27(false);
   const {
     x: x8,
     y: y4
@@ -51516,7 +51397,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const store = useReducer(reducer, void 0, getInitialState);
   const [state, dispatch] = store;
   const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
-  const [status, setStatus] = useState29(Status.Uninitialized);
+  const [status, setStatus] = useState28(Status.Uninitialized);
   const isInitialized = status === Status.Initialized;
   const {
     draggable: {
@@ -51529,7 +51410,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     }
   } = state;
   const node2 = activeId != null ? draggableNodes.get(activeId) : null;
-  const activeRects = useRef30({
+  const activeRects = useRef27({
     initial: null,
     translated: null
   });
@@ -51542,9 +51423,9 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
       rect: activeRects
     } : null;
   }, [activeId, node2]);
-  const activeRef = useRef30(null);
-  const [activeSensor, setActiveSensor] = useState29(null);
-  const [activatorEvent, setActivatorEvent] = useState29(null);
+  const activeRef = useRef27(null);
+  const [activeSensor, setActiveSensor] = useState28(null);
+  const [activatorEvent, setActivatorEvent] = useState28(null);
   const latestProps = useLatestValue(props, Object.values(props));
   const draggableDescribedById = useUniqueId("DndDescribedBy", id2);
   const enabledDroppableContainers = useMemo10(() => droppableContainers.getEnabled(), [droppableContainers]);
@@ -51570,7 +51451,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   });
   const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
   const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
-  const sensorContext = useRef30({
+  const sensorContext = useRef27({
     activatorEvent: null,
     active: null,
     activeNode,
@@ -51628,11 +51509,11 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     pointerCoordinates
   }) : null;
   const overId = getFirstCollision(collisions, "id");
-  const [over, setOver] = useState29(null);
+  const [over, setOver] = useState28(null);
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
-  const activeSensorRef = useRef30(null);
-  const instantiateSensor = useCallback26(
+  const activeSensorRef = useRef27(null);
+  const instantiateSensor = useCallback25(
     (event, _ref2) => {
       let {
         sensor: Sensor,
@@ -51790,7 +51671,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [draggableNodes]
   );
-  const bindActivatorToSensorInstantiator = useCallback26((handler, sensor) => {
+  const bindActivatorToSensorInstantiator = useCallback25((handler, sensor) => {
     return (event, active2) => {
       const nativeEvent = event.nativeEvent;
       const activeDraggableNode = draggableNodes.get(active2);
@@ -51822,7 +51703,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
       setStatus(Status.Initialized);
     }
   }, [activeNodeRect, status]);
-  useEffect38(
+  useEffect36(
     () => {
       const {
         onDragMove
@@ -51857,7 +51738,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]
   );
-  useEffect38(
+  useEffect36(
     () => {
       const {
         active: active2,
@@ -52090,12 +51971,12 @@ function useDroppable(_ref) {
     over,
     measureDroppableContainers
   } = useContext7(InternalContext);
-  const previous3 = useRef30({
+  const previous3 = useRef27({
     disabled
   });
-  const resizeObserverConnected = useRef30(false);
-  const rect = useRef30(null);
-  const callbackId = useRef30(null);
+  const resizeObserverConnected = useRef27(false);
+  const rect = useRef27(null);
+  const callbackId = useRef27(null);
   const {
     disabled: resizeObserverDisabled,
     updateMeasurementsFor,
@@ -52105,7 +51986,7 @@ function useDroppable(_ref) {
     ...resizeObserverConfig
   };
   const ids2 = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id2);
-  const handleResize = useCallback26(
+  const handleResize = useCallback25(
     () => {
       if (!resizeObserverConnected.current) {
         resizeObserverConnected.current = true;
@@ -52126,7 +52007,7 @@ function useDroppable(_ref) {
     callback: handleResize,
     disabled: resizeObserverDisabled || !active
   });
-  const handleNodeChange = useCallback26((newElement, previousElement) => {
+  const handleNodeChange = useCallback25((newElement, previousElement) => {
     if (!resizeObserver) {
       return;
     }
@@ -52140,7 +52021,7 @@ function useDroppable(_ref) {
   }, [resizeObserver]);
   const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
   const dataRef = useLatestValue(data2);
-  useEffect38(() => {
+  useEffect36(() => {
     if (!resizeObserver || !nodeRef.current) {
       return;
     }
@@ -52148,7 +52029,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useEffect38(
+  useEffect36(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -52170,7 +52051,7 @@ function useDroppable(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [id2]
   );
-  useEffect38(() => {
+  useEffect36(() => {
     if (disabled !== previous3.current.disabled) {
       dispatch({
         type: Action.SetDroppableDisabled,
@@ -52192,7 +52073,7 @@ function useDroppable(_ref) {
 }
 
 // ../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js
-import React21, { useMemo as useMemo11, useRef as useRef31, useEffect as useEffect39, useState as useState30, useContext as useContext8 } from "react";
+import React21, { useMemo as useMemo11, useRef as useRef28, useEffect as useEffect37, useState as useState29, useContext as useContext8 } from "react";
 function arrayMove(array, from, to) {
   const newArray = array.slice();
   newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -52350,7 +52231,7 @@ function SortableContext(_ref) {
   const isDragging = active != null;
   const activeIndex = active ? items.indexOf(active.id) : -1;
   const overIndex = over ? items.indexOf(over.id) : -1;
-  const previousItemsRef = useRef31(items);
+  const previousItemsRef = useRef28(items);
   const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
   const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
   const disabled = normalizeDisabled(disabledProp);
@@ -52359,7 +52240,7 @@ function SortableContext(_ref) {
       measureDroppableContainers(items);
     }
   }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
-  useEffect39(() => {
+  useEffect37(() => {
     previousItemsRef.current = items;
   }, [items]);
   const contextValue = useMemo11(
@@ -52433,8 +52314,8 @@ function useDerivedTransform(_ref) {
     node: node2,
     rect
   } = _ref;
-  const [derivedTransform, setDerivedtransform] = useState30(null);
-  const previousIndex = useRef31(index2);
+  const [derivedTransform, setDerivedtransform] = useState29(null);
+  const previousIndex = useRef28(index2);
   useIsomorphicLayoutEffect(() => {
     if (!disabled && index2 !== previousIndex.current && node2.current) {
       const initial = rect.current;
@@ -52457,7 +52338,7 @@ function useDerivedTransform(_ref) {
       previousIndex.current = index2;
     }
   }, [disabled, index2, node2, rect]);
-  useEffect39(() => {
+  useEffect37(() => {
     if (derivedTransform) {
       setDerivedtransform(null);
     }
@@ -52552,7 +52433,7 @@ function useSortable(_ref) {
     overIndex
   }) : index2;
   const activeId = active == null ? void 0 : active.id;
-  const previous3 = useRef31({
+  const previous3 = useRef28({
     activeId,
     items,
     newIndex,
@@ -52579,7 +52460,7 @@ function useSortable(_ref) {
     node: node2,
     rect
   });
-  useEffect39(() => {
+  useEffect37(() => {
     if (isSorting && previous3.current.newIndex !== newIndex) {
       previous3.current.newIndex = newIndex;
     }
@@ -52590,7 +52471,7 @@ function useSortable(_ref) {
       previous3.current.items = items;
     }
   }, [isSorting, newIndex, containerId, items]);
-  useEffect39(() => {
+  useEffect37(() => {
     if (activeId === previous3.current.activeId) {
       return;
     }
@@ -52775,7 +52656,7 @@ function isAfter(a15, b8) {
 }
 
 // src/components/navigation/SortableResourceTab.tsx
-import { useCallback as useCallback27, useRef as useRef32, useEffect as useEffect40 } from "react";
+import { useCallback as useCallback26, useRef as useRef29, useEffect as useEffect38 } from "react";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function SortableResourceTab({
   resource,
@@ -52798,8 +52679,8 @@ function SortableResourceTab({
     transition,
     isDragging: isSortableDragging
   } = useSortable({ id: resource.id });
-  const onReorderRef = useRef32(onReorder);
-  useEffect40(() => {
+  const onReorderRef = useRef29(onReorder);
+  useEffect38(() => {
     onReorderRef.current = onReorder;
   });
   const style = {
@@ -52809,7 +52690,7 @@ function SortableResourceTab({
   };
   const iconEmoji = getResourceIcon(resource.mediaType);
   const isCurrentlyDragging = isSortableDragging || isDragging;
-  const handleKeyDown = useCallback27((e6) => {
+  const handleKeyDown = useCallback26((e6) => {
     if (onReorderRef.current && e6.altKey) {
       if (e6.key === "ArrowUp") {
         e6.preventDefault();
@@ -52862,37 +52743,37 @@ function SortableResourceTab({
 }
 
 // src/hooks/useDragAnnouncements.ts
-import { useCallback as useCallback28 } from "react";
+import { useCallback as useCallback27 } from "react";
 function useDragAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceReorder = useCallback28((message) => {
+  const announceReorder = useCallback27((message) => {
     announce(message, "assertive");
   }, [announce]);
-  const announcePickup = useCallback28((resourceName, position3, total) => {
+  const announcePickup = useCallback27((resourceName, position3, total) => {
     announce(
       `Picked up ${resourceName}. Position ${position3} of ${total}. Use arrow keys to move, space to drop.`,
       "assertive"
     );
   }, [announce]);
-  const announceDrop = useCallback28((resourceName, newPosition, total) => {
+  const announceDrop = useCallback27((resourceName, newPosition, total) => {
     announce(
       `Dropped ${resourceName} at position ${newPosition} of ${total}.`,
       "assertive"
     );
   }, [announce]);
-  const announceMove = useCallback28((resourceName, direction, newPosition, total) => {
+  const announceMove = useCallback27((resourceName, direction, newPosition, total) => {
     announce(
       `Moved ${resourceName} ${direction} to position ${newPosition} of ${total}.`,
       "polite"
     );
   }, [announce]);
-  const announceKeyboardReorder = useCallback28((resourceName, direction, newPosition, total) => {
+  const announceKeyboardReorder = useCallback27((resourceName, direction, newPosition, total) => {
     announce(
       `${resourceName} moved ${direction} to position ${newPosition} of ${total}.`,
       "assertive"
     );
   }, [announce]);
-  const announceCannotMove = useCallback28((direction) => {
+  const announceCannotMove = useCallback27((direction) => {
     announce(
       `Cannot move ${direction}. Already at the ${direction === "up" ? "top" : "bottom"} of the list.`,
       "polite"
@@ -52925,8 +52806,8 @@ function CollapsibleResourceNavigation({
 }) {
   const ChevronLeftIcon = icons.chevronLeft;
   const BarsIcon = icons.bars;
-  const [isDropdownOpen, setIsDropdownOpen] = useState31(false);
-  const dropdownRef = useRef33(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState30(false);
+  const dropdownRef = useRef30(null);
   const { announcePickup, announceDrop, announceKeyboardReorder, announceCannotMove } = useDragAnnouncements();
   const t12 = useTranslations("CollapsibleResourceNavigation");
   const eventBus = useEventBus();
@@ -52941,7 +52822,7 @@ function CollapsibleResourceNavigation({
   };
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
-  useEffect41(() => {
+  useEffect39(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         closeDropdown();
@@ -52963,7 +52844,7 @@ function CollapsibleResourceNavigation({
       coordinateGetter: sortableKeyboardCoordinates
     })
   );
-  const handleKeyboardReorder = useCallback29((resourceId, direction) => {
+  const handleKeyboardReorder = useCallback28((resourceId, direction) => {
     const currentIndex = resources.findIndex((r14) => r14.id === resourceId);
     if (currentIndex === -1) return;
     const newIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
@@ -53139,16 +53020,16 @@ function CollapsibleResourceNavigation({
 }
 
 // src/components/modals/SearchModal.tsx
-import { useState as useState32, useEffect as useEffect42, Fragment as Fragment13 } from "react";
+import { useState as useState31, useEffect as useEffect40, Fragment as Fragment13 } from "react";
 
 // src/hooks/useSearchAnnouncements.ts
-import { useCallback as useCallback30 } from "react";
+import { useCallback as useCallback29 } from "react";
 function useSearchAnnouncements2() {
   const { announce } = useLiveRegion();
-  const announceSearching = useCallback30(() => {
+  const announceSearching = useCallback29(() => {
     announce("Searching...", "polite");
   }, [announce]);
-  const announceSearchResults = useCallback30((count2, query) => {
+  const announceSearchResults = useCallback29((count2, query) => {
     if (count2 === 0) {
       announce(`No results found for ${query}`, "polite");
     } else if (count2 === 1) {
@@ -53157,10 +53038,10 @@ function useSearchAnnouncements2() {
       announce(`${count2} results found for ${query}`, "polite");
     }
   }, [announce]);
-  const announceSelection = useCallback30((name3, type) => {
+  const announceSelection = useCallback29((name3, type) => {
     announce(`Selected ${type}: ${name3}. Press Enter to navigate.`, "polite");
   }, [announce]);
-  const announceNavigation = useCallback30((name3, type) => {
+  const announceNavigation = useCallback29((name3, type) => {
     announce(`Navigating to ${type}: ${name3}`, "assertive");
   }, [announce]);
   return {
@@ -53181,10 +53062,10 @@ function SearchModal({
   translations = {}
 }) {
   const { announceSearchResults, announceSearching } = useSearchAnnouncements2();
-  const [query, setQuery] = useState32("");
-  const [debouncedQuery, setDebouncedQuery] = useState32("");
-  const [results, setResults] = useState32([]);
-  const [selectedIndex, setSelectedIndex] = useState32(0);
+  const [query, setQuery] = useState31("");
+  const [debouncedQuery, setDebouncedQuery] = useState31("");
+  const [results, setResults] = useState31([]);
+  const [selectedIndex, setSelectedIndex] = useState31(0);
   const t12 = {
     placeholder: translations.placeholder || "Search resources, entities...",
     searching: translations.searching || "Searching...",
@@ -53196,7 +53077,7 @@ function SearchModal({
     enter: translations.enter || "Enter",
     esc: translations.esc || "ESC"
   };
-  useEffect42(() => {
+  useEffect40(() => {
     const timer = setTimeout(() => {
       setDebouncedQuery(query);
     }, 300);
@@ -53204,7 +53085,7 @@ function SearchModal({
   }, [query]);
   const searchData = { resources: [], entities: [] };
   const loading = false;
-  useEffect42(() => {
+  useEffect40(() => {
     if (isOpen) {
       setQuery("");
       setDebouncedQuery("");
@@ -53212,7 +53093,7 @@ function SearchModal({
       setSelectedIndex(0);
     }
   }, [isOpen]);
-  useEffect42(() => {
+  useEffect40(() => {
     if (!debouncedQuery.trim()) {
       setResults([]);
       return;
@@ -53343,7 +53224,7 @@ function SearchModal({
 }
 
 // src/components/modals/ResourceSearchModal.tsx
-import { useState as useState33, useEffect as useEffect43, Fragment as Fragment14 } from "react";
+import { useState as useState32, useEffect as useEffect41, Fragment as Fragment14 } from "react";
 import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 function ResourceSearchModal({
   isOpen,
@@ -53353,8 +53234,8 @@ function ResourceSearchModal({
   translations = {}
 }) {
   const { announceSearchResults, announceSearching, announceNavigation } = useSearchAnnouncements2();
-  const [search2, setSearch] = useState33(searchTerm);
-  const [debouncedSearch, setDebouncedSearch] = useState33(searchTerm);
+  const [search2, setSearch] = useState32(searchTerm);
+  const [debouncedSearch, setDebouncedSearch] = useState32(searchTerm);
   const t12 = {
     title: translations.title || "Search Resources",
     placeholder: translations.placeholder || "Search for resources...",
@@ -53362,7 +53243,7 @@ function ResourceSearchModal({
     noResults: translations.noResults || "No documents found",
     close: translations.close || "\u2715"
   };
-  useEffect43(() => {
+  useEffect41(() => {
     const timer = setTimeout(() => {
       setDebouncedSearch(search2);
     }, 300);
@@ -53384,17 +53265,17 @@ function ResourceSearchModal({
       mediaType
     };
   }) || [];
-  useEffect43(() => {
+  useEffect41(() => {
     if (!loading && debouncedSearch) {
       announceSearchResults(results.length, debouncedSearch);
     }
   }, [loading, results.length, debouncedSearch]);
-  useEffect43(() => {
+  useEffect41(() => {
     if (loading && debouncedSearch) {
       announceSearching();
     }
   }, [loading, debouncedSearch]);
-  useEffect43(() => {
+  useEffect41(() => {
     if (isOpen && searchTerm) {
       setSearch(searchTerm);
       setDebouncedSearch(searchTerm);
@@ -53598,11 +53479,11 @@ function SessionTimer() {
 }
 
 // src/components/SessionExpiryBanner.tsx
-import { useState as useState34 } from "react";
+import { useState as useState33 } from "react";
 import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
 function SessionExpiryBanner() {
   const { timeRemaining, isExpiringSoon } = useSessionExpiry();
-  const [dismissed, setDismissed] = useState34(false);
+  const [dismissed, setDismissed] = useState33(false);
   const formattedTime = formatTime(timeRemaining);
   if (!isExpiringSoon || dismissed || !formattedTime) {
     return null;
@@ -53823,7 +53704,7 @@ function UnifiedHeader({
 }
 
 // src/components/layout/LeftSidebar.tsx
-import { useState as useState35, useEffect as useEffect44 } from "react";
+import { useState as useState34, useEffect as useEffect42 } from "react";
 import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
 function LeftSidebar({
   Link,
@@ -53838,7 +53719,7 @@ function LeftSidebar({
   isModerator = false,
   currentPath
 }) {
-  const [isCollapsed, setIsCollapsed] = useState35(false);
+  const [isCollapsed, setIsCollapsed] = useState34(false);
   const { width, setWidth, minWidth, maxWidth } = usePanelWidth({
     defaultWidth: 256,
     // 16rem
@@ -53848,7 +53729,7 @@ function LeftSidebar({
     // 25rem
     storageKey: "semiont-left-sidebar-width"
   });
-  useEffect44(() => {
+  useEffect42(() => {
     if (collapsible) {
       const saved = localStorage.getItem(storageKey);
       if (saved === "true") {
@@ -55062,7 +54943,7 @@ function AdminSecurityPage({
 }
 
 // src/features/admin-users/components/AdminUsersPage.tsx
-import { useState as useState36 } from "react";
+import { useState as useState35 } from "react";
 import { Fragment as Fragment15, jsx as jsx68, jsxs as jsxs56 } from "react/jsx-runtime";
 function UserTableRow({
   user,
@@ -55144,9 +55025,9 @@ function AdminUsersPage({
   Toolbar: Toolbar2,
   buttonStyles: buttonStyles2
 }) {
-  const [searchTerm, setSearchTerm] = useState36("");
-  const [selectedRole, setSelectedRole] = useState36("all");
-  const [selectedStatus, setSelectedStatus] = useState36("all");
+  const [searchTerm, setSearchTerm] = useState35("");
+  const [selectedRole, setSelectedRole] = useState35("all");
+  const [selectedStatus, setSelectedStatus] = useState35("all");
   const filteredUsers = users.filter((user) => {
     const matchesSearch = (user.name || "").toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase());
     const userRole = user.isAdmin ? "admin" : "user";
@@ -55461,7 +55342,7 @@ function SignInForm({
 }
 
 // src/features/auth/components/SignUpForm.tsx
-import { useState as useState37 } from "react";
+import { useState as useState36 } from "react";
 import { jsx as jsx70, jsxs as jsxs58 } from "react/jsx-runtime";
 function GoogleIcon2() {
   return /* @__PURE__ */ jsxs58("svg", { className: "semiont-icon semiont-icon--small semiont-icon--inline", viewBox: "0 0 24 24", children: [
@@ -55496,7 +55377,7 @@ function GoogleIcon2() {
   ] });
 }
 function SignUpForm({ onSignUp, Link, translations: t12 }) {
-  const [isLoading, setIsLoading] = useState37(false);
+  const [isLoading, setIsLoading] = useState36(false);
   const handleSignUp = async () => {
     setIsLoading(true);
     try {
@@ -55953,7 +55834,7 @@ function TagSchemasPage({
 }
 
 // src/features/resource-compose/components/ResourceComposePage.tsx
-import { useState as useState38, useEffect as useEffect45 } from "react";
+import { useState as useState37, useEffect as useEffect43 } from "react";
 import { isImageMimeType, isPdfMimeType as isPdfMimeType4, LOCALES as LOCALES2 } from "@semiont/api-client";
 import { jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
 function ResourceComposePage({
@@ -55972,19 +55853,19 @@ function ResourceComposePage({
   Toolbar: Toolbar2
 }) {
   const { announceFormSubmitting, announceFormSuccess, announceFormError } = useFormAnnouncements();
-  const [newResourceName, setNewResourceName] = useState38("");
-  const [newResourceContent, setNewResourceContent] = useState38("");
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState38([]);
-  const [isCreating, setIsCreating] = useState38(false);
-  const [inputMethod, setInputMethod] = useState38("write");
-  const [uploadedFile, setUploadedFile] = useState38(null);
-  const [fileMimeType, setFileMimeType] = useState38("text/markdown");
-  const [filePreviewUrl, setFilePreviewUrl] = useState38(null);
-  const [selectedFormat, setSelectedFormat] = useState38("text/markdown");
-  const [selectedLanguage, setSelectedLanguage] = useState38(initialLocale);
-  const [selectedCharset, setSelectedCharset] = useState38("");
-  const [archiveOriginal, setArchiveOriginal] = useState38(true);
-  useEffect45(() => {
+  const [newResourceName, setNewResourceName] = useState37("");
+  const [newResourceContent, setNewResourceContent] = useState37("");
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState37([]);
+  const [isCreating, setIsCreating] = useState37(false);
+  const [inputMethod, setInputMethod] = useState37("write");
+  const [uploadedFile, setUploadedFile] = useState37(null);
+  const [fileMimeType, setFileMimeType] = useState37("text/markdown");
+  const [filePreviewUrl, setFilePreviewUrl] = useState37(null);
+  const [selectedFormat, setSelectedFormat] = useState37("text/markdown");
+  const [selectedLanguage, setSelectedLanguage] = useState37(initialLocale);
+  const [selectedCharset, setSelectedCharset] = useState37("");
+  const [archiveOriginal, setArchiveOriginal] = useState37(true);
+  useEffect43(() => {
     if (mode === "clone" && cloneData) {
       setNewResourceName(cloneData.sourceResource.name);
       setNewResourceContent(cloneData.sourceContent);
@@ -56017,7 +55898,7 @@ function ResourceComposePage({
       reader.readAsText(file);
     }
   };
-  useEffect45(() => {
+  useEffect43(() => {
     return () => {
       if (filePreviewUrl) {
         URL.revokeObjectURL(filePreviewUrl);
@@ -56365,7 +56246,7 @@ function ResourceComposePage({
 }
 
 // src/features/resource-discovery/components/ResourceDiscoveryPage.tsx
-import { useState as useState39, useCallback as useCallback31, useRef as useRef34 } from "react";
+import { useState as useState38, useCallback as useCallback30, useRef as useRef31 } from "react";
 import { getResourceId as getResourceId2 } from "@semiont/api-client";
 
 // src/features/resource-discovery/components/ResourceCard.tsx
@@ -56438,8 +56319,8 @@ function ResourceDiscoveryPage({
   translations: t12,
   ToolbarPanels
 }) {
-  const [searchQuery2, setSearchQuery] = useState39("");
-  const [selectedEntityType, setSelectedEntityType] = useState39("");
+  const [searchQuery2, setSearchQuery] = useState38("");
+  const [selectedEntityType, setSelectedEntityType] = useState38("");
   const hasSearchQuery = searchQuery2.trim() !== "";
   const hasSearchResults = searchDocuments.length > 0;
   const baseDocuments = hasSearchResults ? searchDocuments : recentDocuments;
@@ -56456,18 +56337,18 @@ function ResourceDiscoveryPage({
     { orientation: "grid", cols: 2 }
     // 2 columns on medium+ screens
   );
-  const onNavigateToResourceRef = useRef34(onNavigateToResource);
+  const onNavigateToResourceRef = useRef31(onNavigateToResource);
   onNavigateToResourceRef.current = onNavigateToResource;
-  const handleEntityTypeFilter = useCallback31((entityType4) => {
+  const handleEntityTypeFilter = useCallback30((entityType4) => {
     setSelectedEntityType(entityType4);
   }, []);
-  const openResource = useCallback31((resource) => {
+  const openResource = useCallback30((resource) => {
     const resourceId = getResourceId2(resource);
     if (resourceId) {
       onNavigateToResourceRef.current(resourceId);
     }
   }, []);
-  const handleSearchSubmit = useCallback31((e6) => {
+  const handleSearchSubmit = useCallback30((e6) => {
     e6.preventDefault();
   }, []);
   if (isLoadingRecent) {
@@ -56599,13 +56480,82 @@ function ResourceDiscoveryPage({
 }
 
 // src/features/resource-viewer/components/ResourceViewerPage.tsx
-import { useState as useState44, useEffect as useEffect50, useCallback as useCallback35, useMemo as useMemo12 } from "react";
+import { useState as useState44, useEffect as useEffect49, useCallback as useCallback35, useMemo as useMemo12 } from "react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 import { getLanguage, getPrimaryRepresentation, resourceAnnotationUri as resourceAnnotationUri3, getPrimaryMediaType as getPrimaryMediaType2 } from "@semiont/api-client";
 import { uriToAnnotationId as uriToAnnotationId2 } from "@semiont/core";
 
+// src/hooks/useResolutionFlow.ts
+import { useCallback as useCallback31, useEffect as useEffect44, useRef as useRef32, useState as useState39 } from "react";
+import { resourceAnnotationUri, accessToken as accessToken3 } from "@semiont/api-client";
+import { uriToAnnotationIdOrPassthrough } from "@semiont/core";
+function toAccessToken2(token) {
+  return token ? accessToken3(token) : void 0;
+}
+function useResolutionFlow(rUri) {
+  const eventBus = useEventBus();
+  const client = useApiClient();
+  const token = useAuthToken();
+  const [searchModalOpen, setSearchModalOpen] = useState39(false);
+  const [pendingReferenceId, setPendingReferenceId] = useState39(null);
+  const onCloseSearchModal = useCallback31(() => {
+    setSearchModalOpen(false);
+  }, []);
+  const rUriRef = useRef32(rUri);
+  useEffect44(() => {
+    rUriRef.current = rUri;
+  });
+  const clientRef = useRef32(client);
+  useEffect44(() => {
+    clientRef.current = client;
+  });
+  const tokenRef = useRef32(token);
+  useEffect44(() => {
+    tokenRef.current = token;
+  });
+  useEffect44(() => {
+    const handleAnnotationUpdateBody = async (event) => {
+      try {
+        const annotationIdSegment = uriToAnnotationIdOrPassthrough(event.annotationUri);
+        const nestedUri = resourceAnnotationUri(`${rUriRef.current}/annotations/${annotationIdSegment}`);
+        await clientRef.current.updateAnnotationBody(nestedUri, {
+          resourceId: event.resourceId,
+          operations: event.operations
+        }, { auth: toAccessToken2(tokenRef.current) });
+        eventBus.emit("annotation:body-updated", { annotationUri: event.annotationUri });
+      } catch (error) {
+        console.error("Failed to update annotation body:", error);
+        eventBus.emit("annotation:body-update-failed", { error });
+      }
+    };
+    const handleReferenceLink = (event) => {
+      eventBus.emit("resolution:search-requested", {
+        referenceId: event.annotationUri,
+        searchTerm: event.searchTerm
+      });
+    };
+    eventBus.on("annotation:update-body", handleAnnotationUpdateBody);
+    eventBus.on("reference:link", handleReferenceLink);
+    return () => {
+      eventBus.off("annotation:update-body", handleAnnotationUpdateBody);
+      eventBus.off("reference:link", handleReferenceLink);
+    };
+  }, [eventBus]);
+  useEffect44(() => {
+    const handleResolutionSearchRequested = (event) => {
+      setPendingReferenceId(event.referenceId);
+      setSearchModalOpen(true);
+    };
+    eventBus.on("resolution:search-requested", handleResolutionSearchRequested);
+    return () => {
+      eventBus.off("resolution:search-requested", handleResolutionSearchRequested);
+    };
+  }, [eventBus]);
+  return { searchModalOpen, pendingReferenceId, onCloseSearchModal };
+}
+
 // src/hooks/useDetectionFlow.ts
-import { useState as useState40, useRef as useRef35, useEffect as useEffect46, useCallback as useCallback32 } from "react";
+import { useState as useState40, useRef as useRef33, useEffect as useEffect45, useCallback as useCallback32 } from "react";
 import { resourceAnnotationUri as resourceAnnotationUri2, accessToken as accessToken4, entityType as entityType3 } from "@semiont/api-client";
 import { uriToAnnotationIdOrPassthrough as uriToAnnotationIdOrPassthrough2 } from "@semiont/core";
 function toAccessToken3(token) {
@@ -56615,20 +56565,19 @@ function useDetectionFlow(rUri) {
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
-  const clientRef = useRef35(client);
-  const rUriRef = useRef35(rUri);
-  const tokenRef = useRef35(token);
-  useEffect46(() => {
+  const clientRef = useRef33(client);
+  const rUriRef = useRef33(rUri);
+  const tokenRef = useRef33(token);
+  useEffect45(() => {
     clientRef.current = client;
   });
-  useEffect46(() => {
+  useEffect45(() => {
     rUriRef.current = rUri;
   });
-  useEffect46(() => {
+  useEffect45(() => {
     tokenRef.current = token;
   });
   const [pendingAnnotation, setPendingAnnotation] = useState40(null);
-  const [hoveredAnnotationId, setHoveredAnnotationId] = useState40(null);
   const handleAnnotationRequested = useCallback32((pending) => {
     const MOTIVATION_TO_TAB = {
       highlighting: "annotations",
@@ -56695,19 +56644,10 @@ function useDetectionFlow(rUri) {
   const handleAnnotationCancelPending = useCallback32(() => {
     setPendingAnnotation(null);
   }, []);
-  const handleAnnotationHover = useCallback32(({ annotationId }) => {
-    setHoveredAnnotationId(annotationId);
-    if (annotationId) {
-      eventBus.emit("annotation:sparkle", { annotationId });
-    }
-  }, []);
-  const handleAnnotationClick = useCallback32(({ annotationId }) => {
-    eventBus.emit("annotation:focus", { annotationId });
-  }, []);
   const [detectingMotivation, setDetectingMotivation] = useState40(null);
   const [detectionProgress, setDetectionProgress] = useState40(null);
-  const detectionStreamRef = useRef35(null);
-  const progressDismissTimeoutRef = useRef35(null);
+  const detectionStreamRef = useRef33(null);
+  const progressDismissTimeoutRef = useRef33(null);
   const handleDetectionProgress = useCallback32((chunk) => {
     setDetectionProgress(chunk);
   }, []);
@@ -56741,7 +56681,7 @@ function useDetectionFlow(rUri) {
     }
     setDetectionProgress(null);
   }, []);
-  useEffect46(() => {
+  useEffect45(() => {
     const handleAnnotationCreate = async (event) => {
       const currentClient = clientRef.current;
       const currentRUri = rUriRef.current;
@@ -56756,6 +56696,7 @@ function useDetectionFlow(rUri) {
           body: event.body
         }, { auth: toAccessToken3(tokenRef.current) });
         if (result.annotation) {
+          setPendingAnnotation(null);
           eventBus.emit("annotation:created", { annotation: result.annotation });
         }
       } catch (error) {
@@ -56921,15 +56862,13 @@ function useDetectionFlow(rUri) {
     "selection:assessment-requested": handleAssessmentRequested,
     "selection:reference-requested": handleReferenceRequested,
     "annotation:cancel-pending": handleAnnotationCancelPending,
-    "annotation:hover": handleAnnotationHover,
-    "annotation:click": handleAnnotationClick,
     // AI detection state updates
     "detection:progress": handleDetectionProgress,
     "detection:complete": handleDetectionComplete,
     "detection:failed": handleDetectionFailed,
     "detection:dismiss-progress": handleDetectionDismissProgress
   });
-  useEffect46(() => {
+  useEffect45(() => {
     return () => {
       if (progressDismissTimeoutRef.current) {
         clearTimeout(progressDismissTimeoutRef.current);
@@ -56938,7 +56877,6 @@ function useDetectionFlow(rUri) {
   }, []);
   return {
     pendingAnnotation,
-    hoveredAnnotationId,
     detectingMotivation,
     detectionProgress,
     detectionStreamRef
@@ -56946,7 +56884,7 @@ function useDetectionFlow(rUri) {
 }
 
 // src/hooks/usePanelNavigation.ts
-import { useState as useState41, useCallback as useCallback33, useEffect as useEffect47 } from "react";
+import { useState as useState41, useCallback as useCallback33, useEffect as useEffect46 } from "react";
 function usePanelNavigation() {
   const [activePanel, setActivePanel] = useState41(() => {
     if (typeof window !== "undefined") {
@@ -56957,7 +56895,7 @@ function usePanelNavigation() {
   });
   const [scrollToAnnotationId, setScrollToAnnotationId] = useState41(null);
   const [panelInitialTab, setPanelInitialTab] = useState41(null);
-  useEffect47(() => {
+  useEffect46(() => {
     if (typeof window === "undefined") return;
     if (activePanel) {
       localStorage.setItem("activeToolbarPanel", activePanel);
@@ -57005,7 +56943,7 @@ function usePanelNavigation() {
 }
 
 // src/hooks/useGenerationFlow.ts
-import { useState as useState42, useCallback as useCallback34, useEffect as useEffect48, useRef as useRef36 } from "react";
+import { useState as useState42, useCallback as useCallback34, useEffect as useEffect47, useRef as useRef34 } from "react";
 import { annotationUri, accessToken as accessToken5 } from "@semiont/api-client";
 function toAccessToken4(token) {
   return token ? accessToken5(token) : void 0;
@@ -57014,15 +56952,15 @@ function useGenerationFlow(locale, resourceId, showSuccess, showError, cacheMana
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
-  const clientRef = useRef36(client);
-  const tokenRef = useRef36(token);
-  useEffect48(() => {
+  const clientRef = useRef34(client);
+  const tokenRef = useRef34(token);
+  useEffect47(() => {
     clientRef.current = client;
   });
-  useEffect48(() => {
+  useEffect47(() => {
     tokenRef.current = token;
   });
-  const generationStreamRef = useRef36(null);
+  const generationStreamRef = useRef34(null);
   const [isGenerating, setIsGenerating] = useState42(false);
   const [generationProgress, setGenerationProgress] = useState42(null);
   const handleProgressEvent = useCallback34((chunk) => {
@@ -57083,7 +57021,7 @@ function useGenerationFlow(locale, resourceId, showSuccess, showError, cacheMana
     setIsGenerating(false);
     showError(`Resource generation failed: ${error.message}`);
   }, [showError]);
-  useEffect48(() => {
+  useEffect47(() => {
     const handleGenerationStart = async (event) => {
       console.log("[useGenerationFlow] handleGenerationStart called", { annotationUri: event.annotationUri, options: event.options });
       try {
@@ -57164,7 +57102,7 @@ function useGenerationFlow(locale, resourceId, showSuccess, showError, cacheMana
 }
 
 // src/hooks/useContextRetrievalFlow.ts
-import { useState as useState43, useEffect as useEffect49, useRef as useRef37 } from "react";
+import { useState as useState43, useEffect as useEffect48, useRef as useRef35 } from "react";
 import { accessToken as accessToken6 } from "@semiont/api-client";
 function toAccessToken5(token) {
   return token ? accessToken6(token) : void 0;
@@ -57175,15 +57113,15 @@ function useContextRetrievalFlow(emitter, config) {
   const [retrievalLoading, setRetrievalLoading] = useState43(false);
   const [retrievalError, setRetrievalError] = useState43(null);
   const [retrievalAnnotationUri, setRetrievalAnnotationUri] = useState43(null);
-  const configRef = useRef37(config);
-  const tokenRef = useRef37(token);
-  useEffect49(() => {
+  const configRef = useRef35(config);
+  const tokenRef = useRef35(token);
+  useEffect48(() => {
     configRef.current = config;
   });
-  useEffect49(() => {
+  useEffect48(() => {
     tokenRef.current = token;
   });
-  useEffect49(() => {
+  useEffect48(() => {
     const handleContextRetrievalRequested = async (event) => {
       setRetrievalLoading(true);
       setRetrievalError(null);
@@ -57258,9 +57196,10 @@ function ResourceViewerPage({
   const referencedBy = referencedByData?.referencedBy || [];
   const { data: entityTypesData } = entityTypesAPI.list.useQuery();
   const allEntityTypes = entityTypesData?.entityTypes || [];
-  const { detectingMotivation, detectionProgress, pendingAnnotation, hoveredAnnotationId } = useDetectionFlow(rUri);
+  const { hoveredAnnotationId } = useAttentionFlow();
+  const { detectingMotivation, detectionProgress, pendingAnnotation } = useDetectionFlow(rUri);
   const { activePanel, scrollToAnnotationId, panelInitialTab, onScrollCompleted } = usePanelNavigation();
-  const { searchModalOpen, pendingReferenceId, onCloseSearchModal } = useResolutionFlow(eventBus, { client, resourceUri: rUri });
+  const { searchModalOpen, pendingReferenceId, onCloseSearchModal } = useResolutionFlow(rUri);
   const {
     generationProgress,
     generationModalOpen,
@@ -57277,7 +57216,7 @@ function ResourceViewerPage({
     },
     500
   );
-  useEffect50(() => {
+  useEffect49(() => {
     if (resource && rUri) {
       const resourceIdSegment = rUri.split("/").pop() || "";
       const mediaType = getPrimaryMediaType2(resource);
@@ -57446,7 +57385,7 @@ function ResourceViewerPage({
     announceResourceLoading,
     announceResourceLoaded
   } = useResourceLoadingAnnouncements();
-  useEffect50(() => {
+  useEffect49(() => {
     if (contentLoading) {
       announceResourceLoading(resource.name);
     } else if (content4) {
@@ -57684,6 +57623,7 @@ export {
   ErrorBoundary,
   EventBusProvider,
   Footer,
+  HOVER_DELAY_MS,
   HighlightEntry,
   HighlightPanel,
   HistoryEvent,
@@ -57752,6 +57692,7 @@ export {
   buttonStyles,
   createCancelDetectionHandler,
   createDetectionHandler,
+  createHoverHandlers,
   cssVariables,
   dispatch401Error,
   dispatch403Error,
@@ -57784,6 +57725,7 @@ export {
   useAnnotationManager,
   useAnnotations,
   useApiClient,
+  useAttentionFlow,
   useAuthApi,
   useAuthToken,
   useCacheManager,
@@ -57801,6 +57743,7 @@ export {
   useFormAnnouncements,
   useGenerationFlow,
   useHealth,
+  useHoverEmitter,
   useIsTyping,
   useKeyboardShortcuts,
   useLanguageChangeAnnouncements,