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

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

@@ -0,0 +1,26 @@
+import type { ControlDef, ControlKey } from "../controls/controlDefs";
+import type { LinkedControlPairDef, LinkedControlPairKey } from "../controls/linkedControlPairs";
+interface ControlSectionProps {
+    legend: string;
+    defs: ControlDef[];
+    values: Record<ControlKey, number>;
+    snaps: Record<ControlKey, string>;
+    enabled: Record<ControlKey, boolean>;
+    mins: Record<ControlKey, number>;
+    maxs: Record<ControlKey, number>;
+    maxLocked: Record<ControlKey, boolean>;
+    linked?: Record<LinkedControlPairKey, boolean>;
+    linkedPairs?: readonly LinkedControlPairDef[];
+    tempo: number;
+    audioDuration?: number | null;
+    onValueChange: (key: ControlKey, val: number) => void;
+    onToggle: (key: ControlKey, on: boolean) => void;
+    onLinkedChange?: (key: LinkedControlPairKey, linked: boolean) => void;
+    onSnapChange: (key: ControlKey, snap: string) => void;
+    onMinChange: (key: ControlKey, val: number) => void;
+    onMaxChange: (key: ControlKey, val: number) => void;
+    onMaxLockedChange: (key: ControlKey, locked: boolean) => void;
+}
+declare function ControlSectionInner({ legend, defs, linked, linkedPairs, onLinkedChange, ...controlProps }: ControlSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare const ControlSection: import("react").MemoExoticComponent<typeof ControlSectionInner>;
+export {};

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/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.js";
+/** 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/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/components/DetuneControl.d.ts

@@ -0,0 +1,10 @@
+interface DetuneControlProps {
+    value: number;
+    defaultValue: number;
+    enabled: boolean;
+    onChange: (value: number) => void;
+    onToggle: (enabled: boolean) => void;
+}
+declare function DetuneControlInner({ value, defaultValue, enabled, onChange, onToggle, }: DetuneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const DetuneControl: import("react").MemoExoticComponent<typeof DetuneControlInner>;
+export {};

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

@@ -0,0 +1,14 @@
+import type { ClipNodeState } from "../audio/types";
+interface DisplayPanelProps {
+    nodeState: ClipNodeState;
+    statusMessage: string | null;
+    soundName: string | null;
+    currentTime: string;
+    currentFrame: string;
+    timesLooped: string;
+    latency: string;
+    timeTaken: string;
+}
+declare function DisplayPanelInner({ nodeState, statusMessage, soundName, currentTime, currentFrame, timesLooped, latency, timeTaken, }: DisplayPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const DisplayPanel: import("react").MemoExoticComponent<typeof DisplayPanelInner>;
+export {};

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

@@ -0,0 +1,12 @@
+interface FilterControlProps {
+    label: string;
+    controlKey: string;
+    value: number;
+    defaultValue: number;
+    enabled: boolean;
+    onChange: (value: number) => void;
+    onToggle: (enabled: boolean) => void;
+}
+declare function FilterControlInner({ label, controlKey: _controlKey, value, defaultValue, enabled, onChange, onToggle, }: FilterControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const FilterControl: import("react").MemoExoticComponent<typeof FilterControlInner>;
+export {};

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

@@ -0,0 +1,10 @@
+interface GainControlProps {
+    value: number;
+    defaultValue: number;
+    enabled: boolean;
+    onChange: (value: number) => void;
+    onToggle: (enabled: boolean) => void;
+}
+declare function GainControlInner({ value, defaultValue, enabled, onChange, onToggle, }: GainControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const GainControl: import("react").MemoExoticComponent<typeof GainControlInner>;
+export {};

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/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.js";
+import { SnappableSlider } from "./SnappableSlider.js";
+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);

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

@@ -0,0 +1,10 @@
+interface PanControlProps {
+    value: number;
+    defaultValue: number;
+    enabled: boolean;
+    onChange: (value: number) => void;
+    onToggle: (enabled: boolean) => void;
+}
+declare function PanControlInner({ value, defaultValue, enabled, onChange, onToggle, }: PanControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const PanControl: import("react").MemoExoticComponent<typeof PanControlInner>;
+export {};

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { presets } from "../audio/utils.js";
+import { SnappableSlider } from "./SnappableSlider.js";
+function formatPan(value) {
+    if (Math.abs(value) < 0.005)
+        return "C";
+    const pct = Math.round(Math.abs(value) * 100);
+    return value < 0 ? `L${pct}` : `R${pct}`;
+}
+function PanControlInner({ value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.pan;
+    const min = preset.min ?? -1;
+    const max = preset.max ?? 1;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const displayValue = formatPan(value);
+    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: "-1 full left, 1 full right.", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: "Pan" }), _jsx(SnappableSlider, { min: min, max: max, value: value, skew: preset.skew ?? 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 PanControl = memo(PanControlInner);

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

@@ -0,0 +1,10 @@
+interface PlaybackRateControlProps {
+    value: number;
+    defaultValue: number;
+    enabled: boolean;
+    onChange: (value: number) => void;
+    onToggle: (enabled: boolean) => void;
+}
+declare function PlaybackRateControlInner({ value, defaultValue, enabled, onChange, onToggle, }: PlaybackRateControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const PlaybackRateControl: import("react").MemoExoticComponent<typeof PlaybackRateControlInner>;
+export {};

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/components/PlaybackRateControl.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.js";
+import { SnappableSlider } from "./SnappableSlider.js";
+function PlaybackRateControlInner({ value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.playbackRate;
+    const min = preset.min ?? -4;
+    const max = preset.max ?? 4;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const displayValue = `${value.toFixed(2)}x`;
+    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: "Playback speed. Negative for reverse.", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: "Rate" }), _jsx(SnappableSlider, { min: min, max: max, value: value, skew: preset.skew ?? 1, defaultValue: defaultValue, enableSnap: true, snaps: preset.snaps ?? [], 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 PlaybackRateControl = memo(PlaybackRateControlInner);

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

@@ -0,0 +1,13 @@
+export interface PlayheadSliderProps {
+    /** Current playhead position in samples. */
+    value: number;
+    /** Audio duration in seconds (null when no audio loaded). */
+    audioDuration: number | null;
+    /** Whether playback is active (started/paused). */
+    disabled?: boolean;
+    /** Called when the user seeks to a new position (value in samples). */
+    onChange: (samplePosition: number) => void;
+}
+declare function PlayheadSliderInner({ value, audioDuration, disabled, onChange, }: PlayheadSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare const PlayheadSlider: import("react").MemoExoticComponent<typeof PlayheadSliderInner>;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId } from "react";
+import { SAMPLE_RATE } from "../controls/controlDefs.js";
+import { SnappableSlider } from "./SnappableSlider.js";
+function formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toFixed(2).padStart(5, "0")}`;
+}
+function PlayheadSliderInner({ value, audioDuration, disabled = false, onChange, }) {
+    const labelId = useId();
+    const maxSamples = audioDuration != null ? audioDuration * SAMPLE_RATE : 0;
+    const currentSeconds = value / SAMPLE_RATE;
+    const durationSeconds = audioDuration ?? 0;
+    const handleChange = useCallback((v) => {
+        onChange(Math.floor(v));
+    }, [onChange]);
+    return (_jsxs("div", { className: "playhead-slider", children: [_jsx("span", { className: "playhead-label", id: labelId, children: "Playhead" }), _jsx(SnappableSlider, { min: 0, max: maxSamples, value: value, disabled: disabled || maxSamples === 0, labelId: labelId, valueText: formatTime(currentSeconds), onChange: handleChange }), _jsxs("span", { className: "playhead-time", children: [formatTime(currentSeconds), " / ", formatTime(durationSeconds)] })] }));
+}
+export const PlayheadSlider = memo(PlayheadSliderInner);

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

@@ -0,0 +1,18 @@
+export interface SnappableSliderProps {
+    min: number;
+    max: number;
+    value: number;
+    skew?: number;
+    step?: number;
+    defaultValue?: number;
+    enableSnap?: boolean;
+    snaps?: number[];
+    ticks?: number[];
+    logarithmic?: boolean;
+    disabled?: boolean;
+    labelId?: string;
+    valueText?: string;
+    formatTick?: (value: number) => string;
+    onChange?: (value: number) => void;
+}
+export declare function SnappableSlider({ min, max, value, skew, step, defaultValue, enableSnap, snaps, ticks, logarithmic, disabled, labelId, valueText, formatTick, onChange, }: SnappableSliderProps): import("react/jsx-runtime").JSX.Element;