@weasel-js/labkit 1.4.0 → 1.4.2

package/src/primitives/FloatingPanel.tsx

@@ -1,3 +1,4 @@
+import { openPointerSession, type PointerSession } from '@weasel-js/core';
 import type React from 'react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -130,67 +131,84 @@ export function FloatingPanel({
     .placements.get(ITEM_ID);
 
   const dragging = useRef<{ x: number; y: number } | null>(null);
-  /** Pressed but not yet moved far enough to be a drag. */
-  const pending = useRef<{ x: number; y: number; pointerId: number } | null>(null);
+  const session = useRef<PointerSession | null>(null);
   const [isDragging, setDragging] = useState(false);
+  // A drag outlives the render that started it, so the reducer's inputs are
+  // read here and not from that render's closure — a container resized
+  // mid-drag would otherwise place the panel against its old box.
+  const layout = useRef({ container, options, item });
+  layout.current = { container, options, item };
+
+  useEffect(() => () => session.current?.cancel(), []);
 
   const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     if (isInteractive(e.target)) return;
     // The canvas stack underneath owns pan/zoom on the same pointer events.
     e.stopPropagation();
+    const origin = e.currentTarget;
+    const pointerId = e.pointerId;
+    const start = { x: e.clientX, y: e.clientY };
+
+    const end = () => {
+      session.current = null;
+      if (!dragging.current) return;
+      dragging.current = null;
+      setDragging(false);
+      try {
+        origin.releasePointerCapture?.(pointerId);
+      } catch {
+        // Capture is already gone whenever the session ended by losing it.
+      }
+    };
+
     // Armed, not capturing. Capture retargets mouseup to this element, and the
     // browser then synthesizes no `click` on the child under the cursor — so
     // capturing on press makes every non-native control in the panel dead to a
     // real mouse, silently. `isInteractive` only exempts the names it lists; a
     // `role="button"` span, a react-aria control or a canvas is not among them.
-    pending.current = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
-  };
-
-  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-    const armed = pending.current;
-    if (armed && armed.pointerId === e.pointerId && !dragging.current) {
-      if (Math.hypot(e.clientX - armed.x, e.clientY - armed.y) < DRAG_THRESHOLD) return;
-      dragging.current = { x: armed.x, y: armed.y };
-      setDragging(true);
-      e.currentTarget.setPointerCapture?.(e.pointerId);
-    }
-    const from = dragging.current;
-    if (!from) return;
-    const dx = e.clientX - from.x;
-    const dy = e.clientY - from.y;
-    if (dx === 0 && dy === 0) return;
-    dragging.current = { x: e.clientX, y: e.clientY };
-    setPlace(
-      (prev) =>
-        strategy.reduce?.(
-          { at: { [ITEM_ID]: prev }, inner: undefined },
-          {
-            affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,
-            kind: 'drag',
-            payload: { dx, dy },
-          },
-          { container, options, items: [item] },
-        ).at[ITEM_ID] ?? prev,
+    session.current = openPointerSession(
+      origin,
+      e,
+      {
+        onMove: (ev) => {
+          if (!dragging.current) {
+            if (Math.hypot(ev.clientX - start.x, ev.clientY - start.y) < DRAG_THRESHOLD) return;
+            dragging.current = { ...start };
+            setDragging(true);
+            origin.setPointerCapture?.(pointerId);
+          }
+          const from = dragging.current;
+          const dx = ev.clientX - from.x;
+          const dy = ev.clientY - from.y;
+          if (dx === 0 && dy === 0) return;
+          dragging.current = { x: ev.clientX, y: ev.clientY };
+          const { container: box, options: opts, item: only } = layout.current;
+          setPlace(
+            (prev) =>
+              strategy.reduce?.(
+                { at: { [ITEM_ID]: prev }, inner: undefined },
+                {
+                  affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,
+                  kind: 'drag',
+                  payload: { dx, dy },
+                },
+                { container: box, options: opts, items: [only] },
+              ).at[ITEM_ID] ?? prev,
+          );
+        },
+        onEnd: end,
+        onCancel: end,
+      },
+      { capture: false },
     );
   };
 
-  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
-    pending.current = null;
-    if (!dragging.current) return;
-    dragging.current = null;
-    setDragging(false);
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-  };
-
   return (
     <div
       className={className ? `lk-floating-panel ${className}` : 'lk-floating-panel'}
       data-dragging={isDragging ? 'true' : undefined}
       data-placed={rect ? 'true' : undefined}
-      onPointerCancel={endDrag}
       onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={endDrag}
       ref={ref}
       style={
         {

package/src/state/store.test.ts

@@ -673,3 +673,81 @@ describe('undocking a sidebar panel', () => {
     expect(s.getState().undockedPanels).toEqual({});
   });
 });
+
+describe('setTrialTitle', () => {
+  it('holds a title and returns to the instrument name on null', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialTitle('w1', 'Sprocket 7');
+    expect(s.getState().trials[0]?.title).toBe('Sprocket 7');
+    s.getState().setTrialTitle('w1', null);
+    expect(s.getState().trials[0]?.title).toBeUndefined();
+  });
+
+  it('leaves the record alone when the title is unchanged', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialTitle('w1', 'Sprocket 7');
+    const before = s.getState().trials[0];
+    s.getState().setTrialTitle('w1', 'Sprocket 7');
+    expect(s.getState().trials[0]).toBe(before);
+  });
+
+  it('round-trips through storage', () => {
+    vi.useFakeTimers();
+    const storage = createMemoryAdapter();
+    const first = makeStore({ storage });
+    first.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    first.getState().setTrialTitle('w1', 'Sprocket 7');
+    vi.advanceTimersByTime(400);
+    vi.useRealTimers();
+
+    expect(makeStore({ storage }).getState().trials[0]?.title).toBe('Sprocket 7');
+  });
+});
+
+describe('setTrialSectionCollapsed', () => {
+  it('folds one section without touching the others', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialSectionCollapsed('w1', 'settings', true);
+    s.getState().setTrialSectionCollapsed('w1', 'marks', false);
+    expect(s.getState().trials[0]?.collapsedSections).toEqual({ settings: true, marks: false });
+  });
+
+  it('leaves the record alone when the fold is unchanged', () => {
+    const s = makeStore();
+    s.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    s.getState().setTrialSectionCollapsed('w1', 'settings', true);
+    const before = s.getState().trials[0];
+    s.getState().setTrialSectionCollapsed('w1', 'settings', true);
+    expect(s.getState().trials[0]).toBe(before);
+  });
+
+  it('round-trips through storage', () => {
+    vi.useFakeTimers();
+    const storage = createMemoryAdapter();
+    const first = makeStore({ storage });
+    first.getState().addTrial({ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW });
+    first.getState().setTrialSectionCollapsed('w1', 'settings/Shape', true);
+    vi.advanceTimersByTime(400);
+    vi.useRealTimers();
+
+    expect(makeStore({ storage }).getState().trials[0]?.collapsedSections).toEqual({
+      'settings/Shape': true,
+    });
+  });
+
+  it('hydrates a version-3 trial, which carries neither field', () => {
+    const storage = createMemoryAdapter();
+    writeDocument(storage, {
+      trials: [{ id: 'w1', instrumentName: 'T', config: {}, state: {}, view: VIEW }],
+      saves: [],
+      layout: {},
+      mode: 'auto',
+    });
+    const trial = makeStore({ storage }).getState().trials[0];
+    expect(trial?.title).toBeUndefined();
+    expect(trial?.collapsedSections).toBeUndefined();
+  });
+});

package/src/state/store.ts

@@ -35,6 +35,10 @@ export interface LabStoreActions {
   updateTrialConfig: <TC>(id: string, key: keyof TC, value: TC[keyof TC]) => void;
   updateTrialView: (id: string, view: unknown) => void;
   updateTrialSidebarWidth: (id: string, width: number) => void;
+  /** Retitle a trial. `null` returns it to its instrument's name. */
+  setTrialTitle: (id: string, title: string | null) => void;
+  /** Fold or unfold one of a trial's sections. */
+  setTrialSectionCollapsed: (id: string, key: string, collapsed: boolean) => void;
   updateTrialAnnotations: (id: string, doc: unknown) => void;
   updateTrialUndoStack: (
     id: string,
@@ -146,6 +150,29 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       scheduleFlush();
     },
 
+    setTrialTitle: (id, title) => {
+      set((s) => ({
+        trials: s.trials.map((w) => {
+          if (w.id !== id) return w;
+          const next = title === null ? undefined : title;
+          if ((w.title ?? undefined) === next) return w;
+          return { ...w, title: next };
+        }),
+      }));
+      scheduleFlush();
+    },
+
+    setTrialSectionCollapsed: (id, key, collapsed) => {
+      set((s) => ({
+        trials: s.trials.map((w) => {
+          if (w.id !== id) return w;
+          if (w.collapsedSections?.[key] === collapsed) return w;
+          return { ...w, collapsedSections: { ...w.collapsedSections, [key]: collapsed } };
+        }),
+      }));
+      scheduleFlush();
+    },
+
     updateTrialAnnotations: (id, doc) => {
       set((s) => ({
         trials: s.trials.map((w) =>

package/src/state/types.ts

@@ -6,6 +6,15 @@ export interface UndoStack {
   future: unknown[];
 }
 
+/** The trial a per-trial call is coming from. `id` is the id `useTileId`
+ *  scopes a surface tile under, so a consumer keying its own per-trial
+ *  registry and labkit's tiles agree on the key. */
+export interface TrialInfo<TV = unknown> {
+  id: string;
+  /** The trial's view, in whatever shape the instrument keeps it. */
+  view: TV;
+}
+
 /** One trial as the store holds it: which instrument it runs, that
  *  instrument's config and state, the camera, and the undo history. */
 export interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
@@ -16,11 +25,22 @@ export interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
   /** Opaque to labkit: persisted, restored on Reset and handed to the instrument,
    *  but never read into. A 3D lab puts an orbit here and keeps all three. */
   view: TV;
+  /** The config `addTrial` opened this trial on, overlaid on the instrument's
+   *  defaults. Kept so Reset restores the trial's own subject rather than the
+   *  bare defaults. */
+  configSeed?: Partial<TC>;
   /** 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;
+  /** What the title bar reads. Undefined — the state a trial opens in, and the
+   *  one `setTitle(null)` returns it to — means the instrument's name. */
+  title?: string | null;
+  /** Which of the trial's collapsible sections are folded, keyed as
+   *  `TrialChromeContext.collapsedSections` describes. A key that is absent
+   *  takes the section's own default. */
+  collapsedSections?: Record<string, boolean>;
   /** 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/trial/Trial.less

@@ -164,10 +164,14 @@
   }
 }
 
+.lk-trial__titlebar-lead,
 .lk-trial__titlebar-actions {
   display: inline-flex;
   align-items: center;
   gap: 2px;
+}
+
+.lk-trial__titlebar-actions {
   margin-left: auto;
 }
 

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

@@ -0,0 +1,96 @@
+/**
+ * `annotations.targets` is declared once per instrument and called once per
+ * trial, so everything here runs two trials of one instrument: with a single
+ * trial open, a `targets` that ignored the trial it was asked about would look
+ * identical.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { AnnotationTarget } from '../annotations/types';
+import { defineInstrument } from '../instrument/defineInstrument';
+import { Lab } from '../lab/Lab';
+import { LabContext, type LabContextValue } from '../lab/LabContext';
+import type { TrialInfo } from '../state/types';
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => null,
+  ) as unknown as HTMLCanvasElement['getContext'];
+});
+
+const asked: TrialInfo[] = [];
+
+/** The last thing `targets` was told about `id`. */
+function lastAsk(id: string): TrialInfo {
+  const found = [...asked].reverse().find((t) => t.id === id);
+  if (!found) throw new Error(`targets was never called for ${id}`);
+  return found;
+}
+
+const pane: AnnotationTarget = { id: 'pane', ref: { current: null }, content: { w: 200, h: 100 } };
+
+const subject = defineInstrument<Record<string, never>, { subject: string }>({
+  name: 'Subject',
+  defaultConfig: () => ({ subject: 'none' }),
+  initialState: () => ({}),
+  render: (ctx) => (
+    <button
+      type="button"
+      data-testid={`zoom-${ctx.trial.id}`}
+      onClick={() => ctx.trial.setView({ zoom: 3, pan: { x: 0, y: 0 } })}
+    >
+      zoom
+    </button>
+  ),
+  annotations: {
+    targets: (_state, _config, trial) => {
+      asked.push({ id: trial.id, view: trial.view });
+      return [pane];
+    },
+  },
+});
+
+let labRef: LabContextValue | null = null;
+
+function CaptureLab() {
+  return (
+    <LabContext.Consumer>
+      {(value) => {
+        if (value) labRef = value;
+        return null;
+      }}
+    </LabContext.Consumer>
+  );
+}
+
+function mountTwoTrials(): [string, string] {
+  render(
+    <Lab instruments={[subject]} defaultInstrument="Subject">
+      <CaptureLab />
+    </Lab>,
+  );
+  act(() => labRef?.addTrial('Subject'));
+  const ids = labRef?.trials.map((t) => t.id) ?? [];
+  const [a, b] = ids;
+  if (!a || !b) throw new Error('expected two trials');
+  return [a, b];
+}
+
+describe('annotations.targets', () => {
+  beforeEach(() => {
+    asked.length = 0;
+    labRef = null;
+  });
+
+  it('is told which trial is asking', () => {
+    const [a, b] = mountTwoTrials();
+    expect(new Set(asked.map((t) => t.id))).toEqual(new Set([a, b]));
+  });
+
+  it("is told that trial's own view, not the other's", () => {
+    const [a, b] = mountTwoTrials();
+    fireEvent.click(screen.getByTestId(`zoom-${a}`));
+    expect(lastAsk(a).view).toEqual({ zoom: 3, pan: { x: 0, y: 0 } });
+    expect(lastAsk(b).view).toEqual({ zoom: 1, pan: { x: 0, y: 0 } });
+  });
+});

package/src/trial/Trial.test.tsx

@@ -1,6 +1,8 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
-import type { ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
+import { useStore } from 'zustand/react';
+import { f } from '../config/builder';
 import type { Instrument } from '../instrument/types';
 import { Lab } from '../lab/Lab';
 import { LabContext, type LabContextValue } from '../lab/LabContext';
@@ -9,6 +11,8 @@ import { createLabStore } from '../state/store';
 import type { SavedSnapshot, TrialRecord } from '../state/types';
 import { TrialChrome } from './TrialChrome';
 
+const Glyph = () => <svg />;
+
 const stubInstrument: Instrument = {
   name: 'Stub',
   defaultConfig: () => ({}),
@@ -27,16 +31,32 @@ const stubRecord: TrialRecord = {
 
 type ChromeProps = Parameters<typeof TrialChrome>[0];
 
+/** A store holding the stub trial, as `Trial` would have put it there. Title
+ *  and section folds live on the record, so a test that outlives one mount
+ *  keeps its own store and hands it to both. */
+function makeChromeStore() {
+  const store = createLabStore({
+    storageKey: 'test',
+    storage: { read: () => null, write: () => {} },
+  });
+  const { undoStack: _undo, ...seed } = stubRecord;
+  store.getState().addTrial(seed);
+  return store;
+}
+
 function ChromeHarness({
   children,
   labOverrides,
   instrument = stubInstrument,
+  store: storeProp,
   ...props
-}: { children?: ReactNode; labOverrides?: Partial<LabContextValue> } & Partial<ChromeProps>) {
-  const store = createLabStore({
-    storageKey: 'test',
-    storage: { read: () => null, write: () => {} },
-  });
+}: {
+  children?: ReactNode;
+  labOverrides?: Partial<LabContextValue>;
+  store?: ReturnType<typeof createLabStore>;
+} & Partial<ChromeProps>) {
+  const [ownStore] = useState(makeChromeStore);
+  const store = storeProp ?? ownStore;
   const labCtx: LabContextValue = {
     instruments: [instrument],
     trials: [stubRecord],
@@ -56,20 +76,31 @@ function ChromeHarness({
   return (
     <LabStoreContext.Provider value={{ store }}>
       <LabContext.Provider value={labCtx}>
-        <TrialChrome
-          trialId="ws-1"
-          record={stubRecord}
-          instrument={instrument}
-          isLastTrial={false}
-          {...props}
-        >
+        <ChromeFromStore store={store} instrument={instrument} {...props}>
           {children ?? <div data-testid="content">content</div>}
-        </TrialChrome>
+        </ChromeFromStore>
       </LabContext.Provider>
     </LabStoreContext.Provider>
   );
 }
 
+/** Reads the record out of the store the way `Trial` does, so a mutation the
+ *  chrome writes comes back to it. */
+function ChromeFromStore({
+  store,
+  children,
+  ...props
+}: { store: ReturnType<typeof createLabStore>; children: ReactNode } & Partial<ChromeProps> &
+  Pick<ChromeProps, 'instrument'>) {
+  const record = useStore(store, (s) => s.trials.find((t) => t.id === 'ws-1'));
+  if (!record) throw new Error('no stub trial in the store');
+  return (
+    <TrialChrome trialId="ws-1" record={record} isLastTrial={false} {...props}>
+      {children}
+    </TrialChrome>
+  );
+}
+
 describe('<TrialChrome>', () => {
   it('renders children in the content area', () => {
     render(<ChromeHarness />);
@@ -131,6 +162,49 @@ describe('<TrialChrome>', () => {
     expect(screen.getByText('ready')).toBeInTheDocument();
   });
 
+  it('leads the title bar with a contribution that does not set `end`', () => {
+    const { container } = render(
+      <ChromeHarness
+        chrome={[
+          {
+            id: 'subject',
+            region: 'titlebar',
+            item: { icon: Glyph, label: 'Pick subject', onActivate: () => {} },
+          },
+        ]}
+      />,
+    );
+    const titlebar = container.querySelector('.lk-trial__titlebar');
+    if (!titlebar) throw new Error('no title bar');
+    const lead = screen.getByRole('button', { name: 'Pick subject' });
+    const heading = titlebar.querySelector('.lk-trial__title');
+    if (!heading) throw new Error('no title');
+    expect(titlebar.querySelector('.lk-trial__titlebar-lead')).toContainElement(lead);
+    expect(lead.compareDocumentPosition(heading) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it('reads the instrument name until a contribution calls setTitle', () => {
+    render(
+      <ChromeHarness
+        chrome={[
+          {
+            id: 'rename',
+            region: 'titlebar',
+            item: {
+              icon: Glyph,
+              label: 'Rename',
+              onActivate: (ctx) => ctx.setTitle('Sprocket 7'),
+            },
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByRole('region', { name: 'Trial Stub' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }));
+    expect(screen.getByText('Sprocket 7')).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Trial Sprocket 7' })).toBeInTheDocument();
+  });
+
   it('Cmd+S triggers saveSnapshot', () => {
     const saveSnapshot = vi.fn();
     render(<ChromeHarness labOverrides={{ saveSnapshot }} />);
@@ -168,3 +242,86 @@ describe('chrome regions in a mounted lab', () => {
     expect(document.querySelector('.lk-lab')).toBeTruthy();
   });
 });
+
+describe('<TrialChrome> — state that outlives a mount', () => {
+  const renameChrome: ChromeProps['chrome'] = [
+    {
+      id: 'rename',
+      region: 'titlebar',
+      item: {
+        icon: Glyph,
+        label: 'Rename',
+        onActivate: (ctx) => ctx.setTitle('Sprocket 7'),
+      },
+    },
+  ];
+
+  const sectionChrome: ChromeProps['chrome'] = [
+    {
+      id: 'notes',
+      region: 'sidebar',
+      item: { title: 'Notes', body: <p data-testid="notes-body">notes</p> },
+    },
+  ];
+
+  it('keeps a title across a remount', () => {
+    const store = makeChromeStore();
+    const first = render(<ChromeHarness store={store} chrome={renameChrome} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }));
+    first.unmount();
+
+    render(<ChromeHarness store={store} chrome={renameChrome} />);
+    expect(screen.getByRole('region', { name: 'Trial Sprocket 7' })).toBeInTheDocument();
+  });
+
+  it('keeps a folded sidebar section across a remount', () => {
+    const store = makeChromeStore();
+    const first = render(<ChromeHarness store={store} chrome={sectionChrome} />);
+    expect(screen.getByTestId('notes-body')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Notes' }));
+    expect(screen.queryByTestId('notes-body')).toBeNull();
+    first.unmount();
+
+    render(<ChromeHarness store={store} chrome={sectionChrome} />);
+    expect(screen.getByRole('button', { name: 'Notes' })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByTestId('notes-body')).toBeNull();
+  });
+
+  it('keeps a folded settings group across a remount', () => {
+    const sectioned: Instrument = {
+      ...stubInstrument,
+      config: f.schema({ size: f.number(1).section('Shape') }),
+    };
+    const store = makeChromeStore();
+    const first = render(<ChromeHarness store={store} instrument={sectioned} />);
+    const twisty = screen.getByRole('button', { name: 'Shape' });
+    expect(twisty).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.click(twisty);
+    first.unmount();
+
+    render(<ChromeHarness store={store} instrument={sectioned} />);
+    expect(screen.getByRole('button', { name: 'Shape' })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('reopens a section that starts collapsed, and keeps it open across a remount', () => {
+    const collapsedChrome: ChromeProps['chrome'] = [
+      {
+        id: 'notes',
+        region: 'sidebar',
+        item: {
+          title: 'Notes',
+          defaultCollapsed: true,
+          body: <p data-testid="notes-body">notes</p>,
+        },
+      },
+    ];
+    const store = makeChromeStore();
+    const first = render(<ChromeHarness store={store} chrome={collapsedChrome} />);
+    expect(screen.queryByTestId('notes-body')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Notes' }));
+    first.unmount();
+
+    render(<ChromeHarness store={store} chrome={collapsedChrome} />);
+    expect(screen.getByTestId('notes-body')).toBeInTheDocument();
+  });
+});

package/src/trial/Trial.tsx

@@ -130,7 +130,9 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   const annotationsCap = instrument.annotations;
   const targetsRef = useRef<() => readonly AnnotationTargetInfo[]>(() => []);
   targetsRef.current = () =>
-    annotationsCap ? annotationsCap.targets(record.state, record.config) : [];
+    annotationsCap
+      ? annotationsCap.targets(record.state, record.config, { id: record.id, view: record.view })
+      : [];
 
   // One store for the trial's lifetime. Marks do not survive a reload yet —
   // the storage slot is 3d.
@@ -474,6 +476,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
       capability={annotationsCap}
       state={record.state}
       config={record.config}
+      trial={{ id: record.id, view: record.view }}
       annotations={annotations}
       activeToolId={resolvedToolId}
     />