@semiont/react-ui 0.2.34 → 0.2.35-build.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.2.34",
+  "version": "0.2.35-build.101",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/CodeMirrorRenderer.tsx

@@ -5,7 +5,7 @@ import { EditorView, Decoration, DecorationSet, lineNumbers } from '@codemirror/
 import { EditorState, RangeSetBuilder, StateField, StateEffect, Compartment } from '@codemirror/state';
 import { markdown } from '@codemirror/lang-markdown';
 import { ANNOTATORS } from '../lib/annotation-registry';
-import { ReferenceResolutionWidget } from '../lib/codemirror-widgets';
+import { ReferenceResolutionWidget, showWidgetPreview, hideWidgetPreview } from '../lib/codemirror-widgets';
 import { scrollAnnotationIntoView } from '../lib/scroll-utils';
 import { isHighlight, isReference, isResolvedReference, isComment, isAssessment, isTag, getBodySource } from '@semiont/api-client';
 import type { components } from '@semiont/core';
@@ -35,7 +35,6 @@ interface Props {
   editable?: boolean;
   newAnnotationIds?: Set<string>;
   hoveredAnnotationId?: string | null;
-  hoveredCommentId?: string | null;
   scrollToAnnotationId?: string | null;
   sourceView?: boolean; // If true, show raw source (no markdown rendering)
   showLineNumbers?: boolean; // If true, show line numbers
@@ -59,7 +58,6 @@ interface WidgetUpdate {
   content: string;
   segments: TextSegment[];
   generatingReferenceId?: string | null | undefined;
-  eventBus?: EventBus;
   getTargetDocumentName?: (documentId: string) => string | undefined;
 }
 
@@ -88,11 +86,16 @@ function convertSegmentPositions(segments: TextSegment[], content: string): Text
     }
   }
 
-  // Convert a single position from CRLF space to LF space
+  // Binary search: count CRLFs before a position in O(log n)
   const convertPosition = (pos: number): number => {
-    // Count how many CRLFs appear before this position
-    const crlfsBefore = crlfPositions.filter(crlfPos => crlfPos < pos).length;
-    return pos - crlfsBefore;
+    let lo = 0;
+    let hi = crlfPositions.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >>> 1;
+      if (crlfPositions[mid]! < pos) lo = mid + 1;
+      else hi = mid;
+    }
+    return pos - lo;
   };
 
   return segments.map(seg => ({
@@ -203,13 +206,10 @@ function buildWidgetDecorations(
   _content: string,
   segments: TextSegment[],
   generatingReferenceId: string | null | undefined,
-  eventBus: any,
   getTargetDocumentName?: (documentId: string) => string | undefined
 ): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>();
 
-  // Wiki link widgets removed (WikiLinkWidget was deleted)
-
   // Process all annotations (references and highlights) in sorted order
   // This ensures decorations are added in the correct order for CodeMirror
   const allAnnotatedSegments = segments
@@ -222,20 +222,17 @@ function buildWidgetDecorations(
     const annotation = segment.annotation;
 
     // For references: add resolution widget (🔗, ✨ pulsing, or ❓)
-    // Use W3C helper to determine if this is a reference
     if (isReference(annotation)) {
       const bodySource = getBodySource(annotation.body);
       const targetName = bodySource
         ? getTargetDocumentName?.(bodySource)
         : undefined;
-      // Compare by ID portion (handle both URI and internal ID formats)
       const isGenerating = generatingReferenceId
         ? annotation.id === generatingReferenceId
         : false;
       const widget = new ReferenceResolutionWidget(
         annotation,
         targetName,
-        eventBus,
         isGenerating
       );
       builder.add(
@@ -264,7 +261,6 @@ const widgetDecorationsField = StateField.define<DecorationSet>({
           effect.value.content,
           effect.value.segments,
           effect.value.generatingReferenceId,
-          effect.value.eventBus,
           effect.value.getTargetDocumentName
         );
       }
@@ -282,7 +278,6 @@ export function CodeMirrorRenderer({
   editable = false,
   newAnnotationIds,
   hoveredAnnotationId,
-  hoveredCommentId,
   scrollToAnnotationId,
   sourceView = false,
   showLineNumbers = false,
@@ -301,12 +296,19 @@ export function CodeMirrorRenderer({
   const convertedSegments = convertSegmentPositions(segments, content);
 
   const segmentsRef = useRef(convertedSegments);
+  // Index segments by annotation ID for O(1) click lookups
+  const segmentsByIdRef = useRef(new Map<string, TextSegment>());
   const lineNumbersCompartment = useRef(new Compartment());
   const eventBusRef = useRef(eventBus);
   const getTargetDocumentNameRef = useRef(getTargetDocumentName);
 
   // Update refs when they change
   segmentsRef.current = segments;
+  const segmentsById = new Map<string, TextSegment>();
+  for (const s of segments) {
+    if (s.annotation) segmentsById.set(s.annotation.id, s);
+  }
+  segmentsByIdRef.current = segmentsById;
   eventBusRef.current = eventBus;
   getTargetDocumentNameRef.current = getTargetDocumentName;
 
@@ -343,7 +345,7 @@ export function CodeMirrorRenderer({
             const annotationId = annotationElement?.getAttribute('data-annotation-id');
 
             if (annotationId && eventBusRef.current) {
-              const segment = segmentsRef.current.find(s => s.annotation?.id === annotationId);
+              const segment = segmentsByIdRef.current.get(annotationId);
               if (segment?.annotation) {
                 event.preventDefault();
                 eventBusRef.current.get('attend:click').next({
@@ -431,12 +433,67 @@ export function CodeMirrorRenderer({
       if (annotationElement) handleMouseLeave();
     };
 
+    // Delegated widget event handlers (replaces per-widget listeners)
+    const handleWidgetClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const widget = target.closest('.reference-preview-widget') as HTMLElement | null;
+      if (!widget || widget.dataset.widgetGenerating === 'true') return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const annotationId = widget.dataset.widgetAnnotationId;
+      const bodySource = widget.dataset.widgetBodySource;
+      const isResolved = widget.dataset.widgetResolved === 'true';
+
+      if (!annotationId || !eventBusRef.current) return;
+
+      if (isResolved && bodySource) {
+        eventBusRef.current.get('navigation:reference-navigate').next({ documentId: bodySource });
+      } else {
+        const motivation = (widget.dataset.widgetMotivation || 'linking') as Annotation['motivation'];
+        eventBusRef.current.get('attend:click').next({ annotationId, motivation });
+      }
+    };
+
+    const handleWidgetMouseEnter = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const widget = target.closest('.reference-preview-widget') as HTMLElement | null;
+      if (!widget || widget.dataset.widgetGenerating === 'true') return;
+
+      const indicator = widget.querySelector('.reference-indicator') as HTMLElement | null;
+      if (indicator) indicator.style.opacity = '1';
+
+      if (widget.dataset.widgetResolved === 'true' && widget.dataset.widgetTargetName) {
+        showWidgetPreview(widget, widget.dataset.widgetTargetName);
+      }
+    };
+
+    const handleWidgetMouseLeave = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const widget = target.closest('.reference-preview-widget') as HTMLElement | null;
+      if (!widget) return;
+
+      const indicator = widget.querySelector('.reference-indicator') as HTMLElement | null;
+      if (indicator) indicator.style.opacity = '0.6';
+
+      if (widget.dataset.widgetResolved === 'true') {
+        hideWidgetPreview(widget);
+      }
+    };
+
     container.addEventListener('mouseover', handleMouseOver);
     container.addEventListener('mouseout', handleMouseOut);
+    container.addEventListener('click', handleWidgetClick);
+    container.addEventListener('mouseenter', handleWidgetMouseEnter, true);
+    container.addEventListener('mouseleave', handleWidgetMouseLeave, true);
 
     return () => {
       container.removeEventListener('mouseover', handleMouseOver);
       container.removeEventListener('mouseout', handleMouseOut);
+      container.removeEventListener('click', handleWidgetClick);
+      container.removeEventListener('mouseenter', handleWidgetMouseEnter, true);
+      container.removeEventListener('mouseleave', handleWidgetMouseLeave, true);
       cleanupHover();
       view.destroy();
       viewRef.current = null;
@@ -496,7 +553,6 @@ export function CodeMirrorRenderer({
         content,
         segments: convertedSegments,
         generatingReferenceId,
-        eventBus: eventBusRef.current,
         getTargetDocumentName: getTargetDocumentNameRef.current
       })
     });
@@ -550,54 +606,6 @@ export function CodeMirrorRenderer({
     };
   }, [hoveredAnnotationId]);
 
-  // Handle hovered comment - add pulse effect and scroll if not visible
-  useEffect(() => {
-    if (!viewRef.current || !hoveredCommentId) return undefined;
-
-    const view = viewRef.current;
-
-    // Find the comment element in the DOM
-    const element = view.contentDOM.querySelector(
-      `[data-annotation-id="${CSS.escape(hoveredCommentId)}"]`
-    ) as HTMLElement;
-
-    if (!element) return undefined;
-
-    // Find the actual scroll container - could be annotate view or document viewer
-    const scrollContainer = (element.closest('.semiont-annotate-view__content') ||
-                            element.closest('.semiont-document-viewer__scrollable-body')) as HTMLElement;
-
-    if (scrollContainer) {
-      // Check visibility within the scroll container, not window
-      const elementRect = element.getBoundingClientRect();
-      const containerRect = scrollContainer.getBoundingClientRect();
-
-      const isVisible =
-        elementRect.top >= containerRect.top &&
-        elementRect.bottom <= containerRect.bottom;
-
-      if (!isVisible) {
-        // Manually scroll the container instead of using scrollIntoView
-        const elementTop = element.offsetTop;
-        const containerHeight = scrollContainer.clientHeight;
-        const elementHeight = element.offsetHeight;
-        const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
-
-        scrollContainer.scrollTo({ top: scrollTo, behavior: 'smooth' });
-      }
-    }
-
-    // Add pulse effect after a brief delay to ensure element is visible
-    const timeoutId = setTimeout(() => {
-      element.classList.add('annotation-pulse');
-    }, 100);
-
-    return () => {
-      clearTimeout(timeoutId);
-      element.classList.remove('annotation-pulse');
-    };
-  }, [hoveredCommentId]);
-
   // Handle scroll to annotation
   useEffect(() => {
     if (!viewRef.current || !scrollToAnnotationId) return;

package/src/components/resource/AnnotateView.tsx

@@ -3,7 +3,7 @@
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
 import type { components } from '@semiont/core';
 import { resourceUri as toResourceUri } from '@semiont/core';
-import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType, extractContext, findTextWithContext } from '@semiont/api-client';
+import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType, extractContext, findTextWithContext, buildContentCache } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
 import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
@@ -51,6 +51,9 @@ function segmentTextWithAnnotations(content: string, annotations: Annotation[]):
     return [{ exact: '', start: 0, end: 0 }];
   }
 
+  // Pre-compute normalized/lowered content once for all annotations
+  const cache = buildContentCache(content);
+
   const normalizedAnnotations = annotations
     .map(ann => {
       const targetSelector = getTargetSelector(ann.target);
@@ -66,7 +69,8 @@ function segmentTextWithAnnotations(content: string, annotations: Annotation[]):
           quoteSelector.exact,
           quoteSelector.prefix,
           quoteSelector.suffix,
-          posSelector?.start // Position hint for fuzzy matching
+          posSelector?.start,
+          cache
         );
       }
 
@@ -160,7 +164,7 @@ export function AnnotateView({
   const segments = segmentTextWithAnnotations(content, allAnnotations);
 
   // Extract UI state
-  const { selectedMotivation, selectedClick, selectedShape, hoveredAnnotationId, hoveredCommentId, scrollToAnnotationId } = uiState;
+  const { selectedMotivation, selectedClick, selectedShape, hoveredAnnotationId, scrollToAnnotationId } = uiState;
 
   // Store onUIStateChange in ref to avoid dependency issues
   const onUIStateChangeRef = useRef(onUIStateChange);
@@ -336,7 +340,6 @@ export function AnnotateView({
             editable={false}
             newAnnotationIds={newAnnotationIds}
             {...(hoveredAnnotationId !== undefined && { hoveredAnnotationId })}
-            {...(hoveredCommentId !== undefined && { hoveredCommentId })}
             {...(scrollToAnnotationId !== undefined && { scrollToAnnotationId })}
             sourceView={true}
             showLineNumbers={showLineNumbers}
@@ -375,7 +378,7 @@ export function AnnotateView({
                     drawingMode={selectedMotivation ? selectedShape : null}
                     selectedMotivation={selectedMotivation}
                     eventBus={eventBus}
-                    hoveredAnnotationId={hoveredCommentId || hoveredAnnotationId || null}
+                    hoveredAnnotationId={hoveredAnnotationId || null}
                     hoverDelayMs={hoverDelayMs}
                   />
                 </Suspense>
@@ -405,7 +408,7 @@ export function AnnotateView({
                 drawingMode={selectedMotivation ? selectedShape : null}
                 selectedMotivation={selectedMotivation}
                 eventBus={eventBus}
-                hoveredAnnotationId={hoveredCommentId || hoveredAnnotationId || null}
+                hoveredAnnotationId={hoveredAnnotationId || null}
                 hoverDelayMs={hoverDelayMs}
               />
             )}

package/src/components/resource/BrowseView.tsx

@@ -1,24 +1,28 @@
 'use client';
 
-import { useEffect, useRef, useCallback, lazy, Suspense } from 'react';
+import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { remarkAnnotations, type PreparedAnnotation } from '../../lib/remark-annotations';
-import { rehypeRenderAnnotations } from '../../lib/rehype-render-annotations';
-import type { components } from '@semiont/core';
 import { resourceUri as toResourceUri } from '@semiont/core';
-import { getExactText, getTextPositionSelector, getTargetSelector, getBodySource, getMimeCategory, isPdfMimeType } from '@semiont/api-client';
+import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { createHoverHandlers } from '../../hooks/useAttentionFlow';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
 import { ImageViewer } from '../viewers';
 import { AnnotateToolbar, type ClickAction } from '../annotation/AnnotateToolbar';
 import type { AnnotationsCollection } from '../../types/annotation-props';
+import {
+  buildSourceToRenderedMap,
+  buildTextNodeIndex,
+  resolveAnnotationRanges,
+  applyHighlights,
+  clearHighlights,
+  toOverlayAnnotations,
+} from '../../lib/annotation-overlay';
 
 // Lazy load PDF component to avoid SSR issues with browser PDF.js loading
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
 
-type Annotation = components['schemas']['Annotation'];
 import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
 import { useEventBus } from '../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
@@ -29,46 +33,35 @@ interface Props {
   resourceUri: string;
   annotations: AnnotationsCollection;
   hoveredAnnotationId?: string | null;
-  hoveredCommentId?: string | null;
   selectedClick?: ClickAction;
   annotateMode: boolean;
   hoverDelayMs?: number;
 }
 
 /**
- * Convert W3C Annotations to simplified format for remark plugin.
- * Extracts position info and converts start/end to offset/length.
+ * Memoized markdown renderer — only re-renders when content changes.
+ * No annotation plugins: annotations are applied as a DOM overlay after paint.
  */
-function prepareAnnotations(annotations: Annotation[]): PreparedAnnotation[] {
-/**
- * View component for browsing resources with rendered annotations
- *
- * @emits attend:click - Annotation clicked in browse view. Payload: { annotationId: string, motivation: Motivation }
- * @emits attend:hover - Annotation hovered in browse view. Payload: { annotationId: string | null }
- */
-  return annotations
-    .map(ann => {
-      const targetSelector = getTargetSelector(ann.target);
-      const posSelector = getTextPositionSelector(targetSelector);
-      const start = posSelector?.start ?? 0;
-      const end = posSelector?.end ?? 0;
-
-      // Use ANNOTATORS registry to determine type
-      const type = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(ann))?.internalType || 'highlight';
-
-      return {
-        id: ann.id,
-        exact: getExactText(targetSelector),
-        offset: start,           // remark plugin expects 'offset'
-        length: end - start,      // remark plugin expects 'length', not 'end'
-        type,
-        source: getBodySource(ann.body)
-      };
-    });
-}
+const MemoizedMarkdown = memo(function MemoizedMarkdown({
+  content,
+}: {
+  content: string;
+}) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+});
 
 /**
- * View component for browsing annotated resources in read-only mode
+ * View component for browsing annotated resources in read-only mode.
+ *
+ * Two-layer rendering:
+ * - Layer 1: Markdown renders once (MemoizedMarkdown, cached by content)
+ * - Layer 2: Annotation overlay applied via DOM Range API after paint
  *
  * @emits attend:click - User clicked on annotation. Payload: { annotationId: string, motivation: Motivation }
  * @emits attend:hover - User hovered over annotation. Payload: { annotationId: string | null }
@@ -76,7 +69,7 @@ function prepareAnnotations(annotations: Annotation[]): PreparedAnnotation[] {
  * @subscribes attend:hover - Highlight annotation on hover. Payload: { annotationId: string | null }
  * @subscribes attend:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
  */
-export function BrowseView({
+export const BrowseView = memo(function BrowseView({
   content,
   mimeType,
   resourceUri,
@@ -93,9 +86,36 @@ export function BrowseView({
 
   const { highlights, references, assessments, comments, tags } = annotations;
 
-  const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
+  const allAnnotations = useMemo(
+    () => [...highlights, ...references, ...assessments, ...comments, ...tags],
+    [highlights, references, assessments, comments, tags]
+  );
 
-  const preparedAnnotations = prepareAnnotations(allAnnotations);
+  const overlayAnnotations = useMemo(
+    () => toOverlayAnnotations(allAnnotations),
+    [allAnnotations]
+  );
+
+  // Cache offset map (recomputed only when content changes)
+  const offsetMapRef = useRef<Map<number, number> | null>(null);
+
+  // Build offset map after markdown DOM paints (once per content change)
+  useEffect(() => {
+    if (!containerRef.current) return;
+    offsetMapRef.current = buildSourceToRenderedMap(content, containerRef.current);
+  }, [content]);
+
+  // Layer 2: overlay annotations after DOM paint
+  useEffect(() => {
+    if (!containerRef.current || !offsetMapRef.current || overlayAnnotations.length === 0) return;
+
+    const container = containerRef.current;
+    const textNodeIndex = buildTextNodeIndex(container);
+    const ranges = resolveAnnotationRanges(overlayAnnotations, offsetMapRef.current, textNodeIndex);
+    applyHighlights(ranges);
+
+    return () => clearHighlights(container);
+  }, [overlayAnnotations]);
 
   // Attach click handler, hover handler, and animations after render
   useEffect(() => {
@@ -199,17 +219,7 @@ export function BrowseView({
             annotators={ANNOTATORS}
           />
           <div ref={containerRef} className="semiont-browse-view__content">
-            <ReactMarkdown
-              remarkPlugins={[
-                remarkGfm,
-                [remarkAnnotations, { annotations: preparedAnnotations }]
-              ]}
-              rehypePlugins={[
-                rehypeRenderAnnotations
-              ]}
-            >
-              {content}
-            </ReactMarkdown>
+            <MemoizedMarkdown content={content} />
           </div>
         </div>
       );
@@ -280,4 +290,4 @@ export function BrowseView({
         </div>
       );
   }
-}
+});

package/src/components/resource/ResourceViewer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
 import { AnnotateView, type SelectionMotivation, type ClickAction, type ShapeType } from './AnnotateView';
 import { BrowseView } from './BrowseView';
@@ -224,7 +224,6 @@ export function ResourceViewer({
   // Internal UI state for hover, focus, and scroll
   // Use prop value when provided (controlled by parent), otherwise null
   const hoveredAnnotationId = hoveredAnnotationIdProp ?? null;
-  const [hoveredCommentId, _setHoveredCommentId] = useState<string | null>(null);
   const [scrollToAnnotationId, setScrollToAnnotationId] = useState<string | null>(null);
   const [_focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
 
@@ -364,9 +363,11 @@ export function ResourceViewer({
     'attend:click': handleAnnotationClickEvent,
   });
 
-  // Prepare props for child components
-  // Note: These objects are created inline - React's reconciliation handles re-renders efficiently
-  const annotationsCollection = { highlights, references, assessments, comments, tags };
+  // Prepare props for child components (memoized to prevent unnecessary re-renders of BrowseView/AnnotateView)
+  const annotationsCollection = useMemo(
+    () => ({ highlights, references, assessments, comments, tags }),
+    [highlights, references, assessments, comments, tags]
+  );
 
   const uiState = {
     selectedMotivation,
@@ -411,7 +412,6 @@ export function ResourceViewer({
           mimeType={mimeType}
           resourceUri={resource['@id']}
           annotations={annotationsCollection}
-          hoveredCommentId={hoveredCommentId}
           selectedClick={selectedClick}
           hoverDelayMs={hoverDelayMs}
           annotateMode={annotateMode}

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -45,14 +45,14 @@ vi.mock('remark-gfm', () => ({
   default: vi.fn(),
 }));
 
-// Mock remark-annotations
-vi.mock('../../../lib/remark-annotations', () => ({
-  remarkAnnotations: vi.fn(),
-}));
-
-// Mock rehype-render-annotations
-vi.mock('../../../lib/rehype-render-annotations', () => ({
-  rehypeRenderAnnotations: vi.fn(),
+// Mock annotation-overlay — DOM Range API is not available in jsdom
+vi.mock('../../../lib/annotation-overlay', () => ({
+  buildSourceToRenderedMap: vi.fn(() => new Map()),
+  buildTextNodeIndex: vi.fn(() => []),
+  resolveAnnotationRanges: vi.fn(() => new Map()),
+  applyHighlights: vi.fn(),
+  clearHighlights: vi.fn(),
+  toOverlayAnnotations: vi.fn(() => []),
 }));
 
 // Mock ANNOTATORS
@@ -209,7 +209,6 @@ describe('BrowseView Component', () => {
       tags: [],
     },
     hoveredAnnotationId: null,
-    hoveredCommentId: null,
     selectedClick: 'detail' as const,
     annotateMode: false,
   };

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/usePanelNavigation';
 
 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/usePanelNavigation';
 
 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/usePanelNavigation';
 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/usePanelNavigation';
 
 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/usePanelNavigation';
 
 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 */}