@weasel-js/labkit 1.2.0 → 1.3.0-pre.0

package/src/config/fromConfigField.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest';
+import type { ConfigField } from '../controls/types';
+import { fromConfigFields } from './fromConfigField';
+import { isLeafVisible } from './visible';
+
+const leaf = (fields: ConfigField[], k: string) =>
+  fromConfigFields(fields).group.children[k] as unknown as Record<string, unknown>;
+
+describe('fromConfigFields', () => {
+  it('maps every ConfigField type to its PrefLeaf kind', () => {
+    expect(
+      leaf([{ type: 'slider', key: 'a', label: 'A', default: 1, min: 0, max: 2 }], 'a'),
+    ).toMatchObject({
+      kind: 'number',
+      control: 'slider',
+      min: 0,
+      max: 2,
+      default: 1,
+      name: 'A',
+    });
+    expect(leaf([{ type: 'number', key: 'b', label: 'B', default: 1 }], 'b')).toMatchObject({
+      kind: 'number',
+      control: 'input',
+    });
+    expect(leaf([{ type: 'checkbox', key: 'c', label: 'C', default: true }], 'c')).toMatchObject({
+      kind: 'boolean',
+      control: 'checkbox',
+    });
+    expect(
+      leaf(
+        [
+          {
+            type: 'select',
+            key: 'd',
+            label: 'D',
+            default: 'x',
+            options: [{ value: 'x', label: 'X' }],
+          },
+        ],
+        'd',
+      ),
+    ).toMatchObject({ kind: 'enum', options: [{ value: 'x', label: 'X' }] });
+    expect(leaf([{ type: 'text', key: 'e', label: 'E', default: '' }], 'e')).toMatchObject({
+      kind: 'string',
+    });
+    expect(leaf([{ type: 'color', key: 'g', label: 'G', default: '#fff' }], 'g')).toMatchObject({
+      kind: 'color',
+    });
+  });
+
+  it('gives every leaf the description PrefBase requires', () => {
+    expect(leaf([{ type: 'checkbox', key: 'c', label: 'C', default: true }], 'c').description).toBe(
+      '',
+    );
+  });
+
+  it('carries the text debounce through as a labkit extra', () => {
+    expect(
+      leaf([{ type: 'text', key: 'e', label: 'E', default: '', debounceMs: 0 }], 'e').debounceMs,
+    ).toBe(0);
+  });
+
+  it('drops absent optional annotations rather than settling them undefined', () => {
+    expect('min' in leaf([{ type: 'number', key: 'b', label: 'B', default: 1 }], 'b')).toBe(false);
+  });
+
+  it('carries an unrecognized type through as its kind', () => {
+    const odd = { type: 'vector2', key: 'v', label: 'V', default: 0 } as unknown as ConfigField;
+    expect(leaf([odd], 'v').kind).toBe('vector2');
+  });
+
+  it('preserves declaration order', () => {
+    const r = fromConfigFields([
+      { type: 'checkbox', key: 'z', label: 'Z', default: true },
+      { type: 'checkbox', key: 'a', label: 'A', default: true },
+    ]);
+    expect(Object.keys(r.group.children)).toEqual(['z', 'a']);
+  });
+});
+
+describe('isLeafVisible', () => {
+  it('is true for a leaf with no predicate', () => {
+    const r = fromConfigFields([{ type: 'checkbox', key: 'a', label: 'A', default: true }]);
+    expect(isLeafVisible(r, 'a', {})).toBe(true);
+  });
+
+  it('honors a hidden leaf unless asked to show hidden', () => {
+    const r = fromConfigFields([{ type: 'checkbox', key: 'a', label: 'A', default: true }]);
+    (r.group.children.a as unknown as Record<string, unknown>).hidden = true;
+    expect(isLeafVisible(r, 'a', {})).toBe(false);
+    expect(isLeafVisible(r, 'a', {}, true)).toBe(true);
+  });
+});

package/src/config/fromConfigField.ts

@@ -0,0 +1,74 @@
+import type { PrefLeaf } from '@weasel-js/ui';
+import type { ConfigField } from '../controls/types';
+import type { LeafPatch, ResolvedConfig } from './types';
+
+/** One `ConfigField` as the `Pref*` vocabulary spells it. The two describe the
+ *  same thing; `ConfigField` just keys on the control where `PrefLeaf`
+ *  separates the value's kind from how it is presented. */
+function toLeaf(field: ConfigField): LeafPatch {
+  const base = { name: field.label, description: '' };
+  switch (field.type) {
+    case 'slider':
+      return {
+        ...base,
+        kind: 'number',
+        control: 'slider',
+        min: field.min,
+        max: field.max,
+        step: field.step,
+      };
+    case 'number':
+      return {
+        ...base,
+        kind: 'number',
+        control: 'input',
+        min: field.min,
+        max: field.max,
+        step: field.step,
+      };
+    case 'checkbox':
+      return { ...base, kind: 'boolean', control: 'checkbox' };
+    case 'select':
+      return { ...base, kind: 'enum', options: field.options };
+    case 'text':
+      return {
+        ...base,
+        kind: 'string',
+        placeholder: field.placeholder,
+        maxLength: field.maxLength,
+        debounceMs: field.debounceMs,
+      };
+    case 'color':
+      return { ...base, kind: 'color' };
+    default:
+      // A schema can arrive from outside TypeScript. Carry the kind through
+      // so a lab-supplied renderer can still claim it.
+      return { ...base, kind: (field as ConfigField).type };
+  }
+}
+
+/**
+ * Adapt a legacy `configSchema(): ConfigField[]` into the resolved shape, so
+ * both instrument paths reach one renderer.
+ *
+ * Rules do not run here: a hand-written `ConfigField` already states its label
+ * and control, which is everything the rule chain would have inferred.
+ */
+export function fromConfigFields(fields: readonly ConfigField[]): ResolvedConfig {
+  const children: Record<string, PrefLeaf> = {};
+  for (const field of fields) {
+    const patch = toLeaf(field);
+    for (const key of Object.keys(patch)) {
+      if ((patch as Record<string, unknown>)[key] === undefined) {
+        delete (patch as Record<string, unknown>)[key];
+      }
+    }
+    children[field.key] = { ...patch, default: field.default } as PrefLeaf;
+  }
+  return {
+    group: { name: '', children },
+    sections: [],
+    showIf: new Map(),
+    renderers: {},
+  };
+}

package/src/config/index.ts

@@ -0,0 +1,22 @@
+export { f } from './builder';
+export { fromConfigFields } from './fromConfigField';
+export { resolveConfigSchema } from './resolve';
+export { applyRules, builtinRules, titleCase } from './rules';
+export type {
+  Annotations,
+  ConfigNode,
+  ConfigOf,
+  ConfigOption,
+  ConfigRule,
+  ConfigRuleContext,
+  ConfigSchema,
+  ControlRenderer,
+  InferConfig,
+  LeafPatch,
+  NodeOptions,
+  NodeValue,
+  ResolvedConfig,
+  SectionSpec,
+} from './types';
+export { useConfigSchema } from './useConfigSchema';
+export { isLeafVisible } from './visible';

package/src/config/resolve.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from 'vitest';
+import { f } from './builder';
+import { resolveConfigSchema } from './resolve';
+import { titleCase } from './rules';
+import type { ConfigRule } from './types';
+
+const leafAt = (r: ReturnType<typeof resolveConfigSchema>, k: string) =>
+  r.group.children[k] as unknown as Record<string, unknown>;
+
+describe('titleCase', () => {
+  it('splits camelCase without shattering acronyms', () => {
+    expect(titleCase('cellSize')).toBe('Cell size');
+    expect(titleCase('showGrid')).toBe('Show grid');
+    expect(titleCase('useHDR')).toBe('Use hdr');
+    expect(titleCase('seed')).toBe('Seed');
+  });
+});
+
+describe('resolveConfigSchema', () => {
+  it('titleCases a missing label', () => {
+    const r = resolveConfigSchema(f.schema({ cellSize: f.number(20) }), []);
+    expect(leafAt(r, 'cellSize').name).toBe('Cell size');
+  });
+
+  it('an explicit label beats the built-in rule', () => {
+    const r = resolveConfigSchema(f.schema({ cellSize: f.number(20).label('Grid spacing') }), []);
+    expect(leafAt(r, 'cellSize').name).toBe('Grid spacing');
+  });
+
+  it('carries the default through', () => {
+    const r = resolveConfigSchema(f.schema({ cellSize: f.number(20) }), []);
+    expect(leafAt(r, 'cellSize').default).toBe(20);
+  });
+
+  it('picks a slider when a number has both bounds', () => {
+    const r = resolveConfigSchema(f.schema({ a: f.number(1).range(0, 10), b: f.number(1) }), []);
+    expect(leafAt(r, 'a').control).toBe('slider');
+    expect(leafAt(r, 'b').control).toBeUndefined();
+  });
+
+  it('an explicit .input() beats the slider rule', () => {
+    const r = resolveConfigSchema(f.schema({ a: f.number(1).range(0, 10).input() }), []);
+    expect(leafAt(r, 'a').control).toBe('input');
+  });
+
+  it('infers kind from typeof for an f.value leaf', () => {
+    const r = resolveConfigSchema(
+      f.schema({ on: f.value(true), n: f.value(2), s: f.value('x') }),
+      [],
+    );
+    expect(leafAt(r, 'on').kind).toBe('boolean');
+    expect(leafAt(r, 'n').kind).toBe('number');
+    expect(leafAt(r, 's').kind).toBe('string');
+  });
+
+  it('a consumer rule claims an f.value kind before the built-in', () => {
+    const colorByName: ConfigRule = (ctx) =>
+      ctx.key.endsWith('Color') ? { kind: 'color' } : null;
+    const r = resolveConfigSchema(f.schema({ tintColor: f.value('#fff') }), [colorByName]);
+    expect(leafAt(r, 'tintColor').kind).toBe('color');
+  });
+
+  it('a consumer rule cannot overwrite a kind the factory settled', () => {
+    const forceColor: ConfigRule = () => ({ kind: 'color' });
+    const r = resolveConfigSchema(f.schema({ a: f.string('#fff') }), [forceColor]);
+    expect(leafAt(r, 'a').kind).toBe('string');
+  });
+
+  it('a consumer rule cannot overwrite an explicit annotation', () => {
+    const forceLabel: ConfigRule = () => ({ name: 'Forced' });
+    const r = resolveConfigSchema(f.schema({ a: f.number(1).label('Mine') }), [forceLabel]);
+    expect(leafAt(r, 'a').name).toBe('Mine');
+  });
+
+  it('an earlier consumer rule beats a later one', () => {
+    const first: ConfigRule = () => ({ name: 'First' });
+    const second: ConfigRule = () => ({ name: 'Second' });
+    const r = resolveConfigSchema(f.schema({ a: f.number(1) }), [first, second]);
+    expect(leafAt(r, 'a').name).toBe('First');
+  });
+
+  it('collects sections in first-appearance order', () => {
+    const r = resolveConfigSchema(
+      f.schema({
+        b: f.number(1).section('Two'),
+        a: f.number(1).section('One'),
+        c: f.number(1).section('Two'),
+      }),
+      [],
+    );
+    expect(r.sections).toEqual([
+      { label: 'Two', paths: ['b', 'c'] },
+      { label: 'One', paths: ['a'] },
+    ]);
+  });
+
+  it('collects showIf and node renderers by path', () => {
+    const r = resolveConfigSchema(
+      f.schema({
+        showGrid: f.boolean(true),
+        seed: f.value(0).showIf((c) => c.showGrid === true),
+        custom: f.number(1).render(() => null),
+      }),
+      [],
+    );
+    expect(r.showIf.get('seed')?.({ showGrid: false })).toBe(false);
+    expect(r.renderers.custom).toBeTypeOf('function');
+    expect(r.renderers.seed).toBeUndefined();
+  });
+
+  it('every leaf gets a description, since PrefBase requires one', () => {
+    const r = resolveConfigSchema(f.schema({ a: f.number(1) }), []);
+    expect(leafAt(r, 'a').description).toBe('');
+  });
+
+  it('preserves declaration order', () => {
+    const r = resolveConfigSchema(f.schema({ z: f.number(1), a: f.number(1) }), []);
+    expect(Object.keys(r.group.children)).toEqual(['z', 'a']);
+  });
+});

package/src/config/resolve.ts

@@ -0,0 +1,67 @@
+import type { PrefGroup, PrefLeaf } from '@weasel-js/ui';
+import { applyRules, builtinRules } from './rules';
+import type {
+  ConfigRule,
+  ConfigSchema,
+  ControlRenderer,
+  LeafPatch,
+  ResolvedConfig,
+  SectionSpec,
+} from './types';
+
+/** Drop keys whose value is undefined, so an unset annotation stays a gap the
+ *  rule chain can fill rather than a settled `undefined`. */
+function defined(annotations: Record<string, unknown>): LeafPatch {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(annotations)) if (v !== undefined) out[k] = v;
+  return out as LeafPatch;
+}
+
+/**
+ * Resolve a schema into the vocabulary weasel-ui renders, running each leaf
+ * through the consumer's rules and then labkit's own.
+ *
+ * The group is flat — every leaf is a direct child — so a leaf's path is its
+ * config key and both `ControlPanel` and `PrefsForm` address it identically.
+ */
+export function resolveConfigSchema<TC>(
+  schema: ConfigSchema<TC>,
+  rules: readonly ConfigRule[] = [],
+): ResolvedConfig {
+  const children: Record<string, PrefLeaf> = {};
+  const sectionOrder: string[] = [];
+  const sectionPaths = new Map<string, string[]>();
+  const showIf = new Map<string, (config: Record<string, unknown>) => boolean>();
+  const renderers: Record<string, ControlRenderer> = {};
+
+  const chain = [...rules, ...builtinRules];
+
+  for (const [key, node] of Object.entries(schema.nodes)) {
+    const seed: LeafPatch = defined({
+      ...node.annotations,
+      ...(node.kind === null ? {} : { kind: node.kind }),
+    });
+
+    const patch = applyRules(seed, { key, path: key, default: node.default }, chain);
+    children[key] = { ...patch, default: node.default } as PrefLeaf;
+
+    const { section, showIf: predicate, render } = node.options;
+    if (section !== undefined) {
+      if (!sectionPaths.has(section)) {
+        sectionOrder.push(section);
+        sectionPaths.set(section, []);
+      }
+      sectionPaths.get(section)?.push(key);
+    }
+    if (predicate) showIf.set(key, predicate);
+    if (render) renderers[key] = render;
+  }
+
+  const group: PrefGroup = { name: '', children };
+  const sections: SectionSpec[] = sectionOrder.map((label) => ({
+    label,
+    paths: sectionPaths.get(label) ?? [],
+  }));
+
+  return { group, sections, showIf, renderers };
+}

package/src/config/rules.ts

@@ -0,0 +1,68 @@
+import type { ConfigRule, ConfigRuleContext, LeafPatch } from './types';
+
+/** `cellSize` -> `Cell size`. Splits camelCase without shattering acronyms. */
+export function titleCase(key: string): string {
+  const words = key
+    .replace(/[_-]+/g, ' ')
+    .split(/(?<=[a-z0-9])(?=[A-Z])/)
+    .join(' ')
+    .trim()
+    .toLowerCase();
+  return words.length === 0 ? words : words[0].toUpperCase() + words.slice(1);
+}
+
+/** An `f.value` leaf takes its kind from the shape of its default. */
+const kindFromValue: ConfigRule = (ctx) => {
+  const t = typeof ctx.default;
+  if (t === 'boolean' || t === 'number' || t === 'string') return { kind: t };
+  return null;
+};
+
+const labelFromKey: ConfigRule = (ctx) => ({ name: titleCase(ctx.key) });
+
+/** A number bounded on both sides is a slider; one bound or none is an input. */
+const sliderWhenBounded: ConfigRule = (ctx) => {
+  if (ctx.leaf.kind !== 'number') return null;
+  const bounded = ctx.leaf.min !== undefined && ctx.leaf.max !== undefined;
+  return bounded ? { control: 'slider' } : null;
+};
+
+/** `PrefBase.description` is required, so every leaf must end up with one. */
+const descriptionDefault: ConfigRule = () => ({ description: '' });
+
+/**
+ * labkit's own inference, expressed in the same vocabulary a consumer
+ * extends. Runs after the consumer's rules, so a lab always wins.
+ *
+ * If one of these ever needs something a `ConfigRule` cannot express, the
+ * seam is too weak — that is the point of writing them this way.
+ */
+export const builtinRules: readonly ConfigRule[] = [
+  kindFromValue,
+  labelFromKey,
+  sliderWhenBounded,
+  descriptionDefault,
+];
+
+/**
+ * Fold a rule chain into one leaf patch. Gap-filling: a property already
+ * settled is never overwritten, so the accumulator seeded with the author's
+ * annotations beats every rule, and earlier rules beat later ones.
+ */
+export function applyRules(
+  seed: LeafPatch,
+  ctx: Omit<ConfigRuleContext, 'leaf'>,
+  rules: readonly ConfigRule[],
+): LeafPatch {
+  const acc: LeafPatch = { ...seed };
+  for (const rule of rules) {
+    const patch = rule({ ...ctx, leaf: acc });
+    if (patch === null) continue;
+    for (const [k, v] of Object.entries(patch)) {
+      if (v !== undefined && acc[k as keyof LeafPatch] === undefined) {
+        (acc as Record<string, unknown>)[k] = v;
+      }
+    }
+  }
+  return acc;
+}

package/src/config/types.ts

@@ -0,0 +1,108 @@
+import type { PrefGroup, PrefLeaf, PrefRenderer } from '@weasel-js/ui';
+
+/**
+ * Renders the control cell for one config leaf. Identical to weasel-ui's
+ * `PrefRenderer` on purpose — aliased rather than redeclared so the two
+ * cannot drift.
+ */
+export type ControlRenderer = PrefRenderer;
+
+/** One labeled choice in an `enum` leaf. */
+export interface ConfigOption {
+  value: string;
+  label: string;
+}
+
+/** Everything a leaf can carry beyond its kind and default. A flat union of
+ *  every `Pref*` leaf's extras, plus labkit's own `debounceMs`. */
+export interface Annotations {
+  name?: string;
+  description?: string;
+  hidden?: boolean;
+  block?: boolean;
+  pair?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  control?: string;
+  options?: readonly ConfigOption[];
+  placeholder?: string;
+  maxLength?: number;
+  /** Milliseconds to debounce a string leaf's live writes. Default 150. */
+  debounceMs?: number;
+}
+
+/** What a rule contributes. `kind` is honored only while it is still unset,
+ *  which is what makes `f.value` claimable and a kinded factory final. */
+export type LeafPatch = Annotations & { kind?: string };
+
+/** What a rule is given for the leaf it is deciding about. */
+export interface ConfigRuleContext {
+  /** The config key this leaf writes. */
+  key: string;
+  /** Dotted path within the schema. Equal to `key` while schemas are flat. */
+  path: string;
+  /** The leaf's default value. A rule may read it but never change it. */
+  default: unknown;
+  /** What earlier rules and the author's own annotations have settled. */
+  leaf: Readonly<LeafPatch>;
+}
+
+/**
+ * Decides part of how a leaf is presented. Returns a patch, or null to
+ * abstain. Merging is gap-filling: a property already settled is never
+ * overwritten, so the author's annotations beat every rule and a consumer's
+ * rules beat labkit's built-ins.
+ */
+export type ConfigRule = (ctx: ConfigRuleContext) => LeafPatch | null;
+
+/** A presentational bucket of leaves, rendered under one heading. */
+export interface SectionSpec {
+  label: string;
+  paths: readonly string[];
+}
+
+/** A schema resolved against a set of rules: the vocabulary weasel-ui renders,
+ *  plus the three things labkit keeps on the side because `PrefLeaf` has no
+ *  field for them. */
+export interface ResolvedConfig {
+  /** Flat: every leaf is a direct child, so a leaf's path is its config key. */
+  group: PrefGroup;
+  sections: readonly SectionSpec[];
+  showIf: ReadonlyMap<string, (config: Record<string, unknown>) => boolean>;
+  /** Node-level `.render` overrides, keyed by path. */
+  renderers: Readonly<Record<string, ControlRenderer>>;
+}
+
+/** Per-node extras that do not belong on a `PrefLeaf`. */
+export interface NodeOptions {
+  section?: string;
+  showIf?: (config: Record<string, unknown>) => boolean;
+  render?: ControlRenderer;
+  validate?: (leaf: PrefLeaf) => string[];
+}
+
+/** The builder's leaf: a kind (or null, to be decided by rules), a default,
+ *  an annotation bag, and the extras above. */
+export interface ConfigNode<T = unknown> {
+  readonly kind: string | null;
+  readonly default: T;
+  readonly annotations: Readonly<Annotations>;
+  readonly options: Readonly<NodeOptions>;
+}
+
+/** The value type a node produces. */
+export type NodeValue<N> = N extends ConfigNode<infer T> ? T : never;
+
+/** The config type a builder shape produces. */
+export type InferConfig<S> = { [K in keyof S]: NodeValue<S[K]> };
+
+/** An instrument's config, declared once. */
+export interface ConfigSchema<TC> {
+  readonly nodes: Readonly<Record<string, ConfigNode>>;
+  /** The starting config — what `defaultConfig()` would have returned. */
+  defaults(): TC;
+}
+
+/** The config type behind a schema: `ConfigOf<typeof sceneConfig>`. */
+export type ConfigOf<S> = S extends ConfigSchema<infer TC> ? TC : never;

package/src/config/useConfigSchema.ts

@@ -0,0 +1,30 @@
+import { useContext, useMemo } from 'react';
+import type { Instrument } from '../instrument/types';
+import { LabContext } from '../lab/LabContext';
+import { fromConfigFields } from './fromConfigField';
+import { resolveConfigSchema } from './resolve';
+import type { ResolvedConfig } from './types';
+
+const NO_RULES: readonly [] = [];
+
+/**
+ * An instrument's controls, resolved against the surrounding lab's rules.
+ *
+ * Resolution cannot happen in `defineInstrument` — rules are lab-scoped and
+ * that runs at module load — so it happens here, at render. Both instrument
+ * paths land in the same shape, so callers never branch on which was used.
+ */
+export function useConfigSchema(
+  // biome-ignore lint/suspicious/noExplicitAny: instruments are stored contravariantly; see InstrumentList
+  instrument: Instrument<any, any, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): ResolvedConfig {
+  const lab = useContext(LabContext);
+  const rules = lab?.configRules ?? NO_RULES;
+  return useMemo(
+    () =>
+      instrument.config
+        ? resolveConfigSchema(instrument.config, rules)
+        : fromConfigFields(instrument.configSchema?.() ?? []),
+    [instrument, rules],
+  );
+}

package/src/config/visible.ts

@@ -0,0 +1,20 @@
+import type { ResolvedConfig } from './types';
+
+/**
+ * Whether a leaf's row should be drawn right now.
+ *
+ * `hidden` is the leaf's own static flag; `showIf` is the schema's predicate
+ * over the live config. Both are presentational — a hidden leaf keeps its
+ * value and the instrument still reads it.
+ */
+export function isLeafVisible(
+  resolved: ResolvedConfig,
+  path: string,
+  config: Record<string, unknown>,
+  showHidden = false,
+): boolean {
+  const leaf = resolved.group.children[path];
+  if (leaf && 'hidden' in leaf && leaf.hidden === true && !showHidden) return false;
+  const predicate = resolved.showIf.get(path);
+  return predicate ? predicate(config) : true;
+}

package/src/controls/ControlPanel.less

@@ -1,61 +1,7 @@
+// The panel is a `<PropertyList>` now, so the rows carry their own styling
+// 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.
 .lk-control-panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wzl-space-sm);
-  padding: var(--wzl-space-sm);
-}
-
-.lk-control-row {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wzl-space-xs);
-}
-
-.lk-control-row--inline {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--wzl-space-sm);
-}
-
-.lk-control-label {
-  font-size: var(--wzl-font-size-sm);
-  color: var(--wzl-fg);
-}
-
-.lk-control-input {
-  width: 100%;
-  background: var(--wzl-surface-raised);
-  color: var(--wzl-fg);
-  border: 1px solid var(--wzl-border);
-  border-radius: 4px;
-  padding: 2px 6px;
-}
-
-.lk-control-input--range {
   padding: 0;
-  border: none;
-}
-
-.lk-control-input--checkbox {
-  width: auto;
-}
-
-.lk-control-input--color {
-  width: 40px;
-  height: 24px;
-  padding: 0;
-}
-
-.lk-control-slider-value {
-  font-size: var(--wzl-font-size-sm);
-  font-variant-numeric: tabular-nums;
-  color: var(--wzl-fg-muted);
-  min-width: 3ch;
-  text-align: right;
-}
-
-.lk-control-slider-row {
-  display: flex;
-  align-items: center;
-  gap: var(--wzl-space-sm);
 }