@weasel-js/labkit 1.5.1 → 1.6.0

package/src/controls/inDialog.test.tsx

@@ -0,0 +1,82 @@
+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');
+  });
+});
+
+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,46 @@
+import { DialogRow } from '@weasel-js/ui';
+import type { ReactNode } from 'react';
+import type { ControlRenderer } from '../config/types';
+
+/** Options for {@link inDialog}. */
+export interface InDialogOptions {
+  /** What the row's button shows of the value. Defaults to a list joined with
+   *  commas, or the value itself. */
+  summary?: (value: unknown) => ReactNode;
+  /** The dialog's heading. Defaults to the row's label. */
+  title?: ReactNode;
+}
+
+/** 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,8 +72,6 @@ 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.useOrbit).toBe('function');
-    expect(typeof kit.orbitAfterDrag).toBe('function');
     expect(typeof kit.usePanZoom).toBe('function');
     expect(typeof kit.useJob).toBe('function');
     expect(typeof kit.as2DView).toBe('function');

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,53 +25,44 @@ export type {
   PropertyRowVariant,
   PropertySpanProps,
   SelectProps,
-  SelectRowProps,
-  SliderRowProps,
   SubpanelProps,
-  TextRowProps,
   ToggleBarItem,
   ToggleBarProps,
   ToggleBarSize,
   ToggleBarVariant,
-  ToggleRowProps,
   TokenCategory,
   TokenEntry,
   TokenPanelProps,
+  TokenScale,
+  TokenScaleRule,
 } 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,
   ResetIcon,
+  refitScale,
   Select,
-  SelectRow,
-  SliderRow,
   StepBackIcon,
   StepForwardIcon,
   StopIcon,
   Subpanel,
-  TextRow,
   ToggleBar,
-  ToggleRow,
   TokenPanel,
 } from '@weasel-js/ui';
 export type {
@@ -148,13 +133,9 @@ export type {
   CanvasStackContextValue,
   CanvasStackProps,
   CanvasStackSurface,
-  OrbitHandlers,
-  OrbitView,
   PanZoomHandlers,
   StageProps,
-  UseOrbitOptions,
   UsePanZoomOptions,
-  Vec3,
   ViewportSize,
   WorldFrame,
   WorldSpec,
@@ -165,19 +146,13 @@ export {
   CanvasStack,
   CanvasStackContext,
   centerOn,
-  clampPitch,
   DEFAULT_FRAME,
   fitStage,
-  orbitAfterDrag,
-  orbitAfterWheel,
-  PITCH_LIMIT,
   resolveFrame,
   Stage,
   screenToWorld,
-  useOrbit,
   usePanZoom,
   worldToScreen,
-  wrapYaw,
   zoomAt,
 } from './canvas';
 export * from './chrome';
@@ -192,11 +167,13 @@ export {
   f,
   GroupNode,
   isConfigBranch,
+  ListNode,
   NumberNode,
   StringNode,
   ValueNode,
 } from './config/builder';
 export { fromConfigFields } from './config/fromConfigField';
+export { type SectionTree, sectionTree } from './config/sectionTree';
 export {
   fillConfigDefaults,
   hasConfigPath,
@@ -234,6 +211,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,
@@ -269,8 +247,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';
@@ -298,6 +276,7 @@ export { Persistence, type PersistenceProps } from './state/Persistence';
 export type { RecordCache, RecordChange } from './state/records';
 export type {
   CreateLabStoreOptions,
+  LabDensity,
   LabDocument,
   LabMode,
   LabStoreState,

package/src/instrument/types.ts

@@ -70,7 +70,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 +78,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 +162,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,31 @@
+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.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,
@@ -30,7 +31,7 @@ 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 { LabMode, StorageAdapter, TrialRecord } from '../state/types';
+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';
@@ -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 {
@@ -64,15 +64,24 @@ interface LabBaseProps {
   instruments: InstrumentList;
   defaultInstrument: string;
   mode?: LabMode;
+  /** How much room the lab's chrome takes. Default `'comfortable'`; a lab whose
+   *  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
@@ -175,12 +184,18 @@ async function openStoredLab(
 function LabFallback({
   title,
   mode,
+  density,
+  theme = interstellarTheme,
   pages,
   path,
-}: Pick<LabBaseProps, 'title' | 'mode' | 'pages' | 'path'>) {
-  const resolvedMode = useResolvedMode(mode ?? 'auto');
+}: Pick<LabBaseProps, 'title' | 'mode' | 'density' | 'theme' | 'pages' | 'path'>) {
+  const resolvedMode = useResolvedColorMode(mode ?? 'auto');
   return (
-    <ThemeProvider theme={interstellarTheme} selection={{ mode: resolvedMode }} className="lk-lab">
+    <ThemeProvider
+      theme={theme}
+      selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
+      className="lk-lab"
+    >
       <LabShell
         title={title ?? 'Labkit'}
         mode={mode}
@@ -205,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})`;
@@ -289,7 +312,14 @@ export function Lab(props: LabProps) {
   if (!opened) {
     if (props.fallback !== undefined) return props.fallback;
     return (
-      <LabFallback title={props.title} mode={props.mode} pages={props.pages} path={props.path} />
+      <LabFallback
+        title={props.title}
+        mode={props.mode}
+        density={props.density}
+        {...(props.theme ? { theme: props.theme } : {})}
+        pages={props.pages}
+        path={props.path}
+      />
     );
   }
   return <LabRuntime {...props} opened={opened} />;
@@ -298,6 +328,8 @@ export function Lab(props: LabProps) {
 function LabRuntime({
   instruments,
   mode,
+  density,
+  theme = interstellarTheme,
   nebula,
   title,
   pages,
@@ -439,7 +471,7 @@ 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
@@ -548,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 = (
@@ -574,8 +613,8 @@ function LabRuntime({
         <AnnotationPreloadContext.Provider value={opened.marks}>
           <LabContext.Provider value={contextValue}>
             <ThemeProvider
-              theme={interstellarTheme}
-              selection={{ mode: resolvedMode }}
+              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');
+  });
+});

package/src/lab/LabBoundary.tsx

@@ -0,0 +1,56 @@
+import { ThemeContext } from '@weasel-js/theme/react';
+import type { ReactNode } from 'react';
+import { AnnotationsContext } from '../annotations/AnnotationsContext';
+import { AnnotationPreloadContext } from '../annotations/preload';
+import { CameraWheelContext } from '../canvas/CameraWheelContext';
+import { CanvasStackContext } from '../canvas/CanvasStackContext';
+import { LabStoreContext, TrialIdContext } from '../state/context';
+import { PersistenceContext } from '../state/Persistence';
+import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
+import { TrialDragContext } from '../trial/TrialDragContext';
+import { LabContext } from './LabContext';
+import { PanelHostContext } from './panelHost';
+
+/** Props for `<LabBoundary>`. */
+export interface LabBoundaryProps {
+  children: ReactNode;
+}
+
+/**
+ * Renders its children as though no lab, trial or theme were above them: every context a `<Lab>` or a
+ * `<Trial>` publishes reads as absent below it, so a labkit piece mounted inside a trial behaves the way it
+ * does on a bare page. A `<LabRoot>` under it applies its own theme instead of deferring to the lab's, and a
+ * `usePersistedState` under it keeps local state instead of writing into the enclosing lab's records.
+ *
+ * For a host that shows arbitrary content inside a trial, such as a component workshop; a lab's own chrome
+ * never needs it.
+ */
+export function LabBoundary({ children }: LabBoundaryProps) {
+  return (
+    <LabStoreContext.Provider value={null}>
+      <PersistenceContext.Provider value={null}>
+        <AnnotationPreloadContext.Provider value={null}>
+          <LabContext.Provider value={null}>
+            <PanelHostContext.Provider value={null}>
+              <SurfaceContext.Provider value={null}>
+                <SurfaceCanvasContext.Provider value={{ over: null, under: null }}>
+                  <TrialIdContext.Provider value={null}>
+                    <AnnotationsContext.Provider value={null}>
+                      <CameraWheelContext.Provider value={null}>
+                        <CanvasStackContext.Provider value={null}>
+                          <TrialDragContext.Provider value={null}>
+                            <ThemeContext.Provider value={null}>{children}</ThemeContext.Provider>
+                          </TrialDragContext.Provider>
+                        </CanvasStackContext.Provider>
+                      </CameraWheelContext.Provider>
+                    </AnnotationsContext.Provider>
+                  </TrialIdContext.Provider>
+                </SurfaceCanvasContext.Provider>
+              </SurfaceContext.Provider>
+            </PanelHostContext.Provider>
+          </LabContext.Provider>
+        </AnnotationPreloadContext.Provider>
+      </PersistenceContext.Provider>
+    </LabStoreContext.Provider>
+  );
+}