@vsreact/core 0.0.5 → 0.0.7

package/src/controls.test.tsx

@@ -302,3 +302,243 @@ 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]);
+  });
+});
+
+describe("0.0.7 — Button, visualizers, hooks", () => {
+  test("Button: click fires; disabled renders no listener; variants style", () => {
+    const { Button } = require("./index");
+    const seen: number[] = [];
+    render(<Button label="APPLY" onClick={() => seen.push(1)} accentColor="#FF2E2E" />);
+
+    dispatch({ kind: "event", nodeId: nodeWithListener("click"), type: "click" });
+    expect(seen).toEqual([1]);
+
+    // solid: filled with the accent
+    const solid: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.backgroundColor === "#FF2E2E",
+    );
+    expect(solid).toBeDefined();
+    expect(solid[2].hoverStyle).toBeDefined();
+
+    unmount();
+    batches.length = 0;
+    render(<Button label="X" disabled onClick={() => seen.push(2)} />);
+    expect(opsNamed("setProps").some((op: any) => op[2]?.listeners?.includes("click"))).toBe(false);
+
+    unmount();
+    batches.length = 0;
+    render(<Button label="Y" variant="outline" onClick={() => {}} accentColor="#FF2E2E" />);
+    const outline: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.borderColor === "#FF2E2E",
+    );
+    expect(outline).toBeDefined();
+    expect(outline[2].style.borderWidth).toBe(1);
+  });
+
+  test("Bars: one bar per value, hot bars switch color, heights scale", () => {
+    const { Bars } = require("./index");
+    render(<Bars values={[0.5, 0.9]} height={60} hotFrom={0.85} color="#AAA111" hotColor="#FF0000" />);
+
+    const bars = opsNamed("setProps").filter(
+      (op: any) => op[2]?.style?.backgroundColor === "#AAA111" || op[2]?.style?.backgroundColor === "#FF0000",
+    );
+    expect(bars.length).toBe(2);
+    const cold: any = bars.find((op: any) => op[2].style.backgroundColor === "#AAA111");
+    const hot: any = bars.find((op: any) => op[2].style.backgroundColor === "#FF0000");
+    expect(cold[2].style.height).toBeCloseTo(0.5 * 56);
+    expect(hot[2].style.height).toBeCloseTo(0.9 * 56);
+  });
+
+  test("Waveform: bars mirror around centre with |value| heights", () => {
+    const { Waveform } = require("./index");
+    render(<Waveform values={[-1, 0.5]} height={60} color="#AAA111" centerLine={false} />);
+
+    const bars = opsNamed("setProps")
+      .filter((op: any) => op[2]?.style?.backgroundColor === "#AAA111")
+      .map((op: any) => op[2].style.height);
+    expect(bars).toHaveLength(2);
+    expect(Math.max(...bars)).toBeCloseTo(56);
+    expect(Math.min(...bars)).toBeCloseTo(28);
+  });
+
+  test("pushRolling keeps a fixed window, newest last", () => {
+    const { pushRolling } = require("./index");
+    expect(pushRolling([1, 2, 3], 4, 3)).toEqual([2, 3, 4]);
+    expect(pushRolling([], 7, 3)).toEqual([0, 0, 7]);
+    expect(pushRolling([1, 2, 3, 4, 5], 6, 3)).toEqual([4, 5, 6]);
+  });
+
+  test("useToggle + useHover drive a probe component", () => {
+    const { useToggle, useHover, View: V, Text: T } = require("./index");
+
+    function Probe() {
+      const [on, toggle] = useToggle(false);
+      const [hovered, hoverProps] = useHover();
+      return (
+        <V onClick={toggle} {...hoverProps}>
+          <T>{`${on ? "ON" : "OFF"}:${hovered ? "HOV" : "OUT"}`}</T>
+        </V>
+      );
+    }
+
+    render(<Probe />);
+    const id = nodeWithListener("click");
+
+    dispatch({ kind: "event", nodeId: id, type: "click" });
+    dispatch({ kind: "event", nodeId: id, type: "mouseenter" });
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "ON:HOV")).toBe(true);
+
+    dispatch({ kind: "event", nodeId: id, type: "mouseleave" });
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "ON:OUT")).toBe(true);
+  });
+
+  test("usePrevious reports the last-render value", () => {
+    const { usePrevious, View: V, Text: T } = require("./index");
+    const values: Array<string> = [];
+
+    function Probe({ n }: { n: number }) {
+      const prev = usePrevious(n);
+      values.push(`${prev}->${n}`);
+      return (
+        <V>
+          <T>{n}</T>
+        </V>
+      );
+    }
+
+    render(<Probe n={1} />);
+    render(<Probe n={2} />);
+    expect(values[0]).toBe("undefined->1");
+    expect(values.at(-1)).toBe("1->2");
+  });
+});

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/hooks.ts

@@ -46,3 +46,74 @@ export function useDebounced<T>(value: T, delayMs: number): T {
 
   return debounced;
 }
+
+/** The value, updated at most once per `intervalMs` (leading + trailing). */
+export function useThrottled<T>(value: T, intervalMs: number): T {
+  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<T>(value: T): T | undefined {
+  const previous = useRef<T | undefined>(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): [boolean, () => void, (next: boolean) => void] {
+  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: () => void, intervalMs: number | null): void {
+  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(): [
+  boolean,
+  { onMouseEnter: () => void; onMouseLeave: () => void },
+] {
+  const [hovered, setHovered] = useState(false);
+  const props = useRef({
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+  }).current;
+
+  return [hovered, props];
+}

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

@@ -13,8 +13,23 @@ export type {
 } 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";
@@ -56,4 +71,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(