@semiont/react-ui 0.4.21 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.4.21",
+  "version": "0.5.0",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -104,6 +104,7 @@
   "dependencies": {
     "@semiont/api-client": "*",
     "@semiont/core": "*",
+    "@semiont/sdk": "*",
     "react-error-boundary": "^4.1.2"
   }
 }

package/src/components/AnnotateReferencesProgressWidget.tsx

@@ -24,7 +24,7 @@ export function AnnotateReferencesProgressWidget({ progress, annotationType = 'r
 
   const handleCancel = () => {
     // Emit event for job cancellation
-    session?.client.emit('job:cancel-requested', { jobType: 'annotation' });
+    session?.client.job.cancelRequest('annotation');
   };
 
   if (!progress) return null;

package/src/components/CodeMirrorRenderer.tsx

@@ -6,7 +6,9 @@ import { EditorState, RangeSetBuilder, StateField, StateEffect, Compartment } fr
 import { markdown } from '@codemirror/lang-markdown';
 import { ReferenceResolutionWidget, showWidgetPreview, hideWidgetPreview } from '../lib/codemirror-widgets';
 import { scrollAnnotationIntoView } from '../lib/scroll-utils';
-import { isReference, createHoverHandlers, type SemiontSession } from '@semiont/api-client';
+import { annotationId as toAnnotationId } from '@semiont/core';
+import { isReference } from '@semiont/core';
+import { createHoverHandlers, type SemiontSession } from '@semiont/sdk';
 import {
   convertSegmentPositions,
   computeAnnotationDecorations,
@@ -301,7 +303,7 @@ export function CodeMirrorRenderer({
     const container = view.dom;
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => sessionRef.current?.client.emit('beckon:hover', { annotationId }),
+      (id) => sessionRef.current?.client.beckon.hover(id),
       hoverDelayMs
     );
 
@@ -309,7 +311,7 @@ export function CodeMirrorRenderer({
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
       const annotationId = annotationElement?.getAttribute('data-annotation-id');
-      if (annotationId) handleMouseEnter(annotationId);
+      if (annotationId) handleMouseEnter(toAnnotationId(annotationId));
     };
 
     const handleMouseOut = (e: MouseEvent) => {

package/src/components/LiveRegion.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import React, { useState, createContext, useContext, useCallback } from 'react';
-import type { components } from '@semiont/core';
 import type { Annotator } from '../lib/annotation-registry';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 interface LiveRegionContextType {
   announce: (message: string, priority?: 'polite' | 'assertive') => void;

package/src/components/StatusDisplay.tsx

@@ -30,7 +30,7 @@ export function StatusDisplay({
     if (!semiont) { setLoading(false); return; }
 
     const fetchStatus = () => {
-      semiont.getStatus()
+      semiont.admin.status()
         .then((result) => {
           setData(result as StatusData);
           setError(null);

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

@@ -8,7 +8,9 @@ import { StatusDisplay } from '../StatusDisplay';
 
 let mockGetStatus: ReturnType<typeof vi.fn>;
 const stableMockClient = {
-  get getStatus() { return mockGetStatus; },
+  admin: {
+    get status() { return mockGetStatus; },
+  },
 };
 const stableMockSession = { client: stableMockClient };
 const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);

package/src/components/annotation/AnnotateToolbar.tsx

@@ -189,11 +189,9 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      session?.client.emit('mark:selection-changed', { motivation: null });
+      session?.client.mark.changeSelection(null);
     } else {
-      session?.client.emit('mark:selection-changed', {
-        motivation: selectedMotivation === motivation ? null : motivation
-      });
+      session?.client.mark.changeSelection(selectedMotivation === motivation ? null : motivation);
     }
     // Close dropdown after selection
     setSelectionPinned(false);
@@ -201,21 +199,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    session?.client.emit('mark:click-changed', { action });
+    session?.client.mark.changeClick(action);
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    session?.client.emit('mark:shape-changed', { shape });
+    session?.client.mark.changeShape(shape);
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    session?.client.emit('mark:mode-toggled', undefined);
+    session?.client.mark.toggleMode();
     setModePinned(false);
     setModeHovered(false);
   };

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', () => {

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

@@ -1,13 +1,11 @@
 'use client';
 
 import { useMemo } from 'react';
-import type { components } from '@semiont/core';
-import { createHoverHandlers, getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
-import { parseSvgSelector } from '@semiont/api-client';
-import type { SemiontSession } from '@semiont/api-client';
-
-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;
@@ -80,7 +78,7 @@ export function AnnotationOverlay({
   const scaleY = displayHeight / imageHeight;
 
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => session?.client.emit('beckon:hover', { annotationId }), hoverDelayMs),
+    () => createHoverHandlers((id) => session?.client.beckon.hover(id), hoverDelayMs),
     [session, hoverDelayMs]
   );
 
@@ -130,7 +128,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -143,7 +141,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.browse.click(annotation.id, annotation.motivation);
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -177,7 +175,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -190,7 +188,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation });
+                      session?.client.browse.click(annotation.id, annotation.motivation);
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -237,7 +235,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => session?.client.emit('browse:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -250,7 +248,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      session?.client.emit('browse:click', { 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 { SemiontSession } from '@semiont/api-client';
+import type { SemiontSession } from '@semiont/sdk';
 import { useHoverDelay } from '../../hooks/useHoverDelay';
 
-type Annotation = components['schemas']['Annotation'];
-
 export type DrawingMode = 'rectangle' | 'polygon' | 'circle' | 'freeform' | null;
 
 /**
@@ -212,7 +210,7 @@ export function SvgDrawingCanvas({
         });
 
         if (clickedAnnotation) {
-          session?.client.emit('browse:click', { annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -275,13 +273,10 @@ export function SvgDrawingCanvas({
 
     // Emit annotation:requested event with SvgSelector
     if (session && selectedMotivation) {
-      session.client.emit('mark:requested', {
-        selector: {
-          type: 'SvgSelector',
-          value: nativeSvg
-        },
-        motivation: selectedMotivation
-      });
+      session.client.mark.request(
+        { type: 'SvgSelector', value: nativeSvg },
+        selectedMotivation,
+      );
     }
 
     // Reset drawing state

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;

package/src/components/modals/ReferenceWizardModal.tsx

@@ -143,7 +143,7 @@ export function ReferenceWizardModal({
     if (!annotationId || !context || !resourceId) return;
     setIsSearching(true);
     const contextWithHint = userHint ? { ...context, userHint } : context;
-    session?.client.emit('match:search-requested', {
+    session?.client.match.requestSearch({
       correlationId: crypto.randomUUID(),
       resourceId,
       referenceId: annotationId,

package/src/components/modals/ResourceSearchModal.tsx

@@ -3,13 +3,13 @@
 import { useState, useEffect, useRef } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import { map } from 'rxjs/operators';
-import type { components } from '@semiont/core';
-import { getResourceId, getPrimaryRepresentation, createSearchPipeline } from '@semiont/api-client';
+import { getResourceId, getPrimaryRepresentation } from '@semiont/core';
+import { createSearchPipeline } from '@semiont/sdk';
 import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
 
-type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
+import type { ResourceDescriptor } from '@semiont/core';
 
 type SearchResult = {
   id: string;

package/src/components/modals/SearchModal.tsx

@@ -3,7 +3,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 import { map } from 'rxjs/operators';
-import { getResourceId, createSearchPipeline } from '@semiont/api-client';
+import { getResourceId } from '@semiont/core';
+import { createSearchPipeline } from '@semiont/sdk';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
 import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';

package/src/components/modals/SearchResultsStep.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-import type { components, GatheredContext } from '@semiont/core';
+import type { GatheredContext, ResourceDescriptor } from '@semiont/core';
 import { ContextSummary } from './ContextSummary';
 import type { ContextSummaryTranslations } from './ContextSummary';
 
-type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
-
 export type ScoredResult = ResourceDescriptor & {
   score?: number;
   matchReason?: string;

package/src/components/modals/__tests__/SearchModal.accessibility.test.tsx

@@ -15,9 +15,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe.skip('SearchModal Component - Accessibility', () => {
   // TODO: All SearchModal tests skipped due to HeadlessUI Dialog + jsdom memory issues

package/src/components/modals/__tests__/SearchModal.basic.test.tsx

@@ -16,9 +16,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe('SearchModal Component - Basic Rendering', () => {
   const defaultProps = {

package/src/components/modals/__tests__/SearchModal.keyboard.test.tsx

@@ -15,9 +15,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe.skip('SearchModal Component - Keyboard Navigation', () => {
   // TODO: All SearchModal tests skipped due to HeadlessUI Dialog + jsdom memory issues

package/src/components/modals/__tests__/SearchModal.visual.test.tsx

@@ -15,9 +15,13 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
 }));
 
 // Mock getResourceId
-vi.mock('@semiont/api-client', () => ({
+vi.mock('@semiont/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@semiont/core')>();
+  return {
+    ...actual,
   getResourceId: vi.fn((resource: any) => resource?.id)
-}));
+  };
+});
 
 describe.skip('SearchModal Component - Visual States', () => {
   // TODO: All SearchModal tests skipped due to HeadlessUI Dialog + jsdom memory issues

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

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import type { components } from '@semiont/core';
-import { createHoverHandlers, getTargetSelector, type SemiontSession } from '@semiont/api-client';
+import type { Annotation } from '@semiont/core';
+import { getTargetSelector } from '@semiont/core';
+import { createHoverHandlers, type SemiontSession } from '@semiont/sdk';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import {
   canvasToPdfCoordinates,
@@ -19,8 +20,6 @@ import {
 } from '../../lib/browser-pdfjs';
 import './PdfAnnotationCanvas.css';
 
-type Annotation = components['schemas']['Annotation'];
-
 export type DrawingMode = 'rectangle' | 'circle' | 'polygon' | null;
 
 /**
@@ -278,7 +277,7 @@ export function PdfAnnotationCanvas({
         });
 
         if (clickedAnnotation) {
-          session?.client.emit('browse:click', { annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -317,14 +316,14 @@ export function PdfAnnotationCanvas({
 
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
-      session.client.emit('mark:requested', {
-        selector: {
+      session.client.mark.request(
+        {
           type: 'FragmentSelector',
           conformsTo: 'http://tools.ietf.org/rfc/rfc3778',
-          value: fragmentSelector
+          value: fragmentSelector,
         },
-        motivation: selectedMotivation
-      });
+        selectedMotivation,
+      );
     }
 
     // Keep drawing state active to show preview until annotation is persisted
@@ -355,7 +354,7 @@ export function PdfAnnotationCanvas({
 
   // Hover handlers with currentHover guard and dwell delay
   const { handleMouseEnter, handleMouseLeave } = useMemo(
-    () => createHoverHandlers((annotationId) => session?.client.emit('beckon:hover', { annotationId }), hoverDelayMs),
+    () => createHoverHandlers((id) => session?.client.beckon.hover(id), hoverDelayMs),
     [session, hoverDelayMs]
   );
 
@@ -455,7 +454,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => session?.client.emit('browse:click', { annotationId: ann.id, motivation: ann.motivation })}
+                      onClick={() => session?.client.browse.click(ann.id, ann.motivation)}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

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

@@ -14,7 +14,7 @@ import { PdfAnnotationCanvas } from '../PdfAnnotationCanvas';
 import { resourceId } from '@semiont/core';
 import type { components } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock browser-pdfjs module
 vi.mock('../../../lib/browser-pdfjs', () => ({

package/src/components/resource/AnnotateView.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
-import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
+import { getMimeCategory, isPdfMimeType } from '@semiont/core';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
 import { buildTextSelectors, fallbackTextPosition } from '../../lib/text-selection-handler';
@@ -176,10 +176,7 @@ export function AnnotateView({
         const selectors = buildTextSelectors(content, text, start, end);
         if (!selectors) return;
 
-        session?.client.emit('mark:requested', {
-          selector: selectors,
-          motivation: selectedMotivation
-        });
+        session?.client.mark.request(selectors, selectedMotivation);
 
         // Clear selection after creating annotation
         selection.removeAllRanges();

package/src/components/resource/BrowseView.tsx

@@ -3,7 +3,9 @@
 import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { getMimeCategory, isPdfMimeType, createHoverHandlers } from '@semiont/api-client';
+import { annotationId as toAnnotationId } from '@semiont/core';
+import { getMimeCategory, isPdfMimeType } from '@semiont/core';
+import { createHoverHandlers } from '@semiont/sdk';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
 import { ImageViewer } from '../viewers';
@@ -135,13 +137,13 @@ export const BrowseView = memo(function BrowseView({
       if (annotationId && annotationType === 'reference') {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          session.client.emit('browse:click', { annotationId, motivation: annotation.motivation });
+          session.client.browse.click(annotation.id, annotation.motivation);
         }
       }
     };
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => session.client.emit('beckon:hover', { annotationId }),
+      (id) => session.client.beckon.hover(id),
       hoverDelayMs
     );
 
@@ -150,7 +152,7 @@ export const BrowseView = memo(function BrowseView({
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
       const annotationId = annotationElement?.getAttribute('data-annotation-id');
-      if (annotationId) handleMouseEnter(annotationId);
+      if (annotationId) handleMouseEnter(toAnnotationId(annotationId));
     };
 
     // Single mouseout handler for the container - fires once on exit

package/src/components/resource/ResourceViewer.tsx

@@ -6,9 +6,8 @@ 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/core';
-import { resourceId as toResourceId, annotationId as toAnnotationId } from '@semiont/core';
-import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/api-client';
+import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, components } from '@semiont/core';
+import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/core';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
@@ -17,9 +16,6 @@ import { ANNOTATORS } from '../../lib/annotation-registry';
 import type { AnnotationsCollection } from '../../types/annotation-props';
 import { getSelectorType, getSelectedShapeForSelectorType, saveSelectedShapeForSelectorType } from '../../lib/media-shapes';
 
-type Annotation = components['schemas']['Annotation'];
-type SemiontResource = components['schemas']['ResourceDescriptor'];
-
 /**
  * ResourceViewer - Display and interact with resource content and annotations
  *
@@ -84,7 +80,7 @@ export function ResourceViewer({
   if (!resource['@id']) {
     throw new Error('Resource has no @id');
   }
-  const rUri = toResourceId(resource['@id']);
+  const rUri = resource['@id'];
 
   // Helper to get MIME type from resource
   const getMimeType = (): string => {
@@ -241,10 +237,10 @@ export function ResourceViewer({
     };
   };
 
-  // Handle deleting annotations - emit event instead of direct call
-  const handleDeleteAnnotation = useCallback((id: string) => {
-    session?.client.emit('mark:delete', { annotationId: toAnnotationId(id) });
-  }, [session]);
+  // Handle deleting annotations
+  const handleDeleteAnnotation = useCallback((id: AnnotationId) => {
+    session?.client.mark.delete(rUri, id);
+  }, [session, rUri]);
 
   // Handle annotation clicks - memoized
   const handleAnnotationClick = useCallback((annotation: Annotation, event?: React.MouseEvent) => {

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

@@ -5,7 +5,7 @@ import { BrowseView } from '../BrowseView';
 import type { components, EventBus } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../test-utils';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock ResourceAnnotationsContext - keep this simple
 let mockNewAnnotationIds = new Set<string>();
@@ -15,9 +15,9 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   })),
 }));
 
-// Mock @semiont/api-client utilities
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+// Mock @semiont/core utilities (these helpers and `resourceId` all live in core).
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getMimeCategory: vi.fn((mimeType: string) => {

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

@@ -39,6 +39,7 @@ const stubClient = {
 };
 const stubSession = {
   client: stubClient,
+  subscribe: vi.fn(() => () => {}),
 };
 const stubActiveSession$ = new BehaviorSubject<any>(stubSession);
 const stubBrowser = {