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

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { getAnnotationExactText, getCommentText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
@@ -88,7 +88,7 @@ export const CommentEntry = forwardRef<HTMLDivElement, CommentEntryProps>(
       data-type="comment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.emit('annotation:click', { annotationId: comment.id, motivation: comment.motivation });
+        eventBus.get('annotation:click').next({ annotationId: comment.id, motivation: comment.motivation });
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/CommentsPanel.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 { CommentEntry } from './CommentEntry';
 import { DetectSection } from './DetectSection';
@@ -167,7 +167,7 @@ export function CommentsPanel({
 
   const handleSaveNewComment = () => {
     if (newCommentText.trim() && pendingAnnotation) {
-      eventBus.emit('annotation:create', {
+      eventBus.get('annotation:create').next({
         motivation: 'commenting',
         selector: pendingAnnotation.selector,
         body: [{ type: 'TextualBody', value: newCommentText, purpose: 'commenting' }],
@@ -182,7 +182,7 @@ export function CommentsPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('annotation:cancel-pending', undefined);
+        eventBus.get('annotation:cancel-pending').next(undefined);
         setNewCommentText('');
       }
     };
@@ -224,7 +224,7 @@ export function CommentsPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.emit('annotation:cancel-pending', undefined);
+                  eventBus.get('annotation:cancel-pending').next(undefined);
                   setNewCommentText('');
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { useEventBus } from '../../../contexts/EventBusContext';
-import type { Motivation } from '@semiont/api-client';
+import type { Motivation } from '@semiont/core';
 import './DetectSection.css';
 
 interface DetectSectionProps {
@@ -71,7 +71,7 @@ export function DetectSection({
       'commenting';
 
     // Emit detection:start event with options
-    eventBus.emit('detection:start', {
+    eventBus.get('detection:start').next({
       motivation,
       options: {
         instructions: instructions.trim() || undefined,
@@ -86,7 +86,7 @@ export function DetectSection({
   }, [annotationType, instructions, tone, useDensity, density]); // eventBus is stable singleton - never in deps
 
   const handleDismissProgress = useCallback(() => {
-    eventBus.emit('detection:dismiss-progress', undefined);
+    eventBus.get('detection:dismiss-progress').next(undefined);
   }, []); // eventBus is stable singleton - never in deps
 
   return (

package/src/components/resource/panels/HighlightEntry.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';
@@ -52,7 +52,7 @@ export const HighlightEntry = forwardRef<HTMLDivElement, HighlightEntryProps>(
       data-type="highlight"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.emit('annotation:click', { annotationId: highlight.id, motivation: highlight.motivation });
+        eventBus.get('annotation:click').next({ annotationId: highlight.id, motivation: highlight.motivation });
       }}
       {...hoverProps}
     >

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

@@ -4,7 +4,7 @@ import { useEffect, useState, 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 { HighlightEntry } from './HighlightEntry';
 import { DetectSection } from './DetectSection';
@@ -132,7 +132,7 @@ export function HighlightPanel({
   // immediately emit annotation:create event
   useEffect(() => {
     if (pendingAnnotation && pendingAnnotation.motivation === 'highlighting') {
-      eventBus.emit('annotation:create', {
+      eventBus.get('annotation:create').next({
         motivation: 'highlighting',
         selector: pendingAnnotation.selector,
         body: [],

package/src/components/resource/panels/JsonLdPanel.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';
 import './JsonLdPanel.css';
 
 type SemiontResource = components['schemas']['ResourceDescriptor'];

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

@@ -3,7 +3,7 @@
 import { forwardRef } from 'react';
 import type { RouteBuilder } from '../../../contexts/RoutingContext';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/api-client';
 import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
@@ -73,7 +73,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
   };
 
   const handleComposeDocument = () => {
-    eventBus.emit('reference:create-manual', {
+    eventBus.get('reference:create-manual').next({
       annotationUri: reference.id,
       title: selectedText,
       entityTypes,
@@ -86,7 +86,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
       ? reference.target.source
       : '';
     if (sourceUri) {
-      eventBus.emit('annotation:update-body', {
+      eventBus.get('annotation:update-body').next({
         annotationUri: reference.id,
         resourceId: sourceUri.split('/resources/')[1] || '',
         operations: [{ op: 'remove' }], // Remove all body items
@@ -100,7 +100,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
       : '';
 
     // Emit request to open generation modal
-    eventBus.emit('generation:modal-open', {
+    eventBus.get('generation:modal-open').next({
       annotationUri: reference.id,
       resourceUri,
       defaultTitle: selectedText,
@@ -108,7 +108,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
   };
 
   const handleSearch = () => {
-    eventBus.emit('reference:link', {
+    eventBus.get('reference:link').next({
       annotationUri: reference.id,
       searchTerm: selectedText,
     });
@@ -121,7 +121,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
       data-type="reference"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        eventBus.emit('annotation:click', { annotationId: reference.id, motivation: reference.motivation });
+        eventBus.get('annotation:click').next({ annotationId: reference.id, motivation: reference.motivation });
       }}
       {...hoverProps}
     >

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

@@ -7,7 +7,7 @@ import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { DetectionProgressWidget } from '../../DetectionProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
-import type { components, paths, Selector } from '@semiont/api-client';
+import type { components, paths, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { PanelHeader } from './PanelHeader';
 import './ReferencesPanel.css';
@@ -207,7 +207,7 @@ export function ReferencesPanel({
   // Clear log when starting new detection
   const handleDetect = () => {
     setLastDetectionLog(null);
-    eventBus.emit('detection:start', {
+    eventBus.get('detection:start').next({
       motivation: 'linking',
       options: {
         entityTypes: selectedEntityTypes,
@@ -250,7 +250,7 @@ export function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType = pendingEntityTypes.join(',') || undefined;
-      eventBus.emit('annotation:create', {
+      eventBus.get('annotation:create').next({
         motivation: 'linking',
         selector: pendingAnnotation.selector,
         body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],
@@ -265,7 +265,7 @@ export function ReferencesPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('annotation:cancel-pending', undefined);
+        eventBus.get('annotation:cancel-pending').next(undefined);
         setPendingEntityTypes([]);
       }
     };
@@ -317,7 +317,7 @@ export function ReferencesPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.emit('annotation:cancel-pending', undefined);
+                  eventBus.get('annotation:cancel-pending').next(undefined);
                   setPendingEntityTypes([]);
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -97,7 +97,7 @@ export function ResourceInfoPanel({
       {/* Clone Action */}
       <div className="semiont-resource-info-panel__action-section">
         <button
-          onClick={() => eventBus.emit('resource:clone', undefined)}
+          onClick={() => eventBus.get('resource:clone').next(undefined)}
           className="semiont-resource-button semiont-resource-button--secondary"
         >
           🔗 {t('clone')}
@@ -112,7 +112,7 @@ export function ResourceInfoPanel({
         {isArchived ? (
           <>
             <button
-              onClick={() => eventBus.emit('resource:unarchive', undefined)}
+              onClick={() => eventBus.get('resource:unarchive').next(undefined)}
               className="semiont-resource-button semiont-resource-button--secondary"
             >
               📤 {t('unarchive')}
@@ -124,7 +124,7 @@ export function ResourceInfoPanel({
         ) : (
           <>
             <button
-              onClick={() => eventBus.emit('resource:archive', undefined)}
+              onClick={() => eventBus.get('resource:archive').next(undefined)}
               className="semiont-resource-button semiont-resource-button--archive"
             >
               📦 {t('archive')}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { isBodyResolved } from '@semiont/api-client';
 import { getEntityTypes } from '@semiont/ontology';
 import './StatisticsPanel.css';

package/src/components/resource/panels/TagEntry.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 { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
@@ -37,7 +37,7 @@ export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
     <div
       ref={ref}
       onClick={() => {
-        eventBus.emit('annotation:click', { annotationId: tag.id, motivation: tag.motivation });
+        eventBus.get('annotation:click').next({ annotationId: tag.id, motivation: tag.motivation });
       }}
       {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}

package/src/components/resource/panels/TaggingPanel.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 { TagEntry } from './TagEntry';
 import { PanelHeader } from './PanelHeader';
@@ -195,7 +195,7 @@ export function TaggingPanel({
 
   const handleDetect = () => {
     if (selectedCategories.size > 0) {
-      eventBus.emit('detection:start', {
+      eventBus.get('detection:start').next({
         motivation: 'tagging',
         options: {
           schemaId: selectedSchemaId,
@@ -212,7 +212,7 @@ export function TaggingPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('annotation:cancel-pending', undefined);
+        eventBus.get('annotation:cancel-pending').next(undefined);
       }
     };
 
@@ -274,7 +274,7 @@ export function TaggingPanel({
                   className="semiont-select"
                   onChange={(e) => {
                     if (e.target.value && pendingAnnotation) {
-                      eventBus.emit('annotation:create', {
+                      eventBus.get('annotation:create').next({
                         motivation: 'tagging',
                         selector: pendingAnnotation.selector,
                         body: [
@@ -305,7 +305,7 @@ export function TaggingPanel({
             {/* Cancel button */}
             <div className="semiont-annotation-prompt__footer">
               <button
-                onClick={() => eventBus.emit('annotation:cancel-pending', undefined)}
+                onClick={() => eventBus.get('annotation:cancel-pending').next(undefined)}
                 className="semiont-button semiont-button--secondary"
                 data-type="tag"
               >

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

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components, Selector } from '@semiont/api-client';
+import type { components, Selector } from '@semiont/core';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { Annotator } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';

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

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { AssessmentPanel } from '../AssessmentPanel';
 import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../../contexts/EventBusContext';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -29,16 +29,16 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotation:create'];
+      const panelEvents = ['annotation:create'] as const;
 
       panelEvents.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/resource/panels/__tests__/CommentEntry.test.tsx

@@ -5,8 +5,8 @@ import { renderWithProviders, resetEventBusForTesting } from '../../../../test-u
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentEntry } from '../CommentEntry';
-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"
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -250,7 +250,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event on real event bus
-      eventBus!.on('annotation:click', clickHandler);
+      const subscription = eventBus!.get('annotation:click').subscribe(clickHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       await userEvent.click(commentDiv);
@@ -261,7 +261,7 @@ describe('CommentEntry Component', () => {
       });
 
       // Clean up
-      eventBus!.off('annotation:click', clickHandler);
+      subscription.unsubscribe();
     });
 
     it('should be clickable with cursor-pointer class', () => {
@@ -283,7 +283,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event
-      eventBus!.on('annotation:hover', hoverHandler);
+      const subscription = eventBus!.get('annotation:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -297,7 +297,7 @@ describe('CommentEntry Component', () => {
       expect(hoverHandler).toHaveBeenCalledWith({ annotationId: 'comment-1' });
 
       // Clean up
-      eventBus!.off('annotation:hover', hoverHandler);
+      subscription.unsubscribe();
       vi.useRealTimers();
     });
 
@@ -311,7 +311,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event
-      eventBus!.on('annotation:hover', hoverHandler);
+      const subscription = eventBus!.get('annotation:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -323,7 +323,7 @@ describe('CommentEntry Component', () => {
       expect(hoverHandler).not.toHaveBeenCalled();
 
       // Clean up
-      eventBus!.off('annotation:hover', hoverHandler);
+      subscription.unsubscribe();
       vi.useRealTimers();
     });
 
@@ -336,7 +336,7 @@ describe('CommentEntry Component', () => {
         { returnEventBus: true }
       );
 
-      eventBus!.on('annotation:hover', hoverHandler);
+      const subscription = eventBus!.get('annotation:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -347,7 +347,7 @@ describe('CommentEntry Component', () => {
       expect(hoverHandler).toHaveBeenNthCalledWith(1, { annotationId: 'comment-1' });
       expect(hoverHandler).toHaveBeenNthCalledWith(2, { annotationId: null });
 
-      eventBus!.off('annotation:hover', hoverHandler);
+      subscription.unsubscribe();
       vi.useRealTimers();
     });
 

package/src/components/resource/panels/__tests__/CommentsPanel.test.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentsPanel } from '../CommentsPanel';
 import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../../contexts/EventBusContext';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -29,16 +29,16 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotation:create'];
+      const panelEvents = ['annotation:create'] as const;
 
       panelEvents.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/resource/panels/__tests__/DetectSection.test.tsx

@@ -18,7 +18,7 @@ import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import { DetectSection } from '../DetectSection';
 import { resetEventBusForTesting } from '../../../../contexts/EventBusContext';
-import type { EventBus } from '../../../../contexts/EventBusContext';
+import type { EventBus } from "@semiont/core"
 
 // Mock translations
 const mockT = vi.fn((key: string) => {
@@ -276,7 +276,7 @@ describe('DetectSection', () => {
         { returnEventBus: true }
       );
 
-      eventBus!.on('detection:start', detectionHandler);
+      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
 
       const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
       await user.click(detectButton);
@@ -286,7 +286,7 @@ describe('DetectSection', () => {
         options: expect.any(Object),
       });
 
-      eventBus!.off('detection:start', detectionHandler);
+      subscription.unsubscribe();
     });
 
     it('should emit correct motivation for assessment type', async () => {
@@ -302,7 +302,7 @@ describe('DetectSection', () => {
         { returnEventBus: true }
       );
 
-      eventBus!.on('detection:start', detectionHandler);
+      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
 
       const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
       await user.click(detectButton);
@@ -312,7 +312,7 @@ describe('DetectSection', () => {
         options: expect.any(Object),
       });
 
-      eventBus!.off('detection:start', detectionHandler);
+      subscription.unsubscribe();
     });
 
     it('should emit correct motivation for comment type', async () => {
@@ -328,7 +328,7 @@ describe('DetectSection', () => {
         { returnEventBus: true }
       );
 
-      eventBus!.on('detection:start', detectionHandler);
+      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
 
       const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
       await user.click(detectButton);
@@ -338,7 +338,7 @@ describe('DetectSection', () => {
         options: expect.any(Object),
       });
 
-      eventBus!.off('detection:start', detectionHandler);
+      subscription.unsubscribe();
     });
 
     it('should include instructions in event when provided', async () => {
@@ -354,7 +354,7 @@ describe('DetectSection', () => {
         { returnEventBus: true }
       );
 
-      eventBus!.on('detection:start', detectionHandler);
+      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
 
       const textarea = screen.getByPlaceholderText('Enter custom instructions...');
       await user.type(textarea, 'Find key concepts');
@@ -370,7 +370,7 @@ describe('DetectSection', () => {
         },
       });
 
-      eventBus!.off('detection:start', detectionHandler);
+      subscription.unsubscribe();
     });
   });
 

package/src/components/resource/panels/__tests__/HighlightPanel.detectionProgress.test.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../../../test-utils';
 import { HighlightPanel } from '../HighlightPanel';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import { resetEventBusForTesting } from '../../../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];

package/src/components/resource/panels/__tests__/JsonLdPanel.test.tsx

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { JsonLdPanel } from '../JsonLdPanel';
-import type { components } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 
 type SemiontResource = components['schemas']['ResourceDescriptor'];
 

package/src/components/resource/panels/__tests__/ReferencesPanel.test.tsx

@@ -25,16 +25,16 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['detection:start'];
+      const panelEvents = ['detection:start'] as const;
 
       panelEvents.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/resource/panels/__tests__/ResourceInfoPanel.test.tsx

@@ -69,16 +69,16 @@ function createEventTracker() {
         'resource:clone',
         'resource:archive',
         'resource:unarchive',
-      ];
+      ] as const;
 
       resourceEvents.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]);