@jadujoel/web-audio-clip-node 0.1.0 → 0.1.1

package/dist/audio/processor.js

@@ -0,0 +1,80 @@
+// AudioWorklet processor — runs in AudioWorkletGlobalScope
+// Bundled separately and served at /processor.js
+// This is a thin shell — all DSP logic lives in processor-kernel.ts
+import { createFilterState, getProperties, handleProcessorMessage, processBlock, } from "./processor-kernel";
+import { State } from "./types";
+class ClipProcessor extends AudioWorkletProcessor {
+    static get parameterDescriptors() {
+        return [
+            {
+                name: "playbackRate",
+                automationRate: "a-rate",
+                defaultValue: 1.0,
+            },
+            { name: "detune", automationRate: "a-rate", defaultValue: 0 },
+            {
+                name: "gain",
+                automationRate: "a-rate",
+                defaultValue: 1,
+                minValue: 0,
+            },
+            { name: "pan", automationRate: "a-rate", defaultValue: 0 },
+            {
+                name: "highpass",
+                automationRate: "a-rate",
+                defaultValue: 20,
+                minValue: 20,
+                maxValue: 20000,
+            },
+            {
+                name: "lowpass",
+                automationRate: "a-rate",
+                defaultValue: 20000,
+                minValue: 20,
+                maxValue: 20000,
+            },
+        ];
+    }
+    properties;
+    filterState = {
+        lowpass: createFilterState(),
+        highpass: createFilterState(),
+    };
+    lastFrameTime = 0;
+    constructor(options) {
+        super(options);
+        this.properties = getProperties(options?.processorOptions, sampleRate);
+        this.port.onmessage = (ev) => {
+            const messages = handleProcessorMessage(this.properties, ev.data, currentTime, sampleRate);
+            for (const msg of messages)
+                this.port.postMessage(msg);
+            if (this.properties.state === State.Disposed)
+                this.port.close();
+        };
+    }
+    process(_inputs, outputs, parameters) {
+        try {
+            const result = processBlock(this.properties, outputs, parameters, { currentTime, currentFrame, sampleRate }, this.filterState);
+            for (const msg of result.messages)
+                this.port.postMessage(msg);
+            // Frame reporting
+            const timeTaken = currentTime - this.lastFrameTime;
+            this.lastFrameTime = currentTime;
+            this.port.postMessage({
+                type: "frame",
+                data: [
+                    currentTime,
+                    currentFrame,
+                    Math.floor(this.properties.playhead),
+                    timeTaken * 1000,
+                ],
+            });
+            return result.keepAlive;
+        }
+        catch (e) {
+            console.log(e);
+            return true;
+        }
+    }
+}
+registerProcessor("ClipProcessor", ClipProcessor);

package/dist/audio/types.js

@@ -0,0 +1,9 @@
+export const State = {
+    Initial: 0,
+    Started: 1,
+    Stopped: 2,
+    Paused: 3,
+    Scheduled: 4,
+    Ended: 5,
+    Disposed: 6,
+};

package/dist/audio/utils.js

@@ -0,0 +1,128 @@
+export function dbFromLin(lin) {
+    return Math.max(20 * Math.log10(lin), -1000);
+}
+export function linFromDb(db) {
+    return 10 ** (db / 20);
+}
+const TEMPO_RELATIVE_SNAPS = ["beat", "bar", "8th", "16th"];
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+export function isTempoRelativeSnap(snap) {
+    return TEMPO_RELATIVE_SNAPS.includes(snap);
+}
+export function getTempoSnapInterval(snap, tempo) {
+    if (!Number.isFinite(tempo) || tempo <= 0)
+        return null;
+    const secondsPerBeat = 60 / tempo;
+    switch (snap) {
+        case "beat":
+            return secondsPerBeat;
+        case "bar":
+            return secondsPerBeat * 4;
+        case "8th":
+            return secondsPerBeat / 2;
+        case "16th":
+            return secondsPerBeat / 4;
+        default:
+            return null;
+    }
+}
+export function remapTempoRelativeValue(value, snap, oldTempo, newTempo, min, max) {
+    if (!isTempoRelativeSnap(snap)) {
+        return clamp(value, min, max);
+    }
+    if (value < 0) {
+        return clamp(value, min, max);
+    }
+    const oldInterval = getTempoSnapInterval(snap, oldTempo);
+    const newInterval = getTempoSnapInterval(snap, newTempo);
+    if (oldInterval == null || newInterval == null) {
+        return clamp(value, min, max);
+    }
+    const count = Math.round(value / oldInterval);
+    return clamp(count * newInterval, min, max);
+}
+export function getSnappedValue(value, snap, tempo) {
+    const interval = getTempoSnapInterval(snap, tempo);
+    if (interval != null) {
+        return Math.round(value / interval) * interval;
+    }
+    switch (snap) {
+        case "int":
+            return Math.round(value);
+        default:
+            return value;
+    }
+}
+export const presets = {
+    hertz: {
+        snaps: [32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384],
+        ticks: [64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384],
+        min: 32,
+        max: 16384,
+        logarithmic: true,
+    },
+    decibel: {
+        ticks: [-48, -24, -12, -6, -3, 0],
+        min: -60,
+        max: 0,
+        skew: 1,
+    },
+    cents: {
+        snaps: Array.from({ length: 49 }, (_, i) => (i - 24) * 100), // semitones: -2400..2400 by 100
+        ticks: [-2400, -1200, 0, 1200, 2400],
+        min: -2400,
+        max: 2400,
+        skew: 1,
+        step: 1,
+    },
+    playbackRate: {
+        snaps: [-2, -1, -0.5, 0, 0.5, 1, 1.5, 2],
+        ticks: [-2, -1, 0, 1, 2],
+        min: -2,
+        max: 2,
+        skew: 1,
+    },
+    gain: {
+        snaps: [-60, -48, -36, -24, -18, -12, -9, -6, -3, -1, 0],
+        ticks: [-48, -24, -12, -6, -3, 0],
+        min: -100,
+        max: 0,
+        skew: 6,
+    },
+    pan: {
+        snaps: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1],
+        ticks: [-1, -0.5, 0, 0.5, 1],
+        min: -1,
+        max: 1,
+        skew: 1,
+    },
+};
+export function float32ArrayFromAudioBuffer(buffer) {
+    return buffer.numberOfChannels === 1
+        ? [buffer.getChannelData(0)]
+        : [buffer.getChannelData(0), buffer.getChannelData(1)];
+}
+export function audioBufferFromFloat32Array(context, data) {
+    if (!data || data.length === 0)
+        return undefined;
+    const buffer = context.createBuffer(data.length, data[0].length, context.sampleRate);
+    for (let i = 0; i < data.length; i++) {
+        buffer.copyToChannel(new Float32Array(data[i]), i);
+    }
+    return buffer;
+}
+export function generateSnapPoints(snap, tempo, min, max) {
+    const interval = getTempoSnapInterval(snap, tempo) ?? (snap === "int" ? 1 : null);
+    if (interval == null)
+        return [];
+    if (interval <= 0)
+        return [];
+    const points = [];
+    const start = Math.ceil(min / interval) * interval;
+    for (let v = start; v <= max; v += interval) {
+        points.push(Math.round(v * 1e10) / 1e10);
+    }
+    return points;
+}

package/dist/audio/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.1.1";

package/dist/audio/version.js

@@ -0,0 +1,2 @@
+// AUTO-GENERATED — do not edit. Run 'bun run build:lib' to regenerate.
+export const VERSION = "0.1.1";

package/dist/audio/workletUrl.js

@@ -0,0 +1,17 @@
+import { processorCode } from "./processor-code";
+import { VERSION } from "./version";
+const PACKAGE_NAME = "@jadujoel/web-audio-clip-node";
+const PACKAGE_VERSION = VERSION;
+/** Blob URL from embedded processor code. Zero-config, default for npm users. */
+export function getProcessorBlobUrl() {
+    const blob = new Blob([processorCode], { type: "text/javascript" });
+    return URL.createObjectURL(blob);
+}
+/** jsDelivr CDN URL. For script-tag / no-bundler usage. */
+export function getProcessorCdnUrl(version = PACKAGE_VERSION) {
+    return `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${version}/dist/processor.js`;
+}
+/** Custom URL relative to a base. For self-hosted processor.js. */
+export function getProcessorModuleUrl(baseUrl = document.baseURI) {
+    return new URL("./processor.js", baseUrl).toString();
+}

package/dist/components/AudioControl.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useMemo, useRef, useState } from "react";
+import { generateSnapPoints, getSnappedValue, presets } from "../audio/utils";
+import { formatTickLabel, formatValueText } from "../controls/formatValueText";
+import { ContextMenu } from "./ContextMenu";
+import { SnappableSlider } from "./SnappableSlider";
+function AudioControlInner({ label, controlKey, min: propMin, max: propMax, value, defaultValue, step, tempo = 120, snap = "none", preset, title, enabled = true, hasToggle = false, hasSnap = false, hasMaxLock = false, audioDuration, maxLocked = false, onChange, onToggle, onSnapChange, onMinChange, onMaxChange, onMaxLockedChange, }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const [ctxMenu, setCtxMenu] = useState(null);
+    const inputRef = useRef(null);
+    const labelId = useId();
+    const presetConfig = preset ? presets[preset] : undefined;
+    const resolvedMin = presetConfig?.min ?? propMin;
+    const resolvedMax = presetConfig?.max ?? propMax;
+    const tempoSnaps = snap !== "none" && !preset
+        ? generateSnapPoints(snap, tempo, resolvedMin, resolvedMax)
+        : [];
+    const resolvedSnaps = presetConfig?.snaps ?? tempoSnaps;
+    const resolvedTicks = presetConfig?.ticks ?? [];
+    const resolvedSkew = presetConfig?.skew ?? 1;
+    const resolvedStep = step ?? presetConfig?.step;
+    const resolvedLogarithmic = presetConfig?.logarithmic ?? false;
+    const handleSliderChange = useCallback((rawValue) => {
+        if (!enabled)
+            return;
+        const snapped = getSnappedValue(rawValue, snap, tempo);
+        onChange?.(snapped);
+    }, [snap, tempo, onChange, enabled]);
+    const displayValue = formatValueText(value, controlKey, snap, tempo);
+    const tickFormatter = useMemo(() => {
+        if (preset || !controlKey)
+            return undefined;
+        return (v) => formatTickLabel(v, controlKey, snap, tempo);
+    }, [preset, controlKey, snap, tempo]);
+    const startEditing = useCallback(() => {
+        setEditText(String(value));
+        setIsEditing(true);
+        queueMicrotask(() => {
+            inputRef.current?.select();
+        });
+    }, [value]);
+    const commitEdit = useCallback(() => {
+        setIsEditing(false);
+        const parsed = Number.parseFloat(editText);
+        if (Number.isFinite(parsed)) {
+            const clamped = Math.min(Math.max(parsed, resolvedMin), resolvedMax);
+            onChange?.(clamped);
+        }
+    }, [editText, resolvedMin, resolvedMax, onChange]);
+    const cancelEdit = useCallback(() => {
+        setIsEditing(false);
+    }, []);
+    const handleEditKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            cancelEdit();
+        }
+    }, [commitEdit, cancelEdit]);
+    const handleContextMenu = useCallback((e) => {
+        if (!hasSnap)
+            return;
+        e.preventDefault();
+        setCtxMenu({ x: e.clientX, y: e.clientY });
+    }, [hasSnap]);
+    return (_jsxs("div", { className: `audio-control${hasToggle && !enabled ? " audio-control--disabled" : ""}`, title: title, onContextMenu: handleContextMenu, children: [hasToggle && (_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle?.(e.target.checked) })), !hasToggle && _jsx("span", { className: "control-toggle-placeholder" }), _jsx("span", { className: "control-label", id: labelId, children: label }), _jsx(SnappableSlider, { min: resolvedMin, max: resolvedMax, value: value, skew: resolvedSkew, step: resolvedStep, defaultValue: defaultValue, enableSnap: snap !== "none", snaps: resolvedSnaps, ticks: resolvedTicks, logarithmic: resolvedLogarithmic, disabled: hasToggle && !enabled, labelId: labelId, valueText: displayValue, formatTick: tickFormatter, onChange: handleSliderChange }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", className: "control-output control-output--editing", value: editText, onChange: (e) => setEditText(e.target.value), onBlur: commitEdit, onKeyDown: handleEditKeyDown })) : (_jsx("button", { type: "button", className: "control-output", onClick: startEditing, children: displayValue })), ctxMenu && (_jsx(ContextMenu, { x: ctxMenu.x, y: ctxMenu.y, snap: snap, snapMode: preset ? "preset" : "tempo", min: propMin, max: propMax, maxLocked: maxLocked, showMaxLock: hasMaxLock, audioDuration: audioDuration ?? null, onSnapChange: (s) => {
+                    onSnapChange?.(s);
+                }, onMinChange: (v) => onMinChange?.(v), onMaxChange: (v) => onMaxChange?.(v), onMaxLockedChange: (locked) => onMaxLockedChange?.(locked), onClose: () => setCtxMenu(null) }))] }));
+}
+function areAudioControlPropsEqual(prev, next) {
+    return (prev.label === next.label &&
+        prev.controlKey === next.controlKey &&
+        prev.min === next.min &&
+        prev.max === next.max &&
+        prev.value === next.value &&
+        prev.defaultValue === next.defaultValue &&
+        prev.step === next.step &&
+        prev.tempo === next.tempo &&
+        prev.snap === next.snap &&
+        prev.preset === next.preset &&
+        prev.title === next.title &&
+        prev.enabled === next.enabled &&
+        prev.hasToggle === next.hasToggle &&
+        prev.hasSnap === next.hasSnap &&
+        prev.hasMaxLock === next.hasMaxLock &&
+        prev.audioDuration === next.audioDuration &&
+        prev.maxLocked === next.maxLocked &&
+        prev.onChange === next.onChange &&
+        prev.onToggle === next.onToggle &&
+        prev.onSnapChange === next.onSnapChange &&
+        prev.onMinChange === next.onMinChange &&
+        prev.onMaxChange === next.onMaxChange &&
+        prev.onMaxLockedChange === next.onMaxLockedChange);
+}
+export const AudioControl = memo(AudioControlInner, areAudioControlPropsEqual);

package/dist/components/ContextMenu.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+const SNAP_OPTIONS = [
+    { value: "none", label: "None" },
+    { value: "beat", label: "Beat" },
+    { value: "bar", label: "Bar" },
+    { value: "8th", label: "8th" },
+    { value: "16th", label: "16th" },
+    { value: "int", label: "Integer" },
+];
+export function ContextMenu({ x, y, snap, snapMode = "tempo", min, max, maxLocked = false, showMaxLock = true, audioDuration, onSnapChange, onMinChange, onMaxChange, onMaxLockedChange, onClose, }) {
+    const menuRef = useRef(null);
+    // Close on click outside or Escape
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        const handleKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("mousedown", handleClick);
+        document.addEventListener("keydown", handleKey);
+        return () => {
+            document.removeEventListener("mousedown", handleClick);
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [onClose]);
+    // Adjust position to stay within viewport
+    useEffect(() => {
+        const el = menuRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            el.style.left = `${window.innerWidth - rect.width - 8}px`;
+        }
+        if (rect.bottom > window.innerHeight) {
+            el.style.top = `${window.innerHeight - rect.height - 8}px`;
+        }
+    }, []);
+    const handleSnapClick = useCallback((value) => {
+        onSnapChange(value);
+    }, [onSnapChange]);
+    const handleMinCommit = useCallback((e) => {
+        const input = e.currentTarget;
+        const parsed = Number.parseFloat(input.value);
+        if (Number.isFinite(parsed)) {
+            onMinChange(parsed);
+        }
+    }, [onMinChange]);
+    const handleMaxCommit = useCallback((e) => {
+        const input = e.currentTarget;
+        const parsed = Number.parseFloat(input.value);
+        if (Number.isFinite(parsed)) {
+            onMaxChange(parsed);
+        }
+    }, [onMaxChange]);
+    const handleInputKeyDown = useCallback((commit) => (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commit(e);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+        }
+    }, [onClose]);
+    return createPortal(_jsxs("div", { ref: menuRef, className: "context-menu", style: { left: x, top: y }, role: "menu", children: [_jsx("div", { className: "context-menu__section-label", children: "Snap" }), snapMode === "preset" ? (_jsxs("label", { className: "context-menu__field", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: snap !== "none", onChange: (e) => onSnapChange(e.target.checked ? "preset" : "none") }), "Enable snap"] })) : (SNAP_OPTIONS.map((opt) => (_jsxs("button", { type: "button", className: `context-menu__item${snap === opt.value ? " context-menu__item--active" : ""}`, role: "menuitemradio", "aria-checked": snap === opt.value, onClick: () => handleSnapClick(opt.value), children: [_jsx("span", { className: "context-menu__radio", children: snap === opt.value ? "●" : "○" }), opt.label] }, opt.value)))), _jsx("div", { className: "context-menu__divider" }), _jsx("div", { className: "context-menu__section-label", children: "Range" }), _jsxs("label", { className: "context-menu__field", children: ["Min:", _jsx("input", { type: "number", className: "context-menu__input", defaultValue: min, step: "any", onBlur: handleMinCommit, onKeyDown: handleInputKeyDown(handleMinCommit) })] }), _jsxs("label", { className: "context-menu__field", children: ["Max:", _jsx("input", { type: "number", className: "context-menu__input", defaultValue: max, step: "any", disabled: maxLocked && audioDuration != null, onBlur: handleMaxCommit, onKeyDown: handleInputKeyDown(handleMaxCommit) })] }), showMaxLock && (_jsxs("label", { className: "context-menu__field", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: maxLocked, onChange: (e) => onMaxLockedChange?.(e.target.checked) }), "Max = file length"] }))] }), document.body);
+}

package/dist/components/ControlSection.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId } from "react";
+import { AudioControl } from "./AudioControl";
+/** Build a set of control keys that belong to a linked pair,
+ *  and a map from the first control key to its pair def. */
+function buildPairMaps(pairs) {
+    const pairByFirst = new Map();
+    const pairedKeys = new Set();
+    if (pairs) {
+        for (const pair of pairs) {
+            pairByFirst.set(pair.controls[0], pair);
+            pairedKeys.add(pair.controls[0]);
+            pairedKeys.add(pair.controls[1]);
+        }
+    }
+    return { pairByFirst, pairedKeys };
+}
+function renderAudioControl(def, props) {
+    const { mins, maxs, maxLocked, audioDuration, values, tempo, snaps, enabled, onValueChange, onToggle, onSnapChange, onMinChange, onMaxChange, onMaxLockedChange, } = props;
+    return (_jsx(AudioControl, { label: def.label, controlKey: def.key, min: mins[def.key] ?? def.min, max: maxLocked[def.key] && audioDuration != null
+            ? audioDuration
+            : (maxs[def.key] ?? def.max), value: values[def.key], defaultValue: def.defaultValue, tempo: tempo, snap: snaps[def.key], preset: def.preset, title: def.title, enabled: enabled[def.key], hasToggle: def.hasToggle, hasSnap: def.hasSnap, hasMaxLock: def.hasMaxLock, audioDuration: audioDuration, maxLocked: maxLocked[def.key] ?? true, onChange: (v) => onValueChange(def.key, v), onToggle: (on) => onToggle(def.key, on), onSnapChange: (s) => onSnapChange(def.key, s), onMinChange: (v) => onMinChange(def.key, v), onMaxChange: (v) => onMaxChange(def.key, v), onMaxLockedChange: (locked) => onMaxLockedChange(def.key, locked) }, def.key));
+}
+function ControlSectionInner({ legend, defs, linked, linkedPairs, onLinkedChange, ...controlProps }) {
+    const sectionId = useId();
+    const { pairByFirst, pairedKeys } = buildPairMaps(linkedPairs);
+    const items = [];
+    let i = 0;
+    while (i < defs.length) {
+        const def = defs[i];
+        const pair = pairByFirst.get(def.key);
+        if (pair) {
+            // Find the second control in the pair
+            const secondDef = defs.find((d) => d.key === pair.controls[1]);
+            const isLinked = linked?.[pair.key] ?? false;
+            const inputId = `${sectionId}-${pair.key}`;
+            items.push(_jsxs("div", { className: `control-link-group${isLinked ? " control-link-group--active" : ""}`, children: [_jsxs("div", { className: "control-link-bracket", children: [_jsx("span", { className: "control-link-line" }), _jsx("button", { type: "button", id: inputId, className: "control-link-btn", "aria-pressed": isLinked, "aria-label": pair.label, title: pair.label, onClick: () => onLinkedChange?.(pair.key, !isLinked), children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.5 4.5h-1A2.5 2.5 0 0 0 3 7v2a2.5 2.5 0 0 0 2.5 2.5h1m3-7h1A2.5 2.5 0 0 1 13 7v2a2.5 2.5 0 0 1-2.5 2.5h-1M5.5 8h5", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" }) }) }), _jsx("span", { className: "control-link-line" })] }), _jsxs("div", { className: "control-link-controls", children: [renderAudioControl(def, controlProps), secondDef && renderAudioControl(secondDef, controlProps)] })] }, `link-${pair.key}`));
+            // Skip past both controls in the pair
+            i += 1;
+            if (secondDef && defs[i]?.key === secondDef.key) {
+                i += 1;
+            }
+            continue;
+        }
+        // Not part of a pair (or is a second control already rendered above)
+        if (!pairedKeys.has(def.key)) {
+            items.push(renderAudioControl(def, controlProps));
+        }
+        i += 1;
+    }
+    return (_jsxs("fieldset", { className: "control-group", children: [_jsx("legend", { children: legend }), items] }));
+}
+function areControlSectionPropsEqual(prev, next) {
+    return (prev.legend === next.legend &&
+        prev.defs === next.defs &&
+        prev.values === next.values &&
+        prev.snaps === next.snaps &&
+        prev.enabled === next.enabled &&
+        prev.mins === next.mins &&
+        prev.maxs === next.maxs &&
+        prev.maxLocked === next.maxLocked &&
+        prev.linked === next.linked &&
+        prev.linkedPairs === next.linkedPairs &&
+        prev.tempo === next.tempo &&
+        prev.audioDuration === next.audioDuration &&
+        prev.onValueChange === next.onValueChange &&
+        prev.onToggle === next.onToggle &&
+        prev.onLinkedChange === next.onLinkedChange &&
+        prev.onSnapChange === next.onSnapChange &&
+        prev.onMinChange === next.onMinChange &&
+        prev.onMaxChange === next.onMaxChange &&
+        prev.onMaxLockedChange === next.onMaxLockedChange);
+}
+export const ControlSection = memo(ControlSectionInner, areControlSectionPropsEqual);

package/dist/components/DetuneControl.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { presets } from "../audio/utils";
+import { SnappableSlider } from "./SnappableSlider";
+function DetuneControlInner({ value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.cents;
+    const min = preset.min ?? -2400;
+    const max = preset.max ?? 2400;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const displayValue = `${Math.round(value)} cents`;
+    const handleChange = useCallback((v) => {
+        if (!enabled)
+            return;
+        onChange(v);
+    }, [enabled, onChange]);
+    const startEditing = useCallback(() => {
+        setEditText(String(Math.round(value)));
+        setIsEditing(true);
+        queueMicrotask(() => inputRef.current?.select());
+    }, [value]);
+    const commitEdit = useCallback(() => {
+        setIsEditing(false);
+        const parsed = Number.parseFloat(editText);
+        if (Number.isFinite(parsed)) {
+            onChange(Math.min(Math.max(parsed, min), max));
+        }
+    }, [editText, min, max, onChange]);
+    const handleEditKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setIsEditing(false);
+        }
+    }, [commitEdit]);
+    const disabled = !enabled;
+    return (_jsxs("div", { className: `audio-control${disabled ? " audio-control--disabled" : ""}`, title: "Pitch shift in cents.", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: "Detune" }), _jsx(SnappableSlider, { min: min, max: max, value: value, skew: preset.skew ?? 1, step: preset.step ?? 1, defaultValue: defaultValue, ticks: preset.ticks ?? [], disabled: disabled, labelId: labelId, valueText: displayValue, onChange: handleChange }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", className: "control-output control-output--editing", value: editText, onChange: (e) => setEditText(e.target.value), onBlur: commitEdit, onKeyDown: handleEditKeyDown })) : (_jsx("button", { type: "button", className: "control-output", onClick: startEditing, children: displayValue }))] }));
+}
+export const DetuneControl = memo(DetuneControlInner);

package/dist/components/DisplayPanel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+function DisplayPanelInner({ nodeState, statusMessage, soundName, currentTime, currentFrame, timesLooped, latency, timeTaken, }) {
+    return (_jsxs("section", { id: "display", children: [statusMessage && (_jsx("div", { className: "status-message", role: "alert", children: statusMessage })), _jsx("code", { children: "Sound:" }), _jsx("output", { children: soundName ?? "none" }), _jsx("code", { children: "State:" }), _jsx("output", { children: nodeState }), _jsx("code", { children: "Time:" }), _jsx("output", { children: currentTime }), _jsx("code", { children: "Loops:" }), _jsx("output", { children: timesLooped }), _jsxs("details", { className: "display-details", children: [_jsx("summary", { children: "Debug" }), _jsxs("div", { className: "display-details__row", children: [_jsx("code", { children: "Frame:" }), _jsx("output", { children: currentFrame }), _jsx("code", { children: "Latency:" }), _jsx("output", { children: latency }), _jsx("code", { children: "TimeTaken:" }), _jsx("output", { children: timeTaken })] })] })] }));
+}
+export const DisplayPanel = memo(DisplayPanelInner);

package/dist/components/FilterControl.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { presets } from "../audio/utils";
+import { SnappableSlider } from "./SnappableSlider";
+function formatHz(value) {
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(1)} kHz`;
+    return `${Math.round(value)} Hz`;
+}
+function FilterControlInner({ label, controlKey: _controlKey, value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.hertz;
+    const min = preset.min ?? 32;
+    const max = preset.max ?? 16384;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const handleChange = useCallback((v) => {
+        if (!enabled)
+            return;
+        onChange(v);
+    }, [enabled, onChange]);
+    const startEditing = useCallback(() => {
+        setEditText(String(Math.round(value)));
+        setIsEditing(true);
+        queueMicrotask(() => inputRef.current?.select());
+    }, [value]);
+    const commitEdit = useCallback(() => {
+        setIsEditing(false);
+        const parsed = Number.parseFloat(editText);
+        if (Number.isFinite(parsed)) {
+            onChange(Math.min(Math.max(parsed, min), max));
+        }
+    }, [editText, min, max, onChange]);
+    const handleEditKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setIsEditing(false);
+        }
+    }, [commitEdit]);
+    const disabled = !enabled;
+    return (_jsxs("div", { className: `audio-control${disabled ? " audio-control--disabled" : ""}`, title: `${label} cutoff frequency.`, children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: label }), _jsx(SnappableSlider, { min: min, max: max, value: value, logarithmic: true, defaultValue: defaultValue, enableSnap: true, snaps: preset.snaps ?? [], ticks: preset.ticks ?? [], disabled: disabled, labelId: labelId, valueText: formatHz(value), onChange: handleChange }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", className: "control-output control-output--editing", value: editText, onChange: (e) => setEditText(e.target.value), onBlur: commitEdit, onKeyDown: handleEditKeyDown })) : (_jsx("button", { type: "button", className: "control-output", onClick: startEditing, children: formatHz(value) }))] }));
+}
+export const FilterControl = memo(FilterControlInner);

package/dist/components/GainControl.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { presets } from "../audio/utils";
+import { SnappableSlider } from "./SnappableSlider";
+function GainControlInner({ value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.gain;
+    const min = preset.min ?? -100;
+    const max = preset.max ?? 0;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const displayValue = `${value.toFixed(1)} dB`;
+    const handleChange = useCallback((v) => {
+        if (!enabled)
+            return;
+        onChange(v);
+    }, [enabled, onChange]);
+    const startEditing = useCallback(() => {
+        setEditText(String(value));
+        setIsEditing(true);
+        queueMicrotask(() => inputRef.current?.select());
+    }, [value]);
+    const commitEdit = useCallback(() => {
+        setIsEditing(false);
+        const parsed = Number.parseFloat(editText);
+        if (Number.isFinite(parsed)) {
+            onChange(Math.min(Math.max(parsed, min), max));
+        }
+    }, [editText, min, max, onChange]);
+    const handleEditKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setIsEditing(false);
+        }
+    }, [commitEdit]);
+    const disabled = !enabled;
+    return (_jsxs("div", { className: `audio-control${disabled ? " audio-control--disabled" : ""}`, title: "Amplitude in dB.", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: "Gain" }), _jsx(SnappableSlider, { min: min, max: max, value: value, skew: preset.skew ?? 6, defaultValue: defaultValue, ticks: preset.ticks ?? [], disabled: disabled, labelId: labelId, valueText: displayValue, onChange: handleChange }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", className: "control-output control-output--editing", value: editText, onChange: (e) => setEditText(e.target.value), onBlur: commitEdit, onKeyDown: handleEditKeyDown })) : (_jsx("button", { type: "button", className: "control-output", onClick: startEditing, children: displayValue }))] }));
+}
+export const GainControl = memo(GainControlInner);