@weasel-js/labkit 1.4.1 → 1.4.3

package/src/config/types.ts

@@ -39,9 +39,11 @@ export type LeafPatch = Annotations & { kind?: string };
 
 /** What a rule is given for the leaf it is deciding about. */
 export interface ConfigRuleContext {
-  /** The config key this leaf writes. */
+  /** The leaf's own key — its last path segment, and what a label is titled
+   *  from. */
   key: string;
-  /** Dotted path within the schema. Equal to `key` while schemas are flat. */
+  /** Dotted path within the schema, which is the path the value is written
+   *  at. Equal to `key` for a leaf sitting at the root. */
   path: string;
   /** The leaf's default value. A rule may read it but never change it. */
   default: unknown;
@@ -57,17 +59,29 @@ export interface ConfigRuleContext {
  */
 export type ConfigRule = (ctx: ConfigRuleContext) => LeafPatch | null;
 
-/** A presentational bucket of leaves, rendered under one heading. */
+/** A presentational bucket of nodes, rendered under one heading. Buckets
+ *  siblings: a section never nests a value, which is what separates it from
+ *  `f.group`. */
 export interface SectionSpec {
+  /** Dotted path of the group whose children this buckets. `''` is the root,
+   *  which is where every section of a flat schema sits. */
+  at: string;
   label: string;
+  /** Full dotted paths, so a section under a group names its children the way
+   *  everything else does. */
   paths: readonly string[];
+  /** Whether the section opens folded. Set, the panel folds this section
+   *  whether or not it was given a panel-wide `collapse`; a fold the reader
+   *  has since toggled outranks it. */
+  collapsed?: boolean;
 }
 
 /** A schema resolved against a set of rules: the vocabulary weasel-ui renders,
  *  plus the three things labkit keeps on the side because `PrefLeaf` has no
  *  field for them. */
 export interface ResolvedConfig {
-  /** Flat: every leaf is a direct child, so a leaf's path is its config key. */
+  /** The schema as a `PrefGroup` tree: an `f.group` is a nested group, so a
+   *  leaf's dotted path within it is the path its value is written at. */
   group: PrefGroup;
   sections: readonly SectionSpec[];
   showIf: ReadonlyMap<string, (config: Record<string, unknown>) => boolean>;
@@ -75,14 +89,34 @@ export interface ResolvedConfig {
   renderers: Readonly<Record<string, ControlRenderer>>;
 }
 
+/** How a node names the section it belongs to: the heading, and how that
+ *  section opens. Every node in one section repeats the heading; only one of
+ *  them has to say `collapsed`. */
+export interface SectionOption {
+  label: string;
+  collapsed?: boolean;
+}
+
 /** Per-node extras that do not belong on a `PrefLeaf`. */
-export interface NodeOptions {
-  section?: string;
-  showIf?: (config: Record<string, unknown>) => boolean;
+export interface NodeOptions extends BranchOptions {
   render?: ControlRenderer;
   validate?: (leaf: PrefLeaf) => string[];
 }
 
+/** What a branch can say about itself, beyond its children. */
+export interface BranchOptions {
+  section?: SectionOption;
+  /** 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;
+}
+
+/** A group's own annotations: what it is called and, optionally, why. */
+export interface BranchAnnotations {
+  name?: string;
+  description?: string;
+}
+
 /** The builder's leaf: a kind (or null, to be decided by rules), a default,
  *  an annotation bag, and the extras above. */
 export interface ConfigNode<T = unknown> {
@@ -92,15 +126,71 @@ export interface ConfigNode<T = unknown> {
   readonly options: Readonly<NodeOptions>;
 }
 
+/** The builder's branch: named children, nested as deeply as the schema
+ *  wants. A branch nests the value too — `grid: f.group({ size })` puts the
+ *  value at `grid.size`, where `.section('Grid')` would have left it at
+ *  `size`. */
+export interface ConfigBranch<S extends ConfigShape = ConfigShape> {
+  readonly children: S;
+  readonly annotations: Readonly<BranchAnnotations>;
+  readonly options: Readonly<BranchOptions>;
+}
+
+/** Either half of a schema tree. */
+export type ConfigEntry = ConfigNode | ConfigBranch;
+
+/** The children of a schema or a group. */
+export type ConfigShape = { readonly [key: string]: ConfigEntry };
+
 /** The value type a node produces. */
 export type NodeValue<N> = N extends ConfigNode<infer T> ? T : never;
 
+/** The value type a schema entry produces — a leaf's own, or a branch's
+ *  nested record. */
+export type EntryValue<E> =
+  E extends ConfigBranch<infer S> ? InferConfig<S> : E extends ConfigNode<infer T> ? T : never;
+
 /** The config type a builder shape produces. */
-export type InferConfig<S> = { [K in keyof S]: NodeValue<S[K]> };
+export type InferConfig<S> = { [K in keyof S]: EntryValue<S[K]> };
+
+/** Whether a config value has children a path can descend into. Arrays and
+ *  functions are values, not branches. */
+type Branching<V> = V extends readonly unknown[]
+  ? false
+  : V extends (...args: never[]) => unknown
+    ? false
+    : V extends object
+      ? true
+      : false;
+
+/**
+ * Every dotted path a config offers, a group's own path included. A config
+ * whose shape is not known — `unknown`, or a bare record — gives `string`,
+ * which is what keeps a generic instrument writable.
+ */
+export type ConfigPath<T> = unknown extends T
+  ? string
+  : T extends object
+    ? {
+        [K in keyof T & string]: Branching<T[K]> extends true ? K | `${K}.${ConfigPath<T[K]>}` : K;
+      }[keyof T & string]
+    : never;
+
+/** The type at a dotted path, or `unknown` where the path is not one the
+ *  config's type spells out. */
+export type ValueAtPath<T, P extends string> = unknown extends T
+  ? unknown
+  : P extends `${infer Head}.${infer Rest}`
+    ? Head extends keyof T
+      ? ValueAtPath<T[Head], Rest>
+      : unknown
+    : P extends keyof T
+      ? T[P]
+      : unknown;
 
 /** An instrument's config, declared once. */
 export interface ConfigSchema<TC> {
-  readonly nodes: Readonly<Record<string, ConfigNode>>;
+  readonly nodes: ConfigShape;
   /** The starting config — what `defaultConfig()` would have returned. */
   defaults(): TC;
 }

package/src/config/visible.ts

@@ -1,9 +1,11 @@
+import { schemaNodeAtPath } from './path';
 import type { ResolvedConfig } from './types';
 
 /**
- * Whether a leaf's row should be drawn right now.
+ * Whether the row at a dotted path should be drawn right now. A group answers
+ * for its whole subtree — hiding one hides everything under it.
  *
- * `hidden` is the leaf's own static flag; `showIf` is the schema's predicate
+ * `hidden` is the node's own static flag; `showIf` is the schema's predicate
  * over the live config. Both are presentational — a hidden leaf keeps its
  * value and the instrument still reads it.
  */
@@ -13,8 +15,8 @@ export function isLeafVisible(
   config: Record<string, unknown>,
   showHidden = false,
 ): boolean {
-  const leaf = resolved.group.children[path];
-  if (leaf && 'hidden' in leaf && leaf.hidden === true && !showHidden) return false;
+  const node = schemaNodeAtPath(resolved.group, path);
+  if (node && 'hidden' in node && node.hidden === true && !showHidden) return false;
   const predicate = resolved.showIf.get(path);
   return predicate ? predicate(config) : true;
 }

package/src/controls/ControlPanel.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { PropertyRow } from '@weasel-js/ui';
 import { useState } from 'react';
 import { f } from '../config/builder';
+import { withValueAtPath } from '../config/path';
 import { resolveConfigSchema } from '../config/resolve';
 import type { ConfigRule, ControlRenderer } from '../config/types';
 import { ControlPanel } from './ControlPanel';
@@ -60,7 +61,7 @@ function Harness({ fields }: { fields: ConfigField[] }) {
     <ControlPanel
       fields={fields}
       config={config}
-      setConfig={(key, value) => setConfig((prev) => ({ ...prev, [key as string]: value }))}
+      setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
     />
   );
 }
@@ -102,7 +103,7 @@ function SchemaHarness({
     <ControlPanel
       schema={schema}
       config={config}
-      setConfig={(key, value) => setConfig((prev) => ({ ...prev, [key as string]: value }))}
+      setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
       renderers={renderers}
     />
   );
@@ -169,7 +170,7 @@ export const Described: Story = {
       <ControlPanel
         schema={schema}
         config={config}
-        setConfig={(key, value) => setConfig((prev) => ({ ...prev, [key as string]: value }))}
+        setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
       />
     );
   },
@@ -195,8 +196,41 @@ export const Conditional: Story = {
       <ControlPanel
         schema={schema}
         config={config}
-        setConfig={(key, value) => setConfig((prev) => ({ ...prev, [key as string]: value }))}
+        setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
       />
     );
   },
 };
+
+const nested = f.schema({
+  showGrid: f.boolean(true),
+  grid: f
+    .group({
+      size: f.number(20).range(5, 80).step(5).label('Cell size'),
+      color: f.color('#3a86ff'),
+    })
+    .describe('Written at config.grid.size and config.grid.color.'),
+  export: f.group({
+    format: f.enum('png', ['png', 'svg']),
+    scale: f.number(2).range(1, 4).step(1),
+  }),
+});
+
+/** `f.group` nests the value as well as the heading: these rows write to
+ *  `grid.size` and `export.scale`, not to `size` and `scale`. */
+export const Nested: Story = {
+  render: () => {
+    const schema = resolveConfigSchema(nested, []);
+    const [config, setConfig] = useState<Record<string, unknown>>(nested.defaults());
+    return (
+      <>
+        <ControlPanel
+          schema={schema}
+          config={config}
+          setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
+        />
+        <pre>{JSON.stringify(config, null, 2)}</pre>
+      </>
+    );
+  },
+};

package/src/controls/ControlPanel.test.tsx

@@ -443,3 +443,155 @@ describe('<ControlPanel> suffix', () => {
     expect(container.textContent).toContain('px');
   });
 });
+
+describe('<ControlPanel> collapsible sections', () => {
+  const schema = resolveConfigSchema(
+    f.schema({ showGrid: f.boolean(true), seed: f.number(0).section('Advanced') }),
+    [],
+  );
+  const config = { showGrid: true, seed: 0 };
+
+  it('draws no twisty by default', () => {
+    render(<ControlPanel schema={schema} config={config} setConfig={vi.fn()} />);
+    expect(screen.queryByRole('button', { name: 'Advanced' })).toBeNull();
+    expect(screen.getByLabelText('Seed')).toBeVisible();
+  });
+
+  it('folds a section away when the panel starts closed', () => {
+    render(<ControlPanel schema={schema} config={config} setConfig={vi.fn()} collapse="closed" />);
+    expect(screen.getByLabelText('Seed')).not.toBeVisible();
+    fireEvent.click(screen.getByRole('button', { name: 'Advanced' }));
+    expect(screen.getByLabelText('Seed')).toBeVisible();
+  });
+
+  it('hands a controlled panel its toggles instead of acting on them', () => {
+    const onCollapse = vi.fn();
+    render(
+      <ControlPanel
+        schema={schema}
+        config={config}
+        setConfig={vi.fn()}
+        collapsed={{ Advanced: true }}
+        onCollapse={onCollapse}
+      />,
+    );
+    expect(screen.getByLabelText('Seed')).not.toBeVisible();
+    fireEvent.click(screen.getByRole('button', { name: 'Advanced' }));
+    expect(onCollapse).toHaveBeenCalledWith('Advanced', false);
+    expect(screen.getByLabelText('Seed')).not.toBeVisible();
+  });
+
+  describe('a section the schema declares closed', () => {
+    const closedSchema = resolveConfigSchema(
+      f.schema({
+        showGrid: f.boolean(true),
+        seed: f.number(0).section('Advanced', { collapsed: true }),
+      }),
+      [],
+    );
+
+    it('opens folded, and is foldable, with no collapse props at all', () => {
+      render(<ControlPanel schema={closedSchema} config={config} setConfig={vi.fn()} />);
+      expect(screen.getByLabelText('Seed')).not.toBeVisible();
+      fireEvent.click(screen.getByRole('button', { name: 'Advanced' }));
+      expect(screen.getByLabelText('Seed')).toBeVisible();
+    });
+
+    it('yields to a remembered fold, so a toggle the reader made survives', () => {
+      render(
+        <ControlPanel
+          schema={closedSchema}
+          config={config}
+          setConfig={vi.fn()}
+          collapsed={{ Advanced: false }}
+          onCollapse={vi.fn()}
+        />,
+      );
+      expect(screen.getByLabelText('Seed')).toBeVisible();
+    });
+  });
+});
+
+describe('<ControlPanel> nested groups', () => {
+  const nested = () =>
+    resolveConfigSchema(
+      f.schema({
+        showGrid: f.boolean(true),
+        grid: f.group({ size: f.number(20).label('Cell size'), color: f.color('#ffffff') }),
+      }),
+      [],
+    );
+
+  it('renders a nested group under its own heading', () => {
+    render(
+      <ControlPanel
+        schema={nested()}
+        config={{ showGrid: true, grid: { size: 20, color: '#ffffff' } }}
+        setConfig={vi.fn()}
+      />,
+    );
+    const group = screen.getByRole('heading', { name: 'Grid' }).parentElement;
+    expect(group?.textContent).toContain('Cell size');
+  });
+
+  it('reads a nested leaf value out of the config tree', () => {
+    render(
+      <ControlPanel
+        schema={nested()}
+        config={{ showGrid: true, grid: { size: 44, color: '#ffffff' } }}
+        setConfig={vi.fn()}
+      />,
+    );
+    expect((screen.getByLabelText('Cell size') as HTMLInputElement).value).toBe('44');
+  });
+
+  it('falls back to the leaf default when the branch is missing', () => {
+    render(<ControlPanel schema={nested()} config={{ showGrid: true }} setConfig={vi.fn()} />);
+    expect((screen.getByLabelText('Cell size') as HTMLInputElement).value).toBe('20');
+  });
+
+  it('writes back with the full dotted path', () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel
+        schema={nested()}
+        config={{ showGrid: true, grid: { size: 20, color: '#ffffff' } }}
+        setConfig={setConfig}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('Cell size'), { target: { value: '40' } });
+    expect(setConfig).toHaveBeenCalledWith('grid.size', 40);
+  });
+
+  it('hides a whole group whose showIf is false', () => {
+    const schema = resolveConfigSchema(
+      f.schema({
+        showGrid: f.boolean(true),
+        grid: f.group({ size: f.number(20).label('Cell size') }).showIf((c) => c.showGrid === true),
+      }),
+      [],
+    );
+    render(
+      <ControlPanel
+        schema={schema}
+        config={{ showGrid: false, grid: { size: 20 } }}
+        setConfig={vi.fn()}
+      />,
+    );
+    expect(screen.queryByLabelText('Cell size')).not.toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Grid' })).not.toBeInTheDocument();
+  });
+
+  it('takes a renderer keyed by the nested path', () => {
+    const schema = nested();
+    render(
+      <ControlPanel
+        schema={schema}
+        config={{ showGrid: true, grid: { size: 44, color: '#ffffff' } }}
+        setConfig={vi.fn()}
+        renderers={{ 'grid.size': (ctx) => <span>size:{String(ctx.value)}</span> }}
+      />,
+    );
+    expect(screen.getByText('size:44')).toBeInTheDocument();
+  });
+});

package/src/controls/ControlPanel.tsx

@@ -2,10 +2,15 @@ import { isBuiltinToolPref } from '@weasel-js/core';
 import {
   CheckboxRow,
   ColorRow,
+  isPrefLeaf,
   NumberRow,
+  type PrefGroup,
   type PrefLeaf,
+  type PropertyAlign,
+  type PropertyDensity,
   PropertyGroup,
   PropertyList,
+  type PropertyListPack,
   PropertyRow,
   type PropertyRowLayout,
   SelectRow,
@@ -13,9 +18,10 @@ import {
   TextRow,
   ToggleRow,
 } from '@weasel-js/ui';
-import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { fromConfigFields } from '../config/fromConfigField';
-import type { ControlRenderer, ResolvedConfig } from '../config/types';
+import { schemaNodeAtPath, valueAtPath } from '../config/path';
+import type { ControlRenderer, ResolvedConfig, SectionSpec } from '../config/types';
 import { isLeafVisible } from '../config/visible';
 import type { ConfigField } from './types';
 
@@ -35,7 +41,9 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> {
   /** @deprecated Pass `schema`. A field list is adapted into one internally. */
   fields?: ConfigField[];
   config: TC;
-  setConfig: (key: keyof TC, value: unknown) => void;
+  /** Writes one value. The path is dotted for a leaf inside an `f.group`, and
+   *  the bare key for one at the root. */
+  setConfig: (path: string, value: unknown) => void;
   /**
    * Control overrides and app-defined kinds, PrefsForm-style. Keys are config
    * paths (checked first) or leaf kinds. A renderer returning `null` collapses
@@ -44,9 +52,33 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> {
   renderers?: Record<string, ControlRenderer>;
   /** How rows pack into the two-column grid. Defaults to `'pairs'`. */
   pack?: ControlPack;
-  /** Where a row's label sits relative to its control. Defaults to `'block'`
-   *  — above it, which is what leaves a paired row room for its value. */
+  /**
+   * Where a row's label sits relative to its control. Unset takes each row's
+   * own orientation — `block` (label above, which is what leaves a paired row
+   * room for its value) for most, `inline` for colors and checkboxes.
+   */
   layout?: PropertyRowLayout;
+  /** Room the rows get. Passed straight to the property list. */
+  density?: PropertyDensity;
+  /** Cross-axis alignment of an inline row's label and control. */
+  align?: PropertyAlign;
+  /**
+   * Fold each section away behind a twisty, starting `'open'` or `'closed'`.
+   * Unset draws the heading alone, as the panel always has — unless a section
+   * in the schema declares how it opens, which makes that section foldable on
+   * its own and outranks this for that one section.
+   */
+  collapse?: 'open' | 'closed';
+  /**
+   * Which sections are folded, keyed as `onCollapse` reports them. Given, the
+   * panel keeps no state of its own: every toggle arrives at `onCollapse`
+   * instead, which is where a lab that remembers a trial's sections writes
+   * them.
+   */
+  collapsed?: Readonly<Record<string, boolean>>;
+  /** A fold moved. The key is a section's label — prefixed by its group's
+   *  dotted path when the section sits inside one — or a group's own path. */
+  onCollapse?: (key: string, collapsed: boolean) => void;
   /** Draw leaves marked `hidden`. */
   showHidden?: boolean;
   className?: string;
@@ -62,55 +94,114 @@ export function ControlPanel<TC extends Record<string, unknown>>({
   setConfig,
   renderers,
   pack = 'pairs',
-  layout = 'block',
+  layout,
+  density,
+  align,
+  collapse,
+  collapsed,
+  onCollapse,
   showHidden = false,
   className,
 }: ControlPanelProps<TC>) {
   const resolved = useMemo(() => schema ?? fromConfigFields(fields ?? []), [schema, fields]);
 
-  const paths = Object.keys(resolved.group.children);
-  const sectioned = new Set(resolved.sections.flatMap((s) => s.paths));
-  const loose = paths.filter((p) => !sectioned.has(p));
+  const gridPack: PropertyListPack = pack === 'one-up' ? 'auto-color' : 'pairs';
+  // A section that declares how it opens is foldable whether or not the lab
+  // asked for folds — there is nothing else for the declaration to mean.
+  const folds =
+    collapse !== undefined ||
+    collapsed !== undefined ||
+    onCollapse !== undefined ||
+    resolved.sections.some((s) => s.collapsed !== undefined);
+  const startsFolded = collapse === 'closed';
 
-  const row = (path: string): ReactNode => (
-    <ControlRow
-      key={path}
-      path={path}
-      resolved={resolved}
-      config={config}
-      setConfig={setConfig}
-      renderers={renderers}
-      pack={pack}
-      layout={layout}
-      showHidden={showHidden}
-    />
-  );
+  const fold = (key: string, declared?: boolean) => ({
+    pack: gridPack,
+    collapsible: folds,
+    defaultCollapsed: declared ?? startsFolded,
+    collapsed: collapsed ? (collapsed[key] ?? declared ?? startsFolded) : undefined,
+    onCollapsedChange: onCollapse ? (next: boolean) => onCollapse(key, next) : undefined,
+  });
+
+  /** One node, which is either a group to recurse into or a row to draw. */
+  const node = (path: string): ReactNode => {
+    const found = schemaNodeAtPath(resolved.group, path);
+    if (!found) return null;
+    if (!isLeafVisible(resolved, path, config as Record<string, unknown>, showHidden)) return null;
+    if (isPrefLeaf(found)) {
+      return (
+        <ControlRow
+          key={path}
+          path={path}
+          leaf={found}
+          resolved={resolved}
+          config={config}
+          setConfig={setConfig}
+          renderers={renderers}
+          pack={pack}
+          layout={layout}
+        />
+      );
+    }
+    // A group with no name organizes without heading it — core's rule for an
+    // empty `PrefGroup.name` — so it contributes its rows and no chrome.
+    if (found.name === '') return <Fragment key={path}>{body(found, path)}</Fragment>;
+    return (
+      <PropertyGroup key={path} title={found.name} {...fold(path)}>
+        {body(found, path)}
+      </PropertyGroup>
+    );
+  };
+
+  /** One group's children: its loose nodes, then its sections. */
+  const body = (group: PrefGroup, at: string): ReactNode => {
+    const sections = resolved.sections.filter((s) => s.at === at);
+    const sectioned = new Set(sections.flatMap((s) => s.paths));
+    const paths = Object.keys(group.children).map((key) => (at === '' ? key : `${at}.${key}`));
+    return (
+      <>
+        {paths.filter((p) => !sectioned.has(p)).map(node)}
+        {sections.map((section) => (
+          <PropertyGroup
+            key={sectionKey(section)}
+            title={section.label}
+            {...fold(sectionKey(section), section.collapsed)}
+          >
+            {section.paths.map(node)}
+          </PropertyGroup>
+        ))}
+      </>
+    );
+  };
 
-  const gridPack = pack === 'one-up' ? 'auto-color' : 'pairs';
   return (
     <PropertyList
       pack={gridPack}
+      density={density}
+      align={align}
       className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}
     >
-      {loose.map(row)}
-      {resolved.sections.map((section) => (
-        <PropertyGroup key={section.label} title={section.label} pack={gridPack}>
-          {section.paths.map(row)}
-        </PropertyGroup>
-      ))}
+      {body(resolved.group, '')}
     </PropertyList>
   );
 }
 
+/** How a section is keyed for folding: its label at the root, and its group's
+ *  path in front of it anywhere else, so two groups may both have an
+ *  `Advanced`. */
+function sectionKey(section: SectionSpec): string {
+  return section.at === '' ? section.label : `${section.at}.${section.label}`;
+}
+
 interface ControlRowProps<TC extends Record<string, unknown>> {
   path: string;
+  leaf: PrefLeaf;
   resolved: ResolvedConfig;
   config: TC;
-  setConfig: (key: keyof TC, value: unknown) => void;
+  setConfig: (path: string, value: unknown) => void;
   renderers?: Record<string, ControlRenderer>;
   pack: ControlPack;
-  layout: PropertyRowLayout;
-  showHidden: boolean;
+  layout?: PropertyRowLayout;
 }
 
 /** Reads a labkit-only extra off a leaf. `PrefLeaf` has no field for these,
@@ -121,21 +212,17 @@ function extra<T>(leaf: PrefLeaf, key: string): T | undefined {
 
 function ControlRow<TC extends Record<string, unknown>>({
   path,
+  leaf,
   resolved,
   config,
   setConfig,
   renderers,
   pack,
   layout,
-  showHidden,
 }: ControlRowProps<TC>) {
-  const leaf = resolved.group.children[path] as PrefLeaf | undefined;
-  if (!leaf || !('kind' in leaf)) return null;
-  if (!isLeafVisible(resolved, path, config as Record<string, unknown>, showHidden)) return null;
-
-  const write = (value: unknown): void => setConfig(path as keyof TC, value);
+  const write = (value: unknown): void => setConfig(path, value);
   const fallback = extra<unknown>(leaf, 'default');
-  const value = config[path] ?? fallback;
+  const value = valueAtPath(config, path) ?? fallback;
 
   // Most specific wins, and within a tier the lab's entry beats the
   // instrument's: controls[path] -> node .render -> controls[kind] -> built-in.
@@ -201,6 +288,7 @@ function ControlRow<TC extends Record<string, unknown>>({
           label={label}
           value={read<boolean>()}
           onChange={write}
+          layout={layout}
           description={description}
         />
       );
@@ -234,7 +322,13 @@ function ControlRow<TC extends Record<string, unknown>>({
       );
     case 'color':
       return (
-        <ColorRow label={label} value={read<string>()} onChange={write} description={description} />
+        <ColorRow
+          label={label}
+          value={read<string>()}
+          onChange={write}
+          layout={layout}
+          description={description}
+        />
       );
     case 'paint':
     case 'object':