@semiont/react-ui 0.4.20 → 0.4.22

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

@@ -2,21 +2,22 @@
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { AnnotateReferencesProgressWidget } from '../../AnnotateReferencesProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
-import type { components, paths, Selector } from '@semiont/core';
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
+import type { components, Selector } from '@semiont/core';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { PanelHeader } from './PanelHeader';
 import './ReferencesPanel.css';
-import type { MarkProgress } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+type JobProgress = components['schemas']['JobProgress'];
+
+import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
-type ResponseContent<T> = T extends { responses: { 200: { content: { 'application/json': infer R } } } } ? R : never;
-type ReferencedBy = ResponseContent<paths['/resources/{id}/referenced-by']['get']>['referencedBy'][number];
+type ReferencedBy = components['schemas']['GetReferencedByResponse']['referencedBy'][number];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -45,7 +46,7 @@ interface Props {
   // Generic panel props
   annotations?: Annotation[];
   isAssisting: boolean;
-  progress: MarkProgress | null;
+  progress: JobProgress | null;
   annotateMode?: boolean;
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -86,7 +87,7 @@ export function ReferencesPanel({
   hoveredAnnotationId,
 }: Props) {
   const t = useTranslations('ReferencesPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
   const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ entityType: string; foundCount: number }> | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
@@ -202,12 +203,9 @@ export function ReferencesPanel({
   // Clear log when starting new annotation
   const handleAssist = () => {
     setLastDetectionLog(null);
-    eventBus.get('mark:assist-request').next({
-      motivation: 'linking',
-      options: {
-        entityTypes: selectedEntityTypes,
-        includeDescriptiveReferences,
-      },
+    session?.client.mark.requestAssist('linking', {
+      entityTypes: selectedEntityTypes,
+      includeDescriptiveReferences,
     });
   };
 
@@ -245,7 +243,7 @@ export function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType = pendingEntityTypes.join(',') || undefined;
-      eventBus.get('mark:submit').next({
+      session?.client.mark.submit({
         motivation: 'linking',
         selector: pendingAnnotation.selector,
         body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],
@@ -260,14 +258,14 @@ export function ReferencesPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('mark:cancel-pending').next(undefined);
+        session?.client.mark.cancelPending();
         setPendingEntityTypes([]);
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   return (
     <div className="semiont-panel">
@@ -312,7 +310,7 @@ export function ReferencesPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.get('mark:cancel-pending').next(undefined);
+                  session?.client.mark.cancelPending();
                   setPendingEntityTypes([]);
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -1,8 +1,9 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { formatLocaleDisplay } from '@semiont/api-client';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { formatLocaleDisplay } from '@semiont/core';
 import { resourceId as makeResourceId, type components } from '@semiont/core';
 import './ResourceInfoPanel.css';
 
@@ -47,7 +48,7 @@ export function ResourceInfoPanel({
   generator,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   return (
     <div className="semiont-resource-info-panel">
@@ -148,7 +149,7 @@ export function ResourceInfoPanel({
                     <button
                       key={id}
                       className="semiont-resource-info-panel__link"
-                      onClick={() => eventBus.get('browse:reference-navigate').next({ resourceId: id })}
+                      onClick={() => session?.client.browse.navigateReference(makeResourceId(id))}
                     >
                       {i > 0 && ', '}{id}
                     </button>
@@ -191,7 +192,7 @@ export function ResourceInfoPanel({
       {/* Clone Action */}
       <div className="semiont-resource-info-panel__action-section">
         <button
-          onClick={() => eventBus.get('yield:clone').next(undefined)}
+          onClick={() => session?.client.yield.clone()}
           className="semiont-resource-button semiont-resource-button--secondary"
         >
           🔗 {t('clone')}
@@ -206,7 +207,7 @@ export function ResourceInfoPanel({
         {isArchived ? (
           <>
             <button
-              onClick={() => eventBus.get('mark:unarchive').next({ resourceId: makeResourceId(resourceId) })}
+              onClick={() => session?.client.mark.unarchive(makeResourceId(resourceId))}
               className="semiont-resource-button semiont-resource-button--secondary"
             >
               📤 {t('unarchive')}
@@ -218,7 +219,7 @@ export function ResourceInfoPanel({
         ) : (
           <>
             <button
-              onClick={() => eventBus.get('mark:archive').next({ resourceId: makeResourceId(resourceId) })}
+              onClick={() => session?.client.mark.archive(makeResourceId(resourceId))}
               className="semiont-resource-button semiont-resource-button--archive"
             >
               📦 {t('archive')}

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

@@ -1,12 +1,11 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components } from '@semiont/core';
-import { isBodyResolved } from '@semiont/api-client';
+import { isBodyResolved } from '@semiont/core';
 import { getEntityTypes } from '@semiont/ontology';
 import './StatisticsPanel.css';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 interface StatisticsPanelProps {
   highlights: Annotation[];

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

@@ -1,14 +1,13 @@
 'use client';
 
 import type { Ref } from 'react';
-import type { components } from '@semiont/core';
-import { getAnnotationExactText } from '@semiont/api-client';
+import type { Annotation } from '@semiont/core';
+import { getAnnotationExactText } from '@semiont/core';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
-import { useEventBus } from '../../../contexts/EventBusContext';
-import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
-
-type Annotation = components['schemas']['Annotation'];
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
 
 interface TagEntryProps {
   tag: Annotation;
@@ -23,7 +22,7 @@ export function TagEntry({
   isHovered = false,
   ref,
 }: TagEntryProps) {
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const hoverProps = useHoverEmitter(tag.id);
 
   const selectedText = getAnnotationExactText(tag);
@@ -35,7 +34,7 @@ export function TagEntry({
     <div
       ref={ref}
       onClick={() => {
-        eventBus.get('browse:click').next({ annotationId: tag.id, motivation: tag.motivation });
+        session?.client.browse.click(tag.id, tag.motivation);
       }}
       {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}

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

@@ -2,17 +2,19 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useEventBus } from '../../../contexts/EventBusContext';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/core';
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { TagEntry } from './TagEntry';
 import { PanelHeader } from './PanelHeader';
 import { getAllTagSchemas } from '../../../lib/tag-schemas';
 import './TaggingPanel.css';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
+type JobProgress = components['schemas']['JobProgress'];
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -41,15 +43,7 @@ interface TaggingPanelProps {
   annotations: Annotation[];
   annotateMode?: boolean;
   isAssisting?: boolean;
-  progress?: {
-    status: string;
-    percentage?: number;
-    currentCategory?: string;
-    processedCategories?: number;
-    totalCategories?: number;
-    message?: string;
-    requestParams?: Array<{ label: string; value: string }>;
-  } | null;
+  progress?: JobProgress | null;
   pendingAnnotation: PendingAnnotation | null;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -75,7 +69,7 @@ export function TaggingPanel({
   hoveredAnnotationId,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const [selectedSchemaId, setSelectedSchemaId] = useState<string>('legal-irac');
   const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
@@ -195,12 +189,9 @@ export function TaggingPanel({
 
   const handleAssist = () => {
     if (selectedCategories.size > 0) {
-      eventBus.get('mark:assist-request').next({
-        motivation: 'tagging',
-        options: {
-          schemaId: selectedSchemaId,
-          categories: Array.from(selectedCategories),
-        },
+      session?.client.mark.requestAssist('tagging', {
+        schemaId: selectedSchemaId,
+        categories: Array.from(selectedCategories),
       });
       setSelectedCategories(new Set()); // Reset after annotation
     }
@@ -212,13 +203,13 @@ export function TaggingPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('mark:cancel-pending').next(undefined);
+        session?.client.mark.cancelPending();
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation]);
+  }, [pendingAnnotation, session]);
 
   // Color schemes are now handled via CSS data attributes
 
@@ -274,7 +265,7 @@ export function TaggingPanel({
                   className="semiont-select"
                   onChange={(e) => {
                     if (e.target.value && pendingAnnotation) {
-                      eventBus.get('mark:submit').next({
+                      session?.client.mark.submit({
                         motivation: 'tagging',
                         selector: pendingAnnotation.selector,
                         body: [
@@ -305,7 +296,7 @@ export function TaggingPanel({
             {/* Cancel button */}
             <div className="semiont-annotation-prompt__footer">
               <button
-                onClick={() => eventBus.get('mark:cancel-pending').next(undefined)}
+                onClick={() => session?.client.mark.cancelPending()}
                 className="semiont-button semiont-button--secondary"
                 data-type="tag"
               >

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

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components, Selector, MarkProgress } from '@semiont/core';
+import type { components, Selector } from '@semiont/core';
+type JobProgress = components['schemas']['JobProgress'];
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { Annotator } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';
@@ -13,7 +14,7 @@ import { CommentsPanel } from './CommentsPanel';
 import { TaggingPanel } from './TaggingPanel';
 import './UnifiedAnnotationsPanel.css';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
 type TabKey = 'statistics' | 'reference' | 'highlight' | 'assessment' | 'comment' | 'tag';
 
@@ -47,7 +48,7 @@ interface UnifiedAnnotationsPanelProps {
 
   // Annotation assistance state (per motivation)
   assistingMotivation?: Motivation | null;
-  progress?: MarkProgress | null;
+  progress?: JobProgress | null;
 
   // Unified pending annotation (for creating new annotations)
   pendingAnnotation: PendingAnnotation | null;

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

@@ -6,18 +6,18 @@ import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import type { components } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Mock @semiont/api-client
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getAnnotationExactText: vi.fn(),
   };
 });
 
-import { getAnnotationExactText } from '@semiont/api-client';
+import { getAnnotationExactText } from '@semiont/core';
 import type { MockedFunction } from 'vitest';
 import { AssessmentEntry } from '../AssessmentEntry';
 

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

@@ -5,10 +5,10 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { AssessmentPanel } from '../AssessmentPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
-import type { components } from '@semiont/core';
+import type { components, EventBus } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -18,59 +18,27 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const panelEvents = ['mark:submit'] as const;
-
-      panelEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
-      });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
   return {
-    EventTrackingWrapper,
     events,
-    clear: () => {
-      events.length = 0;
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
+      const panelEvents = ['mark:submit'] as const;
+      panelEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
+      });
     },
   };
 }
 
-// Helper to render with EventBusProvider
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <tracker.EventTrackingWrapper>
-          {component}
-        </tracker.EventTrackingWrapper>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
-      {component}
-    </EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 // Mock TranslationContext
@@ -90,8 +58,8 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
 }));
 
 // Mock @semiont/api-client utilities
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     getTextPositionSelector: vi.fn(),
@@ -108,8 +76,7 @@ vi.mock('../AssessmentEntry', () => ({
   ),
 }));
 
-// Mock AssistSection component - it will internally use the mocked useEventBus
-// Just render a simplified version
+// Mock AssistSection component — just render a simplified version.
 vi.mock('../AssistSection', () => ({
   AssistSection: ({ annotationType, isAssisting }: any) => (
     <div data-testid="detect-section">
@@ -119,8 +86,7 @@ vi.mock('../AssistSection', () => ({
   ),
 }));
 
-import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
-
+import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 const mockGetTextPositionSelector = getTextPositionSelector as MockedFunction<typeof getTextPositionSelector>;
 const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTargetSelector>;
 
@@ -380,7 +346,7 @@ describe('AssessmentPanel Component', () => {
         expect(tracker.events.some(e =>
           e.event === 'mark:submit' &&
           e.payload?.motivation === 'assessing' &&
-          e.payload?.body?.[0]?.value === 'My assessment'
+          e.payload?.body?.value === 'My assessment'
         )).toBe(true);
       });
     });
@@ -421,8 +387,7 @@ describe('AssessmentPanel Component', () => {
         expect(tracker.events.some(e =>
           e.event === 'mark:submit' &&
           e.payload?.motivation === 'assessing' &&
-          Array.isArray(e.payload?.body) &&
-          e.payload.body.length === 0
+          e.payload?.body === undefined
         )).toBe(true);
       });
     });