@weasel-js/labkit 1.5.0 → 1.5.2

package/src/controls/AutoControls.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@weasel-js/forge';
+import { useState } from 'react';
+import { applyConfigWrite } from '../config/autoConfig';
+import { f } from '../config/builder';
+import { resolveConfigSchema } from '../config/resolve';
+import { ControlPanel } from './ControlPanel';
+
+/**
+ * The ghosting and the muted accent are CSS, and jsdom resolves neither
+ * `var()` nor `color-mix()`. This story is the only place they can be checked.
+ */
+const meta: Meta<typeof ControlPanel> = {
+  title: 'labkit/Controls/AutoControls',
+  component: ControlPanel,
+  parameters: { layout: 'padded' },
+};
+export default meta;
+
+type Story = StoryObj<typeof ControlPanel>;
+
+const schema = f.schema({
+  width: f.number(432).range(64, 1024).label('Width'),
+  gap: f
+    .number(12)
+    .range(0, 48)
+    .suffix('px')
+    .auto((c) => Math.round((c.width as number) / 24))
+    .label('Gap'),
+  cols: f.number(3).range(1, 12).label('Columns'),
+  wave: f.enum('sine', ['sine', 'square', 'triangle']).label('Wave'),
+  mode: f.enum('fit', ['fit', 'fill']).radio().label('Mode'),
+  showGrid: f.boolean(true).label('Show grid'),
+  title: f.string('My experiment').placeholder('Title…').label('Title'),
+  tint: f.color('#3a86ff').label('Tint'),
+  seed: f.number(1).range(0, 99).manual().label('Seed'),
+});
+
+const resolved = resolveConfigSchema(schema, []);
+
+/** 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[] }) {
+  const [state, setState] = useState(() => ({
+    config: schema.defaults() as Record<string, unknown>,
+    autoPaths: start,
+  }));
+  return (
+    <ControlPanel
+      schema={resolved}
+      config={state.config}
+      auto={new Set(state.autoPaths)}
+      setConfig={(path, value) =>
+        setState((prev) => applyConfigWrite(prev.config, prev.autoPaths, path, value))
+      }
+    />
+  );
+}
+
+function Pair() {
+  return (
+    <div style={{ display: 'flex', gap: 32, alignItems: 'flex-start' }}>
+      <div style={{ flex: '1 1 0', minWidth: 0 }}>
+        <h3>Pinned</h3>
+        <Panel start={[]} />
+      </div>
+      <div style={{ flex: '1 1 0', minWidth: 0 }}>
+        <h3>Auto</h3>
+        <Panel start={EVERY_AUTO} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 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 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

@@ -5,3 +5,26 @@
 .lk-control-panel {
   padding: 0;
 }
+
+// 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,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ANGLE_RADIANS, prefUnit } from '@weasel-js/core';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { PropertyRow } from '@weasel-js/ui';
 import { useState } from 'react';
 import { f } from '../config/builder';
@@ -234,3 +235,84 @@ export const Nested: Story = {
     );
   },
 };
+
+const degrees = prefUnit(ANGLE_RADIANS, 'deg', { precision: 1 });
+
+const presentation = f.schema({
+  x: f.number(120).label('X').pair('Offset'),
+  y: f.number(-40).label('Y').pair('Offset'),
+  spin: f
+    .number(Math.PI / 4)
+    .range(0, Math.PI * 2)
+    .unit(degrees)
+    .label('Rotation'),
+  nudge: f
+    .number(Math.PI / 180)
+    .input()
+    .unit(degrees)
+    .label('Nudge'),
+  tint: f.color('#3a86ffcc').alpha().label('Tint'),
+  opaque: f.color('#3a86ff').label('Grid'),
+});
+
+/** The three presentation fields a leaf can declare: `pair` puts `X` and `Y`
+ *  on one row the pair names, `unit` stores radians and edits degrees, and
+ *  `alpha` gives the swatch an opacity track and stores `#rrggbbaa`. The dump
+ *  shows what each control actually wrote. */
+export const Presentation: Story = {
+  render: () => {
+    const schema = resolveConfigSchema(presentation, []);
+    const [config, setConfig] = useState<Record<string, unknown>>(presentation.defaults());
+    return (
+      <>
+        <ControlPanel
+          schema={schema}
+          config={config}
+          setConfig={(path, value) => setConfig((prev) => withValueAtPath(prev, path, value))}
+        />
+        <pre>{JSON.stringify(config, null, 2)}</pre>
+      </>
+    );
+  },
+};
+
+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.string('**/node_modules/**').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>
+    );
+  },
+};