@weasel-js/labkit 1.6.1 → 1.7.0

package/src/lab/LabHeader.test.tsx

@@ -58,28 +58,38 @@ describe('<LabHeader>', () => {
       <Lab instruments={[Stub, Other]} defaultInstrument="Stub" addTrial={false} />,
     );
     expect(screen.queryByRole('button', { name: /add trial/i })).toBeNull();
-    expect(screen.getByRole('radio', { name: 'Auto' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Theme: Auto/ })).toBeInTheDocument();
     unmount();
     render(<Lab instruments={[Stub]} defaultInstrument="Stub" addTrial={false} />);
     expect(screen.queryByRole('button', { name: /add trial/i })).toBeNull();
   });
 
-  it('exposes the color mode as a three-way choice', () => {
+  it('rotates the color mode from one button', async () => {
+    const { default: userEvent } = await import('@testing-library/user-event');
+    const user = userEvent.setup();
     render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
-    for (const label of ['Auto', 'Light', 'Dark']) {
-      expect(screen.getByRole('radio', { name: label })).toBeInTheDocument();
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+    for (const [now, next] of [
+      ['Auto', 'Light'],
+      ['Light', 'Dark'],
+      ['Dark', 'Auto'],
+    ]) {
+      const button = screen.getByRole('button', { name: `Theme: ${now} — click for ${next}` });
+      expect(button.querySelector('svg')).not.toBeNull();
+      expect(button).toHaveTextContent('');
+      await user.click(button);
     }
+    expect(screen.getByRole('button', { name: /^Theme: Auto/ })).toBeInTheDocument();
   });
 
-  it('draws each color mode as a glyph, with the word only as its name', () => {
-    // The assertion above passes whether the segment holds text or an icon,
-    // because both routes produce the same accessible name. This is the one
-    // that can tell them apart.
-    render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
-    for (const label of ['Auto', 'Light', 'Dark']) {
-      const segment = screen.getByRole('radio', { name: label });
-      expect(segment.querySelector('svg')).not.toBeNull();
-      expect(segment).toHaveTextContent('');
-    }
+  it('puts the theme switch after the header content a consumer passes', () => {
+    render(
+      <Lab instruments={[Stub]} defaultInstrument="Stub">
+        <button type="button">Consumer</button>
+      </Lab>,
+    );
+    const consumer = screen.getByRole('button', { name: 'Consumer' });
+    const theme = screen.getByRole('button', { name: /^Theme: / });
+    expect(consumer.compareDocumentPosition(theme) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 });

package/src/lab/LabHeader.tsx

@@ -1,11 +1,10 @@
 import { AddIcon } from '@weasel-js/ui';
-import { ColorModeControl, MenuButton } from '../passthrough/weasel-ui';
+import { MenuButton, ThemeSwitcher } from '../passthrough/weasel-ui';
 import { useLabContext } from './LabContext';
 
-/** The controls `<Lab>` puts in its header: add a trial, and choose the color
- *  mode. Both drive `LabContext`, which carried them with no UI at all — so
- *  every consumer rebuilt these two. Rendered before a consumer's own header
- *  content, which still lands beside them. */
+/** The control `<Lab>` puts at the start of its header: add a trial. It drives
+ *  `LabContext`, which carried it with no UI at all — so every consumer rebuilt
+ *  it. Rendered before a consumer's own header content. */
 export function LabHeader({ addTrial = true }: { addTrial?: boolean }) {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
@@ -29,13 +28,13 @@ export function LabHeader({ addTrial = true }: { addTrial?: boolean }) {
           onAction={(name) => lab.addTrial(name)}
         />
       )}
-
-      <ColorModeControl
-        className="lk-lab-header__mode"
-        variant="flat"
-        value={lab.mode}
-        onChange={lab.setMode}
-      />
     </>
   );
 }
+
+/** The lab's color-mode switch, which `<Lab>` puts at the end of its header,
+ *  after a consumer's own header content. */
+export function LabThemeSwitcher() {
+  const lab = useLabContext();
+  return <ThemeSwitcher value={lab.mode} onChange={lab.setMode} />;
+}

package/src/lab/LabShell.less

@@ -155,21 +155,12 @@
   align-self: center;
 }
 
-// `Select` is a form field and defaults to `width: 100%`. Left to resolve that
-// against a shrink-to-fit header row it swallows the slack, which pushed the
-// consumer's own header content down to min-content and wrapped the row to
-// three lines. See the `.lk-root` prefix convention in theme/base.less.
-// The mode toggle is a preference, not a primary action: it sits quiet until
-// the pointer is on it.
-.lk-lab-header__mode {
-  opacity: 0.75;
-  // A consumer's own header content shares this row and does not shrink, so
-  // without this the segments compress past their labels and the pill track
-  // disappears entirely.
-  flex-shrink: 0;
-
-  &:hover,
-  &:focus-within {
-    opacity: 1;
-  }
+// The readout's digit count changes as the zoom does (80% to 125%), so it sits
+// in a cell sized for the widest value the default range reaches, and the
+// buttons either side of it stay put.
+.lk-lab-zoom__readout {
+  display: inline-block;
+  min-width: 5ch;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
 }

package/src/lab/LabSwitcher.less

@@ -29,9 +29,9 @@
   &:hover { color: var(--wzl-accent-fg); }
 
   &:focus-visible {
-    outline: 2px solid var(--wzl-focus-ring, currentColor);
+    outline: 2px solid var(--wzl-focus-ring);
     outline-offset: 2px;
-    border-radius: var(--wzl-radius-sm, 3px);
+    border-radius: var(--wzl-radius-sm);
   }
 }
 
@@ -64,22 +64,22 @@
   // surface, the way `FloatingPanel` does.
   background: var(--wzl-surface);
   border: 1px solid var(--wzl-border);
-  border-radius: var(--wzl-radius-md, 5px);
+  border-radius: var(--wzl-radius-md);
   box-shadow: 0 6px 20px var(--wzl-shadow);
 }
 
 .lk-switcher-item {
   padding: var(--wzl-space-xs) var(--wzl-space-sm);
-  border-radius: var(--wzl-radius-sm, 3px);
+  border-radius: var(--wzl-radius-sm);
   color: var(--wzl-fg);
   font-size: var(--wzl-font-size);
   text-decoration: none;
   white-space: nowrap;
 
-  &:hover { background: var(--wzl-surface-hover, var(--wzl-surface)); }
+  &:hover { background: var(--wzl-surface-hover); }
 
   &:focus-visible {
-    outline: 2px solid var(--wzl-focus-ring, currentColor);
+    outline: 2px solid var(--wzl-focus-ring);
     outline-offset: -2px;
   }
 }

package/src/lab/LabZoom.test.tsx

@@ -0,0 +1,223 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  ActionsProvider,
+  type ActionsRegistry,
+  ActiveToolContextProvider,
+  DepRegistryProvider,
+  type Tool,
+  useActionsRegistry,
+  useGestureDispatcher,
+} from '@weasel-js/core';
+import { type ReactNode, useEffect } from 'react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { defineInstrument } from '../instrument/defineInstrument';
+import { Lab } from './Lab';
+import { LabContext, type LabContextValue } from './LabContext';
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => null,
+  ) as unknown as HTMLCanvasElement['getContext'];
+});
+
+const staged = defineInstrument<Record<string, never>, Record<string, never>>({
+  name: 'Staged',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => <div data-testid="art" />,
+  stage: {
+    size: { width: 240, height: 160 },
+    initialView: { zoom: 1, pan: { x: 0, y: 0 } },
+    maxZoom: 1.5,
+  },
+});
+
+const plain = defineInstrument<Record<string, never>, Record<string, never>>({
+  name: 'Plain',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => <div data-testid="plain" />,
+});
+
+let lab: LabContextValue | null = null;
+function Capture({ children }: { children?: ReactNode }) {
+  return (
+    <LabContext.Consumer>
+      {(value) => {
+        lab = value;
+        return children ?? null;
+      }}
+    </LabContext.Consumer>
+  );
+}
+
+const zoomBar = () => within(screen.getByRole('toolbar', { name: 'Zoom' }));
+const readout = () => zoomBar().getByRole('button', { name: /^Zoom \d+%|^Zoom unavailable/ });
+const press = (name: string) =>
+  act(() => {
+    fireEvent.click(zoomBar().getByRole('button', { name }));
+  });
+
+const MOD = /mac/i.test(navigator.platform || navigator.userAgent)
+  ? { metaKey: true }
+  : { ctrlKey: true };
+function key(k: string): boolean {
+  let prevented = false;
+  act(() => {
+    prevented = !fireEvent.keyDown(window, { key: k, ...MOD });
+  });
+  return prevented;
+}
+
+const NO_TOOLS: ReadonlyMap<string, Tool> = new Map();
+
+/** A story's own dispatcher, binding Mod+= the way a `<SceneCanvas>` with keyboard zoom does. */
+function StoryZoomKey({ run }: { run: () => void }) {
+  function Bound() {
+    const registry = useActionsRegistry() as ActionsRegistry;
+    useEffect(
+      () =>
+        registry.register({
+          id: 'story.zoom',
+          label: 'Story zoom',
+          defaultBinding: { kind: 'key', key: '=', mods: { mod: true } },
+          invoker: { timing: 'immediate', run: () => run() },
+        }),
+      [registry],
+    );
+    useGestureDispatcher({
+      canvasRef: { current: null },
+      actions: registry,
+      entriesById: NO_TOOLS,
+      channels: { contextMenu: false, ingest: false },
+    });
+    return null;
+  }
+  return (
+    <DepRegistryProvider>
+      <ActionsProvider>
+        <ActiveToolContextProvider>
+          <Bound />
+        </ActiveToolContextProvider>
+      </ActionsProvider>
+    </DepRegistryProvider>
+  );
+}
+
+function stageZoom(container: HTMLElement, index = 0): number {
+  const el = container.querySelectorAll<HTMLElement>('.lk-stage__content')[index];
+  if (!el) throw new Error('no stage content');
+  return Number(el.style.getPropertyValue('--lk-stage-zoom'));
+}
+
+describe("the lab header's zoom controls", () => {
+  it('step the focused trial through its camera and read its zoom back', () => {
+    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+    expect(readout()).toHaveTextContent('100%');
+    press('Zoom in');
+    expect(stageZoom(container)).toBeCloseTo(1.25);
+    expect(readout()).toHaveTextContent('125%');
+    press('Zoom out');
+    expect(stageZoom(container)).toBeCloseTo(1);
+    press('Zoom out');
+    expect(readout()).toHaveTextContent('80%');
+  });
+
+  it('reset to actual size from the readout', () => {
+    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+    press('Zoom out');
+    press('Zoom out');
+    act(() => {
+      fireEvent.click(readout());
+    });
+    expect(stageZoom(container)).toBe(1);
+    expect(readout()).toHaveTextContent('100%');
+  });
+
+  it("stop at the camera's own limit, and say so", () => {
+    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+    press('Zoom in');
+    press('Zoom in');
+    expect(stageZoom(container)).toBe(1.5);
+    expect(zoomBar().getByRole('button', { name: 'Zoom in' })).toBeDisabled();
+    expect(zoomBar().getByRole('button', { name: 'Zoom out' })).toBeEnabled();
+  });
+
+  it('answer Mod+=, Mod+- and Mod+0, claiming the key from the browser', () => {
+    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+    expect(key('=')).toBe(true);
+    expect(stageZoom(container)).toBeCloseTo(1.25);
+    key('-');
+    key('-');
+    expect(stageZoom(container)).toBeCloseTo(0.8);
+    key('0');
+    expect(stageZoom(container)).toBe(1);
+  });
+
+  it('go inert over a trial with no camera, and leave its keys to the browser', () => {
+    render(<Lab instruments={[plain]} defaultInstrument="Plain" />);
+    for (const name of ['Zoom out', 'Zoom in']) {
+      expect(zoomBar().getByRole('button', { name })).toBeDisabled();
+    }
+    expect(readout()).toBeDisabled();
+    expect(readout()).toHaveTextContent('–');
+    expect(key('=')).toBe(false);
+  });
+
+  it("take the key ahead of a story's own binding in a trial with a camera", () => {
+    const story = vi.fn();
+    const zooming = defineInstrument<Record<string, never>, Record<string, never>>({
+      ...staged,
+      name: 'Zooming',
+      render: () => <StoryZoomKey run={story} />,
+    });
+    const { container } = render(<Lab instruments={[zooming]} defaultInstrument="Zooming" />);
+    key('=');
+    expect(stageZoom(container)).toBeCloseTo(1.25);
+    expect(story).not.toHaveBeenCalled();
+  });
+
+  it("leave the key to a story's own binding in a trial with no camera", () => {
+    const story = vi.fn();
+    const zooming = defineInstrument<Record<string, never>, Record<string, never>>({
+      ...plain,
+      name: 'ZoomingPlain',
+      render: () => <StoryZoomKey run={story} />,
+    });
+    render(<Lab instruments={[zooming]} defaultInstrument="ZoomingPlain" />);
+    key('=');
+    expect(story).toHaveBeenCalledTimes(1);
+  });
+
+  it('follow the focus from trial to trial', () => {
+    const { container } = render(
+      <Lab instruments={[staged, plain]} defaultInstrument="Staged">
+        <Capture />
+      </Lab>,
+    );
+    act(() => lab?.addTrial('Staged'));
+    act(() => lab?.addTrial('Plain'));
+    const [first, second, third] = lab?.trials.map((t) => t.id) ?? [];
+    expect(zoomBar().getByRole('button', { name: 'Zoom in' })).toBeDisabled();
+
+    act(() => lab?.focusTrial(second ?? ''));
+    press('Zoom out');
+    expect(stageZoom(container, 1)).toBeCloseTo(0.8);
+    expect(stageZoom(container, 0)).toBe(1);
+    expect(readout()).toHaveTextContent('80%');
+
+    act(() => lab?.focusTrial(first ?? ''));
+    expect(readout()).toHaveTextContent('100%');
+    key('=');
+    expect(stageZoom(container, 0)).toBeCloseTo(1.25);
+    expect(stageZoom(container, 1)).toBeCloseTo(0.8);
+
+    act(() => lab?.focusTrial(third ?? ''));
+    expect(readout()).toBeDisabled();
+  });
+
+  it('are left out when the lab says so', () => {
+    render(<Lab instruments={[staged]} defaultInstrument="Staged" zoom={false} />);
+    expect(screen.queryByRole('toolbar', { name: 'Zoom' })).toBeNull();
+  });
+});

package/src/lab/LabZoom.tsx

@@ -0,0 +1,170 @@
+import {
+  type Action,
+  ActionDisabledReason,
+  ActionsProvider,
+  type ActionsRegistry,
+  ActiveToolContextProvider,
+  DepRegistryProvider,
+  makeViewportZoomAction,
+  type Tool,
+  useActionsRegistry,
+  useDepSource,
+  useGestureDispatcher,
+  type ViewApi,
+} from '@weasel-js/core';
+import { ZoomInIcon, ZoomOutIcon } from '@weasel-js/ui';
+import { useContext, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { useStore } from 'zustand/react';
+import type { CameraView } from '../canvas/CameraInput';
+import { CameraRegistryContext } from '../canvas/cameraRegistry';
+import { atScale, viewMiddle } from '../canvas/cameraZoom';
+import { formatShortcut } from '../passthrough/weasel-ui';
+import { Toolbar } from '../primitives/Toolbar';
+import { LabStoreContext } from '../state/context';
+import { as2DView } from '../state/view';
+import { useLabContext } from './LabContext';
+
+const ZOOM_ID = 'viewport.zoom';
+const NO_TOOLS: ReadonlyMap<string, Tool> = new Map();
+const CHANNELS = { contextMenu: false, ingest: false } as const;
+const NO_ELEMENT = { current: null };
+
+type ZoomKind = 'in' | 'out' | 'reset';
+
+interface KeyBinding {
+  spec: { kind: string; key?: string; mods?: { mod?: boolean; shift?: boolean | 'optional' } };
+  opts?: { params?: { kind?: string } };
+}
+
+// Core's zoom with only its keys: the wheel and pinch belong to each trial's
+// own dispatcher. The clamp is left to the camera, which knows its range.
+const BASE = makeViewportZoomAction({ min: 1e-9, max: Number.POSITIVE_INFINITY });
+const KEY_BINDINGS = (BASE.defaultBinding as KeyBinding[]).filter((b) => b.spec.kind === 'key');
+
+function shortcutFor(kind: ZoomKind): string | undefined {
+  const spec = KEY_BINDINGS.find((b) => b.opts?.params?.kind === kind)?.spec;
+  return spec?.key ? formatShortcut({ key: spec.key, mod: spec.mods?.mod }) : undefined;
+}
+
+/** The focused trial's camera, with the zoom's reset meaning actual size about
+ *  the middle of the view. */
+function forZoom(camera: CameraView): ViewApi {
+  return {
+    get: camera.get,
+    set: camera.set,
+    hostSize: camera.hostSize,
+    recenter: () => atScale(camera.get(), 1, viewMiddle(camera)),
+  };
+}
+
+const percent = new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 0 });
+
+/**
+ * Zoom out, the zoom as a percentage, and zoom in, for whichever trial has the
+ * focus. The percentage resets to actual size. They route through core's
+ * `viewport.zoom` action, on a dispatcher of their own that listens for its
+ * keys — Mod+=, Mod+- and Mod+0 — so the buttons and the keys are one path.
+ * Over a trial with no camera the group stays, disabled, so the header does not
+ * reflow as the focus moves.
+ */
+export function LabZoom() {
+  return (
+    <DepRegistryProvider>
+      <ActionsProvider>
+        <ActiveToolContextProvider>
+          <LabZoomControls />
+        </ActiveToolContextProvider>
+      </ActionsProvider>
+    </DepRegistryProvider>
+  );
+}
+
+function LabZoomControls() {
+  const registry = useActionsRegistry() as ActionsRegistry;
+  const { focusedTrialId } = useLabContext();
+  const cameras = useContext(CameraRegistryContext);
+  const storeCtx = useContext(LabStoreContext);
+  if (!storeCtx) throw new Error('[labkit] <LabZoom> requires <LabStoreProvider>');
+
+  const camera = useSyncExternalStore(cameras?.subscribe ?? noSubscribe, () =>
+    cameras && focusedTrialId ? cameras.get(focusedTrialId) : null,
+  );
+  const zoom = useStore(storeCtx.store, (s) => {
+    const record = s.trials.find((t) => t.id === focusedTrialId);
+    return as2DView(record?.view)?.zoom ?? null;
+  });
+
+  const live = zoom !== null && camera !== null;
+  const view = useMemo(() => (camera ? forZoom(camera) : null), [camera]);
+  const viewRef = useRef(view);
+  viewRef.current = live ? view : null;
+
+  useDepSource('view', () => viewRef.current as ViewApi);
+
+  useEffect(() => {
+    const action: Action = {
+      ...BASE,
+      defaultBinding: KEY_BINDINGS as Action['defaultBinding'],
+      enabled: () => (viewRef.current ? true : ActionDisabledReason.NotApplicable),
+    };
+    return registry.register(action);
+  }, [registry]);
+
+  // First, so a story's own zoom keys do not also fire over a trial with a
+  // camera; over one without, the action is disabled and the keys pass on.
+  useGestureDispatcher({
+    canvasRef: NO_ELEMENT,
+    actions: registry,
+    entriesById: NO_TOOLS,
+    channels: CHANNELS,
+    keyboard: 'first',
+  });
+
+  const range = camera?.zoomRange();
+  // A step that lands within rounding of a limit has reached it.
+  const canIn = zoom !== null && range !== undefined && zoom < range.max * (1 - 1e-9);
+  const canOut = zoom !== null && range !== undefined && zoom > range.min * (1 + 1e-9);
+  const run = (kind: ZoomKind) => () => {
+    registry.trigger(ZOOM_ID, { kind });
+  };
+  const hint = (label: string, kind: ZoomKind): string => {
+    const keys = shortcutFor(kind);
+    return keys ? `${label} (${keys})` : label;
+  };
+  const shown = live && zoom !== null ? percent.format(zoom) : null;
+
+  return (
+    <Toolbar aria-label="Zoom">
+      <Toolbar.Group aria-label="Zoom">
+        <Toolbar.Button
+          iconOnly
+          aria-label="Zoom out"
+          title={hint('Zoom out', 'out')}
+          disabled={!canOut}
+          onClick={run('out')}
+        >
+          <ZoomOutIcon size={16} />
+        </Toolbar.Button>
+        <Toolbar.Button
+          aria-label={shown ? `Zoom ${shown} — reset to actual size` : 'Zoom unavailable'}
+          title={live ? hint('Actual size', 'reset') : 'This trial has no camera'}
+          disabled={!live}
+          onClick={run('reset')}
+        >
+          <span className="lk-lab-zoom__readout">{shown ?? '–'}</span>
+        </Toolbar.Button>
+        <Toolbar.Button
+          iconOnly
+          aria-label="Zoom in"
+          title={hint('Zoom in', 'in')}
+          disabled={!canIn}
+          onClick={run('in')}
+        >
+          <ZoomInIcon size={16} />
+        </Toolbar.Button>
+      </Toolbar.Group>
+    </Toolbar>
+  );
+}
+
+const noSubscribe = (): (() => void) => () => {};

package/src/lab/index.ts

@@ -11,5 +11,6 @@ export type { LabShellProps } from './LabShell';
 export { LabShell } from './LabShell';
 export type { LabPage, LabSwitcherProps } from './LabSwitcher';
 export { currentPage, LabSwitcher } from './LabSwitcher';
+export { LabZoom } from './LabZoom';
 export type { PanelDescriptor, TrialLayout, WorkspaceProps } from './Workspace';
 export { Workspace } from './Workspace';

package/src/loupe/LoupeGestures.tsx

@@ -50,7 +50,7 @@ function LoupeDispatch({
   useGestureDispatcher({
     canvasRef: hostRef,
     actions: registry,
-    toolsById: NO_TOOLS,
+    entriesById: NO_TOOLS,
     channels: CHANNELS,
     enabled: ownDispatcher,
   });

package/src/overview/TrialOverview.tsx

@@ -163,11 +163,13 @@ function Overview({
 }: TrialOverviewProps & { camera: CameraContextValue }) {
   const size = useMemo(() => ({ width, height }), [width, height]);
   const content = bounds ? toLocalRect(bounds, camera.frame) : camera.content;
-  const contentKey = content ? `${content.x},${content.y},${content.width},${content.height}` : '';
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `content` is rebuilt every render; its numbers, in `contentKey`, are what the fit depends on.
+  // `content` is rebuilt every render, so the fit keys on its numbers.
+  const framed = content !== null && content !== undefined;
+  const { x = 0, y = 0, width: w = 0, height: h = 0 } = content ?? {};
   const fit = useMemo(
-    () => (content ? fitRect(content, size) : { x: 0, y: 0, scale: { x: 1, y: 1 } }),
-    [contentKey, size],
+    () =>
+      framed ? fitRect({ x, y, width: w, height: h }, size) : { x: 0, y: 0, scale: { x: 1, y: 1 } },
+    [framed, x, y, w, h, size],
   );
   const boxRef = useRef<HTMLDivElement | null>(null);
 
@@ -341,7 +343,7 @@ function OverviewDispatch({
     canvasRef: boxRef,
     // Always present: `OverviewInput` mounts the provider directly above.
     actions: registry as NonNullable<typeof registry>,
-    toolsById: TOOLS_BY_ID,
+    entriesById: TOOLS_BY_ID,
     clientToWorld: clientToLocal,
     keyboard: false,
     channels: CHANNELS,

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

@@ -20,6 +20,7 @@ import {
   paintGradientTrack,
   RadioGroup,
   RangeSlider,
+  sampleByInterpolation,
   Select,
   Sidebar,
   Slider,
@@ -38,6 +39,7 @@ describe('weasel-ui passthrough', () => {
     expect(typeof useReorderDragList).toBe('function');
     expect(typeof paintGradientTrack).toBe('function');
     expect(typeof oklchToHex).toBe('function');
+    expect(typeof sampleByInterpolation).toBe('function');
     expect(typeof chromaAt).toBe('function');
   });