@semiont/react-ui 0.2.33-build.81 → 0.2.33-build.83

package/package.json

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

package/src/components/CodeMirrorRenderer.tsx

@@ -9,6 +9,7 @@ import { ReferenceResolutionWidget } from '../lib/codemirror-widgets';
 import { isHighlight, isReference, isResolvedReference, isComment, isAssessment, isTag, getBodySource } from '@semiont/api-client';
 import type { components } from '@semiont/api-client';
 import type { EventBus } from '../contexts/EventBusContext';
+import { createHoverHandlers } from '../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -409,23 +410,21 @@ export function CodeMirrorRenderer({
     // Attach hover event listeners using native DOM events with delegation
     const container = view.dom;
 
+    const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
+      (annotationId) => eventBusRef.current?.emit('annotation:hover', { annotationId })
+    );
+
     const handleMouseOver = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
       const annotationId = annotationElement?.getAttribute('data-annotation-id');
-
-      if (annotationId && eventBusRef.current) {
-        eventBusRef.current.emit('annotation:hover', { annotationId });
-      }
+      if (annotationId) handleMouseEnter(annotationId);
     };
 
     const handleMouseOut = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
-
-      if (annotationElement && eventBusRef.current) {
-        eventBusRef.current.emit('annotation:hover', { annotationId: null });
-      }
+      if (annotationElement) handleMouseLeave();
     };
 
     container.addEventListener('mouseover', handleMouseOver);
@@ -434,6 +433,7 @@ export function CodeMirrorRenderer({
     return () => {
       container.removeEventListener('mouseover', handleMouseOver);
       container.removeEventListener('mouseout', handleMouseOut);
+      cleanupHover();
       view.destroy();
       viewRef.current = null;
     };

package/src/components/annotation/AnnotateToolbar.tsx

@@ -299,7 +299,10 @@ export function AnnotateToolbar({
         onPin={() => setClickPinned(!clickPinned)}
         containerRef={clickRef}
         collapsedContent={
-          <div className="semiont-dropdown-display">
+          <div
+            className="semiont-dropdown-display"
+            data-delete={clickActions.find(a => a.action === selectedClick)?.isDelete ? 'true' : 'false'}
+          >
             <span className="semiont-dropdown-icon">
               {clickActions.find(a => a.action === selectedClick)?.icon}
             </span>

package/src/components/image-annotation/AnnotationOverlay.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useRef } from 'react';
+import { useMemo } from 'react';
 import type { components } from '@semiont/api-client';
+import { createHoverHandlers } from '../../hooks/useAttentionFlow';
 import { getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
 import { parseSvgSelector } from '@semiont/api-client';
 import type { EventBus } from '../../contexts/EventBusContext';
@@ -77,22 +78,10 @@ export function AnnotationOverlay({
   const scaleX = displayWidth / imageWidth;
   const scaleY = displayHeight / imageHeight;
 
-  // Track current hover state to prevent redundant emissions
-  const currentHover = useRef<string | null>(null);
-
-  const handleMouseEnter = (annotationId: string) => {
-    if (currentHover.current !== annotationId) {
-      currentHover.current = annotationId;
-      eventBus?.emit('annotation:hover', { annotationId });
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (currentHover.current !== null) {
-      currentHover.current = null;
-      eventBus?.emit('annotation:hover', { annotationId: null });
-    }
-  };
+  const { handleMouseEnter, handleMouseLeave } = useMemo(
+    () => createHoverHandlers((annotationId) => eventBus?.emit('annotation:hover', { annotationId })),
+    [eventBus]
+  );
 
   return (
     <svg

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

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { createHoverHandlers } from '../../hooks/useAttentionFlow';
 import type { components, ResourceUri } from '@semiont/api-client';
 import { getTargetSelector } from '@semiont/api-client';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
@@ -97,9 +98,6 @@ export function PdfAnnotationCanvas({
   const containerRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
 
-  // Track current hover state to prevent redundant emissions
-  const currentHover = useRef<string | null>(null);
-
   // Load PDF document on mount
   useEffect(() => {
     let cancelled = false;
@@ -362,20 +360,11 @@ export function PdfAnnotationCanvas({
     return page === pageNumber;
   });
 
-  // Hover handlers with state tracking
-  const handleMouseEnter = (annotationId: string) => {
-    if (currentHover.current !== annotationId) {
-      currentHover.current = annotationId;
-      eventBus?.emit('annotation:hover', { annotationId });
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (currentHover.current !== null) {
-      currentHover.current = null;
-      eventBus?.emit('annotation:hover', { annotationId: null });
-    }
-  };
+  // Hover handlers with currentHover guard and dwell delay
+  const { handleMouseEnter, handleMouseLeave } = useMemo(
+    () => createHoverHandlers((annotationId) => eventBus?.emit('annotation:hover', { annotationId })),
+    [eventBus]
+  );
 
   // Calculate motivation color
   const { stroke, fill } = getMotivationColor(selectedMotivation ?? null);

package/src/components/resource/BrowseView.tsx

@@ -8,6 +8,7 @@ import { rehypeRenderAnnotations } from '../../lib/rehype-render-annotations';
 import type { components } from '@semiont/api-client';
 import { getExactText, getTextPositionSelector, getTargetSelector, getBodySource, getMimeCategory, isPdfMimeType, resourceUri as toResourceUri } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
+import { createHoverHandlers } from '../../hooks/useAttentionFlow';
 import { ImageViewer } from '../viewers';
 import { AnnotateToolbar, type ClickAction } from '../annotation/AnnotateToolbar';
 import type { AnnotationsCollection } from '../../types/annotation-props';
@@ -115,25 +116,23 @@ export function BrowseView({
       }
     };
 
+    const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
+      (annotationId) => eventBus.emit('annotation:hover', { annotationId })
+    );
+
     // Single mouseover handler for the container - fires once on enter
     const handleMouseOver = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
       const annotationId = annotationElement?.getAttribute('data-annotation-id');
-
-      if (annotationId) {
-        eventBus.emit('annotation:hover', { annotationId });
-      }
+      if (annotationId) handleMouseEnter(annotationId);
     };
 
     // Single mouseout handler for the container - fires once on exit
     const handleMouseOut = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
-
-      if (annotationElement) {
-        eventBus.emit('annotation:hover', { annotationId: null });
-      }
+      if (annotationElement) handleMouseLeave();
     };
 
     // Apply animation classes to new annotations
@@ -155,6 +154,7 @@ export function BrowseView({
       container.removeEventListener('click', handleClick);
       container.removeEventListener('mouseover', handleMouseOver);
       container.removeEventListener('mouseout', handleMouseOut);
+      cleanupHover();
     };
   }, [content, allAnnotations, newAnnotationIds]);
 

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

@@ -320,30 +320,38 @@ describe('BrowseView Component', () => {
       });
     });
 
-    it('should emit annotation:hover with null when mouse exits annotation', async () => {
+    it('should emit annotation:hover with null when mouse exits after dwell', async () => {
+      vi.useFakeTimers();
       const tracker = createEventTracker();
-      const { container } = renderWithEventTracking(<BrowseView {...defaultProps} />, tracker);
+      const annotations = {
+        ...defaultProps.annotations,
+        references: [createMockAnnotation('linking', 'ref-1')],
+      };
+      const { container } = renderWithEventTracking(
+        <BrowseView {...defaultProps} annotations={annotations} />,
+        tracker
+      );
 
       const browseContainer = container.querySelector('.semiont-browse-view__content');
 
-      // Create annotation element
       const mockAnnotationElement = document.createElement('span');
       mockAnnotationElement.setAttribute('data-annotation-id', 'ref-1');
+      const mockTarget = { closest: vi.fn(() => mockAnnotationElement) } as any;
 
-      const mockTarget = {
-        closest: vi.fn(() => mockAnnotationElement),
-      } as any;
+      // Enter and let dwell timer fire
+      fireEvent.mouseOver(browseContainer!, { target: mockTarget });
+      vi.advanceTimersByTime(200);
 
       tracker.clear();
 
-      // Simulate mouseout event (fires once on exit)
+      // Now exit — should emit null
       fireEvent.mouseOut(browseContainer!, { target: mockTarget });
 
-      await waitFor(() => {
-        expect(tracker.events.some(e =>
-          e.event === 'annotation:hover' && e.payload?.annotationId === null
-        )).toBe(true);
-      });
+      expect(tracker.events.some(e =>
+        e.event === 'annotation:hover' && e.payload?.annotationId === null
+      )).toBe(true);
+
+      vi.useRealTimers();
     });
 
     it('should not emit on mouseover when not over annotation', async () => {

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

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
+import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -76,6 +77,7 @@ export const AssessmentEntry = forwardRef<HTMLDivElement, AssessmentEntryProps>(
     ref
   ) {
   const eventBus = useEventBus();
+  const hoverProps = useHoverEmitter(assessment.id);
 
   const selectedText = getAnnotationExactText(assessment);
   const assessmentText = getAssessmentText(assessment);
@@ -89,12 +91,7 @@ export const AssessmentEntry = forwardRef<HTMLDivElement, AssessmentEntryProps>(
       onClick={() => {
         eventBus.emit('annotation:click', { annotationId: assessment.id, motivation: assessment.motivation });
       }}
-      onMouseEnter={() => {
-        eventBus.emit('annotation:hover', { annotationId: assessment.id });
-      }}
-      onMouseLeave={() => {
-        eventBus.emit('annotation:hover', { annotationId: null });
-      }}
+      {...hoverProps}
     >
       {/* Selected text quote */}
       {selectedText && (

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

@@ -5,6 +5,7 @@ import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components } from '@semiont/api-client';
 import { getAnnotationExactText, getCommentText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
+import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -44,6 +45,7 @@ export const CommentEntry = forwardRef<HTMLDivElement, CommentEntryProps>(
   ) {
   const t = useTranslations('CommentsPanel');
   const eventBus = useEventBus();
+  const hoverProps = useHoverEmitter(comment.id);
   const [isEditing, setIsEditing] = useState(false);
   const [editText, setEditText] = useState('');
   const internalRef = useRef<HTMLDivElement>(null);
@@ -88,12 +90,7 @@ export const CommentEntry = forwardRef<HTMLDivElement, CommentEntryProps>(
       onClick={() => {
         eventBus.emit('annotation:click', { annotationId: comment.id, motivation: comment.motivation });
       }}
-      onMouseEnter={() => {
-        eventBus.emit('annotation:hover', { annotationId: comment.id });
-      }}
-      onMouseLeave={() => {
-        eventBus.emit('annotation:hover', { annotationId: null });
-      }}
+      {...hoverProps}
     >
       {/* Selected text quote - only for text annotations */}
       {selectedText && (

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

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { useEventBus } from '../../../contexts/EventBusContext';
+import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -40,6 +41,7 @@ export const HighlightEntry = forwardRef<HTMLDivElement, HighlightEntryProps>(
     ref
   ) {
   const eventBus = useEventBus();
+  const hoverProps = useHoverEmitter(highlight.id);
 
   const selectedText = getAnnotationExactText(highlight);
 
@@ -52,12 +54,7 @@ export const HighlightEntry = forwardRef<HTMLDivElement, HighlightEntryProps>(
       onClick={() => {
         eventBus.emit('annotation:click', { annotationId: highlight.id, motivation: highlight.motivation });
       }}
-      onMouseEnter={() => {
-        eventBus.emit('annotation:hover', { annotationId: highlight.id });
-      }}
-      onMouseLeave={() => {
-        eventBus.emit('annotation:hover', { annotationId: null });
-      }}
+      {...hoverProps}
     >
       {/* Highlighted text */}
       {selectedText && (

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

@@ -9,6 +9,7 @@ import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { useObservableExternalNavigation } from '../../../hooks/useObservableNavigation';
+import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -42,6 +43,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
   const t = useTranslations('ReferencesPanel');
   const eventBus = useEventBus();
   const navigate = useObservableExternalNavigation();
+  const hoverProps = useHoverEmitter(reference.id);
 
   const selectedText = getAnnotationExactText(reference) || '';
   const isResolved = isBodyResolved(reference.body);
@@ -121,12 +123,7 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
       onClick={() => {
         eventBus.emit('annotation:click', { annotationId: reference.id, motivation: reference.motivation });
       }}
-      onMouseEnter={() => {
-        eventBus.emit('annotation:hover', { annotationId: reference.id });
-      }}
-      onMouseLeave={() => {
-        eventBus.emit('annotation:hover', { annotationId: null });
-      }}
+      {...hoverProps}
     >
       {/* Status indicator and text quote */}
       <div className="semiont-annotation-entry__header">

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

@@ -6,6 +6,7 @@ import { getAnnotationExactText } from '@semiont/api-client';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
 import { useEventBus } from '../../../contexts/EventBusContext';
+import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -25,6 +26,7 @@ export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
     ref
   ) {
   const eventBus = useEventBus();
+  const hoverProps = useHoverEmitter(tag.id);
 
   const selectedText = getAnnotationExactText(tag);
   const category = getTagCategory(tag);
@@ -37,12 +39,7 @@ export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
       onClick={() => {
         eventBus.emit('annotation:click', { annotationId: tag.id, motivation: tag.motivation });
       }}
-      onMouseEnter={() => {
-        eventBus.emit('annotation:hover', { annotationId: tag.id });
-      }}
-      onMouseLeave={() => {
-        eventBus.emit('annotation:hover', { annotationId: null });
-      }}
+      {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}
       data-type="tag"
       data-focused={isFocused ? 'true' : 'false'}

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

@@ -283,6 +283,11 @@ export function TaggingPanel({
                             value: e.target.value,
                             purpose: 'tagging' as const,
                           },
+                          {
+                            type: 'TextualBody' as const,
+                            value: selectedSchemaId,
+                            purpose: 'classifying' as const,
+                          },
                         ],
                       });
                     }

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

@@ -273,7 +273,8 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Hover Interactions', () => {
-    it('should emit annotation:hover event with annotation id on mouse enter', () => {
+    it('should emit annotation:hover event with annotation id after dwell delay', () => {
+      vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
@@ -287,13 +288,21 @@ describe('CommentEntry Component', () => {
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
 
+      // Not emitted immediately — dwell timer pending
+      expect(hoverHandler).not.toHaveBeenCalled();
+
+      // Advance past HOVER_DELAY_MS
+      vi.advanceTimersByTime(200);
+
       expect(hoverHandler).toHaveBeenCalledWith({ annotationId: 'comment-1' });
 
       // Clean up
       eventBus!.off('annotation:hover', hoverHandler);
+      vi.useRealTimers();
     });
 
-    it('should emit annotation:hover event with null on mouse leave', () => {
+    it('should NOT emit annotation:hover when mouse leaves before dwell delay', () => {
+      vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
@@ -305,12 +314,41 @@ describe('CommentEntry Component', () => {
       eventBus!.on('annotation:hover', hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
-      fireEvent.mouseLeave(commentDiv);
+      fireEvent.mouseEnter(commentDiv);
+      fireEvent.mouseLeave(commentDiv); // leaves before timer fires
+
+      vi.advanceTimersByTime(200);
 
-      expect(hoverHandler).toHaveBeenCalledWith({ annotationId: null });
+      // Timer was cancelled — no event emitted at all
+      expect(hoverHandler).not.toHaveBeenCalled();
 
       // Clean up
       eventBus!.off('annotation:hover', hoverHandler);
+      vi.useRealTimers();
+    });
+
+    it('should emit annotation:hover null after dwell then leave', () => {
+      vi.useFakeTimers();
+      const hoverHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      eventBus!.on('annotation:hover', hoverHandler);
+
+      const commentDiv = container.firstChild as HTMLElement;
+      fireEvent.mouseEnter(commentDiv);
+      vi.advanceTimersByTime(200); // hover committed
+
+      fireEvent.mouseLeave(commentDiv);
+
+      expect(hoverHandler).toHaveBeenNthCalledWith(1, { annotationId: 'comment-1' });
+      expect(hoverHandler).toHaveBeenNthCalledWith(2, { annotationId: null });
+
+      eventBus!.off('annotation:hover', hoverHandler);
+      vi.useRealTimers();
     });
 
     it('should handle hover events without errors', () => {

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

@@ -386,6 +386,50 @@ describe('TaggingPanel Component', () => {
       });
     });
 
+    it('should include schema id as classifying body alongside tagging body', async () => {
+      // Regression: manual tags were missing the classifying body, so getTagSchemaId()
+      // returned undefined and TagEntry never showed the schema name.
+      const tracker = createEventTracker();
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      renderWithEventBus(
+        <TaggingPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />,
+        tracker
+      );
+
+      const categorySelects = screen.getAllByRole('combobox');
+      const categorySelect = categorySelects.find(select =>
+        select.querySelector('option[value=""]')?.textContent === 'Choose a category'
+      );
+      await userEvent.selectOptions(categorySelect!, 'Rule');
+
+      await waitFor(() => {
+        const createEvent = tracker.events.find(e => e.event === 'annotation:create');
+        expect(createEvent).toBeDefined();
+        const body: any[] = createEvent!.payload.body;
+
+        // Must have exactly two body elements
+        expect(body).toHaveLength(2);
+
+        // First: the category
+        expect(body[0]).toMatchObject({
+          type: 'TextualBody',
+          value: 'Rule',
+          purpose: 'tagging',
+        });
+
+        // Second: the schema id — this is what was missing before the fix
+        expect(body[1]).toMatchObject({
+          type: 'TextualBody',
+          value: 'legal-irac',
+          purpose: 'classifying',
+        });
+      });
+    });
+
     it('should have proper styling for tag creation form', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 

package/src/components/toolbar/Toolbar.css

@@ -79,6 +79,26 @@
   color: var(--semiont-color-gray-300);
 }
 
+.semiont-dropdown-display[data-delete="true"] {
+  background: var(--semiont-color-error);
+  color: var(--semiont-color-white);
+  border-radius: var(--semiont-radius-sm);
+  padding: 0.125rem 0.375rem;
+}
+
+.semiont-dropdown-display[data-delete="true"] .semiont-dropdown-label {
+  color: var(--semiont-color-white);
+}
+
+[data-theme="dark"] .semiont-dropdown-display[data-delete="true"] {
+  background: var(--semiont-color-error-dark);
+  color: var(--semiont-color-error-light);
+}
+
+[data-theme="dark"] .semiont-dropdown-display[data-delete="true"] .semiont-dropdown-label {
+  color: var(--semiont-color-error-light);
+}
+
 .semiont-dropdown-menu {
   position: absolute;
   top: 100%;