@vsreact/core 0.0.13 → 0.0.15

package/src/eq.tsx

@@ -0,0 +1,231 @@
+// The EQ curve — a real biquad response display with draggable band
+// nodes. Views only: the response is a center-anchored column fill
+// (boost up, cut down), one node per band; drag moves freq/gain, the
+// wheel adjusts Q. RBJ cookbook math, exported pure for reuse.
+
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+export type FilterType =
+  | "peak"
+  | "lowshelf"
+  | "highshelf"
+  | "lowpass"
+  | "highpass"
+  | "bandpass"
+  | "notch";
+
+export interface EQBand {
+  type: FilterType;
+  /** Center/corner frequency in Hz (20..20000). */
+  freq: number;
+  /** Boost/cut in dB (peak & shelves). Default 0. */
+  gainDb?: number;
+  /** Resonance. Default 0.71. */
+  q?: number;
+}
+
+/** RBJ cookbook biquad magnitude at `atHz`, in dB. */
+export function biquadMagnitudeDb(band: EQBand, atHz: number, sampleRate = 48000): number {
+  const { type, freq } = band;
+  const gainDb = band.gainDb ?? 0;
+  const q = Math.max(0.05, band.q ?? 0.71);
+
+  const A = Math.pow(10, gainDb / 40);
+  const w0 = (2 * Math.PI * clamp(freq, 1, sampleRate / 2 - 1)) / sampleRate;
+  const cos = Math.cos(w0);
+  const sin = Math.sin(w0);
+  const alpha = sin / (2 * q);
+  const rootA2Alpha = 2 * Math.sqrt(A) * alpha;
+
+  let b0: number, b1: number, b2: number, a0: number, a1: number, a2: number;
+  switch (type) {
+    case "peak":
+      b0 = 1 + alpha * A; b1 = -2 * cos; b2 = 1 - alpha * A;
+      a0 = 1 + alpha / A; a1 = -2 * cos; a2 = 1 - alpha / A;
+      break;
+    case "lowpass":
+      b0 = (1 - cos) / 2; b1 = 1 - cos; b2 = (1 - cos) / 2;
+      a0 = 1 + alpha; a1 = -2 * cos; a2 = 1 - alpha;
+      break;
+    case "highpass":
+      b0 = (1 + cos) / 2; b1 = -(1 + cos); b2 = (1 + cos) / 2;
+      a0 = 1 + alpha; a1 = -2 * cos; a2 = 1 - alpha;
+      break;
+    case "bandpass":
+      b0 = alpha; b1 = 0; b2 = -alpha;
+      a0 = 1 + alpha; a1 = -2 * cos; a2 = 1 - alpha;
+      break;
+    case "notch":
+      b0 = 1; b1 = -2 * cos; b2 = 1;
+      a0 = 1 + alpha; a1 = -2 * cos; a2 = 1 - alpha;
+      break;
+    case "lowshelf":
+      b0 = A * (A + 1 - (A - 1) * cos + rootA2Alpha);
+      b1 = 2 * A * (A - 1 - (A + 1) * cos);
+      b2 = A * (A + 1 - (A - 1) * cos - rootA2Alpha);
+      a0 = A + 1 + (A - 1) * cos + rootA2Alpha;
+      a1 = -2 * (A - 1 + (A + 1) * cos);
+      a2 = A + 1 + (A - 1) * cos - rootA2Alpha;
+      break;
+    case "highshelf":
+      b0 = A * (A + 1 + (A - 1) * cos + rootA2Alpha);
+      b1 = -2 * A * (A - 1 + (A + 1) * cos);
+      b2 = A * (A + 1 + (A - 1) * cos - rootA2Alpha);
+      a0 = A + 1 - (A - 1) * cos + rootA2Alpha;
+      a1 = 2 * (A - 1 - (A + 1) * cos);
+      a2 = A + 1 - (A - 1) * cos - rootA2Alpha;
+      break;
+  }
+
+  const w = (2 * Math.PI * clamp(atHz, 1, sampleRate / 2 - 1)) / sampleRate;
+  const cw = Math.cos(w);
+  const c2w = Math.cos(2 * w);
+  const num = b0 * b0 + b1 * b1 + b2 * b2 + 2 * (b0 * b1 + b1 * b2) * cw + 2 * b0 * b2 * c2w;
+  const den = a0 * a0 + a1 * a1 + a2 * a2 + 2 * (a0 * a1 + a1 * a2) * cw + 2 * a0 * a2 * c2w;
+  return 10 * Math.log10(Math.max(1e-12, num / Math.max(1e-12, den)));
+}
+
+/** The summed response of all bands at `atHz`, in dB. */
+export function eqResponseDb(bands: EQBand[], atHz: number, sampleRate = 48000): number {
+  let db = 0;
+  for (const band of bands) db += biquadMagnitudeDb(band, atHz, sampleRate);
+  return db;
+}
+
+const FREQ_MIN = 20;
+const FREQ_MAX = 20000;
+const logSpan = Math.log(FREQ_MAX / FREQ_MIN);
+
+/** 0..1 position ↔ 20..20k Hz on a log scale. */
+export const eqXToHz = (x01: number) => FREQ_MIN * Math.exp(clamp(x01, 0, 1) * logSpan);
+export const eqHzToX = (hz: number) => Math.log(clamp(hz, FREQ_MIN, FREQ_MAX) / FREQ_MIN) / logSpan;
+
+export interface EQCurveProps {
+  bands: EQBand[];
+  width?: number;
+  height?: number;
+  /** Vertical range: ±dbRange dB. Default 18. */
+  dbRange?: number;
+  /** Fill resolution. Default 48 columns. */
+  columns?: number;
+  disabled?: boolean;
+  trackColor?: string;
+  /** The response fill. */
+  color?: string;
+  handleColor?: string;
+  label?: string;
+  /** A node was dragged (freq/gain) or wheeled (q). */
+  onChange?: (index: number, band: EQBand) => void;
+  onBegin?: (index: number) => void;
+  onEnd?: (index: number) => void;
+}
+
+/** The EQ display every plugin wants: the real summed biquad response,
+    with one draggable node per band (x = freq on a log scale, y = gain)
+    and the wheel adjusting Q. */
+export function EQCurve({
+  bands,
+  width = 220,
+  height = 96,
+  dbRange = 18,
+  columns = 48,
+  disabled,
+  trackColor = "#141714",
+  color = "#C6F13560",
+  handleColor = "#ECF2E8",
+  label,
+  onChange,
+  onBegin,
+  onEnd,
+}: EQCurveProps) {
+  const start = useRef<{ freq: number; gainDb: number }>({ freq: 1000, gainDb: 0 });
+  const mid = height / 2;
+  const HANDLE = 18;
+
+  const yOfDb = (db: number) => mid - (clamp(db, -dbRange, dbRange) / dbRange) * (mid - 4);
+
+  const node = (band: EQBand, index: number) => {
+    const x = eqHzToX(band.freq) * width;
+    const y = yOfDb(band.gainDb ?? 0);
+    const handlers = disabled
+      ? {}
+      : {
+          onDragStart: () => {
+            start.current = { freq: band.freq, gainDb: band.gainDb ?? 0 };
+            onBegin?.(index);
+          },
+          onDrag: (e: { dx: number; dy: number }) => {
+            const x01 = clamp(eqHzToX(start.current.freq) + e.dx / width, 0, 1);
+            onChange?.(index, {
+              ...band,
+              freq: Math.round(eqXToHz(x01)),
+              gainDb: clamp(start.current.gainDb - (e.dy / (mid - 4)) * dbRange, -dbRange, dbRange),
+            });
+          },
+          onDragEnd: () => onEnd?.(index),
+          onWheel: (e: { dy: number }) => {
+            const q = Math.max(0.05, band.q ?? 0.71);
+            onBegin?.(index);
+            onChange?.(index, { ...band, q: clamp(q * Math.exp(e.dy * 1.4), 0.1, 18) });
+            onEnd?.(index);
+          },
+        };
+
+    return (
+      <View
+        key={index}
+        className={`absolute items-center justify-center ${disabled ? "" : "cursor-pointer"}`}
+        style={{ left: x - HANDLE / 2, top: y - HANDLE / 2, width: HANDLE, height: HANDLE }}
+        {...handlers}
+      >
+        <View
+          className="rounded-full border"
+          style={{ width: 10, height: 10, backgroundColor: handleColor, borderColor: "#00000088" }}
+        />
+      </View>
+    );
+  };
+
+  const body = (
+    <View
+      className={`relative rounded overflow-hidden ${disabled ? "opacity-40" : ""}`}
+      style={{ width, height, backgroundColor: trackColor }}
+    >
+      <View
+        className="absolute left-0 right-0 h-[1]"
+        style={{ top: mid, backgroundColor: "#FFFFFF24" }}
+      />
+      {Array.from({ length: columns }, (_, i) => {
+        const hz = eqXToHz((i + 0.5) / columns);
+        const db = eqResponseDb(bands, hz);
+        const columnHeight = Math.abs(yOfDb(db) - mid);
+        return (
+          <View
+            key={i}
+            className="absolute"
+            style={{
+              left: (i / columns) * width + 0.5,
+              width: width / columns - 1,
+              top: db >= 0 ? mid - columnHeight : mid,
+              height: Math.max(1, columnHeight),
+              backgroundColor: color,
+            }}
+          />
+        );
+      })}
+      {bands.map(node)}
+    </View>
+  );
+
+  if (label === undefined) return body;
+
+  return (
+    <View className="items-center gap-2">
+      {body}
+      <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+    </View>
+  );
+}

package/src/hooks.ts

@@ -29,6 +29,19 @@ export function useNativeEvent(name: string, handler: (payload: any) => void): v
   useEffect(() => native.on(name, (payload) => handlerRef.current(payload)), [name]);
 }
 
+/**
+ * The latest payload of a C++ event, held as state — the one-liner for
+ * native → UI data feeds:
+ *
+ *   const meter = useNativeValue("meter", { level: 0 });
+ *   <Meter value={meter.level} />
+ */
+export function useNativeValue<T = any>(name: string, initial: T): T {
+  const [value, setValue] = useState<T>(initial);
+  useNativeEvent(name, setValue);
+  return value;
+}
+
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

package/src/index.ts

@@ -15,6 +15,7 @@ export { render, unmount } from "./render";
 export { native } from "./native";
 export {
   useNativeEvent,
+  useNativeValue,
   useDebounced,
   useThrottled,
   usePrevious,
@@ -69,8 +70,10 @@ export type {
   ParamSegmentedProps,
   ParamSelectProps,
 } from "./controls";
-export { Meter, usePeakHold, peakHoldStep } from "./meter";
-export type { MeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
+export { Meter, RingMeter, usePeakHold, peakHoldStep } from "./meter";
+export type { MeterProps, RingMeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
+export { EQCurve, biquadMagnitudeDb, eqResponseDb, eqXToHz, eqHzToX } from "./eq";
+export type { EQCurveProps, EQBand, FilterType } from "./eq";
 export {
   NumberBox,
   Checkbox,
@@ -94,6 +97,8 @@ export { PianoKeyboard } from "./keyboard";
 export type { PianoKeyboardProps } from "./keyboard";
 export { StepSequencer } from "./sequencer";
 export type { StepSequencerProps } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
+export type { TabsProps, DisclosureProps } from "./layout";
 export {
   ADSREnvelope,
   ParamADSREnvelope,

package/src/layout.test.tsx

@@ -0,0 +1,127 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+
+const batches: unknown[][][] = [];
+
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+(globalThis as Record<string, any>).__vsreact_nativeCall = () => "null";
+
+import { render, unmount, View, Text, Tabs, Disclosure, Meter, useNativeValue } 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));
+
+const nodesWithListener = (type: string): number[] => {
+  const seen = new Set<number>();
+  for (const op of opsNamed("setProps") as any[]) {
+    if (op[2]?.listeners?.includes(type)) seen.add(op[1]);
+  }
+  return [...seen];
+};
+
+const textsSet = (): string[] =>
+  (opsNamed("setText") as any[]).map((op) => op[2]).filter((t) => typeof t === "string");
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("Tabs", () => {
+  test("uncontrolled: clicking a tab switches the panel", async () => {
+    render(
+      <Tabs labels={["MAIN", "FX"]}>
+        <Text>main-panel</Text>
+        <Text>fx-panel</Text>
+      </Tabs>,
+    );
+
+    expect(textsSet()).toContain("main-panel");
+    expect(textsSet()).not.toContain("fx-panel");
+
+    const tabs = nodesWithListener("click");
+    expect(tabs).toHaveLength(2);
+    dispatch({ kind: "event", nodeId: tabs[1], type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(textsSet()).toContain("fx-panel");
+  });
+
+  test("controlled: reports the click, renders the given index", () => {
+    const seen: number[] = [];
+    render(
+      <Tabs labels={["A", "B", "C"]} index={2} onChange={(i) => seen.push(i)}>
+        <Text>a</Text>
+        <Text>b</Text>
+        <Text>c</Text>
+      </Tabs>,
+    );
+
+    expect(textsSet()).toContain("c");
+    const tabs = nodesWithListener("click");
+    dispatch({ kind: "event", nodeId: tabs[0], type: "click" });
+    expect(seen).toEqual([0]);
+  });
+});
+
+describe("Disclosure", () => {
+  test("closed by default; clicking the header reveals the content", async () => {
+    render(
+      <Disclosure title="ADVANCED">
+        <Text>secret-settings</Text>
+      </Disclosure>,
+    );
+
+    expect(textsSet()).not.toContain("secret-settings");
+
+    const header = nodesWithListener("click")[0];
+    dispatch({ kind: "event", nodeId: header, type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(textsSet()).toContain("secret-settings");
+  });
+});
+
+describe("Meter reverse", () => {
+  test("reverse anchors the vertical fill to the top", () => {
+    render(<Meter value={0.5} length={100} peak={false} reverse />);
+
+    const fill: any = (opsNamed("setProps") as any[]).find(
+      (op) => op[2]?.style?.height === 42.5 || op[2]?.style?.height === 50,
+    );
+    expect(fill).toBeDefined();
+    expect(fill[2].style.top).toBe(0);
+    expect(fill[2].style.bottom).toBeUndefined();
+  });
+
+  test("default still fills from the bottom", () => {
+    render(<Meter value={0.5} length={100} peak={false} />);
+
+    const fill: any = (opsNamed("setProps") as any[]).find(
+      (op) => (op[2]?.style?.height === 42.5 || op[2]?.style?.height === 50) && op[2]?.style?.bottom === 0,
+    );
+    expect(fill).toBeDefined();
+  });
+});
+
+describe("useNativeValue", () => {
+  test("holds the latest payload of a native event", async () => {
+    const seen: number[] = [];
+    function App() {
+      const meter = useNativeValue("meter", { level: 0 });
+      seen.push(meter.level);
+      return <View />;
+    }
+
+    render(<App />);
+    await new Promise((r) => setTimeout(r, 0));
+
+    dispatch({ kind: "native", name: "meter", payload: { level: 0.8 } });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(seen.at(-1)).toBe(0.8);
+  });
+});

package/src/layout.tsx

@@ -0,0 +1,136 @@
+// Workspace structure — tabs for multi-page plugin UIs and the
+// disclosure row for collapsible settings sections.
+
+import { useState, type ReactNode } from "react";
+import { View, Text } from "./primitives";
+
+const clampIndex = (i: number, count: number) => Math.min(Math.max(0, count - 1), Math.max(0, i));
+
+export interface TabsProps {
+  labels: string[];
+  /** Controlled active tab; omit to let Tabs manage it. */
+  index?: number;
+  /** Starting tab when uncontrolled. Default 0. */
+  defaultIndex?: number;
+  onChange?: (index: number) => void;
+  /** Fixed width; defaults to content width. */
+  width?: number;
+  /** Space between the bar and the panel. Default 12. */
+  gap?: number;
+  accentColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  trackColor?: string;
+  /** One panel per label (a lone child works for label-driven UIs). */
+  children?: ReactNode | ReactNode[];
+}
+
+/** The page switcher — MAIN / FX / SETTINGS. A themed tab bar with an
+    underline indicator; renders the active panel below it. */
+export function Tabs({
+  labels,
+  index,
+  defaultIndex = 0,
+  onChange,
+  width,
+  gap = 12,
+  accentColor = "#C6F135",
+  textColor = "#7c8087",
+  activeTextColor = "#ECF2E8",
+  trackColor = "#FFFFFF14",
+  children,
+}: TabsProps) {
+  const [internal, setInternal] = useState(defaultIndex);
+  const current = clampIndex(index ?? internal, labels.length);
+
+  const select = (i: number) => {
+    setInternal(i);
+    onChange?.(i);
+  };
+
+  const panels: ReactNode[] = Array.isArray(children) ? children : children !== undefined ? [children] : [];
+
+  return (
+    <View style={width !== undefined ? { width } : undefined}>
+      <View className="flex-row relative" style={{ columnGap: 4 }}>
+        <View
+          className="absolute left-0 right-0 h-[1]"
+          style={{ bottom: 0, backgroundColor: trackColor }}
+        />
+        {labels.map((label, i) => (
+          <View
+            key={`${label}-${i}`}
+            className="items-center cursor-pointer px-3 pt-1"
+            onClick={() => select(i)}
+          >
+            <Text
+              className="text-[11] font-bold tracking-widest"
+              style={{ color: i === current ? activeTextColor : textColor }}
+            >
+              {label}
+            </Text>
+            <View
+              className="rounded-full self-stretch"
+              style={{
+                height: 2,
+                marginTop: 6,
+                backgroundColor: i === current ? accentColor : "#00000000",
+              }}
+            />
+          </View>
+        ))}
+      </View>
+      {panels.length > 0 ? (
+        <View style={{ marginTop: gap }}>{panels[Math.min(current, panels.length - 1)]}</View>
+      ) : null}
+    </View>
+  );
+}
+
+export interface DisclosureProps {
+  title: string;
+  /** Controlled open state; omit to let Disclosure manage it. */
+  open?: boolean;
+  /** Starting state when uncontrolled. Default false. */
+  defaultOpen?: boolean;
+  onChange?: (open: boolean) => void;
+  width?: number;
+  textColor?: string;
+  accentColor?: string;
+  children?: ReactNode;
+}
+
+/** A collapsible section row — "ADVANCED", "MODULATION". Click the
+    header to fold the content in and out. */
+export function Disclosure({
+  title,
+  open,
+  defaultOpen = false,
+  onChange,
+  width,
+  textColor = "#a1a1aa",
+  accentColor = "#C6F135",
+  children,
+}: DisclosureProps) {
+  const [internal, setInternal] = useState(defaultOpen);
+  const isOpen = open ?? internal;
+
+  const toggle = () => {
+    setInternal(!isOpen);
+    onChange?.(!isOpen);
+  };
+
+  return (
+    <View style={width !== undefined ? { width } : undefined}>
+      <View className="flex-row items-center gap-2 cursor-pointer py-1" onClick={toggle}>
+        <Text className="text-[10] font-bold" style={{ color: accentColor, width: 10 }}>
+          {isOpen ? "▾" : "▸"}
+        </Text>
+        <Text className="text-[11] font-bold tracking-widest" style={{ color: textColor }}>
+          {title}
+        </Text>
+      </View>
+      {isOpen ? <View className="pt-2 pl-5">{children}</View> : null}
+    </View>
+  );
+}