@weasel-js/labkit 1.5.1 → 1.5.2

package/dist/ui/layers/index.js

@@ -1,3 +1,3 @@
-export { c4 as LayerStack } from '../../chunk-T3EC2DXD.js';
+export { c4 as LayerStack } from '../../chunk-LASCBWW7.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/undo/index.d.ts

@@ -1,6 +1,6 @@
-export { at as UndoCapability } from '../_dts/frac-B4okC2lX.js';
+export { au as UndoCapability } from '../_dts/frac-B4hFJMiN.js';
 import 'react';
-import '../_dts/types-DzoNY1pO.js';
+import '../_dts/types-Db-3NNk1.js';
 import '@weasel-js/core';
 import '../_dts/PrefsForm.d-DPy9I8It.js';
 import '../_dts/types-DJ79Tg5J.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -115,17 +115,17 @@
     "dev:3d": "LABKIT_EXAMPLE=3d-lab vite"
   },
   "peerDependencies": {
-    "@weasel-js/core": "1.5.1",
-    "@weasel-js/theme": "1.5.1",
+    "@weasel-js/core": "1.5.2",
+    "@weasel-js/theme": "1.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/geom": "1.5.1",
-    "@weasel-js/kernel3d": "1.5.1",
-    "@weasel-js/loupe": "1.5.1",
-    "@weasel-js/svg": "1.5.1",
-    "@weasel-js/ui": "1.5.1",
+    "@weasel-js/geom": "1.5.2",
+    "@weasel-js/kernel3d": "1.5.2",
+    "@weasel-js/loupe": "1.5.2",
+    "@weasel-js/svg": "1.5.2",
+    "@weasel-js/ui": "1.5.2",
     "earcut": "2.2.4",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -136,7 +136,7 @@
     "@biomejs/biome": "^2.4.12",
     "@rollup/plugin-alias": "^6.0.0",
     "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.5.1",
+    "@weasel-js/modes": "1.5.2",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/canvas/index.ts

@@ -10,15 +10,6 @@ export { screenToWorld, worldToScreen } from './canvasCoords';
 export type { StageProps } from './Stage';
 export { fitStage, Stage } from './Stage';
 export type { CanvasLayerDescriptor } from './useLayerScheduler';
-export type { OrbitHandlers, OrbitView, UseOrbitOptions, Vec3 } from './useOrbit';
-export {
-  clampPitch,
-  orbitAfterDrag,
-  orbitAfterWheel,
-  PITCH_LIMIT,
-  useOrbit,
-  wrapYaw,
-} from './useOrbit';
 export type { PanZoomHandlers, UsePanZoomOptions } from './usePanZoom';
 export { usePanZoom } from './usePanZoom';
 export type { ViewportSize, WorldFrame, WorldSpec } from './worldSpec';

package/src/chrome/labTypes.ts

@@ -40,7 +40,7 @@ export type LabContribution<TCtx = LabChromeContext> =
       item: ToolbarItem<TCtx>;
       render?: never;
     })
-  | (ContributionBase & { region: 'palette'; item: ToolItem; render?: never })
+  | (ContributionBase & { region: 'palette'; item: ToolItem<TCtx>; render?: never })
   | (ContributionBase & { region: 'sidebar' | 'aside'; item: SidebarSection; render?: never })
   | (ContributionBase & { region: 'footer'; item: StatusReadout; render?: never })
   | (ContributionBase & {

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

@@ -36,6 +36,24 @@ describe('PaletteRegion', () => {
     expect(setActiveTool).toHaveBeenCalledWith('brush');
   });
 
+  it('runs a command tool instead of selecting it, and never marks it current', () => {
+    const onActivate = vi.fn();
+    const setActiveTool = vi.fn();
+    const ctx = ctxWith('info', setActiveTool);
+    const info: RegionContribution<ToolSlotContext> = {
+      id: 'info',
+      region: 'palette',
+      item: { icon: Glyph, label: 'Info', onActivate },
+    };
+    render(<PaletteRegion contributions={[info]} ctx={ctx} />);
+    const button = screen.getByRole('button', { name: 'Info' });
+    button.click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+    expect(setActiveTool).not.toHaveBeenCalled();
+    // The slot names this id, and a command still must not read as held down.
+    expect(button).not.toHaveAttribute('aria-current');
+  });
+
   it('puts exactly one tool in the tab order', () => {
     render(<PaletteRegion contributions={[tool('brush'), tool('eraser')]} ctx={ctxWith(null)} />);
     expect(screen.getByRole('button', { name: 'brush' })).toHaveAttribute('tabindex', '0');

package/src/chrome/regions/PaletteRegion.tsx

@@ -12,7 +12,8 @@ export interface PaletteRegionProps<TCtx extends ToolSlotContext = TrialChromeCo
 }
 
 /** A tool strip: a trial's, or the lab's. Selection lives in whichever tool
- *  slot the context carries; this region only reflects it. */
+ *  slot the context carries; this region only reflects it. An item carrying
+ *  `onActivate` is a command instead — it presses, and never latches. */
 export function PaletteRegion<TCtx extends ToolSlotContext = TrialChromeContext>({
   contributions,
   ctx,
@@ -33,16 +34,16 @@ export function PaletteRegion<TCtx extends ToolSlotContext = TrialChromeContext>
         {contributions.map((c) => {
           if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
           if (c.region !== region || !c.item) return null;
-          const { icon: Icon, label, shortcut, disabled } = c.item as ToolItem;
+          const { icon: Icon, label, shortcut, disabled, onActivate } = c.item as ToolItem<TCtx>;
           return (
             <ToolButton
               key={c.id}
               icon={<Icon size={16} />}
               label={label}
               shortcut={shortcut}
-              active={ctx.activeToolId === c.id}
+              active={onActivate ? false : ctx.activeToolId === c.id}
               disabled={disabled}
-              onClick={() => ctx.setActiveTool(c.id)}
+              onClick={onActivate ? () => onActivate(ctx) : () => ctx.setActiveTool(c.id)}
             />
           );
         })}

package/src/chrome/regions/TitleBarRegion.tsx

@@ -32,7 +32,7 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
       onPointerDown={(e) => e.stopPropagation()}
       onMouseDown={(e) => e.stopPropagation()}
     >
-      <Icon size={14} />
+      <Icon size={16} />
     </button>
   );
 }

package/src/chrome/types.ts

@@ -31,12 +31,18 @@ export interface ToolbarItem<TCtx = TrialChromeContext> {
   onActivate: (ctx: TCtx) => void;
 }
 
-/** A selectable tool in the palette region. */
-export interface ToolItem {
+/** A tool in the palette region: a mode by default, a command when it carries
+ *  an `onActivate`. `TCtx` is the chrome context that handler is handed — a
+ *  trial's, or the lab's for a lab-level rail. */
+export interface ToolItem<TCtx = TrialChromeContext> {
   icon: IconComponent;
   label: string;
+  /** Shown in the tooltip. Not bound here — the trial owns its keymap. */
   shortcut?: string;
   disabled?: boolean;
+  /** Runs on press instead of selecting. An item with one is a command: it
+   *  never writes the tool slot, and never reads as the current tool. */
+  onActivate?: (ctx: TCtx) => void;
 }
 
 /** A titled block in the sidebar. */

package/src/config/builder.ts

@@ -110,7 +110,7 @@ export abstract class BaseNode<T> implements ConfigNode<T> {
     return this.opt({ unpinned: true });
   }
 
-  /** Never auto. The row takes no pin dot and ignores the gesture. */
+  /** Never auto. The row's label does not toggle. */
   manual(): this {
     return this.opt({ manual: true });
   }
@@ -254,9 +254,8 @@ export class GroupNode<S extends ConfigShape> implements ConfigBranch<S> {
     return this.with({ ...this.annotations, name }, this.options);
   }
 
-  /** Longer help text. Carried on the resolved `PrefGroup`, where weasel-ui's
-   *  `PrefsForm` draws it under the heading; `ControlPanel` has no place for
-   *  it yet and shows the heading alone. */
+  /** Longer help text. Carried on the resolved `PrefGroup`; both weasel-ui's
+   *  `PrefsForm` and `ControlPanel` draw it under the heading. */
   describe(description: string): GroupNode<S> {
     return this.with({ ...this.annotations, description }, this.options);
   }

package/src/config/types.ts

@@ -123,15 +123,15 @@ export interface NodeOptions extends BranchOptions {
   render?: ControlRenderer;
   /** Errors for this leaf under `config`, the instrument's whole config. */
   validate?: (leaf: PrefLeaf, config: Record<string, unknown>) => string[];
-  /** Computes this leaf's value while it is auto. Attaching one is what lets
-   *  the ghosted control draw a real value and keeps the instrument off
+  /** Computes this leaf's value while it is auto. Attaching one is what gives
+   *  the row a real value to pin back to and keeps the instrument off
    *  `?? compute()`. */
   autoResolve?: (config: Record<string, unknown>) => unknown;
   /** The leaf starts auto rather than pinned at its default. Set by
    *  `.initial(auto)`. */
   unpinned?: boolean;
-  /** The leaf can never be auto: the row takes no pin dot and ignores the
-   *  gesture. For a value the instrument cannot receive as `undefined`. */
+  /** The leaf can never be auto: the row's label does not toggle. For a value
+   *  the instrument cannot receive as `undefined`. */
   manual?: boolean;
 }
 

package/src/controls/AutoControls.stories.tsx

@@ -37,7 +37,7 @@ const schema = f.schema({
 
 const resolved = resolveConfigSchema(schema, []);
 
-/** Every path the panel will draw ghosted, except the `.manual()` one. */
+/** Every path the panel will draw as auto, except the `.manual()` one. */
 const EVERY_AUTO = ['gap', 'cols', 'wave', 'mode', 'showGrid', 'title', 'tint'];
 
 function Panel({ start }: { start: readonly string[] }) {
@@ -73,16 +73,16 @@ function Pair() {
 }
 
 /**
- * Both states of every row kind, side by side. What to look at: an auto row's
- * control keeps no accent color, its readout reads `auto · 18 px` rather than a
- * number, and the pin dot appears only under the pointer — except on an auto
- * row, where it stays. `Seed` is `.manual()` and takes no dot at all.
+ * Both states of every row kind, side by side. What to look at: an auto row
+ * shows no control at all — only its label and the word `auto` — and still
+ * takes exactly the room it took while pinned, so nothing below it moves on
+ * the toggle. `Seed` is `.manual()` and does not toggle.
  */
 export const BothStates: Story = {
   render: () => <Pair />,
 };
 
-/** One panel to shift-click around in: the handle must not move as it toggles. */
+/** One panel to click labels around in: the row must not resize as it toggles. */
 export const Interactive: Story = {
   render: () => <Panel start={['gap']} />,
 };

package/src/controls/ControlPanel.less

@@ -5,3 +5,26 @@
 .lk-control-panel {
   padding: 0;
 }
+
+// A cell in a paired row, with the caption naming the knob it holds. Case,
+// tracking, alignment and width come from the --wzl-params-label-* properties,
+// which inherit across the CSS-module boundary that keeps PropertyPanel's row
+// label class out of reach from here.
+.lk-pair-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wzl-space-3, 6px);
+  min-width: 0;
+}
+
+.lk-pair-label {
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
+  font-size: var(--wzl-font-size-sm);
+  color: var(--wzl-fg-muted);
+  text-transform: var(--wzl-params-label-case, uppercase);
+  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));
+  text-align: var(--wzl-params-label-align, start);
+  inline-size: var(--wzl-params-label-width, auto);
+  white-space: nowrap;
+}

package/src/controls/ControlPanel.stories.tsx

@@ -275,3 +275,44 @@ export const Presentation: Story = {
     );
   },
 };
+
+const inline = f.schema({
+  folderPad: f.number(1.1).range(0, 4).step(0.1).label('Folder pad'),
+  glyphs: f.number(1_000_000).range(0, 2_000_000).format('compact'),
+  names: f.number(60).range(0, 100),
+  labels: f.number(0).range(0, 100),
+  placement: f.enum('spread', ['spread', 'stack', 'ring']),
+  lift: f.number(0.2).range(0, 1).step(0.05),
+  opacity: f.number(0.45).range(0, 1).step(0.05),
+  iconSet: f.enum('small', ['small', 'large']).label('Icon set'),
+  drawAsIcons: f.string('**/node_modules/**').label('Draw as icons'),
+  detail: f.number(1200).range(0, 4000).suffix('nodes'),
+  showCameraRoute: f.boolean(false).toggle().label('Show camera route'),
+  routeColor: f.enum('sweep', ['sweep', 'depth']).label('Route color'),
+  minimap: f.boolean(true).toggle(),
+  minimapSize: f.number(280).range(80, 600).label('Minimap size'),
+  pickHud: f.boolean(true).toggle().label('Pick HUD'),
+  pickOutlines: f.boolean(true).toggle().label('Pick outlines'),
+  markOverlay: f.boolean(false).toggle().label('Mark overlay'),
+});
+
+/** The shape a lab's sidebar draws: `layout="inline"` paired two to a row, in a
+ *  narrow column. Every row kind meets here — slider, select, switch, text —
+ *  and they have to share one base height, or the column reads as ragged. */
+export const Inline: Story = {
+  render: () => {
+    const schema = resolveConfigSchema(inline, []);
+    const [config, setConfig] = useState<Record<string, unknown>>(inline.defaults());
+    return (
+      <div style={{ width: 360 }}>
+        <ControlPanel
+          schema={schema}
+          config={config}
+          setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
+          layout="inline"
+          align="center"
+        />
+      </div>
+    );
+  },
+};

package/src/controls/ControlPanel.test.tsx

@@ -482,6 +482,24 @@ describe('<ControlPanel> format', () => {
   });
 });
 
+describe('<ControlPanel> group descriptions', () => {
+  it('draws a named group’s describe() above its rows', () => {
+    const schema = resolveConfigSchema(
+      f.schema({
+        grid: f
+          .group({ cellSize: f.number(20) })
+          .label('Grid')
+          .describe('How the background lattice is spaced.'),
+      }),
+      [],
+    );
+    render(<ControlPanel schema={schema} config={{ grid: { cellSize: 20 } }} setConfig={vi.fn()} />);
+    const note = screen.getByText('How the background lattice is spaced.');
+    const field = screen.getByLabelText('Cell size');
+    expect(note.compareDocumentPosition(field) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
 describe('<ControlPanel> section layout', () => {
   const schema = resolveConfigSchema(
     f.schema({
@@ -675,7 +693,7 @@ describe('<ControlPanel> nested groups', () => {
 });
 
 describe('<ControlPanel> auto', () => {
-  it('renders a pin dot whether or not it was given a set of auto paths', () => {
+  it('renders a label toggle whether or not it was given a set of auto paths', () => {
     render(
       <ControlPanel
         schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
@@ -708,7 +726,7 @@ describe('<ControlPanel> auto', () => {
     expect(setConfig).toHaveBeenCalledWith('gap', 12);
   });
 
-  it("reads the resolver for an auto row's readout", () => {
+  it('reads out the bare word, resolver or not', () => {
     render(
       <ControlPanel
         schema={resolveConfigSchema(
@@ -725,19 +743,8 @@ describe('<ControlPanel> auto', () => {
         setConfig={() => {}}
       />,
     );
-    expect(screen.getByText('auto · 18')).toBeInTheDocument();
-  });
-
-  it('reads "auto" alone for a path with no resolver', () => {
-    render(
-      <ControlPanel
-        schema={resolveConfigSchema(f.schema({ cols: f.number(3).range(0, 8) }), [])}
-        config={{ cols: 3 }}
-        auto={new Set(['cols'])}
-        setConfig={() => {}}
-      />,
-    );
     expect(screen.getByText('auto')).toBeInTheDocument();
+    expect(screen.queryByText(/auto · /)).toBeNull();
   });
 
   it('writes the sentinel when the dot turns a row auto', async () => {
@@ -794,11 +801,11 @@ describe('<ControlPanel> auto', () => {
     expect(screen.queryByRole('button', { name: /Seed/ })).toBeNull();
   });
 
-  it('reports what the instrument reads when a resolver depends on another auto path', () => {
+  it('draws what the instrument reads when a resolver depends on another auto path', () => {
     // `width` is auto with no resolver, so the instrument sees `undefined` and
     // `gap` resolves from that. Re-running gap's resolver against the raw
-    // config would instead read the pinned 640 and report a number nobody got.
-    render(
+    // config would instead read the pinned 640 and draw a number nobody got.
+    const { container } = render(
       <ControlPanel
         schema={resolveConfigSchema(
           f.schema({
@@ -806,7 +813,7 @@ describe('<ControlPanel> auto', () => {
             gap: f
               .number(12)
               .range(0, 48)
-              .auto((c) => (c.width === undefined ? -1 : (c.width as number) / 64)),
+              .auto((c) => (c.width === undefined ? 5 : (c.width as number) / 64)),
           }),
           [],
         )}
@@ -815,27 +822,7 @@ describe('<ControlPanel> auto', () => {
         setConfig={() => {}}
       />,
     );
-    expect(screen.getByText('auto · -1')).toBeInTheDocument();
-    expect(screen.queryByText('auto · 10')).toBeNull();
-  });
-
-  it('does not repeat a resolved value the control itself already shows', () => {
-    render(
-      <ControlPanel
-        schema={resolveConfigSchema(
-          f.schema({ caption: f.string('typed').auto(() => 'eight across') }),
-          [],
-        )}
-        config={{ caption: 'typed' }}
-        auto={new Set(['caption'])}
-        setConfig={() => {}}
-      />,
-    );
-    // The field below the readout is already showing it, and the readout slot
-    // is one narrow column — a long string wraps it onto two lines.
-    expect(screen.getByText('auto')).toBeInTheDocument();
-    expect(screen.queryByText(/auto · /)).toBeNull();
-    expect(screen.getByDisplayValue('eight across')).toBeInTheDocument();
+    expect(container.querySelector('input[type=range]')).toHaveValue('5');
   });
 
   it('draws an auto control at the resolved value, not the value underneath it', () => {
@@ -881,7 +868,7 @@ describe('<ControlPanel> auto', () => {
   });
 
   // Every kind, because the panel wraps some rows before rendering them and a
-  // wrapper that drops the auto props leaves that kind silently unghosted.
+  // wrapper that drops the auto props leaves that kind silently pinned.
   it.each([
     ['number', f.number(3).range(0, 8)],
     ['slider', f.number(3).range(0, 8).slider()],
@@ -890,7 +877,7 @@ describe('<ControlPanel> auto', () => {
     ['radio', f.enum('a', ['a', 'b']).radio()],
     ['string', f.string('hi')],
     ['color', f.color('#3a86ff')],
-  ])('marks a %s row auto and gives it a dot and a path', (_kind, node) => {
+  ])('marks a %s row auto and gives it a label toggle', (_kind, node) => {
     const { container } = render(
       <ControlPanel
         schema={resolveConfigSchema(f.schema({ thing: node.label('Thing') }), [])}
@@ -899,76 +886,11 @@ describe('<ControlPanel> auto', () => {
         setConfig={() => {}}
       />,
     );
-    const row = container.querySelector('[data-auto-path="thing"]');
-    expect(row).not.toBeNull();
-    expect(row?.className).toMatch(/rowAuto/);
+    expect(container.querySelector('[class*=rowAuto]')).not.toBeNull();
     expect(screen.getByRole('button', { name: 'Pin Thing' })).toBeInTheDocument();
   });
 });
 
-describe('<ControlPanel> shift-click', () => {
-  const panel = (props = {}) =>
-    render(
-      <ControlPanel
-        schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
-        config={{ gap: 12 }}
-        auto={new Set()}
-        setConfig={() => {}}
-        {...props}
-      />,
-    );
-
-  it('toggles a row on shift-pointerdown and suppresses the control it landed on', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({ setConfig });
-    const track = container.querySelector('input[type=range]') as HTMLInputElement;
-    const ev = new PointerEvent('pointerdown', { bubbles: true, cancelable: true, shiftKey: true });
-    track.dispatchEvent(ev);
-
-    expect(setConfig).toHaveBeenCalledWith('gap', auto);
-    // A PROXY, not the real claim. jsdom synthesizes neither a label's click
-    // retargeting nor a range input's drag, so "the slider did not move" cannot
-    // fail here. What is assertable is that the default was suppressed; the
-    // browser half is covered by the story.
-    expect(ev.defaultPrevented).toBe(true);
-  });
-
-  it('leaves an ordinary pointerdown alone', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({ setConfig });
-    container
-      .querySelector('input[type=range]')
-      ?.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));
-    expect(setConfig).not.toHaveBeenCalled();
-  });
-
-  it('ignores shift-pointerdown on a manual row', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({
-      schema: resolveConfigSchema(f.schema({ seed: f.number(1).manual().range(0, 8) }), []),
-      config: { seed: 1 },
-      setConfig,
-    });
-    container
-      .querySelector('input')
-      ?.dispatchEvent(
-        new PointerEvent('pointerdown', { bubbles: true, cancelable: true, shiftKey: true }),
-      );
-    expect(setConfig).not.toHaveBeenCalled();
-  });
-
-  it('pins a shift-clicked auto row back at its stored value', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({ config: { gap: 24 }, auto: new Set(['gap']), setConfig });
-    container
-      .querySelector('input[type=range]')
-      ?.dispatchEvent(
-        new PointerEvent('pointerdown', { bubbles: true, cancelable: true, shiftKey: true }),
-      );
-    expect(setConfig).toHaveBeenCalledWith('gap', 24);
-  });
-});
-
 describe('<ControlPanel> pair', () => {
   const paired = () =>
     resolveConfigSchema(
@@ -986,9 +908,13 @@ describe('<ControlPanel> pair', () => {
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
     expect(within(row).getByLabelText('X')).toHaveValue(10);
     expect(within(row).getByLabelText('Y')).toHaveValue(20);
-    // The pair names the row, so neither leaf's own name is drawn beside it.
-    expect(screen.queryByText('X')).toBeNull();
-    expect(screen.queryByText('Y')).toBeNull();
+  });
+
+  it('captions each cell of a pair with its own name, so a paired switch is not left unnamed', () => {
+    render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
+    const row = screen.getByText('Offset').closest('div') as HTMLElement;
+    expect(within(row).getByText('X')).toHaveClass('lk-pair-label');
+    expect(within(row).getByText('Y')).toHaveClass('lk-pair-label');
   });
 
   it('writes each cell of a paired row to its own path', () => {
@@ -998,6 +924,23 @@ describe('<ControlPanel> pair', () => {
     expect(setConfig).toHaveBeenCalledWith('y', 30);
   });
 
+  it('keeps a segmented leaf segmented when it shares a row, and gives that row the width', () => {
+    const schema = resolveConfigSchema(
+      f.schema({
+        camera: f.enum<'2d' | '3d'>('3d', ['2d', '3d']).radio().label('').pair('Camera'),
+        hold: f.boolean(true).toggle().label('Hold front').pair('Camera'),
+      }),
+      [],
+    );
+    render(
+      <ControlPanel schema={schema} config={{ camera: '3d', hold: true }} setConfig={vi.fn()} />,
+    );
+    const row = screen.getByText('Camera').closest('div') as HTMLElement;
+    expect(within(row).getByRole('radio', { name: '2d' })).toBeInTheDocument();
+    expect(within(row).queryByRole('combobox')).toBeNull();
+    expect(row.className).toMatch(/span/);
+  });
+
   it('leaves an unpaired sibling on its own row', () => {
     render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
     const row = screen.getByText('Offset').closest('div') as HTMLElement;