@weasel-js/labkit 1.6.0 → 1.7.0

package/src/lab/Lab.tsx

@@ -12,7 +12,8 @@ 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 { 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
@@ -478,10 +485,10 @@ function LabRuntime({
   // 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');
@@ -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;

package/src/lab/LabHeader.test.tsx

@@ -58,28 +58,38 @@ describe('<LabHeader>', () => {
       <Lab instruments={[Stub, Other]} defaultInstrument="Stub" addTrial={false} />,
     );
     expect(screen.queryByRole('button', { name: /add trial/i })).toBeNull();
-    expect(screen.getByRole('radio', { name: 'Auto' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Theme: Auto/ })).toBeInTheDocument();
     unmount();
     render(<Lab instruments={[Stub]} defaultInstrument="Stub" addTrial={false} />);
     expect(screen.queryByRole('button', { name: /add trial/i })).toBeNull();
   });
 
-  it('exposes the color mode as a three-way choice', () => {
+  it('rotates the color mode from one button', async () => {
+    const { default: userEvent } = await import('@testing-library/user-event');
+    const user = userEvent.setup();
     render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
-    for (const label of ['Auto', 'Light', 'Dark']) {
-      expect(screen.getByRole('radio', { name: label })).toBeInTheDocument();
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+    for (const [now, next] of [
+      ['Auto', 'Light'],
+      ['Light', 'Dark'],
+      ['Dark', 'Auto'],
+    ]) {
+      const button = screen.getByRole('button', { name: `Theme: ${now} — click for ${next}` });
+      expect(button.querySelector('svg')).not.toBeNull();
+      expect(button).toHaveTextContent('');
+      await user.click(button);
     }
+    expect(screen.getByRole('button', { name: /^Theme: Auto/ })).toBeInTheDocument();
   });
 
-  it('draws each color mode as a glyph, with the word only as its name', () => {
-    // The assertion above passes whether the segment holds text or an icon,
-    // because both routes produce the same accessible name. This is the one
-    // that can tell them apart.
-    render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
-    for (const label of ['Auto', 'Light', 'Dark']) {
-      const segment = screen.getByRole('radio', { name: label });
-      expect(segment.querySelector('svg')).not.toBeNull();
-      expect(segment).toHaveTextContent('');
-    }
+  it('puts the theme switch after the header content a consumer passes', () => {
+    render(
+      <Lab instruments={[Stub]} defaultInstrument="Stub">
+        <button type="button">Consumer</button>
+      </Lab>,
+    );
+    const consumer = screen.getByRole('button', { name: 'Consumer' });
+    const theme = screen.getByRole('button', { name: /^Theme: / });
+    expect(consumer.compareDocumentPosition(theme) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 });

package/src/lab/LabHeader.tsx

@@ -1,11 +1,10 @@
 import { AddIcon } from '@weasel-js/ui';
-import { ColorModeControl, MenuButton } from '../passthrough/weasel-ui';
+import { MenuButton, ThemeSwitcher } from '../passthrough/weasel-ui';
 import { useLabContext } from './LabContext';
 
-/** The controls `<Lab>` puts in its header: add a trial, and choose the color
- *  mode. Both drive `LabContext`, which carried them with no UI at all — so
- *  every consumer rebuilt these two. Rendered before a consumer's own header
- *  content, which still lands beside them. */
+/** The control `<Lab>` puts at the start of its header: add a trial. It drives
+ *  `LabContext`, which carried it with no UI at all — so every consumer rebuilt
+ *  it. Rendered before a consumer's own header content. */
 export function LabHeader({ addTrial = true }: { addTrial?: boolean }) {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
@@ -29,13 +28,13 @@ export function LabHeader({ addTrial = true }: { addTrial?: boolean }) {
           onAction={(name) => lab.addTrial(name)}
         />
       )}
-
-      <ColorModeControl
-        className="lk-lab-header__mode"
-        variant="flat"
-        value={lab.mode}
-        onChange={lab.setMode}
-      />
     </>
   );
 }
+
+/** The lab's color-mode switch, which `<Lab>` puts at the end of its header,
+ *  after a consumer's own header content. */
+export function LabThemeSwitcher() {
+  const lab = useLabContext();
+  return <ThemeSwitcher value={lab.mode} onChange={lab.setMode} />;
+}

package/src/lab/LabShell.less

@@ -155,21 +155,12 @@
   align-self: center;
 }
 
-// `Select` is a form field and defaults to `width: 100%`. Left to resolve that
-// against a shrink-to-fit header row it swallows the slack, which pushed the
-// consumer's own header content down to min-content and wrapped the row to
-// three lines. See the `.lk-root` prefix convention in theme/base.less.
-// The mode toggle is a preference, not a primary action: it sits quiet until
-// the pointer is on it.
-.lk-lab-header__mode {
-  opacity: 0.75;
-  // A consumer's own header content shares this row and does not shrink, so
-  // without this the segments compress past their labels and the pill track
-  // disappears entirely.
-  flex-shrink: 0;
-
-  &:hover,
-  &:focus-within {
-    opacity: 1;
-  }
+// The readout's digit count changes as the zoom does (80% to 125%), so it sits
+// in a cell sized for the widest value the default range reaches, and the
+// buttons either side of it stay put.
+.lk-lab-zoom__readout {
+  display: inline-block;
+  min-width: 5ch;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
 }

package/src/lab/LabSwitcher.less

@@ -29,9 +29,9 @@
   &:hover { color: var(--wzl-accent-fg); }
 
   &:focus-visible {
-    outline: 2px solid var(--wzl-focus-ring, currentColor);
+    outline: 2px solid var(--wzl-focus-ring);
     outline-offset: 2px;
-    border-radius: var(--wzl-radius-sm, 3px);
+    border-radius: var(--wzl-radius-sm);
   }
 }
 
@@ -64,22 +64,22 @@
   // surface, the way `FloatingPanel` does.
   background: var(--wzl-surface);
   border: 1px solid var(--wzl-border);
-  border-radius: var(--wzl-radius-md, 5px);
+  border-radius: var(--wzl-radius-md);
   box-shadow: 0 6px 20px var(--wzl-shadow);
 }
 
 .lk-switcher-item {
   padding: var(--wzl-space-xs) var(--wzl-space-sm);
-  border-radius: var(--wzl-radius-sm, 3px);
+  border-radius: var(--wzl-radius-sm);
   color: var(--wzl-fg);
   font-size: var(--wzl-font-size);
   text-decoration: none;
   white-space: nowrap;
 
-  &:hover { background: var(--wzl-surface-hover, var(--wzl-surface)); }
+  &:hover { background: var(--wzl-surface-hover); }
 
   &:focus-visible {
-    outline: 2px solid var(--wzl-focus-ring, currentColor);
+    outline: 2px solid var(--wzl-focus-ring);
     outline-offset: -2px;
   }
 }