@semiont/react-ui 0.4.20 → 0.4.21

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

@@ -5,8 +5,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { TaggingPanel } from '../TaggingPanel';
-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'];
 
@@ -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', 'mark:assist-request'] 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', 'mark:assist-request'] 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

package/src/components/settings/SettingsPanel.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 import { LOCALES } from '@semiont/api-client';
 import { useTranslations } from '../../contexts/TranslationContext';
 import { useLanguageChangeAnnouncements } from '../LiveRegion';
-import { useEventBus } from '../../contexts/EventBusContext';
+import { useSemiont } from '../../session/SemiontProvider';
 import './SettingsPanel.css';
 
 interface SettingsPanelProps {
@@ -31,7 +31,7 @@ export function SettingsPanel({
   hoverDelayMs
 }: SettingsPanelProps) {
   const t = useTranslations('Settings');
-  const eventBus = useEventBus();
+  const semiont = useSemiont();
   const { announceLanguageChanging, announceLanguageChanged } = useLanguageChangeAnnouncements();
 
   // Track previous locale to detect changes
@@ -41,7 +41,7 @@ export function SettingsPanel({
   const handleLocaleChange = (newLocale: string) => {
     const localeName = LOCALES.find(l => l.code === newLocale)?.nativeName || newLocale;
     announceLanguageChanging(localeName);
-    eventBus.get('settings:locale-changed').next({ locale: newLocale });
+    semiont.emit('settings:locale-changed', { locale: newLocale });
   };
 
   // Announce when language has successfully changed
@@ -70,7 +70,7 @@ export function SettingsPanel({
               type="button"
               role="switch"
               aria-checked={showLineNumbers}
-              onClick={() => eventBus.get('settings:line-numbers-toggled').next(undefined)}
+              onClick={() => semiont.emit('settings:line-numbers-toggled', undefined)}
               className={`semiont-toggle ${
                 showLineNumbers ? 'semiont-toggle--active' : ''
               }`}
@@ -94,7 +94,7 @@ export function SettingsPanel({
           </label>
           <div className="semiont-settings-panel__button-group">
             <button
-              onClick={() => eventBus.get('settings:theme-changed').next({ theme: 'light' })}
+              onClick={() => semiont.emit('settings:theme-changed', { theme: 'light' })}
               className={`semiont-panel-button ${
                 theme === 'light' ? 'semiont-panel-button-active' : ''
               }`}
@@ -103,7 +103,7 @@ export function SettingsPanel({
               ☀️ {t('themeLight')}
             </button>
             <button
-              onClick={() => eventBus.get('settings:theme-changed').next({ theme: 'dark' })}
+              onClick={() => semiont.emit('settings:theme-changed', { theme: 'dark' })}
               className={`semiont-panel-button ${
                 theme === 'dark' ? 'semiont-panel-button-active' : ''
               }`}
@@ -112,7 +112,7 @@ export function SettingsPanel({
               🌙 {t('themeDark')}
             </button>
             <button
-              onClick={() => eventBus.get('settings:theme-changed').next({ theme: 'system' })}
+              onClick={() => semiont.emit('settings:theme-changed', { theme: 'system' })}
               className={`semiont-panel-button ${
                 theme === 'system' ? 'semiont-panel-button-active' : ''
               }`}
@@ -170,7 +170,7 @@ export function SettingsPanel({
             max="500"
             step="50"
             value={hoverDelayMs}
-            onChange={(e) => eventBus.get('settings:hover-delay-changed').next({ hoverDelayMs: Number(e.target.value) })}
+            onChange={(e) => semiont.emit('settings:hover-delay-changed', { hoverDelayMs: Number(e.target.value) })}
             className="semiont-slider"
             aria-describedby="hover-delay-description"
           />

package/src/components/settings/__tests__/SettingsPanel.test.tsx

@@ -63,12 +63,12 @@ describe('SettingsPanel', () => {
 
     it('emits settings:line-numbers-toggled on toggle click', () => {
       const handler = vi.fn();
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <SettingsPanel {...defaultProps} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const sub = eventBus!.get('settings:line-numbers-toggled').subscribe(handler);
+      const sub = shellBus!.get('settings:line-numbers-toggled').subscribe(handler);
       fireEvent.click(screen.getByRole('switch'));
       expect(handler).toHaveBeenCalled();
       sub.unsubscribe();
@@ -94,12 +94,12 @@ describe('SettingsPanel', () => {
 
     it('emits settings:theme-changed on theme button click', () => {
       const handler = vi.fn();
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <SettingsPanel {...defaultProps} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const sub = eventBus!.get('settings:theme-changed').subscribe(handler);
+      const sub = shellBus!.get('settings:theme-changed').subscribe(handler);
       fireEvent.click(screen.getByText(/Settings.themeDark/));
       expect(handler).toHaveBeenCalledWith({ theme: 'dark' });
       sub.unsubscribe();
@@ -125,12 +125,12 @@ describe('SettingsPanel', () => {
 
     it('emits settings:locale-changed on language change', () => {
       const handler = vi.fn();
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <SettingsPanel {...defaultProps} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const sub = eventBus!.get('settings:locale-changed').subscribe(handler);
+      const sub = shellBus!.get('settings:locale-changed').subscribe(handler);
       fireEvent.change(screen.getByLabelText('Settings.language'), {
         target: { value: 'fr' },
       });
@@ -173,12 +173,12 @@ describe('SettingsPanel', () => {
 
     it('emits settings:hover-delay-changed on slider change', () => {
       const handler = vi.fn();
-      const { eventBus } = renderWithProviders(
+      const { shellBus } = renderWithProviders(
         <SettingsPanel {...defaultProps} />,
-        { returnEventBus: true }
+        { returnShellBus: true }
       );
 
-      const sub = eventBus!.get('settings:hover-delay-changed').subscribe(handler);
+      const sub = shellBus!.get('settings:hover-delay-changed').subscribe(handler);
       fireEvent.change(screen.getByLabelText('Settings.hoverDelay'), {
         target: { value: '300' },
       });

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

@@ -9,7 +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/api-client';
 
 export interface DevOpsFeature {
   title: 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/api-client';
 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,9 @@
  */
 
 import React, { useRef, useState, useCallback } from 'react';
+import type { ImportPreview } from '@semiont/api-client';
 
-export interface ImportPreview {
-  format: string;
-  version: number;
-  sourceUrl: string;
-  stats: Record<string, number>;
-}
+export type { ImportPreview };
 
 export interface ImportCardTranslations {
   title: string;

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

@@ -12,7 +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/api-client';
 
 export interface OAuthProvider {
   name: 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/api-client';
 import {
   PlusIcon,
   MagnifyingGlassIcon,

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

@@ -11,7 +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/api-client';
 
 export interface EntityTagsPageProps {
   // Data props

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

@@ -7,7 +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/api-client';
 
 export interface RecentDocumentsPageProps {
   // Data props

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/api-client';
 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/api-client';
 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,17 @@
  */
 
 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, type CloneData, type ReferenceData } from '@semiont/api-client';
+import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/api-client';
 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/ResourceDiscoveryPage.tsx

@@ -8,7 +8,7 @@
 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 { COMMON_PANELS, type ToolbarPanelType } from '@semiont/api-client';
 import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
 import { Toolbar } from '../../../components/Toolbar';
 import { ResourceCard } from './ResourceCard';

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,41 @@ 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
+// SemiontApiClient (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 { SemiontApiClient } = require('@semiont/api-client');
+  const { baseUrl } = require('@semiont/core');
+  const client = new SemiontApiClient({
+    baseUrl: baseUrl('http://localhost:4000'),
+  });
+  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 +88,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 +103,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 +118,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 +150,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 +158,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>
   );