@vsreact/core 0.0.11 → 0.0.13

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "@vsreact/core",
-  "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",
-    "juce",
-    "vst",
-    "vst3",
-    "audio-plugin",
-    "renderer",
-    "quickjs",
-    "yoga",
-    "native",
-    "daw"
-  ],
-  "type": "module",
-  "license": "MIT",
-  "homepage": "https://vsreact.n9records.com",
-  "bugs": "https://github.com/N9RecordsTechnologiesIL/VSReacT/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/N9RecordsTechnologiesIL/VSReacT.git",
-    "directory": "vsreact/js"
-  },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "bun": "./src/index.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./components": {
-      "types": "./dist/components.d.ts",
-      "bun": "./src/components.ts",
-      "import": "./dist/components.js",
-      "default": "./dist/components.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "build.ts"
-  ],
-  "scripts": {
-    "test": "bun test",
-    "typecheck": "tsc --noEmit",
-    "build": "bun run build.ts",
-    "build:dist": "tsc -p tsconfig.build.json",
-    "prepublishOnly": "bun run build:dist"
-  },
-  "dependencies": {
-    "@types/react": "^18.3.3",
-    "react": "18.3.1",
-    "react-reconciler": "0.29.2"
-  },
-  "devDependencies": {
-    "@types/react-reconciler": "0.28.8",
-    "bun-types": "^1.3.14",
-    "typescript": "^5.5.0"
-  }
-}
+{
+  "name": "@vsreact/core",
+  "version": "0.0.13",
+  "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
+  "keywords": [
+    "react",
+    "juce",
+    "vst",
+    "vst3",
+    "audio-plugin",
+    "renderer",
+    "quickjs",
+    "yoga",
+    "native",
+    "daw"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://vsreact.n9records.com",
+  "bugs": "https://github.com/N9RecordsTechnologiesIL/VSReacT/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/N9RecordsTechnologiesIL/VSReacT.git",
+    "directory": "vsreact/js"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "bun": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "bun": "./src/components.ts",
+      "import": "./dist/components.js",
+      "default": "./dist/components.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "build.ts"
+  ],
+  "scripts": {
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "build": "bun run build.ts",
+    "build:dist": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build:dist"
+  },
+  "dependencies": {
+    "@types/react": "^18.3.3",
+    "react": "18.3.1",
+    "react-reconciler": "0.29.2"
+  },
+  "devDependencies": {
+    "@types/react-reconciler": "0.28.8",
+    "bun-types": "^1.3.14",
+    "typescript": "^5.5.0"
+  }
+}

package/src/bridge.ts

@@ -1,66 +1,66 @@
-// JS side of the mutation/event bridge. Ops queue up during a React commit
-// and flush to C++ as one JSON batch; C++ pushes events back through the
-// __vsreact_dispatch global registered here.
-
-import { fireTimer } from "./runtime";
-
-export type Op = unknown[];
-
-let queue: Op[] = [];
-
-export function queueOp(op: Op): void {
-  queue.push(op);
-}
-
-export function flushOps(): void {
-  if (queue.length === 0) return;
-  const json = JSON.stringify(queue);
-  queue = [];
-  (globalThis as Record<string, any>).__vsreact_flush?.(json);
-}
-
-export type EventHandler = (payload: unknown) => void;
-
-const eventHandlers = new Map<number, Map<string, EventHandler>>();
-
-export function setHandlers(nodeId: number, handlers: Map<string, EventHandler>): void {
-  if (handlers.size === 0) eventHandlers.delete(nodeId);
-  else eventHandlers.set(nodeId, handlers);
-}
-
-export function removeHandlers(nodeId: number): void {
-  eventHandlers.delete(nodeId);
-}
-
-const nativeListeners = new Map<string, Set<EventHandler>>();
-
-export function addNativeListener(name: string, cb: EventHandler): () => void {
-  let set = nativeListeners.get(name);
-  if (!set) nativeListeners.set(name, (set = new Set()));
-  set.add(cb);
-  return () => {
-    set.delete(cb);
-    if (set.size === 0) nativeListeners.delete(name);
-  };
-}
-
-interface DispatchMessage {
-  kind: "event" | "native" | "timer";
-  nodeId?: number;
-  type?: string;
-  name?: string;
-  id?: number;
-  payload?: unknown;
-}
-
-(globalThis as Record<string, any>).__vsreact_dispatch = (json: string) => {
-  const msg = JSON.parse(json) as DispatchMessage;
-
-  if (msg.kind === "timer" && msg.id !== undefined) {
-    fireTimer(msg.id);
-  } else if (msg.kind === "event" && msg.nodeId !== undefined && msg.type) {
-    eventHandlers.get(msg.nodeId)?.get(msg.type)?.(msg.payload);
-  } else if (msg.kind === "native" && msg.name) {
-    nativeListeners.get(msg.name)?.forEach((cb) => cb(msg.payload));
-  }
-};
+// JS side of the mutation/event bridge. Ops queue up during a React commit
+// and flush to C++ as one JSON batch; C++ pushes events back through the
+// __vsreact_dispatch global registered here.
+
+import { fireTimer } from "./runtime";
+
+export type Op = unknown[];
+
+let queue: Op[] = [];
+
+export function queueOp(op: Op): void {
+  queue.push(op);
+}
+
+export function flushOps(): void {
+  if (queue.length === 0) return;
+  const json = JSON.stringify(queue);
+  queue = [];
+  (globalThis as Record<string, any>).__vsreact_flush?.(json);
+}
+
+export type EventHandler = (payload: unknown) => void;
+
+const eventHandlers = new Map<number, Map<string, EventHandler>>();
+
+export function setHandlers(nodeId: number, handlers: Map<string, EventHandler>): void {
+  if (handlers.size === 0) eventHandlers.delete(nodeId);
+  else eventHandlers.set(nodeId, handlers);
+}
+
+export function removeHandlers(nodeId: number): void {
+  eventHandlers.delete(nodeId);
+}
+
+const nativeListeners = new Map<string, Set<EventHandler>>();
+
+export function addNativeListener(name: string, cb: EventHandler): () => void {
+  let set = nativeListeners.get(name);
+  if (!set) nativeListeners.set(name, (set = new Set()));
+  set.add(cb);
+  return () => {
+    set.delete(cb);
+    if (set.size === 0) nativeListeners.delete(name);
+  };
+}
+
+interface DispatchMessage {
+  kind: "event" | "native" | "timer";
+  nodeId?: number;
+  type?: string;
+  name?: string;
+  id?: number;
+  payload?: unknown;
+}
+
+(globalThis as Record<string, any>).__vsreact_dispatch = (json: string) => {
+  const msg = JSON.parse(json) as DispatchMessage;
+
+  if (msg.kind === "timer" && msg.id !== undefined) {
+    fireTimer(msg.id);
+  } else if (msg.kind === "event" && msg.nodeId !== undefined && msg.type) {
+    eventHandlers.get(msg.nodeId)?.get(msg.type)?.(msg.payload);
+  } else if (msg.kind === "native" && msg.name) {
+    nativeListeners.get(msg.name)?.forEach((cb) => cb(msg.payload));
+  }
+};

package/src/components.ts

@@ -64,6 +64,27 @@ export type {
 } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+export { PianoKeyboard } from "./keyboard";
+export type { PianoKeyboardProps } from "./keyboard";
+export { StepSequencer } from "./sequencer";
+export type { StepSequencerProps } from "./sequencer";
+export {
+  ADSREnvelope,
+  ParamADSREnvelope,
+  PitchBend,
+  ModWheel,
+  ParamModWheel,
+  ParamPitchBend,
+} from "./synth";
+export type {
+  ADSRKey,
+  ADSREnvelopeProps,
+  ParamADSREnvelopeProps,
+  PitchBendProps,
+  ModWheelProps,
+  ParamModWheelProps,
+  ParamPitchBendProps,
+} from "./synth";
 export {
   MacroPad,
   ParamMacroPad,

package/src/feedback.tsx

@@ -14,6 +14,9 @@ export interface ProgressBarProps {
   height?: number;
   /** Renders "42%" alongside the bar. Default false. */
   showPercent?: boolean;
+  /** Unknown duration — a segment sweeps the track and `value` is
+      ignored. Default false. */
+  indeterminate?: boolean;
   trackColor?: string;
   color?: string;
   label?: string;
@@ -25,24 +28,43 @@ export function ProgressBar({
   width = 200,
   height = 8,
   showPercent = false,
+  indeterminate = false,
   trackColor = "#2A2F27",
   color = "#C6F135",
   label,
 }: ProgressBarProps) {
   const level = clamp01(value);
 
+  // The indeterminate sweep: a 30%-width segment marching left → right.
+  const [sweep, setSweep] = useState(0);
+  useInterval(() => setSweep((t) => (t + 0.018) % 1), indeterminate ? 16 : null);
+  const segment = width * 0.3;
+
   const bar = (
     <View className="flex-row items-center gap-3">
       <View
-        className="rounded-full overflow-hidden"
+        className="rounded-full overflow-hidden relative"
         style={{ width, height, backgroundColor: trackColor }}
       >
-        <View
-          className="rounded-full"
-          style={{ width: level * width, height, backgroundColor: color }}
-        />
+        {indeterminate ? (
+          <View
+            className="rounded-full absolute"
+            style={{
+              left: sweep * (width + segment) - segment,
+              top: 0,
+              width: segment,
+              height,
+              backgroundColor: color,
+            }}
+          />
+        ) : (
+          <View
+            className="rounded-full"
+            style={{ width: level * width, height, backgroundColor: color }}
+          />
+        )}
       </View>
-      {showPercent ? (
+      {showPercent && !indeterminate ? (
         <Text className="text-faint text-[11] font-bold" style={{ width: 34 }}>
           {`${Math.round(level * 100)}%`}
         </Text>

package/src/format.ts

@@ -0,0 +1,73 @@
+// Value formatting for parameter readouts — the strings DAW users
+// expect next to a knob. Pure functions; pair them with NumberBox's
+// `format` prop or any Text.
+
+const trim = (value: number, decimals: number) => String(parseFloat(value.toFixed(decimals)));
+
+/** Linear interpolation of `value` from [inMin, inMax] to [outMin, outMax].
+    `clampOut` pins the result inside the output range. */
+export function mapRange(
+  value: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+  clampOut = false,
+): number {
+  const t = inMax === inMin ? 0 : (value - inMin) / (inMax - inMin);
+  const out = outMin + t * (outMax - outMin);
+  if (!clampOut) return out;
+  const lo = Math.min(outMin, outMax);
+  const hi = Math.max(outMin, outMax);
+  return Math.min(hi, Math.max(lo, out));
+}
+
+/** Decibels with an explicit sign: "+6.0 dB", "0.0 dB", "-12.5 dB".
+    -Infinity (a gain fader on the floor) reads "-inf dB". */
+export function formatDb(db: number, decimals = 1): string {
+  if (db === Number.NEGATIVE_INFINITY) return "-inf dB";
+  const text = db.toFixed(decimals);
+  return `${db > 0 && !text.startsWith("+") ? "+" : ""}${text} dB`;
+}
+
+/** Frequency with automatic kHz: "440 Hz", "1.2 kHz". */
+export function formatHz(hz: number, decimals = 1): string {
+  if (Math.abs(hz) >= 1000) return `${trim(hz / 1000, Math.max(decimals, 1))} kHz`;
+  return `${trim(hz, decimals)} Hz`;
+}
+
+/** Time with automatic seconds: "350 ms", "1.25 s". */
+export function formatMs(ms: number, decimals = 0): string {
+  if (Math.abs(ms) >= 1000) return `${trim(ms / 1000, Math.max(decimals, 2))} s`;
+  return `${trim(ms, decimals)} ms`;
+}
+
+/** A 0..1 value as "42%". */
+export function formatPercent(value01: number, decimals = 0): string {
+  return `${trim(value01 * 100, decimals)}%`;
+}
+
+/** Semitones with an explicit sign: "+7 st", "0 st", "-12 st". */
+export function formatSemitones(semitones: number, decimals = 0): string {
+  const text = trim(semitones, decimals);
+  return `${semitones > 0 && !text.startsWith("+") ? "+" : ""}${text} st`;
+}
+
+const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+
+/** A MIDI note number as scientific pitch: 60 → "C4", 69 → "A4". */
+export function midiNoteName(note: number): string {
+  const n = Math.round(note);
+  return `${NOTE_NAMES[((n % 12) + 12) % 12]}${Math.floor(n / 12) - 1}`;
+}
+
+/** A MIDI note as a frequency (equal temperament): 69 → 440. Feed your
+    oscillator straight from PianoKeyboard's onNoteOn. */
+export function midiNoteToHz(note: number, a4 = 440): number {
+  return a4 * Math.pow(2, (note - 69) / 12);
+}
+
+/** The nearest MIDI note for a frequency: 440 → 69. */
+export function hzToMidiNote(hz: number, a4 = 440): number {
+  return Math.round(69 + 12 * Math.log2(hz / a4));
+}

package/src/hostConfig.test.tsx

@@ -1,120 +1,120 @@
-import { beforeEach, describe, expect, test } from "bun:test";
-import { useState } from "react";
-
-const batches: unknown[][][] = [];
-(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
-  batches.push(JSON.parse(json));
-};
-
-import { render, unmount, View, Text, TextInput } 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));
-
-beforeEach(() => {
-  unmount();
-  batches.length = 0;
-});
-
-describe("reconciler host config", () => {
-  test("initial mount emits create/setProps/append ops ending at the root", () => {
-    render(
-      <View className="p-4">
-        <Text>hi</Text>
-      </View>,
-    );
-
-    const ops = allOps();
-    const creates = opsNamed("create");
-
-    // view + text + rawtext
-    expect(creates.length).toBe(3);
-    const viewId = (creates.find((op: any) => op[2] === "view") as any)[1];
-    const textId = (creates.find((op: any) => op[2] === "text") as any)[1];
-    const rawId = (creates.find((op: any) => op[2] === "rawtext") as any)[1];
-
-    const viewProps: any = opsNamed("setProps").find((op: any) => op[1] === viewId);
-    expect(viewProps[2].style.padding).toBe(16);
-
-    expect(opsNamed("setText")).toContainEqual(["setText", rawId, "hi"]);
-    expect(opsNamed("appendChild")).toContainEqual(["appendChild", textId, rawId]);
-    expect(opsNamed("appendChild")).toContainEqual(["appendChild", viewId, textId]);
-    expect(opsNamed("appendChild")).toContainEqual(["appendChild", 0, viewId]);
-
-    // root attach comes after the subtree is assembled
-    const opNames = ops.map((op: any) => op.join(":"));
-    expect(opNames.indexOf(`appendChild:0:${viewId}`)).toBeGreaterThan(
-      opNames.indexOf(`appendChild:${viewId}:${textId}`),
-    );
-  });
-
-  test("click handlers register as listeners and receive dispatches", () => {
-    let clicks = 0;
-
-    render(<View onClick={() => clicks++} className="w-4" />);
-
-    const create: any = opsNamed("create")[0];
-    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
-    expect(props[2].listeners).toEqual(["click"]);
-
-    dispatch({ kind: "event", nodeId: create[1], type: "click" });
-    expect(clicks).toBe(1);
-  });
-
-  test("state updates emit new setProps and setText", () => {
-    function Counter() {
-      const [count, setCount] = useState(0);
-      return (
-        <View onClick={() => setCount((c) => c + 1)}>
-          <Text>{`count:${count}`}</Text>
-        </View>
-      );
-    }
-
-    render(<Counter />);
-
-    const viewId = (opsNamed("create").find((op: any) => op[2] === "view") as any)[1];
-    batches.length = 0;
-
-    dispatch({ kind: "event", nodeId: viewId, type: "click" });
-
-    expect(opsNamed("setText").some((op: any) => op[2] === "count:1")).toBe(true);
-  });
-
-  test("TextInput onChange receives the plain string value", () => {
-    const seen: string[] = [];
-
-    render(<TextInput onChange={(v) => seen.push(v)} />);
-
-    const inputId = (opsNamed("create").find((op: any) => op[2] === "textinput") as any)[1];
-    dispatch({ kind: "event", nodeId: inputId, type: "change", payload: { value: "abc" } });
-
-    expect(seen).toEqual(["abc"]);
-  });
-
-  test("conditional removal emits removeChild", () => {
-    function Toggle({ on }: { on: boolean }) {
-      return <View>{on ? <View className="w-2" /> : null}</View>;
-    }
-
-    render(<Toggle on={true} />);
-    // React creates instances bottom-up: the inner view is created first.
-    const childId = (opsNamed("create")[0] as any)[1];
-    batches.length = 0;
-
-    render(<Toggle on={false} />);
-    expect(opsNamed("removeChild").some((op: any) => op[2] === childId)).toBe(true);
-  });
-
-  test("unmount clears the container", () => {
-    render(<View />);
-    batches.length = 0;
-    unmount();
-    const ops = allOps();
-    expect(ops.some((op: any) => op[0] === "removeChild" || op[0] === "clearContainer")).toBe(
-      true,
-    );
-  });
-});
+import { beforeEach, describe, expect, test } from "bun:test";
+import { useState } from "react";
+
+const batches: unknown[][][] = [];
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+
+import { render, unmount, View, Text, TextInput } 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));
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("reconciler host config", () => {
+  test("initial mount emits create/setProps/append ops ending at the root", () => {
+    render(
+      <View className="p-4">
+        <Text>hi</Text>
+      </View>,
+    );
+
+    const ops = allOps();
+    const creates = opsNamed("create");
+
+    // view + text + rawtext
+    expect(creates.length).toBe(3);
+    const viewId = (creates.find((op: any) => op[2] === "view") as any)[1];
+    const textId = (creates.find((op: any) => op[2] === "text") as any)[1];
+    const rawId = (creates.find((op: any) => op[2] === "rawtext") as any)[1];
+
+    const viewProps: any = opsNamed("setProps").find((op: any) => op[1] === viewId);
+    expect(viewProps[2].style.padding).toBe(16);
+
+    expect(opsNamed("setText")).toContainEqual(["setText", rawId, "hi"]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", textId, rawId]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", viewId, textId]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", 0, viewId]);
+
+    // root attach comes after the subtree is assembled
+    const opNames = ops.map((op: any) => op.join(":"));
+    expect(opNames.indexOf(`appendChild:0:${viewId}`)).toBeGreaterThan(
+      opNames.indexOf(`appendChild:${viewId}:${textId}`),
+    );
+  });
+
+  test("click handlers register as listeners and receive dispatches", () => {
+    let clicks = 0;
+
+    render(<View onClick={() => clicks++} className="w-4" />);
+
+    const create: any = opsNamed("create")[0];
+    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
+    expect(props[2].listeners).toEqual(["click"]);
+
+    dispatch({ kind: "event", nodeId: create[1], type: "click" });
+    expect(clicks).toBe(1);
+  });
+
+  test("state updates emit new setProps and setText", () => {
+    function Counter() {
+      const [count, setCount] = useState(0);
+      return (
+        <View onClick={() => setCount((c) => c + 1)}>
+          <Text>{`count:${count}`}</Text>
+        </View>
+      );
+    }
+
+    render(<Counter />);
+
+    const viewId = (opsNamed("create").find((op: any) => op[2] === "view") as any)[1];
+    batches.length = 0;
+
+    dispatch({ kind: "event", nodeId: viewId, type: "click" });
+
+    expect(opsNamed("setText").some((op: any) => op[2] === "count:1")).toBe(true);
+  });
+
+  test("TextInput onChange receives the plain string value", () => {
+    const seen: string[] = [];
+
+    render(<TextInput onChange={(v) => seen.push(v)} />);
+
+    const inputId = (opsNamed("create").find((op: any) => op[2] === "textinput") as any)[1];
+    dispatch({ kind: "event", nodeId: inputId, type: "change", payload: { value: "abc" } });
+
+    expect(seen).toEqual(["abc"]);
+  });
+
+  test("conditional removal emits removeChild", () => {
+    function Toggle({ on }: { on: boolean }) {
+      return <View>{on ? <View className="w-2" /> : null}</View>;
+    }
+
+    render(<Toggle on={true} />);
+    // React creates instances bottom-up: the inner view is created first.
+    const childId = (opsNamed("create")[0] as any)[1];
+    batches.length = 0;
+
+    render(<Toggle on={false} />);
+    expect(opsNamed("removeChild").some((op: any) => op[2] === childId)).toBe(true);
+  });
+
+  test("unmount clears the container", () => {
+    render(<View />);
+    batches.length = 0;
+    unmount();
+    const ops = allOps();
+    expect(ops.some((op: any) => op[0] === "removeChild" || op[0] === "clearContainer")).toBe(
+      true,
+    );
+  });
+});