@semiont/react-ui 0.2.35-build.99 → 0.2.36

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

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { components, Selector, AnnotationProgress } from '@semiont/core';
+import type { components, Selector, MarkProgress } from '@semiont/core';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { Annotator } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';
@@ -47,7 +47,7 @@ interface UnifiedAnnotationsPanelProps {
 
   // Annotation assistance state (per motivation)
   assistingMotivation?: Motivation | null;
-  progress?: AnnotationProgress | null;
+  progress?: MarkProgress | null;
 
   // Unified pending annotation (for creating new annotations)
   pendingAnnotation: PendingAnnotation | null;

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotate:create'] as const;
+      const panelEvents = ['mark:create'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -359,7 +359,7 @@ describe('AssessmentPanel Component', () => {
       expect(textarea).toHaveFocus();
     });
 
-    it('should emit annotate:createevent when save is clicked', async () => {
+    it('should emit mark:createevent when save is clicked', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -379,7 +379,7 @@ describe('AssessmentPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:create' &&
+          e.event === 'mark:create' &&
           e.payload?.motivation === 'assessing' &&
           e.payload?.body?.[0]?.value === 'My assessment'
         )).toBe(true);
@@ -420,7 +420,7 @@ describe('AssessmentPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:create' &&
+          e.event === 'mark:create' &&
           e.payload?.motivation === 'assessing' &&
           Array.isArray(e.payload?.body) &&
           e.payload.body.length === 0

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

@@ -277,7 +277,7 @@ describe('AssistSection', () => {
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
+      const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
       const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
       await user.click(annotateButton);
@@ -303,7 +303,7 @@ describe('AssistSection', () => {
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
+      const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
       const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
       await user.click(annotateButton);
@@ -329,7 +329,7 @@ describe('AssistSection', () => {
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
+      const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
       const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
       await user.click(annotateButton);
@@ -355,7 +355,7 @@ describe('AssistSection', () => {
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
+      const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
       const textarea = screen.getByPlaceholderText('Enter custom instructions...');
       await user.type(textarea, 'Find key concepts');

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

@@ -241,7 +241,7 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Click Interactions', () => {
-    it('should emit attend:click event when comment is clicked', async () => {
+    it('should emit browse:click event when comment is clicked', async () => {
       const clickHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
@@ -250,7 +250,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event on real event bus
-      const subscription = eventBus!.get('attend:click').subscribe(clickHandler);
+      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       await userEvent.click(commentDiv);
@@ -273,7 +273,7 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Hover Interactions', () => {
-    it('should emit attend:hover event with annotation id after dwell delay', () => {
+    it('should emit beckon:hover event with annotation id after dwell delay', () => {
       vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
@@ -283,7 +283,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event
-      const subscription = eventBus!.get('attend:hover').subscribe(hoverHandler);
+      const subscription = eventBus!.get('beckon:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -301,7 +301,7 @@ describe('CommentEntry Component', () => {
       vi.useRealTimers();
     });
 
-    it('should NOT emit attend:hover when mouse leaves before dwell delay', () => {
+    it('should NOT emit beckon:hover when mouse leaves before dwell delay', () => {
       vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
@@ -311,7 +311,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event
-      const subscription = eventBus!.get('attend:hover').subscribe(hoverHandler);
+      const subscription = eventBus!.get('beckon:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -327,7 +327,7 @@ describe('CommentEntry Component', () => {
       vi.useRealTimers();
     });
 
-    it('should emit attend:hover null after dwell then leave', () => {
+    it('should emit beckon:hover null after dwell then leave', () => {
       vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
@@ -336,7 +336,7 @@ describe('CommentEntry Component', () => {
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('attend:hover').subscribe(hoverHandler);
+      const subscription = eventBus!.get('beckon:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotate:create'] as const;
+      const panelEvents = ['mark:create'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -396,7 +396,7 @@ describe('CommentsPanel Component', () => {
       expect(textarea).toHaveFocus();
     });
 
-    it('should emit annotate:createevent when save is clicked', async () => {
+    it('should emit mark:createevent when save is clicked', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -416,7 +416,7 @@ describe('CommentsPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:create' &&
+          e.event === 'mark:create' &&
           e.payload?.motivation === 'commenting' &&
           e.payload?.body?.[0]?.value === 'My new comment'
         )).toBe(true);

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -6,7 +6,7 @@
  *
  * This is a Layer 2 test because it:
  * - Tests multiple real React components together (HighlightPanel + AssistSection)
- * - Uses real EventBus for attend:click events
+ * - Uses real EventBus for browse:click events
  * - Mocks API and external dependencies
  * - Tests the data flow between parent and child components
  */

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

@@ -25,7 +25,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotate:assist-request'] as const;
+      const panelEvents = ['mark:assist-request'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -302,7 +302,7 @@ describe('ReferencesPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:assist-request' &&
+          e.event === 'mark:assist-request' &&
           e.payload?.motivation === 'linking' &&
           e.payload?.options?.entityTypes?.includes('Person') &&
           e.payload?.options?.entityTypes?.includes('Organization') &&
@@ -327,7 +327,7 @@ describe('ReferencesPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:assist-request' &&
+          e.event === 'mark:assist-request' &&
           e.payload?.motivation === 'linking' &&
           e.payload?.options?.entityTypes?.includes('Person') &&
           e.payload?.options?.includeDescriptiveReferences === true

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

@@ -66,9 +66,9 @@ function createEventTracker() {
       };
 
       const resourceEvents = [
-        'generate:clone',
-        'resource:archive',
-        'resource:unarchive',
+        'yield:clone',
+        'mark:archive',
+        'mark:unarchive',
       ] as const;
 
       resourceEvents.forEach(eventName => {
@@ -248,7 +248,7 @@ describe('ResourceInfoPanel Component', () => {
       expect(screen.getByText('Generate a shareable clone link for this resource')).toBeInTheDocument();
     });
 
-    it('should emit generate:clone event when clone button clicked', async () => {
+    it('should emit yield:clone event when clone button clicked', async () => {
       const tracker = createEventTracker();
       renderWithEventBus(
         <ResourceInfoPanel
@@ -261,7 +261,7 @@ describe('ResourceInfoPanel Component', () => {
       fireEvent.click(button);
 
       await waitFor(() => {
-        expect(tracker.events.some(e => e.event === 'generate:clone')).toBe(true);
+        expect(tracker.events.some(e => e.event === 'yield:clone')).toBe(true);
       });
     });
   });
@@ -291,7 +291,7 @@ describe('ResourceInfoPanel Component', () => {
       expect(screen.getByText('Restore this resource to active status')).toBeInTheDocument();
     });
 
-    it('should emit resource:archive event when archive button clicked', async () => {
+    it('should emit mark:archive event when archive button clicked', async () => {
       const tracker = createEventTracker();
       renderWithEventBus(
         <ResourceInfoPanel
@@ -305,11 +305,11 @@ describe('ResourceInfoPanel Component', () => {
       fireEvent.click(button);
 
       await waitFor(() => {
-        expect(tracker.events.some(e => e.event === 'resource:archive')).toBe(true);
+        expect(tracker.events.some(e => e.event === 'mark:archive')).toBe(true);
       });
     });
 
-    it('should emit resource:unarchive event when unarchive button clicked', async () => {
+    it('should emit mark:unarchive event when unarchive button clicked', async () => {
       const tracker = createEventTracker();
       renderWithEventBus(
         <ResourceInfoPanel
@@ -323,7 +323,7 @@ describe('ResourceInfoPanel Component', () => {
       fireEvent.click(button);
 
       await waitFor(() => {
-        expect(tracker.events.some(e => e.event === 'resource:unarchive')).toBe(true);
+        expect(tracker.events.some(e => e.event === 'mark:unarchive')).toBe(true);
       });
     });
   });

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotate:create', 'annotate:assist-request'] as const;
+      const panelEvents = ['mark:create', 'mark:assist-request'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -354,7 +354,7 @@ describe('TaggingPanel Component', () => {
       expect(screen.getByText(/Select category/)).toBeInTheDocument();
     });
 
-    it('should emit annotate:createevent when category is selected', async () => {
+    it('should emit mark:createevent when category is selected', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -378,7 +378,7 @@ describe('TaggingPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:create' &&
+          e.event === 'mark:create' &&
           e.payload?.motivation === 'tagging' &&
           e.payload?.body?.[0]?.value === 'Issue' &&
           e.payload?.body?.[0]?.type === 'TextualBody'
@@ -407,7 +407,7 @@ describe('TaggingPanel Component', () => {
       await userEvent.selectOptions(categorySelect!, 'Rule');
 
       await waitFor(() => {
-        const createEvent = tracker.events.find(e => e.event === 'annotate:create');
+        const createEvent = tracker.events.find(e => e.event === 'mark:create');
         expect(createEvent).toBeDefined();
         const body: any[] = createEvent!.payload.body;
 
@@ -582,7 +582,7 @@ describe('TaggingPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotate:assist-request' &&
+          e.event === 'mark:assist-request' &&
           e.payload?.motivation === 'tagging' &&
           e.payload?.options?.schemaId === 'legal-irac' &&
           e.payload?.options?.categories?.includes('Issue') &&

package/src/features/admin-devops/components/AdminDevOpsPage.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import {
   CommandLineIcon
 } from '@heroicons/react/24/outline';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 
 export interface DevOpsFeature {
   title: string;
@@ -54,7 +55,7 @@ export function AdminDevOpsPage({
   Toolbar,
 }: AdminDevOpsPageProps) {
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         {/* Page Title */}

package/src/features/admin-security/components/AdminSecurityPage.tsx

@@ -12,6 +12,7 @@ import {
   CheckCircleIcon,
   InformationCircleIcon
 } from '@heroicons/react/24/outline';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 
 export interface OAuthProvider {
   name: string;
@@ -67,7 +68,7 @@ export function AdminSecurityPage({
   Toolbar,
 }: AdminSecurityPageProps) {
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         <div className="semiont-page__sections">

package/src/features/admin-users/components/AdminUsersPage.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useState } from 'react';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 import {
   PlusIcon,
   MagnifyingGlassIcon,
@@ -235,7 +236,7 @@ export function AdminUsersPage({
   });
 
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         <div className="semiont-page__sections">

package/src/features/moderate-entity-tags/components/EntityTagsPage.tsx

@@ -11,6 +11,7 @@ import {
   PlusIcon,
   ExclamationCircleIcon
 } from '@heroicons/react/24/outline';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 
 export interface EntityTagsPageProps {
   // Data props
@@ -69,7 +70,7 @@ export function EntityTagsPage({
   };
 
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         {/* Page Title */}

package/src/features/moderate-recent/components/RecentDocumentsPage.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { ClockIcon } from '@heroicons/react/24/outline';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 
 export interface RecentDocumentsPageProps {
   // Data props
@@ -53,7 +54,7 @@ export function RecentDocumentsPage({
   }
 
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         {/* Page Title */}

package/src/features/moderate-tag-schemas/components/TagSchemasPage.tsx

@@ -11,6 +11,7 @@ import {
   ScaleIcon,
   LightBulbIcon
 } from '@heroicons/react/24/outline';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 import type { TagSchema } from '@semiont/react-ui';
 
 export interface TagSchemasPageProps {
@@ -68,7 +69,7 @@ export function TagSchemasPage({
   }
 
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         {/* Page Title */}

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -9,6 +9,7 @@
 import React, { useState, useEffect } from 'react';
 import type { components } from '@semiont/core';
 import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/api-client';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 import { buttonStyles } from '../../../lib/button-styles';
 import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
 import { useFormAnnouncements } from '../../../components/LiveRegion';
@@ -254,7 +255,7 @@ export function ResourceComposePage({
   const isReferenceCompletion = mode === 'reference';
 
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content semiont-page__compose">
         {/* Page Title */}

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -8,6 +8,7 @@
 import React, { useState, useCallback, useRef } from 'react';
 import type { components } from '@semiont/core';
 import { getResourceId } from '@semiont/api-client';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
 import { Toolbar } from '../../../components/Toolbar';
 import { ResourceCard } from './ResourceCard';
@@ -129,7 +130,7 @@ export function ResourceDiscoveryPage({
   const showNoResultsWarning = hasSearchQuery && !hasSearchResults && !isSearching;
 
   return (
-    <div className={`semiont-page${activePanel ? ' semiont-page--panel-open' : ''}`}>
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
       <div className="semiont-page__content">
         {/* Page Header */}