@semiont/react-ui 0.2.45 → 0.3.0

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

@@ -11,7 +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 { resourceUri } from '@semiont/core';
+import { resourceId } from '@semiont/core';
 import type { components } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
@@ -40,16 +40,24 @@ vi.mock('../../../lib/browser-pdfjs', () => ({
 }));
 
 describe('PdfAnnotationCanvas', () => {
-  const mockResourceUri = resourceUri('http://example.com/resources/123');
+  const mockResourceId = resourceId('123');
 
   beforeEach(() => {
     vi.clearAllMocks();
+
+    // jsdom doesn't fire image onLoad or support clientWidth/clientHeight.
+    // Mock requestAnimationFrame to run callbacks synchronously and
+    // provide dimensions on the image element so the SVG overlay renders.
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
   });
 
   test('renders loading state initially', () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceUri}
+        resourceUri={mockResourceId}
         drawingMode={null}
       />
     );
@@ -60,7 +68,7 @@ describe('PdfAnnotationCanvas', () => {
   test('renders page navigation controls after loading', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceUri}
+        resourceUri={mockResourceId}
         drawingMode={null}
       />
     );
@@ -76,7 +84,7 @@ describe('PdfAnnotationCanvas', () => {
   test('previous button is disabled on first page', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceUri}
+        resourceUri={mockResourceId}
         drawingMode={null}
       />
     );
@@ -92,7 +100,7 @@ describe('PdfAnnotationCanvas', () => {
   test('next button is disabled on last page', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceUri}
+        resourceUri={mockResourceId}
         drawingMode={null}
       />
     );
@@ -124,7 +132,7 @@ describe('PdfAnnotationCanvas', () => {
         id: 'ann-1',
         body: [],
         target: {
-          source: mockResourceUri,
+          source: mockResourceId,
           selector: {
             type: 'FragmentSelector',
             value: 'page=1&viewrect=100,200,150,100',
@@ -138,7 +146,7 @@ describe('PdfAnnotationCanvas', () => {
 
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceUri}
+        resourceUri={mockResourceId}
         existingAnnotations={mockAnnotations}
         drawingMode={null}
       />
@@ -148,12 +156,26 @@ describe('PdfAnnotationCanvas', () => {
       expect(screen.getByText(/page 1 of 3/i)).toBeInTheDocument();
     });
 
-    // Annotation should be rendered in SVG
-    const svg = document.querySelector('.semiont-pdf-annotation-canvas__svg');
-    expect(svg).toBeInTheDocument();
+    // jsdom doesn't fire image onLoad or provide clientWidth/clientHeight.
+    // Wait for the image element to appear, then simulate load with dimensions.
+    await waitFor(() => {
+      const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+      expect(img).toBeInTheDocument();
+    });
+
+    const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 612, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 792, configurable: true });
+    fireEvent.load(img);
+
+    await waitFor(() => {
+      // Annotation should be rendered in SVG
+      const svg = document.querySelector('.semiont-pdf-annotation-canvas__svg');
+      expect(svg).toBeInTheDocument();
 
-    const rects = svg?.querySelectorAll('rect');
-    expect(rects?.length).toBeGreaterThan(0);
+      const rects = svg?.querySelectorAll('rect');
+      expect(rects?.length).toBeGreaterThan(0);
+    });
   });
 
   test('emits annotate:requested via eventBus when drawing with sufficient drag', async () => {
@@ -167,7 +189,7 @@ describe('PdfAnnotationCanvas', () => {
 
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceUri}
+        resourceUri={mockResourceId}
         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 { resourceUri as toResourceUri } from '@semiont/core';
+import { resourceId as toResourceId } from '@semiont/core';
 import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
@@ -247,7 +247,7 @@ export function AnnotateView({
               {resourceUri && (
                 <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
                   <PdfAnnotationCanvas
-                    resourceUri={toResourceUri(resourceUri)}
+                    resourceUri={toResourceId(resourceUri)}
                     existingAnnotations={allAnnotations}
                     drawingMode={selectedMotivation ? selectedShape : null}
                     selectedMotivation={selectedMotivation}
@@ -277,7 +277,7 @@ export function AnnotateView({
           <div className="semiont-annotate-view__content">
             {resourceUri && (
               <SvgDrawingCanvas
-                resourceUri={toResourceUri(resourceUri)}
+                resourceUri={toResourceId(resourceUri)}
                 existingAnnotations={allAnnotations}
                 drawingMode={selectedMotivation ? selectedShape : null}
                 selectedMotivation={selectedMotivation}
@@ -300,7 +300,7 @@ export function AnnotateView({
             </p>
             {resourceUri && (
               <a
-                href={resourceUri}
+                href={`/api/resources/${resourceUri}`}
                 download
                 className="semiont-button semiont-button--primary"
               >

package/src/components/resource/AnnotationHistory.tsx

@@ -4,13 +4,13 @@ import React, { useEffect, useRef } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
 import type { RouteBuilder, LinkComponentProps } from '../../contexts/RoutingContext';
 import { useResources } from '../../lib/api-hooks';
-import type { ResourceUri } from '@semiont/core';
+import type { ResourceId } from '@semiont/core';
 import type { StoredEvent } from '@semiont/core';
 import { getAnnotationUriFromEvent } from '@semiont/core';
 import { HistoryEvent } from './HistoryEvent';
 
 interface Props {
-  rUri: ResourceUri;
+  rUri: ResourceId;
   hoveredAnnotationId?: string | null;
   onEventHover?: (annotationId: string | null) => void;
   onEventClick?: (annotationId: string | null) => void;

package/src/components/resource/BrowseView.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { resourceUri as toResourceUri } from '@semiont/core';
+import { resourceId as toResourceId } from '@semiont/core';
 import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { createHoverHandlers } from '../../hooks/useBeckonFlow';
@@ -240,7 +240,7 @@ export const BrowseView = memo(function BrowseView({
             <div ref={containerRef} className="semiont-browse-view__content">
               <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
                 <PdfAnnotationCanvas
-                  resourceUri={toResourceUri(resourceUri)}
+                  resourceUri={toResourceId(resourceUri)}
                   existingAnnotations={allAnnotations}
                   drawingMode={null}
                   selectedMotivation={null}
@@ -264,7 +264,7 @@ export const BrowseView = memo(function BrowseView({
           />
           <div ref={containerRef} className="semiont-browse-view__content">
             <ImageViewer
-              resourceUri={resourceUri as any}
+              resourceUri={toResourceId(resourceUri)}
               mimeType={mimeType}
               alt="Resource content"
             />
@@ -280,7 +280,7 @@ export const BrowseView = memo(function BrowseView({
               Preview not available for {mimeType}
             </p>
             <a
-              href={resourceUri}
+              href={`/api/resources/${resourceUri}`}
               download
               className="semiont-button semiont-button--primary"
             >

package/src/components/resource/ResourceViewer.tsx

@@ -7,7 +7,7 @@ import { BrowseView } from './BrowseView';
 import { PopupContainer } from '../annotation-popups/SharedPopupElements';
 import { JsonLdView } from '../annotation-popups/JsonLdView';
 import type { components } from '@semiont/core';
-import { resourceUri } from '@semiont/core';
+import { resourceId as toResourceId, annotationId as toAnnotationId } from '@semiont/core';
 import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/api-client';
 import { useEventBus } from '../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
@@ -84,7 +84,7 @@ export function ResourceViewer({
   if (!resource['@id']) {
     throw new Error('Resource has no @id');
   }
-  const rUri = resourceUri(resource['@id']);
+  const rUri = toResourceId(resource['@id']);
 
   // Helper to get MIME type from resource
   const getMimeType = (): string => {
@@ -251,7 +251,7 @@ export function ResourceViewer({
 
   // Handle deleting annotations - emit event instead of direct call
   const handleDeleteAnnotation = useCallback((id: string) => {
-    eventBus.get('mark:delete').next({ annotationId: id });
+    eventBus.get('mark:delete').next({ annotationId: toAnnotationId(id) });
   }, []); // eventBus is stable
 
   // Handle annotation clicks - memoized
@@ -279,11 +279,8 @@ export function ResourceViewer({
     if (selectedClick === 'follow' && isReference(annotation)) {
       const bodySource = getBodySource(annotation.body);
       if (bodySource) {
-        // Navigate to the linked resource - emits 'browse:external-navigate' event
-        const resourceId = bodySource.split('/resources/')[1];
-        if (resourceId) {
-          navigate(`/know/resource/${resourceId}`, { resourceId });
-        }
+        // bodySource is already a bare resource ID
+        navigate(`/know/resource/${bodySource}`, { resourceId: bodySource });
       }
       return;
     }

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

@@ -4,7 +4,7 @@ import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { AnnotationHistory } from '../AnnotationHistory';
 import { renderWithProviders } from '../../../test-utils';
-import type { StoredEvent, ResourceUri } from '@semiont/core';
+import type { StoredEvent, ResourceId } from '@semiont/core';
 
 // Mock @semiont/core - must use importOriginal to preserve EventBus etc.
 vi.mock('@semiont/core', async (importOriginal) => {
@@ -52,7 +52,7 @@ vi.mock('../HistoryEvent', () => ({
 import { getAnnotationUriFromEvent } from '@semiont/core';
 const mockGetAnnotationUri = getAnnotationUriFromEvent as ReturnType<typeof vi.fn>;
 
-const testRUri = 'http://localhost/resources/res-1' as ResourceUri;
+const testRId = 'res-1' as ResourceId;
 
 function makeStoredEvent(id: string, type: string, seq: number, overrides: Record<string, any> = {}): StoredEvent {
   return {
@@ -60,7 +60,7 @@ function makeStoredEvent(id: string, type: string, seq: number, overrides: Recor
       id,
       type,
       timestamp: '2026-03-06T12:00:00Z',
-      resourceId: 'http://localhost/resources/res-1',
+      resourceId: 'res-1',
       userId: 'user-1',
       version: 1,
       payload: {},
@@ -90,7 +90,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -105,7 +105,7 @@ describe('AnnotationHistory', () => {
 
     const { container } = renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -119,7 +119,7 @@ describe('AnnotationHistory', () => {
 
     const { container } = renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -138,7 +138,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -169,7 +169,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -194,7 +194,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         hoveredAnnotationId={annotationUri}
         Link={MockLink}
         routes={mockRoutes}
@@ -215,7 +215,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         hoveredAnnotationId="http://localhost/annotations/ann-1"
         Link={MockLink}
         routes={mockRoutes}
@@ -234,7 +234,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -255,7 +255,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         onEventClick={onEventClick}
         onEventHover={onEventHover}
         Link={MockLink}
@@ -276,7 +276,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -298,7 +298,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -318,7 +318,7 @@ describe('AnnotationHistory', () => {
 
     renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />
@@ -336,7 +336,7 @@ describe('AnnotationHistory', () => {
 
     const { container } = renderWithProviders(
       <AnnotationHistory
-        rUri={testRUri}
+        rUri={testRId}
         Link={MockLink}
         routes={mockRoutes}
       />

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

@@ -27,7 +27,7 @@ vi.mock('@semiont/api-client', async () => {
       return 'unsupported';
     }),
     isPdfMimeType: vi.fn((mimeType: string) => mimeType === 'application/pdf'),
-    resourceUri: vi.fn((uri: string) => uri),
+    resourceId: vi.fn((id: string) => id),
     getExactText: vi.fn(() => 'exact text'),
     getTextPositionSelector: vi.fn(() => ({ start: 0, end: 10 })),
     getTargetSelector: vi.fn(() => ({ type: 'TextPositionSelector', start: 0, end: 10 })),
@@ -200,7 +200,7 @@ describe('BrowseView Component', () => {
   const defaultProps = {
     content: '# Test Content\n\nThis is test markdown content.',
     mimeType: 'text/markdown',
-    resourceUri: 'http://localhost:8080/resources/test-resource',
+    resourceUri: 'test-resource',
     annotations: {
       highlights: [],
       references: [],

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

@@ -55,7 +55,7 @@ function makeStoredEvent(overrides: Partial<StoredEvent['event']> = {}): StoredE
       id: 'evt-1',
       type: 'resource.created',
       timestamp: '2026-03-06T12:00:00Z',
-      resourceId: 'http://localhost/resources/res-1',
+      resourceId: 'res-1',
       userId: 'user-1',
       version: 1,
       payload: { name: 'Test', format: 'text/plain', contentChecksum: 'abc', creationMethod: 'upload' },

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

@@ -31,7 +31,7 @@ vi.mock('../../../hooks/useObservableBrowse', () => ({
 
 const mockResource: SemiontResource & { content: string } = {
   '@context': 'https://www.w3.org/ns/activitystreams',
-  '@id': 'http://example.com/resources/test-123',
+  '@id': 'test-123',
   name: 'Test Document',
   created: '2024-01-01T00:00:00Z',
   entityTypes: [],

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
 import type { components } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
@@ -20,6 +20,7 @@ interface AssessmentEntryProps {
   assessment: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
+  ref?: Ref<HTMLDivElement>;
 }
 
 function formatRelativeTime(isoString: string): string {
@@ -67,15 +68,12 @@ function getAssessmentText(annotation: Annotation): string | null {
   return null;
 }
 
-export const AssessmentEntry = forwardRef<HTMLDivElement, AssessmentEntryProps>(
-  function AssessmentEntry(
-    {
-      assessment,
-      isFocused,
-      isHovered = false,
-    },
-    ref
-  ) {
+export function AssessmentEntry({
+  assessment,
+  isFocused,
+  isHovered = false,
+  ref,
+}: AssessmentEntryProps) {
   const eventBus = useEventBus();
   const hoverProps = useHoverEmitter(assessment.id);
 
@@ -113,4 +111,4 @@ export const AssessmentEntry = forwardRef<HTMLDivElement, AssessmentEntryProps>(
       </div>
     </div>
   );
-});
+}

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

@@ -141,7 +141,7 @@ export function AssessmentPanel({
         ? [{ type: 'TextualBody' as const, value: newAssessmentText, purpose: 'assessing' as const }]
         : [];
 
-      eventBus.get('mark:create').next({
+      eventBus.get('mark:submit').next({
         motivation: 'assessing',
         selector: pendingAnnotation.selector,
         body,

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, useRef, useImperativeHandle, type Ref } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components } from '@semiont/core';
 import { getAnnotationExactText, getCommentText } from '@semiont/api-client';
@@ -14,6 +14,7 @@ interface CommentEntryProps {
   isFocused: boolean;
   isHovered?: boolean;
   annotateMode?: boolean;
+  ref?: Ref<HTMLDivElement>;
 }
 
 function formatRelativeTime(isoString: string): string {
@@ -33,16 +34,13 @@ function formatRelativeTime(isoString: string): string {
   return date.toLocaleDateString();
 }
 
-export const CommentEntry = forwardRef<HTMLDivElement, CommentEntryProps>(
-  function CommentEntry(
-    {
-      comment,
-      isFocused,
-      isHovered = false,
-      annotateMode = true,
-    },
-    ref
-  ) {
+export function CommentEntry({
+  comment,
+  isFocused,
+  isHovered = false,
+  annotateMode = true,
+  ref,
+}: CommentEntryProps) {
   const t = useTranslations('CommentsPanel');
   const eventBus = useEventBus();
   const hoverProps = useHoverEmitter(comment.id);
@@ -156,4 +154,4 @@ export const CommentEntry = forwardRef<HTMLDivElement, CommentEntryProps>(
       )}
     </div>
   );
-});
+}

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

@@ -167,7 +167,7 @@ export function CommentsPanel({
 
   const handleSaveNewComment = () => {
     if (newCommentText.trim() && pendingAnnotation) {
-      eventBus.get('mark:create').next({
+      eventBus.get('mark:submit').next({
         motivation: 'commenting',
         selector: pendingAnnotation.selector,
         body: [{ type: 'TextualBody', value: newCommentText, purpose: 'commenting' }],

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
 import type { components } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
@@ -12,6 +12,7 @@ interface HighlightEntryProps {
   highlight: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
+  ref?: Ref<HTMLDivElement>;
 }
 
 function formatRelativeTime(isoString: string): string {
@@ -31,15 +32,12 @@ function formatRelativeTime(isoString: string): string {
   return date.toLocaleDateString();
 }
 
-export const HighlightEntry = forwardRef<HTMLDivElement, HighlightEntryProps>(
-  function HighlightEntry(
-    {
-      highlight,
-      isFocused,
-      isHovered = false,
-    },
-    ref
-  ) {
+export function HighlightEntry({
+  highlight,
+  isFocused,
+  isHovered = false,
+  ref,
+}: HighlightEntryProps) {
   const eventBus = useEventBus();
   const hoverProps = useHoverEmitter(highlight.id);
 
@@ -69,4 +67,4 @@ export const HighlightEntry = forwardRef<HTMLDivElement, HighlightEntryProps>(
       </div>
     </div>
   );
-});
+}

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

@@ -129,10 +129,10 @@ export function HighlightPanel({
   });
 
   // Highlights auto-create: when pendingAnnotation arrives with highlighting motivation,
-  // immediately emit mark:create event
+  // immediately emit mark:submit event
   useEffect(() => {
     if (pendingAnnotation && pendingAnnotation.motivation === 'highlighting') {
-      eventBus.get('mark:create').next({
+      eventBus.get('mark:submit').next({
         motivation: 'highlighting',
         selector: pendingAnnotation.selector,
         body: [],