@semiont/react-ui 0.2.35-build.100 → 0.2.35-build.102

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

@@ -11,7 +11,7 @@ import type { components, paths, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { PanelHeader } from './PanelHeader';
 import './ReferencesPanel.css';
-import type { AnnotationProgress } from '@semiont/core';
+import type { MarkProgress } from '@semiont/core';
 
 type Annotation = components['schemas']['Annotation'];
 type Motivation = components['schemas']['Motivation'];
@@ -45,7 +45,7 @@ interface Props {
   // Generic panel props
   annotations?: Annotation[];
   isAssisting: boolean;
-  progress: AnnotationProgress | null;
+  progress: MarkProgress | null;
   annotateMode?: boolean;
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -65,9 +65,9 @@ interface Props {
  * Panel for managing reference annotations with entity type annotation
  *
  * @emits annotate:detect-request - Start reference annotation. Payload: { motivation: 'linking', options: { entityTypes: string[], includeDescriptiveReferences: boolean } }
- * @emits annotate:create - Create new reference annotation. Payload: { motivation: 'linking', selector: Selector | Selector[], body: Body[] }
- * @emits annotate:cancel-pending - Cancel pending reference annotation. Payload: undefined
- * @subscribes attend:click - Annotation clicked. Payload: { annotationId: string }
+ * @emits mark:create - Create new reference annotation. Payload: { motivation: 'linking', selector: Selector | Selector[], body: Body[] }
+ * @emits mark:cancel-pending - Cancel pending reference annotation. Payload: undefined
+ * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function ReferencesPanel({
   annotations = [],
@@ -196,13 +196,13 @@ export function ReferencesPanel({
   }, []);
 
   useEventSubscriptions({
-    'attend:click': handleAnnotationClick,
+    'browse:click': handleAnnotationClick,
   });
 
   // Clear log when starting new annotation
   const handleAssist = () => {
     setLastDetectionLog(null);
-    eventBus.get('annotate:assist-request').next({
+    eventBus.get('mark:assist-request').next({
       motivation: 'linking',
       options: {
         entityTypes: selectedEntityTypes,
@@ -245,7 +245,7 @@ export function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType = pendingEntityTypes.join(',') || undefined;
-      eventBus.get('annotate:create').next({
+      eventBus.get('mark:create').next({
         motivation: 'linking',
         selector: pendingAnnotation.selector,
         body: entityType ? [{ type: 'TextualBody', value: entityType, purpose: 'tagging' }] : [],
@@ -260,7 +260,7 @@ export function ReferencesPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('annotate:cancel-pending').next(undefined);
+        eventBus.get('mark:cancel-pending').next(undefined);
         setPendingEntityTypes([]);
       }
     };
@@ -312,7 +312,7 @@ export function ReferencesPanel({
             <div className="semiont-annotation-prompt__actions">
               <button
                 onClick={() => {
-                  eventBus.get('annotate:cancel-pending').next(undefined);
+                  eventBus.get('mark:cancel-pending').next(undefined);
                   setPendingEntityTypes([]);
                 }}
                 className="semiont-button semiont-button--secondary"

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

@@ -16,9 +16,9 @@ interface Props {
 /**
  * Panel for displaying resource metadata and management actions
  *
- * @emits generate:clone - Clone this resource. Payload: undefined
- * @emits resource:unarchive - Unarchive this resource. Payload: undefined
- * @emits resource:archive - Archive this resource. Payload: undefined
+ * @emits yield:clone - Clone this resource. Payload: undefined
+ * @emits mark:unarchive - Unarchive this resource. Payload: undefined
+ * @emits mark:archive - Archive this resource. Payload: undefined
  */
 export function ResourceInfoPanel({
   documentEntityTypes,
@@ -97,7 +97,7 @@ export function ResourceInfoPanel({
       {/* Clone Action */}
       <div className="semiont-resource-info-panel__action-section">
         <button
-          onClick={() => eventBus.get('generate:clone').next(undefined)}
+          onClick={() => eventBus.get('yield:clone').next(undefined)}
           className="semiont-resource-button semiont-resource-button--secondary"
         >
           🔗 {t('clone')}
@@ -112,7 +112,7 @@ export function ResourceInfoPanel({
         {isArchived ? (
           <>
             <button
-              onClick={() => eventBus.get('resource:unarchive').next(undefined)}
+              onClick={() => eventBus.get('mark:unarchive').next(undefined)}
               className="semiont-resource-button semiont-resource-button--secondary"
             >
               📤 {t('unarchive')}
@@ -124,7 +124,7 @@ export function ResourceInfoPanel({
         ) : (
           <>
             <button
-              onClick={() => eventBus.get('resource:archive').next(undefined)}
+              onClick={() => eventBus.get('mark:archive').next(undefined)}
               className="semiont-resource-button semiont-resource-button--archive"
             >
               📦 {t('archive')}

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

@@ -6,7 +6,7 @@ import { getAnnotationExactText } from '@semiont/api-client';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
 import { useEventBus } from '../../../contexts/EventBusContext';
-import { useHoverEmitter } from '../../../hooks/useAttentionFlow';
+import { useHoverEmitter } from '../../../hooks/useBeckonFlow';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -37,7 +37,7 @@ export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
     <div
       ref={ref}
       onClick={() => {
-        eventBus.get('attend:click').next({ annotationId: tag.id, motivation: tag.motivation });
+        eventBus.get('browse:click').next({ annotationId: tag.id, motivation: tag.motivation });
       }}
       {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}

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

@@ -60,9 +60,9 @@ interface TaggingPanelProps {
  * Panel for managing tag annotations with schema-based annotation
  *
  * @emits annotate:detect-request - Start tag annotation. Payload: { motivation: 'tagging', options: { schemaId: string, categories: string[] } }
- * @emits annotate:cancel-pending - Cancel pending tag annotation. Payload: undefined
- * @emits annotate:create - Create new tag annotation. Payload: { motivation: 'tagging', selector: Selector | Selector[], body: Body[] }
- * @subscribes attend:click - Annotation clicked. Payload: { annotationId: string }
+ * @emits mark:cancel-pending - Cancel pending tag annotation. Payload: undefined
+ * @emits mark:create - Create new tag annotation. Payload: { motivation: 'tagging', selector: Selector | Selector[], body: Body[] }
+ * @subscribes browse:click - Annotation clicked. Payload: { annotationId: string }
  */
 export function TaggingPanel({
   annotations,
@@ -102,7 +102,7 @@ export function TaggingPanel({
   }, []);
 
   useEventSubscriptions({
-    'attend:click': handleAnnotationClick,
+    'browse:click': handleAnnotationClick,
   });
 
   // Direct ref management
@@ -195,7 +195,7 @@ export function TaggingPanel({
 
   const handleAssist = () => {
     if (selectedCategories.size > 0) {
-      eventBus.get('annotate:assist-request').next({
+      eventBus.get('mark:assist-request').next({
         motivation: 'tagging',
         options: {
           schemaId: selectedSchemaId,
@@ -212,7 +212,7 @@ export function TaggingPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.get('annotate:cancel-pending').next(undefined);
+        eventBus.get('mark:cancel-pending').next(undefined);
       }
     };
 
@@ -274,7 +274,7 @@ export function TaggingPanel({
                   className="semiont-select"
                   onChange={(e) => {
                     if (e.target.value && pendingAnnotation) {
-                      eventBus.get('annotate:create').next({
+                      eventBus.get('mark:create').next({
                         motivation: 'tagging',
                         selector: pendingAnnotation.selector,
                         body: [
@@ -305,7 +305,7 @@ export function TaggingPanel({
             {/* Cancel button */}
             <div className="semiont-annotation-prompt__footer">
               <button
-                onClick={() => eventBus.get('annotate:cancel-pending').next(undefined)}
+                onClick={() => eventBus.get('mark:cancel-pending').next(undefined)}
                 className="semiont-button semiont-button--secondary"
                 data-type="tag"
               >

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 */}