@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.80

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -9,8 +9,9 @@
 import React, { useState, useEffect } from 'react';
 import type { components } from '@semiont/api-client';
 import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/api-client';
-import { buttonStyles, CodeMirrorRenderer } from '@semiont/react-ui';
-import { useFormAnnouncements } from '@semiont/react-ui';
+import { buttonStyles } from '../../../lib/button-styles';
+import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
+import { useFormAnnouncements } from '../../../components/LiveRegion';
 
 type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
 
@@ -40,11 +41,8 @@ export interface ResourceComposePageProps {
 
   // UI state
   theme: 'light' | 'dark';
-  onThemeChange: (theme: 'light' | 'dark') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string) => void;
 
   // Actions
   onSaveResource: (params: SaveResourceParams) => Promise<void>;
@@ -111,11 +109,8 @@ export function ResourceComposePage({
   availableEntityTypes,
   initialLocale,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   onSaveResource,
   onCancel,
   translations: t,
@@ -529,12 +524,10 @@ export function ResourceComposePage({
                 <div className="semiont-form__editor-wrapper" lang={selectedLanguage}>
                   <CodeMirrorRenderer
                     content={newResourceContent}
-                    segments={[]}
                     editable={!isCreating}
                     sourceView={true}
                     showLineNumbers={showLineNumbers}
                     onChange={(newContent) => setNewResourceContent(newContent)}
-                    annotators={{}}
                   />
                 </div>
               </div>
@@ -610,16 +603,13 @@ export function ResourceComposePage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         {/* Toolbar - Always visible on the right */}
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -5,23 +5,11 @@
  * No Next.js mocking required - all dependencies passed as props!
  */
 
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceDiscoveryPage } from '../components/ResourceDiscoveryPage';
 import type { ResourceDiscoveryPageProps } from '../components/ResourceDiscoveryPage';
-
-// Mock dependencies
-vi.mock('@semiont/react-ui', async () => {
-  const actual = await vi.importActual('@semiont/react-ui');
-  return {
-    ...actual,
-    useRovingTabIndex: () => ({
-      containerRef: { current: null },
-      handleKeyDown: vi.fn(),
-    }),
-    Toolbar: () => <div data-testid="toolbar">Toolbar</div>,
-  };
-});
+import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/EventBusContext';
 
 const createMockResource = (id: string, name: string, entityTypes: string[] = []) => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',
@@ -42,11 +30,8 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   isLoadingRecent: false,
   isSearching: false,
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   onNavigateToResource: vi.fn(),
   onNavigateToCompose: vi.fn(),
   translations: {
@@ -71,18 +56,27 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   ...overrides,
 });
 
+// Helper to render with EventBusProvider
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(<EventBusProvider>{ui}</EventBusProvider>);
+};
+
 describe('ResourceDiscoveryPage', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
   describe('Basic Rendering', () => {
     it('renders without crashing', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Discover Resources')).toBeInTheDocument();
     });
 
     it('displays page title and subtitle', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Discover Resources')).toBeInTheDocument();
       expect(screen.getByText('Search and browse available resources')).toBeInTheDocument();
@@ -90,37 +84,39 @@ describe('ResourceDiscoveryPage', () => {
 
     it('renders search input', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByPlaceholderText('Search resources...')).toBeInTheDocument();
     });
 
     it('renders search button', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
     });
 
     it('renders toolbar component', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      const { container } = renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      expect(screen.getByTestId('toolbar')).toBeInTheDocument();
+      // Toolbar renders with context="simple" - check for toolbar element
+      const toolbar = container.querySelector('.semiont-toolbar[data-context="simple"]');
+      expect(toolbar).toBeInTheDocument();
     });
   });
 
   describe('Loading State', () => {
     it('shows loading message when isLoadingRecent is true', () => {
       const props = createMockProps({ isLoadingRecent: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Loading knowledge base...')).toBeInTheDocument();
     });
 
     it('does not show main content when loading', () => {
       const props = createMockProps({ isLoadingRecent: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.queryByText('Discover Resources')).not.toBeInTheDocument();
     });
@@ -135,7 +131,7 @@ describe('ResourceDiscoveryPage', () => {
       ];
 
       const props = createMockProps({ recentDocuments });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Document 1')).toBeInTheDocument();
       expect(screen.getByText('Document 2')).toBeInTheDocument();
@@ -146,28 +142,28 @@ describe('ResourceDiscoveryPage', () => {
       const props = createMockProps({
         recentDocuments: [createMockResource('1', 'Document 1')],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Recent Resources')).toBeInTheDocument();
     });
 
     it('shows empty state when no documents', () => {
       const props = createMockProps({ recentDocuments: [] });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('No resources available')).toBeInTheDocument();
     });
 
     it('shows compose button in empty state', () => {
       const props = createMockProps({ recentDocuments: [] });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByRole('button', { name: 'Compose First Resource' })).toBeInTheDocument();
     });
 
     it('calls onNavigateToCompose when compose button clicked', () => {
       const props = createMockProps({ recentDocuments: [] });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const button = screen.getByRole('button', { name: 'Compose First Resource' });
       fireEvent.click(button);
@@ -179,7 +175,7 @@ describe('ResourceDiscoveryPage', () => {
   describe('Search Functionality', () => {
     it('allows typing in search input', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...') as HTMLInputElement;
       fireEvent.change(input, { target: { value: 'test query' } });
@@ -189,14 +185,14 @@ describe('ResourceDiscoveryPage', () => {
 
     it('shows "Searching..." when isSearching is true', () => {
       const props = createMockProps({ isSearching: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByRole('button', { name: 'Searching...' })).toBeInTheDocument();
     });
 
     it('disables search input when isSearching is true', () => {
       const props = createMockProps({ isSearching: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...') as HTMLInputElement;
       expect(input).toBeDisabled();
@@ -204,7 +200,7 @@ describe('ResourceDiscoveryPage', () => {
 
     it('disables search button when isSearching is true', () => {
       const props = createMockProps({ isSearching: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const button = screen.getByRole('button', { name: 'Searching...' });
       expect(button).toBeDisabled();
@@ -217,7 +213,7 @@ describe('ResourceDiscoveryPage', () => {
       ];
 
       const props = createMockProps({ searchDocuments });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       // Type in search input to trigger search state
       const input = screen.getByPlaceholderText('Search resources...');
@@ -232,7 +228,7 @@ describe('ResourceDiscoveryPage', () => {
         searchDocuments: [],
         recentDocuments: [createMockResource('1', 'Recent Doc')],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...');
       fireEvent.change(input, { target: { value: 'nonexistent' } });
@@ -248,7 +244,7 @@ describe('ResourceDiscoveryPage', () => {
       const props = createMockProps({
         entityTypes: ['Document', 'Article', 'Report'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Filter by type')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'All' })).toBeInTheDocument();
@@ -266,7 +262,7 @@ describe('ResourceDiscoveryPage', () => {
         ],
         entityTypes: ['Document', 'Article'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       // Initially all documents shown
       expect(screen.getByText('Doc 1')).toBeInTheDocument();
@@ -287,7 +283,7 @@ describe('ResourceDiscoveryPage', () => {
         recentDocuments: [createMockResource('1', 'Doc 1', ['Document'])],
         entityTypes: ['Document'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const documentButton = screen.getByRole('button', { name: 'Document' });
       fireEvent.click(documentButton);
@@ -303,7 +299,7 @@ describe('ResourceDiscoveryPage', () => {
         ],
         entityTypes: ['Document', 'Article'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       // Filter by Document
       const documentButton = screen.getByRole('button', { name: 'Document' });
@@ -326,7 +322,7 @@ describe('ResourceDiscoveryPage', () => {
       const props = createMockProps({
         recentDocuments: [createMockResource('test-123', 'Test Document')],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const card = screen.getByRole('button', { name: /Open resource: Test Document/ });
       fireEvent.click(card);
@@ -338,7 +334,7 @@ describe('ResourceDiscoveryPage', () => {
   describe('Toolbar Integration', () => {
     it('renders ToolbarPanels component', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
     });
@@ -347,16 +343,14 @@ describe('ResourceDiscoveryPage', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
       const props = createMockProps({
         theme: 'dark',
-        onThemeChange: vi.fn(),
         ToolbarPanels,
       });
 
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({
           theme: 'dark',
-          onThemeChange: expect.any(Function),
         }),
         expect.anything()
       );

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -5,10 +5,11 @@
  * All dependencies passed as props - no Next.js hooks!
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getResourceId } from '@semiont/api-client';
-import { useRovingTabIndex, Toolbar } from '@semiont/react-ui';
+import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
+import { Toolbar } from '../../../components/Toolbar';
 import { ResourceCard } from './ResourceCard';
 
 type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
@@ -23,11 +24,8 @@ export interface ResourceDiscoveryPageProps {
 
   // UI state props
   theme: 'light' | 'dark';
-  onThemeChange: (theme: 'light' | 'dark') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string) => void;
 
   // Navigation props
   onNavigateToResource: (resourceId: string) => void;
@@ -64,11 +62,8 @@ export function ResourceDiscoveryPage({
   isLoadingRecent,
   isSearching,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   onNavigateToResource,
   onNavigateToCompose,
   translations: t,
@@ -101,6 +96,10 @@ export function ResourceDiscoveryPage({
     { orientation: 'grid', cols: 2 } // 2 columns on medium+ screens
   );
 
+  // Store navigation callback in ref to avoid re-creating openResource
+  const onNavigateToResourceRef = useRef(onNavigateToResource);
+  onNavigateToResourceRef.current = onNavigateToResource;
+
   // Memoized callbacks
   const handleEntityTypeFilter = useCallback((entityType: string) => {
     setSelectedEntityType(entityType);
@@ -109,9 +108,9 @@ export function ResourceDiscoveryPage({
   const openResource = useCallback((resource: ResourceDescriptor) => {
     const resourceId = getResourceId(resource);
     if (resourceId) {
-      onNavigateToResource(resourceId);
+      onNavigateToResourceRef.current(resourceId);
     }
-  }, [onNavigateToResource]);
+  }, []);
 
   const handleSearchSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();
@@ -267,16 +266,13 @@ export function ResourceDiscoveryPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         {/* Toolbar - Always visible on the right */}
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

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

@@ -0,0 +1,231 @@
+/**
+ * Layer 3: Feature Integration Test - Annotation Deletion Flow Architecture
+ *
+ * Tests the COMPLETE annotation deletion flow with real component composition:
+ * - EventBusProvider (REAL)
+ * - ApiClientProvider (REAL, with MOCKED client)
+ * - useAnnotationFlow (REAL)
+ * - useEventOperations (REAL)
+ * - useEventSubscriptions (REAL)
+ *
+ * This test focuses on ARCHITECTURE and EVENT WIRING:
+ * - Verifies deletion API called exactly ONCE (catches duplicate subscriptions)
+ * - Tests event propagation through the event bus
+ * - Validates success/failure event emissions
+ * - Ensures auth token is passed correctly
+ *
+ * CRITICAL: This test prevents regressions where:
+ * - Multiple deletion paths exist (event-driven vs direct)
+ * - useEventOperations not called in useAnnotationFlow
+ * - Auth token missing from API calls (401 errors)
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { useAnnotationFlow } from '../../../hooks/useAnnotationFlow';
+import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
+import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
+import { SemiontApiClient, resourceUri, accessToken } from '@semiont/api-client';
+
+describe('Annotation Deletion - Feature Integration', () => {
+  let deleteAnnotationSpy: ReturnType<typeof vi.fn>;
+  const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+  const testToken = 'test-token-123';
+  const testBaseUrl = 'http://localhost:4000';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+
+    // Mock the deleteAnnotation method on SemiontApiClient prototype
+    deleteAnnotationSpy = vi.fn().mockResolvedValue({ success: true });
+    vi.spyOn(SemiontApiClient.prototype, 'deleteAnnotation').mockImplementation(deleteAnnotationSpy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper to render the annotation flow with real providers
+   */
+  function renderAnnotationFlow() {
+    let eventBusInstance: ReturnType<typeof useEventBus> | null = null;
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      useAnnotationFlow(testUri);
+      return null;
+    }
+
+    render(
+      <AuthTokenProvider token={testToken}>
+        <EventBusProvider>
+          <ApiClientProvider baseUrl={testBaseUrl}>
+            <TestComponent />
+          </ApiClientProvider>
+        </EventBusProvider>
+      </AuthTokenProvider>
+    );
+
+    return {
+      emitDelete: (annotationId: string) => {
+        act(() => {
+          eventBusInstance!.emit('annotation:delete', { annotationId });
+        });
+      },
+      eventBus: eventBusInstance!,
+    };
+  }
+
+  it('should call deleteAnnotation API exactly ONCE when annotation:delete event is emitted', async () => {
+    const { emitDelete } = renderAnnotationFlow();
+    const annotationId = 'annotation-123';
+
+    // Trigger deletion via event bus (how UI triggers it)
+    emitDelete(annotationId);
+
+    // CRITICAL ASSERTION: API called exactly once (not twice!)
+    // This would FAIL if there were competing deletion paths
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // Verify correct parameters (annotationUri constructed from ID)
+    expect(deleteAnnotationSpy).toHaveBeenCalledWith(
+      expect.stringContaining(annotationId),
+      expect.objectContaining({
+        auth: accessToken(testToken),
+      })
+    );
+  });
+
+  it('should pass auth token to API call (prevents 401 errors)', async () => {
+    const { emitDelete } = renderAnnotationFlow();
+
+    emitDelete('annotation-456');
+
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalled();
+    });
+
+    // CRITICAL: Auth token must be present
+    const callArgs = deleteAnnotationSpy.mock.calls[0];
+    expect(callArgs[1]).toHaveProperty('auth');
+    expect(callArgs[1].auth).toBe(accessToken(testToken));
+  });
+
+  it('should emit annotation:deleted event on successful deletion', async () => {
+    const { emitDelete, eventBus } = renderAnnotationFlow();
+    const deletedListener = vi.fn();
+
+    // Subscribe to success event
+    eventBus.on('annotation:deleted', deletedListener);
+
+    emitDelete('annotation-789');
+
+    // Wait for API call to complete
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalled();
+    });
+
+    // Verify success event was emitted
+    await waitFor(() => {
+      expect(deletedListener).toHaveBeenCalledWith({
+        annotationId: 'annotation-789',
+      });
+    });
+  });
+
+  it('should emit annotation:delete-failed event on API error', async () => {
+    // Make API call fail
+    deleteAnnotationSpy.mockRejectedValue(new Error('Network error'));
+
+    const { emitDelete, eventBus } = renderAnnotationFlow();
+    const failedListener = vi.fn();
+
+    // Subscribe to failure event
+    eventBus.on('annotation:delete-failed', failedListener);
+
+    emitDelete('annotation-error');
+
+    // Wait for API call to be attempted
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalled();
+    });
+
+    // Verify failure event was emitted
+    await waitFor(() => {
+      expect(failedListener).toHaveBeenCalledWith({
+        error: expect.any(Error),
+      });
+    });
+  });
+
+  it('should handle multiple deletions in sequence without duplicate API calls', async () => {
+    const { emitDelete } = renderAnnotationFlow();
+
+    // Delete first annotation
+    emitDelete('annotation-1');
+
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // Delete second annotation
+    emitDelete('annotation-2');
+
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(2);
+    });
+
+    // Verify each call had correct annotation ID
+    expect(deleteAnnotationSpy.mock.calls[0][0]).toContain('annotation-1');
+    expect(deleteAnnotationSpy.mock.calls[1][0]).toContain('annotation-2');
+  });
+
+  it('ARCHITECTURE: useEventOperations is called in useAnnotationFlow (not elsewhere)', async () => {
+    /**
+     * This test validates that there's only ONE event-driven deletion path:
+     * - useAnnotationFlow calls useEventOperations
+     * - useEventOperations subscribes to annotation:delete
+     * - No other component/hook subscribes to annotation:delete
+     *
+     * If this test fails, it means either:
+     * 1. useEventOperations removed from useAnnotationFlow (CRITICAL BUG)
+     * 2. Duplicate subscription added elsewhere (ARCHITECTURE VIOLATION)
+     */
+
+    const { emitDelete } = renderAnnotationFlow();
+
+    emitDelete('architecture-test');
+
+    // Single API call = single subscription = correct architecture
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('REGRESSION: No direct deleteAnnotation function in ResourceAnnotationsContext', () => {
+    /**
+     * This test prevents regression to the old pattern where
+     * ResourceAnnotationsContext had a deleteAnnotation function
+     * that bypassed the event bus.
+     *
+     * The correct pattern is event-driven only:
+     * - UI emits annotation:delete event
+     * - useEventOperations handles it
+     * - No direct function calls
+     */
+
+    // This would fail to compile if deleteAnnotation was added back to context
+    // Type-level enforcement via TypeScript
+    const { emitDelete } = renderAnnotationFlow();
+    emitDelete('regression-test');
+
+    // Deletion still works via events
+    expect(deleteAnnotationSpy).toHaveBeenCalled();
+  });
+});