@vsreact/core 0.0.4 → 0.0.6

package/src/controls.test.tsx

@@ -7,12 +7,13 @@ let paramGetResult: any = { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB
 (globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
   batches.push(JSON.parse(json));
 };
-(globalThis as Record<string, any>).__vsreact_nativeCall = (name: string, argsJson: string) => {
+const defaultNativeCall = (name: string, argsJson: string) => {
   const args = JSON.parse(argsJson);
   nativeCalls.push({ name, args });
   if (name === "param:get") return JSON.stringify(paramGetResult);
   return "null";
 };
+(globalThis as Record<string, any>).__vsreact_nativeCall = defaultNativeCall;
 
 import { render, unmount, Slider, Toggle, XYPad, Segmented, ParamSegmented, ParamToggle } from "./index";
 
@@ -33,6 +34,7 @@ beforeEach(() => {
   batches.length = 0;
   nativeCalls.length = 0;
   paramGetResult = { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB" };
+  (globalThis as Record<string, any>).__vsreact_nativeCall = defaultNativeCall;
 });
 
 describe("vertical Slider", () => {
@@ -191,3 +193,243 @@ describe("Meter", () => {
     expect(hot).toBeUndefined();
   });
 });
+
+describe("onLayout + Select", () => {
+  /** Map child → parent from appendChild ops, to find a row by its text. */
+  const parentMap = () => {
+    const map = new Map<number, number>();
+    for (const op of allOps() as any[])
+      if (op[0] === "appendChild" || op[0] === "insertBefore") map.set(op[2], op[1]);
+    return map;
+  };
+
+  test("onLayout registers a layout listener and receives the rect", () => {
+    const seen: any[] = [];
+    render(<Slider value={0.5} onChange={() => {}} />); // warm-up unrelated tree
+    unmount();
+    batches.length = 0;
+
+    const { View: V } = require("./index");
+    render(<V onLayout={(r: any) => seen.push(r)} className="w-4" />);
+
+    const props: any = opsNamed("setProps").find((op: any) =>
+      op[2]?.listeners?.includes("layout"),
+    );
+    expect(props).toBeDefined();
+
+    dispatch({
+      kind: "event",
+      nodeId: props[1],
+      type: "layout",
+      payload: { x: 5, y: 10, width: 160, height: 32 },
+    });
+    expect(seen).toEqual([{ x: 5, y: 10, width: 160, height: 32 }]);
+  });
+
+  test("Select opens a positioned overlay menu and selects on click", async () => {
+    const { Select } = require("./index");
+    const seen: number[] = [];
+    render(
+      <Select options={["SINE", "SAW", "SQR"]} index={0} width={160} onChange={(i: number) => seen.push(i)} />,
+    );
+    await new Promise((r) => setTimeout(r, 0)); // let effects flush
+
+    // trigger has both layout + click listeners
+    const trigger: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.listeners?.includes("layout") && op[2]?.listeners?.includes("click"),
+    );
+    expect(trigger).toBeDefined();
+
+    // layout arrives, then the click opens the menu
+    dispatch({
+      kind: "event",
+      nodeId: trigger[1],
+      type: "layout",
+      payload: { x: 20, y: 40, width: 160, height: 33 },
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    dispatch({ kind: "event", nodeId: trigger[1], type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    // menu panel positioned under the trigger, same width
+    const panel: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.top === 40 + 33 + 4 && op[2]?.style?.left === 20,
+    );
+    expect(panel).toBeDefined();
+    expect(panel[2].style.width).toBe(160);
+
+    // find the "SAW" row: rawtext -> Text -> row
+    const sawText: any = allOps().find((op: any) => op[0] === "setText" && op[2] === "SAW");
+    expect(sawText).toBeDefined();
+    const parents = parentMap();
+    const rowId = parents.get(parents.get(sawText[1])!)!;
+
+    dispatch({ kind: "event", nodeId: rowId, type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(seen).toEqual([1]);
+    // menu removed after selection
+    expect(allOps().some((op: any) => op[0] === "removeChild")).toBe(true);
+  });
+
+  test("ParamSelect writes a begin/set/end gesture with the index mapping", async () => {
+    paramGetResult = { value: 0, text: "Sine", name: "Shape", label: "" };
+    const { ParamSelect } = require("./index");
+    render(<ParamSelect paramId="shape" options={["SINE", "SAW", "SQR"]} />);
+    await new Promise((r) => setTimeout(r, 0));
+
+    const trigger: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.listeners?.includes("layout") && op[2]?.listeners?.includes("click"),
+    );
+    dispatch({
+      kind: "event",
+      nodeId: trigger[1],
+      type: "layout",
+      payload: { x: 0, y: 0, width: 160, height: 33 },
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    dispatch({ kind: "event", nodeId: trigger[1], type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    const sqrText: any = allOps().find((op: any) => op[0] === "setText" && op[2] === "SQR");
+    const parents = parentMap();
+    const rowId = parents.get(parents.get(sqrText[1])!)!;
+    dispatch({ kind: "event", nodeId: rowId, type: "click" });
+
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args).toEqual({ id: "shape", value: 1 });
+    expect(nativeCalls.some((c) => c.name === "param:begin")).toBe(true);
+    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

@@ -2,10 +2,12 @@
 // switches — drawn by the VSReacT painter and driven by drag gestures.
 // Each has a Param* variant bound to an APVTS parameter.
 
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { View, Text } from "./primitives";
 import { useParameter, useParameterList } from "./parameters";
 import { useSpring } from "./animation";
+import { useLayoutRect } from "./hooks";
+import { useOverlay } from "./overlay";
 
 const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
 
@@ -23,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;
@@ -36,6 +45,9 @@ export function Knob({
   label,
   size = 64,
   disabled,
+  defaultValue,
+  bipolar,
+  wheelSensitivity = 0.4,
   trackColor = "#2A2F27",
   valueColor = "#C6F135",
   onChange,
@@ -43,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">
@@ -55,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
@@ -89,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 (
@@ -102,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}
     />
   );
 }
@@ -122,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;
@@ -136,6 +172,8 @@ export function Slider({
   vertical,
   label,
   disabled,
+  defaultValue,
+  wheelSensitivity = 0.4,
   trackColor = "#2A2F27",
   valueColor = "#C6F135",
   onChange,
@@ -153,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">
@@ -162,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"
@@ -191,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
@@ -215,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}
     />
   );
 }
@@ -564,3 +619,151 @@ export function GenericEditor({ columns = 4, size = 72, trackColor, valueColor }
     </View>
   );
 }
+
+// ── Select ─────────────────────────────────────────────────────────────
+
+export interface SelectProps {
+  options: string[];
+  index: number;
+  /** Trigger width; the menu matches it. Default 160. */
+  width?: number;
+  label?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  menuColor?: string;
+  activeColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  /** Menu scrolls beyond this height. Default 190. */
+  maxMenuHeight?: number;
+  onChange: (index: number) => void;
+}
+
+const SELECT_ROW_HEIGHT = 30;
+
+/** A dropdown: the menu renders in the overlay layer, positioned under
+    the trigger via onLayout, with a click-away backdrop and a scrolling
+    option list. */
+export function Select({
+  options,
+  index,
+  width = 160,
+  label,
+  disabled,
+  trackColor = "#2A2F27",
+  menuColor = "#20241F",
+  activeColor = "#C6F135",
+  textColor = "#d4d4d8",
+  activeTextColor = "#09090b",
+  maxMenuHeight = 190,
+  onChange,
+}: SelectProps) {
+  const [open, setOpen] = useState(false);
+  const [rect, onLayout] = useLayoutRect();
+  const overlay = useOverlay();
+  const current = Math.min(options.length - 1, Math.max(0, index));
+
+  useEffect(() => {
+    if (!open || rect === null) {
+      overlay.hide();
+      return;
+    }
+
+    const menuHeight = Math.min(options.length * SELECT_ROW_HEIGHT + 8, maxMenuHeight);
+
+    overlay.show(
+      <View className="absolute inset-0" onClick={() => setOpen(false)}>
+        <View
+          className="absolute rounded-lg border shadow-lg overflow-hidden"
+          style={{
+            left: rect.x,
+            top: rect.y + rect.height + 4,
+            width: rect.width,
+            backgroundColor: menuColor,
+            borderColor: "#00000066",
+          }}
+        >
+          <View className="overflow-y-scroll p-[4] gap-[2]" style={{ height: menuHeight }}>
+            {options.map((option, i) => (
+              <View
+                key={`${option}-${i}`}
+                className="px-3 py-[6] rounded cursor-pointer hover:bg-white/10"
+                style={{ backgroundColor: i === current ? activeColor : "#00000000" }}
+                onClick={() => {
+                  onChange(i);
+                  setOpen(false);
+                }}
+              >
+                <Text
+                  className="text-[12] font-medium"
+                  style={{ color: i === current ? activeTextColor : textColor }}
+                >
+                  {option}
+                </Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </View>,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, rect, options, current, menuColor, activeColor, textColor, activeTextColor, maxMenuHeight]);
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`flex-row items-center justify-between rounded-lg border px-3 py-[8] ${
+          disabled ? "opacity-40" : "cursor-pointer"
+        }`}
+        style={{ width, backgroundColor: trackColor, borderColor: "#00000055" }}
+        onLayout={onLayout}
+        onClick={disabled ? undefined : () => setOpen((v) => !v)}
+      >
+        <Text className="text-[12] font-medium" style={{ color: textColor }}>
+          {options[current] ?? ""}
+        </Text>
+        <Text className="text-[9]" style={{ color: textColor, opacity: 0.7 }}>
+          {open ? "▲" : "▼"}
+        </Text>
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamSelectProps {
+  paramId: string;
+  options: string[];
+  width?: number;
+  label?: string;
+  trackColor?: string;
+  menuColor?: string;
+  activeColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  maxMenuHeight?: number;
+}
+
+/** A Select bound to a choice-style APVTS parameter (same value↔index
+    mapping as ParamSegmented). */
+export function ParamSelect({ paramId, options, label, ...rest }: ParamSelectProps) {
+  const param = useParameter(paramId);
+  const count = Math.max(1, options.length);
+  const index = Math.round(param.value * (count - 1));
+
+  return (
+    <Select
+      options={options}
+      index={index}
+      label={label ?? param.name.toUpperCase()}
+      onChange={(i) => {
+        param.begin();
+        param.set(count <= 1 ? 0 : i / (count - 1));
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}

package/src/hooks.ts

@@ -2,6 +2,18 @@
 
 import { useEffect, useRef, useState } from "react";
 import { native } from "./native";
+import type { LayoutRect } from "./primitives";
+
+/**
+ * Captures a node's root-space rect from its onLayout prop:
+ *
+ *   const [rect, onLayout] = useLayoutRect();
+ *   <View onLayout={onLayout} />   // rect updates whenever layout moves it
+ */
+export function useLayoutRect(): [LayoutRect | null, (rect: LayoutRect) => void] {
+  const [rect, setRect] = useState<LayoutRect | null>(null);
+  return [rect, setRect];
+}
 
 /**
  * Subscribes to a C++ event (RootView::sendNativeEvent) for the lifetime

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",
@@ -31,6 +33,7 @@ const eventPropNames: Record<string, string> = {
   onDragStart: "dragstart",
   onDrag: "drag",
   onDragEnd: "dragend",
+  onLayout: "layout",
   onChange: "change",
   onSubmit: "submit",
   onFocus: "focus",

package/src/index.ts

@@ -13,7 +13,10 @@ export type {
 } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
-export { useNativeEvent, useDebounced } from "./hooks";
+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";
@@ -28,12 +31,14 @@ export {
   Toggle,
   XYPad,
   Segmented,
+  Select,
   GenericEditor,
   ParamKnob,
   ParamSlider,
   ParamToggle,
   ParamXYPad,
   ParamSegmented,
+  ParamSelect,
   dragToValue,
 } from "./controls";
 export type {
@@ -42,13 +47,15 @@ export type {
   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 } from "./primitives";
+export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";