@vsreact/core 0.0.2 → 0.0.3

package/src/animation.ts

@@ -68,3 +68,74 @@ export function useTween({ duration, delay = 0, easing = Easing.outCubic, onComp
 export function lerp(from: number, to: number, t: number): number {
   return from + (to - from) * t;
 }
+
+// ── springs ────────────────────────────────────────────────────────────
+
+export interface SpringOptions {
+  /** Spring constant — higher snaps faster. Default 170. */
+  stiffness?: number;
+  /** Velocity drag — higher settles with less bounce. Default 24. */
+  damping?: number;
+  mass?: number;
+  /** Distance from target below which the spring snaps and stops. */
+  restDelta?: number;
+}
+
+/** One semi-implicit Euler integration step; exported for tests and for
+    driving springs from your own loops. Returns [position, velocity]. */
+export function springStep(
+  position: number,
+  velocity: number,
+  target: number,
+  { stiffness = 170, damping = 24, mass = 1 }: SpringOptions,
+  dtMs: number,
+): [number, number] {
+  const dt = dtMs / 1000;
+  const acceleration = (-stiffness * (position - target) - damping * velocity) / mass;
+  const v = velocity + acceleration * dt;
+  return [position + v * dt, v];
+}
+
+/**
+ * A value that springs toward `target` whenever it changes — for
+ * interactive motion where a fixed-duration tween feels wrong (toggle
+ * thumbs, drawers, meters chasing levels). Runs on the host timer like
+ * useTween; starts at rest on the initial target.
+ */
+export function useSpring(target: number, options: SpringOptions = {}): number {
+  const [value, setValue] = useState(target);
+  const state = useRef({ position: target, velocity: 0 });
+  const targetRef = useRef(target);
+  targetRef.current = target;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  useEffect(() => {
+    const restDelta = optionsRef.current.restDelta ?? 0.001;
+    if (
+      Math.abs(state.current.position - targetRef.current) <= restDelta &&
+      Math.abs(state.current.velocity) <= restDelta
+    ) {
+      return;
+    }
+
+    const id = setInterval(() => {
+      const s = state.current;
+      const [p, v] = springStep(s.position, s.velocity, targetRef.current, optionsRef.current, FRAME_MS);
+      s.position = p;
+      s.velocity = v;
+
+      if (Math.abs(p - targetRef.current) <= restDelta && Math.abs(v) <= restDelta) {
+        s.position = targetRef.current;
+        s.velocity = 0;
+        clearInterval(id);
+      }
+
+      setValue(s.position);
+    }, FRAME_MS);
+
+    return () => clearInterval(id);
+  }, [target]);
+
+  return value;
+}

package/src/controls.test.tsx

@@ -0,0 +1,131 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+
+const batches: unknown[][][] = [];
+const nativeCalls: Array<{ name: string; args: any }> = [];
+let paramGetResult: any = { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB" };
+
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+(globalThis as Record<string, any>).__vsreact_nativeCall = (name: string, argsJson: string) => {
+  const args = JSON.parse(argsJson);
+  nativeCalls.push({ name, args });
+  if (name === "param:get") return JSON.stringify(paramGetResult);
+  return "null";
+};
+
+import { render, unmount, Slider, Toggle, XYPad, Segmented, ParamSegmented, ParamToggle } from "./index";
+
+const allOps = () => batches.flat();
+const opsNamed = (name: string) => allOps().filter((op: any) => op[0] === name);
+const dispatch = (msg: unknown) =>
+  (globalThis as Record<string, any>).__vsreact_dispatch(JSON.stringify(msg));
+
+/** First node id whose registered listeners include `type`. */
+const nodeWithListener = (type: string): number => {
+  const props: any = opsNamed("setProps").find((op: any) => op[2]?.listeners?.includes(type));
+  expect(props).toBeDefined();
+  return props[1];
+};
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+  nativeCalls.length = 0;
+  paramGetResult = { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB" };
+});
+
+describe("vertical Slider", () => {
+  test("drag up increases the value; fill rises from the bottom", () => {
+    const seen: number[] = [];
+    render(<Slider vertical height={100} value={0.5} onChange={(v) => 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: -25, x: 0, y: -25 } });
+    expect(seen.at(-1)).toBeCloseTo(0.75);
+
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 0, dy: 80, x: 0, y: 80 } });
+    expect(seen.at(-1)).toBe(0); // clamped
+
+    // Fill height reflects the (still-controlled) 0.5 value.
+    const fill: any = opsNamed("setProps").find((op: any) => op[2]?.style?.height === 50);
+    expect(fill).toBeDefined();
+  });
+});
+
+describe("Toggle", () => {
+  test("click flips; disabled ignores clicks", () => {
+    const seen: boolean[] = [];
+    render(<Toggle on={false} onChange={(v) => seen.push(v)} />);
+
+    const id = nodeWithListener("click");
+    dispatch({ kind: "event", nodeId: id, type: "click" });
+    expect(seen).toEqual([true]);
+
+    unmount();
+    batches.length = 0;
+    render(<Toggle on disabled onChange={(v) => seen.push(v)} />);
+    expect(opsNamed("setProps").some((op: any) => op[2]?.listeners?.includes("click"))).toBe(false);
+  });
+
+  test("ParamToggle reads the param and writes a begin/set/end gesture", () => {
+    paramGetResult = { value: 0, text: "Off", name: "Bypass", label: "" };
+    render(<ParamToggle paramId="bypass" />);
+
+    const id = nodeWithListener("click");
+    dispatch({ kind: "event", nodeId: id, type: "click" });
+
+    const names = nativeCalls.map((c) => c.name);
+    expect(names).toContain("param:begin");
+    expect(names).toContain("param:end");
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args).toEqual({ id: "bypass", value: 1 });
+  });
+});
+
+describe("XYPad", () => {
+  test("drag maps both axes: right = +x, up = +y, clamped", () => {
+    const seen: Array<[number, number]> = [];
+    render(
+      <XYPad x={0.5} y={0.5} width={100} height={100} onChange={(x, y) => 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: 25, dy: -25, 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: "drag", payload: { dx: 999, dy: 999, x: 0, y: 0 } });
+    expect(seen.at(-1)).toEqual([1, 0]);
+  });
+});
+
+describe("Segmented", () => {
+  test("clicking a segment reports its index", () => {
+    const seen: number[] = [];
+    render(<Segmented options={["SINE", "SAW", "SQR"]} index={0} onChange={(i) => seen.push(i)} />);
+
+    const clickables = opsNamed("setProps").filter((op: any) =>
+      op[2]?.listeners?.includes("click"),
+    );
+    expect(clickables.length).toBe(3);
+
+    dispatch({ kind: "event", nodeId: (clickables[2] as any)[1], type: "click" });
+    expect(seen).toEqual([2]);
+  });
+
+  test("ParamSegmented maps value→index and writes index/(n−1)", () => {
+    paramGetResult = { value: 0.5, text: "Saw", name: "Shape", label: "" };
+    render(<ParamSegmented paramId="shape" options={["SINE", "SAW", "SQR"]} />);
+
+    const clickables = opsNamed("setProps").filter((op: any) =>
+      op[2]?.listeners?.includes("click"),
+    );
+    dispatch({ kind: "event", nodeId: (clickables[0] as any)[1], type: "click" });
+
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args).toEqual({ id: "shape", value: 0 });
+  });
+});

package/src/controls.tsx

@@ -1,13 +1,17 @@
-// Knob and Slider — the classic VST controls, drawn by the VSReacT painter
-// (arc styles) and driven by drag gestures.
+// The built-in VST controls — knobs, sliders, toggles, XY pads, segmented
+// switches — drawn by the VSReacT painter and driven by drag gestures.
+// Each has a Param* variant bound to an APVTS parameter.
 
 import { useRef } from "react";
 import { View, Text } from "./primitives";
 import { useParameter } from "./parameters";
+import { useSpring } from "./animation";
+
+const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
 
 /** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
 export function dragToValue(startValue: number, dy: number, sensitivity = 0.005): number {
-  return Math.min(1, Math.max(0, startValue - dy * sensitivity));
+  return clamp01(startValue - dy * sensitivity);
 }
 
 const ARC_START = -135;
@@ -110,7 +114,12 @@ export function ParamKnob({ paramId, label, size, trackColor, valueColor }: Para
 
 export interface SliderProps {
   value: number; // normalized 0..1
+  /** Track length when horizontal (default 160). */
   width?: number;
+  /** Track length when vertical (default 160). */
+  height?: number;
+  /** Vertical fader — drag up for more, fill rises from the bottom. */
+  vertical?: boolean;
   label?: string;
   disabled?: boolean;
   trackColor?: string;
@@ -123,6 +132,8 @@ export interface SliderProps {
 export function Slider({
   value,
   width = 160,
+  height = 160,
+  vertical,
   label,
   disabled,
   trackColor = "#2A2F27",
@@ -132,27 +143,54 @@ export function Slider({
   onEnd,
 }: SliderProps) {
   const startValue = useRef(0);
-  const clamped = Math.min(1, Math.max(0, value));
+  const clamped = clamp01(value);
+
+  const onDragStart = disabled
+    ? undefined
+    : () => {
+        startValue.current = clamped;
+        onBegin?.();
+      };
+  const onDragEnd = disabled ? undefined : () => onEnd?.();
+
+  if (vertical) {
+    return (
+      <View className="items-center gap-2">
+        <View
+          className={`w-[18] relative ${disabled ? "opacity-40" : "cursor-pointer"}`}
+          style={{ height }}
+          onDragStart={onDragStart}
+          onDrag={disabled ? undefined : (e) => onChange(clamp01(startValue.current - e.dy / height))}
+          onDragEnd={onDragEnd}
+        >
+          <View
+            className="absolute w-[4] rounded-full left-[7] top-0 bottom-0"
+            style={{ backgroundColor: trackColor }}
+          />
+          <View
+            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 }}
+          />
+        </View>
+        {label !== undefined ? (
+          <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+        ) : null}
+      </View>
+    );
+  }
 
   return (
     <View className="gap-2">
       <View
         className={`h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`}
         style={{ width }}
-        onDragStart={
-          disabled
-            ? undefined
-            : () => {
-                startValue.current = clamped;
-                onBegin?.();
-              }
-        }
-        onDrag={
-          disabled
-            ? undefined
-            : (e) => onChange(Math.min(1, Math.max(0, startValue.current + e.dx / width)))
-        }
-        onDragEnd={disabled ? undefined : () => onEnd?.()}
+        onDragStart={onDragStart}
+        onDrag={disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / width))}
+        onDragEnd={onDragEnd}
       >
         <View className="h-[4] rounded-full" style={{ backgroundColor: trackColor }} />
         <View
@@ -175,10 +213,12 @@ export interface ParamSliderProps {
   paramId: string;
   label?: string;
   width?: number;
+  height?: number;
+  vertical?: boolean;
 }
 
 /** A Slider bound to an APVTS parameter (via ParameterBridge). */
-export function ParamSlider({ paramId, label, width }: ParamSliderProps) {
+export function ParamSlider({ paramId, label, width, height, vertical }: ParamSliderProps) {
   const param = useParameter(paramId);
 
   return (
@@ -186,9 +226,302 @@ export function ParamSlider({ paramId, label, width }: ParamSliderProps) {
       value={param.value}
       label={label ?? param.name.toUpperCase()}
       width={width}
+      height={height}
+      vertical={vertical}
       onChange={param.set}
       onBegin={param.begin}
       onEnd={param.end}
     />
   );
 }
+
+// ── Toggle ─────────────────────────────────────────────────────────────
+
+export interface ToggleProps {
+  on: boolean;
+  label?: string;
+  /** Track height; width is 1.8×. Default 22. */
+  size?: number;
+  disabled?: boolean;
+  trackColor?: string;
+  onColor?: string;
+  thumbColor?: string;
+  onChange: (on: boolean) => void;
+}
+
+/** A switch with a spring-animated thumb — bypass, on/off, A/B. */
+export function Toggle({
+  on,
+  label,
+  size = 22,
+  disabled,
+  trackColor = "#2A2F27",
+  onColor = "#C6F135",
+  thumbColor = "#F4F4F5",
+  onChange,
+}: ToggleProps) {
+  const t = useSpring(on ? 1 : 0, { stiffness: 300, damping: 28 });
+  const trackWidth = Math.round(size * 1.8);
+  const thumb = size - 6;
+  const travel = trackWidth - thumb - 6;
+
+  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="absolute rounded-full"
+          style={{
+            width: thumb,
+            height: thumb,
+            top: 3,
+            left: 3 + clamp01(t) * travel,
+            backgroundColor: thumbColor,
+          }}
+        />
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamToggleProps {
+  paramId: string;
+  label?: string;
+  size?: number;
+  trackColor?: string;
+  onColor?: string;
+  thumbColor?: string;
+}
+
+/** A Toggle bound to a bool-style APVTS parameter (on = value ≥ 0.5). */
+export function ParamToggle({ paramId, label, ...rest }: ParamToggleProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <Toggle
+      on={param.value >= 0.5}
+      label={label ?? param.name.toUpperCase()}
+      onChange={(next) => {
+        param.begin();
+        param.set(next ? 1 : 0);
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}
+
+// ── XYPad ──────────────────────────────────────────────────────────────
+
+export interface XYPadProps {
+  /** Normalized 0..1. */
+  x: number;
+  /** Normalized 0..1 — 1 is the TOP of the pad (drag up for more). */
+  y: number;
+  width?: number;
+  height?: number;
+  label?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  valueColor?: string;
+  onChange: (x: number, y: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+/** A 2D drag pad with crosshair — filter cutoff/resonance, pan/depth… */
+export function XYPad({
+  x,
+  y,
+  width = 160,
+  height = 160,
+  label,
+  disabled,
+  trackColor = "#161B17",
+  valueColor = "#C6F135",
+  onChange,
+  onBegin,
+  onEnd,
+}: XYPadProps) {
+  const start = useRef({ x: 0, y: 0 });
+  const cxv = clamp01(x);
+  const cyv = clamp01(y);
+  const thumb = 14;
+  const tx = cxv * (width - thumb);
+  const ty = (1 - cyv) * (height - thumb);
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`relative rounded-lg overflow-hidden border ${disabled ? "opacity-40" : "cursor-pointer"}`}
+        style={{ width, height, backgroundColor: trackColor, borderColor: "#00000055" }}
+        onDragStart={
+          disabled
+            ? undefined
+            : () => {
+                start.current = { x: cxv, y: cyv };
+                onBegin?.();
+              }
+        }
+        onDrag={
+          disabled
+            ? undefined
+            : (e) =>
+                onChange(
+                  clamp01(start.current.x + e.dx / width),
+                  clamp01(start.current.y - e.dy / height),
+                )
+        }
+        onDragEnd={disabled ? undefined : () => onEnd?.()}
+      >
+        <View
+          className="absolute left-0 right-0 h-[1]"
+          style={{ top: ty + thumb / 2, backgroundColor: valueColor, opacity: 0.35 }}
+        />
+        <View
+          className="absolute top-0 bottom-0 w-[1]"
+          style={{ left: tx + thumb / 2, backgroundColor: valueColor, opacity: 0.35 }}
+        />
+        <View
+          className="absolute rounded-full"
+          style={{ width: thumb, height: thumb, left: tx, top: ty, backgroundColor: valueColor }}
+        />
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamXYPadProps {
+  paramX: string;
+  paramY: string;
+  width?: number;
+  height?: number;
+  label?: string;
+  trackColor?: string;
+  valueColor?: string;
+}
+
+/** An XYPad driving two APVTS parameters at once. */
+export function ParamXYPad({ paramX, paramY, label, ...rest }: ParamXYPadProps) {
+  const px = useParameter(paramX);
+  const py = useParameter(paramY);
+
+  return (
+    <XYPad
+      x={px.value}
+      y={py.value}
+      label={label ?? `${px.name} / ${py.name}`.toUpperCase()}
+      onChange={(nx, ny) => {
+        px.set(nx);
+        py.set(ny);
+      }}
+      onBegin={() => {
+        px.begin();
+        py.begin();
+      }}
+      onEnd={() => {
+        px.end();
+        py.end();
+      }}
+      {...rest}
+    />
+  );
+}
+
+// ── Segmented ──────────────────────────────────────────────────────────
+
+export interface SegmentedProps {
+  options: string[];
+  index: number;
+  label?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  activeColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  onChange: (index: number) => void;
+}
+
+/** A row of exclusive options — oscillator shapes, filter modes, A/B/C. */
+export function Segmented({
+  options,
+  index,
+  label,
+  disabled,
+  trackColor = "#2A2F27",
+  activeColor = "#C6F135",
+  textColor = "#a1a1aa",
+  activeTextColor = "#09090b",
+  onChange,
+}: SegmentedProps) {
+  const current = Math.min(options.length - 1, Math.max(0, index));
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`flex-row rounded-lg p-[3] gap-[3] ${disabled ? "opacity-40" : ""}`}
+        style={{ backgroundColor: trackColor }}
+      >
+        {options.map((option, i) => (
+          <View
+            key={`${option}-${i}`}
+            className={`px-3 py-[6] rounded-md ${disabled ? "" : "cursor-pointer"}`}
+            style={{ backgroundColor: i === current ? activeColor : "#00000000" }}
+            onClick={disabled ? undefined : () => onChange(i)}
+          >
+            <Text
+              className="text-[11] font-bold tracking-wide"
+              style={{ color: i === current ? activeTextColor : textColor }}
+            >
+              {option}
+            </Text>
+          </View>
+        ))}
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamSegmentedProps {
+  paramId: string;
+  options: string[];
+  label?: string;
+  trackColor?: string;
+  activeColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+}
+
+/** A Segmented bound to a choice-style APVTS parameter: the normalized
+    value maps to an option index (index / (count − 1)). */
+export function ParamSegmented({ paramId, options, label, ...rest }: ParamSegmentedProps) {
+  const param = useParameter(paramId);
+  const count = Math.max(1, options.length);
+  const index = Math.round(param.value * (count - 1));
+
+  return (
+    <Segmented
+      options={options}
+      index={index}
+      label={label ?? param.name.toUpperCase()}
+      onChange={(i) => {
+        param.begin();
+        param.set(count <= 1 ? 0 : i / (count - 1));
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}

package/src/cx.ts

@@ -0,0 +1,33 @@
+// cx — compose conditional className strings (a tiny clsx).
+
+export type ClassValue =
+  | string
+  | number
+  | null
+  | false
+  | undefined
+  | ClassValue[]
+  | Record<string, unknown>;
+
+/**
+ * `cx("flex", active && "bg-red-500", { "opacity-40": disabled })`
+ * → `"flex bg-red-500 opacity-40"`.
+ */
+export function cx(...inputs: ClassValue[]): string {
+  const out: string[] = [];
+
+  for (const input of inputs) {
+    if (!input && input !== 0) continue;
+
+    if (typeof input === "string" || typeof input === "number") {
+      out.push(String(input));
+    } else if (Array.isArray(input)) {
+      const nested = cx(...input);
+      if (nested) out.push(nested);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) if (value) out.push(key);
+    }
+  }
+
+  return out.join(" ");
+}

package/src/hooks.ts

@@ -0,0 +1,18 @@
+// Convenience hooks over the native bridge.
+
+import { useEffect, useRef } from "react";
+import { native } from "./native";
+
+/**
+ * Subscribes to a C++ event (RootView::sendNativeEvent) for the lifetime
+ * of the component. The handler can close over fresh state — it is kept
+ * current without resubscribing.
+ *
+ *   useNativeEvent("download:progress", (p) => setProgress(p.ratio));
+ */
+export function useNativeEvent(name: string, handler: (payload: any) => void): void {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => native.on(name, (payload) => handlerRef.current(payload)), [name]);
+}