@weasel-js/labkit 1.6.0 → 1.7.0

package/src/theme/base.less

@@ -1,6 +1,10 @@
 // The Oswald and Inter faces come from @weasel-js/theme/faces.css, imported at
 // the top of styles.less.
 
+// weasel-ui's native range skin, read for `:extend` below and emitted only
+// through it.
+@import (reference, less) '../../../ui/src/components/range.module.css';
+
 // Resets and global element defaults.
 .lk-root {
   font-family: var(--wzl-font-ui);
@@ -21,7 +25,10 @@
 // Deliberate overrides of a weasel-ui component go the other way — see the
 // `.lk-root` prefix convention below.
 :where(.lk-root) {
-  :where(button) {
+  // Only a button with no class or a labkit one. Specificity cannot keep this
+  // off a weasel-ui button: whatever its module leaves unset — a height, a
+  // backdrop blur — the default fills in.
+  :where(button:not([class]), button[class^='lk-'], button[class*=' lk-']) {
     font: inherit;
     color: inherit;
     background: var(--wzl-surface-raised);
@@ -33,63 +40,32 @@
     backdrop-filter: blur(var(--wzl-glass-blur));
     -webkit-backdrop-filter: blur(var(--wzl-glass-blur));
 
-    &:hover {
+    &:where(:hover) {
       border-color: var(--wzl-accent);
       color: var(--wzl-accent-fg);
     }
 
-    &:focus-visible {
+    &:where(:focus-visible) {
       outline: 2px solid var(--wzl-focus-ring);
       outline-offset: 1px;
     }
 
-    &:disabled {
+    &:where(:disabled) {
       color: var(--wzl-fg-subtle);
       cursor: not-allowed;
     }
   }
 
-  // Mirrors packages/ui/src/components/range.module.css so a consumer's bare
-  // range matches the kit's. A weasel-ui component's own module class outranks
-  // this, which is what keeps InlineRange's gradient track intact.
-  :where(input[type="range"]) {
-    appearance: none;
-    -webkit-appearance: none;
-    height: 12px;
-    background: transparent;
-    cursor: pointer;
-
-    &::-webkit-slider-runnable-track {
-      height: var(--wzl-slider-track-h);
-      border-radius: var(--wzl-radius-sm);
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix), transparent);
-    }
-
-    &::-moz-range-track {
-      height: var(--wzl-slider-track-h);
-      border-radius: var(--wzl-radius-sm);
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix), transparent);
-    }
-
-    &::-webkit-slider-thumb {
-      appearance: none;
-      -webkit-appearance: none;
-      width: var(--wzl-slider-thumb-size);
-      height: var(--wzl-slider-thumb-size);
-      border: none;
-      border-radius: 50%;
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);
-      margin-top: calc((var(--wzl-slider-track-h) - var(--wzl-slider-thumb-size)) / 2);
-    }
-
-    &::-moz-range-thumb {
-      width: var(--wzl-slider-thumb-size);
-      height: var(--wzl-slider-thumb-size);
-      border: none;
-      border-radius: 50%;
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);
-    }
+  // The browser sets these in its own `monospace`, which no font token reaches.
+  :where(code, kbd, samp, pre) {
+    font-family: var(--wzl-font-mono);
   }
+
+  // A consumer's bare range wears weasel-ui's range skin, extended from its one
+  // definition rather than copied. The skin keeps its pseudo-classes inside
+  // :where(), so nothing this emits outranks a single class and a weasel-ui
+  // component's own module class still wins.
+  :where(input[type="range"]):extend(.range all) {}
 }
 
 // The `.lk-root` prefix convention: a labkit class handed to a weasel-ui
@@ -151,9 +127,7 @@
 }
 
 // Headline / display text uses Oswald light at tighter line-height.
-.lk-lab h1,
-.lk-lab h2,
-.lk-lab h3 {
+:where(.lk-lab) :where(h1, h2, h3) {
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
   letter-spacing: 0.01em;

package/src/theme/interstellar.test.ts

@@ -18,7 +18,7 @@ describe('interstellarTheme', () => {
 
     // Values carried over verbatim from the retired Less.
     expect(dark['--wzl-surface']).toBe('#0a0a14');
-    expect(dark['--wzl-accent']).toBe('#b08adb');
+    expect(dark['--wzl-accent']).toBe('#4f46e5');
     // Light mode is weasel's own: interstellar restyles the dark only.
     const weasel = resolveTheme(weaselTheme, { mode: 'light' });
     expect(light['--wzl-surface']).toBe(weasel['--wzl-surface']);

package/src/theme/interstellar.theme.json

@@ -81,21 +81,28 @@
     "accent": {
       "by": "mode",
       "dark": {
-        "value": "#b08adb",
+        "value": "#4f46e5",
         "type": "color"
       }
     },
     "accent-hover": {
       "by": "mode",
       "dark": {
-        "value": "#c6a3ee",
+        "value": "#6d5dfc",
+        "type": "color"
+      }
+    },
+    "accent-strong": {
+      "by": "mode",
+      "dark": {
+        "value": "#7474fe",
         "type": "color"
       }
     },
     "focus-ring": {
       "by": "mode",
       "dark": {
-        "value": "rgba(176, 138, 219, 0.45)",
+        "value": "rgba(116, 116, 254, 0.5)",
         "type": "color"
       }
     },

package/src/tools/labTool.ts

@@ -1,11 +1,15 @@
+import { labAnnotationTools } from '../annotations/toolMap';
 import type { InstrumentList } from '../instrument/types';
 
 /**
  * The tool the lab's slot holds, once its default is applied: a lab with any
  * annotating instrument starts in `pointer`, so a first click reaches the
- * instrument rather than the marks over it.
+ * instrument rather than the marks over it, or in the first annotation tool
+ * its rail carries when `pointer` is not among them.
  */
 export function resolveLabTool(slot: string | null, instruments: InstrumentList): string | null {
   if (slot !== null) return slot;
-  return instruments.some((i) => i.annotations != null) ? 'pointer' : null;
+  const tools = labAnnotationTools(instruments);
+  if (tools.some((t) => t.id === 'pointer')) return 'pointer';
+  return tools[0]?.id ?? null;
 }

package/src/trial/Trial.annotations.test.tsx

@@ -69,6 +69,22 @@ describe('an instrument that declares annotations', () => {
     }
   });
 
+  it('gets only the tools it names', () => {
+    const narrow = defineInstrument<Record<string, never>, Record<string, never>>({
+      ...annotating,
+      name: 'Narrow',
+      annotations: {
+        targets: () => [{ id: 'pane', ref: { current: null }, content: { w: 200, h: 100 } }],
+        tools: ['pointer', 'select'],
+      },
+    });
+    render(<Lab instruments={[narrow]} defaultInstrument="Narrow" />);
+    expect(screen.getByRole('button', { name: 'Interact' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Select' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Freehand' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Rectangle' })).toBeNull();
+  });
+
   it('puts the store in reach of its own render', () => {
     render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByTestId('pane').dataset.marks).toBe('0');

package/src/trial/Trial.less

@@ -109,19 +109,6 @@
   }
 }
 
-.lk-toolbar__zoom-label {
-  font-size: var(--wzl-font-size-sm);
-  color: var(--wzl-fg-muted);
-  padding: 0 var(--wzl-space-sm);
-}
-
-.lk-sidebar__placeholder {
-  padding: var(--wzl-space-sm);
-  color: var(--wzl-fg-muted);
-  font-size: var(--wzl-font-size-sm);
-}
-
-
 .lk-trial__titlebar {
   display: flex;
   align-items: center;

package/src/trial/Trial.loupe.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -126,3 +126,75 @@ describe('the loupe capability', () => {
     expect(lens(container)).toBeNull();
   });
 });
+
+describe('the loupe and the trial camera share one dispatcher', () => {
+  const frame = () => new Promise<void>((r) => requestAnimationFrame(() => r()));
+
+  function mountDrawn() {
+    const zooms: number[] = [];
+    const drawn = defineInstrument<Record<string, never>, Record<string, never>>({
+      name: 'Zoomed',
+      defaultConfig: () => ({}),
+      initialState: () => ({}),
+      render: () => null,
+      canvas: {
+        layers: [
+          {
+            id: 'main',
+            draw: (_ctx, { zoom }) => {
+              zooms.push(zoom);
+            },
+          },
+        ],
+      },
+      loupe: true,
+    });
+    const r = render(<Lab instruments={[drawn]} defaultInstrument="Zoomed" />);
+    const stack = r.container.querySelector('.lk-canvas-stack');
+    if (!stack) throw new Error('no canvas stack');
+    return { ...r, stack, zooms };
+  }
+
+  const wheel = (el: Element) => {
+    const e = new WheelEvent('wheel', {
+      deltaY: -300,
+      clientX: 50,
+      clientY: 50,
+      bubbles: true,
+      cancelable: true,
+    });
+    el.dispatchEvent(e);
+    return e;
+  };
+
+  it('zooms the camera while the lens is down', async () => {
+    const h = mountDrawn();
+    await act(async () => {
+      await frame();
+    });
+    await act(async () => {
+      wheel(h.stack);
+      await frame();
+    });
+    expect(h.zooms.at(-1)).toBeGreaterThan(1);
+  });
+
+  it('gives the wheel to the lens while it is up, and leaves the camera alone', async () => {
+    const user = userEvent.setup();
+    const h = mountDrawn();
+    await user.click(screen.getByRole('button', { name: 'Loupe' }));
+    pointAt(h.stack, 60, 40);
+    expect(lens(h.container)).not.toBeNull();
+    await act(async () => {
+      await frame();
+    });
+    const before = h.zooms.at(-1);
+    let e!: WheelEvent;
+    await act(async () => {
+      e = wheel(h.stack);
+      await frame();
+    });
+    expect(e.defaultPrevented).toBe(true);
+    expect(h.zooms.at(-1)).toBe(before);
+  });
+});

package/src/trial/Trial.stories.tsx

@@ -1,3 +1,4 @@
+import { createPointerStore } from '@weasel-js/core';
 import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { Instrument } from '../instrument/types';
 import { LabContext, type LabContextValue } from '../lab/LabContext';
@@ -63,6 +64,7 @@ function Harness() {
                 setZoom: () => {},
                 activeToolId: null,
                 visibleLayers: [],
+                pointer: createPointerStore(),
               },
               emit: () => {},
             })}

package/src/trial/Trial.tsx

@@ -1,3 +1,4 @@
+import { createPointerStore, PointerContextProvider, WeaselProvider } from '@weasel-js/core';
 import { type ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand/react';
 import { AnnotationsContext } from '../annotations/AnnotationsContext';
@@ -5,8 +6,10 @@ import { AnnotationTargets } from '../annotations/AnnotationTargets';
 import { AnnotationPreloadContext } from '../annotations/preload';
 import { annotationsFromJSON } from '../annotations/store';
 import type { AnnotationStorage, AnnotationTargetInfo } from '../annotations/types';
+import type { CameraView } from '../canvas/CameraInput';
 import { CameraWheelContext, type CameraWheelSlot } from '../canvas/CameraWheelContext';
 import { CanvasStack } from '../canvas/CanvasStack';
+import { CameraPublishContext, CameraRegistryContext } from '../canvas/cameraRegistry';
 import { fitStage, Stage } from '../canvas/Stage';
 import type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';
 import { applyCamera, type ViewportSize } from '../canvas/worldSpec';
@@ -134,6 +137,13 @@ function TrialRuntime({
   suppress,
 }: TrialRuntimeProps) {
   const wheelSlot = useRef<CameraWheelSlot['current']>(null);
+  const cameras = useContext(CameraRegistryContext);
+  const trialId = record.id;
+  const publishCamera = useMemo(
+    () => (cameras ? (camera: CameraView) => cameras.register(trialId, camera) : null),
+    [cameras, trialId],
+  );
+  const [pointer] = useState(createPointerStore);
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
   const loupeHostRef = useRef<HTMLDivElement | null>(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
@@ -328,6 +338,7 @@ function TrialRuntime({
       },
       activeToolId: resolvedToolId,
       visibleLayers,
+      pointer,
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -589,6 +600,17 @@ function TrialRuntime({
     />
   ) : null;
 
+  // The trial's root registries, isolated from the trial beside it. Each
+  // camera inside mounts an input scope under them; chrome here reaches the
+  // one last used. The pointer store is the trial's, shared by all of them.
+  const scopedBody = (
+    <WeaselProvider isolate>
+      <PointerContextProvider store={pointer}>
+        <CameraPublishContext.Provider value={publishCamera}>{body}</CameraPublishContext.Provider>
+      </PointerContextProvider>
+    </WeaselProvider>
+  );
+
   return (
     <TrialIdProvider trialId={record.id}>
       <AnnotationsContext.Provider value={annotationsCap ? annotations : null}>
@@ -607,7 +629,7 @@ function TrialRuntime({
             activeToolId={resolvedToolId}
             setActiveTool={setActiveTool}
           >
-            {body}
+            {scopedBody}
             {annotationOverlays}
           </TrialChrome>
         </CameraWheelContext.Provider>

package/src/trial/TrialChrome.tsx

@@ -1,5 +1,13 @@
-import { type KeyboardEvent, type ReactNode, useContext, useMemo } from 'react';
+import {
+  type KeyboardEvent,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
 import { useStore } from 'zustand/react';
+import { CameraRegistryContext } from '../canvas/cameraRegistry';
+import { zoomCameraTo } from '../canvas/cameraZoom';
 import { builtinContributions } from '../chrome/builtins';
 import { mergeContributions, suppressContributions } from '../chrome/merge';
 import { PaletteRegion } from '../chrome/regions/PaletteRegion';
@@ -68,6 +76,7 @@ const NO_OP = (): void => {};
 /** One frozen empty map, so a trial that has folded nothing keeps a stable
  *  context identity across renders. */
 const NO_SECTIONS: Readonly<Record<string, boolean>> = Object.freeze({});
+const noSubscribe = (): (() => void) => NO_OP;
 
 /** The frame around a running instrument. Builds one chrome context, assembles
  *  the contributions the instrument, the runtime and the lab declare, and hands
@@ -123,10 +132,18 @@ export function TrialChrome({
   const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
 
+  // The trial's own camera, where it has one: zoom goes through it, about the
+  // middle of the view and inside the instrument's range, as the lab's does.
+  const cameras = useContext(CameraRegistryContext);
+  const camera = useSyncExternalStore(
+    cameras?.subscribe ?? noSubscribe,
+    () => cameras?.get(trialId) ?? null,
+  );
+
   const ctx = useMemo<TrialChromeContext>(() => {
     const setZoom = (z: number): void => {
-      if (!view2d) return;
-      updateTrialView(trialId, withZoom(view2d, z));
+      if (camera) zoomCameraTo(camera, z);
+      else if (view2d) updateTrialView(trialId, withZoom(view2d, z));
     };
     return {
       trialId,
@@ -203,6 +220,7 @@ export function TrialChrome({
     setTrialTitle,
     setTrialSectionCollapsed,
     collapsedSections,
+    camera,
   ]);
 
   const contributions = useMemo(

package/src/trial/trialOps.test.ts

@@ -132,7 +132,7 @@ describe('addTrial', () => {
     const out = addTrial([], instruments, 'Schemed', { config: { gap: auto } });
     expect(out[0]?.auto).toContain('gap');
     expect(out[0]?.autoSeed).toEqual(['gap']);
-    expect((out[0]?.config as { gap: number }).gap).toBe(12);
+    expect((out[0]?.config as { gap: number } | undefined)?.gap).toBe(12);
     expect(out[0]?.configSeed).not.toHaveProperty('gap');
   });
 
@@ -141,13 +141,13 @@ describe('addTrial', () => {
     const out = addTrial([], instruments, 'Counter', {
       config: { at: when } as unknown as Partial<CounterConfig>,
     });
-    expect((out[0]?.config as { at: unknown }).at).toBe(when);
+    expect((out[0]?.config as { at: unknown } | undefined)?.at).toBe(when);
   });
 
   it('honors auto at a nested seed path', () => {
     const out = addTrial([], instruments, 'Schemed', { config: { grid: { size: auto } } });
     expect(out[0]?.auto).toContain('grid.size');
-    expect((out[0]?.config as { grid: { size: number } }).grid.size).toBe(4);
+    expect((out[0]?.config as { grid: { size: number } } | undefined)?.grid.size).toBe(4);
   });
 
   it('leaves a trial with no auto field when nothing is unpinned', () => {
@@ -222,7 +222,7 @@ describe('resetTrial', () => {
     const arr = addTrial([], instruments, 'Counter');
     head(arr).config = { step: 99 } as CounterConfig;
     resetTrial(arr, head(arr).id, instruments);
-    expect((arr[0]?.config as CounterConfig).step).toBe(99);
+    expect((arr[0]?.config as CounterConfig | undefined)?.step).toBe(99);
   });
 
   it('restores the seed the trial was opened with, not the bare defaults', () => {

package/dist/_dts/PrefsRow.d-DFpPIeIC.d.ts

@@ -1,39 +0,0 @@
-import { Stance } from '@weasel-js/theme';
-import { ReactNode } from 'react';
-import { ToolPrefLeaf } from '@weasel-js/core';
-
-/**
- * What a surface holds, and which of its peers it is. Every surface that takes
- * these takes both, and the theme decides how each looks.
- */
-interface StanceProps {
-    /** The class of content the surface holds. Omitted, it draws as it always has. */
-    stance?: Stance;
-    /**
-     * Which of its peers this is: an index into the theme's tone list, wrapping,
-     * or a color given directly. Independent of `stance`, and allowed without one.
-     */
-    tone?: number | string;
-}
-
-/** What a {@link PrefRenderer} is given for the leaf it is rendering. */
-interface PrefRenderContext {
-    /** Dotted path of the leaf within the schema root. */
-    path: string;
-    /** The schema node. App renderers narrow this to their own kind shape. */
-    pref: ToolPrefLeaf;
-    /** Current value — `values` at `path`, falling back to `pref.default`. */
-    value: unknown;
-    setValue: (value: unknown) => void;
-    /** Whether this leaf is currently auto — not pinned, computed by the owner. */
-    auto: boolean;
-    /** Toggle this leaf's auto state. */
-    setAuto: (next: boolean) => void;
-}
-/**
- * Renders the control cell for one preference leaf. Returning `null`
- * collapses the row.
- */
-type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;
-
-export type { PrefRenderer as P, StanceProps as S, PrefRenderContext as a };

package/dist/_dts/inDialog-D5ZKGjiD.d.ts

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { C as ControlRenderer } from './types-B7y8hX1D.js';
-
-/** Options for {@link inDialog}. */
-interface InDialogOptions {
-    /** What the row's button shows of the value. Defaults to a list joined with
-     *  commas, or the value itself. */
-    summary?: (value: unknown) => ReactNode;
-    /** The dialog's heading. Defaults to the row's label. */
-    title?: ReactNode;
-}
-/** The one-line summary a dialog row shows when it is given none. */
-declare function summarizeValue(value: unknown): string;
-/**
- * Moves a control into a modal: the row becomes a button showing a summary of
- * the value, and the button opens a dialog whose body is `body`, handed the
- * same context a row renderer gets. For a leaf whose editor will never fit a
- * sidebar row.
- */
-declare function inDialog(body: ControlRenderer, opts?: InDialogOptions): ControlRenderer;
-
-export { inDialog as i, summarizeValue as s };
-export type { InDialogOptions as I };