@weasel-js/labkit 1.4.0-pre.0 → 1.4.0

package/src/passthrough/weasel-ui.ts

@@ -69,6 +69,10 @@ export {
   formatShortcutParts,
   type GradientTrackOpts,
   type GridSettings,
+  ICON_PATHS,
+  Icon,
+  type IconName,
+  type IconProps,
   Input,
   type InputProps,
   type InterpolationMode,

package/src/primitives/ZoomControl.tsx

@@ -45,6 +45,7 @@ export function ZoomControl({
       <Slider
         className="lk-zoom__slider"
         ariaLabel="Zoom"
+        density="slim"
         min={toTrack(min)}
         max={toTrack(max)}
         // Detents at the octaves plus actual size, so 25/50/100/200/400% are
@@ -65,6 +66,7 @@ export function ZoomControl({
         maxValue={max}
         step={0.01}
         hideSteppers
+        ghost
         formatOptions={{ style: 'percent', maximumFractionDigits: 0 }}
         onChange={(next) => {
           if (!Number.isFinite(next)) return;

package/src/state/store.ts

@@ -34,6 +34,7 @@ export interface LabStoreActions {
   updateTrialState: <TS>(id: string, next: TS | ((prev: TS) => TS)) => void;
   updateTrialConfig: <TC>(id: string, key: keyof TC, value: TC[keyof TC]) => void;
   updateTrialView: (id: string, view: unknown) => void;
+  updateTrialSidebarWidth: (id: string, width: number) => void;
   updateTrialAnnotations: (id: string, doc: unknown) => void;
   updateTrialUndoStack: (
     id: string,
@@ -136,6 +137,15 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       scheduleFlush();
     },
 
+    updateTrialSidebarWidth: (id, width) => {
+      set((s) => ({
+        trials: s.trials.map((w) =>
+          w.id === id && w.sidebarWidth !== width ? { ...w, sidebarWidth: width } : w,
+        ),
+      }));
+      scheduleFlush();
+    },
+
     updateTrialAnnotations: (id, doc) => {
       set((s) => ({
         trials: s.trials.map((w) =>

package/src/state/types.ts

@@ -18,6 +18,9 @@ export interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
   view: TV;
   /** This trial's own tool slot. Undefined means it reads the lab's. */
   activeToolId?: string | null;
+  /** The extent the trial's sidebar was last dragged to, in pixels. Undefined
+   *  until someone moves the seam. */
+  sidebarWidth?: number;
   /** The marks on this trial's annotation targets, as `AnnotationsApi.toJSON`
    *  wrote them. Opaque here, and absent for a trial whose instrument declares
    *  no `annotations` — or declares its own `storage`. Not in `state`, which

package/src/surface/AGENTS.md

@@ -17,7 +17,7 @@ than a few 3D tiles have to share one surface.
 | `deviceRect.ts` | `toDeviceRect` — y-flip and device-grid snapping for a GL viewport |
 | `useTiledSurface.ts` | ResizeObserver, dirty set, rAF coalescing, DPR |
 | `SurfaceContext.ts` | Carries the handle down |
-| `useSurfaceTile.ts` | `useSurfaceTile(id)`, `useSurface()`, `useSurfaceOptional()` |
+| `useSurfaceTile.ts` | `useSurfaceTile(id)`, `useTileId(id)`, `useSurface()`, `useSurfaceOptional()` |
 
 ## Shape of a consumer
 
@@ -40,6 +40,16 @@ const surface = useTiledSurface({
 draw has to know where it is drawing relative to a surface that may have resized
 under it.
 
+## A tile id is scoped to its trial
+
+The tile namespace is one lab-wide map, but an instrument names its regions once
+and every trial of it declares those same names. `useSurfaceTile` registers under
+`useTileId(id)` — `<trial>/<id>` inside a trial — and a frame's `rects` are keyed
+the same way, so a host looking a tile up calls `useTileId` for the key. Unscoped,
+the second trial to mount takes the first one's rect *and* its painter, and the
+first is never told it moved again: it keeps the box it was measured at while it
+was the only trial open.
+
 ## The unit is a rect, not a trial
 
 `useSurfaceTile(id)` attaches to whatever element the surface should draw into. A

package/src/surface/index.ts

@@ -2,7 +2,13 @@ export { composeRects, rectsEqual } from './composeRects';
 export { toDeviceRect } from './deviceRect';
 export type { Box, Rect } from './rect';
 export { SurfaceCanvasContext, SurfaceContext } from './SurfaceContext';
-export { useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile } from './useSurfaceTile';
+export {
+  useSurface,
+  useSurfaceCanvas,
+  useSurfaceOptional,
+  useSurfaceTile,
+  useTileId,
+} from './useSurfaceTile';
 export type {
   SurfaceFrame,
   SurfaceHandle,

package/src/surface/useSurfaceTile.ts

@@ -1,4 +1,5 @@
 import { useCallback, useContext } from 'react';
+import { TrialIdContext } from '../state/context';
 import { SurfaceCanvasContext, SurfaceContext } from './SurfaceContext';
 import type { SurfaceHandle } from './useTiledSurface';
 
@@ -20,19 +21,36 @@ export function useSurface(): SurfaceHandle {
   return surface;
 }
 
+/**
+ * The key `id` is registered under, and so the key it comes back on in a
+ * frame's `rects`: `<trial>/<id>` inside a trial, and `id` alone outside one.
+ *
+ * A surface's tile namespace is flat and shared by the whole lab, but an
+ * instrument names its regions once and every trial of it declares those same
+ * names. Unscoped, the second trial to mount takes the first one's rect and its
+ * painter, and the first is never told it moved again.
+ */
+export function useTileId(id: string): string {
+  const trial = useContext(TrialIdContext);
+  return trial ? `${trial}/${id}` : id;
+}
+
 /**
  * A ref callback that publishes this element's rect to the surface under `id`.
  *
  * Attach it to whichever element the surface should draw into — that is not
  * necessarily the trial's own element, since a trial may hold a drawn pane beside
  * an undrawn one, or none at all.
+ *
+ * The frame reports it under `useTileId(id)`, not under `id`.
  */
 export function useSurfaceTile(id: string): (el: HTMLElement | null) => void {
   const surface = useSurfaceOptional();
+  const tileId = useTileId(id);
   return useCallback(
     (el: HTMLElement | null) => {
-      surface?.registerTile(id, el);
+      surface?.registerTile(tileId, el);
     },
-    [surface, id],
+    [surface, tileId],
   );
 }

package/src/surface/useTiledSurface.ts

@@ -5,7 +5,10 @@ import type { Box, Rect } from './rect';
 
 /** What a surface owner is handed once per animation frame. `rects` carries every
  *  tile, not only the dirty ones: a scissored draw has to know where it is drawing
- *  relative to a surface that may have resized under it. */
+ *  relative to a surface that may have resized under it.
+ *
+ *  Its keys are what `useTileId` returns — `<trial>/<id>` for a tile registered
+ *  inside a trial — not the bare id the tile was named with. */
 export interface SurfaceFrame {
   dirty: ReadonlySet<string>;
   rects: ReadonlyMap<string, Rect>;

package/src/theme/Interstellar.stories.tsx

@@ -91,11 +91,12 @@ function SwatchGrid({ tokens, title }: { tokens: readonly Swatch[]; title: strin
 function NebulaPreview() {
   return (
     <div>
-      <h3 className="lk-theme-doc__heading">Cosmic backdrop (`--wzl-backdrop`)</h3>
+      <h3 className="lk-theme-doc__heading">Cosmic backdrop</h3>
       <div className="lk-theme-doc__nebula" style={{ background: 'var(--wzl-backdrop)' }} />
       <p className="lk-theme-doc__note">
-        Default: four radial gradients (purple, pink, blue, then a dark void base). Override per-Lab
-        by passing <code>nebula={'{[colors]}'}</code> to the <code>&lt;Lab&gt;</code> component.
+        <code>--wzl-backdrop</code> — four radial gradients (purple, pink, blue) over a dark void
+        base. Override per-Lab by passing <code>nebula={'{[colors]}'}</code> to the{' '}
+        <code>&lt;Lab&gt;</code> component.
       </p>
     </div>
   );

package/src/theme/base.less

@@ -66,8 +66,46 @@
     }
   }
 
+  // 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"]) {
-    accent-color: var(--wzl-accent);
+    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-tint), 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-tint), 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-tint), 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-tint), transparent);
+    }
   }
 }
 

package/src/trial/Trial.less

@@ -20,13 +20,19 @@
     overflow: hidden;
   }
 
+  // The sidebar and the content well are a windease strip, so their extents
+  // come from the strategy and this pane only has to fill the rect it was
+  // given. `.windease-zone` supplies the containing block.
+  &__panes {
+    flex: 1;
+    min-width: 0;
+  }
+
   &__sidebar {
-    flex-shrink: 0;
-    // Stated, not content-derived: an auto-width sidebar is as wide as its
-    // widest label, so one verbose config key sets the width of the lab.
-    width: var(--lk-trial-sidebar-w, 20rem);
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: 100%;
     min-height: 0;
     // Sections floor at their content height, so without this the last ones
     // are cut rather than reachable.
@@ -40,7 +46,8 @@
   &__content {
     // The viewport region anchors against this well.
     position: relative;
-    flex: 1;
+    width: 100%;
+    height: 100%;
     min-width: 0;
     min-height: 0;
     display: flex;
@@ -89,6 +96,21 @@
     flex-shrink: 0;
   }
 
+  // The strip's own seam. windease positions and sizes it; this is only what
+  // it looks like.
+  &__panes [data-affordance-kind='resize-x'] {
+    background: var(--wzl-border);
+  }
+
+  &__panes .windease-affordance-hit:hover [data-affordance-kind='resize-x'],
+  &__panes .windease-affordance-hit:focus-visible [data-affordance-kind='resize-x'] {
+    background: var(--wzl-accent);
+  }
+
+  &__panes .windease-affordance-hit:focus-visible {
+    outline: none;
+  }
+
   &--unknown {
     display: flex;
     align-items: center;

package/src/trial/TrialBody.test.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TrialBody } from './TrialBody';
+
+const VIEWPORT = { w: 800, h: 600 };
+
+function renderBody(props: Partial<Parameters<typeof TrialBody>[0]> = {}) {
+  return render(
+    <TrialBody viewport={VIEWPORT} sidebar={<p>sidebar body</p>} {...props}>
+      <p>instrument output</p>
+    </TrialBody>,
+  );
+}
+
+describe('TrialBody', () => {
+  it('renders both panes', () => {
+    renderBody();
+    expect(screen.getByText('sidebar body')).toBeInTheDocument();
+    expect(screen.getByText('instrument output')).toBeInTheDocument();
+  });
+
+  it('puts a labeled separator between the sidebar and the content', () => {
+    renderBody({ width: 320 });
+    const seam = screen.getByRole('separator');
+    expect(seam).toHaveAttribute('aria-orientation', 'horizontal');
+    expect(seam).toHaveAttribute('aria-valuenow', '320');
+    expect(seam).toHaveAccessibleName(/sidebar/i);
+  });
+
+  it('reports the width a drag lands on', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 380, clientY: 100 });
+    fireEvent.pointerUp(seam, { clientX: 380, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(380);
+  });
+
+  it('resizes from the keyboard', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.keyDown(seam, { key: 'ArrowRight' });
+    expect(onWidthChange).toHaveBeenLastCalledWith(328);
+  });
+
+  it('refuses to drag the sidebar past its stated bounds', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, minWidth: 200, maxWidth: 400, onWidthChange });
+    const seam = screen.getByRole('separator');
+    expect(seam).toHaveAttribute('aria-valuemin', '200');
+    expect(seam).toHaveAttribute('aria-valuemax', '400');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 900, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(400);
+  });
+
+  it('leaves the content pane a floor the seam cannot cross', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, maxWidth: 10_000, contentMinWidth: 300, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 5_000, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(VIEWPORT.w - 300);
+  });
+});

package/src/trial/TrialBody.tsx

@@ -0,0 +1,155 @@
+import { type ReactNode, useEffect, useMemo, useRef } from 'react';
+import { asNodeId, createNode, Store, stripStrategy } from 'windease';
+import { type ChromeMap, Container, Provider, StrategyRegistryProvider } from 'windease/react';
+
+const ZONE_ID = asNodeId('lk-trial-body');
+const SIDEBAR_ID = asNodeId('lk-trial-sidebar');
+const CONTENT_ID = asNodeId('lk-trial-content');
+const STRATEGIES = { strip: stripStrategy as never };
+
+/** Props for `<TrialBody>`. */
+export interface TrialBodyProps {
+  /** The sidebar region's sections. */
+  sidebar: ReactNode;
+  /** The instrument's own output. */
+  children: ReactNode;
+  /** Extra class on the content pane — `Trial` marks a canvas instrument's
+   *  well flush. */
+  contentClassName?: string;
+  /** The sidebar's current extent in pixels. Omit for an unpersisted lab: the
+   *  seam still works, its result just does not outlive the mount. */
+  width?: number;
+  /** Where the sidebar starts before anyone drags it. */
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** How little the instrument may be squeezed to. Reported as the seam's
+   *  reachable maximum, so the drag stops there rather than clamping silently. */
+  contentMinWidth?: number;
+  /** Fires through the drag, not on release: the pane is already there. */
+  onWidthChange?: (width: number) => void;
+  /**
+   * Fixed extent. Omit in an app — the strip measures its own box. Supply it
+   * where nothing measures, notably jsdom, or both panes lay out at zero.
+   */
+  viewport?: { w: number; h: number };
+}
+
+/**
+ * A trial's sidebar and content as a two-pane strip with a draggable seam.
+ *
+ * The seam is `stripStrategy`'s own resize affordance, so it arrives as a
+ * `role="separator"` carrying the reachable range, operable by pointer and by
+ * arrows / Home / End, and clamped against the content pane's floor rather
+ * than against the sidebar's alone.
+ */
+export function TrialBody({
+  sidebar,
+  children,
+  contentClassName,
+  width,
+  defaultWidth = 320,
+  minWidth = 140,
+  maxWidth = 720,
+  contentMinWidth = 160,
+  onWidthChange,
+  viewport,
+}: TrialBodyProps) {
+  // The cross-axis half of every size hint below is inert: a horizontal strip
+  // stretches its panes to the container's height and never reads `h`.
+  const storeRef = useRef<Store | null>(null);
+  if (storeRef.current === null) {
+    const store = new Store();
+    store.registerNode(
+      createNode({
+        kind: 'zone',
+        id: ZONE_ID,
+        container: { strategyId: 'strip', config: { axis: 'x', resizable: true } },
+      }),
+    );
+    store.registerNode(
+      createNode({
+        kind: 'sidebar',
+        id: SIDEBAR_ID,
+        parentId: ZONE_ID,
+        meta: { title: 'Sidebar' },
+        placement: { size: { w: width ?? defaultWidth } },
+        hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } },
+      }),
+    );
+    store.registerNode(
+      createNode({
+        kind: 'content',
+        id: CONTENT_ID,
+        parentId: ZONE_ID,
+        meta: { title: 'Content' },
+        hints: { minSize: { w: contentMinWidth, h: 0 } },
+      }),
+    );
+    store.showNode(SIDEBAR_ID);
+    store.showNode(CONTENT_ID);
+    storeRef.current = store;
+  }
+  const store = storeRef.current;
+
+  // What the store last held, so the placement event can tell a drag from the
+  // echo of our own write and a controlled `width` does not fight the seam.
+  const widthRef = useRef(width ?? defaultWidth);
+
+  useEffect(() => {
+    store.setHints(SIDEBAR_ID, {
+      minSize: { w: minWidth, h: 0 },
+      maxSize: { w: maxWidth, h: 0 },
+    });
+    store.setHints(CONTENT_ID, { minSize: { w: contentMinWidth, h: 0 } });
+  }, [store, minWidth, maxWidth, contentMinWidth]);
+
+  useEffect(() => {
+    if (width === undefined || width === widthRef.current) return;
+    widthRef.current = width;
+    store.patchPlacement(SIDEBAR_ID, { size: { w: width } });
+  }, [store, width]);
+
+  const onWidthChangeRef = useRef(onWidthChange);
+  onWidthChangeRef.current = onWidthChange;
+  useEffect(
+    () =>
+      store.events.on('node.placementChanged', () => {
+        const next = (store.getPlacement(SIDEBAR_ID)?.size as { w?: number } | undefined)?.w;
+        if (typeof next !== 'number' || next === widthRef.current) return;
+        widthRef.current = next;
+        onWidthChangeRef.current?.(next);
+      }),
+    [store],
+  );
+
+  const chrome = useMemo<ChromeMap>(
+    () => ({
+      sidebar: () => <div className="lk-trial__sidebar">{sidebar}</div>,
+      content: () => (
+        <div
+          className={
+            contentClassName ? `lk-trial__content ${contentClassName}` : 'lk-trial__content'
+          }
+        >
+          {children}
+        </div>
+      ),
+    }),
+    [sidebar, children, contentClassName],
+  );
+
+  return (
+    <Provider store={store}>
+      <StrategyRegistryProvider strategies={STRATEGIES}>
+        <Container
+          parentId={ZONE_ID}
+          chrome={chrome}
+          className="lk-trial__panes windease-zone"
+          affordances
+          viewport={viewport}
+        />
+      </StrategyRegistryProvider>
+    </Provider>
+  );
+}

package/src/trial/TrialChrome.tsx

@@ -17,6 +17,7 @@ import { JobProgress } from '../primitives/JobProgress';
 import { LabStoreContext } from '../state/context';
 import type { TrialRecord } from '../state/types';
 import { as2DView } from '../state/view';
+import { TrialBody } from './TrialBody';
 import { TrialTitleBar } from './TrialTitleBar';
 import { UndockedSections } from './UndockedSections';
 
@@ -83,6 +84,7 @@ export function TrialChrome({
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error('[labkit] TrialChrome requires <LabStoreProvider>');
   const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
+  const updateTrialSidebarWidth = useStore(storeCtx.store, (s) => s.updateTrialSidebarWidth);
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
   const undockPanelAction = useStore(storeCtx.store, (s) => s.undockPanel);
@@ -213,18 +215,24 @@ export function TrialChrome({
       </div>
       <div className="lk-trial__body">
         <PaletteRegion contributions={inRegion('palette')} ctx={ctx} />
-        <div className="lk-trial__sidebar">
-          <SidebarRegion contributions={inRegion('sidebar')} ctx={ctx} />
-          <UndockedSections
-            trialId={trialId}
-            sections={inRegion('sidebar').filter((c) => undockedIds.includes(c.id))}
-            onDock={ctx.dockPanel}
-          />
-        </div>
-        <div className={`lk-trial__content${instrument.canvas ? ' lk-trial__content--flush' : ''}`}>
+        <TrialBody
+          width={record.sidebarWidth}
+          onWidthChange={(w) => updateTrialSidebarWidth(trialId, w)}
+          contentClassName={instrument.canvas ? 'lk-trial__content--flush' : undefined}
+          sidebar={
+            <>
+              <SidebarRegion contributions={inRegion('sidebar')} ctx={ctx} />
+              <UndockedSections
+                trialId={trialId}
+                sections={inRegion('sidebar').filter((c) => undockedIds.includes(c.id))}
+                onDock={ctx.dockPanel}
+              />
+            </>
+          }
+        >
           {children}
           <ViewportRegion contributions={inRegion('viewport')} ctx={ctx} />
-        </div>
+        </TrialBody>
       </div>
       <div className="lk-trial__status">
         {job ? <JobProgress job={job} /> : null}

package/src/trial/index.ts

@@ -1,5 +1,7 @@
 export type { TrialProps } from './Trial';
 export { Trial } from './Trial';
+export type { TrialBodyProps } from './TrialBody';
+export { TrialBody } from './TrialBody';
 export type { TrialChromeProps, UndoBindings } from './TrialChrome';
 export { TrialChrome } from './TrialChrome';
 export {

package/dist/chunk-3ZELRRBV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/canvas/useLayerScheduler.ts","../src/canvas/usePanZoom.ts","../src/canvas/CanvasStack.tsx"],"names":["useRef","useEffect"],"mappings":"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","file":"chunk-3ZELRRBV.js","sourcesContent":["import { useVisibleRaf } from '@weasel-js/core';\nimport { type RefObject, useEffect, useRef } from 'react';\nimport type { ViewTransform } from '../instrument/types';\nimport { DEFAULT_FRAME, type WorldFrame } from './worldSpec';\n\n/** One layer of a canvas stack: its id, whether it is currently shown, and how\n *  it paints itself. */\nexport interface CanvasLayerDescriptor {\n  id: string;\n  visible: boolean;\n  render: (ctx: CanvasRenderingContext2D, view: ViewTransform, frame: WorldFrame) => void;\n}\n\ninterface SchedulerOptions {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  /** The instrument's coordinate system, resolved against `size`. */\n  frame?: WorldFrame;\n  canvasRefs: RefObject<Map<string, HTMLCanvasElement>>;\n  size: { width: number; height: number; dpr: number };\n  /** The element the stack occupies. Given one, the scheduler also stops while\n   *  the stack sits outside the viewport. */\n  host?: RefObject<Element | null>;\n}\n\nexport function useLayerScheduler({\n  layers,\n  view,\n  frame = DEFAULT_FRAME,\n  canvasRefs,\n  size,\n  host,\n}: SchedulerOptions): void {\n  const dirty = useRef<Set<string>>(new Set());\n  const lastRenderRef = useRef<Map<string, CanvasLayerDescriptor['render']>>(new Map());\n\n  useEffect(() => {\n    for (const layer of layers) {\n      const prev = lastRenderRef.current.get(layer.id);\n      if (prev !== layer.render) dirty.current.add(layer.id);\n      lastRenderRef.current.set(layer.id, layer.render);\n    }\n    for (const id of [...lastRenderRef.current.keys()]) {\n      if (!layers.find((l) => l.id === id)) lastRenderRef.current.delete(id);\n    }\n  }, [layers]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: re-mark dirty when view or size changes\n  useEffect(() => {\n    for (const layer of layers) dirty.current.add(layer.id);\n  }, [view, frame, size, layers]);\n\n  // Painting only what is dirty is not the same as doing nothing: a hidden tab\n  // still commits React updates, and the effect above marks every layer dirty\n  // on any view or size change. The gate is what actually stops the work.\n  const frameLoop = useVisibleRaf(\n    () => {\n      if (dirty.current.size === 0) return;\n      const map = canvasRefs.current;\n      if (!map) {\n        dirty.current.clear();\n        return;\n      }\n      for (const layer of layers) {\n        if (!dirty.current.has(layer.id)) continue;\n        if (!layer.visible) continue;\n        const canvas = map.get(layer.id);\n        if (!canvas) continue;\n        const ctx = canvas.getContext('2d');\n        if (!ctx) continue;\n        ctx.save();\n        ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);\n        ctx.clearRect(0, 0, size.width, size.height);\n        layer.render(ctx, view, frame);\n        ctx.restore();\n      }\n      dirty.current.clear();\n    },\n    { target: host },\n  );\n\n  useEffect(() => {\n    if (dirty.current.size > 0) frameLoop.request();\n  });\n}\n","import { type PointerEvent, useCallback, useRef, type WheelEvent } from 'react';\nimport type { ViewTransform } from '../instrument/types';\nimport { zoomAt } from './camera';\nimport { DEFAULT_FRAME, type WorldFrame } from './worldSpec';\n\nexport interface UsePanZoomOptions {\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  /** The opening `view.zoom` always stays reachable, widening these past\n   *  whatever is passed here if it would otherwise exclude it. */\n  minZoom?: number;\n  maxZoom?: number;\n  /** The instrument's coordinate system, resolved against the viewport. The\n   *  wheel anchors in this frame; omitting it anchors at the element's\n   *  top-left, which is what labkit did before a frame could be declared. */\n  frame?: WorldFrame;\n}\n\nexport interface PanZoomHandlers {\n  onWheel: (e: WheelEvent<HTMLElement>) => void;\n  onPointerDown: (e: PointerEvent<HTMLElement>) => void;\n  onPointerMove: (e: PointerEvent<HTMLElement>) => void;\n  onPointerUp: (e: PointerEvent<HTMLElement>) => void;\n  isDragging: () => boolean;\n}\n\ninterface DragState {\n  pointerId: number;\n  startScreenX: number;\n  startScreenY: number;\n  startPan: { x: number; y: number };\n  moved: boolean;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction isPositiveFinite(n: number): boolean {\n  return Number.isFinite(n) && n > 0;\n}\n\nexport function usePanZoom({\n  view,\n  onViewChange,\n  minZoom = 0.1,\n  maxZoom = 32,\n  frame = DEFAULT_FRAME,\n}: UsePanZoomOptions): PanZoomHandlers {\n  const dragRef = useRef<DragState | null>(null);\n  const viewRef = useRef(view);\n  viewRef.current = view;\n  // Captured once, from the view the canvas opened at — not the current view,\n  // which would let a prior zoom-out shrink the range and trap the opening\n  // view unreachable behind it.\n  const initialZoomRef = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);\n\n  const onWheel = useCallback(\n    (e: WheelEvent<HTMLElement>) => {\n      e.preventDefault();\n      const rect = e.currentTarget.getBoundingClientRect();\n      const initialZoom = initialZoomRef.current;\n      onViewChange(\n        zoomAt(\n          viewRef.current,\n          Math.exp(-e.deltaY * 0.001),\n          { x: e.clientX - rect.left, y: e.clientY - rect.top },\n          {\n            frame,\n            min: initialZoom == null ? minZoom : Math.min(minZoom, initialZoom),\n            max: initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom),\n          },\n        ),\n      );\n    },\n    [onViewChange, minZoom, maxZoom, frame],\n  );\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLElement>) => {\n    if (e.button !== 0) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    dragRef.current = {\n      pointerId: e.pointerId,\n      startScreenX: e.clientX,\n      startScreenY: e.clientY,\n      startPan: { ...viewRef.current.pan },\n      moved: false,\n    };\n  }, []);\n\n  const onPointerMove = useCallback(\n    (e: PointerEvent<HTMLElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== e.pointerId) return;\n      const dx = e.clientX - drag.startScreenX;\n      const dy = e.clientY - drag.startScreenY;\n      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n      drag.moved = true;\n      onViewChange({\n        zoom: viewRef.current.zoom,\n        pan: { x: drag.startPan.x + dx, y: drag.startPan.y + dy },\n      });\n    },\n    [onViewChange],\n  );\n\n  const onPointerUp = useCallback((e: PointerEvent<HTMLElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    }\n    dragRef.current = null;\n  }, []);\n\n  const isDragging = useCallback(() => dragRef.current?.moved === true, []);\n\n  return { onWheel, onPointerDown, onPointerMove, onPointerUp, isDragging };\n}\n","import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Point, ViewTransform } from '../instrument/types';\nimport { CanvasStackContext } from './CanvasStackContext';\nimport { screenToWorld } from './canvasCoords';\nimport { type CanvasLayerDescriptor, useLayerScheduler } from './useLayerScheduler';\nimport { usePanZoom } from './usePanZoom';\nimport { resolveFrame, type ViewportSize, type WorldSpec } from './worldSpec';\n\n/** Props for `<CanvasStack>`. */\nexport interface CanvasStackProps {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  /** The instrument's coordinate system. Omitted, world (0,0) sits at the\n   *  element's top-left with y running down. */\n  worldSpec?: WorldSpec;\n  minZoom?: number;\n  maxZoom?: number;\n  width?: number | string;\n  height?: number | string;\n  className?: string;\n  /** Fired whenever the stack is measured, so a consumer can place a view that\n   *  only makes sense in terms of the viewport. */\n  onResize?: (size: ViewportSize) => void;\n  onHitTest?: (worldPos: Point) => void;\n  children?: ReactNode;\n}\n\n/** Stacks one `<canvas>` per layer and drives them from a shared view, so a\n *  layer that changes rarely is not redrawn with one that changes every frame.\n *  Handles sizing, device pixel ratio, and pan/zoom. */\nexport function CanvasStack({\n  layers,\n  view,\n  onViewChange,\n  worldSpec,\n  minZoom,\n  maxZoom,\n  width = '100%',\n  height = '100%',\n  className,\n  onResize,\n  onHitTest,\n  children,\n}: CanvasStackProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const canvasMap = useRef<Map<string, HTMLCanvasElement>>(new Map());\n  const [size, setSize] = useState({ width: 0, height: 0, dpr: 1 });\n\n  const setCanvasRef = (id: string, el: HTMLCanvasElement | null): void => {\n    if (el) canvasMap.current.set(id, el);\n    else canvasMap.current.delete(id);\n  };\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const update = () => {\n      const rect = el.getBoundingClientRect();\n      const dpr = window.devicePixelRatio ?? 1;\n      setSize((prev) => {\n        if (prev.width === rect.width && prev.height === rect.height && prev.dpr === dpr) {\n          return prev;\n        }\n        return { width: rect.width, height: rect.height, dpr };\n      });\n    };\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const onResizeRef = useRef(onResize);\n  onResizeRef.current = onResize;\n  useEffect(() => {\n    if (size.width === 0 && size.height === 0) return;\n    onResizeRef.current?.({ width: size.width, height: size.height });\n  }, [size.width, size.height]);\n\n  const frame = useMemo(() => resolveFrame(worldSpec, size), [worldSpec, size]);\n\n  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom, frame });\n  useLayerScheduler({ layers, view, frame, canvasRefs: canvasMap, size, host: containerRef });\n\n  const ctxValue = useMemo(\n    () => ({\n      view,\n      frame,\n      surface: { element: containerRef, size, canvases: canvasMap, layers },\n    }),\n    [view, frame, size, layers],\n  );\n\n  const containerStyle: CSSProperties = { width, height };\n  const canvasPx = {\n    width: Math.max(0, Math.round(size.width * size.dpr)),\n    height: Math.max(0, Math.round(size.height * size.dpr)),\n  };\n  const canvasCss: CSSProperties = {\n    width: size.width,\n    height: size.height,\n  };\n\n  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {\n    const wasDragging = handlers.isDragging();\n    handlers.onPointerUp(e);\n    if (!wasDragging && onHitTest && containerRef.current) {\n      const rect = containerRef.current.getBoundingClientRect();\n      const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };\n      onHitTest(screenToWorld(screen, view, frame));\n    }\n  };\n\n  return (\n    <CanvasStackContext.Provider value={ctxValue}>\n      <div\n        ref={containerRef}\n        className={className ? `lk-canvas-stack ${className}` : 'lk-canvas-stack'}\n        style={containerStyle}\n        onWheel={handlers.onWheel}\n        onPointerDown={handlers.onPointerDown}\n        onPointerMove={handlers.onPointerMove}\n        onPointerUp={handlePointerUp}\n      >\n        {layers.map((layer) => (\n          <canvas\n            key={layer.id}\n            ref={(el) => setCanvasRef(layer.id, el)}\n            className=\"lk-canvas-stack__canvas\"\n            width={canvasPx.width}\n            height={canvasPx.height}\n            style={{ ...canvasCss, display: layer.visible ? 'block' : 'none' }}\n          />\n        ))}\n        <div className=\"lk-canvas-stack__overlay\">{children}</div>\n      </div>\n    </CanvasStackContext.Provider>\n  );\n}\n"]}