@weasel-js/labkit 1.4.0 → 1.4.2

package/src/chrome/ChromeRegions.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { CrosshairIcon, HandIcon, PencilIcon } from '@weasel-js/ui';
+import { CrosshairIcon, HandIcon, PencilIcon, SnapshotIcon } from '@weasel-js/ui';
 import type { ConfigField } from '../controls/types';
 import type { Instrument } from '../instrument/types';
 import { Lab } from '../lab/Lab';
@@ -104,3 +104,44 @@ export const SuppressedAndReplaced: Story = {
     ],
   },
 };
+
+const SUBJECTS = ['Ash', 'Birch', 'Cedar'];
+
+/** A trial titled by its subject rather than its instrument, with the leading
+ *  end of the title bar carrying the control that renames it — and the
+ *  snapshot built-in re-declared into the toolbar, which needs the context
+ *  `onActivate` is handed. */
+export const SubjectTitleAndLead: Story = {
+  args: {
+    instruments: [FullInstrument],
+    defaultInstrument: 'Every Region',
+    title: 'Title Bar Lead',
+    storage: null,
+    suppress: ['snapshot'],
+    chrome: [
+      {
+        id: 'subject',
+        region: 'titlebar',
+        item: {
+          icon: PencilIcon,
+          label: 'Next subject',
+          onActivate: (ctx) => {
+            const i = SUBJECTS.indexOf(ctx.title);
+            ctx.setTitle(SUBJECTS[(i + 1) % SUBJECTS.length]);
+          },
+        },
+      },
+      {
+        id: 'snapshot-in-toolbar',
+        region: 'toolbar',
+        group: 'trial',
+        item: {
+          icon: SnapshotIcon,
+          label: 'Snapshot',
+          showLabel: true,
+          onActivate: (ctx) => ctx.saveSnapshot(),
+        },
+      },
+    ],
+  },
+};

package/src/chrome/builtins.test.ts

@@ -9,9 +9,13 @@ import type { TrialChromeContext } from './types';
 const ctx: TrialChromeContext = {
   trialId: 't1',
   undockedPanels: [],
+  collapsedSections: {},
+  setSectionCollapsed: () => {},
   undockPanel: () => {},
   dockPanel: () => {},
   instrumentName: 'Stub',
+  title: 'Stub',
+  setTitle: () => {},
   isLastTrial: false,
   zoom: 1,
   setZoom: () => {},

package/src/chrome/builtins.tsx

@@ -24,6 +24,22 @@ import type { TrialChromeContext, TrialContribution } from './types';
 
 const ZOOM_STEP = 1.25;
 
+/** The property groups inside a contribution are folded under keys prefixed
+ *  with that contribution's id, so a group called `marks` cannot fold the
+ *  sidebar section of the same name. `ControlPanel` keys by bare label, so the
+ *  prefix goes on here and comes off again. */
+function groupFolds(
+  collapsedSections: Readonly<Record<string, boolean>>,
+  id: string,
+): Record<string, boolean> {
+  const prefix = `${id}/`;
+  const out: Record<string, boolean> = {};
+  for (const [key, value] of Object.entries(collapsedSections)) {
+    if (key.startsWith(prefix)) out[key.slice(prefix.length)] = value;
+  }
+  return out;
+}
+
 /**
  * The contributions a trial gets from what its instrument declared. This is
  * the whole "declaring a capability provides the chrome" rule — it replaces
@@ -180,6 +196,8 @@ export function builtinContributions(
             config={ctx.config as Record<string, unknown>}
             setConfig={(key, value) => ctx.setConfig(String(key), value)}
             renderers={controls}
+            collapsed={groupFolds(ctx.collapsedSections, 'settings')}
+            onCollapse={(label, next) => ctx.setSectionCollapsed(`settings/${label}`, next)}
           />
         ),
       },

package/src/chrome/index.ts

@@ -6,7 +6,7 @@ export type { SidebarRegionProps } from './regions/SidebarRegion';
 export { SidebarRegion } from './regions/SidebarRegion';
 export type { StatusRegionProps } from './regions/StatusRegion';
 export { StatusRegion } from './regions/StatusRegion';
-export type { TitleBarRegionProps } from './regions/TitleBarRegion';
+export type { TitleBarPlacement, TitleBarRegionProps } from './regions/TitleBarRegion';
 export { TitleBarRegion } from './regions/TitleBarRegion';
 export type { ToolbarRegionProps } from './regions/ToolbarRegion';
 export { ToolbarRegion } from './regions/ToolbarRegion';

package/src/chrome/regions/SidebarRegion.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import { useState } from 'react';
 import type { SidebarSection, TrialChromeContext, TrialContribution } from '../types';
 
 /** Props for `<SidebarRegion>`. */
@@ -10,16 +9,17 @@ export interface SidebarRegionProps {
 
 function Section({
   title,
-  defaultCollapsed,
+  collapsed,
+  onCollapsedChange,
   onUndock,
   children,
 }: {
   title: string;
-  defaultCollapsed: boolean;
+  collapsed: boolean;
+  onCollapsedChange: (collapsed: boolean) => void;
   onUndock?: () => void;
   children: ReactNode;
 }) {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   return (
     <section className="lk-sidebar-section">
       <div className="lk-sidebar-section__bar">
@@ -27,7 +27,7 @@ function Section({
           type="button"
           className="lk-sidebar-section__head"
           aria-expanded={!collapsed}
-          onClick={() => setCollapsed((c) => !c)}
+          onClick={() => onCollapsedChange(!collapsed)}
         >
           {title}
         </button>
@@ -64,7 +64,8 @@ export function SidebarRegion({ contributions, ctx }: SidebarRegionProps) {
           <Section
             key={c.id}
             title={item.title}
-            defaultCollapsed={item.defaultCollapsed ?? false}
+            collapsed={ctx.collapsedSections[c.id] ?? item.defaultCollapsed ?? false}
+            onCollapsedChange={(next) => ctx.setSectionCollapsed(c.id, next)}
             onUndock={
               item.undockable === false
                 ? undefined

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

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { TrialChromeContext, TrialContribution } from '../types';
+import { TitleBarRegion } from './TitleBarRegion';
+
+const Glyph = () => <svg />;
+const ctx = { trialId: 't1', saveSnapshot: vi.fn() } as unknown as TrialChromeContext;
+
+function item(id: string, over: Partial<TrialContribution> = {}): TrialContribution {
+  return {
+    id,
+    region: 'titlebar',
+    item: { icon: Glyph, label: id, onActivate: () => {} },
+    ...over,
+  } as TrialContribution;
+}
+
+describe('TitleBarRegion', () => {
+  it('renders nothing when it has nothing for its placement', () => {
+    const { container } = render(<TitleBarRegion contributions={[item('lead')]} ctx={ctx} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('takes the contributions that set `end` into the actions span', () => {
+    const { container } = render(
+      <TitleBarRegion contributions={[item('lead'), item('close', { end: true })]} ctx={ctx} />,
+    );
+    expect(container.querySelector('.lk-trial__titlebar-actions')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'close' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'lead' })).toBeNull();
+  });
+
+  it('takes the rest into the lead span', () => {
+    const { container } = render(
+      <TitleBarRegion
+        placement="lead"
+        contributions={[item('lead'), item('close', { end: true })]}
+        ctx={ctx}
+      />,
+    );
+    expect(container.querySelector('.lk-trial__titlebar-lead')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'lead' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'close' })).toBeNull();
+  });
+
+  it('hands onActivate the chrome context', () => {
+    const onActivate = vi.fn();
+    render(
+      <TitleBarRegion
+        contributions={[
+          {
+            id: 'go',
+            region: 'titlebar',
+            end: true,
+            item: { icon: Glyph, label: 'Go', onActivate },
+          },
+        ]}
+        ctx={ctx}
+      />,
+    );
+    screen.getByRole('button', { name: 'Go' }).click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+  });
+});

package/src/chrome/regions/TitleBarRegion.tsx

@@ -1,16 +1,23 @@
 import type { ReactNode } from 'react';
 import type { TrialChromeContext, TrialContribution } from '../types';
 
+/** Which end of the title bar a `<TitleBarRegion>` lays out: `'lead'` renders
+ *  the contributions that leave `end` unset, before the title; `'actions'`
+ *  renders the ones that set it, after everything else. */
+export type TitleBarPlacement = 'lead' | 'actions';
+
 /** Props for `<TitleBarRegion>`. */
 export interface TitleBarRegionProps {
   contributions: readonly TrialContribution[];
   ctx: TrialChromeContext;
+  /** Defaults to `'actions'`, where the built-ins live. */
+  placement?: TitleBarPlacement;
 }
 
 function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
   if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
   if (c.region !== 'titlebar' || !c.item) return null;
-  const { icon: Icon, label, shortcut, disabled, danger } = c.item;
+  const { icon: Icon, label, shortcut, disabled, danger, onActivate } = c.item;
   return (
     <button
       key={c.id}
@@ -19,7 +26,7 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
       disabled={disabled}
       aria-label={label}
       title={shortcut ? `${label} (${shortcut})` : label}
-      onClick={c.item.onActivate}
+      onClick={() => onActivate(ctx)}
       // The bar behind these buttons is the window drag surface, so a press
       // that lands here must not also start a drag.
       onPointerDown={(e) => e.stopPropagation()}
@@ -30,12 +37,14 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
   );
 }
 
-/** Lays a trial's `titlebar` contributions out, at the far end of the bar. */
-export function TitleBarRegion({ contributions, ctx }: TitleBarRegionProps) {
-  if (contributions.length === 0) return null;
+/** Lays a trial's `titlebar` contributions out at one end of the bar. */
+export function TitleBarRegion({ contributions, ctx, placement = 'actions' }: TitleBarRegionProps) {
+  const wanted = placement === 'actions';
+  const mine = contributions.filter((c) => (c.end ?? false) === wanted);
+  if (mine.length === 0) return null;
   return (
-    <span className="lk-trial__titlebar-actions">
-      {contributions.map((c) => renderEntry(c, ctx))}
+    <span className={wanted ? 'lk-trial__titlebar-actions' : 'lk-trial__titlebar-lead'}>
+      {mine.map((c) => renderEntry(c, ctx))}
     </span>
   );
 }

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

@@ -42,6 +42,20 @@ describe('ToolbarRegion', () => {
     expect(onActivate).toHaveBeenCalledOnce();
   });
 
+  it('hands onActivate the chrome context', () => {
+    const onActivate = vi.fn();
+    render(
+      <ToolbarRegion
+        contributions={[
+          { id: 'snap', region: 'toolbar', item: { icon: Glyph, label: 'Snap', onActivate } },
+        ]}
+        ctx={ctx}
+      />,
+    );
+    screen.getByRole('button', { name: 'Snap' }).click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+  });
+
   it('groups contributions sharing a group into one group element', () => {
     render(
       <ToolbarRegion

package/src/chrome/regions/ToolbarRegion.tsx

@@ -38,7 +38,7 @@ function groupsOf(contributions: readonly TrialContribution[]): Group[] {
 function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
   if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
   if (c.region !== 'toolbar' || !c.item) return null;
-  const { icon: Icon, label, shortcut, disabled, danger, showLabel, pressed } = c.item;
+  const { icon: Icon, label, shortcut, disabled, danger, showLabel, pressed, onActivate } = c.item;
   return (
     <Toolbar.Button
       key={c.id}
@@ -48,7 +48,7 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
       pressed={pressed}
       aria-label={label}
       title={shortcut ? `${label} (${shortcut})` : label}
-      onClick={c.item.onActivate}
+      onClick={() => onActivate(ctx)}
     >
       <Icon size={16} />
       {showLabel ? <span>{label}</span> : null}

package/src/chrome/regions/ViewportRegion.tsx

@@ -25,7 +25,7 @@ export function ViewportRegion({ contributions, ctx }: ViewportRegionProps) {
       {contributions.map((c) => {
         if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
         if (c.region !== 'viewport' || !c.item) return null;
-        const { icon: Icon, label, disabled } = c.item;
+        const { icon: Icon, label, disabled, onActivate } = c.item;
         return (
           <button
             key={c.id}
@@ -34,7 +34,7 @@ export function ViewportRegion({ contributions, ctx }: ViewportRegionProps) {
             aria-label={label}
             title={label}
             disabled={disabled}
-            onClick={c.item.onActivate}
+            onClick={() => onActivate(ctx)}
           >
             <Icon size={16} />
           </button>

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { TrialChromeContext, TrialContribution } from '../types';
 import { SidebarRegion } from './SidebarRegion';
@@ -9,6 +9,8 @@ const Glyph = () => <svg />;
 const ctx = {
   trialId: 't1',
   undockedPanels: [],
+  collapsedSections: {},
+  setSectionCollapsed: () => {},
   undockPanel: () => {},
   dockPanel: () => {},
 } as unknown as TrialChromeContext;
@@ -45,6 +47,34 @@ describe('SidebarRegion', () => {
     );
     expect(screen.queryByText('hidden')).not.toBeInTheDocument();
   });
+
+  it('takes the trial’s remembered fold over the section’s default', () => {
+    render(
+      <SidebarRegion
+        contributions={[
+          {
+            id: 's',
+            region: 'sidebar',
+            item: { title: 'S', defaultCollapsed: true, body: <p>shown</p> },
+          },
+        ]}
+        ctx={{ ...ctx, collapsedSections: { s: false } }}
+      />,
+    );
+    expect(screen.getByText('shown')).toBeInTheDocument();
+  });
+
+  it('reports a toggle rather than keeping the fold itself', () => {
+    const setSectionCollapsed = vi.fn();
+    render(
+      <SidebarRegion
+        contributions={[{ id: 's', region: 'sidebar', item: { title: 'S', body: <p>body</p> } }]}
+        ctx={{ ...ctx, setSectionCollapsed }}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'S' }));
+    expect(setSectionCollapsed).toHaveBeenCalledWith('s', true);
+  });
 });
 
 describe('StatusRegion', () => {
@@ -83,4 +113,18 @@ describe('ViewportRegion', () => {
     screen.getByRole('button', { name: 'Fit' }).click();
     expect(onActivate).toHaveBeenCalledOnce();
   });
+
+  it('hands onActivate the chrome context', () => {
+    const onActivate = vi.fn();
+    render(
+      <ViewportRegion
+        contributions={[
+          { id: 'fit', region: 'viewport', item: { icon: Glyph, label: 'Fit', onActivate } },
+        ]}
+        ctx={ctx}
+      />,
+    );
+    screen.getByRole('button', { name: 'Fit' }).click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+  });
 });

package/src/chrome/types.ts

@@ -24,7 +24,10 @@ export interface ToolbarItem {
   pressed?: boolean;
   /** Render the label beside the glyph rather than only in the tooltip. */
   showLabel?: boolean;
-  onActivate: () => void;
+  /** Handed the trial's chrome context, so a contribution declared from the
+   *  lab can reach `ctx.saveSnapshot()` and the rest without the `render`
+   *  escape. A zero-argument handler stays valid. */
+  onActivate: (ctx: TrialChromeContext) => void;
 }
 
 /** A selectable tool in the palette region. */
@@ -38,7 +41,7 @@ export interface ToolItem {
 /** A titled block in the sidebar. */
 export interface SidebarSection {
   title: string;
-  /** Starts collapsed. The open/closed state itself is the region's. */
+  /** Starts collapsed, until the trial remembers a fold of its own. */
   defaultCollapsed?: boolean;
   /** Offer the tear-out control. On by default; a section that only makes
    *  sense beside its trial sets this false. */
@@ -53,7 +56,8 @@ export interface ViewportControl {
   icon: IconComponent;
   label: string;
   disabled?: boolean;
-  onActivate: () => void;
+  /** Handed the trial's chrome context, as `ToolbarItem.onActivate` is. */
+  onActivate: (ctx: TrialChromeContext) => void;
 }
 
 /** A readout in the status bar. */
@@ -100,6 +104,12 @@ export type TrialContribution =
 export interface TrialChromeContext {
   trialId: string;
   instrumentName: string;
+  /** What the title bar reads, which is the instrument's name until something
+   *  calls `setTitle`. */
+  title: string;
+  /** Retitle this trial; `null` restores the instrument name. Persisted with
+   *  the trial, so a title survives a reload. */
+  setTitle: (title: string | null) => void;
   isLastTrial: boolean;
 
   /** Null when the trial holds a view that is not the 2D one. */
@@ -125,6 +135,14 @@ export interface TrialChromeContext {
   config: unknown;
   setConfig: (key: string, value: unknown) => void;
 
+  /** Which of this trial's collapsible sections are folded. A sidebar
+   *  section's key is its contribution id; a section *inside* a contribution —
+   *  a control panel's property group — is keyed `<contribution id>/<label>`.
+   *  A section absent here is at its own default. Persisted with the trial. */
+  collapsedSections: Readonly<Record<string, boolean>>;
+  /** Fold or unfold one section, keyed as `collapsedSections` is. */
+  setSectionCollapsed: (key: string, collapsed: boolean) => void;
+
   /** Section ids this trial currently has torn out of its sidebar. */
   undockedPanels: readonly string[];
   /** Tear a sidebar section out into the workspace. */

package/src/controls/ControlPanel.test.tsx

@@ -443,3 +443,41 @@ 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();
+  });
+});

package/src/controls/ControlPanel.tsx

@@ -4,6 +4,8 @@ import {
   ColorRow,
   NumberRow,
   type PrefLeaf,
+  type PropertyAlign,
+  type PropertyDensity,
   PropertyGroup,
   PropertyList,
   PropertyRow,
@@ -44,9 +46,28 @@ 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.
+   */
+  collapse?: 'open' | 'closed';
+  /**
+   * Which sections are folded, keyed by section label. 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>>;
+  onCollapse?: (label: string, collapsed: boolean) => void;
   /** Draw leaves marked `hidden`. */
   showHidden?: boolean;
   className?: string;
@@ -62,7 +83,12 @@ 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>) {
@@ -87,14 +113,26 @@ export function ControlPanel<TC extends Record<string, unknown>>({
   );
 
   const gridPack = pack === 'one-up' ? 'auto-color' : 'pairs';
+  const folds = collapse !== undefined || collapsed !== undefined || onCollapse !== undefined;
+  const startsFolded = collapse === 'closed';
   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}>
+        <PropertyGroup
+          key={section.label}
+          title={section.label}
+          pack={gridPack}
+          collapsible={folds}
+          defaultCollapsed={startsFolded}
+          collapsed={collapsed ? (collapsed[section.label] ?? startsFolded) : undefined}
+          onCollapsedChange={onCollapse ? (next) => onCollapse(section.label, next) : undefined}
+        >
           {section.paths.map(row)}
         </PropertyGroup>
       ))}
@@ -109,7 +147,7 @@ interface ControlRowProps<TC extends Record<string, unknown>> {
   setConfig: (key: keyof TC, value: unknown) => void;
   renderers?: Record<string, ControlRenderer>;
   pack: ControlPack;
-  layout: PropertyRowLayout;
+  layout?: PropertyRowLayout;
   showHidden: boolean;
 }
 
@@ -201,6 +239,7 @@ function ControlRow<TC extends Record<string, unknown>>({
           label={label}
           value={read<boolean>()}
           onChange={write}
+          layout={layout}
           description={description}
         />
       );
@@ -234,7 +273,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':