@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.80

package/src/components/annotation/AnnotateToolbar.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
+import { useEventBus } from '../../contexts/EventBusContext';
 import { getSupportedShapes } from '../../lib/media-shapes';
 import type { Annotator } from '../../lib/annotation-registry';
 import './annotations.css';
@@ -15,18 +16,14 @@ export type ShapeType = 'rectangle' | 'circle' | 'polygon';
 interface AnnotateToolbarProps {
   selectedMotivation: SelectionMotivation | null;
   selectedClick: ClickAction;
-  onSelectionChange: (motivation: SelectionMotivation | null) => void;
-  onClickChange: (motivation: ClickAction) => void;
   showSelectionGroup?: boolean;
   showDeleteButton?: boolean;
   showShapeGroup?: boolean;
   selectedShape?: ShapeType;
-  onShapeChange?: (shape: ShapeType) => void;
   mediaType?: string | null;  // MIME type to determine supported shapes
 
   // Mode props
   annotateMode: boolean;
-  onAnnotateModeToggle: () => void;
 
   // Annotators for emoji lookup
   annotators: Record<string, Annotator>;
@@ -102,22 +99,27 @@ function DropdownGroup({
   );
 }
 
+/**
+ * Toolbar for annotation controls with mode, selection, click, and shape options
+ *
+ * @emits toolbar:selection-changed - Selection motivation changed. Payload: { motivation: SelectionMotivation | null }
+ * @emits toolbar:click-changed - Click action mode changed. Payload: { action: ClickAction }
+ * @emits toolbar:shape-changed - Drawing shape changed. Payload: { shape: ShapeType }
+ * @emits view:mode-toggled - View mode toggled between browse and annotate. Payload: undefined
+ */
 export function AnnotateToolbar({
   selectedMotivation,
   selectedClick,
-  onSelectionChange,
-  onClickChange,
   showSelectionGroup = true,
   showDeleteButton = true,
   showShapeGroup = false,
   selectedShape = 'rectangle',
-  onShapeChange,
   mediaType,
   annotateMode = false,
-  onAnnotateModeToggle,
   annotators
 }: AnnotateToolbarProps) {
   const t = useTranslations('AnnotateToolbar');
+  const eventBus = useEventBus();
 
   // Helper to get emoji from annotators by motivation (with fallback for safety)
   const getMotivationEmoji = (motivation: SelectionMotivation): string => {
@@ -186,9 +188,11 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      onSelectionChange(null);
+      eventBus.emit('toolbar:selection-changed', { motivation: null });
     } else {
-      onSelectionChange(selectedMotivation === motivation ? null : motivation);
+      eventBus.emit('toolbar:selection-changed', {
+        motivation: selectedMotivation === motivation ? null : motivation
+      });
     }
     // Close dropdown after selection
     setSelectionPinned(false);
@@ -196,23 +200,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    onClickChange(action);
+    eventBus.emit('toolbar:click-changed', { action });
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    if (onShapeChange) {
-      onShapeChange(shape);
-    }
+    eventBus.emit('toolbar:shape-changed', { shape });
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    onAnnotateModeToggle();
+    eventBus.emit('view:mode-toggled', undefined);
     setModePinned(false);
     setModeHovered(false);
   };

package/src/components/annotation/__tests__/AnnotateToolbar.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
-import { vi } from 'vitest';
+import { vi, beforeEach, describe, it, expect } from 'vitest';
 import { NextIntlClientProvider } from 'next-intl';
 import { AnnotateToolbar, type SelectionMotivation, type ClickAction } from '../AnnotateToolbar';
 import { ANNOTATORS } from '../../../lib/annotation-registry';
+import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../contexts/EventBusContext';
 
 // Mock translations
 const messages = {
@@ -29,11 +30,75 @@ const messages = {
   }
 };
 
-const renderWithIntl = (component: React.ReactElement) => {
+// Composition-based event tracker
+interface TrackedEvent {
+  event: string;
+  payload: any;
+}
+
+function createEventTracker() {
+  const events: TrackedEvent[] = [];
+
+  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
+    const eventBus = useEventBus();
+
+    React.useEffect(() => {
+      const handlers: Array<() => void> = [];
+
+      // Track toolbar-related events
+      const trackEvent = (eventName: string) => (payload: any) => {
+        events.push({ event: eventName, payload });
+      };
+
+      const toolbarEvents = [
+        'view:mode-toggled',
+        'toolbar:click-changed',
+        'toolbar:selection-changed',
+        'toolbar:shape-changed',
+      ];
+
+      toolbarEvents.forEach(eventName => {
+        const handler = trackEvent(eventName);
+        eventBus.on(eventName, handler);
+        handlers.push(() => eventBus.off(eventName, handler));
+      });
+
+      return () => {
+        handlers.forEach(cleanup => cleanup());
+      };
+    }, [eventBus]);
+
+    return <>{children}</>;
+  }
+
+  return {
+    EventTrackingWrapper,
+    events,
+    clear: () => {
+      events.length = 0;
+    },
+  };
+}
+
+const renderWithIntl = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
+  if (tracker) {
+    return render(
+      <EventBusProvider>
+        <NextIntlClientProvider locale="en" messages={messages}>
+          <tracker.EventTrackingWrapper>
+            {component}
+          </tracker.EventTrackingWrapper>
+        </NextIntlClientProvider>
+      </EventBusProvider>
+    );
+  }
+
   return render(
-    <NextIntlClientProvider locale="en" messages={messages}>
-      {component}
-    </NextIntlClientProvider>
+    <EventBusProvider>
+      <NextIntlClientProvider locale="en" messages={messages}>
+        {component}
+      </NextIntlClientProvider>
+    </EventBusProvider>
   );
 };
 
@@ -44,11 +109,11 @@ describe('AnnotateToolbar', () => {
     onSelectionChange: vi.fn(),
     onClickChange: vi.fn(),
     annotateMode: false,
-    onAnnotateModeToggle: vi.fn(),
     annotators: ANNOTATORS
   };
 
   beforeEach(() => {
+    resetEventBusForTesting();
     vi.clearAllMocks();
   });
 
@@ -113,19 +178,19 @@ describe('AnnotateToolbar', () => {
         <AnnotateToolbar
           {...defaultProps}
           annotateMode={false}
-          onAnnotateModeToggle={vi.fn()}
         />
       );
       expect(screen.getByText('Browse')).toBeInTheDocument();
 
       rerender(
-        <NextIntlClientProvider locale="en" messages={messages}>
-          <AnnotateToolbar
-            {...defaultProps}
-            annotateMode={true}
-            onAnnotateModeToggle={vi.fn()}
-          />
-        </NextIntlClientProvider>
+        <EventBusProvider>
+          <NextIntlClientProvider locale="en" messages={messages}>
+            <AnnotateToolbar
+              {...defaultProps}
+              annotateMode={true}
+            />
+          </NextIntlClientProvider>
+        </EventBusProvider>
       );
       expect(screen.getByText('Annotate')).toBeInTheDocument();
     });
@@ -135,7 +200,6 @@ describe('AnnotateToolbar', () => {
         <AnnotateToolbar
           {...defaultProps}
           annotateMode={false}
-          onAnnotateModeToggle={vi.fn()}
         />
       );
 
@@ -151,14 +215,14 @@ describe('AnnotateToolbar', () => {
       });
     });
 
-    it('calls onAnnotateModeToggle when Browse is clicked in Annotate mode', async () => {
-      const handleToggle = vi.fn();
+    it('emits view:mode-toggled event when Browse is clicked in Annotate mode', async () => {
+      const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar
           {...defaultProps}
           annotateMode={true}
-          onAnnotateModeToggle={handleToggle}
-        />
+        />,
+        tracker
       );
 
       const modeGroup = screen.getByLabelText('Mode');
@@ -169,17 +233,19 @@ describe('AnnotateToolbar', () => {
         fireEvent.click(browseButton);
       });
 
-      expect(handleToggle).toHaveBeenCalledTimes(1);
+      await waitFor(() => {
+        expect(tracker.events.some(e => e.event === 'view:mode-toggled')).toBe(true);
+      });
     });
 
-    it('calls onAnnotateModeToggle when Annotate is clicked in Browse mode', async () => {
-      const handleToggle = vi.fn();
+    it('emits view:mode-toggled event when Annotate is clicked in Browse mode', async () => {
+      const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar
           {...defaultProps}
           annotateMode={false}
-          onAnnotateModeToggle={handleToggle}
-        />
+        />,
+        tracker
       );
 
       const modeGroup = screen.getByLabelText('Mode');
@@ -190,17 +256,19 @@ describe('AnnotateToolbar', () => {
         fireEvent.click(annotateButton);
       });
 
-      expect(handleToggle).toHaveBeenCalledTimes(1);
+      await waitFor(() => {
+        expect(tracker.events.some(e => e.event === 'view:mode-toggled')).toBe(true);
+      });
     });
 
     it('closes dropdown after selection', async () => {
-      const handleToggle = vi.fn();
+      const tracker = createEventTracker();
       const { rerender } = renderWithIntl(
         <AnnotateToolbar
           {...defaultProps}
           annotateMode={false}
-          onAnnotateModeToggle={handleToggle}
-        />
+        />,
+        tracker
       );
 
       const modeGroup = screen.getByLabelText('Mode');
@@ -213,18 +281,23 @@ describe('AnnotateToolbar', () => {
       const annotateButton = screen.getByText('Annotate');
       fireEvent.click(annotateButton);
 
-      // Verify the toggle was called
-      expect(handleToggle).toHaveBeenCalledTimes(1);
+      // Verify the event was emitted
+      await waitFor(() => {
+        expect(tracker.events.some(e => e.event === 'view:mode-toggled')).toBe(true);
+      });
 
       // Simulate mode change by rerendering with new mode
       rerender(
-        <NextIntlClientProvider locale="en" messages={messages}>
-          <AnnotateToolbar
-            {...defaultProps}
-            annotateMode={true}
-            onAnnotateModeToggle={handleToggle}
-          />
-        </NextIntlClientProvider>
+        <EventBusProvider>
+          <NextIntlClientProvider locale="en" messages={messages}>
+            <tracker.EventTrackingWrapper>
+              <AnnotateToolbar
+                {...defaultProps}
+                annotateMode={true}
+              />
+            </tracker.EventTrackingWrapper>
+          </NextIntlClientProvider>
+        </EventBusProvider>
       );
 
       // After mode change, the collapsed content should show "Annotate"
@@ -238,10 +311,11 @@ describe('AnnotateToolbar', () => {
   });
 
   describe('CLICK Group Interactions', () => {
-    it('calls onClickChange when clicking an action', async () => {
-      const handleChange = vi.fn();
+    it('emits toolbar:click-changed event when clicking an action', async () => {
+      const tracker = createEventTracker();
       renderWithIntl(
-        <AnnotateToolbar {...defaultProps} onClickChange={handleChange} />
+        <AnnotateToolbar {...defaultProps} />,
+        tracker
       );
 
       const clickGroup = screen.getByLabelText('Click');
@@ -251,8 +325,13 @@ describe('AnnotateToolbar', () => {
         expect(screen.getByText('Follow')).toBeInTheDocument();
       });
 
+      tracker.clear();
       fireEvent.click(screen.getByText('Follow'));
-      expect(handleChange).toHaveBeenCalledWith('follow');
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'toolbar:click-changed' && e.payload?.action === 'follow'
+        )).toBe(true);
+      });
     });
 
     it('displays selected action', () => {
@@ -264,10 +343,11 @@ describe('AnnotateToolbar', () => {
   });
 
   describe('MOTIVATION Group Interactions', () => {
-    it('calls onSelectionChange when clicking a motivation', async () => {
-      const handleChange = vi.fn();
+    it('emits toolbar:selection-changed event when clicking a motivation', async () => {
+      const tracker = createEventTracker();
       renderWithIntl(
-        <AnnotateToolbar {...defaultProps} onSelectionChange={handleChange} />
+        <AnnotateToolbar {...defaultProps} />,
+        tracker
       );
 
       const motivationGroup = screen.getByLabelText('Motivation');
@@ -277,18 +357,23 @@ describe('AnnotateToolbar', () => {
         expect(screen.getByText('Reference')).toBeInTheDocument();
       });
 
+      tracker.clear();
       fireEvent.click(screen.getByText('Reference'));
-      expect(handleChange).toHaveBeenCalledWith('linking');
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'toolbar:selection-changed' && e.payload?.motivation === 'linking'
+        )).toBe(true);
+      });
     });
 
     it('toggles motivation on/off', async () => {
-      const handleChange = vi.fn();
+      const tracker = createEventTracker();
       const { rerender } = renderWithIntl(
         <AnnotateToolbar
           {...defaultProps}
           selectedMotivation={null}
-          onSelectionChange={handleChange}
-        />
+        />,
+        tracker
       );
 
       const motivationGroup = screen.getByLabelText('Motivation');
@@ -300,18 +385,26 @@ describe('AnnotateToolbar', () => {
       });
 
       const dropdown = screen.getByRole('menu');
+      tracker.clear();
       fireEvent.click(within(dropdown).getByText('Highlight'));
-      expect(handleChange).toHaveBeenCalledWith('highlighting');
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'toolbar:selection-changed' && e.payload?.motivation === 'highlighting'
+        )).toBe(true);
+      });
 
       // Simulate selection
       rerender(
-        <NextIntlClientProvider locale="en" messages={messages}>
-          <AnnotateToolbar
-            {...defaultProps}
-            selectedMotivation="highlighting"
-            onSelectionChange={handleChange}
-          />
-        </NextIntlClientProvider>
+        <EventBusProvider>
+          <NextIntlClientProvider locale="en" messages={messages}>
+            <tracker.EventTrackingWrapper>
+              <AnnotateToolbar
+                {...defaultProps}
+                selectedMotivation="highlighting"
+              />
+            </tracker.EventTrackingWrapper>
+          </NextIntlClientProvider>
+        </EventBusProvider>
       );
 
       // Click again to deselect
@@ -321,21 +414,26 @@ describe('AnnotateToolbar', () => {
         expect(within(dropdown).getByText('Highlight')).toBeInTheDocument();
       });
       const dropdown2 = screen.getByRole('menu');
+      tracker.clear();
       fireEvent.click(within(dropdown2).getByText('Highlight'));
-      expect(handleChange).toHaveBeenCalledWith(null);
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'toolbar:selection-changed' && e.payload?.motivation === null
+        )).toBe(true);
+      });
     });
   });
 
   describe('SHAPE Group Interactions', () => {
-    it('calls onShapeChange when clicking a shape', async () => {
-      const handleChange = vi.fn();
+    it('emits toolbar:shape-changed event when clicking a shape', async () => {
+      const tracker = createEventTracker();
       renderWithIntl(
         <AnnotateToolbar
           {...defaultProps}
           showShapeGroup={true}
           selectedShape="rectangle"
-          onShapeChange={handleChange}
-        />
+        />,
+        tracker
       );
 
       const shapeGroup = screen.getByLabelText('Shape');
@@ -345,8 +443,13 @@ describe('AnnotateToolbar', () => {
         expect(screen.getByText('Circle')).toBeInTheDocument();
       });
 
+      tracker.clear();
       fireEvent.click(screen.getByText('Circle'));
-      expect(handleChange).toHaveBeenCalledWith('circle');
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'toolbar:shape-changed' && e.payload?.shape === 'circle'
+        )).toBe(true);
+      });
     });
   });
 
@@ -356,7 +459,6 @@ describe('AnnotateToolbar', () => {
         <AnnotateToolbar
           {...defaultProps}
           annotateMode={false}
-          onAnnotateModeToggle={vi.fn()}
         />
       );
 

package/src/components/annotation/annotation-entries.css

@@ -28,6 +28,16 @@
   z-index: 10;
 }
 
+/* Pulse effect for hover synchronization */
+.semiont-annotation-pulse {
+  background: var(--semiont-bg-hover) !important;
+  transition: background 0.3s ease-in-out;
+}
+
+[data-theme="dark"] .semiont-annotation-pulse {
+  background: var(--semiont-bg-hover) !important;
+}
+
 /* Motivation-specific styles are handled in /styles/motivations/*.css */
 
 /* Entry structure */

package/src/components/annotation-popups/JsonLdView.tsx

@@ -22,17 +22,23 @@ export function JsonLdView({ annotation, onBack }: JsonLdViewProps) {
   const viewRef = useRef<EditorView | null>(null);
   const { showLineNumbers } = useLineNumbers();
 
+  // Store callback in ref to avoid including in dependency arrays
+  const onBackRef = useRef(onBack);
+  useEffect(() => {
+    onBackRef.current = onBack;
+  });
+
   // Handle escape key
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        onBack();
+        onBackRef.current();
       }
     };
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [onBack]);
+  }, []);
 
   // Initialize CodeMirror
   useEffect(() => {