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

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

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -414,26 +414,28 @@ export function ResourceViewerPage({
     return false;
   });
 
-  // Group annotations by type using static ANNOTATORS
-  const result = {
-    highlights: [] as Annotation[],
-    references: [] as Annotation[],
-    assessments: [] as Annotation[],
-    comments: [] as Annotation[],
-    tags: [] as Annotation[]
-  };
-
-  for (const ann of annotations) {
-    const annotator = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(ann));
-    if (annotator) {
-      const key = annotator.internalType + 's'; // highlight -> highlights
-      if (result[key as keyof typeof result]) {
-        result[key as keyof typeof result].push(ann);
+  // Group annotations by type using static ANNOTATORS (memoized to avoid re-grouping on unrelated re-renders)
+  const groups = useMemo(() => {
+    const result = {
+      highlights: [] as Annotation[],
+      references: [] as Annotation[],
+      assessments: [] as Annotation[],
+      comments: [] as Annotation[],
+      tags: [] as Annotation[]
+    };
+
+    for (const ann of annotations) {
+      const annotator = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(ann));
+      if (annotator) {
+        const key = annotator.internalType + 's'; // highlight -> highlights
+        if (result[key as keyof typeof result]) {
+          result[key as keyof typeof result].push(ann);
+        }
       }
     }
-  }
 
-  const groups = result;
+    return result;
+  }, [annotations]);
 
   // Combine resource with content
   const resourceWithContent = { ...resource, content };