@semiont/react-ui 0.5.11 → 0.5.13

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

@@ -1,10 +1,10 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../test-utils';
+import type { ComponentProps } from 'react';
+import { renderWithProviders, createTestSemiontWrapper } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import { BindNamespace } from '@semiont/sdk';
-import type { RouteBuilder } from '../../../../contexts/RoutingContext';
 
 import type { Annotation, AnnotationId } from '@semiont/core';
 
@@ -16,7 +16,6 @@ const mockGetFragmentSelector = vi.fn();
 const mockGetSvgSelector = vi.fn();
 const mockGetTargetSelector = vi.fn();
 const mockGetEntityTypes = vi.fn();
-const mockNavigate = vi.fn();
 const mockHoverProps = { onMouseEnter: vi.fn(), onMouseLeave: vi.fn() };
 
 vi.mock('@semiont/core', async () => {
@@ -40,10 +39,6 @@ vi.mock('../../../../lib/resource-utils', () => ({
   getResourceIcon: vi.fn(() => '📄'),
 }));
 
-vi.mock('../../../../hooks/useObservableBrowse', () => ({
-  useObservableExternalNavigation: () => mockNavigate,
-}));
-
 vi.mock('../../../../hooks/useHoverEmitter', () => ({
   useHoverEmitter: () => mockHoverProps,
 }));
@@ -71,22 +66,25 @@ const createMockReference = (overrides?: Partial<Annotation>): Annotation => ({
   ...overrides,
 });
 
-const mockRoutes: RouteBuilder = {
-  resourceDetail: vi.fn((id: string) => `/resources/${id}`),
-  userProfile: vi.fn((id: string) => `/users/${id}`),
-  search: vi.fn((query: string) => `/search?q=${query}`),
-  home: vi.fn(() => '/'),
-};
-
 describe('ReferenceEntry', () => {
-  const defaultProps = {
-    reference: createMockReference(),
-    isFocused: false,
-    routes: mockRoutes,
-  };
+  // Provider-free component: the session prop is the only session it sees.
+  // Created per-test — test-utils disposes registered clients in afterEach.
+  let session: ReturnType<typeof createTestSemiontWrapper>['session'];
+  let eventBus: ReturnType<typeof createTestSemiontWrapper>['eventBus'];
+
+  const renderEntry = (props: Partial<ComponentProps<typeof ReferenceEntry>> = {}) =>
+    renderWithProviders(
+      <ReferenceEntry
+        session={session}
+        reference={createMockReference()}
+        isFocused={false}
+        {...props}
+      />,
+    );
 
   beforeEach(() => {
     vi.clearAllMocks();
+    ({ session, eventBus } = createTestSemiontWrapper());
     mockGetAnnotationExactText.mockReturnValue('referenced text');
     mockIsBodyResolved.mockReturnValue(false);
     mockGetBodySource.mockReturnValue(null);
@@ -98,7 +96,7 @@ describe('ReferenceEntry', () => {
 
   describe('Rendering', () => {
     it('should render the selected text in quotes', () => {
-      renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      renderEntry();
 
       expect(screen.getByText(/referenced text/)).toBeInTheDocument();
     });
@@ -107,7 +105,7 @@ describe('ReferenceEntry', () => {
       const longText = 'A'.repeat(150);
       mockGetAnnotationExactText.mockReturnValue(longText);
 
-      renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      renderEntry();
 
       expect(screen.getByText(new RegExp(`"${'A'.repeat(100)}`))).toBeInTheDocument();
       expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
@@ -116,7 +114,7 @@ describe('ReferenceEntry', () => {
     it('should show stub icon when reference is not resolved', () => {
       mockIsBodyResolved.mockReturnValue(false);
 
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      const { container } = renderEntry();
 
       const icon = container.querySelector('.semiont-reference-icon');
       expect(icon).toBeInTheDocument();
@@ -127,7 +125,7 @@ describe('ReferenceEntry', () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
 
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      const { container } = renderEntry();
 
       const icon = container.querySelector('.semiont-reference-icon');
       expect(icon).toBeInTheDocument();
@@ -137,7 +135,7 @@ describe('ReferenceEntry', () => {
     it('should show annotation type when no selected text', () => {
       mockGetAnnotationExactText.mockReturnValue('');
 
-      renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      renderEntry();
 
       expect(screen.getByText('Annotation')).toBeInTheDocument();
     });
@@ -146,7 +144,7 @@ describe('ReferenceEntry', () => {
       mockGetAnnotationExactText.mockReturnValue('');
       mockGetFragmentSelector.mockReturnValue({ type: 'FragmentSelector', value: 'xywh=0,0,100,100' });
 
-      renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      renderEntry();
 
       expect(screen.getByText('Fragment annotation')).toBeInTheDocument();
     });
@@ -155,7 +153,7 @@ describe('ReferenceEntry', () => {
       mockGetAnnotationExactText.mockReturnValue('');
       mockGetSvgSelector.mockReturnValue({ type: 'SvgSelector', value: '<svg/>' });
 
-      renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      renderEntry();
 
       expect(screen.getByText('Image annotation')).toBeInTheDocument();
     });
@@ -170,7 +168,7 @@ describe('ReferenceEntry', () => {
         _resolvedDocumentMediaType: 'text/plain',
       };
 
-      renderWithProviders(<ReferenceEntry {...defaultProps} reference={enrichedRef as Annotation} />);
+      renderEntry({ reference: enrichedRef as Annotation });
 
       expect(screen.getByText(/My Linked Document/)).toBeInTheDocument();
     });
@@ -180,7 +178,7 @@ describe('ReferenceEntry', () => {
     it('should render entity type badges', () => {
       mockGetEntityTypes.mockReturnValue(['Person', 'Organization']);
 
-      renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      renderEntry();
 
       expect(screen.getByText('Person')).toBeInTheDocument();
       expect(screen.getByText('Organization')).toBeInTheDocument();
@@ -189,7 +187,7 @@ describe('ReferenceEntry', () => {
     it('should not render entity type section when empty', () => {
       mockGetEntityTypes.mockReturnValue([]);
 
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      const { container } = renderEntry();
 
       expect(container.querySelector('.semiont-annotation-entry__tags')).not.toBeInTheDocument();
     });
@@ -197,36 +195,28 @@ describe('ReferenceEntry', () => {
 
   describe('Focus and hover state', () => {
     it('should set data-focused to true when focused', () => {
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} isFocused={true} />
-      );
+      const { container } = renderEntry({ isFocused: true });
 
       const entry = container.firstChild as HTMLElement;
       expect(entry).toHaveAttribute('data-focused', 'true');
     });
 
     it('should set data-focused to false when not focused', () => {
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} isFocused={false} />
-      );
+      const { container } = renderEntry({ isFocused: false });
 
       const entry = container.firstChild as HTMLElement;
       expect(entry).toHaveAttribute('data-focused', 'false');
     });
 
     it('should apply pulse class when isHovered is true', () => {
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} isHovered={true} />
-      );
+      const { container } = renderEntry({ isHovered: true });
 
       const entry = container.firstChild as HTMLElement;
       expect(entry).toHaveClass('semiont-annotation-pulse');
     });
 
     it('should not apply pulse class when isHovered is false', () => {
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} isHovered={false} />
-      );
+      const { container } = renderEntry({ isHovered: false });
 
       const entry = container.firstChild as HTMLElement;
       expect(entry).not.toHaveClass('semiont-annotation-pulse');
@@ -237,12 +227,9 @@ describe('ReferenceEntry', () => {
     it('should emit browse:click on click', async () => {
       const clickHandler = vi.fn();
 
-      const { container, eventBus } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} />,
-        { returnEventBus: true }
-      );
+      const { container } = renderEntry();
 
-      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
+      const subscription = eventBus.get('browse:click').subscribe(clickHandler);
 
       const entry = container.firstChild as HTMLElement;
       await userEvent.click(entry);
@@ -257,24 +244,24 @@ describe('ReferenceEntry', () => {
   });
 
   describe('Status icon — resolved reference', () => {
-    it('should navigate on 🔗 icon click', async () => {
+    it('should call onOpenResource on 🔗 icon click', async () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
+      const onOpenResource = vi.fn();
 
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      const { container } = renderEntry({ onOpenResource });
 
       const icon = container.querySelector('.semiont-reference-icon')!;
       await userEvent.click(icon);
 
-      expect(mockRoutes.resourceDetail).toHaveBeenCalledWith('linked-doc');
-      expect(mockNavigate).toHaveBeenCalledWith('/resources/linked-doc', { resourceId: 'linked-doc' });
+      expect(onOpenResource).toHaveBeenCalledWith('linked-doc');
     });
 
     it('should have clickable class when resolved', () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
 
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      const { container } = renderEntry();
 
       const icon = container.querySelector('.semiont-reference-icon');
       expect(icon).toHaveClass('semiont-reference-icon--clickable');
@@ -284,9 +271,7 @@ describe('ReferenceEntry', () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
 
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />
-      );
+      const { container } = renderEntry({ annotateMode: true });
 
       const unlinkButton = container.querySelector('.semiont-reference-unlink');
       expect(unlinkButton).toBeInTheDocument();
@@ -296,9 +281,7 @@ describe('ReferenceEntry', () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
 
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={false} />
-      );
+      const { container } = renderEntry({ annotateMode: false });
 
       const unlinkButton = container.querySelector('.semiont-reference-unlink');
       expect(unlinkButton).not.toBeInTheDocument();
@@ -310,9 +293,7 @@ describe('ReferenceEntry', () => {
 
       const bindSpy = vi.spyOn(BindNamespace.prototype, 'body').mockResolvedValue(undefined);
 
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />,
-      );
+      const { container } = renderEntry({ annotateMode: true });
 
       const unlinkButton = container.querySelector('.semiont-reference-unlink')!;
       await userEvent.click(unlinkButton);
@@ -333,12 +314,9 @@ describe('ReferenceEntry', () => {
       mockGetEntityTypes.mockReturnValue(['Person']);
       const initiateHandler = vi.fn();
 
-      const { container, eventBus } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />,
-        { returnEventBus: true }
-      );
+      const { container } = renderEntry({ annotateMode: true });
 
-      const subscription = eventBus!.get('bind:initiate').subscribe(initiateHandler);
+      const subscription = eventBus.get('bind:initiate').subscribe(initiateHandler);
 
       const icon = container.querySelector('.semiont-reference-icon')!;
       await userEvent.click(icon);
@@ -356,9 +334,7 @@ describe('ReferenceEntry', () => {
     it('should have clickable class in annotate mode', () => {
       mockIsBodyResolved.mockReturnValue(false);
 
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={true} />
-      );
+      const { container } = renderEntry({ annotateMode: true });
 
       const icon = container.querySelector('.semiont-reference-icon');
       expect(icon).toHaveClass('semiont-reference-icon--clickable');
@@ -367,9 +343,7 @@ describe('ReferenceEntry', () => {
     it('should not be clickable in browse mode', () => {
       mockIsBodyResolved.mockReturnValue(false);
 
-      const { container } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={false} />
-      );
+      const { container } = renderEntry({ annotateMode: false });
 
       const icon = container.querySelector('.semiont-reference-icon');
       expect(icon).not.toHaveClass('semiont-reference-icon--clickable');
@@ -379,12 +353,9 @@ describe('ReferenceEntry', () => {
       mockIsBodyResolved.mockReturnValue(false);
       const initiateHandler = vi.fn();
 
-      const { container, eventBus } = renderWithProviders(
-        <ReferenceEntry {...defaultProps} annotateMode={false} />,
-        { returnEventBus: true }
-      );
+      const { container } = renderEntry({ annotateMode: false });
 
-      const subscription = eventBus!.get('bind:initiate').subscribe(initiateHandler);
+      const subscription = eventBus.get('bind:initiate').subscribe(initiateHandler);
 
       const icon = container.querySelector('.semiont-reference-icon')!;
       await userEvent.click(icon);
@@ -397,7 +368,7 @@ describe('ReferenceEntry', () => {
 
   describe('data-type attribute', () => {
     it('should have data-type="reference"', () => {
-      const { container } = renderWithProviders(<ReferenceEntry {...defaultProps} />);
+      const { container } = renderEntry();
 
       const entry = container.firstChild as HTMLElement;
       expect(entry).toHaveAttribute('data-type', 'reference');

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

@@ -0,0 +1,87 @@
+/**
+ * HEADLESS-ANNOTATION-PANELS Phase 1 (B2) — keystone: the panel family mounts
+ * provider-free with a session PROP.
+ *
+ * ReferencesPanel rendered with a fake session prop and NO SemiontProvider /
+ * routing contexts (Link/routes are already props; translations fall back to
+ * bundled English): lists a reference annotation, and an entry click reaches
+ * session.client.browse.click — the same interaction the Browser gets, no
+ * provider anywhere.
+ *
+ * Started RED (the family reads useSemiont() — provider crash; no session
+ * prop) and GREEN once B2 lands.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { Annotation, AnnotationId } from '@semiont/core';
+import type { RouteBuilder, LinkComponentProps } from '../../../../contexts/RoutingContext';
+import { ReferencesPanel } from '../ReferencesPanel';
+
+function fakeSession() {
+  const client = {
+    browse: { click: vi.fn(), tagSchemas: () => ({ subscribe: () => ({ unsubscribe: () => {} }) }) },
+    beckon: { hover: vi.fn(), sparkle: vi.fn() },
+    mark: { requestAssist: vi.fn(), delete: vi.fn() },
+  };
+  const session = {
+    client,
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+  return { session, client };
+}
+
+function referenceAnnotation(): Annotation {
+  return {
+    '@context': 'http://www.w3.org/ns/anno.jsonld',
+    id: 'ref-1' as AnnotationId,
+    type: 'Annotation',
+    motivation: 'linking',
+    creator: { '@type': 'Person', name: 'user@example.com' },
+    created: '2026-07-14T00:00:00Z',
+    target: {
+      source: 'res-1',
+      selector: [
+        { type: 'TextQuoteSelector', exact: 'linked text' },
+        { type: 'TextPositionSelector', start: 0, end: 11 },
+      ],
+    },
+  } as unknown as Annotation;
+}
+
+const TestLink = ({ href, children, ...rest }: LinkComponentProps) => (
+  <a href={href} {...rest}>{children}</a>
+);
+const testRoutes = {
+  resourceDetail: (id: string) => `/r/${id}`,
+  know: '/know',
+} as unknown as RouteBuilder;
+
+describe('ReferencesPanel — headless (session prop, no providers)', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('mounts provider-free, lists the reference, and routes an entry click through the session prop', () => {
+    const { session, client } = fakeSession();
+
+    render(
+      <ReferencesPanel
+        session={session}
+        resourceId="res-1"
+        annotations={[referenceAnnotation()]}
+        isAssisting={false}
+        progress={null}
+        pendingAnnotation={null}
+        allEntityTypes={[]}
+        Link={TestLink}
+        routes={testRoutes}
+      />,
+    );
+
+    const entryText = screen.getByText(/linked text/);
+    expect(entryText).toBeInTheDocument();
+
+    fireEvent.click(entryText);
+    expect(client.browse.click).toHaveBeenCalledWith('ref-1', 'linking');
+  });
+});

package/src/components/resource/panels/__tests__/ReferencesPanel.observable-flow.test.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { BehaviorSubject } from 'rxjs';
+import type { SemiontSession } from '@semiont/sdk';
 import { ReferencesPanel } from '../ReferencesPanel';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 import { useObservable } from '../../../../hooks/useObservable';
@@ -66,10 +67,11 @@ const mockRoutes = { resourceDetail: (id: string) => `/resource/${id}` } as any;
  * same hook ResourceViewerPage uses for vm.entityTypes$) and forwards
  * its value into ReferencesPanel as `allEntityTypes`.
  */
-function ObservableHarness({ source$ }: { source$: BehaviorSubject<string[]> }) {
+function ObservableHarness({ source$, session }: { source$: BehaviorSubject<string[]>; session: SemiontSession | null }) {
   const entityTypes = useObservable(source$) ?? [];
   return (
-    <ReferencesPanel resourceId="res-1"
+    <ReferencesPanel session={session}
+      resourceId="res-1"
       annotations={[]}
       isAssisting={false}
       progress={null}
@@ -85,15 +87,19 @@ function ObservableHarness({ source$ }: { source$: BehaviorSubject<string[]> })
   );
 }
 
-const renderWithBus = (ui: React.ReactElement) => {
-  const { SemiontWrapper } = createTestSemiontWrapper();
-  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
+// Callback form so the UI is built AFTER the per-call factory runs: the
+// provider-free ReferencesPanel only sees the `session` prop, which must be
+// the fake session from this call (test-utils disposes each created client
+// in a module-scope afterEach, so no module-scope session either).
+const renderWithBus = (ui: (session: SemiontSession) => React.ReactElement) => {
+  const { SemiontWrapper, session } = createTestSemiontWrapper();
+  return render(<SemiontWrapper>{ui(session)}</SemiontWrapper>);
 };
 
 describe('Layer 5-6 — state-unit observable → useObservable → ReferencesPanel chips', () => {
   it('an observable seeded with [9 strings] renders 9 pending-reference chips', async () => {
     const source$ = new BehaviorSubject<string[]>(NINE_TYPES);
-    renderWithBus(<ObservableHarness source$={source$} />);
+    renderWithBus((session) => <ObservableHarness source$={source$} session={session} />);
 
     // Wait for useEffect in useObservable to run and commit the value.
     const chips = await screen.findAllByRole('button', { name: (_, el) =>
@@ -107,7 +113,7 @@ describe('Layer 5-6 — state-unit observable → useObservable → ReferencesPa
     // to []) first, then the 9-string array once fetch resolves. The
     // prop chain must survive this transition.
     const source$ = new BehaviorSubject<string[]>([]);
-    renderWithBus(<ObservableHarness source$={source$} />);
+    renderWithBus((session) => <ObservableHarness source$={source$} session={session} />);
 
     // Initially: no chips (the gate is allEntityTypes.length > 0).
     expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(0);
@@ -126,7 +132,7 @@ describe('Layer 5-6 — state-unit observable → useObservable → ReferencesPa
     // to concurrent SSE streams. Same data, but multiple BehaviorSubject
     // writes. Must not clobber the render.
     const source$ = new BehaviorSubject<string[]>([]);
-    renderWithBus(<ObservableHarness source$={source$} />);
+    renderWithBus((session) => <ObservableHarness source$={source$} session={session} />);
 
     await act(async () => {
       source$.next(NINE_TYPES);
@@ -143,7 +149,7 @@ describe('Layer 5-6 — state-unit observable → useObservable → ReferencesPa
     // message the failing e2e saw. Guards against the test passing
     // trivially because of a selector bug.
     const source$ = new BehaviorSubject<string[]>([]);
-    renderWithBus(<ObservableHarness source$={source$} />);
+    renderWithBus((session) => <ObservableHarness source$={source$} session={session} />);
 
     // There are two such text nodes in the panel (pending prompt + assist
     // section), but both correspond to the same allEntityTypes=[] state.