@digitalmeadow/control-panel 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,12 +1,297 @@
+const z = `
+.cp-root {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  width: 280px;
+  max-height: 90vh;
+  overflow: auto;
+  background: transparent;
+  color: #fff;
+  mix-blend-mode: exclusion;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
+  font-size: 10px;
+  line-height: 1.2;
+  padding: 8px;
+  z-index: 100;
+}
+
+.cp-root::-webkit-scrollbar {
+  width: 1px;
+}
+.cp-root::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cp-root::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.cp-summary {
+  cursor: pointer;
+  user-select: none;
+  font-weight: bold;
+  outline: none;
+}
+
+.cp-summary-root {
+  position: sticky;
+  top: 0;
+}
+
+.cp-stats {
+  float: right;
+  font-weight: normal;
+  opacity: 0.6;
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+
+.cp-content {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cp-folder {
+  width: 100%;
+}
+
+.cp-folder-content {
+  margin: 0 0 6px 0;
+  padding: 4px 0 0 9px;
+}
+
+.cp-controller {
+  display: flex;
+}
+
+.cp-label {
+  margin: auto 0;
+  width: 50%;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  padding-right: 8px;
+  opacity: 0.8;
+}
+
+.cp-input-number {
+  width: 50%;
+  background: transparent;
+  border: 1px solid #fff;
+  color: inherit;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.cp-input-number:focus {
+  outline: none;
+  border-color: #fff;
+  background: transparent;
+}
+
+.cp-select {
+  width: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  border: none;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.cp-checkbox {
+  margin: auto 0;
+}
+
+.cp-button {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.3);
+  border: none;
+  padding: 4px 2px;
+  border-radius: 2px;
+  cursor: pointer;
+  text-align: center;
+  font-family: inherit;
+  font-size: inherit;
+  transition: background 0.1s;
+}
+
+.cp-button:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.cp-button:active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(1px);
+}
+
+.cp-controller[data-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.cp-controller-details {
+  width: 50%;
+}
+
+.cp-controller-summary {
+  cursor: pointer;
+  outline: none;
+}
+
+.cp-controller-summary-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: calc(100% - 16px);
+  vertical-align: middle;
+}
+
+.cp-input-range {
+  -webkit-appearance: none;
+  flex: 1;
+  min-width: 0;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.3);
+  margin: 0;
+  vertical-align: middle;
+  cursor: grab;
+}
+.cp-input-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 8px;
+  border-radius: 1px;
+  background: #fff;
+  cursor: grab;
+}
+.cp-input-range::-moz-range-thumb {
+  width: 4px;
+  height: 16px;
+  background: #fff;
+  cursor: grab;
+}
+
+.cp-input-range:active {
+  cursor: grabbing;
+}
+
+.cp-value-display {
+  min-width: 24px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.9em;
+  opacity: 0.8;
+  user-select: none;
+}
+
+.cp-number-settings {
+  margin-top: 4px;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cp-separator {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  margin: 4px 0;
+  width: 100%;
+}
+
+.cp-setting-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cp-setting-label {
+  width: 50%;
+  font-size: 0.9em;
+  opacity: 0.7;
+}
+
+.cp-input-small {
+  width: 50%;
+}
+
+.cp-radios {
+  width: 50%;
+  display: flex;
+  gap: 2px;
+}
+
+.cp-radio {
+  flex: 1;
+  font-size: 0.9em;
+  padding: 4px 2px;
+  height: 100%;
+}
+
+.cp-radio[data-active="true"] {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #fff;
+  font-weight: bold;
+}
+
+.cp-button-delete {
+  width: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.cp-input-color {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  outline: none;
+
+  isolation: isolate;
+  mix-blend-mode: normal;
+  cursor: pointer;
+}
+
+.cp-color-swatch {
+  width: 10px;
+  height: 10px;
+  margin-right: 8px;
+}
+
+.cp-stops-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+`;
+let V = !1;
+function R() {
+  if (V) return;
+  const n = document.createElement("style");
+  n.id = "control-panel-styles", n.textContent = z, document.head.appendChild(n), V = !0;
+}
 function r(n, t = {}, e = []) {
-  const i = document.createElement(n);
-  for (const [s, a] of Object.entries(t))
-    s === "className" ? i.className = String(a) : s === "style" && typeof a == "object" ? Object.assign(i.style, a) : s === "open" && typeof a == "boolean" ? a ? i.setAttribute("open", "") : i.removeAttribute("open") : typeof a != "object" && i.setAttribute(s, String(a));
-  for (const s of e)
-    typeof s == "string" ? i.appendChild(document.createTextNode(s)) : i.appendChild(s);
-  return i;
-}
-function B(n) {
+  const s = document.createElement(n);
+  for (const [i, a] of Object.entries(t))
+    i === "className" ? s.className = String(a) : i === "style" && typeof a == "object" ? Object.assign(s.style, a) : i === "open" && typeof a == "boolean" ? a ? s.setAttribute("open", "") : s.removeAttribute("open") : typeof a != "object" && s.setAttribute(i, String(a));
+  for (const i of e)
+    typeof i == "string" ? s.appendChild(document.createTextNode(i)) : s.appendChild(i);
+  return s;
+}
+function D(n) {
   const t = r(
     "button",
     {
@@ -16,39 +301,39 @@ function B(n) {
   );
   return t.addEventListener("click", n), t;
 }
-function R(n) {
+function j(n) {
   return n.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUpperCase()).trim();
 }
-function D(n, t, e) {
+function O(n, t, e) {
   return Math.min(Math.max(n, t), e);
 }
-function j(n, t, e) {
+function $(n, t, e) {
   if (t.length !== e.length)
     throw new Error("Input and output ranges must have the same length");
   if (t.length < 2)
     throw new Error("Input and output ranges must have at least two values");
-  let i = 0;
-  for (; i < t.length - 1 && n > t[i + 1]; )
-    i++;
-  if (i === t.length - 1)
+  let s = 0;
+  for (; s < t.length - 1 && n > t[s + 1]; )
+    s++;
+  if (s === t.length - 1)
     return e[e.length - 1];
-  if (i === 0 && n < t[0])
+  if (s === 0 && n < t[0])
     return e[0];
-  const s = t[i], a = t[i + 1], o = e[i], h = e[i + 1];
-  return (n - s) / (a - s) * (h - o) + o;
+  const i = t[s], a = t[s + 1], o = e[s], c = e[s + 1];
+  return (n - i) / (a - i) * (c - o) + o;
 }
-class z {
+class U {
   constructor() {
-    this.source = null, this.stream = null, this.fftSize = 2048, this.smoothingTimeConstant = 0.92, this.spectrumBoost = 2, this.levels = {
+    this.source = null, this.stream = null, this.fftSize = 2048, this.smoothingTimeConstant = 0.82, this.spectrumBoost = 3, this.levels = {
+      volume: 0,
       bass: 0,
       mids: 0,
-      highs: 0,
-      volume: 0
+      highs: 0
     }, this.peaks = {
+      volume: 0,
       bass: 0,
       mids: 0,
-      highs: 0,
-      volume: 0
+      highs: 0
     }, this._isAnalyzing = !1, this.loop = () => {
       this._isAnalyzing && (requestAnimationFrame(this.loop), this.update());
     };
@@ -67,8 +352,8 @@ class z {
       }) : e = navigator.mediaDevices.getUserMedia({
         audio: !0
       });
-      const i = await e;
-      this.ctx.state === "suspended" && this.ctx.resume(), this.source && this.source.disconnect(), this.stream && this.stream.getTracks().forEach((s) => s.stop()), this.stream = i, this.source = this.ctx.createMediaStreamSource(this.stream), this.source.connect(this.analyser), this._isAnalyzing = !0, this.loop();
+      const s = await e;
+      this.ctx.state === "suspended" && this.ctx.resume(), this.source && this.source.disconnect(), this.stream && this.stream.getTracks().forEach((i) => i.stop()), this.stream = s, this.source = this.ctx.createMediaStreamSource(this.stream), this.source.connect(this.analyser), this._isAnalyzing = !0, this.loop();
     } catch (e) {
       console.error("Error accessing audio input:", e), this._isAnalyzing = !1;
     }
@@ -76,35 +361,35 @@ class z {
   update() {
     if (this.analyser.getByteFrequencyData(this.dataArray), this.analyser.getByteTimeDomainData(this.waveformArray), this.spectrumBoost !== 1) {
       const p = this.dataArray.length;
-      for (let c = 0; c < p; c++) {
-        const u = 1 + c / p * (this.spectrumBoost - 1);
-        this.dataArray[c] = Math.min(255, this.dataArray[c] * u);
+      for (let h = 0; h < p; h++) {
+        const m = 1 + h / p * (this.spectrumBoost - 1);
+        this.dataArray[h] = Math.min(255, this.dataArray[h] * m);
       }
     }
-    const t = [2, 10], e = [10, 150], i = [150, 600], s = this.getAverage(t[0], t[1]), a = this.getAverage(e[0], e[1]), o = this.getAverage(i[0], i[1]), h = this.getAverage(0, i[1]);
-    this.processLevel("bass", s), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", h);
+    const t = [2, 10], e = [10, 150], s = [150, 600], i = this.getAverage(t[0], t[1]), a = this.getAverage(e[0], e[1]), o = this.getAverage(s[0], s[1]), c = this.getAverage(0, s[1]);
+    this.processLevel("bass", i), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", c);
   }
   processLevel(t, e) {
-    this.peaks[t] -= 5e-4, this.peaks[t] = D(this.peaks[t], 0.1, 1), e > this.peaks[t] && (this.peaks[t] = e), this.levels[t] = D(
-      j(e, [0, this.peaks[t]], [0, 1]),
+    this.peaks[t] -= 5e-4, this.peaks[t] = O(this.peaks[t], 0.1, 1), e > this.peaks[t] && (this.peaks[t] = e), this.levels[t] = O(
+      $(e, [0, this.peaks[t]], [0, 1]),
       0,
       1
     );
   }
   getAverage(t, e) {
-    let i = 0;
-    const s = e - t;
-    if (s <= 0) return 0;
+    let s = 0;
+    const i = e - t;
+    if (i <= 0) return 0;
     for (let a = t; a < e; a++)
-      i += this.dataArray[a];
-    return i / s / 255;
+      s += this.dataArray[a];
+    return s / i / 255;
   }
   getSignal(t) {
     return () => this.levels[t];
   }
 }
-const x = new z();
-class $ {
+const C = new U();
+class H {
   constructor() {
     this.midiAccess = null, this.values = /* @__PURE__ */ new Map(), this.isListening = !1, this.resolveListen = null, this.listeningCallback = null, this.init();
   }
@@ -125,18 +410,18 @@ class $ {
       e.onmidimessage = this.handleMessage.bind(this);
   }
   handleMessage(t) {
-    const e = t.data, [i] = e;
-    if ((i & 240) >= 240) return;
+    const e = t.data, [s] = e;
+    if ((s & 240) >= 240) return;
     const a = this.getIdFromMessage(t), o = this.normalizeValue(e);
     this.values.set(a, o), this.isListening && this.resolveListen && o > 0 && (this.resolveListen(a), this.isListening = !1, this.resolveListen = null, this.listeningCallback && this.listeningCallback());
   }
   getIdFromMessage(t) {
-    const e = t.data, [i, s] = e, a = i & 240, o = t.currentTarget.name || "unknown", h = a === 144 || a === 128 ? "note" : "ctrl", p = o.replace(/[^a-zA-Z0-9]/g, "");
-    return `${s}_${h}_${p}`;
+    const e = t.data, [s, i] = e, a = s & 240, o = t.currentTarget.name || "unknown", c = a === 144 || a === 128 ? "note" : "ctrl", p = o.replace(/[^a-zA-Z0-9]/g, "");
+    return `${i}_${c}_${p}`;
   }
   normalizeValue(t) {
-    const [e, i, s] = t, a = e & 240;
-    return a === 144 ? s > 0 ? 1 : 0 : a === 128 ? 0 : a === 176 ? s / 127 : 0;
+    const [e, s, i] = t, a = e & 240;
+    return a === 144 ? i > 0 ? 1 : 0 : a === 128 ? 0 : a === 176 ? i / 127 : 0;
   }
   listen() {
     return this.isListening = !0, new Promise((t) => {
@@ -150,13 +435,108 @@ class $ {
     return () => this.values.get(t) ?? 0;
   }
 }
-const q = new $(), M = class M {
-  constructor(t, e, i = {}) {
-    this.changeFns = /* @__PURE__ */ new Set(), this.object = t, this.property = e, this.key = i.id ?? e, this.initialValue = this.object[this.property], this.domElement = r("div", { className: "cp-controller" });
-    const s = i.label ?? R(e), a = r("label", { className: "cp-label" }, [
-      String(s)
+const W = new H();
+class _ {
+  constructor() {
+    this.configs = /* @__PURE__ */ new Map(), this.lastRandomUpdateTime = 0, this.currentRandomValue = 0, this.startTime = performance.now(), this.configs.set("constant", {
+      frequency: 0.1,
+      // Units per second
+      amplitude: 1,
+      offset: 0,
+      phase: 0
+    }), this.configs.set("sine", {
+      frequency: 0.1,
+      amplitude: 1,
+      offset: 0,
+      phase: 0
+    }), this.configs.set("sawtooth", {
+      frequency: 0.1,
+      amplitude: 1,
+      offset: 0,
+      phase: 0
+    }), this.configs.set("triangle", {
+      frequency: 0.1,
+      amplitude: 1,
+      offset: 0,
+      phase: 0
+    }), this.configs.set("square", {
+      frequency: 0.1,
+      amplitude: 1,
+      offset: 0,
+      phase: 0
+    }), this.configs.set("random", {
+      frequency: 10,
+      // Updates per second
+      amplitude: 1,
+      offset: 0,
+      phase: 0
+    });
+  }
+  setConfig(t, e) {
+    const s = this.configs.get(t);
+    this.configs.set(t, { ...s, ...e });
+  }
+  getConfig(t) {
+    return { ...this.configs.get(t) };
+  }
+  getTime() {
+    return (performance.now() - this.startTime) / 1e3;
+  }
+  normalizeOutput(t, e) {
+    const s = t * e.amplitude + e.offset;
+    return Math.max(0, Math.min(1, s));
+  }
+  constant(t) {
+    const e = t ? { ...this.configs.get("constant"), ...t } : this.configs.get("constant"), i = this.getTime() * e.frequency % 1;
+    return this.normalizeOutput(i, e);
+  }
+  sine(t) {
+    const e = t ? { ...this.configs.get("sine"), ...t } : this.configs.get("sine"), s = this.getTime(), i = e.phase * Math.PI * 2, o = (Math.sin(s * e.frequency * Math.PI * 2 + i) + 1) / 2;
+    return this.normalizeOutput(o, e);
+  }
+  sawtooth(t) {
+    const e = t ? { ...this.configs.get("sawtooth"), ...t } : this.configs.get("sawtooth"), s = this.getTime(), i = e.phase, a = (s * e.frequency + i) % 1 + i % 1;
+    return this.normalizeOutput(a % 1, e);
+  }
+  triangle(t) {
+    const e = t ? { ...this.configs.get("triangle"), ...t } : this.configs.get("triangle"), s = this.getTime(), i = e.phase, a = (s * e.frequency + i) % 1, o = a < 0.5 ? a * 2 : 2 - a * 2;
+    return this.normalizeOutput(o, e);
+  }
+  square(t) {
+    const e = t ? { ...this.configs.get("square"), ...t } : this.configs.get("square"), s = this.getTime(), i = e.phase, o = (s * e.frequency + i) % 1 < 0.5 ? 0 : 1;
+    return this.normalizeOutput(o, e);
+  }
+  random(t) {
+    const e = t ? { ...this.configs.get("random"), ...t } : this.configs.get("random"), s = performance.now(), i = 1e3 / e.frequency;
+    return s - this.lastRandomUpdateTime > i && (this.currentRandomValue = Math.random(), this.lastRandomUpdateTime = s), this.normalizeOutput(this.currentRandomValue, e);
+  }
+  getSignal(t) {
+    switch (t) {
+      case "constant":
+        return () => this.constant();
+      case "sine":
+        return () => this.sine();
+      case "sawtooth":
+        return () => this.sawtooth();
+      case "triangle":
+        return () => this.triangle();
+      case "square":
+        return () => this.square();
+      case "random":
+        return () => this.random();
+    }
+  }
+  reset() {
+    this.startTime = performance.now(), this.lastRandomUpdateTime = 0, this.currentRandomValue = 0;
+  }
+}
+const J = new _(), T = class T {
+  constructor(t, e, s = {}) {
+    this.changeFns = /* @__PURE__ */ new Set(), this.object = t, this.property = e, this.key = s.id ?? e, this.initialValue = this.object[this.property], this.domElement = r("div", { className: "cp-controller" });
+    const i = s.label ?? j(e), a = r("label", { className: "cp-label" }, [
+      String(i)
     ]);
-    a.setAttribute("title", String(s)), this.domElement.appendChild(a), i.disabled && this.domElement.setAttribute("data-disabled", "true");
+    a.setAttribute("title", String(i)), this.domElement.appendChild(a), s.disabled && this.domElement.setAttribute("data-disabled", "true");
   }
   get value() {
     return this.object[this.property];
@@ -184,9 +564,9 @@ const q = new $(), M = class M {
     this.domElement.appendChild(t);
   }
 };
-M.audio = x, M.midi = q;
-let m = M;
-const O = {
+T.audio = C, T.midi = W, T.math = J;
+let d = T;
+const P = {
   linear: (n) => n,
   quadIn: (n) => n * n,
   quadOut: (n) => n * (2 - n),
@@ -201,28 +581,52 @@ const O = {
   sineOut: (n) => Math.sin(n * Math.PI / 2),
   sineInOut: (n) => -(Math.cos(Math.PI * n) - 1) / 2
 };
-class P {
+class B {
   constructor(t) {
     this.rafId = null, this.currentSignalType = null, this.currentMidiId = null, this.currentEase = "linear", this.currentBehaviour = "forward", this.loop = () => {
       if (this.currentSignalType) {
         let e = 0;
-        this.currentSignalType === "midi" ? this.currentMidiId && (e = m.midi.getSignal(this.currentMidiId)()) : e = m.audio.getSignal(this.currentSignalType)();
-        const i = O[this.currentEase](e);
-        this.onChange(i, this.currentBehaviour), this.rafId = requestAnimationFrame(this.loop);
+        this.currentSignalType === "midi" ? this.currentMidiId && (e = d.midi.getSignal(this.currentMidiId)()) : [
+          "constant",
+          "sine",
+          "sawtooth",
+          "triangle",
+          "square",
+          "random"
+        ].includes(this.currentSignalType) ? e = d.math.getSignal(
+          this.currentSignalType
+        )() : ["volume", "bass", "mids", "highs"].includes(this.currentSignalType) && (e = d.audio.getSignal(
+          this.currentSignalType
+        )());
+        const s = P[this.currentEase](e);
+        this.onChange(s, this.currentBehaviour), this.rafId = requestAnimationFrame(this.loop);
       }
     }, this.onChange = t.onChange, this.setupControllers(t.container);
   }
   setupControllers(t) {
     const e = this.createSettingSelect(
       "signal",
-      ["none", "bass", "mids", "highs", "volume", "midi"],
+      [
+        "none",
+        "volume",
+        "bass",
+        "mids",
+        "highs",
+        "constant",
+        "sine",
+        "sawtooth",
+        "triangle",
+        "square",
+        "random",
+        "midi"
+      ],
       (o) => this.setSignalType(o)
     );
     this.signalSelect = e.select, t.appendChild(e.row), this.midiRow = r("div", {
       className: "cp-setting-row",
       style: "display: none;"
     });
-    const i = r(
+    const s = r(
       "label",
       { className: "cp-setting-label" },
       ["Midi"]
@@ -233,44 +637,112 @@ class P {
       ["Learn"]
     ), this.midiBtn.addEventListener("click", async () => {
       if (this.midiBtn.textContent === "Listening...") {
-        m.midi.cancelListen(), this.setMidiId(null);
+        d.midi.cancelListen(), this.setMidiId(null);
         return;
       }
       this.midiBtn.textContent = "Listening...";
-      const o = await m.midi.listen();
+      const o = await d.midi.listen();
       this.setMidiId(o);
-    }), this.midiRow.appendChild(i), this.midiRow.appendChild(this.midiBtn), t.appendChild(this.midiRow);
-    const s = this.createSettingSelect(
+    }), this.midiRow.appendChild(s), this.midiRow.appendChild(this.midiBtn), t.appendChild(this.midiRow), this.mathParamsContainer = r("div", {
+      style: "display: none; flex-direction: column; gap: 4px;"
+    }), t.appendChild(this.mathParamsContainer);
+    const i = this.createSettingSelect(
       "behaviour",
       ["forward", "backward", "loopForward", "loopBackward", "pingpong"],
       (o) => this.setBehaviour(o)
     );
-    this.behaviourRow = s.row, this.behaviourSelect = s.select, this.behaviourRow.style.display = "none", this.behaviourSelect.value = this.currentBehaviour, t.appendChild(this.behaviourRow);
+    this.behaviourRow = i.row, this.behaviourSelect = i.select, this.behaviourRow.style.display = "none", this.behaviourSelect.value = this.currentBehaviour, t.appendChild(this.behaviourRow);
     const a = this.createSettingSelect(
       "ease",
-      Object.keys(O),
+      Object.keys(P),
       (o) => this.setEase(o)
     );
     this.easeRow = a.row, this.easeSelect = a.select, this.easeRow.style.display = "none", this.easeSelect.value = this.currentEase, t.appendChild(this.easeRow);
   }
-  createSettingSelect(t, e, i) {
-    const s = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
+  createSettingSelect(t, e, s) {
+    const i = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
       t
     ]), o = r("select", {
       className: "cp-select cp-input-small"
     });
-    return e.forEach((h) => {
-      const p = r("option", { value: h }, [h]);
+    return e.forEach((c) => {
+      const p = r("option", { value: c }, [c]);
       o.appendChild(p);
-    }), o.addEventListener("change", () => i(o.value)), s.appendChild(a), s.appendChild(o), { row: s, select: o };
+    }), o.addEventListener("change", () => s(o.value)), i.appendChild(a), i.appendChild(o), { row: i, select: o };
+  }
+  createNumberInput(t, e, s, i, a, o) {
+    const c = r("div", { className: "cp-setting-row" }), p = r("label", { className: "cp-setting-label" }, [
+      t
+    ]), h = r("input", {
+      className: "cp-input-number cp-input-small",
+      type: "number",
+      value: String(e),
+      min: String(s),
+      max: String(i),
+      step: String(a)
+    });
+    return h.addEventListener("input", () => {
+      const u = parseFloat(h.value);
+      isNaN(u) || o(u);
+    }), c.appendChild(p), c.appendChild(h), { row: c, input: h };
+  }
+  updateMathParams(t) {
+    this.mathParamsContainer.innerHTML = "";
+    const e = d.math.getConfig(t);
+    let s = "Frequency", i = 0.1, a = 10, o = 0.1;
+    t === "random" ? a = 30 : t === "constant" && (s = "Speed", i = 0.01, a = 2, o = 0.01);
+    const c = this.createNumberInput(
+      s,
+      e.frequency,
+      i,
+      a,
+      o,
+      (u) => d.math.setConfig(t, { frequency: u })
+    );
+    this.mathParamsContainer.appendChild(c.row);
+    const p = this.createNumberInput(
+      "Amplitude",
+      e.amplitude,
+      0,
+      2,
+      0.1,
+      (u) => d.math.setConfig(t, { amplitude: u })
+    );
+    this.mathParamsContainer.appendChild(p.row);
+    const h = this.createNumberInput(
+      "Offset",
+      e.offset,
+      0,
+      1,
+      0.1,
+      (u) => d.math.setConfig(t, { offset: u })
+    );
+    if (this.mathParamsContainer.appendChild(h.row), ["sine", "sawtooth", "triangle", "square"].includes(t)) {
+      const u = this.createNumberInput(
+        "Phase",
+        e.phase,
+        0,
+        1,
+        0.01,
+        (m) => d.math.setConfig(t, { phase: m })
+      );
+      this.mathParamsContainer.appendChild(u.row);
+    }
   }
   setSignalType(t) {
     if (!t || t === "none")
-      this.currentSignalType = null, this.currentMidiId = null, this.midiRow.style.display = "none", this.easeRow.style.display = "none", this.behaviourRow.style.display = "none", this.stop(), this.signalSelect.value !== "none" && (this.signalSelect.value = "none");
+      this.currentSignalType = null, this.currentMidiId = null, this.midiRow.style.display = "none", this.mathParamsContainer.style.display = "none", this.easeRow.style.display = "none", this.behaviourRow.style.display = "none", this.stop(), this.signalSelect.value !== "none" && (this.signalSelect.value = "none");
     else {
       this.currentSignalType = t;
-      const e = t === "midi";
-      this.midiRow.style.display = e ? "flex" : "none", this.easeRow.style.display = "flex", this.behaviourRow.style.display = "flex", e || (this.currentMidiId = null, m.audio.ctx.state === "suspended" && m.audio.setInput("microphone")), this.start(), this.signalSelect.value !== t && (this.signalSelect.value = t);
+      const e = t === "midi", s = [
+        "constant",
+        "sine",
+        "sawtooth",
+        "triangle",
+        "square",
+        "random"
+      ].includes(t), i = ["volume", "bass", "mids", "highs"].includes(t);
+      this.midiRow.style.display = e ? "flex" : "none", this.mathParamsContainer.style.display = s ? "flex" : "none", s && this.updateMathParams(t), this.easeRow.style.display = "flex", this.behaviourRow.style.display = "flex", i ? (this.currentMidiId = null, d.audio.ctx.state === "suspended" && d.audio.setInput("microphone")) : e || (this.currentMidiId = null), this.start(), this.signalSelect.value !== t && (this.signalSelect.value = t);
     }
   }
   setMidiId(t) {
@@ -303,10 +775,10 @@ class P {
     this.setSignalType("none"), this.setEase("linear"), this.setBehaviour("forward"), this.setMidiId(null);
   }
 }
-class H extends m {
-  constructor(t, e, i = {}) {
-    super(t, e, i), this.pingPongDirection = 1, this.min = 0, this.max = 100, this.initialOptions = i, this.min = i.min ?? 0, this.max = i.max ?? 100;
-    const s = r("details", {
+class G extends d {
+  constructor(t, e, s = {}) {
+    super(t, e, s), this.pingPongDirection = 1, this.min = 0, this.max = 100, this.initialOptions = s, this.min = s.min ?? 0, this.max = s.max ?? 100;
+    const i = r("details", {
       className: "cp-controller-details"
     }), a = r("summary", {
       className: "cp-controller-summary"
@@ -314,8 +786,8 @@ class H extends m {
     this.input = r("input", {
       type: "range",
       className: "cp-input-range",
-      step: i.step ?? "any"
-    }), i.min !== void 0 && (this.input.min = String(i.min)), i.max !== void 0 && (this.input.max = String(i.max)), this.input.value = String(this.value), this.display = r(
+      step: s.step ?? "any"
+    }), s.min !== void 0 && (this.input.min = String(s.min)), s.max !== void 0 && (this.input.max = String(s.max)), this.input.value = String(this.value), this.display = r(
       "span",
       {
         className: "cp-value-display"
@@ -330,30 +802,30 @@ class H extends m {
     const o = r("div", {
       className: "cp-controller-summary-content"
     });
-    o.appendChild(this.input), o.appendChild(this.display), a.appendChild(o), s.appendChild(a);
-    const h = r("div", { className: "cp-number-settings" }), p = this.createSetting(
+    o.appendChild(this.input), o.appendChild(this.display), a.appendChild(o), i.appendChild(a);
+    const c = r("div", { className: "cp-number-settings" }), p = this.createSetting(
       "min",
-      i.min,
+      s.min,
       (l) => this.setMin(l)
     );
-    this.minInput = p.input, h.appendChild(p.row);
-    const c = this.createSetting(
+    this.minInput = p.input, c.appendChild(p.row);
+    const h = this.createSetting(
       "max",
-      i.max,
+      s.max,
       (l) => this.setMax(l)
     );
-    this.maxInput = c.input, h.appendChild(c.row);
-    const y = this.createSetting(
+    this.maxInput = h.input, c.appendChild(h.row);
+    const u = this.createSetting(
       "step",
-      i.step,
+      s.step,
       (l) => this.setStep(l)
     );
-    this.stepInput = y.input, h.appendChild(y.row);
-    const u = r("hr", { className: "cp-separator" });
-    h.appendChild(u), this.signalHandler = new P({
-      container: h,
-      onChange: (l, d) => this.applySignal(l, d)
-    }), s.appendChild(h), this.appendWidget(s);
+    this.stepInput = u.input, c.appendChild(u.row);
+    const m = r("hr", { className: "cp-separator" });
+    c.appendChild(m), this.signalHandler = new B({
+      container: c,
+      onChange: (l, f) => this.applySignal(l, f)
+    }), i.appendChild(c), this.appendWidget(i);
   }
   // Setters
   setMin(t) {
@@ -366,34 +838,34 @@ class H extends m {
     t === void 0 && (t = ""), typeof t == "number" && (t = String(t)), t === "" || t === "any" || isNaN(parseFloat(t)) ? this.input.step = "any" : this.input.step = t, this.stepInput && (t === "any" || t === "" ? this.stepInput.value = "" : this.stepInput.value !== t && (this.stepInput.value = t));
   }
   applySignal(t, e) {
-    const i = this.max - this.min;
-    let s;
+    const s = this.max - this.min;
+    let i;
     if (e === "forward")
-      s = this.min + t * i;
+      i = this.min + t * s;
     else if (e === "backward")
-      s = this.max - t * i;
+      i = this.max - t * s;
     else {
-      const a = t * (i * 0.01);
-      s = this.value, e === "loopForward" ? (s += a, s > this.max && (s = this.min + (s - this.min) % i)) : e === "loopBackward" ? (s -= a, s < this.min && (s = this.max - (this.max - s) % i)) : e === "pingpong" && (s += a * this.pingPongDirection, s >= this.max ? (s = this.max, this.pingPongDirection = -1) : s <= this.min && (s = this.min, this.pingPongDirection = 1));
+      const a = t * (s * 0.01);
+      i = this.value, e === "loopForward" ? (i += a, i > this.max && (i = this.min + (i - this.min) % s)) : e === "loopBackward" ? (i -= a, i < this.min && (i = this.max - (this.max - i) % s)) : e === "pingpong" && (i += a * this.pingPongDirection, i >= this.max ? (i = this.max, this.pingPongDirection = -1) : i <= this.min && (i = this.min, this.pingPongDirection = 1));
     }
-    s = this.roundToStep(s), this.setValue(s), this.input.value = String(s), this.display.textContent = String(s.toFixed(1));
+    i = this.roundToStep(i), this.setValue(i), this.input.value = String(i), this.display.textContent = String(i.toFixed(1));
   }
   roundToStep(t) {
     const e = this.input.step;
     if (e === "any" || e === "" || isNaN(parseFloat(e)))
       return t;
-    const i = parseFloat(e), s = this.min;
-    return s + Math.round((t - s) / i) * i;
+    const s = parseFloat(e), i = this.min;
+    return i + Math.round((t - i) / s) * s;
   }
-  createSetting(t, e, i) {
-    const s = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
+  createSetting(t, e, s) {
+    const i = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
       t
     ]), o = r("input", {
       type: "number",
       className: "cp-input-number cp-input-small",
       step: "any"
     });
-    return e !== void 0 && (o.value = String(e)), o.addEventListener("input", () => i(o.value)), s.appendChild(a), s.appendChild(o), { row: s, input: o };
+    return e !== void 0 && (o.value = String(e)), o.addEventListener("input", () => s(o.value)), i.appendChild(a), i.appendChild(o), { row: i, input: o };
   }
   updateDisplay() {
     this.input.value = String(this.value), this.display.textContent = String(this.value.toFixed(1));
@@ -419,8 +891,8 @@ class H extends m {
       ), e.max !== void 0 ? this.setMax(e.max) : this.setMax(
         this.initialOptions.max !== void 0 ? this.initialOptions.max : ""
       ), e.step !== void 0 ? this.setStep(e.step) : this.setStep(this.initialOptions.step);
-      let i = t.value;
-      !isNaN(this.min) && i < this.min && (i = this.min), !isNaN(this.max) && i > this.max && (i = this.max), this.setValue(i), this.signalHandler?.load(e.signal);
+      let s = t.value;
+      !isNaN(this.min) && s < this.min && (s = this.min), !isNaN(this.max) && s > this.max && (s = this.max), this.setValue(s), this.signalHandler?.load(e.signal);
     }
   }
   reset() {
@@ -434,24 +906,24 @@ class H extends m {
     ), this.setStep(this.initialOptions.step), this.signalHandler?.reset();
   }
 }
-class U extends m {
-  constructor(t, e, i) {
-    super(t, e, i), this.optionValues = [], this.select = r("select", { className: "cp-select" }), this.optionValues = i.options || [], this.optionValues.forEach((s, a) => {
+class Z extends d {
+  constructor(t, e, s) {
+    super(t, e, s), this.optionValues = [], this.select = r("select", { className: "cp-select" }), this.optionValues = s.options || [], this.optionValues.forEach((i, a) => {
       const o = r("option", { value: String(a) }, [
-        String(s)
+        String(i)
       ]);
       this.select.appendChild(o);
     }), this.updateDisplay(), this.select.addEventListener("change", () => {
-      const s = parseInt(this.select.value), a = this.optionValues[s];
+      const i = parseInt(this.select.value), a = this.optionValues[i];
       this.setValue(a);
     }), this.appendWidget(this.select);
   }
   setOptions(t) {
-    this.select.innerHTML = "", this.optionValues = t, this.optionValues.forEach((e, i) => {
-      const s = r("option", { value: String(i) }, [
+    this.select.innerHTML = "", this.optionValues = t, this.optionValues.forEach((e, s) => {
+      const i = r("option", { value: String(s) }, [
         String(e)
       ]);
-      this.select.appendChild(s);
+      this.select.appendChild(i);
     }), this.updateDisplay(), this.select.value === "" && this.optionValues.length > 0 && this.setValue(this.optionValues[0]);
   }
   updateDisplay() {
@@ -459,11 +931,11 @@ class U extends m {
     t !== -1 && (this.select.value = String(t));
   }
 }
-class _ extends m {
-  constructor(t, e, i = {}) {
-    const s = { action: e };
-    super(s, "action", i);
-    const a = i.label ?? t;
+class K extends d {
+  constructor(t, e, s = {}) {
+    const i = { action: e };
+    super(i, "action", s);
+    const a = s.label ?? t;
     this.button = r("button", { className: "cp-button" }, [
       String(a)
     ]), this.button.addEventListener("click", () => {
@@ -474,9 +946,9 @@ class _ extends m {
   updateDisplay() {
   }
 }
-class W extends m {
-  constructor(t, e, i = {}) {
-    super(t, e, i), this.input = r("input", {
+class Y extends d {
+  constructor(t, e, s = {}) {
+    super(t, e, s), this.input = r("input", {
       type: "checkbox",
       className: "cp-checkbox"
     }), this.input.checked = this.value, this.input.addEventListener("change", () => {
@@ -487,32 +959,32 @@ class W extends m {
     this.input.checked = this.value;
   }
 }
-class J extends m {
-  constructor(t, e, i) {
-    super(t, e, i), this.buttons = [], this.optionValues = [], this.container = r("div", { className: "cp-radios" }), this.optionValues = i.options || [], this.optionValues.forEach((s) => {
+class Q extends d {
+  constructor(t, e, s) {
+    super(t, e, s), this.buttons = [], this.optionValues = [], this.container = r("div", { className: "cp-radios" }), this.optionValues = s.options || [], this.optionValues.forEach((i) => {
       const a = r("button", { className: "cp-button cp-radio" }, [
-        String(s)
+        String(i)
       ]);
       a.addEventListener("click", () => {
-        this.setValue(s);
+        this.setValue(i);
       }), this.container.appendChild(a), this.buttons.push(a);
     }), this.updateDisplay(), this.appendWidget(this.container);
   }
   updateDisplay() {
     const t = this.value;
-    this.buttons.forEach((e, i) => {
-      this.optionValues[i] === t ? e.setAttribute("data-active", "true") : e.removeAttribute("data-active");
+    this.buttons.forEach((e, s) => {
+      this.optionValues[s] === t ? e.setAttribute("data-active", "true") : e.removeAttribute("data-active");
     });
   }
 }
-class G extends m {
-  constructor(t, e, i = {}) {
-    super(t, e, i), this.input = r("input", {
+class X extends d {
+  constructor(t, e, s = {}) {
+    super(t, e, s), this.input = r("input", {
       type: "color",
       className: "cp-input-color",
       value: this.value || "#000000"
-    }), this.appendWidget(this.input), this.input.addEventListener("input", (s) => {
-      const a = s.target;
+    }), this.appendWidget(this.input), this.input.addEventListener("input", (i) => {
+      const a = i.target;
       this.setValue(a.value);
     }), this.updateDisplay();
   }
@@ -522,7 +994,7 @@ class G extends m {
 }
 function F(n) {
   const t = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  n = n.replace(t, (i, s, a, o) => s + s + a + a + o + o);
+  n = n.replace(t, (s, i, a, o) => i + i + a + a + o + o);
   const e = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);
   return e ? [
     parseInt(e[1], 16),
@@ -530,27 +1002,27 @@ function F(n) {
     parseInt(e[3], 16)
   ] : [0, 0, 0];
 }
-function Z(n, t, e) {
+function tt(n, t, e) {
   return "#" + ((1 << 24) + (Math.round(n) << 16) + (Math.round(t) << 8) + Math.round(e)).toString(16).slice(1);
 }
 function w(n) {
   const t = n / 255;
   return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
 }
-function A(n) {
+function L(n) {
   return n <= 31308e-7 ? n * 12.92 * 255 : (1.055 * Math.pow(n, 1 / 2.4) - 0.055) * 255;
 }
-function K(n, t, e) {
-  const [i, s, a] = F(n), [o, h, p] = F(t), c = w(i), y = w(s), u = w(a), l = w(o), d = w(h), f = w(p), v = c + e * (l - c), I = y + e * (d - y), S = u + e * (f - u), C = A(v), g = A(I), b = A(S);
-  return Z(C, g, b);
+function et(n, t, e) {
+  const [s, i, a] = F(n), [o, c, p] = F(t), h = w(s), u = w(i), m = w(a), l = w(o), f = w(c), g = w(p), b = h + e * (l - h), I = u + e * (f - u), v = m + e * (g - m), S = L(b), y = L(I), x = L(v);
+  return tt(S, y, x);
 }
-class Q extends m {
-  constructor(t, e, i = {}) {
-    super(t, e, i), this.stops = [], this.pingPongDirection = 1, this.animationT = 0, this.manualPosition = 0, this.initialOptions = i, this.stops = i.stops || [
+class st extends d {
+  constructor(t, e, s = {}) {
+    super(t, e, s), this.stops = [], this.pingPongDirection = 1, this.animationT = 0, this.manualPosition = 0, this.initialOptions = s, this.stops = s.stops || [
       { color: "#000000", position: 0 },
       { color: "#ffffff", position: 1 }
     ], this.sortStops();
-    const s = r("details", {
+    const i = r("details", {
       className: "cp-controller-details"
     }), a = r("summary", {
       className: "cp-controller-summary"
@@ -564,11 +1036,11 @@ class Q extends m {
       "span",
       { className: "cp-value-display" },
       [String(this.value)]
-    ), o.appendChild(this.displayColor), o.appendChild(this.displayText), a.appendChild(o), s.appendChild(a);
-    const h = r("div", { className: "cp-number-settings" });
+    ), o.appendChild(this.displayColor), o.appendChild(this.displayText), a.appendChild(o), i.appendChild(a);
+    const c = r("div", { className: "cp-number-settings" });
     this.stopsContainer = r("div", {
       className: "cp-stops-container"
-    }), this.renderStops(), h.appendChild(this.stopsContainer);
+    }), this.renderStops(), c.appendChild(this.stopsContainer);
     const p = r(
       "button",
       {
@@ -578,25 +1050,25 @@ class Q extends m {
     );
     p.addEventListener("click", () => {
       this.stops.push({ color: "#ffffff", position: 0.5 }), this.sortStops(), this.renderStops(), this.updateOutput();
-    }), h.appendChild(p);
-    const c = r("hr", { className: "cp-separator" });
-    h.appendChild(c), this.signalHandler = new P({
-      container: h,
-      onChange: (y, u) => this.applySignal(y, u)
-    }), s.appendChild(h), this.appendWidget(s), this.updateOutput(0);
+    }), c.appendChild(p);
+    const h = r("hr", { className: "cp-separator" });
+    c.appendChild(h), this.signalHandler = new B({
+      container: c,
+      onChange: (u, m) => this.applySignal(u, m)
+    }), i.appendChild(c), this.appendWidget(i), this.updateOutput(0);
   }
   sortStops() {
     this.stops.sort((t, e) => t.position - e.position);
   }
   renderStops() {
     this.stopsContainer.innerHTML = "", this.stops.forEach((t, e) => {
-      const i = r("div", { className: "cp-setting-row" }), s = r("input", {
+      const s = r("div", { className: "cp-setting-row" }), i = r("input", {
         type: "color",
         className: "cp-input-color",
         value: t.color
       });
-      s.addEventListener("input", (h) => {
-        t.color = h.target.value, this.updateOutput();
+      i.addEventListener("input", (c) => {
+        t.color = c.target.value, this.updateOutput();
       });
       const a = r("input", {
         type: "number",
@@ -606,14 +1078,14 @@ class Q extends m {
         step: "0.01",
         value: String(t.position)
       });
-      a.addEventListener("change", (h) => {
-        let p = parseFloat(h.target.value);
+      a.addEventListener("change", (c) => {
+        let p = parseFloat(c.target.value);
         isNaN(p) && (p = 0), t.position = Math.max(0, Math.min(1, p)), this.sortStops(), this.renderStops(), this.updateOutput();
       });
-      const o = B(() => {
+      const o = D(() => {
         this.stops.splice(e, 1), this.renderStops(), this.updateOutput();
       });
-      i.appendChild(s), i.appendChild(a), i.appendChild(o), this.stopsContainer.appendChild(i);
+      s.appendChild(i), s.appendChild(a), s.appendChild(o), this.stopsContainer.appendChild(s);
     });
   }
   // Calculate color at t (0-1) and update value
@@ -629,11 +1101,11 @@ class Q extends m {
     else if (t >= this.stops[this.stops.length - 1].position)
       e = this.stops[this.stops.length - 1].color;
     else
-      for (let i = 0; i < this.stops.length - 1; i++) {
-        const s = this.stops[i], a = this.stops[i + 1];
-        if (t >= s.position && t <= a.position) {
-          const o = a.position - s.position, h = o === 0 ? 0 : (t - s.position) / o;
-          e = K(s.color, a.color, h);
+      for (let s = 0; s < this.stops.length - 1; s++) {
+        const i = this.stops[s], a = this.stops[s + 1];
+        if (t >= i.position && t <= a.position) {
+          const o = a.position - i.position, c = o === 0 ? 0 : (t - i.position) / o;
+          e = et(i.color, a.color, c);
           break;
         }
       }
@@ -643,16 +1115,16 @@ class Q extends m {
     this.displayColor && (this.displayColor.style.backgroundColor = this.value), this.displayText && (this.displayText.textContent = this.value);
   }
   applySignal(t, e) {
-    let i = t;
+    let s = t;
     if (e === "forward")
-      i = t;
+      s = t;
     else if (e === "backward")
-      i = 1 - t;
+      s = 1 - t;
     else {
-      const s = t * 0.05;
-      e === "loopForward" ? (this.animationT = (this.animationT + s) % 1, i = this.animationT) : e === "loopBackward" ? (this.animationT = (this.animationT - s + 1) % 1, i = this.animationT) : e === "pingpong" && (this.animationT += s * this.pingPongDirection, this.animationT >= 1 ? (this.animationT = 1, this.pingPongDirection = -1) : this.animationT <= 0 && (this.animationT = 0, this.pingPongDirection = 1), i = this.animationT);
+      const i = t * 0.05;
+      e === "loopForward" ? (this.animationT = (this.animationT + i) % 1, s = this.animationT) : e === "loopBackward" ? (this.animationT = (this.animationT - i + 1) % 1, s = this.animationT) : e === "pingpong" && (this.animationT += i * this.pingPongDirection, this.animationT >= 1 ? (this.animationT = 1, this.pingPongDirection = -1) : this.animationT <= 0 && (this.animationT = 0, this.pingPongDirection = 1), s = this.animationT);
     }
-    this.updateOutput(i), this.manualPosition = i;
+    this.updateOutput(s), this.manualPosition = s;
   }
   save() {
     return {
@@ -672,24 +1144,24 @@ class Q extends m {
     ], this.sortStops(), this.renderStops(), this.signalHandler?.reset(), this.updateOutput(0);
   }
 }
-class X extends m {
-  constructor(t, e, i = {}) {
-    super(t, e, i), this.items = [], this.initialOptions = i, this.itemType = i.itemType || "string", this.items = this.parseValue(this.value);
-    const s = r("details", {
+class it extends d {
+  constructor(t, e, s = {}) {
+    super(t, e, s), this.items = [], this.initialOptions = s, this.itemType = s.itemType || "string", this.items = this.parseValue(this.value);
+    const i = r("details", {
       className: "cp-controller-details"
     }), a = r("summary", {
       className: "cp-controller-summary"
     }), o = r("div", {
       className: "cp-controller-summary-content"
-    }), h = r("span", { className: "cp-value-display" }, [
+    }), c = r("span", { className: "cp-value-display" }, [
       `${this.items.length} items`
     ]);
-    o.appendChild(h), a.appendChild(o), s.appendChild(a);
+    o.appendChild(c), a.appendChild(o), i.appendChild(a);
     const p = r("div", { className: "cp-number-settings" });
     this.itemsContainer = r("div", {
       className: "cp-stops-container"
     }), this.renderItems(), p.appendChild(this.itemsContainer);
-    const c = r(
+    const h = r(
       "button",
       {
         className: "cp-button cp-input-small",
@@ -697,9 +1169,9 @@ class X extends m {
       },
       ["+ Add Item"]
     );
-    c.addEventListener("click", () => {
+    h.addEventListener("click", () => {
       this.addItem();
-    }), p.appendChild(c), s.appendChild(p), this.appendWidget(s);
+    }), p.appendChild(h), i.appendChild(p), this.appendWidget(i);
   }
   parseValue(t) {
     return !t || t.trim() === "" ? [] : t.split(",").map((e) => e.trim());
@@ -731,28 +1203,28 @@ class X extends m {
   }
   renderItems() {
     this.itemsContainer.innerHTML = "", this.items.forEach((t, e) => {
-      const i = r("div", { className: "cp-setting-row" });
-      let s;
-      this.itemType === "color" ? s = r("input", {
+      const s = r("div", { className: "cp-setting-row" });
+      let i;
+      this.itemType === "color" ? i = r("input", {
         type: "color",
         className: "cp-input-color",
         value: t
-      }) : this.itemType === "number" ? s = r("input", {
+      }) : this.itemType === "number" ? i = r("input", {
         type: "number",
         className: "cp-input-number cp-input-small",
         step: "any",
         value: t
-      }) : s = r("input", {
+      }) : i = r("input", {
         type: "text",
         className: "cp-input-number cp-input-small",
         value: t
-      }), s.addEventListener("input", (o) => {
+      }), i.addEventListener("input", (o) => {
         this.items[e] = o.target.value, this.updateValue();
       });
-      const a = B(() => {
+      const a = D(() => {
         this.items.splice(e, 1), this.renderItems(), this.updateValue();
       });
-      i.appendChild(s), i.appendChild(a), this.itemsContainer.appendChild(i);
+      s.appendChild(i), s.appendChild(a), this.itemsContainer.appendChild(s);
     });
   }
   updateDisplay() {
@@ -768,16 +1240,16 @@ class X extends m {
     this.items = this.parseValue(t), this.renderItems(), this.updateValue();
   }
 }
-class Y {
+class nt {
   constructor() {
     this.frames = 0, this.pollingInterval = 1e3, this.prevTime = performance.now(), this.render = () => {
       this.frames++;
       const t = performance.now();
       if (t >= this.prevTime + this.pollingInterval) {
         const e = Math.round(this.frames * 1e3 / (t - this.prevTime));
-        let i = "";
-        const s = performance.memory;
-        s && (i = ` / ${Math.round(s.usedJSHeapSize / 1048576)}MB`), this.domElement.textContent = `${e} FPS${i}`, this.prevTime = t, this.frames = 0;
+        let s = "";
+        const i = performance.memory;
+        i && (s = ` / ${Math.round(i.usedJSHeapSize / 1048576)}MB`), this.domElement.textContent = `${e} FPS${s}`, this.prevTime = t, this.frames = 0;
       }
       this.rafId = requestAnimationFrame(this.render);
     }, this.domElement = r("span", { className: "cp-stats" }), this.rafId = requestAnimationFrame(this.render);
@@ -786,44 +1258,44 @@ class Y {
     cancelAnimationFrame(this.rafId);
   }
 }
-class k {
+class q {
   constructor() {
     this.controllers = [], this.folders = [];
   }
-  addNumber(t, e, i = {}) {
-    const s = new H(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addNumber(t, e, s = {}) {
+    const i = new G(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addSelect(t, e, i = {}) {
-    const s = new U(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addSelect(t, e, s = {}) {
+    const i = new Z(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addBoolean(t, e, i = {}) {
-    const s = new W(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addBoolean(t, e, s = {}) {
+    const i = new Y(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addButton(t, e, i = {}) {
-    const s = new _(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addButton(t, e, s = {}) {
+    const i = new K(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addRadio(t, e, i = {}) {
-    const s = new J(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addRadio(t, e, s = {}) {
+    const i = new Q(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addColor(t, e, i = {}) {
-    const s = new G(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addColor(t, e, s = {}) {
+    const i = new X(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addGradient(t, e, i = {}) {
-    const s = new Q(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addGradient(t, e, s = {}) {
+    const i = new st(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
-  addArray(t, e, i = {}) {
-    const s = new X(t, e, i);
-    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  addArray(t, e, s = {}) {
+    const i = new it(t, e, s);
+    return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addFolder(t) {
-    const e = new tt(t);
+    const e = new at(t);
     return this.contentElement.appendChild(e.domElement), this.folders.push(e), e;
   }
   save() {
@@ -845,13 +1317,13 @@ class k {
     for (const e of this.controllers)
       if (typeof e.value != "function")
         if (t.controllers && e.key in t.controllers) {
-          const i = t.controllers[e.key];
-          i !== void 0 && e.load(i);
+          const s = t.controllers[e.key];
+          s !== void 0 && e.load(s);
         } else
           e.reset();
     for (const e of this.folders) {
-      const i = t.folders ? t.folders[e.title] : void 0;
-      e.load(i);
+      const s = t.folders ? t.folders[e.title] : void 0;
+      e.load(s);
     }
   }
   reset() {
@@ -861,7 +1333,7 @@ class k {
       t.reset();
   }
 }
-class tt extends k {
+class at extends q {
   constructor(t) {
     super(), this.title = t, this.domElement = r("details", {
       className: "cp-folder",
@@ -879,40 +1351,40 @@ class tt extends k {
     );
   }
 }
-class et extends k {
+class ot extends q {
   constructor(t, e = {}) {
-    super(), this.domElement = r("details", {
+    super(), R(), this.domElement = r("details", {
       className: "cp-root",
       open: !0
     }), this.summaryElement = r("summary", {
       className: "cp-summary cp-summary-root"
     }), this.domElement.appendChild(this.summaryElement);
-    const i = r("span", {}, [
+    const s = r("span", {}, [
       e.title || "ControlPanel"
     ]);
-    this.summaryElement.appendChild(i), this.stats = new Y(), this.summaryElement.appendChild(this.stats.domElement), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
-    const s = this.addFolder("_Signals"), a = {
+    this.summaryElement.appendChild(s), this.stats = new nt(), this.summaryElement.appendChild(this.stats.domElement), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
+    const i = this.addFolder("_Signals"), a = {
       audioInput: null,
       fftSize: 2048
     };
-    s.addRadio(a, "audioInput", {
+    i.addRadio(a, "audioInput", {
       label: "Audio Signal",
       options: ["microphone", "browser"]
     }).onChange((l) => {
-      x.setInput(l);
-    }), s.addSelect(a, "fftSize", {
+      C.setInput(l);
+    }), i.addSelect(a, "fftSize", {
       label: "FFT Size",
       options: [256, 512, 1024, 2048]
     }).onChange((l) => {
-      x.setFFTSize(l);
-    }), s.addNumber(x, "smoothingTimeConstant", {
+      C.setFFTSize(l);
+    }), i.addNumber(C, "smoothingTimeConstant", {
       min: 0,
       max: 0.99,
       step: 0.01,
       label: "Smoothing"
     }).onChange((l) => {
-      x.analyser.smoothingTimeConstant = l;
-    }), s.addNumber(x, "spectrumBoost", {
+      C.analyser.smoothingTimeConstant = l;
+    }), i.addNumber(C, "spectrumBoost", {
       min: 1,
       max: 5,
       step: 0.1,
@@ -920,127 +1392,127 @@ class et extends k {
     }), t ? t.appendChild(this.domElement) : document.body.appendChild(this.domElement);
     const o = e.title || "ControlPanel";
     this.presetStoragePrefix = `cp-presets-${o}-`;
-    const h = this.addFolder("_User Presets"), p = () => {
+    const c = this.addFolder("_User Presets"), p = () => {
       const l = ["Default"];
       if (typeof localStorage > "u") return l;
-      for (let d = 0; d < localStorage.length; d++) {
-        const f = localStorage.key(d);
-        if (f && f.startsWith(this.presetStoragePrefix)) {
-          const v = f.substring(this.presetStoragePrefix.length);
-          v !== "Default" && !l.includes(v) && l.push(v);
+      for (let f = 0; f < localStorage.length; f++) {
+        const g = localStorage.key(f);
+        if (g && g.startsWith(this.presetStoragePrefix)) {
+          const b = g.substring(this.presetStoragePrefix.length);
+          b !== "Default" && !l.includes(b) && l.push(b);
         }
       }
       return l.sort();
-    }, c = {
+    }, h = {
       selected: "Default",
       save: () => {
-        const l = prompt("Preset Name:", c.selected);
+        const l = prompt("Preset Name:", h.selected);
         if (l) {
           if (l === "Default") {
             alert("Cannot overwrite Default preset");
             return;
           }
-          const d = this.presetStoragePrefix + l;
-          this.saveToLocalStorage(d);
-          const f = p();
-          u.setOptions(f), c.selected = l, u.setValue(l);
+          const f = this.presetStoragePrefix + l;
+          this.saveToLocalStorage(f);
+          const g = p();
+          m.setOptions(g), h.selected = l, m.setValue(l);
         }
       },
       load: () => {
-        const l = c.selected, d = this.presetStoragePrefix + l;
-        this.loadFromLocalStorage(d), c.selected = l, u.setValue(l);
+        const l = h.selected, f = this.presetStoragePrefix + l;
+        this.loadFromLocalStorage(f), h.selected = l, m.setValue(l);
       },
       delete: () => {
-        if (c.selected === "Default") {
+        if (h.selected === "Default") {
           alert("Cannot delete Default preset");
           return;
         }
-        if (confirm(`Delete preset "${c.selected}"?`)) {
-          const l = this.presetStoragePrefix + c.selected;
+        if (confirm(`Delete preset "${h.selected}"?`)) {
+          const l = this.presetStoragePrefix + h.selected;
           localStorage.removeItem(l);
-          const d = p();
-          u.setOptions(d), c.selected = "Default", u.setValue("Default"), this.reset();
+          const f = p();
+          m.setOptions(f), h.selected = "Default", m.setValue("Default"), this.reset();
         }
       },
       export: () => {
-        const l = this.save(), d = (T) => {
+        const l = this.save(), f = (M) => {
           const N = {
             controllers: {},
             folders: {}
           };
-          for (const [E, L] of Object.entries(T.controllers))
-            E.startsWith("_") || (N.controllers[E] = L);
-          for (const [E, L] of Object.entries(
-            T.folders
+          for (const [E, k] of Object.entries(M.controllers))
+            E.startsWith("_") || (N.controllers[E] = k);
+          for (const [E, k] of Object.entries(
+            M.folders
           ))
-            E.startsWith("_") || (N.folders[E] = d(L));
+            E.startsWith("_") || (N.folders[E] = f(k));
           return N;
-        }, f = d(l), v = {
-          _presetName: c.selected || "CustomPreset",
+        }, g = f(l), b = {
+          _presetName: h.selected || "CustomPreset",
           _exportDate: (/* @__PURE__ */ new Date()).toISOString(),
           _instructions: "To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",
-          ...f
-        }, I = JSON.stringify(v, null, 2), S = new Blob([I], { type: "application/json" }), C = URL.createObjectURL(S), g = document.createElement("a");
-        g.href = C;
-        const b = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], V = c.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
-        g.download = `${o.toLowerCase()}-preset-${V}-${b}.json`, document.body.appendChild(g), g.click(), document.body.removeChild(g), URL.revokeObjectURL(C);
+          ...g
+        }, I = JSON.stringify(b, null, 2), v = new Blob([I], { type: "application/json" }), S = URL.createObjectURL(v), y = document.createElement("a");
+        y.href = S;
+        const x = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], A = h.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
+        y.download = `${o.toLowerCase()}-preset-${A}-${x}.json`, document.body.appendChild(y), y.click(), document.body.removeChild(y), URL.revokeObjectURL(S);
       },
       import: () => {
         const l = document.createElement("input");
-        l.type = "file", l.accept = ".json", l.onchange = (d) => {
-          const f = d.target.files?.[0];
-          if (!f) return;
-          const v = new FileReader();
-          v.onload = (I) => {
+        l.type = "file", l.accept = ".json", l.onchange = (f) => {
+          const g = f.target.files?.[0];
+          if (!g) return;
+          const b = new FileReader();
+          b.onload = (I) => {
             try {
-              const S = I.target?.result, C = JSON.parse(S), g = {
-                controllers: C.controllers || {},
-                folders: C.folders || {}
+              const v = I.target?.result, S = JSON.parse(v), y = {
+                controllers: S.controllers || {},
+                folders: S.folders || {}
               };
-              if (!g.controllers || !g.folders) {
+              if (!y.controllers || !y.folders) {
                 alert(
                   "Invalid preset file: missing 'controllers' or 'folders'"
                 );
                 return;
               }
-              this.load(g);
-              const b = C._presetName || "ImportedPreset";
+              this.load(y);
+              const x = S._presetName || "ImportedPreset";
               if (confirm(
-                `Preset loaded! Save as "${b}" to User Presets?`
+                `Preset loaded! Save as "${x}" to User Presets?`
               )) {
-                const T = this.presetStoragePrefix + b;
-                this.saveToLocalStorage(T);
+                const M = this.presetStoragePrefix + x;
+                this.saveToLocalStorage(M);
                 const N = p();
-                u.setOptions(N), c.selected = b, u.setValue(b);
+                m.setOptions(N), h.selected = x, m.setValue(x);
               }
-            } catch (S) {
+            } catch (v) {
               alert(
-                `Failed to import preset: ${S instanceof Error ? S.message : "Invalid JSON"}`
-              ), console.error("Import error:", S);
+                `Failed to import preset: ${v instanceof Error ? v.message : "Invalid JSON"}`
+              ), console.error("Import error:", v);
             }
-          }, v.readAsText(f);
+          }, b.readAsText(g);
         }, l.click();
       }
-    }, y = p(), u = h.addSelect(c, "selected", {
+    }, u = p(), m = c.addSelect(h, "selected", {
       label: "Preset",
-      options: y
+      options: u
     });
-    h.addButton("Load", () => c.load()), h.addButton("Save / New", () => c.save()), h.addButton("Delete", () => c.delete()), h.addButton("Export JSON", () => c.export()), h.addButton("Import JSON", () => c.import());
+    c.addButton("Load", () => h.load()), c.addButton("Save / New", () => h.save()), c.addButton("Delete", () => h.delete()), c.addButton("Export JSON", () => h.export()), c.addButton("Import JSON", () => h.import());
   }
   saveToLocalStorage(t) {
     const e = this.save();
     try {
       localStorage.setItem(t, JSON.stringify(e));
-    } catch (i) {
-      console.warn("ControlPanel: Failed to save to localStorage", i);
+    } catch (s) {
+      console.warn("ControlPanel: Failed to save to localStorage", s);
     }
   }
   loadFromLocalStorage(t) {
     try {
       const e = localStorage.getItem(t);
       if (e) {
-        const i = JSON.parse(e);
-        this.load(i);
+        const s = JSON.parse(e);
+        this.load(s);
       }
     } catch (e) {
       console.warn("ControlPanel: Failed to load from localStorage", e);
@@ -1055,20 +1527,22 @@ class et extends k {
   }
 }
 export {
-  X as ArrayController,
-  z as AudioSignals,
-  W as BooleanController,
-  _ as ButtonController,
-  G as ColorController,
-  et as ControlPanel,
-  k as ControlPanelContainer,
-  m as Controller,
-  tt as Folder,
-  Q as GradientController,
-  $ as MidiSignals,
-  H as NumberController,
-  J as RadioController,
-  U as SelectController,
-  x as audioSignals,
-  q as midiSignals
+  it as ArrayController,
+  U as AudioSignals,
+  Y as BooleanController,
+  K as ButtonController,
+  X as ColorController,
+  ot as ControlPanel,
+  q as ControlPanelContainer,
+  d as Controller,
+  at as Folder,
+  st as GradientController,
+  _ as MathSignals,
+  H as MidiSignals,
+  G as NumberController,
+  Q as RadioController,
+  Z as SelectController,
+  C as audioSignals,
+  J as mathSignals,
+  W as midiSignals
 };