@semiont/react-ui 0.5.23 → 0.5.24

package/src/features/resource-compose/__tests__/ResourceComposePage.test.tsx

@@ -10,12 +10,14 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceComposePage } from '../components/ResourceComposePage';
 import type { ResourceComposePageProps } from '../components/ResourceComposePage';
 import { createTestSemiontWrapper } from '../../../test-utils';
+import { LineNumbersProvider } from '../../../contexts/LineNumbersContext';
 
 // Mock CodeMirrorRenderer to avoid CodeMirror dependencies
 vi.mock('../../../components/CodeMirrorRenderer', () => ({
-  CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
+  CodeMirrorRenderer: ({ content, onChange, editable, showLineNumbers }: any) => (
     <textarea
       data-testid="code-editor"
+      data-line-numbers={String(showLineNumbers)}
       value={content}
       onChange={(e) => editable && onChange?.(e.target.value)}
       disabled={!editable}
@@ -62,7 +64,6 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   availableEntityTypes: ['Document', 'Article', 'Report'],
   initialLocale: 'en',
   theme: 'light',
-  showLineNumbers: false,
   hoverDelayMs: 0,
   activePanel: null,
   onSaveResource: vi.fn().mockResolvedValue(undefined),
@@ -77,7 +78,11 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
 // component reaches for via useSemiont/useObservable).
 const renderWithProviders = (ui: React.ReactElement) => {
   const { SemiontWrapper } = createTestSemiontWrapper();
-  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
+  return render(
+    <LineNumbersProvider>
+      <SemiontWrapper>{ui}</SemiontWrapper>
+    </LineNumbersProvider>,
+  );
 };
 
 describe('ResourceComposePage', () => {
@@ -500,11 +505,16 @@ describe('ResourceComposePage', () => {
       expect(editor.value).toBe('New content');
     });
 
-    it('respects showLineNumbers prop', () => {
-      const props = createMockProps({ showLineNumbers: true });
-      renderWithProviders(<ResourceComposePage {...props} />);
+    it('feeds the editor the shared line-numbers setting from context', () => {
+      localStorage.setItem('showLineNumbers', 'true');
+      try {
+        const props = createMockProps({});
+        renderWithProviders(<ResourceComposePage {...props} />);
 
-      expect(screen.getByTestId('code-editor')).toBeInTheDocument();
+        expect(screen.getByTestId('code-editor')).toHaveAttribute('data-line-numbers', 'true');
+      } finally {
+        localStorage.removeItem('showLineNumbers');
+      }
     });
   });
 });

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

@@ -15,6 +15,7 @@ import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state
 import { buttonStyles } from '../../../lib/button-styles';
 import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
 import { useFormAnnouncements } from '../../../components/LiveRegion';
+import { useLineNumbers } from '../../../contexts/LineNumbersContext';
 import { UploadProgressBar } from './UploadProgressBar';
 
 /**
@@ -54,7 +55,6 @@ export interface ResourceComposePageProps {
 
   // UI state
   theme: 'light' | 'dark';
-  showLineNumbers: boolean;
   hoverDelayMs: number;
   activePanel: string | null;
 
@@ -133,7 +133,6 @@ export function ResourceComposePage({
   availableEntityTypes,
   initialLocale,
   theme,
-  showLineNumbers,
   hoverDelayMs,
   activePanel,
   onSaveResource,
@@ -146,6 +145,10 @@ export function ResourceComposePage({
   // Form announcements
   const { announceFormSubmitting, announceFormSuccess, announceFormError } = useFormAnnouncements();
 
+  // Shared display setting (LineNumbersContext) — was a prop threaded from
+  // the route, which desynced it from the Settings toggle.
+  const { showLineNumbers } = useLineNumbers();
+
   // Form state
   const [newResourceName, setNewResourceName] = useState('');
   const [newResourceContent, setNewResourceContent] = useState('');
@@ -746,7 +749,6 @@ export function ResourceComposePage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
 
         {/* Toolbar - Always visible on the right */}

package/src/features/resource-compose/state/__tests__/compose-page-state-unit.test.ts

@@ -6,7 +6,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createComposePageStateUnit } from '../compose-page-state-unit';
-import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing/axioms';
 
 /** Build an `UploadObservable`-shaped mock that emits started → finished. */
 function mockUpload(resourceId: string) {

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -36,7 +36,6 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   selectedEntityType: '',
   onSelectedEntityTypeChange: vi.fn(),
   theme: 'light',
-  showLineNumbers: false,
   activePanel: null,
   onNavigateToResource: vi.fn(),
   onNavigateToCompose: vi.fn(),

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

@@ -40,7 +40,6 @@ export interface ResourceDiscoveryPageProps {
 
   // UI state props
   theme: 'light' | 'dark';
-  showLineNumbers: boolean;
   activePanel: string | null;
 
   // Navigation props
@@ -86,7 +85,6 @@ export function ResourceDiscoveryPage({
   selectedEntityType,
   onSelectedEntityTypeChange,
   theme,
-  showLineNumbers,
   activePanel,
   onNavigateToResource,
   onNavigateToCompose,
@@ -286,7 +284,6 @@ export function ResourceDiscoveryPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          showLineNumbers={showLineNumbers}
         />
 
         {/* Toolbar - Always visible on the right */}

package/src/features/resource-discovery/state/__tests__/discover-state-unit.test.ts

@@ -6,7 +6,7 @@ import { filter, skip, take, toArray } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createDiscoverStateUnit } from '../discover-state-unit';
-import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing/axioms';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -12,6 +12,7 @@ import { ResourceViewerPage } from '../components/ResourceViewerPage';
 import type { ResourceViewerPageProps } from '../components/ResourceViewerPage';
 import { ToastProvider } from '../../../components/Toast';
 import { ThemeProvider } from '../../../contexts/ThemeContext';
+import { LineNumbersProvider } from '../../../contexts/LineNumbersContext';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import type { ResourceId } from '@semiont/core';
 
@@ -163,11 +164,13 @@ const renderWithProviders = (ui: React.ReactElement) => {
   const { SemiontWrapper } = createTestSemiontWrapper();
   return render(
     <ThemeProvider>
-      <ToastProvider>
-        <SemiontWrapper>
-          {ui}
-        </SemiontWrapper>
-      </ToastProvider>
+      <LineNumbersProvider>
+        <ToastProvider>
+          <SemiontWrapper>
+            {ui}
+          </SemiontWrapper>
+        </ToastProvider>
+      </LineNumbersProvider>
     </ThemeProvider>
   );
 };

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

@@ -27,7 +27,7 @@ import { useMediaToken } from '../../../hooks/useMediaToken';
 import { useToast } from '../../../components/Toast';
 import { useOutcomeToasts } from '../../../hooks/useOutcomeToasts';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { useLineNumbers } from '../../../hooks/useLineNumbers';
+import { useLineNumbers } from '../../../contexts/LineNumbersContext';
 import { useHoverDelay } from '../../../hooks/useHoverDelay';
 import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import { useObservableExternalNavigation } from '../../../hooks/useObservableBrowse';
@@ -116,8 +116,6 @@ export interface ResourceViewerPageProps {
  * @subscribes yield:clone - Clone the current resource
  * @subscribes beckon:sparkle - Trigger sparkle animation
  * @subscribes mark:added - Annotation was created (sparkle)
- * @subscribes settings:theme-changed - UI theme changed
- * @subscribes settings:line-numbers-toggled - Line numbers display toggled
  * @subscribes browse:reference-navigate - Navigate to a referenced document
  * @subscribes browse:entity-type-clicked - Navigate filtered by entity type
  *
@@ -159,8 +157,8 @@ export function ResourceViewerPage({
 
   // UI state hooks
   const { showError, showSuccess } = useToast();
-  const { theme, setTheme } = useTheme();
-  const { showLineNumbers, toggleLineNumbers } = useLineNumbers();
+  const { theme } = useTheme();
+  const { showLineNumbers } = useLineNumbers();
   const { hoverDelayMs } = useHoverDelay();
   const { triggerSparkleAnimation, clearNewAnnotationId, newAnnotationIds } = useResourceAnnotations();
 
@@ -380,8 +378,6 @@ export function ResourceViewerPage({
     triggerSparkleAnimation(stored.payload.annotation.id);
   }, [triggerSparkleAnimation]);
 
-  const handleSettingsThemeChanged = useCallback(({ theme }: { theme: any }) => setTheme(theme), [setTheme]);
-
   const handleReferenceNavigate = useCallback(({ resourceId }: { resourceId: string }) => {
     if (routes.resourceDetail) {
       const path = routes.resourceDetail(resourceId);
@@ -411,8 +407,6 @@ export function ResourceViewerPage({
     'yield:clone': handleResourceClone,
     'beckon:sparkle': handleAnnotationSparkle,
     'mark:added': handleAnnotationAdded,
-    'settings:theme-changed': handleSettingsThemeChanged,
-    'settings:line-numbers-toggled': toggleLineNumbers,
     'browse:reference-navigate': handleReferenceNavigate,
     'browse:entity-type-clicked': handleEntityTypeClicked,
   });
@@ -542,7 +536,6 @@ export function ResourceViewerPage({
           <ToolbarPanels
             activePanel={activePanel}
             theme={theme}
-            showLineNumbers={showLineNumbers}
             width={
               activePanel === 'jsonld' ? 'w-[600px]' :
               activePanel === 'annotations' ? 'w-[400px]' :

package/src/features/resource-viewer/state/__tests__/resource-loader-state-unit.test.ts

@@ -6,7 +6,7 @@ import { filter } from 'rxjs/operators';
 import { resourceId as makeResourceId } from '@semiont/core';
 import type { SemiontClient } from '@semiont/sdk';
 import { createResourceLoaderStateUnit } from '../resource-loader-state-unit';
-import { assertStateUnitAxioms } from '@semiont/core/testing';
+import { assertStateUnitAxioms } from '@semiont/core/testing/axioms';
 
 const RID = makeResourceId('res-1');
 

package/src/features/resource-viewer/state/__tests__/resource-viewer-page-state-unit.test.ts

@@ -5,7 +5,7 @@ import { filter } from 'rxjs/operators';
 import { annotationId, resourceId as makeResourceId } from '@semiont/core';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createResourceViewerPageStateUnit, type ResourceViewerPageStateUnit } from '../resource-viewer-page-state-unit';
-import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing/axioms';
 import { makeTestSession, type TestSession } from '../../../../__tests__/test-client';
 
 const RID = makeResourceId('res-1');

package/src/features/resource-viewer/state/resource-viewer-page-state-unit.ts

@@ -10,7 +10,7 @@ import { createGatherStateUnit, type GatherStateUnit } from '@semiont/sdk';
 import { createMatchStateUnit } from '@semiont/sdk';
 import { createYieldStateUnit, type YieldStateUnit } from '@semiont/sdk';
 import type { SemiontSession } from '@semiont/sdk';
-import { decodeWithCharset, textExtractionOf } from '@semiont/core';
+import { decodeWithCharset, textExtractionOf, uuidV4 } from '@semiont/core';
 import { groupAnnotations } from '../../../lib/annotation-groups';
 import type { ReferencedByEntry } from '@semiont/sdk';
 
@@ -144,7 +144,7 @@ export function createResourceViewerPageStateUnit(
       entityTypes: event.entityTypes,
     });
     client.bus.get('gather:requested').next({
-      correlationId: crypto.randomUUID(),
+      correlationId: uuidV4(),
       annotationId: event.annotationId,
       resourceId: event.resourceId,
       options: { contextWindow: 2000 },