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

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' }], // 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>
   );
-}
+});

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

@@ -1,13 +1,14 @@
 'use client';
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useMakeMeaningEvents } from '../../../contexts/MakeMeaningEventBusContext';
+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 './ReferencesPanel.css';
 
@@ -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,46 +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;
   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,
   referencedBy = [],
   referencedByLoading = false,
   pendingAnnotation,
+  scrollToAnnotationId,
+  onScrollCompleted,
+  hoveredAnnotationId,
 }: Props) {
   const t = useTranslations('DetectPanel');
   const tRef = useTranslations('ReferencesPanel');
-  const eventBus = useMakeMeaningEvents();
+  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(() => {
@@ -115,14 +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]);
+
+  // 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
@@ -157,9 +248,15 @@ 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
@@ -168,14 +265,14 @@ export function ReferencesPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('ui:annotation:cancel-pending');
+        eventBus.emit('annotation:cancel-pending', undefined);
         setPendingEntityTypes([]);
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation, eventBus]);
+  }, [pendingAnnotation]);
 
   return (
     <div className="semiont-panel">
@@ -220,7 +317,7 @@ export function ReferencesPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.emit('ui:annotation:cancel-pending');
+                  eventBus.emit('annotation:cancel-pending', undefined);
                   setPendingEntityTypes([]);
                 }}
                 className="semiont-button semiont-button--secondary"
@@ -243,7 +340,7 @@ export function ReferencesPanel({
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
         {/* Detection Section - only in Annotate mode and for text resources */}
-        {annotateMode && onDetect && (
+        {annotateMode && (
           <div className="semiont-panel__section">
             <button
               onClick={() => setIsDetectExpanded(!isDetectExpanded)}
@@ -338,7 +435,6 @@ export function ReferencesPanel({
           {detectionProgress && (
             <DetectionProgressWidget
               progress={detectionProgress}
-              onCancel={onCancelDetection}
               annotationType="reference"
             />
           )}
@@ -389,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>
   );
 }