@semiont/react-ui 0.2.34-build.91 → 0.2.34-build.92

package/src/components/image-annotation/AnnotationOverlay.tsx

@@ -18,6 +18,7 @@ interface AnnotationOverlayProps {
   eventBus?: EventBus;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
+  hoverDelayMs: number;
 }
 
 /**
@@ -62,8 +63,8 @@ function getAnnotationTooltip(annotation: Annotation): string {
 /**
  * Render annotation overlay - displays existing annotations as SVG shapes
  *
- * @emits annotation:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
- * @emits annotation:click - Annotation clicked. Payload: { annotationId: string, motivation: Motivation }
+ * @emits attend:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
+ * @emits attend:click - Annotation clicked. Payload: { annotationId: string, motivation: Motivation }
  */
 export function AnnotationOverlay({
   annotations,
@@ -73,14 +74,15 @@ export function AnnotationOverlay({
   displayHeight,
   eventBus,
   hoveredAnnotationId,
-  selectedAnnotationId
+  selectedAnnotationId,
+  hoverDelayMs
 }: AnnotationOverlayProps) {
   const scaleX = displayWidth / imageWidth;
   const scaleY = displayHeight / imageHeight;
 
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.get('annotation:hover').next({ annotationId })),
-    [eventBus]
+    () => createHoverHandlers((annotationId) => eventBus?.get('attend:hover').next({ annotationId }), hoverDelayMs),
+    [eventBus, hoverDelayMs]
   );
 
   return (
@@ -129,7 +131,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -142,7 +144,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -176,7 +178,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -189,7 +191,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -236,7 +238,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -249,7 +251,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}

package/src/components/image-annotation/SvgDrawingCanvas.tsx

@@ -6,6 +6,7 @@ import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import type { EventBus } from "@semiont/core"
+import { useHoverDelay } from '../../hooks/useHoverDelay';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -42,13 +43,14 @@ interface SvgDrawingCanvasProps {
   eventBus?: EventBus;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
+  hoverDelayMs?: number;
 }
 
 /**
  * SVG-based drawing canvas for creating image annotations with shapes
  *
- * @emits annotation:click - Annotation clicked on canvas. Payload: { annotationId: string, motivation: Motivation }
- * @emits annotation:requested - New annotation drawn on canvas. Payload: { selector: SvgSelector, motivation: SelectionMotivation }
+ * @emits attend:click - Annotation clicked on canvas. Payload: { annotationId: string, motivation: Motivation }
+ * @emits annotate:requested - New annotation drawn on canvas. Payload: { selector: SvgSelector, motivation: SelectionMotivation }
  */
 export function SvgDrawingCanvas({
   resourceUri,
@@ -59,6 +61,7 @@ export function SvgDrawingCanvas({
   hoveredAnnotationId,
   selectedAnnotationId
 }: SvgDrawingCanvasProps) {
+  const { hoverDelayMs } = useHoverDelay();
   const imageUrl = useMemo(() => {
     const resourceId = resourceUri.split('/').pop();
     return `/api/resources/${resourceId}`;
@@ -213,7 +216,7 @@ export function SvgDrawingCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('annotation:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          eventBus?.get('attend:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -276,7 +279,7 @@ export function SvgDrawingCanvas({
 
     // Emit annotation:requested event with SvgSelector
     if (eventBus && selectedMotivation) {
-      eventBus.get('annotation:requested').next({
+      eventBus.get('annotate:requested').next({
         selector: {
           type: 'SvgSelector',
           value: nativeSvg
@@ -338,6 +341,7 @@ export function SvgDrawingCanvas({
               imageHeight={imageDimensions.height}
               displayWidth={displayDimensions.width}
               displayHeight={displayDimensions.height}
+              hoverDelayMs={hoverDelayMs}
               {...(eventBus && { eventBus })}
               {...(hoveredAnnotationId !== undefined && { hoveredAnnotationId })}
               {...(selectedAnnotationId !== undefined && { selectedAnnotationId })}

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -55,14 +55,15 @@ interface PdfAnnotationCanvasProps {
   eventBus?: EventBus;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
+  hoverDelayMs?: number;
 }
 
 /**
  * PDF annotation canvas with page navigation and rectangle drawing
  *
- * @emits annotation:click - Annotation clicked on PDF. Payload: { annotationId: string, motivation: Motivation }
- * @emits annotation:requested - New annotation drawn on PDF. Payload: { selector: FragmentSelector, motivation: SelectionMotivation }
- * @emits annotation:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
+ * @emits attend:click - Annotation clicked on PDF. Payload: { annotationId: string, motivation: Motivation }
+ * @emits annotate:requested - New annotation drawn on PDF. Payload: { selector: FragmentSelector, motivation: SelectionMotivation }
+ * @emits attend:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
  */
 export function PdfAnnotationCanvas({
   resourceUri,
@@ -71,7 +72,8 @@ export function PdfAnnotationCanvas({
   selectedMotivation,
   eventBus,
   hoveredAnnotationId,
-  selectedAnnotationId
+  selectedAnnotationId,
+  hoverDelayMs = 150
 }: PdfAnnotationCanvasProps) {
   const pdfUrl = useMemo(() => {
     const resourceId = resourceUri.split('/').pop();
@@ -285,7 +287,7 @@ export function PdfAnnotationCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('annotation:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          eventBus?.get('attend:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -324,7 +326,7 @@ export function PdfAnnotationCanvas({
 
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
-      eventBus.get('annotation:requested').next({
+      eventBus.get('annotate:requested').next({
         selector: {
           type: 'FragmentSelector',
           conformsTo: 'http://tools.ietf.org/rfc/rfc3778',
@@ -362,8 +364,8 @@ export function PdfAnnotationCanvas({
 
   // Hover handlers with currentHover guard and dwell delay
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.get('annotation:hover').next({ annotationId })),
-    [eventBus]
+    () => createHoverHandlers((annotationId) => eventBus?.get('attend:hover').next({ annotationId }), hoverDelayMs),
+    [eventBus, hoverDelayMs]
   );
 
   // Calculate motivation color
@@ -462,7 +464,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => eventBus?.get('annotation:click').next({ annotationId: ann.id, motivation: ann.motivation })}
+                      onClick={() => eventBus?.get('attend:click').next({ annotationId: ann.id, motivation: ann.motivation })}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -156,7 +156,7 @@ describe('PdfAnnotationCanvas', () => {
     expect(rects?.length).toBeGreaterThan(0);
   });
 
-  test('emits annotation:requested via eventBus when drawing with sufficient drag', async () => {
+  test('emits annotate:requested via eventBus when drawing with sufficient drag', async () => {
     const mockEventBus = {
       emit: vi.fn(),
       on: vi.fn(),

package/src/components/resource/AnnotateView.tsx

@@ -41,6 +41,7 @@ interface Props {
   getTargetDocumentName?: (documentId: string) => string | undefined;
   generatingReferenceId?: string | null;
   showLineNumbers?: boolean;
+  hoverDelayMs?: number;
   annotateMode: boolean;
 }
 
@@ -127,11 +128,11 @@ function segmentTextWithAnnotations(content: string, annotations: Annotation[]):
 /**
  * View component for annotating resources with text selection and drawing
  *
- * @emits annotation:requested - User requested to create annotation. Payload: { selector: Selector | Selector[], motivation: SelectionMotivation }
- * @subscribes toolbar:selection-changed - Toolbar selection changed. Payload: { motivation: string | null }
- * @subscribes toolbar:click-changed - Toolbar click action changed. Payload: { action: string }
- * @subscribes toolbar:shape-changed - Toolbar shape changed. Payload: { shape: string }
- * @subscribes annotation:hover - Annotation hovered. Payload: { annotationId: string | null }
+ * @emits annotate:requested - User requested to create annotation. Payload: { selector: Selector | Selector[], motivation: SelectionMotivation }
+ * @subscribes annotate:selection-changed - Toolbar selection changed. Payload: { motivation: string | null }
+ * @subscribes annotate:click-changed - Toolbar click action changed. Payload: { action: string }
+ * @subscribes annotate:shape-changed - Toolbar shape changed. Payload: { shape: string }
+ * @subscribes attend:hover - Annotation hovered. Payload: { annotationId: string | null }
  */
 export function AnnotateView({
   content,
@@ -144,6 +145,7 @@ export function AnnotateView({
   getTargetDocumentName,
   generatingReferenceId,
   showLineNumbers = false,
+  hoverDelayMs = 150,
   annotateMode
 }: Props) {
   const { newAnnotationIds } = useResourceAnnotations();
@@ -183,10 +185,10 @@ export function AnnotateView({
 
   // Subscribe to toolbar events and annotation hover
   useEventSubscriptions({
-    'toolbar:selection-changed': handleToolbarSelectionChanged,
-    'toolbar:click-changed': handleToolbarClickChanged,
-    'toolbar:shape-changed': handleToolbarShapeChanged,
-    'annotation:hover': handleAnnotationHover,
+    'annotate:selection-changed': handleToolbarSelectionChanged,
+    'annotate:click-changed': handleToolbarClickChanged,
+    'annotate:shape-changed': handleToolbarShapeChanged,
+    'attend:hover': handleAnnotationHover,
   });
 
   // Handle text annotation with sparkle or immediate creation
@@ -208,7 +210,7 @@ export function AnnotateView({
 
     const handleMouseUp = (e: MouseEvent) => {
       // Skip if the mouseUp came from PDF or image canvas
-      // (those components handle their own annotation:requested events)
+      // (those components handle their own annotate:requested events)
       const target = e.target as Element;
       if (target.closest('.semiont-pdf-annotation-canvas') ||
           target.closest('.semiont-svg-drawing-canvas')) {
@@ -248,7 +250,7 @@ export function AnnotateView({
 
         // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
         if (selectedMotivation) {
-          eventBus.get('annotation:requested').next({
+          eventBus.get('annotate:requested').next({
             selector: [
               {
                 type: 'TextPositionSelector',
@@ -282,7 +284,7 @@ export function AnnotateView({
 
         // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
         if (selectedMotivation) {
-          eventBus.get('annotation:requested').next({
+          eventBus.get('annotate:requested').next({
             selector: [
               {
                 type: 'TextPositionSelector',
@@ -338,6 +340,7 @@ export function AnnotateView({
             {...(scrollToAnnotationId !== undefined && { scrollToAnnotationId })}
             sourceView={true}
             showLineNumbers={showLineNumbers}
+            hoverDelayMs={hoverDelayMs}
             enableWidgets={enableWidgets}
             eventBus={eventBus}
             {...(getTargetDocumentName && { getTargetDocumentName })}
@@ -373,6 +376,7 @@ export function AnnotateView({
                     selectedMotivation={selectedMotivation}
                     eventBus={eventBus}
                     hoveredAnnotationId={hoveredCommentId || hoveredAnnotationId || null}
+                    hoverDelayMs={hoverDelayMs}
                   />
                 </Suspense>
               )}
@@ -402,6 +406,7 @@ export function AnnotateView({
                 selectedMotivation={selectedMotivation}
                 eventBus={eventBus}
                 hoveredAnnotationId={hoveredCommentId || hoveredAnnotationId || null}
+                hoverDelayMs={hoverDelayMs}
               />
             )}
           </div>

package/src/components/resource/BrowseView.tsx

@@ -10,6 +10,7 @@ import { resourceUri as toResourceUri } from '@semiont/core';
 import { getExactText, getTextPositionSelector, getTargetSelector, getBodySource, getMimeCategory, isPdfMimeType } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { createHoverHandlers } from '../../hooks/useAttentionFlow';
+import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
 import { ImageViewer } from '../viewers';
 import { AnnotateToolbar, type ClickAction } from '../annotation/AnnotateToolbar';
 import type { AnnotationsCollection } from '../../types/annotation-props';
@@ -31,6 +32,7 @@ interface Props {
   hoveredCommentId?: string | null;
   selectedClick?: ClickAction;
   annotateMode: boolean;
+  hoverDelayMs?: number;
 }
 
 /**
@@ -41,8 +43,8 @@ function prepareAnnotations(annotations: Annotation[]): PreparedAnnotation[] {
 /**
  * View component for browsing resources with rendered annotations
  *
- * @emits annotation:click - Annotation clicked in browse view. Payload: { annotationId: string, motivation: Motivation }
- * @emits annotation:hover - Annotation hovered in browse view. Payload: { annotationId: string | null }
+ * @emits attend:click - Annotation clicked in browse view. Payload: { annotationId: string, motivation: Motivation }
+ * @emits attend:hover - Annotation hovered in browse view. Payload: { annotationId: string | null }
  */
   return annotations
     .map(ann => {
@@ -68,11 +70,11 @@ function prepareAnnotations(annotations: Annotation[]): PreparedAnnotation[] {
 /**
  * View component for browsing annotated resources in read-only mode
  *
- * @emits annotation:click - User clicked on annotation. Payload: { annotationId: string, motivation: Motivation }
- * @emits annotation:hover - User hovered over annotation. Payload: { annotationId: string | null }
+ * @emits attend:click - User clicked on annotation. Payload: { annotationId: string, motivation: Motivation }
+ * @emits attend:hover - User hovered over annotation. Payload: { annotationId: string | null }
  *
- * @subscribes annotation:hover - Highlight annotation on hover. Payload: { annotationId: string | null }
- * @subscribes annotation:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
+ * @subscribes attend:hover - Highlight annotation on hover. Payload: { annotationId: string | null }
+ * @subscribes attend:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
  */
 export function BrowseView({
   content,
@@ -80,7 +82,8 @@ export function BrowseView({
   resourceUri,
   annotations,
   selectedClick = 'detail',
-  annotateMode
+  annotateMode,
+  hoverDelayMs = 150
 }: Props) {
   const { newAnnotationIds } = useResourceAnnotations();
   const eventBus = useEventBus();
@@ -112,13 +115,14 @@ export function BrowseView({
       if (annotationId && annotationType === 'reference') {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          eventBus.get('annotation:click').next({ annotationId, motivation: annotation.motivation });
+          eventBus.get('attend:click').next({ annotationId, motivation: annotation.motivation });
         }
       }
     };
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBus.get('annotation:hover').next({ annotationId })
+      (annotationId) => eventBus.get('attend:hover').next({ annotationId }),
+      hoverDelayMs
     );
 
     // Single mouseover handler for the container - fires once on enter
@@ -157,48 +161,13 @@ export function BrowseView({
       container.removeEventListener('mouseout', handleMouseOut);
       cleanupHover();
     };
-  }, [content, allAnnotations, newAnnotationIds]);
+  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs]);
 
   // Helper to scroll annotation into view with pulse effect
   const scrollToAnnotation = useCallback((annotationId: string | null, removePulse = false) => {
-    if (!containerRef.current || !annotationId) return;
-
-    const element = containerRef.current.querySelector(
-      `[data-annotation-id="${CSS.escape(annotationId)}"]`
-    ) as HTMLElement;
-
-    if (!element) return;
-
-    // Find the scroll container
-    const scrollContainer = element.closest('.semiont-browse-view__content') as HTMLElement;
-
-    if (scrollContainer) {
-      // Check visibility within the scroll container
-      const elementRect = element.getBoundingClientRect();
-      const containerRect = scrollContainer.getBoundingClientRect();
-
-      const isVisible =
-        elementRect.top >= containerRect.top &&
-        elementRect.bottom <= containerRect.bottom;
-
-      if (!isVisible) {
-        // Scroll using container.scrollTo to avoid scrolling ancestors
-        const elementTop = element.offsetTop;
-        const containerHeight = scrollContainer.clientHeight;
-        const elementHeight = element.offsetHeight;
-        const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
-
-        scrollContainer.scrollTo({ top: scrollTo, behavior: 'smooth' });
-      }
-    }
-
-    // Add pulse effect
-    element.classList.add('annotation-pulse');
-    if (removePulse) {
-      setTimeout(() => {
-        element.classList.remove('annotation-pulse');
-      }, 2000);
-    }
+    if (!containerRef.current) return;
+    // removePulse = true means "add pulse and auto-remove after 2s"
+    scrollAnnotationIntoView(annotationId, containerRef.current, { pulse: removePulse });
   }, []);
 
   // Handle hover events for scrolling
@@ -212,8 +181,8 @@ export function BrowseView({
   }, [scrollToAnnotation]);
 
   useEventSubscriptions({
-    'annotation:hover': handleAnnotationHover,
-    'annotation:focus': handleAnnotationFocus,
+    'attend:hover': handleAnnotationHover,
+    'attend:focus': handleAnnotationFocus,
   });
 
   // Route to appropriate viewer based on MIME type category

package/src/components/resource/ResourceViewer.tsx

@@ -24,7 +24,7 @@ type SemiontResource = components['schemas']['ResourceDescriptor'];
  * ResourceViewer - Display and interact with resource content and annotations
  *
  * This component uses event-driven architecture for real-time updates:
- * - Subscribes to make-meaning events (annotation:added, annotation:removed, annotation:updated)
+ * - Subscribes to make-meaning events (annotate:added, annotate:removed, annotate:body-updated)
  * - Automatically invalidates cache when annotations change
  * - No manual refetch needed - events handle cache invalidation
  *
@@ -43,27 +43,29 @@ interface Props {
   annotations: AnnotationsCollection;
   generatingReferenceId?: string | null;
   showLineNumbers?: boolean;
+  hoverDelayMs?: number;
   hoveredAnnotationId?: string | null;
 }
 
 /**
- * @emits annotation:delete - User requested to delete annotation. Payload: { annotationId: string }
- * @emits panel:open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
+ * @emits annotate:delete - User requested to delete annotation. Payload: { annotationId: string }
+ * @emits attend:panel-open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
  *
- * @subscribes view:mode-toggled - Toggles between browse and annotate mode. Payload: { mode: 'browse' | 'annotate' }
- * @subscribes annotation:added - New annotation was added. Payload: { annotation: Annotation }
- * @subscribes annotation:removed - Annotation was removed. Payload: { annotationId: string }
- * @subscribes annotation:updated - Annotation was updated. Payload: { annotation: Annotation }
- * @subscribes toolbar:selection-changed - Text selection tool changed. Payload: { selection: boolean }
- * @subscribes toolbar:click-changed - Click annotation tool changed. Payload: { click: 'detail' | 'scroll' | null }
- * @subscribes toolbar:shape-changed - Drawing shape changed. Payload: { shape: string }
- * @subscribes annotation:click - User clicked on annotation. Payload: { annotationId: string }
+ * @subscribes annotate:mode-toggled - Toggles between browse and annotate mode. Payload: { mode: 'browse' | 'annotate' }
+ * @subscribes annotate:added - New annotation was added. Payload: { annotation: Annotation }
+ * @subscribes annotate:removed - Annotation was removed. Payload: { annotationId: string }
+ * @subscribes annotate:body-updated - Annotation was updated. Payload: { annotation: Annotation }
+ * @subscribes annotate:selection-changed - Text selection tool changed. Payload: { selection: boolean }
+ * @subscribes annotate:click-changed - Click annotation tool changed. Payload: { click: 'detail' | 'scroll' | null }
+ * @subscribes annotate:shape-changed - Drawing shape changed. Payload: { shape: string }
+ * @subscribes attend:click - User clicked on annotation. Payload: { annotationId: string }
  */
 export function ResourceViewer({
   resource,
   annotations,
   generatingReferenceId,
   showLineNumbers = false,
+  hoverDelayMs,
   hoveredAnnotationId: hoveredAnnotationIdProp
 }: Props) {
   const t = useTranslations('ResourceViewer');
@@ -122,19 +124,19 @@ export function ResourceViewer({
   // This replaces manual onRefetchAnnotations calls with automatic updates
   const cacheManager = useCacheManager();
 
-  const handleAnnotationAdded = useCallback(() => {
+  const handleAnnotateAdded = useCallback(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
 
-  const handleAnnotationRemoved = useCallback(() => {
+  const handleAnnotateRemoved = useCallback(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
 
-  const handleAnnotationUpdated = useCallback(() => {
+  const handleAnnotateBodyUpdated = useCallback(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
@@ -250,7 +252,7 @@ export function ResourceViewer({
 
   // Handle deleting annotations - emit event instead of direct call
   const handleDeleteAnnotation = useCallback((id: string) => {
-    eventBus.get('annotation:delete').next({ annotationId: id });
+    eventBus.get('annotate:delete').next({ annotationId: id });
   }, []); // eventBus is stable
 
   // Handle annotation clicks - memoized
@@ -339,27 +341,27 @@ export function ResourceViewer({
 
     // All annotations open the unified annotations panel
     // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel
-    eventBus.get('panel:open').next({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
+    eventBus.get('attend:panel-open').next({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
   }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick]);
 
   // Event subscriptions - Combined into single useEventSubscriptions call to prevent hook ordering issues
   // IMPORTANT: All event subscriptions MUST be in a single call to maintain consistent hook order between renders
   useEventSubscriptions({
     // View mode
-    'view:mode-toggled': handleViewModeToggle,
+    'annotate:mode-toggled': handleViewModeToggle,
 
     // Annotation cache invalidation
-    'annotation:added': handleAnnotationAdded,
-    'annotation:removed': handleAnnotationRemoved,
-    'annotation:updated': handleAnnotationUpdated,
+    'annotate:added': handleAnnotateAdded,
+    'annotate:removed': handleAnnotateRemoved,
+    'annotate:body-updated': handleAnnotateBodyUpdated,
 
     // Toolbar state
-    'toolbar:selection-changed': handleToolbarSelectionChanged,
-    'toolbar:click-changed': handleToolbarClickChanged,
-    'toolbar:shape-changed': handleToolbarShapeChanged,
+    'annotate:selection-changed': handleToolbarSelectionChanged,
+    'annotate:click-changed': handleToolbarClickChanged,
+    'annotate:shape-changed': handleToolbarShapeChanged,
 
     // Annotation clicks
-    'annotation:click': handleAnnotationClickEvent,
+    'attend:click': handleAnnotationClickEvent,
   });
 
   // Prepare props for child components
@@ -400,6 +402,7 @@ export function ResourceViewer({
           getTargetDocumentName={getTargetDocumentName}
           {...(generatingReferenceId !== undefined && { generatingReferenceId })}
           showLineNumbers={showLineNumbers}
+          hoverDelayMs={hoverDelayMs}
           annotateMode={annotateMode}
         />
       ) : (
@@ -410,6 +413,7 @@ export function ResourceViewer({
           annotations={annotationsCollection}
           hoveredCommentId={hoveredCommentId}
           selectedClick={selectedClick}
+          hoverDelayMs={hoverDelayMs}
           annotateMode={annotateMode}
         />
       )}