@jadujoel/web-audio-clip-node 0.1.6 → 0.1.8

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/processor.d.ts

@@ -0,0 +1 @@
+export {};

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/processor.js

@@ -0,0 +1,103 @@
+// 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.js";
+import { State } from "./types.js";
+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) => {
+            if (ev.data.type === "transferPort") {
+                const port = ev.data.data;
+                port.onmessage = (portEv) => {
+                    const messages = handleProcessorMessage(this.properties, portEv.data, currentTime, sampleRate);
+                    for (const msg of messages)
+                        this.port.postMessage(msg);
+                };
+                return;
+            }
+            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) {
+            this.port.postMessage({
+                type: "processorError",
+                data: {
+                    error: String(e),
+                    state: this.properties.state,
+                    bufferChannels: this.properties.buffer?.length,
+                    bufferLength: this.properties.buffer?.[0]?.length,
+                    paramKeys: Object.keys(parameters),
+                    hasPlaybackRate: !!parameters.playbackRate,
+                    hasDetune: !!parameters.detune,
+                    hasGain: !!parameters.gain,
+                    hasPan: !!parameters.pan,
+                    outputChannels: outputs[0]?.length,
+                },
+            });
+            return true;
+        }
+    }
+}
+registerProcessor("ClipProcessor", ClipProcessor);

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/types.d.ts

@@ -0,0 +1,192 @@
+export declare const State: {
+    readonly Initial: 0;
+    readonly Started: 1;
+    readonly Stopped: 2;
+    readonly Paused: 3;
+    readonly Scheduled: 4;
+    readonly Ended: 5;
+    readonly Disposed: 6;
+};
+export type ClipProcessorState = (typeof State)[keyof typeof State];
+export interface ClipProcessorOptions {
+    buffer?: Float32Array[];
+    streamBuffer?: StreamBufferState;
+    loop?: boolean;
+    loopStart?: number;
+    loopEnd?: number;
+    loopCrossfade?: number;
+    offset?: number;
+    duration?: number;
+    playhead?: number;
+    state?: ClipProcessorState;
+    startWhen?: number;
+    stopWhen?: number;
+    pauseWhen?: number;
+    resumeWhen?: number;
+    playedSamples?: number;
+    timesLooped?: number;
+    fadeInDuration?: number;
+    fadeOutDuration?: number;
+    enableFadeIn?: boolean;
+    enableFadeOut?: boolean;
+    enableLoopStart?: boolean;
+    enableLoopEnd?: boolean;
+    enableLoopCrossfade?: boolean;
+    enableGain?: boolean;
+    enablePan?: boolean;
+    enableHighpass?: boolean;
+    enableLowpass?: boolean;
+    enableDetune?: boolean;
+    enablePlaybackRate?: boolean;
+}
+export interface ClipWorkletOptions extends AudioWorkletNodeOptions {
+    processorOptions?: ClipProcessorOptions;
+}
+export type ClipNodeState = "initial" | "scheduled" | "started" | "stopped" | "paused" | "resumed" | "ended" | "disposed";
+export type FrameData = readonly [
+    currentTime: number,
+    currentFrame: number,
+    playhead: number,
+    timeTaken: number
+];
+export type ClipProcessorToggleMessageType = "toggleFadeIn" | "toggleFadeOut" | "toggleLoopStart" | "toggleLoopEnd" | "toggleLoopCrossfade" | "toggleGain" | "togglePan" | "toggleHighpass" | "toggleLowpass" | "toggleDetune" | "togglePlaybackRate";
+export interface ClipProcessorOnmessageEvent {
+    readonly data: ClipProcessorMessageRx;
+}
+export type ClipProcessorOnmessage = (ev: ClipProcessorOnmessageEvent) => void;
+export interface ProcessorWorkletOptions extends AudioWorkletNodeOptions {
+    readonly processorOptions?: ClipProcessorOptions;
+}
+export interface ClipProcessorStateMap {
+    readonly Initial: 0;
+    readonly Started: 1;
+    readonly Stopped: 2;
+    readonly Paused: 3;
+    readonly Scheduled: 4;
+    readonly Ended: 5;
+    readonly Disposed: 6;
+}
+export type ClipProcessorMessageRx = ClipProcessorBufferMessageRx | ClipProcessorBufferInitMessageRx | ClipProcessorBufferRangeMessageRx | ClipProcessorBufferEndMessageRx | ClipProcessorBufferResetMessageRx | ClipProcessorStartMessageRx | ClipProcessorStopMessageRx | ClipProcessorPauseMessageRx | ClipProcessorResumeMessageRx | ClipProcessorDisposeMessageRx | ClipProcessorLoopMessageRx | ClipProcessorLoopStartMessageRx | ClipProcessorLoopEndMessageRx | ClipProcessorPlayheadMessageRx | ClipProcessorFadeInMessageRx | ClipProcessorFadeOutMessageRx | ClipProcessorLoopCrossfadeMessageRx | ClipProcessorToggleMessageRx | ClipProcessorLogStateMessageRx;
+export type ClipProcessorMessageType = "buffer" | "bufferInit" | "bufferRange" | "bufferEnd" | "bufferReset" | "start" | "stop" | "pause" | "resume" | "dispose" | "loop" | "loopStart" | "loopEnd" | "playhead" | "playbackRate" | "offset" | "fadeIn" | "fadeOut" | "loopCrossfade" | ClipProcessorToggleMessageType | "logState";
+export interface ClipProcessorLogStateMessageRx {
+    readonly type: "logState";
+    readonly data?: never;
+}
+export interface ClipProcessorToggleMessageRx {
+    readonly type: ClipProcessorToggleMessageType;
+    readonly data?: boolean;
+}
+export interface ClipProcessorBufferMessageRx {
+    readonly type: "buffer";
+    readonly data: Float32Array[];
+}
+export interface StreamBufferSpan {
+    startSample: number;
+    endSample: number;
+}
+export interface BufferRangeWrite {
+    readonly startSample: number;
+    readonly channelData: Float32Array[];
+    readonly totalLength?: number | null;
+    readonly streamEnded?: boolean;
+}
+export interface StreamBufferState {
+    totalLength: number | null;
+    committedLength: number;
+    streamEnded: boolean;
+    streaming: boolean;
+    writtenSpans: StreamBufferSpan[];
+    pendingWrites: BufferRangeWrite[];
+    lowWaterThreshold: number;
+    lowWaterNotified: boolean;
+    lastUnderrunSample: number | null;
+}
+export interface ClipProcessorBufferInitMessageRx {
+    readonly type: "bufferInit";
+    readonly data: {
+        readonly channels: number;
+        readonly totalLength: number;
+        readonly streaming?: boolean;
+    };
+}
+export interface ClipProcessorBufferRangeMessageRx {
+    readonly type: "bufferRange";
+    readonly data: BufferRangeWrite;
+}
+export interface ClipProcessorBufferEndMessageRx {
+    readonly type: "bufferEnd";
+    readonly data?: {
+        readonly totalLength?: number;
+    };
+}
+export interface ClipProcessorBufferResetMessageRx {
+    readonly type: "bufferReset";
+    readonly data?: never;
+}
+export interface ClipProcessorStartMessageRx {
+    readonly type: "start";
+    readonly data?: {
+        readonly duration?: number;
+        readonly offset?: number;
+        readonly when?: number;
+    };
+}
+export interface ClipProcessorStopMessageRx {
+    readonly type: "stop";
+    readonly data?: number;
+}
+export interface ClipProcessorPauseMessageRx {
+    readonly type: "pause";
+    readonly data?: number;
+}
+export interface ClipProcessorResumeMessageRx {
+    readonly type: "resume";
+    readonly data?: number;
+}
+export interface ClipProcessorDisposeMessageRx {
+    readonly type: "dispose";
+    readonly data?: never;
+}
+export interface ClipProcessorLoopMessageRx {
+    readonly type: "loop";
+    readonly data: boolean;
+}
+export interface ClipProcessorLoopStartMessageRx {
+    readonly type: "loopStart";
+    readonly data: number;
+}
+export interface ClipProcessorLoopEndMessageRx {
+    readonly type: "loopEnd";
+    readonly data: number;
+}
+export interface ClipProcessorPlayheadMessageRx {
+    readonly type: "playhead";
+    readonly data: number;
+}
+export interface ClipProcessorFadeInMessageRx {
+    readonly type: "fadeIn";
+    readonly data: number;
+}
+export interface ClipProcessorFadeOutMessageRx {
+    readonly type: "fadeOut";
+    readonly data: number;
+}
+export interface ClipProcessorLoopCrossfadeMessageRx {
+    readonly type: "loopCrossfade";
+    readonly data: number;
+}
+export interface BlockParameters {
+    readonly playhead: number;
+    readonly durationSamples: number;
+    readonly loop: boolean;
+    readonly loopStartSamples: number;
+    readonly loopEndSamples: number;
+    readonly bufferLength: number;
+    readonly playbackRates: Float32Array;
+}
+export interface BlockReturnState {
+    readonly playhead: number;
+    readonly ended: boolean;
+    readonly looped: boolean;
+    readonly indexes: number[];
+}

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/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/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/utils.d.ts

@@ -0,0 +1,22 @@
+export declare function dbFromLin(lin: number): number;
+export declare function linFromDb(db: number): number;
+declare const TEMPO_RELATIVE_SNAPS: readonly ["beat", "bar", "8th", "16th"];
+export type TempoRelativeSnap = (typeof TEMPO_RELATIVE_SNAPS)[number];
+export declare function isTempoRelativeSnap(snap: string): snap is TempoRelativeSnap;
+export declare function getTempoSnapInterval(snap: string, tempo: number): number | null;
+export declare function remapTempoRelativeValue(value: number, snap: string, oldTempo: number, newTempo: number, min: number, max: number): number;
+export declare function getSnappedValue(value: number, snap: string, tempo: number): number;
+export interface SliderPreset {
+    snaps?: number[];
+    ticks?: number[];
+    min?: number;
+    max?: number;
+    skew?: number;
+    step?: number;
+    logarithmic?: boolean;
+}
+export declare const presets: Record<string, SliderPreset>;
+export declare function float32ArrayFromAudioBuffer(buffer: AudioBuffer): Float32Array[];
+export declare function audioBufferFromFloat32Array(context: BaseAudioContext, data?: Float32Array[]): AudioBuffer | undefined;
+export declare function generateSnapPoints(snap: string, tempo: number, min: number, max: number): number[];
+export {};

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/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/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/version.d.ts

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

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/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.8";

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/workletUrl.d.ts

@@ -0,0 +1,6 @@
+/** Blob URL from embedded processor code. Zero-config, default for npm users. */
+export declare function getProcessorBlobUrl(): string;
+/** jsDelivr CDN URL. For script-tag / no-bundler usage. */
+export declare function getProcessorCdnUrl(version?: string): string;
+/** Custom URL relative to a base. For self-hosted processor.js. */
+export declare function getProcessorModuleUrl(baseUrl?: string): string;

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/audio/workletUrl.js

@@ -0,0 +1,17 @@
+import { processorCode } from "./processor-code.js";
+import { VERSION } from "./version.js";
+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/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/components/AudioControl.d.ts

@@ -0,0 +1,28 @@
+export interface AudioControlProps {
+    label: string;
+    controlKey?: string;
+    min: number;
+    max: number;
+    value: number;
+    defaultValue?: number;
+    step?: number;
+    tempo?: number;
+    snap?: string;
+    preset?: string;
+    title?: string;
+    enabled?: boolean;
+    hasToggle?: boolean;
+    hasSnap?: boolean;
+    hasMaxLock?: boolean;
+    audioDuration?: number | null;
+    maxLocked?: boolean;
+    onChange?: (value: number) => void;
+    onToggle?: (enabled: boolean) => void;
+    onSnapChange?: (snap: string) => void;
+    onMinChange?: (val: number) => void;
+    onMaxChange?: (val: number) => void;
+    onMaxLockedChange?: (locked: boolean) => void;
+}
+declare function AudioControlInner({ label, controlKey, min: propMin, max: propMax, value, defaultValue, step, tempo, snap, preset, title, enabled, hasToggle, hasSnap, hasMaxLock, audioDuration, maxLocked, onChange, onToggle, onSnapChange, onMinChange, onMaxChange, onMaxLockedChange, }: AudioControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const AudioControl: import("react").MemoExoticComponent<typeof AudioControlInner>;
+export {};

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/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.js";
+import { formatTickLabel, formatValueText } from "../controls/formatValueText.js";
+import { ContextMenu } from "./ContextMenu.js";
+import { SnappableSlider } from "./SnappableSlider.js";
+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/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/components/ContextMenu.d.ts

@@ -0,0 +1,17 @@
+export interface ContextMenuProps {
+    x: number;
+    y: number;
+    snap: string;
+    snapMode?: "tempo" | "preset";
+    min: number;
+    max: number;
+    maxLocked?: boolean;
+    showMaxLock?: boolean;
+    audioDuration: number | null;
+    onSnapChange: (snap: string) => void;
+    onMinChange: (val: number) => void;
+    onMaxChange: (val: number) => void;
+    onMaxLockedChange?: (locked: boolean) => void;
+    onClose: () => void;
+}
+export declare function ContextMenu({ x, y, snap, snapMode, min, max, maxLocked, showMaxLock, audioDuration, onSnapChange, onMinChange, onMaxChange, onMaxLockedChange, onClose, }: ContextMenuProps): import("react").ReactPortal;