@semiont/react-ui 0.5.25 → 0.5.27

package/src/components/pdf-annotation/__tests__/estimate-slot-height.test.ts

@@ -0,0 +1,53 @@
+/**
+ * PDF-CONTINUOUS-SCROLL S1b.
+ *
+ * The scroll column reserves space for unmounted pages. If the reservation is
+ * wrong, every mount and unmount changes the column's height and the scrollbar
+ * jumps — which is what S1 shipped, by reserving the raster height rather than
+ * the displayed one.
+ *
+ * These pins hold the estimate to the CSS the image is actually under:
+ * `max-width: 100%; height: auto`.
+ */
+import { describe, it, expect } from 'vitest';
+import { estimateSlotHeight } from '../estimate-slot-height';
+
+// US Letter at scale 1.5: 918 × 1188 raster, aspect 792/612.
+const ASPECT = 792 / 612;
+const RASTER_W = 918;
+
+describe('estimateSlotHeight', () => {
+  it('scales to the column when the column is narrower than the raster', () => {
+    // The common case: `max-width: 100%` shrinks the image to the column.
+    expect(estimateSlotHeight(600, RASTER_W, ASPECT)).toBe(Math.round(600 * ASPECT));
+  });
+
+  it('never upscales past the raster — max-width shrinks only', () => {
+    // A column wider than the raster leaves the image at natural size, so the
+    // height stops growing. Reserving columnWidth * aspect here would over-
+    // reserve and leave a gap under every page.
+    expect(estimateSlotHeight(1600, RASTER_W, ASPECT)).toBe(Math.round(RASTER_W * ASPECT));
+  });
+
+  it('is exactly the raster height when the column matches the raster', () => {
+    expect(estimateSlotHeight(RASTER_W, RASTER_W, ASPECT)).toBe(Math.round(RASTER_W * ASPECT));
+  });
+
+  it('does NOT use the raster height as a width-independent constant', () => {
+    // The S1 defect, stated as a pin: the raster is 1188px tall, but in a
+    // 600px column the page occupies ~776px. Reserving 1188 is what made the
+    // column's height lurch on every mount.
+    const rasterHeight = Math.round(RASTER_W * ASPECT); // 1188
+    expect(estimateSlotHeight(600, RASTER_W, ASPECT)).not.toBe(rasterHeight);
+    expect(estimateSlotHeight(600, RASTER_W, ASPECT)).toBeLessThan(rasterHeight);
+  });
+
+  it('answers null until every measurement is in, rather than guessing', () => {
+    // A wrong reservation is worse than none: an unsized slot is stable, a
+    // mis-sized one moves when the page lands.
+    expect(estimateSlotHeight(null, RASTER_W, ASPECT)).toBeNull();
+    expect(estimateSlotHeight(600, null, ASPECT)).toBeNull();
+    expect(estimateSlotHeight(600, RASTER_W, null)).toBeNull();
+    expect(estimateSlotHeight(0, RASTER_W, ASPECT)).toBeNull();
+  });
+});

package/src/components/pdf-annotation/estimate-slot-height.ts

@@ -0,0 +1,31 @@
+/**
+ * The height a page will occupy once rendered, computed BEFORE rendering it.
+ *
+ * The scrolling column reserves space for pages it has not mounted. If the
+ * reserved height differs from the height the page actually takes, every mount
+ * and unmount changes the column's total height and the scrollbar jumps under
+ * the reader's cursor — the defect S1 shipped by reserving the *raster* height
+ * (`getViewport({ scale }).height`) instead of the *displayed* one.
+ *
+ * This models the CSS the image is under exactly:
+ *
+ *   .semiont-pdf-annotation-canvas__image { max-width: 100%; height: auto; }
+ *
+ * `max-width` shrinks but never upscales, so the displayed width is
+ * `min(columnWidth, rasterWidth)` and the height follows the page's aspect
+ * ratio. Aspect is scale-invariant, so it can come from any viewport.
+ *
+ * @param columnWidth  Measured inner width of the scroll column, in CSS px.
+ * @param rasterWidth  Width of the rendered raster, in px (`viewport(scale).width`).
+ * @param aspect       Page height ÷ width, from any viewport scale.
+ * @returns Reserved height in CSS px, or null when a measurement is not in yet.
+ */
+export function estimateSlotHeight(
+  columnWidth: number | null,
+  rasterWidth: number | null,
+  aspect: number | null,
+): number | null {
+  if (!columnWidth || !rasterWidth || !aspect) return null;
+  if (columnWidth <= 0 || rasterWidth <= 0 || aspect <= 0) return null;
+  return Math.round(Math.min(columnWidth, rasterWidth) * aspect);
+}

package/src/components/resource/AnnotateView.tsx

@@ -53,7 +53,7 @@ interface Props {
  *
  * @emits mark:requested - User requested to create annotation. Payload: { selector: Selector | Selector[], motivation: SelectionMotivation }
  * @subscribes beckon:hover - Annotation hovered. Payload: { annotationId: string | null }
- * @subscribes beckon:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
+ * @subscribes beckon:focus - Scroll to and highlight annotation, unless `resourceId` names a different resource (D7). Payload: { annotationId: string, resourceId?: string }
  */
 export function AnnotateView({
   content,
@@ -111,10 +111,21 @@ export function AnnotateView({
   // serves, so the behaviour no longer depends on which view mode is active.
   // The `scrollToAnnotationId` prop path (uiState → renderer) stays as the
   // host-facing capability it is; this is the in-app producer's route.
-  const handleAnnotationFocus = useCallback(({ annotationId }: { annotationId?: string | null }) => {
-    if (!containerRef.current) return;
-    scrollAnnotationIntoView(annotationId ?? null, containerRef.current, { pulse: true });
-  }, []);
+  // `resourceId` is a GUARD, not navigation (GUIDED-TOUR D7): it names the
+  // resource this focus applies to, and a viewer showing a different one
+  // ignores it. Absent means unscoped — the in-app emitters (history panel,
+  // annotation list) omit it because they are already scoped to the open
+  // resource, so treating absence as "not mine" would silence all of them.
+  // Focus never navigates; driving the Browser to a resource is
+  // `browse:resource-open`'s job.
+  const handleAnnotationFocus = useCallback(
+    ({ annotationId, resourceId }: { annotationId?: string | null; resourceId?: string }) => {
+      if (resourceId && resourceId !== resourceUri) return;
+      if (!containerRef.current) return;
+      scrollAnnotationIntoView(annotationId ?? null, containerRef.current, { pulse: true });
+    },
+    [resourceUri],
+  );
 
   // Annotation hover (session-scoped). Toolbar preference changes flow through
   // props/callbacks, not the bus (TOOLBAR-PREFS-AS-PROPS).

package/src/components/resource/AnnotationHistory.tsx

@@ -51,6 +51,8 @@ export function AnnotationHistory({
 
   // Sort events by oldest first (most recent at bottom)
   // Filter out job events - they're represented by mark:body-updated events instead
+  // `job:progress` is no longer a persisted event type, but logs written before it
+  // was retired still hold them; naming it here keeps those out of the history.
   const events: StoredEventLike[] = eventsData
     .filter((e) => {
       return e.type !== 'job:started' && e.type !== 'job:progress' && e.type !== 'job:completed';

package/src/components/resource/BrowseView.tsx

@@ -155,7 +155,7 @@ export const BrowseView = memo(function BrowseView({
         if (annotation) {
           // 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());
+          session.client.browse.click(annotation.id, annotationElement.getBoundingClientRect());
         }
       }
     };
@@ -263,9 +263,20 @@ export const BrowseView = memo(function BrowseView({
     scrollToAnnotation(annotationId);
   }, [scrollToAnnotation]);
 
-  const handleAnnotationFocus = useCallback(({ annotationId }: { annotationId?: string | null }) => {
-    scrollToAnnotation(annotationId ?? null, true);
-  }, [scrollToAnnotation]);
+  // `resourceId` is a GUARD, not navigation (GUIDED-TOUR D7): it names the
+  // resource this focus applies to, and a viewer showing a different one
+  // ignores it. Absent means unscoped — the in-app emitters (history panel,
+  // annotation list) omit it because they are already scoped to the open
+  // resource, so treating absence as "not mine" would silence all of them.
+  // Focus never navigates; driving the Browser to a resource is
+  // `browse:resource-open`'s job.
+  const handleAnnotationFocus = useCallback(
+    ({ annotationId, resourceId }: { annotationId?: string | null; resourceId?: string }) => {
+      if (resourceId && resourceId !== resourceUri) return;
+      scrollToAnnotation(annotationId ?? null, true);
+    },
+    [scrollToAnnotation, resourceUri],
+  );
 
   useSessionEventSubscriptions(session, {
     'beckon:hover': handleAnnotationHover,

package/src/components/resource/ResourceViewer.tsx

@@ -8,7 +8,7 @@ import { BrowseView, type ReferenceHover } from './BrowseView';
 import type { BrowseMediaRenderers } from './browse-renderers';
 import { PopupContainer } from '../annotation-popups/SharedPopupElements';
 import { JsonLdView } from '../annotation-popups/JsonLdView';
-import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, components, EventMap, AnchorRect } from '@semiont/core';
+import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, EventMap, AnchorRect } from '@semiont/core';
 import { getExactText, getTargetSelector, getPrimaryMediaType, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../hooks/useSessionEventSubscriptions';
@@ -102,7 +102,10 @@ interface Props {
  * panel opening invokes the host's `onOpenPanel` callback — the host owns
  * the panel and any `panel:open` emission.
  *
- * @subscribes browse:click - User clicked on annotation. Payload: { annotationId: string, motivation, anchorRect? }
+ * @subscribes browse:click - An annotation was clicked — locally, or driven over
+ *   the wire by another participant. Payload: { annotationId: string, anchorRect? };
+ *   the motivation is derived from the annotation the id names, and an id this
+ *   viewer has not loaded is a no-op.
  */
 export function ResourceViewer({
   resource,
@@ -270,38 +273,34 @@ export function ResourceViewer({
   }, [annotateMode, selectedClick, onOpenResource]);
 
   // Annotation click coordinator - handles panel opening and scrolling
-  const handleAnnotationClickEvent = useCallback(({ annotationId, motivation, anchorRect }: {
+  const handleAnnotationClickEvent = useCallback(({ annotationId, 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));
-
-    if (!metadata?.hasSidePanel) {
-      // Annotation doesn't have a side panel - let handleAnnotationClick handle it
-      const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
-      const annotation = allAnnotations.find(a => a.id === annotationId);
-      if (annotation) {
-        handleAnnotationClick(annotation);
-      }
-      return;
-    }
+    // Resolve the annotation FIRST. The id is the whole address, and the
+    // motivation is derived from the annotation it names rather than carried
+    // beside it (TOUR-CLICK D2) — one fact, one encoding. Resolving first also
+    // means a click naming an annotation this viewer has not loaded (a remote
+    // drive that arrived while the participant was elsewhere) finds nothing
+    // and does nothing, which is why the channel needs no resourceId guard.
+    const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
+    const annotation = allAnnotations.find(a => a.id === annotationId);
+    if (!annotation) return;
+
+    // The real annotation, not a `{ motivation } as Annotation` stand-in.
+    const metadata = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(annotation));
 
-    if (selectedClick !== 'detail') {
-      // Only open panels in detail mode - for other modes, let handleAnnotationClick handle it
-      const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
-      const annotation = allAnnotations.find(a => a.id === annotationId);
-      if (annotation) {
-        handleAnnotationClick(annotation);
-      }
+    // No side panel, or a click mode other than detail: this is a plain
+    // annotation click, not a panel-opening one.
+    if (!metadata?.hasSidePanel || selectedClick !== 'detail') {
+      handleAnnotationClick(annotation);
       return;
     }
 
     // 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.
     // View geometry passes through untouched: the emitter owned it, the host anchors with it.
-    onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation, ...(anchorRect ? { anchorRect } : {}) });
+    onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation: annotation.motivation, ...(anchorRect ? { anchorRect } : {}) });
   }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick, onOpenPanel]);
 
   // Single subscription call per file (see scripts/compliance/audit-hooks-ordering.ts).

package/src/components/resource/__tests__/AnnotateView.focus.test.tsx

@@ -56,3 +56,53 @@ describe('AnnotateView — beckon:focus scrolls the content', () => {
     expect(scrollSpy.mock.calls[0]?.[0]).toBe('ann-7');
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────
+// GUIDED-TOUR P6 (D7) — `resourceId` is a GUARD, not navigation.
+//
+// The schema now says so out loud: "it names the resource this focus applies
+// to, and a viewer currently showing a different resource ignores the event".
+// Without the comparison the field was decorative — a guide beckoning a
+// reference in doc B scrolled every participant's doc A.
+// ─────────────────────────────────────────────────────────────────────
+describe('AnnotateView — beckon:focus is guarded by resourceId (P6/D7)', () => {
+  beforeEach(() => { scrollSpy.mockClear(); });
+
+  const renderAt = (resourceUri: string) => {
+    const { session, client } = createTestSemiontWrapper();
+    render(
+      <AnnotateView
+        content="hello world"
+        mimeType="text/plain"
+        resourceUri={resourceUri}
+        annotations={emptyAnnotations}
+        uiState={uiState}
+        session={session}
+        annotateMode
+      />,
+    );
+    return client;
+  };
+
+  it('ignores a focus aimed at a DIFFERENT resource', () => {
+    const client = renderAt('res-1');
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-2' });
+    expect(scrollSpy).not.toHaveBeenCalled();
+  });
+
+  it('still scrolls when the resource matches', () => {
+    const client = renderAt('res-1');
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-1' });
+    expect(scrollSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('still scrolls when the event names no resource at all', () => {
+    // `resourceId` is optional in the schema (`required: []`), and the in-app
+    // emitters — the history panel, the annotation list — omit it because they
+    // are already scoped to the open resource. A guard that treated absence as
+    // "not mine" would break every one of them.
+    const client = renderAt('res-1');
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7' });
+    expect(scrollSpy).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -173,6 +173,8 @@ describe('AnnotationHistory', () => {
   });
 
   it('filters out job events', () => {
+    // e3 is `job:progress`, a retired event type. Logs written before it was
+    // retired still hold them, so the filter must keep excluding it.
     const events = [
       makeStoredEvent('e1', 'mark:added', 1),
       makeStoredEvent('e2', 'job:started', 2),

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

@@ -427,7 +427,7 @@ describe('BrowseView Component', () => {
         { id: 'comment-1', type: 'comment', motivation: 'commenting' },
       ] as const;
 
-      for (const { id, type, motivation } of clickCases) {
+      for (const { id, type } of clickCases) {
         const el = document.createElement('span');
         el.setAttribute('data-annotation-id', id);
         el.setAttribute('data-annotation-type', type);
@@ -439,8 +439,7 @@ describe('BrowseView Component', () => {
         await waitFor(() => {
           expect(tracker.events.some(e =>
             e.event === 'browse:click' &&
-            e.payload?.annotationId === id &&
-            e.payload?.motivation === motivation
+            e.payload?.annotationId === id
           )).toBe(true);
         });
       }
@@ -653,3 +652,30 @@ describe('BrowseView Component', () => {
     });
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────
+// GUIDED-TOUR P6 (D7) — the same guard BrowseView's sibling carries.
+// BrowseView subscribed to `beckon:focus` first, so it is the one that has
+// been scrolling on other people's resources the longest.
+// ─────────────────────────────────────────────────────────────────────
+describe('BrowseView — beckon:focus is guarded by resourceId (P6/D7)', () => {
+  it('ignores a focus aimed at a different resource, honours one that matches', () => {
+    const { session, client } = createTestSemiontWrapper();
+    const { container } = render(
+      <BrowseView
+        content="hello world"
+        mimeType="text/plain"
+        resourceUri="res-1"
+        annotations={{ highlights: [], references: [], assessments: [], comments: [], tags: [] }}
+        session={session}
+        annotateMode={false}
+      />,
+    );
+    expect(container).toBeTruthy();
+
+    // Neither call may throw; the assertion that matters is the guard's
+    // existence, pinned in AnnotateView where the scroll helper is mockable.
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-2' });
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-1' });
+  });
+});

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

@@ -15,7 +15,8 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, act, waitFor } 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 type { Annotation, ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
+import { annotationId } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import { ResourceViewer } from '../ResourceViewer';
 
@@ -46,6 +47,23 @@ const resource: SemiontResource & { content: string } = {
 
 const annotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
 
+/**
+ * A highlight the viewer has actually loaded. Required since TOUR-CLICK D2: the
+ * click handler resolves the annotation by id and derives the motivation from
+ * it, so a click for an id absent from this collection is a no-op. Before that,
+ * the wire carried the motivation and the viewer never looked — which is why
+ * the anchorRect test below used to pass against an empty collection.
+ */
+const loadedHighlight: Annotation = {
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  type: 'Annotation',
+  id: annotationId('ann-1'),
+  motivation: 'highlighting',
+  target: { source: 'res-1', selector: { type: 'TextPositionSelector', start: 0, end: 10 } },
+};
+
+const annotationsWithHighlight = { ...annotations, highlights: [loadedHighlight] };
+
 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.
@@ -73,7 +91,7 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
       <ResourceViewer
         session={session}
         resource={resource}
-        annotations={annotations}
+        annotations={annotationsWithHighlight}
         onOpenResource={vi.fn()}
         onOpenPanel={onOpenPanel}
       />,
@@ -86,7 +104,6 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
     act(() => {
       eventBus.get('browse:click').next({
         annotationId: 'ann-1',
-        motivation: 'highlighting',
         anchorRect,
       });
     });
@@ -95,8 +112,35 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
       expect(onOpenPanel).toHaveBeenCalledWith(expect.objectContaining({
         panel: 'annotations',
         scrollToAnnotationId: 'ann-1',
+        // Derived from the annotation the id names, never carried on the wire.
+        motivation: 'highlighting',
         anchorRect: expect.objectContaining({ left: 5, width: 7 }),
       }));
     });
   });
+
+  it('ignores a browse:click naming an annotation this viewer has not loaded', async () => {
+    // A remote drive can arrive while the participant is looking at something
+    // else. Resolving the annotation FIRST makes that a no-op by construction,
+    // which is why the channel carries no resourceId guard (TOUR-CLICK D3).
+    const { session, eventBus } = createTestSemiontWrapper();
+    const onOpenPanel = vi.fn();
+
+    render(
+      <ResourceViewer
+        session={session}
+        resource={resource}
+        annotations={annotationsWithHighlight}
+        onOpenResource={vi.fn()}
+        onOpenPanel={onOpenPanel}
+      />,
+    );
+
+    act(() => {
+      eventBus.get('browse:click').next({ annotationId: 'ann-not-here' });
+    });
+
+    await new Promise((r) => setTimeout(r, 20));
+    expect(onOpenPanel).not.toHaveBeenCalled();
+  });
 });

package/src/components/resource/__tests__/browse-renderers.dispatch.test.tsx

@@ -109,5 +109,38 @@ describe('browse-renderers — annotation + session forwarding (dispatch contrac
     expect(props.existingAnnotations).toEqual([shapeAnnotation()]); // pinned — worked before
     expect(props.drawingMode).toBeNull();
     expect(props.session).toBe(session);                            // NEW — was a session-less no-op
+    // PDF-CONTINUOUS-SCROLL S1: browse asks for the scrolling column.
+    expect(props.pageLayout).toBe('scroll');
+  });
+
+  // S2. Annotate is the mode people actually work in
+  // (.plans/PDF-CONTINUOUS-SCROLL.md D3, second correction), so it gets the
+  // column too — leaving it on Previous/Next made the feature invisible to
+  // its primary audience.
+  it('the annotate registry asks for the column as well, with the live tool', async () => {
+    const session = fakeSession();
+    const { AnnotateView } = await import('../AnnotateView');
+    const { container } = render(
+      <AnnotateView
+        content="blob:pdf-url"
+        mimeType="application/pdf"
+        resourceUri="res-1"
+        annotations={emptyAnnotations}
+        uiState={{
+          selectedMotivation: 'highlighting',
+          selectedClick: 'detail',
+          selectedShape: 'rectangle',
+          hoveredAnnotationId: null,
+          scrollToAnnotationId: null,
+        }}
+        annotateMode
+        session={session}
+      />,
+    );
+
+    await within(container).findByText('pdf-canvas-mock');
+    const props = captured.pdf.at(-1)!;
+    expect(props.pageLayout).toBe('scroll');
+    expect(props.drawingMode).toBe('rectangle'); // the tool still reaches the pages
   });
 });

package/src/components/resource/annotate-renderers.tsx

@@ -7,10 +7,18 @@ import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
 import type { SelectionMotivation, ShapeType } from '../annotation/AnnotateToolbar';
+import { useTranslations } from '../../contexts/TranslationContext';
 
 // Lazy-load the PDF component to avoid SSR issues with browser PDF.js loading.
 // Kept lazy here deliberately: hoisting it to a static import would make it
 // eager again and reintroduce the SSR problem this indirection exists for.
+/** The lazy chunk's fallback needs its own component: a hook cannot run
+ *  inside a `fallback` prop expression. */
+function PdfViewerLoading() {
+  const t = useTranslations('PdfViewer');
+  return <>{t('viewerLoading')}</>;
+}
+
 const PdfAnnotationCanvas = lazy(() =>
   import('../pdf-annotation/PdfAnnotationCanvas.client').then((mod) => ({ default: mod.PdfAnnotationCanvas })),
 );
@@ -127,7 +135,7 @@ export function PdfAnnotateRenderer({
 }: AnnotateMediaRendererProps) {
   if (!content) return null;
   return (
-    <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
+    <Suspense fallback={<div className="semiont-annotate-view__loading"><PdfViewerLoading /></div>}>
       <PdfAnnotationCanvas
         pdfUrl={content}
         resourceUri={resourceUri}
@@ -137,6 +145,7 @@ export function PdfAnnotateRenderer({
         session={session}
         hoveredAnnotationId={hoveredAnnotationId || null}
         hoverDelayMs={hoverDelayMs}
+        pageLayout="scroll"
       />
     </Suspense>
   );

package/src/components/resource/browse-renderers.tsx

@@ -6,8 +6,16 @@ import remarkGfm from 'remark-gfm';
 import type { Annotation } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
+import { useTranslations } from '../../contexts/TranslationContext';
 
 // Lazy-load the PDF component to avoid SSR issues with browser PDF.js loading.
+/** The lazy chunk's fallback needs its own component: a hook cannot run
+ *  inside a `fallback` prop expression. */
+function PdfViewerLoading() {
+  const t = useTranslations('PdfViewer');
+  return <>{t('viewerLoading')}</>;
+}
+
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
 
 /**
@@ -60,7 +68,7 @@ export function ImageBrowseRenderer({ content, resourceUri, annotations, session
 
 export function PdfBrowseRenderer({ content, resourceUri, annotations, session }: MediaRendererProps) {
   return (
-    <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
+    <Suspense fallback={<div className="semiont-browse-view__loading"><PdfViewerLoading /></div>}>
       <PdfAnnotationCanvas
         pdfUrl={content}
         resourceUri={resourceUri}
@@ -68,6 +76,7 @@ export function PdfBrowseRenderer({ content, resourceUri, annotations, session }
         drawingMode={null}
         selectedMotivation={null}
         session={session}
+        pageLayout="scroll"
       />
     </Suspense>
   );

package/src/components/resource/event-formatting.ts

@@ -81,7 +81,6 @@ export function formatEventType(type: PersistedEventType, t: TranslateFn, payloa
 
     case 'job:completed':
     case 'job:started':
-    case 'job:progress':
     case 'job:failed':
       return t('jobEvent');
 
@@ -128,7 +127,6 @@ export function getEventEmoji(type: PersistedEventType, payload?: any): string {
     case 'job:completed':
       return '🔗';  // Link emoji for linked document creation
     case 'job:started':
-    case 'job:progress':
       return '⚙️';  // Gear for job processing
     case 'job:failed':
       return '❌';  // X mark for failed jobs
@@ -276,7 +274,6 @@ export function getEventDisplayContent(
     }
 
     case 'job:started':
-    case 'job:progress':
     case 'job:failed':
     case 'yield:representation-added':
     case 'yield:representation-removed':

package/src/components/resource/panels/AssessmentEntry.tsx

@@ -88,7 +88,7 @@ export function AssessmentEntry({
       data-type="assessment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(assessment.id, assessment.motivation);
+        session?.client.browse.click(assessment.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/AssessmentPanel.css

@@ -30,10 +30,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-assessment-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-assessment-panel__rating {
   display: flex;
   gap: var(--semiont-panel-padding-xs);
@@ -46,8 +42,11 @@
   transition: color 0.2s ease;
 }
 
+/* An UNRATED star must recede. gray-300 is near-white: on a dark panel the
+   empty stars outshone the filled ones, inverting the reading. Dark takes a
+   dim grey; the filled star keeps the warning hue. */
 [data-theme="dark"] .semiont-assessment-panel__star {
-  color: var(--semiont-color-gray-300);
+  color: var(--semiont-color-gray-600);
 }
 
 .semiont-assessment-panel__star:hover {
@@ -59,7 +58,7 @@
 }
 
 [data-theme="dark"] .semiont-assessment-panel__star--filled {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }
 
 .semiont-assessment-panel__textarea {