@semiont/react-ui 0.2.33 → 0.2.34-build.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.2.33",
+  "version": "0.2.34-build.89",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -100,7 +100,6 @@
   },
   "dependencies": {
     "@semiont/api-client": "*",
-    "@semiont/core": "*",
-    "mitt": "^3.0.1"
+    "@semiont/core": "*"
   }
 }

package/src/components/CodeMirrorRenderer.tsx

@@ -7,8 +7,8 @@ import { markdown } from '@codemirror/lang-markdown';
 import { ANNOTATORS } from '../lib/annotation-registry';
 import { ReferenceResolutionWidget } from '../lib/codemirror-widgets';
 import { isHighlight, isReference, isResolvedReference, isComment, isAssessment, isTag, getBodySource } from '@semiont/api-client';
-import type { components } from '@semiont/api-client';
-import type { EventBus } from '../contexts/EventBusContext';
+import type { components } from '@semiont/core';
+import type { EventBus } from "@semiont/core";
 import { createHoverHandlers } from '../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
@@ -343,7 +343,7 @@ export function CodeMirrorRenderer({
               const segment = segmentsRef.current.find(s => s.annotation?.id === annotationId);
               if (segment?.annotation) {
                 event.preventDefault();
-                eventBusRef.current.emit('annotation:click', {
+                eventBusRef.current.get('annotation:click').next({
                   annotationId,
                   motivation: segment.annotation.motivation
                 });
@@ -411,7 +411,7 @@ export function CodeMirrorRenderer({
     const container = view.dom;
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBusRef.current?.emit('annotation:hover', { annotationId })
+      (annotationId) => eventBusRef.current?.get('annotation:hover').next({ annotationId })
     );
 
     const handleMouseOver = (e: MouseEvent) => {

package/src/components/DetectionProgressWidget.tsx

@@ -2,8 +2,8 @@
 
 import { useTranslations } from '../contexts/TranslationContext';
 import { useEventBus } from '../contexts/EventBusContext';
-import type { DetectionProgress } from '../types/progress';
-import type { components } from '@semiont/api-client';
+import type { DetectionProgress } from '@semiont/core';
+import type { components } from '@semiont/core';
 
 type Motivation = components['schemas']['Motivation'];
 
@@ -28,7 +28,7 @@ export function DetectionProgressWidget({ progress, annotationType = 'reference'
 
   const handleCancel = () => {
     // Emit event for job cancellation
-    eventBus.emit('job:cancel-requested', { jobType: 'detection' });
+    eventBus.get('job:cancel-requested').next({ jobType: 'detection' });
   };
 
   if (!progress) return null;

package/src/components/LiveRegion.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, createContext, useContext, useCallback } from 'react';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import type { Annotator } from '../lib/annotation-registry';
 
 type Annotation = components['schemas']['Annotation'];

package/src/components/Toolbar.tsx

@@ -28,7 +28,7 @@ export function Toolbar<T extends string = string>({
   const eventBus = useEventBus();
 
   const handlePanelToggle = (panel: string) => {
-    eventBus.emit('panel:toggle', { panel });
+    eventBus.get('panel:toggle').next({ panel });
   };
 
   return (

package/src/components/annotation/AnnotateToolbar.tsx

@@ -188,9 +188,9 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      eventBus.emit('toolbar:selection-changed', { motivation: null });
+      eventBus.get('toolbar:selection-changed').next({ motivation: null });
     } else {
-      eventBus.emit('toolbar:selection-changed', {
+      eventBus.get('toolbar:selection-changed').next({
         motivation: selectedMotivation === motivation ? null : motivation
       });
     }
@@ -200,21 +200,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    eventBus.emit('toolbar:click-changed', { action });
+    eventBus.get('toolbar:click-changed').next({ action });
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    eventBus.emit('toolbar:shape-changed', { shape });
+    eventBus.get('toolbar:shape-changed').next({ shape });
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    eventBus.emit('view:mode-toggled', undefined);
+    eventBus.get('view:mode-toggled').next(undefined);
     setModePinned(false);
     setModeHovered(false);
   };

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

@@ -55,16 +55,16 @@ function createEventTracker() {
         'toolbar:click-changed',
         'toolbar:selection-changed',
         'toolbar:shape-changed',
-      ];
+      ] as const;
 
       toolbarEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
-        eventBus.on(eventName, handler);
-        handlers.push(() => eventBus.off(eventName, handler));
+        const subscription = eventBus.get(eventName).subscribe(handler);
+        handlers.push(subscription);
       });
 
       return () => {
-        handlers.forEach(cleanup => cleanup());
+        handlers.forEach(sub => sub.unsubscribe());
       };
     }, [eventBus]);
 

package/src/components/annotation-popups/JsonLdView.tsx

@@ -8,7 +8,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { syntaxHighlighting } from '@codemirror/language';
 import { jsonLightTheme, jsonLightHighlightStyle } from '../../lib/codemirror-json-theme';
 import { useLineNumbers } from '../../hooks/useLineNumbers';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
 

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

@@ -1,11 +1,11 @@
 'use client';
 
 import { useMemo } from 'react';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { createHoverHandlers } from '../../hooks/useAttentionFlow';
 import { getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
 import { parseSvgSelector } from '@semiont/api-client';
-import type { EventBus } from '../../contexts/EventBusContext';
+import type { EventBus } from "@semiont/core"
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -79,7 +79,7 @@ export function AnnotationOverlay({
   const scaleY = displayHeight / imageHeight;
 
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.emit('annotation:hover', { annotationId })),
+    () => createHoverHandlers((annotationId) => eventBus?.get('annotation:hover').next({ annotationId })),
     [eventBus]
   );
 
@@ -129,7 +129,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -142,7 +142,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -176,7 +176,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -189,7 +189,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -236,7 +236,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -249,7 +249,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation });
+                      eventBus?.get('annotation:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}

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

@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import type { components, ResourceUri } from '@semiont/api-client';
-import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, type Point } from '@semiont/api-client';
+import type { components, ResourceUri } from '@semiont/core';
+import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point } from '@semiont/api-client';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
-import type { EventBus } from '../../contexts/EventBusContext';
+import type { EventBus } from "@semiont/core"
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -213,7 +213,7 @@ export function SvgDrawingCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.emit('annotation:click', { annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          eventBus?.get('annotation:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -276,7 +276,7 @@ export function SvgDrawingCanvas({
 
     // Emit annotation:requested event with SvgSelector
     if (eventBus && selectedMotivation) {
-      eventBus.emit('annotation:requested', {
+      eventBus.get('annotation:requested').next({
         selector: {
           type: 'SvgSelector',
           value: nativeSvg

package/src/components/navigation/CollapsibleResourceNavigation.tsx

@@ -110,7 +110,7 @@ export function CollapsibleResourceNavigation({
     }
 
     // Emit event
-    eventBus.emit('navigation:resource-reorder', { oldIndex: currentIndex, newIndex });
+    eventBus.get('navigation: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.emit('navigation:resource-close', { resourceId });
+    eventBus.get('navigation: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.emit('navigation:resource-reorder', { oldIndex, newIndex });
+        eventBus.get('navigation: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.emit('navigation:sidebar-toggle', undefined)}
+              onClick={() => eventBus.get('navigation: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

@@ -70,7 +70,7 @@ export function ObservableLink({
 
   const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
     // Emit event for observability
-    eventBus.emit('navigation:link-clicked', {
+    eventBus.get('navigation:link-clicked').next({
       href,
       label
     });

package/src/components/navigation/SimpleNavigation.tsx

@@ -86,7 +86,7 @@ export function SimpleNavigation({
             !isCollapsed && <span className="semiont-nav-section__header-text">{title}</span>
           )}
           <button
-            onClick={() => eventBus.emit('navigation:sidebar-toggle', undefined)}
+            onClick={() => eventBus.get('navigation: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

@@ -2,10 +2,10 @@
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { createHoverHandlers } from '../../hooks/useAttentionFlow';
-import type { components, ResourceUri } from '@semiont/api-client';
+import type { components, ResourceUri } from '@semiont/core';
 import { getTargetSelector } from '@semiont/api-client';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
-import type { EventBus } from '../../contexts/EventBusContext';
+import type { EventBus } from "@semiont/core"
 import {
   canvasToPdfCoordinates,
   pdfToCanvasCoordinates,
@@ -285,7 +285,7 @@ export function PdfAnnotationCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.emit('annotation:click', { annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          eventBus?.get('annotation:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -324,7 +324,7 @@ export function PdfAnnotationCanvas({
 
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
-      eventBus.emit('annotation:requested', {
+      eventBus.get('annotation:requested').next({
         selector: {
           type: 'FragmentSelector',
           conformsTo: 'http://tools.ietf.org/rfc/rfc3778',
@@ -362,7 +362,7 @@ export function PdfAnnotationCanvas({
 
   // Hover handlers with currentHover guard and dwell delay
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.emit('annotation:hover', { annotationId })),
+    () => createHoverHandlers((annotationId) => eventBus?.get('annotation:hover').next({ annotationId })),
     [eventBus]
   );
 
@@ -462,7 +462,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => eventBus?.emit('annotation:click', { annotationId: ann.id, motivation: ann.motivation })}
+                      onClick={() => eventBus?.get('annotation:click').next({ annotationId: ann.id, motivation: ann.motivation })}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

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

@@ -11,8 +11,8 @@ import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PdfAnnotationCanvas } from '../PdfAnnotationCanvas';
-import { resourceUri } from '@semiont/api-client';
-import type { components } from '@semiont/api-client';
+import { resourceUri } from '@semiont/core';
+import type { components } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
 

package/src/components/resource/AnnotateView.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
-import type { components } from '@semiont/api-client';
-import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType, resourceUri as toResourceUri, extractContext, findTextWithContext } from '@semiont/api-client';
+import type { components } from '@semiont/core';
+import { resourceUri as toResourceUri } from '@semiont/core';
+import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType, extractContext, findTextWithContext } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
 import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
@@ -247,7 +248,7 @@ export function AnnotateView({
 
         // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
         if (selectedMotivation) {
-          eventBus.emit('annotation:requested', {
+          eventBus.get('annotation:requested').next({
             selector: [
               {
                 type: 'TextPositionSelector',
@@ -281,7 +282,7 @@ export function AnnotateView({
 
         // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
         if (selectedMotivation) {
-          eventBus.emit('annotation:requested', {
+          eventBus.get('annotation:requested').next({
             selector: [
               {
                 type: 'TextPositionSelector',

package/src/components/resource/AnnotationHistory.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
 import type { RouteBuilder, LinkComponentProps } from '../../contexts/RoutingContext';
 import { useResources } from '../../lib/api-hooks';
-import type { ResourceUri } from '@semiont/api-client';
+import type { ResourceUri } from '@semiont/core';
 import type { StoredEvent } from '@semiont/core';
 import { getAnnotationUriFromEvent } from '@semiont/core';
 import { HistoryEvent } from './HistoryEvent';

package/src/components/resource/BrowseView.tsx

@@ -5,8 +5,9 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { remarkAnnotations, type PreparedAnnotation } from '../../lib/remark-annotations';
 import { rehypeRenderAnnotations } from '../../lib/rehype-render-annotations';
-import type { components } from '@semiont/api-client';
-import { getExactText, getTextPositionSelector, getTargetSelector, getBodySource, getMimeCategory, isPdfMimeType, resourceUri as toResourceUri } from '@semiont/api-client';
+import type { components } from '@semiont/core';
+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 { ImageViewer } from '../viewers';
@@ -111,13 +112,13 @@ export function BrowseView({
       if (annotationId && annotationType === 'reference') {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          eventBus.emit('annotation:click', { annotationId, motivation: annotation.motivation });
+          eventBus.get('annotation:click').next({ annotationId, motivation: annotation.motivation });
         }
       }
     };
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBus.emit('annotation:hover', { annotationId })
+      (annotationId) => eventBus.get('annotation:hover').next({ annotationId })
     );
 
     // Single mouseover handler for the container - fires once on enter

package/src/components/resource/ResourceViewer.tsx

@@ -6,8 +6,9 @@ import { AnnotateView, type SelectionMotivation, type ClickAction, type ShapeTyp
 import { BrowseView } from './BrowseView';
 import { PopupContainer } from '../annotation-popups/SharedPopupElements';
 import { JsonLdView } from '../annotation-popups/JsonLdView';
-import type { components } from '@semiont/api-client';
-import { getExactText, getTargetSelector, resourceUri, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/api-client';
+import type { components } from '@semiont/core';
+import { resourceUri } from '@semiont/core';
+import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/api-client';
 import { useEventBus } from '../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 import { useCacheManager } from '../../contexts/CacheContext';
@@ -249,7 +250,7 @@ export function ResourceViewer({
 
   // Handle deleting annotations - emit event instead of direct call
   const handleDeleteAnnotation = useCallback((id: string) => {
-    eventBus.emit('annotation:delete', { annotationId: id });
+    eventBus.get('annotation:delete').next({ annotationId: id });
   }, []); // eventBus is stable
 
   // Handle annotation clicks - memoized
@@ -338,7 +339,7 @@ export function ResourceViewer({
 
     // All annotations open the unified annotations panel
     // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel
-    eventBus.emit('panel:open', { panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
+    eventBus.get('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

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowseView } from '../BrowseView';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
@@ -101,20 +101,8 @@ function createEventTracker() {
   function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
     const eventBus = useEventBus();
 
-    // Track subscriptions by wrapping the on method synchronously before render
-    const originalOn = React.useRef(eventBus.on.bind(eventBus));
-
-    if (!('__tracked' in eventBus.on)) {
-      const trackedOn = ((eventName: string, handler: Function) => {
-        subscriptions.add(eventName);
-        return originalOn.current(eventName, handler);
-      }) as typeof eventBus.on & { __tracked: true };
-      trackedOn.__tracked = true;
-      eventBus.on = trackedOn;
-    }
-
     React.useEffect(() => {
-      const handlers: Array<() => void> = [];
+      const handlers: Array<{ unsubscribe: () => void }> = [];
 
       // Track all annotation-related events
       const trackEvent = (eventName: string) => (payload: any) => {
@@ -125,16 +113,17 @@ function createEventTracker() {
         'annotation:hover',
         'annotation:click',
         'annotation:focus',
-      ];
+      ] as const;
 
       annotationEvents.forEach(eventName => {
+        subscriptions.add(eventName);
         const handler = trackEvent(eventName);
-        eventBus.on(eventName, handler);
-        handlers.push(() => eventBus.off(eventName, handler));
+        const subscription = eventBus.get(eventName).subscribe(handler);
+        handlers.push(subscription);
       });
 
       return () => {
-        handlers.forEach(cleanup => cleanup());
+        handlers.forEach(sub => sub.unsubscribe());
       };
     }, [eventBus]);
 
@@ -544,12 +533,12 @@ describe('BrowseView Component', () => {
             eventTracker.push({ event: 'annotation:click', annotationId: payload?.annotationId ?? null });
           };
 
-          eventBus.on('annotation:hover', handleHover);
-          eventBus.on('annotation:click', handleClick);
+          const subscription1 = eventBus.get('annotation:hover').subscribe(handleHover);
+          const subscription2 = eventBus.get('annotation:click').subscribe(handleClick);
 
           return () => {
-            eventBus.off('annotation:hover', handleHover);
-            eventBus.off('annotation:click', handleClick);
+            subscription1.unsubscribe();
+            subscription2.unsubscribe();
           };
         }, [eventBus]);
 

package/src/components/resource/__tests__/ResourceViewer.mode-switch.test.tsx

@@ -20,7 +20,7 @@ import { TranslationProvider } from '../../../contexts/TranslationContext';
 import { ResourceAnnotationsProvider } from '../../../contexts/ResourceAnnotationsContext';
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 
 type SemiontResource = components['schemas']['ResourceDescriptor'];
 

package/src/components/resource/event-formatting.ts

@@ -6,7 +6,7 @@
  */
 
 import type { StoredEvent, ResourceEventType } from '@semiont/core';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { getExactText, getTargetSelector } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 

package/src/components/resource/panels/AssessmentEntry.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef } from 'react';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
@@ -89,7 +89,7 @@ export const AssessmentEntry = forwardRef<HTMLDivElement, AssessmentEntryProps>(
       data-type="assessment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.emit('annotation:click', { annotationId: assessment.id, motivation: assessment.motivation });
+        eventBus.get('annotation:click').next({ annotationId: assessment.id, motivation: assessment.motivation });
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/AssessmentPanel.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
-import type { components, Selector } from '@semiont/api-client';
+import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { AssessmentEntry } from './AssessmentEntry';
 import { DetectSection } from './DetectSection';
@@ -141,7 +141,7 @@ export function AssessmentPanel({
         ? [{ type: 'TextualBody' as const, value: newAssessmentText, purpose: 'assessing' as const }]
         : [];
 
-      eventBus.emit('annotation:create', {
+      eventBus.get('annotation:create').next({
         motivation: 'assessing',
         selector: pendingAnnotation.selector,
         body,
@@ -156,7 +156,7 @@ export function AssessmentPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('annotation:cancel-pending', undefined);
+        eventBus.get('annotation:cancel-pending').next(undefined);
         setNewAssessmentText('');
       }
     };
@@ -209,7 +209,7 @@ export function AssessmentPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.emit('annotation:cancel-pending', undefined);
+                  eventBus.get('annotation:cancel-pending').next(undefined);
                   setNewAssessmentText('');
                 }}
                 className="semiont-button semiont-button--secondary"