@vsreact/core 0.0.5 → 0.0.6

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/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

@@ -6,6 +6,8 @@ export { render, unmount } from "./render";
 export { native } from "./native";
 export { useNativeEvent, useDebounced, useLayoutRect } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
+export { Tooltip, Modal } from "./popover";
+export type { TooltipProps, ModalProps } from "./popover";
 export { configureTheme, tw } from "./tw";
 export type { Style, ResolvedClasses } from "./tw";
 export { cx } from "./cx";
@@ -18,4 +20,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

@@ -7,6 +7,7 @@ export { render, unmount } from "./render";
 export { native } from "./native";
 export { useNativeEvent, useDebounced, useLayoutRect } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
+export { Tooltip, Modal } from "./popover";
 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/package.json

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

package/src/controls.test.tsx

@@ -302,3 +302,134 @@ describe("onLayout + Select", () => {
     expect(nativeCalls.some((c) => c.name === "param:end")).toBe(true);
   });
 });
+
+describe("DAW feel (0.0.6)", () => {
+  test("Knob: double-click resets to defaultValue as a full gesture", () => {
+    const { Knob } = require("./index");
+    const calls: string[] = [];
+    render(
+      <Knob
+        value={0.9}
+        defaultValue={0.5}
+        onChange={(v: number) => calls.push(`set:${v}`)}
+        onBegin={() => calls.push("begin")}
+        onEnd={() => calls.push("end")}
+      />,
+    );
+
+    const id = nodeWithListener("dblclick");
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(calls).toEqual(["begin", "set:0.5", "end"]);
+  });
+
+  test("Knob: wheel nudges by dy * sensitivity, clamped", () => {
+    const { Knob } = require("./index");
+    const seen: number[] = [];
+    render(<Knob value={0.5} wheelSensitivity={0.4} onChange={(v: number) => seen.push(v)} />);
+
+    const id = nodeWithListener("wheel");
+    dispatch({ kind: "event", nodeId: id, type: "wheel", payload: { dy: 0.1 } });
+    expect(seen.at(-1)).toBeCloseTo(0.54);
+
+    dispatch({ kind: "event", nodeId: id, type: "wheel", payload: { dy: 100 } });
+    expect(seen.at(-1)).toBe(1);
+  });
+
+  test("Knob: bipolar arc sweeps from centre in both directions", () => {
+    const { Knob } = require("./index");
+    render(<Knob bipolar value={0.75} onChange={() => {}} />);
+    let arc: any = opsNamed("setProps").find((op: any) => op[2]?.style?.arcValueEnd !== undefined);
+    expect(arc[2].style.arcValueStart).toBe(0);
+    expect(arc[2].style.arcValueEnd).toBeCloseTo(67.5);
+
+    unmount();
+    batches.length = 0;
+    render(<Knob bipolar value={0.25} onChange={() => {}} />);
+    arc = opsNamed("setProps").find((op: any) => op[2]?.style?.arcValueEnd !== undefined);
+    expect(arc[2].style.arcValueStart).toBeCloseTo(-67.5);
+    expect(arc[2].style.arcValueEnd).toBe(0);
+  });
+
+  test("ParamKnob: host default drives the double-click reset", () => {
+    paramGetResult = { value: 0.9, text: "+5 dB", name: "Gain", label: "dB", defaultValue: 0.25 };
+    const { ParamKnob } = require("./index");
+    render(<ParamKnob paramId="gain" />);
+
+    const id = nodeWithListener("dblclick");
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args).toEqual({ id: "gain", value: 0.25 });
+    expect(nativeCalls.some((c) => c.name === "param:begin")).toBe(true);
+    expect(nativeCalls.some((c) => c.name === "param:end")).toBe(true);
+  });
+
+  test("Slider: double-click reset + wheel work in both orientations", () => {
+    const { Slider } = require("./index");
+    const seen: number[] = [];
+    render(<Slider vertical value={0.8} defaultValue={0.5} onChange={(v: number) => seen.push(v)} />);
+
+    dispatch({ kind: "event", nodeId: nodeWithListener("dblclick"), type: "dblclick" });
+    expect(seen.at(-1)).toBe(0.5);
+
+    dispatch({ kind: "event", nodeId: nodeWithListener("wheel"), type: "wheel", payload: { dy: -0.1 } });
+    expect(seen.at(-1)).toBeCloseTo(0.76);
+  });
+});
+
+describe("Tooltip + Modal", () => {
+  test("Tooltip shows below its anchor after the hover delay, hides on leave", async () => {
+    const { Tooltip } = require("./index");
+    render(
+      <Tooltip label="Resets to 0 dB" delayMs={15} offset={6}>
+        <Slider value={0.5} onChange={() => {}} />
+      </Tooltip>,
+    );
+
+    const anchor = nodeWithListener("mouseenter");
+    dispatch({
+      kind: "event",
+      nodeId: anchor,
+      type: "layout",
+      payload: { x: 10, y: 20, width: 100, height: 30 },
+    });
+    dispatch({ kind: "event", nodeId: anchor, type: "mouseenter" });
+    await new Promise((r) => setTimeout(r, 40));
+
+    const tip: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.top === 20 + 30 + 6 && op[2]?.style?.left === 10,
+    );
+    expect(tip).toBeDefined();
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "Resets to 0 dB")).toBe(true);
+
+    dispatch({ kind: "event", nodeId: anchor, type: "mouseleave" });
+    await new Promise((r) => setTimeout(r, 5));
+    expect(allOps().some((op: any) => op[0] === "removeChild")).toBe(true);
+  });
+
+  test("Modal renders a centered panel; backdrop closes, panel doesn't", async () => {
+    const { Modal, Text: T } = require("./index");
+    const closed: number[] = [];
+    render(
+      <Modal open onClose={() => closed.push(1)} title="ABOUT" width={280}>
+        <T>VSReacT 0.0.6</T>
+      </Modal>,
+    );
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "ABOUT")).toBe(true);
+    const panel: any = opsNamed("setProps").find((op: any) => op[2]?.style?.width === 280);
+    expect(panel).toBeDefined();
+
+    // panel click swallows; backdrop click closes
+    dispatch({ kind: "event", nodeId: panel[1], type: "click" });
+    expect(closed.length).toBe(0);
+
+    const backdrop: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.listeners?.includes("click") && op[2]?.style?.left === 0 && op[2]?.style?.right === 0,
+    );
+    expect(backdrop).toBeDefined();
+    dispatch({ kind: "event", nodeId: backdrop[1], type: "click" });
+    expect(closed).toEqual([1]);
+  });
+});

package/src/controls.tsx

@@ -25,6 +25,13 @@ 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;
@@ -38,6 +45,9 @@ export function Knob({
   label,
   size = 64,
   disabled,
+  defaultValue,
+  bipolar,
+  wheelSensitivity = 0.4,
   trackColor = "#2A2F27",
   valueColor = "#C6F135",
   onChange,
@@ -45,6 +55,15 @@ export function Knob({
   onEnd,
 }: KnobProps) {
   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: number) => {
+    onBegin?.();
+    onChange(clamp01(target));
+    onEnd?.();
+  };
 
   return (
     <View className="items-center gap-2">
@@ -57,19 +76,28 @@ export function Knob({
           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?.()}
+        onDoubleClick={
+          disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue)
+        }
+        onWheel={
+          disabled || wheelSensitivity === 0
+            ? undefined
+            : (e) => nudge(clamped + e.dy * wheelSensitivity)
+        }
       >
         {text !== undefined ? (
           <Text
@@ -91,12 +119,15 @@ 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 function ParamKnob({ paramId, label, size, trackColor, valueColor }: ParamKnobProps) {
+/** 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 }: ParamKnobProps) {
   const param = useParameter(paramId);
 
   return (
@@ -104,12 +135,11 @@ export function ParamKnob({ paramId, label, size, trackColor, valueColor }: Para
       value={param.value}
       text={param.text}
       label={label ?? param.name.toUpperCase()}
-      size={size}
-      trackColor={trackColor}
-      valueColor={valueColor}
+      defaultValue={param.defaultValue}
       onChange={param.set}
       onBegin={param.begin}
       onEnd={param.end}
+      {...rest}
     />
   );
 }
@@ -124,6 +154,10 @@ 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;
@@ -138,6 +172,8 @@ export function Slider({
   vertical,
   label,
   disabled,
+  defaultValue,
+  wheelSensitivity = 0.4,
   trackColor = "#2A2F27",
   valueColor = "#C6F135",
   onChange,
@@ -155,6 +191,18 @@ export function Slider({
       };
   const onDragEnd = disabled ? undefined : () => onEnd?.();
 
+  const nudge = (target: number) => {
+    onBegin?.();
+    onChange(clamp01(target));
+    onEnd?.();
+  };
+  const onDoubleClick =
+    disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue);
+  const onWheel =
+    disabled || wheelSensitivity === 0
+      ? undefined
+      : (e: { dy: number }) => nudge(clamped + e.dy * wheelSensitivity);
+
   if (vertical) {
     return (
       <View className="items-center gap-2">
@@ -164,6 +212,8 @@ export function Slider({
           onDragStart={onDragStart}
           onDrag={disabled ? undefined : (e) => onChange(clamp01(startValue.current - e.dy / height))}
           onDragEnd={onDragEnd}
+          onDoubleClick={onDoubleClick}
+          onWheel={onWheel}
         >
           <View
             className="absolute w-[4] rounded-full left-[7] top-0 bottom-0"
@@ -193,6 +243,8 @@ export function Slider({
         onDragStart={onDragStart}
         onDrag={disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / width))}
         onDragEnd={onDragEnd}
+        onDoubleClick={onDoubleClick}
+        onWheel={onWheel}
       >
         <View className="h-[4] rounded-full" style={{ backgroundColor: trackColor }} />
         <View
@@ -217,22 +269,23 @@ export interface ParamSliderProps {
   width?: number;
   height?: number;
   vertical?: boolean;
+  wheelSensitivity?: number;
 }
 
-/** A Slider bound to an APVTS parameter (via ParameterBridge). */
-export function ParamSlider({ paramId, label, width, height, vertical }: ParamSliderProps) {
+/** 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 }: ParamSliderProps) {
   const param = useParameter(paramId);
 
   return (
     <Slider
       value={param.value}
       label={label ?? param.name.toUpperCase()}
-      width={width}
-      height={height}
-      vertical={vertical}
+      defaultValue={param.defaultValue}
       onChange={param.set}
       onBegin={param.begin}
       onEnd={param.end}
+      {...rest}
     />
   );
 }

package/src/hostConfig.ts

@@ -24,6 +24,8 @@ const hostTypes: Record<string, string> = {
 
 const eventPropNames: Record<string, string> = {
   onClick: "click",
+  onDoubleClick: "dblclick",
+  onWheel: "wheel",
   onMouseEnter: "mouseenter",
   onMouseLeave: "mouseleave",
   onMouseDown: "mousedown",

package/src/index.ts

@@ -15,6 +15,8 @@ export { render, unmount } from "./render";
 export { native } from "./native";
 export { useNativeEvent, useDebounced, useLayoutRect } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
+export { Tooltip, Modal } from "./popover";
+export type { TooltipProps, ModalProps } from "./popover";
 export { configureTheme, tw } from "./tw";
 export type { Style, ResolvedClasses } from "./tw";
 export { cx } from "./cx";
@@ -56,4 +58,4 @@ export type {
 } 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/src/parameters.ts

@@ -9,6 +9,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 {
@@ -24,6 +26,7 @@ export interface ParameterInfo {
   /** Normalized 0..1 snapshot at mount — use useParameter(id) for live values. */
   value: number;
   text: string;
+  defaultValue: number;
 }
 
 /**
@@ -41,6 +44,7 @@ export function useParameterList(): ParameterInfo[] {
       label: String(entry?.label ?? ""),
       value: Number(entry?.value ?? 0),
       text: String(entry?.text ?? ""),
+      defaultValue: Number(entry?.defaultValue ?? 0),
     }));
   });
 
@@ -56,8 +60,9 @@ export function useParameter(id: string): ParameterHandle {
           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(

package/src/popover.tsx

@@ -0,0 +1,137 @@
+// Tooltip + Modal — the dialog kit, built on the overlay layer and
+// onLayout. Both paint above everything via useOverlay.
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { View, Text } from "./primitives";
+import { useLayoutRect } from "./hooks";
+import { useOverlay } from "./overlay";
+
+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 function Tooltip({
+  label,
+  delayMs = 450,
+  offset = 6,
+  backgroundColor = "#20241F",
+  color = "#d4d4d8",
+  children,
+}: TooltipProps) {
+  const [rect, onLayout] = useLayoutRect();
+  const [visible, setVisible] = useState(false);
+  const overlay = useOverlay();
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!visible || rect === null) {
+      overlay.hide();
+      return;
+    }
+
+    overlay.show(
+      <View
+        className="absolute rounded-md border px-2 py-[4]"
+        style={{
+          left: rect.x,
+          top: rect.y + rect.height + offset,
+          backgroundColor,
+          borderColor: "#00000066",
+        }}
+      >
+        <Text className="text-[11]" style={{ color }}>
+          {label}
+        </Text>
+      </View>,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, rect, label, offset, backgroundColor, color]);
+
+  useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  return (
+    <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}
+    </View>
+  );
+}
+
+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 function Modal({
+  open,
+  onClose,
+  title,
+  width = 320,
+  backgroundColor = "#1C201B",
+  backdropColor = "#000000B0",
+  children,
+}: ModalProps) {
+  const overlay = useOverlay();
+
+  useEffect(() => {
+    if (!open) {
+      overlay.hide();
+      return;
+    }
+
+    overlay.show(
+      <View
+        className="absolute inset-0 items-center justify-center"
+        style={{ backgroundColor: backdropColor }}
+        onClick={onClose}
+      >
+        {/* swallow clicks inside the panel so they don't reach the backdrop */}
+        <View
+          className="rounded-xl border p-5 gap-3 shadow-xl"
+          style={{ width, backgroundColor, borderColor: "#00000066" }}
+          onClick={() => {}}
+        >
+          {title !== undefined ? (
+            <Text className="text-[13] font-bold tracking-wide">{title}</Text>
+          ) : null}
+          {children}
+        </View>
+      </View>,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, title, width, backgroundColor, backdropColor, children]);
+
+  return null;
+}

package/src/primitives.tsx

@@ -18,6 +18,12 @@ export interface LayoutRect {
   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;
@@ -25,6 +31,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;