@weasel-js/labkit 1.6.1 → 1.7.1

package/src/chrome/types.ts

@@ -162,8 +162,10 @@ export interface TrialChromeContext extends ToolSlotContext, SidebarSlotContext
   undo: () => void;
   redo: () => void;
 
-  /** Whether the trial's loupe is turned on. False for an instrument that
-   *  declares none, whose chrome offers no way to turn one on. */
+  /** Whether a `<TrialLoupe>` following the trial's toggle is mounted in it.
+   *  The loupe toggle is offered only while one is. */
+  hasLoupe: boolean;
+  /** Whether the trial's loupe is turned on. */
   loupeOn: boolean;
   toggleLoupe: () => void;
 

package/src/config/auto.ts

@@ -10,6 +10,7 @@ export const auto: unique symbol = Symbol('weasel.auto');
 /** The type of the `auto` sentinel, for widening a value parameter. */
 export type Auto = typeof auto;
 
+/** Whether `value` is the `auto` sentinel. */
 export function isAuto(value: unknown): value is Auto {
   return value === auto;
 }

package/src/config/builder.test.ts

@@ -1,3 +1,4 @@
+import { compact } from '@weasel-js/quantity';
 import { describe, expect, it } from 'vitest';
 import { auto } from './auto';
 import { f } from './builder';
@@ -37,7 +38,7 @@ describe('builder', () => {
   });
 
   it('annotates a number with a display format', () => {
-    expect(f.number(0).format('compact').annotations.format).toBe('compact');
+    expect(f.number(0).display(compact()).annotations.display).toEqual(compact());
   });
 
   it('keeps a custom node kind across a chain', () => {

package/src/config/builder.ts

@@ -1,4 +1,5 @@
-import type { PrefLeaf, PrefNumberFormat, PrefNumberUnit } from '@weasel-js/ui';
+import type { Display } from '@weasel-js/quantity';
+import type { PrefLeaf, PrefNumberUnit } from '@weasel-js/ui';
 import { type Auto, isAuto } from './auto';
 import type {
   Annotations,
@@ -123,6 +124,7 @@ export abstract class BaseNode<T> implements ConfigNode<T> {
   }
 }
 
+/** A numeric leaf, built by `f.number`. */
 export class NumberNode extends BaseNode<number> {
   readonly kind = 'number';
 
@@ -141,10 +143,10 @@ export class NumberNode extends BaseNode<number> {
     return this.ann({ suffix });
   }
 
-  /** Show the value in a named format — `'compact'` reads `2.00M`. Presentation
-   *  only: the stored value stays a plain number, and a typed `2.5m` reads back. */
-  format(format: PrefNumberFormat): this {
-    return this.ann({ format });
+  /** Show, speak and read the value through a display — `compact()` reads
+   *  `2.00M`. Presentation only: the stored value stays a plain number. */
+  display(display: Display): this {
+    return this.ann({ display });
   }
 
   /**
@@ -168,6 +170,7 @@ export class NumberNode extends BaseNode<number> {
   }
 }
 
+/** A true/false leaf, built by `f.boolean`; a checkbox unless `.toggle()`. */
 export class BooleanNode extends BaseNode<boolean> {
   readonly kind = 'boolean';
 
@@ -177,6 +180,7 @@ export class BooleanNode extends BaseNode<boolean> {
   }
 }
 
+/** A text leaf, built by `f.string`. */
 export class StringNode extends BaseNode<string> {
   readonly kind = 'string';
 
@@ -194,6 +198,7 @@ export class StringNode extends BaseNode<string> {
   }
 }
 
+/** A string-list leaf, built by `f.list`. */
 export class ListNode extends BaseNode<string[]> {
   readonly kind = 'list';
 
@@ -203,6 +208,7 @@ export class ListNode extends BaseNode<string[]> {
   }
 }
 
+/** A color leaf holding a hex string, built by `f.color`. */
 export class ColorNode extends BaseNode<string> {
   readonly kind = 'color';
 
@@ -213,6 +219,7 @@ export class ColorNode extends BaseNode<string> {
   }
 }
 
+/** A fixed-choice leaf, built by `f.enum`; a select unless `.radio()`. */
 export class EnumNode<T extends string> extends BaseNode<T> {
   readonly kind = 'enum';
 
@@ -286,6 +293,12 @@ export class GroupNode<S extends ConfigShape> implements ConfigBranch<S> {
   showIf(predicate: (config: Record<string, unknown>) => boolean): GroupNode<S> {
     return this.with(this.annotations, { ...this.options, showIf: predicate });
   }
+
+  /** Put a button on the group's heading that returns every value beneath it
+   *  to its default, leaving the rest of the config alone. */
+  resettable(): GroupNode<S> {
+    return this.with(this.annotations, { ...this.options, resettable: true });
+  }
 }
 
 /** Every default in a shape, nested the way the shape is. */

package/src/config/fromConfigField.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import type { ConfigField } from '../controls/types';
 import { fromConfigFields } from './fromConfigField';
+import { schemaNodeAtPath } from './path';
 import { isLeafVisible } from './visible';
 
 const leaf = (fields: ConfigField[], k: string) =>
@@ -76,6 +77,19 @@ describe('fromConfigFields', () => {
     ]);
     expect(Object.keys(r.group.children)).toEqual(['z', 'a']);
   });
+
+  it('files a dotted key at the path it names, the one config reads and writes use', () => {
+    const r = fromConfigFields([
+      { type: 'number', key: 'pose.x', label: 'X', default: 0 },
+      { type: 'number', key: 'pose.y', label: 'Y', default: 0 },
+      { type: 'checkbox', key: 'on', label: 'On', default: true },
+    ]);
+    expect(schemaNodeAtPath(r.group, 'pose.x')).toMatchObject({ kind: 'number', name: 'X' });
+    expect(schemaNodeAtPath(r.group, 'pose.y')).toMatchObject({ kind: 'number', name: 'Y' });
+    // The intermediate is headless: a flat field list never asked for a heading.
+    expect(schemaNodeAtPath(r.group, 'pose')).toMatchObject({ name: '' });
+    expect(Object.keys(r.group.children)).toEqual(['pose', 'on']);
+  });
 });
 
 describe('isLeafVisible', () => {

package/src/config/fromConfigField.ts

@@ -1,4 +1,4 @@
-import type { PrefLeaf } from '@weasel-js/ui';
+import type { PrefGroup, PrefLeaf } from '@weasel-js/ui';
 import type { ConfigField } from '../controls/types';
 import type { LeafPatch, ResolvedConfig } from './types';
 
@@ -53,9 +53,13 @@ function toLeaf(field: ConfigField): LeafPatch {
  *
  * Rules do not run here: a hand-written `ConfigField` already states its label
  * and control, which is everything the rule chain would have inferred.
+ *
+ * A dotted `key` is a config path, as it is to every read and write, so its
+ * leaf is filed under headless groups at that path rather than as one child
+ * whose name contains dots — which no path lookup would find.
  */
 export function fromConfigFields(fields: readonly ConfigField[]): ResolvedConfig {
-  const children: Record<string, PrefLeaf> = {};
+  const root: PrefGroup = { name: '', children: {} };
   for (const field of fields) {
     const patch = toLeaf(field);
     for (const key of Object.keys(patch)) {
@@ -63,10 +67,20 @@ export function fromConfigFields(fields: readonly ConfigField[]): ResolvedConfig
         delete (patch as Record<string, unknown>)[key];
       }
     }
-    children[field.key] = { ...patch, default: field.default } as PrefLeaf;
+    const segments = field.key.split('.');
+    const leafKey = segments.pop() as string;
+    let group = root;
+    for (const segment of segments) {
+      const existing = group.children[segment];
+      if (existing === undefined || !('children' in existing) || 'kind' in existing) {
+        group.children[segment] = { name: '', children: {} };
+      }
+      group = group.children[segment] as PrefGroup;
+    }
+    group.children[leafKey] = { ...patch, default: field.default } as PrefLeaf;
   }
   return {
-    group: { name: '', children },
+    group: root,
     sections: [],
     showIf: new Map(),
     renderers: {},

package/src/config/path.ts

@@ -1,3 +1,4 @@
+import { isPlainObject } from '@weasel-js/core';
 import type { PrefGroup, PrefLeaf } from '@weasel-js/ui';
 
 /**
@@ -9,11 +10,7 @@ import type { PrefGroup, PrefLeaf } from '@weasel-js/ui';
 /** A plain object a config tree can be walked into. An array, a `Date`, a
  *  `Map` or a class instance is a leaf value: a walk that descended into one
  *  would rebuild it as a bare `{}`. */
-export function isRecord(value: unknown): value is Record<string, unknown> {
-  if (typeof value !== 'object' || value === null) return false;
-  const proto = Object.getPrototypeOf(value);
-  return proto === Object.prototype || proto === null;
-}
+export const isRecord = isPlainObject;
 
 /** The value at a dotted path. `undefined` when a segment is missing or the
  *  walk hits something that is not a record. */

package/src/config/resolve.ts

@@ -27,6 +27,7 @@ interface Sink {
   showIf: Map<string, (config: Record<string, unknown>) => boolean>;
   renderers: Record<string, ControlRenderer>;
   dialogs: Record<string, DialogSpec>;
+  resettable: Set<string>;
   chain: readonly ConfigRule[];
 }
 
@@ -48,6 +49,7 @@ export function resolveConfigSchema<TC>(
     showIf: new Map(),
     renderers: {},
     dialogs: {},
+    resettable: new Set(),
     chain: [...rules, ...builtinRules],
   };
   const group = resolveShape(schema.nodes, '', '', sink);
@@ -57,6 +59,7 @@ export function resolveConfigSchema<TC>(
     showIf: sink.showIf,
     renderers: sink.renderers,
     dialogs: sink.dialogs,
+    resettable: sink.resettable,
   };
 }
 
@@ -89,6 +92,7 @@ function resolveShape(shape: ConfigShape, at: string, name: string, sink: Sink):
       if (section.pack !== undefined && spec.pack === undefined) spec.pack = section.pack;
     }
     if (predicate) sink.showIf.set(path, predicate);
+    if (isConfigBranch(entry) && entry.options.resettable) sink.resettable.add(path);
     if (!isConfigBranch(entry) && entry.options.render) sink.renderers[path] = entry.options.render;
     if (!isConfigBranch(entry) && entry.options.dialog) sink.dialogs[path] = entry.options.dialog;
   }

package/src/config/types.ts

@@ -1,10 +1,5 @@
-import type {
-  PrefGroup,
-  PrefLeaf,
-  PrefNumberFormat,
-  PrefNumberUnit,
-  PrefRenderer,
-} from '@weasel-js/ui';
+import type { Display } from '@weasel-js/quantity';
+import type { PrefGroup, PrefLeaf, PrefNumberUnit, PrefRenderer } from '@weasel-js/ui';
 import type { ReactNode } from 'react';
 
 /**
@@ -18,6 +13,10 @@ export type ControlRenderer = PrefRenderer;
 export interface ConfigOption {
   value: string;
   label: string;
+  /** A glyph in weasel-ui's icon set (`IconName`). A segmented row draws it in
+   *  place of `label`, which stays the accessible name and becomes the tooltip;
+   *  a select draws it beside `label`. */
+  icon?: string;
 }
 
 /** Everything a leaf can carry beyond its kind and default. A flat union of
@@ -32,8 +31,8 @@ export interface Annotations {
   max?: number;
   step?: number;
   suffix?: string;
-  /** How a number's value is shown. `compact` abbreviates from a thousand up. */
-  format?: PrefNumberFormat;
+  /** How a number's value shows, speaks and reads back — `compact()` reads `2.00M`. */
+  display?: Display;
   /** Display-unit conversion for a number stored in a canonical unit — the
    *  value, its bounds and its step all convert at the control's edge. */
   unit?: PrefNumberUnit;
@@ -107,6 +106,9 @@ export interface ResolvedConfig {
   renderers: Readonly<Record<string, ControlRenderer>>;
   /** Node-level `.dialog` rows, keyed by path. */
   dialogs: Readonly<Record<string, DialogSpec>>;
+  /** Paths of the groups marked `.resettable()`, whose heading carries a
+   *  button that puts every value beneath it back to its default. */
+  resettable?: ReadonlySet<string>;
 }
 
 /** Options for a row drawn as a button that opens a dialog. */
@@ -162,6 +164,9 @@ export interface BranchOptions {
   /** Show this node only while the predicate holds. On a group it hides the
    *  whole subtree; the values stay in config either way. */
   showIf?: (config: Record<string, unknown>) => boolean;
+  /** Put a button on this group's heading that returns every value beneath it
+   *  to its default. Groups only. */
+  resettable?: boolean;
 }
 
 /** A group's own annotations: what it is called and, optionally, why. */

package/src/controls/ControlPanel.less

@@ -17,7 +17,7 @@
 .lk-pair-cell {
   display: inline-flex;
   align-items: center;
-  gap: var(--wzl-space-3, 6px);
+  gap: var(--wzl-space-3);
   min-width: 0;
 }
 

package/src/controls/ControlPanel.stories.tsx

@@ -1,5 +1,6 @@
 import { ANGLE_RADIANS, prefUnit } from '@weasel-js/core';
 import type { Meta, StoryObj } from '@weasel-js/forge';
+import { compact } from '@weasel-js/quantity';
 import { type PrefNumberUnit, PropertyRow } from '@weasel-js/ui';
 import { useState } from 'react';
 import { f } from '../config/builder';
@@ -278,7 +279,7 @@ 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'),
+  glyphs: f.number(1_000_000).range(0, 2_000_000).display(compact()),
   names: f.number(60).range(0, 100),
   labels: f.number(0).range(0, 100),
   placement: f.enum('spread', ['spread', 'stack', 'ring']),
@@ -337,7 +338,7 @@ const sidebarSliders = f.schema({
   pad: f.number(0.5).range(0, 4).step(0.25).label('Window pad'),
   folderPad: f.number(1).range(0, 4).step(0.1).label('Folder pad'),
   levels: f.number(2).range(0, 6).step(1).label('Levels'),
-  glyphs: f.number(1_000_000).range(0, 2_000_000).step(2000).format('compact').label('Glyphs'),
+  glyphs: f.number(1_000_000).range(0, 2_000_000).step(2000).display(compact()).label('Glyphs'),
   names: f.number(40).range(0, 200).step(5).label('Names'),
   labels: f.number(0).range(0, 30).step(1).label('Labels'),
   text: f.number(100).range(50, 250).step(5).unit(shownIn('%')).label('Text'),

package/src/controls/ControlPanel.test.tsx

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

package/src/controls/ControlPanel.tsx

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