@weasel-js/labkit 1.6.0 → 1.7.0

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/SidebarRegion.test.tsx

@@ -3,13 +3,20 @@ import { describe, expect, it } from 'vitest';
 import type { RegionContribution, TrialChromeContext } from '../types';
 import { SidebarRegion } from './SidebarRegion';
 
-const ctx = { collapsedSections: {}, setSectionCollapsed: () => {} } as unknown as TrialChromeContext;
+const ctx = {
+  collapsedSections: {},
+  setSectionCollapsed: () => {},
+} as unknown as TrialChromeContext;
 
 describe('<SidebarRegion> stance and tone', () => {
   it('puts a section’s stance and tone on the section', () => {
     const contributions: RegionContribution<TrialChromeContext>[] = [
       { id: 'a', region: 'sidebar', item: { title: 'Plain', body: 'x' } },
-      { id: 'b', region: 'sidebar', item: { title: 'Debug', body: 'y', stance: 'debug', tone: '#224a63' } },
+      {
+        id: 'b',
+        region: 'sidebar',
+        item: { title: 'Debug', body: 'y', stance: 'debug', tone: '#224a63' },
+      },
     ];
     const { container } = render(<SidebarRegion contributions={contributions} ctx={ctx} />);
     const [plain, debug] = [...container.querySelectorAll<HTMLElement>('.lk-sidebar-section')];

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,5 +1,5 @@
-import type { PrefLeaf, PrefNumberFormat, PrefNumberUnit } from '@weasel-js/ui';
-import { type InDialogOptions, inDialog } from '../controls/inDialog';
+import type { Display } from '@weasel-js/quantity';
+import type { PrefLeaf, PrefNumberUnit } from '@weasel-js/ui';
 import { type Auto, isAuto } from './auto';
 import type {
   Annotations,
@@ -12,6 +12,7 @@ import type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  InDialogOptions,
   InferConfig,
   NodeOptions,
   SectionOption,
@@ -89,13 +90,13 @@ export abstract class BaseNode<T> implements ConfigNode<T> {
 
   /** Draw this one row yourself, keeping the kind, default and validation. */
   render(renderer: ControlRenderer): this {
-    return this.opt({ render: renderer });
+    return this.opt({ render: renderer, dialog: undefined });
   }
 
   /** Draw this row as a button that opens a dialog, with `body` as the
    *  dialog's content — for an editor too big for the row. */
   dialog(body: ControlRenderer, opts?: InDialogOptions): this {
-    return this.render(inDialog(body, opts));
+    return this.opt({ dialog: { ...opts, body }, render: undefined });
   }
 
   /**
@@ -141,10 +142,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 });
   }
 
   /**
@@ -286,6 +287,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/entry.test.ts

@@ -39,7 +39,9 @@ describe('@weasel-js/labkit/config', () => {
   // A forge frame loads this entry for every story, and ui's barrel is 167 modules on the dev server.
   it('loads nothing from @weasel-js/ui at runtime', () => {
     const importers = [...walk(resolve(__dirname, 'index.ts'))].filter((file) =>
-      [...readFileSync(file, 'utf8').matchAll(IMPORT)].some((m) => (m[1] ?? m[2] ?? m[3])?.startsWith('@weasel-js/ui')),
+      [...readFileSync(file, 'utf8').matchAll(IMPORT)].some((m) =>
+        (m[1] ?? m[2] ?? m[3])?.startsWith('@weasel-js/ui'),
+      ),
     );
     expect(importers).toEqual([]);
   });

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,12 +67,23 @@ 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: {},
+    dialogs: {},
   };
 }

package/src/config/index.ts

@@ -23,8 +23,8 @@ export {
   withValueAtPath,
 } from './path';
 export { resolveConfigSchema } from './resolve';
-export { type SectionTree, sectionTree } from './sectionTree';
 export { applyRules, builtinRules, titleCase } from './rules';
+export { type SectionTree, sectionTree } from './sectionTree';
 export type {
   Annotations,
   BranchAnnotations,
@@ -40,12 +40,15 @@ export type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  DialogSpec,
   EntryValue,
+  InDialogOptions,
   InferConfig,
   LeafPatch,
   NodeOptions,
   NodeValue,
   ResolvedConfig,
+  SectionOption,
   SectionSpec,
   ValueAtPath,
 } from './types';

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

@@ -7,6 +7,7 @@ import type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  DialogSpec,
   LeafPatch,
   ResolvedConfig,
   SectionSpec,
@@ -25,6 +26,8 @@ interface Sink {
   sections: SectionSpec[];
   showIf: Map<string, (config: Record<string, unknown>) => boolean>;
   renderers: Record<string, ControlRenderer>;
+  dialogs: Record<string, DialogSpec>;
+  resettable: Set<string>;
   chain: readonly ConfigRule[];
 }
 
@@ -45,10 +48,19 @@ export function resolveConfigSchema<TC>(
     sections: [],
     showIf: new Map(),
     renderers: {},
+    dialogs: {},
+    resettable: new Set(),
     chain: [...rules, ...builtinRules],
   };
   const group = resolveShape(schema.nodes, '', '', sink);
-  return { group, sections: sink.sections, showIf: sink.showIf, renderers: sink.renderers };
+  return {
+    group,
+    sections: sink.sections,
+    showIf: sink.showIf,
+    renderers: sink.renderers,
+    dialogs: sink.dialogs,
+    resettable: sink.resettable,
+  };
 }
 
 /** A section while it is still being filled. */
@@ -80,7 +92,9 @@ 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;
   }
 
   return { name, children };

package/src/config/sectionTree.test.ts

@@ -70,14 +70,19 @@ describe('sectionTree', () => {
       'weight',
     ]);
     const off = sectionTree(resolved, { lineNumbers: false, listing: { dim: 1, weight: 0 } });
-    expect(Object.keys(groupAt(groupAt(off.group, 'view'), 'listing').children)).toEqual(['weight']);
+    expect(Object.keys(groupAt(groupAt(off.group, 'view'), 'listing').children)).toEqual([
+      'weight',
+    ]);
   });
 
   it('drops a section nothing in it is showing, rather than opening it onto nothing', () => {
     const resolved = resolveConfigSchema(
       f.schema({
         mode: f.enum<string>('a', ['a', 'b']).section('View'),
-        glow: f.number(1).section('Diff').showIf((c) => c.mode === 'b'),
+        glow: f
+          .number(1)
+          .section('Diff')
+          .showIf((c) => c.mode === 'b'),
       }),
     );
     expect(Object.keys(sectionTree(resolved, { mode: 'b', glow: 1 }).group.children)).toEqual([
@@ -91,7 +96,10 @@ describe('sectionTree', () => {
 
   it('keeps a hidden leaf out unless asked for it', () => {
     const resolved = resolveConfigSchema(
-      f.schema({ seed: f.number(1).hidden().section('Debug'), route: f.boolean(true).section('Debug') }),
+      f.schema({
+        seed: f.number(1).hidden().section('Debug'),
+        route: f.boolean(true).section('Debug'),
+      }),
     );
     expect(Object.keys(groupAt(sectionTree(resolved, {}).group, 'debug').children)).toEqual([
       'route',
@@ -134,9 +142,7 @@ describe('sectionTree', () => {
   it('ignores a section nested under a group, which buckets rows in a pane', () => {
     const resolved = resolveConfigSchema(
       f.schema({
-        cards: f
-          .group({ floor: f.number(1).section('Size') })
-          .section('View'),
+        cards: f.group({ floor: f.number(1).section('Size') }).section('View'),
       }),
     );
     const { group } = sectionTree(resolved, { cards: { floor: 1 } });

package/src/config/sectionTree.ts

@@ -1,4 +1,4 @@
-import { isPrefLeaf, type PrefGroup } from '@weasel-js/ui';
+import type { PrefGroup, PrefLeaf } from '@weasel-js/ui';
 import { valueAtPath } from './path';
 import type { ResolvedConfig } from './types';
 import { isLeafVisible } from './visible';
@@ -22,10 +22,20 @@ export interface SectionTree {
   pathAt: (railPath: string) => string;
 }
 
+/** Structural rather than `isPrefLeaf`, so the config entry stays free of a
+ *  runtime import from ui. */
+function isLeaf(node: PrefLeaf | PrefGroup): node is PrefLeaf {
+  return 'kind' in node;
+}
+
 /** A section label as an object key: no dots, since a dotted path is how every
  *  caller addresses a node, and a label is free to hold one. */
 function slugOf(label: string, taken: ReadonlySet<string>): string {
-  const base = label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'section';
+  const base =
+    label
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '') || 'section';
   if (!taken.has(base)) return base;
   for (let n = 2; ; n += 1) if (!taken.has(`${base}-${n}`)) return `${base}-${n}`;
 }
@@ -44,7 +54,7 @@ function prune(
   for (const [key, child] of Object.entries(group.children)) {
     const path = at === '' ? key : `${at}.${key}`;
     if (!isLeafVisible(resolved, path, config, showHidden)) continue;
-    if (isPrefLeaf(child)) {
+    if (isLeaf(child)) {
       children[key] = child;
       continue;
     }
@@ -81,7 +91,7 @@ export function sectionTree(
       claimed.add(path);
       const child = resolved.group.children[path];
       if (!child || !isLeafVisible(resolved, path, config, showHidden)) continue;
-      if (isPrefLeaf(child)) {
+      if (isLeaf(child)) {
         kept[path] = child;
       } else {
         const subtree = prune(resolved, child, path, config, showHidden);
@@ -101,7 +111,7 @@ export function sectionTree(
   // gathers loose leaves into one item named for the root.
   for (const [key, child] of Object.entries(resolved.group.children)) {
     if (claimed.has(key) || !isLeafVisible(resolved, key, config, showHidden)) continue;
-    if (isPrefLeaf(child)) {
+    if (isLeaf(child)) {
       children[key] = child;
     } else {
       const subtree = prune(resolved, child, key, config, showHidden);

package/src/config/types.ts

@@ -1,10 +1,6 @@
-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';
 
 /**
  * Renders the control cell for one config leaf. Identical to weasel-ui's
@@ -17,6 +13,9 @@ 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. */
+  icon?: string;
 }
 
 /** Everything a leaf can carry beyond its kind and default. A flat union of
@@ -31,8 +30,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;
@@ -104,6 +103,26 @@ export interface ResolvedConfig {
   showIf: ReadonlyMap<string, (config: Record<string, unknown>) => boolean>;
   /** Node-level `.render` overrides, keyed by path. */
   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. */
+export interface InDialogOptions {
+  /** What the row's button shows of the value. Defaults to a list joined with
+   *  commas, or the value itself. */
+  summary?: (value: unknown) => ReactNode;
+  /** The dialog's heading. Defaults to the row's label. */
+  title?: ReactNode;
+}
+
+/** A `.dialog` row: `body` is the dialog's content, handed the context a row
+ *  renderer gets. */
+export interface DialogSpec extends InDialogOptions {
+  body: ControlRenderer;
 }
 
 /** How a node names the section it belongs to: the heading, and how that
@@ -121,6 +140,9 @@ export interface SectionOption {
 /** Per-node extras that do not belong on a `PrefLeaf`. */
 export interface NodeOptions extends BranchOptions {
   render?: ControlRenderer;
+  /** Draw the row as a button that opens a dialog. Set by `.dialog`; the
+   *  config entry records it, and `ControlPanel` draws it. */
+  dialog?: DialogSpec;
   /** 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 gives
@@ -141,6 +163,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'),