@weasel-js/labkit 1.6.1 → 1.7.1

package/src/dragdrop/DragDropRuntime.tsx

@@ -1,4 +1,5 @@
-import { openPointerSession, type PointerSession, useVisibleRaf } from '@weasel-js/core';
+import { openPointerSession, type PointerSession, useLatest, useVisibleRaf } from '@weasel-js/core';
+import { boxContainsPoint } from '@weasel-js/geom';
 import {
   type PointerEvent as ReactPointerEvent,
   type RefObject,
@@ -18,12 +19,16 @@ import type {
 } from '../instrument/types';
 import { DragGhost } from './DragGhost';
 
+/** A palette drag in progress. `screenPos` is in client pixels; `feedback` is
+ *  the last `onDragOver` answer — `null` off the canvas or without one. */
 export interface DragState {
   item: PaletteItem;
   screenPos: Point;
   feedback: DragFeedback | null;
 }
 
+/** Inputs to `useDragDrop`: the capability, the element that counts as the
+ *  drop target, and the trial state a drop rewrites. */
 export interface UseDragDropArgs<TS, TC> {
   capability: DragDropCapability<TS, TC>;
   canvasContainerRef: RefObject<HTMLElement | null>;
@@ -37,11 +42,18 @@ export interface UseDragDropArgs<TS, TC> {
   emit: (event: string) => void;
 }
 
+/** The live drag, and the handler a palette item calls on pointerdown. */
 export interface UseDragDropResult {
   drag: DragState | null;
   startDrag: (item: PaletteItem, e: ReactPointerEvent) => void;
 }
 
+/**
+ * Run palette-to-canvas drags for a `DragDropCapability`. Releasing over the
+ * container converts the pointer to world coordinates, applies `onDrop`'s
+ * state and emits `'canvas.itemAdded'`; releasing anywhere else, or a canceled
+ * gesture, drops nothing. `onDragOver` is probed at most once per frame.
+ */
 export function useDragDrop<TS, TC>({
   capability,
   canvasContainerRef,
@@ -53,8 +65,8 @@ export function useDragDrop<TS, TC>({
   worldSpec,
 }: UseDragDropArgs<TS, TC>): UseDragDropResult {
   const [drag, setDrag] = useState<DragState | null>(null);
+  // Owned by the handlers below, which write it alongside every `setDrag`.
   const dragRef = useRef<DragState | null>(null);
-  dragRef.current = drag;
   /** The move the next frame will resolve. Doubles as the throttle's flag:
    *  non-null means a frame is already queued. */
   const pendingPos = useRef<Point | null>(null);
@@ -62,20 +74,14 @@ export function useDragDrop<TS, TC>({
 
   /** A session keeps the closure it was opened with, so everything the drop
    *  reads has to come from here rather than from that closure. */
-  const liveRef = useRef({ capability, state, config, setState, emit, view, worldSpec });
-  liveRef.current = { capability, state, config, setState, emit, view, worldSpec };
+  const liveRef = useLatest({ capability, state, config, setState, emit, view, worldSpec });
 
   const isOverCanvas = useCallback(
     (screenPos: Point): boolean => {
       const el = canvasContainerRef.current;
       if (!el) return false;
       const r = el.getBoundingClientRect();
-      return (
-        screenPos.x >= r.left &&
-        screenPos.x <= r.right &&
-        screenPos.y >= r.top &&
-        screenPos.y <= r.bottom
-      );
+      return boxContainsPoint([r.left, r.top, r.right, r.bottom], screenPos.x, screenPos.y);
     },
     [canvasContainerRef],
   );
@@ -92,7 +98,7 @@ export function useDragDrop<TS, TC>({
         frame,
       );
     },
-    [canvasContainerRef],
+    [canvasContainerRef, liveRef],
   );
 
   const frameLoop = useVisibleRaf(() => {
@@ -106,7 +112,8 @@ export function useDragDrop<TS, TC>({
       const world = screenToWorldFromContainer(screenPos);
       if (world) feedback = live.capability.onDragOver(world, active.item, live.state, live.config);
     }
-    setDrag({ ...active, screenPos, feedback });
+    dragRef.current = { ...active, screenPos, feedback };
+    setDrag(dragRef.current);
   });
 
   const clearDrag = useCallback(() => {
@@ -154,7 +161,7 @@ export function useDragDrop<TS, TC>({
         onCancel: clearDrag,
       });
     },
-    [clearDrag, frameLoop, isOverCanvas, screenToWorldFromContainer],
+    [clearDrag, frameLoop, isOverCanvas, liveRef, screenToWorldFromContainer],
   );
 
   useEffect(() => () => sessionRef.current?.cancel(), []);
@@ -162,10 +169,12 @@ export function useDragDrop<TS, TC>({
   return { drag, startDrag };
 }
 
+/** Props for `DragOverlay`. */
 export interface DragOverlayProps {
   drag: DragState | null;
 }
 
+/** The ghost for `drag`, or nothing when no drag is live. */
 export function DragOverlay({ drag }: DragOverlayProps) {
   if (!drag) return null;
   return <DragGhost item={drag.item} screenPos={drag.screenPos} />;

package/src/dragdrop/DragGhost.tsx

@@ -2,11 +2,14 @@ import { type ReactPortal, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { PaletteItem, Point } from '../instrument/types';
 
+/** Props for `DragGhost`. `screenPos` is in client pixels. */
 export interface DragGhostProps {
   item: PaletteItem;
   screenPos: Point;
 }
 
+/** The dragged item's label, portaled to `document.body` just below-right of
+ *  `screenPos`. Renders nothing until mounted, so it is SSR-safe. */
 export function DragGhost({ item, screenPos }: DragGhostProps): ReactPortal | null {
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);

package/src/dragdrop/Palette.tsx

@@ -1,12 +1,14 @@
 import type { PointerEvent as ReactPointerEvent } from 'react';
 import type { PaletteItem } from '../instrument/types';
 
+/** Props for `Palette`. `onDragStart` is usually `useDragDrop`'s `startDrag`. */
 export interface PaletteProps {
   items: PaletteItem[];
   onDragStart: (item: PaletteItem, e: ReactPointerEvent) => void;
   className?: string;
 }
 
+/** One button per item, each starting a drag on pointerdown. */
 export function Palette({ items, onDragStart, className }: PaletteProps) {
   return (
     <div className={className ? `lk-palette ${className}` : 'lk-palette'}>

package/src/index.test.ts

@@ -49,6 +49,11 @@ describe('public export surface', () => {
     expect(labkit).toHaveProperty('useTrialState');
     expect(labkit).toHaveProperty('useTrialId');
   });
+
+  it('leaves the loupe to its own entry, so a lab without one does not load it', () => {
+    expect(labkit).not.toHaveProperty('TrialLoupe');
+    expect(labkit).not.toHaveProperty('useLoupe');
+  });
 });
 
 describe('ui re-exports', () => {

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,
@@ -73,6 +80,7 @@ export type {
   AnnotationMeaning,
   AnnotationPatch,
   AnnotationQuery,
+  AnnotationSelectionMode,
   AnnotationStatus,
   AnnotationStoreOptions,
   AnnotationsApi,
@@ -131,6 +139,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 +150,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';
@@ -253,7 +268,6 @@ export * from './job';
 export * from './lab';
 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';
 export {

package/src/instrument/types.ts

@@ -6,7 +6,6 @@ import type { TrialContribution } from '../chrome/types';
 import type { ConfigPath, ConfigSchema } from '../config/types';
 import type { ConfigField } from '../controls/types';
 import type { JobCapability, JobHandle } from '../job/types';
-import type { LoupeDeclaration } from '../loupe/types';
 import type { TrialInfo } from '../state/types';
 import type { ToolCapability } from '../tools/types';
 
@@ -182,11 +181,6 @@ export interface Instrument<TS = unknown, TC = unknown, TItem = unknown> {
    *  is allowed to mean. Declaring it is what makes the trial provide the
    *  annotation overlay and its chrome. */
   annotations?: AnnotationsCapability<TS, TC>;
-  /** Magnification. `true` takes every default and re-draws the instrument's
-   *  canvas layers through a zoomed camera; an instrument whose content is DOM
-   *  gives a `render` that draws it again at a camera it is handed. A function
-   *  is re-read as the config changes, so a setting can drive the lens. */
-  loupe?: LoupeDeclaration<TS, TC> | ((config: TC) => LoupeDeclaration<TS, TC>);
   /** Chrome this instrument contributes beyond what its capabilities imply. */
   chrome?: TrialContribution[];
   /** Work too slow to do during a render. The runtime starts it, aborts it on

package/src/job/useJob.ts

@@ -1,6 +1,9 @@
+import { useLatest } from '@weasel-js/core';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { JobCapability, JobFailure, JobHandle, JobStatus } from './types';
 
+/** Inputs to `useJob`. `setState` receives each item folded in by the
+ *  capability's `onItem`. */
 export interface UseJobOptions<TS, TC, TItem> {
   capability: JobCapability<TS, TC, TItem>;
   config: TC;
@@ -23,6 +26,12 @@ function sameKey(a: readonly unknown[] | null, b: readonly unknown[] | null): bo
   return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
 }
 
+/**
+ * Drive a `JobCapability` and report its progress. `start` cancels any run in
+ * flight and begins again; results from a superseded or canceled run are
+ * dropped. With `auto`, it starts on mount and again whenever `key` changes
+ * element-wise. Unmounting aborts the run.
+ */
 export function useJob<TS, TC, TItem>({
   capability,
   config,
@@ -38,14 +47,10 @@ export function useJob<TS, TC, TItem>({
 
   // Read through refs: `run` is called once per run and must see the values as of
   // that moment rather than re-subscribing on every render.
-  const capRef = useRef(capability);
-  capRef.current = capability;
-  const configRef = useRef(config);
-  configRef.current = config;
-  const stateRef = useRef(state);
-  stateRef.current = state;
-  const setStateRef = useRef(setState);
-  setStateRef.current = setState;
+  const capRef = useLatest(capability);
+  const configRef = useLatest(config);
+  const stateRef = useLatest(state);
+  const setStateRef = useLatest(setState);
 
   const cancel = useCallback(() => {
     token.current += 1;
@@ -96,7 +101,7 @@ export function useJob<TS, TC, TItem>({
         }));
       }
     })();
-  }, []);
+  }, [capRef, configRef, setStateRef, stateRef]);
 
   // Re-run when the declared key changes. `auto` covers the first mount too.
   const lastKey = useRef<readonly unknown[] | null>(null);

package/src/lab/Lab.tsx

@@ -5,6 +5,7 @@ import {
   type ReactNode,
   useCallback,
   useEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -13,6 +14,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 +52,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 +107,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 +345,7 @@ function LabRuntime({
   labChrome,
   suppress,
   addTrial,
+  zoom = true,
   tools,
   configRules,
   controls,
@@ -354,6 +361,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
@@ -411,7 +419,10 @@ function LabRuntime({
   }, []);
 
   const ownSurface = useTiledSurface({ onFrame });
-  surfaceRef.current = ownSurface;
+  // 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(
@@ -612,79 +623,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;