@semiont/react-ui 0.5.11 → 0.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "engines": {
     "node": ">=24.0.0"
   },
@@ -109,7 +109,7 @@
     "styled-components": "^6.4.3",
     "tsup": "^8.0.1",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "access": "public"
@@ -122,9 +122,9 @@
     "directory": "packages/react-ui"
   },
   "dependencies": {
-    "@semiont/core": "0.5.11",
-    "@semiont/http-transport": "0.5.11",
-    "@semiont/sdk": "0.5.11",
+    "@semiont/core": "0.5.12",
+    "@semiont/http-transport": "0.5.12",
+    "@semiont/sdk": "0.5.12",
     "pdfjs-dist": "^6.1.200",
     "react-error-boundary": "^6.1.2",
     "react-markdown": "^10.1.0",

package/src/components/image-annotation/AnnotationOverlay.tsx

@@ -128,7 +128,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
+                  onClick={(e) => session?.client.browse.click(annotation.id, annotation.motivation, e.currentTarget.getBoundingClientRect())}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -141,7 +141,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      session?.client.browse.click(annotation.id, annotation.motivation);
+                      session?.client.browse.click(annotation.id, annotation.motivation, e.currentTarget.getBoundingClientRect());
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -175,7 +175,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
+                  onClick={(e) => session?.client.browse.click(annotation.id, annotation.motivation, e.currentTarget.getBoundingClientRect())}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -188,7 +188,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      session?.client.browse.click(annotation.id, annotation.motivation);
+                      session?.client.browse.click(annotation.id, annotation.motivation, e.currentTarget.getBoundingClientRect());
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}
@@ -235,7 +235,7 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => session?.client.browse.click(annotation.id, annotation.motivation)}
+                  onClick={(e) => session?.client.browse.click(annotation.id, annotation.motivation, e.currentTarget.getBoundingClientRect())}
                   onMouseEnter={() => handleMouseEnter(annotation.id)}
                   onMouseLeave={handleMouseLeave}
                 />
@@ -248,7 +248,7 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      session?.client.browse.click(annotation.id, annotation.motivation);
+                      session?.client.browse.click(annotation.id, annotation.motivation, e.currentTarget.getBoundingClientRect());
                     }}
                     onMouseEnter={() => handleMouseEnter(annotation.id)}
                     onMouseLeave={handleMouseLeave}

package/src/components/image-annotation/SvgDrawingCanvas.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnchorRect } from '@semiont/core';
 import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, Point, resourceId as toResourceId } from '@semiont/core';
+import { toViewportAnchorRect } from '../../lib/anchor-rect';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import type { SemiontSession } from '@semiont/sdk';
@@ -175,7 +176,10 @@ export function SvgDrawingCanvas({
       // This was a click, not a drag - check if we clicked an existing annotation
       if (existingAnnotations.length > 0) {
         // Find annotation at click point
-        // Note: We're checking in display coordinates
+        // Note: We're checking in display coordinates. The hit-test owns the
+        // coordinate transform — capture the hit annotation's viewport rect
+        // for the emission below (A1 anchor).
+        let hitRect: AnchorRect | undefined;
         const clickedAnnotation = existingAnnotations.find(ann => {
           if (typeof ann.target === 'string') return false;
 
@@ -201,19 +205,23 @@ export function SvgDrawingCanvas({
             const displayWidth = width * scaleX;
             const displayHeight = height * scaleY;
 
-            return (
+            const hit = (
               endPoint.x >= displayX &&
               endPoint.x <= displayX + displayWidth &&
               endPoint.y >= displayY &&
               endPoint.y <= displayY + displayHeight
             );
+            if (hit && imageRef.current) {
+              hitRect = toViewportAnchorRect(imageRef.current.getBoundingClientRect(), displayX, displayY, displayWidth, displayHeight);
+            }
+            return hit;
           }
 
           return false;
         });
 
         if (clickedAnnotation) {
-          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation, hitRect);
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);

package/src/components/image-annotation/__tests__/AnnotationOverlay.click.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * A1 anchor thread (HEADLESS-ANNOTATION-PANELS Phase 3) — image overlay pin.
+ *
+ * The overlay's shape elements own their on-screen geometry: a click passes
+ * the element's viewport rect as browse.click's third argument so hosts can
+ * anchor popovers. Runtime-only view geometry; no schema involvement.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { Annotation, AnnotationId } from '@semiont/core';
+import { AnnotationOverlay } from '../AnnotationOverlay';
+
+function svgAnnotation(id: string, motivation: Annotation['motivation'], svgValue: string): Annotation {
+  return {
+    '@context': 'http://www.w3.org/ns/anno.jsonld',
+    id: id as AnnotationId,
+    type: 'Annotation',
+    motivation,
+    created: '2024-01-01T10:00:00Z',
+    target: {
+      source: 'resource-1',
+      selector: {
+        type: 'SvgSelector',
+        value: svgValue,
+      },
+    },
+  };
+}
+
+const rectAnnotation = svgAnnotation('img-ann-1', 'highlighting', '<svg><rect x="10" y="10" width="20" height="20"/></svg>');
+
+function sessionDouble() {
+  const click = vi.fn();
+  const session = {
+    client: {
+      browse: { click },
+      beckon: { hover: vi.fn() },
+    },
+  } as unknown as SemiontSession;
+  return { session, click };
+}
+
+describe('AnnotationOverlay — anchorRect on click', () => {
+  it('passes the shape element rect as browse.click third argument', () => {
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <AnnotationOverlay
+        annotations={[rectAnnotation]}
+        imageWidth={100}
+        imageHeight={100}
+        displayWidth={200}
+        displayHeight={200}
+        session={session}
+        hoverDelayMs={0}
+      />,
+    );
+
+    const shape = container.querySelector('.semiont-annotation-overlay__shape');
+    expect(shape).toBeInTheDocument();
+
+    fireEvent.click(shape!);
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('img-ann-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+    expect(typeof anchorRect.left).toBe('number');
+  });
+
+  // The other shape kinds render distinct SVG elements with their own
+  // handlers — each instance of the pattern gets its own pin.
+  it.each([
+    ['circle', svgAnnotation('img-circle-1', 'commenting', '<svg><circle cx="30" cy="30" r="10"/></svg>')],
+    ['polygon', svgAnnotation('img-polygon-1', 'assessing', '<svg><polygon points="10,10 30,10 20,30"/></svg>')],
+  ] as const)('passes the %s element rect as browse.click third argument', (_kind, annotation) => {
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <AnnotationOverlay
+        annotations={[annotation]}
+        imageWidth={100}
+        imageHeight={100}
+        displayWidth={200}
+        displayHeight={200}
+        session={session}
+        hoverDelayMs={0}
+      />,
+    );
+
+    const shape = container.querySelector('.semiont-annotation-overlay__shape');
+    expect(shape).toBeInTheDocument();
+
+    fireEvent.click(shape!);
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe(annotation.id);
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+  });
+
+  it('passes the status-indicator element rect as browse.click third argument', () => {
+    // Only references render a status indicator (🔗/❓).
+    const reference = svgAnnotation('img-ref-1', 'linking', '<svg><rect x="10" y="10" width="20" height="20"/></svg>');
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <AnnotationOverlay
+        annotations={[reference]}
+        imageWidth={100}
+        imageHeight={100}
+        displayWidth={200}
+        displayHeight={200}
+        session={session}
+        hoverDelayMs={0}
+      />,
+    );
+
+    const indicator = container.querySelector('.semiont-annotation-overlay__status-indicator');
+    expect(indicator).toBeInTheDocument();
+
+    fireEvent.click(indicator!);
+
+    // stopPropagation: the indicator's own handler emits, exactly once.
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('img-ref-1');
+    expect(click.mock.calls[0]?.[1]).toBe('linking');
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+  });
+});

package/src/components/image-annotation/__tests__/SvgDrawingCanvas.click.test.tsx

@@ -0,0 +1,108 @@
+/**
+ * A1 anchor thread — image canvas drawing-path hit-test pin.
+ *
+ * In drawing mode, a sub-10px "click" on an existing annotation goes through
+ * the mouse-up hit-test (not the overlay's element handlers): the hit-test
+ * owns the display-coordinate transform and must emit browse.click with the
+ * annotation's viewport rect (display rect offset by the image's position —
+ * zeros in jsdom, so viewport == display coordinates here).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { Annotation, AnnotationId } from '@semiont/core';
+import { SvgDrawingCanvas } from '../SvgDrawingCanvas';
+
+// jsdom's Image never fires onload; the canvas loads natural dimensions via a
+// detached `new Image()`. Stub it to report 100×100 synchronously-ish.
+class FakeImage {
+  onload: (() => void) | null = null;
+  naturalWidth = 100;
+  naturalHeight = 100;
+  set src(_value: string) {
+    queueMicrotask(() => this.onload?.());
+  }
+}
+
+const rectAnnotation: Annotation = {
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'canvas-ann-1' as AnnotationId,
+  type: 'Annotation',
+  motivation: 'highlighting',
+  created: '2024-01-01T10:00:00Z',
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'SvgSelector',
+      value: '<svg><rect x="10" y="10" width="20" height="20"/></svg>',
+    },
+  },
+};
+
+function sessionDouble() {
+  const click = vi.fn();
+  const session = {
+    client: {
+      browse: { click },
+      beckon: { hover: vi.fn() },
+    },
+  } as unknown as SemiontSession;
+  return { session, click };
+}
+
+describe('SvgDrawingCanvas — drawing-path hit-test anchorRect', () => {
+  beforeEach(() => {
+    vi.stubGlobal('Image', FakeImage);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('emits browse.click with the hit annotation viewport rect on a sub-10px click', async () => {
+    const { session, click } = sessionDouble();
+
+    const { container } = render(
+      <SvgDrawingCanvas
+        imageUrl="http://test/image.png"
+        resourceUri="resource-1"
+        existingAnnotations={[rectAnnotation]}
+        drawingMode="rectangle"
+        selectedMotivation="highlighting"
+        session={session}
+      />,
+    );
+
+    // Wait for the stubbed Image load to land imageDimensions (overlay mounts).
+    await waitFor(() => {
+      expect(container.querySelector('.semiont-svg-drawing-canvas__overlay-container')).toBeInTheDocument();
+    });
+
+    // jsdom has no layout: give the rendered <img> display dimensions and let
+    // the resize listener re-read them (display 200×200 over natural 100×100
+    // → scale 2, so the 10,10,20,20 annotation displays at 20,20,40,40).
+    const img = container.querySelector('.semiont-svg-drawing-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 200, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 200, configurable: true });
+    fireEvent(window, new Event('resize'));
+
+    await waitFor(() => {
+      const overlay = container.querySelector('.semiont-svg-drawing-canvas__overlay') as HTMLElement;
+      expect(overlay?.style.width).toBe('200px');
+    });
+
+    // Sub-10px gesture inside the displayed annotation (image rect is zeros
+    // in jsdom, so client coordinates are display coordinates).
+    const canvas = container.querySelector('.semiont-svg-drawing-canvas')!;
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 30 });
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('canvas-ann-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    expect(click.mock.calls[0]?.[2]).toEqual({
+      x: 20, y: 20, left: 20, top: 20, width: 40, height: 40, right: 60, bottom: 60,
+    });
+  });
+});

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

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnchorRect } from '@semiont/core';
 import { resourceId as toResourceId } from '@semiont/core';
+import { toViewportAnchorRect } from '../../lib/anchor-rect';
 import {
   getTargetSelector,
   createFragmentSelector,
@@ -256,6 +257,9 @@ export function PdfAnnotationCanvas({
     if (dragDistance < MIN_DRAG_DISTANCE) {
       // This was a click, not a drag - check if we clicked an existing annotation
       if (existingAnnotations.length > 0) {
+        // The hit-test owns the coordinate transform — capture the hit
+        // annotation's viewport rect for the emission below (A1 anchor).
+        let hitRect: AnchorRect | undefined;
         const clickedAnnotation = pageAnnotations.find(ann => {
           const fragmentSel = getFragmentSelector(ann.target);
           if (!fragmentSel) return false;
@@ -274,16 +278,20 @@ export function PdfAnnotationCanvas({
           const displayWidth = rect.width * scaleX;
           const displayHeight = rect.height * scaleY;
 
-          return (
+          const hit = (
             selection.endX >= displayX &&
             selection.endX <= displayX + displayWidth &&
             selection.endY >= displayY &&
             selection.endY <= displayY + displayHeight
           );
+          if (hit && imageRef.current) {
+            hitRect = toViewportAnchorRect(imageRef.current.getBoundingClientRect(), displayX, displayY, displayWidth, displayHeight);
+          }
+          return hit;
         });
 
         if (clickedAnnotation) {
-          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation);
+          session?.client.browse.click(clickedAnnotation.id, clickedAnnotation.motivation, hitRect);
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -461,7 +469,7 @@ export function PdfAnnotationCanvas({
                         cursor: 'pointer',
                         opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                       }}
-                      onClick={() => session?.client.browse.click(ann.id, ann.motivation)}
+                      onClick={(e) => session?.client.browse.click(ann.id, ann.motivation, e.currentTarget.getBoundingClientRect())}
                       onMouseEnter={() => handleMouseEnter(ann.id)}
                       onMouseLeave={handleMouseLeave}
                     />

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

@@ -11,7 +11,8 @@ import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PdfAnnotationCanvas } from '../PdfAnnotationCanvas';
-import { resourceId, annotationId } from '@semiont/core';
+import { resourceId, annotationId, parseFragmentSelector } from '@semiont/core';
+import { pdfToCanvasCoordinates } from '../../../lib/pdf-coordinates';
 
 import type { Annotation } from '@semiont/core';
 
@@ -177,6 +178,141 @@ describe('PdfAnnotationCanvas', () => {
     });
   });
 
+  test('passes the annotation rect as browse.click third argument (A1 anchor)', async () => {
+    const click = vi.fn();
+    const session = {
+      client: { browse: { click }, beckon: { hover: vi.fn() } },
+    } as unknown as import('@semiont/sdk').SemiontSession;
+
+    const mockAnnotations: Annotation[] = [
+      {
+        '@context': 'http://www.w3.org/ns/anno.jsonld',
+        type: 'Annotation',
+        id: annotationId('ann-1'),
+        target: {
+          source: mockResourceId,
+          selector: {
+            type: 'FragmentSelector',
+            value: 'page=1&viewrect=100,200,150,100',
+            conformsTo: 'http://tools.ietf.org/rfc/rfc3778'
+          }
+        },
+        motivation: 'highlighting',
+        created: new Date().toISOString()
+      }
+    ];
+
+    render(
+      <PdfAnnotationCanvas resourceUri="res-1"
+        pdfUrl={mockPdfUrl}
+        existingAnnotations={mockAnnotations}
+        drawingMode={null}
+        session={session}
+      />
+    );
+
+    await waitFor(() => {
+      const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+      expect(img).toBeInTheDocument();
+    });
+
+    const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 612, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 792, configurable: true });
+    fireEvent.load(img);
+
+    await waitFor(() => {
+      const rects = document.querySelector('.semiont-pdf-annotation-canvas__svg')?.querySelectorAll('rect');
+      expect(rects?.length).toBeGreaterThan(0);
+    });
+
+    const annotationRect = document.querySelector('.semiont-pdf-annotation-canvas__svg')!.querySelector('rect')!;
+    fireEvent.click(annotationRect);
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('ann-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    const anchorRect = click.mock.calls[0]?.[2];
+    expect(anchorRect).toBeDefined();
+    expect(typeof anchorRect.width).toBe('number');
+  });
+
+  test('drawing-path hit-test emits browse.click with the annotation viewport rect', async () => {
+    // A1 anchor: in drawing mode, a sub-10px click on an existing annotation
+    // goes through the mouse-up hit-test, which owns the PDF→display
+    // coordinate transform. Expected rect computed with the same lib
+    // functions the component uses (scale is 1: display 612×792 == page).
+    const click = vi.fn();
+    const session = {
+      client: { browse: { click }, beckon: { hover: vi.fn() } },
+    } as unknown as import('@semiont/sdk').SemiontSession;
+
+    const fragmentValue = 'page=1&viewrect=100,200,150,100';
+    const mockAnnotations: Annotation[] = [
+      {
+        '@context': 'http://www.w3.org/ns/anno.jsonld',
+        type: 'Annotation',
+        id: annotationId('ann-hit-1'),
+        target: {
+          source: mockResourceId,
+          selector: {
+            type: 'FragmentSelector',
+            value: fragmentValue,
+            conformsTo: 'http://tools.ietf.org/rfc/rfc3778'
+          }
+        },
+        motivation: 'highlighting',
+        created: new Date().toISOString()
+      }
+    ];
+
+    render(
+      <PdfAnnotationCanvas resourceUri="res-1"
+        pdfUrl={mockPdfUrl}
+        existingAnnotations={mockAnnotations}
+        drawingMode="rectangle"
+        selectedMotivation="highlighting"
+        session={session}
+      />
+    );
+
+    await waitFor(() => {
+      const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+      expect(img).toBeInTheDocument();
+    });
+
+    const img = document.querySelector('.semiont-pdf-annotation-canvas__image') as HTMLImageElement;
+    Object.defineProperty(img, 'clientWidth', { value: 612, configurable: true });
+    Object.defineProperty(img, 'clientHeight', { value: 792, configurable: true });
+    fireEvent.load(img);
+
+    await waitFor(() => {
+      const rects = document.querySelector('.semiont-pdf-annotation-canvas__svg')?.querySelectorAll('rect');
+      expect(rects?.length).toBeGreaterThan(0);
+    });
+
+    const pdfCoord = parseFragmentSelector(fragmentValue)!;
+    const displayRect = pdfToCanvasCoordinates(pdfCoord, 792, 1.0);
+
+    // Sub-10px gesture at the annotation's display-rect center (image rect is
+    // zeros in jsdom, so client coordinates are display coordinates).
+    const canvasContainer = document.querySelector('.semiont-pdf-annotation-canvas__container')!;
+    const clickX = displayRect.x + displayRect.width / 2;
+    const clickY = displayRect.y + displayRect.height / 2;
+    fireEvent.mouseDown(canvasContainer, { clientX: clickX, clientY: clickY });
+    fireEvent.mouseUp(canvasContainer, { clientX: clickX, clientY: clickY });
+
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(click.mock.calls[0]?.[0]).toBe('ann-hit-1');
+    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
+    expect(click.mock.calls[0]?.[2]).toMatchObject({
+      left: displayRect.x,
+      top: displayRect.y,
+      width: displayRect.width,
+      height: displayRect.height,
+    });
+  });
+
   test('accepts a drawing gesture without throwing when drawing mode is active', async () => {
     render(
       <PdfAnnotationCanvas resourceUri="res-1"

package/src/components/resource/BrowseView.tsx

@@ -134,19 +134,27 @@ export const BrowseView = memo(function BrowseView({
 
     const container = containerRef.current;
 
-    // Single click handler for the container
+    // Single click handler for the container — emits browse:click for whatever
+    // annotation the click resolves, any motivation (parity with the image/PDF
+    // and annotate-mode emitters; ResourceViewer routes by click action).
     const handleClick = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       const annotationElement = target.closest('[data-annotation-id]');
       if (!annotationElement) return;
 
-      const annotationId = annotationElement.getAttribute('data-annotation-id');
-      const annotationType = annotationElement.getAttribute('data-annotation-type');
+      // Browse mode is the reading surface: a drag-select that starts and ends
+      // inside one annotated span fires click on it — suppress emission so
+      // copying text never opens or navigates.
+      const selection = window.getSelection();
+      if (selection && !selection.isCollapsed) return;
 
-      if (annotationId && annotationType === 'reference') {
+      const annotationId = annotationElement.getAttribute('data-annotation-id');
+      if (annotationId) {
         const annotation = allAnnotations.find(a => a.id === annotationId);
         if (annotation) {
-          session.client.browse.click(annotation.id, annotation.motivation);
+          // The emission site owns the geometry: the clicked span's viewport
+          // rect rides the event so hosts can anchor popovers (A1).
+          session.client.browse.click(annotation.id, annotation.motivation, annotationElement.getBoundingClientRect());
         }
       }
     };
@@ -314,7 +322,7 @@ export const BrowseView = memo(function BrowseView({
       />
       )}
       <div ref={containerRef} className="semiont-browse-view__content" onClick={handleContentClick}>
-        <Renderer content={content} mimeType={mimeType} resourceUri={resourceUri} annotations={allAnnotations} />
+        <Renderer content={content} mimeType={mimeType} resourceUri={resourceUri} annotations={allAnnotations} session={session} />
       </div>
     </div>
   );

package/src/components/resource/ResourceViewer.tsx

@@ -6,7 +6,7 @@ import { AnnotateView, type SelectionMotivation, type ClickAction, type ShapeTyp
 import { BrowseView, type ReferenceHover } from './BrowseView';
 import { PopupContainer } from '../annotation-popups/SharedPopupElements';
 import { JsonLdView } from '../annotation-popups/JsonLdView';
-import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, components, EventMap } from '@semiont/core';
+import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, components, EventMap, AnchorRect } from '@semiont/core';
 import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../hooks/useSessionEventSubscriptions';
@@ -283,9 +283,10 @@ export function ResourceViewer({
   }, [annotateMode, selectedClick, focusAnnotation, onOpenResource]);
 
   // Annotation click coordinator - handles panel opening and scrolling
-  const handleAnnotationClickEvent = useCallback(({ annotationId, motivation }: {
+  const handleAnnotationClickEvent = useCallback(({ annotationId, motivation, anchorRect }: {
     annotationId: string;
     motivation: components['schemas']['Motivation'];
+    anchorRect?: AnchorRect;
   }) => {
     // Find the annotation metadata
     const metadata = Object.values(ANNOTATORS).find(a => a.matchesAnnotation({ motivation } as Annotation));
@@ -311,8 +312,9 @@ export function ResourceViewer({
     }
 
     // All annotations open the unified annotations panel — the host owns the panel.
-    // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel
-    onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
+    // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel.
+    // View geometry passes through untouched: the emitter owned it, the host anchors with it.
+    onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation, ...(anchorRect ? { anchorRect } : {}) });
   }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick, onOpenPanel]);
 
   // Event subscriptions - Combined into single useEventSubscriptions call to prevent hook ordering issues