@weasel-js/labkit 1.8.0 → 1.8.1

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

@@ -3,9 +3,10 @@
  * `SurfaceContext` in production — so `useSurfaceOptional()` always answered
  * null and a tile registered from inside a trial reached nothing.
  *
- * The surface is anchored to `.lk-lab__body` rather than wrapped around the
- * workspace: `.lk-lab__body > .lk-workspace { min-width: 0 }` is a direct-child
- * selector, so an extra element between them silently drops that rule.
+ * The surface's layers sit in `.lk-lab__body` beside the workspace rather than
+ * wrapped around it: `.lk-lab__body > .lk-workspace { min-width: 0 }` is a
+ * direct-child selector, so an extra element between them silently drops that
+ * rule.
  */
 import { act } from '@testing-library/react';
 import { renderSettled } from '@weasel-js/react/testing/renderSettled';
@@ -84,19 +85,29 @@ describe('<Lab> surface provider', () => {
     expect(typeof (seen as unknown as SurfaceHandle).registerTile).toBe('function');
   });
 
-  it('stacks an under and an over buffer inside the lab body', async () => {
+  it('stacks an under and an over buffer, each in its own layer of the lab body', async () => {
     const { container } = await renderSettled(
       <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />,
     );
-    const canvases = container.querySelectorAll('.lk-lab__body > canvas.lk-lab__surface');
-    expect(canvases).toHaveLength(2);
+    const layers = container.querySelectorAll('.lk-lab__body > .lk-lab__layer');
     // Source order, because the z-index that separates them is in a stylesheet
     // jsdom does not resolve — this is a proxy for the stacking, not proof of
     // it. The real check is a browser.
-    expect([...canvases].map((c) => c.className)).toEqual([
-      'lk-lab__surface lk-lab__surface--under',
-      'lk-lab__surface lk-lab__surface--over',
+    expect([...layers].map((l) => l.className)).toEqual([
+      'lk-lab__layer lk-lab__layer--under',
+      'lk-lab__layer lk-lab__layer--over',
     ]);
+    for (const layer of layers)
+      expect(layer.querySelector('canvas.lk-lab__surface')).not.toBeNull();
+  });
+
+  it('measures tile rects against the over layer', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />,
+    );
+    expect((seen as SurfaceHandle).getContainer()).toBe(
+      container.querySelector('.lk-lab__layer--over'),
+    );
   });
 
   it('hands a tenant whichever of the two it asks for', async () => {

package/src/lab/Lab.tsx

@@ -1,11 +1,9 @@
-import { type ColorList, colorAt, colorCount, resolveTheme, type Theme } from '@weasel-js/theme';
+import { type ColorList, colorCount, type Theme } from '@weasel-js/theme';
 import { ThemeProvider, useResolvedColorMode } from '@weasel-js/theme/react';
 import {
   type CSSProperties,
   type ReactNode,
-  useCallback,
   useEffect,
-  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -24,21 +22,17 @@ import {
 } from '../chrome/LabChrome';
 import type { LabContribution } from '../chrome/labTypes';
 import type { TrialContribution } from '../chrome/types';
+import { ClockRegistryContext, createClockRegistry } from '../clock/clockRegistry';
+import { useClockLoop } from '../clock/useClockLoop';
 import type { ConfigRule, ControlRenderer } from '../config/types';
 import type { InstrumentList } from '../instrument/types';
 import { Split } from '../primitives/Split';
-import { defaultStorage, noneAdapter } from '../state/adapters';
 import { LabStoreContext } from '../state/context';
-import { type OpenedLabStore, openLabStore } from '../state/openLabStore';
 import { PersistenceContext } from '../state/Persistence';
-import { createRecordCache } from '../state/records';
-import { createLabStore, type LabStore } from '../state/store';
 import type { LabDensity, LabMode, StorageAdapter, TrialRecord } from '../state/types';
 import { useOpenOnce, useWarnIgnoredChange } from '../state/useOpenOnce';
 import { usePersistedState } from '../state/usePersistedState';
-import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
-import { useSurfaceCanvas, useSurfaceOptional } from '../surface/useSurfaceTile';
-import { type SurfaceFrame, useTiledSurface } from '../surface/useTiledSurface';
+import { useSurfaceOptional } from '../surface/useSurfaceTile';
 import { interstellarTheme } from '../theme/interstellar';
 import type { TrialTool } from '../tools/types';
 import { Trial } from '../trial/Trial';
@@ -55,9 +49,20 @@ import { LabContext, type LabContextValue } from './LabContext';
 import { LabHeader, LabThemeSwitcher } from './LabHeader';
 import { LabPalette } from './LabPalette';
 import { LabShell } from './LabShell';
+import { LabSurface } from './LabSurface';
 import type { LabPage } from './LabSwitcher';
 import { LabZoom } from './LabZoom';
+import { buildNebula } from './nebula';
+import {
+  type OpenedLab,
+  openStoredLab,
+  openUnstoredLab,
+  type PresentationSeed,
+  presentStorageKey,
+} from './openLab';
 import { createPanelHostRegistry, PanelHostContext } from './panelHost';
+import { hasPresentParam, PresentationContext } from './presentation';
+import { useFocusPick } from './useFocusPick';
 import { type PanelDescriptor, type TrialLayout, Workspace } from './Workspace';
 
 interface LabBaseProps {
@@ -104,6 +109,10 @@ interface LabBaseProps {
   labChrome?: readonly LabContribution[];
   /** Built-in contribution ids to drop. Throws on an id that is not there. */
   suppress?: readonly string[];
+  /** Whether a double-click on a trial also opens it in its lightbox, beside
+   *  the title bar's expand toggle every trial has. Off by default; a
+   *  function decides per trial, by its record. */
+  expandOnDoubleClick?: boolean | ((trial: TrialRecord) => boolean);
   /** Offer the header's add-trial control. Default `true`; a lab that opens
    *  trials some other way passes `false`. */
   addTrial?: boolean;
@@ -121,6 +130,15 @@ interface LabBaseProps {
    *  Keys are config paths (checked first) or leaf kinds. Memoize or hoist. */
   controls?: Record<string, ControlRenderer>;
   children?: ReactNode;
+  /** Start presenting: one trial, opened on `seed`, without the lab's chrome or
+   *  its own. `?present` in the page's URL does the same. Read once, at mount.
+   *  A stored lab presents from its own records, under `storageKey` +
+   *  `':present'`, so an embed never shows or changes the full lab's trials. */
+  present?: boolean;
+  /** The trial a lab that starts presenting opens on. A store that already
+   *  holds a trial opened on this same seed keeps it; a changed seed replaces
+   *  it. Ignored unless the lab starts presenting. */
+  seed?: PresentationSeed;
 }
 
 /** Props for `<Lab>`. With a `storageKey` the lab persists — to IndexedDB
@@ -132,61 +150,6 @@ export type LabProps = LabBaseProps &
     | { storageKey: string; storage?: StorageAdapter }
   );
 
-interface OpenedLab extends OpenedLabStore {
-  marks: ReadonlyMap<string, unknown>;
-}
-
-function seedDefaultTrial(
-  store: LabStore,
-  instruments: InstrumentList,
-  defaultInstrument: string,
-): void {
-  if (store.getState().trials.length > 0) return;
-  const record = addTrialOp([], instruments, defaultInstrument)[0];
-  if (!record) return;
-  const { undoStack: _undoStack, ...rest } = record;
-  store.getState().addTrial(rest);
-}
-
-/** A lab with nothing to load renders at once. Its records hold
- *  `usePersistedState` values for the session and write nothing. */
-function openUnstoredLab({ instruments, defaultInstrument, mode }: LabProps): OpenedLab {
-  const store = createLabStore({ initialMode: mode ?? 'auto', instruments });
-  seedDefaultTrial(store, instruments, defaultInstrument);
-  const records = createRecordCache({ storage: noneAdapter, prefix: '', writable: false });
-  return { store, records, close: () => records.close(), marks: new Map() };
-}
-
-async function openStoredLab(
-  { instruments, defaultInstrument, mode }: LabProps,
-  storageKey: string,
-  storage: StorageAdapter | undefined,
-): Promise<OpenedLab> {
-  // The store reads the instruments' serializers and defaults while it is being
-  // built, so they go in with it rather than being pushed onto it afterwards.
-  const opened = await openLabStore({
-    storageKey,
-    storage: storage ?? (await defaultStorage()),
-    initialMode: mode ?? 'auto',
-    instruments,
-  });
-  seedDefaultTrial(opened.store, instruments, defaultInstrument);
-  const marks = new Map<string, unknown>();
-  await Promise.all(
-    opened.store.getState().trials.map(async (trial) => {
-      const kept = instruments.find((i) => i.name === trial.instrumentName)?.annotations?.storage;
-      if (!kept) return;
-      try {
-        marks.set(trial.id, await kept.load());
-      } catch (error) {
-        console.warn(`[labkit] could not load the marks of trial "${trial.id}"`, error);
-        marks.set(trial.id, null);
-      }
-    }),
-  );
-  return { ...opened, marks };
-}
-
 function LabFallback({
   title,
   mode,
@@ -214,35 +177,6 @@ function LabFallback({
   );
 }
 
-// Fixed spread of nebula blob positions / sizes / fall-off stops. Colors
-// supplied via the `nebula` prop are slotted into these slots in order;
-// callers passing more than 5 wrap around (intentional — keeps the look
-// readable and bounded).
-const NEBULA_SLOTS = [
-  { cx: '18%', cy: '30%', sx: '60%', sy: '80%', stop: '70%' },
-  { cx: '78%', cy: '70%', sx: '55%', sy: '90%', stop: '65%' },
-  { cx: '50%', cy: '50%', sx: '50%', sy: '70%', stop: '75%' },
-  { cx: '12%', cy: '82%', sx: '50%', sy: '70%', stop: '70%' },
-  { cx: '85%', cy: '18%', sx: '55%', sy: '80%', stop: '70%' },
-] as const;
-
-function buildNebula(
-  list: ColorList,
-  theme: Theme,
-  mode: 'light' | 'dark',
-  density: string,
-): string {
-  const ctx = { theme, resolved: resolveTheme(theme, { mode, density }) };
-  const n = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
-  const colors = Array.from({ length: n }, (_, i) => colorAt(list, i, ctx));
-  const blobs = colors.map((c, i) => {
-    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p.sx} ${p.sy} at ${p.cx} ${p.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p.stop})`;
-  });
-  blobs.push('radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)');
-  return blobs.join(', ');
-}
-
 /** The strip holding the sidebar beside the tool rail and workspace. Its own component
  *  because the width is a persisted value, and `LabRuntime` renders the
  *  persistence provider it reads from. */
@@ -310,13 +244,22 @@ export function Lab(props: LabProps) {
   if (process.env.NODE_ENV !== 'production' && props.instruments.length === 0) {
     throw new Error('[labkit] <Lab> requires a non-empty `instruments` array');
   }
-  const { storageKey, storage } = props;
-  useWarnIgnoredChange('<Lab>', { storageKey, storage });
-  const opened = useOpenOnce<OpenedLab>(() =>
-    storageKey === undefined ? openUnstoredLab(props) : openStoredLab(props, storageKey, storage),
-  );
+  const { storageKey, storage, present } = props;
+  useWarnIgnoredChange('<Lab>', { storageKey, storage, present });
+  const [startsPresenting] = useState(() => present === true || hasPresentParam());
+  if (process.env.NODE_ENV !== 'production' && props.seed && !startsPresenting) {
+    warnSeedIgnored();
+  }
+  const opened = useOpenOnce<OpenedLab>(() => {
+    const seed = startsPresenting ? (props.seed ?? {}) : undefined;
+    if (storageKey === undefined) return openUnstoredLab(props, seed);
+    const key = startsPresenting ? presentStorageKey(storageKey) : storageKey;
+    return openStoredLab(props, key, storage, seed);
+  });
   if (!opened) {
     if (props.fallback !== undefined) return props.fallback;
+    // An embed shows nothing until its trial is ready, never the lab's shell.
+    if (startsPresenting) return null;
     return (
       <LabFallback
         title={props.title}
@@ -328,7 +271,14 @@ export function Lab(props: LabProps) {
       />
     );
   }
-  return <LabRuntime {...props} opened={opened} />;
+  return <LabRuntime {...props} opened={opened} startsPresenting={startsPresenting} />;
+}
+
+let seedWarned = false;
+function warnSeedIgnored(): void {
+  if (seedWarned) return;
+  seedWarned = true;
+  console.warn('[labkit] <Lab> reads `seed` only when it starts presenting; it is ignored here');
 }
 
 function LabRuntime({
@@ -344,6 +294,7 @@ function LabRuntime({
   chrome,
   labChrome,
   suppress,
+  expandOnDoubleClick = false,
   addTrial,
   zoom = true,
   tools,
@@ -351,7 +302,8 @@ function LabRuntime({
   controls,
   children,
   opened,
-}: LabProps & { opened: OpenedLab }) {
+  startsPresenting,
+}: LabProps & { opened: OpenedLab; startsPresenting: boolean }) {
   const { store } = opened;
 
   // The store opened against the list <Lab> mounted with; a later list reaches
@@ -362,10 +314,26 @@ function LabRuntime({
 
   const trials = useStore(store, (s) => s.trials);
   const [cameras] = useState(createCameraRegistry);
+  const [clocks] = useState(createClockRegistry);
+  useClockLoop(clocks);
   const [focusPick, setFocusPick] = useState<string | null>(null);
   const focusedTrialId = trials.some((t) => t.id === focusPick)
     ? focusPick
     : (trials[0]?.id ?? null);
+  // `mount` when the lab started presenting, `enter` when asked to since.
+  const [presentedBy, setPresentedBy] = useState<'mount' | 'enter' | null>(
+    startsPresenting ? 'mount' : null,
+  );
+  const presenting = presentedBy !== null;
+  const presentation = useMemo(
+    () => ({
+      active: presenting,
+      enter: () => setPresentedBy((by) => by ?? 'enter'),
+      exit: () => setPresentedBy(null),
+      trialId: presenting ? focusedTrialId : null,
+    }),
+    [presenting, focusedTrialId],
+  );
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
   const modeValue = useStore(store, (s) => s.mode);
   const layout = useStore(store, (s) => s.layout);
@@ -377,102 +345,22 @@ function LabRuntime({
   const panelHostsRef = useRef<ReturnType<typeof createPanelHostRegistry> | null>(null);
   if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
 
-  // One shared drawing surface for the whole lab, anchored to the body — tile
-  // rects compose against it, and both buffers compose against the same rects.
-  // `Workspace` invalidates rects when the grid moves something a
-  // ResizeObserver cannot see. A host that already owns a surface keeps it: a
-  // lab embedded in a larger shared-surface app must not open a second GL
-  // tenancy, and mounts no buffer of its own.
-  const outerSurface = useSurfaceOptional();
-  const outerOver = useSurfaceCanvas('over');
-  const outerUnder = useSurfaceCanvas('under');
-  const [ownOver, setOwnOver] = useState<HTMLCanvasElement | null>(null);
-  const [ownUnder, setOwnUnder] = useState<HTMLCanvasElement | null>(null);
-  const ownOverRef = useRef<HTMLCanvasElement | null>(null);
-  const ownUnderRef = useRef<HTMLCanvasElement | null>(null);
-  const bufferRef = useRef({ w: 0, h: 0 });
-  const surfaceRef = useRef<ReturnType<typeof useTiledSurface> | null>(null);
-
-  // Sizing the buffer clears all of it, so every tile has to repaint — not
-  // only the one whose move triggered the measurement. Both buffers are sized
-  // together off one comparison: they are the same box, so a tenant of either
-  // is looking at the same rects, and one invalidateAll covers both.
-  const onFrame = useCallback((frame: SurfaceFrame) => {
-    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c) => c !== null);
-    if (canvases.length === 0) return;
-    const w = Math.round(frame.size.width * frame.dpr);
-    const h = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w !== w || bufferRef.current.h !== h) {
-      bufferRef.current = { w, h };
-      for (const c of canvases) {
-        c.width = w;
-        c.height = h;
-        c.style.width = `${frame.size.width}px`;
-        c.style.height = `${frame.size.height}px`;
-      }
-      surfaceRef.current?.invalidateAll();
-      return;
-    }
-    // A same-size re-tile does not go through here: assigning `width` its own
-    // value resizes nothing, so it clears nothing. The tenants clear, through
-    // `registerClear`.
-  }, []);
-
-  const ownSurface = useTiledSurface({ onFrame });
-  // Not `useLatest`: `onFrame` reads it, and is needed before the surface exists.
-  useInsertionEffect(() => {
-    surfaceRef.current = ownSurface;
-  }, [ownSurface]);
   const [labBody, setLabBody] = useState<HTMLDivElement | null>(null);
-  const attachOwnSurface = ownSurface.containerRef;
-  const labBodyRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      setLabBody(el);
-      if (!outerSurface) attachOwnSurface(el);
-    },
-    [outerSurface, attachOwnSurface],
-  );
   useLabFitWarning(labBody);
 
+  useFocusPick(labBody, store, setFocusPick);
+
+  // Only a lab asked to present has a workspace to go back to.
   useEffect(() => {
-    if (!labBody) return;
-    const pick = (node: unknown): void => {
-      const owned = new Set(store.getState().trials.map((t) => t.id));
-      const nearest = (from: Element | null | undefined) =>
-        from?.closest<HTMLElement>('.lk-trial[data-trial-id]') ?? null;
-      let trial =
-        typeof (node as Element | null)?.closest === 'function' ? nearest(node as Element) : null;
-      // A trial can hold a lab of its own, whose trials this lab does not own.
-      while (trial && !owned.has(trial.dataset.trialId ?? '')) trial = nearest(trial.parentElement);
-      if (trial?.dataset.trialId) setFocusPick(trial.dataset.trialId);
-    };
-    const onInput = (event: Event): void => pick(event.target);
-    // Focus moving into a frame fires nothing in this document: the window
-    // blurs, and the frame is the active element once it has.
-    let pending: ReturnType<typeof setTimeout> | undefined;
+    if (presentedBy !== 'enter' || !labBody) return;
     const doc = labBody.ownerDocument;
-    const win = doc.defaultView;
-    const onBlur = (): void => {
-      clearTimeout(pending);
-      pending = setTimeout(() => pick(doc.activeElement), 0);
-    };
-    labBody.addEventListener('pointerdown', onInput, true);
-    labBody.addEventListener('focusin', onInput, true);
-    win?.addEventListener('blur', onBlur);
-    return () => {
-      clearTimeout(pending);
-      labBody.removeEventListener('pointerdown', onInput, true);
-      labBody.removeEventListener('focusin', onInput, true);
-      win?.removeEventListener('blur', onBlur);
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape' || event.defaultPrevented) return;
+      setPresentedBy(null);
     };
-  }, [labBody, store]);
-  const surface = outerSurface ?? ownSurface;
-  const surfaceCanvases = useMemo(
-    () =>
-      outerSurface ? { over: outerOver, under: outerUnder } : { over: ownOver, under: ownUnder },
-    [outerSurface, outerOver, outerUnder, ownOver, ownUnder],
-  );
-
+    doc.addEventListener('keydown', onKeyDown);
+    return () => doc.removeEventListener('keydown', onKeyDown);
+  }, [presentedBy, labBody]);
   const workspacePanels = useMemo<PanelDescriptor[]>(
     () =>
       Object.entries(undockedPanels).map(([key, panel]) => ({
@@ -558,6 +446,7 @@ function LabRuntime({
               : w,
           ),
         }));
+        clocks.get(id)?.reset();
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
@@ -578,6 +467,7 @@ function LabRuntime({
       controls,
     };
   }, [
+    clocks,
     instruments,
     trials,
     focusedTrialId,
@@ -611,6 +501,14 @@ function LabRuntime({
       onReorder={(ids) => contextValue.reorderTrials(ids)}
       layout={layout as TrialLayout}
       onLayoutChange={(next) => store.getState().setLayout(next)}
+      expandOnDoubleClick={
+        typeof expandOnDoubleClick === 'function'
+          ? (id) => {
+              const trial = trials.find((t) => t.id === id);
+              return trial ? expandOnDoubleClick(trial) : false;
+            }
+          : expandOnDoubleClick
+      }
     >
       {trials.map((w) => (
         <Trial key={w.id} id={w.id} chrome={chrome} suppress={suppress} />
@@ -623,65 +521,42 @@ function LabRuntime({
       <PersistenceContext.Provider value={opened.records}>
         <AnnotationPreloadContext.Provider value={opened.marks}>
           <LabContext.Provider value={contextValue}>
-            <CameraRegistryContext.Provider value={cameras}>
-              <ThemeProvider
-                theme={theme}
-                selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
-                className="lk-lab"
-                style={backdropStyle}
-              >
-                <LabShell
-                  title={title ?? 'Labkit'}
-                  mode={modeValue}
-                  {...(pages ? { pages } : {})}
-                  {...(path !== undefined ? { path } : {})}
-                  footer={
-                    hasFooterChrome ? (
-                      <>
-                        {footer}
-                        <LabFooterRegion contributions={labChromeAll} />
-                      </>
-                    ) : (
-                      footer
-                    )
-                  }
-                  header={
-                    <>
-                      <LabHeader {...(addTrial !== undefined ? { addTrial } : {})} />
-                      {zoom ? <LabZoom /> : null}
-                      {children}
-                      <LabHeaderRegion contributions={labChromeAll} />
-                      <LabThemeSwitcher />
-                    </>
-                  }
-                >
-                  <PanelHostContext.Provider value={panelHostsRef.current}>
-                    <SurfaceContext.Provider value={surface}>
-                      <SurfaceCanvasContext.Provider value={surfaceCanvases}>
-                        <div className="lk-lab__body" ref={labBodyRef}>
-                          {outerSurface ? null : (
-                            // Two buffers stacked around the trials, both inert —
-                            // each tile takes input from its own box. A tile's marks
-                            // annotate the instrument's DOM from over it; an opaque
-                            // renderer sits under it, so the pane can still hold a
-                            // label. The under one is first so it paints first.
-                            <>
-                              <canvas
-                                className="lk-lab__surface lk-lab__surface--under"
-                                ref={(el) => {
-                                  ownUnderRef.current = el;
-                                  setOwnUnder(el);
-                                }}
-                              />
-                              <canvas
-                                className="lk-lab__surface lk-lab__surface--over"
-                                ref={(el) => {
-                                  ownOverRef.current = el;
-                                  setOwnOver(el);
-                                }}
-                              />
-                            </>
-                          )}
+            <PresentationContext.Provider value={presentation}>
+              <CameraRegistryContext.Provider value={cameras}>
+                <ClockRegistryContext.Provider value={clocks}>
+                  <ThemeProvider
+                    theme={theme}
+                    selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
+                    className={presenting ? 'lk-lab lk-lab--present' : 'lk-lab'}
+                    style={backdropStyle}
+                  >
+                    <LabShell
+                      title={title ?? 'Labkit'}
+                      mode={modeValue}
+                      {...(pages ? { pages } : {})}
+                      {...(path !== undefined ? { path } : {})}
+                      footer={
+                        hasFooterChrome ? (
+                          <>
+                            {footer}
+                            <LabFooterRegion contributions={labChromeAll} />
+                          </>
+                        ) : (
+                          footer
+                        )
+                      }
+                      header={
+                        <>
+                          <LabHeader {...(addTrial !== undefined ? { addTrial } : {})} />
+                          {zoom && !presenting ? <LabZoom /> : null}
+                          {children}
+                          <LabHeaderRegion contributions={labChromeAll} />
+                          <LabThemeSwitcher />
+                        </>
+                      }
+                    >
+                      <PanelHostContext.Provider value={panelHostsRef.current}>
+                        <LabSurface bodyRef={setLabBody}>
                           {hasPaneChrome ? (
                             <LabPanes contributions={labChromeAll}>
                               <LabPalette contributions={labChromeAll} />
@@ -693,13 +568,13 @@ function LabRuntime({
                               {workspace}
                             </>
                           )}
-                        </div>
-                      </SurfaceCanvasContext.Provider>
-                    </SurfaceContext.Provider>
-                  </PanelHostContext.Provider>
-                </LabShell>
-              </ThemeProvider>
-            </CameraRegistryContext.Provider>
+                        </LabSurface>
+                      </PanelHostContext.Provider>
+                    </LabShell>
+                  </ThemeProvider>
+                </ClockRegistryContext.Provider>
+              </CameraRegistryContext.Provider>
+            </PresentationContext.Provider>
           </LabContext.Provider>
         </AnnotationPreloadContext.Provider>
       </PersistenceContext.Provider>

package/src/lab/LabLightbox.browser.test.less

@@ -0,0 +1,17 @@
+.lk-lightbox-lab-host {
+  width: 900px;
+  height: 560px;
+}
+
+// The target fills its pane in one flat color, so a mark is the only thing
+// that can change a pixel inside it.
+.lk-lightbox-lab-pane {
+  width: 100%;
+  height: 60%;
+  background: rgb(0 0 255);
+}
+
+.lk-lightbox-lab-solid {
+  width: 100%;
+  height: 30%;
+}