@semiont/react-ui 0.5.10 → 0.5.11

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -56,7 +56,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('renders loading state initially', () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -67,7 +67,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('renders page navigation controls after loading', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -83,7 +83,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('previous button is disabled on first page', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -99,7 +99,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('next button is disabled on last page', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
@@ -144,7 +144,7 @@ describe('PdfAnnotationCanvas', () => {
     ];
 
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         existingAnnotations={mockAnnotations}
         drawingMode={null}
@@ -179,7 +179,7 @@ describe('PdfAnnotationCanvas', () => {
 
   test('accepts a drawing gesture without throwing when drawing mode is active', async () => {
     render(
-      <PdfAnnotationCanvas
+      <PdfAnnotationCanvas resourceUri="res-1"
         pdfUrl={mockPdfUrl}
         drawingMode="rectangle"
         selectedMotivation="highlighting"

package/src/components/resource/AnnotateView.tsx

@@ -1,22 +1,19 @@
 'use client';
 
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
-import { capabilitiesOf } from '@semiont/core';
+import { capabilitiesOf, resourceId as toResourceId } from '@semiont/core';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
 import { buildTextSelectors, fallbackTextPosition } from '../../lib/text-selection-handler';
 import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
 
-import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
-
 // 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 })));
 
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
 import type { EditorView } from '@codemirror/view';
-import { useSemiont } from '../../session/SemiontProvider';
-import { useObservable } from '../../hooks/useObservable';
-import { useEventSubscriptions } from '../../contexts/useEventSubscription';
+import type { SemiontSession } from '@semiont/sdk';
+import { useSessionEventSubscriptions } from '../../hooks/useSessionEventSubscriptions';
 
 // Type augmentation for custom DOM properties
 interface EnrichedHTMLElement extends HTMLElement {
@@ -31,7 +28,8 @@ export type { SelectionMotivation, ClickAction, ShapeType };
 interface Props {
   content: string;
   mimeType?: string;
-  resourceUri?: string;
+  /** The '@id' of the shown resource — stamped as `source` on mark:requested (multi-viewer routing). */
+  resourceUri: string;
   annotations: AnnotationsCollection;
   uiState: AnnotationUIState;
   onUIStateChange?: (state: Partial<AnnotationUIState>) => void;
@@ -42,15 +40,20 @@ interface Props {
   showLineNumbers?: boolean;
   hoverDelayMs?: number;
   annotateMode: boolean;
+  /** Session for the shown resource — its client emits mark:* / mark.request; its bus feeds toolbar + beckon events. */
+  session: SemiontSession | null;
+  /** Recently-created annotation ids to sparkle (host-provided; was ResourceAnnotationsContext). */
+  newAnnotationIds?: Set<string>;
+  /** The bar's Mode control reports the chosen mode here (the owner applies it). */
+  onModeChange?: (mode: boolean) => void;
+  /** Render the built-in bar (default). false → no bar; selection capture and drawing stay live. */
+  showToolbar?: boolean;
 }
 
 /**
  * View component for annotating resources with text selection and drawing
  *
  * @emits mark:requested - User requested to create annotation. Payload: { selector: Selector | Selector[], motivation: SelectionMotivation }
- * @subscribes mark:selection-changed - Toolbar selection changed. Payload: { motivation: string | null }
- * @subscribes mark:click-changed - Toolbar click action changed. Payload: { action: string }
- * @subscribes mark:shape-changed - Toolbar shape changed. Payload: { shape: string }
  * @subscribes beckon:hover - Annotation hovered. Payload: { annotationId: string | null }
  */
 export function AnnotateView({
@@ -65,11 +68,13 @@ export function AnnotateView({
   generatingReferenceId,
   showLineNumbers = false,
   hoverDelayMs = 150,
-  annotateMode
+  annotateMode,
+  session,
+  newAnnotationIds,
+  onModeChange,
+  showToolbar = true,
 }: Props) {
-  const { newAnnotationIds } = useResourceAnnotations();
   const containerRef = useRef<HTMLDivElement>(null);
-  const session = useObservable(useSemiont().activeSession$);
 
   const render = capabilitiesOf(mimeType)?.render ?? 'none';
 
@@ -85,28 +90,27 @@ export function AnnotateView({
   const onUIStateChangeRef = useRef(onUIStateChange);
   onUIStateChangeRef.current = onUIStateChange;
 
-  // Toolbar event handlers (extracted to avoid inline arrow functions)
-  const handleToolbarSelectionChanged = useCallback(({ motivation }: { motivation: string | null }) => {
-    onUIStateChangeRef.current?.({ selectedMotivation: motivation as SelectionMotivation | null });
+  // Toolbar callbacks: the presentational bar reports chosen values; route them up
+  // through the existing onUIStateChange path (the owner applies them).
+  const handleToolbarSelectionChange = useCallback((motivation: SelectionMotivation | null) => {
+    onUIStateChangeRef.current?.({ selectedMotivation: motivation });
   }, []);
 
-  const handleToolbarClickChanged = useCallback(({ action }: { action: string }) => {
-    onUIStateChangeRef.current?.({ selectedClick: action as ClickAction });
+  const handleToolbarClickActionChange = useCallback((action: ClickAction) => {
+    onUIStateChangeRef.current?.({ selectedClick: action });
   }, []);
 
-  const handleToolbarShapeChanged = useCallback(({ shape }: { shape: string }) => {
-    onUIStateChangeRef.current?.({ selectedShape: shape as ShapeType });
+  const handleToolbarShapeChange = useCallback((shape: ShapeType) => {
+    onUIStateChangeRef.current?.({ selectedShape: shape });
   }, []);
 
   const handleAnnotationHover = useCallback(({ annotationId }: { annotationId: string | null }) => {
     onUIStateChangeRef.current?.({ hoveredAnnotationId: annotationId });
   }, []);
 
-  // Subscribe to toolbar events and annotation hover
-  useEventSubscriptions({
-    'mark:selection-changed': handleToolbarSelectionChanged,
-    'mark:click-changed': handleToolbarClickChanged,
-    'mark:shape-changed': handleToolbarShapeChanged,
+  // Annotation hover (session-scoped). Toolbar preference changes flow through
+  // props/callbacks, not the bus (TOOLBAR-PREFS-AS-PROPS).
+  useSessionEventSubscriptions(session, {
     'beckon:hover': handleAnnotationHover,
   });
 
@@ -176,7 +180,7 @@ export function AnnotateView({
         const selectors = buildTextSelectors(content, text, start, end);
         if (!selectors) return;
 
-        session?.client.mark.request(selectors, selectedMotivation);
+        session?.client.mark.request(toResourceId(resourceUri), selectors, selectedMotivation);
 
         // Clear selection after creating annotation
         selection.removeAllRanges();
@@ -190,20 +194,27 @@ export function AnnotateView({
       container.removeEventListener('mouseup', handleMouseUp);
       container.removeEventListener('mousedown', handleMouseDown);
     };
-  }, [selectedMotivation, content]);
+  }, [selectedMotivation, content, resourceUri]);
 
   // Route to the annotation viewer for this media type's render mode.
   switch (render) {
     case 'text':
       return (
         <div className="semiont-annotate-view" data-mime-type="text" ref={containerRef}>
+          {showToolbar && (
           <AnnotateToolbar
             selectedMotivation={selectedMotivation}
             selectedClick={selectedClick}
+            selectedShape={selectedShape}
             mediaType={mimeType}
             annotateMode={annotateMode}
             annotators={ANNOTATORS}
+            onModeChange={onModeChange}
+            onClickActionChange={handleToolbarClickActionChange}
+            onSelectionChange={handleToolbarSelectionChange}
+            onShapeChange={handleToolbarShapeChange}
           />
+          )}
           <div className="semiont-annotate-view__content">
             <CodeMirrorRenderer
             content={content}
@@ -229,20 +240,26 @@ export function AnnotateView({
       // PDF annotation support (spatial, FragmentSelector)
       return (
         <div className="semiont-annotate-view" data-mime-type="pdf" ref={containerRef}>
+          {showToolbar && (
           <AnnotateToolbar
             selectedMotivation={selectedMotivation}
             selectedClick={selectedClick}
-            showShapeGroup={true}
             selectedShape={selectedShape}
             mediaType={mimeType}
             annotateMode={annotateMode}
             annotators={ANNOTATORS}
+            onModeChange={onModeChange}
+            onClickActionChange={handleToolbarClickActionChange}
+            onSelectionChange={handleToolbarSelectionChange}
+            onShapeChange={handleToolbarShapeChange}
           />
+          )}
           <div className="semiont-annotate-view__content">
             {content && (
               <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
                 <PdfAnnotationCanvas
                   pdfUrl={content}
+                  resourceUri={resourceUri}
                   existingAnnotations={allAnnotations}
                   drawingMode={selectedMotivation ? selectedShape : null}
                   selectedMotivation={selectedMotivation}
@@ -260,19 +277,25 @@ export function AnnotateView({
       // PNG, JPEG, etc. - full annotation support
       return (
         <div className="semiont-annotate-view" data-mime-type="image" ref={containerRef}>
+          {showToolbar && (
           <AnnotateToolbar
             selectedMotivation={selectedMotivation}
             selectedClick={selectedClick}
-            showShapeGroup={true}
             selectedShape={selectedShape}
             mediaType={mimeType}
             annotateMode={annotateMode}
             annotators={ANNOTATORS}
+            onModeChange={onModeChange}
+            onClickActionChange={handleToolbarClickActionChange}
+            onSelectionChange={handleToolbarSelectionChange}
+            onShapeChange={handleToolbarShapeChange}
           />
+          )}
           <div className="semiont-annotate-view__content">
             {content && (
               <SvgDrawingCanvas
                 imageUrl={content}
+                resourceUri={resourceUri}
                 existingAnnotations={allAnnotations}
                 drawingMode={selectedMotivation ? selectedShape : null}
                 selectedMotivation={selectedMotivation}
@@ -293,15 +316,13 @@ export function AnnotateView({
             <p className="semiont-annotate-view__empty-message">
               Annotation not supported for {mimeType}
             </p>
-            {resourceUri && (
-              <a
-                href={`/api/resources/${resourceUri}`}
-                download
-                className="semiont-button semiont-button--primary"
-              >
-                Download File
-              </a>
-            )}
+            <a
+              href={`/api/resources/${resourceUri}`}
+              download
+              className="semiont-button semiont-button--primary"
+            >
+              Download File
+            </a>
           </div>
         </div>
       );

package/src/components/resource/BrowseView.tsx

@@ -1,14 +1,12 @@
 'use client';
 
-import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { annotationId as toAnnotationId } from '@semiont/core';
-import { capabilitiesOf } from '@semiont/core';
+import { useEffect, useRef, useCallback, useMemo, memo, type MouseEvent as ReactMouseEvent } from 'react';
+import { annotationId as toAnnotationId, resourceId as toResourceId } from '@semiont/core';
+import { capabilitiesOf, getBodySource, isResolvedReference } from '@semiont/core';
+import type { Annotation, ResourceDescriptor } from '@semiont/core';
 import { createHoverHandlers } from '@semiont/sdk';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 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 {
@@ -20,13 +18,9 @@ import {
   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 })));
-
-import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
-import { useSemiont } from '../../session/SemiontProvider';
-import { useObservable } from '../../hooks/useObservable';
-import { useEventSubscriptions } from '../../contexts/useEventSubscription';
+import type { SemiontSession } from '@semiont/sdk';
+import { useSessionEventSubscriptions } from '../../hooks/useSessionEventSubscriptions';
+import { defaultBrowseRenderers, type BrowseMediaRenderers } from './browse-renderers';
 
 interface Props {
   content: string;
@@ -37,25 +31,35 @@ interface Props {
   selectedClick?: ClickAction;
   annotateMode: boolean;
   hoverDelayMs?: number;
+  /** Session for the shown resource — emits browse:click / beckon:hover; its bus feeds beckon events. */
+  session: SemiontSession | null;
+  /** Recently-created annotation ids to sparkle (host-provided; was ResourceAnnotationsContext). */
+  newAnnotationIds?: Set<string>;
+  /** Override the read-only media renderers (render mode → renderer); merged over the defaults. */
+  renderers?: BrowseMediaRenderers;
+  /** A content link (`<a href>` in the rendered content) was clicked. The viewer preventDefaults and
+   *  delegates; it never navigates on its own. Omit → the click is still blocked (nothing happens). */
+  onLinkClick?: (link: { href: string; event: ReactMouseEvent }) => void;
+  /** A RESOLVED reference span is hovered: fires after the dwell AND the referent's cached descriptor
+   *  resolves; `null` on leave (only if a hover fired — stubs stay silent). Host renders its own preview. */
+  onReferenceHover?: (hover: ReferenceHover | null) => void;
+  /** Inline display variant: auto-height to content, no inner scroll container, no pane chrome —
+   *  drops into a chat bubble / card / list item. Default: fill-the-pane (unchanged). */
+  inline?: boolean;
+  /** The bar's Mode control reports the chosen mode here (the owner applies it). */
+  onModeChange?: (mode: boolean) => void;
+  /** The bar's Click control reports the chosen action here (the owner applies it). */
+  onClickActionChange?: (action: ClickAction) => void;
+  /** Render the built-in bar (default). false → no bar; all other seams stay live. */
+  showToolbar?: boolean;
 }
 
-/**
- * Memoized markdown renderer — only re-renders when content changes.
- * No annotation plugins: annotations are applied as a DOM overlay after paint.
- */
-const MemoizedMarkdown = memo(function MemoizedMarkdown({
-  content,
-}: {
-  content: string;
-}) {
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-    >
-      {content}
-    </ReactMarkdown>
-  );
-});
+/** Payload for `onReferenceHover` — the hovered linking annotation, its resolved referent, and where the span is. */
+export interface ReferenceHover {
+  annotation: Annotation;
+  referent: ResourceDescriptor;
+  anchorRect: DOMRect;
+}
 
 /**
  * View component for browsing annotated resources in read-only mode.
@@ -76,12 +80,20 @@ export const BrowseView = memo(function BrowseView({
   resourceUri,
   annotations,
   selectedClick = 'detail',
+  onModeChange,
+  onClickActionChange,
+  showToolbar = true,
   annotateMode,
-  hoverDelayMs = 150
+  hoverDelayMs = 150,
+  session,
+  newAnnotationIds,
+  renderers,
+  onLinkClick,
+  onReferenceHover,
+  inline = false,
 }: Props) {
-  const { newAnnotationIds } = useResourceAnnotations();
-  const session = useObservable(useSemiont().activeSession$);
   const containerRef = useRef<HTMLDivElement>(null);
+  const inlineMod = inline ? ' semiont-browse-view--inline' : '';
 
   const render = capabilitiesOf(mimeType)?.render ?? 'none';
 
@@ -97,26 +109,23 @@ export const BrowseView = memo(function BrowseView({
     [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)
+  // The two-layer overlay in ONE effect, keyed on everything it reads: the
+  // rendered content DOM (`content` re-renders it) AND the annotations.
+  // Splitting these across two effects with a ref-passed offset map silently
+  // dropped the `content` dependency — content arriving after annotations
+  // (any async-content host) painted ZERO spans until a remount. The
+  // length===0 early-return is safe: the prior run's cleanup already cleared.
   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;
+    if (!containerRef.current || overlayAnnotations.length === 0) return;
 
     const container = containerRef.current;
+    const offsetMap = buildSourceToRenderedMap(content, container);
     const textNodeIndex = buildTextNodeIndex(container);
-    const ranges = resolveAnnotationRanges(overlayAnnotations, offsetMapRef.current, textNodeIndex);
+    const ranges = resolveAnnotationRanges(overlayAnnotations, offsetMap, textNodeIndex);
     applyHighlights(ranges);
 
     return () => clearHighlights(container);
-  }, [overlayAnnotations]);
+  }, [content, overlayAnnotations]);
 
   // Attach click handler, hover handler, and animations after render
   useEffect(() => {
@@ -142,8 +151,50 @@ export const BrowseView = memo(function BrowseView({
       }
     };
 
+    // Reference-hover delegation (host-facing event surface): after the dwell,
+    // resolve the referent's cached descriptor and hand the host
+    // { annotation, referent, anchorRect }; `null` on leave — but only if a hover
+    // fired, so stubs stay silent. Rides the SAME dwell emitter as beckon:hover —
+    // one state machine, two consumers.
+    let hoveredElement: HTMLElement | null = null;
+    let referentSub: { unsubscribe(): void } | null = null;
+    let referenceHoverFired = false;
+
+    const startReferenceHover = (id: string) => {
+      if (!onReferenceHover) return; // no handler → no referent load
+      const annotation = allAnnotations.find(a => a.id === id);
+      if (!annotation || !isResolvedReference(annotation)) return; // stub / non-reference: fires nothing
+      const referentId = getBodySource(annotation.body);
+      const element = hoveredElement;
+      if (!referentId || !element) return;
+      referentSub?.unsubscribe();
+      referentSub = session.client.browse.resource(toResourceId(referentId)).subscribe({
+        next: (referent) => {
+          if (referent === undefined) return; // cache still loading
+          referentSub?.unsubscribe();
+          referentSub = null;
+          referenceHoverFired = true;
+          // anchorRect taken at fire time so it reflects current layout.
+          onReferenceHover({ annotation, referent, anchorRect: element.getBoundingClientRect() });
+        },
+        error: () => { referentSub = null; }, // failed load: never fires
+      });
+    };
+
+    const endReferenceHover = () => {
+      referentSub?.unsubscribe(); // leave-before-resolve: cancel, no fire
+      referentSub = null;
+      if (referenceHoverFired) {
+        referenceHoverFired = false;
+        onReferenceHover?.(null);
+      }
+    };
+
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (id) => session.client.beckon.hover(id),
+      (id) => {
+        session.client.beckon.hover(id);
+        if (id) startReferenceHover(id); else endReferenceHover();
+      },
       hoverDelayMs
     );
 
@@ -152,7 +203,10 @@ export const BrowseView = memo(function BrowseView({
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
       const annotationId = annotationElement?.getAttribute('data-annotation-id');
-      if (annotationId) handleMouseEnter(toAnnotationId(annotationId));
+      if (annotationId) {
+        hoveredElement = annotationElement as HTMLElement; // anchor for onReferenceHover
+        handleMouseEnter(toAnnotationId(annotationId));
+      }
     };
 
     // Single mouseout handler for the container - fires once on exit
@@ -182,8 +236,9 @@ export const BrowseView = memo(function BrowseView({
       container.removeEventListener('mouseover', handleMouseOver);
       container.removeEventListener('mouseout', handleMouseOut);
       cleanupHover();
+      referentSub?.unsubscribe(); // in-flight referent load dies with the effect
     };
-  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs, session]);
+  }, [content, allAnnotations, newAnnotationIds, hoverDelayMs, session, onReferenceHover]);
 
   // Helper to scroll annotation into view with pulse effect
   const scrollToAnnotation = useCallback((annotationId: string | null, removePulse = false) => {
@@ -202,94 +257,65 @@ export const BrowseView = memo(function BrowseView({
     scrollToAnnotation(annotationId ?? null, true);
   }, [scrollToAnnotation]);
 
-  useEventSubscriptions({
+  useSessionEventSubscriptions(session, {
     'beckon:hover': handleAnnotationHover,
     'beckon:focus': handleAnnotationFocus,
   });
 
-  // Route to the viewer for this media type's render mode. The switch is
-  // exhaustive over RenderMode, so every path returns.
-  switch (render) {
-    case 'text':
-      return (
-        <div className="semiont-browse-view" data-mime-type="text">
-          <AnnotateToolbar
-            selectedMotivation={null}
-            selectedClick={selectedClick}
-            showSelectionGroup={false}
-            showDeleteButton={false}
-            annotateMode={annotateMode}
-            annotators={ANNOTATORS}
-          />
-          <div ref={containerRef} className="semiont-browse-view__content">
-            <MemoizedMarkdown content={content} />
-          </div>
-        </div>
-      );
-
-    case 'pdf':
-      return (
-        <div className="semiont-browse-view" data-mime-type="pdf">
-          <AnnotateToolbar
-            selectedMotivation={null}
-            selectedClick={selectedClick}
-            showSelectionGroup={false}
-            showDeleteButton={false}
-            annotateMode={annotateMode}
-            annotators={ANNOTATORS}
-          />
-          <div ref={containerRef} className="semiont-browse-view__content">
-            <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
-              <PdfAnnotationCanvas
-                pdfUrl={content}
-                existingAnnotations={allAnnotations}
-                drawingMode={null}
-                selectedMotivation={null}
-              />
-            </Suspense>
-          </div>
+  // A content link inside the rendered output (react-markdown / HTML `<a href>`) must never navigate
+  // on its own (embedded/Electron security): always preventDefault, then delegate to the host if it cares.
+  const handleContentClick = useCallback((e: ReactMouseEvent) => {
+    const anchor = (e.target as HTMLElement).closest('a[href]');
+    if (!anchor) return;
+    e.preventDefault();
+    const href = anchor.getAttribute('href');
+    if (href) onLinkClick?.({ href, event: e });
+  }, [onLinkClick]);
+
+  // Route to the media renderer for this render mode. `text`/`image`/`pdf` share
+  // the shell (toolbar + annotation-overlay container); `none` (no preview, or an
+  // unknown type) has its own metadata+download structure. Callers can override
+  // any renderer via `renderers`.
+  const mediaRenderers: BrowseMediaRenderers = { ...defaultBrowseRenderers, ...renderers };
+  const Renderer = render === 'none' ? undefined : mediaRenderers[render];
+
+  if (!Renderer) {
+    return (
+      <div ref={containerRef} className={`semiont-browse-view semiont-browse-view--unsupported${inlineMod}`} data-mime-type="unsupported">
+        <div className="semiont-browse-view__empty">
+          <p className="semiont-browse-view__empty-message">
+            Preview not available for {mimeType}
+          </p>
+          <a
+            href={`/api/resources/${resourceUri}`}
+            download
+            className="semiont-button semiont-button--primary"
+          >
+            Download File
+          </a>
         </div>
-      );
-
-    case 'image':
-      return (
-        <div className="semiont-browse-view" data-mime-type="image">
-          <AnnotateToolbar
-            selectedMotivation={null}
-            selectedClick={selectedClick}
-            showSelectionGroup={false}
-            showDeleteButton={false}
-            annotateMode={annotateMode}
-            annotators={ANNOTATORS}
-          />
-          <div ref={containerRef} className="semiont-browse-view__content">
-            <ImageViewer
-              imageUrl={content}
-              mimeType={mimeType}
-              alt="Resource content"
-            />
-          </div>
-        </div>
-      );
-
-    case 'none':
-      // Catalogued type with no preview (render: 'none') or an imported
-      // foreign type the registry doesn't know — same UI: metadata + download.
-      return (
-        <div ref={containerRef} className="semiont-browse-view semiont-browse-view--unsupported" data-mime-type="unsupported">
-          <div className="semiont-browse-view__empty">
-            <p className="semiont-browse-view__empty-message">
-              Preview not available for {mimeType}
-            </p>
-            <a
-              href={`/api/resources/${resourceUri}`}
-              download
-              className="semiont-button semiont-button--primary"
-            >
-              Download File
-            </a>
-          </div>
-        </div>
-      );
+      </div>
+    );
   }
+
+  return (
+    <div className={`semiont-browse-view${inlineMod}`} data-mime-type={render}>
+      {showToolbar && (
+      <AnnotateToolbar
+        selectedMotivation={null}
+        selectedClick={selectedClick}
+        parts={['clickAction', 'mode']}
+        showDeleteButton={false}
+        annotateMode={annotateMode}
+        annotators={ANNOTATORS}
+        onModeChange={onModeChange}
+        onClickActionChange={onClickActionChange}
+        compact={inline}
+      />
+      )}
+      <div ref={containerRef} className="semiont-browse-view__content" onClick={handleContentClick}>
+        <Renderer content={content} mimeType={mimeType} resourceUri={resourceUri} annotations={allAnnotations} />
+      </div>
+    </div>
+  );
 });