@weasel-js/labkit 1.5.2 → 1.6.1

package/src/canvas/usePanZoom.test.ts

@@ -1,244 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import type { PointerEvent as ReactPointerEvent, WheelEvent } from 'react';
-import { describe, expect, it } from 'vitest';
-import type { ViewTransform } from '../instrument/types';
-import { screenToWorld } from './canvasCoords';
-import { type UsePanZoomOptions, usePanZoom } from './usePanZoom';
-import { resolveFrame } from './worldSpec';
-
-function wheelEvent(deltaY: number, cursor = { x: 0, y: 0 }): WheelEvent<HTMLElement> {
-  return {
-    deltaY,
-    clientX: cursor.x,
-    clientY: cursor.y,
-    preventDefault: () => {},
-    currentTarget: { getBoundingClientRect: () => ({ left: 0, top: 0, width: 0, height: 0 }) },
-  } as unknown as WheelEvent<HTMLElement>;
-}
-
-/** Renders the hook the way `CanvasStack` drives it: `view` lives in the
- *  test, `onViewChange` writes it, and each wheel call re-renders the hook
- *  with the updated view before returning it. */
-function setup(initialView: ViewTransform, options?: Partial<UsePanZoomOptions>) {
-  let view = initialView;
-  const onViewChange = (v: ViewTransform) => {
-    view = v;
-  };
-  const { result, rerender } = renderHook(
-    (props: { view: ViewTransform }) => usePanZoom({ ...options, view: props.view, onViewChange }),
-    { initialProps: { view: initialView } },
-  );
-  const wheel = (deltaY: number, cursor?: { x: number; y: number }): ViewTransform => {
-    act(() => result.current.onWheel(wheelEvent(deltaY, cursor)));
-    rerender({ view });
-    return view;
-  };
-  return { wheel, getView: () => view };
-}
-
-describe('usePanZoom', () => {
-  it('stacks two wheel events that land before a re-render', () => {
-    const { wheel } = setup({ zoom: 1, pan: { x: 0, y: 0 } });
-    const once = wheel(-100).zoom;
-
-    const views: ViewTransform[] = [];
-    const { result } = renderHook(() =>
-      usePanZoom({ view: { zoom: 1, pan: { x: 0, y: 0 } }, onViewChange: (v) => views.push(v) }),
-    );
-    act(() => {
-      result.current.onWheel(wheelEvent(-100));
-      result.current.onWheel(wheelEvent(-100));
-    });
-    expect(views[1].zoom).toBeCloseTo(once * once, 10);
-  });
-
-  it('lets the view prop win at the next render', () => {
-    const views: ViewTransform[] = [];
-    const { result, rerender } = renderHook(
-      (props: { view: ViewTransform }) =>
-        usePanZoom({ view: props.view, onViewChange: (v) => views.push(v) }),
-      { initialProps: { view: { zoom: 1, pan: { x: 0, y: 0 } } } },
-    );
-    act(() => result.current.onWheel(wheelEvent(-100)));
-    rerender({ view: { zoom: 2, pan: { x: 0, y: 0 } } });
-    act(() => result.current.onWheel(wheelEvent(0)));
-    expect(views[1].zoom).toBeCloseTo(2, 10);
-  });
-
-  it('does not collapse a canvas opening far outside the default range on the first wheel event', () => {
-    const { wheel } = setup({ zoom: 1600, pan: { x: 0, y: 0 } });
-    const next = wheel(-1); // zoom in slightly
-    expect(next.zoom).toBeCloseTo(1600, 0);
-  });
-
-  it('keeps the opening zoom reachable after zooming away from it', () => {
-    const { wheel } = setup({ zoom: 1600, pan: { x: 0, y: 0 } });
-    // Zoom far out.
-    for (let i = 0; i < 20; i++) wheel(1000);
-    const zoomedOut = wheel(1000);
-    expect(zoomedOut.zoom).toBeLessThan(1600);
-    // Zoom back in — the opening view must still be reachable.
-    for (let i = 0; i < 40; i++) wheel(-1000);
-    const zoomedIn = wheel(-1000);
-    expect(zoomedIn.zoom).toBeCloseTo(1600, 0);
-  });
-
-  it('admits the opening zoom even when an explicit maxZoom is lower than it', () => {
-    const { wheel } = setup({ zoom: 1600, pan: { x: 0, y: 0 } }, { maxZoom: 32 });
-    const next = wheel(-1);
-    expect(next.zoom).toBeCloseTo(1600, 0);
-  });
-
-  it('falls back to the plain defaults when the opening zoom is non-finite or zero', () => {
-    const nanCase = setup({ zoom: Number.NaN, pan: { x: 0, y: 0 } });
-    const nanResult = nanCase.wheel(-100000);
-    expect(nanResult.zoom).toBeCloseTo(32, 5);
-    expect(Number.isNaN(nanResult.zoom)).toBe(false);
-
-    const zeroCase = setup({ zoom: 0, pan: { x: 0, y: 0 } });
-    const zeroResult = zeroCase.wheel(100000);
-    expect(zeroResult.zoom).toBeCloseTo(0.1, 5);
-  });
-
-  it('still clamps ordinary views to the default range', () => {
-    const { wheel } = setup({ zoom: 1, pan: { x: 0, y: 0 } });
-    const zoomedIn = wheel(-1_000_000);
-    expect(zoomedIn.zoom).toBeCloseTo(32, 5);
-    const zoomedOut = wheel(1_000_000);
-    expect(zoomedOut.zoom).toBeCloseTo(0.1, 5);
-  });
-
-  describe('under a declared frame', () => {
-    const size = { width: 1430, height: 870 };
-
-    it('keeps the world point under the cursor fixed in a centred, y-up frame', () => {
-      const frame = resolveFrame({ origin: { x: 0.5, y: 0.5 }, yAxis: 'up' }, size);
-      const start: ViewTransform = { zoom: 1600, pan: { x: 0, y: 0 } };
-      const { wheel } = setup(start, { frame });
-      const cursor = { x: 900, y: 200 };
-
-      const before = screenToWorld(cursor, start, frame);
-      const after = screenToWorld(cursor, wheel(120, cursor), frame);
-
-      expect(after.x).toBeCloseTo(before.x, 6);
-      expect(after.y).toBeCloseTo(before.y, 6);
-    });
-
-    it('anchors on the element top-left when no frame is declared', () => {
-      const start: ViewTransform = { zoom: 4, pan: { x: 0, y: 0 } };
-      const { wheel } = setup(start);
-      const cursor = { x: 300, y: 120 };
-
-      const before = screenToWorld(cursor, start);
-      const after = screenToWorld(cursor, wheel(-120, cursor));
-
-      expect(after.x).toBeCloseTo(before.x, 6);
-      expect(after.y).toBeCloseTo(before.y, 6);
-    });
-  });
-});
-
-/** The fields `usePanZoom` reads off a React pointerdown, plus the element the
- *  session hangs its document listeners off. */
-function press(
-  el: HTMLElement,
-  x: number,
-  y: number,
-  init: { pointerId?: number; button?: number; buttons?: number } = {},
-): ReactPointerEvent<HTMLElement> {
-  return {
-    pointerId: init.pointerId ?? 1,
-    button: init.button ?? 0,
-    buttons: init.buttons ?? 1,
-    clientX: x,
-    clientY: y,
-    currentTarget: el,
-  } as unknown as ReactPointerEvent<HTMLElement>;
-}
-
-function dispatchOn(target: EventTarget, type: string, init: PointerEventInit) {
-  act(() => {
-    target.dispatchEvent(new PointerEvent(type, { pointerId: 1, bubbles: true, ...init }));
-  });
-}
-
-function dragSetup(options?: Partial<UsePanZoomOptions>) {
-  let view: ViewTransform = { zoom: 1, pan: { x: 0, y: 0 } };
-  const onViewChange = (v: ViewTransform) => {
-    view = v;
-  };
-  const { result, unmount } = renderHook(() =>
-    usePanZoom({ ...options, view, onViewChange } as UsePanZoomOptions),
-  );
-  const el = document.createElement('div');
-  document.body.appendChild(el);
-  return { result, unmount, el, getView: () => view };
-}
-
-describe('usePanZoom dragging', () => {
-  it('pans from a move the element never sees', () => {
-    const { result, el, getView } = dragSetup();
-    act(() => result.current.onPointerDown(press(el, 100, 100)));
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 150, clientY: 120 });
-    expect(getView().pan).toEqual({ x: 50, y: 20 });
-  });
-
-  it('ends the drag on a release dispatched off the element', () => {
-    const { result, el, getView } = dragSetup();
-    act(() => result.current.onPointerDown(press(el, 100, 100)));
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 150, clientY: 120 });
-    dispatchOn(document, 'pointerup', { clientX: 150, clientY: 120 });
-    expect(result.current.isDragging()).toBe(false);
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
-    expect(getView().pan).toEqual({ x: 50, y: 20 });
-  });
-
-  // The other half of the rule — a detached origin does cancel — is owned by
-  // pointerSession.test.ts, which exercises it without React in the way.
-  it('keeps panning when capture is lost and the element is still in the document', () => {
-    const { result, el, getView } = dragSetup();
-    act(() => result.current.onPointerDown(press(el, 100, 100)));
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 150, clientY: 120 });
-    // Chrome releases capture a beat before it delivers pointerup, so ending
-    // here throws away a release that has already been dispatched.
-    dispatchOn(el, 'lostpointercapture', {});
-    expect(result.current.isDragging()).toBe(true);
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
-    expect(getView().pan).toEqual({ x: 300, y: 300 });
-  });
-
-  it('reads a move with nothing held as the release that never arrived', () => {
-    const { result, el, getView } = dragSetup();
-    act(() => result.current.onPointerDown(press(el, 100, 100, { buttons: 1 })));
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 150, clientY: 120 });
-    expect(getView().pan).toEqual({ x: 50, y: 20 });
-    dispatchOn(document, 'pointermove', { buttons: 0, clientX: 300, clientY: 300 });
-    expect(getView().pan).toEqual({ x: 50, y: 20 });
-    expect(result.current.isDragging()).toBe(false);
-  });
-
-  it('reports a release that never crossed the threshold as a tap', () => {
-    const taps: number[] = [];
-    const { result, el } = dragSetup({ onTap: (e) => taps.push(e.clientX) });
-    act(() => result.current.onPointerDown(press(el, 100, 100)));
-    dispatchOn(document, 'pointerup', { clientX: 101, clientY: 100 });
-    expect(taps).toEqual([101]);
-  });
-
-  it('does not report a tap when the pointer panned', () => {
-    const taps: number[] = [];
-    const { result, el } = dragSetup({ onTap: (e) => taps.push(e.clientX) });
-    act(() => result.current.onPointerDown(press(el, 100, 100)));
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 150, clientY: 120 });
-    dispatchOn(document, 'pointerup', { clientX: 150, clientY: 120 });
-    expect(taps).toEqual([]);
-  });
-
-  it('drops its listeners when the hook unmounts mid-drag', () => {
-    const { result, el, unmount, getView } = dragSetup();
-    act(() => result.current.onPointerDown(press(el, 100, 100)));
-    unmount();
-    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
-    expect(getView().pan).toEqual({ x: 0, y: 0 });
-  });
-});

package/src/canvas/usePanZoom.ts

@@ -1,147 +0,0 @@
-import { openPointerSession, type PointerSession } from '@weasel-js/core';
-import {
-  type PointerEvent as ReactPointerEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  type WheelEvent,
-} from 'react';
-import type { ViewTransform } from '../instrument/types';
-import { normalize2DView } from '../state/view';
-import { zoomAt } from './camera';
-import { DEFAULT_FRAME, type WorldFrame } from './worldSpec';
-
-export interface UsePanZoomOptions {
-  view: ViewTransform;
-  onViewChange: (v: ViewTransform) => void;
-  /** The opening `view.zoom` always stays reachable, widening these past
-   *  whatever is passed here if it would otherwise exclude it. */
-  minZoom?: number;
-  maxZoom?: number;
-  /** The instrument's coordinate system, resolved against the viewport. The
-   *  wheel anchors in this frame; omitting it anchors at the element's
-   *  top-left, which is what labkit did before a frame could be declared. */
-  frame?: WorldFrame;
-  /** A primary-button press released without ever crossing the drag
-   *  threshold. The pointer session owns the release, so the gesture's end is
-   *  reported here rather than left for a consumer's own `onPointerUp`. */
-  onTap?: (e: PointerEvent) => void;
-}
-
-export interface PanZoomHandlers {
-  /** Zoom about the pointer. `anchor` is the element the pointer position is
-   *  measured against, for an event whose `currentTarget` is some other box. */
-  onWheel: (e: WheelEvent<HTMLElement> | globalThis.WheelEvent, anchor?: Element) => void;
-  onPointerDown: (e: ReactPointerEvent<HTMLElement>) => void;
-  isDragging: () => boolean;
-}
-
-interface DragState {
-  startScreenX: number;
-  startScreenY: number;
-  startPan: { x: number; y: number };
-  moved: boolean;
-}
-
-const DRAG_THRESHOLD = 3;
-
-function isPositiveFinite(n: number): boolean {
-  return Number.isFinite(n) && n > 0;
-}
-
-export function usePanZoom({
-  view,
-  onViewChange,
-  minZoom = 0.1,
-  maxZoom = 32,
-  frame = DEFAULT_FRAME,
-  onTap,
-}: UsePanZoomOptions): PanZoomHandlers {
-  const dragRef = useRef<DragState | null>(null);
-  const sessionRef = useRef<PointerSession | null>(null);
-  const viewRef = useRef(normalize2DView(view));
-  viewRef.current = normalize2DView(view);
-  const onViewChangeRef = useRef(onViewChange);
-  onViewChangeRef.current = onViewChange;
-  const onTapRef = useRef(onTap);
-  onTapRef.current = onTap;
-  // Captured once, from the view the canvas opened at — not the current view,
-  // which would let a prior zoom-out shrink the range and trap the opening
-  // view unreachable behind it.
-  const initialZoomRef = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);
-
-  // Written ahead of the render so a second event inside one commit steps
-  // from this one; the render-time assignment above still lets the prop win.
-  const commit = useCallback((next: ViewTransform) => {
-    viewRef.current = normalize2DView(next);
-    onViewChangeRef.current(next);
-  }, []);
-
-  const onWheel = useCallback(
-    (e: WheelEvent<HTMLElement> | globalThis.WheelEvent, anchor?: Element) => {
-      const el = anchor ?? (e.currentTarget as Element | null);
-      if (!el) return;
-      e.preventDefault();
-      const rect = el.getBoundingClientRect();
-      const initialZoom = initialZoomRef.current;
-      commit(
-        zoomAt(
-          viewRef.current,
-          Math.exp(-e.deltaY * 0.001),
-          { x: e.clientX - rect.left, y: e.clientY - rect.top },
-          {
-            frame,
-            min: initialZoom == null ? minZoom : Math.min(minZoom, initialZoom),
-            max: initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom),
-          },
-        ),
-      );
-    },
-    [commit, minZoom, maxZoom, frame],
-  );
-
-  const clearDrag = useCallback(() => {
-    dragRef.current = null;
-    sessionRef.current = null;
-  }, []);
-
-  const onPointerDown = useCallback(
-    (e: ReactPointerEvent<HTMLElement>) => {
-      if (e.button !== 0) return;
-      const drag: DragState = {
-        startScreenX: e.clientX,
-        startScreenY: e.clientY,
-        startPan: { ...viewRef.current.pan },
-        moved: false,
-      };
-      dragRef.current = drag;
-      sessionRef.current = openPointerSession(e.currentTarget, e, {
-        onMove: (ev) => {
-          const dx = ev.clientX - drag.startScreenX;
-          const dy = ev.clientY - drag.startScreenY;
-          if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-          drag.moved = true;
-          commit({
-            zoom: viewRef.current.zoom,
-            pan: { x: drag.startPan.x + dx, y: drag.startPan.y + dy },
-          });
-        },
-        onEnd: (ev) => {
-          const tapped = !drag.moved;
-          clearDrag();
-          if (tapped) onTapRef.current?.(ev);
-        },
-        // A cancelled pan keeps whatever it had already applied: every move
-        // was committed as it arrived, so there is nothing left to undo.
-        onCancel: clearDrag,
-      });
-    },
-    [clearDrag, commit],
-  );
-
-  useEffect(() => () => sessionRef.current?.cancel(), []);
-
-  const isDragging = useCallback(() => dragRef.current?.moved === true, []);
-
-  return { onWheel, onPointerDown, isDragging };
-}

package/src/lab/useSystemMode.ts

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { LabMode } from '../state/types';
-
-function query(): MediaQueryList | null {
-  if (typeof window === 'undefined' || !window.matchMedia) return null;
-  return window.matchMedia('(prefers-color-scheme: light)');
-}
-
-/**
- * Resolve a `LabMode` to the mode the theme resolver understands.
- *
- * `auto` is not a mode — it means "read the OS", live. An explicit choice
- * opts out of the subscription entirely.
- */
-export function useResolvedMode(mode: LabMode): 'light' | 'dark' {
-  const [system, setSystem] = useState<'light' | 'dark'>(() =>
-    query()?.matches ? 'light' : 'dark',
-  );
-
-  useEffect(() => {
-    if (mode !== 'auto') return;
-    const mq = query();
-    if (!mq) return;
-    const onChange = (e: MediaQueryListEvent) => setSystem(e.matches ? 'light' : 'dark');
-    mq.addEventListener('change', onChange);
-    return () => mq.removeEventListener('change', onChange);
-  }, [mode]);
-
-  return mode === 'auto' ? system : mode;
-}

package/src/layers/LayerList.less

@@ -1,93 +0,0 @@
-// No padding of its own: whatever mounts the list insets it. The sidebar
-// section body already does, and a second inset here put the grip 22px off a
-// 161px-wide sidebar's edge.
-.lk-layer-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.lk-layer-list__empty {
-  color: var(--wzl-fg-muted);
-  font-size: var(--wzl-font-size-sm);
-  font-style: italic;
-}
-
-.lk-layer-list__row {
-  display: flex;
-  align-items: center;
-  gap: var(--wzl-space-xs);
-  padding: 1px 2px;
-  border-radius: var(--wzl-radius-sm);
-  user-select: none;
-}
-
-.lk-layer-list__row:hover {
-  background: var(--wzl-surface-hover);
-}
-
-.lk-layer-list__row--dragging {
-  background: var(--wzl-surface-pressed);
-  opacity: 0.7;
-}
-
-.lk-layer-list__row--pinned {
-  opacity: 0.7;
-}
-
-// Prefixed with `.lk-root` to outrank base.less's `:where(button)` default,
-// which would otherwise wrap this grip in a 24px chrome box with a border, an
-// elevated fill and 12px of side padding — around a glyph a third that size.
-.lk-root .lk-layer-list__handle {
-  display: inline-flex;
-  align-items: center;
-  height: auto;
-  // Transparent, so the grab target is comfortable while nothing but the dots
-  // is drawn. The negative margin keeps it from widening the row.
-  padding: 4px;
-  margin: -4px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  cursor: grab;
-  color: var(--wzl-fg-muted);
-}
-
-.lk-root .lk-layer-list__handle:hover {
-  color: var(--wzl-fg);
-}
-
-.lk-layer-list__handle:active {
-  cursor: grabbing;
-}
-
-.lk-layer-list__lock {
-  color: var(--wzl-fg-muted);
-}
-
-.lk-layer-list__label {
-  flex: 1;
-  font-size: var(--wzl-font-size-sm);
-}
-
-.lk-layer-list input[type='checkbox'] {
-  accent-color: var(--wzl-accent);
-}
-
-.lk-layer-list__children {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  // Indents by the twisty column, so a child's own twisty starts where its
-  // parent's label does.
-  padding-left: var(--wzl-space-md);
-}
-
-// Holds the twisty column open on rows that have nothing to expand, so labels
-// line up down the level.
-.lk-layer-list__twisty-gap {
-  flex: 0 0 auto;
-  width: var(--wzl-disclosure-target, var(--wzl-control-h-sm));
-}

package/src/layers/LayerList.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@weasel-js/forge';
-import { useState } from 'react';
-import { LayerList, type LayerTreeNode } from './LayerList';
-
-const meta: Meta<typeof LayerList> = {
-  title: 'labkit/Layers/LayerList',
-  component: LayerList,
-};
-export default meta;
-type Story = StoryObj<typeof LayerList>;
-
-const FLAT: LayerTreeNode[] = [
-  { id: 'plants', label: 'Plants' },
-  { id: 'grid', label: 'Grid' },
-  { id: 'legend', label: 'Legend', alwaysOn: true },
-];
-
-const NESTED: LayerTreeNode[] = [
-  {
-    id: 'ingest',
-    label: 'Ingest',
-    children: [
-      { id: 'ingest.fetch', label: 'Fetch' },
-      { id: 'ingest.parse', label: 'Parse' },
-    ],
-  },
-  {
-    id: 'solve',
-    label: 'Solve',
-    defaultCollapsed: true,
-    children: [
-      { id: 'solve.seed', label: 'Seed' },
-      {
-        id: 'solve.relax',
-        label: 'Relax',
-        children: [
-          { id: 'solve.relax.sweep', label: 'Sweep' },
-          { id: 'solve.relax.check', label: 'Check' },
-        ],
-      },
-    ],
-  },
-  { id: 'report', label: 'Report', alwaysOn: true },
-];
-
-function Demo({ seed }: { seed: LayerTreeNode[] }) {
-  const [layers, setLayers] = useState(seed);
-  const [visibility, setVisibility] = useState<Record<string, boolean>>({});
-  return (
-    <div style={{ width: 220 }}>
-      <LayerList
-        layers={layers}
-        visibility={visibility}
-        onReorder={setLayers}
-        onToggle={(id, visible) => setVisibility((v) => ({ ...v, [id]: visible }))}
-      />
-    </div>
-  );
-}
-
-/** No node has children, so no row spends width on a twisty column. */
-export const Flat: Story = { render: () => <Demo seed={FLAT} /> };
-
-/** Dragging a row reorders it among its own siblings — a drag never moves a
- *  layer to a different parent. */
-export const Tree: Story = { render: () => <Demo seed={NESTED} /> };