@semiont/react-ui 0.5.4 → 0.5.6

package/src/components/layout/__tests__/UnifiedHeader.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { UnifiedHeader } from '../UnifiedHeader';
@@ -9,6 +8,7 @@ vi.mock('@/hooks/useUI', () => ({
   useDropdown: vi.fn(() => ({
     isOpen: false,
     toggle: vi.fn(),
+    open: vi.fn(),
     close: vi.fn(),
     dropdownRef: { current: null },
   })),
@@ -37,6 +37,7 @@ describe('UnifiedHeader Component', () => {
     vi.mocked(useDropdown).mockReturnValue({
       isOpen: false,
       toggle: vi.fn(),
+      open: vi.fn(),
       close: vi.fn(),
       dropdownRef: { current: null },
     });
@@ -216,6 +217,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: false,
         toggle: mockToggle,
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -239,6 +241,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -261,6 +264,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -282,6 +286,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: false,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -304,6 +309,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: mockClose,
         dropdownRef: { current: null },
       });
@@ -331,6 +337,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: false,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -366,6 +373,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -389,6 +397,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -450,6 +459,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });
@@ -471,6 +481,7 @@ describe('UnifiedHeader Component', () => {
       vi.mocked(useDropdown).mockReturnValue({
         isOpen: true,
         toggle: vi.fn(),
+        open: vi.fn(),
         close: vi.fn(),
         dropdownRef: { current: null },
       });

package/src/components/modals/__tests__/KeyboardShortcutsHelpModal.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import { renderWithProviders } from '../../../test-utils';
 import '@testing-library/jest-dom';

package/src/components/modals/__tests__/PermissionDeniedModal.test.tsx

@@ -6,8 +6,7 @@
  * `acknowledgePermissionDenied()` and navigate the window or history.
  */
 
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
+import { describe, it, expect, beforeEach, afterEach, vi, type Mock } from 'vitest';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {
@@ -27,7 +26,7 @@ vi.mock('@headlessui/react', () => ({
 const originalLocation = window.location;
 const originalHistoryBack = window.history.back;
 let mockLocation: { href: string; pathname: string };
-let mockHistoryBack: ReturnType<typeof vi.fn>;
+let mockHistoryBack: Mock<() => void>;
 
 beforeEach(() => {
   mockLocation = { href: '', pathname: '/admin/users' };
@@ -36,7 +35,7 @@ beforeEach(() => {
     writable: true,
     configurable: true,
   });
-  mockHistoryBack = vi.fn();
+  mockHistoryBack = vi.fn<() => void>();
   window.history.back = mockHistoryBack;
 });
 

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/modals/__tests__/SearchModal.basic.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SearchModal } from '../SearchModal';
 

package/src/components/modals/__tests__/SearchModal.keyboard.test.tsx

@@ -52,11 +52,6 @@ describe.skip('SearchModal Component - Keyboard Navigation', () => {
     });
 
     it('should handle Arrow Down key to navigate results', async () => {
-      const mockResults = [
-        { type: 'resource' as const, id: '1', name: 'Resource 1', content: 'Content 1' },
-        { type: 'resource' as const, id: '2', name: 'Resource 2', content: 'Content 2' },
-        { type: 'entity' as const, id: '3', name: 'Entity 1', entityType: 'Person' }
-      ];
 
       // TODO: Mock search results when API is integrated
       render(<SearchModal {...defaultProps} />);

package/src/components/modals/__tests__/SearchModal.search-wiring.test.tsx

@@ -12,7 +12,6 @@
  */
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/modals/__tests__/SearchModal.visual.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { SearchModal } from '../SearchModal';
 
 // Mock the hooks
@@ -102,7 +102,7 @@ describe.skip('SearchModal Component - Visual States', () => {
       rerender(<SearchModal {...defaultProps} isOpen={false} />);
       rerender(<SearchModal {...defaultProps} isOpen={true} />);
 
-      const input = screen.getByPlaceholderText('Search resources, entities...');
+      const input = screen.getByPlaceholderText<HTMLInputElement>('Search resources, entities...');
       expect(input).toBeInTheDocument();
       expect(input.value).toBe('');
     });

package/src/components/modals/__tests__/SessionExpiredModal.test.tsx

@@ -7,7 +7,6 @@
  */
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {

package/src/components/navigation/NavigationMenu.tsx

@@ -8,7 +8,7 @@ type TranslateFn = (key: string, params?: Record<string, any>) => string;
 
 interface NavigationMenuProps {
   Link: React.ComponentType<LinkComponentProps>;
-  routes: RouteBuilder;
+  routes: Partial<RouteBuilder>;
   t: TranslateFn;
   isAdmin?: boolean;
   isModerator?: boolean;

package/src/components/navigation/__tests__/Footer.a11y.test.tsx

@@ -21,6 +21,10 @@ describe('Footer - Accessibility', () => {
   ));
 
   const mockRoutes = {
+    resourceDetail: vi.fn((id: string) => `/resource/${id}`),
+    userProfile: vi.fn((id: string) => `/user/${id}`),
+    search: vi.fn((query: string) => `/search?q=${query}`),
+    home: vi.fn(() => '/'),
     about: vi.fn(() => '/about'),
     privacy: vi.fn(() => '/privacy'),
     terms: vi.fn(() => '/terms'),

package/src/components/navigation/__tests__/Footer.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Footer } from '../Footer';
@@ -124,7 +123,7 @@ describe('Footer Component', () => {
     });
 
     it('should render Cookie Preferences button when provided', () => {
-      const MockCookiePrefs = ({ isOpen, onClose }: any) => null;
+      const MockCookiePrefs = ({  }: any) => null;
 
       render(
         <Footer
@@ -139,7 +138,7 @@ describe('Footer Component', () => {
     });
 
     it('should open Cookie Preferences modal when button clicked', () => {
-      const MockCookiePrefs = ({ isOpen, onClose }: any) => (
+      const MockCookiePrefs = ({ isOpen }: any) => (
         isOpen ? <div data-testid="cookie-modal">Cookie Preferences</div> : null
       );
 
@@ -161,9 +160,7 @@ describe('Footer Component', () => {
     });
 
     it('should close Cookie Preferences modal when onClose called', () => {
-      let closeHandler: (() => void) | null = null;
       const MockCookiePrefs = ({ isOpen, onClose }: any) => {
-        closeHandler = onClose;
         return isOpen ? (
           <div data-testid="cookie-modal">
             <button onClick={onClose}>Close</button>
@@ -387,7 +384,7 @@ describe('Footer Component', () => {
 
     it('should have proper button elements for interactive features', () => {
       const mockHandler = vi.fn();
-      const MockCookiePrefs = ({ isOpen, onClose }: any) => null;
+      const MockCookiePrefs = ({  }: any) => null;
 
       render(
         <Footer

package/src/components/navigation/__tests__/NavigationMenu.a11y.test.tsx

@@ -56,7 +56,7 @@ describe('NavigationMenu - Accessibility', () => {
           Link={mockLink}
           routes={mockRoutes}
           t={mockTranslate}
-          activePath="/knowledge"
+          currentPath="/knowledge"
         />
       );
 

package/src/components/navigation/__tests__/NavigationMenu.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { NavigationMenu } from '../NavigationMenu';
@@ -287,14 +286,13 @@ describe('NavigationMenu Component', () => {
     });
 
     it('should not show extra divider after admin link', () => {
-      const { container } = render(
-        <NavigationMenu
-          Link={mockLink}
-          routes={mockRoutes}
-          t={mockTranslate}
-          isAdmin={true}
-        />
-      );
+      render(
+<NavigationMenu
+Link={mockLink}
+routes={mockRoutes}
+t={mockTranslate}
+isAdmin={true} />
+);
 
       const adminLink = screen.getByText('Administer').closest('a');
       const nextSibling = adminLink?.nextElementSibling;

package/src/components/navigation/__tests__/ObservableLink.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/navigation/__tests__/SimpleNavigation.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';
@@ -143,7 +142,7 @@ describe('SimpleNavigation', () => {
     });
 
     it('closes dropdown on outside click', () => {
-      const dropdownContent = (onClose: () => void) => (
+      const dropdownContent = () => (
         <div data-testid="dropdown-content">Dropdown</div>
       );
 

package/src/components/navigation/__tests__/SortableResourceTab.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -2,15 +2,17 @@
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import type { Annotation } from '@semiont/core';
-import { getTargetSelector } from '@semiont/core';
+import {
+  getTargetSelector,
+  createFragmentSelector,
+  parseFragmentSelector,
+  getPageFromFragment,
+} from '@semiont/core';
 import { createHoverHandlers, type SemiontSession } from '@semiont/sdk';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import {
   canvasToPdfCoordinates,
   pdfToCanvasCoordinates,
-  createFragmentSelector,
-  parseFragmentSelector,
-  getPageFromFragment,
   type CanvasRectangle
 } from '../../lib/pdf-coordinates';
 import {

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -11,8 +11,7 @@ import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PdfAnnotationCanvas } from '../PdfAnnotationCanvas';
-import { resourceId } from '@semiont/core';
-import type { components } from '@semiont/core';
+import { resourceId, annotationId } from '@semiont/core';
 
 import type { Annotation } from '@semiont/core';
 
@@ -41,6 +40,7 @@ vi.mock('../../../lib/browser-pdfjs', () => ({
 
 describe('PdfAnnotationCanvas', () => {
   const mockResourceId = resourceId('123');
+  const mockPdfUrl = 'https://example.com/resources/123.pdf';
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -57,7 +57,7 @@ describe('PdfAnnotationCanvas', () => {
   test('renders loading state initially', () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -68,7 +68,7 @@ describe('PdfAnnotationCanvas', () => {
   test('renders page navigation controls after loading', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -84,7 +84,7 @@ describe('PdfAnnotationCanvas', () => {
   test('previous button is disabled on first page', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -100,7 +100,7 @@ describe('PdfAnnotationCanvas', () => {
   test('next button is disabled on last page', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -129,7 +129,7 @@ describe('PdfAnnotationCanvas', () => {
       {
         '@context': 'http://www.w3.org/ns/anno.jsonld',
         type: 'Annotation',
-        id: 'ann-1',
+        id: annotationId('ann-1'),
         target: {
           source: mockResourceId,
           selector: {
@@ -145,7 +145,7 @@ describe('PdfAnnotationCanvas', () => {
 
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         existingAnnotations={mockAnnotations}
         drawingMode={null}
       />
@@ -177,21 +177,12 @@ describe('PdfAnnotationCanvas', () => {
     });
   });
 
-  test('emits annotate:requested via eventBus when drawing with sufficient drag', async () => {
-    const mockSubject = { next: vi.fn(), subscribe: vi.fn() };
-    const mockEventBus = {
-      emit: vi.fn(),
-      on: vi.fn(),
-      off: vi.fn(),
-      get: vi.fn().mockReturnValue(mockSubject),
-    };
-
+  test('accepts a drawing gesture without throwing when drawing mode is active', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode="rectangle"
         selectedMotivation="highlighting"
-        eventBus={mockEventBus as any}
       />
     );
 

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -2,10 +2,10 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowseView } from '../BrowseView';
-import type { components, EventBus } from '@semiont/core';
+import type { EventBus } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../test-utils';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock ResourceAnnotationsContext - keep this simple
 let mockNewAnnotationIds = new Set<string>();
@@ -151,12 +151,12 @@ const renderWithEventTracking = (
 };
 
 // Test data fixtures
-const createMockAnnotation = (motivation: string, id: string): Annotation => ({
+const createMockAnnotation = (motivation: Annotation['motivation'], id: string): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation,
-  creator: { name: 'user@example.com' },
+  creator: { '@type': 'Person', name: 'user@example.com' },
   created: '2024-01-01T10:00:00Z',
   target: {
     source: 'resource-1',
@@ -197,7 +197,9 @@ describe('BrowseView Component', () => {
     // Mock querySelector and querySelectorAll
     if (typeof document !== 'undefined') {
       document.querySelector = vi.fn();
-      document.querySelectorAll = vi.fn(() => []);
+      // Return a real (empty) NodeList so the mock matches the DOM signature.
+      const emptyNodeList = document.createDocumentFragment().querySelectorAll('*');
+      document.querySelectorAll = vi.fn(() => emptyNodeList);
     }
   });
 

package/src/components/resource/__tests__/HistoryEvent.test.tsx

@@ -1,10 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { HistoryEvent } from '../HistoryEvent';
 import { renderWithProviders } from '../../../test-utils';
-import type { StoredEvent } from '@semiont/core';
 
 // Mock @semiont/core - must use importOriginal to preserve EventBus etc.
 vi.mock('@semiont/core', async (importOriginal) => {
@@ -37,8 +35,6 @@ vi.mock('../event-formatting', () => ({
 import { getAnnotationUriFromEvent } from '@semiont/core';
 import {
   formatEventType,
-  getEventEmoji,
-  formatRelativeTime,
   getEventDisplayContent,
   getEventEntityTypes,
   getResourceCreationDetails,

package/src/components/resource/__tests__/ResourceViewer.mode-switch.test.tsx

@@ -11,15 +11,13 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import { ResourceViewer } from '../ResourceViewer';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import { TranslationProvider } from '../../../contexts/TranslationContext';
 import { ResourceAnnotationsProvider } from '../../../contexts/ResourceAnnotationsContext';
-import type { components } from '@semiont/core';
-
-type SemiontResource = components['schemas']['ResourceDescriptor'];
+import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
 
 // Mock dependencies
 vi.mock('../../../hooks/useObservableBrowse', () => ({
@@ -61,7 +59,7 @@ vi.mock('../../../session/SemiontProvider', async () => {
 
 const mockResource: SemiontResource & { content: string } = {
   '@context': 'https://www.w3.org/ns/activitystreams',
-  '@id': 'test-123',
+  '@id': 'test-123' as ResourceId,
   name: 'Test Document',
   created: '2024-01-01T00:00:00Z',
   entityTypes: [],
@@ -84,7 +82,7 @@ const mockAnnotations = {
 };
 
 const mockTranslationManager = {
-  t: (namespace: string, key: string, params?: Record<string, any>) => {
+  t: (namespace: string, key: string) => {
     return `${namespace}.${key}`;
   },
 };

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

@@ -236,7 +236,7 @@ export function ReferencesPanel({
     }
 
     // When annotation is complete and we haven't saved yet, save the log
-    if (!isAssisting && !hasSavedLogRef.current && progress?.completedEntityTypes) {
+    if (!hasSavedLogRef.current && progress?.completedEntityTypes) {
       hasSavedLogRef.current = true;
       setLastDetectionLog(progress.completedEntityTypes);
       setSelectedEntityTypes([]);

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

@@ -1,12 +1,10 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
-import type { components } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock @semiont/api-client
 vi.mock('@semiont/core', async () => {
@@ -25,10 +23,11 @@ const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<type
 
 const createMockAssessment = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'assessment-1',
+  id: 'assessment-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'assessing',
   creator: {
+    '@type': 'Person',
     name: 'reviewer@example.com',
   },
   created: '2024-06-15T12:00:00Z',

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

@@ -1,14 +1,14 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import type { MockedFunction } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { AssessmentPanel } from '../AssessmentPanel';
-import type { components, EventBus } from '@semiont/core';
+import type { EventBus } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -69,7 +69,7 @@ vi.mock('@semiont/core', async () => {
 
 // Mock AssessmentEntry component to simplify testing
 vi.mock('../AssessmentEntry', () => ({
-  AssessmentEntry: ({ assessment, onAssessmentRef }: any) => (
+  AssessmentEntry: ({ assessment }: any) => (
     <div data-testid={`assessment-${assessment.id}`}>
       <div>{assessment.id}</div>
     </div>
@@ -78,7 +78,7 @@ vi.mock('../AssessmentEntry', () => ({
 
 // Mock AssistSection component — just render a simplified version.
 vi.mock('../AssistSection', () => ({
-  AssistSection: ({ annotationType, isAssisting }: any) => (
+  AssistSection: ({ isAssisting }: any) => (
     <div data-testid="detect-section">
       <button>Start Detection</button>
       {isAssisting && <div>Detecting...</div>}
@@ -93,10 +93,11 @@ const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTarg
 // Test data fixtures
 const createMockAssessment = (id: string, start: number, end: number): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation: 'assessing',
   creator: {
+    '@type': 'Person',
     name: `user${id}@example.com`,
   },
   created: `2024-01-0${id.slice(-1)}T10:00:00Z`,