@vsreact/core 0.0.5 → 0.0.7

package/dist/button.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface ButtonProps {
+    label?: string;
+    children?: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    /** solid (default) — filled; outline — bordered; ghost — text only. */
+    variant?: "solid" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    accentColor?: string;
+    /** Text color for the solid variant (default near-black). */
+    textColor?: string;
+}
+/** A pressable with sensible plugin styling — solid/outline/ghost. */
+export declare function Button({ label, children, onClick, disabled, variant, size, accentColor, textColor, }: ButtonProps): import("react").JSX.Element;

package/dist/button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text } from "./primitives";
+import { cx } from "./cx";
+const SIZES = {
+    sm: { pad: "px-3 py-[5]", text: 11 },
+    md: { pad: "px-4 py-[8]", text: 12 },
+    lg: { pad: "px-5 py-[11]", text: 13 },
+};
+/** A pressable with sensible plugin styling — solid/outline/ghost. */
+export function Button({ label, children, onClick, disabled, variant = "solid", size = "md", accentColor = "#C6F135", textColor = "#09090b", }) {
+    const { pad, text } = SIZES[size];
+    const className = cx("flex-row items-center justify-center gap-2 rounded-lg", pad, disabled ? "opacity-40" : "cursor-pointer", !disabled && variant === "solid" && "hover:opacity-90 active:opacity-75", !disabled && variant !== "solid" && "hover:bg-white/10 active:bg-white/15", variant === "outline" && "border");
+    const style = variant === "solid"
+        ? { backgroundColor: accentColor }
+        : variant === "outline"
+            ? { borderColor: accentColor }
+            : {};
+    const color = variant === "solid" ? textColor : accentColor;
+    return (_jsxs(View, { className: className, style: style, onClick: disabled ? undefined : onClick, children: [label !== undefined ? (_jsx(Text, { className: "font-bold tracking-wide", style: { fontSize: text, color }, children: label })) : null, children] }));
+}

package/dist/controls.d.ts

@@ -6,22 +6,32 @@ export interface KnobProps {
     label?: string;
     size?: number;
     disabled?: boolean;
+    /** Double-click resets to this (DAW convention). */
+    defaultValue?: number;
+    /** Value arc sweeps from 12 o'clock instead of the left stop — for
+        centre-based parameters like pan. */
+    bipolar?: boolean;
+    /** Value change per wheel notch fraction. 0 disables. Default 0.4. */
+    wheelSensitivity?: number;
     trackColor?: string;
     valueColor?: string;
     onChange: (value: number) => void;
     onBegin?: () => void;
     onEnd?: () => void;
 }
-export declare function Knob({ value, text, label, size, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: KnobProps): import("react").JSX.Element;
+export declare function Knob({ value, text, label, size, disabled, defaultValue, bipolar, wheelSensitivity, trackColor, valueColor, onChange, onBegin, onEnd, }: KnobProps): import("react").JSX.Element;
 export interface ParamKnobProps {
     paramId: string;
     label?: string;
     size?: number;
+    bipolar?: boolean;
+    wheelSensitivity?: number;
     trackColor?: string;
     valueColor?: string;
 }
-/** A Knob bound to an APVTS parameter (via ParameterBridge). */
-export declare function ParamKnob({ paramId, label, size, trackColor, valueColor }: ParamKnobProps): import("react").JSX.Element;
+/** A Knob bound to an APVTS parameter — double-click resets to the
+    host's default, the wheel nudges, gestures stay automation-safe. */
+export declare function ParamKnob({ paramId, label, ...rest }: ParamKnobProps): import("react").JSX.Element;
 export interface SliderProps {
     value: number;
     /** Track length when horizontal (default 160). */
@@ -32,22 +42,28 @@ export interface SliderProps {
     vertical?: boolean;
     label?: string;
     disabled?: boolean;
+    /** Double-click resets to this (DAW convention). */
+    defaultValue?: number;
+    /** Value change per wheel notch fraction. 0 disables. Default 0.4. */
+    wheelSensitivity?: number;
     trackColor?: string;
     valueColor?: string;
     onChange: (value: number) => void;
     onBegin?: () => void;
     onEnd?: () => void;
 }
-export declare function Slider({ value, width, height, vertical, label, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ value, width, height, vertical, label, disabled, defaultValue, wheelSensitivity, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
 export interface ParamSliderProps {
     paramId: string;
     label?: string;
     width?: number;
     height?: number;
     vertical?: boolean;
+    wheelSensitivity?: number;
 }
-/** A Slider bound to an APVTS parameter (via ParameterBridge). */
-export declare function ParamSlider({ paramId, label, width, height, vertical }: ParamSliderProps): import("react").JSX.Element;
+/** A Slider bound to an APVTS parameter — double-click resets to the
+    host's default, the wheel nudges, gestures stay automation-safe. */
+export declare function ParamSlider({ paramId, label, ...rest }: ParamSliderProps): import("react").JSX.Element;
 export interface ToggleProps {
     on: boolean;
     label?: string;

package/dist/controls.js

@@ -15,8 +15,16 @@ export function dragToValue(startValue, dy, sensitivity = 0.005) {
 }
 const ARC_START = -135;
 const ARC_END = 135;
-export function Knob({ value, text, label, size = 64, disabled, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+export function Knob({ value, text, label, size = 64, disabled, defaultValue, bipolar, wheelSensitivity = 0.4, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
     const startValue = useRef(0);
+    const clamped = clamp01(value);
+    const angle = ARC_START + (ARC_END - ARC_START) * clamped;
+    const center = (ARC_START + ARC_END) / 2;
+    const nudge = (target) => {
+        onBegin?.();
+        onChange(clamp01(target));
+        onEnd?.();
+    };
     return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `items-center justify-center ${disabled ? "opacity-40" : "cursor-pointer"}`, style: {
                     width: size,
                     height: size,
@@ -24,21 +32,25 @@ export function Knob({ value, text, label, size = 64, disabled, trackColor = "#2
                     arcColor: valueColor,
                     arcStart: ARC_START,
                     arcEnd: ARC_END,
-                    arcValueEnd: ARC_START + (ARC_END - ARC_START) * Math.min(1, Math.max(0, value)),
+                    arcValueStart: bipolar ? Math.min(center, angle) : ARC_START,
+                    arcValueEnd: bipolar ? Math.max(center, angle) : angle,
                     arcThickness: Math.max(3, size * 0.08),
                 }, onDragStart: disabled
                     ? undefined
                     : () => {
-                        startValue.current = value;
+                        startValue.current = clamped;
                         onBegin?.();
-                    }, onDrag: disabled ? undefined : (e) => onChange(dragToValue(startValue.current, e.dy)), onDragEnd: disabled ? undefined : () => onEnd?.(), children: text !== undefined ? (_jsx(Text, { className: "text-text font-bold text-center", style: { fontSize: Math.max(10, size * 0.16) }, children: text })) : null }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+                    }, onDrag: disabled ? undefined : (e) => onChange(dragToValue(startValue.current, e.dy)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue), onWheel: disabled || wheelSensitivity === 0
+                    ? undefined
+                    : (e) => nudge(clamped + e.dy * wheelSensitivity), children: text !== undefined ? (_jsx(Text, { className: "text-text font-bold text-center", style: { fontSize: Math.max(10, size * 0.16) }, children: text })) : null }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
 }
-/** A Knob bound to an APVTS parameter (via ParameterBridge). */
-export function ParamKnob({ paramId, label, size, trackColor, valueColor }) {
+/** A Knob bound to an APVTS parameter — double-click resets to the
+    host's default, the wheel nudges, gestures stay automation-safe. */
+export function ParamKnob({ paramId, label, ...rest }) {
     const param = useParameter(paramId);
-    return (_jsx(Knob, { value: param.value, text: param.text, label: label ?? param.name.toUpperCase(), size: size, trackColor: trackColor, valueColor: valueColor, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+    return (_jsx(Knob, { value: param.value, text: param.text, label: label ?? param.name.toUpperCase(), defaultValue: param.defaultValue, onChange: param.set, onBegin: param.begin, onEnd: param.end, ...rest }));
 }
-export function Slider({ value, width = 160, height = 160, vertical, label, disabled, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+export function Slider({ value, width = 160, height = 160, vertical, label, disabled, defaultValue, wheelSensitivity = 0.4, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
     const startValue = useRef(0);
     const clamped = clamp01(value);
     const onDragStart = disabled
@@ -48,15 +60,25 @@ export function Slider({ value, width = 160, height = 160, vertical, label, disa
             onBegin?.();
         };
     const onDragEnd = disabled ? undefined : () => onEnd?.();
+    const nudge = (target) => {
+        onBegin?.();
+        onChange(clamp01(target));
+        onEnd?.();
+    };
+    const onDoubleClick = disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue);
+    const onWheel = disabled || wheelSensitivity === 0
+        ? undefined
+        : (e) => nudge(clamped + e.dy * wheelSensitivity);
     if (vertical) {
-        return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: `w-[18] relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { height }, onDragStart: onDragStart, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current - e.dy / height)), onDragEnd: onDragEnd, children: [_jsx(View, { className: "absolute w-[4] rounded-full left-[7] top-0 bottom-0", style: { backgroundColor: trackColor } }), _jsx(View, { className: "absolute w-[4] rounded-full left-[7] bottom-0", style: { height: clamped * height, backgroundColor: valueColor } }), _jsx(View, { className: "absolute w-[12] h-[12] rounded-full left-[3]", style: { top: (1 - clamped) * (height - 12), backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+        return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: `w-[18] relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { height }, onDragStart: onDragStart, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current - e.dy / height)), onDragEnd: onDragEnd, onDoubleClick: onDoubleClick, onWheel: onWheel, children: [_jsx(View, { className: "absolute w-[4] rounded-full left-[7] top-0 bottom-0", style: { backgroundColor: trackColor } }), _jsx(View, { className: "absolute w-[4] rounded-full left-[7] bottom-0", style: { height: clamped * height, backgroundColor: valueColor } }), _jsx(View, { className: "absolute w-[12] h-[12] rounded-full left-[3]", style: { top: (1 - clamped) * (height - 12), backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
     }
-    return (_jsxs(View, { className: "gap-2", children: [_jsxs(View, { className: `h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width }, onDragStart: onDragStart, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / width)), onDragEnd: onDragEnd, children: [_jsx(View, { className: "h-[4] rounded-full", style: { backgroundColor: trackColor } }), _jsx(View, { className: "absolute h-[4] rounded-full top-[7]", style: { width: clamped * width, backgroundColor: valueColor } }), _jsx(View, { className: "absolute w-[12] h-[12] rounded-full top-[3]", style: { left: clamped * (width - 12), backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+    return (_jsxs(View, { className: "gap-2", children: [_jsxs(View, { className: `h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width }, onDragStart: onDragStart, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / width)), onDragEnd: onDragEnd, onDoubleClick: onDoubleClick, onWheel: onWheel, children: [_jsx(View, { className: "h-[4] rounded-full", style: { backgroundColor: trackColor } }), _jsx(View, { className: "absolute h-[4] rounded-full top-[7]", style: { width: clamped * width, backgroundColor: valueColor } }), _jsx(View, { className: "absolute w-[12] h-[12] rounded-full top-[3]", style: { left: clamped * (width - 12), backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
 }
-/** A Slider bound to an APVTS parameter (via ParameterBridge). */
-export function ParamSlider({ paramId, label, width, height, vertical }) {
+/** A Slider bound to an APVTS parameter — double-click resets to the
+    host's default, the wheel nudges, gestures stay automation-safe. */
+export function ParamSlider({ paramId, label, ...rest }) {
     const param = useParameter(paramId);
-    return (_jsx(Slider, { value: param.value, label: label ?? param.name.toUpperCase(), width: width, height: height, vertical: vertical, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+    return (_jsx(Slider, { value: param.value, label: label ?? param.name.toUpperCase(), defaultValue: param.defaultValue, onChange: param.set, onBegin: param.begin, onEnd: param.end, ...rest }));
 }
 /** A switch with a spring-animated thumb — bypass, on/off, A/B. */
 export function Toggle({ on, label, size = 22, disabled, trackColor = "#2A2F27", onColor = "#C6F135", thumbColor = "#F4F4F5", onChange, }) {

package/dist/hooks.d.ts

@@ -22,3 +22,21 @@ export declare function useNativeEvent(name: string, handler: (payload: any) =>
  *   useEffect(() => { native.call("library:search", { query }); }, [query]);
  */
 export declare function useDebounced<T>(value: T, delayMs: number): T;
+/** The value, updated at most once per `intervalMs` (leading + trailing). */
+export declare function useThrottled<T>(value: T, intervalMs: number): T;
+/** The value from the previous render — undefined on the first one. */
+export declare function usePrevious<T>(value: T): T | undefined;
+/** Boolean state with a stable toggle — bypass buttons, panels, A/B. */
+export declare function useToggle(initial?: boolean): [boolean, () => void, (next: boolean) => void];
+/** A declarative interval on the host scheduler; null pauses it. The
+    callback stays fresh without restarting the timer. */
+export declare function useInterval(callback: () => void, intervalMs: number | null): void;
+/** Hover state + the props that drive it:
+    `const [hovered, hoverProps] = useHover(); <View {...hoverProps}>` */
+export declare function useHover(): [
+    boolean,
+    {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    }
+];

package/dist/hooks.js

@@ -38,3 +38,59 @@ export function useDebounced(value, delayMs) {
     }, [value, delayMs]);
     return debounced;
 }
+/** The value, updated at most once per `intervalMs` (leading + trailing). */
+export function useThrottled(value, intervalMs) {
+    const [throttled, setThrottled] = useState(value);
+    const lastRun = useRef(0);
+    useEffect(() => {
+        const now = Date.now();
+        const elapsed = now - lastRun.current;
+        if (elapsed >= intervalMs) {
+            lastRun.current = now;
+            setThrottled(value);
+            return;
+        }
+        const id = setTimeout(() => {
+            lastRun.current = Date.now();
+            setThrottled(value);
+        }, intervalMs - elapsed);
+        return () => clearTimeout(id);
+    }, [value, intervalMs]);
+    return throttled;
+}
+/** The value from the previous render — undefined on the first one. */
+export function usePrevious(value) {
+    const previous = useRef(undefined);
+    useEffect(() => {
+        previous.current = value;
+    }, [value]);
+    return previous.current;
+}
+/** Boolean state with a stable toggle — bypass buttons, panels, A/B. */
+export function useToggle(initial = false) {
+    const [on, setOn] = useState(initial);
+    const toggle = useRef(() => setOn((v) => !v)).current;
+    return [on, toggle, setOn];
+}
+/** A declarative interval on the host scheduler; null pauses it. The
+    callback stays fresh without restarting the timer. */
+export function useInterval(callback, intervalMs) {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        if (intervalMs === null)
+            return;
+        const id = setInterval(() => callbackRef.current(), intervalMs);
+        return () => clearInterval(id);
+    }, [intervalMs]);
+}
+/** Hover state + the props that drive it:
+    `const [hovered, hoverProps] = useHover(); <View {...hoverProps}>` */
+export function useHover() {
+    const [hovered, setHovered] = useState(false);
+    const props = useRef({
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+    }).current;
+    return [hovered, props];
+}

package/dist/hostConfig.js

@@ -13,6 +13,8 @@ const hostTypes = {
 };
 const eventPropNames = {
     onClick: "click",
+    onDoubleClick: "dblclick",
+    onWheel: "wheel",
     onMouseEnter: "mouseenter",
     onMouseLeave: "mouseleave",
     onMouseDown: "mousedown",

package/dist/index.d.ts

@@ -4,8 +4,14 @@ 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, useLayoutRect } from "./hooks";
+export { useNativeEvent, 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";
+export { Button } from "./button";
+export type { ButtonProps } from "./button";
+export { Bars, Waveform, useRollingBuffer, pushRolling } from "./visualizers";
+export type { BarsProps, WaveformProps } from "./visualizers";
 export { configureTheme, tw } from "./tw";
 export type { Style, ResolvedClasses } from "./tw";
 export { cx } from "./cx";
@@ -18,4 +24,4 @@ export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKno
 export type { KnobProps, SliderProps, ToggleProps, XYPadProps, SegmentedProps, SelectProps, GenericEditorProps, ParamKnobProps, ParamSliderProps, ParamToggleProps, ParamXYPadProps, ParamSegmentedProps, ParamSelectProps, } from "./controls";
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export type { MeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
-export type { DragEventPayload, LayoutRect } from "./primitives";
+export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";

package/dist/index.js

@@ -5,8 +5,11 @@ import "./bridge";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
-export { useNativeEvent, useDebounced, useLayoutRect } from "./hooks";
+export { useNativeEvent, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
+export { Tooltip, Modal } from "./popover";
+export { Button } from "./button";
+export { Bars, Waveform, useRollingBuffer, pushRolling } from "./visualizers";
 export { configureTheme, tw } from "./tw";
 export { cx } from "./cx";
 export { useTween, useSpring, springStep, lerp, Easing } from "./animation";

package/dist/parameters.d.ts

@@ -3,6 +3,8 @@ export interface ParameterState {
     text: string;
     name: string;
     label: string;
+    /** The host's normalized default — double-click-reset target. */
+    defaultValue: number;
 }
 export interface ParameterHandle extends ParameterState {
     set: (normalized: number) => void;
@@ -16,6 +18,7 @@ export interface ParameterInfo {
     /** Normalized 0..1 snapshot at mount — use useParameter(id) for live values. */
     value: number;
     text: string;
+    defaultValue: number;
 }
 /**
  * Enumerates every APVTS parameter (via param:list) once at mount — the

package/dist/parameters.js

@@ -18,6 +18,7 @@ export function useParameterList() {
             label: String(entry?.label ?? ""),
             value: Number(entry?.value ?? 0),
             text: String(entry?.text ?? ""),
+            defaultValue: Number(entry?.defaultValue ?? 0),
         }));
     });
     return list;
@@ -31,8 +32,9 @@ export function useParameter(id) {
                 text: String(initial.text ?? ""),
                 name: String(initial.name ?? id),
                 label: String(initial.label ?? ""),
+                defaultValue: Number(initial.defaultValue ?? 0),
             }
-            : { value: 0, text: "", name: id, label: "" };
+            : { value: 0, text: "", name: id, label: "", defaultValue: 0 };
     });
     useEffect(() => native.on("param", (p) => {
         if (p?.id === id)

package/dist/popover.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface TooltipProps {
+    /** The tip text. */
+    label: string;
+    /** Hover dwell before showing. Default 450ms. */
+    delayMs?: number;
+    /** Gap between the child and the tip. Default 6. */
+    offset?: number;
+    backgroundColor?: string;
+    color?: string;
+    children: ReactNode;
+}
+/** Wraps its child; hovering it long enough shows a tip below. */
+export declare function Tooltip({ label, delayMs, offset, backgroundColor, color, children, }: TooltipProps): import("react").JSX.Element;
+export interface ModalProps {
+    open: boolean;
+    /** Backdrop click (and nothing else) calls this. */
+    onClose: () => void;
+    title?: string;
+    width?: number;
+    backgroundColor?: string;
+    backdropColor?: string;
+    children: ReactNode;
+}
+/** A centered dialog over a click-away backdrop — confirms, settings,
+    about boxes. Content is yours; the chrome is minimal. */
+export declare function Modal({ open, onClose, title, width, backgroundColor, backdropColor, children, }: ModalProps): null;

package/dist/popover.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tooltip + Modal — the dialog kit, built on the overlay layer and
+// onLayout. Both paint above everything via useOverlay.
+import { useEffect, useRef, useState } from "react";
+import { View, Text } from "./primitives";
+import { useLayoutRect } from "./hooks";
+import { useOverlay } from "./overlay";
+/** Wraps its child; hovering it long enough shows a tip below. */
+export function Tooltip({ label, delayMs = 450, offset = 6, backgroundColor = "#20241F", color = "#d4d4d8", children, }) {
+    const [rect, onLayout] = useLayoutRect();
+    const [visible, setVisible] = useState(false);
+    const overlay = useOverlay();
+    const timer = useRef(null);
+    useEffect(() => {
+        if (!visible || rect === null) {
+            overlay.hide();
+            return;
+        }
+        overlay.show(_jsx(View, { className: "absolute rounded-md border px-2 py-[4]", style: {
+                left: rect.x,
+                top: rect.y + rect.height + offset,
+                backgroundColor,
+                borderColor: "#00000066",
+            }, children: _jsx(Text, { className: "text-[11]", style: { color }, children: label }) }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, rect, label, offset, backgroundColor, color]);
+    useEffect(() => () => {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+    }, []);
+    return (_jsx(View, { onLayout: onLayout, onMouseEnter: () => {
+            if (timer.current !== null)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => setVisible(true), delayMs);
+        }, onMouseLeave: () => {
+            if (timer.current !== null)
+                clearTimeout(timer.current);
+            timer.current = null;
+            setVisible(false);
+        }, children: children }));
+}
+/** A centered dialog over a click-away backdrop — confirms, settings,
+    about boxes. Content is yours; the chrome is minimal. */
+export function Modal({ open, onClose, title, width = 320, backgroundColor = "#1C201B", backdropColor = "#000000B0", children, }) {
+    const overlay = useOverlay();
+    useEffect(() => {
+        if (!open) {
+            overlay.hide();
+            return;
+        }
+        overlay.show(_jsx(View, { className: "absolute inset-0 items-center justify-center", style: { backgroundColor: backdropColor }, onClick: onClose, children: _jsxs(View, { className: "rounded-xl border p-5 gap-3 shadow-xl", style: { width, backgroundColor, borderColor: "#00000066" }, onClick: () => { }, children: [title !== undefined ? (_jsx(Text, { className: "text-[13] font-bold tracking-wide", children: title })) : null, children] }) }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, title, width, backgroundColor, backdropColor, children]);
+    return null;
+}

package/dist/primitives.d.ts

@@ -15,6 +15,11 @@ export interface LayoutRect {
     width: number;
     height: number;
 }
+/** Mouse-wheel payload. dy is JUCE's notch fraction (~0.1 per notch,
+    positive = wheel up). */
+export interface WheelEventPayload {
+    dy: number;
+}
 export interface CommonProps {
     className?: string;
     style?: Style;
@@ -22,6 +27,9 @@ export interface CommonProps {
     /** Resets the scroll offset of an overflow-y-scroll container. */
     scrollTop?: number;
     onClick?: () => void;
+    onDoubleClick?: () => void;
+    /** Wheel over this node (controls win the wheel over scroll containers). */
+    onWheel?: (e: WheelEventPayload) => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     onMouseDown?: () => void;
@@ -65,6 +73,8 @@ export declare function TextInput({ onChange, onSubmit, ...rest }: TextInputProp
     className?: string | undefined;
     scrollTop?: number | undefined;
     onClick?: (() => void) | undefined;
+    onDoubleClick?: (() => void) | undefined;
+    onWheel?: ((e: WheelEventPayload) => void) | undefined;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
     onMouseDown?: (() => void) | undefined;

package/dist/visualizers.d.ts

@@ -0,0 +1,37 @@
+/** Pure rolling-window step (exported for tests): drop the oldest, push
+    the newest, pad with zeros to `length`. */
+export declare function pushRolling(previous: number[], value: number, length: number): number[];
+/** A rolling window of the last `length` values — turns a live scalar
+    (meter level, envelope) into data for <Waveform>/<Bars> history. */
+export declare function useRollingBuffer(value: number, length?: number): number[];
+export interface BarsProps {
+    /** One bar per entry, 0..1. */
+    values: number[];
+    width?: number;
+    height?: number;
+    /** Gap between bars. Default 2. */
+    gap?: number;
+    /** Bars at or above this turn hot. Default 0.85; 1 disables. */
+    hotFrom?: number;
+    trackColor?: string;
+    color?: string;
+    hotColor?: string;
+    label?: string;
+}
+/** Bottom-anchored bars — spectrum analyzers, band meters. */
+export declare function Bars({ values, width, height, gap, hotFrom, trackColor, color, hotColor, label, }: BarsProps): import("react").JSX.Element;
+export interface WaveformProps {
+    /** One bar per entry, −1..1 (or 0..1 — bars mirror around the centre). */
+    values: number[];
+    width?: number;
+    height?: number;
+    gap?: number;
+    trackColor?: string;
+    color?: string;
+    /** Draw the centre line. Default true. */
+    centerLine?: boolean;
+    centerLineColor?: string;
+    label?: string;
+}
+/** Centre-mirrored bars — waveform overviews, envelope history. */
+export declare function Waveform({ values, width, height, gap, trackColor, color, centerLine, centerLineColor, label, }: WaveformProps): import("react").JSX.Element;

package/dist/visualizers.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Audio visualizers — bar-based displays fed by arrays of values
+// (typically pushed from C++ via useNativeEvent). For audio-rate scopes,
+// host a juce::Component with <NativeView>; these cover the JS-rate
+// cases: spectrum bars, envelope history, waveform overviews.
+import { useEffect, useState } from "react";
+import { View, Text } from "./primitives";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** Pure rolling-window step (exported for tests): drop the oldest, push
+    the newest, pad with zeros to `length`. */
+export function pushRolling(previous, value, length) {
+    const next = previous.slice(Math.max(0, previous.length - length + 1));
+    next.push(value);
+    while (next.length < length)
+        next.unshift(0);
+    return next;
+}
+/** A rolling window of the last `length` values — turns a live scalar
+    (meter level, envelope) into data for <Waveform>/<Bars> history. */
+export function useRollingBuffer(value, length = 64) {
+    const [buffer, setBuffer] = useState(() => Array(length).fill(0));
+    useEffect(() => {
+        setBuffer((previous) => pushRolling(previous, value, length));
+    }, [value, length]);
+    return buffer;
+}
+/** Bottom-anchored bars — spectrum analyzers, band meters. */
+export function Bars({ values, width = 160, height = 60, gap = 2, hotFrom = 0.85, trackColor = "#141714", color = "#C6F135", hotColor = "#FF4545", label, }) {
+    const bars = (_jsx(View, { className: "flex-row items-end rounded overflow-hidden px-[2]", style: { width, height, backgroundColor: trackColor, columnGap: gap }, children: values.map((value, index) => {
+            const level = clamp01(value);
+            return (_jsx(View, { className: "flex-1 rounded-[1]", style: {
+                    height: Math.max(1, level * (height - 4)),
+                    backgroundColor: level >= hotFrom ? hotColor : color,
+                } }, index));
+        }) }));
+    if (label === undefined)
+        return bars;
+    return (_jsxs(View, { className: "items-center gap-2", children: [bars, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));
+}
+/** Centre-mirrored bars — waveform overviews, envelope history. */
+export function Waveform({ values, width = 160, height = 60, gap = 2, trackColor = "#141714", color = "#C6F135", centerLine = true, centerLineColor = "#FFFFFF22", label, }) {
+    const wave = (_jsxs(View, { className: "relative flex-row items-center rounded overflow-hidden px-[2]", style: { width, height, backgroundColor: trackColor, columnGap: gap }, children: [centerLine ? (_jsx(View, { className: "absolute left-0 right-0 h-[1]", style: { top: height / 2, backgroundColor: centerLineColor } })) : null, values.map((value, index) => (_jsx(View, { className: "flex-1 rounded-[1]", style: {
+                    height: Math.max(1, Math.min(1, Math.abs(value)) * (height - 4)),
+                    backgroundColor: color,
+                } }, index)))] }));
+    if (label === undefined)
+        return wave;
+    return (_jsxs(View, { className: "items-center gap-2", children: [wave, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
   "keywords": [
     "react",

package/src/button.tsx

@@ -0,0 +1,68 @@
+// Button — the pressable with hover/active states baked in.
+
+import type { ReactNode } from "react";
+import { View, Text } from "./primitives";
+import { cx } from "./cx";
+import type { Style } from "./tw";
+
+export interface ButtonProps {
+  label?: string;
+  children?: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  /** solid (default) — filled; outline — bordered; ghost — text only. */
+  variant?: "solid" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+  accentColor?: string;
+  /** Text color for the solid variant (default near-black). */
+  textColor?: string;
+}
+
+const SIZES = {
+  sm: { pad: "px-3 py-[5]", text: 11 },
+  md: { pad: "px-4 py-[8]", text: 12 },
+  lg: { pad: "px-5 py-[11]", text: 13 },
+} as const;
+
+/** A pressable with sensible plugin styling — solid/outline/ghost. */
+export function Button({
+  label,
+  children,
+  onClick,
+  disabled,
+  variant = "solid",
+  size = "md",
+  accentColor = "#C6F135",
+  textColor = "#09090b",
+}: ButtonProps) {
+  const { pad, text } = SIZES[size];
+
+  const className = cx(
+    "flex-row items-center justify-center gap-2 rounded-lg",
+    pad,
+    disabled ? "opacity-40" : "cursor-pointer",
+    !disabled && variant === "solid" && "hover:opacity-90 active:opacity-75",
+    !disabled && variant !== "solid" && "hover:bg-white/10 active:bg-white/15",
+    variant === "outline" && "border",
+  );
+
+  const style: Style =
+    variant === "solid"
+      ? { backgroundColor: accentColor }
+      : variant === "outline"
+        ? { borderColor: accentColor }
+        : {};
+
+  const color = variant === "solid" ? textColor : accentColor;
+
+  return (
+    <View className={className} style={style} onClick={disabled ? undefined : onClick}>
+      {label !== undefined ? (
+        <Text className="font-bold tracking-wide" style={{ fontSize: text, color }}>
+          {label}
+        </Text>
+      ) : null}
+      {children}
+    </View>
+  );
+}