@semiont/react-ui 0.2.36 → 0.2.38

package/package.json

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

package/src/components/CodeMirrorRenderer.tsx

@@ -4,29 +4,33 @@ import { useEffect, useRef } from 'react';
 import { EditorView, Decoration, DecorationSet, lineNumbers } from '@codemirror/view';
 import { EditorState, RangeSetBuilder, StateField, StateEffect, Compartment } from '@codemirror/state';
 import { markdown } from '@codemirror/lang-markdown';
-import { ANNOTATORS } from '../lib/annotation-registry';
 import { ReferenceResolutionWidget, showWidgetPreview, hideWidgetPreview } from '../lib/codemirror-widgets';
 import { scrollAnnotationIntoView } from '../lib/scroll-utils';
-import { isHighlight, isReference, isResolvedReference, isComment, isAssessment, isTag, getBodySource } from '@semiont/api-client';
-import type { components } from '@semiont/core';
+import { isReference } from '@semiont/api-client';
 import type { EventBus } from "@semiont/core";
 import { createHoverHandlers } from '../hooks/useBeckonFlow';
-
-type Annotation = components['schemas']['Annotation'];
+import {
+  convertSegmentPositions,
+  computeAnnotationDecorations,
+  computeWidgetDecorations,
+} from '../lib/codemirror-logic';
+import type { TextSegment } from '../lib/codemirror-logic';
+import {
+  handleAnnotationClick,
+  handleWidgetClick as processWidgetClick,
+  dispatchWidgetClick,
+  handleWidgetMouseEnter as processWidgetMouseEnter,
+  handleWidgetMouseLeave as processWidgetMouseLeave,
+} from '../lib/codemirror-handlers';
+
+// Re-export TextSegment for consumers
+export type { TextSegment } from '../lib/codemirror-logic';
 
 // Type augmentation for custom DOM properties used to store CodeMirror state
 interface EnrichedHTMLElement extends HTMLElement {
-  __lastHoveredAnnotation?: string | null;
   __cmView?: EditorView;
 }
 
-export interface TextSegment {
-  exact: string;
-  annotation?: Annotation;
-  start: number;
-  end: number;
-}
-
 interface Props {
   content: string;
   segments?: TextSegment[]; // Optional - only needed for annotation rendering
@@ -63,118 +67,24 @@ interface WidgetUpdate {
 
 const updateWidgetsEffect = StateEffect.define<WidgetUpdate>();
 
-/**
- * Convert positions from CRLF character space to LF character space.
- * CodeMirror normalizes all line endings to LF internally, but annotation positions
- * are calculated in the original content's character space (which may have CRLF).
- *
- * @param segments - Segments with positions in CRLF space
- * @param content - Original content (may have CRLF line endings)
- * @returns Segments with positions adjusted for LF space
- */
-function convertSegmentPositions(segments: TextSegment[], content: string): TextSegment[] {
-  // If content has no CRLF, no conversion needed
-  if (!content.includes('\r\n')) {
-    return segments;
-  }
-
-  // Build a map of CRLF positions for efficient lookup
-  const crlfPositions: number[] = [];
-  for (let i = 0; i < content.length - 1; i++) {
-    if (content[i] === '\r' && content[i + 1] === '\n') {
-      crlfPositions.push(i);
-    }
-  }
-
-  // Binary search: count CRLFs before a position in O(log n)
-  const convertPosition = (pos: number): number => {
-    let lo = 0;
-    let hi = crlfPositions.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >>> 1;
-      if (crlfPositions[mid]! < pos) lo = mid + 1;
-      else hi = mid;
-    }
-    return pos - lo;
-  };
-
-  return segments.map(seg => ({
-    ...seg,
-    start: convertPosition(seg.start),
-    end: convertPosition(seg.end)
-  }));
-}
-
-/**
- * Get tooltip text for annotation based on type/motivation
- */
-function getAnnotationTooltip(annotation: Annotation): string {
-  const isCommentAnn = isComment(annotation);
-  const isHighlightAnn = isHighlight(annotation);
-  const isAssessmentAnn = isAssessment(annotation);
-  const isTagAnn = isTag(annotation);
-  const isReferenceAnn = isReference(annotation);
-  const isResolvedRef = isResolvedReference(annotation);
-
-  if (isCommentAnn) {
-    return 'Comment';
-  } else if (isHighlightAnn) {
-    return 'Highlight';
-  } else if (isAssessmentAnn) {
-    return 'Assessment';
-  } else if (isTagAnn) {
-    return 'Tag';
-  } else if (isResolvedRef) {
-    return 'Resolved Reference';
-  } else if (isReferenceAnn) {
-    return 'Unresolved Reference';
-  }
-  return 'Annotation';
-}
-
-// Build decorations from segments
+// Build CodeMirror decorations from pure metadata
 function buildAnnotationDecorations(
   segments: TextSegment[],
   newAnnotationIds?: Set<string>
 ): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>();
+  const entries = computeAnnotationDecorations(segments, newAnnotationIds);
 
-  const annotatedSegments = segments
-    .filter(s => s.annotation)
-    .sort((a, b) => a.start - b.start);
-
-  for (const segment of annotatedSegments) {
-    if (!segment.annotation) continue;
-
-    const isNew = newAnnotationIds?.has(segment.annotation.id) || false;
-    const baseClassName = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(segment.annotation!))?.className || 'annotation-highlight';
-    const className = isNew ? `${baseClassName} annotation-sparkle` : baseClassName;
-
-    // Use W3C helpers to determine annotation type
-    const isHighlightAnn = isHighlight(segment.annotation);
-    const isReferenceAnn = isReference(segment.annotation);
-    const isCommentAnn = isComment(segment.annotation);
-    const isAssessmentAnn = isAssessment(segment.annotation);
-    const isTagAnn = isTag(segment.annotation);
-
-    // Determine annotation type for data attribute - use motivation directly
-    let annotationType = 'highlight'; // default
-    if (isCommentAnn) annotationType = 'comment';
-    else if (isReferenceAnn) annotationType = 'reference';
-    else if (isAssessmentAnn) annotationType = 'assessment';
-    else if (isTagAnn) annotationType = 'tag';
-    else if (isHighlightAnn) annotationType = 'highlight';
-
+  for (const { start, end, meta } of entries) {
     const decoration = Decoration.mark({
-      class: className,
+      class: meta.className,
       attributes: {
-        'data-annotation-id': segment.annotation.id,
-        'data-annotation-type': annotationType,
-        title: getAnnotationTooltip(segment.annotation)
-      }
+        'data-annotation-id': meta.annotationId,
+        'data-annotation-type': meta.annotationType,
+        title: meta.tooltip,
+      },
     });
-
-    builder.add(segment.start, segment.end, decoration);
+    builder.add(start, end, decoration);
   }
 
   return builder.finish();
@@ -201,7 +111,7 @@ function createAnnotationDecorationsField() {
   });
 }
 
-// Build widget decorations
+// Build widget decorations using pure metadata
 function buildWidgetDecorations(
   _content: string,
   segments: TextSegment[],
@@ -209,39 +119,26 @@ function buildWidgetDecorations(
   getTargetDocumentName?: (documentId: string) => string | undefined
 ): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>();
+  const widgetMetas = computeWidgetDecorations(segments, generatingReferenceId, getTargetDocumentName);
 
-  // Process all annotations (references and highlights) in sorted order
-  // This ensures decorations are added in the correct order for CodeMirror
-  const allAnnotatedSegments = segments
-    .filter(s => s.annotation)
-    .sort((a, b) => a.end - b.end); // Sort by end position
-
-  for (const segment of allAnnotatedSegments) {
-    if (!segment.annotation) continue;
-
-    const annotation = segment.annotation;
-
-    // For references: add resolution widget (🔗, ✨ pulsing, or ❓)
-    if (isReference(annotation)) {
-      const bodySource = getBodySource(annotation.body);
-      const targetName = bodySource
-        ? getTargetDocumentName?.(bodySource)
-        : undefined;
-      const isGenerating = generatingReferenceId
-        ? annotation.id === generatingReferenceId
-        : false;
-      const widget = new ReferenceResolutionWidget(
-        annotation,
-        targetName,
-        isGenerating
-      );
-      builder.add(
-        segment.end,
-        segment.end,
-        Decoration.widget({ widget, side: 1 })
-      );
+  // We still need the full annotation objects for ReferenceResolutionWidget
+  const annotationsByEnd = new Map<number, TextSegment>();
+  for (const s of segments) {
+    if (s.annotation && isReference(s.annotation)) {
+      annotationsByEnd.set(s.end, s);
     }
+  }
+
+  for (const meta of widgetMetas) {
+    const segment = annotationsByEnd.get(meta.position);
+    if (!segment?.annotation) continue;
 
+    const widget = new ReferenceResolutionWidget(
+      segment.annotation,
+      meta.targetName,
+      meta.isGenerating
+    );
+    builder.add(meta.position, meta.position, Decoration.widget({ widget, side: 1 }));
   }
 
   return builder.finish();
@@ -337,28 +234,18 @@ export function CodeMirrorRenderer({
             onChange(newContent);
           }
         }),
-        // Handle clicks on annotations
+        // Handle clicks on annotations — delegates to extracted handler
         EditorView.domEventHandlers({
           click: (event, _view) => {
             const target = event.target as HTMLElement;
-            const annotationElement = target.closest('[data-annotation-id]');
-            const annotationId = annotationElement?.getAttribute('data-annotation-id');
-
-            if (annotationId && eventBusRef.current) {
-              const segment = segmentsByIdRef.current.get(annotationId);
-              if (segment?.annotation) {
-                event.preventDefault();
-                eventBusRef.current.get('browse:click').next({
-                  annotationId,
-                  motivation: segment.annotation.motivation
-                });
-                return true; // Stop propagation
-              }
+            if (eventBusRef.current && handleAnnotationClick(target, segmentsByIdRef.current, eventBusRef.current)) {
+              event.preventDefault();
+              return true;
             }
             return false;
           }
         }),
-        // Style the editor - use CSS string to inject !important rules
+        // Style the editor
         EditorView.baseTheme({
           '&.cm-editor': {
             height: '100%',
@@ -368,7 +255,7 @@ export function CodeMirrorRenderer({
             outline: 'none'
           },
           '.cm-scroller': {
-            overflow: 'visible !important', // Let parent container handle scrolling
+            overflow: 'visible !important',
             height: 'auto !important'
           },
           '.cm-content, .cm-gutters': {
@@ -433,67 +320,48 @@ export function CodeMirrorRenderer({
       if (annotationElement) handleMouseLeave();
     };
 
-    // Delegated widget event handlers (replaces per-widget listeners)
-    const handleWidgetClick = (e: MouseEvent) => {
+    // Delegated widget event handlers — delegates to extracted handlers
+    const onWidgetClick = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-      const widget = target.closest('.reference-preview-widget') as HTMLElement | null;
-      if (!widget || widget.dataset.widgetGenerating === 'true') return;
+      const result = processWidgetClick(target);
+      if (!result.handled) return;
 
       e.preventDefault();
       e.stopPropagation();
 
-      const annotationId = widget.dataset.widgetAnnotationId;
-      const bodySource = widget.dataset.widgetBodySource;
-      const isResolved = widget.dataset.widgetResolved === 'true';
-
-      if (!annotationId || !eventBusRef.current) return;
-
-      if (isResolved && bodySource) {
-        eventBusRef.current.get('browse:reference-navigate').next({ documentId: bodySource });
-      } else {
-        const motivation = (widget.dataset.widgetMotivation || 'linking') as Annotation['motivation'];
-        eventBusRef.current.get('browse:click').next({ annotationId, motivation });
+      if (eventBusRef.current) {
+        dispatchWidgetClick(result, eventBusRef.current);
       }
     };
 
-    const handleWidgetMouseEnter = (e: MouseEvent) => {
+    const onWidgetMouseEnter = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-      const widget = target.closest('.reference-preview-widget') as HTMLElement | null;
-      if (!widget || widget.dataset.widgetGenerating === 'true') return;
-
-      const indicator = widget.querySelector('.reference-indicator') as HTMLElement | null;
-      if (indicator) indicator.style.opacity = '1';
-
-      if (widget.dataset.widgetResolved === 'true' && widget.dataset.widgetTargetName) {
-        showWidgetPreview(widget, widget.dataset.widgetTargetName);
+      const result = processWidgetMouseEnter(target);
+      if (result.showPreview && result.targetName && result.widget) {
+        showWidgetPreview(result.widget, result.targetName);
       }
     };
 
-    const handleWidgetMouseLeave = (e: MouseEvent) => {
+    const onWidgetMouseLeave = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-      const widget = target.closest('.reference-preview-widget') as HTMLElement | null;
-      if (!widget) return;
-
-      const indicator = widget.querySelector('.reference-indicator') as HTMLElement | null;
-      if (indicator) indicator.style.opacity = '0.6';
-
-      if (widget.dataset.widgetResolved === 'true') {
-        hideWidgetPreview(widget);
+      const result = processWidgetMouseLeave(target);
+      if (result.hidePreview && result.widget) {
+        hideWidgetPreview(result.widget);
       }
     };
 
     container.addEventListener('mouseover', handleMouseOver);
     container.addEventListener('mouseout', handleMouseOut);
-    container.addEventListener('click', handleWidgetClick);
-    container.addEventListener('mouseenter', handleWidgetMouseEnter, true);
-    container.addEventListener('mouseleave', handleWidgetMouseLeave, true);
+    container.addEventListener('click', onWidgetClick);
+    container.addEventListener('mouseenter', onWidgetMouseEnter, true);
+    container.addEventListener('mouseleave', onWidgetMouseLeave, true);
 
     return () => {
       container.removeEventListener('mouseover', handleMouseOver);
       container.removeEventListener('mouseout', handleMouseOut);
-      container.removeEventListener('click', handleWidgetClick);
-      container.removeEventListener('mouseenter', handleWidgetMouseEnter, true);
-      container.removeEventListener('mouseleave', handleWidgetMouseLeave, true);
+      container.removeEventListener('click', onWidgetClick);
+      container.removeEventListener('mouseenter', onWidgetMouseEnter, true);
+      container.removeEventListener('mouseleave', onWidgetMouseLeave, true);
       cleanupHover();
       view.destroy();
       viewRef.current = null;
@@ -617,4 +485,4 @@ export function CodeMirrorRenderer({
     : "semiont-codemirror";
 
   return <div ref={containerRef} className={containerClasses} data-markdown-container />;
-}
+}

package/src/components/__tests__/AnnotateReferencesProgressWidget.test.tsx

@@ -0,0 +1,142 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders, resetEventBusForTesting } from '../../test-utils';
+import { AnnotateReferencesProgressWidget } from '../AnnotateReferencesProgressWidget';
+import type { MarkProgress } from '@semiont/core';
+
+describe('AnnotateReferencesProgressWidget', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
+  it('returns null when progress is null', () => {
+    const { container } = renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={null} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders progress with status message', () => {
+    const progress: MarkProgress = {
+      status: 'in-progress',
+      message: 'Processing entities...',
+    };
+
+    renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    expect(screen.getByText('Processing entities...')).toBeInTheDocument();
+  });
+
+  it('shows cancel button when not complete', () => {
+    const progress: MarkProgress = {
+      status: 'in-progress',
+      message: 'Working...',
+    };
+
+    renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    const cancelButton = screen.getByTitle('ReferencesPanel.cancelAnnotation');
+    expect(cancelButton).toBeInTheDocument();
+  });
+
+  it('hides cancel button when complete', () => {
+    const progress: MarkProgress = {
+      status: 'complete',
+    };
+
+    renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    expect(screen.queryByTitle('ReferencesPanel.cancelAnnotation')).not.toBeInTheDocument();
+  });
+
+  it('emits job:cancel-requested on cancel click', () => {
+    const handler = vi.fn();
+    const progress: MarkProgress = {
+      status: 'in-progress',
+      message: 'Working...',
+    };
+
+    const { eventBus } = renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />,
+      { returnEventBus: true }
+    );
+
+    const subscription = eventBus!.get('job:cancel-requested').subscribe(handler);
+
+    const cancelButton = screen.getByTitle('ReferencesPanel.cancelAnnotation');
+    fireEvent.click(cancelButton);
+
+    expect(handler).toHaveBeenCalledWith({ jobType: 'annotation' });
+
+    subscription.unsubscribe();
+  });
+
+  it('renders completed entity types', () => {
+    const progress: MarkProgress = {
+      status: 'in-progress',
+      completedEntityTypes: [
+        { entityType: 'Person', foundCount: 5 },
+        { entityType: 'Organization', foundCount: 3 },
+      ],
+    };
+
+    renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    expect(screen.getByText('Person:')).toBeInTheDocument();
+    expect(screen.getByText('Organization:')).toBeInTheDocument();
+    // Translation mock returns "ReferencesPanel.found" for each entity type
+    const foundLabels = screen.getAllByText('ReferencesPanel.found');
+    expect(foundLabels).toHaveLength(2);
+  });
+
+  it('shows complete icon for complete status', () => {
+    const progress: MarkProgress = {
+      status: 'complete',
+    };
+
+    const { container } = renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    expect(container.querySelector('[data-status="complete"]')).toBeInTheDocument();
+    expect(screen.getByText('ReferencesPanel.complete')).toBeInTheDocument();
+  });
+
+  it('shows error message for error status', () => {
+    const progress: MarkProgress = {
+      status: 'error',
+      message: 'Something went wrong',
+    };
+
+    const { container } = renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    expect(container.querySelector('[data-status="error"]')).toBeInTheDocument();
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('shows current entity type processing details', () => {
+    const progress: MarkProgress = {
+      status: 'in-progress',
+      currentEntityType: 'Location',
+    };
+
+    renderWithProviders(
+      <AnnotateReferencesProgressWidget progress={progress} />
+    );
+
+    expect(screen.getByText(/Processing: Location/)).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/LiveRegion.hooks.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  LiveRegionProvider,
+  useFormAnnouncements,
+  useLanguageChangeAnnouncements,
+} from '../LiveRegion';
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <LiveRegionProvider>{children}</LiveRegionProvider>;
+}
+
+describe('useFormAnnouncements', () => {
+  it('announceFormSubmitting sets polite message', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+
+    act(() => result.current.announceFormSubmitting());
+
+    const { container } = render(
+      <LiveRegionProvider>
+        <div />
+      </LiveRegionProvider>
+    );
+    // The announcement happens via context; verify the hook returns the functions
+    expect(typeof result.current.announceFormSubmitting).toBe('function');
+    expect(typeof result.current.announceFormSuccess).toBe('function');
+    expect(typeof result.current.announceFormError).toBe('function');
+    expect(typeof result.current.announceFormValidationError).toBe('function');
+    container.remove();
+  });
+
+  it('announceFormSuccess uses custom message', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+    act(() => result.current.announceFormSuccess('Created!'));
+    // No throw = success
+  });
+
+  it('announceFormSuccess uses default message', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+    act(() => result.current.announceFormSuccess());
+  });
+
+  it('announceFormError uses custom message', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+    act(() => result.current.announceFormError('Network error'));
+  });
+
+  it('announceFormError uses default message', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+    act(() => result.current.announceFormError());
+  });
+
+  it('announceFormValidationError with 1 field', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+    act(() => result.current.announceFormValidationError(1));
+  });
+
+  it('announceFormValidationError with multiple fields', () => {
+    const { result } = renderHook(() => useFormAnnouncements(), { wrapper: Wrapper });
+    act(() => result.current.announceFormValidationError(3));
+  });
+});
+
+describe('useLanguageChangeAnnouncements', () => {
+  it('announceLanguageChanging is callable', () => {
+    const { result } = renderHook(() => useLanguageChangeAnnouncements(), { wrapper: Wrapper });
+    expect(typeof result.current.announceLanguageChanging).toBe('function');
+    act(() => result.current.announceLanguageChanging('French'));
+  });
+
+  it('announceLanguageChanged is callable', () => {
+    const { result } = renderHook(() => useLanguageChangeAnnouncements(), { wrapper: Wrapper });
+    expect(typeof result.current.announceLanguageChanged).toBe('function');
+    act(() => result.current.announceLanguageChanged('German'));
+  });
+});