@semiont/react-ui 0.2.35-build.98 → 0.2.35

package/src/components/annotation/__tests__/AnnotateToolbar.test.tsx

@@ -51,10 +51,10 @@ function createEventTracker() {
       };
 
       const toolbarEvents = [
-        'annotate:mode-toggled',
-        'annotate:click-changed',
-        'annotate:selection-changed',
-        'annotate:shape-changed',
+        'mark:mode-toggled',
+        'mark:click-changed',
+        'mark:selection-changed',
+        'mark:shape-changed',
       ] as const;
 
       toolbarEvents.forEach(eventName => {
@@ -215,7 +215,7 @@ describe('AnnotateToolbar', () => {
       });
     });
 
-    it('emits annotate:mode-toggled event when Browse is clicked in Annotate mode', async () => {
+    it('emits mark:mode-toggled event when Browse is clicked in Annotate mode', async () => {
       const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar
@@ -234,11 +234,11 @@ describe('AnnotateToolbar', () => {
       });
 
       await waitFor(() => {
-        expect(tracker.events.some(e => e.event === 'annotate:mode-toggled')).toBe(true);
+        expect(tracker.events.some(e => e.event === 'mark:mode-toggled')).toBe(true);
       });
     });
 
-    it('emits annotate:mode-toggled event when Annotate is clicked in Browse mode', async () => {
+    it('emits mark:mode-toggled event when Annotate is clicked in Browse mode', async () => {
       const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar
@@ -257,7 +257,7 @@ describe('AnnotateToolbar', () => {
       });
 
       await waitFor(() => {
-        expect(tracker.events.some(e => e.event === 'annotate:mode-toggled')).toBe(true);
+        expect(tracker.events.some(e => e.event === 'mark:mode-toggled')).toBe(true);
       });
     });
 
@@ -283,7 +283,7 @@ describe('AnnotateToolbar', () => {
 
       // Verify the event was emitted
       await waitFor(() => {
-        expect(tracker.events.some(e => e.event === 'annotate:mode-toggled')).toBe(true);
+        expect(tracker.events.some(e => e.event === 'mark:mode-toggled')).toBe(true);
       });
 
       // Simulate mode change by rerendering with new mode
@@ -311,7 +311,7 @@ describe('AnnotateToolbar', () => {
   });
 
   describe('CLICK Group Interactions', () => {
-    it('emits annotate:click-changed event when clicking an action', async () => {
+    it('emits mark:click-changed event when clicking an action', async () => {
       const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar {...defaultProps} />,
@@ -329,7 +329,7 @@ describe('AnnotateToolbar', () => {
       fireEvent.click(screen.getByText('Follow'));
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:click-changed' && e.payload?.action === 'follow'
+          e.event === 'mark:click-changed' && e.payload?.action === 'follow'
         )).toBe(true);
       });
     });
@@ -343,7 +343,7 @@ describe('AnnotateToolbar', () => {
   });
 
   describe('MOTIVATION Group Interactions', () => {
-    it('emits annotate:selection-changed event when clicking a motivation', async () => {
+    it('emits mark:selection-changed event when clicking a motivation', async () => {
       const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar {...defaultProps} />,
@@ -361,7 +361,7 @@ describe('AnnotateToolbar', () => {
       fireEvent.click(screen.getByText('Reference'));
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:selection-changed' && e.payload?.motivation === 'linking'
+          e.event === 'mark:selection-changed' && e.payload?.motivation === 'linking'
         )).toBe(true);
       });
     });
@@ -389,7 +389,7 @@ describe('AnnotateToolbar', () => {
       fireEvent.click(within(dropdown).getByText('Highlight'));
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:selection-changed' && e.payload?.motivation === 'highlighting'
+          e.event === 'mark:selection-changed' && e.payload?.motivation === 'highlighting'
         )).toBe(true);
       });
 
@@ -418,14 +418,14 @@ describe('AnnotateToolbar', () => {
       fireEvent.click(within(dropdown2).getByText('Highlight'));
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:selection-changed' && e.payload?.motivation === null
+          e.event === 'mark:selection-changed' && e.payload?.motivation === null
         )).toBe(true);
       });
     });
   });
 
   describe('SHAPE Group Interactions', () => {
-    it('emits annotate:shape-changed event when clicking a shape', async () => {
+    it('emits mark:shape-changed event when clicking a shape', async () => {
       const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar
@@ -447,7 +447,7 @@ describe('AnnotateToolbar', () => {
       fireEvent.click(screen.getByText('Circle'));
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:shape-changed' && e.payload?.shape === 'circle'
+          e.event === 'mark:shape-changed' && e.payload?.shape === 'circle'
         )).toBe(true);
       });
     });

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

@@ -2,7 +2,7 @@
 
 import { useMemo } from 'react';
 import type { components } from '@semiont/core';
-import { createHoverHandlers } from '../../hooks/useAttentionFlow';
+import { createHoverHandlers } from '../../hooks/useBeckonFlow';
 import { getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
 import { parseSvgSelector } from '@semiont/api-client';
 import type { EventBus } from "@semiont/core"
@@ -63,8 +63,8 @@ function getAnnotationTooltip(annotation: Annotation): string {
 /**
  * Render annotation overlay - displays existing annotations as SVG shapes
  *
- * @emits attend:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
- * @emits attend:click - Annotation clicked. Payload: { annotationId: string, motivation: Motivation }
+ * @emits beckon:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
+ * @emits browse:click - Annotation clicked. Payload: { annotationId: string, motivation: Motivation }
  */
 export function AnnotationOverlay({
   annotations,
@@ -81,7 +81,7 @@ export function AnnotationOverlay({
   const scaleY = displayHeight / imageHeight;
 
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.get('attend:hover').next({ annotationId }), hoverDelayMs),
+    () => createHoverHandlers((annotationId) => eventBus?.get('beckon:hover').next({ annotationId }), hoverDelayMs),
     [eventBus, hoverDelayMs]
   );
 
@@ -131,7 +131,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -144,7 +144,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -178,7 +178,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -191,7 +191,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -238,7 +238,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -251,7 +251,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('attend:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}

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

@@ -49,8 +49,8 @@ interface SvgDrawingCanvasProps {
 /**
  * SVG-based drawing canvas for creating image annotations with shapes
  *
- * @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 }
+ * @emits browse:click - Annotation clicked on canvas. Payload: { annotationId: string, motivation: Motivation }
+ * @emits mark:requested - New annotation drawn on canvas. Payload: { selector: SvgSelector, motivation: SelectionMotivation }
  */
 export function SvgDrawingCanvas({
   resourceUri,
@@ -216,7 +216,7 @@ export function SvgDrawingCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('attend:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          eventBus?.get('browse:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -279,7 +279,7 @@ export function SvgDrawingCanvas({
 
     // Emit annotation:requested event with SvgSelector
     if (eventBus && selectedMotivation) {
-      eventBus.get('annotate:requested').next({
+      eventBus.get('mark:requested').next({
         selector: {
           type: 'SvgSelector',
           value: nativeSvg

package/src/components/navigation/CollapsibleResourceNavigation.tsx

@@ -28,9 +28,9 @@ import './CollapsibleResourceNavigation.css';
  * Supports drag and drop for resource reordering when expanded.
  * Platform-agnostic design for use across different React environments.
  *
- * @emits navigation:resource-reorder - Resource tab reordered. Payload: { oldIndex: number, newIndex: number }
- * @emits navigation:resource-close - Resource tab closed. Payload: { resourceId: string }
- * @emits navigation:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
+ * @emits browse:resource-reorder - Resource tab reordered. Payload: { oldIndex: number, newIndex: number }
+ * @emits browse:resource-close - Resource tab closed. Payload: { resourceId: string }
+ * @emits browse:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
  */
 export function CollapsibleResourceNavigation({
   fixedItems,
@@ -110,7 +110,7 @@ export function CollapsibleResourceNavigation({
     }
 
     // Emit event
-    eventBus.get('navigation:resource-reorder').next({ oldIndex: currentIndex, newIndex });
+    eventBus.get('browse:resource-reorder').next({ oldIndex: currentIndex, newIndex });
 
     // Announce the change
     const resource = resources[currentIndex];
@@ -123,7 +123,7 @@ export function CollapsibleResourceNavigation({
     e.stopPropagation();
 
     // Emit event
-    eventBus.get('navigation:resource-close').next({ resourceId });
+    eventBus.get('browse:resource-close').next({ resourceId });
 
     // If we're closing the currently viewed resource, navigate to first fixed item or trigger callback
     const resourceHref = getResourceHref(resourceId);
@@ -151,7 +151,7 @@ export function CollapsibleResourceNavigation({
       const newIndex = resources.findIndex((resource) => resource.id === over.id);
       if (oldIndex !== -1 && newIndex !== -1) {
         // Emit event
-        eventBus.get('navigation:resource-reorder').next({ oldIndex, newIndex });
+        eventBus.get('browse:resource-reorder').next({ oldIndex, newIndex });
         const resource = resources[oldIndex];
         announceDrop(resource.name, newIndex + 1, resources.length);
       }
@@ -189,7 +189,7 @@ export function CollapsibleResourceNavigation({
               <span className="semiont-nav-section__header-text">{mergedTranslations.title}</span>
             )}
             <button
-              onClick={() => eventBus.get('navigation:sidebar-toggle').next(undefined)}
+              onClick={() => eventBus.get('browse:sidebar-toggle').next(undefined)}
               className="semiont-nav-section__header-icon"
               title={isCollapsed ? mergedTranslations.expandSidebar : mergedTranslations.collapseSidebar}
               aria-label={isCollapsed ? mergedTranslations.expandSidebar : mergedTranslations.collapseSidebar}

package/src/components/navigation/ObservableLink.tsx

@@ -27,7 +27,7 @@ export interface ObservableLinkProps extends React.AnchorHTMLAttributes<HTMLAnch
  * - State coordination before navigation
  * - Logging navigation flows
  *
- * The component emits 'navigation:link-clicked' event before allowing
+ * The component emits 'browse:link-clicked' event before allowing
  * the browser to follow the link.
  *
  * @example
@@ -51,7 +51,7 @@ export interface ObservableLinkProps extends React.AnchorHTMLAttributes<HTMLAnch
  * </Link>
  * ```
  *
- * @emits navigation:link-clicked - Link clicked by user. Payload: { href: string, label?: string }
+ * @emits browse:link-clicked - Link clicked by user. Payload: { href: string, label?: string }
  */
 export function ObservableLink({
   href,
@@ -70,7 +70,7 @@ export function ObservableLink({
 
   const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
     // Emit event for observability
-    eventBus.get('navigation:link-clicked').next({
+    eventBus.get('browse:link-clicked').next({
       href,
       label
     });

package/src/components/navigation/SimpleNavigation.tsx

@@ -29,7 +29,7 @@ export interface SimpleNavigationProps {
  * Simple navigation component for Admin and Moderation modes.
  * Renders a section header with optional dropdown and static navigation tabs.
  *
- * @emits navigation:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
+ * @emits browse:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
  */
 export function SimpleNavigation({
   title,
@@ -86,7 +86,7 @@ export function SimpleNavigation({
             !isCollapsed && <span className="semiont-nav-section__header-text">{title}</span>
           )}
           <button
-            onClick={() => eventBus.get('navigation:sidebar-toggle').next(undefined)}
+            onClick={() => eventBus.get('browse:sidebar-toggle').next(undefined)}
             className="semiont-nav-section__header-icon"
             title={isCollapsed ? expandSidebarLabel : collapseSidebarLabel}
             aria-label={isCollapsed ? expandSidebarLabel : collapseSidebarLabel}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import { createHoverHandlers } from '../../hooks/useAttentionFlow';
+import { createHoverHandlers } from '../../hooks/useBeckonFlow';
 import type { components, ResourceUri } from '@semiont/core';
 import { getTargetSelector } from '@semiont/api-client';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
@@ -61,9 +61,9 @@ interface PdfAnnotationCanvasProps {
 /**
  * PDF annotation canvas with page navigation and rectangle drawing
  *
- * @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 }
+ * @emits browse:click - Annotation clicked on PDF. Payload: { annotationId: string, motivation: Motivation }
+ * @emits mark:requested - New annotation drawn on PDF. Payload: { selector: FragmentSelector, motivation: SelectionMotivation }
+ * @emits beckon:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
  */
 export function PdfAnnotationCanvas({
   resourceUri,
@@ -287,7 +287,7 @@ export function PdfAnnotationCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('attend:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          eventBus?.get('browse:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -326,7 +326,7 @@ export function PdfAnnotationCanvas({
 
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
-      eventBus.get('annotate:requested').next({
+      eventBus.get('mark:requested').next({
         selector: {
           type: 'FragmentSelector',
           conformsTo: 'http://tools.ietf.org/rfc/rfc3778',
@@ -364,7 +364,7 @@ export function PdfAnnotationCanvas({
 
   // Hover handlers with currentHover guard and dwell delay
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.get('attend:hover').next({ annotationId }), hoverDelayMs),
+    () => createHoverHandlers((annotationId) => eventBus?.get('beckon:hover').next({ annotationId }), hoverDelayMs),
     [eventBus, hoverDelayMs]
   );
 
@@ -464,7 +464,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => eventBus?.get('attend:click').next({ annotationId: ann.id, motivation: ann.motivation })}
+                      onClick={() => eventBus?.get('browse:click').next({ annotationId: ann.id, motivation: ann.motivation })}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

package/src/components/resource/AnnotateView.tsx

@@ -132,11 +132,11 @@ function segmentTextWithAnnotations(content: string, annotations: Annotation[]):
 /**
  * View component for annotating resources with text selection and drawing
  *
- * @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 }
+ * @emits mark:requested - User requested to create annotation. Payload: { selector: Selector | Selector[], motivation: SelectionMotivation }
+ * @subscribes mark:selection-changed - Toolbar selection changed. Payload: { motivation: string | null }
+ * @subscribes mark:click-changed - Toolbar click action changed. Payload: { action: string }
+ * @subscribes mark:shape-changed - Toolbar shape changed. Payload: { shape: string }
+ * @subscribes beckon:hover - Annotation hovered. Payload: { annotationId: string | null }
  */
 export function AnnotateView({
   content,
@@ -189,10 +189,10 @@ export function AnnotateView({
 
   // Subscribe to toolbar events and annotation hover
   useEventSubscriptions({
-    'annotate:selection-changed': handleToolbarSelectionChanged,
-    'annotate:click-changed': handleToolbarClickChanged,
-    'annotate:shape-changed': handleToolbarShapeChanged,
-    'attend:hover': handleAnnotationHover,
+    'mark:selection-changed': handleToolbarSelectionChanged,
+    'mark:click-changed': handleToolbarClickChanged,
+    'mark:shape-changed': handleToolbarShapeChanged,
+    'beckon:hover': handleAnnotationHover,
   });
 
   // Handle text annotation with sparkle or immediate creation
@@ -214,7 +214,7 @@ export function AnnotateView({
 
     const handleMouseUp = (e: MouseEvent) => {
       // Skip if the mouseUp came from PDF or image canvas
-      // (those components handle their own annotate:requested events)
+      // (those components handle their own mark:requested events)
       const target = e.target as Element;
       if (target.closest('.semiont-pdf-annotation-canvas') ||
           target.closest('.semiont-svg-drawing-canvas')) {
@@ -254,7 +254,7 @@ export function AnnotateView({
 
         // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
         if (selectedMotivation) {
-          eventBus.get('annotate:requested').next({
+          eventBus.get('mark:requested').next({
             selector: [
               {
                 type: 'TextPositionSelector',
@@ -288,7 +288,7 @@ export function AnnotateView({
 
         // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
         if (selectedMotivation) {
-          eventBus.get('annotate:requested').next({
+          eventBus.get('mark:requested').next({
             selector: [
               {
                 type: 'TextPositionSelector',

package/src/components/resource/BrowseView.tsx

@@ -6,7 +6,7 @@ import remarkGfm from 'remark-gfm';
 import { resourceUri as toResourceUri } from '@semiont/core';
 import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
-import { createHoverHandlers } from '../../hooks/useAttentionFlow';
+import { createHoverHandlers } from '../../hooks/useBeckonFlow';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
 import { ImageViewer } from '../viewers';
 import { AnnotateToolbar, type ClickAction } from '../annotation/AnnotateToolbar';
@@ -63,11 +63,11 @@ const MemoizedMarkdown = memo(function MemoizedMarkdown({
  * - Layer 1: Markdown renders once (MemoizedMarkdown, cached by content)
  * - Layer 2: Annotation overlay applied via DOM Range API after paint
  *
- * @emits attend:click - User clicked on annotation. Payload: { annotationId: string, motivation: Motivation }
- * @emits attend:hover - User hovered over annotation. Payload: { annotationId: string | null }
+ * @emits browse:click - User clicked on annotation. Payload: { annotationId: string, motivation: Motivation }
+ * @emits beckon:hover - User hovered over annotation. Payload: { annotationId: string | null }
  *
- * @subscribes attend:hover - Highlight annotation on hover. Payload: { annotationId: string | null }
- * @subscribes attend:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
+ * @subscribes beckon:hover - Highlight annotation on hover. Payload: { annotationId: string | null }
+ * @subscribes beckon:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
  */
 export const BrowseView = memo(function BrowseView({
   content,
@@ -135,13 +135,13 @@ export const BrowseView = memo(function BrowseView({
       if (annotationId && annotationType === 'reference') {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          eventBus.get('attend:click').next({ annotationId, motivation: annotation.motivation });
+          eventBus.get('browse:click').next({ annotationId, motivation: annotation.motivation });
         }
       }
     };
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBus.get('attend:hover').next({ annotationId }),
+      (annotationId) => eventBus.get('beckon:hover').next({ annotationId }),
       hoverDelayMs
     );
 
@@ -201,8 +201,8 @@ export const BrowseView = memo(function BrowseView({
   }, [scrollToAnnotation]);
 
   useEventSubscriptions({
-    'attend:hover': handleAnnotationHover,
-    'attend:focus': handleAnnotationFocus,
+    'beckon:hover': handleAnnotationHover,
+    'beckon:focus': handleAnnotationFocus,
   });
 
   // Route to appropriate viewer based on MIME type category

package/src/components/resource/ResourceViewer.tsx

@@ -12,7 +12,7 @@ import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference
 import { useEventBus } from '../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 import { useCacheManager } from '../../contexts/CacheContext';
-import { useObservableExternalNavigation } from '../../hooks/useObservableNavigation';
+import { useObservableExternalNavigation } from '../../hooks/useObservableBrowse';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import type { AnnotationsCollection } from '../../types/annotation-props';
 import { getSelectorType, getSelectedShapeForSelectorType, saveSelectedShapeForSelectorType } from '../../lib/media-shapes';
@@ -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 (annotate:added, annotate:removed, annotate:body-updated)
+ * - Subscribes to make-meaning events (mark:added, mark:removed, mark:body-updated)
  * - Automatically invalidates cache when annotations change
  * - No manual refetch needed - events handle cache invalidation
  *
@@ -48,17 +48,17 @@ interface Props {
 }
 
 /**
- * @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 }
+ * @emits mark:delete - User requested to delete annotation. Payload: { annotationId: string }
+ * @emits browse:panel-open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
  *
- * @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 }
+ * @subscribes mark:mode-toggled - Toggles between browse and annotate mode. Payload: { mode: 'browse' | 'annotate' }
+ * @subscribes mark:added - New annotation was added. Payload: { annotation: Annotation }
+ * @subscribes mark:removed - Annotation was removed. Payload: { annotationId: string }
+ * @subscribes mark:body-updated - Annotation was updated. Payload: { annotation: Annotation }
+ * @subscribes mark:selection-changed - Text selection tool changed. Payload: { selection: boolean }
+ * @subscribes mark:click-changed - Click annotation tool changed. Payload: { click: 'detail' | 'scroll' | null }
+ * @subscribes mark:shape-changed - Drawing shape changed. Payload: { shape: string }
+ * @subscribes browse:click - User clicked on annotation. Payload: { annotationId: string }
  */
 export function ResourceViewer({
   resource,
@@ -251,7 +251,7 @@ export function ResourceViewer({
 
   // Handle deleting annotations - emit event instead of direct call
   const handleDeleteAnnotation = useCallback((id: string) => {
-    eventBus.get('annotate:delete').next({ annotationId: id });
+    eventBus.get('mark:delete').next({ annotationId: id });
   }, []); // eventBus is stable
 
   // Handle annotation clicks - memoized
@@ -279,7 +279,7 @@ export function ResourceViewer({
     if (selectedClick === 'follow' && isReference(annotation)) {
       const bodySource = getBodySource(annotation.body);
       if (bodySource) {
-        // Navigate to the linked resource - emits 'navigation:external-navigate' event
+        // Navigate to the linked resource - emits 'browse:external-navigate' event
         const resourceId = bodySource.split('/resources/')[1];
         if (resourceId) {
           navigate(`/know/resource/${resourceId}`, { resourceId });
@@ -340,27 +340,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('attend:panel-open').next({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
+    eventBus.get('browse: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
-    'annotate:mode-toggled': handleViewModeToggle,
+    'mark:mode-toggled': handleViewModeToggle,
 
     // Annotation cache invalidation
-    'annotate:added': handleAnnotateAdded,
-    'annotate:removed': handleAnnotateRemoved,
-    'annotate:body-updated': handleAnnotateBodyUpdated,
+    'mark:added': handleAnnotateAdded,
+    'mark:removed': handleAnnotateRemoved,
+    'mark:body-updated': handleAnnotateBodyUpdated,
 
     // Toolbar state
-    'annotate:selection-changed': handleToolbarSelectionChanged,
-    'annotate:click-changed': handleToolbarClickChanged,
-    'annotate:shape-changed': handleToolbarShapeChanged,
+    'mark:selection-changed': handleToolbarSelectionChanged,
+    'mark:click-changed': handleToolbarClickChanged,
+    'mark:shape-changed': handleToolbarShapeChanged,
 
     // Annotation clicks
-    'attend:click': handleAnnotationClickEvent,
+    'browse:click': handleAnnotationClickEvent,
   });
 
   // Prepare props for child components (memoized to prevent unnecessary re-renders of BrowseView/AnnotateView)