@semiont/react-ui 0.4.20 → 0.4.22

package/src/components/navigation/SimpleNavigation.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
 
 export interface SimpleNavigationItem {
   name: string;
@@ -29,7 +29,7 @@ export interface SimpleNavigationProps {
  * Simple navigation component for Admin and Moderation modes.
  * Renders a section header with optional dropdown and static navigation tabs.
  *
- * @emits browse:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
+ * @emits shell:sidebar-toggle - Toggle sidebar collapsed/expanded state. Payload: undefined
  */
 export function SimpleNavigation({
   title,
@@ -47,7 +47,7 @@ export function SimpleNavigation({
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const eventBus = useEventBus();
+  const semiont = useSemiont();
 
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
@@ -86,7 +86,7 @@ export function SimpleNavigation({
             !isCollapsed && <span className="semiont-nav-section__header-text">{title}</span>
           )}
           <button
-            onClick={() => eventBus.get('browse:sidebar-toggle').next(undefined)}
+            onClick={() => semiont.emit('shell:sidebar-toggle', undefined)}
             className="semiont-nav-section__header-icon"
             title={isCollapsed ? expandSidebarLabel : collapseSidebarLabel}
             aria-label={isCollapsed ? expandSidebarLabel : collapseSidebarLabel}

package/src/components/navigation/__tests__/ObservableLink.test.tsx

@@ -26,17 +26,17 @@ describe('ObservableLink', () => {
     expect(screen.getByText('Click me')).toBeInTheDocument();
   });
 
-  it('emits browse:link-clicked with href and label on click', () => {
+  it('emits nav:link-clicked with href and label on click', () => {
     const handler = vi.fn();
 
-    const { eventBus } = renderWithProviders(
+    const { shellBus } = renderWithProviders(
       <ObservableLink href="/discover" label="Discover">
         Discover Resources
       </ObservableLink>,
-      { returnEventBus: true }
+      { returnShellBus: true }
     );
 
-    const subscription = eventBus!.get('browse:link-clicked').subscribe(handler);
+    const subscription = shellBus!.get('nav:link-clicked').subscribe(handler);
 
     const link = screen.getByRole('link');
     fireEvent.click(link);

package/src/components/navigation/__tests__/SimpleNavigation.test.tsx

@@ -93,15 +93,15 @@ describe('SimpleNavigation', () => {
   });
 
   describe('sidebar toggle', () => {
-    it('emits browse:sidebar-toggle on collapse button click', () => {
+    it('emits shell:sidebar-toggle on collapse button click', () => {
       const handler = vi.fn();
 
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <SimpleNavigation {...defaultProps} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const subscription = eventBus!.get('browse:sidebar-toggle').subscribe(handler);
+      const subscription = shellBus!.get('shell:sidebar-toggle').subscribe(handler);
 
       const collapseButton = screen.getByLabelText('Collapse sidebar');
       fireEvent.click(collapseButton);

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

@@ -1,11 +1,10 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import { createHoverHandlers } from '../../hooks/useBeckonFlow';
-import type { components } from '@semiont/core';
-import { getTargetSelector } 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 type { EventBus } from "@semiont/core"
 import {
   canvasToPdfCoordinates,
   pdfToCanvasCoordinates,
@@ -21,8 +20,6 @@ import {
 } from '../../lib/browser-pdfjs';
 import './PdfAnnotationCanvas.css';
 
-type Annotation = components['schemas']['Annotation'];
-
 export type DrawingMode = 'rectangle' | 'circle' | 'polygon' | null;
 
 /**
@@ -52,7 +49,7 @@ interface PdfAnnotationCanvasProps {
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
-  eventBus?: EventBus;
+  session?: SemiontSession | null | undefined;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
   hoverDelayMs?: number;
@@ -70,7 +67,7 @@ export function PdfAnnotationCanvas({
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
-  eventBus,
+  session,
   hoveredAnnotationId,
   selectedAnnotationId,
   hoverDelayMs = 150
@@ -235,7 +232,7 @@ export function PdfAnnotationCanvas({
   }, [isDrawing, selection]);
 
   const handleMouseUp = useCallback(() => {
-    if (!isDrawing || !selection || !pageDimensions || !displayDimensions || !eventBus) {
+    if (!isDrawing || !selection || !pageDimensions || !displayDimensions || !session) {
       setIsDrawing(false);
       setSelection(null);
       return;
@@ -280,7 +277,7 @@ export function PdfAnnotationCanvas({
         });
 
         if (clickedAnnotation) {
-          eventBus?.get('browse:click').next({ annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -319,14 +316,14 @@ export function PdfAnnotationCanvas({
 
     // Emit annotation:requested event with FragmentSelector
     if (selectedMotivation) {
-      eventBus.get('mark:requested').next({
-        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
@@ -357,8 +354,8 @@ export function PdfAnnotationCanvas({
 
   // Hover handlers with currentHover guard and dwell delay
   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]
   );
 
   // Calculate motivation color
@@ -457,7 +454,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => eventBus?.get('browse:click').next({ 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', () => ({
@@ -130,7 +130,6 @@ describe('PdfAnnotationCanvas', () => {
         '@context': 'http://www.w3.org/ns/anno.jsonld',
         type: 'Annotation',
         id: 'ann-1',
-        body: [],
         target: {
           source: mockResourceId,
           selector: {

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';
@@ -14,7 +14,8 @@ const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCa
 
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
 import type { EditorView } from '@codemirror/view';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 
 // Type augmentation for custom DOM properties
@@ -68,7 +69,7 @@ export function AnnotateView({
 }: Props) {
   const { newAnnotationIds } = useResourceAnnotations();
   const containerRef = useRef<HTMLDivElement>(null);
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
 
   const category = getMimeCategory(mimeType);
 
@@ -175,10 +176,7 @@ export function AnnotateView({
         const selectors = buildTextSelectors(content, text, start, end);
         if (!selectors) return;
 
-        eventBus.get('mark:requested').next({
-          selector: selectors,
-          motivation: selectedMotivation
-        });
+        session?.client.mark.request(selectors, selectedMotivation);
 
         // Clear selection after creating annotation
         selection.removeAllRanges();
@@ -218,7 +216,7 @@ export function AnnotateView({
             showLineNumbers={showLineNumbers}
             hoverDelayMs={hoverDelayMs}
             enableWidgets={enableWidgets}
-            eventBus={eventBus}
+            session={session}
             {...(getTargetResourceName && { getTargetResourceName })}
             {...(generatingReferenceId !== undefined && { generatingReferenceId })}
           />
@@ -250,7 +248,7 @@ export function AnnotateView({
                     existingAnnotations={allAnnotations}
                     drawingMode={selectedMotivation ? selectedShape : null}
                     selectedMotivation={selectedMotivation}
-                    eventBus={eventBus}
+                    session={session}
                     hoveredAnnotationId={hoveredAnnotationId || null}
                     hoverDelayMs={hoverDelayMs}
                   />
@@ -280,7 +278,7 @@ export function AnnotateView({
                 existingAnnotations={allAnnotations}
                 drawingMode={selectedMotivation ? selectedShape : null}
                 selectedMotivation={selectedMotivation}
-                eventBus={eventBus}
+                session={session}
                 hoveredAnnotationId={hoveredAnnotationId || null}
                 hoverDelayMs={hoverDelayMs}
               />

package/src/components/resource/AnnotationHistory.tsx

@@ -3,7 +3,8 @@
 import React, { useEffect, useRef } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
 import type { RouteBuilder, LinkComponentProps } from '../../contexts/RoutingContext';
-import { useResources } from '../../lib/api-hooks';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import type { ResourceId } from '@semiont/core';
 import { getAnnotationUriFromEvent, type StoredEventLike } from '@semiont/core';
 import { HistoryEvent } from './HistoryEvent';
@@ -19,17 +20,13 @@ interface Props {
 
 export function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventClick, Link, routes }: Props) {
   const t = useTranslations('AnnotationHistory');
+  const semiont = useObservable(useSemiont().activeSession$)?.client;
 
-  // API hooks
-  const resources = useResources();
-
-  // Load events using React Query
-  // React Query will automatically refetch when the query is invalidated by the parent
-  const { data: eventsData, isLoading: loading, isError: error } = resources.events.useQuery(rUri);
-
-  // Load annotations to look up text for removed/resolved events (single request)
-  const { data: annotationsData } = resources.annotations.useQuery(rUri);
-  const annotations = annotationsData?.annotations || [];
+  const eventsData = useObservable(semiont?.browse.events(rUri));
+  const annotationsData = useObservable(semiont?.browse.annotations(rUri));
+  const loading = eventsData === undefined;
+  const error = false;
+  const annotations = annotationsData ?? [];
 
   // Refs to track event elements for scrolling
   const eventRefs = useRef<Map<string, HTMLElement>>(new Map());
@@ -37,7 +34,7 @@ export function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onE
 
   // Sort events by oldest first (most recent at bottom)
   // Filter out job events - they're represented by mark:body-updated events instead
-  const events: StoredEventLike[] = !eventsData?.events ? [] : (eventsData.events as StoredEventLike[])
+  const events: StoredEventLike[] = !eventsData ? [] : (eventsData as StoredEventLike[])
     .filter((e) => {
       return e.type !== 'job:started' && e.type !== 'job:progress' && e.type !== 'job:completed';
     })

package/src/components/resource/BrowseView.tsx

@@ -3,9 +3,10 @@
 import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { getMimeCategory, isPdfMimeType } 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 { createHoverHandlers } from '../../hooks/useBeckonFlow';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
 import { ImageViewer } from '../viewers';
 import { AnnotateToolbar, type ClickAction } from '../annotation/AnnotateToolbar';
@@ -23,7 +24,8 @@ import {
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
 
 import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
 
 interface Props {
@@ -78,7 +80,7 @@ export const BrowseView = memo(function BrowseView({
   hoverDelayMs = 150
 }: Props) {
   const { newAnnotationIds } = useResourceAnnotations();
-  const eventBus = useEventBus();
+  const session = useObservable(useSemiont().activeSession$);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const category = getMimeCategory(mimeType);
@@ -119,6 +121,7 @@ export const BrowseView = memo(function BrowseView({
   // Attach click handler, hover handler, and animations after render
   useEffect(() => {
     if (!containerRef.current) return;
+    if (!session) return;
 
     const container = containerRef.current;
 
@@ -134,13 +137,13 @@ export const BrowseView = memo(function BrowseView({
       if (annotationId && annotationType === 'reference') {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          eventBus.get('browse:click').next({ annotationId, motivation: annotation.motivation });
+          session.client.browse.click(annotation.id, annotation.motivation);
         }
       }
     };
 
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBus.get('beckon:hover').next({ annotationId }),
+      (id) => session.client.beckon.hover(id),
       hoverDelayMs
     );
 
@@ -149,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
@@ -180,7 +183,7 @@ export const BrowseView = memo(function BrowseView({
       container.removeEventListener('mouseout', handleMouseOut);
       cleanupHover();
     };
-  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs]);
+  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs, session]);
 
   // Helper to scroll annotation into view with pulse effect
   const scrollToAnnotation = useCallback((annotationId: string | null, removePulse = false) => {

package/src/components/resource/ResourceViewer.tsx

@@ -6,20 +6,16 @@ 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 { useEventBus } from '../../contexts/EventBusContext';
+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 { useCacheManager } from '../../contexts/CacheContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { useObservableExternalNavigation } from '../../hooks/useObservableBrowse';
 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
  *
@@ -29,7 +25,7 @@ type SemiontResource = components['schemas']['ResourceDescriptor'];
  * - No manual refetch needed - events handle cache invalidation
  *
  * Requirements:
- * - Must be wrapped in MakeMeaningEventBusProvider (provides event bus)
+ * - Must be wrapped in SemiontProvider (which owns the session's event bus)
  * - Must be wrapped in CacheContext (provides cache manager)
  *
  * Event flow:
@@ -49,7 +45,7 @@ interface Props {
 
 /**
  * @emits mark:delete - User requested to delete annotation. Payload: { annotationId: string }
- * @emits browse:panel-open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
+ * @emits panel:open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
  *
  * @subscribes mark:mode-toggled - Toggles between browse and annotate mode. Payload: { mode: 'browse' | 'annotate' }
  * @subscribes mark:added - New annotation was added. Payload: { annotation: Annotation }
@@ -71,8 +67,8 @@ export function ResourceViewer({
   const t = useTranslations('ResourceViewer');
   const documentViewerRef = useRef<HTMLDivElement>(null);
 
-  // Get unified event bus for emitting UI events
-  const eventBus = useEventBus();
+  const browser = useSemiont();
+  const session = useObservable(browser.activeSession$);
 
   // Get observable navigation for event-driven routing
   const navigate = useObservableExternalNavigation();
@@ -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 => {
@@ -120,27 +116,19 @@ export function ResourceViewer({
   // Determine active view based on annotate mode
   const activeView = annotateMode ? 'annotate' : 'browse';
 
-  // Event-based cache invalidation - subscribe to make-meaning events
-  // This replaces manual onRefetchAnnotations calls with automatic updates
-  const cacheManager = useCacheManager();
+  const semiont = session?.client;
 
   const handleAnnotateAdded = useCallback(() => {
-    if (cacheManager) {
-      cacheManager.invalidateAnnotations(rUri);
-    }
-  }, [cacheManager, rUri]);
+    semiont?.browse.invalidateAnnotationList(rUri);
+  }, [semiont, rUri]);
 
   const handleAnnotateRemoved = useCallback(() => {
-    if (cacheManager) {
-      cacheManager.invalidateAnnotations(rUri);
-    }
-  }, [cacheManager, rUri]);
+    semiont?.browse.invalidateAnnotationList(rUri);
+  }, [semiont, rUri]);
 
   const handleAnnotateBodyUpdated = useCallback(() => {
-    if (cacheManager) {
-      cacheManager.invalidateAnnotations(rUri);
-    }
-  }, [cacheManager, rUri]);
+    semiont?.browse.invalidateAnnotationList(rUri);
+  }, [semiont, rUri]);
 
   // Annotation toolbar state - persisted in localStorage
   const [selectedMotivation, setSelectedMotivation] = useState<SelectionMotivation | null>(() => {
@@ -249,10 +237,10 @@ export function ResourceViewer({
     };
   };
 
-  // Handle deleting annotations - emit event instead of direct call
-  const handleDeleteAnnotation = useCallback((id: string) => {
-    eventBus.get('mark:delete').next({ annotationId: toAnnotationId(id) });
-  }, []); // eventBus is stable
+  // 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) => {
@@ -337,8 +325,8 @@ export function ResourceViewer({
 
     // All annotations open the unified annotations panel
     // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel
-    eventBus.get('browse:panel-open').next({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
-  }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick]);
+    browser.emit('panel:open', { panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
+  }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick, session]);
 
   // Event subscriptions - Combined into single useEventSubscriptions call to prevent hook ordering issues
   // IMPORTANT: All event subscriptions MUST be in a single call to maintain consistent hook order between renders