@vsreact/core 0.0.11 → 0.0.12

package/build.ts

@@ -1,24 +1,24 @@
-// Bundles a VSReacT app entry into a single QuickJS-ready IIFE.
-//   bun run build.ts [entry] [outfile]
-export {};
-
-const entry = process.argv[2] ?? "demo/main.tsx";
-const outfile = process.argv[3] ?? "demo/build/main.js";
-
-const result = await Bun.build({
-  entrypoints: [entry],
-  target: "browser",
-  format: "iife",
-  minify: false,
-  define: {
-    "process.env.NODE_ENV": '"production"',
-  },
-});
-
-if (!result.success) {
-  for (const log of result.logs) console.error(log);
-  process.exit(1);
-}
-
-await Bun.write(outfile, await result.outputs[0].text());
-console.log(`built ${entry} -> ${outfile}`);
+// Bundles a VSReacT app entry into a single QuickJS-ready IIFE.
+//   bun run build.ts [entry] [outfile]
+export {};
+
+const entry = process.argv[2] ?? "demo/main.tsx";
+const outfile = process.argv[3] ?? "demo/build/main.js";
+
+const result = await Bun.build({
+  entrypoints: [entry],
+  target: "browser",
+  format: "iife",
+  minify: false,
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+});
+
+if (!result.success) {
+  for (const log of result.logs) console.error(log);
+  process.exit(1);
+}
+
+await Bun.write(outfile, await result.outputs[0].text());
+console.log(`built ${entry} -> ${outfile}`);

package/dist/components.d.ts

@@ -12,5 +12,9 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export type { NumberBoxProps, CheckboxProps, RadioGroupProps, ParamNumberBoxProps, ParamCheckboxProps, ParamRadioGroupProps, } 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 { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";
 export type { MacroPadProps, ParamMacroPadProps, HardwareKnobProps, ParamHardwareKnobProps, CrossfaderProps, ParamCrossfaderProps, PulseOrbProps, } from "./specialty";

package/dist/components.js

@@ -12,4 +12,6 @@ export { Button } from "./button";
 export { Tooltip, Modal } from "./popover";
 export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
+export { PianoKeyboard } from "./keyboard";
+export { StepSequencer } from "./sequencer";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/feedback.d.ts

@@ -5,12 +5,15 @@ 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;
 }
 /** 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 declare function ProgressBar({ value, width, height, showPercent, indeterminate, trackColor, color, label, }: ProgressBarProps): import("react").JSX.Element;
 export interface SpinnerProps {
     /** Diameter. Default 28. */
     size?: number;

package/dist/feedback.js

@@ -6,9 +6,19 @@ 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, }) {
+export function ProgressBar({ value, width = 200, height = 8, showPercent = false, indeterminate = 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] }));
+    // 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 = (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(View, { className: "rounded-full overflow-hidden relative", style: { width, height, backgroundColor: trackColor }, children: indeterminate ? (_jsx(View, { className: "rounded-full absolute", style: {
+                        left: sweep * (width + segment) - segment,
+                        top: 0,
+                        width: segment,
+                        height,
+                        backgroundColor: color,
+                    } })) : (_jsx(View, { className: "rounded-full", style: { width: level * width, height, backgroundColor: color } })) }), showPercent && !indeterminate ? (_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 })] }));

package/dist/format.d.ts

@@ -0,0 +1,16 @@
+/** Linear interpolation of `value` from [inMin, inMax] to [outMin, outMax].
+    `clampOut` pins the result inside the output range. */
+export declare function mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number, clampOut?: boolean): number;
+/** 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 declare function formatDb(db: number, decimals?: number): string;
+/** Frequency with automatic kHz: "440 Hz", "1.2 kHz". */
+export declare function formatHz(hz: number, decimals?: number): string;
+/** Time with automatic seconds: "350 ms", "1.25 s". */
+export declare function formatMs(ms: number, decimals?: number): string;
+/** A 0..1 value as "42%". */
+export declare function formatPercent(value01: number, decimals?: number): string;
+/** Semitones with an explicit sign: "+7 st", "0 st", "-12 st". */
+export declare function formatSemitones(semitones: number, decimals?: number): string;
+/** A MIDI note number as scientific pitch: 60 → "C4", 69 → "A4". */
+export declare function midiNoteName(note: number): string;

package/dist/format.js

@@ -0,0 +1,50 @@
+// 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, decimals) => 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, inMin, inMax, outMin, outMax, clampOut = false) {
+    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, decimals = 1) {
+    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, decimals = 1) {
+    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, decimals = 0) {
+    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, decimals = 0) {
+    return `${trim(value01 * 100, decimals)}%`;
+}
+/** Semitones with an explicit sign: "+7 st", "0 st", "-12 st". */
+export function formatSemitones(semitones, decimals = 0) {
+    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) {
+    const n = Math.round(note);
+    return `${NOTE_NAMES[((n % 12) + 12) % 12]}${Math.floor(n / 12) - 1}`;
+}

package/dist/index.d.ts

@@ -28,6 +28,11 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export type { NumberBoxProps, CheckboxProps, RadioGroupProps, ParamNumberBoxProps, ParamCheckboxProps, ParamRadioGroupProps, } 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 { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, } from "./format";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";
 export type { MacroPadProps, ParamMacroPadProps, HardwareKnobProps, ParamHardwareKnobProps, CrossfaderProps, ParamCrossfaderProps, PulseOrbProps, } from "./specialty";
 export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";

package/dist/index.js

@@ -18,4 +18,7 @@ export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKno
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
+export { PianoKeyboard } from "./keyboard";
+export { StepSequencer } from "./sequencer";
+export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, } from "./format";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/keyboard.d.ts

@@ -0,0 +1,23 @@
+export interface PianoKeyboardProps {
+    /** MIDI note of the leftmost key (snapped down to a white key).
+        Default 48 (C3). */
+    startNote?: number;
+    /** Whole octaves; the keyboard ends on the top C. Default 2. */
+    octaves?: number;
+    /** Width of one white key. Default 24. */
+    whiteKeyWidth?: number;
+    /** White-key height; blacks are 60% of it. Default 96. */
+    height?: number;
+    /** Externally-held notes (host MIDI in) — painted active. */
+    heldNotes?: number[];
+    /** Prints "C3" on each C. Default true. */
+    showOctaveLabels?: boolean;
+    disabled?: boolean;
+    whiteColor?: string;
+    blackColor?: string;
+    activeColor?: string;
+    borderColor?: string;
+    onNoteOn?: (note: number) => void;
+    onNoteOff?: (note: number) => void;
+}
+export declare function PianoKeyboard({ startNote, octaves, whiteKeyWidth, height, heldNotes, showOctaveLabels, disabled, whiteColor, blackColor, activeColor, borderColor, onNoteOn, onNoteOff, }: PianoKeyboardProps): import("react").JSX.Element;

package/dist/keyboard.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The playable piano keyboard — preview a patch without touching the
+// host. Views only (white row + absolutely-positioned blacks); press
+// for note-on, release for note-off, drag across keys for glissando.
+import { useRef, useState } from "react";
+import { View, Text } from "./primitives";
+import { midiNoteName } from "./format";
+const BLACK_SEMIS = new Set([1, 3, 6, 8, 10]);
+const isBlack = (note) => BLACK_SEMIS.has(((note % 12) + 12) % 12);
+export function PianoKeyboard({ startNote = 48, octaves = 2, whiteKeyWidth = 24, height = 96, heldNotes, showOctaveLabels = true, disabled, whiteColor = "#ECF2E8", blackColor = "#17191C", activeColor = "#C6F135", borderColor = "#00000066", onNoteOn, onNoteOff, }) {
+    const [pressed, setPressed] = useState(null);
+    const active = useRef(null);
+    // Snap the start onto a white key so the layout math stays honest.
+    let base = Math.round(startNote);
+    while (isBlack(base))
+        base += 1;
+    const whiteCount = Math.max(1, Math.round(octaves)) * 7 + 1;
+    const blackWidth = whiteKeyWidth * 0.62;
+    const blackHeight = height * 0.6;
+    const whites = [];
+    const blacks = [];
+    for (let note = base; whites.length < whiteCount; note++) {
+        if (isBlack(note)) {
+            blacks.push({ note, left: whites.length * whiteKeyWidth - blackWidth / 2 });
+        }
+        else {
+            whites.push(note);
+        }
+    }
+    const press = (note) => {
+        if (active.current === note)
+            return;
+        if (active.current !== null)
+            onNoteOff?.(active.current);
+        active.current = note;
+        setPressed(note);
+        onNoteOn?.(note);
+    };
+    const release = () => {
+        if (active.current === null)
+            return;
+        onNoteOff?.(active.current);
+        active.current = null;
+        setPressed(null);
+    };
+    /** The key under an approximate pointer position (glissando). */
+    const noteAt = (x, y) => {
+        if (y <= blackHeight) {
+            for (const black of blacks) {
+                if (x >= black.left && x <= black.left + blackWidth)
+                    return black.note;
+            }
+        }
+        const index = Math.min(whiteCount - 1, Math.max(0, Math.floor(x / whiteKeyWidth)));
+        return whites[index];
+    };
+    const isActive = (note) => pressed === note || (heldNotes !== undefined && heldNotes.includes(note));
+    const keyHandlers = (note, centerX, centerY) => disabled
+        ? {}
+        : {
+            onMouseDown: () => press(note),
+            onMouseUp: release,
+            onDrag: (e) => press(noteAt(centerX + e.dx, centerY + e.dy)),
+            onDragEnd: release,
+        };
+    return (_jsxs(View, { className: `flex-row relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width: whiteCount * whiteKeyWidth, height }, children: [whites.map((note, i) => (_jsx(View, { className: "border rounded-b-[3] justify-end items-center pb-1", style: {
+                    width: whiteKeyWidth,
+                    height,
+                    backgroundColor: isActive(note) ? activeColor : whiteColor,
+                    borderColor,
+                }, ...keyHandlers(note, (i + 0.5) * whiteKeyWidth, height * 0.8), children: showOctaveLabels && ((note % 12) + 12) % 12 === 0 ? (_jsx(Text, { className: "text-[8] font-bold", style: { color: "#00000088" }, children: midiNoteName(note) })) : null }, note))), blacks.map((black) => (_jsx(View, { className: "absolute border rounded-b-[3]", style: {
+                    left: black.left,
+                    top: 0,
+                    width: blackWidth,
+                    height: blackHeight,
+                    backgroundColor: isActive(black.note) ? activeColor : blackColor,
+                    borderColor,
+                }, ...keyHandlers(black.note, black.left + blackWidth / 2, blackHeight / 2) }, black.note)))] }));
+}

package/dist/sequencer.d.ts

@@ -0,0 +1,23 @@
+export interface StepSequencerProps {
+    /** rows × steps. `pattern[row][step]` true = lit. */
+    pattern: boolean[][];
+    /** The column currently playing — painted with a bright ring. */
+    playhead?: number;
+    /** Printed left of each row ("KICK", "SNARE"…). */
+    rowLabels?: string[];
+    /** Cell edge length. Default 20. */
+    cellSize?: number;
+    /** Space between cells. Default 5. */
+    gap?: number;
+    /** Downbeat tint every N steps. Default 4; 0 disables. */
+    groupEvery?: number;
+    disabled?: boolean;
+    cellColor?: string;
+    /** Downbeat cells (step 0, 4, 8…) when unlit. */
+    downbeatColor?: string;
+    activeColor?: string;
+    playheadColor?: string;
+    labelColor?: string;
+    onToggle: (row: number, step: number, next: boolean) => void;
+}
+export declare function StepSequencer({ pattern, playhead, rowLabels, cellSize, gap, groupEvery, disabled, cellColor, downbeatColor, activeColor, playheadColor, labelColor, onToggle, }: StepSequencerProps): import("react").JSX.Element;

package/dist/sequencer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The step sequencer grid — rows of cells you click on and off, with a
+// playhead column the host drives. Patterns live in the app's state;
+// the component is fully controlled.
+import { View, Text } from "./primitives";
+export function StepSequencer({ pattern, playhead, rowLabels, cellSize = 20, gap = 5, groupEvery = 4, disabled, cellColor = "#242922", downbeatColor = "#2E342B", activeColor = "#C6F135", playheadColor = "#ECF2E8", labelColor = "#a1a1aa", onToggle, }) {
+    const labelWidth = rowLabels !== undefined && rowLabels.length > 0
+        ? Math.max(...rowLabels.map((label) => label.length)) * 7 + 10
+        : 0;
+    return (_jsx(View, { className: disabled ? "opacity-40" : "", style: { rowGap: gap }, children: pattern.map((row, r) => (_jsxs(View, { className: "flex-row items-center", style: { columnGap: gap }, children: [labelWidth > 0 ? (_jsx(Text, { className: "text-[10] font-bold tracking-widest", style: { width: labelWidth, color: labelColor }, children: rowLabels?.[r] ?? "" })) : null, row.map((lit, s) => (_jsx(View, { className: `rounded-[4] border ${disabled ? "" : "cursor-pointer"}`, style: {
+                        width: cellSize,
+                        height: cellSize,
+                        backgroundColor: lit
+                            ? activeColor
+                            : groupEvery > 0 && s % groupEvery === 0
+                                ? downbeatColor
+                                : cellColor,
+                        borderColor: s === playhead ? playheadColor : "#00000055",
+                    }, onClick: disabled ? undefined : () => onToggle(r, s, !lit) }, s)))] }, r))) }));
+}

package/dist/tw.js

@@ -217,6 +217,11 @@ function resolveClass(cls) {
         case "text": {
             if (rest in textSizes)
                 return { fontSize: textSizes[rest] };
+            if (rest.startsWith("[") && !rest.startsWith("[#")) {
+                const size = parseLength(rest);
+                if (typeof size === "number")
+                    return { fontSize: size };
+            }
             const color = resolveColor(rest);
             return color !== undefined ? { color } : undefined;
         }

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.12",
+  "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,10 @@ 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 {
   MacroPad,
   ParamMacroPad,