@vsreact/core 0.0.10 → 0.0.12

package/dist/specialty.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The flagship-visual tier — Output-style macro pads, hardware knobs,
+// crossfader strips, and value-reactive orbs. Everything is painted
+// natively from Views, arcs, and shadows; the motion runs on the host
+// scheduler.
+import { useRef, useState } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+import { useInterval } from "./hooks";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** The centerpiece macro control: a circular 2D pad whose concentric
+    rings breathe with the values — x spreads them, y drives their
+    intensity. One drag, two parameters, instrument-grade presence. */
+export function MacroPad({ x, y, size = 220, labelX, labelY, disabled, rings = 9, animate = true, color = "#C6F135", trackColor = "#101210", onChange, onBegin, onEnd, }) {
+    const start = useRef({ x: 0, y: 0 });
+    const [phase, setPhase] = useState(0);
+    useInterval(() => setPhase((p) => (p + 1) % 1000), animate && !disabled ? 50 : null);
+    const cx = clamp01(x);
+    const cy = clamp01(y);
+    const thumb = 12;
+    const tx = cx * (size - thumb);
+    const ty = (1 - cy) * (size - thumb);
+    const ringViews = [];
+    for (let i = 0; i < rings; i++) {
+        const t = (i + 1) / rings;
+        // x spreads the rings outward; the phase makes them breathe gently.
+        const spread = 0.3 + 0.7 * Math.pow(t, 1.6 - cx * 1.2);
+        const breathe = 1 + 0.02 * Math.sin(phase / 6 + i * 0.9);
+        const ringSize = Math.min(size - 2, size * spread * breathe);
+        // y drives intensity; outer rings fade.
+        const opacity = clamp01((0.12 + 0.5 * cy) * (1.15 - t) * (0.8 + 0.2 * Math.sin(phase / 9 + i)));
+        ringViews.push(_jsx(View, { className: "absolute rounded-full border", style: {
+                width: ringSize,
+                height: ringSize,
+                left: (size - ringSize) / 2,
+                top: (size - ringSize) / 2,
+                borderColor: color,
+                opacity,
+            } }, i));
+    }
+    return (_jsxs(View, { className: `relative rounded-full overflow-hidden border ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width: size, height: size, backgroundColor: trackColor, borderColor: "#00000066" }, onDragStart: disabled
+            ? undefined
+            : () => {
+                start.current = { x: cx, y: cy };
+                onBegin?.();
+            }, onDrag: disabled
+            ? undefined
+            : (e) => onChange(clamp01(start.current.x + e.dx / size), clamp01(start.current.y - e.dy / size)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled ? undefined : () => onChange(0.5, 0.5), children: [ringViews, _jsx(View, { className: "absolute rounded-full", style: {
+                    width: thumb,
+                    height: thumb,
+                    left: tx,
+                    top: ty,
+                    backgroundColor: color,
+                    shadowColor: color,
+                    shadowRadius: 10,
+                } }), labelY !== undefined ? (_jsx(Text, { className: "absolute text-[9] font-bold tracking-widest", style: { left: 10, top: size / 2 - 6, color, opacity: 0.75 }, children: labelY })) : null, labelX !== undefined ? (_jsx(Text, { className: "absolute text-[9] font-bold tracking-widest", style: { bottom: 10, left: size / 2 - 24, color, opacity: 0.75 }, children: labelX })) : null] }));
+}
+/** A MacroPad driving two host parameters — labels default to their
+    names. */
+export function ParamMacroPad({ paramX, paramY, labelX, labelY, ...rest }) {
+    const px = useParameter(paramX);
+    const py = useParameter(paramY);
+    return (_jsx(MacroPad, { x: px.value, y: py.value, labelX: labelX ?? px.name.toUpperCase(), labelY: labelY ?? py.name.toUpperCase(), onChange: (nx, ny) => {
+            px.set(nx);
+            py.set(ny);
+        }, onBegin: () => {
+            px.begin();
+            py.begin();
+        }, onEnd: () => {
+            px.end();
+            py.end();
+        }, ...rest }));
+}
+// ── HardwareKnob ───────────────────────────────────────────────────────
+const HW_START = -135;
+const HW_END = 135;
+/** The skeuomorphic knob: a dark hardware cap with a glowing pointer
+    notch at the rim and a faint tick track — the audio-ui.com look,
+    painted natively. */
+export function HardwareKnob({ value, size = 88, label, text, disabled, defaultValue, wheelSensitivity = 0.4, capColor = "#1B1B1A", pointerColor = "#C6F135", tickColor = "#FFFFFF14", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp01(value);
+    const angle = HW_START + (HW_END - HW_START) * clamped;
+    const nudge = (target) => {
+        onBegin?.();
+        onChange(clamp01(target));
+        onEnd?.();
+    };
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: `relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: {
+                    width: size,
+                    height: size,
+                    arcTrackColor: tickColor,
+                    arcStart: HW_START,
+                    arcEnd: HW_END,
+                    arcThickness: 2,
+                }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        startValue.current = clamped;
+                        onBegin?.();
+                    }, onDrag: disabled
+                    ? undefined
+                    : (e) => onChange(clamp01(startValue.current - e.dy * 0.005)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue), onWheel: disabled || wheelSensitivity === 0
+                    ? undefined
+                    : (e) => nudge(clamped + e.dy * wheelSensitivity), children: [_jsx(View, { className: "absolute rounded-full border items-center justify-center shadow-lg", style: {
+                            left: size * 0.09,
+                            top: size * 0.09,
+                            width: size * 0.82,
+                            height: size * 0.82,
+                            backgroundColor: capColor,
+                            borderColor: "#000000AA",
+                        }, children: text !== undefined ? (_jsx(Text, { className: "text-text font-bold", style: { fontSize: Math.max(10, size * 0.14) }, children: text })) : null }), _jsx(View, { className: "absolute inset-0", style: {
+                            arcColor: pointerColor,
+                            arcStart: HW_START,
+                            arcEnd: HW_END,
+                            arcValueStart: angle - 4,
+                            arcValueEnd: angle + 4,
+                            arcThickness: Math.max(4, size * 0.075),
+                        } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A HardwareKnob bound to a host parameter. */
+export function ParamHardwareKnob({ paramId, label, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(HardwareKnob, { value: param.value, text: param.text, label: label ?? param.name.toUpperCase(), defaultValue: param.defaultValue, onChange: param.set, onBegin: param.begin, onEnd: param.end, ...rest }));
+}
+/** The DRY/WET strip: a wide track with a grippy rectangular handle. */
+export function Crossfader({ value, width = 220, height = 34, labelStart = "DRY", labelEnd = "WET", disabled, trackColor = "#141614", handleColor = "#2E332C", textColor = "#6f6e66", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp01(value);
+    const handleWidth = 26;
+    const travel = width - handleWidth - 6;
+    return (_jsxs(View, { className: `relative rounded-lg border justify-center ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width, height, backgroundColor: trackColor, borderColor: "#00000066" }, onDragStart: disabled
+            ? undefined
+            : () => {
+                startValue.current = clamped;
+                onBegin?.();
+            }, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / travel)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled ? undefined : () => {
+            onBegin?.();
+            onChange(0.5);
+            onEnd?.();
+        }, children: [_jsx(Text, { className: "absolute text-[8] font-bold tracking-widest", style: { left: 7, top: height / 2 - 5, color: textColor }, children: labelStart }), _jsx(Text, { className: "absolute text-[8] font-bold tracking-widest", style: { right: 7, top: height / 2 - 5, color: textColor }, children: labelEnd }), _jsxs(View, { className: "absolute rounded-md border flex-row items-center justify-center gap-[3]", style: {
+                    left: 3 + clamped * travel,
+                    top: 3,
+                    bottom: 3,
+                    width: handleWidth,
+                    backgroundColor: handleColor,
+                    borderColor: "#00000088",
+                }, children: [_jsx(View, { className: "w-[2] h-[12] rounded-full", style: { backgroundColor: "#00000066" } }), _jsx(View, { className: "w-[2] h-[12] rounded-full", style: { backgroundColor: "#00000066" } })] })] }));
+}
+/** A Crossfader bound to a host parameter — the classic mix control. */
+export function ParamCrossfader({ paramId, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(Crossfader, { value: param.value, onChange: param.set, onBegin: param.begin, onEnd: param.end, ...rest }));
+}
+/** A value-reactive orb: a glowing core emitting echo rings — visual
+    feedback for levels, activity, or just presence. */
+export function PulseOrb({ value, size = 120, color = "#C6F135", rings = 4, animate = true, }) {
+    const [phase, setPhase] = useState(0);
+    useInterval(() => setPhase((p) => (p + 1) % 1000), animate ? 40 : null);
+    const level = clamp01(value);
+    const core = 14 + level * 12;
+    const echoes = [];
+    for (let i = 0; i < rings; i++) {
+        const t = ((phase * (1 + level * 2) + (i * 100) / rings) % 100) / 100;
+        const ringSize = core + t * (size - core - 4);
+        const opacity = clamp01((1 - t) * (0.15 + 0.6 * level));
+        echoes.push(_jsx(View, { className: "absolute rounded-full border", style: {
+                width: ringSize,
+                height: ringSize,
+                left: (size - ringSize) / 2,
+                top: (size - ringSize) / 2,
+                borderColor: color,
+                opacity,
+            } }, i));
+    }
+    return (_jsxs(View, { className: "relative", style: { width: size, height: size }, children: [echoes, _jsx(View, { className: "absolute rounded-full", style: {
+                    width: core,
+                    height: core,
+                    left: (size - core) / 2,
+                    top: (size - core) / 2,
+                    backgroundColor: color,
+                    shadowColor: color,
+                    shadowRadius: 6 + level * 14,
+                    opacity: 0.55 + 0.45 * level,
+                } })] }));
+}

package/dist/tw.js

@@ -217,6 +217,11 @@ function resolveClass(cls) {
         case "text": {
             if (rest in textSizes)
                 return { fontSize: textSizes[rest] };
+            if (rest.startsWith("[") && !rest.startsWith("[#")) {
+                const size = parseLength(rest);
+                if (typeof size === "number")
+                    return { fontSize: size };
+            }
             const color = resolveColor(rest);
             return color !== undefined ? { color } : undefined;
         }

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "@vsreact/core",
-  "version": "0.0.10",
-  "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
-  "keywords": [
-    "react",
-    "juce",
-    "vst",
-    "vst3",
-    "audio-plugin",
-    "renderer",
-    "quickjs",
-    "yoga",
-    "native",
-    "daw"
-  ],
-  "type": "module",
-  "license": "MIT",
-  "homepage": "https://vsreact.n9records.com",
-  "bugs": "https://github.com/N9RecordsTechnologiesIL/VSReacT/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/N9RecordsTechnologiesIL/VSReacT.git",
-    "directory": "vsreact/js"
-  },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "bun": "./src/index.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./components": {
-      "types": "./dist/components.d.ts",
-      "bun": "./src/components.ts",
-      "import": "./dist/components.js",
-      "default": "./dist/components.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "build.ts"
-  ],
-  "scripts": {
-    "test": "bun test",
-    "typecheck": "tsc --noEmit",
-    "build": "bun run build.ts",
-    "build:dist": "tsc -p tsconfig.build.json",
-    "prepublishOnly": "bun run build:dist"
-  },
-  "dependencies": {
-    "@types/react": "^18.3.3",
-    "react": "18.3.1",
-    "react-reconciler": "0.29.2"
-  },
-  "devDependencies": {
-    "@types/react-reconciler": "0.28.8",
-    "bun-types": "^1.3.14",
-    "typescript": "^5.5.0"
-  }
-}
+{
+  "name": "@vsreact/core",
+  "version": "0.0.12",
+  "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
+  "keywords": [
+    "react",
+    "juce",
+    "vst",
+    "vst3",
+    "audio-plugin",
+    "renderer",
+    "quickjs",
+    "yoga",
+    "native",
+    "daw"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://vsreact.n9records.com",
+  "bugs": "https://github.com/N9RecordsTechnologiesIL/VSReacT/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/N9RecordsTechnologiesIL/VSReacT.git",
+    "directory": "vsreact/js"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "bun": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "bun": "./src/components.ts",
+      "import": "./dist/components.js",
+      "default": "./dist/components.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "build.ts"
+  ],
+  "scripts": {
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "build": "bun run build.ts",
+    "build:dist": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build:dist"
+  },
+  "dependencies": {
+    "@types/react": "^18.3.3",
+    "react": "18.3.1",
+    "react-reconciler": "0.29.2"
+  },
+  "devDependencies": {
+    "@types/react-reconciler": "0.28.8",
+    "bun-types": "^1.3.14",
+    "typescript": "^5.5.0"
+  }
+}

package/src/bridge.ts

@@ -1,66 +1,66 @@
-// JS side of the mutation/event bridge. Ops queue up during a React commit
-// and flush to C++ as one JSON batch; C++ pushes events back through the
-// __vsreact_dispatch global registered here.
-
-import { fireTimer } from "./runtime";
-
-export type Op = unknown[];
-
-let queue: Op[] = [];
-
-export function queueOp(op: Op): void {
-  queue.push(op);
-}
-
-export function flushOps(): void {
-  if (queue.length === 0) return;
-  const json = JSON.stringify(queue);
-  queue = [];
-  (globalThis as Record<string, any>).__vsreact_flush?.(json);
-}
-
-export type EventHandler = (payload: unknown) => void;
-
-const eventHandlers = new Map<number, Map<string, EventHandler>>();
-
-export function setHandlers(nodeId: number, handlers: Map<string, EventHandler>): void {
-  if (handlers.size === 0) eventHandlers.delete(nodeId);
-  else eventHandlers.set(nodeId, handlers);
-}
-
-export function removeHandlers(nodeId: number): void {
-  eventHandlers.delete(nodeId);
-}
-
-const nativeListeners = new Map<string, Set<EventHandler>>();
-
-export function addNativeListener(name: string, cb: EventHandler): () => void {
-  let set = nativeListeners.get(name);
-  if (!set) nativeListeners.set(name, (set = new Set()));
-  set.add(cb);
-  return () => {
-    set.delete(cb);
-    if (set.size === 0) nativeListeners.delete(name);
-  };
-}
-
-interface DispatchMessage {
-  kind: "event" | "native" | "timer";
-  nodeId?: number;
-  type?: string;
-  name?: string;
-  id?: number;
-  payload?: unknown;
-}
-
-(globalThis as Record<string, any>).__vsreact_dispatch = (json: string) => {
-  const msg = JSON.parse(json) as DispatchMessage;
-
-  if (msg.kind === "timer" && msg.id !== undefined) {
-    fireTimer(msg.id);
-  } else if (msg.kind === "event" && msg.nodeId !== undefined && msg.type) {
-    eventHandlers.get(msg.nodeId)?.get(msg.type)?.(msg.payload);
-  } else if (msg.kind === "native" && msg.name) {
-    nativeListeners.get(msg.name)?.forEach((cb) => cb(msg.payload));
-  }
-};
+// JS side of the mutation/event bridge. Ops queue up during a React commit
+// and flush to C++ as one JSON batch; C++ pushes events back through the
+// __vsreact_dispatch global registered here.
+
+import { fireTimer } from "./runtime";
+
+export type Op = unknown[];
+
+let queue: Op[] = [];
+
+export function queueOp(op: Op): void {
+  queue.push(op);
+}
+
+export function flushOps(): void {
+  if (queue.length === 0) return;
+  const json = JSON.stringify(queue);
+  queue = [];
+  (globalThis as Record<string, any>).__vsreact_flush?.(json);
+}
+
+export type EventHandler = (payload: unknown) => void;
+
+const eventHandlers = new Map<number, Map<string, EventHandler>>();
+
+export function setHandlers(nodeId: number, handlers: Map<string, EventHandler>): void {
+  if (handlers.size === 0) eventHandlers.delete(nodeId);
+  else eventHandlers.set(nodeId, handlers);
+}
+
+export function removeHandlers(nodeId: number): void {
+  eventHandlers.delete(nodeId);
+}
+
+const nativeListeners = new Map<string, Set<EventHandler>>();
+
+export function addNativeListener(name: string, cb: EventHandler): () => void {
+  let set = nativeListeners.get(name);
+  if (!set) nativeListeners.set(name, (set = new Set()));
+  set.add(cb);
+  return () => {
+    set.delete(cb);
+    if (set.size === 0) nativeListeners.delete(name);
+  };
+}
+
+interface DispatchMessage {
+  kind: "event" | "native" | "timer";
+  nodeId?: number;
+  type?: string;
+  name?: string;
+  id?: number;
+  payload?: unknown;
+}
+
+(globalThis as Record<string, any>).__vsreact_dispatch = (json: string) => {
+  const msg = JSON.parse(json) as DispatchMessage;
+
+  if (msg.kind === "timer" && msg.id !== undefined) {
+    fireTimer(msg.id);
+  } else if (msg.kind === "event" && msg.nodeId !== undefined && msg.type) {
+    eventHandlers.get(msg.nodeId)?.get(msg.type)?.(msg.payload);
+  } else if (msg.kind === "native" && msg.name) {
+    nativeListeners.get(msg.name)?.forEach((cb) => cb(msg.payload));
+  }
+};

package/src/components.ts

@@ -64,3 +64,25 @@ export type {
 } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+export { PianoKeyboard } from "./keyboard";
+export type { PianoKeyboardProps } from "./keyboard";
+export { StepSequencer } from "./sequencer";
+export type { StepSequencerProps } from "./sequencer";
+export {
+  MacroPad,
+  ParamMacroPad,
+  HardwareKnob,
+  ParamHardwareKnob,
+  Crossfader,
+  ParamCrossfader,
+  PulseOrb,
+} from "./specialty";
+export type {
+  MacroPadProps,
+  ParamMacroPadProps,
+  HardwareKnobProps,
+  ParamHardwareKnobProps,
+  CrossfaderProps,
+  ParamCrossfaderProps,
+  PulseOrbProps,
+} from "./specialty";

package/src/controls.test.tsx

@@ -664,3 +664,112 @@ describe("0.0.10 — fields & feedback", () => {
     expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "GAIN")).toBe(true);
   });
 });
+
+describe("0.0.11 — flagship visuals", () => {
+  test("MacroPad: drag maps both axes, double-click recenters, rings render", () => {
+    const { MacroPad } = require("./index");
+    const seen: Array<[number, number]> = [];
+    render(
+      <MacroPad x={0.5} y={0.5} size={200} animate={false} rings={6} onChange={(x: number, y: number) => seen.push([x, y])} />,
+    );
+
+    const id = nodeWithListener("drag");
+    dispatch({ kind: "event", nodeId: id, type: "dragstart", payload: { dx: 0, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 50, dy: -50, x: 0, y: 0 } });
+    expect(seen.at(-1)?.[0]).toBeCloseTo(0.75);
+    expect(seen.at(-1)?.[1]).toBeCloseTo(0.75);
+
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toEqual([0.5, 0.5]);
+
+    // six rings + thumb: ring views carry borderColor + opacity
+    const rings = opsNamed("setProps").filter(
+      (op: any) => op[2]?.style?.borderColor === "#C6F135" && op[2]?.style?.opacity !== undefined,
+    );
+    expect(rings.length).toBeGreaterThanOrEqual(6);
+  });
+
+  test("ParamMacroPad opens and closes both gestures", () => {
+    const { ParamMacroPad } = require("./index");
+    render(<ParamMacroPad paramX="cutoff" paramY="res" animate={false} />);
+
+    const id = nodeWithListener("drag");
+    dispatch({ kind: "event", nodeId: id, type: "dragstart", payload: { dx: 0, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 20, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "dragend", payload: { dx: 20, dy: 0, x: 0, y: 0 } });
+
+    expect(nativeCalls.filter((c) => c.name === "param:begin").length).toBe(2);
+    expect(nativeCalls.filter((c) => c.name === "param:end").length).toBe(2);
+    expect(nativeCalls.filter((c) => c.name === "param:set").length).toBe(2);
+  });
+
+  test("HardwareKnob: pointer notch tracks the angle; DAW gestures work", () => {
+    const { HardwareKnob } = require("./index");
+    const seen: number[] = [];
+    render(<HardwareKnob value={0.5} defaultValue={0.25} onChange={(v: number) => seen.push(v)} />);
+
+    // value 0.5 -> angle 0 -> notch arc -4..+4
+    const notch: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.arcValueStart === -4 && op[2]?.style?.arcValueEnd === 4,
+    );
+    expect(notch).toBeDefined();
+
+    const id = nodeWithListener("dblclick");
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toBe(0.25);
+
+    dispatch({ kind: "event", nodeId: id, type: "wheel", payload: { dy: 0.1 } });
+    expect(seen.at(-1)).toBeCloseTo(0.54);
+  });
+
+  test("Crossfader: horizontal drag with travel compensation, labels render", () => {
+    const { Crossfader } = require("./index");
+    const seen: number[] = [];
+    render(<Crossfader value={0.5} width={220} onChange={(v: number) => seen.push(v)} />);
+
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "DRY")).toBe(true);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "WET")).toBe(true);
+
+    const id = nodeWithListener("drag");
+    dispatch({ kind: "event", nodeId: id, type: "dragstart", payload: { dx: 0, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 94, dy: 0, x: 0, y: 0 } }); // travel = 220-26-6 = 188
+    expect(seen.at(-1)).toBeCloseTo(1);
+
+    dispatch({ kind: "event", nodeId: id, type: "dblclick" });
+    expect(seen.at(-1)).toBe(0.5);
+  });
+
+  test("PulseOrb: echo rings advance with the phase", async () => {
+    const { PulseOrb } = require("./index");
+    render(<PulseOrb value={0.8} size={100} rings={3} />);
+
+    const sizesAt = () =>
+      opsNamed("setProps")
+        .filter((op: any) => op[2]?.style?.borderColor === "#C6F135")
+        .map((op: any) => op[2].style.width);
+    const before = sizesAt().length;
+    await new Promise((r) => setTimeout(r, 100));
+    expect(sizesAt().length).toBeGreaterThan(before); // new frames landed
+
+    // the core glows with the level
+    const core: any = opsNamed("setProps").find((op: any) => op[2]?.style?.shadowColor === "#C6F135");
+    expect(core).toBeDefined();
+  });
+
+  test("Toggle side labels highlight the active side; Slider barThumb renders a bar", () => {
+    const { Toggle: T2, Slider: S2 } = require("./index");
+    render(<T2 on={false} offLabel="OFF" onLabel="ON" onChange={() => {}} />);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "OFF")).toBe(true);
+    expect(allOps().some((op: any) => op[0] === "setText" && op[2] === "ON")).toBe(true);
+
+    unmount();
+    batches.length = 0;
+    render(<S2 vertical barThumb height={100} value={0.5} onChange={() => {}} />);
+    // bar thumb: 18 wide, 5 tall at the halfway point
+    const bar: any = opsNamed("setProps").find(
+      (op: any) => op[2]?.style?.width === 18 && op[2]?.style?.height === 5,
+    );
+    expect(bar).toBeDefined();
+    expect(bar[2].style.top).toBeCloseTo(0.5 * 95);
+  });
+});