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

package/src/components/CodeMirrorRenderer.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { EditorView, Decoration, DecorationSet, lineNumbers } from '@codemirror/view';
 import { EditorState, RangeSetBuilder, StateField, StateEffect, Compartment } from '@codemirror/state';
 import { markdown } from '@codemirror/lang-markdown';
-import type { Annotator } from '../lib/annotation-registry';
+import { ANNOTATORS } from '../lib/annotation-registry';
 import { ReferenceResolutionWidget } from '../lib/codemirror-widgets';
 import { isHighlight, isReference, isResolvedReference, isComment, isAssessment, isTag, getBodySource } from '@semiont/api-client';
 import type { components } from '@semiont/api-client';
+import type { EventBus } from '../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -26,9 +27,7 @@ export interface TextSegment {
 
 interface Props {
   content: string;
-  segments: TextSegment[];
-  onAnnotationClick?: (annotation: Annotation) => void;
-  onAnnotationHover?: (annotationId: string | null) => void;
+  segments?: TextSegment[]; // Optional - only needed for annotation rendering
   onTextSelect?: (exact: string, position: { start: number; end: number }) => void;
   onChange?: (content: string) => void;
   editable?: boolean;
@@ -39,13 +38,9 @@ interface Props {
   sourceView?: boolean; // If true, show raw source (no markdown rendering)
   showLineNumbers?: boolean; // If true, show line numbers
   enableWidgets?: boolean; // If true, show inline widgets (reference previews, entity badges)
-  onEntityTypeClick?: (entityType: string) => void;
-  onReferenceNavigate?: (documentId: string) => void;
-  onUnresolvedReferenceClick?: (annotation: Annotation) => void;
+  eventBus?: EventBus;
   getTargetDocumentName?: (documentId: string) => string | undefined;
   generatingReferenceId?: string | null; // ID of reference currently generating a document
-  onDeleteAnnotation?: (annotation: Annotation) => void;
-  annotators: Record<string, Annotator>;
 }
 
 // Effect to update annotation decorations with segments and new IDs
@@ -61,13 +56,8 @@ interface WidgetUpdate {
   content: string;
   segments: TextSegment[];
   generatingReferenceId?: string | null | undefined;
-  callbacks: {
-    onEntityTypeClick?: (entityType: string) => void;
-    onReferenceNavigate?: (documentId: string) => void;
-    onUnresolvedReferenceClick?: (annotation: Annotation) => void;
-    getTargetDocumentName?: (documentId: string) => string | undefined;
-    onDeleteAnnotation?: (annotation: Annotation) => void;
-  };
+  eventBus?: EventBus;
+  getTargetDocumentName?: (documentId: string) => string | undefined;
 }
 
 const updateWidgetsEffect = StateEffect.define<WidgetUpdate>();
@@ -139,7 +129,6 @@ function getAnnotationTooltip(annotation: Annotation): string {
 // Build decorations from segments
 function buildAnnotationDecorations(
   segments: TextSegment[],
-  annotators: Record<string, Annotator>,
   newAnnotationIds?: Set<string>
 ): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>();
@@ -152,7 +141,7 @@ function buildAnnotationDecorations(
     if (!segment.annotation) continue;
 
     const isNew = newAnnotationIds?.has(segment.annotation.id) || false;
-    const baseClassName = Object.values(annotators).find(a => a.matchesAnnotation(segment.annotation!))?.className || 'annotation-highlight';
+    const baseClassName = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(segment.annotation!))?.className || 'annotation-highlight';
     const className = isNew ? `${baseClassName} annotation-sparkle` : baseClassName;
 
     // Use W3C helpers to determine annotation type
@@ -185,8 +174,8 @@ function buildAnnotationDecorations(
   return builder.finish();
 }
 
-// Create state field factory that closes over annotators
-function createAnnotationDecorationsField(annotators: Record<string, Annotator>) {
+// Create state field for annotation decorations
+function createAnnotationDecorationsField() {
   return StateField.define<DecorationSet>({
     create() {
       return Decoration.none;
@@ -196,7 +185,7 @@ function createAnnotationDecorationsField(annotators: Record<string, Annotator>)
 
       for (const effect of tr.effects) {
         if (effect.is(updateAnnotationsEffect)) {
-          decorations = buildAnnotationDecorations(effect.value.segments, annotators, effect.value.newAnnotationIds);
+          decorations = buildAnnotationDecorations(effect.value.segments, effect.value.newAnnotationIds);
         }
       }
 
@@ -211,13 +200,8 @@ function buildWidgetDecorations(
   _content: string,
   segments: TextSegment[],
   generatingReferenceId: string | null | undefined,
-  callbacks: {
-    onEntityTypeClick?: (entityType: string) => void;
-    onReferenceNavigate?: (documentId: string) => void;
-    onUnresolvedReferenceClick?: (annotation: Annotation) => void;
-    getTargetDocumentName?: (documentId: string) => string | undefined;
-    onDeleteAnnotation?: (annotation: Annotation) => void;
-  }
+  eventBus: any,
+  getTargetDocumentName?: (documentId: string) => string | undefined
 ): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>();
 
@@ -239,7 +223,7 @@ function buildWidgetDecorations(
     if (isReference(annotation)) {
       const bodySource = getBodySource(annotation.body);
       const targetName = bodySource
-        ? callbacks.getTargetDocumentName?.(bodySource)
+        ? getTargetDocumentName?.(bodySource)
         : undefined;
       // Compare by ID portion (handle both URI and internal ID formats)
       const isGenerating = generatingReferenceId
@@ -248,8 +232,7 @@ function buildWidgetDecorations(
       const widget = new ReferenceResolutionWidget(
         annotation,
         targetName,
-        callbacks.onReferenceNavigate,
-        callbacks.onUnresolvedReferenceClick,
+        eventBus,
         isGenerating
       );
       builder.add(
@@ -278,7 +261,8 @@ const widgetDecorationsField = StateField.define<DecorationSet>({
           effect.value.content,
           effect.value.segments,
           effect.value.generatingReferenceId,
-          effect.value.callbacks
+          effect.value.eventBus,
+          effect.value.getTargetDocumentName
         );
       }
     }
@@ -290,9 +274,7 @@ const widgetDecorationsField = StateField.define<DecorationSet>({
 
 export function CodeMirrorRenderer({
   content,
-  segments,
-  onAnnotationClick,
-  onAnnotationHover,
+  segments = [],
   onChange,
   editable = false,
   newAnnotationIds,
@@ -302,13 +284,9 @@ export function CodeMirrorRenderer({
   sourceView = false,
   showLineNumbers = false,
   enableWidgets = false,
-  onEntityTypeClick,
-  onReferenceNavigate,
-  onUnresolvedReferenceClick,
+  eventBus,
   getTargetDocumentName,
-  generatingReferenceId,
-  onDeleteAnnotation,
-  annotators
+  generatingReferenceId
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
@@ -320,39 +298,20 @@ export function CodeMirrorRenderer({
 
   const segmentsRef = useRef(convertedSegments);
   const lineNumbersCompartment = useRef(new Compartment());
-  const callbacksRef = useRef<{
-    onWikiLinkClick?: (pageName: string) => void;
-    onEntityTypeClick?: (entityType: string) => void;
-    onReferenceNavigate?: (documentId: string) => void;
-    onUnresolvedReferenceClick?: (annotation: Annotation) => void;
-    getTargetDocumentName?: (documentId: string) => string | undefined;
-    onDeleteAnnotation?: (annotation: Annotation) => void;
-    onAnnotationClick?: (annotation: Annotation, event?: React.MouseEvent) => void;
-    onAnnotationHover?: (annotationId: string | null) => void;
-  }>({});
-
-  // Update segments ref when they change
-  segmentsRef.current = segments;
+  const eventBusRef = useRef(eventBus);
+  const getTargetDocumentNameRef = useRef(getTargetDocumentName);
 
-  // Update callbacks ref when they change
-  useEffect(() => {
-    callbacksRef.current = {
-      ...(onEntityTypeClick && { onEntityTypeClick }),
-      ...(onReferenceNavigate && { onReferenceNavigate }),
-      ...(onUnresolvedReferenceClick && { onUnresolvedReferenceClick }),
-      ...(getTargetDocumentName && { getTargetDocumentName }),
-      ...(onDeleteAnnotation && { onDeleteAnnotation }),
-      ...(onAnnotationClick && { onAnnotationClick }),
-      ...(onAnnotationHover && { onAnnotationHover })
-    };
-  }, [onEntityTypeClick, onReferenceNavigate, onUnresolvedReferenceClick, getTargetDocumentName, onDeleteAnnotation, onAnnotationClick, onAnnotationHover]);
+  // Update refs when they change
+  segmentsRef.current = segments;
+  eventBusRef.current = eventBus;
+  getTargetDocumentNameRef.current = getTargetDocumentName;
 
   // Initialize CodeMirror view once
   useEffect(() => {
     if (!containerRef.current || viewRef.current) return;
 
-    // Create annotation decorations field with annotators
-    const annotationDecorationsField = createAnnotationDecorationsField(annotators);
+    // Create annotation decorations field
+    const annotationDecorationsField = createAnnotationDecorationsField();
 
     // Create CodeMirror state with markdown mode
     const state = EditorState.create({
@@ -379,31 +338,17 @@ export function CodeMirrorRenderer({
             const annotationElement = target.closest('[data-annotation-id]');
             const annotationId = annotationElement?.getAttribute('data-annotation-id');
 
-            if (annotationId && callbacksRef.current.onAnnotationClick) {
+            if (annotationId && eventBusRef.current) {
               const segment = segmentsRef.current.find(s => s.annotation?.id === annotationId);
               if (segment?.annotation) {
                 event.preventDefault();
-                callbacksRef.current.onAnnotationClick(segment.annotation);
+                eventBusRef.current.emit('annotation:click', {
+                  annotationId,
+                  motivation: segment.annotation.motivation
+                });
                 return true; // Stop propagation
               }
             }
-            return false;
-          },
-          mousemove: (event, view) => {
-            const target = event.target as HTMLElement;
-            const annotationElement = target.closest('[data-annotation-id]');
-            const annotationId = annotationElement?.getAttribute('data-annotation-id');
-
-            // Track last hovered ID to avoid redundant calls
-            const enrichedDom = view.dom as EnrichedHTMLElement;
-            const lastHovered = enrichedDom.__lastHoveredAnnotation;
-            if (annotationId !== lastHovered) {
-              enrichedDom.__lastHoveredAnnotation = annotationId || null;
-              if (callbacksRef.current.onAnnotationHover) {
-                callbacksRef.current.onAnnotationHover(annotationId || null);
-              }
-            }
-
             return false;
           }
         }),
@@ -461,11 +406,38 @@ export function CodeMirrorRenderer({
     // Store the view on the container for position calculation
     (containerRef.current as EnrichedHTMLElement).__cmView = view;
 
+    // Attach hover event listeners using native DOM events with delegation
+    const container = view.dom;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const annotationElement = target.closest('[data-annotation-id]');
+      const annotationId = annotationElement?.getAttribute('data-annotation-id');
+
+      if (annotationId && eventBusRef.current) {
+        eventBusRef.current.emit('annotation:hover', { annotationId });
+      }
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const annotationElement = target.closest('[data-annotation-id]');
+
+      if (annotationElement && eventBusRef.current) {
+        eventBusRef.current.emit('annotation:hover', { annotationId: null });
+      }
+    };
+
+    container.addEventListener('mouseover', handleMouseOver);
+    container.addEventListener('mouseout', handleMouseOut);
+
     return () => {
+      container.removeEventListener('mouseover', handleMouseOver);
+      container.removeEventListener('mouseout', handleMouseOut);
       view.destroy();
       viewRef.current = null;
     };
-  }, [annotators]); // Recreate if annotators change
+  }, []); // Only initialize once
 
   // Update content when it changes externally (not from user typing)
   useEffect(() => {
@@ -473,9 +445,9 @@ export function CodeMirrorRenderer({
 
     const currentContent = viewRef.current.state.doc.toString();
 
-    // Only update if content is different AND didn't come from user input
-    // (user input already updates the view, so we only need this for external updates)
-    if (content === currentContent || content === contentRef.current) return;
+    // Only update if content is different from what's in the editor
+    // Skip if content matches current editor state (prevents cursor jumping)
+    if (content === currentContent) return;
 
     // Save cursor position
     const selection = viewRef.current.state.selection.main;
@@ -520,7 +492,8 @@ export function CodeMirrorRenderer({
         content,
         segments: convertedSegments,
         generatingReferenceId,
-        callbacks: callbacksRef.current
+        eventBus: eventBusRef.current,
+        getTargetDocumentName: getTargetDocumentNameRef.current
       })
     });
   }, [content, convertedSegments, enableWidgets, generatingReferenceId]);

package/src/components/DetectionProgressWidget.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useTranslations } from '../contexts/TranslationContext';
-import type { DetectionProgress } from '../hooks/useDetectionProgress';
+import { useEventBus } from '../contexts/EventBusContext';
+import type { DetectionProgress } from '../types/progress';
 import type { components } from '@semiont/api-client';
 
 type Motivation = components['schemas']['Motivation'];
@@ -13,12 +14,22 @@ interface EnrichedDetectionProgress extends DetectionProgress {
 
 interface DetectionProgressWidgetProps {
   progress: DetectionProgress | null;
-  onCancel?: () => void;
   annotationType?: Motivation | 'reference';
 }
 
-export function DetectionProgressWidget({ progress, onCancel, annotationType = 'reference' }: DetectionProgressWidgetProps) {
+/**
+ * Widget for displaying detection progress with cancel functionality
+ *
+ * @emits job:cancel-requested - User requested to cancel detection job. Payload: { jobType: string }
+ */
+export function DetectionProgressWidget({ progress, annotationType = 'reference' }: DetectionProgressWidgetProps) {
   const t = useTranslations('DetectionProgressWidget');
+  const eventBus = useEventBus();
+
+  const handleCancel = () => {
+    // Emit event for job cancellation
+    eventBus.emit('job:cancel-requested', { jobType: 'detection' });
+  };
 
   if (!progress) return null;
 
@@ -34,9 +45,9 @@ export function DetectionProgressWidget({ progress, onCancel, annotationType = '
           <span className="semiont-detection-sparkle">✨</span>
           {t('title')}
         </h3>
-        {progress.status !== 'complete' && onCancel && (
+        {progress.status !== 'complete' && (
           <button
-            onClick={onCancel}
+            onClick={handleCancel}
             className="semiont-detection-cancel"
             title={t('cancelDetection')}
           >

package/src/components/LiveRegion.tsx

@@ -76,11 +76,11 @@ export function useSearchAnnouncements() {
     } else {
       announce(`${count} result${count === 1 ? '' : 's'} found for ${query}`, 'polite');
     }
-  }, [announce]);
+  }, []);
 
   const announceSearching = useCallback(() => {
     announce('Searching...', 'polite');
-  }, [announce]);
+  }, []);
 
   return {
     announceSearchResults,
@@ -93,31 +93,31 @@ export function useDocumentAnnouncements(annotators?: Record<string, Annotator>)
 
   const announceDocumentSaved = useCallback(() => {
     announce('Document saved successfully', 'polite');
-  }, [announce]);
+  }, []);
 
   const announceDocumentDeleted = useCallback(() => {
     announce('Document deleted', 'polite');
-  }, [announce]);
+  }, []);
 
   const announceAnnotationCreated = useCallback((annotation: Annotation) => {
     const metadata = annotators ? Object.values(annotators).find(a => a.matchesAnnotation(annotation)) : null;
     const message = metadata?.announceOnCreate ?? 'Annotation created';
     announce(message, 'polite');
-  }, [announce, annotators]);
+  }, [annotators]);
 
   const announceAnnotationDeleted = useCallback(() => {
     announce('Annotation deleted', 'polite');
-  }, [announce]);
+  }, []);
 
   const announceAnnotationUpdated = useCallback((annotation: Annotation) => {
     const metadata = annotators ? Object.values(annotators).find(a => a.matchesAnnotation(annotation)) : null;
     const message = `${metadata?.displayName ?? 'Annotation'} updated`;
     announce(message, 'polite');
-  }, [announce, annotators]);
+  }, [annotators]);
 
   const announceError = useCallback((message: string) => {
     announce(`Error: ${message}`, 'assertive');
-  }, [announce]);
+  }, []);
 
   return {
     announceDocumentSaved,
@@ -138,22 +138,22 @@ export function useResourceLoadingAnnouncements() {
       ? `Loading ${resourceName}...`
       : 'Loading resource...';
     announce(message, 'polite');
-  }, [announce]);
+  }, []);
 
   const announceResourceLoaded = useCallback((resourceName: string) => {
     announce(`${resourceName} loaded successfully`, 'polite');
-  }, [announce]);
+  }, []);
 
   const announceResourceLoadError = useCallback((resourceName?: string) => {
     const message = resourceName
       ? `Failed to load ${resourceName}`
       : 'Failed to load resource';
     announce(message, 'assertive');
-  }, [announce]);
+  }, []);
 
   const announceResourceUpdating = useCallback((resourceName: string) => {
     announce(`Updating ${resourceName}...`, 'polite');
-  }, [announce]);
+  }, []);
 
   return {
     announceResourceLoading,
@@ -169,22 +169,22 @@ export function useFormAnnouncements() {
 
   const announceFormSubmitting = useCallback(() => {
     announce('Submitting form...', 'polite');
-  }, [announce]);
+  }, []);
 
   const announceFormSuccess = useCallback((message?: string) => {
     announce(message || 'Form submitted successfully', 'polite');
-  }, [announce]);
+  }, []);
 
   const announceFormError = useCallback((message?: string) => {
     announce(message || 'Form submission failed. Please check your entries and try again.', 'assertive');
-  }, [announce]);
+  }, []);
 
   const announceFormValidationError = useCallback((fieldCount: number) => {
     const message = fieldCount === 1
       ? 'There is 1 field with an error'
       : `There are ${fieldCount} fields with errors`;
     announce(message, 'assertive');
-  }, [announce]);
+  }, []);
 
   return {
     announceFormSubmitting,
@@ -200,11 +200,11 @@ export function useLanguageChangeAnnouncements() {
 
   const announceLanguageChanging = useCallback((newLanguage: string) => {
     announce(`Changing language to ${newLanguage}...`, 'polite');
-  }, [announce]);
+  }, []);
 
   const announceLanguageChanged = useCallback((newLanguage: string) => {
     announce(`Language changed to ${newLanguage}`, 'polite');
-  }, [announce]);
+  }, []);
 
   return {
     announceLanguageChanging,

package/src/components/ResizeHandle.tsx

@@ -50,6 +50,12 @@ export function ResizeHandle({
   const startXRef = useRef<number>(0);
   const startWidthRef = useRef<number>(0);
 
+  // Store callback in ref to avoid including in dependency arrays
+  const onResizeRef = useRef(onResize);
+  useEffect(() => {
+    onResizeRef.current = onResize;
+  });
+
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
@@ -73,8 +79,8 @@ export function ResizeHandle({
 
     // Enforce constraints
     const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
-    onResize(constrainedWidth);
-  }, [isDragging, onResize, minWidth, maxWidth, position]);
+    onResizeRef.current(constrainedWidth);
+  }, [isDragging, minWidth, maxWidth, position]);
 
   const handleMouseUp = useCallback(() => {
     setIsDragging(false);
@@ -113,9 +119,9 @@ export function ResizeHandle({
     // Only resize if arrow key was pressed
     if (newWidth !== currentWidth) {
       const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
-      onResize(constrainedWidth);
+      onResizeRef.current(constrainedWidth);
     }
-  }, [onResize, minWidth, maxWidth, position]);
+  }, [minWidth, maxWidth, position]);
 
   // Add/remove global mouse event listeners for dragging
   useEffect(() => {

package/src/components/SessionTimer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useSessionExpiry } from '@semiont/react-ui';
-import { useFormattedTime } from '@semiont/react-ui';
+import { useSessionExpiry } from '../hooks/useSessionExpiry';
+import { useFormattedTime } from '../hooks/useFormattedTime';
 
 export function SessionTimer() {
   const { timeRemaining } = useSessionExpiry();

package/src/components/Toolbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from '../contexts/TranslationContext';
+import { useEventBus } from '../contexts/EventBusContext';
 import './toolbar/Toolbar.css';
 
 type ToolbarContext = 'document' | 'simple';
@@ -8,19 +9,27 @@ type ToolbarContext = 'document' | 'simple';
 interface Props<T extends string = string> {
   context: ToolbarContext;
   activePanel: T | null;
-  onPanelToggle: (panel: T) => void;
 
   // Document context specific
   isArchived?: boolean;
 }
 
+/**
+ * Toolbar component for panel navigation
+ *
+ * @emits panel:toggle - Toggle panel visibility. Payload: { panel: string }
+ */
 export function Toolbar<T extends string = string>({
   context,
   activePanel,
-  onPanelToggle,
   isArchived = false
 }: Props<T>) {
   const t = useTranslations('Toolbar');
+  const eventBus = useEventBus();
+
+  const handlePanelToggle = (panel: string) => {
+    eventBus.emit('panel:toggle', { panel });
+  };
 
   return (
     <div className="semiont-toolbar" data-context={context}>
@@ -30,7 +39,7 @@ export function Toolbar<T extends string = string>({
           {/* Annotations Icon - unified panel for all annotation types */}
           {!isArchived && (
             <button
-              onClick={() => onPanelToggle('annotations' as T)}
+              onClick={() => handlePanelToggle('annotations')}
               className="semiont-toolbar-button"
               data-active={activePanel === 'annotations'}
               data-panel="annotations"
@@ -44,7 +53,7 @@ export function Toolbar<T extends string = string>({
 
           {/* Document Info Icon */}
           <button
-            onClick={() => onPanelToggle('info' as T)}
+            onClick={() => handlePanelToggle('info')}
             className="semiont-toolbar-button"
             data-active={activePanel === 'info'}
             data-panel="info"
@@ -57,7 +66,7 @@ export function Toolbar<T extends string = string>({
 
           {/* History Icon */}
           <button
-            onClick={() => onPanelToggle('history' as T)}
+            onClick={() => handlePanelToggle('history')}
             className="semiont-toolbar-button"
             data-active={activePanel === 'history'}
             data-panel="history"
@@ -70,7 +79,7 @@ export function Toolbar<T extends string = string>({
 
           {/* Collaboration Icon */}
           <button
-            onClick={() => onPanelToggle('collaboration' as T)}
+            onClick={() => handlePanelToggle('collaboration')}
             className="semiont-toolbar-button"
             data-active={activePanel === 'collaboration'}
             data-panel="collaboration"
@@ -83,7 +92,7 @@ export function Toolbar<T extends string = string>({
 
           {/* JSON-LD Icon */}
           <button
-            onClick={() => onPanelToggle('jsonld' as T)}
+            onClick={() => handlePanelToggle('jsonld')}
             className="semiont-toolbar-button"
             data-active={activePanel === 'jsonld'}
             data-panel="jsonld"
@@ -98,7 +107,7 @@ export function Toolbar<T extends string = string>({
 
       {/* User Icon - always visible, appears above settings */}
       <button
-        onClick={() => onPanelToggle('user' as T)}
+        onClick={() => handlePanelToggle('user')}
         className="semiont-toolbar-button"
         data-active={activePanel === 'user'}
         data-panel="user"
@@ -111,7 +120,7 @@ export function Toolbar<T extends string = string>({
 
       {/* Settings Icon - always visible without scrolling */}
       <button
-        onClick={() => onPanelToggle('settings' as T)}
+        onClick={() => handlePanelToggle('settings')}
         className="semiont-toolbar-button"
         data-active={activePanel === 'settings'}
         data-panel="settings"

package/src/components/__tests__/SessionTimer.test.tsx

@@ -3,16 +3,16 @@ import { render, screen } from '@testing-library/react';
 import { SessionTimer } from '../SessionTimer';
 
 // Mock the hooks
-vi.mock('@semiont/react-ui', async () => {
-  const actual = await vi.importActual('@semiont/react-ui');
-  return {
-    ...actual,
-    useSessionExpiry: vi.fn(),
-    useFormattedTime: vi.fn(),
-  };
-});
+vi.mock('../../hooks/useSessionExpiry', () => ({
+  useSessionExpiry: vi.fn(),
+}));
+
+vi.mock('../../hooks/useFormattedTime', () => ({
+  useFormattedTime: vi.fn(),
+}));
 
-import { useSessionExpiry, useFormattedTime } from '@semiont/react-ui';
+import { useSessionExpiry } from '../../hooks/useSessionExpiry';
+import { useFormattedTime } from '../../hooks/useFormattedTime';
 
 describe('SessionTimer', () => {
   describe('Rendering', () => {