@semiont/react-ui 0.2.46 → 0.3.1

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

@@ -53,20 +53,21 @@ import { ReferenceEntry } from '../ReferenceEntry';
 
 const createMockReference = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'http://example.com/annotations/ref-1',
+  id: 'ref-1',
   type: 'Annotation',
   motivation: 'linking',
   created: '2024-06-15T12:00:00Z',
   modified: '2024-06-15T12:00:00Z',
   target: {
-    source: 'http://example.com/resources/resource-1',
+    source: 'resource-1',
     selector: {
       type: 'TextQuoteSelector',
       exact: 'referenced text',
     },
   },
   body: {
-    source: 'http://example.com/resources/linked-doc',
+    type: 'SpecificResource',
+    source: 'linked-doc',
   },
   ...overrides,
 });
@@ -124,7 +125,7 @@ describe('ReferenceEntry', () => {
 
     it('should show link icon when reference is resolved', () => {
       mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
+      mockGetBodySource.mockReturnValue('linked-doc');
 
       const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
 
@@ -161,7 +162,7 @@ describe('ReferenceEntry', () => {
 
     it('should render resolved document name when enriched', () => {
       mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
+      mockGetBodySource.mockReturnValue('linked-doc');
 
       const enrichedRef = {
         ...createMockReference(),
@@ -247,7 +248,7 @@ describe('ReferenceEntry', () => {
       await userEvent.click(entry);
 
       expect(clickHandler).toHaveBeenCalledWith({
-        annotationId: 'http://example.com/annotations/ref-1',
+        annotationId: 'ref-1',
         motivation: 'linking',
       });
 
@@ -255,57 +256,57 @@ describe('ReferenceEntry', () => {
     });
   });
 
-  describe('Resolved reference actions', () => {
-    it('should show open button when resolved', () => {
+  describe('Status icon — resolved reference', () => {
+    it('should navigate on 🔗 icon click', async () => {
       mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
+      mockGetBodySource.mockReturnValue('linked-doc');
 
       const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
 
-      const openButton = container.querySelector('button[title="ReferencesPanel.open"]');
-      expect(openButton).toBeInTheDocument();
+      const icon = container.querySelector('.semiont-reference-icon')!;
+      await userEvent.click(icon);
+
+      expect(mockRoutes.resourceDetail).toHaveBeenCalledWith('linked-doc');
+      expect(mockNavigate).toHaveBeenCalledWith('/resources/linked-doc', { resourceId: 'linked-doc' });
+    });
+
+    it('should have clickable class when resolved', () => {
+      mockIsBodyResolved.mockReturnValue(true);
+      mockGetBodySource.mockReturnValue('linked-doc');
+
+      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+
+      const icon = container.querySelector('.semiont-reference-icon');
+      expect(icon).toHaveClass('semiont-reference-icon--clickable');
     });
 
-    it('should show unlink button when resolved and in annotate mode', () => {
+    it('should show hover-reveal unlink button in annotate mode', () => {
       mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
+      mockGetBodySource.mockReturnValue('linked-doc');
 
       const { container } = renderWithProviders(
         <ReferenceEntry {...defaultProps} annotateMode={true} />
       );
 
-      const unlinkButton = container.querySelector('button[title="ReferencesPanel.unlink"]');
+      const unlinkButton = container.querySelector('.semiont-reference-unlink');
       expect(unlinkButton).toBeInTheDocument();
     });
 
     it('should not show unlink button when not in annotate mode', () => {
       mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
+      mockGetBodySource.mockReturnValue('linked-doc');
 
       const { container } = renderWithProviders(
         <ReferenceEntry {...defaultProps} annotateMode={false} />
       );
 
-      const unlinkButton = container.querySelector('button[title="ReferencesPanel.unlink"]');
+      const unlinkButton = container.querySelector('.semiont-reference-unlink');
       expect(unlinkButton).not.toBeInTheDocument();
     });
 
-    it('should navigate on open click', async () => {
-      mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
-
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
-
-      const openButton = container.querySelector('button[title="ReferencesPanel.open"]')!;
-      await userEvent.click(openButton);
-
-      expect(mockRoutes.resourceDetail).toHaveBeenCalledWith('linked-doc');
-      expect(mockNavigate).toHaveBeenCalledWith('/resources/linked-doc', { resourceId: 'linked-doc' });
-    });
-
     it('should emit bind:update-body on unlink click', async () => {
       mockIsBodyResolved.mockReturnValue(true);
-      mockGetBodySource.mockReturnValue('http://example.com/resources/linked-doc');
+      mockGetBodySource.mockReturnValue('linked-doc');
       const unlinkHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
@@ -315,11 +316,11 @@ describe('ReferenceEntry', () => {
 
       const subscription = eventBus!.get('bind:update-body').subscribe(unlinkHandler);
 
-      const unlinkButton = container.querySelector('button[title="ReferencesPanel.unlink"]')!;
+      const unlinkButton = container.querySelector('.semiont-reference-unlink')!;
       await userEvent.click(unlinkButton);
 
       expect(unlinkHandler).toHaveBeenCalledWith({
-        annotationUri: 'http://example.com/annotations/ref-1',
+        annotationId: 'ref-1',
         resourceId: 'resource-1',
         operations: [{ op: 'remove' }],
       });
@@ -328,110 +329,72 @@ describe('ReferenceEntry', () => {
     });
   });
 
-  describe('Stub reference actions', () => {
-    it('should show generate, search, and create buttons in annotate mode', () => {
-      mockIsBodyResolved.mockReturnValue(false);
-
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />
-      );
-
-      expect(container.querySelector('button[title="ReferencesPanel.generate"]')).toBeInTheDocument();
-      expect(container.querySelector('button[title="ReferencesPanel.find"]')).toBeInTheDocument();
-      expect(container.querySelector('button[title="ReferencesPanel.create"]')).toBeInTheDocument();
-    });
-
-    it('should not show stub actions when not in annotate mode', () => {
+  describe('Status icon — stub reference', () => {
+    it('should emit bind:initiate on ❓ icon click in annotate mode', async () => {
       mockIsBodyResolved.mockReturnValue(false);
-
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={false} />
-      );
-
-      expect(container.querySelector('button[title="ReferencesPanel.generate"]')).not.toBeInTheDocument();
-      expect(container.querySelector('button[title="ReferencesPanel.find"]')).not.toBeInTheDocument();
-      expect(container.querySelector('button[title="ReferencesPanel.create"]')).not.toBeInTheDocument();
-    });
-
-    it('should emit yield:modal-open on generate click', async () => {
-      mockIsBodyResolved.mockReturnValue(false);
-      const generateHandler = vi.fn();
+      mockGetEntityTypes.mockReturnValue(['Person']);
+      const initiateHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
         <ReferenceEntry {...defaultProps} annotateMode={true} />,
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('yield:modal-open').subscribe(generateHandler);
+      const subscription = eventBus!.get('bind:initiate').subscribe(initiateHandler);
 
-      const generateButton = container.querySelector('button[title="ReferencesPanel.generate"]')!;
-      await userEvent.click(generateButton);
+      const icon = container.querySelector('.semiont-reference-icon')!;
+      await userEvent.click(icon);
 
-      expect(generateHandler).toHaveBeenCalledWith({
-        annotationUri: 'http://example.com/annotations/ref-1',
-        resourceUri: 'http://example.com/resources/resource-1',
+      expect(initiateHandler).toHaveBeenCalledWith({
+        annotationId: 'ref-1',
+        resourceId: 'resource-1',
         defaultTitle: 'referenced text',
+        entityTypes: ['Person'],
       });
 
       subscription.unsubscribe();
     });
 
-    it('should emit bind:link on search click', async () => {
+    it('should have clickable class in annotate mode', () => {
       mockIsBodyResolved.mockReturnValue(false);
-      const searchHandler = vi.fn();
 
-      const { container, eventBus } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />,
-        { returnEventBus: true }
+      const { container } = renderWithProviders(
+        <ReferenceEntry {...defaultProps} annotateMode={true} />
       );
 
-      const subscription = eventBus!.get('bind:link').subscribe(searchHandler);
+      const icon = container.querySelector('.semiont-reference-icon');
+      expect(icon).toHaveClass('semiont-reference-icon--clickable');
+    });
 
-      const searchButton = container.querySelector('button[title="ReferencesPanel.find"]')!;
-      await userEvent.click(searchButton);
+    it('should not be clickable in browse mode', () => {
+      mockIsBodyResolved.mockReturnValue(false);
 
-      expect(searchHandler).toHaveBeenCalledWith({
-        annotationUri: 'http://example.com/annotations/ref-1',
-        searchTerm: 'referenced text',
-      });
+      const { container } = renderWithProviders(
+        <ReferenceEntry {...defaultProps} annotateMode={false} />
+      );
 
-      subscription.unsubscribe();
+      const icon = container.querySelector('.semiont-reference-icon');
+      expect(icon).not.toHaveClass('semiont-reference-icon--clickable');
     });
 
-    it('should emit bind:create-manual on create click', async () => {
+    it('should not emit bind:initiate on ❓ icon click in browse mode', async () => {
       mockIsBodyResolved.mockReturnValue(false);
-      mockGetEntityTypes.mockReturnValue(['Person']);
-      const createHandler = vi.fn();
+      const initiateHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />,
+        <ReferenceEntry {...defaultProps} annotateMode={false} />,
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('bind:create-manual').subscribe(createHandler);
+      const subscription = eventBus!.get('bind:initiate').subscribe(initiateHandler);
 
-      const createButton = container.querySelector('button[title="ReferencesPanel.create"]')!;
-      await userEvent.click(createButton);
+      const icon = container.querySelector('.semiont-reference-icon')!;
+      await userEvent.click(icon);
 
-      expect(createHandler).toHaveBeenCalledWith({
-        annotationUri: 'http://example.com/annotations/ref-1',
-        title: 'referenced text',
-        entityTypes: ['Person'],
-      });
+      expect(initiateHandler).not.toHaveBeenCalled();
 
       subscription.unsubscribe();
     });
-
-    it('should set data-generating on generate button', () => {
-      mockIsBodyResolved.mockReturnValue(false);
-
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} isGenerating={true} />
-      );
-
-      const generateButton = container.querySelector('button[title="ReferencesPanel.generate"]');
-      expect(generateButton).toHaveAttribute('data-generating', 'true');
-    });
   });
 
   describe('data-type attribute', () => {

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

@@ -33,7 +33,7 @@ const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
   created: '2024-06-15T12:00:00Z',
   modified: '2024-06-15T12:00:00Z',
   target: {
-    source: 'http://example.com/resources/1',
+    source: '1',
     selector: {
       type: 'TextQuoteSelector',
       exact: 'some text',

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

@@ -542,7 +542,7 @@ describe('TaggingPanel Component', () => {
         />
       );
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/i });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/i });
       expect(annotateButton).toBeDisabled();
     });
 
@@ -557,7 +557,7 @@ describe('TaggingPanel Component', () => {
       const issueCheckbox = screen.getByLabelText(/Issue/);
       await userEvent.click(issueCheckbox);
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/i });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/i });
       expect(annotateButton).not.toBeDisabled();
     });
 
@@ -577,7 +577,7 @@ describe('TaggingPanel Component', () => {
       await userEvent.click(issueCheckbox);
       await userEvent.click(ruleCheckbox);
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/i });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/i });
       await userEvent.click(annotateButton);
 
       await waitFor(() => {

package/src/components/viewers/ImageViewer.tsx

@@ -1,18 +1,15 @@
-import type { ResourceUri } from '@semiont/core';
+import type { ResourceId } from '@semiont/core';
 
 interface ImageViewerProps {
-  resourceUri: ResourceUri;
+  resourceUri: ResourceId;
   mimeType: string;
   alt?: string;
 }
 
 export function ImageViewer({ resourceUri, alt = 'Resource image' }: ImageViewerProps) {
-  // Extract resource ID from W3C canonical URI (last segment of path)
-  const resourceId = resourceUri.split('/').pop();
-
   // Use Next.js API route proxy instead of direct backend call
   // This allows us to add authentication headers which <img> tags can't send
-  const imageUrl = `/api/resources/${resourceId}`;
+  const imageUrl = `/api/resources/${resourceUri}`;
 
   return (
     <div className="semiont-image-viewer">

package/src/components/viewers/__tests__/ImageViewer.test.tsx

@@ -4,11 +4,11 @@ import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';
 import { ImageViewer } from '../ImageViewer';
-import type { ResourceUri } from '@semiont/core';
+import type { ResourceId } from '@semiont/core';
 
 describe('ImageViewer', () => {
   const defaultProps = {
-    resourceUri: 'http://example.com/resources/abc-123' as ResourceUri,
+    resourceUri: 'abc-123' as ResourceId,
     mimeType: 'image/png',
   };
 
@@ -38,7 +38,7 @@ describe('ImageViewer', () => {
   it('should extract the last segment of the URI as resource ID', () => {
     renderWithProviders(
       <ImageViewer
-        resourceUri={'http://example.com/deep/path/to/resource-xyz' as ResourceUri}
+        resourceUri={'resource-xyz' as ResourceId}
         mimeType="image/jpeg"
       />
     );

package/src/features/admin-devops/__tests__/AdminDevOpsPage.test.tsx

@@ -285,7 +285,7 @@ describe('AdminDevOpsPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ theme: 'dark' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -296,7 +296,7 @@ describe('AdminDevOpsPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ showLineNumbers: true }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -307,7 +307,7 @@ describe('AdminDevOpsPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ activePanel: 'settings' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -318,7 +318,7 @@ describe('AdminDevOpsPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ context: 'simple' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -329,7 +329,7 @@ describe('AdminDevOpsPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ activePanel: 'help' }),
-        expect.anything()
+        undefined,
       );
     });
 

package/src/features/admin-exchange/__tests__/AdminExchangePage.test.tsx

@@ -0,0 +1,141 @@
+/**
+ * Tests for AdminExchangePage component
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AdminExchangePage } from '../components/AdminExchangePage';
+import type { AdminExchangePageProps } from '../components/AdminExchangePage';
+
+const createProps = (overrides?: Partial<AdminExchangePageProps>): AdminExchangePageProps => ({
+  onExport: vi.fn(),
+  isExporting: false,
+  onFileSelected: vi.fn(),
+  onImport: vi.fn(),
+  onCancelImport: vi.fn(),
+  selectedFile: null,
+  preview: null,
+  isImporting: false,
+  importPhase: null,
+  theme: 'light',
+  showLineNumbers: false,
+  activePanel: null,
+  translations: {
+    title: 'Backup & Restore',
+    subtitle: 'Back up and restore your knowledge base',
+    export: {
+      title: 'Backup',
+      description: 'Create a lossless backup',
+      exportButton: 'Create Backup',
+      exporting: 'Creating backup…',
+    },
+    import: {
+      title: 'Restore',
+      description: 'Restore from a backup',
+      dropzoneLabel: 'Drop a file here',
+      dropzoneActive: 'Drop to upload',
+      detectedFormat: 'Format',
+      statsPreview: 'Preview',
+      importButton: 'Restore',
+      importing: 'Restoring…',
+      importConfirmTitle: 'Confirm',
+      importConfirmMessage: 'Cannot undo.',
+      confirmImport: 'Proceed',
+      cancelImport: 'Cancel',
+    },
+    progress: {
+      phaseStarted: 'Starting…',
+      phaseEntityTypes: 'Entity types…',
+      phaseResources: 'Resources…',
+      phaseAnnotations: 'Annotations…',
+      phaseComplete: 'Complete',
+      phaseError: 'Failed',
+      hashChainValid: 'Hash valid',
+      hashChainInvalid: 'Hash invalid',
+      streams: 'Streams',
+      events: 'Events',
+      blobs: 'Blobs',
+    },
+  },
+  ToolbarPanels: () => <div data-testid="toolbar-panels" />,
+  Toolbar: () => <div data-testid="toolbar" />,
+  ...overrides,
+});
+
+describe('AdminExchangePage', () => {
+  it('renders page title and subtitle', () => {
+    render(<AdminExchangePage {...createProps()} />);
+    expect(screen.getByText('Backup & Restore')).toBeInTheDocument();
+    expect(screen.getByText('Back up and restore your knowledge base')).toBeInTheDocument();
+  });
+
+  it('renders ExportCard', () => {
+    render(<AdminExchangePage {...createProps()} />);
+    expect(screen.getByRole('heading', { name: 'Backup' })).toBeInTheDocument();
+    expect(screen.getByText('Create a lossless backup')).toBeInTheDocument();
+  });
+
+  it('renders ImportCard', () => {
+    render(<AdminExchangePage {...createProps()} />);
+    expect(screen.getByRole('heading', { name: 'Restore' })).toBeInTheDocument();
+    expect(screen.getByText('Restore from a backup')).toBeInTheDocument();
+  });
+
+  it('renders toolbar components', () => {
+    render(<AdminExchangePage {...createProps()} />);
+    expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
+    expect(screen.getByTestId('toolbar')).toBeInTheDocument();
+  });
+
+  it('does not render ImportProgress when importPhase is null', () => {
+    const { container } = render(<AdminExchangePage {...createProps()} />);
+    expect(container.querySelector('.semiont-exchange__progress')).not.toBeInTheDocument();
+  });
+
+  it('renders ImportProgress when importPhase is set', () => {
+    render(<AdminExchangePage {...createProps({ importPhase: 'started' })} />);
+    expect(screen.getByText('Starting…')).toBeInTheDocument();
+  });
+
+  it('renders ImportProgress with backup result on completion', () => {
+    render(<AdminExchangePage {...createProps({
+      importPhase: 'complete',
+      importResult: { stats: { streams: 5, events: 42, blobs: 3 }, hashChainValid: true },
+    })} />);
+    expect(screen.getByText('Complete')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('applies panel-open class when common panel is active', () => {
+    const { container } = render(<AdminExchangePage {...createProps({ activePanel: 'user' })} />);
+    expect(container.querySelector('.semiont-page--panel-open')).toBeInTheDocument();
+  });
+
+  it('does not apply panel-open class when no panel is active', () => {
+    const { container } = render(<AdminExchangePage {...createProps({ activePanel: null })} />);
+    expect(container.querySelector('.semiont-page--panel-open')).not.toBeInTheDocument();
+  });
+
+  it('passes theme to ToolbarPanels', () => {
+    const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
+    render(<AdminExchangePage {...createProps({ theme: 'dark', ToolbarPanels })} />);
+    expect(ToolbarPanels).toHaveBeenCalledWith(
+      expect.objectContaining({ theme: 'dark' }),
+      undefined,
+    );
+  });
+
+  it('passes context to Toolbar', () => {
+    const Toolbar = vi.fn(() => <div data-testid="toolbar" />);
+    render(<AdminExchangePage {...createProps({ Toolbar })} />);
+    expect(Toolbar).toHaveBeenCalledWith(
+      expect.objectContaining({ context: 'simple' }),
+      undefined,
+    );
+  });
+
+  it('renders cards in grid layout', () => {
+    const { container } = render(<AdminExchangePage {...createProps()} />);
+    expect(container.querySelector('.semiont-exchange__cards')).toBeInTheDocument();
+  });
+});

package/src/features/admin-exchange/__tests__/ExportCard.test.tsx

@@ -0,0 +1,41 @@
+/**
+ * Tests for ExportCard component
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ExportCard } from '../components/ExportCard';
+import type { ExportCardProps } from '../components/ExportCard';
+
+const createProps = (overrides?: Partial<ExportCardProps>): ExportCardProps => ({
+  onExport: vi.fn(),
+  isExporting: false,
+  translations: {
+    title: 'Backup',
+    description: 'Create a lossless backup',
+    exportButton: 'Create Backup',
+    exporting: 'Creating backup…',
+  },
+  ...overrides,
+});
+
+describe('ExportCard', () => {
+  it('renders title and description', () => {
+    render(<ExportCard {...createProps()} />);
+    expect(screen.getByRole('heading', { name: 'Backup' })).toBeInTheDocument();
+    expect(screen.getByText('Create a lossless backup')).toBeInTheDocument();
+  });
+
+  it('calls onExport when button is clicked', () => {
+    const onExport = vi.fn();
+    render(<ExportCard {...createProps({ onExport })} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Create Backup' }));
+    expect(onExport).toHaveBeenCalled();
+  });
+
+  it('disables button and shows exporting text when isExporting', () => {
+    render(<ExportCard {...createProps({ isExporting: true })} />);
+    const button = screen.getByRole('button', { name: 'Creating backup…' });
+    expect(button).toBeDisabled();
+  });
+});