@semiont/react-ui 0.2.43 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.2.43",
+  "version": "0.2.46",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

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 { resourceUri, 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';
@@ -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

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/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/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: [],

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

@@ -245,7 +245,7 @@ export function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType = pendingEntityTypes.join(',') || undefined;
-      eventBus.get('mark:create').next({
+      eventBus.get('mark:submit').next({
         motivation: 'linking',
         selector: pendingAnnotation.selector,
         body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],

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

@@ -274,7 +274,7 @@ export function TaggingPanel({
                   className="semiont-select"
                   onChange={(e) => {
                     if (e.target.value && pendingAnnotation) {
-                      eventBus.get('mark:create').next({
+                      eventBus.get('mark:submit').next({
                         motivation: 'tagging',
                         selector: pendingAnnotation.selector,
                         body: [

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['mark:create'] as const;
+      const panelEvents = ['mark:submit'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -359,7 +359,7 @@ describe('AssessmentPanel Component', () => {
       expect(textarea).toHaveFocus();
     });
 
-    it('should emit mark:createevent when save is clicked', async () => {
+    it('should emit mark:submitevent when save is clicked', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -379,7 +379,7 @@ describe('AssessmentPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'mark:create' &&
+          e.event === 'mark:submit' &&
           e.payload?.motivation === 'assessing' &&
           e.payload?.body?.[0]?.value === 'My assessment'
         )).toBe(true);
@@ -420,7 +420,7 @@ describe('AssessmentPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'mark:create' &&
+          e.event === 'mark:submit' &&
           e.payload?.motivation === 'assessing' &&
           Array.isArray(e.payload?.body) &&
           e.payload.body.length === 0

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['mark:create'] as const;
+      const panelEvents = ['mark:submit'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -396,7 +396,7 @@ describe('CommentsPanel Component', () => {
       expect(textarea).toHaveFocus();
     });
 
-    it('should emit mark:createevent when save is clicked', async () => {
+    it('should emit mark:submitevent when save is clicked', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -416,7 +416,7 @@ describe('CommentsPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'mark:create' &&
+          e.event === 'mark:submit' &&
           e.payload?.motivation === 'commenting' &&
           e.payload?.body?.[0]?.value === 'My new comment'
         )).toBe(true);

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['mark:create', 'mark:assist-request'] as const;
+      const panelEvents = ['mark:submit', 'mark:assist-request'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -354,7 +354,7 @@ describe('TaggingPanel Component', () => {
       expect(screen.getByText(/Select category/)).toBeInTheDocument();
     });
 
-    it('should emit mark:createevent when category is selected', async () => {
+    it('should emit mark:submitevent when category is selected', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -378,7 +378,7 @@ describe('TaggingPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'mark:create' &&
+          e.event === 'mark:submit' &&
           e.payload?.motivation === 'tagging' &&
           e.payload?.body?.[0]?.value === 'Issue' &&
           e.payload?.body?.[0]?.type === 'TextualBody'
@@ -407,7 +407,7 @@ describe('TaggingPanel Component', () => {
       await userEvent.selectOptions(categorySelect!, 'Rule');
 
       await waitFor(() => {
-        const createEvent = tracker.events.find(e => e.event === 'mark:create');
+        const createEvent = tracker.events.find(e => e.event === 'mark:submit');
         expect(createEvent).toBeDefined();
         const body: any[] = createEvent!.payload.body;
 

package/src/features/resource-viewer/__tests__/AnnotationCreationPending.test.tsx

@@ -1,5 +1,5 @@
 /**
- * Regression test: pendingAnnotation cleared after mark:createsucceeds
+ * Regression test: pendingAnnotation cleared after mark:submit succeeds
  *
  * Bug: handleAnnotationCreate in useMarkFlow called the API and emitted
  * mark:created, but never called setPendingAnnotation(null). The pending
@@ -110,7 +110,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     resetEventBusForTesting();
     createAnnotationSpy = vi
       .spyOn(SemiontApiClient.prototype, 'createAnnotation')
-      .mockResolvedValue({ annotation: MOCK_ANNOTATION } as any);
+      .mockResolvedValue({ annotationId: MOCK_ANNOTATION.id } as any);
   });
 
   afterEach(() => {
@@ -129,9 +129,9 @@ describe('Annotation creation clears pendingAnnotation', () => {
       expect(screen.getByTestId('pending-motivation')).toHaveTextContent('linking');
     });
 
-    // Emit mark:create(what ReferencesPanel does when user clicks "Create Reference")
+    // Emit mark:submit(what ReferencesPanel does when user clicks "Create Reference")
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'linking',
         selector: TEXT_SELECTOR,
         body: [{ type: 'TextualBody', value: 'Person', purpose: 'tagging' }],
@@ -158,7 +158,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'assessing',
         selector: SVG_SELECTOR,
         body: [{ type: 'TextualBody', value: 'Looks good', purpose: 'assessing' }],
@@ -183,7 +183,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
 
     // Empty body is valid for assessments
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'assessing',
         selector: SVG_SELECTOR,
         body: [],
@@ -207,7 +207,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'commenting',
         selector: TEXT_SELECTOR,
         body: [{ type: 'TextualBody', value: 'Great point', purpose: 'commenting' }],
@@ -231,7 +231,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'tagging',
         selector: SVG_SELECTOR,
         body: [{ type: 'TextualBody', value: 'concept:trust', purpose: 'tagging' }],
@@ -256,7 +256,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'linking',
         selector: TEXT_SELECTOR,
         body: [],
@@ -265,7 +265,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
 
     await waitFor(() => {
       expect(createdListener).toHaveBeenCalledTimes(1);
-      expect(createdListener).toHaveBeenCalledWith({ annotation: MOCK_ANNOTATION });
+      expect(createdListener).toHaveBeenCalledWith({ annotationId: 'new-1' });
     });
 
     subscription.unsubscribe();
@@ -285,7 +285,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'linking',
         selector: TEXT_SELECTOR,
         body: [],

package/src/features/resource-viewer/__tests__/AnnotationDeletionIntegration.test.tsx

@@ -41,7 +41,7 @@ vi.mock('../../../components/Toast', () => ({
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SemiontApiClient } from '@semiont/api-client';
-import { resourceUri, accessToken } from '@semiont/core';
+import { resourceUri, accessToken, annotationId as toAnnotationId } from '@semiont/core';
 
 describe('Annotation Deletion - Feature Integration', () => {
   let deleteAnnotationSpy: ReturnType<typeof vi.fn>;
@@ -89,7 +89,7 @@ describe('Annotation Deletion - Feature Integration', () => {
     return {
       emitDelete: (annotationId: string) => {
         act(() => {
-          eventBusInstance!.get('mark:delete').next({ annotationId });
+          eventBusInstance!.get('mark:delete').next({ annotationId: toAnnotationId(annotationId) });
         });
       },
       eventBus: eventBusInstance!,

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import React from 'react';
 import { ResourceViewerPage } from '../components/ResourceViewerPage';
 import type { ResourceViewerPageProps } from '../components/ResourceViewerPage';
@@ -118,6 +118,13 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   ResourceAnnotationsProvider: ({ children }: any) => children,
 }));
 
+// Mock useEventSubscription at the direct path used by ResourceViewerPage
+// (the barrel export mock doesn't intercept direct context imports)
+const mockUseEventSubscriptions = vi.fn();
+vi.mock('../../../contexts/useEventSubscription', () => ({
+  useEventSubscriptions: (...args: unknown[]) => mockUseEventSubscriptions(...args),
+}));
+
 vi.mock('@/components/toolbar/ToolbarPanels', () => ({
   ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
 }));
@@ -281,6 +288,38 @@ describe('ResourceViewerPage', () => {
       // Archived badge only shows in annotate mode, which defaults to false
       expect(screen.queryByText('📦 Archived')).not.toBeInTheDocument();
     });
+
+    it('shows archived badge after mark:mode-toggled event fires', () => {
+      localStorage.setItem('annotateMode', 'false');
+      localStorage.setItem('activeToolbarPanel', 'annotations');
+
+      const props = createMockProps({
+        resource: {
+          ...createMockProps().resource,
+          archived: true,
+        },
+      });
+
+      renderWithProviders(<ResourceViewerPage {...props} />);
+
+      // Before toggle: annotateMode is false, so archived badge is hidden
+      expect(screen.queryByText('📦 Archived')).not.toBeInTheDocument();
+
+      // Get the handler map that ResourceViewerPage passed to useEventSubscriptions
+      const handlerMap = mockUseEventSubscriptions.mock.calls[mockUseEventSubscriptions.mock.calls.length - 1]?.[0] as Record<string, () => void>;
+      expect(handlerMap).toBeDefined();
+      expect(handlerMap['mark:mode-toggled']).toBeDefined();
+
+      // Fire the mode toggle — this is what the toolbar emits
+      act(() => {
+        handlerMap['mark:mode-toggled']();
+      });
+
+      // After toggle: annotateMode is true, so archived badge should appear
+      expect(screen.getByText('📦 Archived')).toBeInTheDocument();
+
+      localStorage.clear();
+    });
   });
 
   describe('Modals', () => {

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -361,8 +361,13 @@ export function ResourceViewerPage({
     }
   }, [routes.know]); // eventBus is stable singleton - never in deps
 
+  const handleModeToggled = useCallback(() => {
+    setAnnotateMode(prev => !prev);
+  }, []);
+
   // Event bus subscriptions (combined into single useEventSubscriptions call to prevent hook ordering issues)
   useEventSubscriptions({
+    'mark:mode-toggled': handleModeToggled,
     'mark:archive': handleResourceArchive,
     'mark:unarchive': handleResourceUnarchive,
     'yield:clone': handleResourceClone,
@@ -406,8 +411,8 @@ export function ResourceViewerPage({
   const primaryMediaType = primaryRep?.mediaType;
   const primaryByteSize = primaryRep?.byteSize;
 
-  // Annotate mode state - local UI state only
-  const [annotateMode, _setAnnotateMode] = useState(() => {
+  // Annotate mode state - synced via mark:mode-toggled event from AnnotateToolbar
+  const [annotateMode, setAnnotateMode] = useState(() => {
     if (typeof window !== 'undefined') {
       return localStorage.getItem('annotateMode') === 'true';
     }