@semiont/react-ui 0.4.20 → 0.4.22

package/src/components/__tests__/StatusDisplay.test.tsx

@@ -1,42 +1,37 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { BehaviorSubject } from 'rxjs';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';
-
-// Mock api-hooks
-vi.mock('../../lib/api-hooks', () => ({
-  useHealth: vi.fn(),
-}));
-
-import { useHealth } from '../../lib/api-hooks';
-import type { MockedFunction } from 'vitest';
 import { StatusDisplay } from '../StatusDisplay';
 
-const mockUseHealth = useHealth as MockedFunction<typeof useHealth>;
-
-function createMockHealth(queryResult: { data?: unknown; isLoading?: boolean; error?: unknown }) {
+let mockGetStatus: ReturnType<typeof vi.fn>;
+const stableMockClient = {
+  admin: {
+    get status() { return mockGetStatus; },
+  },
+};
+const stableMockSession = { client: stableMockClient };
+const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
+const stableMockBrowser = { activeSession$: stableActiveSession$ };
+
+vi.mock('../../session/SemiontProvider', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../session/SemiontProvider')>();
   return {
-    check: {
-      useQuery: vi.fn(),
-    },
-    status: {
-      useQuery: vi.fn().mockReturnValue({
-        data: queryResult.data ?? undefined,
-        isLoading: queryResult.isLoading ?? false,
-        error: queryResult.error ?? undefined,
-      }),
-    },
+    ...actual,
+    useSemiont: () => stableMockBrowser,
   };
-}
+});
 
 describe('StatusDisplay', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockGetStatus = vi.fn();
   });
 
   it('should show "Authentication required" when not fully authenticated', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined, isLoading: false }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.0.0' });
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -45,55 +40,45 @@ describe('StatusDisplay', () => {
     expect(screen.getByText(/Authentication required/)).toBeInTheDocument();
   });
 
-  it('should show "Connecting..." when loading', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ isLoading: true }) as ReturnType<typeof useHealth>);
-
-    renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
-    );
-
-    expect(screen.getByText(/Connecting\.\.\./)).toBeInTheDocument();
-  });
-
-  it('should show status when data is available', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      data: { status: 'healthy', version: '1.2.3' },
-    }) as ReturnType<typeof useHealth>);
+  it('should show status when data is available', async () => {
+    mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.2.3' });
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/healthy/)).toBeInTheDocument();
-    expect(screen.getByText(/v1\.2\.3/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/healthy/)).toBeInTheDocument();
+      expect(screen.getByText(/v1\.2\.3/)).toBeInTheDocument();
+    });
   });
 
-  it('should show "Connection failed" on error', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      error: new Error('Network error'),
-    }) as ReturnType<typeof useHealth>);
+  it('should show "Connection failed" on error', async () => {
+    mockGetStatus.mockRejectedValue(new Error('Network error'));
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/Connection failed/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Connection failed/)).toBeInTheDocument();
+    });
   });
 
-  it('should show re-login message for 401 errors', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      error: new Error('401 Unauthorized'),
-    }) as ReturnType<typeof useHealth>);
+  it('should show re-login message for 401 errors', async () => {
+    mockGetStatus.mockRejectedValue(new Error('401 Unauthorized'));
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/sign out and sign in again/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/sign out and sign in again/i)).toBeInTheDocument();
+    });
   });
 
   it('should show warning for authenticated users missing backend token', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={true} hasValidBackendToken={false} />
@@ -103,7 +88,7 @@ describe('StatusDisplay', () => {
   });
 
   it('should have role="status"', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -113,7 +98,7 @@ describe('StatusDisplay', () => {
   });
 
   it('should have aria-live="polite"', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -124,7 +109,7 @@ describe('StatusDisplay', () => {
   });
 
   it('should show sign-in hint when not authenticated', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+    mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
@@ -133,28 +118,28 @@ describe('StatusDisplay', () => {
     expect(screen.getByText('Sign in to view backend status')).toBeInTheDocument();
   });
 
-  it('should show error hint when there is an error', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      error: new Error('Connection refused'),
-    }) as ReturnType<typeof useHealth>);
+  it('should show error hint when there is an error', async () => {
+    mockGetStatus.mockRejectedValue(new Error('Connection refused'));
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    expect(screen.getByText(/Check that the backend server is running/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/Check that the backend server is running/)).toBeInTheDocument();
+    });
   });
 
-  it('should set data-status attribute based on state', () => {
-    mockUseHealth.mockReturnValue(createMockHealth({
-      data: { status: 'healthy', version: '1.0.0' },
-    }) as ReturnType<typeof useHealth>);
+  it('should set data-status attribute based on state', async () => {
+    mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.0.0' });
 
     renderWithProviders(
       <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
     );
 
-    const status = screen.getByRole('status');
-    expect(status).toHaveAttribute('data-status', 'success');
+    await waitFor(() => {
+      const status = screen.getByRole('status');
+      expect(status).toHaveAttribute('data-status', 'success');
+    });
   });
 });

package/src/components/__tests__/Toolbar.test.tsx

@@ -66,15 +66,15 @@ describe('Toolbar', () => {
   });
 
   describe('event emission', () => {
-    it('emits browse:panel-toggle with panel name on click', () => {
+    it('emits panel:toggle with panel name on click', () => {
       const handler = vi.fn();
 
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <Toolbar context="document" activePanel={null} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const subscription = eventBus!.get('browse:panel-toggle').subscribe(handler);
+      const subscription = shellBus!.get('panel:toggle').subscribe(handler);
 
       fireEvent.click(screen.getByLabelText('Toolbar.resourceInfo'));
       expect(handler).toHaveBeenCalledWith({ panel: 'info' });

package/src/components/annotation/AnnotateToolbar.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { getSupportedShapes } from '../../lib/media-shapes';
 import type { Annotator } from '../../lib/annotation-registry';
 import './annotations.css';
@@ -119,7 +120,7 @@ export function AnnotateToolbar({
   annotators
 }: AnnotateToolbarProps) {
   const t = useTranslations('AnnotateToolbar');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   // Helper to get emoji from annotators by motivation (with fallback for safety)
   const getMotivationEmoji = (motivation: SelectionMotivation): string => {
@@ -188,11 +189,9 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      eventBus.get('mark:selection-changed').next({ motivation: null });
+      session?.client.mark.changeSelection(null);
     } else {
-      eventBus.get('mark:selection-changed').next({
-        motivation: selectedMotivation === motivation ? null : motivation
-      });
+      session?.client.mark.changeSelection(selectedMotivation === motivation ? null : motivation);
     }
     // Close dropdown after selection
     setSelectionPinned(false);
@@ -200,21 +199,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    eventBus.get('mark:click-changed').next({ action });
+    session?.client.mark.changeClick(action);
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    eventBus.get('mark:shape-changed').next({ shape });
+    session?.client.mark.changeShape(shape);
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    eventBus.get('mark:mode-toggled').next(undefined);
+    session?.client.mark.toggleMode();
     setModePinned(false);
     setModeHovered(false);
   };

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

@@ -3,9 +3,10 @@ import { render, screen, fireEvent, waitFor, within } from '@testing-library/rea
 import { vi, beforeEach, describe, it, expect } from 'vitest';
 import { AnnotateToolbar, type SelectionMotivation, type ClickAction } from '../AnnotateToolbar';
 import { ANNOTATORS } from '../../../lib/annotation-registry';
-import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
 import { TranslationProvider } from '../../../contexts/TranslationContext';
+import { createTestSemiontWrapper } from '../../../test-utils';
 import type { TranslationManager } from '../../../types/TranslationManager';
+import type { EventBus } from '@semiont/core';
 
 // Mock translations
 const messages: Record<string, Record<string, string>> = {
@@ -43,68 +44,37 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      // Track toolbar-related events
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const toolbarEvents = [
+  return {
+    events,
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
+      const trackedEvents = [
         'mark:mode-toggled',
         'mark:click-changed',
         'mark:selection-changed',
         'mark:shape-changed',
       ] as const;
-
-      toolbarEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
+      trackedEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
       });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
-  return {
-    EventTrackingWrapper,
-    events,
-    clear: () => {
-      events.length = 0;
     },
   };
 }
 
 const renderWithIntl = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <TranslationProvider translationManager={translationManager}>
-          <tracker.EventTrackingWrapper>
-            {component}
-          </tracker.EventTrackingWrapper>
-        </TranslationProvider>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>
       <TranslationProvider translationManager={translationManager}>
-        {component}
+        {children}
       </TranslationProvider>
-    </EventBusProvider>
+    </SemiontWrapper>
   );
+  const result = render(component, { wrapper: Wrapper });
+  return { ...result, eventBus };
 };
 
 describe('AnnotateToolbar', () => {
@@ -187,14 +157,10 @@ describe('AnnotateToolbar', () => {
       expect(screen.getByText('Browse')).toBeInTheDocument();
 
       rerender(
-        <EventBusProvider>
-          <TranslationProvider translationManager={translationManager}>
-            <AnnotateToolbar
-              {...defaultProps}
-              annotateMode={true}
-            />
-          </TranslationProvider>
-        </EventBusProvider>
+        <AnnotateToolbar
+          {...defaultProps}
+          annotateMode={true}
+        />
       );
       expect(screen.getByText('Annotate')).toBeInTheDocument();
     });
@@ -292,16 +258,10 @@ describe('AnnotateToolbar', () => {
 
       // Simulate mode change by rerendering with new mode
       rerender(
-        <EventBusProvider>
-          <TranslationProvider translationManager={translationManager}>
-            <tracker.EventTrackingWrapper>
-              <AnnotateToolbar
-                {...defaultProps}
-                annotateMode={true}
-              />
-            </tracker.EventTrackingWrapper>
-          </TranslationProvider>
-        </EventBusProvider>
+        <AnnotateToolbar
+          {...defaultProps}
+          annotateMode={true}
+        />
       );
 
       // After mode change, the collapsed content should show "Annotate"
@@ -399,16 +359,10 @@ describe('AnnotateToolbar', () => {
 
       // Simulate selection
       rerender(
-        <EventBusProvider>
-          <TranslationProvider translationManager={translationManager}>
-            <tracker.EventTrackingWrapper>
-              <AnnotateToolbar
-                {...defaultProps}
-                selectedMotivation="highlighting"
-              />
-            </tracker.EventTrackingWrapper>
-          </TranslationProvider>
-        </EventBusProvider>
+        <AnnotateToolbar
+          {...defaultProps}
+          selectedMotivation="highlighting"
+        />
       );
 
       // Click again to deselect

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

@@ -8,9 +8,8 @@ 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/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 interface JsonLdViewProps {
   annotation: Annotation;

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import type { components } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock CodeMirror modules
 vi.mock('@codemirror/view', () => {
@@ -70,7 +70,6 @@ const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
       end: 10,
     },
   },
-  body: [],
   ...overrides,
 });
 

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

@@ -1,21 +1,18 @@
 'use client';
 
 import { useMemo } from 'react';
-import type { components } from '@semiont/core';
-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"
-
-type Annotation = components['schemas']['Annotation'];
-
+import type { Annotation } from '@semiont/core';
+import { getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/core';
+import { createHoverHandlers } from '@semiont/sdk';
+import { parseSvgSelector } from '@semiont/core';
+import type { SemiontSession } from '@semiont/sdk';
 interface AnnotationOverlayProps {
   annotations: Annotation[];
   imageWidth: number;
   imageHeight: number;
   displayWidth: number;
   displayHeight: number;
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
   hoverDelayMs: number;
@@ -72,7 +69,7 @@ export function AnnotationOverlay({
   imageHeight,
   displayWidth,
   displayHeight,
-  eventBus,
+  session,
   hoveredAnnotationId,
   selectedAnnotationId,
   hoverDelayMs
@@ -81,8 +78,8 @@ export function AnnotationOverlay({
   const scaleY = displayHeight / imageHeight;
 
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => eventBus?.get('beckon:hover').next({ annotationId }), hoverDelayMs),
-    [eventBus, hoverDelayMs]
+    () => createHoverHandlers((id) => session?.client.beckon.hover(id), hoverDelayMs),
+    [session, hoverDelayMs]
   );
 
   return (
@@ -131,7 +128,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -144,7 +141,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.browse.click(annotation.id, annotation.motivation);
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -178,7 +175,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -191,7 +188,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.browse.click(annotation.id, annotation.motivation);
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -238,7 +235,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -251,7 +248,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      eventBus?.get('browse:click').next({ annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.browse.click(annotation.id, annotation.motivation);
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}

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

@@ -1,15 +1,13 @@
 'use client';
 
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import type { components } from '@semiont/core';
-import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point } from '@semiont/api-client';
+import type { Annotation } from '@semiont/core';
+import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point } from '@semiont/core';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
-import type { EventBus } from "@semiont/core"
+import type { SemiontSession } from '@semiont/sdk';
 import { useHoverDelay } from '../../hooks/useHoverDelay';
 
-type Annotation = components['schemas']['Annotation'];
-
 export type DrawingMode = 'rectangle' | 'polygon' | 'circle' | 'freeform' | null;
 
 /**
@@ -40,7 +38,7 @@ interface SvgDrawingCanvasProps {
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
   hoverDelayMs?: number;
@@ -57,7 +55,7 @@ export function SvgDrawingCanvas({
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
-  eventBus,
+  session,
   hoveredAnnotationId,
   selectedAnnotationId
 }: SvgDrawingCanvasProps) {
@@ -212,7 +210,7 @@ export function SvgDrawingCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('browse:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -274,14 +272,11 @@ export function SvgDrawingCanvas({
     );
 
     // Emit annotation:requested event with SvgSelector
-    if (eventBus && selectedMotivation) {
-      eventBus.get('mark:requested').next({
-        selector: {
-          type: 'SvgSelector',
-          value: nativeSvg
-        },
-        motivation: selectedMotivation
-      });
+    if (session && selectedMotivation) {
+      session.client.mark.request(
+        { type: 'SvgSelector', value: nativeSvg },
+        selectedMotivation,
+      );
     }
 
     // Reset drawing state
@@ -338,7 +333,7 @@ export function SvgDrawingCanvas({
               displayWidth={displayDimensions.width}
               displayHeight={displayDimensions.height}
               hoverDelayMs={hoverDelayMs}
-              {...(eventBus && { eventBus })}
+              {...(session && { session })}
               {...(hoveredAnnotationId !== undefined && { hoveredAnnotationId })}
               {...(selectedAnnotationId !== undefined && { selectedAnnotationId })}
             />

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -2,8 +2,7 @@
 
 import React, { useState } from 'react';
 import type { GatheredContext } from '@semiont/core';
-import { LOCALES } from '@semiont/api-client';
-
+import { LOCALES } from '@semiont/core';
 export interface GenerationConfig {
   title: string;
   storagePath: string;