@vsreact/core 0.0.9 → 0.0.11

package/dist/specialty.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The flagship-visual tier — Output-style macro pads, hardware knobs,
+// crossfader strips, and value-reactive orbs. Everything is painted
+// natively from Views, arcs, and shadows; the motion runs on the host
+// scheduler.
+import { useRef, useState } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+import { useInterval } from "./hooks";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** The centerpiece macro control: a circular 2D pad whose concentric
+    rings breathe with the values — x spreads them, y drives their
+    intensity. One drag, two parameters, instrument-grade presence. */
+export function MacroPad({ x, y, size = 220, labelX, labelY, disabled, rings = 9, animate = true, color = "#C6F135", trackColor = "#101210", onChange, onBegin, onEnd, }) {
+    const start = useRef({ x: 0, y: 0 });
+    const [phase, setPhase] = useState(0);
+    useInterval(() => setPhase((p) => (p + 1) % 1000), animate && !disabled ? 50 : null);
+    const cx = clamp01(x);
+    const cy = clamp01(y);
+    const thumb = 12;
+    const tx = cx * (size - thumb);
+    const ty = (1 - cy) * (size - thumb);
+    const ringViews = [];
+    for (let i = 0; i < rings; i++) {
+        const t = (i + 1) / rings;
+        // x spreads the rings outward; the phase makes them breathe gently.
+        const spread = 0.3 + 0.7 * Math.pow(t, 1.6 - cx * 1.2);
+        const breathe = 1 + 0.02 * Math.sin(phase / 6 + i * 0.9);
+        const ringSize = Math.min(size - 2, size * spread * breathe);
+        // y drives intensity; outer rings fade.
+        const opacity = clamp01((0.12 + 0.5 * cy) * (1.15 - t) * (0.8 + 0.2 * Math.sin(phase / 9 + i)));
+        ringViews.push(_jsx(View, { className: "absolute rounded-full border", style: {
+                width: ringSize,
+                height: ringSize,
+                left: (size - ringSize) / 2,
+                top: (size - ringSize) / 2,
+                borderColor: color,
+                opacity,
+            } }, i));
+    }
+    return (_jsxs(View, { className: `relative rounded-full overflow-hidden border ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width: size, height: size, backgroundColor: trackColor, borderColor: "#00000066" }, onDragStart: disabled
+            ? undefined
+            : () => {
+                start.current = { x: cx, y: cy };
+                onBegin?.();
+            }, onDrag: disabled
+            ? undefined
+            : (e) => onChange(clamp01(start.current.x + e.dx / size), clamp01(start.current.y - e.dy / size)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled ? undefined : () => onChange(0.5, 0.5), children: [ringViews, _jsx(View, { className: "absolute rounded-full", style: {
+                    width: thumb,
+                    height: thumb,
+                    left: tx,
+                    top: ty,
+                    backgroundColor: color,
+                    shadowColor: color,
+                    shadowRadius: 10,
+                } }), labelY !== undefined ? (_jsx(Text, { className: "absolute text-[9] font-bold tracking-widest", style: { left: 10, top: size / 2 - 6, color, opacity: 0.75 }, children: labelY })) : null, labelX !== undefined ? (_jsx(Text, { className: "absolute text-[9] font-bold tracking-widest", style: { bottom: 10, left: size / 2 - 24, color, opacity: 0.75 }, children: labelX })) : null] }));
+}
+/** A MacroPad driving two host parameters — labels default to their
+    names. */
+export function ParamMacroPad({ paramX, paramY, labelX, labelY, ...rest }) {
+    const px = useParameter(paramX);
+    const py = useParameter(paramY);
+    return (_jsx(MacroPad, { x: px.value, y: py.value, labelX: labelX ?? px.name.toUpperCase(), labelY: labelY ?? py.name.toUpperCase(), onChange: (nx, ny) => {
+            px.set(nx);
+            py.set(ny);
+        }, onBegin: () => {
+            px.begin();
+            py.begin();
+        }, onEnd: () => {
+            px.end();
+            py.end();
+        }, ...rest }));
+}
+// ── HardwareKnob ───────────────────────────────────────────────────────
+const HW_START = -135;
+const HW_END = 135;
+/** The skeuomorphic knob: a dark hardware cap with a glowing pointer
+    notch at the rim and a faint tick track — the audio-ui.com look,
+    painted natively. */
+export function HardwareKnob({ value, size = 88, label, text, disabled, defaultValue, wheelSensitivity = 0.4, capColor = "#1B1B1A", pointerColor = "#C6F135", tickColor = "#FFFFFF14", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp01(value);
+    const angle = HW_START + (HW_END - HW_START) * clamped;
+    const nudge = (target) => {
+        onBegin?.();
+        onChange(clamp01(target));
+        onEnd?.();
+    };
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: `relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: {
+                    width: size,
+                    height: size,
+                    arcTrackColor: tickColor,
+                    arcStart: HW_START,
+                    arcEnd: HW_END,
+                    arcThickness: 2,
+                }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        startValue.current = clamped;
+                        onBegin?.();
+                    }, onDrag: disabled
+                    ? undefined
+                    : (e) => onChange(clamp01(startValue.current - e.dy * 0.005)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue), onWheel: disabled || wheelSensitivity === 0
+                    ? undefined
+                    : (e) => nudge(clamped + e.dy * wheelSensitivity), children: [_jsx(View, { className: "absolute rounded-full border items-center justify-center shadow-lg", style: {
+                            left: size * 0.09,
+                            top: size * 0.09,
+                            width: size * 0.82,
+                            height: size * 0.82,
+                            backgroundColor: capColor,
+                            borderColor: "#000000AA",
+                        }, children: text !== undefined ? (_jsx(Text, { className: "text-text font-bold", style: { fontSize: Math.max(10, size * 0.14) }, children: text })) : null }), _jsx(View, { className: "absolute inset-0", style: {
+                            arcColor: pointerColor,
+                            arcStart: HW_START,
+                            arcEnd: HW_END,
+                            arcValueStart: angle - 4,
+                            arcValueEnd: angle + 4,
+                            arcThickness: Math.max(4, size * 0.075),
+                        } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A HardwareKnob bound to a host parameter. */
+export function ParamHardwareKnob({ paramId, label, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(HardwareKnob, { value: param.value, text: param.text, label: label ?? param.name.toUpperCase(), defaultValue: param.defaultValue, onChange: param.set, onBegin: param.begin, onEnd: param.end, ...rest }));
+}
+/** The DRY/WET strip: a wide track with a grippy rectangular handle. */
+export function Crossfader({ value, width = 220, height = 34, labelStart = "DRY", labelEnd = "WET", disabled, trackColor = "#141614", handleColor = "#2E332C", textColor = "#6f6e66", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp01(value);
+    const handleWidth = 26;
+    const travel = width - handleWidth - 6;
+    return (_jsxs(View, { className: `relative rounded-lg border justify-center ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width, height, backgroundColor: trackColor, borderColor: "#00000066" }, onDragStart: disabled
+            ? undefined
+            : () => {
+                startValue.current = clamped;
+                onBegin?.();
+            }, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / travel)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled ? undefined : () => {
+            onBegin?.();
+            onChange(0.5);
+            onEnd?.();
+        }, children: [_jsx(Text, { className: "absolute text-[8] font-bold tracking-widest", style: { left: 7, top: height / 2 - 5, color: textColor }, children: labelStart }), _jsx(Text, { className: "absolute text-[8] font-bold tracking-widest", style: { right: 7, top: height / 2 - 5, color: textColor }, children: labelEnd }), _jsxs(View, { className: "absolute rounded-md border flex-row items-center justify-center gap-[3]", style: {
+                    left: 3 + clamped * travel,
+                    top: 3,
+                    bottom: 3,
+                    width: handleWidth,
+                    backgroundColor: handleColor,
+                    borderColor: "#00000088",
+                }, children: [_jsx(View, { className: "w-[2] h-[12] rounded-full", style: { backgroundColor: "#00000066" } }), _jsx(View, { className: "w-[2] h-[12] rounded-full", style: { backgroundColor: "#00000066" } })] })] }));
+}
+/** A Crossfader bound to a host parameter — the classic mix control. */
+export function ParamCrossfader({ paramId, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(Crossfader, { value: param.value, onChange: param.set, onBegin: param.begin, onEnd: param.end, ...rest }));
+}
+/** A value-reactive orb: a glowing core emitting echo rings — visual
+    feedback for levels, activity, or just presence. */
+export function PulseOrb({ value, size = 120, color = "#C6F135", rings = 4, animate = true, }) {
+    const [phase, setPhase] = useState(0);
+    useInterval(() => setPhase((p) => (p + 1) % 1000), animate ? 40 : null);
+    const level = clamp01(value);
+    const core = 14 + level * 12;
+    const echoes = [];
+    for (let i = 0; i < rings; i++) {
+        const t = ((phase * (1 + level * 2) + (i * 100) / rings) % 100) / 100;
+        const ringSize = core + t * (size - core - 4);
+        const opacity = clamp01((1 - t) * (0.15 + 0.6 * level));
+        echoes.push(_jsx(View, { className: "absolute rounded-full border", style: {
+                width: ringSize,
+                height: ringSize,
+                left: (size - ringSize) / 2,
+                top: (size - ringSize) / 2,
+                borderColor: color,
+                opacity,
+            } }, i));
+    }
+    return (_jsxs(View, { className: "relative", style: { width: size, height: size }, children: [echoes, _jsx(View, { className: "absolute rounded-full", style: {
+                    width: core,
+                    height: core,
+                    left: (size - core) / 2,
+                    top: (size - core) / 2,
+                    backgroundColor: color,
+                    shadowColor: color,
+                    shadowRadius: 6 + level * 14,
+                    opacity: 0.55 + 0.45 * level,
+                } })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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,40 @@ 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";
+export {
+  MacroPad,
+  ParamMacroPad,
+  HardwareKnob,
+  ParamHardwareKnob,
+  Crossfader,
+  ParamCrossfader,
+  PulseOrb,
+} from "./specialty";
+export type {
+  MacroPadProps,
+  ParamMacroPadProps,
+  HardwareKnobProps,
+  ParamHardwareKnobProps,
+  CrossfaderProps,
+  ParamCrossfaderProps,
+  PulseOrbProps,
+} from "./specialty";

package/src/controls.test.tsx

@@ -542,3 +542,234 @@ 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);
+  });
+});
+
+describe("0.0.11 — flagship visuals", () => {
+  test("MacroPad: drag maps both axes, double-click recenters, rings render", () => {
+    const { MacroPad } = require("./index");
+    const seen: Array<[number, number]> = [];
+    render(
+      <MacroPad x={0.5} y={0.5} size={200} animate={false} rings={6} onChange={(x: number, y: number) => seen.push([x, y])} />,
+    );
+
+    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: 50, dy: -50, x: 0, y: 0 } });
+    expect(seen.at(-1)?.[0]).toBeCloseTo(0.75);
+    expect(seen.at(-1)?.[1]).toBeCloseTo(0.75);
+
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toEqual([0.5, 0.5]);
+
+    // six rings + thumb: ring views carry borderColor + opacity
+    const rings = opsNamed("setProps").filter(
+      (op: any) => op[2]?.style?.borderColor === "#C6F135" && op[2]?.style?.opacity !== undefined,
+    );
+    expect(rings.length).toBeGreaterThanOrEqual(6);
+  });
+
+  test("ParamMacroPad opens and closes both gestures", () => {
+    const { ParamMacroPad } = require("./index");
+    render(<ParamMacroPad paramX="cutoff" paramY="res" animate={false} />);
+
+    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: 20, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "dragend", payload: { dx: 20, dy: 0, x: 0, y: 0 } });
+
+    expect(nativeCalls.filter((c) => c.name === "param:begin").length).toBe(2);
+    expect(nativeCalls.filter((c) => c.name === "param:end").length).toBe(2);
+    expect(nativeCalls.filter((c) => c.name === "param:set").length).toBe(2);
+  });
+
+  test("HardwareKnob: pointer notch tracks the angle; DAW gestures work", () => {
+    const { HardwareKnob } = require("./index");
+    const seen: number[] = [];
+    render(<HardwareKnob value={0.5} defaultValue={0.25} onChange={(v: number) => seen.push(v)} />);
+
+    // value 0.5 -> angle 0 -> notch arc -4..+4
+    const notch: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.arcValueStart === -4 && op[2]?.style?.arcValueEnd === 4,
+    );
+    expect(notch).toBeDefined();
+
+    const id = nodeWithListener("dblclick");
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toBe(0.25);
+
+    dispatch({ kind: "event", nodeId: id, type: "wheel", payload: { dy: 0.1 } });
+    expect(seen.at(-1)).toBeCloseTo(0.54);
+  });
+
+  test("Crossfader: horizontal drag with travel compensation, labels render", () => {
+    const { Crossfader } = require("./index");
+    const seen: number[] = [];
+    render(<Crossfader value={0.5} width={220} onChange={(v: number) => seen.push(v)} />);
+
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "DRY")).toBe(true);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "WET")).toBe(true);
+
+    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: 94, dy: 0, x: 0, y: 0 } }); // travel = 220-26-6 = 188
+    expect(seen.at(-1)).toBeCloseTo(1);
+
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toBe(0.5);
+  });
+
+  test("PulseOrb: echo rings advance with the phase", async () => {
+    const { PulseOrb } = require("./index");
+    render(<PulseOrb value={0.8} size={100} rings={3} />);
+
+    const sizesAt = () =>
+      opsNamed("setProps")
+        .filter((op: any) => op[2]?.style?.borderColor === "#C6F135")
+        .map((op: any) => op[2].style.width);
+    const before = sizesAt().length;
+    await new Promise((r) => setTimeout(r, 100));
+    expect(sizesAt().length).toBeGreaterThan(before); // new frames landed
+
+    // the core glows with the level
+    const core: any = opsNamed("setProps").find((op: any) => op[2]?.style?.shadowColor === "#C6F135");
+    expect(core).toBeDefined();
+  });
+
+  test("Toggle side labels highlight the active side; Slider barThumb renders a bar", () => {
+    const { Toggle: T2, Slider: S2 } = require("./index");
+    render(<T2 on={false} offLabel="OFF" onLabel="ON" onChange={() => {}} />);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "OFF")).toBe(true);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "ON")).toBe(true);
+
+    unmount();
+    batches.length = 0;
+    render(<S2 vertical barThumb height={100} value={0.5} onChange={() => {}} />);
+    // bar thumb: 18 wide, 5 tall at the halfway point
+    const bar: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.width === 18 && op[2]?.style?.height === 5,
+    );
+    expect(bar).toBeDefined();
+    expect(bar[2].style.top).toBeCloseTo(0.5 * 95);
+  });
+});

package/src/controls.tsx

@@ -152,6 +152,8 @@ export interface SliderProps {
   height?: number;
   /** Vertical fader — drag up for more, fill rises from the bottom. */
   vertical?: boolean;
+  /** Flat hardware-style bar thumb instead of the dot. */
+  barThumb?: boolean;
   label?: string;
   disabled?: boolean;
   /** Double-click resets to this (DAW convention). */
@@ -170,6 +172,7 @@ export function Slider({
   width = 160,
   height = 160,
   vertical,
+  barThumb,
   label,
   disabled,
   defaultValue,
@@ -223,10 +226,17 @@ export function Slider({
             className="absolute w-[4] rounded-full left-[7] bottom-0"
             style={{ height: clamped * height, backgroundColor: valueColor }}
           />
-          <View
-            className="absolute w-[12] h-[12] rounded-full left-[3]"
-            style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
-          />
+          {barThumb ? (
+            <View
+              className="absolute w-[18] h-[5] rounded-[2] left-0"
+              style={{ top: (1 - clamped) * (height - 5), backgroundColor: valueColor }}
+            />
+          ) : (
+            <View
+              className="absolute w-[12] h-[12] rounded-full left-[3]"
+              style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
+            />
+          )}
         </View>
         {label !== undefined ? (
           <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -251,10 +261,17 @@ export function Slider({
           className="absolute h-[4] rounded-full top-[7]"
           style={{ width: clamped * width, backgroundColor: valueColor }}
         />
-        <View
-          className="absolute w-[12] h-[12] rounded-full top-[3]"
-          style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
-        />
+        {barThumb ? (
+          <View
+            className="absolute w-[5] h-[18] rounded-[2] top-0"
+            style={{ left: clamped * (width - 5), backgroundColor: valueColor }}
+          />
+        ) : (
+          <View
+            className="absolute w-[12] h-[12] rounded-full top-[3]"
+            style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
+          />
+        )}
       </View>
       {label !== undefined ? (
         <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -295,6 +312,9 @@ export function ParamSlider({ paramId, label, ...rest }: ParamSliderProps) {
 export interface ToggleProps {
   on: boolean;
   label?: string;
+  /** Side captions, hardware style: <Toggle offLabel="OFF" onLabel="ON" />. */
+  offLabel?: string;
+  onLabel?: string;
   /** Track height; width is 1.8×. Default 22. */
   size?: number;
   disabled?: boolean;
@@ -308,6 +328,8 @@ export interface ToggleProps {
 export function Toggle({
   on,
   label,
+  offLabel,
+  onLabel,
   size = 22,
   disabled,
   trackColor = "#2A2F27",
@@ -322,21 +344,39 @@ export function Toggle({
 
   return (
     <View className="items-center gap-2">
-      <View
-        className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
-        style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
-        onClick={disabled ? undefined : () => onChange(!on)}
-      >
+      <View className="flex-row items-center gap-2">
+        {offLabel !== undefined ? (
+          <Text
+            className="text-[9] font-bold tracking-widest"
+            style={{ color: on ? "#6f6e66" : "#ECF2E8" }}
+          >
+            {offLabel}
+          </Text>
+        ) : null}
         <View
-          className="absolute rounded-full"
-          style={{
-            width: thumb,
-            height: thumb,
-            top: 3,
-            left: 3 + clamp01(t) * travel,
-            backgroundColor: thumbColor,
-          }}
-        />
+          className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
+          style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
+          onClick={disabled ? undefined : () => onChange(!on)}
+        >
+          <View
+            className="absolute rounded-full"
+            style={{
+              width: thumb,
+              height: thumb,
+              top: 3,
+              left: 3 + clamp01(t) * travel,
+              backgroundColor: thumbColor,
+            }}
+          />
+        </View>
+        {onLabel !== undefined ? (
+          <Text
+            className="text-[9] font-bold tracking-widest"
+            style={{ color: on ? "#ECF2E8" : "#6f6e66" }}
+          >
+            {onLabel}
+          </Text>
+        ) : null}
       </View>
       {label !== undefined ? (
         <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -592,8 +632,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 +681,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}