@semiont/react-ui 0.4.20 → 0.4.22

package/src/features/admin-devops/components/AdminDevOpsPage.tsx

@@ -9,8 +9,7 @@ import React from 'react';
 import {
   CommandLineIcon
 } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
-
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 export interface DevOpsFeature {
   title: string;
   description: string;

package/src/features/admin-exchange/components/AdminExchangePage.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 import { ExportCard, type ExportCardTranslations } from './ExportCard';
 import { ImportCard, type ImportCardProps, type ImportCardTranslations } from './ImportCard';
 import { ImportProgress, type ImportProgressTranslations } from './ImportProgress';

package/src/features/admin-exchange/components/ImportCard.tsx

@@ -5,13 +5,8 @@
  */
 
 import React, { useRef, useState, useCallback } from 'react';
-
-export interface ImportPreview {
-  format: string;
-  version: number;
-  sourceUrl: string;
-  stats: Record<string, number>;
-}
+import type { ImportPreview } from '@semiont/sdk';
+export type { ImportPreview };
 
 export interface ImportCardTranslations {
   title: string;

package/src/features/admin-security/components/AdminSecurityPage.tsx

@@ -12,8 +12,7 @@ import {
   CheckCircleIcon,
   InformationCircleIcon
 } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
-
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 export interface OAuthProvider {
   name: string;
   clientId?: string;

package/src/features/admin-users/components/AdminUsersPage.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useState } from 'react';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 import {
   PlusIcon,
   MagnifyingGlassIcon,

package/src/features/moderate-entity-tags/components/EntityTagsPage.tsx

@@ -11,8 +11,7 @@ import {
   PlusIcon,
   ExclamationCircleIcon
 } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
-
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 export interface EntityTagsPageProps {
   // Data props
   entityTypes: string[];

package/src/features/moderate-recent/components/RecentDocumentsPage.tsx

@@ -7,8 +7,7 @@
 
 import React from 'react';
 import { ClockIcon } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
-
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 export interface RecentDocumentsPageProps {
   // Data props
   hasDocuments: boolean;

package/src/features/moderate-tag-schemas/components/TagSchemasPage.tsx

@@ -11,7 +11,7 @@ import {
   ScaleIcon,
   LightBulbIcon
 } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 import type { TagSchema } from '@semiont/react-ui';
 
 export interface TagSchemasPageProps {

package/src/features/moderation-linked-data/components/LinkedDataPage.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 import { ExportCard, type ExportCardTranslations } from '../../admin-exchange/components/ExportCard';
 import { ImportCard, type ImportCardProps, type ImportCardTranslations } from '../../admin-exchange/components/ImportCard';
 import { ImportProgress, type ImportProgressTranslations } from '../../admin-exchange/components/ImportProgress';

package/src/features/resource-compose/__tests__/ResourceComposePage.test.tsx

@@ -9,7 +9,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceComposePage } from '../components/ResourceComposePage';
 import type { ResourceComposePageProps, SaveResourceParams } from '../components/ResourceComposePage';
-import { EventBusProvider } from '../../../contexts/EventBusContext';
+import { createTestSemiontWrapper } from '../../../test-utils';
 
 // Mock CodeMirrorRenderer to avoid CodeMirror dependencies
 vi.mock('../../../components/CodeMirrorRenderer', () => ({
@@ -72,9 +72,11 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   ...overrides,
 });
 
-// Helper to render with EventBusProvider
+// Helper to render with a session-capable tree (provides the event bus the
+// component reaches for via useSemiont/useObservable).
 const renderWithProviders = (ui: React.ReactElement) => {
-  return render(<EventBusProvider>{ui}</EventBusProvider>);
+  const { SemiontWrapper } = createTestSemiontWrapper();
+  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
 };
 
 describe('ResourceComposePage', () => {

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -7,34 +7,18 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import type { components, GatheredContext } from '@semiont/core';
-import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/api-client';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import type { GatheredContext } from '@semiont/core';
+import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/core';
+import { type CloneData, type ReferenceData } from '@semiont/sdk';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 import { buttonStyles } from '../../../lib/button-styles';
 import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
 import { useFormAnnouncements } from '../../../components/LiveRegion';
 
-type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
-
 export interface ResourceComposePageProps {
-  // Mode detection
   mode: 'new' | 'clone' | 'reference';
-
-  // Clone mode data
-  cloneData?: {
-    sourceResource: ResourceDescriptor;
-    sourceContent: string;
-  };
-
-  // Reference completion data
-  referenceData?: {
-    annotationUri: string;
-    sourceDocumentId: string;
-    name: string;
-    entityTypes: string[];
-  };
-
-  // Gathered context from wizard (optional, for reference mode)
+  cloneData?: CloneData | null;
+  referenceData?: ReferenceData | null;
   gatheredContext?: GatheredContext | null;
 
   // Available options

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -9,7 +9,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ResourceDiscoveryPage } from '../components/ResourceDiscoveryPage';
 import type { ResourceDiscoveryPageProps } from '../components/ResourceDiscoveryPage';
-import { EventBusProvider } from '../../../contexts/EventBusContext';
+import { createTestSemiontWrapper } from '../../../test-utils';
 
 const createMockResource = (id: string, name: string, entityTypes: string[] = []) => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',
@@ -58,9 +58,10 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   ...overrides,
 });
 
-// Helper to render with EventBusProvider
+// Helper to render with SemiontProvider (gives components access to session.emit)
 const renderWithProviders = (ui: React.ReactElement) => {
-  return render(<EventBusProvider>{ui}</EventBusProvider>);
+  const { SemiontWrapper } = createTestSemiontWrapper();
+  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
 };
 
 describe('ResourceDiscoveryPage', () => {

package/src/features/resource-discovery/components/ResourceCard.tsx

@@ -6,9 +6,8 @@
  */
 
 import React from 'react';
-import type { components } from '@semiont/core';
 
-type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
+import type { ResourceDescriptor } from '@semiont/core';
 
 export interface ResourceCardProps {
   resource: ResourceDescriptor;

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -6,14 +6,13 @@
  */
 
 import React, { useState, useCallback, useRef } from 'react';
-import type { components } from '@semiont/core';
-import { getResourceId } from '@semiont/api-client';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import { getResourceId } from '@semiont/core';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
 import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
 import { Toolbar } from '../../../components/Toolbar';
 import { ResourceCard } from './ResourceCard';
 
-type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
+import type { ResourceDescriptor } from '@semiont/core';
 
 export interface ResourceDiscoveryPageProps {
   // Data props

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -10,12 +10,9 @@ import { render, screen, act } from '@testing-library/react';
 import React from 'react';
 import { ResourceViewerPage } from '../components/ResourceViewerPage';
 import type { ResourceViewerPageProps } from '../components/ResourceViewerPage';
-// Import directly from context file to bypass mocked barrel export
-import { EventBusProvider } from '../../../contexts/EventBusContext';
-import { ApiClientProvider } from '../../../contexts/ApiClientContext';
-import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { ToastProvider } from '../../../components/Toast';
 import { ThemeProvider } from '../../../contexts/ThemeContext';
+import { createTestSemiontWrapper } from '../../../test-utils';
 
 // jsdom doesn't implement window.matchMedia — mock it for useTheme
 Object.defineProperty(window, 'matchMedia', {
@@ -37,32 +34,40 @@ vi.mock('../../../hooks/useResourceContent', () => ({
   useResourceContent: () => ({ content: 'Test content', loading: false }),
 }));
 
-vi.mock('../../../lib/api-hooks', () => ({
-  useResources: () => ({
-    annotations: { useQuery: () => ({ data: { annotations: [] } }) },
-    referencedBy: { useQuery: () => ({ data: { referencedBy: [] }, isLoading: false }) },
-    mediaToken: { useQuery: () => ({ data: { token: 'mock-media-token' }, isLoading: false }) },
-    update: { useMutation: () => ({ mutateAsync: vi.fn() }) },
-    generateCloneToken: { useMutation: () => ({ mutateAsync: vi.fn() }) },
-  }),
-  useEntityTypes: () => ({
-    list: { useQuery: () => ({ data: { entityTypes: ['Document', 'Article', 'Book'] } }) },
-  }),
-}));
 
-vi.mock('../../../hooks/useResourceEvents', () => ({
-  useResourceEvents: () => null,
-}));
+// Stub SemiontBrowser whose activeSession$ emits a session carrying a real
+// SemiontClient (wired to a dummy baseUrl). The real client surface lets
+// createResourceViewerPageVM run against the full namespace API without us
+// hand-stubbing every method it touches.
+const { stubBrowser } = vi.hoisted(() => {
+  const { BehaviorSubject } = require('rxjs');
+  const { SemiontClient, HttpTransport, HttpContentTransport } = require('@semiont/sdk');
+  const { baseUrl } = require('@semiont/core');
+  const transport = new HttpTransport({ baseUrl: baseUrl('http://localhost:4000') });
+  const client = new SemiontClient(transport, new HttpContentTransport(transport));
+  const stubActiveSession$ = new BehaviorSubject({ client });
+  const stubOpenResources$ = new BehaviorSubject([]);
+  const stubBrowser = {
+    activeSession$: stubActiveSession$,
+    openResources$: stubOpenResources$,
+    addOpenResource: vi.fn(),
+    removeOpenResource: vi.fn(),
+    updateOpenResourceName: vi.fn(),
+    reorderOpenResources: vi.fn(),
+    emit: vi.fn(),
+    on: vi.fn(() => () => {}),
+    stream: vi.fn(() => ({ subscribe: () => ({ unsubscribe: () => {} }) })),
+  };
+  return { stubBrowser };
+});
 
-// Mock dependencies that ResourceViewerPage imports
-vi.mock('@tanstack/react-query', async () => {
-  const actual = await vi.importActual('@tanstack/react-query');
+vi.mock('../../../session/SemiontProvider', async () => {
+  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>(
+    '../../../session/SemiontProvider'
+  );
   return {
     ...actual,
-    useQueryClient: () => ({
-      invalidateQueries: vi.fn(),
-      setQueryData: vi.fn(),
-    }),
+    useSemiont: () => stubBrowser,
   };
 });
 
@@ -82,12 +87,10 @@ vi.mock('@semiont/react-ui', async () => {
     createCancelDetectionHandler: () => vi.fn(),
 useDebouncedCallback: (fn: any) => fn,
     supportsDetection: () => false,
-    MakeMeaningEventBusProvider: ({ children }: any) => children,
     useResourceLoadingAnnouncements: () => ({
       announceResourceLoading: vi.fn(),
       announceResourceLoaded: vi.fn(),
     }),
-    // Don't mock EventBusProvider, useEventBus - let actual pass through via ...actual
     useEventSubscriptions: vi.fn(),
     useResourceAnnotations: () => ({
       clearNewAnnotationId: vi.fn(),
@@ -99,15 +102,6 @@ useDebouncedCallback: (fn: any) => fn,
   };
 });
 
-vi.mock('../../../contexts/OpenResourcesContext', () => ({
-  useOpenResources: () => ({
-    openResources: [],
-    addResource: vi.fn(),
-    removeResource: vi.fn(),
-    isResourceOpen: vi.fn().mockReturnValue(false),
-  }),
-}));
-
 vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   useResourceAnnotations: () => ({
     clearNewAnnotationId: vi.fn(),
@@ -123,6 +117,7 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
 // (the barrel export mock doesn't intercept direct context imports)
 const mockUseEventSubscriptions = vi.fn();
 vi.mock('../../../contexts/useEventSubscription', () => ({
+  useEventSubscription: vi.fn(),
   useEventSubscriptions: (...args: unknown[]) => mockUseEventSubscriptions(...args),
 }));
 
@@ -154,7 +149,7 @@ const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): Resource
   Link: ({ children }: any) => <a>{children}</a>,
   routes: {},
   refetchDocument: vi.fn().mockResolvedValue(undefined),
-  streamStatus: 'connected' as const,
+  streamStatus: 'open' as const,
   ToolbarPanels: ({ children, activePanel }: any) =>
     !activePanel ? null : <div data-testid="toolbar-panels">{children}</div>,
   ...overrides,
@@ -162,16 +157,13 @@ const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): Resource
 
 // Test wrapper to provide all required providers
 const renderWithProviders = (ui: React.ReactElement) => {
+  const { SemiontWrapper } = createTestSemiontWrapper();
   return render(
     <ThemeProvider>
       <ToastProvider>
-        <AuthTokenProvider token={null}>
-          <EventBusProvider>
-            <ApiClientProvider baseUrl="http://localhost:4000">
-              {ui}
-            </ApiClientProvider>
-          </EventBusProvider>
-        </AuthTokenProvider>
+        <SemiontWrapper>
+          {ui}
+        </SemiontWrapper>
       </ToastProvider>
     </ThemeProvider>
   );