@semiont/react-ui 0.5.4 → 0.5.6

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

@@ -17,7 +17,6 @@ import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import { AssistSection } from '../AssistSection';
-import type { EventBus } from "@semiont/core"
 
 // Mock translations
 const mockT = vi.fn((key: string) => {
@@ -68,7 +67,7 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
             percentage: 30,
             message: 'Analyzing text for highlights...',
           }}
@@ -84,7 +83,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Processing...',
           }}
         />
@@ -102,7 +102,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
             requestParams: [
               { label: 'Instructions', value: 'Find important points' },
@@ -125,7 +126,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
           }}
         />
@@ -170,7 +172,7 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={false}
           progress={{
-            status: 'complete',
+            stage: 'complete',
             percentage: 100,
             message: 'Complete! Created 14 highlights',
           }}
@@ -433,7 +435,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: '',
           }}
         />
@@ -450,9 +453,9 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Processing...',
-            // no percentage
           }}
         />
       );
@@ -466,7 +469,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Processing...',
             requestParams: [],
           }}

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

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

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

@@ -5,10 +5,8 @@ import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentEntry } from '../CommentEntry';
-import type { components } from '@semiont/core';
-import type { EventBus } from "@semiont/core"
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -42,10 +40,11 @@ const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<type
 // Test data fixtures
 const createMockComment = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'comment-1',
+  id: 'comment-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'commenting',
   creator: {
+    '@type': 'Person',
     name: 'user@example.com',
   },
   created: '2024-01-01T10:00:00Z',
@@ -98,9 +97,6 @@ describe('CommentEntry Component', () => {
   const defaultProps = {
     comment: mockCommentStates.standard,
     isFocused: false,
-    onClick: vi.fn(),
-    onCommentRef: vi.fn(),
-    onCommentHover: vi.fn(),
   };
 
   beforeEach(() => {
@@ -396,19 +392,26 @@ describe('CommentEntry Component', () => {
     });
 
     it('should stop event propagation when clicking textarea in edit mode', async () => {
-      const onClick = vi.fn();
-      renderWithProviders(<CommentEntry {...defaultProps} onClick={onClick} />);
+      const clickHandler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
 
       await userEvent.click(screen.getByText('Edit'));
 
-      // Clear the onClick calls that happened during entering edit mode
-      onClick.mockClear();
+      // Clear any browse:click emissions that happened during entering edit mode
+      clickHandler.mockClear();
 
       const textarea = screen.getByRole('textbox');
       await userEvent.click(textarea);
 
-      // onClick should not be called for textarea click due to stopPropagation
-      expect(onClick).not.toHaveBeenCalled();
+      // browse:click should not be emitted for textarea click due to stopPropagation
+      expect(clickHandler).not.toHaveBeenCalled();
+
+      subscription.unsubscribe();
     });
 
     it('should update text in textarea', async () => {
@@ -484,14 +487,24 @@ describe('CommentEntry Component', () => {
       expect(screen.getByText('This is a test comment')).toBeInTheDocument();
     });
 
-    it('should not call onUpdate when cancel is clicked', async () => {
-      const onUpdate = vi.fn();
-      renderWithProviders(<CommentEntry {...defaultProps} onUpdate={onUpdate} />);
+    it('should not emit any update when cancel is clicked', async () => {
+      const clickHandler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
 
       await userEvent.click(screen.getByText('Edit'));
+      clickHandler.mockClear();
+
       await userEvent.click(screen.getByText('Cancel'));
 
-      expect(onUpdate).not.toHaveBeenCalled();
+      // Cancel discards the edit without emitting any event
+      expect(clickHandler).not.toHaveBeenCalled();
+
+      subscription.unsubscribe();
     });
   });
 

package/src/components/resource/panels/__tests__/CommentsPanel.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 { CommentsPanel } from '../CommentsPanel';
-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 {
@@ -68,7 +68,7 @@ vi.mock('@semiont/core', async () => {
 
 // Mock CommentEntry component to simplify testing
 vi.mock('../CommentEntry', () => ({
-  CommentEntry: ({ comment, onClick, onCommentRef, onCommentHover }: any) => (
+  CommentEntry: ({ comment, onClick, onCommentHover }: any) => (
     <div
       data-testid={`comment-${comment.id}`}
       onClick={() => onClick()}
@@ -91,10 +91,11 @@ const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTarg
 // Test data fixtures
 const createMockComment = (id: string, start: number, end: number): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation: 'commenting',
   creator: {
+    '@type': 'Person',
     name: `user${id}@example.com`,
   },
   created: `2024-01-0${id.slice(-1)}T10:00:00Z`,

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

@@ -1,12 +1,10 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
-import { screen, fireEvent } from '@testing-library/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 createMockHighlight = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'highlight-1',
+  id: 'highlight-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'highlighting',
   creator: {
+    '@type': 'Person',
     name: 'alice@example.com',
   },
   created: '2024-06-15T12:00:00Z',

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -16,9 +16,8 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../../../test-utils';
 import { HighlightPanel } from '../HighlightPanel';
-import type { components } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock translations - simulates useTranslations('HighlightPanel')
 // The mock receives keys like 'title', 'noHighlights', etc. and returns translated strings
@@ -55,7 +54,9 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     mockAnnotations = [
       {
-        id: 'highlight-1',
+        '@context': 'http://www.w3.org/ns/anno.jsonld',
+        type: 'Annotation',
+        id: 'highlight-1' as AnnotationId,
         motivation: 'highlighting',
         target: {
           source: 'resource-1',
@@ -78,7 +79,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
             percentage: 30,
             message: 'Analyzing text for highlights...',
           }}
@@ -129,7 +130,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={false}
           progress={{
-            status: 'complete',
+            stage: 'complete',
             percentage: 100,
             message: 'Complete! Created 14 highlights',
           }}
@@ -150,7 +151,8 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
             requestParams: [
               { label: 'Instructions', value: 'Find important points' },
@@ -203,7 +205,8 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
           }}
           annotateMode={true}
@@ -219,7 +222,8 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
           }}
           annotateMode={false}
@@ -254,7 +258,8 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={false}
           progress={{
-            status: 'complete',
+            stage: 'complete',
+            percentage: 100,
             message: 'Done!',
           }}
           annotateMode={true}
@@ -274,7 +279,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'started',
+            stage: 'started',
             percentage: 0,
             message: 'Starting...',
           }}
@@ -291,7 +296,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
             percentage: 50,
             message: 'Analyzing...',
           }}
@@ -309,7 +314,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={false}
           progress={{
-            status: 'complete',
+            stage: 'complete',
             percentage: 100,
             message: 'Complete!',
           }}
@@ -330,7 +335,8 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
           }}
           annotateMode={true}

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

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -12,7 +11,7 @@ type SemiontResource = components['schemas']['ResourceDescriptor'];
 vi.mock('@codemirror/view', () => {
   class MockEditorView {
     destroy = vi.fn();
-    constructor(config: any) {
+    constructor() {
       // Store config if needed for assertions
     }
     static editable = { of: vi.fn() };
@@ -55,7 +54,6 @@ vi.mock('../../../lib/codemirror-json-theme', () => ({
 // Mock useLineNumbers hook (must be before import)
 vi.mock('@/hooks/useLineNumbers');
 
-import { EditorView } from '@codemirror/view';
 import { useLineNumbers } from '@/hooks/useLineNumbers';
 
 // Test data fixtures

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

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

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

@@ -1,14 +1,12 @@
 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 { BindNamespace } from '@semiont/sdk';
 import type { RouteBuilder } from '../../../../contexts/RoutingContext';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Stable mock functions defined outside vi.mock to avoid re-render loops
 const mockGetAnnotationExactText = vi.fn();
@@ -54,7 +52,7 @@ import { ReferenceEntry } from '../ReferenceEntry';
 
 const createMockReference = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'ref-1',
+  id: 'ref-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'linking',
   created: '2024-06-15T12:00:00Z',
@@ -75,7 +73,9 @@ const createMockReference = (overrides?: Partial<Annotation>): Annotation => ({
 
 const mockRoutes: RouteBuilder = {
   resourceDetail: vi.fn((id: string) => `/resources/${id}`),
-  resourceList: vi.fn(() => '/resources'),
+  userProfile: vi.fn((id: string) => `/users/${id}`),
+  search: vi.fn((query: string) => `/search?q=${query}`),
+  home: vi.fn(() => '/'),
 };
 
 describe('ReferenceEntry', () => {

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach, vi } 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 { ReferencesPanel } from '../ReferencesPanel';
@@ -316,7 +316,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...defaultProps}
           isAssisting={true}
-          progress={{ completedEntityTypes: [] }}
+          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
         />
       );
 
@@ -326,6 +326,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -366,7 +369,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...defaultProps}
           isAssisting={true}
-          progress={{ completedEntityTypes: [] }}
+          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
         />
       );
 
@@ -375,6 +378,9 @@ describe('ReferencesPanel Component', () => {
 
     it('should pass progress data to widget', () => {
       const progress = {
+        stage: 'complete',
+        percentage: 100,
+        message: 'Annotation complete',
         completedEntityTypes: [
           { entityType: 'Person', foundCount: 5 },
           { entityType: 'Organization', foundCount: 3 },
@@ -399,7 +405,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...defaultProps}
           isAssisting={true}
-          progress={{ completedEntityTypes: [] }}
+          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
         />
       );
 
@@ -412,7 +418,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...defaultProps}
           isAssisting={true}
-          progress={{ completedEntityTypes: [] }}
+          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
         />
       );
 
@@ -428,6 +434,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [
               { entityType: 'Person', foundCount: 5 },
               { entityType: 'Organization', foundCount: 3 },
@@ -455,6 +464,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -472,6 +484,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -489,6 +504,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -509,6 +527,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -529,6 +550,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [],
           }}
         />
@@ -552,7 +576,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...defaultProps}
           isAssisting={true}
-          progress={{ completedEntityTypes: [] }}
+          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
         />
       );
 
@@ -566,7 +590,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...defaultProps}
           isAssisting={true}
-          progress={{ completedEntityTypes: [] }}
+          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
         />
       );
 
@@ -579,6 +603,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -601,6 +628,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
           }}
         />
@@ -692,6 +722,9 @@ describe('ReferencesPanel Component', () => {
           {...defaultProps}
           isAssisting={false}
           progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
             completedEntityTypes: [{ entityType: 'Person', foundCount: 0 }],
           }}
         />

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

@@ -295,7 +295,7 @@ describe('ResourceInfoPanel Component', () => {
       renderWithEventBus(
         <ResourceInfoPanel
           {...defaultProps}
-          wasAttributedTo={{ name: 'Alice', '@id': 'https://example.org/alice' }}
+          wasAttributedTo={{ '@type': 'Person', name: 'Alice', '@id': 'https://example.org/alice' }}
         />
       );
       expect(screen.getByText('Attributed to')).toBeInTheDocument();
@@ -307,8 +307,8 @@ describe('ResourceInfoPanel Component', () => {
         <ResourceInfoPanel
           {...defaultProps}
           wasAttributedTo={[
-            { name: 'Alice' },
-            { name: 'Bob' },
+            { '@type': 'Person', name: 'Alice' },
+            { '@type': 'Person', name: 'Bob' },
           ]}
         />
       );