@weasel-js/labkit 1.6.1 → 1.7.0

package/src/controls/ControlPanel.test.tsx

@@ -1,6 +1,7 @@
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TOOL_PREF_KINDS, type ToolPrefKind } from '@weasel-js/core';
+import { compact } from '@weasel-js/quantity';
 import type { PrefLeaf } from '@weasel-js/ui';
 import { useState } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
@@ -88,7 +89,7 @@ describe('<ControlPanel> number', () => {
     ];
     render(<ControlPanel fields={fields} config={{ n: 42 }} setConfig={vi.fn()} />);
     const input = screen.getByLabelText('N') as HTMLInputElement;
-    expect(input.type).toBe('number');
+    expect(input).toHaveAttribute('role', 'spinbutton');
     expect(input.value).toBe('42');
   });
 
@@ -143,7 +144,7 @@ describe('<ControlPanel> color', () => {
     const input = screen.getByLabelText('Color') as HTMLInputElement;
     expect(input.type).toBe('color');
     expect(input.value).toBe('#ff0000');
-    fireEvent.change(input, { target: { value: '#00ff00' } });
+    fireEvent.input(input, { target: { value: '#00ff00' } });
     expect(setConfig).toHaveBeenCalledWith('c', '#00ff00');
   });
 });
@@ -206,7 +207,7 @@ describe('<ControlPanel> schema', () => {
       [],
     );
     render(<ControlPanel schema={schema} config={{ a: 5, b: 5 }} setConfig={vi.fn()} />);
-    expect(screen.getByLabelText('B')).toHaveAttribute('type', 'number');
+    expect(screen.getByLabelText('B')).toHaveAttribute('role', 'spinbutton');
   });
 
   it('falls back to the leaf default when config holds no value', () => {
@@ -466,7 +467,7 @@ describe('<ControlPanel> suffix', () => {
 
   it('suffixes a typed number with the suffix the leaf declares', () => {
     const { container } = panel(f.number(20).input().suffix('px'));
-    expect(container.querySelector('input[type="number"]')).not.toBeNull();
+    expect(container.querySelector('input[role="spinbutton"]')).not.toBeNull();
     expect(container.textContent).toContain('px');
   });
 });
@@ -476,7 +477,7 @@ describe('<ControlPanel> format', () => {
     render(
       <ControlPanel
         schema={resolveConfigSchema(
-          f.schema({ glyphs: f.number(0).range(0, 2_000_000).format('compact') }),
+          f.schema({ glyphs: f.number(0).range(0, 2_000_000).display(compact()) }),
           [],
         )}
         config={{ glyphs: 2_000_000 }}
@@ -898,6 +899,28 @@ describe('<ControlPanel> auto', () => {
   });
 });
 
+describe('<ControlPanel> option icons', () => {
+  it("draws an option's icon in its segment and keeps the label as its name", () => {
+    const status = f
+      .enum('ok', [
+        { value: 'ok', label: 'ok', icon: 'statusSuccess' },
+        { value: 'bad', label: 'bad' },
+      ])
+      .radio();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ status }), [])}
+        config={{ status: 'ok' }}
+        setConfig={() => {}}
+      />,
+    );
+    const ok = screen.getByRole('radio', { name: 'ok' });
+    expect(ok.querySelector('svg')).not.toBeNull();
+    expect(ok.textContent).toBe('');
+    expect(screen.getByRole('radio', { name: 'bad' }).textContent).toBe('bad');
+  });
+});
+
 describe('<ControlPanel> pair', () => {
   const paired = () =>
     resolveConfigSchema(
@@ -913,8 +936,8 @@ describe('<ControlPanel> pair', () => {
   it('draws two leaves sharing a pair id as one row named by the pair', () => {
     render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
-    expect(within(row).getByLabelText('X')).toHaveValue(10);
-    expect(within(row).getByLabelText('Y')).toHaveValue(20);
+    expect(within(row).getByLabelText('X')).toHaveValue('10');
+    expect(within(row).getByLabelText('Y')).toHaveValue('20');
   });
 
   it('captions each cell of a pair with its own name, so a paired switch is not left unnamed', () => {
@@ -952,7 +975,7 @@ describe('<ControlPanel> pair', () => {
     render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
     expect(within(row).queryByLabelText('Scale')).toBeNull();
-    expect(screen.getByLabelText('Scale')).toHaveValue(1);
+    expect(screen.getByLabelText('Scale')).toHaveValue('1');
   });
 });
 
@@ -1045,18 +1068,18 @@ describe('<ControlPanel> color alpha', () => {
   it('splits the stored hex into a swatch and an alpha track', () => {
     panel();
     expect((screen.getByLabelText('Tint') as HTMLInputElement).value).toBe('#336699');
-    expect((screen.getByLabelText('Tint opacity') as HTMLInputElement).value).toBe('0.8');
+    expect((screen.getByLabelText('Tint opacity') as HTMLInputElement).value).toBe('80');
   });
 
   it('keeps the stored alpha when the swatch moves', () => {
     const setConfig = panel();
-    fireEvent.change(screen.getByLabelText('Tint'), { target: { value: '#00ff00' } });
+    fireEvent.input(screen.getByLabelText('Tint'), { target: { value: '#00ff00' } });
     expect(setConfig).toHaveBeenCalledWith('tint', '#00ff00cc');
   });
 
   it('keeps the stored color when the alpha track moves', () => {
     const setConfig = panel();
-    fireEvent.change(screen.getByLabelText('Tint opacity'), { target: { value: '0.5' } });
+    fireEvent.input(screen.getByLabelText('Tint opacity'), { target: { value: '50' } });
     expect(setConfig).toHaveBeenCalledWith('tint', '#33669980');
   });
 
@@ -1101,3 +1124,33 @@ describe('<ControlPanel> title, stance and tone', () => {
     expect(panel.querySelector('.lk-control-panel')).not.toBeNull();
   });
 });
+
+describe('<ControlPanel> resettable group', () => {
+  const schema = resolveConfigSchema(
+    f.schema({
+      name: f.string('a'),
+      modes: f.group({ one: f.number(0), two: f.number(0), inner: f.group({ three: f.number(1) }) }).resettable(),
+      plain: f.group({ four: f.number(0) }),
+    }),
+  );
+
+  it('puts a reset button on the group heading, disabled while nothing has changed', () => {
+    render(
+      <ControlPanel schema={schema} config={{ name: 'a', modes: { one: 0, two: 0, inner: { three: 1 } }, plain: { four: 0 } }} setConfig={vi.fn()} />,
+    );
+    expect(screen.getByRole('button', { name: 'Reset Modes' })).toBeDisabled();
+    expect(screen.queryByRole('button', { name: 'Reset Plain' })).toBeNull();
+  });
+
+  it('writes the default of every changed value beneath the group and nothing else', () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel schema={schema} config={{ name: 'b', modes: { one: 2, two: 0, inner: { three: 5 } }, plain: { four: 3 } }} setConfig={setConfig} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Reset Modes' }));
+    expect(setConfig.mock.calls).toEqual([
+      ['modes.one', 0],
+      ['modes.inner.three', 1],
+    ]);
+  });
+});

package/src/controls/ControlPanel.tsx

@@ -1,5 +1,6 @@
 import { getAlpha01, isBuiltinToolPref, toHex8, withAlpha01 } from '@weasel-js/core';
 import {
+  Button,
   DialogRow,
   isPrefLeaf,
   ListEditor,
@@ -17,6 +18,7 @@ import {
   PropertyRow,
   type PropertyRowLayout,
   prefFieldProps,
+  ResetIcon,
   type StanceProps,
 } from '@weasel-js/ui';
 import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
@@ -117,6 +119,45 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> extends S
 
 const NO_AUTO: ReadonlySet<string> = new Set();
 
+/** Every leaf beneath a group, as its dotted path and its default. */
+function leavesUnder(group: PrefGroup, at: string): [string, unknown][] {
+  return Object.entries(group.children).flatMap(([key, child]) => {
+    const path = at === '' ? key : `${at}.${key}`;
+    return isPrefLeaf(child) ? [[path, child.default] as [string, unknown]] : leavesUnder(child, path);
+  });
+}
+
+/** The heading button of a `.resettable()` group: writes each changed leaf's
+ *  default, and is disabled while nothing has changed. */
+function ResetGroup({
+  group,
+  path,
+  config,
+  setConfig,
+}: {
+  group: PrefGroup;
+  path: string;
+  config: Record<string, unknown>;
+  setConfig: (path: string, value: unknown) => void;
+}) {
+  const changed = leavesUnder(group, path).filter(([p, d]) => !Object.is(valueAtPath(config, p), d));
+  return (
+    <Button
+      iconOnly
+      variant="ghost"
+      size="sm"
+      ariaLabel={`Reset ${group.name}`}
+      tooltip={`Reset ${group.name} to defaults`}
+      disabled={changed.length === 0}
+      onClick={() => {
+        for (const [p, d] of changed) setConfig(p, d);
+      }}
+    >
+      <ResetIcon />
+    </Button>
+  );
+}
+
 /** Render an instrument's config schema as a stack of controls, each writing
  *  back through `setConfig`. Built on the property rows, so a lab's controls
  *  are the same aligned, themed rows the rest of the kit uses. */
@@ -224,6 +265,11 @@ export function ControlPanel<TC extends Record<string, unknown>>({
         // two-column grid leaves it laying its own rows out inside a cell,
         // which overlaps them.
         span
+        actions={
+          resolved.resettable?.has(path) ? (
+            <ResetGroup group={found} path={path} config={config as Record<string, unknown>} setConfig={setConfig} />
+          ) : undefined
+        }
         {...fold(path, undefined, rows.grid)}
       >
         {body(found, path, rows)}
@@ -461,7 +507,7 @@ function ControlRow<TC extends Record<string, unknown>>({
     case 'number':
       return <PropertyField {...field} {...row} span={field.control === 'slider' && wide} />;
     case 'enum':
-      return <PropertyField {...field} {...row} span={field.control === 'radio' && wide} />;
+      return <PropertyField {...field} {...row} span={field.control === 'toggle' && wide} />;
     default:
       return <PropertyField {...field} {...row} />;
   }
@@ -496,7 +542,11 @@ function labField(
         control: extra<string>(leaf, 'control') === 'switch' ? 'switch' : 'checkbox',
       };
     case 'enum':
-      return { ...field, control: extra<string>(leaf, 'control') === 'radio' ? 'radio' : 'select' };
+      // `.radio()` asks for every option at once, as segments.
+      return {
+        ...field,
+        control: extra<string>(leaf, 'control') === 'radio' ? 'toggle' : 'select',
+      };
     case 'string':
       return {
         ...field,

package/src/index.ts

@@ -1,4 +1,4 @@
-// The property-panel family, LayerList, Input, Select, TokenPanel, ToggleBar and Button live in
+// The property-panel family, DetailList, 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.
@@ -10,6 +10,11 @@ export type {
   ButtonVariant,
   CurveFieldProps,
   CurveMark,
+  DetailListLayout,
+  DetailListProps,
+  DetailListValues,
+  DetailRowProps,
+  DetailRowStatus,
   IconProps,
   InputProps,
   JogProps,
@@ -41,6 +46,8 @@ export {
   CloseIcon,
   CollapseIcon,
   CurveField,
+  DetailList,
+  DetailRow,
   ExpandIcon,
   Icon,
   Input,
@@ -131,6 +138,8 @@ export type { ContentSize, PaneSize } from './annotations/view';
 export { fitView, fromWeaselView, toWeaselView } from './annotations/view';
 export type {
   CameraContextValue,
+  CameraRegistry,
+  CameraView,
   CanvasLayerDescriptor,
   CanvasStackContextValue,
   CanvasStackProps,
@@ -140,20 +149,25 @@ export type {
   WorldFrame,
   WorldSpec,
   ZoomAtOptions,
+  ZoomRange,
 } from './canvas';
 export {
   applyCamera,
   CameraContext,
   CameraInput,
+  CameraPublishContext,
+  CameraRegistryContext,
   CameraScope,
   CanvasStack,
   CanvasStackContext,
   centerOn,
+  createCameraRegistry,
   DEFAULT_FRAME,
   fitStage,
   resolveFrame,
   Stage,
   screenToWorld,
+  usePublishCamera,
   worldToScreen,
   zoomAt,
 } from './canvas';

package/src/lab/Lab.tsx

@@ -13,6 +13,7 @@ import {
 import { useStore } from 'zustand/react';
 import { AnnotationPreloadContext } from '../annotations/preload';
 import { labAnnotationTools } from '../annotations/toolMap';
+import { CameraRegistryContext, createCameraRegistry } from '../canvas/cameraRegistry';
 import {
   LabAsideRegion,
   LabFooterRegion,
@@ -50,10 +51,11 @@ import {
 } from '../trial/trialOps';
 import { useLabFitWarning } from './fitCheck';
 import { LabContext, type LabContextValue } from './LabContext';
-import { LabHeader } from './LabHeader';
+import { LabHeader, LabThemeSwitcher } from './LabHeader';
 import { LabPalette } from './LabPalette';
 import { LabShell } from './LabShell';
 import type { LabPage } from './LabSwitcher';
+import { LabZoom } from './LabZoom';
 import { createPanelHostRegistry, PanelHostContext } from './panelHost';
 import { type PanelDescriptor, type TrialLayout, Workspace } from './Workspace';
 
@@ -104,6 +106,9 @@ interface LabBaseProps {
   /** Offer the header's add-trial control. Default `true`; a lab that opens
    *  trials some other way passes `false`. */
   addTrial?: boolean;
+  /** Offer the header's zoom controls, which act on the focused trial's camera
+   *  and answer Mod+=, Mod+- and Mod+0. Default `true`. */
+  zoom?: boolean;
   /** Tools offered lab-wide. A trial whose instrument declares none of its own
    *  reflects and writes this slot. */
   tools?: readonly TrialTool[];
@@ -339,6 +344,7 @@ function LabRuntime({
   labChrome,
   suppress,
   addTrial,
+  zoom = true,
   tools,
   configRules,
   controls,
@@ -354,6 +360,7 @@ function LabRuntime({
   }, [instruments, store]);
 
   const trials = useStore(store, (s) => s.trials);
+  const [cameras] = useState(createCameraRegistry);
   const [focusPick, setFocusPick] = useState<string | null>(null);
   const focusedTrialId = trials.some((t) => t.id === focusPick)
     ? focusPick
@@ -612,79 +619,83 @@ function LabRuntime({
       <PersistenceContext.Provider value={opened.records}>
         <AnnotationPreloadContext.Provider value={opened.marks}>
           <LabContext.Provider value={contextValue}>
-            <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 ? (
+            <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={
                     <>
-                      {footer}
-                      <LabFooterRegion contributions={labChromeAll} />
+                      <LabHeader {...(addTrial !== undefined ? { addTrial } : {})} />
+                      {zoom ? <LabZoom /> : null}
+                      {children}
+                      <LabHeaderRegion contributions={labChromeAll} />
+                      <LabThemeSwitcher />
                     </>
-                  ) : (
-                    footer
-                  )
-                }
-                header={
-                  <>
-                    <LabHeader {...(addTrial !== undefined ? { addTrial } : {})} />
-                    {children}
-                    <LabHeaderRegion contributions={labChromeAll} />
-                  </>
-                }
-              >
-                <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);
-                              }}
-                            />
-                          </>
-                        )}
-                        {hasPaneChrome ? (
-                          <LabPanes contributions={labChromeAll}>
-                            <LabPalette contributions={labChromeAll} />
-                            {workspace}
-                          </LabPanes>
-                        ) : (
-                          <>
-                            <LabPalette contributions={labChromeAll} />
-                            {workspace}
-                          </>
-                        )}
-                      </div>
-                    </SurfaceCanvasContext.Provider>
-                  </SurfaceContext.Provider>
-                </PanelHostContext.Provider>
-              </LabShell>
-            </ThemeProvider>
+                  }
+                >
+                  <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);
+                                }}
+                              />
+                            </>
+                          )}
+                          {hasPaneChrome ? (
+                            <LabPanes contributions={labChromeAll}>
+                              <LabPalette contributions={labChromeAll} />
+                              {workspace}
+                            </LabPanes>
+                          ) : (
+                            <>
+                              <LabPalette contributions={labChromeAll} />
+                              {workspace}
+                            </>
+                          )}
+                        </div>
+                      </SurfaceCanvasContext.Provider>
+                    </SurfaceContext.Provider>
+                  </PanelHostContext.Provider>
+                </LabShell>
+              </ThemeProvider>
+            </CameraRegistryContext.Provider>
           </LabContext.Provider>
         </AnnotationPreloadContext.Provider>
       </PersistenceContext.Provider>

package/src/lab/{LabFit.stories.less → LabFit.browser.test.less}

@@ -1,4 +1,4 @@
-// Host pages for LabFit.stories. Each is scoped by its own class, so a story
+// Host pages for LabFit.browser.test. Each is scoped by its own class, so a test
 // that mounts no fixture leaves the page untouched.
 
 // The mount every example documents: `html, body, #root { margin: 0; height: 100% }`.

package/src/lab/{LabFit.stories.tsx → LabFit.browser.test.tsx}

@@ -1,15 +1,21 @@
-import type { Meta, StoryObj } from '@weasel-js/forge';
-import { expect, userEvent, waitFor, within } from '@weasel-js/forge/play';
+import '@weasel-js/theme/tokens.css';
+import 'windease/styles.css';
+import '../styles.less';
+import './LabFit.browser.test.less';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import { type ReactNode, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { afterEach, expect, test } from 'vitest';
+import { page, userEvent } from 'vitest/browser';
 import type { LabContribution } from '../chrome/labTypes';
 import type { TrialContribution } from '../chrome/types';
 import type { Instrument } from '../instrument/types';
 import { Lab } from './Lab';
-import './LabFit.stories.less';
 
-// A lab must fit whatever it is mounted in without scrolling. jsdom cannot see
-// layout, so these run in the forge-stories vitest project's real browser.
+// A lab must fit whatever it is mounted in without scrolling, which only real
+// layout can show.
+
+afterEach(cleanup);
 
 const Stub: Instrument = {
   name: 'Stub',
@@ -158,62 +164,34 @@ function fitProblems(fixture: Fixture, viewport: keyof typeof VIEWPORTS): string
   return problems;
 }
 
-function fit(fixture: Fixture, viewport: keyof typeof VIEWPORTS): Story {
-  return {
-    globals: { viewport: { value: viewport, isRotated: false } },
-    render: () => (
-      <BodyHost host={HOST[fixture]}>
-        <Lab
-          title={`Fit: ${fixture}`}
-          instruments={[Stub]}
-          defaultInstrument="Stub"
-          chrome={fixture === 'floating' ? [floater] : undefined}
-          labChrome={fixture === 'sidebar' ? [sidebarTree] : undefined}
-        />
-      </BodyHost>
-    ),
-    play: async () => {
-      if (fixture === 'floating') {
-        const undock = await within(document.body).findByRole('button', { name: 'Undock Floater' });
-        await userEvent.click(undock);
-      }
-      await waitFor(
-        () => {
-          const problems = fitProblems(fixture, viewport);
-          if (problems.length > 0) throw new Error(problems.join('; '));
-        },
-        { timeout: 2000 },
-      );
-      await expect(fitProblems(fixture, viewport)).toEqual([]);
+const FIXTURES: Fixture[] = ['fullscreen', 'floating', 'wrapped', 'framed', 'sidebar'];
+const CASES = FIXTURES.flatMap((fixture) =>
+  (Object.keys(VIEWPORTS) as (keyof typeof VIEWPORTS)[]).map((viewport) => ({ fixture, viewport })),
+);
+
+test.each(CASES)('$fixture fits a $viewport viewport', async ({ fixture, viewport }) => {
+  const { width, height } = VIEWPORTS[viewport].styles;
+  await page.viewport(Number.parseInt(width, 10), Number.parseInt(height, 10));
+  render(
+    <BodyHost host={HOST[fixture]}>
+      <Lab
+        title={`Fit: ${fixture}`}
+        instruments={[Stub]}
+        defaultInstrument="Stub"
+        chrome={fixture === 'floating' ? [floater] : undefined}
+        labChrome={fixture === 'sidebar' ? [sidebarTree] : undefined}
+      />
+    </BodyHost>,
+  );
+  if (fixture === 'floating') {
+    await userEvent.click(await screen.findByRole('button', { name: 'Undock Floater' }));
+  }
+  await waitFor(
+    () => {
+      const problems = fitProblems(fixture, viewport);
+      if (problems.length > 0) throw new Error(problems.join('; '));
     },
-  };
-}
-
-const meta: Meta<typeof Lab> = {
-  title: 'labkit/Lab/Fit',
-  component: Lab,
-  parameters: { layout: 'fullscreen', viewport: { options: VIEWPORTS } },
-};
-export default meta;
-
-type Story = StoryObj<typeof Lab>;
-
-export const FullscreenWide = fit('fullscreen', 'wide');
-export const FullscreenMedium = fit('fullscreen', 'medium');
-export const FullscreenNarrow = fit('fullscreen', 'narrow');
-
-export const FloatingPanelWide = fit('floating', 'wide');
-export const FloatingPanelMedium = fit('floating', 'medium');
-export const FloatingPanelNarrow = fit('floating', 'narrow');
-
-export const WrappedNoResetWide = fit('wrapped', 'wide');
-export const WrappedNoResetMedium = fit('wrapped', 'medium');
-export const WrappedNoResetNarrow = fit('wrapped', 'narrow');
-
-export const FramedWide = fit('framed', 'wide');
-export const FramedMedium = fit('framed', 'medium');
-export const FramedNarrow = fit('framed', 'narrow');
-
-export const SidebarWide = fit('sidebar', 'wide');
-export const SidebarMedium = fit('sidebar', 'medium');
-export const SidebarNarrow = fit('sidebar', 'narrow');
+    { timeout: 2000 },
+  );
+  expect(fitProblems(fixture, viewport)).toEqual([]);
+});

package/src/lab/LabFullChrome.stories.tsx

@@ -252,6 +252,7 @@ const runLog = defineInstrument<{ lines: string[] }, Record<string, never>>({
 const meta: Meta<typeof Lab> = {
   title: 'labkit/Lab/FullChrome',
   component: Lab,
+  tags: ['gallery'],
   parameters: { layout: 'fullscreen' },
 };
 export default meta;