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

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

@@ -1,11 +1,12 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, 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 { components, Selector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { CommentEntry } from './CommentEntry';
-import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
 import { DetectSection } from './DetectSection';
 import { PanelHeader } from './PanelHeader';
 import './CommentsPanel.css';
@@ -38,45 +39,139 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
 
 interface CommentsPanelProps {
   annotations: Annotation[];
-  onAnnotationClick: (annotation: Annotation) => void;
-  onCreate: (commentText: string) => void;
-  focusedAnnotationId: string | null;
-  hoveredAnnotationId?: string | null;
-  onAnnotationHover?: (annotationId: string | null) => void;
   pendingAnnotation: PendingAnnotation | null;
   annotateMode?: boolean;
-  onDetect?: (instructions?: string, tone?: string) => void | Promise<void>;
   isDetecting?: boolean;
   detectionProgress?: {
     status: string;
     percentage?: number;
     message?: string;
   } | null;
+  scrollToAnnotationId?: string | null;
+  onScrollCompleted?: () => void;
+  hoveredAnnotationId?: string | null;
 }
 
+/**
+ * Panel for managing comment annotations with text input
+ *
+ * @emits annotation:create - Create new comment annotation. Payload: { motivation: 'commenting', selector: Selector | Selector[], body: Body[] }
+ * @emits annotation:cancel-pending - Cancel pending comment annotation. Payload: undefined
+ * @subscribes annotation:click - Annotation clicked. Payload: { annotationId: string }
+ */
 export function CommentsPanel({
   annotations,
-  onAnnotationClick,
-  onCreate,
-  focusedAnnotationId,
-  hoveredAnnotationId,
-  onAnnotationHover,
   pendingAnnotation,
   annotateMode = true,
-  onDetect,
   isDetecting = false,
   detectionProgress,
+  scrollToAnnotationId,
+  onScrollCompleted,
+  hoveredAnnotationId,
 }: CommentsPanelProps) {
   const t = useTranslations('CommentsPanel');
-  const eventBus = useMakeMeaningEvents();
+  const eventBus = useEventBus();
   const [newCommentText, setNewCommentText] = useState('');
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 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();
+      }
+    }
+  }, [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 CommentEntry
+  }, [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,
+  });
 
   const handleSaveNewComment = () => {
-    if (newCommentText.trim()) {
-      onCreate(newCommentText);
+    if (newCommentText.trim() && pendingAnnotation) {
+      eventBus.emit('annotation:create', {
+        motivation: 'commenting',
+        selector: pendingAnnotation.selector,
+        body: [{ type: 'TextualBody', value: newCommentText, purpose: 'commenting' }],
+      });
       setNewCommentText('');
     }
   };
@@ -87,14 +182,14 @@ export function CommentsPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('ui:annotation:cancel-pending');
+        eventBus.emit('annotation:cancel-pending', undefined);
         setNewCommentText('');
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation, eventBus]);
+  }, [pendingAnnotation]);
 
   return (
     <div className="semiont-panel">
@@ -129,7 +224,7 @@ export function CommentsPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.emit('ui:annotation:cancel-pending');
+                  eventBus.emit('annotation:cancel-pending', undefined);
                   setNewCommentText('');
                 }}
                 className="semiont-button semiont-button--secondary"
@@ -153,12 +248,11 @@ export function CommentsPanel({
       {/* 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="comment"
             isDetecting={isDetecting}
             detectionProgress={detectionProgress}
-            onDetect={onDetect}
           />
         )}
 
@@ -174,10 +268,9 @@ export function CommentsPanel({
                 key={comment.id}
                 comment={comment}
                 isFocused={comment.id === focusedAnnotationId}
-                onClick={() => onAnnotationClick(comment)}
-                onCommentRef={handleAnnotationRef}
-                {...(onAnnotationHover && { onCommentHover: onAnnotationHover })}
+                isHovered={comment.id === hoveredAnnotationId}
                 annotateMode={annotateMode}
+                ref={(el) => setEntryRef(comment.id, el)}
               />
             ))
           )}

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

@@ -1,7 +1,9 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } 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,19 +27,24 @@ 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 } }
+ * @emits detection:dismiss-progress - Dismiss the detection progress display
  */
 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('');
+  type ToneValue = 'scholarly' | 'explanatory' | 'conversational' | 'technical' | 'analytical' | 'critical' | 'balanced' | 'constructive' | '';
+  const [tone, setTone] = useState<ToneValue>('');
   // Default density depends on annotation type
   const defaultDensity = annotationType === 'comment' ? 5 : annotationType === 'assessment' ? 4 : annotationType === 'highlight' ? 5 : 5;
   const [density, setDensity] = useState(defaultDensity);
@@ -57,16 +63,31 @@ export function DetectSection({
     localStorage.setItem(`detect-section-expanded-${annotationType}`, String(isExpanded));
   }, [isExpanded, annotationType]);
 
-  const handleDetect = () => {
-    onDetect(
-      instructions.trim() || undefined,
-      (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
-      (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined
-    );
+  const handleDetect = useCallback(() => {
+    // 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 : undefined,
+        density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
+      },
+    });
+
     setInstructions('');
     setTone('');
     // Don't reset density/useDensity - persist across detections
-  };
+  }, [annotationType, instructions, tone, useDensity, density]); // eventBus is stable singleton - never in deps
+
+  const handleDismissProgress = useCallback(() => {
+    eventBus.emit('detection:dismiss-progress', undefined);
+  }, []); // eventBus is stable singleton - never in deps
 
   return (
     <div className="semiont-panel__section">
@@ -91,7 +112,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">
@@ -118,7 +140,7 @@ export function DetectSection({
                 </label>
                 <select
                   value={tone}
-                  onChange={(e) => setTone(e.target.value)}
+                  onChange={(e) => setTone(e.target.value as ToneValue)}
                   className="semiont-select"
                 >
                   <option value="">Default</option>
@@ -194,8 +216,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 +236,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={handleDismissProgress}
+                  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)}
               />
             ))
           )}