@weasel-js/labkit 1.5.1 → 1.6.0

package/src/controls/ControlPanel.tsx

@@ -1,29 +1,23 @@
-import { isBuiltinToolPref } from '@weasel-js/core';
+import { getAlpha01, isBuiltinToolPref, toHex8, withAlpha01 } from '@weasel-js/core';
 import {
-  CheckboxRow,
-  ColorRow,
+  DialogRow,
   isPrefLeaf,
-  NumberRow,
+  ListEditor,
   type PrefGroup,
   type PrefLeaf,
-  type PrefNumber,
-  type PrefNumberFormat,
-  type PrefNumberUnit,
   type PropertyAlign,
+  type PropertyControlProps,
+  PropertyControl,
   type PropertyDensity,
+  PropertyField,
   PropertyGroup,
   PropertyList,
   type PropertyListPack,
+  PropertyPanel,
   PropertyRow,
   type PropertyRowLayout,
-  prefDisplayBounds,
-  Select,
-  SelectRow,
-  SliderRow,
-  Switch,
-  SwitchRow,
-  TextRow,
-  ToggleRow,
+  prefFieldProps,
+  type StanceProps,
 } from '@weasel-js/ui';
 import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { auto as autoValue } from '../config/auto';
@@ -32,6 +26,7 @@ import { fromConfigFields } from '../config/fromConfigField';
 import { schemaNodeAtPath, valueAtPath } from '../config/path';
 import type { ControlRenderer, ResolvedConfig, SectionSpec } from '../config/types';
 import { isLeafVisible } from '../config/visible';
+import { summarizeValue } from './inDialog';
 import type { ConfigField } from './types';
 
 /** How a panel packs its rows into the two-column property grid.
@@ -62,7 +57,7 @@ function sectionRows(section: SectionSpec, rows: Rows): Rows {
   };
 }
 
-export interface ControlPanelProps<TC extends Record<string, unknown>> {
+export interface ControlPanelProps<TC extends Record<string, unknown>> extends StanceProps {
   /** The instrument's resolved config schema. */
   schema?: ResolvedConfig;
   /** @deprecated Pass `schema`. A field list is adapted into one internally. */
@@ -106,14 +101,17 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> {
   /** 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;
-  /** Dotted paths currently unpinned. A row in this set draws ghosted and its
-   *  dot reads as auto, and the dot writes the sentinel back through
-   *  `setConfig`. Omitted, the panel keeps the set itself: the dots still work
-   *  and the sentinel never reaches `setConfig`, which would otherwise store it
-   *  as the row's value. */
+  /** Dotted paths currently unpinned. A row in this set hides its control and
+   *  reads out `auto`, and clicking its label writes the sentinel back through
+   *  `setConfig`. Omitted, the panel keeps the set itself: the labels still
+   *  toggle and the sentinel never reaches `setConfig`, which would otherwise
+   *  store it as the row's value. */
   auto?: ReadonlySet<string>;
   /** Draw leaves marked `hidden`. */
   showHidden?: boolean;
+  /** Heads the panel. With `title`, `stance` or `tone` given, the rows sit in a
+   *  `<PropertyPanel>` carrying them; with none, they are the bare list. */
+  title?: ReactNode;
   className?: string;
 }
 
@@ -137,6 +135,9 @@ export function ControlPanel<TC extends Record<string, unknown>>({
   onCollapse,
   auto: given,
   showHidden = false,
+  title,
+  stance,
+  tone,
   className,
 }: ControlPanelProps<TC>) {
   const resolved = useMemo(() => schema ?? fromConfigFields(fields ?? []), [schema, fields]);
@@ -170,28 +171,6 @@ export function ControlPanel<TC extends Record<string, unknown>>({
     [resolved, config, auto],
   );
 
-  const listRef = useRef<HTMLDivElement>(null);
-  const toggles = useRef(new Map<string, () => void>());
-  // Capture phase, because `PropertyRow` is a <label>: a bubbled handler runs
-  // after the browser has already begun a range drag or a native control's
-  // activation, so the shift-click moves the very value it was meant to unpin.
-  useEffect(() => {
-    const host = listRef.current;
-    if (!host) return;
-    const onDown = (e: PointerEvent) => {
-      if (!e.shiftKey) return;
-      const row = (e.target as HTMLElement | null)?.closest('[data-auto-path]');
-      const path = row?.getAttribute('data-auto-path');
-      const toggle = path ? toggles.current.get(path) : undefined;
-      if (!toggle) return;
-      e.preventDefault();
-      e.stopPropagation();
-      toggle();
-    };
-    host.addEventListener('pointerdown', onDown, true);
-    return () => host.removeEventListener('pointerdown', onDown, true);
-  }, []);
-
   const gridPack = gridOf(pack);
   // 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.
@@ -230,7 +209,6 @@ export function ControlPanel<TC extends Record<string, unknown>>({
           layout={rows.layout}
           auto={auto}
           setRowAuto={setRowAuto}
-          toggles={toggles.current}
         />
       );
     }
@@ -238,7 +216,16 @@ export function ControlPanel<TC extends Record<string, unknown>>({
     // empty `PrefGroup.name` — so it contributes its rows and no chrome.
     if (found.name === '') return <Fragment key={path}>{body(found, path, rows)}</Fragment>;
     return (
-      <PropertyGroup key={path} title={found.name} {...fold(path, undefined, rows.grid)}>
+      <PropertyGroup
+        key={path}
+        title={found.name}
+        description={found.description}
+        // A nested group is a block of rows, not a control: half of a
+        // two-column grid leaves it laying its own rows out inside a cell,
+        // which overlaps them.
+        span
+        {...fold(path, undefined, rows.grid)}
+      >
         {body(found, path, rows)}
       </PropertyGroup>
     );
@@ -289,6 +276,9 @@ export function ControlPanel<TC extends Record<string, unknown>>({
           shown={shown}
           setConfig={setConfig}
           layout={rows.layout}
+          // A segmented cell carries every choice at once, so a pair holding
+          // one needs the whole row the way a segmented row of its own does.
+          span={cells.some(({ leaf }) => extra<string>(leaf, 'control') === 'radio')}
         />,
       );
       i = j;
@@ -323,17 +313,21 @@ export function ControlPanel<TC extends Record<string, unknown>>({
     );
   };
 
+  const list = (
+    <PropertyList
+      pack={gridPack}
+      density={density}
+      align={align}
+      className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}
+    >
+      {body(resolved.group, '', { pack, layout, grid: gridPack })}
+    </PropertyList>
+  );
+  if (title === undefined && stance === undefined && tone === undefined) return list;
   return (
-    <div ref={listRef}>
-      <PropertyList
-        pack={gridPack}
-        density={density}
-        align={align}
-        className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}
-      >
-        {body(resolved.group, '', { pack, layout, grid: gridPack })}
-      </PropertyList>
-    </div>
+    <PropertyPanel title={title} stance={stance} tone={tone} density={density}>
+      {list}
+    </PropertyPanel>
   );
 }
 
@@ -357,7 +351,6 @@ interface ControlRowProps<TC extends Record<string, unknown>> {
   layout?: PropertyRowLayout;
   auto?: ReadonlySet<string>;
   setRowAuto: (path: string, next: boolean, value: unknown) => void;
-  toggles: Map<string, () => void>;
 }
 
 /** Whether this leaf draws as a slider, mirroring the condition the `number`
@@ -390,7 +383,6 @@ function ControlRow<TC extends Record<string, unknown>>({
   layout,
   auto,
   setRowAuto,
-  toggles,
 }: ControlRowProps<TC>) {
   const write = (value: unknown): void => setConfig(path, value);
   const fallback = extra<unknown>(leaf, 'default');
@@ -408,30 +400,9 @@ function ControlRow<TC extends Record<string, unknown>>({
   const value = resolvedValue ?? pinned;
   const setAuto = (next: boolean): void => setRowAuto(path, next, value);
   const onAutoChange = canAuto ? setAuto : undefined;
-  // A slider's handle is a position, not a number, so the readout is the only
-  // place its resolved value can be read. Every other control renders its own
-  // value, and repeating it there says it twice and wraps the narrow slot.
-  const readsItsOwnValue = !isSliderLeaf(leaf);
-  // A readout says what the control would say, so it reads in the display
-  // unit: a radian in a row that edits degrees is a different number.
-  const readoutValue =
-    leaf.kind === 'number' && typeof resolvedValue === 'number'
-      ? numberField(leaf, resolvedValue).shown
-      : resolvedValue;
-  const autoReadout = !isAutoRow
-    ? undefined
-    : resolvedValue === undefined || readsItsOwnValue
-      ? 'auto'
-      : `auto · ${String(readoutValue)}`;
-  const autoProps = { auto: isAutoRow, onAutoChange, 'data-auto-path': canAuto ? path : undefined };
-
-  useEffect(() => {
-    if (!canAuto) return;
-    toggles.set(path, () => setAuto(!isAutoRow));
-    return () => {
-      toggles.delete(path);
-    };
-  });
+  // An auto row hides its control, so the word is all the row has to say.
+  const autoReadout = isAutoRow ? 'auto' : undefined;
+  const autoProps = { auto: isAutoRow, onAutoChange };
 
   // Most specific wins, and within a tier the lab's entry beats the
   // instrument's: controls[path] -> node .render -> controls[kind] -> built-in.
@@ -442,142 +413,83 @@ function ControlRow<TC extends Record<string, unknown>>({
 
   const label = leaf.name;
   const description = leaf.description;
-  const read = <T,>(): T => value as T;
   // `auto` gives the whole width to the controls that read badly at half of a
   // sidebar's: free text, a slider track, a segmented toggle. `pairs` doesn't.
   const wide = pack === 'auto';
+  const row = { label, description, layout, readout: autoReadout, ...autoProps };
 
-  if (!isBuiltinToolPref(leaf))
-    return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
-
-  switch (leaf.kind) {
-    case 'number': {
-      const field = numberField(leaf, read<number>());
-      const suffix = extra<string>(leaf, 'suffix') ?? field.unit?.suffix;
-      const notation = extra<PrefNumberFormat>(leaf, 'format');
-      if (isSliderLeaf(leaf)) {
-        return (
-          <SliderRow
-            label={label}
-            value={field.shown}
-            min={field.min as number}
-            max={field.max as number}
-            step={field.step}
-            notation={notation}
-            unit={suffix}
-            onChange={(n) => write(field.store(n))}
-            readout={autoReadout}
-            layout={layout}
-            span={wide}
-            description={description}
-            {...autoProps}
+  if (leaf.kind === 'list') {
+    const entries = Array.isArray(value) ? (value as string[]) : [];
+    return (
+      <DialogRow
+        label={label}
+        summary={summarizeValue(entries)}
+        readout={autoReadout}
+        layout={layout}
+        description={description}
+        {...autoProps}
+      >
+        {() => (
+          <ListEditor
+            aria-label={label}
+            value={entries}
+            onChange={write}
+            placeholder={extra<string>(leaf, 'placeholder')}
           />
-        );
-      }
-      // NumberRow commits every keystroke and does not clamp, so the bounds a
-      // schema declares are enforced here — an instrument should never be
-      // handed a config value outside the range it asked for.
-      return (
-        <NumberRow
-          label={label}
-          value={field.shown}
-          min={field.min}
-          max={field.max}
-          step={field.step}
-          unit={suffix}
-          onChange={(n) => write(field.store(n))}
-          readout={autoReadout}
-          layout={layout}
-          description={description}
-          {...autoProps}
-        />
-      );
-    }
-    case 'boolean': {
-      const Row = extra<string>(leaf, 'control') === 'switch' ? SwitchRow : CheckboxRow;
-      return (
-        <Row
-          label={label}
-          value={read<boolean>()}
-          onChange={write}
-          readout={autoReadout}
-          layout={layout}
-          description={description}
-          {...autoProps}
-        />
-      );
-    }
-    case 'enum': {
-      const options = extra<readonly { value: string; label: string }[]>(leaf, 'options') ?? [];
-      const segmented = extra<string>(leaf, 'control') === 'radio';
-      const Row = segmented ? ToggleRow : SelectRow;
-      return (
-        <Row
-          label={label}
-          value={read<string>()}
-          options={options}
-          onChange={write}
-          readout={autoReadout}
-          layout={layout}
-          span={segmented && wide}
-          description={description}
-          {...autoProps}
-        />
-      );
-    }
+        )}
+      </DialogRow>
+    );
+  }
+
+  const field = labField(leaf, value, write);
+  if (field === null) return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
+  switch (field.kind) {
     case 'string':
-      return (
-        <DebouncedTextRow
-          leaf={leaf}
-          label={label}
-          value={read<string>()}
-          write={write}
-          readout={autoReadout}
-          layout={layout}
-          span={wide}
-          description={description}
-          {...autoProps}
-        />
-      );
-    case 'color': {
-      // `ColorRow` takes alpha as a number beside a `#rrggbb` swatch, so an
-      // `#rrggbbaa` value has to be split going in and rejoined coming out —
-      // handed whole to the swatch, the browser cannot parse it and the first
-      // edit writes back black.
-      const common = {
-        label,
-        readout: autoReadout,
-        layout,
-        description,
-        ...autoProps,
+      return <DebouncedTextRow leaf={leaf} field={field} span={wide} {...row} />;
+    case 'number':
+      return <PropertyField {...field} {...row} span={field.control === 'slider' && wide} />;
+    case 'enum':
+      return <PropertyField {...field} {...row} span={field.control === 'radio' && wide} />;
+    default:
+      return <PropertyField {...field} {...row} />;
+  }
+}
+
+/**
+ * A leaf as the field it draws, with the labkit-only extras `prefFieldProps`
+ * knows nothing of. `null` for a kind the panel declines: a paint, which a
+ * hex swatch would flatten to a solid, and an object, which a flat row would
+ * write one field of. Override with `render` to edit either.
+ */
+function labField(
+  leaf: PrefLeaf,
+  value: unknown,
+  write: (value: unknown) => void,
+): PropertyControlProps | null {
+  if (!isBuiltinToolPref(leaf) || leaf.kind === 'paint' || leaf.kind === 'object') return null;
+  const field = prefFieldProps(leaf, { value, setValue: write });
+  if (field === null) return null;
+  switch (field.kind) {
+    case 'number':
+      // `prefFieldProps` clamps what it stores, so an instrument is never
+      // handed a value outside the range it asked for.
+      return {
+        ...field,
+        control: isSliderLeaf(leaf) ? 'slider' : 'input',
+        unit: extra<string>(leaf, 'suffix') ?? field.unit,
       };
-      if (extra<boolean>(leaf, 'alpha') !== true)
-        return <ColorRow {...common} value={read<string>()} onChange={write} />;
-      const { rgb, alpha } = splitHexAlpha(read<string>());
-      return (
-        <ColorRow
-          {...common}
-          value={rgb}
-          onChange={(next) => write(joinHexAlpha(next, alpha))}
-          alpha={alpha}
-          onAlphaChange={(next) => write(joinHexAlpha(rgb, next))}
-        />
-      );
-    }
-    case 'paint':
-    case 'object':
-      // Declined: a hex swatch would write a solid over a gradient, and a flat
-      // row would write one field into a half-built object. Override with
-      // `render` to edit either.
-      return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
-    default: {
-      // Not reachable while every built-in kind has an arm — and a new kind
-      // that lacks one is a compile error here, never a blank row.
-      const _exhaustive: never = leaf;
-      throw new Error(
-        `ControlPanel: no control for built-in pref kind "${(_exhaustive as { kind: string }).kind}"`,
-      );
-    }
+    case 'boolean':
+      return { ...field, control: extra<string>(leaf, 'control') === 'switch' ? 'switch' : 'checkbox' };
+    case 'enum':
+      return { ...field, control: extra<string>(leaf, 'control') === 'radio' ? 'radio' : 'select' };
+    case 'string':
+      return {
+        ...field,
+        placeholder: extra<string>(leaf, 'placeholder'),
+        maxLength: extra<number>(leaf, 'maxLength'),
+      };
+    default:
+      return field;
   }
 }
 
@@ -602,125 +514,25 @@ function UnwiredRow({
 /** A text row whose writes are debounced — see {@link useDebouncedText}. */
 function DebouncedTextRow({
   leaf,
-  label,
-  value,
-  write,
-  layout,
-  span,
-  description,
-  readout,
-  auto,
-  onAutoChange,
-  'data-auto-path': autoPath,
+  field,
+  ...row
 }: {
   leaf: PrefLeaf;
+  field: PropertyControlProps & { kind: 'string' };
   label: string;
-  value: string;
-  write: (value: unknown) => void;
   layout?: PropertyRowLayout;
   span?: boolean;
   description?: string;
   readout?: ReactNode;
   auto?: boolean;
   onAutoChange?: (next: boolean) => void;
-  'data-auto-path'?: string;
 }) {
   const text = useDebouncedText(
-    value,
-    write as (v: string) => void,
+    field.value ?? '',
+    field.onChange,
     extra<number>(leaf, 'debounceMs') ?? 150,
   );
-
-  return (
-    <TextRow
-      label={label}
-      readout={readout}
-      layout={layout}
-      span={span}
-      description={description}
-      auto={auto}
-      onAutoChange={onAutoChange}
-      data-auto-path={autoPath}
-      value={text.local}
-      placeholder={extra<string>(leaf, 'placeholder')}
-      maxLength={extra<number>(leaf, 'maxLength')}
-      onChange={text.type}
-    />
-  );
-}
-
-/**
- * A number leaf's field in the unit it is edited in: what the control shows,
- * the bounds it shows them against, and what a typed number stores once it is
- * clamped and converted back. Without a `unit` this is what the leaf declares,
- * unchanged.
- */
-function numberField(
-  leaf: PrefLeaf,
-  value: number,
-): {
-  unit: PrefNumberUnit | undefined;
-  min: number | undefined;
-  max: number | undefined;
-  step: number | undefined;
-  shown: number;
-  store: (shown: number) => number;
-} {
-  const unit = extra<PrefNumberUnit>(leaf, 'unit');
-  // `min`, `max` and `step` are declared in the stored unit alongside the
-  // value, so they convert with it — a leaf storing radians and showing
-  // degrees would otherwise clamp typed degrees against 0..6.28.
-  const bounds = unit
-    ? prefDisplayBounds(leaf as PrefNumber)
-    : {
-        min: extra<number>(leaf, 'min'),
-        max: extra<number>(leaf, 'max'),
-        step: extra<number>(leaf, 'step'),
-      };
-  const lo = bounds.min ?? Number.NEGATIVE_INFINITY;
-  const hi = bounds.max ?? Number.POSITIVE_INFINITY;
-  return {
-    unit,
-    min: bounds.min,
-    max: bounds.max,
-    step: bounds.step,
-    shown: unit ? unit.toDisplay(value) : value,
-    store: (shown) => {
-      const clamped = Math.min(hi, Math.max(lo, shown));
-      return unit ? unit.fromDisplay(clamped) : clamped;
-    },
-  };
-}
-
-/** `#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa` as the `#rrggbb` an
- *  `<input type="color">` can hold and the 0..1 alpha beside it. Anything else
- *  reads as opaque black, which is what the input would show for it anyway. */
-function splitHexAlpha(value: string): { rgb: string; alpha: number } {
-  const digits = /^#([0-9a-f]{3,8})$/i.exec(value?.trim() ?? '')?.[1];
-  const twice = (s: string): string =>
-    s
-      .split('')
-      .map((c) => c + c)
-      .join('');
-  const byte = (s: string): number => Number.parseInt(s, 16) / 255;
-  switch (digits?.length) {
-    case 3:
-      return { rgb: `#${twice(digits)}`, alpha: 1 };
-    case 4:
-      return { rgb: `#${twice(digits.slice(0, 3))}`, alpha: byte(twice(digits.slice(3))) };
-    case 6:
-      return { rgb: `#${digits}`, alpha: 1 };
-    case 8:
-      return { rgb: `#${digits.slice(0, 6)}`, alpha: byte(digits.slice(6)) };
-    default:
-      return { rgb: '#000000', alpha: 1 };
-  }
-}
-
-/** A `#rrggbb` and a 0..1 alpha back into the `#rrggbbaa` the config holds. */
-function joinHexAlpha(rgb: string, alpha: number): string {
-  const byte = Math.max(0, Math.min(255, Math.round(alpha * 255)));
-  return `${rgb}${byte.toString(16).padStart(2, '0')}`;
+  return <PropertyField {...field} {...row} value={text.local} onChange={text.type} />;
 }
 
 /** One cell of a paired row, with its path and the leaf it draws. */
@@ -735,8 +547,8 @@ interface PairCellSpec {
  *
  * The cells are bare controls: a row holds one label column, so each leaf's
  * own name stays with its control as the accessible name and its description
- * as a title. For the same reason the row carries no pin dot — a dot names one
- * path, and this row has several.
+ * as a title. For the same reason the row's label does not toggle auto — it
+ * names one path, and this row has several.
  */
 function PairedRow<TC extends Record<string, unknown>>({
   label,
@@ -744,22 +556,29 @@ function PairedRow<TC extends Record<string, unknown>>({
   shown,
   setConfig,
   layout,
+  span,
 }: {
   label: string;
   cells: readonly PairCellSpec[];
   shown: TC;
   setConfig: (path: string, value: unknown) => void;
   layout?: PropertyRowLayout;
+  span?: boolean;
 }) {
   return (
-    <PropertyRow group label={label} layout={layout}>
+    <PropertyRow group span={span} label={label} layout={layout}>
       {cells.map(({ path, leaf }) => (
-        <PairCell
-          key={path}
-          leaf={leaf}
-          value={valueAtPath(shown, path) ?? extra<unknown>(leaf, 'default')}
-          write={(value) => setConfig(path, value)}
-        />
+        // The row is named by the pair, so a cell that shares it says which
+        // knob it is — without a caption a paired switch reads only to a
+        // screen reader. A cell whose leaf is deliberately unnamed keeps none.
+        <span key={path} className="lk-pair-cell" title={leaf.description || undefined}>
+          {leaf.name ? <span className="lk-pair-label">{leaf.name}</span> : null}
+          <PairCell
+            leaf={leaf}
+            value={valueAtPath(shown, path) ?? extra<unknown>(leaf, 'default')}
+            write={(value) => setConfig(path, value)}
+          />
+        </span>
       ))}
     </PropertyRow>
   );
@@ -776,91 +595,35 @@ function PairCell({
   value: unknown;
   write: (value: unknown) => void;
 }) {
-  const name = leaf.name;
-  const title = leaf.description;
   const text = useDebouncedText(
     typeof value === 'string' ? value : '',
     write,
     extra<number>(leaf, 'debounceMs') ?? 150,
   );
-  switch (leaf.kind) {
-    case 'number': {
-      const field = numberField(leaf, typeof value === 'number' ? value : 0);
-      return (
-        <input
-          type="number"
-          aria-label={name}
-          title={title}
-          value={field.shown}
-          min={field.min}
-          max={field.max}
-          step={field.step}
-          onChange={(e) => {
-            const n = Number(e.target.value);
-            if (e.target.value !== '' && Number.isFinite(n)) write(field.store(n));
-          }}
-        />
-      );
-    }
-    case 'boolean':
-      return extra<string>(leaf, 'control') === 'switch' ? (
-        <Switch aria-label={name} isSelected={value === true} onChange={write} />
-      ) : (
-        <input
-          type="checkbox"
-          aria-label={name}
-          title={title}
-          checked={value === true}
-          onChange={(e) => write(e.target.checked)}
-        />
-      );
+  const field = labField(leaf, value, write);
+  // Unreachable for null: `pairable` admits only kinds with a field.
+  if (field === null) return null;
+  switch (field.kind) {
     case 'string':
-      return (
-        <input
-          type="text"
-          aria-label={name}
-          title={title}
-          value={text.local}
-          placeholder={extra<string>(leaf, 'placeholder')}
-          maxLength={extra<number>(leaf, 'maxLength')}
-          onChange={(e) => text.type(e.target.value)}
-        />
-      );
+      return <PropertyControl {...field} name={leaf.name} value={text.local} onChange={text.type} />;
+    case 'number':
+      // The pair names the row, so a cell has no room for a unit.
+      return <PropertyControl {...field} name={leaf.name} control="input" unit={undefined} />;
     case 'color': {
       // The alpha track needs a row of its own to sit under, so a paired
       // swatch edits the color and carries the stored alpha through untouched.
-      const { rgb, alpha } = splitHexAlpha(typeof value === 'string' ? value : '');
-      const carriesAlpha = extra<boolean>(leaf, 'alpha') === true;
+      const stored = typeof value === 'string' ? toHex8(value) : '#000000';
       return (
-        <input
-          type="color"
-          aria-label={name}
-          title={title}
-          value={rgb}
-          onChange={(e) =>
-            write(carriesAlpha ? joinHexAlpha(e.target.value, alpha) : e.target.value)
-          }
+        <PropertyControl
+          {...field}
+          name={leaf.name}
+          alpha={undefined}
+          onChange={(rgb: string) => write(field.alpha ? withAlpha01(rgb, getAlpha01(stored)) : rgb)}
         />
       );
     }
-    case 'enum': {
-      const options = extra<readonly { value: string; label: string }[]>(leaf, 'options') ?? [];
-      // `Select` takes no `title`, so the cell's help hangs off a wrapper.
-      return (
-        <span title={title}>
-          <Select<string>
-            variant="bare"
-            aria-label={name}
-            options={options}
-            selectedKey={typeof value === 'string' ? value : null}
-            onSelectionChange={write}
-          />
-        </span>
-      );
-    }
     default:
-      // Unreachable: `pairable` admits only the kinds above.
-      return null;
+      return <PropertyControl {...field} name={leaf.name} />;
   }
 }