@weasel-js/labkit 1.7.0 → 1.7.1

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.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`,

package/src/overview/TrialOverview.tsx

@@ -20,6 +20,7 @@ import {
   useActionsRegistry,
   useDepSource,
   useGestureDispatcher,
+  useLatest,
   usePointerPosition,
   type View,
   type ViewApi,
@@ -314,8 +315,7 @@ function OverviewDispatch({
   camera: CameraContextValue;
 }) {
   const registry = useActionsRegistry();
-  const fitRef = useRef(fit);
-  fitRef.current = fit;
+  const fitRef = useLatest(fit);
   const root = camera.view;
   useDepSource('rootView', () => root as ViewApi);
 
@@ -336,7 +336,7 @@ function OverviewDispatch({
         y: (cy - (r?.top ?? 0)) / f.scale.y + f.y,
       };
     },
-    [boxRef],
+    [boxRef, fitRef],
   );
 
   useGestureDispatcher({

package/src/passthrough/weasel-ui.test.ts

@@ -20,11 +20,11 @@ import {
   paintGradientTrack,
   RadioGroup,
   RangeSlider,
-  sampleByInterpolation,
   Select,
   Sidebar,
   Slider,
   Switch,
+  sampleByInterpolation,
   Tabs,
   ToolPalette,
   useReorderDragList,

package/src/passthrough/weasel-ui.ts

@@ -182,7 +182,7 @@ export {
   type ReorderDragHandlers,
   type ReorderDragState,
   type ReorderGhost,
-  type RovingItem,
+  type RovingOrientation,
   type RovingTabIndex,
   type SegmentTooltipFields,
   Select,

package/src/primitives/FloatingPanel.tsx

@@ -1,4 +1,9 @@
-import { openPointerSession, type PointerSession, pastDragThreshold } from '@weasel-js/core';
+import {
+  openPointerSession,
+  type PointerSession,
+  pastDragThreshold,
+  useLatest,
+} from '@weasel-js/core';
 import type React from 'react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -119,8 +124,7 @@ export function FloatingPanel({
   // A drag outlives the render that started it, so the reducer's inputs are
   // read here and not from that render's closure — a container resized
   // mid-drag would otherwise place the panel against its old box.
-  const layout = useRef({ container, options, item });
-  layout.current = { container, options, item };
+  const layout = useLatest({ container, options, item });
 
   useEffect(() => () => session.current?.cancel(), []);
 

package/src/primitives/JobProgress.less

@@ -31,6 +31,7 @@
 
   &__count {
     font-variant-numeric: tabular-nums;
+    font-family: var(--wzl-font-numeric);
     white-space: nowrap;
   }
 

package/src/primitives/Readout.test.tsx

@@ -81,8 +81,8 @@ describe('Readout', () => {
   });
 
   it('merges a consumer className on its root', () => {
-    const { container } = render(<Readout className="mine" rows={[]} />);
-    expect(must(container.firstElementChild).className).toMatch(/\blk-readout\b.*\bmine\b/);
+    const { container } = render(<Readout className="is-mine" rows={[]} />);
+    expect(must(container.firstElementChild).className).toMatch(/\blk-readout\b.*\bis-mine\b/);
   });
 
   it('is exported from the labkit barrel, with the list it is built on', () => {