@weasel-js/labkit 1.4.3 → 1.5.0

package/src/lab/LabSwitcher.test.tsx

@@ -0,0 +1,96 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { currentPage, LabSwitcher } from './LabSwitcher';
+import { LabShell } from './LabShell';
+
+const PAGES = [
+  { href: '/corpus', label: 'Wall' },
+  { href: '/stats', label: 'Dashboard' },
+  { href: '/ingest', label: 'Ingestion' },
+];
+
+const open = () => fireEvent.click(screen.getByRole('button', { name: /corpus stats/ }));
+
+describe('currentPage', () => {
+  it('matches a bare path', () => {
+    expect(currentPage('/stats', PAGES)).toBe(1);
+  });
+
+  it('survives a query string, a trailing slash and a leftover extension', () => {
+    // A dev server maps `/stats` to `stats.html` and serves both spellings, so
+    // an old bookmark must still resolve to the same page.
+    for (const path of ['/stats?kind=base', '/stats/', '/stats.html',
+                        '/lab/stats.html#top']) {
+      expect(currentPage(path, PAGES)).toBe(1);
+    }
+  });
+
+  it('reports -1 for a page that is not one of them', () => {
+    expect(currentPage('/bench', PAGES)).toBe(-1);
+  });
+});
+
+describe('<LabSwitcher>', () => {
+  it('shows the title and nothing else until it is opened', () => {
+    render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
+    expect(screen.getByRole('button', { name: /corpus stats/ })).toHaveAttribute(
+      'aria-expanded', 'false');
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('opens a menu of every lab, the open one included', () => {
+    // Filtering the current page out shifts every other entry as you move
+    // between pages, so it stays and is marked instead.
+    render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
+    open();
+    const items = screen.getAllByRole('menuitem');
+    expect(items.map((i) => i.textContent)).toEqual(['Wall', 'Dashboard', 'Ingestion']);
+    expect(items[1]).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('offers real links, so cmd-click and the back button keep working', () => {
+    // These are separate documents. A <select> would fire a change event and
+    // get none of the three for free.
+    render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
+    open();
+    expect(screen.getByRole('menuitem', { name: 'Wall' }).tagName).toBe('A');
+    expect(screen.getByRole('menuitem', { name: 'Wall' })).toHaveAttribute(
+      'href', '/corpus');
+  });
+
+  it('closes on Escape and on a press outside it', () => {
+    render(
+      <div>
+        <LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />
+        <button type="button">elsewhere</button>
+      </div>);
+    open();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('menu')).toBeNull();
+
+    open();
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'elsewhere' }));
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('stays a plain heading when there is nowhere to switch to', () => {
+    // A disclosure arrow promising a menu of the page you are already on is
+    // worse than no control.
+    render(<LabSwitcher title="corpus stats" pages={[PAGES[1]!]} path="/stats" />);
+    expect(screen.getByRole('heading', { name: 'corpus stats' })).toBeInTheDocument();
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});
+
+describe('<LabShell> with pages', () => {
+  it('turns its title into the switcher', () => {
+    render(<LabShell title="corpus stats" pages={PAGES} path="/stats">body</LabShell>);
+    expect(screen.getByRole('button', { name: /corpus stats/ })).toBeInTheDocument();
+  });
+
+  it('leaves the title alone when no pages are given', () => {
+    render(<LabShell title="corpus stats">body</LabShell>);
+    expect(screen.getByRole('heading', { name: 'corpus stats' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /corpus stats/ })).toBeNull();
+  });
+});

package/src/lab/LabSwitcher.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+
+/** One page in a project's set of labs. */
+export interface LabPage {
+  /** The page's own URL, and how the switcher knows which page is open. */
+  href: string;
+  label: string;
+}
+
+/** Props for `<LabSwitcher>`. */
+export interface LabSwitcherProps {
+  /** The open page's title, shown as the control's own label. */
+  title: string;
+  pages: readonly LabPage[];
+  /** Defaults to the current location. Pass it in tests, or to render a
+   *  switcher for a page other than the one being viewed. */
+  path?: string;
+  className?: string;
+}
+
+/** Which of `pages` a path is on, or -1.
+ *
+ *  Matched on the end of the path so a query string, a trailing slash or a
+ *  leftover `.html` cannot lose it: a project whose dev server maps `/stats`
+ *  to `stats.html` serves both spellings, and a bookmark from before the URLs
+ *  lost their extension still resolves to the same page. */
+export function currentPage(path: string, pages: readonly LabPage[]): number {
+  const here = path.split('?')[0]!.split('#')[0]!
+    .replace(/\/$/, '').replace(/\.html$/, '');
+  return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, '')));
+}
+
+/** A project's lab title, doubling as the way to reach its other labs.
+ *
+ *  The menu holds real anchors, not a `<select>` and not buttons. These are
+ *  separate documents, so an `href` is what gets middle-click, cmd-click and
+ *  the back button for free; a select fires a change event and can do none of
+ *  the three. The trigger is a button because it opens something rather than
+ *  going anywhere.
+ *
+ *  Pages accumulate -- a project grows a wall, a dashboard, an ingest page, a
+ *  bench -- and a tab strip is the layout that stops working first. */
+export function LabSwitcher({ title, pages, path, className }: LabSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const menuId = useId();
+  const here = currentPage(path ?? (typeof window === 'undefined'
+    ? '' : window.location.pathname), pages);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close();
+        root.current?.querySelector('button')?.focus();
+      }
+    };
+    // Pointer, not click: a press that starts outside should dismiss before
+    // whatever it lands on reacts, the way every other menu on the page does.
+    const onDown = (e: PointerEvent) => {
+      if (!root.current?.contains(e.target as Node)) close();
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onDown);
+    };
+  }, [open, close]);
+
+  // One lab is not a set to choose from, and a disclosure arrow promising a
+  // menu of itself is worse than no control.
+  if (pages.length < 2) {
+    return <h1 className={`lk-switcher-title${className ? ` ${className}` : ''}`}>{title}</h1>;
+  }
+
+  return (
+    <div className={`lk-switcher${className ? ` ${className}` : ''}`} ref={root}>
+      <h1 className="lk-switcher-title">
+        <button
+          type="button"
+          className="lk-switcher-trigger"
+          aria-expanded={open}
+          aria-haspopup="menu"
+          aria-controls={open ? menuId : undefined}
+          onClick={() => setOpen((was) => !was)}
+        >
+          {title}
+          <span className="lk-switcher-caret" aria-hidden="true" />
+        </button>
+      </h1>
+      {open && (
+        <div className="lk-switcher-menu" id={menuId} role="menu">
+          {pages.map((page, i) => (
+            <a
+              key={page.href}
+              href={page.href}
+              role="menuitem"
+              className="lk-switcher-item"
+              aria-current={i === here ? 'page' : undefined}
+              onClick={close}
+            >
+              {page.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/lab/Workspace.surface.test.tsx

@@ -10,7 +10,8 @@ function fakeHandle(): SurfaceHandle {
     invalidateAll: vi.fn(),
     invalidateRects: vi.fn(),
     registerTile: vi.fn(),
-    registerPainter: vi.fn(() => () => {}),
+    registerClear: vi.fn(() => () => {}),
+  registerPainter: vi.fn(() => () => {}),
     containerRef: vi.fn(),
     getContainer: vi.fn(() => null),
   };

package/src/lab/fitCheck.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { describeElement, findOvershoot } from './fitCheck';
+
+const bound = { top: 0, left: 0, bottom: 600, right: 800 };
+const box = (bottom: number, right: number) => ({ top: 0, left: 0, bottom, right });
+
+describe('findOvershoot', () => {
+  it('returns null when everything is inside the bound', () => {
+    expect(findOvershoot(bound, [{ item: 'a', edges: box(600, 800) }])).toBeNull();
+  });
+
+  it('ignores sub-pixel overshoot within the tolerance', () => {
+    expect(findOvershoot(bound, [{ item: 'a', edges: box(600.8, 800) }])).toBeNull();
+  });
+
+  it('names the item reaching furthest past the bound', () => {
+    const hit = findOvershoot(bound, [
+      { item: 'header', edges: box(640, 800) },
+      { item: 'tile', edges: box(900, 800) },
+      { item: 'footer', edges: box(700, 800) },
+    ]);
+    expect(hit).toEqual({ item: 'tile', by: 300, axis: 'y' });
+  });
+
+  it('compares both axes and reports the worse one', () => {
+    const hit = findOvershoot(bound, [
+      { item: 'tall', edges: box(650, 800) },
+      { item: 'wide', edges: box(600, 1000) },
+    ]);
+    expect(hit).toEqual({ item: 'wide', by: 200, axis: 'x' });
+  });
+
+  it('keeps the first item on a tie, which is the outermost in document order', () => {
+    const hit = findOvershoot(bound, [
+      { item: 'shell', edges: box(616, 800) },
+      { item: 'footer', edges: box(616, 800) },
+    ]);
+    expect(hit?.item).toBe('shell');
+  });
+});
+
+describe('describeElement', () => {
+  it('writes the tag and every class', () => {
+    const el = document.createElement('DIV');
+    el.className = 'lk-shell-body extra';
+    expect(describeElement(el)).toBe('div.lk-shell-body.extra');
+  });
+
+  it('places a classless element by its nearest classed ancestor', () => {
+    const outer = document.createElement('div');
+    outer.className = 'lk-trial';
+    const mid = document.createElement('div');
+    const leaf = document.createElement('canvas');
+    outer.appendChild(mid).appendChild(leaf);
+    expect(describeElement(leaf)).toBe('canvas in div.lk-trial');
+  });
+});

package/src/lab/fitCheck.ts

@@ -0,0 +1,125 @@
+import { useEffect } from 'react';
+
+/** An element's edges, in the same coordinate space as the bound it is tested against. */
+export interface Edges {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}
+
+export interface Overshoot<T> {
+  item: T;
+  /** How far past the bound the item reaches, in px, on whichever axis is worse. */
+  by: number;
+  axis: 'x' | 'y';
+}
+
+/** The item reaching furthest past the bottom or right of `bound`. On a tie the
+ *  first item wins, so given document order it names the outermost box. */
+export function findOvershoot<T>(
+  bound: Edges,
+  items: Iterable<{ item: T; edges: Edges }>,
+  tolerance = 1,
+): Overshoot<T> | null {
+  let worst: Overshoot<T> | null = null;
+  for (const { item, edges } of items) {
+    const y = edges.bottom - bound.bottom;
+    const x = edges.right - bound.right;
+    const by = Math.max(x, y);
+    if (by <= tolerance) continue;
+    if (!worst || by > worst.by) worst = { item, by, axis: y >= x ? 'y' : 'x' };
+  }
+  return worst;
+}
+
+function tagAndClasses(el: Element): string {
+  return el.tagName.toLowerCase() + [...el.classList].map((c) => `.${c}`).join('');
+}
+
+/** `div.lk-shell-body` — the tag and classes, which is what a reader greps for.
+ *  A classless element is placed by its nearest classed ancestor. */
+export function describeElement(el: Element): string {
+  if (el.classList.length > 0) return tagAndClasses(el);
+  let up = el.parentElement;
+  while (up && up.classList.length === 0) up = up.parentElement;
+  return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
+}
+
+function edgesOf(el: Element): Edges {
+  const r = el.getBoundingClientRect();
+  return { top: r.top, left: r.left, bottom: r.bottom, right: r.right };
+}
+
+function* candidates(root: Element): Iterable<{ item: Element; edges: Edges }> {
+  yield { item: root, edges: edgesOf(root) };
+  for (const el of root.querySelectorAll('*')) yield { item: el, edges: edgesOf(el) };
+}
+
+function overflows(el: Element): boolean {
+  return el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+}
+
+/** Why a mounted lab scrolls, or null when it fits. The document only counts
+ *  when the lab is what reaches past the viewport, so a lab embedded in a long
+ *  page does not report the page's own scroll. */
+export function explainLabScroll(lab: Element, shellBody: Element): string | null {
+  if (overflows(shellBody)) {
+    const r = shellBody.getBoundingClientRect();
+    const bound = {
+      top: r.top,
+      left: r.left,
+      bottom: r.top + shellBody.clientHeight,
+      right: r.left + shellBody.clientWidth,
+    };
+    const hit = findOvershoot(bound, candidates(shellBody));
+    return hit
+      ? `.lk-shell-body scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past it (${hit.axis})`
+      : '.lk-shell-body scrolls';
+  }
+
+  const doc = document.scrollingElement ?? document.documentElement;
+  if (!overflows(doc)) return null;
+  const r = lab.getBoundingClientRect();
+  const bound = {
+    top: r.top,
+    left: r.left,
+    bottom: r.top + Math.min(r.height, doc.clientHeight),
+    right: r.left + Math.min(r.width, doc.clientWidth),
+  };
+  const hit = findOvershoot(bound, candidates(lab));
+  return hit
+    ? `the page scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past the lab's box (${hit.axis})`
+    : null;
+}
+
+const SETTLE_MS = 300;
+
+/** Dev only: warns once, naming the culprit, when a mounted lab scrolls. */
+export function useLabFitWarning(labBody: Element | null): void {
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (!labBody || typeof ResizeObserver === 'undefined') return;
+    const lab = labBody.closest('.lk-lab');
+    const shellBody = labBody.closest('.lk-shell-body');
+    if (!lab || !shellBody) return;
+
+    // A shrinking window overflows for a frame or two before the workspace
+    // re-lays out, so only overflow that outlasts the resize is reported.
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const why = explainLabScroll(lab, shellBody);
+        if (!why) return;
+        observer.disconnect();
+        console.warn(`[labkit] <Lab> should fit its container without scrolling, but ${why}.`);
+      }, SETTLE_MS);
+    });
+    for (const el of [document.documentElement, lab, shellBody, labBody]) observer.observe(el);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [labBody]);
+}

package/src/lab/index.ts

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

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

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/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/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

@@ -148,7 +148,7 @@ describe('useLoupe', () => {
     expect(wheel.defaultPrevented).toBe(true);
   });
 
-  it('reports the colour under the aim', () => {
+  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

@@ -14,7 +14,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;
 }

package/src/passthrough/weasel-ui.ts

@@ -37,6 +37,8 @@ export {
   type ChromaCurve,
   type ChromaCurvePoint,
   ComboBox,
+  type ComboBoxCommit,
+  type ComboBoxFilter,
   ComboBoxItem,
   type ComboBoxItemProps,
   type ComboBoxOption,
@@ -100,6 +102,9 @@ export {
   type LayerStackProps,
   type LogicalMod,
   type LogicalModSpec,
+  MenuButton,
+  type MenuButtonItem,
+  type MenuButtonProps,
   MINUS_SIGN,
   NumberField,
   type NumberFieldProps,
@@ -188,6 +193,10 @@ export {
   type TrackCtx,
   type UseReorderDragListOptions,
   type UseRovingTabIndexOptions,
+  useAsyncOptions,
+  type AsyncOption,
+  type AsyncOptionsResult,
+  type UseAsyncOptionsProps,
   useReorderDragList,
   useRovingTabIndex,
   visiblePrefSubtree,

package/src/primitives/FloatingPanel.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+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>
+    ),
+  ],
+};

package/src/primitives/FloatingPanel.test.tsx

@@ -1,5 +1,8 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createMemoryAdapter } from '../state/adapters';
+import { labPrefix } from '../state/labRecords';
+import { Persistence } from '../state/Persistence';
 import { FloatingPanel } from './FloatingPanel';
 
 // The shared stub reports one size for every element, which makes the panel and
@@ -219,34 +222,62 @@ describe('FloatingPanel dragging', () => {
 });
 
 describe('FloatingPanel persistence', () => {
-  it('writes its placement under the given key once dragged', () => {
-    const { panel } = renderPanel(<FloatingPanel storageKey="k">x</FloatingPanel>);
+  const PLACE = `${labPrefix('fp')}value:lab:legend`;
+
+  function persisted(backing: Map<string, unknown>, ui: React.ReactElement) {
+    return render(
+      <Persistence storageKey="fp" storage={createMemoryAdapter(backing)}>
+        <div>{ui}</div>
+      </Persistence>,
+    );
+  }
+
+  it('writes its placement under its persist name once dragged', async () => {
+    const backing = new Map<string, unknown>();
+    const { container } = persisted(backing, <FloatingPanel persist="legend">x</FloatingPanel>);
+    await waitFor(() => expect(container.querySelector('.lk-floating-panel')).not.toBeNull());
+    const panel = container.querySelector('.lk-floating-panel') as HTMLElement;
     fireEvent.pointerDown(panel, { clientX: 100, clientY: 100 });
     fireEvent.pointerMove(panel, { clientX: 140, clientY: 160 });
     fireEvent.pointerUp(panel);
-    const stored = JSON.parse(localStorage.getItem('k') ?? 'null');
-    expect(stored).toMatchObject({ x: expect.any(Number), y: expect.any(Number) });
-    expect(stored).toHaveProperty('anchor');
+    await waitFor(() =>
+      expect(backing.get(PLACE)).toMatchObject({ x: expect.any(Number), y: expect.any(Number) }),
+    );
+    expect(backing.get(PLACE)).toHaveProperty('anchor');
   });
 
-  it('restores what it stored on a later mount', () => {
-    localStorage.setItem('k', JSON.stringify({ x: 140, y: 90, anchor: null }));
-    const { panel } = renderPanel(<FloatingPanel storageKey="k">x</FloatingPanel>);
-    expect(panel.style.left).toBe('140px');
+  it('restores what it stored on a later mount', async () => {
+    const backing = new Map<string, unknown>([[PLACE, { x: 140, y: 90, anchor: null }]]);
+    const { container } = persisted(backing, <FloatingPanel persist="legend">x</FloatingPanel>);
+    // Placed only once both boxes are measured, which can land a render later.
+    await waitFor(() =>
+      expect(
+        (container.querySelector('.lk-floating-panel') as HTMLElement | null)?.style.left,
+      ).toBe('140px'),
+    );
+    const panel = container.querySelector('.lk-floating-panel') as HTMLElement;
     expect(panel.style.top).toBe('90px');
   });
 
-  it('writes nothing when no key is given', () => {
-    const { panel } = renderPanel(<FloatingPanel>x</FloatingPanel>);
+  it('writes nothing without a persist name', async () => {
+    const backing = new Map<string, unknown>();
+    const { container, unmount } = persisted(backing, <FloatingPanel>x</FloatingPanel>);
+    await waitFor(() => expect(container.querySelector('.lk-floating-panel')).not.toBeNull());
+    const panel = container.querySelector('.lk-floating-panel') as HTMLElement;
     fireEvent.pointerDown(panel, { clientX: 100, clientY: 100 });
     fireEvent.pointerMove(panel, { clientX: 140, clientY: 160 });
     fireEvent.pointerUp(panel);
-    expect(localStorage.length).toBe(0);
+    unmount();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(backing.size).toBe(0);
   });
 
-  it('survives a corrupt stored value rather than throwing', () => {
-    localStorage.setItem('k', '{{{');
-    expect(() => renderPanel(<FloatingPanel storageKey="k">x</FloatingPanel>)).not.toThrow();
+  it('forgets its placement with no provider above it', () => {
+    const { panel } = renderPanel(<FloatingPanel persist="legend">x</FloatingPanel>);
+    fireEvent.pointerDown(panel, { clientX: 100, clientY: 100 });
+    fireEvent.pointerMove(panel, { clientX: 140, clientY: 160 });
+    fireEvent.pointerUp(panel);
+    expect(localStorage.length).toBe(0);
   });
 });