@weasel-js/labkit 1.5.2 → 1.6.0

package/dist/undo/index.d.ts

@@ -1,8 +1,9 @@
-export { au as UndoCapability } from '../_dts/frac-B4hFJMiN.js';
+export { au as UndoCapability } from '../_dts/frac-DTRq7Xpb.js';
 import 'react';
-import '../_dts/types-Db-3NNk1.js';
+import '../_dts/PrefsRow.d-DFpPIeIC.js';
+import '@weasel-js/theme';
 import '@weasel-js/core';
-import '../_dts/PrefsForm.d-DPy9I8It.js';
+import '../_dts/types-B7y8hX1D.js';
 import '../_dts/types-DJ79Tg5J.js';
 
 /** A subscriber to a named event. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -82,10 +82,6 @@
       "types": "./dist/passthrough/weasel-canvas.d.ts",
       "import": "./dist/passthrough/weasel-canvas.js"
     },
-    "./ui/layers": {
-      "types": "./dist/ui/layers/index.d.ts",
-      "import": "./dist/ui/layers/index.js"
-    },
     "./styles.css": "./dist/styles.css",
     "./loupe": {
       "types": "./dist/loupe/index.d.ts",
@@ -115,17 +111,17 @@
     "dev:3d": "LABKIT_EXAMPLE=3d-lab vite"
   },
   "peerDependencies": {
-    "@weasel-js/core": "1.5.2",
-    "@weasel-js/theme": "1.5.2",
+    "@weasel-js/core": "1.6.0",
+    "@weasel-js/theme": "1.6.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/geom": "1.5.2",
-    "@weasel-js/kernel3d": "1.5.2",
-    "@weasel-js/loupe": "1.5.2",
-    "@weasel-js/svg": "1.5.2",
-    "@weasel-js/ui": "1.5.2",
+    "@weasel-js/geom": "1.6.0",
+    "@weasel-js/kernel3d": "1.6.0",
+    "@weasel-js/loupe": "1.6.0",
+    "@weasel-js/svg": "1.6.0",
+    "@weasel-js/ui": "1.6.0",
     "earcut": "2.2.4",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -136,7 +132,7 @@
     "@biomejs/biome": "^2.4.12",
     "@rollup/plugin-alias": "^6.0.0",
     "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.5.2",
+    "@weasel-js/modes": "1.6.0",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/annotations/frac.test.ts

@@ -51,6 +51,13 @@ describe('fraction hit geometry', () => {
     expect(fracContains(box, { x: 0.18, y: 0.3 }, 0.05)).toBe(true);
   });
 
+  it('reaches a zero-size box through the tolerance alone', () => {
+    const dot: FracRect = { x: 0.25, y: 0.5, w: 0, h: 0 };
+    expect(fracContains(dot, { x: 0.25, y: 0.5 })).toBe(true);
+    expect(fracContains(dot, { x: 0.26, y: 0.51 })).toBe(false);
+    expect(fracContains(dot, { x: 0.26, y: 0.51 }, 0.02)).toBe(true);
+  });
+
   it('encloses only a box that lies wholly inside', () => {
     expect(fracEncloses({ x: 0, y: 0, w: 1, h: 1 }, box)).toBe(true);
     // Overlapping is not containing: a marquee takes what it encloses.

package/src/annotations/paint.test.ts

@@ -99,6 +99,20 @@ describe('markCommands', () => {
   it('draws an untitled text mark as nothing rather than an empty run', () => {
     expect(markCommands(mark('text'), CONTENT)).toEqual([]);
   });
+
+  it('draws a point as a small unfilled ring centered on its one stored point', () => {
+    const cmds = markCommands(mark('point', { points: [{ x: 0.25, y: 0.5 }] }), CONTENT);
+    expect(cmds).toHaveLength(1);
+    expect((cmds[0] as { fill?: unknown }).fill).toBeUndefined();
+    const pts = anchors(cmds);
+    const xs = pts.filter((_, i) => i % 2 === 0);
+    const ys = pts.filter((_, i) => i % 2 === 1);
+    // Centered on (50, 50) in world, radius 4.
+    expect(Math.min(...xs)).toBeCloseTo(46, 4);
+    expect(Math.max(...xs)).toBeCloseTo(54, 4);
+    expect(Math.min(...ys)).toBeCloseTo(46, 4);
+    expect(Math.max(...ys)).toBeCloseTo(54, 4);
+  });
 });
 
 describe('markCommands styling', () => {
@@ -117,6 +131,13 @@ describe('markCommands styling', () => {
     expect((stale as { stroke?: { dash?: number[] } }).stroke?.dash).toEqual([6, 4]);
   });
 
+  it('dashes a stale point ring like any other mark', () => {
+    const [ring] = markCommands(mark('point', { points: [{ x: 0.25, y: 0.5 }] }), CONTENT, {
+      stale: true,
+    });
+    expect((ring as { stroke?: { dash?: number[] } }).stroke?.dash).toEqual([6, 4]);
+  });
+
   it("colors a text mark's glyphs too, not only the outlines", () => {
     const [cmd] = markCommands(mark('text', { title: 'x' }), CONTENT, { color: '#30a46c' });
     const runs = (cmd as { runs: { fill?: { color?: string } }[] }).runs;

package/src/annotations/paint.ts

@@ -17,6 +17,7 @@ const MARK_COLOR = '#e5484d';
  *  marker geometry can be resolved here, which needs a resolved width. */
 const MARK_WIDTH = 2;
 const TEXT_SIZE = 14;
+const POINT_RADIUS = 4;
 
 /** The subset of a mark's scene node this needs: where it is, and what it is. */
 export interface PaintableMark {
@@ -108,6 +109,17 @@ export function markCommands(
     }
     case 'stroke':
       return [{ kind: 'path', path: polyline(vertices(m, content)), stroke }];
+    case 'point': {
+      const stored = m.data.points?.[0];
+      const c = stored ? toWorld(stored, content) : { x: m.pose.x, y: m.pose.y };
+      const ring = {
+        x: c.x - POINT_RADIUS,
+        y: c.y - POINT_RADIUS,
+        width: 2 * POINT_RADIUS,
+        height: 2 * POINT_RADIUS,
+      };
+      return [{ kind: 'path', path: ellipsePath(ring), stroke }];
+    }
     case 'text': {
       const text = m.data.title;
       if (!text) return [];

package/src/annotations/store.test.ts

@@ -245,6 +245,37 @@ describe('the annotation store', () => {
     expect(revived.query()).toHaveLength(1);
   });
 
+  it('round-trips a point mark with its one stored point and zero-size bounds', () => {
+    const store = makeStore();
+    const id = store.add({
+      target: 'naive',
+      kind: 'point',
+      frac: { x: 0.25, y: 0.5, w: 0, h: 0 },
+      points: [{ x: 0.25, y: 0.5 }],
+    });
+    expect(store.get(id)).toMatchObject({
+      kind: 'point',
+      frac: { x: 0.25, y: 0.5, w: 0, h: 0 },
+      points: [{ x: 0.25, y: 0.5 }],
+    });
+
+    const revived = annotationsFromJSON(JSON.parse(JSON.stringify(store.toJSON())), () => TARGETS);
+    expect(revived.get(id)).toEqual(store.get(id));
+  });
+
+  it('hit-tests a point mark through the tolerance, since its bounds have no area', () => {
+    const store = makeStore();
+    const id = store.add({
+      target: 'naive',
+      kind: 'point',
+      frac: { x: 0.25, y: 0.5, w: 0, h: 0 },
+      points: [{ x: 0.25, y: 0.5 }],
+    });
+    expect(store.hitTest('naive', { x: 0.26, y: 0.51 })).toHaveLength(0);
+    expect(store.hitTest('naive', { x: 0.26, y: 0.51 }, 0.02).map((a) => a.id)).toEqual([id]);
+    expect(store.hitTest('naive', { x: 0.3, y: 0.51 }, 0.02)).toHaveLength(0);
+  });
+
   it('reads a meaning passed as a thunk at each capture', async () => {
     let color = '#111111';
     const store = annotationsFromJSON(null, () => TARGETS, {

package/src/annotations/types.ts

@@ -21,8 +21,9 @@ export interface FracRect {
 }
 
 /** What shape a mark is. The kinds map onto weasel's own tools; an arrow is a
- *  line carrying an end marker, not a separate geometry. */
-export type AnnotationKind = 'stroke' | 'line' | 'arrow' | 'rect' | 'ellipse' | 'text';
+ *  line carrying an end marker, not a separate geometry. A point holds one
+ *  entry in `points` and zero-size bounds at that position. */
+export type AnnotationKind = 'stroke' | 'line' | 'arrow' | 'rect' | 'ellipse' | 'text' | 'point';
 
 /** One selectable status in an instrument's meaning tier. */
 export interface AnnotationStatus {

package/src/canvas/Stage.test.tsx

@@ -183,4 +183,22 @@ describe('an instrument that declares a stage', () => {
     render(<Lab instruments={[plain]} defaultInstrument="Plain" />);
     expect(screen.queryByRole('button', { name: 'Zoom in' })).toBeNull();
   });
+
+  it('draws its overlay on the stage, outside the camera', () => {
+    const overlaid = defineInstrument<{ n: number }, Record<string, never>>({
+      name: 'Overlaid',
+      defaultConfig: () => ({}),
+      initialState: () => ({ n: 7 }),
+      render: () => <div data-testid="art" />,
+      stage: {
+        size: { width: 240, height: 160 },
+        overlay: ({ state }) => <div data-testid="legend">{state.n}</div>,
+      },
+    });
+    const { container } = render(<Lab instruments={[overlaid]} defaultInstrument="Overlaid" />);
+    const legend = screen.getByTestId('legend');
+    expect(legend).toHaveTextContent('7');
+    expect(container.querySelector('.lk-stage')).toContainElement(legend);
+    expect(content(container)).not.toContainElement(legend);
+  });
 });

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,20 @@
+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

@@ -1,4 +1,5 @@
 import type { PrefLeaf, PrefNumberFormat, PrefNumberUnit } from '@weasel-js/ui';
+import { type InDialogOptions, inDialog } from '../controls/inDialog';
 import { type Auto, isAuto } from './auto';
 import type {
   Annotations,
@@ -91,6 +92,12 @@ export abstract class BaseNode<T> implements ConfigNode<T> {
     return this.opt({ render: renderer });
   }
 
+  /** Draw this row as a button that opens a dialog, with `body` as the
+   *  dialog's content — for an editor too big for the row. */
+  dialog(body: ControlRenderer, opts?: InDialogOptions): this {
+    return this.render(inDialog(body, opts));
+  }
+
   /**
    * Compute this leaf's value while it is auto, instead of leaving it
    * `undefined`. The resolver is given the config with every other auto path
@@ -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,14 @@ 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/index.ts

@@ -9,6 +9,7 @@ export {
   f,
   GroupNode,
   isConfigBranch,
+  ListNode,
   NumberNode,
   StringNode,
   ValueNode,
@@ -22,6 +23,7 @@ export {
   withValueAtPath,
 } from './path';
 export { resolveConfigSchema } from './resolve';
+export { type SectionTree, sectionTree } from './sectionTree';
 export { applyRules, builtinRules, titleCase } from './rules';
 export type {
   Annotations,

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;
 };