@weasel-js/labkit 1.4.4 → 1.5.1

package/src/loupe/AGENTS.md

@@ -4,7 +4,7 @@
 on, painted by whichever painter suits the instrument's content.
 
 The magnifier itself is not here. `@weasel-js/loupe` holds the model — aim,
-factor, mode, colour, picking — over a `LoupeSurface` it asks five questions.
+factor, mode, color, picking — over a `LoupeSurface` it asks five questions.
 This directory binds that model to a labkit trial and draws it.
 
 ## Files
@@ -12,7 +12,9 @@ This directory binds that model to a labkit trial and draws it.
 | File | Role |
 |---|---|
 | `types.ts` | `LoupeCapability`, and `resolveLoupe` filling in every default |
-| `useLoupe.ts` | The model over a host element, plus all of the input |
+| `useLoupe.ts` | The model over a host element, and pointer aiming |
+| `loupeActions.ts` | `loupe.peek` and `loupe.magnify`, as `Action` descriptors |
+| `LoupeGestures.tsx` | Registers those and mounts the dispatcher on the host |
 | `TrialLoupe.tsx` | Picks the painter and mounts the lens |
 | `LoupeBubble.tsx` | The circular clip, positioned on the aim |
 | `CanvasLoupe.tsx` | Painter for a `<CanvasStack>` |
@@ -44,6 +46,16 @@ StrictMode mounts / unmounts / mounts every effect — so disposing in the
 cleanup leaves a magnifier that draws but silently ignores every aim. It owns
 no resources; unmounting only reports the lens gone.
 
-**The wheel has to be taken from pan/zoom by hand.** `usePanZoom` is a React
-handler on the same element, so the lens listens in the capture phase and stops
-propagation. See the loupe entry in `docs/TODO.md` for what replaces this.
+**The wheel is taken from pan/zoom by declining it, not by capturing it.**
+`loupe.magnify`'s `enabled` returns a disabled reason while the lens is down, so
+the dispatcher leaves the event unhandled and `usePanZoom` — a React handler on
+the same element — sees it as usual. While the lens is up the action fires, the
+dispatcher stops propagation, and React's root listener never runs.
+
+**Aiming is a plain listener because a hover is not a gesture.**
+`GESTURE_DESCRIPTORS` names no continuous-motion gesture, so `pointermove` /
+`pointerleave` stay hand-attached in `useLoupe`. Everything else routes.
+
+**`<LoupeGestures>` mounts outside the visibility gate.** Hold-to-peek is what
+raises a lens that is down; gate its registration on `loupe.visible` and the
+peek key stops working entirely.

package/src/loupe/Loupe.less

@@ -7,7 +7,7 @@
   // Nothing under the lens stops working while it is up: the pan, the wheel and
   // any overlay of the instrument's own keep receiving the pointer.
   pointer-events: none;
-  border: var(--wzl-border-w) solid var(--wzl-border-raised);
+  border: var(--wzl-border-w) solid var(--wzl-border-strong);
   box-shadow: 0 2px 8px var(--wzl-shadow);
   // A painter's ground shows through wherever it draws nothing, and a vector
   // lens leaves the gaps between marks transparent. This is the trial's own

package/src/loupe/LoupeGestures.tsx

@@ -0,0 +1,67 @@
+/**
+ * Mounts the gesture dispatcher on a loupe's host and registers the loupe's
+ * actions on it, so the peek key and the wheel route the way every other
+ * weasel binding does.
+ *
+ * Three of the dispatcher's four element channels are off. Only `wheel` is
+ * wanted here; `contextMenu` suppresses the native menu unconditionally and
+ * `ingest` makes the host a file-drop target, neither of which a lab asked
+ * for by turning a magnifier on.
+ */
+import {
+  type ActionsRegistry,
+  type Tool,
+  useActionsRegistry,
+  useGestureDispatcher,
+} from '@weasel-js/core';
+import { type RefObject, useEffect, useMemo } from 'react';
+import { createLoupeActions, type LoupeInputApi } from './loupeActions';
+
+/** Props for `<LoupeGestures>`. */
+export interface LoupeGesturesProps {
+  /** The element the dispatcher listens on — the same one the lens tracks. */
+  hostRef: RefObject<HTMLElement | null>;
+  input: LoupeInputApi;
+  /** `KeyboardEvent.key` for hold-to-peek, or `null` for no peek binding. */
+  peekKey: string | null;
+}
+
+const NO_TOOLS: ReadonlyMap<string, Tool> = new Map();
+
+const CHANNELS = { pointer: false, contextMenu: false, ingest: false } as const;
+
+function LoupeDispatch({
+  hostRef,
+  input,
+  peekKey,
+  registry,
+}: LoupeGesturesProps & { registry: ActionsRegistry }) {
+  const actions = useMemo(() => createLoupeActions(input, peekKey), [input, peekKey]);
+
+  useEffect(() => {
+    const offs = actions.map((a) => registry.register(a));
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [registry, actions]);
+
+  useGestureDispatcher({
+    canvasRef: hostRef,
+    actions: registry,
+    toolsById: NO_TOOLS,
+    channels: CHANNELS,
+  });
+
+  return null;
+}
+
+/**
+ * The loupe's input, routed. Render it inside a `<WeaselProvider isolate>` —
+ * with no registry in scope it renders nothing rather than registering
+ * actions that could never fire.
+ */
+export function LoupeGestures(props: LoupeGesturesProps) {
+  const registry = useActionsRegistry();
+  if (!registry) return null;
+  return <LoupeDispatch {...props} registry={registry} />;
+}

package/src/loupe/TrialLoupe.tsx

@@ -1,3 +1,4 @@
+import { WeaselProvider } from '@weasel-js/core';
 import { type RefObject, useContext, useMemo } from 'react';
 import { CanvasStackContext } from '../canvas/CanvasStackContext';
 import type { WorldSpec } from '../canvas/worldSpec';
@@ -6,6 +7,7 @@ import { CanvasLoupe } from './CanvasLoupe';
 import { sampleStack } from './canvasLens';
 import { DomLoupe } from './DomLoupe';
 import { LoupeBubble } from './LoupeBubble';
+import { LoupeGestures } from './LoupeGestures';
 import type { ResolvedLoupe } from './types';
 import { useHostSize } from './useHostSize';
 import { useLoupe } from './useLoupe';
@@ -59,35 +61,48 @@ export function TrialLoupe({
   const measured = useHostSize(host);
   const size = surface?.size ?? measured;
 
-  if (!loupe.visible) return null;
+  // The gestures mount outside the visibility gate: hold-to-peek is what
+  // raises a lens that is down, so its binding has to be live while it is.
+  // One isolated scope per loupe, for the reason `<AnnotationOverlay>` gives
+  // — an actions registry holds one dispatcher.
+  const gestures = (
+    <WeaselProvider isolate>
+      <LoupeGestures hostRef={host} input={loupe.input} peekKey={capability.peekKey ?? null} />
+    </WeaselProvider>
+  );
+
+  if (!loupe.visible) return gestures;
 
   return (
-    <LoupeBubble aim={loupe.aim} diameter={capability.diameter}>
-      {capability.render ? (
-        <DomLoupe
-          aim={loupe.aim}
-          factor={loupe.factor}
-          mode={loupe.mode}
-          diameter={capability.diameter}
-          size={size}
-          view={view}
-          frame={stack?.frame}
-          state={state}
-          config={config}
-          render={capability.render}
-        />
-      ) : surface && stack ? (
-        <CanvasLoupe
-          aim={loupe.aim}
-          factor={loupe.factor}
-          mode={loupe.mode}
-          diameter={capability.diameter}
-          surface={surface}
-          view={stack.view}
-          frame={stack.frame}
-          worldSpec={worldSpec}
-        />
-      ) : null}
-    </LoupeBubble>
+    <>
+      {gestures}
+      <LoupeBubble aim={loupe.aim} diameter={capability.diameter}>
+        {capability.render ? (
+          <DomLoupe
+            aim={loupe.aim}
+            factor={loupe.factor}
+            mode={loupe.mode}
+            diameter={capability.diameter}
+            size={size}
+            view={view}
+            frame={stack?.frame}
+            state={state}
+            config={config}
+            render={capability.render}
+          />
+        ) : surface && stack ? (
+          <CanvasLoupe
+            aim={loupe.aim}
+            factor={loupe.factor}
+            mode={loupe.mode}
+            diameter={capability.diameter}
+            surface={surface}
+            view={stack.view}
+            frame={stack.frame}
+            worldSpec={worldSpec}
+          />
+        ) : null}
+      </LoupeBubble>
+    </>
   );
 }

package/src/loupe/canvasLens.ts

@@ -61,7 +61,7 @@ export function lensSourceRect(
 }
 
 /**
- * The colour a stack presents at a point: the topmost visible layer with
+ * The color a stack presents at a point: the topmost visible layer with
  * anything opaque there, or `null` when every layer is transparent — which is
  * the honest answer for a point showing nothing but the workspace behind.
  */

package/src/loupe/index.ts

@@ -6,6 +6,10 @@ export type { DomLoupeProps } from './DomLoupe';
 export { DomLoupe } from './DomLoupe';
 export type { LoupeBubbleProps } from './LoupeBubble';
 export { LoupeBubble } from './LoupeBubble';
+export type { LoupeGesturesProps } from './LoupeGestures';
+export { LoupeGestures } from './LoupeGestures';
+export type { LoupeInputApi } from './loupeActions';
+export { createLoupeActions, LOUPE_MAGNIFY_ID, LOUPE_PEEK_ID } from './loupeActions';
 export type { TrialLoupeProps } from './TrialLoupe';
 export { TrialLoupe } from './TrialLoupe';
 export type {

package/src/loupe/loupeActions.ts

@@ -0,0 +1,98 @@
+/**
+ * The loupe's two bindable interactions, as `Action` descriptors the gesture
+ * dispatcher routes: hold a key to peek, and walk the magnification with the
+ * wheel.
+ *
+ * Free of React so the routing can be tested without a DOM.
+ */
+import type { Action } from '@weasel-js/core';
+
+/** Canonical id of the hold-to-peek action. */
+export const LOUPE_PEEK_ID = 'loupe.peek';
+/** Canonical id of the wheel-magnify action. */
+export const LOUPE_MAGNIFY_ID = 'loupe.magnify';
+
+/** How fast the wheel walks the magnification. Gentler than the pan-zoom
+ *  wheel: the lens' whole range is one order of magnitude. */
+export const WHEEL_RATE = 0.002;
+
+/** What the actions do to a live loupe. Every member is read through the
+ *  object on each invocation, so one stable instance serves the life of the
+ *  registration. */
+export interface LoupeInputApi {
+  /** Whether the lens is up. The wheel belongs to the loupe only while it is;
+   *  otherwise `loupe.magnify` declines and the dispatcher leaves the event
+   *  unhandled, which is what hands it back to the lab's own pan/zoom. */
+  shown: () => boolean;
+  /** Raise or drop the hold-to-peek flag. */
+  setPeeking: (on: boolean) => void;
+  /** Multiply the magnification by one wheel notch of `deltaY`. */
+  magnifyBy: (deltaY: number) => void;
+}
+
+/**
+ * Build the loupe's actions. `peekKey` is a `KeyboardEvent.key`; passing
+ * `null` omits `loupe.peek` entirely rather than registering a binding no key
+ * can match.
+ */
+export function createLoupeActions(
+  input: LoupeInputApi,
+  peekKey: string | null,
+): readonly Action[] {
+  const magnify: Action = {
+    id: LOUPE_MAGNIFY_ID,
+    label: 'Magnify (loupe)',
+    group: 'loupe',
+    // Every modifier optional: the lens claims the wheel whenever it is up,
+    // which is what the hand-rolled capture-phase listener did. A bare spec
+    // would forbid modifiers and hand Cmd+wheel back to the lab mid-peek.
+    defaultBinding: [
+      {
+        spec: {
+          kind: 'wheel',
+          mods: { alt: 'optional', ctrl: 'optional', meta: 'optional', shift: 'optional' },
+        },
+        opts: {},
+      },
+    ],
+    enabled: () => (input.shown() ? true : 'not-applicable'),
+    invoker: {
+      timing: 'immediate',
+      run(_deps, params) {
+        input.magnifyBy((params?.deltaY as number | undefined) ?? 0);
+      },
+    },
+  };
+
+  if (peekKey === null) return [magnify];
+
+  const peek: Action = {
+    id: LOUPE_PEEK_ID,
+    label: 'Peek (loupe)',
+    group: 'loupe',
+    // Hotkey scope: peeking must beat whatever the lab's active tool binds to
+    // the same key, the way every other held-key trigger does.
+    scope: 'hotkey',
+    // Every modifier optional because the peek key may BE one: the keydown
+    // that carries `Alt` — the default — also reports `altKey: true`, and the
+    // matcher forbids any modifier a spec does not name.
+    defaultBinding: [
+      {
+        spec: {
+          kind: 'key-held',
+          key: peekKey,
+          mods: { alt: 'optional', ctrl: 'optional', meta: 'optional', shift: 'optional' },
+        },
+        opts: {},
+      },
+    ],
+    invoker: {
+      timing: 'ongoing',
+      start() {
+        input.setPeeking(true);
+        return { onEnd: () => input.setPeeking(false) };
+      },
+    },
+  };
+  return [peek, magnify];
+}

package/src/loupe/types.ts

@@ -43,7 +43,7 @@ export interface LoupeCapability<TS = unknown, TC = unknown> {
   /** Held for a momentary peek while the loupe is off. Default `'Alt'`; `null`
    *  turns hold-to-peek off. Matched against `KeyboardEvent.key`. */
   peekKey?: string | null;
-  /** Called with the colour under the aim, wherever the surface can say. The
+  /** Called with the color under the aim, wherever the surface can say. The
    *  canvas painter reads it back; a DOM loupe has no pixels to sample. */
   onColorChange?: (hex: string) => void;
 }

package/src/loupe/useLoupe.test.tsx

@@ -1,6 +1,8 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import { WeaselProvider } from '@weasel-js/core';
 import { type RefObject, StrictMode, useRef } from 'react';
 import { describe, expect, it, vi } from 'vitest';
+import { LoupeGestures } from './LoupeGestures';
 import { resolveLoupe } from './types';
 import { type LoupeState, useLoupe } from './useLoupe';
 
@@ -15,18 +17,29 @@ interface HarnessProps {
 }
 
 /** Reports the loupe's state as text, which is every assertion jsdom can make
- *  about a magnifier — that the lens shows the right region is a screenshot. */
+ *  about a magnifier — that the lens shows the right region is a screenshot.
+ *
+ *  Mounts `<LoupeGestures>` the way `<TrialLoupe>` does, so the key and wheel
+ *  cases below exercise the real dispatcher route rather than a stand-in. */
 function Harness({ enabled = true, seen, sample, ...rest }: HarnessProps) {
   const hostRef = useRef<HTMLDivElement | null>(null);
+  const capability = resolveLoupe(rest);
   const loupe = useLoupe({
     hostRef: hostRef as RefObject<HTMLElement | null>,
     enabled,
     sample,
-    capability: resolveLoupe(rest),
+    capability,
   });
   seen?.(loupe);
   return (
     <div ref={hostRef} data-testid="host">
+      <WeaselProvider isolate>
+        <LoupeGestures
+          hostRef={hostRef as RefObject<HTMLElement | null>}
+          input={loupe.input}
+          peekKey={capability.peekKey ?? null}
+        />
+      </WeaselProvider>
       <span data-testid="visible">{String(loupe.visible)}</span>
       <span data-testid="aim">{`${loupe.aim.x},${loupe.aim.y}`}</span>
       <span data-testid="factor">{loupe.factor}</span>
@@ -94,6 +107,7 @@ describe('useLoupe', () => {
     act(() => {
       fireEvent.keyDown(window, { key: 'Alt' });
     });
+    expect(read('visible')).toBe('true');
     act(() => {
       fireEvent.blur(window);
     });
@@ -148,7 +162,50 @@ describe('useLoupe', () => {
     expect(wheel.defaultPrevented).toBe(true);
   });
 
-  it('reports the colour under the aim', () => {
+  it('stops a claimed wheel reaching the pan-zoom handler above it', () => {
+    // The real handler is React's, delegated to the root container, so what
+    // decides whether pan-zoom runs is whether the event bubbles past the
+    // host — `defaultPrevented` says nothing about that. A listener on an
+    // ancestor is the proxy for React's root one.
+    const above = vi.fn();
+    const { container } = render(<Harness />);
+    container.addEventListener('wheel', above);
+
+    const host = screen.getByTestId('host');
+    move(40, 25);
+    act(() => {
+      host.dispatchEvent(
+        new WheelEvent('wheel', { deltaY: -100, bubbles: true, cancelable: true }),
+      );
+    });
+    expect(above).not.toHaveBeenCalled();
+
+    fireEvent.pointerLeave(host);
+    act(() => {
+      host.dispatchEvent(
+        new WheelEvent('wheel', { deltaY: -100, bubbles: true, cancelable: true }),
+      );
+    });
+    expect(above).toHaveBeenCalledTimes(1);
+  });
+
+  it('leaves the native context menu and file drops to the lab', () => {
+    // The dispatcher suppresses `contextmenu` unconditionally and makes its
+    // element a drop target; the loupe mounts with both channels off, so a
+    // lab that turns a magnifier on keeps its right-click and its drops.
+    render(<Harness />);
+    const host = screen.getByTestId('host');
+    move(40, 25);
+
+    const menu = new MouseEvent('contextmenu', { bubbles: true, cancelable: true });
+    act(() => {
+      host.dispatchEvent(menu);
+    });
+    expect(menu.defaultPrevented).toBe(false);
+    expect(host.classList.contains('weasel-dropover')).toBe(false);
+  });
+
+  it('reports the color under the aim', () => {
     const onColorChange = vi.fn();
     render(
       <Harness sample={(p) => (p.x > 10 ? '#ff0000' : '#00ff00')} onColorChange={onColorChange} />,

package/src/loupe/useLoupe.ts

@@ -5,6 +5,8 @@ import {
   type LoupePoint,
 } from '@weasel-js/loupe';
 import { type RefObject, useCallback, useEffect, useReducer, useRef } from 'react';
+import type { LoupeInputApi } from './loupeActions';
+import { WHEEL_RATE } from './loupeActions';
 import type { ResolvedLoupe } from './types';
 
 /** Options for {@link useLoupe}. */
@@ -14,7 +16,7 @@ export interface UseLoupeOptions {
   hostRef: RefObject<HTMLElement | null>;
   /** Whether the loupe is turned on. Hold-to-peek shows it regardless. */
   enabled: boolean;
-  /** Hex colour at a host point. Omitted, the loupe reports no colour — which
+  /** Hex color at a host point. Omitted, the loupe reports no color — which
    *  is the honest answer for a surface with no pixels to read. */
   sample?: (p: LoupePoint) => string | null;
 }
@@ -32,21 +34,21 @@ export interface LoupeState {
   setFactor: (factor: number) => void;
   /** Sample what the lens shows at a point inside it. */
   pick: (p?: LoupePoint) => string | null;
+  /** What `<LoupeGestures>` drives the lens through. Stable for the life of
+   *  the hook, so registering the actions on it does not churn. */
+  input: LoupeInputApi;
 }
 
-/** How fast the wheel walks the magnification. Gentler than the pan-zoom
- *  wheel: the lens' whole range is one order of magnitude. */
-const WHEEL_RATE = 0.002;
-
 /**
- * Binds `@weasel-js/loupe`'s model to a host element and drives it from the
- * pointer, the peek key and the wheel.
+ * Binds `@weasel-js/loupe`'s model to a host element and tracks the pointer
+ * across it.
  *
- * These are plain listeners rather than gesture bindings because labkit trials
- * do not route input through the dispatcher — see the loupe entry under
- * "Selection, actions & UI panels" in `docs/TODO.md`. They are all in this one
- * hook so that when trial input does go through it, this is the only file to
- * rewrite.
+ * The peek key and the wheel are not here: they are `loupe.peek` and
+ * `loupe.magnify`, routed through the gesture dispatcher that
+ * `<LoupeGestures>` mounts on the same host. Aiming stays a plain listener
+ * because a hover is not a gesture the grammar names — `GESTURE_DESCRIPTORS`
+ * has no continuous-motion entry, and inventing one to carry the lens' aim
+ * would be an input taxonomy change, not a loupe change.
  */
 export function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptions): LoupeState {
   const [, bump] = useReducer((n: number) => n + 1, 0);
@@ -128,53 +130,30 @@ export function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptio
       overRef.current = false;
       bump();
     };
-    const onWheel = (e: WheelEvent): void => {
-      if (!shown()) return;
-      // Ahead of the stack's own pan-zoom, which is a React handler on this same
-      // element: capture runs first, and stopping propagation keeps the event
-      // from reaching React's root listener at all.
-      e.preventDefault();
-      e.stopPropagation();
-      model.setFactor(model.factor * Math.exp(-e.deltaY * WHEEL_RATE));
-    };
 
     host.addEventListener('pointermove', onPointerMove);
     host.addEventListener('pointerleave', onPointerLeave);
-    host.addEventListener('wheel', onWheel, { capture: true, passive: false });
     return () => {
       host.removeEventListener('pointermove', onPointerMove);
       host.removeEventListener('pointerleave', onPointerLeave);
-      host.removeEventListener('wheel', onWheel, { capture: true });
     };
   }, [hostRef, model, shown]);
 
-  const peekKey = capability.peekKey;
-  useEffect(() => {
-    if (peekKey == null) return;
-    const setPeeking = (next: boolean): void => {
-      if (peekingRef.current === next) return;
-      peekingRef.current = next;
-      bump();
-    };
-    const onKeyDown = (e: KeyboardEvent): void => {
-      if (e.key === peekKey) setPeeking(true);
-    };
-    const onKeyUp = (e: KeyboardEvent): void => {
-      if (e.key === peekKey) setPeeking(false);
-    };
-    // A key held while the window loses focus never sends its keyup, so the
-    // peek would stay on until the key was pressed and released again.
-    const onBlur = (): void => setPeeking(false);
-
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('keyup', onKeyUp);
-    window.addEventListener('blur', onBlur);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('keyup', onKeyUp);
-      window.removeEventListener('blur', onBlur);
+  const inputRef = useRef<LoupeInputApi | null>(null);
+  if (inputRef.current === null) {
+    inputRef.current = {
+      shown,
+      setPeeking: (on) => {
+        if (peekingRef.current === on) return;
+        peekingRef.current = on;
+        bump();
+      },
+      magnifyBy: (deltaY) => {
+        const m = modelRef.current;
+        if (m) m.setFactor(m.factor * Math.exp(-deltaY * WHEEL_RATE));
+      },
     };
-  }, [peekKey]);
+  }
 
   return {
     visible: shown(),
@@ -185,5 +164,6 @@ export function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptio
     setMode: model.setMode,
     setFactor: model.setFactor,
     pick: model.pick,
+    input: inputRef.current,
   };
 }

package/src/passthrough/weasel-ui.ts

@@ -15,6 +15,8 @@ export {
   type ActionsBarVariant,
   type AddPointMode,
   type AnchorRenderProps,
+  type AsyncOption,
+  type AsyncOptionsResult,
   type AxesSettings,
   Badge,
   type BadgeProps,
@@ -37,6 +39,8 @@ export {
   type ChromaCurve,
   type ChromaCurvePoint,
   ComboBox,
+  type ComboBoxCommit,
+  type ComboBoxFilter,
   ComboBoxItem,
   type ComboBoxItemProps,
   type ComboBoxOption,
@@ -100,6 +104,9 @@ export {
   type LayerStackProps,
   type LogicalMod,
   type LogicalModSpec,
+  MenuButton,
+  type MenuButtonItem,
+  type MenuButtonProps,
   MINUS_SIGN,
   NumberField,
   type NumberFieldProps,
@@ -186,8 +193,10 @@ export {
   ToolPalette,
   type ToolPaletteProps,
   type TrackCtx,
+  type UseAsyncOptionsProps,
   type UseReorderDragListOptions,
   type UseRovingTabIndexOptions,
+  useAsyncOptions,
   useReorderDragList,
   useRovingTabIndex,
   visiblePrefSubtree,

package/src/primitives/FloatingPanel.stories.tsx

@@ -1,4 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
+import { localStorageAdapter } from '../state/adapters';
+import { Persistence } from '../state/Persistence';
 import { FloatingPanel } from './FloatingPanel';
 import { Legend } from './Legend';
 
@@ -43,4 +45,14 @@ export const HoldingALegend: Story = {
   },
 };
 
-export const Remembered: Story = { args: { storageKey: 'labkit.story.panel' } };
+// Remembered only under a provider; this one keeps it across story reloads.
+export const Remembered: Story = {
+  args: { persist: 'story-panel' },
+  decorators: [
+    (Story) => (
+      <Persistence storageKey="labkit-story" storage={localStorageAdapter}>
+        <Story />
+      </Persistence>
+    ),
+  ],
+};