@vsreact/core 0.0.9 → 0.0.10

package/dist/components.d.ts

@@ -8,3 +8,7 @@ export { Button } from "./button";
 export type { ButtonProps } from "./button";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";
+export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
+export type { NumberBoxProps, CheckboxProps, RadioGroupProps, ParamNumberBoxProps, ParamCheckboxProps, ParamRadioGroupProps, } from "./fields";
+export { ProgressBar, Spinner } from "./feedback";
+export type { ProgressBarProps, SpinnerProps } from "./feedback";

package/dist/components.js

@@ -10,3 +10,5 @@ export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export { Bars, Waveform, useRollingBuffer, pushRolling } from "./visualizers";
 export { Button } from "./button";
 export { Tooltip, Modal } from "./popover";
+export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
+export { ProgressBar, Spinner } from "./feedback";

package/dist/controls.d.ts

@@ -148,8 +148,9 @@ export interface GenericEditorProps {
     trackColor?: string;
     valueColor?: string;
 }
-/** The zero-effort editor: one knob per APVTS parameter, laid out in
-    rows. `render(<GenericEditor />)` is a complete, working plugin UI. */
+/** The zero-effort editor: one knob per APVTS parameter with a live
+    value label and name under each, laid out in rows.
+    `render(<GenericEditor />)` is a complete, working plugin UI. */
 export declare function GenericEditor({ columns, size, trackColor, valueColor }: GenericEditorProps): import("react").JSX.Element;
 export interface SelectProps {
     options: string[];

package/dist/controls.js

@@ -152,14 +152,20 @@ export function ParamSegmented({ paramId, options, label, ...rest }) {
             param.end();
         }, ...rest }));
 }
-/** The zero-effort editor: one knob per APVTS parameter, laid out in
-    rows. `render(<GenericEditor />)` is a complete, working plugin UI. */
+/** One GenericEditor cell: knob + live value label + name. */
+function GenericEditorKnob({ paramId, size, trackColor, valueColor, }) {
+    const param = useParameter(paramId);
+    return (_jsxs(View, { className: "items-center gap-1", children: [_jsx(Knob, { value: param.value, size: size, defaultValue: param.defaultValue, trackColor: trackColor, valueColor: valueColor, onChange: param.set, onBegin: param.begin, onEnd: param.end }), _jsx(Text, { className: "text-text text-[11] font-bold", children: param.text }), _jsx(Text, { className: "text-faint text-[9] font-bold tracking-widest", children: param.name.toUpperCase() })] }));
+}
+/** The zero-effort editor: one knob per APVTS parameter with a live
+    value label and name under each, laid out in rows.
+    `render(<GenericEditor />)` is a complete, working plugin UI. */
 export function GenericEditor({ columns = 4, size = 72, trackColor, valueColor }) {
     const params = useParameterList();
     const rows = [];
     for (let i = 0; i < params.length; i += Math.max(1, columns))
         rows.push(params.slice(i, i + Math.max(1, columns)));
-    return (_jsx(View, { className: "flex-1 flex-col items-center justify-center gap-6 p-4", children: rows.map((row, index) => (_jsx(View, { className: "flex-row gap-7", children: row.map((param) => (_jsx(ParamKnob, { paramId: param.id, size: size, trackColor: trackColor, valueColor: valueColor }, param.id))) }, index))) }));
+    return (_jsx(View, { className: "flex-1 flex-col items-center justify-center gap-6 p-4", children: rows.map((row, index) => (_jsx(View, { className: "flex-row gap-7", children: row.map((param) => (_jsx(GenericEditorKnob, { paramId: param.id, size: size, trackColor: trackColor, valueColor: valueColor }, param.id))) }, index))) }));
 }
 const SELECT_ROW_HEIGHT = 30;
 /** A dropdown: the menu renders in the overlay layer, positioned under

package/dist/feedback.d.ts

@@ -0,0 +1,24 @@
+export interface ProgressBarProps {
+    /** 0..1. */
+    value: number;
+    width?: number;
+    height?: number;
+    /** Renders "42%" alongside the bar. Default false. */
+    showPercent?: boolean;
+    trackColor?: string;
+    color?: string;
+    label?: string;
+}
+/** A determinate progress bar — downloads, renders, analysis passes. */
+export declare function ProgressBar({ value, width, height, showPercent, trackColor, color, label, }: ProgressBarProps): import("react").JSX.Element;
+export interface SpinnerProps {
+    /** Diameter. Default 28. */
+    size?: number;
+    thickness?: number;
+    color?: string;
+    trackColor?: string;
+    /** Degrees per 16ms tick. Default 9 (~ one turn / 0.64s). */
+    speed?: number;
+}
+/** An indeterminate spinner — a 100° arc chasing its own tail. */
+export declare function Spinner({ size, thickness, color, trackColor, speed, }: SpinnerProps): import("react").JSX.Element;

package/dist/feedback.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Feedback components — determinate progress and the indeterminate
+// spinner, both painted natively.
+import { useState } from "react";
+import { View, Text } from "./primitives";
+import { useInterval } from "./hooks";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** A determinate progress bar — downloads, renders, analysis passes. */
+export function ProgressBar({ value, width = 200, height = 8, showPercent = false, trackColor = "#2A2F27", color = "#C6F135", label, }) {
+    const level = clamp01(value);
+    const bar = (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(View, { className: "rounded-full overflow-hidden", style: { width, height, backgroundColor: trackColor }, children: _jsx(View, { className: "rounded-full", style: { width: level * width, height, backgroundColor: color } }) }), showPercent ? (_jsx(Text, { className: "text-faint text-[11] font-bold", style: { width: 34 }, children: `${Math.round(level * 100)}%` })) : null] }));
+    if (label === undefined)
+        return bar;
+    return (_jsxs(View, { className: "items-center gap-2", children: [bar, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));
+}
+/** An indeterminate spinner — a 100° arc chasing its own tail. */
+export function Spinner({ size = 28, thickness, color = "#C6F135", trackColor = "#FFFFFF14", speed = 9, }) {
+    const [angle, setAngle] = useState(0);
+    useInterval(() => setAngle((a) => (a + speed) % 360), 16);
+    return (_jsx(View, { style: {
+            width: size,
+            height: size,
+            arcTrackColor: trackColor,
+            arcColor: color,
+            arcStart: 0,
+            arcEnd: 360,
+            arcValueStart: angle,
+            arcValueEnd: angle + 100,
+            arcThickness: thickness ?? Math.max(2.5, size * 0.11),
+        } }));
+}

package/dist/fields.d.ts

@@ -0,0 +1,79 @@
+/** Snap onto the step grid without float dust. */
+export declare function snapToStep(value: number, step: number, min: number): number;
+export interface NumberBoxProps {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Value change per step; drags move ~a step per 4px. Default 1. */
+    step?: number;
+    /** Renders the value. Default: trimmed to 2 decimals. */
+    format?: (value: number) => string;
+    label?: string;
+    width?: number;
+    disabled?: boolean;
+    /** Double-click resets to this. */
+    defaultValue?: number;
+    trackColor?: string;
+    textColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** The draggable number — BPM, milliseconds, semitones. Drag vertically,
+    wheel to step, double-click to reset. */
+export declare function NumberBox({ value, min, max, step, format, label, width, disabled, defaultValue, trackColor, textColor, onChange, onBegin, onEnd, }: NumberBoxProps): import("react").JSX.Element;
+export interface ParamNumberBoxProps {
+    paramId: string;
+    label?: string;
+    width?: number;
+    /** Normalized step per wheel notch / drag unit. Default 0.01. */
+    step?: number;
+}
+/** A NumberBox over a host parameter: shows the host's formatted text,
+    drags the normalized value, double-click resets to the default. */
+export declare function ParamNumberBox({ paramId, label, width, step }: ParamNumberBoxProps): import("react").JSX.Element;
+export interface CheckboxProps {
+    checked: boolean;
+    label?: string;
+    disabled?: boolean;
+    /** Box edge length. Default 16. */
+    size?: number;
+    accentColor?: string;
+    boxColor?: string;
+    textColor?: string;
+    onChange: (checked: boolean) => void;
+}
+/** A checkbox row — settings panels, option lists. */
+export declare function Checkbox({ checked, label, disabled, size, accentColor, boxColor, textColor, onChange, }: CheckboxProps): import("react").JSX.Element;
+export interface ParamCheckboxProps {
+    paramId: string;
+    label?: string;
+    size?: number;
+    accentColor?: string;
+}
+/** A Checkbox bound to a bool-style parameter (checked = value ≥ 0.5). */
+export declare function ParamCheckbox({ paramId, label, ...rest }: ParamCheckboxProps): import("react").JSX.Element;
+export interface RadioGroupProps {
+    options: string[];
+    index: number;
+    disabled?: boolean;
+    /** Row spacing. Default 8. */
+    gap?: number;
+    accentColor?: string;
+    dotColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+    onChange: (index: number) => void;
+}
+/** Vertical exclusive options with dots — the settings-panel sibling of
+    <Segmented>. */
+export declare function RadioGroup({ options, index, disabled, gap, accentColor, dotColor, textColor, activeTextColor, onChange, }: RadioGroupProps): import("react").JSX.Element;
+export interface ParamRadioGroupProps {
+    paramId: string;
+    options: string[];
+    gap?: number;
+    accentColor?: string;
+}
+/** A RadioGroup bound to a choice-style parameter (value ↔ index, like
+    ParamSegmented). */
+export declare function ParamRadioGroup({ paramId, options, ...rest }: ParamRadioGroupProps): import("react").JSX.Element;

package/dist/fields.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Field controls — the number box, checkbox, and radio group. Settings
+// panels and fine-value entry, with the same DAW conventions as the
+// knobs: drag, wheel, double-click reset, automation-safe Param twins.
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+/** Snap onto the step grid without float dust. */
+export function snapToStep(value, step, min) {
+    const steps = Math.round((value - min) / step);
+    return Number((min + steps * step).toPrecision(12));
+}
+/** The draggable number — BPM, milliseconds, semitones. Drag vertically,
+    wheel to step, double-click to reset. */
+export function NumberBox({ value, min = 0, max = 100, step = 1, format = (v) => String(Math.round(v * 100) / 100), label, width = 84, disabled, defaultValue, trackColor = "#2A2F27", textColor = "#ECF2E8", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp(value, min, max);
+    const commit = (raw) => onChange(clamp(snapToStep(raw, step, min), min, max));
+    const nudge = (raw) => {
+        onBegin?.();
+        commit(raw);
+        onEnd?.();
+    };
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `items-center rounded-lg border px-3 py-[7] ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width, backgroundColor: trackColor, borderColor: "#00000055" }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        startValue.current = clamped;
+                        onBegin?.();
+                    }, onDrag: disabled ? undefined : (e) => commit(startValue.current - (e.dy * step) / 4), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue), onWheel: disabled ? undefined : (e) => nudge(clamped + (e.dy > 0 ? step : -step)), children: _jsx(Text, { className: "text-[13] font-bold", style: { color: textColor }, children: format(clamped) }) }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A NumberBox over a host parameter: shows the host's formatted text,
+    drags the normalized value, double-click resets to the default. */
+export function ParamNumberBox({ paramId, label, width, step = 0.01 }) {
+    const param = useParameter(paramId);
+    return (_jsx(NumberBox, { value: param.value, min: 0, max: 1, step: step, format: () => param.text, label: label ?? param.name.toUpperCase(), width: width, defaultValue: param.defaultValue, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+}
+/** A checkbox row — settings panels, option lists. */
+export function Checkbox({ checked, label, disabled, size = 16, accentColor = "#C6F135", boxColor = "#2A2F27", textColor = "#d4d4d8", onChange, }) {
+    return (_jsxs(View, { className: `flex-row items-center gap-2 ${disabled ? "opacity-40" : "cursor-pointer"}`, onClick: disabled ? undefined : () => onChange(!checked), children: [_jsx(View, { className: "items-center justify-center rounded-[4] border", style: {
+                    width: size,
+                    height: size,
+                    backgroundColor: checked ? accentColor : boxColor,
+                    borderColor: "#00000066",
+                }, children: checked ? (_jsx(Text, { className: "font-bold", style: { fontSize: size * 0.7, color: "#09090b" }, children: "\u2713" })) : null }), label !== undefined ? (_jsx(Text, { className: "text-[12]", style: { color: textColor }, children: label })) : null] }));
+}
+/** A Checkbox bound to a bool-style parameter (checked = value ≥ 0.5). */
+export function ParamCheckbox({ paramId, label, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(Checkbox, { checked: param.value >= 0.5, label: label ?? param.name, onChange: (next) => {
+            param.begin();
+            param.set(next ? 1 : 0);
+            param.end();
+        }, ...rest }));
+}
+/** Vertical exclusive options with dots — the settings-panel sibling of
+    <Segmented>. */
+export function RadioGroup({ options, index, disabled, gap = 8, accentColor = "#C6F135", dotColor = "#2A2F27", textColor = "#a1a1aa", activeTextColor = "#ECF2E8", onChange, }) {
+    const current = Math.min(options.length - 1, Math.max(0, index));
+    return (_jsx(View, { className: disabled ? "opacity-40" : "", style: { rowGap: gap }, children: options.map((option, i) => (_jsxs(View, { className: `flex-row items-center gap-2 ${disabled ? "" : "cursor-pointer"}`, onClick: disabled ? undefined : () => onChange(i), children: [_jsx(View, { className: "items-center justify-center rounded-full border", style: { width: 15, height: 15, backgroundColor: dotColor, borderColor: "#00000066" }, children: i === current ? (_jsx(View, { className: "rounded-full", style: { width: 7, height: 7, backgroundColor: accentColor } })) : null }), _jsx(Text, { className: "text-[12]", style: { color: i === current ? activeTextColor : textColor }, children: option })] }, `${option}-${i}`))) }));
+}
+/** A RadioGroup bound to a choice-style parameter (value ↔ index, like
+    ParamSegmented). */
+export function ParamRadioGroup({ paramId, options, ...rest }) {
+    const param = useParameter(paramId);
+    const count = Math.max(1, options.length);
+    const index = Math.round(param.value * (count - 1));
+    return (_jsx(RadioGroup, { options: options, index: index, onChange: (i) => {
+            param.begin();
+            param.set(count <= 1 ? 0 : i / (count - 1));
+            param.end();
+        }, ...rest }));
+}

package/dist/index.d.ts

@@ -24,4 +24,8 @@ export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKno
 export type { KnobProps, SliderProps, ToggleProps, XYPadProps, SegmentedProps, SelectProps, GenericEditorProps, ParamKnobProps, ParamSliderProps, ParamToggleProps, ParamXYPadProps, ParamSegmentedProps, ParamSelectProps, } from "./controls";
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export type { MeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
+export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
+export type { NumberBoxProps, CheckboxProps, RadioGroupProps, ParamNumberBoxProps, ParamCheckboxProps, ParamRadioGroupProps, } from "./fields";
+export { ProgressBar, Spinner } from "./feedback";
+export type { ProgressBarProps, SpinnerProps } from "./feedback";
 export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";

package/dist/index.js

@@ -16,3 +16,5 @@ export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
 export { useParameter, useParameterList } from "./parameters";
 export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, ParamSelect, dragToValue, } from "./controls";
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
+export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
+export { ProgressBar, Spinner } from "./feedback";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
   "keywords": [
     "react",

package/src/components.ts

@@ -45,3 +45,22 @@ export { Button } from "./button";
 export type { ButtonProps } from "./button";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";
+export {
+  NumberBox,
+  Checkbox,
+  RadioGroup,
+  ParamNumberBox,
+  ParamCheckbox,
+  ParamRadioGroup,
+  snapToStep,
+} from "./fields";
+export type {
+  NumberBoxProps,
+  CheckboxProps,
+  RadioGroupProps,
+  ParamNumberBoxProps,
+  ParamCheckboxProps,
+  ParamRadioGroupProps,
+} from "./fields";
+export { ProgressBar, Spinner } from "./feedback";
+export type { ProgressBarProps, SpinnerProps } from "./feedback";

package/src/controls.test.tsx

@@ -542,3 +542,125 @@ describe("0.0.7 — Button, visualizers, hooks", () => {
     expect(values.at(-1)).toBe("1->2");
   });
 });
+
+describe("0.0.10 — fields & feedback", () => {
+  test("snapToStep lands on the grid without float dust", () => {
+    const { snapToStep } = require("./index");
+    expect(snapToStep(0.3000000004, 0.1, 0)).toBe(0.3);
+    expect(snapToStep(7.4, 5, 0)).toBe(5);
+    expect(snapToStep(7.6, 5, 0)).toBe(10);
+    expect(snapToStep(3.2, 0.5, 1)).toBe(3);
+  });
+
+  test("NumberBox: drag steps, wheel steps, double-click resets, clamps", () => {
+    const { NumberBox } = require("./index");
+    const seen: number[] = [];
+    render(
+      <NumberBox value={120} min={40} max={240} step={1} defaultValue={120} onChange={(v: number) => seen.push(v)} />,
+    );
+
+    const id = nodeWithListener("drag");
+    dispatch({ kind: "event", nodeId: id, type: "dragstart", payload: { dx: 0, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 0, dy: -40, x: 0, y: 0 } });
+    expect(seen.at(-1)).toBe(130); // 40px up = +10 steps
+
+    dispatch({ kind: "event", nodeId: id, type: "wheel", payload: { dy: 0.1 } });
+    expect(seen.at(-1)).toBe(121); // wheel = one step from the controlled 120
+
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 0, dy: 9999, x: 0, y: 0 } });
+    expect(seen.at(-1)).toBe(40); // clamped at min
+
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toBe(120);
+  });
+
+  test("ParamNumberBox shows host text and writes gestures", () => {
+    paramGetResult = { value: 0.5, text: "440 Hz", name: "Freq", label: "Hz", defaultValue: 0.5 };
+    const { ParamNumberBox } = require("./index");
+    render(<ParamNumberBox paramId="freq" />);
+
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "440 Hz")).toBe(true);
+
+    const id = nodeWithListener("wheel");
+    dispatch({ kind: "event", nodeId: id, type: "wheel", payload: { dy: 0.1 } });
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args.value).toBeCloseTo(0.51);
+    expect(nativeCalls.some((c) => c.name === "param:begin")).toBe(true);
+    expect(nativeCalls.some((c) => c.name === "param:end")).toBe(true);
+  });
+
+  test("Checkbox toggles; RadioGroup selects; Param twins write gestures", () => {
+    const { Checkbox, RadioGroup } = require("./index");
+    const checks: boolean[] = [];
+    render(<Checkbox checked={false} label="Oversample" onChange={(v: boolean) => checks.push(v)} />);
+    dispatch({ kind: "event", nodeId: nodeWithListener("click"), type: "click" });
+    expect(checks).toEqual([true]);
+
+    unmount();
+    batches.length = 0;
+    const picks: number[] = [];
+    render(<RadioGroup options={["OFF", "2X", "4X"]} index={0} onChange={(i: number) => picks.push(i)} />);
+    const rows = opsNamed("setProps").filter((op: any) => op[2]?.listeners?.includes("click"));
+    expect(rows.length).toBe(3);
+    dispatch({ kind: "event", nodeId: (rows[2] as any)[1], type: "click" });
+    expect(picks).toEqual([2]);
+
+    unmount();
+    batches.length = 0;
+    nativeCalls.length = 0;
+    paramGetResult = { value: 0, text: "Off", name: "OS", label: "", defaultValue: 0 };
+    const { ParamRadioGroup } = require("./index");
+    render(<ParamRadioGroup paramId="os" options={["OFF", "2X", "4X"]} />);
+    const prows = opsNamed("setProps").filter((op: any) => op[2]?.listeners?.includes("click"));
+    dispatch({ kind: "event", nodeId: (prows[1] as any)[1], type: "click" });
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args.value).toBeCloseTo(0.5);
+  });
+
+  test("ProgressBar fill scales; Spinner animates its arc", async () => {
+    const { ProgressBar, Spinner } = require("./index");
+    render(<ProgressBar value={0.42} width={200} height={8} />);
+    const fill = opsNamed("setProps").find((op: any) => op[2]?.style?.width === 84);
+    expect(fill).toBeDefined();
+
+    unmount();
+    batches.length = 0;
+    render(<Spinner size={28} />);
+    const first: any = opsNamed("setProps").find((op: any) => op[2]?.style?.arcValueStart !== undefined);
+    expect(first).toBeDefined();
+    await new Promise((r) => setTimeout(r, 60));
+    const all = opsNamed("setProps").filter((op: any) => op[2]?.style?.arcValueStart !== undefined);
+    const angles = all.map((op: any) => op[2].style.arcValueStart);
+    expect(Math.max(...angles)).toBeGreaterThan(angles[0]); // it spins
+  });
+
+  test("GenericEditor renders a live value label under each knob", () => {
+    (globalThis as Record<string, any>).__vsreact_nativeCall = (name: string, argsJson: string) => {
+      const args = JSON.parse(argsJson);
+      nativeCalls.push({ name, args });
+      if (name === "param:list")
+        return JSON.stringify([
+          { id: "gain", name: "Gain", label: "dB", value: 0.5, text: "0.0 dB", defaultValue: 0.5 },
+          { id: "mix", name: "Mix", label: "%", value: 1, text: "100%", defaultValue: 0.5 },
+        ]);
+      if (name === "param:get") {
+        const id = args.id;
+        return JSON.stringify(
+          id === "gain"
+            ? { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB", defaultValue: 0.5 }
+            : { value: 1, text: "100%", name: "Mix", label: "%", defaultValue: 0.5 },
+        );
+      }
+      return "null";
+    };
+
+    const { GenericEditor } = require("./index");
+    render(<GenericEditor columns={2} />);
+
+    // value labels present as text nodes
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "0.0 dB")).toBe(true);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "100%")).toBe(true);
+    // names too
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "GAIN")).toBe(true);
+  });
+});

package/src/controls.tsx

@@ -592,8 +592,43 @@ export interface GenericEditorProps {
   valueColor?: string;
 }
 
-/** The zero-effort editor: one knob per APVTS parameter, laid out in
-    rows. `render(<GenericEditor />)` is a complete, working plugin UI. */
+/** One GenericEditor cell: knob + live value label + name. */
+function GenericEditorKnob({
+  paramId,
+  size,
+  trackColor,
+  valueColor,
+}: {
+  paramId: string;
+  size?: number;
+  trackColor?: string;
+  valueColor?: string;
+}) {
+  const param = useParameter(paramId);
+
+  return (
+    <View className="items-center gap-1">
+      <Knob
+        value={param.value}
+        size={size}
+        defaultValue={param.defaultValue}
+        trackColor={trackColor}
+        valueColor={valueColor}
+        onChange={param.set}
+        onBegin={param.begin}
+        onEnd={param.end}
+      />
+      <Text className="text-text text-[11] font-bold">{param.text}</Text>
+      <Text className="text-faint text-[9] font-bold tracking-widest">
+        {param.name.toUpperCase()}
+      </Text>
+    </View>
+  );
+}
+
+/** The zero-effort editor: one knob per APVTS parameter with a live
+    value label and name under each, laid out in rows.
+    `render(<GenericEditor />)` is a complete, working plugin UI. */
 export function GenericEditor({ columns = 4, size = 72, trackColor, valueColor }: GenericEditorProps) {
   const params = useParameterList();
 
@@ -606,7 +641,7 @@ export function GenericEditor({ columns = 4, size = 72, trackColor, valueColor }
       {rows.map((row, index) => (
         <View key={index} className="flex-row gap-7">
           {row.map((param) => (
-            <ParamKnob
+            <GenericEditorKnob
               key={param.id}
               paramId={param.id}
               size={size}

package/src/feedback.tsx

@@ -0,0 +1,99 @@
+// Feedback components — determinate progress and the indeterminate
+// spinner, both painted natively.
+
+import { useState } from "react";
+import { View, Text } from "./primitives";
+import { useInterval } from "./hooks";
+
+const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
+
+export interface ProgressBarProps {
+  /** 0..1. */
+  value: number;
+  width?: number;
+  height?: number;
+  /** Renders "42%" alongside the bar. Default false. */
+  showPercent?: boolean;
+  trackColor?: string;
+  color?: string;
+  label?: string;
+}
+
+/** A determinate progress bar — downloads, renders, analysis passes. */
+export function ProgressBar({
+  value,
+  width = 200,
+  height = 8,
+  showPercent = false,
+  trackColor = "#2A2F27",
+  color = "#C6F135",
+  label,
+}: ProgressBarProps) {
+  const level = clamp01(value);
+
+  const bar = (
+    <View className="flex-row items-center gap-3">
+      <View
+        className="rounded-full overflow-hidden"
+        style={{ width, height, backgroundColor: trackColor }}
+      >
+        <View
+          className="rounded-full"
+          style={{ width: level * width, height, backgroundColor: color }}
+        />
+      </View>
+      {showPercent ? (
+        <Text className="text-faint text-[11] font-bold" style={{ width: 34 }}>
+          {`${Math.round(level * 100)}%`}
+        </Text>
+      ) : null}
+    </View>
+  );
+
+  if (label === undefined) return bar;
+
+  return (
+    <View className="items-center gap-2">
+      {bar}
+      <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+    </View>
+  );
+}
+
+export interface SpinnerProps {
+  /** Diameter. Default 28. */
+  size?: number;
+  thickness?: number;
+  color?: string;
+  trackColor?: string;
+  /** Degrees per 16ms tick. Default 9 (~ one turn / 0.64s). */
+  speed?: number;
+}
+
+/** An indeterminate spinner — a 100° arc chasing its own tail. */
+export function Spinner({
+  size = 28,
+  thickness,
+  color = "#C6F135",
+  trackColor = "#FFFFFF14",
+  speed = 9,
+}: SpinnerProps) {
+  const [angle, setAngle] = useState(0);
+  useInterval(() => setAngle((a) => (a + speed) % 360), 16);
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        arcTrackColor: trackColor,
+        arcColor: color,
+        arcStart: 0,
+        arcEnd: 360,
+        arcValueStart: angle,
+        arcValueEnd: angle + 100,
+        arcThickness: thickness ?? Math.max(2.5, size * 0.11),
+      }}
+    />
+  );
+}

package/src/fields.tsx

@@ -0,0 +1,288 @@
+// Field controls — the number box, checkbox, and radio group. Settings
+// panels and fine-value entry, with the same DAW conventions as the
+// knobs: drag, wheel, double-click reset, automation-safe Param twins.
+
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+
+const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
+
+/** Snap onto the step grid without float dust. */
+export function snapToStep(value: number, step: number, min: number): number {
+  const steps = Math.round((value - min) / step);
+  return Number((min + steps * step).toPrecision(12));
+}
+
+export interface NumberBoxProps {
+  value: number;
+  min?: number;
+  max?: number;
+  /** Value change per step; drags move ~a step per 4px. Default 1. */
+  step?: number;
+  /** Renders the value. Default: trimmed to 2 decimals. */
+  format?: (value: number) => string;
+  label?: string;
+  width?: number;
+  disabled?: boolean;
+  /** Double-click resets to this. */
+  defaultValue?: number;
+  trackColor?: string;
+  textColor?: string;
+  onChange: (value: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+/** The draggable number — BPM, milliseconds, semitones. Drag vertically,
+    wheel to step, double-click to reset. */
+export function NumberBox({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  format = (v) => String(Math.round(v * 100) / 100),
+  label,
+  width = 84,
+  disabled,
+  defaultValue,
+  trackColor = "#2A2F27",
+  textColor = "#ECF2E8",
+  onChange,
+  onBegin,
+  onEnd,
+}: NumberBoxProps) {
+  const startValue = useRef(0);
+  const clamped = clamp(value, min, max);
+
+  const commit = (raw: number) => onChange(clamp(snapToStep(raw, step, min), min, max));
+
+  const nudge = (raw: number) => {
+    onBegin?.();
+    commit(raw);
+    onEnd?.();
+  };
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`items-center rounded-lg border px-3 py-[7] ${disabled ? "opacity-40" : "cursor-pointer"}`}
+        style={{ width, backgroundColor: trackColor, borderColor: "#00000055" }}
+        onDragStart={
+          disabled
+            ? undefined
+            : () => {
+                startValue.current = clamped;
+                onBegin?.();
+              }
+        }
+        onDrag={disabled ? undefined : (e) => commit(startValue.current - (e.dy * step) / 4)}
+        onDragEnd={disabled ? undefined : () => onEnd?.()}
+        onDoubleClick={
+          disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue)
+        }
+        onWheel={
+          disabled ? undefined : (e) => nudge(clamped + (e.dy > 0 ? step : -step))
+        }
+      >
+        <Text className="text-[13] font-bold" style={{ color: textColor }}>
+          {format(clamped)}
+        </Text>
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamNumberBoxProps {
+  paramId: string;
+  label?: string;
+  width?: number;
+  /** Normalized step per wheel notch / drag unit. Default 0.01. */
+  step?: number;
+}
+
+/** A NumberBox over a host parameter: shows the host's formatted text,
+    drags the normalized value, double-click resets to the default. */
+export function ParamNumberBox({ paramId, label, width, step = 0.01 }: ParamNumberBoxProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <NumberBox
+      value={param.value}
+      min={0}
+      max={1}
+      step={step}
+      format={() => param.text}
+      label={label ?? param.name.toUpperCase()}
+      width={width}
+      defaultValue={param.defaultValue}
+      onChange={param.set}
+      onBegin={param.begin}
+      onEnd={param.end}
+    />
+  );
+}
+
+export interface CheckboxProps {
+  checked: boolean;
+  label?: string;
+  disabled?: boolean;
+  /** Box edge length. Default 16. */
+  size?: number;
+  accentColor?: string;
+  boxColor?: string;
+  textColor?: string;
+  onChange: (checked: boolean) => void;
+}
+
+/** A checkbox row — settings panels, option lists. */
+export function Checkbox({
+  checked,
+  label,
+  disabled,
+  size = 16,
+  accentColor = "#C6F135",
+  boxColor = "#2A2F27",
+  textColor = "#d4d4d8",
+  onChange,
+}: CheckboxProps) {
+  return (
+    <View
+      className={`flex-row items-center gap-2 ${disabled ? "opacity-40" : "cursor-pointer"}`}
+      onClick={disabled ? undefined : () => onChange(!checked)}
+    >
+      <View
+        className="items-center justify-center rounded-[4] border"
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: checked ? accentColor : boxColor,
+          borderColor: "#00000066",
+        }}
+      >
+        {checked ? (
+          <Text className="font-bold" style={{ fontSize: size * 0.7, color: "#09090b" }}>
+            ✓
+          </Text>
+        ) : null}
+      </View>
+      {label !== undefined ? (
+        <Text className="text-[12]" style={{ color: textColor }}>
+          {label}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamCheckboxProps {
+  paramId: string;
+  label?: string;
+  size?: number;
+  accentColor?: string;
+}
+
+/** A Checkbox bound to a bool-style parameter (checked = value ≥ 0.5). */
+export function ParamCheckbox({ paramId, label, ...rest }: ParamCheckboxProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <Checkbox
+      checked={param.value >= 0.5}
+      label={label ?? param.name}
+      onChange={(next) => {
+        param.begin();
+        param.set(next ? 1 : 0);
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}
+
+export interface RadioGroupProps {
+  options: string[];
+  index: number;
+  disabled?: boolean;
+  /** Row spacing. Default 8. */
+  gap?: number;
+  accentColor?: string;
+  dotColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  onChange: (index: number) => void;
+}
+
+/** Vertical exclusive options with dots — the settings-panel sibling of
+    <Segmented>. */
+export function RadioGroup({
+  options,
+  index,
+  disabled,
+  gap = 8,
+  accentColor = "#C6F135",
+  dotColor = "#2A2F27",
+  textColor = "#a1a1aa",
+  activeTextColor = "#ECF2E8",
+  onChange,
+}: RadioGroupProps) {
+  const current = Math.min(options.length - 1, Math.max(0, index));
+
+  return (
+    <View className={disabled ? "opacity-40" : ""} style={{ rowGap: gap }}>
+      {options.map((option, i) => (
+        <View
+          key={`${option}-${i}`}
+          className={`flex-row items-center gap-2 ${disabled ? "" : "cursor-pointer"}`}
+          onClick={disabled ? undefined : () => onChange(i)}
+        >
+          <View
+            className="items-center justify-center rounded-full border"
+            style={{ width: 15, height: 15, backgroundColor: dotColor, borderColor: "#00000066" }}
+          >
+            {i === current ? (
+              <View
+                className="rounded-full"
+                style={{ width: 7, height: 7, backgroundColor: accentColor }}
+              />
+            ) : null}
+          </View>
+          <Text className="text-[12]" style={{ color: i === current ? activeTextColor : textColor }}>
+            {option}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export interface ParamRadioGroupProps {
+  paramId: string;
+  options: string[];
+  gap?: number;
+  accentColor?: string;
+}
+
+/** A RadioGroup bound to a choice-style parameter (value ↔ index, like
+    ParamSegmented). */
+export function ParamRadioGroup({ paramId, options, ...rest }: ParamRadioGroupProps) {
+  const param = useParameter(paramId);
+  const count = Math.max(1, options.length);
+  const index = Math.round(param.value * (count - 1));
+
+  return (
+    <RadioGroup
+      options={options}
+      index={index}
+      onChange={(i) => {
+        param.begin();
+        param.set(count <= 1 ? 0 : i / (count - 1));
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}

package/src/index.ts

@@ -71,4 +71,23 @@ export type {
 } from "./controls";
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export type { MeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
+export {
+  NumberBox,
+  Checkbox,
+  RadioGroup,
+  ParamNumberBox,
+  ParamCheckbox,
+  ParamRadioGroup,
+  snapToStep,
+} from "./fields";
+export type {
+  NumberBoxProps,
+  CheckboxProps,
+  RadioGroupProps,
+  ParamNumberBoxProps,
+  ParamCheckboxProps,
+  ParamRadioGroupProps,
+} from "./fields";
+export { ProgressBar, Spinner } from "./feedback";
+export type { ProgressBarProps, SpinnerProps } from "./feedback";
 export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";