@semiont/react-ui 0.5.10 → 0.5.11

package/src/components/resource/__tests__/BrowseView.reference-hover.test.tsx

@@ -0,0 +1,161 @@
+/**
+ * EMBEDDABLE-VIEWER-COMPLETION Phase 2b — `onReferenceHover`.
+ *
+ * Hovering a RESOLVED reference span fires `onReferenceHover({annotation,
+ * referent, anchorRect})` once — after the viewer's dwell AND the referent's
+ * cached descriptor resolves. A stub fires nothing (not even null); leaving
+ * before the descriptor resolves cancels (no fire, and no stray null); leaving
+ * after a fire sends `null`; the beckon:hover panel-highlight emit is untouched.
+ *
+ * Started RED (no `onReferenceHover` prop) and GREEN once Phase 2b lands.
+ * Test mechanics mirror BrowseView.test.tsx: mock target with `closest()`,
+ * fake timers for the dwell, a BehaviorSubject standing in for the cached
+ * `browse.resource` observable so the test controls resolve timing.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BehaviorSubject } from 'rxjs';
+import type { Annotation, AnnotationId, ResourceDescriptor } from '@semiont/core';
+import type { SemiontSession } from '@semiont/sdk';
+import { BrowseView } from '../BrowseView';
+
+vi.mock('../../annotation/AnnotateToolbar', () => ({ AnnotateToolbar: () => null }));
+vi.mock('react-markdown', () => ({ default: ({ children }: { children: string }) => <div>{children}</div> }));
+vi.mock('remark-gfm', () => ({ default: () => ({}) }));
+// jsdom has no Range API — the overlay is not under test here.
+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(() => []),
+}));
+
+const REFERENT = { '@id': 'res-target', name: 'Target Doc' } as unknown as ResourceDescriptor;
+const DWELL = 100;
+
+const makeAnnotation = (id: string, body: Annotation['body']): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: id as AnnotationId,
+  type: 'Annotation',
+  motivation: 'linking',
+  creator: { '@type': 'Person', name: 'u' },
+  created: '2024-01-01T00:00:00Z',
+  target: { source: 'res-1', selector: { type: 'TextPositionSelector', start: 0, end: 4 } },
+  body,
+});
+
+const resolvedRef = makeAnnotation('ref-resolved', [{ type: 'SpecificResource', source: 'res-target', purpose: 'linking' }]);
+const stubRef = makeAnnotation('ref-stub', []);
+
+function setup(onReferenceHover?: (h: unknown) => void) {
+  const referent$ = new BehaviorSubject<ResourceDescriptor | undefined>(undefined);
+  const beckonHover = vi.fn();
+  const browseResource = vi.fn(() => referent$);
+  const session = {
+    client: {
+      browse: { click: vi.fn(), resource: browseResource },
+      beckon: { hover: beckonHover },
+    },
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+
+  const { container } = render(
+    <BrowseView
+      content="some text"
+      mimeType="text/plain"
+      resourceUri="res-1"
+      annotations={{ highlights: [], references: [resolvedRef, stubRef], assessments: [], comments: [], tags: [] }}
+      annotateMode={false}
+      hoverDelayMs={DWELL}
+      session={session}
+      {...(onReferenceHover ? { onReferenceHover } : {})}
+    />,
+  );
+  const content = container.querySelector('.semiont-browse-view__content')!;
+
+  const hoverTarget = (id: string) => {
+    const el = document.createElement('span');
+    el.setAttribute('data-annotation-id', id);
+    return { el, target: { closest: vi.fn(() => el) } as unknown as Element };
+  };
+
+  return { content, referent$, beckonHover, browseResource, hoverTarget };
+}
+
+describe('BrowseView — onReferenceHover (Phase 2b)', () => {
+  beforeEach(() => { vi.useFakeTimers(); });
+  afterEach(() => { vi.useRealTimers(); });
+
+  it('fires once after dwell + descriptor resolve, with {annotation, referent, anchorRect}', () => {
+    const onReferenceHover = vi.fn();
+    const { content, referent$, hoverTarget } = setup(onReferenceHover);
+
+    fireEvent.mouseOver(content, { target: hoverTarget('ref-resolved').target });
+    vi.advanceTimersByTime(DWELL + 10);        // dwell fires → subscribe starts
+    expect(onReferenceHover).not.toHaveBeenCalled(); // descriptor not resolved yet
+
+    referent$.next(REFERENT);                  // descriptor lands
+    expect(onReferenceHover).toHaveBeenCalledTimes(1);
+    const hover = onReferenceHover.mock.calls[0]![0];
+    expect(hover.annotation.id).toBe('ref-resolved');
+    expect(hover.referent).toBe(REFERENT);
+    expect(typeof hover.anchorRect.top).toBe('number'); // DOMRect from the hovered span
+
+    referent$.next({ ...REFERENT });           // later cache emissions must NOT re-fire
+    expect(onReferenceHover).toHaveBeenCalledTimes(1);
+  });
+
+  it('a stub reference fires nothing — not even null on leave', () => {
+    const onReferenceHover = vi.fn();
+    const { content, beckonHover, hoverTarget } = setup(onReferenceHover);
+
+    const { target } = hoverTarget('ref-stub');
+    fireEvent.mouseOver(content, { target });
+    vi.advanceTimersByTime(DWELL + 10);
+    fireEvent.mouseOut(content, { target });
+
+    expect(onReferenceHover).not.toHaveBeenCalled();
+    expect(beckonHover).toHaveBeenCalledWith('ref-stub'); // panel-highlight path unaffected
+  });
+
+  it('leaving before the descriptor resolves cancels: no fire, and a late resolve stays silent', () => {
+    const onReferenceHover = vi.fn();
+    const { content, referent$, hoverTarget } = setup(onReferenceHover);
+
+    const { target } = hoverTarget('ref-resolved');
+    fireEvent.mouseOver(content, { target });
+    vi.advanceTimersByTime(DWELL + 10);        // dwell fired, load in flight
+    fireEvent.mouseOut(content, { target });   // leave first
+
+    referent$.next(REFERENT);                  // late resolve
+    expect(onReferenceHover).not.toHaveBeenCalled(); // cancelled — and no stray null either
+  });
+
+  it('leaving after a fire sends null', () => {
+    const onReferenceHover = vi.fn();
+    const { content, referent$, hoverTarget } = setup(onReferenceHover);
+
+    const { target } = hoverTarget('ref-resolved');
+    fireEvent.mouseOver(content, { target });
+    vi.advanceTimersByTime(DWELL + 10);
+    referent$.next(REFERENT);
+    expect(onReferenceHover).toHaveBeenCalledTimes(1);
+
+    fireEvent.mouseOut(content, { target });
+    expect(onReferenceHover).toHaveBeenCalledTimes(2);
+    expect(onReferenceHover).toHaveBeenLastCalledWith(null);
+  });
+
+  it('without onReferenceHover, hover still emits beckon:hover and loads nothing', () => {
+    const { content, beckonHover, browseResource, hoverTarget } = setup();
+
+    fireEvent.mouseOver(content, { target: hoverTarget('ref-resolved').target });
+    vi.advanceTimersByTime(DWELL + 10);
+
+    expect(beckonHover).toHaveBeenCalledWith('ref-resolved');
+    expect(browseResource).not.toHaveBeenCalled(); // no handler → no referent load
+  });
+});

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

@@ -0,0 +1,43 @@
+/**
+ * EMBEDDABLE-RESOURCE-VIEWER step 3 — overridable browse media-renderer registry.
+ *
+ * A consumer can swap a media renderer via the `renderers` prop (e.g. its own PDF
+ * viewer) without forking BrowseView. AnnotateToolbar is mocked (unrelated here).
+ *
+ * Started RED (tsc: no `renderers` prop) and GREEN once step 3 lands.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import { BrowseView } from '../BrowseView';
+import type { MediaRendererProps } from '../browse-renderers';
+
+vi.mock('../../annotation/AnnotateToolbar', () => ({ AnnotateToolbar: () => null }));
+
+const emptyAnnotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
+
+function fakeSession(): SemiontSession {
+  return {
+    client: { browse: { click: vi.fn() }, beckon: { hover: vi.fn() } },
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+}
+
+describe('BrowseView — media-renderer registry', () => {
+  it('uses a custom renderer from the `renderers` override', () => {
+    const CustomText = ({ content }: MediaRendererProps) => <div>custom-render: {content}</div>;
+    render(
+      <BrowseView
+        content="the-body"
+        mimeType="text/plain"
+        resourceUri="res-1"
+        annotations={emptyAnnotations}
+        annotateMode={false}
+        session={fakeSession()}
+        renderers={{ text: CustomText }}
+      />,
+    );
+    expect(screen.getByText(/custom-render: the-body/)).toBeInTheDocument();
+  });
+});

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

@@ -3,17 +3,15 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowseView } from '../BrowseView';
 import type { EventBus } from '@semiont/core';
+import type { SemiontClient, SemiontSession } from '@semiont/sdk';
 import { createTestSemiontWrapper } from '../../../test-utils';
 
 import type { Annotation, AnnotationId } from '@semiont/core';
 
-// Mock ResourceAnnotationsContext - keep this simple
-let mockNewAnnotationIds = new Set<string>();
-vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
-  useResourceAnnotations: vi.fn(() => ({
-    newAnnotationIds: mockNewAnnotationIds,
-  })),
-}));
+// BrowseView takes its `session` + `newAnnotationIds` as props now (step 1a) — no
+// ResourceAnnotationsContext / SemiontProvider reach-in. `makeSession` (below)
+// wraps the fake client so browse:click / beckon:hover land on the bus the
+// trackers listen on, and session.subscribe registers beckon:* on that bus.
 
 // Mock @semiont/core utilities. The media-type registry (`capabilitiesOf`)
 // is NOT mocked — BrowseView dispatches on the real registry's render mode,
@@ -116,34 +114,47 @@ function createEventTracker() {
   };
 }
 
+// BrowseView now takes its session as a prop. Wrap the fake client so
+// browse:click / beckon:hover emit on the SAME bus the trackers listen on, and
+// session.subscribe registers beckon:* there (mirrors test-utils' fake session).
+function makeSession(client: SemiontClient): SemiontSession {
+  return {
+    client,
+    subscribe: (channel: string, handler: (p: never) => void) => {
+      const sub = (client.bus.get(channel as never) as { subscribe(fn: (p: never) => void): { unsubscribe(): void } }).subscribe(handler);
+      return () => sub.unsubscribe();
+    },
+  } as unknown as SemiontSession;
+}
+
 const renderWithProviders = (
-  component: React.ReactElement,
+  component: React.ReactElement<React.ComponentProps<typeof BrowseView>>,
   options: { newAnnotationIds?: Set<string> } = {}
 ) => {
-  if (options.newAnnotationIds) {
-    mockNewAnnotationIds = options.newAnnotationIds;
-  }
-  const { SemiontWrapper } = createTestSemiontWrapper();
+  const { SemiontWrapper, client } = createTestSemiontWrapper();
   const Wrapper = ({ children }: { children: React.ReactNode }) => (
     <SemiontWrapper>{children}</SemiontWrapper>
   );
-  return render(component, { wrapper: Wrapper });
+  return render(
+    React.cloneElement(component, { session: makeSession(client), newAnnotationIds: options.newAnnotationIds }),
+    { wrapper: Wrapper },
+  );
 };
 
 const renderWithEventTracking = (
-  component: React.ReactElement,
+  component: React.ReactElement<React.ComponentProps<typeof BrowseView>>,
   tracker: ReturnType<typeof createEventTracker>,
   options: { newAnnotationIds?: Set<string> } = {}
 ) => {
-  if (options.newAnnotationIds) {
-    mockNewAnnotationIds = options.newAnnotationIds;
-  }
-  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  const { SemiontWrapper, eventBus, client } = createTestSemiontWrapper();
   tracker._attach(eventBus);
   const Wrapper = ({ children }: { children: React.ReactNode }) => (
     <SemiontWrapper>{children}</SemiontWrapper>
   );
-  return render(component, { wrapper: Wrapper });
+  return render(
+    React.cloneElement(component, { session: makeSession(client), newAnnotationIds: options.newAnnotationIds }),
+    { wrapper: Wrapper },
+  );
 };
 
 // Test data fixtures
@@ -179,11 +190,13 @@ describe('BrowseView Component', () => {
     hoveredAnnotationId: null,
     selectedClick: 'detail' as const,
     annotateMode: false,
+    // Placeholder — the render helpers override this with a session bound to the
+    // fake client's bus (so emits/subscriptions land where the trackers listen).
+    session: null as SemiontSession | null,
   };
 
   beforeEach(() => {
     vi.clearAllMocks();
-    mockNewAnnotationIds = new Set();
 
     // Mock scrollIntoView for jsdom
     if (typeof Element !== 'undefined') {
@@ -499,7 +512,7 @@ describe('BrowseView Component', () => {
         tags: [],
       };
 
-      const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+      const { SemiontWrapper, eventBus, client } = createTestSemiontWrapper();
       eventBus.get('beckon:hover').subscribe((payload: any) => {
         eventTracker.push({ event: 'beckon:hover', annotationId: payload?.annotationId ?? null });
       });
@@ -509,7 +522,7 @@ describe('BrowseView Component', () => {
 
       const { container } = render(
         <SemiontWrapper>
-          <BrowseView {...defaultProps} annotations={manyAnnotations} />
+          <BrowseView {...defaultProps} annotations={manyAnnotations} session={makeSession(client)} />
         </SemiontWrapper>
       );
 

package/src/components/resource/__tests__/ResourceViewer.embeddable.test.tsx

@@ -0,0 +1,63 @@
+/**
+ * EMBEDDABLE-RESOURCE-VIEWER — keystone acceptance spec.
+ *
+ * The consumer's (my-chat) actual requirement: render + interact with a resource
+ * fed ONLY a `SemiontSession`, with NO SemiontProvider / TranslationProvider /
+ * cache context mounted. This is the definition of done for provider-free
+ * rendering — the "an external host can import the pieces" half of the plan's
+ * dual acceptance test.
+ *
+ * GREEN as of step 1c: the browse-mode subtree (ResourceViewer → BrowseView →
+ * AnnotateToolbar) renders provider-free from a bare session. The annotate-mode
+ * subtree is covered by AnnotateView.embeddable.test.tsx.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
+import { ResourceViewer } from '../ResourceViewer';
+
+// Minimal bring-your-own-session double: just the surface ResourceViewer + its
+// subtree touch — `client.browse` / `client.mark` and generic-channel `subscribe`.
+function fakeSession(): SemiontSession {
+  const client = {
+    baseUrl: 'http://localhost:4000',
+    browse: { invalidateAnnotationList: vi.fn(), click: vi.fn() },
+    mark: { delete: vi.fn() },
+  };
+  return {
+    client,
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+}
+
+const resource: SemiontResource & { content: string } = {
+  '@context': 'https://www.w3.org/ns/activitystreams',
+  '@id': 'res-1' as ResourceId,
+  name: 'Doc',
+  created: '2024-01-01T00:00:00Z',
+  entityTypes: [],
+  archived: false,
+  representations: [{ mediaType: 'text/plain', byteSize: 10 }],
+  content: 'Embeddable content.',
+};
+
+const annotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
+
+describe('ResourceViewer — embeddable (bring-your-own-session, no providers)', () => {
+  // GREEN: the whole browse-mode subtree (ResourceViewer → BrowseView →
+  // AnnotateToolbar) renders provider-free from a bare session.
+  it('renders content fed only a session, with NO providers mounted', () => {
+    render(
+      <ResourceViewer
+        session={fakeSession()}
+        resource={resource}
+        annotations={annotations}
+        onOpenResource={vi.fn()}
+        onOpenPanel={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Embeddable content.')).toBeInTheDocument();
+  });
+});

package/src/components/resource/__tests__/ResourceViewer.mode-switch.test.tsx

@@ -19,14 +19,10 @@ import { TranslationProvider } from '../../../contexts/TranslationContext';
 import { ResourceAnnotationsProvider } from '../../../contexts/ResourceAnnotationsContext';
 import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
 
-// Mock dependencies
-vi.mock('../../../hooks/useObservableBrowse', () => ({
-  useObservableExternalNavigation: () => vi.fn(),
-}));
-
-// ResourceViewer (and ResourceAnnotationsContext) now resolve the client via
+// ResourceViewer now takes its session as a prop; its children (BrowseView /
+// AnnotateView) and ResourceAnnotationsContext still resolve the client via
 // useSemiont(). Mock useSemiont to emit a minimal session carrying a stub
-// client with the methods the subject component touches. The session also
+// client with the methods those children touch. The session also
 // exposes `on` and `emit` stubs so useEventSubscription(s) don't explode.
 const stubClient = {
   browse: { invalidateAnnotationList: vi.fn() },
@@ -115,6 +111,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -128,6 +125,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -144,6 +142,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -158,6 +157,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -169,6 +169,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -181,6 +182,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -193,6 +195,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -209,6 +212,7 @@ describe('ResourceViewer - Mode Switching', () => {
         <ResourceViewer
           resource={mockResource}
           annotations={mockAnnotations}
+          session={null}
         />
       </TestWrapper>
     );
@@ -221,6 +225,7 @@ describe('ResourceViewer - Mode Switching', () => {
           <ResourceViewer
             resource={mockResource}
             annotations={mockAnnotations}
+            session={null}
           />
         </TestWrapper>
       );

package/src/components/resource/__tests__/ResourceViewer.toolbar-opt-out.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * VIEWER-TOOLBAR-OPT-OUT — `showToolbar={false}` is a supported opt-out.
+ *
+ * Tier-2 hosts (controlled props, host-composed controls) hide the built-in
+ * bar by CONTRACT, not by CSS-ing react-ui's internals. Hiding the bar must
+ * not disable any seam: the keystone here proves annotate-mode selection
+ * capture still emits mark.request with the bar gone.
+ *
+ * Started RED (the prop doesn't exist; bars render everywhere) → GREEN.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
+import { ResourceViewer } from '../ResourceViewer';
+
+// Render the real content so jsdom text selection can target it.
+vi.mock('../../CodeMirrorRenderer', () => ({
+  CodeMirrorRenderer: ({ content }: { content: string }) => <div className="codemirror-renderer">{content}</div>,
+}));
+vi.mock('../../image-annotation/SvgDrawingCanvas', () => ({ SvgDrawingCanvas: () => <div>svg-mock</div> }));
+vi.mock('../../pdf-annotation/PdfAnnotationCanvas.client', () => ({ PdfAnnotationCanvas: () => <div>pdf-mock</div> }));
+vi.mock('react-markdown', () => ({ default: ({ children }: { children: string }) => <div>{children}</div> }));
+vi.mock('remark-gfm', () => ({ default: () => ({}) }));
+
+const CONTENT = 'hello world selectme end';
+
+function makeResource(mediaType = 'text/plain'): SemiontResource & { content: string } {
+  return {
+    '@context': 'https://www.w3.org/ns/activitystreams',
+    '@id': 'res-1' as ResourceId,
+    name: 'Doc',
+    created: '2024-01-01T00:00:00Z',
+    entityTypes: [],
+    archived: false,
+    representations: [{ mediaType, byteSize: 10 }],
+    content: CONTENT,
+  };
+}
+
+const annotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
+
+function fakeSession() {
+  const client = {
+    browse: { click: vi.fn(), invalidateAnnotationList: vi.fn() },
+    beckon: { hover: vi.fn() },
+    mark: { request: vi.fn(), delete: vi.fn() },
+  };
+  return { session: { client, subscribe: () => () => {} } as unknown as SemiontSession, client };
+}
+
+const bars = (c: HTMLElement) => c.querySelectorAll('.semiont-annotate-toolbar').length;
+
+describe('ResourceViewer — showToolbar opt-out', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    window.getSelection()?.removeAllRanges();
+  });
+
+  it('default pins today’s behavior: the bar renders in browse and annotate modes', () => {
+    const { session } = fakeSession();
+    const browse = render(
+      <ResourceViewer session={session} resource={makeResource()} annotations={annotations} />,
+    );
+    expect(bars(browse.container)).toBe(1);
+
+    const annotate = render(
+      <ResourceViewer session={session} resource={makeResource()} annotations={annotations}
+        annotateMode={true} onAnnotateModeChange={vi.fn()} />,
+    );
+    expect(bars(annotate.container)).toBe(1);
+  });
+
+  it('showToolbar={false}: no bar in browse mode', () => {
+    const { session } = fakeSession();
+    const { container } = render(
+      <ResourceViewer session={session} resource={makeResource()} annotations={annotations}
+        showToolbar={false} />,
+    );
+    expect(bars(container)).toBe(0);
+    expect(screen.getByText(CONTENT)).toBeInTheDocument(); // content still renders
+  });
+
+  it('showToolbar={false}: no bar in any annotate render mode (text / image / pdf)', async () => {
+    const { session } = fakeSession();
+    const text = render(
+      <ResourceViewer session={session} resource={makeResource('text/plain')} annotations={annotations}
+        annotateMode={true} onAnnotateModeChange={vi.fn()} showToolbar={false} />,
+    );
+    expect(bars(text.container)).toBe(0);
+
+    const image = render(
+      <ResourceViewer session={session} resource={makeResource('image/png')} annotations={annotations}
+        annotateMode={true} onAnnotateModeChange={vi.fn()} showToolbar={false} />,
+    );
+    expect(within(image.container).getByText('svg-mock')).toBeInTheDocument();
+    expect(bars(image.container)).toBe(0);
+
+    const pdf = render(
+      <ResourceViewer session={session} resource={makeResource('application/pdf')} annotations={annotations}
+        annotateMode={true} onAnnotateModeChange={vi.fn()} showToolbar={false} />,
+    );
+    await within(pdf.container).findByText('pdf-mock'); // flush the lazy canvas
+    expect(bars(pdf.container)).toBe(0);
+  });
+
+  it('keystone: with the bar hidden, annotate-mode selection still emits mark.request', () => {
+    const { session, client } = fakeSession();
+    const { container } = render(
+      <ResourceViewer session={session} resource={makeResource('text/plain')} annotations={annotations}
+        annotateMode={true} onAnnotateModeChange={vi.fn()}
+        selectionMotivation="highlighting" onSelectionMotivationChange={vi.fn()}
+        showToolbar={false} />,
+    );
+    expect(bars(container)).toBe(0);
+
+    // Select "world" (offsets 6..11) inside the rendered content, then mouseup.
+    const contentEl = within(container).getByText(CONTENT);
+    const range = document.createRange();
+    range.setStart(contentEl.firstChild!, 6);
+    range.setEnd(contentEl.firstChild!, 11);
+    const selection = window.getSelection()!;
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    fireEvent.mouseUp(contentEl);
+
+    expect(client.mark.request).toHaveBeenCalledTimes(1);
+    const [source, selectors, motivation] = client.mark.request.mock.calls[0]!;
+    expect(String(source)).toBe('res-1');
+    expect(selectors).toBeTruthy();
+    expect(motivation).toBe('highlighting');
+  });
+});