@semiont/react-ui 0.5.5 → 0.5.7

package/src/components/layout/__tests__/SkipLinks.a11y.test.tsx

@@ -63,7 +63,7 @@ describe('SkipLinks - Accessibility', () => {
 
     it('should become visible on focus', async () => {
       const user = userEvent.setup();
-      const { container } = render(<SkipLinks />);
+      render(<SkipLinks />);
 
       const firstLink = screen.getAllByRole('link')[0];
 
@@ -76,12 +76,12 @@ describe('SkipLinks - Accessibility', () => {
 
     it('should hide when focus leaves', async () => {
       const user = userEvent.setup();
-      const { container } = render(
-        <div>
-          <SkipLinks />
-          <button>Next focusable element</button>
-        </div>
-      );
+      render(
+<div>
+<SkipLinks />
+<button>Next focusable element</button>
+</div>
+);
 
       // Tab to first skip link
       await user.tab();
@@ -239,7 +239,7 @@ describe('SkipLinks - Accessibility', () => {
 
     it('should maintain focus management with multiple links', async () => {
       const user = userEvent.setup();
-      const { container } = render(<SkipLinks />);
+      render(<SkipLinks />);
 
       // Tab to first link
       await user.tab();

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';
@@ -15,7 +14,7 @@ vi.mock('@headlessui/react', () => ({
   TransitionChild: ({ children }: any) => <>{children}</>,
 }));
 
-// Mock the api-client Observable surface.
+// Mock the http-transport Observable surface.
 // The session-based useSemiont path: useObservable(useSemiont().activeSession$)?.client
 // We mock useSemiont to return a stable browser whose activeSession$ emits a
 // session-shaped object that carries the mock client.

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';
@@ -32,7 +31,7 @@ vi.mock('@headlessui/react', () => ({
   TransitionChild: ({ children }: any) => <>{children}</>,
 }));
 
-// Mock the api-client Observable surface
+// Mock the http-transport Observable surface
 const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
 const browseResourcesMock = vi.fn(() => browseResourcesSubject.asObservable());
 

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/AnnotateView.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
-import { getMimeCategory, isPdfMimeType } from '@semiont/core';
+import { capabilitiesOf } from '@semiont/core';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
 import { buildTextSelectors, fallbackTextPosition } from '../../lib/text-selection-handler';
@@ -71,7 +71,7 @@ export function AnnotateView({
   const containerRef = useRef<HTMLDivElement>(null);
   const session = useObservable(useSemiont().activeSession$);
 
-  const category = getMimeCategory(mimeType);
+  const render = capabilitiesOf(mimeType)?.render ?? 'none';
 
   const { highlights, references, assessments, comments, tags } = annotations;
 
@@ -192,8 +192,8 @@ export function AnnotateView({
     };
   }, [selectedMotivation, content]);
 
-  // Route to appropriate viewer based on MIME type category
-  switch (category) {
+  // Route to the annotation viewer for this media type's render mode.
+  switch (render) {
     case 'text':
       return (
         <div className="semiont-annotate-view" data-mime-type="text" ref={containerRef}>
@@ -225,40 +225,38 @@ export function AnnotateView({
         </div>
       );
 
-    case 'image':
-      // MIME-specific viewer selection within spatial annotation category
-      if (isPdfMimeType(mimeType)) {
-        // Phase 2: PDF annotation support
-        return (
-          <div className="semiont-annotate-view" data-mime-type="pdf" ref={containerRef}>
-            <AnnotateToolbar
-              selectedMotivation={selectedMotivation}
-              selectedClick={selectedClick}
-              showShapeGroup={true}
-              selectedShape={selectedShape}
-              mediaType={mimeType}
-              annotateMode={annotateMode}
-              annotators={ANNOTATORS}
-            />
-            <div className="semiont-annotate-view__content">
-              {content && (
-                <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
-                  <PdfAnnotationCanvas
-                    pdfUrl={content}
-                    existingAnnotations={allAnnotations}
-                    drawingMode={selectedMotivation ? selectedShape : null}
-                    selectedMotivation={selectedMotivation}
-                    session={session}
-                    hoveredAnnotationId={hoveredAnnotationId || null}
-                    hoverDelayMs={hoverDelayMs}
-                  />
-                </Suspense>
-              )}
-            </div>
+    case 'pdf':
+      // PDF annotation support (spatial, FragmentSelector)
+      return (
+        <div className="semiont-annotate-view" data-mime-type="pdf" ref={containerRef}>
+          <AnnotateToolbar
+            selectedMotivation={selectedMotivation}
+            selectedClick={selectedClick}
+            showShapeGroup={true}
+            selectedShape={selectedShape}
+            mediaType={mimeType}
+            annotateMode={annotateMode}
+            annotators={ANNOTATORS}
+          />
+          <div className="semiont-annotate-view__content">
+            {content && (
+              <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
+                <PdfAnnotationCanvas
+                  pdfUrl={content}
+                  existingAnnotations={allAnnotations}
+                  drawingMode={selectedMotivation ? selectedShape : null}
+                  selectedMotivation={selectedMotivation}
+                  session={session}
+                  hoveredAnnotationId={hoveredAnnotationId || null}
+                  hoverDelayMs={hoverDelayMs}
+                />
+              </Suspense>
+            )}
           </div>
-        );
-      }
+        </div>
+      );
 
+    case 'image':
       // PNG, JPEG, etc. - full annotation support
       return (
         <div className="semiont-annotate-view" data-mime-type="image" ref={containerRef}>
@@ -287,7 +285,7 @@ export function AnnotateView({
         </div>
       );
 
-    case 'unsupported':
+    case 'none':
     default:
       return (
         <div ref={containerRef} className="semiont-annotate-view semiont-annotate-view--unsupported" data-mime-type="unsupported">