@weasel-js/labkit 1.6.1 → 1.7.1

package/src/canvas/cameraRegistry.ts

@@ -0,0 +1,87 @@
+import { useActionsRegistry } from '@weasel-js/core';
+import { createContext, useContext, useEffect } from 'react';
+import type { CameraView } from './CameraInput';
+
+/**
+ * Cameras by key, for chrome that acts on a camera it does not contain — the
+ * lab's zoom controls, which drive whichever trial has the focus.
+ */
+export interface CameraRegistry {
+  /** Publish `camera` under `key` and return its release. Registrants for one
+   *  key stack, newest live. */
+  register(key: string, camera: CameraView): () => void;
+  get(key: string): CameraView | null;
+  /** Fires after any register or release. Shaped for `useSyncExternalStore`. */
+  subscribe(listener: () => void): () => void;
+}
+
+/** An empty in-memory `CameraRegistry`. */
+export function createCameraRegistry(): CameraRegistry {
+  const stacks = new Map<string, CameraView[]>();
+  const listeners = new Set<() => void>();
+  const notify = (): void => {
+    for (const l of listeners) l();
+  };
+  return {
+    register(key, camera) {
+      const stack = stacks.get(key) ?? [];
+      stack.push(camera);
+      stacks.set(key, stack);
+      notify();
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        const cur = stacks.get(key);
+        const i = cur?.lastIndexOf(camera) ?? -1;
+        if (!cur || i === -1) return;
+        cur.splice(i, 1);
+        if (cur.length === 0) stacks.delete(key);
+        notify();
+      };
+    },
+    get: (key) => stacks.get(key)?.at(-1) ?? null,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/** The registry a lab keeps its trials' cameras in. */
+export const CameraRegistryContext = createContext<CameraRegistry | null>(null);
+
+/** Where a camera publishes itself. The host binds the key — a trial provides
+ *  one that registers under its own id — so the camera needs no name. */
+export const CameraPublishContext = createContext<((camera: CameraView) => () => void) | null>(
+  null,
+);
+
+/** Publish `camera` to the host in scope for as long as the caller is mounted,
+ *  and again each time its input scope becomes the active one — a registry
+ *  key stacks newest-live, so the camera last used is the one chrome reaches.
+ *  Call it inside the camera's scope. */
+export function usePublishCamera(camera: CameraView): void {
+  const publish = useContext(CameraPublishContext);
+  const actions = useActionsRegistry();
+  useEffect(() => {
+    if (!publish) return;
+    let release = publish(camera);
+    if (!actions) return release;
+    let was = actions.isActive();
+    const off = actions.subscribe(() => {
+      const now = actions.isActive();
+      if (now && !was) {
+        release();
+        release = publish(camera);
+      }
+      was = now;
+    });
+    return () => {
+      off();
+      release();
+    };
+  }, [publish, camera, actions]);
+}

package/src/canvas/cameraZoom.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import type { CameraView } from './CameraInput';
+import { zoomCameraTo } from './cameraZoom';
+
+function fakeCamera(
+  host: { width: number; height: number } | null,
+  range = { min: 0.1, max: 32 },
+): CameraView & {
+  view: { x: number; y: number; scale: { x: number; y: number } };
+} {
+  const cam = {
+    view: { x: 0, y: 0, scale: { x: 1, y: 1 } },
+    get: () => cam.view,
+    set: (v: { x: number; y: number; scale: { x: number; y: number } }) => {
+      const s = Math.min(range.max, Math.max(range.min, v.scale.x));
+      cam.view = { ...v, scale: { x: s, y: s } };
+    },
+    hostSize: () => host,
+    zoomRange: () => range,
+  };
+  return cam;
+}
+
+describe('zoomCameraTo', () => {
+  it('keeps the middle of the view where it was', () => {
+    const cam = fakeCamera({ width: 200, height: 100 });
+    zoomCameraTo(cam, 2);
+    // The world point under the screen middle (100, 50) is still under it.
+    expect(cam.view.x + 100 / cam.view.scale.x).toBeCloseTo(100);
+    expect(cam.view.y + 50 / cam.view.scale.y).toBeCloseTo(50);
+    expect(cam.view.scale.x).toBe(2);
+  });
+
+  it('anchors at the origin when the camera cannot measure its host', () => {
+    const cam = fakeCamera(null);
+    zoomCameraTo(cam, 2);
+    expect(cam.view).toEqual({ x: 0, y: 0, scale: { x: 2, y: 2 } });
+  });
+
+  it('stops at the edge of the camera range', () => {
+    const cam = fakeCamera({ width: 200, height: 100 }, { min: 0.5, max: 1.2 });
+    zoomCameraTo(cam, 5);
+    expect(cam.view.scale.x).toBe(1.2);
+    expect(cam.view.x + 100 / cam.view.scale.x).toBeCloseTo(100);
+  });
+});

package/src/canvas/cameraZoom.ts

@@ -0,0 +1,24 @@
+import type { View } from '@weasel-js/core';
+import type { CameraView } from './CameraInput';
+
+/** `view` at `scale`, about the screen point `at`. */
+export function atScale(view: View, scale: number, at: { x: number; y: number }): View {
+  return {
+    x: view.x + at.x / view.scale.x - at.x / scale,
+    y: view.y + at.y / view.scale.y - at.y / scale,
+    scale: { x: scale, y: scale },
+  };
+}
+
+/** The middle of the camera's host, in its own screen space; the origin when it cannot measure. */
+export function viewMiddle(camera: CameraView): { x: number; y: number } {
+  const size = camera.hostSize?.();
+  return size ? { x: size.width / 2, y: size.height / 2 } : { x: 0, y: 0 };
+}
+
+/** Zoom `camera` to `zoom` about the middle of its view, within its range. */
+export function zoomCameraTo(camera: CameraView, zoom: number): void {
+  const { min, max } = camera.zoomRange();
+  const scale = Math.min(max, Math.max(min, zoom));
+  camera.set(atScale(camera.get(), scale, viewMiddle(camera)));
+}

package/src/canvas/index.ts

@@ -1,9 +1,14 @@
-export type { CameraContextValue, CameraInputProps, CameraViewOptions } from './CameraInput';
+export type {
+  CameraContextValue,
+  CameraInputProps,
+  CameraView,
+  CameraViewOptions,
+  ZoomRange,
+} from './CameraInput';
 export {
   CameraContext,
   CameraInput,
   CameraScope,
-  CameraScopeContext,
   STAGE_VIEW_ID,
   useCameraView,
 } from './CameraInput';
@@ -15,6 +20,13 @@ export type { CanvasStackContextValue, CanvasStackSurface } from './CanvasStackC
 export { CanvasStackContext } from './CanvasStackContext';
 export type { ZoomAtOptions } from './camera';
 export { centerOn, zoomAt } from './camera';
+export type { CameraRegistry } from './cameraRegistry';
+export {
+  CameraPublishContext,
+  CameraRegistryContext,
+  createCameraRegistry,
+  usePublishCamera,
+} from './cameraRegistry';
 export { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
 export { screenToWorld, worldToScreen } from './canvasCoords';
 export { LinkedCursor } from './LinkedCursor';

package/src/canvas/sharedScope.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Two cameras under one host scope — what a trial gives every canvas inside it,
+ * and what a forge index page puts several of in. Each must answer only for
+ * itself: the newest must not take the others' gestures.
+ */
+
+import { act, render } from '@testing-library/react';
+import { WeaselProvider } from '@weasel-js/core';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import type { ViewTransform } from '../instrument/types';
+import { CanvasStack } from './CanvasStack';
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => null,
+  ) as unknown as HTMLCanvasElement['getContext'];
+  const proto = HTMLElement.prototype as unknown as Record<string, unknown>;
+  proto.setPointerCapture = vi.fn();
+  proto.releasePointerCapture = vi.fn();
+  proto.hasPointerCapture = vi.fn(() => true);
+});
+
+function pointer(el: Element, type: string, x: number, y: number, buttons = 1) {
+  el.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      pointerId: 1,
+      clientX: x,
+      clientY: y,
+      button: 0,
+      buttons,
+    }),
+  );
+}
+
+const VIEW: ViewTransform = { zoom: 1, pan: { x: 0, y: 0 } };
+
+function mountTwo() {
+  const views = [vi.fn(), vi.fn()];
+  const taps = [vi.fn(), vi.fn()];
+  const { container } = render(
+    <WeaselProvider isolate>
+      {(['a', 'b'] as const).map((id, i) => (
+        <CanvasStack
+          key={id}
+          layers={[]}
+          view={VIEW}
+          onViewChange={views[i]}
+          onHitTest={taps[i]}
+          width={100}
+          height={100}
+        />
+      ))}
+    </WeaselProvider>,
+  );
+  const hosts = [...container.querySelectorAll<HTMLElement>('.lk-canvas-stack')];
+  return { hosts, views, taps };
+}
+
+describe('cameras sharing a host scope', () => {
+  it('pans the camera the drag began on, not the newest', () => {
+    const { hosts, views } = mountTwo();
+    act(() => {
+      pointer(hosts[0]!, 'pointerdown', 50, 50);
+      pointer(hosts[0]!, 'pointermove', 60, 55);
+      pointer(hosts[0]!, 'pointermove', 80, 70);
+      pointer(hosts[0]!, 'pointerup', 80, 70, 0);
+    });
+    expect(views[0]).toHaveBeenCalled();
+    expect(views[1]).not.toHaveBeenCalled();
+  });
+
+  it('reports a tap to the canvas it landed on', () => {
+    const { hosts, taps } = mountTwo();
+    act(() => {
+      pointer(hosts[0]!, 'pointerdown', 50, 50);
+      pointer(hosts[0]!, 'pointerup', 50, 50, 0);
+    });
+    expect(taps[0]).toHaveBeenCalledTimes(1);
+    expect(taps[1]).not.toHaveBeenCalled();
+  });
+
+  it('still drives the newest camera from its own canvas', () => {
+    const { hosts, views } = mountTwo();
+    act(() => {
+      pointer(hosts[1]!, 'pointerdown', 50, 50);
+      pointer(hosts[1]!, 'pointermove', 80, 70);
+      pointer(hosts[1]!, 'pointerup', 80, 70, 0);
+    });
+    expect(views[1]).toHaveBeenCalled();
+    expect(views[0]).not.toHaveBeenCalled();
+  });
+});

package/src/canvas/worldSpec.ts

@@ -5,7 +5,7 @@ import type { Point, ViewTransform } from '../instrument/types';
  *  world (0,0) at the element's top-left, y growing downward. */
 export interface WorldSpec {
   /** Where world (0,0) sits at `pan` zero, as a fraction of the viewport.
-   *  `{x:0,y:0}` top-left (default); `{x:0.5,y:0.5}` centre. */
+   *  `{x:0,y:0}` top-left (default); `{x:0.5,y:0.5}` center. */
   origin?: Point;
   /** Which way the world y axis runs on screen. Default `'down'`. */
   yAxis?: 'down' | 'up';
@@ -25,8 +25,10 @@ export interface WorldFrame {
   yDir: 1 | -1;
 }
 
+/** The frame an absent `WorldSpec` resolves to: origin top-left, y down. */
 export const DEFAULT_FRAME: WorldFrame = { originPx: { x: 0, y: 0 }, yDir: 1 };
 
+/** Resolve `spec` against a viewport of `size`; `undefined` gives `DEFAULT_FRAME`. */
 export function resolveFrame(spec: WorldSpec | undefined, size: ViewportSize): WorldFrame {
   if (!spec) return DEFAULT_FRAME;
   const origin = spec.origin ?? { x: 0, y: 0 };

package/src/chrome/ChromeRegions.stories.tsx

@@ -72,6 +72,7 @@ export default meta;
 type Story = StoryObj<typeof Lab>;
 
 export const EveryRegion: Story = {
+  tags: ['gallery'],
   args: {
     instruments: [FullInstrument],
     defaultInstrument: 'Every Region',

package/src/chrome/builtins.test.ts

@@ -23,6 +23,7 @@ const ctx: TrialChromeContext = {
   canRedo: false,
   undo: () => {},
   redo: () => {},
+  hasLoupe: false,
   loupeOn: false,
   toggleLoupe: () => {},
   configFields: [],
@@ -72,21 +73,21 @@ describe('builtinContributions', () => {
     expect(ids({ ...bare, undo: {} })).toContain('redo');
   });
 
-  it('contributes the loupe toggle only when the instrument declares one', () => {
+  it('contributes the loupe toggle only while a lens is mounted', () => {
     expect(ids(bare)).not.toContain('loupe');
-    expect(ids({ ...bare, loupe: true })).toContain('loupe');
-    expect(ids({ ...bare, loupe: { render: () => null } })).toContain('loupe');
+    const mounted = builtinContributions(bare, { ...ctx, hasLoupe: true });
+    expect(mounted.map((c) => c.id)).toContain('loupe');
   });
 
   it('offers the loupe to a DOM instrument, which declares no canvas', () => {
-    const contributions = builtinContributions({ ...bare, loupe: true }, ctx);
+    const contributions = builtinContributions(bare, { ...ctx, hasLoupe: true });
     const loupe = contributions.find((c) => c.id === 'loupe');
     expect(loupe?.region).toBe('toolbar');
   });
 
   it('reports the loupe switch position, so the button reads as held', () => {
-    const off = builtinContributions({ ...bare, loupe: true }, ctx);
-    const on = builtinContributions({ ...bare, loupe: true }, { ...ctx, loupeOn: true });
+    const off = builtinContributions(bare, { ...ctx, hasLoupe: true });
+    const on = builtinContributions(bare, { ...ctx, hasLoupe: true, loupeOn: true });
     expect(off.find((c) => c.id === 'loupe')?.item).toMatchObject({ pressed: false });
     expect(on.find((c) => c.id === 'loupe')?.item).toMatchObject({ pressed: true });
   });

package/src/chrome/builtins.tsx

@@ -39,6 +39,10 @@ function groupFolds(
   return out;
 }
 
+/** Built-in ids contributed only while runtime state says so — the loupe
+ *  toggle appears once a lens mounts, after the trial's first render. */
+export const TRANSIENT_BUILTINS: ReadonlySet<string> = new Set(['loupe']);
+
 /**
  * The contributions a trial gets from what its instrument declared. This is
  * the whole "declaring a capability provides the chrome" rule — it replaces
@@ -93,7 +97,7 @@ export function builtinContributions(
     });
   }
 
-  if (instrument.loupe != null) {
+  if (ctx.hasLoupe) {
     out.push({
       id: 'loupe',
       region: 'toolbar',

package/src/chrome/index.ts

@@ -1,4 +1,4 @@
-export { builtinContributions } from './builtins';
+export { builtinContributions, TRANSIENT_BUILTINS } from './builtins';
 export type { LabRegionProps } from './LabChrome';
 export {
   contributionsIn,

package/src/chrome/merge.test.ts

@@ -44,6 +44,11 @@ describe('suppressContributions', () => {
     );
   });
 
+  it('passes over an absent id it was told may come and go', () => {
+    const out = suppressContributions([toolbarItem('a')], ['late'], new Set(['late']));
+    expect(out.map((c) => c.id)).toEqual(['a']);
+  });
+
   it('is a no-op for an empty suppress list', () => {
     const bundle = [toolbarItem('a')];
     expect(suppressContributions(bundle, [])).toEqual(bundle);

package/src/chrome/merge.ts

@@ -30,15 +30,17 @@ export function mergeContributions<T extends { id: string }>(
 /**
  * Drop contributions by id. Throws when an id is not present: a typo that
  * silently suppresses nothing is the same class of bug as a duplicate id
- * silently winning.
+ * silently winning. `transient` names ids that are legitimately absent at
+ * times — contributed only while some runtime state holds.
  */
 export function suppressContributions<T extends { id: string }>(
   bundle: readonly T[],
   ids: readonly string[],
+  transient: ReadonlySet<string> = new Set(),
 ): T[] {
   const present = new Set(bundle.map((c) => c.id));
   for (const id of ids) {
-    if (!present.has(id)) {
+    if (!present.has(id) && !transient.has(id)) {
       throw new Error(
         `[labkit] cannot suppress "${id}": no contribution with that id. ` +
           `Present ids: ${[...present].join(', ')}`,

package/src/chrome/regions/PaletteRegion.less

@@ -4,11 +4,4 @@
   padding: var(--wzl-space-xs);
   border-right: var(--wzl-border-w) solid var(--wzl-line-subtle);
   background: var(--wzl-surface-sunken);
-
-  // labkit's `:where(button)` default sets an explicit height, and because
-  // :where() carries no specificity it also wins over ToolButton, which sizes
-  // itself from padding.
-  button {
-    height: auto;
-  }
 }

package/src/chrome/regions/PaletteRegion.test.tsx

@@ -62,16 +62,15 @@ describe('PaletteRegion', () => {
 
   it('walks the vertical strip with ArrowDown, and leaves ArrowRight to the page', () => {
     render(<PaletteRegion contributions={[tool('brush'), tool('eraser')]} ctx={ctxWith(null)} />);
-    const strip = screen.getByRole('toolbar', { name: 'Tools' });
     const brush = screen.getByRole('button', { name: 'brush' });
     const eraser = screen.getByRole('button', { name: 'eraser' });
 
     brush.focus();
-    fireEvent.keyDown(strip, { key: 'ArrowDown' });
+    fireEvent.keyDown(brush, { key: 'ArrowDown' });
     expect(document.activeElement).toBe(eraser);
     expect(eraser).toHaveAttribute('tabindex', '0');
 
-    fireEvent.keyDown(strip, { key: 'ArrowRight' });
+    fireEvent.keyDown(eraser, { key: 'ArrowRight' });
     expect(document.activeElement).toBe(eraser);
   });
 });

package/src/chrome/regions/PaletteRegion.tsx

@@ -1,5 +1,4 @@
-import { ToolButton, ToolGroup } from '../../passthrough/weasel-ui';
-import { useRovingTabIndex } from '../../primitives/useRovingTabIndex';
+import { ToolButton, ToolGroup, useRovingTabIndex } from '../../passthrough/weasel-ui';
 import type { RegionContribution, ToolItem, ToolSlotContext, TrialChromeContext } from '../types';
 
 /** Props for `<PaletteRegion>`. */
@@ -19,11 +18,11 @@ export function PaletteRegion<TCtx extends ToolSlotContext = TrialChromeContext>
   ctx,
   region = 'palette',
 }: PaletteRegionProps<TCtx>) {
-  const { ref, onKeyDown } = useRovingTabIndex<HTMLDivElement>('vertical');
+  const { rootRef, onKeyDown } = useRovingTabIndex<HTMLDivElement>({ orientation: 'vertical' });
   if (contributions.length === 0) return null;
   return (
     <div
-      ref={ref}
+      ref={rootRef}
       className="lk-palette-region"
       role="toolbar"
       aria-label="Tools"

package/src/chrome/regions/SidebarRegion.less

@@ -23,6 +23,7 @@
   --_s-tone: var(--wzl-tone, var(--_s-surface));
   --_s-accent: var(--wzl-tone);
   --_s-title-font: var(--wzl-font-display);
+  --_s-title-weight: var(--wzl-font-weight-bold);
   --_s-title-size: var(--wzl-font-size-sm);
   --_s-title-case: uppercase;
   --_s-title-tracking: 0.08em;
@@ -36,6 +37,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-scope-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-scope-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-scope-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-scope-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-scope-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-scope-title-tracking, 0.08em);
@@ -49,6 +51,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-aside-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-aside-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-aside-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-aside-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-aside-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-aside-title-tracking, 0.08em);
@@ -62,6 +65,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-advanced-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-advanced-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-advanced-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-advanced-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-advanced-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-advanced-title-tracking, 0.08em);
@@ -75,6 +79,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-debug-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-debug-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-debug-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-debug-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-debug-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-debug-title-tracking, 0.08em);
@@ -88,6 +93,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-danger-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-danger-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-danger-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-danger-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-danger-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-danger-title-tracking, 0.08em);
@@ -101,6 +107,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-notice-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-notice-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-notice-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-notice-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-notice-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-notice-title-tracking, 0.08em);
@@ -114,6 +121,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-important-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-important-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-important-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-important-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-important-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-important-title-tracking, 0.08em);
@@ -127,6 +135,7 @@
   --_s-tone: var(--wzl-tone, var(--wzl-stance-preview-tone, var(--_s-surface)));
   --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));
   --_s-title-font: var(--wzl-stance-preview-title-font, var(--wzl-font-display));
+  --_s-title-weight: var(--wzl-stance-preview-title-weight, var(--wzl-font-weight-bold));
   --_s-title-size: var(--wzl-stance-preview-title-size, var(--wzl-font-size-sm));
   --_s-title-case: var(--wzl-stance-preview-title-case, uppercase);
   --_s-title-tracking: var(--wzl-stance-preview-title-tracking, 0.08em);
@@ -174,12 +183,13 @@
 .lk-sidebar-section__head {
   flex: 1;
   width: 100%;
-  padding: var(--wzl-space-xs);
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
   border: 0;
   background: transparent;
   color: var(--_s-title-color);
   font-family: var(--_s-title-font);
   font-size: var(--_s-title-size);
+  font-weight: var(--_s-title-weight);
   letter-spacing: var(--_s-title-tracking);
   text-align: left;
   text-transform: var(--_s-title-case);
@@ -193,5 +203,5 @@
 // The section body is the only thing that insets a panel — the panels
 // themselves carry no padding, so this is the whole gutter.
 .lk-sidebar-section__body {
-  padding: 0 var(--wzl-space-xs) var(--wzl-space-xs);
+  padding: 0 var(--wzl-space-sm) var(--wzl-space-sm);
 }

package/src/chrome/regions/ViewportRegion.browser.test.less

@@ -0,0 +1,6 @@
+// Narrower than the zoom control's 160px natural width, wider than its floor.
+.lk-viewport-test-well {
+  position: relative;
+  width: 160px;
+  height: 120px;
+}

package/src/chrome/regions/ViewportRegion.browser.test.tsx

@@ -0,0 +1,38 @@
+import '@weasel-js/theme/tokens.css';
+import '../../styles.less';
+import './ViewportRegion.browser.test.less';
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, expect, test } from 'vitest';
+import { ZoomControl } from '../../primitives/ZoomControl';
+import type { TrialChromeContext, TrialContribution } from '../types';
+import { ViewportRegion } from './ViewportRegion';
+
+// Whether a rendered control shrinks to the cluster or runs out past it is
+// layout, which only a real browser has.
+
+afterEach(cleanup);
+
+const ctx = { zoom: 1, setZoom: () => {} } as unknown as TrialChromeContext;
+
+const contributions: TrialContribution[] = [
+  {
+    id: 'zoom-control',
+    region: 'viewport',
+    render: (c) => <ZoomControl zoom={c.zoom ?? 1} onZoomChange={c.setZoom} />,
+  },
+];
+
+test('a zoom control on its own row shrinks its slider to fit a narrow well', () => {
+  const { container } = render(
+    <div className="lk-root">
+      <div className="lk-viewport-test-well">
+        <ViewportRegion contributions={contributions} ctx={ctx} />
+      </div>
+    </div>,
+  );
+  const cluster = container.querySelector('.lk-viewport-controls')?.getBoundingClientRect();
+  const zoom = container.querySelector('.lk-zoom')?.getBoundingClientRect();
+  if (!cluster || !zoom) throw new Error('nothing rendered');
+  expect(zoom.left).toBeGreaterThanOrEqual(cluster.left);
+  expect(zoom.right).toBeLessThanOrEqual(cluster.right);
+});

package/src/chrome/regions/ViewportRegion.less

@@ -17,6 +17,12 @@
   backdrop-filter: blur(var(--wzl-glass-blur));
 }
 
+// Without this a rendered control's floor is its content's min-content, and the
+// zoom slider's fixed width then runs it out past the cluster on a narrow well.
+.lk-viewport-controls__item {
+  min-width: 0;
+}
+
 .lk-viewport-controls__button {
   display: inline-flex;
   align-items: center;

package/src/chrome/regions/ViewportRegion.tsx

@@ -1,4 +1,4 @@
-import { useRovingTabIndex } from '../../primitives/useRovingTabIndex';
+import { useRovingTabIndex } from '../../passthrough/weasel-ui';
 import type { TrialChromeContext, TrialContribution } from '../types';
 
 /** Props for `<ViewportRegion>`. */
@@ -12,18 +12,24 @@ export interface ViewportRegionProps {
  * rather than in the toolbar, which acts on the trial itself.
  */
 export function ViewportRegion({ contributions, ctx }: ViewportRegionProps) {
-  const { ref, onKeyDown } = useRovingTabIndex<HTMLDivElement>();
+  const { rootRef, onKeyDown } = useRovingTabIndex<HTMLDivElement>({ orientation: 'horizontal' });
   if (contributions.length === 0) return null;
   return (
     <div
-      ref={ref}
+      ref={rootRef}
       className="lk-viewport-controls"
       role="toolbar"
       aria-label="View"
       onKeyDown={onKeyDown}
     >
       {contributions.map((c) => {
-        if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
+        if (c.render) {
+          return (
+            <span key={c.id} className="lk-viewport-controls__item">
+              {c.render(ctx)}
+            </span>
+          );
+        }
         if (c.region !== 'viewport' || !c.item) return null;
         const { icon: Icon, label, disabled, onActivate } = c.item;
         return (