@vsreact/core 0.0.9 → 0.0.11

package/dist/components.d.ts

@@ -8,3 +8,9 @@ export { Button } from "./button";
 export type { ButtonProps } from "./button";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";
+export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
+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

@@ -10,3 +10,6 @@ export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export { Bars, Waveform, useRollingBuffer, pushRolling } from "./visualizers";
 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;
@@ -148,8 +153,9 @@ export interface GenericEditorProps {
     trackColor?: string;
     valueColor?: string;
 }
-/** The zero-effort editor: one knob per APVTS parameter, laid out in
-    rows. `render(<GenericEditor />)` is a complete, working plugin UI. */
+/** The zero-effort editor: one knob per APVTS parameter with a live
+    value label and name under each, laid out in rows.
+    `render(<GenericEditor />)` is a complete, working plugin UI. */
 export declare function GenericEditor({ columns, size, trackColor, valueColor }: GenericEditorProps): import("react").JSX.Element;
 export interface SelectProps {
     options: 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 }) {
@@ -152,14 +152,20 @@ export function ParamSegmented({ paramId, options, label, ...rest }) {
             param.end();
         }, ...rest }));
 }
-/** The zero-effort editor: one knob per APVTS parameter, laid out in
-    rows. `render(<GenericEditor />)` is a complete, working plugin UI. */
+/** One GenericEditor cell: knob + live value label + name. */
+function GenericEditorKnob({ paramId, size, trackColor, valueColor, }) {
+    const param = useParameter(paramId);
+    return (_jsxs(View, { className: "items-center gap-1", children: [_jsx(Knob, { value: param.value, size: size, defaultValue: param.defaultValue, trackColor: trackColor, valueColor: valueColor, onChange: param.set, onBegin: param.begin, onEnd: param.end }), _jsx(Text, { className: "text-text text-[11] font-bold", children: param.text }), _jsx(Text, { className: "text-faint text-[9] font-bold tracking-widest", children: param.name.toUpperCase() })] }));
+}
+/** The zero-effort editor: one knob per APVTS parameter with a live
+    value label and name under each, laid out in rows.
+    `render(<GenericEditor />)` is a complete, working plugin UI. */
 export function GenericEditor({ columns = 4, size = 72, trackColor, valueColor }) {
     const params = useParameterList();
     const rows = [];
     for (let i = 0; i < params.length; i += Math.max(1, columns))
         rows.push(params.slice(i, i + Math.max(1, columns)));
-    return (_jsx(View, { className: "flex-1 flex-col items-center justify-center gap-6 p-4", children: rows.map((row, index) => (_jsx(View, { className: "flex-row gap-7", children: row.map((param) => (_jsx(ParamKnob, { paramId: param.id, size: size, trackColor: trackColor, valueColor: valueColor }, param.id))) }, index))) }));
+    return (_jsx(View, { className: "flex-1 flex-col items-center justify-center gap-6 p-4", children: rows.map((row, index) => (_jsx(View, { className: "flex-row gap-7", children: row.map((param) => (_jsx(GenericEditorKnob, { paramId: param.id, size: size, trackColor: trackColor, valueColor: valueColor }, param.id))) }, index))) }));
 }
 const SELECT_ROW_HEIGHT = 30;
 /** A dropdown: the menu renders in the overlay layer, positioned under

package/dist/feedback.d.ts

@@ -0,0 +1,24 @@
+export interface ProgressBarProps {
+    /** 0..1. */
+    value: number;
+    width?: number;
+    height?: number;
+    /** Renders "42%" alongside the bar. Default false. */
+    showPercent?: boolean;
+    trackColor?: string;
+    color?: string;
+    label?: string;
+}
+/** A determinate progress bar — downloads, renders, analysis passes. */
+export declare function ProgressBar({ value, width, height, showPercent, trackColor, color, label, }: ProgressBarProps): import("react").JSX.Element;
+export interface SpinnerProps {
+    /** Diameter. Default 28. */
+    size?: number;
+    thickness?: number;
+    color?: string;
+    trackColor?: string;
+    /** Degrees per 16ms tick. Default 9 (~ one turn / 0.64s). */
+    speed?: number;
+}
+/** An indeterminate spinner — a 100° arc chasing its own tail. */
+export declare function Spinner({ size, thickness, color, trackColor, speed, }: SpinnerProps): import("react").JSX.Element;

package/dist/feedback.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Feedback components — determinate progress and the indeterminate
+// spinner, both painted natively.
+import { useState } from "react";
+import { View, Text } from "./primitives";
+import { useInterval } from "./hooks";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** A determinate progress bar — downloads, renders, analysis passes. */
+export function ProgressBar({ value, width = 200, height = 8, showPercent = false, trackColor = "#2A2F27", color = "#C6F135", label, }) {
+    const level = clamp01(value);
+    const bar = (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(View, { className: "rounded-full overflow-hidden", style: { width, height, backgroundColor: trackColor }, children: _jsx(View, { className: "rounded-full", style: { width: level * width, height, backgroundColor: color } }) }), showPercent ? (_jsx(Text, { className: "text-faint text-[11] font-bold", style: { width: 34 }, children: `${Math.round(level * 100)}%` })) : null] }));
+    if (label === undefined)
+        return bar;
+    return (_jsxs(View, { className: "items-center gap-2", children: [bar, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));
+}
+/** An indeterminate spinner — a 100° arc chasing its own tail. */
+export function Spinner({ size = 28, thickness, color = "#C6F135", trackColor = "#FFFFFF14", speed = 9, }) {
+    const [angle, setAngle] = useState(0);
+    useInterval(() => setAngle((a) => (a + speed) % 360), 16);
+    return (_jsx(View, { style: {
+            width: size,
+            height: size,
+            arcTrackColor: trackColor,
+            arcColor: color,
+            arcStart: 0,
+            arcEnd: 360,
+            arcValueStart: angle,
+            arcValueEnd: angle + 100,
+            arcThickness: thickness ?? Math.max(2.5, size * 0.11),
+        } }));
+}

package/dist/fields.d.ts

@@ -0,0 +1,79 @@
+/** Snap onto the step grid without float dust. */
+export declare function snapToStep(value: number, step: number, min: number): number;
+export interface NumberBoxProps {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Value change per step; drags move ~a step per 4px. Default 1. */
+    step?: number;
+    /** Renders the value. Default: trimmed to 2 decimals. */
+    format?: (value: number) => string;
+    label?: string;
+    width?: number;
+    disabled?: boolean;
+    /** Double-click resets to this. */
+    defaultValue?: number;
+    trackColor?: string;
+    textColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** The draggable number — BPM, milliseconds, semitones. Drag vertically,
+    wheel to step, double-click to reset. */
+export declare function NumberBox({ value, min, max, step, format, label, width, disabled, defaultValue, trackColor, textColor, onChange, onBegin, onEnd, }: NumberBoxProps): import("react").JSX.Element;
+export interface ParamNumberBoxProps {
+    paramId: string;
+    label?: string;
+    width?: number;
+    /** Normalized step per wheel notch / drag unit. Default 0.01. */
+    step?: number;
+}
+/** A NumberBox over a host parameter: shows the host's formatted text,
+    drags the normalized value, double-click resets to the default. */
+export declare function ParamNumberBox({ paramId, label, width, step }: ParamNumberBoxProps): import("react").JSX.Element;
+export interface CheckboxProps {
+    checked: boolean;
+    label?: string;
+    disabled?: boolean;
+    /** Box edge length. Default 16. */
+    size?: number;
+    accentColor?: string;
+    boxColor?: string;
+    textColor?: string;
+    onChange: (checked: boolean) => void;
+}
+/** A checkbox row — settings panels, option lists. */
+export declare function Checkbox({ checked, label, disabled, size, accentColor, boxColor, textColor, onChange, }: CheckboxProps): import("react").JSX.Element;
+export interface ParamCheckboxProps {
+    paramId: string;
+    label?: string;
+    size?: number;
+    accentColor?: string;
+}
+/** A Checkbox bound to a bool-style parameter (checked = value ≥ 0.5). */
+export declare function ParamCheckbox({ paramId, label, ...rest }: ParamCheckboxProps): import("react").JSX.Element;
+export interface RadioGroupProps {
+    options: string[];
+    index: number;
+    disabled?: boolean;
+    /** Row spacing. Default 8. */
+    gap?: number;
+    accentColor?: string;
+    dotColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+    onChange: (index: number) => void;
+}
+/** Vertical exclusive options with dots — the settings-panel sibling of
+    <Segmented>. */
+export declare function RadioGroup({ options, index, disabled, gap, accentColor, dotColor, textColor, activeTextColor, onChange, }: RadioGroupProps): import("react").JSX.Element;
+export interface ParamRadioGroupProps {
+    paramId: string;
+    options: string[];
+    gap?: number;
+    accentColor?: string;
+}
+/** A RadioGroup bound to a choice-style parameter (value ↔ index, like
+    ParamSegmented). */
+export declare function ParamRadioGroup({ paramId, options, ...rest }: ParamRadioGroupProps): import("react").JSX.Element;

package/dist/fields.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Field controls — the number box, checkbox, and radio group. Settings
+// panels and fine-value entry, with the same DAW conventions as the
+// knobs: drag, wheel, double-click reset, automation-safe Param twins.
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+/** Snap onto the step grid without float dust. */
+export function snapToStep(value, step, min) {
+    const steps = Math.round((value - min) / step);
+    return Number((min + steps * step).toPrecision(12));
+}
+/** The draggable number — BPM, milliseconds, semitones. Drag vertically,
+    wheel to step, double-click to reset. */
+export function NumberBox({ value, min = 0, max = 100, step = 1, format = (v) => String(Math.round(v * 100) / 100), label, width = 84, disabled, defaultValue, trackColor = "#2A2F27", textColor = "#ECF2E8", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp(value, min, max);
+    const commit = (raw) => onChange(clamp(snapToStep(raw, step, min), min, max));
+    const nudge = (raw) => {
+        onBegin?.();
+        commit(raw);
+        onEnd?.();
+    };
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `items-center rounded-lg border px-3 py-[7] ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width, backgroundColor: trackColor, borderColor: "#00000055" }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        startValue.current = clamped;
+                        onBegin?.();
+                    }, onDrag: disabled ? undefined : (e) => commit(startValue.current - (e.dy * step) / 4), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue), onWheel: disabled ? undefined : (e) => nudge(clamped + (e.dy > 0 ? step : -step)), children: _jsx(Text, { className: "text-[13] font-bold", style: { color: textColor }, children: format(clamped) }) }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A NumberBox over a host parameter: shows the host's formatted text,
+    drags the normalized value, double-click resets to the default. */
+export function ParamNumberBox({ paramId, label, width, step = 0.01 }) {
+    const param = useParameter(paramId);
+    return (_jsx(NumberBox, { value: param.value, min: 0, max: 1, step: step, format: () => param.text, label: label ?? param.name.toUpperCase(), width: width, defaultValue: param.defaultValue, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+}
+/** A checkbox row — settings panels, option lists. */
+export function Checkbox({ checked, label, disabled, size = 16, accentColor = "#C6F135", boxColor = "#2A2F27", textColor = "#d4d4d8", onChange, }) {
+    return (_jsxs(View, { className: `flex-row items-center gap-2 ${disabled ? "opacity-40" : "cursor-pointer"}`, onClick: disabled ? undefined : () => onChange(!checked), children: [_jsx(View, { className: "items-center justify-center rounded-[4] border", style: {
+                    width: size,
+                    height: size,
+                    backgroundColor: checked ? accentColor : boxColor,
+                    borderColor: "#00000066",
+                }, children: checked ? (_jsx(Text, { className: "font-bold", style: { fontSize: size * 0.7, color: "#09090b" }, children: "\u2713" })) : null }), label !== undefined ? (_jsx(Text, { className: "text-[12]", style: { color: textColor }, children: label })) : null] }));
+}
+/** A Checkbox bound to a bool-style parameter (checked = value ≥ 0.5). */
+export function ParamCheckbox({ paramId, label, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(Checkbox, { checked: param.value >= 0.5, label: label ?? param.name, onChange: (next) => {
+            param.begin();
+            param.set(next ? 1 : 0);
+            param.end();
+        }, ...rest }));
+}
+/** Vertical exclusive options with dots — the settings-panel sibling of
+    <Segmented>. */
+export function RadioGroup({ options, index, disabled, gap = 8, accentColor = "#C6F135", dotColor = "#2A2F27", textColor = "#a1a1aa", activeTextColor = "#ECF2E8", onChange, }) {
+    const current = Math.min(options.length - 1, Math.max(0, index));
+    return (_jsx(View, { className: disabled ? "opacity-40" : "", style: { rowGap: gap }, children: options.map((option, i) => (_jsxs(View, { className: `flex-row items-center gap-2 ${disabled ? "" : "cursor-pointer"}`, onClick: disabled ? undefined : () => onChange(i), children: [_jsx(View, { className: "items-center justify-center rounded-full border", style: { width: 15, height: 15, backgroundColor: dotColor, borderColor: "#00000066" }, children: i === current ? (_jsx(View, { className: "rounded-full", style: { width: 7, height: 7, backgroundColor: accentColor } })) : null }), _jsx(Text, { className: "text-[12]", style: { color: i === current ? activeTextColor : textColor }, children: option })] }, `${option}-${i}`))) }));
+}
+/** A RadioGroup bound to a choice-style parameter (value ↔ index, like
+    ParamSegmented). */
+export function ParamRadioGroup({ paramId, options, ...rest }) {
+    const param = useParameter(paramId);
+    const count = Math.max(1, options.length);
+    const index = Math.round(param.value * (count - 1));
+    return (_jsx(RadioGroup, { options: options, index: index, onChange: (i) => {
+            param.begin();
+            param.set(count <= 1 ? 0 : i / (count - 1));
+            param.end();
+        }, ...rest }));
+}

package/dist/index.d.ts

@@ -24,4 +24,10 @@ export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKno
 export type { KnobProps, SliderProps, ToggleProps, XYPadProps, SegmentedProps, SelectProps, GenericEditorProps, ParamKnobProps, ParamSliderProps, ParamToggleProps, ParamXYPadProps, ParamSegmentedProps, ParamSelectProps, } from "./controls";
 export { Meter, usePeakHold, peakHoldStep } from "./meter";
 export type { MeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
+export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";
+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

@@ -16,3 +16,6 @@ export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
 export { useParameter, useParameterList } from "./parameters";
 export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, ParamSelect, dragToValue, } from "./controls";
 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;