@semiont/react-ui 0.4.20 → 0.4.22

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

@@ -4,7 +4,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { ReferencesPanel } from '../ReferencesPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
+import type { EventBus } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -14,59 +15,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: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: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
@@ -344,26 +313,22 @@ describe('ReferencesPanel Component', () => {
 
       // Simulate detection starting
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={true}
-            progress={{ completedEntityTypes: [] }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={true}
+          progress={{ completedEntityTypes: [] }}
+        />
       );
 
       // Simulate detection completing
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={false}
-            progress={{
-              completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
-            }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={false}
+          progress={{
+            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+          }}
+        />
       );
 
       // UI should reset but we can't directly test internal state
@@ -473,13 +438,11 @@ describe('ReferencesPanel Component', () => {
 
       // Parent clears progress after completion
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={false}
-            progress={null}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={false}
+          progress={null}
+        />
       );
 
       expect(screen.getByText('Person:')).toBeInTheDocument();
@@ -498,9 +461,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
       expect(screen.getByText(/Found.*5/i)).toBeInTheDocument();
     });
@@ -517,9 +478,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
       expect(screen.getByText('✓')).toBeInTheDocument();
     });
@@ -536,9 +495,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       // Should show both the completed log AND the selection UI
@@ -558,9 +515,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       // Selection UI should be immediately available (no button click needed)
@@ -594,13 +549,11 @@ describe('ReferencesPanel Component', () => {
 
       // Start detecting
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={true}
-            progress={{ completedEntityTypes: [] }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={true}
+          progress={{ completedEntityTypes: [] }}
+        />
       );
 
       // Detecting state
@@ -622,22 +575,18 @@ describe('ReferencesPanel Component', () => {
 
       // Complete - first trigger useEffect to copy to lastDetectionLog
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={false}
-            progress={{
-              completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
-            }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={false}
+          progress={{
+            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+          }}
+        />
       );
 
       // Then clear progress to show the log
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       expect(screen.queryByTestId('annotation-progress-widget')).not.toBeInTheDocument();
@@ -659,18 +608,14 @@ describe('ReferencesPanel Component', () => {
 
       // Clear progress to show the log
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       // Selection UI should be immediately available
       expect(screen.getByText('Select entity types')).toBeInTheDocument();
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} />
       );
 
       expect(screen.getByText('Select entity types')).toBeInTheDocument();

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

@@ -2,8 +2,10 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import type { EventBus } from '@semiont/core';
+import type { SemiontClient } from '@semiont/sdk';
 import { ResourceInfoPanel } from '../ResourceInfoPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -36,8 +38,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,
     formatLocaleDisplay: vi.fn((locale: string) => `Language: ${locale}`),
@@ -61,64 +63,37 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      // Track resource-related events
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const resourceEvents = [
-        'yield:clone',
-        'mark:archive',
-        'mark:unarchive',
-      ] as const;
-
-      resourceEvents.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, client: SemiontClient) {
+      // `yield:clone` is a local-bus UI signal emitted by `client.yield.clone()`.
+      eventBus.get('yield:clone').subscribe((payload: any) => {
+        events.push({ event: 'yield:clone', payload });
+      });
+      // `mark:archive` / `mark:unarchive` are backend-routed via `actor.emit`;
+      // spy on the namespace methods instead of subscribing to a local bus.
+      const origArchive = client.mark.archive.bind(client.mark);
+      const origUnarchive = client.mark.unarchive.bind(client.mark);
+      client.mark.archive = vi.fn(async (rid: any) => {
+        events.push({ event: 'mark:archive', payload: { resourceId: rid } });
+        return origArchive(rid);
+      }) as typeof client.mark.archive;
+      client.mark.unarchive = vi.fn(async (rid: any) => {
+        events.push({ event: 'mark:unarchive', payload: { resourceId: rid } });
+        return origUnarchive(rid);
+      }) as typeof client.mark.unarchive;
     },
   };
 }
 
-// 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, client } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus, client);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 describe('ResourceInfoPanel Component', () => {

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

@@ -5,14 +5,14 @@ import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../../test-utils';
 import type { components } from '@semiont/core';
 
-type Annotation = components['schemas']['Annotation'];
+import type { Annotation } from '@semiont/core';
 
 // Stable mock functions defined outside vi.mock to avoid re-render loops
 const mockIsBodyResolved = vi.fn();
 const mockGetEntityTypes = vi.fn();
 
-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,
     isBodyResolved: (...args: unknown[]) => mockIsBodyResolved(...args),

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

@@ -6,11 +6,11 @@ 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(),
@@ -28,7 +28,7 @@ vi.mock('../../../../lib/tag-schemas', () => ({
   getTagSchema: vi.fn(),
 }));
 
-import { getAnnotationExactText } from '@semiont/api-client';
+import { getAnnotationExactText } from '@semiont/core';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../../lib/tag-schemas';
 import type { MockedFunction } from 'vitest';

package/src/components/resource/panels/__tests__/TaggingPanel.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 { 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'];
+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', '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
@@ -109,8 +77,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(),
@@ -144,8 +112,7 @@ vi.mock('../../../../lib/tag-schemas', () => ({
   ]),
 }));
 
-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>;
 

package/src/components/settings/SettingsPanel.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import { LOCALES } from '@semiont/api-client';
+import { LOCALES } from '@semiont/core';
 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

@@ -13,9 +13,9 @@ vi.mock('../../LiveRegion', () => ({
   })),
 }));
 
-// Mock LOCALES from api-client
-vi.mock('@semiont/api-client', async () => {
-  const actual = await vi.importActual('@semiont/api-client');
+// Mock LOCALES (lives in @semiont/core)
+vi.mock('@semiont/core', async () => {
+  const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
     LOCALES: [
@@ -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' },
       });