@weasel-js/labkit 1.5.1 → 1.6.0

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
@@ -110,7 +117,7 @@ export abstract class BaseNode<T> implements ConfigNode<T> {
     return this.opt({ unpinned: true });
   }
 
-  /** Never auto. The row takes no pin dot and ignores the gesture. */
+  /** Never auto. The row's label does not toggle. */
   manual(): this {
     return this.opt({ manual: true });
   }
@@ -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';
 
@@ -254,9 +270,8 @@ export class GroupNode<S extends ConfigShape> implements ConfigBranch<S> {
     return this.with({ ...this.annotations, name }, this.options);
   }
 
-  /** Longer help text. Carried on the resolved `PrefGroup`, where weasel-ui's
-   *  `PrefsForm` draws it under the heading; `ControlPanel` has no place for
-   *  it yet and shows the heading alone. */
+  /** Longer help text. Carried on the resolved `PrefGroup`; both weasel-ui's
+   *  `PrefsForm` and `ControlPanel` draw it under the heading. */
   describe(description: string): GroupNode<S> {
     return this.with({ ...this.annotations, description }, this.options);
   }
@@ -305,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;
 };
 

package/src/config/sectionTree.test.ts

@@ -0,0 +1,146 @@
+import { isPrefLeaf, type PrefGroup } from '@weasel-js/ui';
+import { describe, expect, it } from 'vitest';
+import { f } from './builder';
+import { resolveConfigSchema } from './resolve';
+import { sectionTree } from './sectionTree';
+
+const groupAt = (g: PrefGroup, key: string) => {
+  const child = g.children[key];
+  if (!child || isPrefLeaf(child)) throw new Error(`${key} is not a group`);
+  return child;
+};
+
+describe('sectionTree', () => {
+  it('makes each root section a top-level group, in schema order', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        lift: f.number(1).section('View'),
+        beat: f.number(2).section('Playback'),
+        spread: f.number(3).section('View'),
+      }),
+    );
+    const { group } = sectionTree(resolved, { lift: 1, beat: 2, spread: 3 });
+    expect(Object.keys(group.children)).toEqual(['view', 'playback']);
+    expect(groupAt(group, 'view').name).toBe('View');
+    expect(Object.keys(groupAt(group, 'view').children)).toEqual(['lift', 'spread']);
+    expect(Object.keys(groupAt(group, 'playback').children)).toEqual(['beat']);
+  });
+
+  it('brings a group a section names in whole, so the rail can indent it', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        cards: f
+          .group({ floor: f.number(1), cap: f.number(2) })
+          .section('View')
+          .label('Cards'),
+      }),
+    );
+    const { group } = sectionTree(resolved, { cards: { floor: 1, cap: 2 } });
+    const cards = groupAt(groupAt(group, 'view'), 'cards');
+    expect(cards.name).toBe('Cards');
+    expect(Object.keys(cards.children)).toEqual(['floor', 'cap']);
+  });
+
+  it('renests the config to mirror the tree', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        cards: f.group({ floor: f.number(1) }).section('View'),
+        beat: f.number(2).section('Playback'),
+      }),
+    );
+    const { values } = sectionTree(resolved, { cards: { floor: 7 }, beat: 9 });
+    expect(values).toEqual({ view: { cards: { floor: 7 } }, playback: { beat: 9 } });
+  });
+
+  it('cuts what showIf rules out, at any depth', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        lineNumbers: f.boolean(true).section('View'),
+        listing: f
+          .group({
+            dim: f.number(1).showIf((c) => c.lineNumbers === true),
+            weight: f.number(0),
+          })
+          .section('View'),
+      }),
+    );
+    const on = sectionTree(resolved, { lineNumbers: true, listing: { dim: 1, weight: 0 } });
+    expect(Object.keys(groupAt(groupAt(on.group, 'view'), 'listing').children)).toEqual([
+      'dim',
+      'weight',
+    ]);
+    const off = sectionTree(resolved, { lineNumbers: false, listing: { dim: 1, weight: 0 } });
+    expect(Object.keys(groupAt(groupAt(off.group, 'view'), 'listing').children)).toEqual(['weight']);
+  });
+
+  it('drops a section nothing in it is showing, rather than opening it onto nothing', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        mode: f.enum<string>('a', ['a', 'b']).section('View'),
+        glow: f.number(1).section('Diff').showIf((c) => c.mode === 'b'),
+      }),
+    );
+    expect(Object.keys(sectionTree(resolved, { mode: 'b', glow: 1 }).group.children)).toEqual([
+      'view',
+      'diff',
+    ]);
+    expect(Object.keys(sectionTree(resolved, { mode: 'a', glow: 1 }).group.children)).toEqual([
+      'view',
+    ]);
+  });
+
+  it('keeps a hidden leaf out unless asked for it', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({ seed: f.number(1).hidden().section('Debug'), route: f.boolean(true).section('Debug') }),
+    );
+    expect(Object.keys(groupAt(sectionTree(resolved, {}).group, 'debug').children)).toEqual([
+      'route',
+    ]);
+    expect(Object.keys(groupAt(sectionTree(resolved, {}, true).group, 'debug').children)).toEqual([
+      'seed',
+      'route',
+    ]);
+  });
+
+  it('leaves a node no section claimed at the top level', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({ lift: f.number(1).section('View'), loose: f.number(2) }),
+    );
+    const { group, values } = sectionTree(resolved, { lift: 1, loose: 2 });
+    expect(Object.keys(group.children)).toEqual(['view', 'loose']);
+    expect(values.loose).toBe(2);
+  });
+
+  it('pathAt gives back the config path a rail path stands for', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        cards: f.group({ floor: f.number(1) }).section('View'),
+        loose: f.number(2),
+      }),
+    );
+    const { pathAt } = sectionTree(resolved, { cards: { floor: 1 }, loose: 2 });
+    expect(pathAt('view.cards.floor')).toBe('cards.floor');
+    expect(pathAt('loose')).toBe('loose');
+  });
+
+  it('keys two sections whose labels slug the same apart', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({ a: f.number(1).section('Hold on'), b: f.number(2).section('Hold-on') }),
+    );
+    const { group } = sectionTree(resolved, { a: 1, b: 2 });
+    expect(Object.keys(group.children)).toEqual(['hold-on', 'hold-on-2']);
+  });
+
+  it('ignores a section nested under a group, which buckets rows in a pane', () => {
+    const resolved = resolveConfigSchema(
+      f.schema({
+        cards: f
+          .group({ floor: f.number(1).section('Size') })
+          .section('View'),
+      }),
+    );
+    const { group } = sectionTree(resolved, { cards: { floor: 1 } });
+    expect(Object.keys(group.children)).toEqual(['view']);
+    expect(Object.keys(groupAt(groupAt(group, 'view'), 'cards').children)).toEqual(['floor']);
+  });
+});

package/src/config/sectionTree.ts

@@ -0,0 +1,124 @@
+import { isPrefLeaf, type PrefGroup } from '@weasel-js/ui';
+import { valueAtPath } from './path';
+import type { ResolvedConfig } from './types';
+import { isLeafVisible } from './visible';
+
+/**
+ * A resolved schema rearranged so its sections are groups.
+ *
+ * `PrefsForm`'s rail navigates the schema tree — top-level groups are its
+ * items, their group children indent under them. A resolved schema keeps its
+ * sections beside the tree instead, so a flat schema's rail comes out as one
+ * unnamed item however many headings the panel draws. This puts the sections
+ * where the rail looks for them.
+ */
+export interface SectionTree {
+  /** The rail's schema. Top-level children are the schema's root sections,
+   *  followed by any root node no section claimed. */
+  group: PrefGroup;
+  /** `config` renested to mirror `group` — the value tree `PrefsForm` takes. */
+  values: Record<string, unknown>;
+  /** The config path a path within `group` stands for. */
+  pathAt: (railPath: string) => string;
+}
+
+/** A section label as an object key: no dots, since a dotted path is how every
+ *  caller addresses a node, and a label is free to hold one. */
+function slugOf(label: string, taken: ReadonlySet<string>): string {
+  const base = label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'section';
+  if (!taken.has(base)) return base;
+  for (let n = 2; ; n += 1) if (!taken.has(`${base}-${n}`)) return `${base}-${n}`;
+}
+
+/** A subtree with everything `showIf` or `hidden` rules out cut away, or null
+ *  when that is all of it. A group whose children all went is not a rail item
+ *  the reader can open onto nothing. */
+function prune(
+  resolved: ResolvedConfig,
+  group: PrefGroup,
+  at: string,
+  config: Record<string, unknown>,
+  showHidden: boolean,
+): PrefGroup | null {
+  const children: PrefGroup['children'] = {};
+  for (const [key, child] of Object.entries(group.children)) {
+    const path = at === '' ? key : `${at}.${key}`;
+    if (!isLeafVisible(resolved, path, config, showHidden)) continue;
+    if (isPrefLeaf(child)) {
+      children[key] = child;
+      continue;
+    }
+    const kept = prune(resolved, child, path, config, showHidden);
+    if (kept) children[key] = kept;
+  }
+  return Object.keys(children).length === 0 ? null : { ...group, children };
+}
+
+/**
+ * Turn a resolved schema's root sections into the top level of a `PrefGroup`,
+ * for `PrefsForm`'s rail layout.
+ *
+ * A section naming a group brings that group in whole, so it lands as an
+ * indented rail item; a section naming a leaf drops it loose into the
+ * section's own pane. Sections nested under a group are left alone — they
+ * bucket rows inside a pane, which is the panel's job and not the rail's.
+ */
+export function sectionTree(
+  resolved: ResolvedConfig,
+  config: Record<string, unknown>,
+  showHidden = false,
+): SectionTree {
+  const children: PrefGroup['children'] = {};
+  const values: Record<string, unknown> = {};
+  const slugs = new Set<string>();
+  const claimed = new Set<string>();
+
+  for (const section of resolved.sections) {
+    if (section.at !== '') continue;
+    const kept: PrefGroup['children'] = {};
+    const held: Record<string, unknown> = {};
+    for (const path of section.paths) {
+      claimed.add(path);
+      const child = resolved.group.children[path];
+      if (!child || !isLeafVisible(resolved, path, config, showHidden)) continue;
+      if (isPrefLeaf(child)) {
+        kept[path] = child;
+      } else {
+        const subtree = prune(resolved, child, path, config, showHidden);
+        if (!subtree) continue;
+        kept[path] = subtree;
+      }
+      held[path] = valueAtPath(config, path);
+    }
+    if (Object.keys(kept).length === 0) continue;
+    const slug = slugOf(section.label, slugs);
+    slugs.add(slug);
+    children[slug] = { name: section.label, children: kept };
+    values[slug] = held;
+  }
+
+  // Whatever no section claimed stays at the top level, where `prefRailItems`
+  // gathers loose leaves into one item named for the root.
+  for (const [key, child] of Object.entries(resolved.group.children)) {
+    if (claimed.has(key) || !isLeafVisible(resolved, key, config, showHidden)) continue;
+    if (isPrefLeaf(child)) {
+      children[key] = child;
+    } else {
+      const subtree = prune(resolved, child, key, config, showHidden);
+      if (!subtree) continue;
+      children[key] = subtree;
+    }
+    values[key] = valueAtPath(config, key);
+  }
+
+  return {
+    group: { name: resolved.group.name, children },
+    values,
+    pathAt: (railPath) => {
+      const cut = railPath.indexOf('.');
+      const head = cut === -1 ? railPath : railPath.slice(0, cut);
+      if (!slugs.has(head)) return railPath;
+      return cut === -1 ? '' : railPath.slice(cut + 1);
+    },
+  };
+}

package/src/config/types.ts

@@ -123,15 +123,15 @@ export interface NodeOptions extends BranchOptions {
   render?: ControlRenderer;
   /** Errors for this leaf under `config`, the instrument's whole config. */
   validate?: (leaf: PrefLeaf, config: Record<string, unknown>) => string[];
-  /** Computes this leaf's value while it is auto. Attaching one is what lets
-   *  the ghosted control draw a real value and keeps the instrument off
+  /** Computes this leaf's value while it is auto. Attaching one is what gives
+   *  the row a real value to pin back to and keeps the instrument off
    *  `?? compute()`. */
   autoResolve?: (config: Record<string, unknown>) => unknown;
   /** The leaf starts auto rather than pinned at its default. Set by
    *  `.initial(auto)`. */
   unpinned?: boolean;
-  /** The leaf can never be auto: the row takes no pin dot and ignores the
-   *  gesture. For a value the instrument cannot receive as `undefined`. */
+  /** The leaf can never be auto: the row's label does not toggle. For a value
+   *  the instrument cannot receive as `undefined`. */
   manual?: boolean;
 }
 

package/src/controls/AutoControls.stories.tsx

@@ -37,7 +37,7 @@ const schema = f.schema({
 
 const resolved = resolveConfigSchema(schema, []);
 
-/** Every path the panel will draw ghosted, except the `.manual()` one. */
+/** Every path the panel will draw as auto, except the `.manual()` one. */
 const EVERY_AUTO = ['gap', 'cols', 'wave', 'mode', 'showGrid', 'title', 'tint'];
 
 function Panel({ start }: { start: readonly string[] }) {
@@ -73,16 +73,16 @@ function Pair() {
 }
 
 /**
- * Both states of every row kind, side by side. What to look at: an auto row's
- * control keeps no accent color, its readout reads `auto · 18 px` rather than a
- * number, and the pin dot appears only under the pointer — except on an auto
- * row, where it stays. `Seed` is `.manual()` and takes no dot at all.
+ * Both states of every row kind, side by side. What to look at: an auto row
+ * shows no control at all — only its label and the word `auto` — and still
+ * takes exactly the room it took while pinned, so nothing below it moves on
+ * the toggle. `Seed` is `.manual()` and does not toggle.
  */
 export const BothStates: Story = {
   render: () => <Pair />,
 };
 
-/** One panel to shift-click around in: the handle must not move as it toggles. */
+/** One panel to click labels around in: the row must not resize as it toggles. */
 export const Interactive: Story = {
   render: () => <Panel start={['gap']} />,
 };

package/src/controls/ControlPanel.less

@@ -2,6 +2,33 @@
 // from PropertyPanel.less. This class remains as the consumer-facing hook.
 // It carries no padding: whatever mounts the panel insets it, and a second
 // inset here doubled the gutter inside an already narrow sidebar.
+// A select row aligns to its value's baseline by default, which sits a label
+// lower than the centered rows around it — here those neighbors are sliders and
+// checkboxes, so a column of labels stepped at every dropdown.
 .lk-control-panel {
   padding: 0;
+  --wzl-prop-row-align-text: center;
+}
+
+// A cell in a paired row, with the caption naming the knob it holds. Case,
+// tracking, alignment and width come from the --wzl-params-label-* properties,
+// which inherit across the CSS-module boundary that keeps PropertyPanel's row
+// label class out of reach from here.
+.lk-pair-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wzl-space-3, 6px);
+  min-width: 0;
+}
+
+.lk-pair-label {
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
+  font-size: var(--wzl-font-size-sm);
+  color: var(--wzl-fg-muted);
+  text-transform: var(--wzl-params-label-case, uppercase);
+  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));
+  text-align: var(--wzl-params-label-align, start);
+  inline-size: var(--wzl-params-label-width, auto);
+  white-space: nowrap;
 }

package/src/controls/ControlPanel.stories.tsx

@@ -1,6 +1,6 @@
 import { ANGLE_RADIANS, prefUnit } from '@weasel-js/core';
 import type { Meta, StoryObj } from '@weasel-js/forge';
-import { PropertyRow } from '@weasel-js/ui';
+import { type PrefNumberUnit, PropertyRow } from '@weasel-js/ui';
 import { useState } from 'react';
 import { f } from '../config/builder';
 import { withValueAtPath } from '../config/path';
@@ -275,3 +275,97 @@ export const Presentation: Story = {
     );
   },
 };
+
+const inline = f.schema({
+  folderPad: f.number(1.1).range(0, 4).step(0.1).label('Folder pad'),
+  glyphs: f.number(1_000_000).range(0, 2_000_000).format('compact'),
+  names: f.number(60).range(0, 100),
+  labels: f.number(0).range(0, 100),
+  placement: f.enum('spread', ['spread', 'stack', 'ring']),
+  lift: f.number(0.2).range(0, 1).step(0.05),
+  opacity: f.number(0.45).range(0, 1).step(0.05),
+  iconSet: f.enum('small', ['small', 'large']).label('Icon set'),
+  drawAsIcons: f
+    .list(['**/node_modules/**', '**/dist/**', 'package-lock.json'])
+    .label('Draw as icons'),
+  detail: f.number(1200).range(0, 4000).suffix('nodes'),
+  showCameraRoute: f.boolean(false).toggle().label('Show camera route'),
+  routeColor: f.enum('sweep', ['sweep', 'depth']).label('Route color'),
+  minimap: f.boolean(true).toggle(),
+  minimapSize: f.number(280).range(80, 600).label('Minimap size'),
+  pickHud: f.boolean(true).toggle().label('Pick HUD'),
+  pickOutlines: f.boolean(true).toggle().label('Pick outlines'),
+  markOverlay: f.boolean(false).toggle().label('Mark overlay'),
+});
+
+/** The shape a lab's sidebar draws: `layout="inline"` paired two to a row, in a
+ *  narrow column. Every row kind meets here — slider, select, switch, text —
+ *  and they have to share one base height, or the column reads as ragged. */
+export const Inline: Story = {
+  render: () => {
+    const schema = resolveConfigSchema(inline, []);
+    const [config, setConfig] = useState<Record<string, unknown>>(inline.defaults());
+    return (
+      <div style={{ width: 360 }}>
+        <ControlPanel
+          schema={schema}
+          config={config}
+          setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
+          layout="inline"
+          align="center"
+        />
+      </div>
+    );
+  },
+};
+
+const shownIn = (suffix: string): PrefNumberUnit => ({
+  toDisplay: (v) => v,
+  fromDisplay: (v) => v,
+  suffix,
+});
+
+/** Every slider in astv's right sidebar, for sizing readouts against real ranges, steps and units. */
+const sidebarSliders = f.schema({
+  aimNoise: f.number(0).range(0, 0.6).step(0.02).label('Aim noise'),
+  transition: f.number(600).range(0, 1200).step(50).unit(shownIn('ms')).label('Transition'),
+  sweep: f.number(12).range(0, 40).step(0.5).label('Text motion'),
+  beat: f.number(1600).range(400, 6000).step(100).unit(shownIn('ms')).label('Beat'),
+  tourSeed: f.number(1).range(1, 99).step(1).label('Tour seed'),
+  hold: f.number(1200).range(0, 4000).step(10).unit(shownIn('ms')).label('Demo hold'),
+  scrollRows: f.number(3).range(1, 12).step(1).label('Lines'),
+  pad: f.number(0.5).range(0, 4).step(0.25).label('Window pad'),
+  folderPad: f.number(1).range(0, 4).step(0.1).label('Folder pad'),
+  levels: f.number(2).range(0, 6).step(1).label('Levels'),
+  glyphs: f.number(1_000_000).range(0, 2_000_000).step(2000).format('compact').label('Glyphs'),
+  names: f.number(40).range(0, 200).step(5).label('Names'),
+  labels: f.number(0).range(0, 30).step(1).label('Labels'),
+  text: f.number(100).range(50, 250).step(5).unit(shownIn('%')).label('Text'),
+  lift: f.number(0.8).range(0, 4).step(0.1).label('Lift'),
+  opacity: f.number(0.6).range(0.1, 1).step(0.05).label('Opacity'),
+  detail: f.number(300).range(20, 4000).step(20).label('Nodes'),
+  reachStep: f.number(600).range(200, 2000).step(100).unit(shownIn('ms')).label('Reach step'),
+  width: f.number(2).range(1, 24).step(0.5).unit(shownIn('px')).label('Width'),
+  minimapSize: f.number(280).range(120, 600).step(20).label('Minimap size'),
+});
+
+/** astv's sidebar sliders paired two to a row, at the narrowest width a two-up sidebar should support:
+ *  300px at compact and comfortable. Roomy needs 352px; at 300 its longest labels push readouts out of the row. */
+export const SidebarSliders: Story = {
+  render: () => {
+    const schema = resolveConfigSchema(sidebarSliders, []);
+    const [config, setConfig] = useState<Record<string, unknown>>(sidebarSliders.defaults());
+    return (
+      <div style={{ width: 300 }}>
+        <ControlPanel
+          schema={schema}
+          config={config}
+          setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
+          layout="inline"
+          align="center"
+          pack="pairs"
+        />
+      </div>
+    );
+  },
+};