@semiont/react-ui 0.5.5 → 0.5.7

package/src/components/resource/BrowseView.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'r
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { annotationId as toAnnotationId } from '@semiont/core';
-import { getMimeCategory, isPdfMimeType } from '@semiont/core';
+import { capabilitiesOf } from '@semiont/core';
 import { createHoverHandlers } from '@semiont/sdk';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
@@ -83,7 +83,7 @@ export const BrowseView = memo(function BrowseView({
   const session = useObservable(useSemiont().activeSession$);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const category = getMimeCategory(mimeType);
+  const render = capabilitiesOf(mimeType)?.render ?? 'none';
 
   const { highlights, references, assessments, comments, tags } = annotations;
 
@@ -207,8 +207,9 @@ export const BrowseView = memo(function BrowseView({
     'beckon:focus': handleAnnotationFocus,
   });
 
-  // Route to appropriate viewer based on MIME type category
-  switch (category) {
+  // Route to the viewer for this media type's render mode. The switch is
+  // exhaustive over RenderMode, so every path returns.
+  switch (render) {
     case 'text':
       return (
         <div className="semiont-browse-view" data-mime-type="text">
@@ -226,34 +227,31 @@ export const BrowseView = memo(function BrowseView({
         </div>
       );
 
-    case 'image':
-      // Check if it's actually a PDF (categorized as 'image' for spatial annotations)
-      if (isPdfMimeType(mimeType)) {
-        return (
-          <div className="semiont-browse-view" data-mime-type="pdf">
-            <AnnotateToolbar
-              selectedMotivation={null}
-              selectedClick={selectedClick}
-              showSelectionGroup={false}
-              showDeleteButton={false}
-              annotateMode={annotateMode}
-              annotators={ANNOTATORS}
-            />
-            <div ref={containerRef} className="semiont-browse-view__content">
-              <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
-                <PdfAnnotationCanvas
-                  pdfUrl={content}
-                  existingAnnotations={allAnnotations}
-                  drawingMode={null}
-                  selectedMotivation={null}
-                />
-              </Suspense>
-            </div>
+    case 'pdf':
+      return (
+        <div className="semiont-browse-view" data-mime-type="pdf">
+          <AnnotateToolbar
+            selectedMotivation={null}
+            selectedClick={selectedClick}
+            showSelectionGroup={false}
+            showDeleteButton={false}
+            annotateMode={annotateMode}
+            annotators={ANNOTATORS}
+          />
+          <div ref={containerRef} className="semiont-browse-view__content">
+            <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
+              <PdfAnnotationCanvas
+                pdfUrl={content}
+                existingAnnotations={allAnnotations}
+                drawingMode={null}
+                selectedMotivation={null}
+              />
+            </Suspense>
           </div>
-        );
-      }
+        </div>
+      );
 
-      // Regular image
+    case 'image':
       return (
         <div className="semiont-browse-view" data-mime-type="image">
           <AnnotateToolbar
@@ -274,7 +272,9 @@ export const BrowseView = memo(function BrowseView({
         </div>
       );
 
-    case 'unsupported':
+    case 'none':
+      // Catalogued type with no preview (render: 'none') or an imported
+      // foreign type the registry doesn't know — same UI: metadata + download.
       return (
         <div ref={containerRef} className="semiont-browse-view semiont-browse-view--unsupported" data-mime-type="unsupported">
           <div className="semiont-browse-view__empty">

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

@@ -78,7 +78,6 @@ function makeStoredEvent(id: string, type: string, seq: number, overrides: Recor
     ...overrides,
     metadata: {
       sequenceNumber: seq,
-      streamPosition: 0,
     },
   };
 }

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

@@ -2,10 +2,10 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowseView } from '../BrowseView';
-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';
 
 // Mock ResourceAnnotationsContext - keep this simple
 let mockNewAnnotationIds = new Set<string>();
@@ -15,18 +15,14 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   })),
 }));
 
-// Mock @semiont/core utilities (these helpers and `resourceId` all live in core).
+// Mock @semiont/core utilities. The media-type registry (`capabilitiesOf`)
+// is NOT mocked — BrowseView dispatches on the real registry's render mode,
+// so the tested types (text/markdown, image/png, application/octet-stream)
+// resolve through the real source of truth.
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
-    getMimeCategory: vi.fn((mimeType: string) => {
-      if (mimeType.startsWith('text/')) return 'text';
-      if (mimeType.startsWith('image/')) return 'image';
-      if (mimeType === 'application/pdf') return 'image';
-      return 'unsupported';
-    }),
-    isPdfMimeType: vi.fn((mimeType: string) => mimeType === 'application/pdf'),
     resourceId: vi.fn((id: string) => id),
     getExactText: vi.fn(() => 'exact text'),
     getTextPositionSelector: vi.fn(() => ({ start: 0, end: 10 })),
@@ -151,12 +147,12 @@ const renderWithEventTracking = (
 };
 
 // Test data fixtures
-const createMockAnnotation = (motivation: string, id: string): Annotation => ({
+const createMockAnnotation = (motivation: Annotation['motivation'], id: string): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation,
-  creator: { name: 'user@example.com' },
+  creator: { '@type': 'Person', name: 'user@example.com' },
   created: '2024-01-01T10:00:00Z',
   target: {
     source: 'resource-1',
@@ -197,7 +193,9 @@ describe('BrowseView Component', () => {
     // Mock querySelector and querySelectorAll
     if (typeof document !== 'undefined') {
       document.querySelector = vi.fn();
-      document.querySelectorAll = vi.fn(() => []);
+      // Return a real (empty) NodeList so the mock matches the DOM signature.
+      const emptyNodeList = document.createDocumentFragment().querySelectorAll('*');
+      document.querySelectorAll = vi.fn(() => emptyNodeList);
     }
   });
 

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

@@ -1,10 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { HistoryEvent } from '../HistoryEvent';
 import { renderWithProviders } from '../../../test-utils';
-import type { StoredEvent } from '@semiont/core';
 
 // Mock @semiont/core - must use importOriginal to preserve EventBus etc.
 vi.mock('@semiont/core', async (importOriginal) => {
@@ -37,8 +35,6 @@ vi.mock('../event-formatting', () => ({
 import { getAnnotationUriFromEvent } from '@semiont/core';
 import {
   formatEventType,
-  getEventEmoji,
-  formatRelativeTime,
   getEventDisplayContent,
   getEventEntityTypes,
   getResourceCreationDetails,
@@ -62,7 +58,6 @@ function makeStoredEvent(overrides: Record<string, any> = {}): any {
     ...overrides,
     metadata: {
       sequenceNumber: 1,
-      streamPosition: 0,
     },
   };
 }

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

@@ -11,15 +11,13 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import { ResourceViewer } from '../ResourceViewer';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import { TranslationProvider } from '../../../contexts/TranslationContext';
 import { ResourceAnnotationsProvider } from '../../../contexts/ResourceAnnotationsContext';
-import type { components } from '@semiont/core';
-
-type SemiontResource = components['schemas']['ResourceDescriptor'];
+import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
 
 // Mock dependencies
 vi.mock('../../../hooks/useObservableBrowse', () => ({
@@ -61,7 +59,7 @@ vi.mock('../../../session/SemiontProvider', async () => {
 
 const mockResource: SemiontResource & { content: string } = {
   '@context': 'https://www.w3.org/ns/activitystreams',
-  '@id': 'test-123',
+  '@id': 'test-123' as ResourceId,
   name: 'Test Document',
   created: '2024-01-01T00:00:00Z',
   entityTypes: [],
@@ -84,7 +82,7 @@ const mockAnnotations = {
 };
 
 const mockTranslationManager = {
-  t: (namespace: string, key: string, params?: Record<string, any>) => {
+  t: (namespace: string, key: string) => {
     return `${namespace}.${key}`;
   },
 };

package/src/components/resource/__tests__/event-formatting.test.ts

@@ -8,7 +8,7 @@ import {
   getResourceCreationDetails,
 } from '../event-formatting';
 
-// Mock api-client functions
+// Mock http-transport functions
 vi.mock('@semiont/core', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@semiont/core')>();
   return {

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

@@ -7,7 +7,7 @@ import './CollaborationPanel.css';
 interface Props {
   /**
    * Connection state from `client.actor.state$`. See
-   * `packages/api-client/src/state/domain/actor-state-unit.ts`.
+   * `packages/http-transport/src/state/domain/actor-state-unit.ts`.
    *
    * UI mapping:
    *   `open` | `reconnecting` | `initial` | `connecting`

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

@@ -8,42 +8,46 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { syntaxHighlighting } from '@codemirror/language';
 import { jsonLightTheme, jsonLightHighlightStyle } from '../../../lib/codemirror-json-theme';
 import { useLineNumbers } from '../../../hooks/useLineNumbers';
-import type { components } from '@semiont/core';
+import { useResourceGraph } from '../../../hooks/useResourceGraph';
+import type { ResourceId } from '@semiont/core';
 import './JsonLdPanel.css';
 
-type SemiontResource = components['schemas']['ResourceDescriptor'];
-
 interface Props {
-  resource: SemiontResource;
+  resourceId: ResourceId;
 }
 
-export function JsonLdPanel({ resource: semiontResource }: Props) {
+/**
+ * Dereferences the resource's LD face (`GET /resources/:id/jsonld` via
+ * `browse.resourceGraph`) and pretty-prints the full graph — descriptor +
+ * annotations + inbound entity references — read-only. This is exactly what
+ * an external linked-data client gets when dereferencing the resource's
+ * `describedby` URI, so the panel doubles as a living end-to-end test of the
+ * LD face. See `.plans/SIMPLER-JSON-LD.md` §5.
+ */
+export function JsonLdPanel({ resourceId }: Props) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
   const { showLineNumbers } = useLineNumbers();
+  const { graph, loading, error } = useResourceGraph(resourceId);
+
+  const documentText = graph ? JSON.stringify(graph, null, 2) : '';
 
-  // Initialize CodeMirror
+  // Initialize CodeMirror once the graph has loaded.
   useEffect(() => {
-    if (!editorRef.current) return;
+    if (!editorRef.current || !documentText) return;
 
-    // Check if dark mode is active
     const isDarkMode = document.documentElement?.classList.contains('dark') ?? false;
 
-    // Convert resource to JSON-LD format
-    const jsonLdContent = JSON.stringify(semiontResource, null, 2);
-
     const extensions = [
       json(),
       EditorView.editable.of(false),
       EditorState.readOnly.of(true),
     ];
 
-    // Add line numbers if enabled
     if (showLineNumbers) {
       extensions.push(lineNumbers());
     }
 
-    // Add theme based on dark/light mode
     if (isDarkMode) {
       extensions.push(oneDark);
     } else {
@@ -52,7 +56,7 @@ export function JsonLdPanel({ resource: semiontResource }: Props) {
     }
 
     const state = EditorState.create({
-      doc: jsonLdContent,
+      doc: documentText,
       extensions,
     });
 
@@ -67,11 +71,12 @@ export function JsonLdPanel({ resource: semiontResource }: Props) {
       view.destroy();
       viewRef.current = null;
     };
-  }, [semiontResource, showLineNumbers]);
+  }, [documentText, showLineNumbers]);
 
   const handleCopyToClipboard = async () => {
+    if (!documentText) return;
     try {
-      await navigator.clipboard.writeText(JSON.stringify(semiontResource, null, 2));
+      await navigator.clipboard.writeText(documentText);
     } catch (err) {
       console.error('Failed to copy JSON-LD:', err);
     }
@@ -88,11 +93,23 @@ export function JsonLdPanel({ resource: semiontResource }: Props) {
           onClick={handleCopyToClipboard}
           className="semiont-button semiont-button--icon"
           title="Copy to clipboard"
+          disabled={!graph}
         >
           📋 Copy
         </button>
       </div>
 
+      {loading && (
+        <p className="semiont-jsonld-panel__status" role="status">
+          Loading JSON-LD…
+        </p>
+      )}
+      {error && !loading && (
+        <p className="semiont-jsonld-panel__status semiont-jsonld-panel__status--error" role="alert">
+          Failed to load JSON-LD.
+        </p>
+      )}
+
       {/* JSON-LD content rendered with CodeMirror */}
       <div
         ref={editorRef}

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

@@ -236,7 +236,7 @@ export function ReferencesPanel({
     }
 
     // When annotation is complete and we haven't saved yet, save the log
-    if (!isAssisting && !hasSavedLogRef.current && progress?.completedEntityTypes) {
+    if (!hasSavedLogRef.current && progress?.completedEntityTypes) {
       hasSavedLogRef.current = true;
       setLastDetectionLog(progress.completedEntityTypes);
       setSelectedEntityTypes([]);

package/src/components/resource/panels/__tests__/AssessmentEntry.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 type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
-// Mock @semiont/api-client
+// Mock @semiont/http-transport
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {
@@ -25,10 +23,11 @@ const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<type
 
 const createMockAssessment = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'assessment-1',
+  id: 'assessment-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'assessing',
   creator: {
+    '@type': 'Person',
     name: 'reviewer@example.com',
   },
   created: '2024-06-15T12:00:00Z',

package/src/components/resource/panels/__tests__/AssessmentPanel.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 { AssessmentPanel } from '../AssessmentPanel';
-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 {
@@ -57,7 +57,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock @semiont/api-client utilities
+// Mock @semiont/http-transport utilities
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {
@@ -69,7 +69,7 @@ vi.mock('@semiont/core', async () => {
 
 // Mock AssessmentEntry component to simplify testing
 vi.mock('../AssessmentEntry', () => ({
-  AssessmentEntry: ({ assessment, onAssessmentRef }: any) => (
+  AssessmentEntry: ({ assessment }: any) => (
     <div data-testid={`assessment-${assessment.id}`}>
       <div>{assessment.id}</div>
     </div>
@@ -78,7 +78,7 @@ vi.mock('../AssessmentEntry', () => ({
 
 // Mock AssistSection component — just render a simplified version.
 vi.mock('../AssistSection', () => ({
-  AssistSection: ({ annotationType, isAssisting }: any) => (
+  AssistSection: ({ isAssisting }: any) => (
     <div data-testid="detect-section">
       <button>Start Detection</button>
       {isAssisting && <div>Detecting...</div>}
@@ -93,10 +93,11 @@ const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTarg
 // Test data fixtures
 const createMockAssessment = (id: string, start: number, end: number): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation: 'assessing',
   creator: {
+    '@type': 'Person',
     name: `user${id}@example.com`,
   },
   created: `2024-01-0${id.slice(-1)}T10:00:00Z`,

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', () => ({
@@ -23,7 +21,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock @semiont/api-client utilities
+// Mock @semiont/http-transport utilities
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {
@@ -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();
     });
   });