@weasel-js/labkit 1.6.1 → 1.7.1

package/dist/surface/index.d.ts

@@ -18,7 +18,6 @@ interface Box {
 
 /** Every tile's box expressed against the container's origin. */
 declare function composeRects(container: Box, tiles: ReadonlyMap<string, Box>): Map<string, Rect>;
-declare function rectsEqual(a: Rect | undefined, b: Rect): boolean;
 
 /**
  * A DOM rect as a GL viewport rect: origin at the bottom-left, every edge snapped
@@ -82,9 +81,18 @@ type SurfaceClear = (size: {
     width: number;
     height: number;
 }, dpr: number) => void;
+/** Inputs to `useTiledSurface`. `onFrame` runs once per frame that has dirty
+ *  tiles, before any tile paints — the place to size the shared buffer. */
 interface UseTiledSurfaceOptions {
     onFrame: (frame: SurfaceFrame) => void;
 }
+/**
+ * Share one drawing buffer among tiles laid out by the DOM. Tiles register
+ * their elements; the hook measures them against the container, re-measures on
+ * resize, and batches invalidations into one visible-only frame that calls
+ * `onFrame`, then (on a retiled frame) the registered clears, then each dirty
+ * tile's painter.
+ */
 declare function useTiledSurface({ onFrame }: UseTiledSurfaceOptions): SurfaceHandle;
 
 /** Null when no surface owner is above — a lab with no shared surface at all. */
@@ -141,5 +149,5 @@ declare function useTileId(id: string): string;
  */
 declare function useSurfaceTile(id: string): (el: HTMLElement | null) => void;
 
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface };
+export { SurfaceCanvasContext, SurfaceContext, composeRects, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface };
 export type { Box, Rect, SurfaceCanvases, SurfaceClear, SurfaceFrame, SurfaceHandle, SurfaceLayer, TilePainter, UseTiledSurfaceOptions };

package/dist/surface/index.js

@@ -1,4 +1,4 @@
-export { composeRects, rectsEqual, toDeviceRect, useTiledSurface } from '../chunk-IJJUK4FU.js';
+export { composeRects, toDeviceRect, useTiledSurface } from '../chunk-EESJUSYR.js';
 export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId } from '../chunk-WIG6XHJ7.js';
 import '../chunk-2YILQ7Y5.js';
 //# sourceMappingURL=index.js.map

package/dist/undo/index.d.ts

@@ -1,9 +1,11 @@
-export { az as UndoCapability } from '../_dts/types-B7yBTTF9.js';
+export { at as UndoCapability } from '../_dts/index-DCMA4Fy1.js';
+import '@weasel-js/ui';
 import '@weasel-js/core';
 import 'react';
-import '../_dts/PrefsRow.d-DFpPIeIC.js';
 import '@weasel-js/theme';
-import '../_dts/types-DTuViBvc.js';
+import '../_dts/types-BUBSIZuV.js';
+import '@weasel-js/quantity';
+import '@weasel-js/geom';
 import '../_dts/types-DJ79Tg5J.js';
 
 /** A subscriber to a named event. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -115,28 +115,29 @@
     "dev:3d": "LABKIT_EXAMPLE=3d-lab vite"
   },
   "peerDependencies": {
-    "@weasel-js/core": "1.6.1",
-    "@weasel-js/theme": "1.6.1",
+    "@weasel-js/core": "1.7.1",
+    "@weasel-js/theme": "1.7.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/geom": "1.6.1",
-    "@weasel-js/kernel3d": "1.6.1",
-    "@weasel-js/loupe": "1.6.1",
-    "@weasel-js/svg": "1.6.1",
-    "@weasel-js/ui": "1.6.1",
-    "earcut": "2.2.4",
+    "@weasel-js/geom": "1.7.1",
+    "@weasel-js/kernel3d": "1.7.1",
+    "@weasel-js/loupe": "1.7.1",
+    "@weasel-js/quantity": "1.7.1",
+    "@weasel-js/svg": "1.7.1",
+    "@weasel-js/ui": "1.7.1",
+    "earcut": "3.2.3",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
-    "windease": "^1.3.0",
+    "windease": "^2.0.0",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.12",
-    "@rollup/plugin-alias": "^6.0.0",
-    "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.6.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@weasel-js/guides": "1.7.1",
+    "@weasel-js/modes": "1.7.1",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/annotations/AnnotationOverlay.abandon.test.tsx

@@ -0,0 +1,143 @@
+/**
+ * What an overlay reads outside render — the insert factory's tool and config,
+ * and the buffer its clear opens — comes from the render that committed, never
+ * from one React started and threw away.
+ *
+ * `<SceneCanvas>` is stubbed: jsdom has no WebGL2, so the real one never
+ * paints, and a pane that has not painted never clears. The stub hands the
+ * overlay a frame subscription the test can fire, and keeps the committed
+ * insert factories.
+ */
+import type { InsertNodeFactory, SceneCanvasApi } from '@weasel-js/core';
+import { renderThenAbandon } from '@weasel-js/react/testing/abandonRender';
+import { type Ref, useLayoutEffect } from 'react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
+import type { SurfaceClear, SurfaceHandle, TilePainter } from '../surface/useTiledSurface';
+import { AnnotationOverlay } from './AnnotationOverlay';
+import { seenFrom } from './staleness';
+import { createAnnotationScene } from './store';
+import type { AnnotationTarget } from './types';
+
+const frames = new Set<() => void>();
+let factories: Record<string, InsertNodeFactory> = {};
+
+vi.mock('@weasel-js/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@weasel-js/core')>();
+  function SceneCanvas(props: {
+    ref?: Ref<SceneCanvasApi | null>;
+    insertNodeFactories: Record<string, InsertNodeFactory>;
+  }) {
+    const { ref, insertNodeFactories } = props;
+    useLayoutEffect(() => {
+      factories = insertNodeFactories;
+    });
+    useLayoutEffect(() => {
+      if (typeof ref !== 'function') return;
+      const api = {
+        subscribeFrame: (fn: () => void) => {
+          frames.add(fn);
+          return () => frames.delete(fn);
+        },
+        requestRedraw: () => {},
+      } as unknown as SceneCanvasApi;
+      ref(api);
+      return () => {
+        ref(null);
+      };
+    }, [ref]);
+    return null;
+  }
+  return { ...actual, SceneCanvas };
+});
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => null,
+  ) as unknown as HTMLCanvasElement['getContext'];
+});
+
+/** A surface that measures every tile at once, so the pane mounts its canvas
+ *  inside the first commit. */
+function surfaceFor(clears: SurfaceClear[]): SurfaceHandle {
+  const container = document.createElement('div');
+  return {
+    invalidate: () => {},
+    invalidateAll: () => {},
+    invalidateRects: () => {},
+    registerTile: () => {},
+    registerClear: (_id, clear) => {
+      clears.push(clear);
+      return () => {};
+    },
+    registerPainter: (_id, paint: TilePainter) => {
+      paint({ x: 0, y: 0, w: 100, h: 50 }, {} as never);
+      return () => {};
+    },
+    containerRef: () => {},
+    getContainer: () => container,
+  } as SurfaceHandle;
+}
+
+const target: AnnotationTarget = {
+  id: 'pane',
+  ref: { current: null },
+  content: { w: 100, h: 50 },
+  positionDependsOn: ['k'],
+};
+
+interface Props {
+  toolId: string;
+  config: { k: number };
+  canvas: HTMLCanvasElement;
+}
+
+const committed = document.createElement('canvas');
+const abandoned = document.createElement('canvas');
+
+/** Commits a pane holding `line` on `committed`, then abandons one holding
+ *  `arrow` on `abandoned`. Returns the clears the pane registered. */
+function mountThenAbandon(): SurfaceClear[] {
+  const clears: SurfaceClear[] = [];
+  const surface = surfaceFor(clears);
+  const scene = createAnnotationScene();
+  renderThenAbandon<Props>(
+    { toolId: 'line', config: { k: 1 }, canvas: committed },
+    { toolId: 'arrow', config: { k: 2 }, canvas: abandoned },
+    (p) => (
+      <SurfaceContext.Provider value={surface}>
+        <SurfaceCanvasContext.Provider value={{ over: p.canvas, under: null }}>
+          <AnnotationOverlay
+            target={target}
+            scene={scene}
+            config={p.config}
+            activeToolId={p.toolId}
+          />
+        </SurfaceCanvasContext.Provider>
+      </SurfaceContext.Provider>
+    ),
+  );
+  return clears;
+}
+
+describe('<AnnotationOverlay> across an abandoned render', () => {
+  it('mints a mark with the committed tool and config', () => {
+    mountThenAbandon();
+    // `line` and `arrow` drive the same weasel tool; only the tool id the
+    // factory reads tells them apart.
+    const made = factories.line?.({ x: 0, y: 0, width: 1, height: 1 }, {} as never);
+    expect(made?.data).toMatchObject({ kind: 'line', seen: seenFrom({ k: 1 }, ['k']) });
+  });
+
+  it('clears the committed buffer', () => {
+    const clears = mountThenAbandon();
+    for (const fn of frames) fn();
+    // One mock on the prototype serves every canvas; `this` tells them apart.
+    const open = vi.mocked(HTMLCanvasElement.prototype.getContext);
+    open.mockClear();
+    for (const clear of clears) clear({ width: 100, height: 50 }, 1);
+    // By identity: two blank canvases are deeply equal.
+    expect(open.mock.contexts).toHaveLength(1);
+    expect(open.mock.contexts[0]).toBe(committed);
+  });
+});

package/src/annotations/AnnotationOverlay.tsx

@@ -1,18 +1,29 @@
 import {
   type InsertNodeFactory,
+  registerNodeShape,
   SceneCanvas,
   type SceneCanvasApi,
   useActiveToolContext,
+  useLatest,
   type View,
   WeaselProvider,
 } from '@weasel-js/core';
-import { type CSSProperties, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import {
+  type CSSProperties,
+  useCallback,
+  useContext,
+  useEffect,
+  useInsertionEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { CameraWheelContext } from '../canvas/CameraWheelContext';
 import type { Rect } from '../surface/rect';
 import { useSurfaceCanvas, useSurfaceOptional, useTileId } from '../surface/useSurfaceTile';
 import { createMarkDrawOne } from './drawOne';
-import type { WorldRect } from './frac';
+import { boundsOf, roundPoints, toShape, type WorldRect } from './frac';
+import { POINT_MARK_SHAPE } from './paint';
 import { seenFrom } from './staleness';
 import type { MarkScene } from './store';
 import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo } from './toolMap';
@@ -53,24 +64,32 @@ function ToolBridge({ toolId }: { toolId: string }) {
   return null;
 }
 
-/** Every vertex the insert carried, in fractions of the content box. */
-function pointsOf(
-  extras: Record<string, unknown>,
-  content: { w: number; h: number },
-): readonly FracPoint[] | undefined {
-  const toFrac = (p: { x: number; y: number }): FracPoint => ({
-    x: content.w === 0 ? 0 : p.x / content.w,
-    y: content.h === 0 ? 0 : p.y / content.h,
-  });
-  if (extras.kind === 'line') {
-    return [toFrac(extras.a as FracPoint), toFrac(extras.b as FracPoint)];
-  }
+/** Every vertex the insert carried, in world units. */
+function verticesOf(extras: Record<string, unknown>): readonly FracPoint[] | undefined {
+  if (extras.kind === 'line') return [extras.a as FracPoint, extras.b as FracPoint];
   if (extras.kind === 'pencil') {
-    return (extras.samples as { x: number; y: number }[]).map(toFrac);
+    const samples = extras.samples as FracPoint[];
+    return samples.length > 0 ? samples : undefined;
   }
   return undefined;
 }
 
+/** The pose and shape an insert's vertices make: the box that holds them, and
+ *  the vertices stored against that very box. Undefined for an insert that
+ *  carries no vertices, whose drag bounds are the whole geometry. */
+export function insertedGeometry(
+  extras: Record<string, unknown>,
+): { pose: WorldRect; shape: readonly FracPoint[] } | undefined {
+  const vertices = verticesOf(extras);
+  if (!vertices) return undefined;
+  const box = boundsOf(vertices);
+  if (!box) return undefined;
+  return {
+    pose: { x: box.x, y: box.y, width: box.w, height: box.h },
+    shape: roundPoints(toShape(vertices, box)),
+  };
+}
+
 /**
  * One target's drawing surface: a transparent box over the target's element
  * taking the input, and a `<SceneCanvas>` painting into the lab's shared
@@ -92,14 +111,13 @@ export function AnnotationOverlay({
   const [rect, setRect] = useState<Rect | null>(null);
   const [input, setInput] = useState<HTMLDivElement | null>(null);
   const sceneCanvas = useRef<SceneCanvasApi | null>(null);
+  useEffect(() => registerNodeShape(POINT_MARK_SHAPE, { priority: 'high' }), []);
 
   // Read in the insert factory, which is built once and must see the tool the
   // pane is holding now — `arrow` and `stroke` are indistinguishable from
   // `line` and `pencil` at the weasel end.
-  const toolRef = useRef(activeToolId);
-  toolRef.current = activeToolId;
-  const configRef = useRef(config);
-  configRef.current = config;
+  const toolRef = useLatest(activeToolId);
+  const configRef = useLatest(config);
 
   const id = target.id;
   // The surface's tile namespace is the whole lab's, and every trial of an
@@ -132,9 +150,13 @@ export function AnnotationOverlay({
   // renderer has opened creates the context without the stencil buffer marks
   // need, and every later request gets that context back.
   const painted = useRef(false);
-  const canvasRef = useRef(canvas);
-  if (canvasRef.current !== canvas) painted.current = false;
-  canvasRef.current = canvas;
+  const canvasRef = useLatest(canvas);
+  // A new buffer has not been painted into, whatever the old one had. Reset
+  // with the commit that brings it, ahead of any paint that commit triggers.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `canvas` is the signal, not a value this reads
+  useInsertionEffect(() => {
+    painted.current = false;
+  }, [canvas]);
   const unsubscribeFrame = useRef<(() => void) | null>(null);
   const attachSceneCanvas = useCallback((api: SceneCanvasApi | null) => {
     sceneCanvas.current = api;
@@ -156,7 +178,7 @@ export function AnnotationOverlay({
       gl.clearColor(0, 0, 0, 0);
       gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
     });
-  }, [surface, tileId]);
+  }, [canvasRef, surface, tileId]);
 
   // The box is portalled out of whatever the picture sits in, so a wheel over
   // a mark would never reach the trial's camera without being handed to it.
@@ -200,14 +222,11 @@ export function AnnotationOverlay({
       const info = annotationToolInfo(toolRef.current);
       const kind: AnnotationKind | undefined = info?.kind;
       if (!kind) return null;
-      const points = pointsOf(extras as unknown as Record<string, unknown>, target.content);
-      const data: AnnotationData = {
-        target: id,
-        kind,
-        ...(points ? { points } : {}),
-        seen: seenFrom(configRef.current, target.positionDependsOn ?? []),
-      };
-      return { data };
+      const seen = seenFrom(configRef.current, target.positionDependsOn ?? []);
+      const geometry = insertedGeometry(extras as unknown as Record<string, unknown>);
+      if (!geometry) return { data: { target: id, kind, seen } satisfies AnnotationData };
+      const data: AnnotationData = { target: id, kind, shape: geometry.shape, seen };
+      return { data, pose: geometry.pose };
     };
   }
 
@@ -236,11 +255,11 @@ export function AnnotationOverlay({
         style={box}
       />
       {canvas && input ? (
-        // One scope per pane: a shared <ActionsProvider> lets only the newest
-        // canvas under it respond to input, and the rest go silently dead.
+        // Isolated so each pane keeps its own selection and tool.
         <WeaselProvider isolate>
           <ToolBridge toolId={annotationToolInfo(activeToolId)?.weaselTool ?? 'select'} />
           <SceneCanvas<AnnotationData, 'marks', WorldRect>
+            features={['pick', 'move', 'transform', 'edit']}
             ref={attachSceneCanvas}
             scene={scene}
             width={rect.w}

package/src/annotations/Annotations.less

@@ -59,16 +59,6 @@
 
 .lk-mark-list__drop {
   margin-left: auto;
-  background: none;
-  border: 0;
-  color: var(--wzl-fg-muted);
-  cursor: pointer;
-}
-
-// Box and typography come from <Input>. This only says how the field shares
-// the row.
-.lk-mark-list__title {
-  width: 100%;
 }
 
 // The export panel: a target to export, how, and at what resolution. Held in

package/src/annotations/Annotations.overlay.test.tsx

@@ -15,6 +15,7 @@ import { TrialIdProvider } from '../state/context';
 import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
 import type { SurfaceClear, SurfaceHandle } from '../surface/useTiledSurface';
 import { useTiledSurface } from '../surface/useTiledSurface';
+import { insertedGeometry } from './AnnotationOverlay';
 import { AnnotationTargets } from './AnnotationTargets';
 import { createAnnotationStore } from './store';
 import type { AnnotationsCapability, AnnotationTarget } from './types';
@@ -354,3 +355,33 @@ describe('two trials of one instrument', () => {
     ]);
   });
 });
+
+describe('the geometry a drawn mark is inserted with', () => {
+  it("boxes a line's ends and stores them against that box", () => {
+    const got = insertedGeometry({ kind: 'line', a: { x: 10, y: 40 }, b: { x: 50, y: 20 } });
+    expect(got).toEqual({
+      pose: { x: 10, y: 20, width: 40, height: 20 },
+      shape: [
+        { x: 0, y: 1 },
+        { x: 1, y: 0 },
+      ],
+    });
+  });
+
+  it('boxes every freehand sample', () => {
+    const samples = [
+      { x: 0, y: 0 },
+      { x: 20, y: 10 },
+      { x: 40, y: 0 },
+    ];
+    expect(insertedGeometry({ kind: 'pencil', samples })?.shape).toEqual([
+      { x: 0, y: 0 },
+      { x: 0.5, y: 1 },
+      { x: 1, y: 0 },
+    ]);
+  });
+
+  it('leaves a box-shaped insert to its drag bounds', () => {
+    expect(insertedGeometry({ kind: 'rect' })).toBeUndefined();
+  });
+});

package/src/annotations/MarkList.tsx

@@ -1,4 +1,4 @@
-import { Input } from '../passthrough/weasel-ui';
+import { CloseButton, Input } from '../passthrough/weasel-ui';
 import { useAnnotations } from './AnnotationsContext';
 import type { AnnotationMeaning } from './types';
 
@@ -35,17 +35,13 @@ export function MarkList({ meaning, config }: MarkListProps) {
               <span className="lk-mark-list__kind">{a.kind}</span>
               <span className="lk-mark-list__target">{a.target}</span>
               {stale ? <span className="lk-mark-list__stale">stale</span> : null}
-              <button
-                type="button"
+              <CloseButton
                 className="lk-mark-list__drop"
-                aria-label={`Remove ${a.kind} on ${a.target}`}
+                ariaLabel={`Remove ${a.kind} on ${a.target}`}
                 onClick={() => marks.remove(a.id)}
-              >
-                ×
-              </button>
+              />
             </div>
             <Input
-              className="lk-mark-list__title"
               aria-label={`Title of ${a.kind} on ${a.target}`}
               value={a.title ?? ''}
               placeholder="Untitled"

package/src/annotations/capture.browser.test.ts

@@ -0,0 +1,41 @@
+/**
+ * A raster capture against real WebGL2 and the real Inter files, with the
+ * default family registered lazily the way an app registers it: a text mark
+ * captured before anything has drawn text still carries its glyphs.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { registerFont } from '@weasel-js/font';
+import { _resetFontRegistryForTests } from '@weasel-js/font/test-seams';
+import { createAnnotationStore } from './store';
+import metricsUrl from '../../../../assets/fonts/inter/inter.json?url';
+import atlasUrl from '../../../../assets/fonts/inter/inter.png?url';
+
+/** Pixels where the mark's red ink landed on the transparent export. */
+async function inkPixels(blob: Blob): Promise<number> {
+  const bitmap = await createImageBitmap(blob);
+  const ctx = new OffscreenCanvas(bitmap.width, bitmap.height).getContext('2d')!;
+  ctx.drawImage(bitmap, 0, 0);
+  const { data } = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+  let n = 0;
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] > 128 && data[i] > 150 && data[i + 1] < 120) n++;
+  }
+  return n;
+}
+
+beforeEach(() => _resetFontRegistryForTests());
+afterEach(() => _resetFontRegistryForTests());
+
+describe('a raster capture of a text mark', () => {
+  it('draws its glyphs when the font was registered lazily and never fetched', async () => {
+    void registerFont('sans-serif', {}, metricsUrl, atlasUrl, { lazy: true });
+    const store = createAnnotationStore({
+      targets: () => [{ id: 'bare', content: { w: 120, h: 40 } }],
+    });
+    store.add({ target: 'bare', kind: 'text', title: 'Hello', frac: { x: 0.1, y: 0.2, w: 0.5, h: 0.5 } });
+
+    const result = await store.capture('bare', { format: 'png', scale: 2 });
+
+    expect(await inkPixels(result.blob)).toBeGreaterThan(40);
+  });
+});

package/src/annotations/capture.ts

@@ -1,4 +1,4 @@
-import { asNodeId, renderSceneToPixels } from '@weasel-js/core';
+import { asNodeId, renderSceneToPixels, warmRender } from '@weasel-js/core';
 import { serializeSvg } from '@weasel-js/svg';
 import { createMarkDrawOne, type MarkDrawOptions, resolveMarkStyle } from './drawOne';
 import type { MarkScene } from './store';
@@ -60,18 +60,20 @@ function embedRasterBase(
 }
 
 /** Every mark on a scene, as SVG nodes, styled the way the pane styles them. */
-function markNodesOf(scene: MarkScene, draw: MarkDrawOptions) {
+function markNodesOf(scene: MarkScene, draw: MarkDrawOptions, scale: number) {
   return [...scene.renderOrder()].flatMap((id) => {
     const node = scene.get(asNodeId(String(id)));
     if (!node) return [];
     return markSvgNodes(
       { pose: node.pose, data: node.data as AnnotationData },
-      draw.content,
       resolveMarkStyle(node.data as AnnotationData, draw),
+      { x: scale, y: scale },
     );
   });
 }
 
+/** Inputs to `composeCaptureSvg`. `scale` is output pixels per content-box
+ *  unit; `onWarn` receives non-fatal export warnings. */
 export interface ComposeSvgArgs {
   base?: CaptureSource;
   scene: MarkScene;
@@ -86,7 +88,10 @@ export interface ComposeSvgArgs {
  * The outer `viewBox` is the content box, so marks — which are already in it —
  * need no transform, and `width`/`height` carry the export scale. Both halves
  * nest as child `<svg>` elements, which each establish their own viewport and
- * so keep their own `viewBox` maths out of this function.
+ * so keep their own `viewBox` math out of this function.
+ *
+ * Synchronous with no `warmSvg`: marks export nothing that loads on demand,
+ * which `svgNodes.test.ts` pins.
  */
 export function composeCaptureSvg(args: ComposeSvgArgs): string {
   const { base, scene, draw, scale, onWarn } = args;
@@ -99,7 +104,7 @@ export function composeCaptureSvg(args: ComposeSvgArgs): string {
         : embedRasterBase(base, w, h, onWarn);
   // No width/height on the marks document: a nested <svg> without them fills
   // the outer viewport exactly, which is the alignment this relies on.
-  const marksXml = serializeSvg(markNodesOf(scene, draw), {
+  const marksXml = serializeSvg(markNodesOf(scene, draw, scale), {
     viewBox: { x: 0, y: 0, width: w, height: h },
     onWarn,
   });
@@ -172,12 +177,14 @@ async function stackRaster(
   if (base?.kind === 'image') ctx.drawImage(await loadImage(base.src), 0, 0, width, height);
   else if (base?.kind === 'canvas') ctx.drawImage(base.canvas, 0, 0, width, height);
 
-  const raster = renderSceneToPixels({
+  const render = {
     scene,
     sourceRect: { x: 0, y: 0, width: draw.content.w, height: draw.content.h },
     scale: { x: scale, y: scale },
     drawOne: createMarkDrawOne(draw),
-  });
+  };
+  await warmRender({ render });
+  const raster = renderSceneToPixels(render);
   // Through a second canvas rather than `putImageData` on this one, which
   // replaces pixels instead of compositing and would erase the base.
   const marks = context2d(raster.width, raster.height);

package/src/annotations/drawOne.ts

@@ -30,8 +30,8 @@ export function createMarkDrawOne(
   pose: WorldRect,
   view: View,
 ) => DrawCommand[] {
-  return (node, pose) =>
-    markCommands({ pose, data: node.data }, opts.content, resolveMarkStyle(node.data, opts));
+  return (node, pose, view) =>
+    markCommands({ pose, data: node.data }, resolveMarkStyle(node.data, opts), view.scale);
 }
 
 /** How a mark looks, as opposed to where it is. Separate from the callback

package/src/annotations/frac.test.ts

@@ -1,5 +1,14 @@
 import { describe, expect, it } from 'vitest';
-import { fracContains, fracEncloses, fracToWorld, roundFrac, worldToFrac } from './frac';
+import {
+  boundsOf,
+  fracContains,
+  fracEncloses,
+  fracToWorld,
+  fromShape,
+  roundFrac,
+  toShape,
+  worldToFrac,
+} from './frac';
 import type { FracRect } from './types';
 
 const CONTENT = { w: 256, h: 170 };
@@ -64,3 +73,37 @@ describe('fraction hit geometry', () => {
     expect(fracEncloses({ x: 0.4, y: 0.4, w: 0.4, h: 0.4 }, box)).toBe(false);
   });
 });
+
+describe('a shape', () => {
+  const pts = [
+    { x: 0.1, y: 0.6 },
+    { x: 0.6, y: 0.2 },
+  ];
+
+  it('has no bounds without points', () => {
+    expect(boundsOf([])).toBeNull();
+  });
+
+  it('round-trips through the box that bounds it', () => {
+    const box = boundsOf(pts);
+    if (!box) throw new Error('no bounds');
+    const back = fromShape(toShape(pts, box), box);
+    back.forEach((p, i) => {
+      expect(p.x).toBeCloseTo(pts[i]?.x ?? Number.NaN, 9);
+      expect(p.y).toBeCloseTo(pts[i]?.y ?? Number.NaN, 9);
+    });
+  });
+
+  it('puts every point on the edge of an axis the box has no extent along', () => {
+    const flat = [
+      { x: 0.1, y: 0.5 },
+      { x: 0.4, y: 0.5 },
+    ];
+    const box = boundsOf(flat);
+    if (!box) throw new Error('no bounds');
+    expect(toShape(flat, box)).toEqual([
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+    ]);
+  });
+});