@weasel-js/labkit 1.5.2 → 1.6.1

package/src/controls/inDialog.test.tsx

@@ -0,0 +1,100 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { f } from '../config/builder';
+import { withValueAtPath } from '../config/path';
+import { resolveConfigSchema } from '../config/resolve';
+import { ControlPanel } from './ControlPanel';
+import { summarizeValue } from './inDialog';
+
+function Panel({ schema }: { schema: Parameters<typeof resolveConfigSchema>[0] }) {
+  const resolved = resolveConfigSchema(schema);
+  const [config, setConfig] = useState<Record<string, unknown>>(
+    schema.defaults() as Record<string, unknown>,
+  );
+  return (
+    <>
+      <ControlPanel
+        schema={resolved}
+        config={config}
+        setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
+      />
+      <output data-testid="config">{JSON.stringify(config)}</output>
+    </>
+  );
+}
+
+describe('f.list', () => {
+  it('summarizes the list on the row and edits it in a dialog', () => {
+    const schema = f.schema({
+      icons: f.list(['**/node_modules/**', 'dist']).label('Draw as icons'),
+    });
+    render(<Panel schema={schema} />);
+    const trigger = screen.getByRole('button', { name: 'Edit Draw as icons' });
+    expect(trigger.textContent).toContain('**/node_modules/**, dist');
+
+    fireEvent.click(trigger);
+    fireEvent.change(screen.getByRole('textbox', { name: 'Draw as icons 2' }), {
+      target: { value: 'build' },
+    });
+    expect(screen.getByTestId('config').textContent).toBe(
+      JSON.stringify({ icons: ['**/node_modules/**', 'build'] }),
+    );
+  });
+
+  it('is the kind an f.value with a string-array default takes', () => {
+    const resolved = resolveConfigSchema(f.schema({ names: f.value(['a']) }));
+    expect(resolved.group.children.names).toMatchObject({ kind: 'list' });
+  });
+});
+
+describe('.dialog', () => {
+  it('hosts any renderer in the dialog, handed the row context', () => {
+    const schema = f.schema({
+      note: f.string('hi').dialog(({ value, setValue }) => (
+        <button type="button" onClick={() => setValue(`${value}!`)}>
+          shout
+        </button>
+      )),
+    });
+    render(<Panel schema={schema} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Edit Note' }));
+    fireEvent.click(screen.getByRole('button', { name: 'shout' }));
+    expect(screen.getByTestId('config').textContent).toBe(JSON.stringify({ note: 'hi!' }));
+  });
+
+  it('takes a summary of its own', () => {
+    const summary = vi.fn((v: unknown) => `${(v as number[]).length} points`);
+    const schema = f.schema({ pts: f.custom('points', [1, 2, 3]).dialog(() => null, { summary }) });
+    render(<Panel schema={schema} />);
+    expect(screen.getByRole('button', { name: 'Edit Pts' }).textContent).toContain('3 points');
+  });
+
+  it('gives way to a later .render, and takes over from an earlier one', () => {
+    const schema = f.schema({
+      a: f
+        .string('x')
+        .dialog(() => null)
+        .render(() => <span>row a</span>),
+      b: f
+        .string('y')
+        .render(() => <span>row b</span>)
+        .dialog(() => null),
+    });
+    render(<Panel schema={schema} />);
+    expect(screen.getByText('row a')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Edit A' })).toBeNull();
+    expect(screen.queryByText('row b')).toBeNull();
+    expect(screen.getByRole('button', { name: 'Edit B' })).toBeTruthy();
+  });
+});
+
+describe('summarizeValue', () => {
+  it('joins lists and names emptiness', () => {
+    expect(summarizeValue(['a', 'b'])).toBe('a, b');
+    expect(summarizeValue([])).toBe('None');
+    expect(summarizeValue('')).toBe('None');
+    expect(summarizeValue(3)).toBe('3');
+    expect(summarizeValue({ a: 1 })).toBe('{"a":1}');
+  });
+});

package/src/controls/inDialog.tsx

@@ -0,0 +1,38 @@
+import { DialogRow } from '@weasel-js/ui';
+import type { ControlRenderer, InDialogOptions } from '../config/types';
+
+export type { InDialogOptions };
+
+/** The one-line summary a dialog row shows when it is given none. */
+export function summarizeValue(value: unknown): string {
+  if (Array.isArray(value)) return value.length === 0 ? 'None' : value.join(', ');
+  if (value === undefined || value === null || value === '') return 'None';
+  return typeof value === 'object' ? JSON.stringify(value) : String(value);
+}
+
+/**
+ * Moves a control into a modal: the row becomes a button showing a summary of
+ * the value, and the button opens a dialog whose body is `body`, handed the
+ * same context a row renderer gets. For a leaf whose editor will never fit a
+ * sidebar row.
+ */
+export function inDialog(body: ControlRenderer, opts: InDialogOptions = {}): ControlRenderer {
+  const summary = opts.summary ?? summarizeValue;
+  return (ctx) => {
+    const { pref, value, auto, setAuto } = ctx;
+    const manual = (pref as { manual?: boolean }).manual === true;
+    return (
+      <DialogRow
+        label={pref.name}
+        description={pref.description}
+        summary={summary(value)}
+        title={opts.title}
+        readout={auto ? 'auto' : undefined}
+        auto={auto}
+        onAutoChange={manual ? undefined : setAuto}
+      >
+        {() => body(ctx)}
+      </DialogRow>
+    );
+  };
+}

package/src/controls/index.ts

@@ -1,4 +1,5 @@
 export { ControlPanel } from './ControlPanel';
+export { type InDialogOptions, inDialog, summarizeValue } from './inDialog';
 export type {
   CheckboxField,
   ColorField,

package/src/index.test.ts

@@ -72,7 +72,7 @@ describe('surface, job and orbit entry points', () => {
     expect(typeof kit.annotationsFromJSON).toBe('function');
     expect(typeof kit.seenFrom).toBe('function');
     expect(typeof kit.fracToWorld).toBe('function');
-    expect(typeof kit.usePanZoom).toBe('function');
+    expect(typeof kit.CameraInput).toBe('function');
     expect(typeof kit.useJob).toBe('function');
     expect(typeof kit.as2DView).toBe('function');
     expect(kit.SurfaceContext).toBeDefined();

package/src/index.ts

@@ -1,4 +1,4 @@
-// The property-panel family, LayerStack, Input, Select, TokenPanel, ToggleBar and Button live in
+// The property-panel family, LayerList, Input, Select, TokenPanel, ToggleBar and Button live in
 // `@weasel-js/ui`; labkit re-exports them so chrome built on labkit needs no
 // direct ui dependency. Named, not `export *` — a star re-export of an external
 // package emits no binding in the bundle.
@@ -8,19 +8,13 @@ export type {
   ButtonProps,
   ButtonSize,
   ButtonVariant,
-  CheckboxRowProps,
-  ColorRowProps,
   CurveFieldProps,
   CurveMark,
-  EffectCardListItem,
-  EffectCardListProps,
-  EffectCardProps,
   IconProps,
   InputProps,
   JogProps,
-  LayerStackItem,
-  LayerStackProps,
-  NumberRowProps,
+  PropertyControlProps,
+  PropertyFieldProps,
   PropertyGroupProps,
   PropertyListPack,
   PropertyListProps,
@@ -31,15 +25,11 @@ export type {
   PropertyRowVariant,
   PropertySpanProps,
   SelectProps,
-  SelectRowProps,
-  SliderRowProps,
   SubpanelProps,
-  TextRowProps,
   ToggleBarItem,
   ToggleBarProps,
   ToggleBarSize,
   ToggleBarVariant,
-  ToggleRowProps,
   TokenCategory,
   TokenEntry,
   TokenPanelProps,
@@ -48,39 +38,31 @@ export type {
 } from '@weasel-js/ui';
 export {
   Button,
-  CheckboxRow,
   CloseIcon,
   CollapseIcon,
-  ColorRow,
   CurveField,
-  EffectCard,
-  EffectCardList,
   ExpandIcon,
   Icon,
   Input,
   inferTokenType,
   Jog,
-  LayerStack,
-  NumberRow,
   PauseIcon,
   PlayIcon,
+  PropertyControl,
+  PropertyField,
   PropertyGroup,
   PropertyList,
   PropertyPanel,
   PropertyRow,
   PropertySpan,
-  refitScale,
   ResetIcon,
+  refitScale,
   Select,
-  SelectRow,
-  SliderRow,
   StepBackIcon,
   StepForwardIcon,
   StopIcon,
   Subpanel,
-  TextRow,
   ToggleBar,
-  ToggleRow,
   TokenPanel,
 } from '@weasel-js/ui';
 export type {
@@ -97,6 +79,7 @@ export type {
   AnnotationsCapability,
   AnnotationTarget,
   AnnotationTargetInfo,
+  AnnotationToolId,
   CaptureDeps,
   CaptureOptions,
   CaptureResult,
@@ -147,13 +130,12 @@ export {
 export type { ContentSize, PaneSize } from './annotations/view';
 export { fitView, fromWeaselView, toWeaselView } from './annotations/view';
 export type {
+  CameraContextValue,
   CanvasLayerDescriptor,
   CanvasStackContextValue,
   CanvasStackProps,
   CanvasStackSurface,
-  PanZoomHandlers,
   StageProps,
-  UsePanZoomOptions,
   ViewportSize,
   WorldFrame,
   WorldSpec,
@@ -161,6 +143,9 @@ export type {
 } from './canvas';
 export {
   applyCamera,
+  CameraContext,
+  CameraInput,
+  CameraScope,
   CanvasStack,
   CanvasStackContext,
   centerOn,
@@ -169,7 +154,6 @@ export {
   resolveFrame,
   Stage,
   screenToWorld,
-  usePanZoom,
   worldToScreen,
   zoomAt,
 } from './canvas';
@@ -185,6 +169,7 @@ export {
   f,
   GroupNode,
   isConfigBranch,
+  ListNode,
   NumberNode,
   StringNode,
   ValueNode,
@@ -199,6 +184,7 @@ export {
 } from './config/path';
 export { resolveConfigSchema } from './config/resolve';
 export { applyRules, builtinRules, titleCase } from './config/rules';
+export { type SectionTree, sectionTree } from './config/sectionTree';
 export type {
   Annotations,
   BranchAnnotations,
@@ -214,12 +200,14 @@ export type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  DialogSpec,
   EntryValue,
   InferConfig,
   LeafPatch,
   NodeOptions,
   NodeValue,
   ResolvedConfig,
+  SectionOption,
   SectionSpec,
   ValueAtPath,
 } from './config/types';
@@ -227,6 +215,7 @@ export { useConfigSchema } from './config/useConfigSchema';
 export { useResolvedConfig } from './config/useResolvedConfig';
 export { isLeafVisible } from './config/visible';
 export { ControlPanel } from './controls/ControlPanel';
+export { type InDialogOptions, inDialog, summarizeValue } from './controls/inDialog';
 export type {
   CheckboxField,
   ColorField,
@@ -262,8 +251,8 @@ export type { ValidationResult } from './instrument/validateConfigSchema';
 export { validateConfigSchema } from './instrument/validateConfigSchema';
 export * from './job';
 export * from './lab';
-export type { LayerListProps, LayerTreeNode } from './layers';
-export { LayerList } from './layers';
+export type { LayerListItem, LayerListProps, LayerMove } from './layers';
+export { LayerList, moveLayers } from './layers';
 export * from './loupe';
 export * from './primitives';
 export { SPECIMEN_SECTIONS, Specimen } from './specimen/Specimen';

package/src/instrument/SineWave.smoke.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { createPointerStore } from '@weasel-js/core';
 import type { ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { DEFAULT_VIEW } from '../state/view';
@@ -94,6 +95,7 @@ describe('SineWave instrument smoke test', () => {
         setZoom: vi.fn(),
         activeToolId: null,
         visibleLayers: [],
+        pointer: createPointerStore(),
       },
       emit: vi.fn(),
     };

package/src/instrument/types.ts

@@ -1,3 +1,4 @@
+import type { PointerContextValue } from '@weasel-js/core';
 import type { ReactNode } from 'react';
 import type { AnnotationsCapability } from '../annotations/types';
 import type { ViewportSize, WorldSpec } from '../canvas/worldSpec';
@@ -33,6 +34,14 @@ export interface RenderContext<TS = unknown, TC = unknown> {
      *  hidden layer's `draw`, so this is the only way to know what was
      *  painted — a legend listing rows the view did not draw needs it. */
     visibleLayers: readonly string[];
+    /**
+     * Where the pointer is over this trial, in the instrument's world:
+     * `get()` answers `{ worldX, worldY, viewId }`, where `viewId` is
+     * `'stage'` over the trial's own camera and `'overview'` over its
+     * `<TrialOverview>`, or `null` when it is over neither. A key handler
+     * reading it works over either view.
+     */
+    pointer: PointerContextValue;
   };
   emit: (event: string) => void;
   /** Present only when the instrument declares a `job`. */
@@ -61,7 +70,7 @@ export interface CanvasCapability<TS = unknown, TC = unknown> {
    *  size, so an instrument can frame content it can only place in terms of
    *  the viewport; until then the trial's view is `null`. */
   initialView?: ViewTransform | ((size: ViewportSize) => ViewTransform);
-  /** Widens `usePanZoom`'s default clamp; the opening zoom stays reachable
+  /** Widens the camera's default zoom clamp; the opening zoom stays reachable
    *  regardless of these. */
   minZoom?: number;
   maxZoom?: number;
@@ -70,7 +79,7 @@ export interface CanvasCapability<TS = unknown, TC = unknown> {
 /** Declares that an instrument's DOM is content of a fixed size, which the
  *  trial pans and zooms the way it does a canvas's layers. Not combined with
  *  `canvas`: there the DOM is an unzoomed overlay, and `canvas` wins. */
-export interface StageCapability {
+export interface StageCapability<TS = unknown, TC = unknown> {
   /** The content's own size in CSS pixels, at zoom 1. */
   size: ViewportSize;
   /** Where the view starts. Omitted, the content opens centered and shrunk to
@@ -78,6 +87,9 @@ export interface StageCapability {
   initialView?: ViewTransform | ((viewport: ViewportSize) => ViewTransform);
   minZoom?: number;
   maxZoom?: number;
+  /** Drawn over the content in viewport pixels, outside the camera — a legend,
+   *  a floating panel, anything that must not zoom with the picture. */
+  overlay?: (ctx: RenderContext<TS, TC>) => ReactNode;
 }
 
 /** Declares which of an instrument's layers the trial should offer
@@ -159,7 +171,7 @@ export interface Instrument<TS = unknown, TC = unknown, TItem = unknown> {
   serialize?: (state: TS) => unknown;
   deserialize?: (data: unknown, config: TC) => TS;
   canvas?: CanvasCapability<TS, TC>;
-  stage?: StageCapability;
+  stage?: StageCapability<TS, TC>;
   layers?: LayerCapability;
   dragDrop?: DragDropCapability<TS, TC>;
   undo?: UndoCapability;

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

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react';
+import { resolveTheme } from '@weasel-js/theme';
+import { describe, expect, it } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { interstellarTheme } from '../theme/interstellar';
+import { Lab } from './Lab';
+
+const bare: Instrument = {
+  name: 'Bare',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => null,
+};
+
+const backdrop = (container: HTMLElement) =>
+  [...container.querySelectorAll<HTMLElement>('[style]')]
+    .map((el) => el.style.getPropertyValue('--wzl-backdrop'))
+    .find(Boolean) ?? '';
+
+describe('<Lab nebula>', () => {
+  it('draws one blob per literal color', () => {
+    const { container } = render(
+      <Lab
+        instruments={[bare]}
+        defaultInstrument="Bare"
+        mode="dark"
+        nebula={['#ff0000', '#00ff00']}
+      />,
+    );
+    expect(backdrop(container).match(/radial-gradient/g)).toHaveLength(3);
+  });
+
+  it('resolves a theme ramp against the lab’s theme', () => {
+    const { container } = render(
+      <Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={{ ramp: 'swatch' }} />,
+    );
+    const sky = resolveTheme(interstellarTheme, { mode: 'dark' })['--wzl-swatch-sky'];
+    expect(backdrop(container)).toContain(sky);
+  });
+});

package/src/lab/Lab.test.tsx

@@ -165,7 +165,9 @@ describe('<Lab>', () => {
       storageKey: 's',
     });
     await waitFor(() => expect(labRef?.trials[0]).toBeDefined());
-    expect((labRef?.trials[0]?.state as { seen: Set<string> }).seen).toEqual(new Set(['a']));
+    expect((labRef?.trials[0]?.state as { seen: Set<string> } | undefined)?.seen).toEqual(
+      new Set(['a']),
+    );
   });
 });
 

package/src/lab/Lab.tsx

@@ -1,4 +1,5 @@
-import { ThemeProvider } from '@weasel-js/theme/react';
+import { type ColorList, colorAt, colorCount, resolveTheme, type Theme } from '@weasel-js/theme';
+import { ThemeProvider, useResolvedColorMode } from '@weasel-js/theme/react';
 import {
   type CSSProperties,
   type ReactNode,
@@ -11,7 +12,7 @@ import {
 } from 'react';
 import { useStore } from 'zustand/react';
 import { AnnotationPreloadContext } from '../annotations/preload';
-import { ANNOTATION_TOOLS } from '../annotations/toolMap';
+import { labAnnotationTools } from '../annotations/toolMap';
 import {
   LabAsideRegion,
   LabFooterRegion,
@@ -54,7 +55,6 @@ import { LabPalette } from './LabPalette';
 import { LabShell } from './LabShell';
 import type { LabPage } from './LabSwitcher';
 import { createPanelHostRegistry, PanelHostContext } from './panelHost';
-import { useResolvedMode } from './useSystemMode';
 import { type PanelDescriptor, type TrialLayout, Workspace } from './Workspace';
 
 interface LabBaseProps {
@@ -68,15 +68,20 @@ interface LabBaseProps {
    *  window is the whole app, rather than a panel beside one, reads better at
    *  `'roomy'`. The trials' own contents are unaffected. */
   density?: LabDensity;
+  /** The theme the lab's chrome resolves against, applied at `mode` and
+   *  `density`. Default `interstellarTheme`; extend it rather than replace it to
+   *  keep the lab's look while changing a few tokens. */
+  theme?: Theme;
   /** Rendered while a stored lab loads. Default: the lab's empty shell. */
   fallback?: ReactNode;
   /**
-   * Optional list of CSS colors used to compose the interstellar theme's
-   * cosmic backdrop. Each color becomes one radial-gradient blob on the
-   * dark void base. Order maps to a fixed spread of positions; extras wrap
-   * around. Ignored unless the resolved mode is dark.
+   * Colors composing the interstellar theme's cosmic backdrop. Each becomes
+   * one radial-gradient blob on the dark void base, in a fixed spread of
+   * positions; extras wrap around. A theme ramp resolves against the lab's
+   * theme; a function list gives as many blobs as there are positions.
+   * Ignored unless the resolved mode is dark.
    */
-  nebula?: readonly string[];
+  nebula?: ColorList;
   title?: string;
   /** The project's other labs. Given two or more, the title becomes the way to
    *  reach them — the same switcher `<LabShell>` renders, so a lab reached from
@@ -180,13 +185,14 @@ function LabFallback({
   title,
   mode,
   density,
+  theme = interstellarTheme,
   pages,
   path,
-}: Pick<LabBaseProps, 'title' | 'mode' | 'density' | 'pages' | 'path'>) {
-  const resolvedMode = useResolvedMode(mode ?? 'auto');
+}: Pick<LabBaseProps, 'title' | 'mode' | 'density' | 'theme' | 'pages' | 'path'>) {
+  const resolvedMode = useResolvedColorMode(mode ?? 'auto');
   return (
     <ThemeProvider
-      theme={interstellarTheme}
+      theme={theme}
       selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
       className="lk-lab"
     >
@@ -214,7 +220,15 @@ const NEBULA_SLOTS = [
   { cx: '85%', cy: '18%', sx: '55%', sy: '80%', stop: '70%' },
 ] as const;
 
-function buildNebula(colors: readonly string[]): string {
+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})`;
@@ -302,6 +316,7 @@ export function Lab(props: LabProps) {
         title={props.title}
         mode={props.mode}
         density={props.density}
+        {...(props.theme ? { theme: props.theme } : {})}
         pages={props.pages}
         path={props.path}
       />
@@ -314,6 +329,7 @@ function LabRuntime({
   instruments,
   mode,
   density,
+  theme = interstellarTheme,
   nebula,
   title,
   pages,
@@ -455,17 +471,17 @@ function LabRuntime({
       })),
     [undockedPanels],
   );
-  const resolvedMode = useResolvedMode(modeValue);
+  const resolvedMode = useResolvedColorMode(modeValue);
 
   // Tools and lab contributions share one id namespace, so they merge once
   // here — before any region renders — and a collision throws rather than one
   // of them silently losing.
   // Declaring `annotations` on any instrument puts the drawing tools here, in
   // the lab's rail: one tool is armed across every trial.
-  const annotates = instruments.some((i) => i.annotations != null);
+  const annotationTools = useMemo(() => labAnnotationTools(instruments), [instruments]);
   const labChromeAll = useMemo(
-    () => labContributions([...(annotates ? ANNOTATION_TOOLS : []), ...(tools ?? [])], labChrome),
-    [annotates, tools, labChrome],
+    () => labContributions([...annotationTools, ...(tools ?? [])], labChrome),
+    [annotationTools, tools, labChrome],
   );
   const hasFooterChrome = labChromeAll.some((c) => c.region === 'footer');
   const hasPaneChrome = labChromeAll.some((c) => c.region === 'sidebar' || c.region === 'aside');
@@ -564,8 +580,15 @@ function LabRuntime({
   // Only override the backdrop in dark, where there is one to override.
   // Setting a CSS custom property is the sanctioned use of inline style.
   const backdropStyle =
-    resolvedMode === 'dark' && nebula && nebula.length > 0
-      ? ({ ['--wzl-backdrop' as string]: buildNebula(nebula) } as CSSProperties)
+    resolvedMode === 'dark' && nebula && colorCount(nebula) !== 0
+      ? ({
+          ['--wzl-backdrop' as string]: buildNebula(
+            nebula,
+            theme,
+            resolvedMode,
+            density ?? 'comfortable',
+          ),
+        } as CSSProperties)
       : undefined;
 
   const workspace = (
@@ -590,7 +613,7 @@ function LabRuntime({
         <AnnotationPreloadContext.Provider value={opened.marks}>
           <LabContext.Provider value={contextValue}>
             <ThemeProvider
-              theme={interstellarTheme}
+              theme={theme}
               selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
               className="lk-lab"
               style={backdropStyle}

package/src/lab/LabBoundary.test.tsx

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
+import { useContext } from 'react';
+import { describe, expect, it } from 'vitest';
+import { LabStoreContext, TrialIdContext } from '../state/context';
+import { PersistenceContext } from '../state/Persistence';
+import { interstellarTheme } from '../theme/interstellar';
+import { LabBoundary } from './LabBoundary';
+import { LabContext, type LabContextValue } from './LabContext';
+import { LabRoot } from './LabRoot';
+
+function Probe() {
+  const lab = useContext(LabContext);
+  const store = useContext(LabStoreContext);
+  const trial = useContext(TrialIdContext);
+  const records = useContext(PersistenceContext);
+  const theme = useThemeOptional();
+  return (
+    <output>
+      {JSON.stringify({
+        lab: lab !== null,
+        store: store !== null,
+        trial,
+        records: records !== null,
+        theme: theme !== null,
+      })}
+    </output>
+  );
+}
+
+const fakeLab = { trials: [], instruments: [] } as unknown as LabContextValue;
+
+describe('LabBoundary', () => {
+  it('hides the enclosing lab, trial, records and theme from its children', () => {
+    const { container } = render(
+      <ThemeProvider theme={interstellarTheme} selection={{ mode: 'dark' }}>
+        <LabContext.Provider value={fakeLab}>
+          <TrialIdContext.Provider value="t1">
+            <Probe />
+            <LabBoundary>
+              <Probe />
+            </LabBoundary>
+          </TrialIdContext.Provider>
+        </LabContext.Provider>
+      </ThemeProvider>,
+    );
+    const [outside, inside] = Array.from(container.querySelectorAll('output')).map((el) =>
+      JSON.parse(el.textContent ?? ''),
+    );
+    expect(outside).toEqual({ lab: true, store: false, trial: 't1', records: false, theme: true });
+    expect(inside).toEqual({ lab: false, store: false, trial: null, records: false, theme: false });
+  });
+
+  it('lets a LabRoot under it apply its own theme instead of deferring to the one above', () => {
+    const { container } = render(
+      <ThemeProvider theme={interstellarTheme} selection={{ mode: 'dark' }}>
+        <LabBoundary>
+          <LabRoot mode="light">x</LabRoot>
+        </LabBoundary>
+      </ThemeProvider>,
+    );
+    const themed = container.querySelectorAll('[data-wzl-theme]');
+    expect(themed).toHaveLength(2);
+    expect(themed[1]?.getAttribute('data-wzl-mode')).toBe('light');
+  });
+});