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

package/dist/test-utils.d.mts

@@ -2,8 +2,8 @@ import { ReactElement } from 'react';
 import { RenderOptions, RenderResult } from '@testing-library/react';
 export * from '@testing-library/react';
 import { QueryClient } from '@tanstack/react-query';
-import { T as TranslationManager, S as SessionManager, O as OpenResourcesManager } from './EventBusContext-DMI4uwYk.mjs';
-export { r as resetEventBusForTesting } from './EventBusContext-DMI4uwYk.mjs';
+import { T as TranslationManager, S as SessionManager, O as OpenResourcesManager } from './EventBusContext-BsIUjdWP.mjs';
+export { r as resetEventBusForTesting } from './EventBusContext-BsIUjdWP.mjs';
 import { EventBus } from '@semiont/core';
 export { vi } from 'vitest';
 import 'react/jsx-runtime';

package/dist/test-utils.mjs

@@ -10,7 +10,7 @@ import {
   EventBusProvider,
   resetEventBusForTesting,
   useEventBus
-} from "./chunk-YI5IX5ZA.mjs";
+} from "./chunk-2HGWOLVN.mjs";
 import "./chunk-JH7BXE2P.mjs";
 import {
   __commonJS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.2.35-build.101",
+  "version": "0.2.35-build.102",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/AnnotateReferencesProgressWidget.tsx

@@ -2,18 +2,18 @@
 
 import { useTranslations } from '../contexts/TranslationContext';
 import { useEventBus } from '../contexts/EventBusContext';
-import type { AnnotationProgress } from '@semiont/core';
+import type { MarkProgress } from '@semiont/core';
 import type { components } from '@semiont/core';
 
 type Motivation = components['schemas']['Motivation'];
 
-// Extended AnnotationProgress with optional request parameters
-interface EnrichedAnnotationProgress extends AnnotationProgress {
+// Extended MarkProgress with optional request parameters
+interface EnrichedMarkProgress extends MarkProgress {
   requestParams?: Array<{ label: string; value: string }>;
 }
 
 interface AnnotateReferencesProgressWidgetProps {
-  progress: AnnotationProgress | null;
+  progress: MarkProgress | null;
   annotationType?: Motivation | 'reference';
 }
 
@@ -58,7 +58,7 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
 
       {/* Request Parameters */}
       {(() => {
-        const enrichedProgress = progress as EnrichedAnnotationProgress;
+        const enrichedProgress = progress as EnrichedMarkProgress;
         return enrichedProgress.requestParams && enrichedProgress.requestParams.length > 0 && (
           <div className="semiont-annotation-progress__params">
             <div className="semiont-annotation-progress__params-title">Request Parameters:</div>

package/src/components/CodeMirrorRenderer.tsx

@@ -10,7 +10,7 @@ import { scrollAnnotationIntoView } from '../lib/scroll-utils';
 import { isHighlight, isReference, isResolvedReference, isComment, isAssessment, isTag, getBodySource } from '@semiont/api-client';
 import type { components } from '@semiont/core';
 import type { EventBus } from "@semiont/core";
-import { createHoverHandlers } from '../hooks/useAttentionFlow';
+import { createHoverHandlers } from '../hooks/useBeckonFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -348,7 +348,7 @@ export function CodeMirrorRenderer({
               const segment = segmentsByIdRef.current.get(annotationId);
               if (segment?.annotation) {
                 event.preventDefault();
-                eventBusRef.current.get('attend:click').next({
+                eventBusRef.current.get('browse:click').next({
                   annotationId,
                   motivation: segment.annotation.motivation
                 });
@@ -416,7 +416,7 @@ export function CodeMirrorRenderer({
     const container = view.dom;
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBusRef.current?.get('attend:hover').next({ annotationId }),
+      (annotationId) => eventBusRef.current?.get('beckon:hover').next({ annotationId }),
       hoverDelayMs
     );
 
@@ -449,10 +449,10 @@ export function CodeMirrorRenderer({
       if (!annotationId || !eventBusRef.current) return;
 
       if (isResolved && bodySource) {
-        eventBusRef.current.get('navigation:reference-navigate').next({ documentId: bodySource });
+        eventBusRef.current.get('browse:reference-navigate').next({ documentId: bodySource });
       } else {
         const motivation = (widget.dataset.widgetMotivation || 'linking') as Annotation['motivation'];
-        eventBusRef.current.get('attend:click').next({ annotationId, motivation });
+        eventBusRef.current.get('browse:click').next({ annotationId, motivation });
       }
     };
 

package/src/components/Toolbar.tsx

@@ -17,7 +17,7 @@ interface Props<T extends string = string> {
 /**
  * Toolbar component for panel navigation
  *
- * @emits attend:panel-toggle - Toggle panel visibility. Payload: { panel: string }
+ * @emits browse:panel-toggle - Toggle panel visibility. Payload: { panel: string }
  */
 export function Toolbar<T extends string = string>({
   context,
@@ -28,7 +28,7 @@ export function Toolbar<T extends string = string>({
   const eventBus = useEventBus();
 
   const handlePanelToggle = (panel: string) => {
-    eventBus.get('attend:panel-toggle').next({ panel });
+    eventBus.get('browse:panel-toggle').next({ panel });
   };
 
   return (

package/src/components/annotation/AnnotateToolbar.tsx

@@ -102,10 +102,10 @@ function DropdownGroup({
 /**
  * Toolbar for annotation controls with mode, selection, click, and shape options
  *
- * @emits annotate:selection-changed - Selection motivation changed. Payload: { motivation: SelectionMotivation | null }
- * @emits annotate:click-changed - Click action mode changed. Payload: { action: ClickAction }
- * @emits annotate:shape-changed - Drawing shape changed. Payload: { shape: ShapeType }
- * @emits annotate:mode-toggled - View mode toggled between browse and annotate. Payload: undefined
+ * @emits mark:selection-changed - Selection motivation changed. Payload: { motivation: SelectionMotivation | null }
+ * @emits mark:click-changed - Click action mode changed. Payload: { action: ClickAction }
+ * @emits mark:shape-changed - Drawing shape changed. Payload: { shape: ShapeType }
+ * @emits mark:mode-toggled - View mode toggled between browse and annotate. Payload: undefined
  */
 export function AnnotateToolbar({
   selectedMotivation,
@@ -188,9 +188,9 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      eventBus.get('annotate:selection-changed').next({ motivation: null });
+      eventBus.get('mark:selection-changed').next({ motivation: null });
     } else {
-      eventBus.get('annotate:selection-changed').next({
+      eventBus.get('mark:selection-changed').next({
         motivation: selectedMotivation === motivation ? null : motivation
       });
     }
@@ -200,21 +200,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    eventBus.get('annotate:click-changed').next({ action });
+    eventBus.get('mark:click-changed').next({ action });
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    eventBus.get('annotate:shape-changed').next({ shape });
+    eventBus.get('mark:shape-changed').next({ shape });
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    eventBus.get('annotate:mode-toggled').next(undefined);
+    eventBus.get('mark:mode-toggled').next(undefined);
     setModePinned(false);
     setModeHovered(false);
   };

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',