@weasel-js/labkit 1.7.0 → 1.7.2

package/src/loupe/DomLoupe.tsx

@@ -16,13 +16,11 @@ export interface DomLoupeProps {
   /** The trial's own camera. */
   view: ViewTransform;
   frame?: WorldFrame;
-  state: unknown;
-  config: unknown;
   render: (args: LoupeRenderArgs) => React.ReactNode;
 }
 
 /**
- * Paints a lens over DOM content by asking the instrument to draw itself again
+ * Paints a lens over DOM content by asking its `render` to draw it again
  * at a magnified camera.
  *
  * The stage is a full copy of the host, so the instrument's own layout still
@@ -38,8 +36,6 @@ export function DomLoupe({
   size,
   view,
   frame,
-  state,
-  config,
   render,
 }: DomLoupeProps) {
   const style: CSSProperties = {
@@ -50,8 +46,6 @@ export function DomLoupe({
   return (
     <div className="lk-loupe__stage" style={style}>
       {render({
-        state,
-        config,
         view: zoomAt(view, factor, aim, { frame }),
         factor,
         mode,

package/src/loupe/Loupe.less

@@ -36,3 +36,19 @@
   left: 0;
   transform-origin: 0 0;
 }
+
+// The box a lens wraps around DOM content when nothing around it has one to
+// track. Reproduces the content well's column so the content still stretches
+// to it rather than collapsing to its intrinsic height.
+.lk-loupe-host {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+
+  > * {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+}

package/src/loupe/TrialLoupe.tsx

@@ -1,53 +1,97 @@
-import { type RefObject, useContext, useMemo } from 'react';
-import { CameraScope } from '../canvas/CameraInput';
+import { type ReactNode, type RefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { CameraContext, CameraScope } from '../canvas/CameraInput';
 import { CanvasStackContext } from '../canvas/CanvasStackContext';
-import type { WorldSpec } from '../canvas/worldSpec';
+import { fromCameraView } from '../canvas/cameraView';
 import type { ViewTransform } from '../instrument/types';
+import { LoupeSwitchContext } from '../trial/loupeSwitch';
 import { CanvasLoupe } from './CanvasLoupe';
 import { sampleStack } from './canvasLens';
 import { DomLoupe } from './DomLoupe';
 import { LoupeBubble } from './LoupeBubble';
 import { LoupeGestures } from './LoupeGestures';
-import type { ResolvedLoupe } from './types';
+import { type LoupeOptions, resolveLoupe } from './types';
 import { useHostSize } from './useHostSize';
 import { useLoupe } from './useLoupe';
 
 /** Props for `<TrialLoupe>`. */
-export interface TrialLoupeProps {
-  capability: ResolvedLoupe;
-  /** Whether the trial's loupe is turned on. Hold-to-peek shows it anyway. */
-  enabled: boolean;
-  state: unknown;
-  config: unknown;
-  /** The trial's own camera. */
-  view: ViewTransform;
-  worldSpec?: WorldSpec;
-  /** The element the lens tracks. A loupe mounted inside a `<CanvasStack>`
-   *  takes the stack's own element instead, and this goes unused. */
+export interface TrialLoupeProps extends LoupeOptions {
+  /** Whether the lens is turned on. Omitted, it follows the trial's toolbar
+   *  toggle, which the trial offers while a lens like this is mounted — and is
+   *  off outside a trial. Hold-to-peek shows it either way. */
+  enabled?: boolean;
+  /** The camera a `render` lens composes its magnification onto. Defaults to
+   *  the camera around it, and to the identity outside one. */
+  view?: ViewTransform;
+  /** The element the lens tracks. Defaults to the canvas stack or stage around
+   *  it, and outside both to a box wrapped around `children`. */
   hostRef?: RefObject<HTMLElement | null>;
+  /** Content for the lens to sit over. Wrapped in a box of the lens's own only
+   *  when nothing around it gives the lens an element to track. */
+  children?: ReactNode;
 }
 
-/** Stable stand-in, so a loupe with nothing to track does not re-bind its
- *  listeners on every render. */
-const NO_HOST: RefObject<HTMLElement | null> = { current: null };
+const IDENTITY: ViewTransform = { zoom: 1, pan: { x: 0, y: 0 } };
 
 /**
- * A trial's loupe, painted by whichever painter suits its content: the canvas
- * stack it is mounted inside, or the instrument's own `render` at a magnified
- * camera.
+ * A trial's magnifier, mounted by the instrument wherever its content is: in
+ * a canvas instrument's `render`, a stage's `overlay`, or around DOM content.
+ *
+ * With no `render` inside a `<CanvasStack>`, it re-draws the stack's own
+ * layers through a zoomed camera. With `render`, it asks for the content again
+ * at a magnified camera.
  */
 export function TrialLoupe({
-  capability,
   enabled,
-  state,
-  config,
   view,
-  worldSpec,
   hostRef,
+  children,
+  render,
+  factor,
+  minFactor,
+  maxFactor,
+  mode,
+  diameter,
+  peekKey,
+  onColorChange,
 }: TrialLoupeProps) {
+  const options = useMemo(
+    () =>
+      resolveLoupe({
+        render,
+        factor,
+        minFactor,
+        maxFactor,
+        mode,
+        diameter,
+        peekKey,
+        onColorChange,
+      }),
+    [render, factor, minFactor, maxFactor, mode, diameter, peekKey, onColorChange],
+  );
+
   const stack = useContext(CanvasStackContext);
-  const surface = capability.render ? undefined : stack?.surface;
-  const host = surface?.element ?? hostRef ?? NO_HOST;
+  const camera = useContext(CameraContext);
+  const loupeSwitch = useContext(LoupeSwitchContext);
+  const surface = options.render ? undefined : stack?.surface;
+
+  const ownHost = useRef<HTMLDivElement | null>(null);
+  const cameraHost = useMemo<RefObject<HTMLElement | null> | null>(
+    () =>
+      camera
+        ? {
+            get current() {
+              return camera.element();
+            },
+          }
+        : null,
+    [camera],
+  );
+  const host = surface?.element ?? hostRef ?? cameraHost ?? ownHost;
+  const wraps = host === ownHost;
+
+  // A lens told whether it is on has no use for the trial's toggle.
+  const mount = enabled === undefined ? loupeSwitch?.mount : undefined;
+  useEffect(() => mount?.(), [mount]);
 
   const sample = useMemo(() => {
     if (!surface) return undefined;
@@ -57,7 +101,12 @@ export function TrialLoupe({
     };
   }, [surface]);
 
-  const loupe = useLoupe({ capability, hostRef: host, enabled, sample });
+  const loupe = useLoupe({
+    options,
+    hostRef: host,
+    enabled: enabled ?? loupeSwitch?.on ?? false,
+    sample,
+  });
   const measured = useHostSize(host);
   const size = surface?.size ?? measured;
 
@@ -67,42 +116,56 @@ export function TrialLoupe({
   // dispatcher; outside one, `<CameraScope>` gives them an isolated scope.
   const gestures = (
     <CameraScope>
-      <LoupeGestures hostRef={host} input={loupe.input} peekKey={capability.peekKey ?? null} />
+      <LoupeGestures hostRef={host} input={loupe.input} peekKey={options.peekKey ?? null} />
     </CameraScope>
   );
 
-  if (!loupe.visible) return gestures;
+  const lens = loupe.visible ? (
+    <LoupeBubble aim={loupe.aim} diameter={options.diameter}>
+      {options.render ? (
+        <DomLoupe
+          aim={loupe.aim}
+          factor={loupe.factor}
+          mode={loupe.mode}
+          diameter={options.diameter}
+          size={size}
+          view={
+            view ??
+            stack?.view ??
+            (camera ? fromCameraView(camera.view.get(), camera.frame) : IDENTITY)
+          }
+          frame={stack?.frame ?? camera?.frame}
+          render={options.render}
+        />
+      ) : surface && stack ? (
+        <CanvasLoupe
+          aim={loupe.aim}
+          factor={loupe.factor}
+          mode={loupe.mode}
+          diameter={options.diameter}
+          surface={surface}
+          view={stack.view}
+          frame={stack.frame}
+          worldSpec={surface.worldSpec}
+        />
+      ) : null}
+    </LoupeBubble>
+  ) : null;
 
+  if (wraps) {
+    return (
+      <div ref={ownHost} className="lk-loupe-host">
+        {children}
+        {gestures}
+        {lens}
+      </div>
+    );
+  }
   return (
     <>
+      {children}
       {gestures}
-      <LoupeBubble aim={loupe.aim} diameter={capability.diameter}>
-        {capability.render ? (
-          <DomLoupe
-            aim={loupe.aim}
-            factor={loupe.factor}
-            mode={loupe.mode}
-            diameter={capability.diameter}
-            size={size}
-            view={view}
-            frame={stack?.frame}
-            state={state}
-            config={config}
-            render={capability.render}
-          />
-        ) : surface && stack ? (
-          <CanvasLoupe
-            aim={loupe.aim}
-            factor={loupe.factor}
-            mode={loupe.mode}
-            diameter={capability.diameter}
-            surface={surface}
-            view={stack.view}
-            frame={stack.frame}
-            worldSpec={worldSpec}
-          />
-        ) : null}
-      </LoupeBubble>
+      {lens}
     </>
   );
 }

package/src/loupe/index.ts

@@ -13,12 +13,7 @@ export type { LoupeInputApi } from './loupeActions';
 export { createLoupeActions, LOUPE_MAGNIFY_ID, LOUPE_PEEK_ID } from './loupeActions';
 export type { TrialLoupeProps } from './TrialLoupe';
 export { TrialLoupe } from './TrialLoupe';
-export type {
-  LoupeCapability,
-  LoupeDeclaration,
-  LoupeRenderArgs,
-  ResolvedLoupe,
-} from './types';
+export type { LoupeOptions, LoupeRenderArgs, ResolvedLoupe } from './types';
 export { LOUPE_DEFAULTS, resolveLoupe } from './types';
 export type { LoupeState, UseLoupeOptions } from './useLoupe';
 export { useLoupe } from './useLoupe';

package/src/loupe/types.test.ts

@@ -2,11 +2,11 @@ import { describe, expect, it } from 'vitest';
 import { LOUPE_DEFAULTS, resolveLoupe } from './types';
 
 describe('resolveLoupe', () => {
-  it('takes every default from a bare `true`', () => {
-    expect(resolveLoupe(true)).toMatchObject(LOUPE_DEFAULTS);
+  it('takes every default when given nothing', () => {
+    expect(resolveLoupe()).toMatchObject(LOUPE_DEFAULTS);
   });
 
-  it('keeps what the instrument declared', () => {
+  it('keeps what it was given', () => {
     const cap = resolveLoupe({ factor: 12, diameter: 320, minFactor: 1, maxFactor: 40 });
     expect(cap).toMatchObject({ factor: 12, diameter: 320, minFactor: 1, maxFactor: 40 });
   });

package/src/loupe/types.ts

@@ -3,11 +3,9 @@ import type { ReactNode } from 'react';
 import type { ViewportSize } from '../canvas/worldSpec';
 import type { ViewTransform } from '../instrument/types';
 
-/** What a DOM instrument's loupe `render` is handed: the same data its own
- *  `render` gets, and the camera to draw it through. */
-export interface LoupeRenderArgs<TS = unknown, TC = unknown> {
-  state: TS;
-  config: TC;
+/** What a DOM loupe's `render` is handed: the camera to draw the content
+ *  through again. */
+export interface LoupeRenderArgs {
   /** The trial's own camera composed with the magnification, about the aimed
    *  point — so drawing the same content through it magnifies in place. */
   view: ViewTransform;
@@ -21,14 +19,14 @@ export interface LoupeRenderArgs<TS = unknown, TC = unknown> {
 }
 
 /**
- * Declares that an instrument can be magnified.
+ * How a lens magnifies.
  *
- * With no `render`, the loupe re-draws the instrument's canvas layers through a
- * zoomed camera, so it stays sharp at any factor. An instrument whose content is
- * DOM supplies `render` instead: given a camera, draw me again.
+ * With no `render`, the lens re-draws the canvas stack's layers through a
+ * zoomed camera, so it stays sharp at any factor. Over DOM content, `render`
+ * draws it instead: given a camera, draw me again.
  */
-export interface LoupeCapability<TS = unknown, TC = unknown> {
-  render?: (args: LoupeRenderArgs<TS, TC>) => ReactNode;
+export interface LoupeOptions {
+  render?: (args: LoupeRenderArgs) => ReactNode;
   /** Opening magnification, clamped to the bounds below. Default 6. */
   factor?: number;
   /** What the wheel clamps to. Defaults 2 and 32. */
@@ -48,12 +46,9 @@ export interface LoupeCapability<TS = unknown, TC = unknown> {
   onColorChange?: (hex: string) => void;
 }
 
-/** An instrument's loupe declaration. `true` takes every default. */
-export type LoupeDeclaration<TS = unknown, TC = unknown> = true | LoupeCapability<TS, TC>;
-
-/** A {@link LoupeCapability} with every default filled in. */
-export interface ResolvedLoupe<TS = unknown, TC = unknown> {
-  render?: (args: LoupeRenderArgs<TS, TC>) => ReactNode;
+/** {@link LoupeOptions} with every default filled in. */
+export interface ResolvedLoupe {
+  render?: (args: LoupeRenderArgs) => ReactNode;
   onColorChange?: (hex: string) => void;
   factor: number;
   minFactor: number;
@@ -63,6 +58,7 @@ export interface ResolvedLoupe<TS = unknown, TC = unknown> {
   peekKey: string | null;
 }
 
+/** What `resolveLoupe` fills in for anything a declaration leaves unset. */
 export const LOUPE_DEFAULTS = {
   factor: 6,
   minFactor: 2,
@@ -72,19 +68,20 @@ export const LOUPE_DEFAULTS = {
   peekKey: 'Alt',
 } as const satisfies Omit<ResolvedLoupe, 'render' | 'onColorChange'>;
 
-export function resolveLoupe<TS, TC>(declared: LoupeDeclaration<TS, TC>): ResolvedLoupe<TS, TC> {
-  const cap = declared === true ? {} : declared;
-  const minFactor = cap.minFactor ?? LOUPE_DEFAULTS.minFactor;
-  const maxFactor = cap.maxFactor ?? LOUPE_DEFAULTS.maxFactor;
+/** `options` with every default filled in and `factor` clamped to
+ *  `[minFactor, maxFactor]`. A loupe with its own `render` is always `'vector'`. */
+export function resolveLoupe(options: LoupeOptions = {}): ResolvedLoupe {
+  const minFactor = options.minFactor ?? LOUPE_DEFAULTS.minFactor;
+  const maxFactor = options.maxFactor ?? LOUPE_DEFAULTS.maxFactor;
   return {
-    render: cap.render,
-    onColorChange: cap.onColorChange,
+    render: options.render,
+    onColorChange: options.onColorChange,
     minFactor,
     maxFactor,
-    factor: Math.min(maxFactor, Math.max(minFactor, cap.factor ?? LOUPE_DEFAULTS.factor)),
-    diameter: cap.diameter ?? LOUPE_DEFAULTS.diameter,
-    peekKey: cap.peekKey === undefined ? LOUPE_DEFAULTS.peekKey : cap.peekKey,
+    factor: Math.min(maxFactor, Math.max(minFactor, options.factor ?? LOUPE_DEFAULTS.factor)),
+    diameter: options.diameter ?? LOUPE_DEFAULTS.diameter,
+    peekKey: options.peekKey === undefined ? LOUPE_DEFAULTS.peekKey : options.peekKey,
     // A DOM loupe has no framebuffer, so `pixel` would have nothing to enlarge.
-    mode: cap.render ? 'vector' : (cap.mode ?? LOUPE_DEFAULTS.mode),
+    mode: options.render ? 'vector' : (options.mode ?? LOUPE_DEFAULTS.mode),
   };
 }

package/src/loupe/useLoupe.test.tsx

@@ -1,5 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { WeaselProvider } from '@weasel-js/core';
+import { renderThenAbandon } from '@weasel-js/react/testing/abandonRender';
 import { type RefObject, StrictMode, useRef } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { LoupeGestures } from './LoupeGestures';
@@ -23,12 +24,12 @@ interface HarnessProps {
  *  cases below exercise the real dispatcher route rather than a stand-in. */
 function Harness({ enabled = true, seen, sample, ...rest }: HarnessProps) {
   const hostRef = useRef<HTMLDivElement | null>(null);
-  const capability = resolveLoupe(rest);
+  const options = resolveLoupe(rest);
   const loupe = useLoupe({
     hostRef: hostRef as RefObject<HTMLElement | null>,
     enabled,
     sample,
-    capability,
+    options,
   });
   seen?.(loupe);
   return (
@@ -37,7 +38,7 @@ function Harness({ enabled = true, seen, sample, ...rest }: HarnessProps) {
         <LoupeGestures
           hostRef={hostRef as RefObject<HTMLElement | null>}
           input={loupe.input}
-          peekKey={capability.peekKey ?? null}
+          peekKey={options.peekKey ?? null}
         />
       </WeaselProvider>
       <span data-testid="visible">{String(loupe.visible)}</span>
@@ -92,7 +93,7 @@ describe('useLoupe', () => {
     expect(read('visible')).toBe('false');
   });
 
-  it('does not peek when the capability turned the key off', () => {
+  it('does not peek when its options turned the key off', () => {
     render(<Harness enabled={false} peekKey={null} />);
     move(40, 25);
     act(() => {
@@ -251,4 +252,28 @@ describe('useLoupe', () => {
     });
     expect(read('mode')).toBe('pixel');
   });
+
+  it('aims as the committed `enabled` allows, not an abandoned render', () => {
+    const seen: LoupeState[] = [];
+    // Reads the aim back through the model: the DOM is not re-rendered while
+    // the abandoned transition is still pending.
+    const aimOf = (p: { x: number; y: number }) => `${p.x},${p.y}`;
+    renderThenAbandon({ enabled: false }, { enabled: true }, (p) => (
+      <Harness enabled={p.enabled} sample={aimOf} seen={(l) => seen.push(l)} />
+    ));
+    const before = seen[0]?.pick();
+    move(40, 25);
+    expect(seen[0]?.pick()).toBe(before);
+  });
+
+  it('samples through the committed `sample`, not an abandoned render', () => {
+    const seen: LoupeState[] = [];
+    const committed = vi.fn(() => '#111111');
+    const abandoned = vi.fn(() => '#222222');
+    renderThenAbandon({ sample: committed }, { sample: abandoned }, (p) => (
+      <Harness sample={p.sample} seen={(l) => seen.push(l)} />
+    ));
+    expect(seen[0]?.pick()).toBe('#111111');
+    expect(abandoned).not.toHaveBeenCalled();
+  });
 });

package/src/loupe/useLoupe.ts

@@ -1,3 +1,4 @@
+import { useLatest } from '@weasel-js/core';
 import {
   createLoupeModel,
   type LoupeMode,
@@ -11,7 +12,7 @@ import type { ResolvedLoupe } from './types';
 
 /** Options for {@link useLoupe}. */
 export interface UseLoupeOptions {
-  capability: ResolvedLoupe;
+  options: ResolvedLoupe;
   /** The element the lens tracks the pointer across. */
   hostRef: RefObject<HTMLElement | null>;
   /** Whether the loupe is turned on. Hold-to-peek shows it regardless. */
@@ -39,6 +40,11 @@ export interface LoupeState {
   input: LoupeInputApi;
 }
 
+/** Whether the lens is up: the pointer is over the host, and the loupe is on or peeked. */
+function lensShown(over: boolean, enabled: boolean, peeking: boolean): boolean {
+  return over && (enabled || peeking);
+}
+
 /**
  * Binds `@weasel-js/loupe`'s model to a host element and tracks the pointer
  * across it.
@@ -50,31 +56,28 @@ export interface LoupeState {
  * has no continuous-motion entry, and inventing one to carry the lens' aim
  * would be an input taxonomy change, not a loupe change.
  */
-export function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptions): LoupeState {
+export function useLoupe({ options, hostRef, enabled, sample }: UseLoupeOptions): LoupeState {
   const [, bump] = useReducer((n: number) => n + 1, 0);
 
   const overRef = useRef(false);
   const peekingRef = useRef(false);
-  const enabledRef = useRef(enabled);
-  enabledRef.current = enabled;
-  const sampleRef = useRef(sample);
-  sampleRef.current = sample;
-  const onColorChangeRef = useRef(capability.onColorChange);
-  onColorChangeRef.current = capability.onColorChange;
+  const enabledRef = useLatest(enabled);
+  const sampleRef = useLatest(sample);
+  const onColorChangeRef = useLatest(options.onColorChange);
 
   // Reads nothing but refs, so it is stable and an effect may depend on it.
   const shown = useCallback(
-    (): boolean => overRef.current && (enabledRef.current || peekingRef.current),
-    [],
+    (): boolean => lensShown(overRef.current, enabledRef.current, peekingRef.current),
+    [enabledRef],
   );
 
   const modelRef = useRef<LoupeModel | null>(null);
   if (modelRef.current === null) {
     modelRef.current = createLoupeModel({
-      mode: capability.mode,
-      factor: capability.factor,
-      minFactor: capability.minFactor,
-      maxFactor: capability.maxFactor,
+      mode: options.mode,
+      factor: options.factor,
+      minFactor: options.minFactor,
+      maxFactor: options.maxFactor,
       onColorChange: (hex) => onColorChangeRef.current?.(hex),
       surface: {
         lens: () => {
@@ -94,8 +97,7 @@ export function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptio
   }
   const model = modelRef.current;
 
-  const diameterRef = useRef(capability.diameter);
-  diameterRef.current = capability.diameter;
+  const diameterRef = useLatest(options.diameter);
   const goneRef = useRef(false);
 
   // The model holds no resources, and `dispose` is one-way — so unmounting only
@@ -156,7 +158,8 @@ export function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptio
   }
 
   return {
-    visible: shown(),
+    // This render's `enabled`: `enabledRef` holds the last committed one.
+    visible: lensShown(overRef.current, enabled, peekingRef.current),
     aim: model.aim,
     factor: model.factor,
     mode: model.mode,

package/src/overview/OverviewMarks.test.tsx

@@ -3,7 +3,8 @@
  * and redraws when one is added. jsdom lays nothing out, so the target's rect
  * and the stage's are mocked; the stage's camera is the identity there.
  */
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { useAnnotations } from '../annotations/AnnotationsContext';
 import type { AnnotationsApi } from '../annotations/types';
@@ -33,7 +34,7 @@ let restore: (() => void) | null = null;
 afterEach(() => restore?.());
 
 /** Stage 400×300, the pane at stage (50, 20) and 200×100. */
-function mount() {
+async function mount() {
   const pane = { current: null as HTMLDivElement | null };
   let api: AnnotationsApi | null = null;
   function Body() {
@@ -68,21 +69,21 @@ function mount() {
   restore = () => {
     HTMLElement.prototype.getBoundingClientRect = original;
   };
-  const r = render(<Lab instruments={[marked]} defaultInstrument="Marked" />);
+  const r = await renderSettled(<Lab instruments={[marked]} defaultInstrument="Marked" />);
   return { ...r, api: () => api as AnnotationsApi };
 }
 
 const px = (el: HTMLElement, name: string) => Number.parseFloat(el.style.getPropertyValue(name));
 
 describe('marks on the overview', () => {
-  it('draws nothing for a target with no marks', () => {
-    const h = mount();
+  it('draws nothing for a target with no marks', async () => {
+    const h = await mount();
     expect(h.container.querySelector('.lk-overview__marks')).toBeNull();
   });
 
-  it("places a target's marks at the target's rect, through the fit", () => {
-    const h = mount();
-    act(() => {
+  it("places a target's marks at the target's rect, through the fit", async () => {
+    const h = await mount();
+    await act(async () => {
       h.api().add({ target: 'pane', kind: 'rect', frac: { x: 0.1, y: 0.1, w: 0.2, h: 0.2 } });
     });
     const marks = h.container.querySelector<HTMLElement>('.lk-overview__marks[data-target="pane"]');

package/src/overview/OverviewMarks.tsx

@@ -1,6 +1,7 @@
 /**
  * Every annotation target's marks, drawn read-only on the overview through the
- * export's own vector path: `markSvgNodes`, then `serializeSvg`.
+ * export's own vector path: `markSvgNodes`, then `serializeSvg` — synchronous
+ * with no `warmSvg`, since marks export nothing that loads on demand.
  */
 import type { View } from '@weasel-js/core';
 import { serializeSvg } from '@weasel-js/svg';
@@ -40,10 +41,17 @@ function elementOf(target: object): HTMLElement | null {
   return (target as { ref?: RefObject<HTMLElement | null> }).ref?.current ?? null;
 }
 
-function markupOf(api: AnnotationsApi, target: string, content: { w: number; h: number }): string {
+function markupOf(
+  api: AnnotationsApi,
+  target: string,
+  content: { w: number; h: number },
+  shown: { w: number; h: number },
+): string {
   const painted = api.paintedMarks(target);
   if (painted.length === 0) return '';
-  const nodes = painted.flatMap(({ mark, style }) => markSvgNodes(mark, content, style));
+  // The document is shown at `shown` px, fitted like any SVG viewBox.
+  const k = Math.min(shown.w / content.w, shown.h / content.h) || 1;
+  const nodes = painted.flatMap(({ mark, style }) => markSvgNodes(mark, style, { x: k, y: k }));
   return serializeSvg(nodes, { viewBox: { x: 0, y: 0, width: content.w, height: content.h } });
 }
 
@@ -69,7 +77,7 @@ export function OverviewMarks({ fit, camera }: OverviewMarksProps) {
       {api.targets().map((t) => {
         const el = elementOf(t);
         const box = el ? localRectOf(el, camera) : null;
-        const markup = box ? markupOf(api, t.id, t.content) : '';
+        const markup = box ? markupOf(api, t.id, t.content, { w: box.w * s, h: box.h * s }) : '';
         if (!box || !markup) return null;
         const place = {
           ['--lk-overview-mx' as string]: `${(box.x - fit.x) * s}px`,