@vsreact/core 0.0.10 → 0.0.11

package/dist/components.d.ts

@@ -12,3 +12,5 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export type { NumberBoxProps, CheckboxProps, RadioGroupProps, ParamNumberBoxProps, ParamCheckboxProps, ParamRadioGroupProps, } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";
+export type { MacroPadProps, ParamMacroPadProps, HardwareKnobProps, ParamHardwareKnobProps, CrossfaderProps, ParamCrossfaderProps, PulseOrbProps, } from "./specialty";

package/dist/components.js

@@ -12,3 +12,4 @@ export { Button } from "./button";
 export { Tooltip, Modal } from "./popover";
 export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
+export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/controls.d.ts

@@ -40,6 +40,8 @@ export interface SliderProps {
     height?: number;
     /** Vertical fader — drag up for more, fill rises from the bottom. */
     vertical?: boolean;
+    /** Flat hardware-style bar thumb instead of the dot. */
+    barThumb?: boolean;
     label?: string;
     disabled?: boolean;
     /** Double-click resets to this (DAW convention). */
@@ -52,7 +54,7 @@ export interface SliderProps {
     onBegin?: () => void;
     onEnd?: () => void;
 }
-export declare function Slider({ value, width, height, vertical, label, disabled, defaultValue, wheelSensitivity, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ value, width, height, vertical, barThumb, label, disabled, defaultValue, wheelSensitivity, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
 export interface ParamSliderProps {
     paramId: string;
     label?: string;
@@ -67,6 +69,9 @@ export declare function ParamSlider({ paramId, label, ...rest }: ParamSliderProp
 export interface ToggleProps {
     on: boolean;
     label?: string;
+    /** Side captions, hardware style: <Toggle offLabel="OFF" onLabel="ON" />. */
+    offLabel?: string;
+    onLabel?: string;
     /** Track height; width is 1.8×. Default 22. */
     size?: number;
     disabled?: boolean;
@@ -76,7 +81,7 @@ export interface ToggleProps {
     onChange: (on: boolean) => void;
 }
 /** A switch with a spring-animated thumb — bypass, on/off, A/B. */
-export declare function Toggle({ on, label, size, disabled, trackColor, onColor, thumbColor, onChange, }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ on, label, offLabel, onLabel, size, disabled, trackColor, onColor, thumbColor, onChange, }: ToggleProps): import("react").JSX.Element;
 export interface ParamToggleProps {
     paramId: string;
     label?: string;

package/dist/controls.js

@@ -50,7 +50,7 @@ export function ParamKnob({ paramId, label, ...rest }) {
     const param = useParameter(paramId);
     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, defaultValue, wheelSensitivity = 0.4, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+export function Slider({ value, width = 160, height = 160, vertical, barThumb, label, disabled, defaultValue, wheelSensitivity = 0.4, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
     const startValue = useRef(0);
     const clamped = clamp01(value);
     const onDragStart = disabled
@@ -70,9 +70,9 @@ export function Slider({ value, width = 160, height = 160, vertical, label, disa
         ? 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, 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: "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 } }), barThumb ? (_jsx(View, { className: "absolute w-[18] h-[5] rounded-[2] left-0", style: { top: (1 - clamped) * (height - 5), 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, 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] }));
+    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 } }), barThumb ? (_jsx(View, { className: "absolute w-[5] h-[18] rounded-[2] top-0", style: { left: clamped * (width - 5), 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 — double-click resets to the
     host's default, the wheel nudges, gestures stay automation-safe. */
@@ -81,18 +81,18 @@ export function ParamSlider({ paramId, label, ...rest }) {
     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, }) {
+export function Toggle({ on, label, offLabel, onLabel, size = 22, disabled, trackColor = "#2A2F27", onColor = "#C6F135", thumbColor = "#F4F4F5", onChange, }) {
     const t = useSpring(on ? 1 : 0, { stiffness: 300, damping: 28 });
     const trackWidth = Math.round(size * 1.8);
     const thumb = size - 6;
     const travel = trackWidth - thumb - 6;
-    return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }, onClick: disabled ? undefined : () => onChange(!on), children: _jsx(View, { className: "absolute rounded-full", style: {
-                        width: thumb,
-                        height: thumb,
-                        top: 3,
-                        left: 3 + clamp01(t) * travel,
-                        backgroundColor: thumbColor,
-                    } }) }), 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: "flex-row items-center gap-2", children: [offLabel !== undefined ? (_jsx(Text, { className: "text-[9] font-bold tracking-widest", style: { color: on ? "#6f6e66" : "#ECF2E8" }, children: offLabel })) : null, _jsx(View, { className: `relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }, onClick: disabled ? undefined : () => onChange(!on), children: _jsx(View, { className: "absolute rounded-full", style: {
+                                width: thumb,
+                                height: thumb,
+                                top: 3,
+                                left: 3 + clamp01(t) * travel,
+                                backgroundColor: thumbColor,
+                            } }) }), onLabel !== undefined ? (_jsx(Text, { className: "text-[9] font-bold tracking-widest", style: { color: on ? "#ECF2E8" : "#6f6e66" }, children: onLabel })) : null] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
 }
 /** A Toggle bound to a bool-style APVTS parameter (on = value ≥ 0.5). */
 export function ParamToggle({ paramId, label, ...rest }) {

package/dist/index.d.ts

@@ -28,4 +28,6 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export type { NumberBoxProps, CheckboxProps, RadioGroupProps, ParamNumberBoxProps, ParamCheckboxProps, ParamRadioGroupProps, } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";
+export type { MacroPadProps, ParamMacroPadProps, HardwareKnobProps, ParamHardwareKnobProps, CrossfaderProps, ParamCrossfaderProps, PulseOrbProps, } from "./specialty";
 export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";

package/dist/index.js

@@ -18,3 +18,4 @@ export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKno
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
+export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/specialty.d.ts

@@ -0,0 +1,109 @@
+export interface MacroPadProps {
+    /** Normalized 0..1. */
+    x: number;
+    /** Normalized 0..1 — 1 is the top. */
+    y: number;
+    /** Diameter. Default 220. */
+    size?: number;
+    labelX?: string;
+    labelY?: string;
+    disabled?: boolean;
+    /** Concentric ring count. Default 9. */
+    rings?: number;
+    /** Freeze the ring motion (reduced-motion, screenshots). */
+    animate?: boolean;
+    color?: string;
+    trackColor?: string;
+    onChange: (x: number, y: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** 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 declare function MacroPad({ x, y, size, labelX, labelY, disabled, rings, animate, color, trackColor, onChange, onBegin, onEnd, }: MacroPadProps): import("react").JSX.Element;
+export interface ParamMacroPadProps {
+    paramX: string;
+    paramY: string;
+    size?: number;
+    labelX?: string;
+    labelY?: string;
+    rings?: number;
+    animate?: boolean;
+    color?: string;
+    trackColor?: string;
+}
+/** A MacroPad driving two host parameters — labels default to their
+    names. */
+export declare function ParamMacroPad({ paramX, paramY, labelX, labelY, ...rest }: ParamMacroPadProps): import("react").JSX.Element;
+export interface HardwareKnobProps {
+    value: number;
+    size?: number;
+    label?: string;
+    text?: string;
+    disabled?: boolean;
+    defaultValue?: number;
+    wheelSensitivity?: number;
+    capColor?: string;
+    pointerColor?: string;
+    tickColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** 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 declare function HardwareKnob({ value, size, label, text, disabled, defaultValue, wheelSensitivity, capColor, pointerColor, tickColor, onChange, onBegin, onEnd, }: HardwareKnobProps): import("react").JSX.Element;
+export interface ParamHardwareKnobProps {
+    paramId: string;
+    size?: number;
+    label?: string;
+    capColor?: string;
+    pointerColor?: string;
+    tickColor?: string;
+    wheelSensitivity?: number;
+}
+/** A HardwareKnob bound to a host parameter. */
+export declare function ParamHardwareKnob({ paramId, label, ...rest }: ParamHardwareKnobProps): import("react").JSX.Element;
+export interface CrossfaderProps {
+    /** 0 = fully start-side (dry), 1 = fully end-side (wet). */
+    value: number;
+    width?: number;
+    height?: number;
+    labelStart?: string;
+    labelEnd?: string;
+    disabled?: boolean;
+    trackColor?: string;
+    handleColor?: string;
+    textColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** The DRY/WET strip: a wide track with a grippy rectangular handle. */
+export declare function Crossfader({ value, width, height, labelStart, labelEnd, disabled, trackColor, handleColor, textColor, onChange, onBegin, onEnd, }: CrossfaderProps): import("react").JSX.Element;
+export interface ParamCrossfaderProps {
+    paramId: string;
+    width?: number;
+    height?: number;
+    labelStart?: string;
+    labelEnd?: string;
+    trackColor?: string;
+    handleColor?: string;
+}
+/** A Crossfader bound to a host parameter — the classic mix control. */
+export declare function ParamCrossfader({ paramId, ...rest }: ParamCrossfaderProps): import("react").JSX.Element;
+export interface PulseOrbProps {
+    /** Level 0..1 — drives ring intensity and core glow. */
+    value: number;
+    size?: number;
+    color?: string;
+    /** Echo ring count. Default 4. */
+    rings?: number;
+    /** Freeze the motion. */
+    animate?: boolean;
+}
+/** A value-reactive orb: a glowing core emitting echo rings — visual
+    feedback for levels, activity, or just presence. */
+export declare function PulseOrb({ value, size, color, rings, animate, }: PulseOrbProps): import("react").JSX.Element;

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/package.json

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

package/src/components.ts

@@ -64,3 +64,21 @@ export type {
 } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+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);
+  });
+});

package/src/controls.tsx

@@ -152,6 +152,8 @@ export interface SliderProps {
   height?: number;
   /** Vertical fader — drag up for more, fill rises from the bottom. */
   vertical?: boolean;
+  /** Flat hardware-style bar thumb instead of the dot. */
+  barThumb?: boolean;
   label?: string;
   disabled?: boolean;
   /** Double-click resets to this (DAW convention). */
@@ -170,6 +172,7 @@ export function Slider({
   width = 160,
   height = 160,
   vertical,
+  barThumb,
   label,
   disabled,
   defaultValue,
@@ -223,10 +226,17 @@ export function Slider({
             className="absolute w-[4] rounded-full left-[7] bottom-0"
             style={{ height: clamped * height, backgroundColor: valueColor }}
           />
-          <View
-            className="absolute w-[12] h-[12] rounded-full left-[3]"
-            style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
-          />
+          {barThumb ? (
+            <View
+              className="absolute w-[18] h-[5] rounded-[2] left-0"
+              style={{ top: (1 - clamped) * (height - 5), backgroundColor: valueColor }}
+            />
+          ) : (
+            <View
+              className="absolute w-[12] h-[12] rounded-full left-[3]"
+              style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
+            />
+          )}
         </View>
         {label !== undefined ? (
           <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -251,10 +261,17 @@ export function Slider({
           className="absolute h-[4] rounded-full top-[7]"
           style={{ width: clamped * width, backgroundColor: valueColor }}
         />
-        <View
-          className="absolute w-[12] h-[12] rounded-full top-[3]"
-          style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
-        />
+        {barThumb ? (
+          <View
+            className="absolute w-[5] h-[18] rounded-[2] top-0"
+            style={{ left: clamped * (width - 5), backgroundColor: valueColor }}
+          />
+        ) : (
+          <View
+            className="absolute w-[12] h-[12] rounded-full top-[3]"
+            style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
+          />
+        )}
       </View>
       {label !== undefined ? (
         <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -295,6 +312,9 @@ export function ParamSlider({ paramId, label, ...rest }: ParamSliderProps) {
 export interface ToggleProps {
   on: boolean;
   label?: string;
+  /** Side captions, hardware style: <Toggle offLabel="OFF" onLabel="ON" />. */
+  offLabel?: string;
+  onLabel?: string;
   /** Track height; width is 1.8×. Default 22. */
   size?: number;
   disabled?: boolean;
@@ -308,6 +328,8 @@ export interface ToggleProps {
 export function Toggle({
   on,
   label,
+  offLabel,
+  onLabel,
   size = 22,
   disabled,
   trackColor = "#2A2F27",
@@ -322,21 +344,39 @@ export function Toggle({
 
   return (
     <View className="items-center gap-2">
-      <View
-        className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
-        style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
-        onClick={disabled ? undefined : () => onChange(!on)}
-      >
+      <View className="flex-row items-center gap-2">
+        {offLabel !== undefined ? (
+          <Text
+            className="text-[9] font-bold tracking-widest"
+            style={{ color: on ? "#6f6e66" : "#ECF2E8" }}
+          >
+            {offLabel}
+          </Text>
+        ) : null}
         <View
-          className="absolute rounded-full"
-          style={{
-            width: thumb,
-            height: thumb,
-            top: 3,
-            left: 3 + clamp01(t) * travel,
-            backgroundColor: thumbColor,
-          }}
-        />
+          className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
+          style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
+          onClick={disabled ? undefined : () => onChange(!on)}
+        >
+          <View
+            className="absolute rounded-full"
+            style={{
+              width: thumb,
+              height: thumb,
+              top: 3,
+              left: 3 + clamp01(t) * travel,
+              backgroundColor: thumbColor,
+            }}
+          />
+        </View>
+        {onLabel !== undefined ? (
+          <Text
+            className="text-[9] font-bold tracking-widest"
+            style={{ color: on ? "#ECF2E8" : "#6f6e66" }}
+          >
+            {onLabel}
+          </Text>
+        ) : null}
       </View>
       {label !== undefined ? (
         <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>

package/src/index.ts

@@ -90,4 +90,22 @@ export type {
 } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+export {
+  MacroPad,
+  ParamMacroPad,
+  HardwareKnob,
+  ParamHardwareKnob,
+  Crossfader,
+  ParamCrossfader,
+  PulseOrb,
+} from "./specialty";
+export type {
+  MacroPadProps,
+  ParamMacroPadProps,
+  HardwareKnobProps,
+  ParamHardwareKnobProps,
+  CrossfaderProps,
+  ParamCrossfaderProps,
+  PulseOrbProps,
+} from "./specialty";
 export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";

package/src/specialty.tsx

@@ -0,0 +1,514 @@
+// 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: number) => Math.min(1, Math.max(0, v));
+
+// ── MacroPad ───────────────────────────────────────────────────────────
+
+export interface MacroPadProps {
+  /** Normalized 0..1. */
+  x: number;
+  /** Normalized 0..1 — 1 is the top. */
+  y: number;
+  /** Diameter. Default 220. */
+  size?: number;
+  labelX?: string;
+  labelY?: string;
+  disabled?: boolean;
+  /** Concentric ring count. Default 9. */
+  rings?: number;
+  /** Freeze the ring motion (reduced-motion, screenshots). */
+  animate?: boolean;
+  color?: string;
+  trackColor?: string;
+  onChange: (x: number, y: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+/** 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,
+}: MacroPadProps) {
+  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(
+      <View
+        key={i}
+        className="absolute rounded-full border"
+        style={{
+          width: ringSize,
+          height: ringSize,
+          left: (size - ringSize) / 2,
+          top: (size - ringSize) / 2,
+          borderColor: color,
+          opacity,
+        }}
+      />,
+    );
+  }
+
+  return (
+    <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)}
+    >
+      {ringViews}
+      <View
+        className="absolute rounded-full"
+        style={{
+          width: thumb,
+          height: thumb,
+          left: tx,
+          top: ty,
+          backgroundColor: color,
+          shadowColor: color,
+          shadowRadius: 10,
+        }}
+      />
+      {labelY !== undefined ? (
+        <Text
+          className="absolute text-[9] font-bold tracking-widest"
+          style={{ left: 10, top: size / 2 - 6, color, opacity: 0.75 }}
+        >
+          {labelY}
+        </Text>
+      ) : null}
+      {labelX !== undefined ? (
+        <Text
+          className="absolute text-[9] font-bold tracking-widest"
+          style={{ bottom: 10, left: size / 2 - 24, color, opacity: 0.75 }}
+        >
+          {labelX}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamMacroPadProps {
+  paramX: string;
+  paramY: string;
+  size?: number;
+  labelX?: string;
+  labelY?: string;
+  rings?: number;
+  animate?: boolean;
+  color?: string;
+  trackColor?: string;
+}
+
+/** A MacroPad driving two host parameters — labels default to their
+    names. */
+export function ParamMacroPad({ paramX, paramY, labelX, labelY, ...rest }: ParamMacroPadProps) {
+  const px = useParameter(paramX);
+  const py = useParameter(paramY);
+
+  return (
+    <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;
+
+export interface HardwareKnobProps {
+  value: number;
+  size?: number;
+  label?: string;
+  text?: string;
+  disabled?: boolean;
+  defaultValue?: number;
+  wheelSensitivity?: number;
+  capColor?: string;
+  pointerColor?: string;
+  tickColor?: string;
+  onChange: (value: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+/** 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,
+}: HardwareKnobProps) {
+  const startValue = useRef(0);
+  const clamped = clamp01(value);
+  const angle = HW_START + (HW_END - HW_START) * clamped;
+
+  const nudge = (target: number) => {
+    onBegin?.();
+    onChange(clamp01(target));
+    onEnd?.();
+  };
+
+  return (
+    <View className="items-center gap-2">
+      <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)
+        }
+      >
+        <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",
+          }}
+        >
+          {text !== undefined ? (
+            <Text className="text-text font-bold" style={{ fontSize: Math.max(10, size * 0.14) }}>
+              {text}
+            </Text>
+          ) : null}
+        </View>
+        {/* the pointer: a bright notch riding the rim at the value angle */}
+        <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),
+          }}
+        />
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamHardwareKnobProps {
+  paramId: string;
+  size?: number;
+  label?: string;
+  capColor?: string;
+  pointerColor?: string;
+  tickColor?: string;
+  wheelSensitivity?: number;
+}
+
+/** A HardwareKnob bound to a host parameter. */
+export function ParamHardwareKnob({ paramId, label, ...rest }: ParamHardwareKnobProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <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}
+    />
+  );
+}
+
+// ── Crossfader ─────────────────────────────────────────────────────────
+
+export interface CrossfaderProps {
+  /** 0 = fully start-side (dry), 1 = fully end-side (wet). */
+  value: number;
+  width?: number;
+  height?: number;
+  labelStart?: string;
+  labelEnd?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  handleColor?: string;
+  textColor?: string;
+  onChange: (value: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+/** 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,
+}: CrossfaderProps) {
+  const startValue = useRef(0);
+  const clamped = clamp01(value);
+  const handleWidth = 26;
+  const travel = width - handleWidth - 6;
+
+  return (
+    <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?.();
+      }}
+    >
+      <Text
+        className="absolute text-[8] font-bold tracking-widest"
+        style={{ left: 7, top: height / 2 - 5, color: textColor }}
+      >
+        {labelStart}
+      </Text>
+      <Text
+        className="absolute text-[8] font-bold tracking-widest"
+        style={{ right: 7, top: height / 2 - 5, color: textColor }}
+      >
+        {labelEnd}
+      </Text>
+      <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",
+        }}
+      >
+        <View className="w-[2] h-[12] rounded-full" style={{ backgroundColor: "#00000066" }} />
+        <View className="w-[2] h-[12] rounded-full" style={{ backgroundColor: "#00000066" }} />
+      </View>
+    </View>
+  );
+}
+
+export interface ParamCrossfaderProps {
+  paramId: string;
+  width?: number;
+  height?: number;
+  labelStart?: string;
+  labelEnd?: string;
+  trackColor?: string;
+  handleColor?: string;
+}
+
+/** A Crossfader bound to a host parameter — the classic mix control. */
+export function ParamCrossfader({ paramId, ...rest }: ParamCrossfaderProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <Crossfader
+      value={param.value}
+      onChange={param.set}
+      onBegin={param.begin}
+      onEnd={param.end}
+      {...rest}
+    />
+  );
+}
+
+// ── PulseOrb ───────────────────────────────────────────────────────────
+
+export interface PulseOrbProps {
+  /** Level 0..1 — drives ring intensity and core glow. */
+  value: number;
+  size?: number;
+  color?: string;
+  /** Echo ring count. Default 4. */
+  rings?: number;
+  /** Freeze the motion. */
+  animate?: boolean;
+}
+
+/** 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,
+}: PulseOrbProps) {
+  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(
+      <View
+        key={i}
+        className="absolute rounded-full border"
+        style={{
+          width: ringSize,
+          height: ringSize,
+          left: (size - ringSize) / 2,
+          top: (size - ringSize) / 2,
+          borderColor: color,
+          opacity,
+        }}
+      />,
+    );
+  }
+
+  return (
+    <View className="relative" style={{ width: size, height: size }}>
+      {echoes}
+      <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,
+        }}
+      />
+    </View>
+  );
+}