@weasel-js/labkit 1.5.2 → 1.6.1

package/src/canvas/cameraView.test.ts

@@ -0,0 +1,60 @@
+import type { View } from '@weasel-js/core';
+import { describe, expect, it } from 'vitest';
+import { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
+import { worldToScreen } from './canvasCoords';
+import type { WorldFrame } from './worldSpec';
+
+const UP: WorldFrame = { originPx: { x: 200, y: 150 }, yDir: -1 };
+const vt = { zoom: 2.5, pan: { x: 30, y: -40 } };
+
+/** Where a weasel View puts a frame-local point. */
+const project = (v: View, p: { x: number; y: number }) => ({
+  x: (p.x - v.x) * v.scale.x,
+  y: (p.y - v.y) * v.scale.y,
+});
+
+describe('camera as a weasel View', () => {
+  it.each([
+    ['default frame', undefined],
+    ['moved origin, y up', UP],
+  ] as const)('places every world point where labkit does (%s)', (_, frame) => {
+    const v = toCameraView(vt, frame);
+    for (const w of [
+      { x: 0, y: 0 },
+      { x: 13, y: -7 },
+      { x: -120, y: 44 },
+    ]) {
+      const local = frameLocalToWorld(w, frame);
+      const a = project(v, local);
+      const b = worldToScreen(w, vt, frame);
+      expect(a.x).toBeCloseTo(b.x);
+      expect(a.y).toBeCloseTo(b.y);
+    }
+  });
+
+  it('round-trips', () => {
+    const back = fromCameraView(toCameraView(vt, UP), UP);
+    expect(back.zoom).toBeCloseTo(vt.zoom);
+    expect(back.pan.x).toBeCloseTo(vt.pan.x);
+    expect(back.pan.y).toBeCloseTo(vt.pan.y);
+  });
+});
+
+describe('clampZoomAbout', () => {
+  const prev: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };
+  it('holds the anchor of a zoom that hits the bound', () => {
+    // A 4x zoom about screen (100, 50): world under it stays (100, 50).
+    const next: View = { x: 75, y: 37.5, scale: { x: 4, y: 4 } };
+    const out = clampZoomAbout(prev, next, 0.5, 2);
+    expect(out.scale.x).toBe(2);
+    expect(100 / out.scale.x + out.x).toBeCloseTo(100);
+    expect(50 / out.scale.y + out.y).toBeCloseTo(50);
+  });
+
+  it('passes a zoom inside the bounds and a pan through', () => {
+    const inside: View = { x: 10, y: 5, scale: { x: 1.5, y: 1.5 } };
+    expect(clampZoomAbout(prev, inside, 0.5, 2)).toBe(inside);
+    const pan: View = { x: 10, y: 5, scale: { x: 1, y: 1 } };
+    expect(clampZoomAbout(prev, pan, 0.5, 2)).toBe(pan);
+  });
+});

package/src/canvas/cameraView.ts

@@ -0,0 +1,61 @@
+/**
+ * labkit's camera as a weasel `View`, so core's viewport actions drive it.
+ *
+ * labkit places a world point on screen at
+ * `originPx + pan + zoom * (x, yDir * y)`. A weasel `View` places one at
+ * `(p - (x, y)) * scale`. Over *frame-local* coordinates — the world with `y`
+ * multiplied by `yDir` — the two are the same affine map, which is all a pan
+ * or a zoom about a screen point needs.
+ */
+import type { View } from '@weasel-js/core';
+import type { Point, ViewTransform } from '../instrument/types';
+import { normalize2DView } from '../state/view';
+import { DEFAULT_FRAME, type WorldFrame } from './worldSpec';
+
+/** The weasel `View` equal to `view` under `frame`. */
+export function toCameraView(view: ViewTransform, frame: WorldFrame = DEFAULT_FRAME): View {
+  const v = normalize2DView(view);
+  return {
+    x: -(frame.originPx.x + v.pan.x) / v.zoom,
+    y: -(frame.originPx.y + v.pan.y) / v.zoom,
+    scale: { x: v.zoom, y: v.zoom },
+  };
+}
+
+/** The labkit camera equal to weasel `view` under `frame`. */
+export function fromCameraView(view: View, frame: WorldFrame = DEFAULT_FRAME): ViewTransform {
+  const zoom = view.scale.x;
+  return {
+    zoom,
+    pan: { x: -view.x * zoom - frame.originPx.x, y: -view.y * zoom - frame.originPx.y },
+  };
+}
+
+/** A frame-local point in the instrument's world, and back — the map is its
+ *  own inverse. */
+export function frameLocalToWorld(p: Point, frame: WorldFrame = DEFAULT_FRAME): Point {
+  return { x: p.x, y: p.y * frame.yDir };
+}
+
+/**
+ * `next` with its zoom held to [`min`, `max`], about the screen point the step
+ * from `prev` was anchored on, so a zoom that hits a bound stays anchored where
+ * the pointer is. A pan (equal scales) passes through.
+ */
+export function clampZoomAbout(prev: View, next: View, min: number, max: number): View {
+  const s0 = prev.scale.x;
+  const s1 = next.scale.x;
+  const clamped = Math.min(max, Math.max(min, s1));
+  if (clamped === s1) return next;
+  if (s0 === s1) return { ...next, scale: { x: clamped, y: clamped } };
+  // The screen point both views agree on: p / s0 + x0 = p / s1 + x1.
+  const inv = 1 / s0 - 1 / s1;
+  const px = (next.x - prev.x) / inv;
+  const py = (next.y - prev.y) / inv;
+  // The same point under the clamped scale.
+  return {
+    x: prev.x + px / s0 - px / clamped,
+    y: prev.y + py / s0 - py / clamped,
+    scale: { x: clamped, y: clamped },
+  };
+}

package/src/canvas/index.ts

@@ -1,3 +1,12 @@
+export type { CameraContextValue, CameraInputProps, CameraViewOptions } from './CameraInput';
+export {
+  CameraContext,
+  CameraInput,
+  CameraScope,
+  CameraScopeContext,
+  STAGE_VIEW_ID,
+  useCameraView,
+} from './CameraInput';
 export type { CameraWheelSlot } from './CameraWheelContext';
 export { CameraWheelContext } from './CameraWheelContext';
 export type { CanvasStackProps } from './CanvasStack';
@@ -6,11 +15,11 @@ export type { CanvasStackContextValue, CanvasStackSurface } from './CanvasStackC
 export { CanvasStackContext } from './CanvasStackContext';
 export type { ZoomAtOptions } from './camera';
 export { centerOn, zoomAt } from './camera';
+export { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
 export { screenToWorld, worldToScreen } from './canvasCoords';
+export { LinkedCursor } from './LinkedCursor';
 export type { StageProps } from './Stage';
 export { fitStage, Stage } from './Stage';
 export type { CanvasLayerDescriptor } from './useLayerScheduler';
-export type { PanZoomHandlers, UsePanZoomOptions } from './usePanZoom';
-export { usePanZoom } from './usePanZoom';
 export type { ViewportSize, WorldFrame, WorldSpec } from './worldSpec';
 export { applyCamera, DEFAULT_FRAME, resolveFrame } from './worldSpec';

package/src/chrome/regions/SidebarRegion.less

@@ -0,0 +1,197 @@
+.lk-sidebar-section {
+  background: var(--_s-fill);
+  border-bottom: var(--wzl-border-w) solid var(--_s-border-color);
+
+  // The last section runs to the bottom of its pane. Stopped at its content,
+  // its rule and the bare pane under it read as a second, empty zone.
+  &:last-child {
+    flex-grow: 1;
+    border-bottom: 0;
+  }
+}
+
+/* BEGIN GENERATED stance rules: sidebar-section — `npm run gen:stances`, do not edit. */
+
+.lk-sidebar-section {
+  --wzl-tone: initial;
+}
+
+.lk-sidebar-section {
+  --_s-surface: transparent;
+  --_s-border-color: var(--wzl-line-subtle);
+  --_s-tone-mix: var(--wzl-panel-tone-mix);
+  --_s-tone: var(--wzl-tone, var(--_s-surface));
+  --_s-accent: var(--wzl-tone);
+  --_s-title-font: var(--wzl-font-display);
+  --_s-title-size: var(--wzl-font-size-sm);
+  --_s-title-case: uppercase;
+  --_s-title-tracking: 0.08em;
+  --_s-title-color: var(--wzl-fg-muted);
+}
+
+.lk-sidebar-section[data-stance='scope'] {
+  --_s-surface: var(--wzl-stance-scope-surface, transparent);
+  --_s-border-color: var(--wzl-stance-scope-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-scope-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-scope-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='aside'] {
+  --_s-surface: var(--wzl-stance-aside-surface, transparent);
+  --_s-border-color: var(--wzl-stance-aside-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-aside-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-aside-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='advanced'] {
+  --_s-surface: var(--wzl-stance-advanced-surface, transparent);
+  --_s-border-color: var(--wzl-stance-advanced-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-advanced-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-advanced-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='debug'] {
+  --_s-surface: var(--wzl-stance-debug-surface, transparent);
+  --_s-border-color: var(--wzl-stance-debug-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-debug-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-debug-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='danger'] {
+  --_s-surface: var(--wzl-stance-danger-surface, transparent);
+  --_s-border-color: var(--wzl-stance-danger-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-danger-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-danger-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='notice'] {
+  --_s-surface: var(--wzl-stance-notice-surface, transparent);
+  --_s-border-color: var(--wzl-stance-notice-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-notice-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-notice-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='important'] {
+  --_s-surface: var(--wzl-stance-important-surface, transparent);
+  --_s-border-color: var(--wzl-stance-important-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-important-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-important-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section[data-stance='preview'] {
+  --_s-surface: var(--wzl-stance-preview-surface, transparent);
+  --_s-border-color: var(--wzl-stance-preview-border-color, var(--wzl-line-subtle));
+  --_s-tone-mix: var(--wzl-stance-preview-tone-mix, var(--wzl-panel-tone-mix));
+  --_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-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);
+  --_s-title-color: var(--wzl-stance-preview-title-color, var(--wzl-fg-muted));
+}
+
+.lk-sidebar-section {
+  --_s-fill: var(--_s-surface);
+}
+
+.lk-sidebar-section[data-tone],
+.lk-sidebar-section[data-stance] {
+  --_s-fill: color-mix(in oklab, var(--_s-tone) var(--_s-tone-mix), var(--_s-surface));
+}
+
+.lk-sidebar-section[data-tone] {
+  --wzl-accent: var(--_s-accent);
+  --wzl-accent-base: var(--_s-accent);
+  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));
+  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));
+  --wzl-accent-hover: var(--wzl-accent-strong);
+  --wzl-accent-fg: var(--wzl-accent-strong);
+  --wzl-focus-ring: var(--wzl-accent-strong);
+}
+
+/* END GENERATED stance rules: sidebar-section */
+
+.lk-sidebar-section__bar {
+  display: flex;
+  align-items: center;
+}
+
+.lk-sidebar-section__undock {
+  padding: 0 var(--wzl-space-xs);
+  border: 0;
+  background: transparent;
+  color: var(--wzl-fg-subtle);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--wzl-fg);
+  }
+}
+
+.lk-sidebar-section__head {
+  flex: 1;
+  width: 100%;
+  padding: var(--wzl-space-xs);
+  border: 0;
+  background: transparent;
+  color: var(--_s-title-color);
+  font-family: var(--_s-title-font);
+  font-size: var(--_s-title-size);
+  letter-spacing: var(--_s-title-tracking);
+  text-align: left;
+  text-transform: var(--_s-title-case);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--wzl-fg);
+  }
+}
+
+// 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);
+}

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

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import type { RegionContribution, TrialChromeContext } from '../types';
+import { SidebarRegion } from './SidebarRegion';
+
+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' },
+      },
+    ];
+    const { container } = render(<SidebarRegion contributions={contributions} ctx={ctx} />);
+    const [plain, debug] = [...container.querySelectorAll<HTMLElement>('.lk-sidebar-section')];
+    expect(plain.hasAttribute('data-stance')).toBe(false);
+    expect(debug.dataset.stance).toBe('debug');
+    expect(debug.style.getPropertyValue('--wzl-tone')).toBe('#224a63');
+  });
+});

package/src/chrome/regions/SidebarRegion.tsx

@@ -1,3 +1,4 @@
+import { type StanceProps, useStance } from '@weasel-js/ui';
 import type { ReactNode } from 'react';
 import type {
   RegionContribution,
@@ -20,7 +21,9 @@ function Section({
   onCollapsedChange,
   onUndock,
   children,
-}: {
+  stance,
+  tone,
+}: StanceProps & {
   title: string;
   collapsed: boolean;
   onCollapsedChange: (collapsed: boolean) => void;
@@ -28,7 +31,7 @@ function Section({
   children: ReactNode;
 }) {
   return (
-    <section className="lk-sidebar-section">
+    <section className="lk-sidebar-section" {...useStance({ stance, tone })}>
       <div className="lk-sidebar-section__bar">
         <button
           type="button"
@@ -76,6 +79,8 @@ export function SidebarRegion<TCtx extends SidebarSlotContext = TrialChromeConte
           <Section
             key={c.id}
             title={item.title}
+            stance={item.stance}
+            tone={item.tone}
             collapsed={ctx.collapsedSections[c.id] ?? item.defaultCollapsed ?? false}
             onCollapsedChange={(next) => ctx.setSectionCollapsed(c.id, next)}
             onUndock={

package/src/chrome/types.ts

@@ -1,3 +1,4 @@
+import type { StanceProps } from '@weasel-js/ui';
 import type { ComponentType, ReactNode } from 'react';
 import type { ResolvedConfig } from '../config/types';
 import type { ConfigField } from '../controls/types';
@@ -45,8 +46,10 @@ export interface ToolItem<TCtx = TrialChromeContext> {
   onActivate?: (ctx: TCtx) => void;
 }
 
-/** A titled block in the sidebar. */
-export interface SidebarSection {
+/** A titled block in the sidebar. `stance` and `tone` work as on a
+ *  `<PropertyPanel>`: what kind of content the section holds, and which of its
+ *  peers it is. */
+export interface SidebarSection extends StanceProps {
   title: string;
   /** Starts collapsed, until the trial remembers a fold of its own. */
   defaultCollapsed?: boolean;

package/src/config/autoConfig.ts

@@ -1,4 +1,4 @@
-import { isPrefLeaf, type PrefGroup, type PrefLeaf } from '@weasel-js/ui';
+import type { PrefGroup, PrefLeaf } from '@weasel-js/ui';
 import { isAuto } from './auto';
 import { isRecord, withValueAtPath } from './path';
 import type { ResolvedConfig } from './types';
@@ -15,7 +15,7 @@ function extra<T>(leaf: PrefLeaf, key: string): T | undefined {
 function* leaves(group: PrefGroup, at = ''): Generator<[string, PrefLeaf]> {
   for (const [key, child] of Object.entries(group.children)) {
     const path = at === '' ? key : `${at}.${key}`;
-    if (isPrefLeaf(child)) yield [path, child];
+    if ('kind' in child) yield [path, child];
     else yield* leaves(child, path);
   }
 }

package/src/config/builder.ts

@@ -11,6 +11,7 @@ import type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  InDialogOptions,
   InferConfig,
   NodeOptions,
   SectionOption,
@@ -88,7 +89,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.opt({ dialog: { ...opts, body }, render: undefined });
   }
 
   /**
@@ -134,7 +141,7 @@ export class NumberNode extends BaseNode<number> {
     return this.ann({ suffix });
   }
 
-  /** Show the value in a named format — `'compact'` reads `2.0M`. Presentation
+  /** 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 });
@@ -187,6 +194,15 @@ export class StringNode extends BaseNode<string> {
   }
 }
 
+export class ListNode extends BaseNode<string[]> {
+  readonly kind = 'list';
+
+  /** Shown in an empty entry. */
+  placeholder(placeholder: string): this {
+    return this.ann({ placeholder });
+  }
+}
+
 export class ColorNode extends BaseNode<string> {
   readonly kind = 'color';
 
@@ -304,6 +320,9 @@ export const f = {
   boolean: (def: boolean): BooleanNode => new BooleanNode(def),
   string: (def: string): StringNode => new StringNode(def),
   color: (def: string): ColorNode => new ColorNode(def),
+  /** A list of strings. Its row summarizes the list, and opens a dialog to
+   *  edit it one entry per field. */
+  list: (def: readonly string[]): ListNode => new ListNode([...def]),
 
   /** A fixed set of choices. The default's literal type flows into the config
    *  type, so `f.enum('fast', ['fast', 'accurate'])` gives

package/src/config/entry.test.ts

@@ -36,6 +36,16 @@ describe('@weasel-js/labkit/config', () => {
     expect(files.filter((f) => /\.(less|css)$/.test(f))).toEqual([]);
   });
 
+  // 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'),
+      ),
+    );
+    expect(importers).toEqual([]);
+  });
+
   it('is published as an entry', async () => {
     const pkg = JSON.parse(readFileSync(resolve(__dirname, '../../package.json'), 'utf8'));
     expect(pkg.exports['./config']).toEqual({

package/src/config/fromConfigField.ts

@@ -70,5 +70,6 @@ export function fromConfigFields(fields: readonly ConfigField[]): ResolvedConfig
     sections: [],
     showIf: new Map(),
     renderers: {},
+    dialogs: {},
   };
 }

package/src/config/index.ts

@@ -9,6 +9,7 @@ export {
   f,
   GroupNode,
   isConfigBranch,
+  ListNode,
   NumberNode,
   StringNode,
   ValueNode,
@@ -23,6 +24,7 @@ export {
 } from './path';
 export { resolveConfigSchema } from './resolve';
 export { applyRules, builtinRules, titleCase } from './rules';
+export { type SectionTree, sectionTree } from './sectionTree';
 export type {
   Annotations,
   BranchAnnotations,
@@ -38,12 +40,15 @@ export type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  DialogSpec,
   EntryValue,
+  InDialogOptions,
   InferConfig,
   LeafPatch,
   NodeOptions,
   NodeValue,
   ResolvedConfig,
+  SectionOption,
   SectionSpec,
   ValueAtPath,
 } from './types';

package/src/config/resolve.ts

@@ -7,6 +7,7 @@ import type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  DialogSpec,
   LeafPatch,
   ResolvedConfig,
   SectionSpec,
@@ -25,6 +26,7 @@ interface Sink {
   sections: SectionSpec[];
   showIf: Map<string, (config: Record<string, unknown>) => boolean>;
   renderers: Record<string, ControlRenderer>;
+  dialogs: Record<string, DialogSpec>;
   chain: readonly ConfigRule[];
 }
 
@@ -45,10 +47,17 @@ export function resolveConfigSchema<TC>(
     sections: [],
     showIf: new Map(),
     renderers: {},
+    dialogs: {},
     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,
+  };
 }
 
 /** A section while it is still being filled. */
@@ -81,6 +90,7 @@ function resolveShape(shape: ConfigShape, at: string, name: string, sink: Sink):
     }
     if (predicate) sink.showIf.set(path, predicate);
     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/rules.ts

@@ -15,6 +15,8 @@ export function titleCase(key: string): string {
 const kindFromValue: ConfigRule = (ctx) => {
   const t = typeof ctx.default;
   if (t === 'boolean' || t === 'number' || t === 'string') return { kind: t };
+  const d = ctx.default;
+  if (Array.isArray(d) && d.every((v) => typeof v === 'string')) return { kind: 'list' };
   return null;
 };