@vsreact/core 0.0.12 → 0.0.14

package/dist/components.d.ts

@@ -16,5 +16,9 @@ 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, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, } from "./synth";
+export type { ADSRKey, ADSREnvelopeProps, ParamADSREnvelopeProps, PitchBendProps, ModWheelProps, ParamModWheelProps, ParamPitchBendProps, } from "./synth";
 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

@@ -14,4 +14,6 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export { ProgressBar, Spinner } from "./feedback";
 export { PianoKeyboard } from "./keyboard";
 export { StepSequencer } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
+export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, } from "./synth";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/format.d.ts

@@ -14,3 +14,8 @@ export declare function formatPercent(value01: number, decimals?: number): strin
 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;
+/** A MIDI note as a frequency (equal temperament): 69 → 440. Feed your
+    oscillator straight from PianoKeyboard's onNoteOn. */
+export declare function midiNoteToHz(note: number, a4?: number): number;
+/** The nearest MIDI note for a frequency: 440 → 69. */
+export declare function hzToMidiNote(hz: number, a4?: number): number;

package/dist/format.js

@@ -48,3 +48,12 @@ export function midiNoteName(note) {
     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, a4 = 440) {
+    return a4 * Math.pow(2, (note - 69) / 12);
+}
+/** The nearest MIDI note for a frequency: 440 → 69. */
+export function hzToMidiNote(hz, a4 = 440) {
+    return Math.round(69 + 12 * Math.log2(hz / a4));
+}

package/dist/hooks.d.ts

@@ -14,6 +14,14 @@ export declare function useLayoutRect(): [LayoutRect | null, (rect: LayoutRect)
  *   useNativeEvent("download:progress", (p) => setProgress(p.ratio));
  */
 export declare function useNativeEvent(name: string, handler: (payload: any) => void): void;
+/**
+ * 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 declare function useNativeValue<T = any>(name: string, initial: T): T;
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

package/dist/hooks.js

@@ -23,6 +23,18 @@ export function useNativeEvent(name, handler) {
     handlerRef.current = handler;
     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(name, initial) {
+    const [value, setValue] = useState(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/dist/index.d.ts

@@ -4,7 +4,7 @@ export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
-export { useNativeEvent, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
+export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";
@@ -32,7 +32,11 @@ 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 { Tabs, Disclosure } from "./layout";
+export type { TabsProps, DisclosureProps } from "./layout";
+export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, adsrLevelAt, } from "./synth";
+export type { ADSRKey, ADSREnvelopeProps, ParamADSREnvelopeProps, PitchBendProps, ModWheelProps, ParamModWheelProps, ParamPitchBendProps, } from "./synth";
+export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, midiNoteToHz, hzToMidiNote, } 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

@@ -5,7 +5,7 @@ import "./bridge";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
-export { useNativeEvent, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
+export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export { Button } from "./button";
@@ -20,5 +20,7 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export { ProgressBar, Spinner } from "./feedback";
 export { PianoKeyboard } from "./keyboard";
 export { StepSequencer } from "./sequencer";
-export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, } from "./format";
+export { Tabs, Disclosure } from "./layout";
+export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, adsrLevelAt, } from "./synth";
+export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, midiNoteToHz, hzToMidiNote, } from "./format";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/layout.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+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 declare function Tabs({ labels, index, defaultIndex, onChange, width, gap, accentColor, textColor, activeTextColor, trackColor, children, }: TabsProps): import("react").JSX.Element;
+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 declare function Disclosure({ title, open, defaultOpen, onChange, width, textColor, accentColor, children, }: DisclosureProps): import("react").JSX.Element;

package/dist/layout.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Workspace structure — tabs for multi-page plugin UIs and the
+// disclosure row for collapsible settings sections.
+import { useState } from "react";
+import { View, Text } from "./primitives";
+const clampIndex = (i, count) => Math.min(Math.max(0, count - 1), Math.max(0, i));
+/** 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, }) {
+    const [internal, setInternal] = useState(defaultIndex);
+    const current = clampIndex(index ?? internal, labels.length);
+    const select = (i) => {
+        setInternal(i);
+        onChange?.(i);
+    };
+    const panels = Array.isArray(children) ? children : children !== undefined ? [children] : [];
+    return (_jsxs(View, { style: width !== undefined ? { width } : undefined, children: [_jsxs(View, { className: "flex-row relative", style: { columnGap: 4 }, children: [_jsx(View, { className: "absolute left-0 right-0 h-[1]", style: { bottom: 0, backgroundColor: trackColor } }), labels.map((label, i) => (_jsxs(View, { className: "items-center cursor-pointer px-3 pt-1", onClick: () => select(i), children: [_jsx(Text, { className: "text-[11] font-bold tracking-widest", style: { color: i === current ? activeTextColor : textColor }, children: label }), _jsx(View, { className: "rounded-full self-stretch", style: {
+                                    height: 2,
+                                    marginTop: 6,
+                                    backgroundColor: i === current ? accentColor : "#00000000",
+                                } })] }, `${label}-${i}`)))] }), panels.length > 0 ? (_jsx(View, { style: { marginTop: gap }, children: panels[Math.min(current, panels.length - 1)] })) : null] }));
+}
+/** 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, }) {
+    const [internal, setInternal] = useState(defaultOpen);
+    const isOpen = open ?? internal;
+    const toggle = () => {
+        setInternal(!isOpen);
+        onChange?.(!isOpen);
+    };
+    return (_jsxs(View, { style: width !== undefined ? { width } : undefined, children: [_jsxs(View, { className: "flex-row items-center gap-2 cursor-pointer py-1", onClick: toggle, children: [_jsx(Text, { className: "text-[10] font-bold", style: { color: accentColor, width: 10 }, children: isOpen ? "▾" : "▸" }), _jsx(Text, { className: "text-[11] font-bold tracking-widest", style: { color: textColor }, children: title })] }), isOpen ? _jsx(View, { className: "pt-2 pl-5", children: children }) : null] }));
+}

package/dist/meter.d.ts

@@ -22,6 +22,9 @@ export interface MeterProps {
     thickness?: number;
     /** Horizontal bar instead of the vertical default. */
     horizontal?: boolean;
+    /** Fill from the top (vertical) / right (horizontal) — gain-reduction
+        meters. Default false. */
+    reverse?: boolean;
     /** Show the peak-hold line. Default true. */
     peak?: boolean;
     holdMs?: number;
@@ -34,4 +37,4 @@ export interface MeterProps {
     label?: string;
 }
 /** A natively painted level meter with hot zone + peak hold. */
-export declare function Meter({ value, length, thickness, horizontal, peak, holdMs, decayPerSecond, hotFrom, trackColor, color, hotColor, label, }: MeterProps): import("react").JSX.Element;
+export declare function Meter({ value, length, thickness, horizontal, reverse, peak, holdMs, decayPerSecond, hotFrom, trackColor, color, hotColor, label, }: MeterProps): import("react").JSX.Element;

package/dist/meter.js

@@ -34,14 +34,22 @@ export function usePeakHold(value, options = {}) {
     return Math.max(peak, value);
 }
 /** A natively painted level meter with hot zone + peak hold. */
-export function Meter({ value, length = 120, thickness = 10, horizontal, peak = true, holdMs, decayPerSecond, hotFrom = 0.85, trackColor = "#141714", color = "#C6F135", hotColor = "#FF4545", label, }) {
+export function Meter({ value, length = 120, thickness = 10, horizontal, reverse = false, peak = true, holdMs, decayPerSecond, hotFrom = 0.85, trackColor = "#141714", color = "#C6F135", hotColor = "#FF4545", label, }) {
     const level = clamp01(value);
     const held = usePeakHold(level, { holdMs, decayPerSecond });
     const hot = clamp01(hotFrom);
     const fill = Math.min(level, hot) * length;
     const hotFill = level > hot ? (level - hot) * length : 0;
     const peakAt = clamp01(held) * length;
-    const bar = horizontal ? (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: length, height: thickness, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute left-0 top-0 bottom-0", style: { width: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute top-0 bottom-0", style: { left: hot * length, width: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute top-0 bottom-0 w-[2]", style: { left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] })) : (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: thickness, height: length, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute bottom-0 left-0 right-0", style: { height: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute left-0 right-0", style: { bottom: hot * length, height: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute left-0 right-0 h-[2]", style: { bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] }));
+    const bar = horizontal ? (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: length, height: thickness, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute top-0 bottom-0", style: reverse ? { right: 0, width: fill, backgroundColor: color } : { left: 0, width: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute top-0 bottom-0", style: reverse
+                    ? { right: hot * length, width: hotFill, backgroundColor: hotColor }
+                    : { left: hot * length, width: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute top-0 bottom-0 w-[2]", style: reverse
+                    ? { right: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+                    : { left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] })) : (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: thickness, height: length, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute left-0 right-0", style: reverse ? { top: 0, height: fill, backgroundColor: color } : { bottom: 0, height: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute left-0 right-0", style: reverse
+                    ? { top: hot * length, height: hotFill, backgroundColor: hotColor }
+                    : { bottom: hot * length, height: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute left-0 right-0 h-[2]", style: reverse
+                    ? { top: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+                    : { bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : 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/synth.d.ts

@@ -0,0 +1,79 @@
+export type ADSRKey = "attack" | "decay" | "sustain" | "release";
+export interface ADSREnvelopeProps {
+    /** All 0..1: times are a fraction of each stage's max width. */
+    attack: number;
+    decay: number;
+    sustain: number;
+    release: number;
+    width?: number;
+    height?: number;
+    /** Fill resolution. Default 44 columns. */
+    columns?: number;
+    disabled?: boolean;
+    trackColor?: string;
+    /** The filled envelope body. */
+    color?: string;
+    handleColor?: string;
+    label?: string;
+    onChange: (key: ADSRKey, value: number) => void;
+    onBegin?: (key: ADSRKey) => void;
+    onEnd?: (key: ADSRKey) => void;
+}
+/** The envelope level at x, piecewise over A → D → S plateau → R. */
+export declare function adsrLevelAt(x: number, width: number, attack: number, decay: number, sustain: number, release: number): number;
+/** The classic four-corner envelope editor: drag the attack peak, the
+    decay/sustain corner (both axes), and the release corner. */
+export declare function ADSREnvelope({ attack, decay, sustain, release, width, height, columns, disabled, trackColor, color, handleColor, label, onChange, onBegin, onEnd, }: ADSREnvelopeProps): import("react").JSX.Element;
+export interface ParamADSREnvelopeProps {
+    attackId: string;
+    decayId: string;
+    sustainId: string;
+    releaseId: string;
+    width?: number;
+    height?: number;
+    color?: string;
+    label?: string;
+}
+/** An ADSREnvelope over four host parameters, gestures opened per
+    handle (the decay/sustain corner drives both together). */
+export declare function ParamADSREnvelope({ attackId, decayId, sustainId, releaseId, ...visual }: ParamADSREnvelopeProps): import("react").JSX.Element;
+interface WheelSkin {
+    width?: number;
+    height?: number;
+    disabled?: boolean;
+    trackColor?: string;
+    thumbColor?: string;
+    accentColor?: string;
+    label?: string;
+}
+export interface PitchBendProps extends WheelSkin {
+    /** Bend, −1..+1; fires continuously and again as the spring returns. */
+    onChange?: (value: number) => void;
+    /** Snap back to center on release. Default true. */
+    springBack?: boolean;
+}
+/** The pitch wheel: drag up/down from center, springs back to 0 on
+    release (momentary — it owns its own state). */
+export declare function PitchBend({ onChange, springBack, ...skin }: PitchBendProps): import("react").JSX.Element;
+export interface ModWheelProps extends WheelSkin {
+    /** 0..1, controlled — mod wheels stay where you leave them. */
+    value: number;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** The mod wheel: a vertical strip that holds its position. */
+export declare function ModWheel({ value, onChange, onBegin, onEnd, ...skin }: ModWheelProps): import("react").JSX.Element;
+export interface ParamModWheelProps extends WheelSkin {
+    paramId: string;
+}
+/** A ModWheel bound to a host parameter. */
+export declare function ParamModWheel({ paramId, ...skin }: ParamModWheelProps): import("react").JSX.Element;
+export interface ParamPitchBendProps extends WheelSkin {
+    /** A 0..1 host parameter with 0.5 center. */
+    paramId: string;
+}
+/** A PitchBend writing 0.5 ± bend/2 to a host parameter; release closes
+    the gesture at dead center (the visual spring is cosmetic). */
+export declare function ParamPitchBend({ paramId, ...skin }: ParamPitchBendProps): import("react").JSX.Element;
+export {};

package/dist/synth.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Synth-surface controls — the ADSR envelope editor and the pitch/mod
+// wheels. Views only: the envelope is a filled column fill (like
+// <Waveform>) with draggable corner handles riding on top.
+import { useEffect, useRef, useState } from "react";
+import { View, Text } from "./primitives";
+import { useSpring } from "./animation";
+import { useParameter } from "./parameters";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** The envelope level at x, piecewise over A → D → S plateau → R. */
+export function adsrLevelAt(x, width, attack, decay, sustain, release) {
+    const segW = width * 0.27;
+    const ax = attack * segW;
+    const dw = decay * segW;
+    const rw = release * segW;
+    const rx = width - rw;
+    if (x <= ax)
+        return ax === 0 ? 1 : x / ax;
+    if (x <= ax + dw)
+        return 1 - (1 - sustain) * ((x - ax) / (dw || 1));
+    if (x <= rx)
+        return sustain;
+    return rw === 0 ? 0 : Math.max(0, sustain * (1 - (x - rx) / rw));
+}
+/** The classic four-corner envelope editor: drag the attack peak, the
+    decay/sustain corner (both axes), and the release corner. */
+export function ADSREnvelope({ attack, decay, sustain, release, width = 220, height = 96, columns = 44, disabled, trackColor = "#141714", color = "#C6F13566", handleColor = "#ECF2E8", label, onChange, onBegin, onEnd, }) {
+    const start = useRef({ attack: 0, decay: 0, sustain: 0, release: 0 });
+    const a = clamp01(attack);
+    const d = clamp01(decay);
+    const s = clamp01(sustain);
+    const r = clamp01(release);
+    const segW = width * 0.27;
+    const HANDLE = 18;
+    const handleProps = (keys, move) => disabled
+        ? {}
+        : {
+            onDragStart: () => {
+                start.current = { attack: a, decay: d, sustain: s, release: r };
+                for (const key of keys)
+                    onBegin?.(key);
+            },
+            onDrag: (e) => move(e.dx, e.dy),
+            onDragEnd: () => {
+                for (const key of keys)
+                    onEnd?.(key);
+            },
+        };
+    const dot = (left, top, keys, move) => (_jsx(View, { className: `absolute items-center justify-center ${disabled ? "" : "cursor-pointer"}`, style: { left: left - HANDLE / 2, top: top - HANDLE / 2, width: HANDLE, height: HANDLE }, ...handleProps(keys, move), children: _jsx(View, { className: "rounded-full border", style: { width: 9, height: 9, backgroundColor: handleColor, borderColor: "#00000088" } }) }));
+    const body = (_jsxs(View, { className: `relative rounded overflow-hidden ${disabled ? "opacity-40" : ""}`, style: { width, height, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute inset-0 flex-row items-end px-[1]", style: { columnGap: 1 }, children: Array.from({ length: columns }, (_, i) => {
+                    const level = adsrLevelAt(((i + 0.5) / columns) * width, width, a, d, s, r);
+                    return (_jsx(View, { className: "flex-1 rounded-[1]", style: { height: Math.max(1, level * (height - 4)), backgroundColor: color } }, i));
+                }) }), dot(a * segW, 4, ["attack"], (dx) => onChange("attack", clamp01(start.current.attack + dx / segW))), dot(a * segW + d * segW, 4 + (1 - s) * (height - 8), ["decay", "sustain"], (dx, dy) => {
+                onChange("decay", clamp01(start.current.decay + dx / segW));
+                onChange("sustain", clamp01(start.current.sustain - dy / (height - 8)));
+            }), dot(width - r * segW, 4 + (1 - s) * (height - 8), ["release"], (dx) => onChange("release", clamp01(start.current.release - dx / segW)))] }));
+    if (label === undefined)
+        return body;
+    return (_jsxs(View, { className: "items-center gap-2", children: [body, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));
+}
+/** An ADSREnvelope over four host parameters, gestures opened per
+    handle (the decay/sustain corner drives both together). */
+export function ParamADSREnvelope({ attackId, decayId, sustainId, releaseId, ...visual }) {
+    const params = {
+        attack: useParameter(attackId),
+        decay: useParameter(decayId),
+        sustain: useParameter(sustainId),
+        release: useParameter(releaseId),
+    };
+    return (_jsx(ADSREnvelope, { attack: params.attack.value, decay: params.decay.value, sustain: params.sustain.value, release: params.release.value, onChange: (key, value) => params[key].set(value), onBegin: (key) => params[key].begin(), onEnd: (key) => params[key].end(), ...visual }));
+}
+function WheelChrome({ value01, width = 34, height = 110, disabled, trackColor = "#141714", thumbColor = "#3A4038", accentColor = "#C6F135", label, centerMark, handlers, }) {
+    const THUMB = 16;
+    const travel = height - 4 - THUMB;
+    const wheel = (_jsxs(View, { className: `relative rounded-lg border overflow-hidden ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width, height, backgroundColor: trackColor, borderColor: "#00000066" }, ...handlers, children: [centerMark ? (_jsx(View, { className: "absolute left-0 right-0 h-[1]", style: { top: height / 2, backgroundColor: "#FFFFFF2E" } })) : null, _jsx(View, { className: "absolute left-[2] right-[2] rounded", style: { top: 2 + (1 - clamp01(value01)) * travel, height: THUMB, backgroundColor: thumbColor }, children: _jsx(View, { className: "absolute left-[2] right-[2] rounded-full", style: { top: THUMB / 2 - 1.25, height: 2.5, backgroundColor: accentColor } }) })] }));
+    if (label === undefined)
+        return wheel;
+    return (_jsxs(View, { className: "items-center gap-2", children: [wheel, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));
+}
+/** The pitch wheel: drag up/down from center, springs back to 0 on
+    release (momentary — it owns its own state). */
+export function PitchBend({ onChange, springBack = true, ...skin }) {
+    const [drag, setDrag] = useState(null);
+    const sprung = useSpring(drag ?? 0, { stiffness: 320, damping: 24 });
+    const value = drag ?? (springBack ? sprung : 0);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => {
+        onChangeRef.current?.(value);
+    }, [value]);
+    const startValue = useRef(0);
+    const height = skin.height ?? 110;
+    const handlers = skin.disabled
+        ? {}
+        : {
+            onDragStart: () => {
+                startValue.current = drag ?? 0;
+                setDrag(startValue.current);
+            },
+            onDrag: (e) => setDrag(Math.min(1, Math.max(-1, startValue.current - e.dy / (height / 2)))),
+            onDragEnd: () => setDrag(null),
+        };
+    return _jsx(WheelChrome, { value01: (value + 1) / 2, centerMark: true, handlers: handlers, ...skin });
+}
+/** The mod wheel: a vertical strip that holds its position. */
+export function ModWheel({ value, onChange, onBegin, onEnd, ...skin }) {
+    const startValue = useRef(0);
+    const height = skin.height ?? 110;
+    const handlers = skin.disabled
+        ? {}
+        : {
+            onDragStart: () => {
+                startValue.current = clamp01(value);
+                onBegin?.();
+            },
+            onDrag: (e) => onChange(clamp01(startValue.current - e.dy / (height - 20))),
+            onDragEnd: () => onEnd?.(),
+        };
+    return _jsx(WheelChrome, { value01: clamp01(value), handlers: handlers, ...skin });
+}
+/** A ModWheel bound to a host parameter. */
+export function ParamModWheel({ paramId, ...skin }) {
+    const param = useParameter(paramId);
+    return (_jsx(ModWheel, { value: param.value, onChange: param.set, onBegin: param.begin, onEnd: param.end, label: skin.label ?? param.name.toUpperCase(), ...skin }));
+}
+/** A PitchBend writing 0.5 ± bend/2 to a host parameter; release closes
+    the gesture at dead center (the visual spring is cosmetic). */
+export function ParamPitchBend({ paramId, ...skin }) {
+    const param = useParameter(paramId);
+    const active = useRef(false);
+    return (_jsx(PitchBend, { onChange: (v) => {
+            if (v === 0 && !active.current)
+                return; // at rest (incl. mount) — nothing to write
+            if (!active.current) {
+                active.current = true;
+                param.begin();
+            }
+            param.set(0.5 + v / 2);
+            if (v === 0) {
+                active.current = false;
+                param.end();
+            }
+        }, ...skin }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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

@@ -68,6 +68,25 @@ 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,
+  PitchBend,
+  ModWheel,
+  ParamModWheel,
+  ParamPitchBend,
+} from "./synth";
+export type {
+  ADSRKey,
+  ADSREnvelopeProps,
+  ParamADSREnvelopeProps,
+  PitchBendProps,
+  ModWheelProps,
+  ParamModWheelProps,
+  ParamPitchBendProps,
+} from "./synth";
 export {
   MacroPad,
   ParamMacroPad,

package/src/format.ts

@@ -60,3 +60,14 @@ 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/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,
@@ -94,6 +95,26 @@ 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,
+  PitchBend,
+  ModWheel,
+  ParamModWheel,
+  ParamPitchBend,
+  adsrLevelAt,
+} from "./synth";
+export type {
+  ADSRKey,
+  ADSREnvelopeProps,
+  ParamADSREnvelopeProps,
+  PitchBendProps,
+  ModWheelProps,
+  ParamModWheelProps,
+  ParamPitchBendProps,
+} from "./synth";
 export {
   mapRange,
   formatDb,
@@ -102,6 +123,8 @@ export {
   formatPercent,
   formatSemitones,
   midiNoteName,
+  midiNoteToHz,
+  hzToMidiNote,
 } from "./format";
 export {
   MacroPad,