@weasel-js/labkit 1.5.1 → 1.6.0

package/dist/undo/index.d.ts

@@ -1,8 +1,9 @@
-export { at as UndoCapability } from '../_dts/frac-B4okC2lX.js';
+export { au as UndoCapability } from '../_dts/frac-DTRq7Xpb.js';
 import 'react';
-import '../_dts/types-DzoNY1pO.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.1",
+  "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.1",
-    "@weasel-js/theme": "1.5.1",
+    "@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.1",
-    "@weasel-js/kernel3d": "1.5.1",
-    "@weasel-js/loupe": "1.5.1",
-    "@weasel-js/svg": "1.5.1",
-    "@weasel-js/ui": "1.5.1",
+    "@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.1",
+    "@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/canvas/index.ts

@@ -10,15 +10,6 @@ export { screenToWorld, worldToScreen } from './canvasCoords';
 export type { StageProps } from './Stage';
 export { fitStage, Stage } from './Stage';
 export type { CanvasLayerDescriptor } from './useLayerScheduler';
-export type { OrbitHandlers, OrbitView, UseOrbitOptions, Vec3 } from './useOrbit';
-export {
-  clampPitch,
-  orbitAfterDrag,
-  orbitAfterWheel,
-  PITCH_LIMIT,
-  useOrbit,
-  wrapYaw,
-} from './useOrbit';
 export type { PanZoomHandlers, UsePanZoomOptions } from './usePanZoom';
 export { usePanZoom } from './usePanZoom';
 export type { ViewportSize, WorldFrame, WorldSpec } from './worldSpec';

package/src/chrome/labTypes.ts

@@ -40,7 +40,7 @@ export type LabContribution<TCtx = LabChromeContext> =
       item: ToolbarItem<TCtx>;
       render?: never;
     })
-  | (ContributionBase & { region: 'palette'; item: ToolItem; render?: never })
+  | (ContributionBase & { region: 'palette'; item: ToolItem<TCtx>; render?: never })
   | (ContributionBase & { region: 'sidebar' | 'aside'; item: SidebarSection; render?: never })
   | (ContributionBase & { region: 'footer'; item: StatusReadout; render?: never })
   | (ContributionBase & {

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

@@ -36,6 +36,24 @@ describe('PaletteRegion', () => {
     expect(setActiveTool).toHaveBeenCalledWith('brush');
   });
 
+  it('runs a command tool instead of selecting it, and never marks it current', () => {
+    const onActivate = vi.fn();
+    const setActiveTool = vi.fn();
+    const ctx = ctxWith('info', setActiveTool);
+    const info: RegionContribution<ToolSlotContext> = {
+      id: 'info',
+      region: 'palette',
+      item: { icon: Glyph, label: 'Info', onActivate },
+    };
+    render(<PaletteRegion contributions={[info]} ctx={ctx} />);
+    const button = screen.getByRole('button', { name: 'Info' });
+    button.click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+    expect(setActiveTool).not.toHaveBeenCalled();
+    // The slot names this id, and a command still must not read as held down.
+    expect(button).not.toHaveAttribute('aria-current');
+  });
+
   it('puts exactly one tool in the tab order', () => {
     render(<PaletteRegion contributions={[tool('brush'), tool('eraser')]} ctx={ctxWith(null)} />);
     expect(screen.getByRole('button', { name: 'brush' })).toHaveAttribute('tabindex', '0');

package/src/chrome/regions/PaletteRegion.tsx

@@ -12,7 +12,8 @@ export interface PaletteRegionProps<TCtx extends ToolSlotContext = TrialChromeCo
 }
 
 /** A tool strip: a trial's, or the lab's. Selection lives in whichever tool
- *  slot the context carries; this region only reflects it. */
+ *  slot the context carries; this region only reflects it. An item carrying
+ *  `onActivate` is a command instead — it presses, and never latches. */
 export function PaletteRegion<TCtx extends ToolSlotContext = TrialChromeContext>({
   contributions,
   ctx,
@@ -33,16 +34,16 @@ export function PaletteRegion<TCtx extends ToolSlotContext = TrialChromeContext>
         {contributions.map((c) => {
           if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
           if (c.region !== region || !c.item) return null;
-          const { icon: Icon, label, shortcut, disabled } = c.item as ToolItem;
+          const { icon: Icon, label, shortcut, disabled, onActivate } = c.item as ToolItem<TCtx>;
           return (
             <ToolButton
               key={c.id}
               icon={<Icon size={16} />}
               label={label}
               shortcut={shortcut}
-              active={ctx.activeToolId === c.id}
+              active={onActivate ? false : ctx.activeToolId === c.id}
               disabled={disabled}
-              onClick={() => ctx.setActiveTool(c.id)}
+              onClick={onActivate ? () => onActivate(ctx) : () => ctx.setActiveTool(c.id)}
             />
           );
         })}

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/regions/TitleBarRegion.tsx

@@ -32,7 +32,7 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
       onPointerDown={(e) => e.stopPropagation()}
       onMouseDown={(e) => e.stopPropagation()}
     >
-      <Icon size={14} />
+      <Icon size={16} />
     </button>
   );
 }

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';
@@ -31,16 +32,24 @@ export interface ToolbarItem<TCtx = TrialChromeContext> {
   onActivate: (ctx: TCtx) => void;
 }
 
-/** A selectable tool in the palette region. */
-export interface ToolItem {
+/** A tool in the palette region: a mode by default, a command when it carries
+ *  an `onActivate`. `TCtx` is the chrome context that handler is handed — a
+ *  trial's, or the lab's for a lab-level rail. */
+export interface ToolItem<TCtx = TrialChromeContext> {
   icon: IconComponent;
   label: string;
+  /** Shown in the tooltip. Not bound here — the trial owns its keymap. */
   shortcut?: string;
   disabled?: boolean;
+  /** Runs on press instead of selecting. An item with one is a command: it
+   *  never writes the tool slot, and never reads as the current tool. */
+  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);
   }
 }