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

package/src/components/resource/panels/DetectSection.css

@@ -320,6 +320,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  position: relative;
 }
 
 .semiont-detection-progress__message {
@@ -329,13 +330,47 @@
   font-size: 0.875rem;
   color: var(--semiont-color-gray-900);
   font-weight: 500;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 2.5rem 0.75rem 1rem; /* Extra right padding for close button */
   border-radius: 0.5rem;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
   border: 2px solid rgba(59, 130, 246, 0.3);
   animation: semiont-detection-pulse 2s ease-in-out infinite;
 }
 
+.semiont-detection-progress__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: var(--semiont-color-gray-700);
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.semiont-detection-progress__close:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-detection-progress__close {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--semiont-color-gray-300);
+}
+
+[data-theme="dark"] .semiont-detection-progress__close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: var(--semiont-color-gray-100);
+}
+
 [data-theme="dark"] .semiont-detection-progress__message {
   color: var(--semiont-color-gray-100);
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));

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

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useEventBus } from '../../../contexts/EventBusContext';
+import type { Motivation } from '@semiont/api-client';
 import './DetectSection.css';
 
 interface DetectSectionProps {
@@ -13,7 +15,6 @@ interface DetectSectionProps {
     message?: string;
     requestParams?: Array<{ label: string; value: string }>;
   } | null | undefined;
-  onDetect: (instructions?: string, tone?: string, density?: number) => void | Promise<void>;
 }
 
 // Color schemes are now handled via CSS data attributes
@@ -26,17 +27,20 @@ interface DetectSectionProps {
  * - Optional tone selector (for comments)
  * - Detect button with sparkle animation
  * - Progress display during detection
+ *
+ * @emits detection:start - Start detection for annotation type. Payload: { motivation: Motivation, options: { instructions?: string, tone?: string, density?: number } }
  */
 export function DetectSection({
   annotationType,
   isDetecting,
   detectionProgress,
-  onDetect
 }: DetectSectionProps) {
+
   const panelName = annotationType === 'highlight' ? 'HighlightPanel' :
                      annotationType === 'assessment' ? 'AssessmentPanel' :
                      'CommentsPanel';
   const t = useTranslations(panelName);
+  const eventBus = useEventBus();
   const [instructions, setInstructions] = useState('');
   const [tone, setTone] = useState('');
   // Default density depends on annotation type
@@ -58,11 +62,22 @@ export function DetectSection({
   }, [isExpanded, annotationType]);
 
   const handleDetect = () => {
-    onDetect(
-      instructions.trim() || undefined,
-      (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
-      (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined
-    );
+    // Map annotation type to motivation
+    const motivation: Motivation =
+      annotationType === 'highlight' ? 'highlighting' :
+      annotationType === 'assessment' ? 'assessing' :
+      'commenting';
+
+    // Emit detection:start event with options
+    eventBus.emit('detection:start', {
+      motivation,
+      options: {
+        instructions: instructions.trim() || undefined,
+        tone: (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone as any : undefined,
+        density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
+      },
+    });
+
     setInstructions('');
     setTone('');
     // Don't reset density/useDensity - persist across detections
@@ -91,7 +106,8 @@ export function DetectSection({
           data-detecting={isDetecting && detectionProgress ? 'true' : 'false'}
           data-type={annotationType}
         >
-        {!isDetecting && !detectionProgress && (
+        {/* Show form when NOT detecting and NO progress to display */}
+        {!detectionProgress && (
           <>
             <div className="semiont-form-field">
               <label className="semiont-form-field__label">
@@ -194,8 +210,8 @@ export function DetectSection({
           </>
         )}
 
-        {/* Detection Progress */}
-        {isDetecting && detectionProgress && (
+        {/* Detection Progress - show whenever we have progress (during or after detection) */}
+        {detectionProgress && (
           <div className="semiont-detection-progress" data-type={annotationType}>
             {/* Request Parameters */}
             {detectionProgress.requestParams && detectionProgress.requestParams.length > 0 && (
@@ -214,6 +230,18 @@ export function DetectSection({
                 <span className="semiont-detection-progress__icon">✨</span>
                 <span>{detectionProgress.message}</span>
               </div>
+              {/* Close button - shown after detection completes (when not actively detecting) */}
+              {!isDetecting && (
+                <button
+                  onClick={() => eventBus.emit('detection:dismiss-progress', undefined)}
+                  className="semiont-detection-progress__close"
+                  aria-label={t('closeProgress')}
+                  title={t('closeProgress')}
+                  type="button"
+                >
+                  ×
+                </button>
+              )}
             </div>
           </div>
         )}

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

@@ -1,17 +1,16 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { forwardRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getAnnotationExactText } from '@semiont/api-client';
+import { useEventBus } from '../../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
 interface HighlightEntryProps {
   highlight: Annotation;
   isFocused: boolean;
-  onClick: () => void;
-  onHighlightRef: (highlightId: string, el: HTMLElement | null) => void;
-  onHighlightHover?: (highlightId: string | null) => void;
+  isHovered?: boolean;
 }
 
 function formatRelativeTime(isoString: string): string {
@@ -31,41 +30,34 @@ function formatRelativeTime(isoString: string): string {
   return date.toLocaleDateString();
 }
 
-export function HighlightEntry({
-  highlight,
-  isFocused,
-  onClick,
-  onHighlightRef,
-  onHighlightHover,
-}: HighlightEntryProps) {
-  const highlightRef = useRef<HTMLDivElement>(null);
-
-  // Register ref with parent
-  useEffect(() => {
-    onHighlightRef(highlight.id, highlightRef.current);
-    return () => {
-      onHighlightRef(highlight.id, null);
-    };
-  }, [highlight.id, onHighlightRef]);
-
-  // Scroll to highlight when focused
-  useEffect(() => {
-    if (isFocused && highlightRef.current) {
-      highlightRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  }, [isFocused]);
+export const HighlightEntry = forwardRef<HTMLDivElement, HighlightEntryProps>(
+  function HighlightEntry(
+    {
+      highlight,
+      isFocused,
+      isHovered = false,
+    },
+    ref
+  ) {
+  const eventBus = useEventBus();
 
   const selectedText = getAnnotationExactText(highlight);
 
   return (
     <div
-      ref={highlightRef}
-      className="semiont-annotation-entry"
+      ref={ref}
+      className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}
       data-type="highlight"
       data-focused={isFocused ? 'true' : 'false'}
-      onClick={onClick}
-      onMouseEnter={() => onHighlightHover?.(highlight.id)}
-      onMouseLeave={() => onHighlightHover?.(null)}
+      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 });
+      }}
     >
       {/* Highlighted text */}
       {selectedText && (
@@ -80,4 +72,4 @@ export function HighlightEntry({
       </div>
     </div>
   );
-}
+});

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

@@ -1,10 +1,12 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useEventBus } from '../../../contexts/EventBusContext';
+import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { HighlightEntry } from './HighlightEntry';
-import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
 import { DetectSection } from './DetectSection';
 import { PanelHeader } from './PanelHeader';
 import './HighlightPanel.css';
@@ -20,12 +22,6 @@ interface PendingAnnotation {
 
 interface HighlightPanelProps {
   annotations: Annotation[];
-  onAnnotationClick: (annotation: Annotation) => void;
-  focusedAnnotationId: string | null;
-  hoveredAnnotationId?: string | null;
-  onAnnotationHover?: (annotationId: string | null) => void;
-  onDetect?: (instructions?: string) => void | Promise<void>;
-  onCreate: (selector: Selector | Selector[]) => void;
   pendingAnnotation: PendingAnnotation | null;
   isDetecting?: boolean;
   detectionProgress?: {
@@ -34,34 +30,115 @@ interface HighlightPanelProps {
     message?: string;
   } | null;
   annotateMode?: boolean;
+  scrollToAnnotationId?: string | null;
+  onScrollCompleted?: () => void;
+  hoveredAnnotationId?: string | null;
 }
 
+/**
+ * Panel for managing highlight annotations with auto-creation
+ *
+ * @emits annotation:create - Create new highlight annotation (auto-triggered). Payload: { motivation: 'highlighting', selector: Selector | Selector[], body: Body[] }
+ * @subscribes annotation:click - Annotation clicked. Payload: { annotationId: string }
+ */
 export function HighlightPanel({
   annotations,
-  onAnnotationClick,
-  focusedAnnotationId,
-  hoveredAnnotationId,
-  onAnnotationHover,
-  onDetect,
-  onCreate,
   pendingAnnotation,
   isDetecting = false,
   detectionProgress,
   annotateMode = true,
+  scrollToAnnotationId,
+  onScrollCompleted,
+  hoveredAnnotationId,
 }: HighlightPanelProps) {
+
   const t = useTranslations('HighlightPanel');
+  const eventBus = useEventBus();
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Direct ref management
+  const entryRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  // Sort annotations by their position in the resource
+  const sortedAnnotations = useMemo(() => {
+    return [...annotations].sort((a, b) => {
+      const aSelector = getTextPositionSelector(getTargetSelector(a.target));
+      const bSelector = getTextPositionSelector(getTargetSelector(b.target));
+      if (!aSelector || !bSelector) return 0;
+      return aSelector.start - bSelector.start;
+    });
+  }, [annotations]);
+
+  // Ref callback for entry components
+  const setEntryRef = useCallback((id: string, element: HTMLDivElement | null) => {
+    if (element) {
+      entryRefs.current.set(id, element);
+    } else {
+      entryRefs.current.delete(id);
+    }
+  }, []);
+
+  // Handle scrollToAnnotationId (click scroll)
+  useEffect(() => {
+    if (!scrollToAnnotationId) return;
+    const element = entryRefs.current.get(scrollToAnnotationId);
+    if (element && containerRef.current) {
+      const elementTop = element.offsetTop;
+      const containerHeight = containerRef.current.clientHeight;
+      const elementHeight = element.offsetHeight;
+      const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
+      containerRef.current.scrollTo({ top: scrollTo, behavior: 'smooth' });
+      element.classList.remove('semiont-annotation-pulse');
+      void element.offsetWidth;
+      element.classList.add('semiont-annotation-pulse');
+      if (onScrollCompleted) onScrollCompleted();
+    }
+  }, [scrollToAnnotationId]);
+
+  // Handle hoveredAnnotationId (hover scroll only - pulse is handled by isHovered prop)
+  useEffect(() => {
+    if (!hoveredAnnotationId) return;
+    const element = entryRefs.current.get(hoveredAnnotationId);
+    if (!element || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+    if (!isVisible) {
+      const elementTop = element.offsetTop;
+      const containerHeight = container.clientHeight;
+      const elementHeight = element.offsetHeight;
+      const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
+      container.scrollTo({ top: scrollTo, behavior: 'smooth' });
+    }
+
+    // Pulse effect is handled by isHovered prop on HighlightEntry
+  }, [hoveredAnnotationId]);
+
+  // Subscribe to click events - update focused state
+  // Event handler for annotation clicks (extracted to avoid inline arrow function)
+  const handleAnnotationClick = useCallback(({ annotationId }: { annotationId: string }) => {
+    setFocusedAnnotationId(annotationId);
+    setTimeout(() => setFocusedAnnotationId(null), 3000);
+  }, []);
 
-  const { sortedAnnotations, containerRef, handleAnnotationRef } =
-    useAnnotationPanel(annotations, hoveredAnnotationId);
+  useEventSubscriptions({
+    'annotation:click': handleAnnotationClick,
+  });
 
   // Highlights auto-create: when pendingAnnotation arrives with highlighting motivation,
-  // immediately call onCreate without showing a form
+  // immediately emit annotation:create event
   useEffect(() => {
     if (pendingAnnotation && pendingAnnotation.motivation === 'highlighting') {
-      onCreate(pendingAnnotation.selector);
+      eventBus.emit('annotation:create', {
+        motivation: 'highlighting',
+        selector: pendingAnnotation.selector,
+        body: [],
+      });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pendingAnnotation]); // Only depend on pendingAnnotation, not onCreate (which is recreated on every render)
+  }, [pendingAnnotation]);
 
   return (
     <div className="semiont-panel">
@@ -70,12 +147,11 @@ export function HighlightPanel({
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
         {/* Detection Section - only in Annotate mode and for text resources */}
-        {annotateMode && onDetect && (
+        {annotateMode && (
           <DetectSection
             annotationType="highlight"
             isDetecting={isDetecting}
             detectionProgress={detectionProgress}
-            onDetect={onDetect}
           />
         )}
 
@@ -91,9 +167,8 @@ export function HighlightPanel({
                 key={highlight.id}
                 highlight={highlight}
                 isFocused={highlight.id === focusedAnnotationId}
-                onClick={() => onAnnotationClick(highlight)}
-                onHighlightRef={handleAnnotationRef}
-                {...(onAnnotationHover && { onHighlightHover: onAnnotationHover })}
+                isHovered={highlight.id === hoveredAnnotationId}
+                ref={(el) => setEntryRef(highlight.id, el)}
               />
             ))
           )}

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

@@ -1,12 +1,14 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { forwardRef } from 'react';
 import type { RouteBuilder } from '../../../contexts/RoutingContext';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components } from '@semiont/api-client';
 import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/api-client';
 import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
+import { useEventBus } from '../../../contexts/EventBusContext';
+import { useObservableExternalNavigation } from '../../../hooks/useObservableNavigation';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -19,68 +21,27 @@ interface EnrichedAnnotation extends Annotation {
 interface ReferenceEntryProps {
   reference: Annotation;
   isFocused: boolean;
-  onClick: () => void;
+  isHovered?: boolean;
   routes: RouteBuilder;
-  onReferenceRef: (referenceId: string, el: HTMLElement | null) => void;
-  onReferenceHover?: (referenceId: string | null) => void;
-  onGenerateDocument?: (referenceId: string, options: { title: string; prompt?: string }) => void;
-  onCreateDocument?: (annotationUri: string, title: string, entityTypes: string[]) => void;
-  onSearchDocuments?: (referenceId: string, searchTerm: string) => void;
-  onUpdateReference?: (referenceId: string, updates: Partial<Annotation>) => void;
   annotateMode?: boolean;
   isGenerating?: boolean;
 }
 
-export function ReferenceEntry({
-  reference,
-  isFocused,
-  onClick,
-  routes,
-  onReferenceRef,
-  onReferenceHover,
-  onGenerateDocument,
-  onCreateDocument,
-  onSearchDocuments,
-  onUpdateReference,
-  annotateMode = true,
-  isGenerating = false,
-}: ReferenceEntryProps) {
+export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
+  function ReferenceEntry(
+    {
+      reference,
+      isFocused,
+      isHovered = false,
+      routes,
+      annotateMode = true,
+      isGenerating = false,
+    },
+    ref
+  ) {
   const t = useTranslations('ReferencesPanel');
-  const referenceRef = useRef<HTMLDivElement>(null);
-
-  // Register ref with parent
-  useEffect(() => {
-    onReferenceRef(reference.id, referenceRef.current);
-    return () => {
-      onReferenceRef(reference.id, null);
-    };
-  }, [reference.id, onReferenceRef]);
-
-  // Scroll to reference when focused - use container.scrollTo to avoid scrolling ancestors
-  useEffect(() => {
-    if (isFocused && referenceRef.current) {
-      const element = referenceRef.current;
-      const container = element.closest('.semiont-toolbar-panels__content') as HTMLElement;
-
-      if (container) {
-        const elementRect = element.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-
-        const isVisible =
-          elementRect.top >= containerRect.top &&
-          elementRect.bottom <= containerRect.bottom;
-
-        if (!isVisible) {
-          const elementTop = element.offsetTop;
-          const containerHeight = container.clientHeight;
-          const elementHeight = element.offsetHeight;
-          const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
-
-          container.scrollTo({ top: scrollTo, behavior: 'smooth' });
-        }
-      }
-    }
-  }, [isFocused]);
+  const eventBus = useEventBus();
+  const navigate = useObservableExternalNavigation();
 
   const selectedText = getAnnotationExactText(reference) || '';
   const isResolved = isBodyResolved(reference.body);
@@ -103,44 +64,69 @@ export function ReferenceEntry({
     if (resolvedResourceUri) {
       const resourceId = resolvedResourceUri.split('/resources/')[1];
       if (resourceId) {
-        window.location.href = routes.resourceDetail(resourceId);
+        // Use observable navigation - emits 'navigation:external-navigate' event
+        navigate(routes.resourceDetail(resourceId), { resourceId });
       }
     }
   };
 
   const handleComposeDocument = () => {
-    if (onCreateDocument) {
-      onCreateDocument(reference.id, selectedText, entityTypes);
-    }
+    eventBus.emit('reference:create-manual', {
+      annotationUri: reference.id,
+      title: selectedText,
+      entityTypes,
+    });
   };
 
   const handleUnlink = () => {
-    if (onUpdateReference) {
-      onUpdateReference(reference.id, { body: [] });
+    // Unlinking removes all body items from the reference annotation
+    const sourceUri = typeof reference.target === 'object' && 'source' in reference.target
+      ? reference.target.source
+      : '';
+    if (sourceUri) {
+      eventBus.emit('annotation:update-body', {
+        annotationUri: reference.id,
+        resourceId: sourceUri.split('/resources/')[1] || '',
+        operations: [{ op: 'remove', item: null }], // Remove all body items
+      });
     }
   };
 
   const handleGenerate = () => {
-    if (onGenerateDocument) {
-      onGenerateDocument(reference.id, { title: selectedText });
-    }
+    const resourceUri = typeof reference.target === 'object' && 'source' in reference.target
+      ? reference.target.source
+      : '';
+
+    // Emit request to open generation modal
+    eventBus.emit('generation:modal-open', {
+      annotationUri: reference.id,
+      resourceUri,
+      defaultTitle: selectedText,
+    });
   };
 
   const handleSearch = () => {
-    if (onSearchDocuments) {
-      onSearchDocuments(reference.id, selectedText);
-    }
+    eventBus.emit('reference:link', {
+      annotationUri: reference.id,
+      searchTerm: selectedText,
+    });
   };
 
   return (
     <div
-      ref={referenceRef}
-      className="semiont-annotation-entry"
+      ref={ref}
+      className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}
       data-type="reference"
       data-focused={isFocused ? 'true' : 'false'}
-      onClick={onClick}
-      onMouseEnter={() => onReferenceHover?.(reference.id)}
-      onMouseLeave={() => onReferenceHover?.(null)}
+      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 });
+      }}
     >
       {/* Status indicator and text quote */}
       <div className="semiont-annotation-entry__header">
@@ -235,4 +221,4 @@ export function ReferenceEntry({
       </div>
     </div>
   );
-}
+});