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

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

@@ -1,14 +1,15 @@
 'use client';
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useEventBus } from '../../../contexts/EventBusContext';
+import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { DetectionProgressWidget } from '../../DetectionProgressWidget';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, paths, Selector } from '@semiont/api-client';
-import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { PanelHeader } from './PanelHeader';
-import { supportsDetection } from '../../../lib/resource-utils';
 import './ReferencesPanel.css';
 
 type Annotation = components['schemas']['Annotation'];
@@ -47,12 +48,6 @@ interface DetectionLog {
 interface Props {
   // Generic panel props
   annotations?: Annotation[];
-  onAnnotationClick?: (annotation: Annotation) => void;
-  focusedAnnotationId?: string | null;
-  hoveredAnnotationId?: string | null;
-  onAnnotationHover?: (annotationId: string | null) => void;
-  onDetect?: (selectedTypes: string[], includeDescriptiveReferences?: boolean) => void;
-  onCreate: (entityType?: string) => void;
   isDetecting: boolean;
   detectionProgress: any; // TODO: type this properly
   annotateMode?: boolean;
@@ -61,47 +56,48 @@ interface Props {
 
   // Reference-specific props
   allEntityTypes: string[];
-  onCancelDetection: () => void;
-  onSearchDocuments?: (referenceId: string, searchTerm: string) => void;
-  onGenerateDocument?: (referenceId: string, options: { title: string; prompt?: string }) => void;
-  onCreateDocument?: (annotationUri: string, title: string, entityTypes: string[]) => void;
   generatingReferenceId?: string | null;
-  mediaType?: string | undefined;
   referencedBy?: ReferencedBy[];
   referencedByLoading?: boolean;
   pendingAnnotation: PendingAnnotation | null;
+  scrollToAnnotationId?: string | null;
+  onScrollCompleted?: () => void;
+  hoveredAnnotationId?: string | null;
 }
 
+/**
+ * Panel for managing reference annotations with entity type detection
+ *
+ * @emits detection:start - Start reference detection. Payload: { motivation: 'linking', options: { entityTypes: string[], includeDescriptiveReferences: boolean } }
+ * @emits annotation:create - Create new reference annotation. Payload: { motivation: 'linking', selector: Selector | Selector[], body: Body[] }
+ * @emits annotation:cancel-pending - Cancel pending reference annotation. Payload: undefined
+ * @subscribes annotation:click - Annotation clicked. Payload: { annotationId: string }
+ */
 export function ReferencesPanel({
   annotations = [],
-  onAnnotationClick,
-  focusedAnnotationId,
-  hoveredAnnotationId,
-  onAnnotationHover,
-  onDetect,
-  onCreate,
   isDetecting,
   detectionProgress,
   annotateMode = true,
   Link,
   routes,
   allEntityTypes,
-  onCancelDetection,
-  onSearchDocuments,
-  onGenerateDocument,
-  onCreateDocument,
   generatingReferenceId,
-  mediaType,
   referencedBy = [],
   referencedByLoading = false,
   pendingAnnotation,
+  scrollToAnnotationId,
+  onScrollCompleted,
+  hoveredAnnotationId,
 }: Props) {
   const t = useTranslations('DetectPanel');
   const tRef = useTranslations('ReferencesPanel');
+  const eventBus = useEventBus();
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
   const [lastDetectionLog, setLastDetectionLog] = useState<DetectionLog[] | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
   const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState(false);
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // Collapsible detection section state - load from localStorage, default expanded
   const [isDetectExpanded, setIsDetectExpanded] = useState(() => {
@@ -116,17 +112,108 @@ export function ReferencesPanel({
     localStorage.setItem('detect-section-expanded-reference', String(isDetectExpanded));
   }, [isDetectExpanded]);
 
-  const { sortedAnnotations, containerRef, handleAnnotationRef } =
-    useAnnotationPanel(annotations, hoveredAnnotationId);
+  // Direct ref management - replace useAnnotationPanel hook
+  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) {
+      // Calculate scroll position to center element in container
+      const elementTop = element.offsetTop;
+      const containerHeight = containerRef.current.clientHeight;
+      const elementHeight = element.offsetHeight;
+      const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
+
+      // Scroll to center
+      containerRef.current.scrollTo({ top: scrollTo, behavior: 'smooth' });
+
+      // Add pulse effect
+      element.classList.remove('semiont-annotation-pulse');
+      void element.offsetWidth; // Force reflow
+      element.classList.add('semiont-annotation-pulse');
+
+      // Notify completion
+      if (onScrollCompleted) {
+        onScrollCompleted();
+      }
+    } else {
+      console.warn('[ReferencesPanel] Element not found for scrollToAnnotationId:', scrollToAnnotationId);
+    }
+  }, [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();
+
+    // Only scroll if element is not fully visible
+    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 ReferenceEntry
+  }, [hoveredAnnotationId]);
 
-  // Check if detection is supported for this media type
-  const isTextResource = supportsDetection(mediaType);
+  // 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);
+  }, []);
+
+  useEventSubscriptions({
+    'annotation:click': handleAnnotationClick,
+  });
 
   // Clear log when starting new detection
   const handleDetect = () => {
-    if (!onDetect) return;
     setLastDetectionLog(null);
-    onDetect(selectedEntityTypes, includeDescriptiveReferences);
+    eventBus.emit('detection:start', {
+      motivation: 'linking',
+      options: {
+        entityTypes: selectedEntityTypes,
+        includeDescriptiveReferences,
+      },
+    });
   };
 
   // Track whether we've already saved the log for the current detection run
@@ -161,11 +248,32 @@ export function ReferencesPanel({
   };
 
   const handleCreateReference = () => {
-    const entityType = pendingEntityTypes.join(',') || undefined;
-    onCreate(entityType);
-    setPendingEntityTypes([]);
+    if (pendingAnnotation) {
+      const entityType = pendingEntityTypes.join(',') || undefined;
+      eventBus.emit('annotation:create', {
+        motivation: 'linking',
+        selector: pendingAnnotation.selector,
+        body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],
+      });
+      setPendingEntityTypes([]);
+    }
   };
 
+  // Escape key handler for cancelling pending annotation
+  useEffect(() => {
+    if (!pendingAnnotation) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        eventBus.emit('annotation:cancel-pending', undefined);
+        setPendingEntityTypes([]);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pendingAnnotation]);
+
   return (
     <div className="semiont-panel">
       <PanelHeader annotationType="reference" count={annotations.length} title={tRef('referencesTitle')} />
@@ -205,20 +313,34 @@ export function ReferencesPanel({
             </div>
           )}
 
-          <button
-            onClick={handleCreateReference}
-            className="semiont-button semiont-button--primary"
-            data-type="reference"
-          >
-            🔗 {tRef('createReference')}
-          </button>
+          <div className="semiont-annotation-prompt__footer">
+            <div className="semiont-annotation-prompt__actions">
+              <button
+                onClick={() => {
+                  eventBus.emit('annotation:cancel-pending', undefined);
+                  setPendingEntityTypes([]);
+                }}
+                className="semiont-button semiont-button--secondary"
+                data-type="reference"
+              >
+                {tRef('cancel')}
+              </button>
+              <button
+                onClick={handleCreateReference}
+                className="semiont-button semiont-button--primary"
+                data-type="reference"
+              >
+                🔗 {tRef('createReference')}
+              </button>
+            </div>
+          </div>
         </div>
       )}
 
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
         {/* Detection Section - only in Annotate mode and for text resources */}
-        {annotateMode && isTextResource && (
+        {annotateMode && (
           <div className="semiont-panel__section">
             <button
               onClick={() => setIsDetectExpanded(!isDetectExpanded)}
@@ -313,7 +435,6 @@ export function ReferencesPanel({
           {detectionProgress && (
             <DetectionProgressWidget
               progress={detectionProgress}
-              onCancel={onCancelDetection}
               annotationType="reference"
             />
           )}
@@ -364,15 +485,11 @@ export function ReferencesPanel({
                   key={reference.id}
                   reference={reference}
                   isFocused={reference.id === focusedAnnotationId}
-                  onClick={() => onAnnotationClick?.(reference)}
+                  isHovered={reference.id === hoveredAnnotationId}
                   routes={routes}
-                  onReferenceRef={handleAnnotationRef}
                   annotateMode={annotateMode}
                   isGenerating={reference.id === generatingReferenceId}
-                  {...(onAnnotationHover && { onReferenceHover: onAnnotationHover })}
-                  {...(onGenerateDocument && { onGenerateDocument })}
-                  {...(onCreateDocument && { onCreateDocument })}
-                  {...(onSearchDocuments && { onSearchDocuments })}
+                  ref={(el) => setEntryRef(reference.id, el)}
                 />
               ))
             )}

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useEventBus } from '../../../contexts/EventBusContext';
 import { formatLocaleDisplay } from '@semiont/api-client';
 import './ResourceInfoPanel.css';
 
@@ -10,22 +11,24 @@ interface Props {
   primaryMediaType?: string | undefined;
   primaryByteSize?: number | undefined;
   isArchived?: boolean;
-  onArchive?: () => void;
-  onUnarchive?: () => void;
-  onClone?: () => void;
 }
 
+/**
+ * Panel for displaying resource metadata and management actions
+ *
+ * @emits resource:clone - Clone this resource. Payload: undefined
+ * @emits resource:unarchive - Unarchive this resource. Payload: undefined
+ * @emits resource:archive - Archive this resource. Payload: undefined
+ */
 export function ResourceInfoPanel({
   documentEntityTypes,
   documentLocale,
   primaryMediaType,
   primaryByteSize,
   isArchived = false,
-  onArchive,
-  onUnarchive,
-  onClone
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
+  const eventBus = useEventBus();
 
   return (
     <div className="semiont-resource-info-panel">
@@ -92,50 +95,46 @@ export function ResourceInfoPanel({
       )}
 
       {/* Clone Action */}
-      {onClone && (
-        <div className="semiont-resource-info-panel__action-section">
-          <button
-            onClick={onClone}
-            className="semiont-resource-button semiont-resource-button--secondary"
-          >
-            🔗 {t('clone')}
-          </button>
-          <p className="semiont-resource-info-panel__description">
-            {t('cloneDescription')}
-          </p>
-        </div>
-      )}
+      <div className="semiont-resource-info-panel__action-section">
+        <button
+          onClick={() => eventBus.emit('resource:clone', undefined)}
+          className="semiont-resource-button semiont-resource-button--secondary"
+        >
+          🔗 {t('clone')}
+        </button>
+        <p className="semiont-resource-info-panel__description">
+          {t('cloneDescription')}
+        </p>
+      </div>
 
       {/* Archive/Unarchive Actions */}
-      {(onArchive || onUnarchive) && (
-        <div className="semiont-resource-info-panel__action-section">
-          {isArchived ? (
-            <>
-              <button
-                onClick={onUnarchive}
-                className="semiont-resource-button semiont-resource-button--secondary"
-              >
-                📤 {t('unarchive')}
-              </button>
-              <p className="semiont-resource-info-panel__description">
-                {t('unarchiveDescription')}
-              </p>
-            </>
-          ) : (
-            <>
-              <button
-                onClick={onArchive}
-                className="semiont-resource-button semiont-resource-button--archive"
-              >
-                📦 {t('archive')}
-              </button>
-              <p className="semiont-resource-info-panel__description">
-                {t('archiveDescription')}
-              </p>
-            </>
-          )}
-        </div>
-      )}
+      <div className="semiont-resource-info-panel__action-section">
+        {isArchived ? (
+          <>
+            <button
+              onClick={() => eventBus.emit('resource:unarchive', undefined)}
+              className="semiont-resource-button semiont-resource-button--secondary"
+            >
+              📤 {t('unarchive')}
+            </button>
+            <p className="semiont-resource-info-panel__description">
+              {t('unarchiveDescription')}
+            </p>
+          </>
+        ) : (
+          <>
+            <button
+              onClick={() => eventBus.emit('resource:archive', undefined)}
+              className="semiont-resource-button semiont-resource-button--archive"
+            >
+              📦 {t('archive')}
+            </button>
+            <p className="semiont-resource-info-panel__description">
+              {t('archiveDescription')}
+            </p>
+          </>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components } from '@semiont/api-client';
 import { isBodyResolved } from '@semiont/api-client';
@@ -27,28 +26,19 @@ export function StatisticsPanel({
   const t = useTranslations('StatisticsPanel');
 
   // Count stub vs resolved references
-  const stubCount = useMemo(
-    () => references.filter((r) => !isBodyResolved(r.body)).length,
-    [references]
-  );
-
-  const resolvedCount = useMemo(
-    () => references.filter((r) => isBodyResolved(r.body)).length,
-    [references]
-  );
+  const stubCount = references.filter((r) => !isBodyResolved(r.body)).length;
+  const resolvedCount = references.filter((r) => isBodyResolved(r.body)).length;
 
   // Count entity types from references (at annotation level)
-  const entityTypesList = useMemo(() => {
-    const entityTypeCounts = new Map<string, number>();
-    references.forEach((ref) => {
-      const entityTypes = getEntityTypes(ref);
-      entityTypes.forEach((type: string) => {
-        entityTypeCounts.set(type, (entityTypeCounts.get(type) || 0) + 1);
-      });
+  const entityTypeCounts = new Map<string, number>();
+  references.forEach((ref) => {
+    const entityTypes = getEntityTypes(ref);
+    entityTypes.forEach((type: string) => {
+      entityTypeCounts.set(type, (entityTypeCounts.get(type) || 0) + 1);
     });
+  });
 
-    return Array.from(entityTypeCounts.entries()).sort((a, b) => b[1] - a[1]); // Sort by count descending
-  }, [references]);
+  const entityTypesList = Array.from(entityTypeCounts.entries()).sort((a, b) => b[1] - a[1]); // Sort by count descending
 
   return (
     <div className="semiont-statistics-panel">

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

@@ -1,44 +1,30 @@
 '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 { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
+import { useEventBus } from '../../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
 interface TagEntryProps {
   tag: Annotation;
   isFocused: boolean;
-  onClick: () => void;
-  onTagRef: (tagId: string, el: HTMLElement | null) => void;
-  onTagHover?: (tagId: string | null) => void;
+  isHovered?: boolean;
 }
 
-export function TagEntry({
-  tag,
-  isFocused,
-  onClick,
-  onTagRef,
-  onTagHover,
-}: TagEntryProps) {
-  const tagRef = useRef<HTMLDivElement>(null);
-
-  // Register ref with parent
-  useEffect(() => {
-    onTagRef(tag.id, tagRef.current);
-    return () => {
-      onTagRef(tag.id, null);
-    };
-  }, [tag.id, onTagRef]);
-
-  // Scroll to tag when focused
-  useEffect(() => {
-    if (isFocused && tagRef.current) {
-      tagRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  }, [isFocused]);
+export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
+  function TagEntry(
+    {
+      tag,
+      isFocused,
+      isHovered = false,
+    },
+    ref
+  ) {
+  const eventBus = useEventBus();
 
   const selectedText = getAnnotationExactText(tag);
   const category = getTagCategory(tag);
@@ -47,11 +33,17 @@ export function TagEntry({
 
   return (
     <div
-      ref={tagRef}
-      onClick={onClick}
-      onMouseEnter={() => onTagHover?.(tag.id)}
-      onMouseLeave={() => onTagHover?.(null)}
-      className="semiont-annotation-entry"
+      ref={ref}
+      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 });
+      }}
+      className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}
       data-type="tag"
       data-focused={isFocused ? 'true' : 'false'}
     >
@@ -73,4 +65,4 @@ export function TagEntry({
       </div>
     </div>
   );
-}
+});