@digitalmeadow/control-panel 1.0.11 → 1.0.12

package/dist/index.js

@@ -1,15 +1,33 @@
 const W = `
 .cp-root {
+  --cp-scale: 1;
+  
+  /* Computed spacing values */
+  --cp-space-1: calc(1px * var(--cp-scale));
+  --cp-space-2: calc(2px * var(--cp-scale));
+  --cp-space-4: calc(4px * var(--cp-scale));
+  --cp-space-6: calc(6px * var(--cp-scale));
+  --cp-space-8: calc(8px * var(--cp-scale));
+  
+  /* Computed font sizes */
+  --cp-font-size-main: calc(10px * var(--cp-scale));
+  --cp-font-size-details: calc(1.0em * var(--cp-scale));
+  
+  /* Computed sizes */
+  --cp-swatch-size: calc(14px * var(--cp-scale));
+  --cp-controller-min-height: calc(18px * var(--cp-scale));
+  --cp-button-delete-width: calc(18px * var(--cp-scale));
+  --cp-icon-size: calc(8px * var(--cp-scale));
+  --cp-icon-position: calc(4px * var(--cp-scale));
+  --cp-select-arrow-space: calc(14px * var(--cp-scale));
+  
   --cp-color-1: rgba(255, 255, 255, 0.15);
   --cp-color-2: rgba(255, 255, 255, 0.25);
   --cp-color-3: rgba(255, 255, 255, 0.35);
   --cp-color-4: rgba(255, 255, 255, 0.45);
   --cp-border-radius: 0px;
-  --cp-swatch-size: 14px;
-  --cp-font-size-main: 10px;
-  --cp-font-size-details: 1.0em;
   --cp-font-weight-bold: 600;
-  --cp-padding-v: 4px;
+  --cp-padding-v: calc(4px * var(--cp-scale));
   
   position: absolute;
   top: 0;
@@ -20,14 +38,14 @@ const W = `
   background: transparent;
   resize: both;
   color: #fff;
-  min-width: 200px;
-  min-height: 50px;
+  min-width: calc(200px * var(--cp-scale));
+  min-height: calc(50px * var(--cp-scale));
   font-family:
     var(--cp-font-family), monospace,
     sans-serif;
   font-size: var(--cp-font-size-main);
   line-height: 1;
-  padding: 8px;
+  padding: var(--cp-space-8);
 }
 
 /* Apply blend mode to all children except color inputs */
@@ -58,8 +76,8 @@ const W = `
 }
 
 .cp-root::-webkit-scrollbar {
-  width: 1px;
-  height: 1px;
+  width: var(--cp-space-1);
+  height: var(--cp-space-1);
 }
 .cp-root::-webkit-scrollbar-track {
   background: transparent;
@@ -89,10 +107,10 @@ const W = `
 }
 
 .cp-content {
-  margin-top: 4px;
+  margin-top: var(--cp-space-4);
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-folder {
@@ -100,12 +118,12 @@ const W = `
 }
 
 .cp-folder-content {
-  margin: 0 0 6px 0;
-  padding: 4px 0 0 0px;
+  margin: 0 0 calc(6px * var(--cp-scale)) 0;
+  padding: var(--cp-space-4) 0 0 0;
 }
 
 .cp-controller {
-  min-height: 18px;
+  min-height: var(--cp-controller-min-height);
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: center;
@@ -118,7 +136,7 @@ const W = `
   text-overflow: ellipsis;
   white-space: nowrap;
   user-select: none;
-  padding-right: 8px;
+  padding-right: var(--cp-space-8);
   opacity: 0.8;
 }
 
@@ -126,14 +144,13 @@ const W = `
   background: transparent;
   border: 1px solid var(--cp-color-2);
   color: inherit;
-  padding: 2px 4px;
+  padding: var(--cp-space-2) var(--cp-space-4);
   border-radius: var(--cp-border-radius);
   font-family: inherit;
   font-size: inherit;
   height: 100%;
   box-sizing: border-box;
 }
-}
 
 .cp-input-number:focus {
   outline: none;
@@ -145,8 +162,8 @@ const W = `
   color: inherit;
   background: var(--cp-color-1);
   border: none;
-  padding: var(--cp-padding-v) 4px;
-  padding-right: 18px;
+  padding: var(--cp-padding-v) var(--cp-space-4);
+  padding-right: calc(var(--cp-space-4) + var(--cp-select-arrow-space));
   border-radius: var(--cp-border-radius);
   font-size: inherit;
   line-height: inherit;
@@ -157,32 +174,33 @@ const W = `
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M1 2h6l-3 4z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: right 4px center;
+  background-position: right var(--cp-icon-position) center;
+  background-size: var(--cp-icon-size) var(--cp-icon-size);
 }
 
 .cp-checkbox {
   margin: auto 0;
-  width: 14px;
-  height: 14px;
+  width: var(--cp-controller-min-height);
+  height: var(--cp-controller-min-height);
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  border: none !important;
+  border: 1px solid var(--cp-color-1);
   border-radius: var(--cp-border-radius);
-  background: var(--cp-color-1) !important;
+  background: transparent;
   cursor: pointer;
   padding: 0;
   outline: none;
   font-size: 0;
   line-height: 0;
   color: transparent;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
 }
 
 .cp-checkbox:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
-  background-repeat: no-repeat !important;
-  background-position: center !important;
-  background-size: 8px 8px !important;
+  background: var(--cp-color-1);
 }
 
 .cp-button {
@@ -190,7 +208,7 @@ const W = `
   color: inherit;
   background: var(--cp-color-1);
   border: none;
-  padding: var(--cp-padding-v) 2px;
+  padding: var(--cp-padding-v) var(--cp-space-2);
   border-radius: var(--cp-border-radius);
   cursor: pointer;
   text-align: center;
@@ -205,7 +223,7 @@ const W = `
 
 .cp-button:active {
   background: var(--cp-color-3);
-  transform: translateY(1px);
+  transform: translateY(var(--cp-space-1));
 }
 
 .cp-controller[data-disabled="true"] {
@@ -224,9 +242,9 @@ const W = `
 .cp-controller-summary-content {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  width: calc(100% - 10px);
-  min-height: 18px;
+  gap: var(--cp-space-4);
+  width: calc(100% - var(--cp-button-delete-width));
+  min-height: var(--cp-controller-min-height);
   vertical-align: middle;
 }
 
@@ -234,7 +252,7 @@ const W = `
   -webkit-appearance: none;
   flex: 1;
   min-width: 0;
-  height: 2px;
+  height: calc(2px * var(--cp-scale));
   background: var(--cp-color-1);
   margin: 0;
   vertical-align: middle;
@@ -242,15 +260,15 @@ const W = `
 }
 .cp-input-range::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 4px;
-  height: 8px;
-  border-radius: 1px;
+  width: calc(4px * var(--cp-scale));
+  height: calc(8px * var(--cp-scale));
+  border-radius: var(--cp-border-radius);
   background: #fff;
   cursor: grab;
 }
 .cp-input-range::-moz-range-thumb {
-  width: 4px;
-  height: 16px;
+  width: calc(4px * var(--cp-scale));
+  height: calc(16px * var(--cp-scale));
   background: #fff;
   cursor: grab;
 }
@@ -260,7 +278,7 @@ const W = `
 }
 
 .cp-value-display {
-  min-width: 24px;
+  min-width: calc(24px * var(--cp-scale));
   text-align: right;
   font-variant-numeric: tabular-nums;
   font-size: var(--cp-font-size-details);
@@ -269,17 +287,17 @@ const W = `
 }
 
 .cp-number-settings {
-  margin-top: 4px;
+  margin-top: var(--cp-space-4);
   background: transparent;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--cp-space-4);
 }
 
 .cp-separator {
   border: none;
   border-top: 1px solid var(--cp-color-1);
-  margin: 4px 0;
+  margin: var(--cp-space-4) 0;
   width: 100%;
 }
 
@@ -287,28 +305,28 @@ const W = `
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: center;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-array-row {
   display: grid;
   grid-template-columns: auto 1fr; 
   align-items: stretch;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-gradient-stop {
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: stretch;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-gradient-stop-row {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-setting-label {
@@ -321,13 +339,13 @@ const W = `
 
 .cp-radios {
   display: flex;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-radio {
   flex: 1;
   font-size: var(--cp-font-size-details);
-  padding: var(--cp-padding-v) 2px;
+  padding: var(--cp-padding-v) var(--cp-space-2);
 }
 
 .cp-radio[data-active="true"] {
@@ -339,7 +357,7 @@ const W = `
 .cp-button-delete {
   grid-column: auto;
   width: 100%;
-  min-width: 18px;
+  min-width: var(--cp-button-delete-width);
   padding: 0;
   display: flex;
   align-items: center;
@@ -363,41 +381,16 @@ const W = `
   border-radius: var(--cp-border-radius);
 }
 
-.cp-checkbox {
-  margin: auto 0;
-  width: 14px;
-  height: 14px;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: 1px solid var(--cp-color-1);
-  border-radius: var(--cp-border-radius);
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  outline: none;
-  font-size: 0;
-  line-height: 0;
-  color: transparent;
-  vertical-align: middle;
-  display: inline-block;
-  box-sizing: border-box;
-}
-
-.cp-checkbox:checked {
-  background: var(--cp-color-1);
-}
-
 .cp-color-swatch {
   width: var(--cp-swatch-size);
   height: var(--cp-swatch-size);
-  margin-right: 8px;
+  margin-right: var(--cp-space-8);
 }
 
 .cp-stops-container {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 `;
 let B = !1;
@@ -485,8 +478,8 @@ class X {
     if (this.analyser.getByteFrequencyData(this.dataArray), this.analyser.getByteTimeDomainData(this.waveformArray), this.spectrumBoost !== 1) {
       const p = this.dataArray.length;
       for (let h = 0; h < p; h++) {
-        const v = 1 + h / p * (this.spectrumBoost - 1);
-        this.dataArray[h] = Math.min(255, this.dataArray[h] * v);
+        const y = 1 + h / p * (this.spectrumBoost - 1);
+        this.dataArray[h] = Math.min(255, this.dataArray[h] * y);
       }
     }
     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]), l = this.getAverage(0, s[1]);
@@ -511,7 +504,7 @@ class X {
     return () => this.levels[t];
   }
 }
-const T = new X();
+const M = new X();
 class G {
   constructor() {
     this.midiAccess = null, this.values = /* @__PURE__ */ new Map(), this.isListening = !1, this.resolveListen = null, this.listeningCallback = null, this.init();
@@ -687,7 +680,7 @@ const Q = new K(), A = class A {
     this.domElement.appendChild(t);
   }
 };
-A.audio = T, A.midi = Z, A.math = Q;
+A.audio = M, A.midi = Z, A.math = Q;
 let u = A;
 class tt extends u {
   constructor(t, e, s = {}) {
@@ -867,7 +860,7 @@ class H {
         0,
         1,
         0.01,
-        (v) => u.math.setConfig(t, { phase: v })
+        (y) => u.math.setConfig(t, { phase: y })
       );
       this.mathParamsContainer.appendChild(d.row);
     }
@@ -964,8 +957,8 @@ class et extends u {
       (f) => this.setStep(f)
     );
     this.stepInput = d.input, l.appendChild(d.row);
-    const v = r("hr", { className: "cp-separator" });
-    l.appendChild(v), this.signalHandler = new H({
+    const y = r("hr", { className: "cp-separator" });
+    l.appendChild(y), this.signalHandler = new H({
       container: l,
       onChange: (f, b) => this.applySignal(f, b)
     }), i.appendChild(l), this.appendWidget(i);
@@ -1148,7 +1141,7 @@ function $(n) {
 function rt(n, t, e) {
   return "#" + ((1 << 24) + (Math.round(n) << 16) + (Math.round(t) << 8) + Math.round(e)).toString(16).slice(1);
 }
-function k(n) {
+function T(n) {
   const t = n / 255;
   return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
 }
@@ -1156,8 +1149,8 @@ function F(n) {
   return n <= 31308e-7 ? n * 12.92 * 255 : (1.055 * Math.pow(n, 1 / 2.4) - 0.055) * 255;
 }
 function lt(n, t, e) {
-  const [s, i, a] = $(n), [o, l, p] = $(t), h = k(s), d = k(i), v = k(a), f = k(o), b = k(l), E = k(p), g = h + e * (f - h), V = d + e * (b - d), w = v + e * (E - v), c = F(g), m = F(V), y = F(w);
-  return rt(c, m, y);
+  const [s, i, a] = $(n), [o, l, p] = $(t), h = T(s), d = T(i), y = T(a), f = T(o), b = T(l), E = T(p), g = h + e * (f - h), V = d + e * (b - d), S = y + e * (E - y), c = F(g), m = F(V), v = F(S);
+  return rt(c, m, v);
 }
 class ct extends u {
   constructor(t, e, s = {}) {
@@ -1194,7 +1187,7 @@ class ct extends u {
     const h = r("hr", { className: "cp-separator" });
     l.appendChild(h), this.signalHandler = new H({
       container: l,
-      onChange: (d, v) => this.applySignal(d, v)
+      onChange: (d, y) => this.applySignal(d, y)
     }), i.appendChild(l), this.appendWidget(i), this.updateOutput(0);
   }
   sortStops() {
@@ -1517,35 +1510,35 @@ class ut extends U {
       l = m.left, p = m.top, c.preventDefault();
     }), document.addEventListener("mousemove", (c) => {
       if (!i) return;
-      const m = c.clientX - a, y = c.clientY - o, x = l + m, M = p + y;
-      this.domElement.style.left = `${x}px`, this.domElement.style.top = `${M}px`, this.domElement.style.right = "auto", this.domElement.style.bottom = "auto";
+      const m = c.clientX - a, v = c.clientY - o, w = l + m, k = p + v;
+      this.domElement.style.left = `${w}px`, this.domElement.style.top = `${k}px`, this.domElement.style.right = "auto", this.domElement.style.bottom = "auto";
     }), document.addEventListener("mouseup", () => {
       i && (i = !1, this.savePositionAndSize());
     }), new ResizeObserver(() => {
       i || this.savePositionAndSize();
     }).observe(this.domElement), this.restorePositionAndSize(), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
-    const d = this.addFolder("_Signals"), v = {
+    const d = this.addFolder("_Signals"), y = {
       audioInput: null,
       fftSize: 2048
     };
-    d.addRadio(v, "audioInput", {
+    d.addRadio(y, "audioInput", {
       label: "Audio Signal",
       options: ["microphone", "browser"]
     }).onChange((c) => {
-      T.setInput(c);
-    }), d.addSelect(v, "fftSize", {
+      M.setInput(c);
+    }), d.addSelect(y, "fftSize", {
       label: "FFT Size",
       options: [256, 512, 1024, 2048]
     }).onChange((c) => {
-      T.setFFTSize(c);
-    }), d.addRange(T, "smoothingTimeConstant", {
+      M.setFFTSize(c);
+    }), d.addRange(M, "smoothingTimeConstant", {
       min: 0,
       max: 0.99,
       step: 0.01,
       label: "Smoothing"
     }).onChange((c) => {
-      T.analyser.smoothingTimeConstant = c;
-    }), d.addRange(T, "spectrumBoost", {
+      M.analyser.smoothingTimeConstant = c;
+    }), d.addRange(M, "spectrumBoost", {
       min: 1,
       max: 5,
       step: 0.1,
@@ -1557,10 +1550,10 @@ class ut extends U {
       const c = ["Default"];
       if (typeof localStorage > "u") return c;
       for (let m = 0; m < localStorage.length; m++) {
-        const y = localStorage.key(m);
-        if (y && y.startsWith(this.presetStoragePrefix)) {
-          const x = y.substring(this.presetStoragePrefix.length);
-          x !== "Default" && !c.includes(x) && c.push(x);
+        const v = localStorage.key(m);
+        if (v && v.startsWith(this.presetStoragePrefix)) {
+          const w = v.substring(this.presetStoragePrefix.length);
+          w !== "Default" && !c.includes(w) && c.push(w);
         }
       }
       return c.sort();
@@ -1575,13 +1568,13 @@ class ut extends U {
           }
           const m = this.presetStoragePrefix + c;
           this.saveToLocalStorage(m);
-          const y = E();
-          w.setOptions(y), g.selected = c, w.setValue(c);
+          const v = E();
+          S.setOptions(v), g.selected = c, S.setValue(c);
         }
       },
       load: () => {
         const c = g.selected, m = this.presetStoragePrefix + c;
-        this.loadFromLocalStorage(m), g.selected = c, w.setValue(c);
+        this.loadFromLocalStorage(m), g.selected = c, S.setValue(c);
       },
       delete: () => {
         if (g.selected === "Default") {
@@ -1592,7 +1585,7 @@ class ut extends U {
           const c = this.presetStoragePrefix + g.selected;
           localStorage.removeItem(c);
           const m = E();
-          w.setOptions(m), g.selected = "Default", w.setValue("Default"), this.reset();
+          S.setOptions(m), g.selected = "Default", S.setValue("Default"), this.reset();
         }
       },
       export: () => {
@@ -1608,35 +1601,35 @@ class ut extends U {
           ))
             z.startsWith("_") || (L.folders[z] = m(O));
           return L;
-        }, y = m(c), x = {
+        }, v = m(c), w = {
           _presetName: g.selected || "CustomPreset",
           _exportDate: (/* @__PURE__ */ new Date()).toISOString(),
           _instructions: "To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",
-          ...y
-        }, M = JSON.stringify(x, null, 2), C = new Blob([M], { type: "application/json" }), I = URL.createObjectURL(C), S = document.createElement("a");
-        S.href = I;
+          ...v
+        }, k = JSON.stringify(w, null, 2), C = new Blob([k], { type: "application/json" }), I = URL.createObjectURL(C), x = document.createElement("a");
+        x.href = I;
         const N = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], D = g.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
-        S.download = `${f.toLowerCase()}-preset-${D}-${N}.json`, document.body.appendChild(S), S.click(), document.body.removeChild(S), URL.revokeObjectURL(I);
+        x.download = `${f.toLowerCase()}-preset-${D}-${N}.json`, document.body.appendChild(x), x.click(), document.body.removeChild(x), URL.revokeObjectURL(I);
       },
       import: () => {
         const c = document.createElement("input");
         c.type = "file", c.accept = ".json", c.onchange = (m) => {
-          const y = m.target.files?.[0];
-          if (!y) return;
-          const x = new FileReader();
-          x.onload = (M) => {
+          const v = m.target.files?.[0];
+          if (!v) return;
+          const w = new FileReader();
+          w.onload = (k) => {
             try {
-              const C = M.target?.result, I = JSON.parse(C), S = {
+              const C = k.target?.result, I = JSON.parse(C), x = {
                 controllers: I.controllers || {},
                 folders: I.folders || {}
               };
-              if (!S.controllers || !S.folders) {
+              if (!x.controllers || !x.folders) {
                 alert(
                   "Invalid preset file: missing 'controllers' or 'folders'"
                 );
                 return;
               }
-              this.load(S);
+              this.load(x);
               const N = I._presetName || "ImportedPreset";
               if (confirm(
                 `Preset loaded! Save as "${N}" to User Presets?`
@@ -1644,17 +1637,17 @@ class ut extends U {
                 const P = this.presetStoragePrefix + N;
                 this.saveToLocalStorage(P);
                 const L = E();
-                w.setOptions(L), g.selected = N, w.setValue(N);
+                S.setOptions(L), g.selected = N, S.setValue(N);
               }
             } catch (C) {
               alert(
                 `Failed to import preset: ${C instanceof Error ? C.message : "Invalid JSON"}`
               ), console.error("Import error:", C);
             }
-          }, x.readAsText(y);
+          }, w.readAsText(v);
         }, c.click();
       }
-    }, V = E(), w = b.addSelect(g, "selected", {
+    }, V = E(), S = b.addSelect(g, "selected", {
       label: "Preset",
       options: V
     });
@@ -1729,7 +1722,7 @@ export {
   at as RadioController,
   et as RangeController,
   st as SelectController,
-  T as audioSignals,
+  M as audioSignals,
   Q as mathSignals,
   Z as midiSignals
 };

package/dist/index.umd.cjs

@@ -1,15 +1,33 @@
 (function(h,L){typeof exports=="object"&&typeof module<"u"?L(exports):typeof define=="function"&&define.amd?define(["exports"],L):(h=typeof globalThis<"u"?globalThis:h||self,L(h.ControlPanel={}))})(this,(function(h){"use strict";const L=`
 .cp-root {
+  --cp-scale: 1;
+  
+  /* Computed spacing values */
+  --cp-space-1: calc(1px * var(--cp-scale));
+  --cp-space-2: calc(2px * var(--cp-scale));
+  --cp-space-4: calc(4px * var(--cp-scale));
+  --cp-space-6: calc(6px * var(--cp-scale));
+  --cp-space-8: calc(8px * var(--cp-scale));
+  
+  /* Computed font sizes */
+  --cp-font-size-main: calc(10px * var(--cp-scale));
+  --cp-font-size-details: calc(1.0em * var(--cp-scale));
+  
+  /* Computed sizes */
+  --cp-swatch-size: calc(14px * var(--cp-scale));
+  --cp-controller-min-height: calc(18px * var(--cp-scale));
+  --cp-button-delete-width: calc(18px * var(--cp-scale));
+  --cp-icon-size: calc(8px * var(--cp-scale));
+  --cp-icon-position: calc(4px * var(--cp-scale));
+  --cp-select-arrow-space: calc(14px * var(--cp-scale));
+  
   --cp-color-1: rgba(255, 255, 255, 0.15);
   --cp-color-2: rgba(255, 255, 255, 0.25);
   --cp-color-3: rgba(255, 255, 255, 0.35);
   --cp-color-4: rgba(255, 255, 255, 0.45);
   --cp-border-radius: 0px;
-  --cp-swatch-size: 14px;
-  --cp-font-size-main: 10px;
-  --cp-font-size-details: 1.0em;
   --cp-font-weight-bold: 600;
-  --cp-padding-v: 4px;
+  --cp-padding-v: calc(4px * var(--cp-scale));
   
   position: absolute;
   top: 0;
@@ -20,14 +38,14 @@
   background: transparent;
   resize: both;
   color: #fff;
-  min-width: 200px;
-  min-height: 50px;
+  min-width: calc(200px * var(--cp-scale));
+  min-height: calc(50px * var(--cp-scale));
   font-family:
     var(--cp-font-family), monospace,
     sans-serif;
   font-size: var(--cp-font-size-main);
   line-height: 1;
-  padding: 8px;
+  padding: var(--cp-space-8);
 }
 
 /* Apply blend mode to all children except color inputs */
@@ -58,8 +76,8 @@
 }
 
 .cp-root::-webkit-scrollbar {
-  width: 1px;
-  height: 1px;
+  width: var(--cp-space-1);
+  height: var(--cp-space-1);
 }
 .cp-root::-webkit-scrollbar-track {
   background: transparent;
@@ -89,10 +107,10 @@
 }
 
 .cp-content {
-  margin-top: 4px;
+  margin-top: var(--cp-space-4);
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-folder {
@@ -100,12 +118,12 @@
 }
 
 .cp-folder-content {
-  margin: 0 0 6px 0;
-  padding: 4px 0 0 0px;
+  margin: 0 0 calc(6px * var(--cp-scale)) 0;
+  padding: var(--cp-space-4) 0 0 0;
 }
 
 .cp-controller {
-  min-height: 18px;
+  min-height: var(--cp-controller-min-height);
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: center;
@@ -118,7 +136,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   user-select: none;
-  padding-right: 8px;
+  padding-right: var(--cp-space-8);
   opacity: 0.8;
 }
 
@@ -126,14 +144,13 @@
   background: transparent;
   border: 1px solid var(--cp-color-2);
   color: inherit;
-  padding: 2px 4px;
+  padding: var(--cp-space-2) var(--cp-space-4);
   border-radius: var(--cp-border-radius);
   font-family: inherit;
   font-size: inherit;
   height: 100%;
   box-sizing: border-box;
 }
-}
 
 .cp-input-number:focus {
   outline: none;
@@ -145,8 +162,8 @@
   color: inherit;
   background: var(--cp-color-1);
   border: none;
-  padding: var(--cp-padding-v) 4px;
-  padding-right: 18px;
+  padding: var(--cp-padding-v) var(--cp-space-4);
+  padding-right: calc(var(--cp-space-4) + var(--cp-select-arrow-space));
   border-radius: var(--cp-border-radius);
   font-size: inherit;
   line-height: inherit;
@@ -157,32 +174,33 @@
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M1 2h6l-3 4z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: right 4px center;
+  background-position: right var(--cp-icon-position) center;
+  background-size: var(--cp-icon-size) var(--cp-icon-size);
 }
 
 .cp-checkbox {
   margin: auto 0;
-  width: 14px;
-  height: 14px;
+  width: var(--cp-controller-min-height);
+  height: var(--cp-controller-min-height);
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  border: none !important;
+  border: 1px solid var(--cp-color-1);
   border-radius: var(--cp-border-radius);
-  background: var(--cp-color-1) !important;
+  background: transparent;
   cursor: pointer;
   padding: 0;
   outline: none;
   font-size: 0;
   line-height: 0;
   color: transparent;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
 }
 
 .cp-checkbox:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
-  background-repeat: no-repeat !important;
-  background-position: center !important;
-  background-size: 8px 8px !important;
+  background: var(--cp-color-1);
 }
 
 .cp-button {
@@ -190,7 +208,7 @@
   color: inherit;
   background: var(--cp-color-1);
   border: none;
-  padding: var(--cp-padding-v) 2px;
+  padding: var(--cp-padding-v) var(--cp-space-2);
   border-radius: var(--cp-border-radius);
   cursor: pointer;
   text-align: center;
@@ -205,7 +223,7 @@
 
 .cp-button:active {
   background: var(--cp-color-3);
-  transform: translateY(1px);
+  transform: translateY(var(--cp-space-1));
 }
 
 .cp-controller[data-disabled="true"] {
@@ -224,9 +242,9 @@
 .cp-controller-summary-content {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  width: calc(100% - 10px);
-  min-height: 18px;
+  gap: var(--cp-space-4);
+  width: calc(100% - var(--cp-button-delete-width));
+  min-height: var(--cp-controller-min-height);
   vertical-align: middle;
 }
 
@@ -234,7 +252,7 @@
   -webkit-appearance: none;
   flex: 1;
   min-width: 0;
-  height: 2px;
+  height: calc(2px * var(--cp-scale));
   background: var(--cp-color-1);
   margin: 0;
   vertical-align: middle;
@@ -242,15 +260,15 @@
 }
 .cp-input-range::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 4px;
-  height: 8px;
-  border-radius: 1px;
+  width: calc(4px * var(--cp-scale));
+  height: calc(8px * var(--cp-scale));
+  border-radius: var(--cp-border-radius);
   background: #fff;
   cursor: grab;
 }
 .cp-input-range::-moz-range-thumb {
-  width: 4px;
-  height: 16px;
+  width: calc(4px * var(--cp-scale));
+  height: calc(16px * var(--cp-scale));
   background: #fff;
   cursor: grab;
 }
@@ -260,7 +278,7 @@
 }
 
 .cp-value-display {
-  min-width: 24px;
+  min-width: calc(24px * var(--cp-scale));
   text-align: right;
   font-variant-numeric: tabular-nums;
   font-size: var(--cp-font-size-details);
@@ -269,17 +287,17 @@
 }
 
 .cp-number-settings {
-  margin-top: 4px;
+  margin-top: var(--cp-space-4);
   background: transparent;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--cp-space-4);
 }
 
 .cp-separator {
   border: none;
   border-top: 1px solid var(--cp-color-1);
-  margin: 4px 0;
+  margin: var(--cp-space-4) 0;
   width: 100%;
 }
 
@@ -287,28 +305,28 @@
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: center;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-array-row {
   display: grid;
   grid-template-columns: auto 1fr; 
   align-items: stretch;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-gradient-stop {
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: stretch;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-gradient-stop-row {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-setting-label {
@@ -321,13 +339,13 @@
 
 .cp-radios {
   display: flex;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
 
 .cp-radio {
   flex: 1;
   font-size: var(--cp-font-size-details);
-  padding: var(--cp-padding-v) 2px;
+  padding: var(--cp-padding-v) var(--cp-space-2);
 }
 
 .cp-radio[data-active="true"] {
@@ -339,7 +357,7 @@
 .cp-button-delete {
   grid-column: auto;
   width: 100%;
-  min-width: 18px;
+  min-width: var(--cp-button-delete-width);
   padding: 0;
   display: flex;
   align-items: center;
@@ -363,40 +381,15 @@
   border-radius: var(--cp-border-radius);
 }
 
-.cp-checkbox {
-  margin: auto 0;
-  width: 14px;
-  height: 14px;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: 1px solid var(--cp-color-1);
-  border-radius: var(--cp-border-radius);
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  outline: none;
-  font-size: 0;
-  line-height: 0;
-  color: transparent;
-  vertical-align: middle;
-  display: inline-block;
-  box-sizing: border-box;
-}
-
-.cp-checkbox:checked {
-  background: var(--cp-color-1);
-}
-
 .cp-color-swatch {
   width: var(--cp-swatch-size);
   height: var(--cp-swatch-size);
-  margin-right: 8px;
+  margin-right: var(--cp-space-8);
 }
 
 .cp-stops-container {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--cp-space-2);
 }
-`;let R=!1;function lt(){if(R)return;const n=document.createElement("style");n.id="control-panel-styles",n.textContent=L,document.head.appendChild(n),R=!0}function o(n,t={},e=[]){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 j(n){const t=o("button",{className:"cp-button cp-button-delete"},["×"]);return t.addEventListener("click",n),t}function ct(n){return n.replace(/([A-Z])/g," $1").replace(/^./,t=>t.toUpperCase()).trim()}function $(n,t,e){return Math.min(Math.max(n,t),e)}function pt(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 s=0;for(;s<t.length-1&&n>t[s+1];)s++;if(s===t.length-1)return e[e.length-1];if(s===0&&n<t[0])return e[0];const i=t[s],a=t[s+1],r=e[s],l=e[s+1];return(n-i)/(a-i)*(l-r)+r}class H{constructor(){this.source=null,this.stream=null,this.fftSize=2048,this.smoothingTimeConstant=.82,this.spectrumBoost=3,this.levels={volume:0,bass:0,mids:0,highs:0},this.peaks={volume:0,bass:0,mids:0,highs:0},this._isAnalyzing=!1,this.loop=()=>{this._isAnalyzing&&(requestAnimationFrame(this.loop),this.update())};const t=window.AudioContext||window.webkitAudioContext;this.ctx=new t,this.analyser=this.ctx.createAnalyser(),this.analyser.fftSize=this.fftSize,this.analyser.smoothingTimeConstant=this.smoothingTimeConstant,this.dataArray=new Uint8Array(this.analyser.frequencyBinCount),this.waveformArray=new Uint8Array(this.analyser.frequencyBinCount)}setFFTSize(t){this.fftSize=t,this.analyser.fftSize=t,this.dataArray=new Uint8Array(this.analyser.frequencyBinCount),this.waveformArray=new Uint8Array(this.analyser.frequencyBinCount)}async setInput(t){try{let e;t==="browser"?e=navigator.mediaDevices.getDisplayMedia({audio:!0,video:!0}):e=navigator.mediaDevices.getUserMedia({audio:!0});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}}update(){if(this.analyser.getByteFrequencyData(this.dataArray),this.analyser.getByteTimeDomainData(this.waveformArray),this.spectrumBoost!==1){const p=this.dataArray.length;for(let u=0;u<p;u++){const b=1+u/p*(this.spectrumBoost-1);this.dataArray[u]=Math.min(255,this.dataArray[u]*b)}}const t=[2,10],e=[10,150],s=[150,600],i=this.getAverage(t[0],t[1]),a=this.getAverage(e[0],e[1]),r=this.getAverage(s[0],s[1]),l=this.getAverage(0,s[1]);this.processLevel("bass",i),this.processLevel("mids",a),this.processLevel("highs",r),this.processLevel("volume",l)}processLevel(t,e){this.peaks[t]-=5e-4,this.peaks[t]=$(this.peaks[t],.1,1),e>this.peaks[t]&&(this.peaks[t]=e),this.levels[t]=$(pt(e,[0,this.peaks[t]],[0,1]),0,1)}getAverage(t,e){let s=0;const i=e-t;if(i<=0)return 0;for(let a=t;a<e;a++)s+=this.dataArray[a];return s/i/255}getSignal(t){return()=>this.levels[t]}}const E=new H;class U{constructor(){this.midiAccess=null,this.values=new Map,this.isListening=!1,this.resolveListen=null,this.listeningCallback=null,this.init()}async init(){if(typeof navigator<"u"&&navigator.requestMIDIAccess)try{this.midiAccess=await navigator.requestMIDIAccess(),this.setupInputs(),this.midiAccess.onstatechange=t=>{t.port.type==="input"&&t.port.state==="connected"&&this.setupInputs()}}catch(t){console.warn("MIDI Access failed",t)}}setupInputs(){if(!this.midiAccess)return;const t=this.midiAccess.inputs.values();for(const e of t)e.onmidimessage=this.handleMessage.bind(this)}handleMessage(t){const e=t.data,[s]=e;if((s&240)>=240)return;const a=this.getIdFromMessage(t),r=this.normalizeValue(e);this.values.set(a,r),this.isListening&&this.resolveListen&&r>0&&(this.resolveListen(a),this.isListening=!1,this.resolveListen=null,this.listeningCallback&&this.listeningCallback())}getIdFromMessage(t){const e=t.data,[s,i]=e,a=s&240,r=t.currentTarget.name||"unknown",l=a===144||a===128?"note":"ctrl",p=r.replace(/[^a-zA-Z0-9]/g,"");return`${i}_${l}_${p}`}normalizeValue(t){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=>{this.resolveListen=t})}cancelListen(){this.isListening=!1,this.resolveListen=null}getSignal(t){return()=>this.values.get(t)??0}}const W=new U;class _{constructor(){this.configs=new Map,this.lastRandomUpdateTime=0,this.currentRandomValue=0,this.startTime=performance.now(),this.configs.set("constant",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("sine",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("sawtooth",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("triangle",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("square",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("random",{frequency:10,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,r=(Math.sin(s*e.frequency*Math.PI*2+i)+1)/2;return this.normalizeOutput(r,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,r=a<.5?a*2:2-a*2;return this.normalizeOutput(r,e)}square(t){const e=t?{...this.configs.get("square"),...t}:this.configs.get("square"),s=this.getTime(),i=e.phase,r=(s*e.frequency+i)%1<.5?0:1;return this.normalizeOutput(r,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 _,A=class A{constructor(t,e,s={}){this.changeFns=new Set,this.object=t,this.property=e,this.key=s.id??e,this.initialValue=this.object[this.property],this.domElement=o("div",{className:"cp-controller"});const i=s.label??ct(e),a=o("label",{className:"cp-label"},[String(i)]);a.setAttribute("title",String(i)),this.domElement.appendChild(a),s.disabled&&this.domElement.setAttribute("data-disabled","true")}get value(){return this.object[this.property]}setValue(t,e=!0){this.object[this.property]=t,e&&this.emitChange(t),this.updateDisplay()}save(){return this.value}load(t){this.setValue(t)}reset(){this.setValue(this.initialValue)}onChange(t){return this.changeFns.add(t),this}emitChange(t){for(const e of this.changeFns)e(t)}appendWidget(t){this.domElement.appendChild(t)}};A.audio=E,A.midi=W,A.math=J;let d=A;class Y extends d{constructor(t,e,s={}){super(t,e,s),this.input=o("input",{type:"number",className:"cp-input-number",value:String(this.value)}),this.input.addEventListener("input",()=>{}),this.input.addEventListener("blur",()=>{const i=parseFloat(this.input.value);isNaN(i)?this.input.value=String(this.value):this.setValue(i)}),this.input.addEventListener("keydown",i=>{i.key==="Enter"&&this.input.blur()}),this.appendWidget(this.input)}updateDisplay(){this.input.value=String(this.value)}}const X={linear:n=>n,quadIn:n=>n*n,quadOut:n=>n*(2-n),quadInOut:n=>n<.5?2*n*n:-1+(4-2*n)*n,cubicIn:n=>n*n*n,cubicOut:n=>--n*n*n+1,cubicInOut:n=>n<.5?4*n*n*n:(n-1)*(2*n-2)*(2*n-2)+1,expoIn:n=>n===0?0:Math.pow(2,10*(n-1)),expoOut:n=>n===1?1:-Math.pow(2,-10*n)+1,expoInOut:n=>n===0||n===1?n:(n*=2)<1?.5*Math.pow(2,10*(n-1)):.5*(-Math.pow(2,-10*--n)+2),sineIn:n=>1-Math.cos(n*Math.PI/2),sineOut:n=>Math.sin(n*Math.PI/2),sineInOut:n=>-(Math.cos(Math.PI*n)-1)/2};class G{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=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=X[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","volume","bass","mids","highs","constant","sine","sawtooth","triangle","square","random","midi"],l=>this.setSignalType(l));this.signalSelect=e.select,t.appendChild(e.row),this.midiRow=o("div",{className:"cp-setting-row",style:"display: none;"});const s=o("label",{className:"cp-setting-label"},["Midi"]);this.midiBtn=o("button",{className:"cp-button cp-input-small"},["Learn"]),this.midiBtn.addEventListener("click",async()=>{if(this.midiBtn.textContent==="Listening..."){d.midi.cancelListen(),this.setMidiId(null);return}this.midiBtn.textContent="Listening...";const l=await d.midi.listen();this.setMidiId(l)}),this.midiRow.appendChild(s),this.midiRow.appendChild(this.midiBtn),t.appendChild(this.midiRow),this.mathParamsContainer=o("div",{style:"display: none; flex-direction: column; gap: 4px;"}),t.appendChild(this.mathParamsContainer);const i=this.createSettingSelect("behaviour",["forward","backward","loopForward","loopBackward","pingpong"],l=>this.setBehaviour(l));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(X),l=>this.setEase(l));this.easeRow=a.row,this.easeSelect=a.select,this.easeRow.style.display="none",this.easeSelect.value=this.currentEase,t.appendChild(this.easeRow);const r=o("hr",{className:"cp-separator"});t.appendChild(r)}createSettingSelect(t,e,s){const i=o("div",{className:"cp-setting-row"}),a=o("label",{className:"cp-setting-label"},[t]),r=o("select",{className:"cp-select cp-input-small"});return e.forEach(l=>{const p=o("option",{value:l},[l]);r.appendChild(p)}),r.addEventListener("change",()=>s(r.value)),i.appendChild(a),i.appendChild(r),{row:i,select:r}}createNumberInput(t,e,s,i,a,r){const l=o("div",{className:"cp-setting-row"}),p=o("label",{className:"cp-setting-label"},[t]),u=o("input",{className:"cp-input-number cp-input-small",type:"number",value:String(e),min:String(s),max:String(i),step:String(a)});return u.addEventListener("input",()=>{const m=parseFloat(u.value);isNaN(m)||r(m)}),l.appendChild(p),l.appendChild(u),{row:l,input:u}}updateMathParams(t){this.mathParamsContainer.innerHTML="";const e=d.math.getConfig(t);let s="Frequency",i=.1,a=10,r=.1;t==="random"?a=30:t==="constant"&&(s="Speed",i=.01,a=2,r=.01);const l=this.createNumberInput(s,e.frequency,i,a,r,m=>d.math.setConfig(t,{frequency:m}));this.mathParamsContainer.appendChild(l.row);const p=this.createNumberInput("Amplitude",e.amplitude,0,2,.1,m=>d.math.setConfig(t,{amplitude:m}));this.mathParamsContainer.appendChild(p.row);const u=this.createNumberInput("Offset",e.offset,0,1,.1,m=>d.math.setConfig(t,{offset:m}));if(this.mathParamsContainer.appendChild(u.row),["sine","sawtooth","triangle","square"].includes(t)){const m=this.createNumberInput("Phase",e.phase,0,1,.01,b=>d.math.setConfig(t,{phase:b}));this.mathParamsContainer.appendChild(m.row)}}setSignalType(t){if(!t||t==="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",s=["constant","sine","sawtooth","triangle","square","random"].includes(t),i=["volume","bass","mids","highs"].includes(t);this.midiRow.style.display=e?"grid":"none",this.mathParamsContainer.style.display=s?"grid":"none",s&&this.updateMathParams(t),this.easeRow.style.display="grid",this.behaviourRow.style.display="grid",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){this.currentMidiId=t,this.midiBtn.textContent=t??"Learn"}setEase(t){this.currentEase=t,this.easeSelect.value!==t&&(this.easeSelect.value=t)}setBehaviour(t){this.currentBehaviour=t,this.behaviourSelect.value!==t&&(this.behaviourSelect.value=t)}start(){!this.rafId&&this.currentSignalType&&this.loop()}stop(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)}save(){return{type:this.currentSignalType,midiId:this.currentMidiId,ease:this.currentEase,behaviour:this.currentBehaviour}}load(t){t&&(this.setSignalType(t.type),this.setMidiId(t.midiId||null),this.setEase(t.ease||"linear"),this.setBehaviour(t.behaviour||"forward"))}reset(){this.setSignalType("none"),this.setEase("linear"),this.setBehaviour("forward"),this.setMidiId(null)}}class Z 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=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"});this.input=o("input",{type:"range",className:"cp-input-range",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=o("span",{className:"cp-value-display"},[String(this.value.toFixed(1))]),this.input.addEventListener("input",()=>{const y=parseFloat(this.input.value);isNaN(y)||(this.setValue(y),this.display.textContent=String(y.toFixed(1)))}),this.input.addEventListener("click",y=>{y.stopPropagation()});const r=o("div",{className:"cp-controller-summary-content"});r.appendChild(this.input),r.appendChild(this.display),a.appendChild(r),i.appendChild(a);const l=o("div",{className:"cp-number-settings"}),p=this.createSetting("min",s.min,y=>this.setMin(y));this.minInput=p.input,l.appendChild(p.row);const u=this.createSetting("max",s.max,y=>this.setMax(y));this.maxInput=u.input,l.appendChild(u.row);const m=this.createSetting("step",s.step,y=>this.setStep(y));this.stepInput=m.input,l.appendChild(m.row);const b=o("hr",{className:"cp-separator"});l.appendChild(b),this.signalHandler=new G({container:l,onChange:(y,S)=>this.applySignal(y,S)}),i.appendChild(l),this.appendWidget(i)}setMin(t){typeof t=="number"&&(t=String(t)),t===""||isNaN(parseFloat(t))?this.input.removeAttribute("min"):(this.input.min=t,this.min=parseFloat(t)),this.minInput&&this.minInput.value!==t&&(this.minInput.value=t)}setMax(t){typeof t=="number"&&(t=String(t)),t===""||isNaN(parseFloat(t))?this.input.removeAttribute("max"):(this.input.max=t,this.max=parseFloat(t)),this.maxInput&&this.maxInput.value!==t&&(this.maxInput.value=t)}setStep(t){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 s=this.max-this.min;let i;if(e==="forward")i=this.min+t*s;else if(e==="backward")i=this.max-t*s;else{const a=t*(s*.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))}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 s=parseFloat(e),i=this.min;return i+Math.round((t-i)/s)*s}createSetting(t,e,s){const i=o("div",{className:"cp-setting-row"}),a=o("label",{className:"cp-setting-label"},[t]),r=o("input",{type:"number",className:"cp-input-number cp-input-small",step:"any"});return e!==void 0&&(r.value=String(e)),r.addEventListener("input",()=>s(r.value)),i.appendChild(a),i.appendChild(r),{row:i,input:r}}updateDisplay(){this.input.value=String(this.value),this.display.textContent=String(this.value.toFixed(1))}save(){return{value:this.value,settings:{min:this.min,max:this.max,step:this.input.step,signal:this.signalHandler.save()}}}load(t){if(typeof t=="number")this.setValue(t),this.resetSettings();else if(typeof t=="object"&&t!==null&&"value"in t){const e=t.settings||{};e.min!==void 0?this.setMin(e.min):this.setMin(this.initialOptions.min!==void 0?this.initialOptions.min:""),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 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(){this.setValue(this.initialValue),this.resetSettings()}resetSettings(){this.setMin(this.initialOptions.min!==void 0?this.initialOptions.min:""),this.setMax(this.initialOptions.max!==void 0?this.initialOptions.max:""),this.setStep(this.initialOptions.step),this.signalHandler?.reset()}}class K extends d{constructor(t,e,s){super(t,e,s),this.optionValues=[],this.select=o("select",{className:"cp-select"}),this.optionValues=s.options||[],this.optionValues.forEach((i,a)=>{const r=o("option",{value:String(a)},[String(i)]);this.select.appendChild(r)}),this.updateDisplay(),this.select.addEventListener("change",()=>{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,s)=>{const i=o("option",{value:String(s)},[String(e)]);this.select.appendChild(i)}),this.updateDisplay(),this.select.value===""&&this.optionValues.length>0&&this.setValue(this.optionValues[0])}updateDisplay(){const t=this.optionValues.indexOf(this.value);t!==-1&&(this.select.value=String(t))}}class Q extends d{constructor(t,e,s={}){const i={action:e};super(i,"action",s),this.domElement.querySelector(".cp-label")?.remove();const a=s.label??t;this.button=o("button",{className:"cp-button"},[String(a)]),this.button.addEventListener("click",()=>{const r=this.value;typeof r=="function"&&r(),this.emitChange(r)}),this.appendWidget(this.button)}updateDisplay(){}}class tt extends d{constructor(t,e,s={}){super(t,e,s),this.input=o("input",{type:"checkbox",className:"cp-checkbox"}),this.input.checked=this.value,this.input.addEventListener("change",()=>{this.setValue(this.input.checked)}),this.appendWidget(this.input)}updateDisplay(){this.input.checked=this.value}}class et extends d{constructor(t,e,s){super(t,e,s),this.buttons=[],this.optionValues=[],this.container=o("div",{className:"cp-radios"}),this.optionValues=s.options||[],this.optionValues.forEach(i=>{const a=o("button",{className:"cp-button cp-radio"},[String(i)]);a.addEventListener("click",()=>{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,s)=>{this.optionValues[s]===t?e.setAttribute("data-active","true"):e.removeAttribute("data-active")})}}class st extends d{constructor(t,e,s={}){super(t,e,s),this.input=o("input",{type:"color",className:"cp-input-color",value:this.value||"#000000"}),this.appendWidget(this.input),this.input.addEventListener("input",i=>{const a=i.target;this.setValue(a.value)}),this.updateDisplay()}updateDisplay(){this.input.value=this.value}}function it(n){const t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;n=n.replace(t,(s,i,a,r)=>i+i+a+a+r+r);const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return e?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:[0,0,0]}function ht(n,t,e){return"#"+((1<<24)+(Math.round(n)<<16)+(Math.round(t)<<8)+Math.round(e)).toString(16).slice(1)}function N(n){const t=n/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function F(n){return n<=.0031308?n*12.92*255:(1.055*Math.pow(n,1/2.4)-.055)*255}function dt(n,t,e){const[s,i,a]=it(n),[r,l,p]=it(t),u=N(s),m=N(i),b=N(a),y=N(r),S=N(l),k=N(p),f=u+e*(y-u),B=m+e*(S-m),x=b+e*(k-b),c=F(f),g=F(B),v=F(x);return ht(c,g,v)}class nt 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 i=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"}),r=o("div",{className:"cp-controller-summary-content"});this.displayText=o("span",{className:"cp-value-display"},[String(this.value)]),r.appendChild(this.displayText),a.appendChild(r),i.appendChild(a);const l=o("div",{className:"cp-number-settings"});this.stopsContainer=o("div",{className:"cp-stops-container"}),this.renderStops(),l.appendChild(this.stopsContainer);const p=o("button",{className:"cp-button"},["+ Add Stop"]);p.addEventListener("click",()=>{this.stops.push({color:"#ffffff",position:.5}),this.sortStops(),this.renderStops(),this.updateOutput()}),l.appendChild(p);const u=o("hr",{className:"cp-separator"});l.appendChild(u),this.signalHandler=new G({container:l,onChange:(m,b)=>this.applySignal(m,b)}),i.appendChild(l),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 s=o("div",{className:"cp-gradient-stop-row"}),i=o("input",{type:"color",className:"cp-input-color",value:t.color});i.addEventListener("input",l=>{t.color=l.target.value,this.updateOutput()});const a=o("input",{type:"number",className:"cp-input-number cp-input-small",min:"0",max:"1",step:"0.01",value:String(t.position)});a.addEventListener("change",l=>{let p=parseFloat(l.target.value);isNaN(p)&&(p=0),t.position=Math.max(0,Math.min(1,p)),this.sortStops(),this.renderStops(),this.updateOutput()});const r=j(()=>{this.stops.splice(e,1),this.renderStops(),this.updateOutput()});s.appendChild(i),s.appendChild(a),s.appendChild(r),this.stopsContainer.appendChild(s)})}updateOutput(t=this.manualPosition){if(this.stops.length===0)return;if(this.stops.length===1){this.setValue(this.stops[0].color),this.updateDisplay();return}let e="#000000";if(t=Math.max(0,Math.min(1,t)),t<=this.stops[0].position)e=this.stops[0].color;else if(t>=this.stops[this.stops.length-1].position)e=this.stops[this.stops.length-1].color;else 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 r=a.position-i.position,l=r===0?0:(t-i.position)/r;e=dt(i.color,a.color,l);break}}this.setValue(e),this.updateDisplay()}updateDisplay(){this.displayText&&(this.displayText.textContent=this.value)}applySignal(t,e){let s=t;if(e==="forward")s=t;else if(e==="backward")s=1-t;else{const i=t*.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(s),this.manualPosition=s}save(){return{stops:this.stops,settings:{signal:this.signalHandler.save()}}}load(t){t&&t.stops&&(this.stops=t.stops,this.sortStops(),this.renderStops()),t&&t.settings&&this.signalHandler?.load(t.settings.signal)}reset(){this.stops=this.initialOptions.stops||[{color:"#000000",position:0},{color:"#ffffff",position:1}],this.sortStops(),this.renderStops(),this.signalHandler?.reset(),this.updateOutput(0)}}class at 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=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"}),r=o("div",{className:"cp-controller-summary-content"}),l=o("span",{className:"cp-value-display"},[`${this.items.length} items`]);r.appendChild(l),a.appendChild(r),i.appendChild(a);const p=o("div",{className:"cp-number-settings"});this.itemsContainer=o("div",{className:"cp-stops-container"}),this.renderItems(),p.appendChild(this.itemsContainer);const u=o("button",{className:"cp-button cp-input-small",style:"margin-top: 8px; width: 100%;"},["+ Add Item"]);u.addEventListener("click",()=>{this.addItem()}),p.appendChild(u),i.appendChild(p),this.appendWidget(i)}parseValue(t){return!t||t.trim()===""?[]:t.split(",").map(e=>e.trim())}serializeValue(){return this.items.join(",")}getDefaultItemValue(){switch(this.itemType){case"color":return"#ffffff";case"number":return"0";default:return""}}addItem(t){const e=t!==void 0?t:this.getDefaultItemValue();this.items.push(e),this.renderItems(),this.updateValue()}updateValue(){const t=this.serializeValue();this.setValue(t),this.updateSummary()}updateSummary(){const t=this.domElement.querySelector(".cp-value-display");t&&(t.textContent=`${this.items.length} items`)}renderItems(){this.itemsContainer.innerHTML="",this.items.forEach((t,e)=>{const s=o("div",{className:"cp-array-row"});let i;this.itemType==="color"?i=o("input",{type:"color",className:"cp-input-color",value:t}):this.itemType==="number"?i=o("input",{type:"number",className:"cp-input-number cp-input-small",step:"any",value:t}):i=o("input",{type:"text",className:"cp-input-number cp-input-small",value:t}),i.addEventListener("input",r=>{this.items[e]=r.target.value,this.updateValue()});const a=j(()=>{this.items.splice(e,1),this.renderItems(),this.updateValue()});s.appendChild(i),s.appendChild(a),this.itemsContainer.appendChild(s)})}updateDisplay(){}save(){return[...this.items]}load(t){Array.isArray(t)?this.items=[...t]:typeof t=="string"&&(this.items=this.parseValue(t)),this.renderItems(),this.updateValue()}reset(){const t=this.initialValue||"";this.items=this.parseValue(t),this.renderItems(),this.updateValue()}}class ut{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 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=o("span",{className:"cp-stats"}),this.rafId=requestAnimationFrame(this.render)}destroy(){cancelAnimationFrame(this.rafId)}}class D{constructor(){this.controllers=[],this.folders=[]}addNumber(t,e,s={}){const i=new Y(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addRange(t,e,s={}){const i=new Z(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addSelect(t,e,s={}){const i=new K(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addBoolean(t,e,s={}){const i=new tt(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addButton(t,e,s={}){const i=new Q(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addRadio(t,e,s={}){const i=new et(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addColor(t,e,s={}){const i=new st(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addGradient(t,e,s={}){const i=new nt(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addArray(t,e,s={}){const i=new at(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addFolder(t){const e=new ot(t);return this.addSeparator(),this.contentElement.appendChild(e.domElement),this.folders.push(e),e}addSeparator(){const t=o("hr",{className:"cp-separator"});this.contentElement.appendChild(t)}save(){const t={controllers:{},folders:{}};for(const e of this.controllers)typeof e.value!="function"&&(t.controllers[e.key]=e.save());for(const e of this.folders)t.folders[e.title]=e.save();return t}load(t){if(!t){this.reset();return}for(const e of this.controllers)if(typeof e.value!="function")if(t.controllers&&e.key in t.controllers){const s=t.controllers[e.key];s!==void 0&&e.load(s)}else e.reset();for(const e of this.folders){const s=t.folders?t.folders[e.title]:void 0;e.load(s)}}reset(){for(const t of this.controllers)typeof t.value!="function"&&t.reset();for(const t of this.folders)t.reset()}}class ot extends D{constructor(t){super(),this.title=t,this.domElement=o("details",{className:"cp-folder",open:!0}),this.summaryElement=o("summary",{className:"cp-summary"},[t]),this.domElement.appendChild(this.summaryElement),this.contentElement=o("div",{className:"cp-content cp-folder-content"}),this.domElement.appendChild(this.contentElement)}}class mt extends D{constructor(t,e={}){super(),lt(),this.domElement=o("details",{className:"cp-root",open:!0}),this.summaryElement=o("summary",{className:"cp-summary cp-summary-root"}),this.domElement.appendChild(this.summaryElement);const s=o("span",{},[e.title||"ControlPanel"]);this.summaryElement.appendChild(s),this.stats=new ut,this.summaryElement.appendChild(this.stats.domElement);let i=!1,a=0,r=0,l=0,p=0;this.summaryElement.addEventListener("mousedown",c=>{if(c.target!==this.summaryElement&&c.target!==s)return;i=!0,a=c.clientX,r=c.clientY;const g=this.domElement.getBoundingClientRect();l=g.left,p=g.top,c.preventDefault()}),document.addEventListener("mousemove",c=>{if(!i)return;const g=c.clientX-a,v=c.clientY-r,w=l+g,z=p+v;this.domElement.style.left=`${w}px`,this.domElement.style.top=`${z}px`,this.domElement.style.right="auto",this.domElement.style.bottom="auto"}),document.addEventListener("mouseup",()=>{i&&(i=!1,this.savePositionAndSize())}),new ResizeObserver(()=>{i||this.savePositionAndSize()}).observe(this.domElement),this.restorePositionAndSize(),this.contentElement=o("div",{className:"cp-content"}),this.domElement.appendChild(this.contentElement);const m=this.addFolder("_Signals"),b={audioInput:null,fftSize:2048};m.addRadio(b,"audioInput",{label:"Audio Signal",options:["microphone","browser"]}).onChange(c=>{E.setInput(c)}),m.addSelect(b,"fftSize",{label:"FFT Size",options:[256,512,1024,2048]}).onChange(c=>{E.setFFTSize(c)}),m.addRange(E,"smoothingTimeConstant",{min:0,max:.99,step:.01,label:"Smoothing"}).onChange(c=>{E.analyser.smoothingTimeConstant=c}),m.addRange(E,"spectrumBoost",{min:1,max:5,step:.1,label:"Compression"}),t?t.appendChild(this.domElement):document.body.appendChild(this.domElement);const y=e.title||"ControlPanel";this.presetStoragePrefix=`cp-presets-${y}-`;const S=this.addFolder("_User Presets"),k=()=>{const c=["Default"];if(typeof localStorage>"u")return c;for(let g=0;g<localStorage.length;g++){const v=localStorage.key(g);if(v&&v.startsWith(this.presetStoragePrefix)){const w=v.substring(this.presetStoragePrefix.length);w!=="Default"&&!c.includes(w)&&c.push(w)}}return c.sort()},f={selected:"Default",save:()=>{const c=prompt("Preset Name:",f.selected);if(c){if(c==="Default"){alert("Cannot overwrite Default preset");return}const g=this.presetStoragePrefix+c;this.saveToLocalStorage(g);const v=k();x.setOptions(v),f.selected=c,x.setValue(c)}},load:()=>{const c=f.selected,g=this.presetStoragePrefix+c;this.loadFromLocalStorage(g),f.selected=c,x.setValue(c)},delete:()=>{if(f.selected==="Default"){alert("Cannot delete Default preset");return}if(confirm(`Delete preset "${f.selected}"?`)){const c=this.presetStoragePrefix+f.selected;localStorage.removeItem(c);const g=k();x.setOptions(g),f.selected="Default",x.setValue("Default"),this.reset()}},export:()=>{const c=this.save(),g=O=>{const P={controllers:{},folders:{}};for(const[V,q]of Object.entries(O.controllers))V.startsWith("_")||(P.controllers[V]=q);for(const[V,q]of Object.entries(O.folders))V.startsWith("_")||(P.folders[V]=g(q));return P},v=g(c),w={_presetName:f.selected||"CustomPreset",_exportDate:new Date().toISOString(),_instructions:"To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",...v},z=JSON.stringify(w,null,2),I=new Blob([z],{type:"application/json"}),T=URL.createObjectURL(I),C=document.createElement("a");C.href=T;const M=new Date().toISOString().split("T")[0],rt=f.selected.replace(/[^a-z0-9]/gi,"-").toLowerCase();C.download=`${y.toLowerCase()}-preset-${rt}-${M}.json`,document.body.appendChild(C),C.click(),document.body.removeChild(C),URL.revokeObjectURL(T)},import:()=>{const c=document.createElement("input");c.type="file",c.accept=".json",c.onchange=g=>{const v=g.target.files?.[0];if(!v)return;const w=new FileReader;w.onload=z=>{try{const I=z.target?.result,T=JSON.parse(I),C={controllers:T.controllers||{},folders:T.folders||{}};if(!C.controllers||!C.folders){alert("Invalid preset file: missing 'controllers' or 'folders'");return}this.load(C);const M=T._presetName||"ImportedPreset";if(confirm(`Preset loaded! Save as "${M}" to User Presets?`)){const O=this.presetStoragePrefix+M;this.saveToLocalStorage(O);const P=k();x.setOptions(P),f.selected=M,x.setValue(M)}}catch(I){alert(`Failed to import preset: ${I instanceof Error?I.message:"Invalid JSON"}`),console.error("Import error:",I)}},w.readAsText(v)},c.click()}},B=k(),x=S.addSelect(f,"selected",{label:"Preset",options:B});S.addButton("Load",()=>f.load()),S.addButton("Save",()=>f.save()),S.addButton("Delete",()=>f.delete()),S.addButton("Export",()=>f.export()),S.addButton("Import",()=>f.import())}saveToLocalStorage(t){const e=this.save();try{localStorage.setItem(t,JSON.stringify(e))}catch(s){console.warn("ControlPanel: Failed to save to localStorage",s)}}loadFromLocalStorage(t){try{const e=localStorage.getItem(t);if(e){const s=JSON.parse(e);this.load(s)}}catch(e){console.warn("ControlPanel: Failed to load from localStorage",e)}}saveDefaultPreset(){const t=this.presetStoragePrefix+"Default";this.save(),this.saveToLocalStorage(t)}savePositionAndSize(){const t=this.domElement.getBoundingClientRect(),e=`cp-position-${this.presetStoragePrefix}`,s={left:t.left,top:t.top,width:this.domElement.offsetWidth,height:this.domElement.offsetHeight};try{sessionStorage.setItem(e,JSON.stringify(s))}catch(i){console.warn("Failed to save panel position/size",i)}}restorePositionAndSize(){const t=`cp-position-${this.presetStoragePrefix}`;try{const e=sessionStorage.getItem(t);if(e){const s=JSON.parse(e);this.domElement.style.left=`${s.left}px`,this.domElement.style.top=`${s.top}px`,this.domElement.style.right="auto",this.domElement.style.bottom="auto",this.domElement.style.width=`${s.width}px`,this.domElement.style.height=`${s.height}px`}}catch(e){console.warn("Failed to restore panel position/size",e)}}destroy(){this.stats.destroy(),this.domElement.remove(),this.controllers=[],this.folders=[]}}h.ArrayController=at,h.AudioSignals=H,h.BooleanController=tt,h.ButtonController=Q,h.ColorController=st,h.ControlPanel=mt,h.ControlPanelContainer=D,h.Controller=d,h.Folder=ot,h.GradientController=nt,h.MathSignals=_,h.MidiSignals=U,h.NumberController=Y,h.RadioController=et,h.RangeController=Z,h.SelectController=K,h.audioSignals=E,h.mathSignals=J,h.midiSignals=W,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
+`;let R=!1;function lt(){if(R)return;const n=document.createElement("style");n.id="control-panel-styles",n.textContent=L,document.head.appendChild(n),R=!0}function o(n,t={},e=[]){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 j(n){const t=o("button",{className:"cp-button cp-button-delete"},["×"]);return t.addEventListener("click",n),t}function ct(n){return n.replace(/([A-Z])/g," $1").replace(/^./,t=>t.toUpperCase()).trim()}function $(n,t,e){return Math.min(Math.max(n,t),e)}function pt(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 s=0;for(;s<t.length-1&&n>t[s+1];)s++;if(s===t.length-1)return e[e.length-1];if(s===0&&n<t[0])return e[0];const i=t[s],a=t[s+1],r=e[s],l=e[s+1];return(n-i)/(a-i)*(l-r)+r}class H{constructor(){this.source=null,this.stream=null,this.fftSize=2048,this.smoothingTimeConstant=.82,this.spectrumBoost=3,this.levels={volume:0,bass:0,mids:0,highs:0},this.peaks={volume:0,bass:0,mids:0,highs:0},this._isAnalyzing=!1,this.loop=()=>{this._isAnalyzing&&(requestAnimationFrame(this.loop),this.update())};const t=window.AudioContext||window.webkitAudioContext;this.ctx=new t,this.analyser=this.ctx.createAnalyser(),this.analyser.fftSize=this.fftSize,this.analyser.smoothingTimeConstant=this.smoothingTimeConstant,this.dataArray=new Uint8Array(this.analyser.frequencyBinCount),this.waveformArray=new Uint8Array(this.analyser.frequencyBinCount)}setFFTSize(t){this.fftSize=t,this.analyser.fftSize=t,this.dataArray=new Uint8Array(this.analyser.frequencyBinCount),this.waveformArray=new Uint8Array(this.analyser.frequencyBinCount)}async setInput(t){try{let e;t==="browser"?e=navigator.mediaDevices.getDisplayMedia({audio:!0,video:!0}):e=navigator.mediaDevices.getUserMedia({audio:!0});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}}update(){if(this.analyser.getByteFrequencyData(this.dataArray),this.analyser.getByteTimeDomainData(this.waveformArray),this.spectrumBoost!==1){const p=this.dataArray.length;for(let u=0;u<p;u++){const b=1+u/p*(this.spectrumBoost-1);this.dataArray[u]=Math.min(255,this.dataArray[u]*b)}}const t=[2,10],e=[10,150],s=[150,600],i=this.getAverage(t[0],t[1]),a=this.getAverage(e[0],e[1]),r=this.getAverage(s[0],s[1]),l=this.getAverage(0,s[1]);this.processLevel("bass",i),this.processLevel("mids",a),this.processLevel("highs",r),this.processLevel("volume",l)}processLevel(t,e){this.peaks[t]-=5e-4,this.peaks[t]=$(this.peaks[t],.1,1),e>this.peaks[t]&&(this.peaks[t]=e),this.levels[t]=$(pt(e,[0,this.peaks[t]],[0,1]),0,1)}getAverage(t,e){let s=0;const i=e-t;if(i<=0)return 0;for(let a=t;a<e;a++)s+=this.dataArray[a];return s/i/255}getSignal(t){return()=>this.levels[t]}}const E=new H;class U{constructor(){this.midiAccess=null,this.values=new Map,this.isListening=!1,this.resolveListen=null,this.listeningCallback=null,this.init()}async init(){if(typeof navigator<"u"&&navigator.requestMIDIAccess)try{this.midiAccess=await navigator.requestMIDIAccess(),this.setupInputs(),this.midiAccess.onstatechange=t=>{t.port.type==="input"&&t.port.state==="connected"&&this.setupInputs()}}catch(t){console.warn("MIDI Access failed",t)}}setupInputs(){if(!this.midiAccess)return;const t=this.midiAccess.inputs.values();for(const e of t)e.onmidimessage=this.handleMessage.bind(this)}handleMessage(t){const e=t.data,[s]=e;if((s&240)>=240)return;const a=this.getIdFromMessage(t),r=this.normalizeValue(e);this.values.set(a,r),this.isListening&&this.resolveListen&&r>0&&(this.resolveListen(a),this.isListening=!1,this.resolveListen=null,this.listeningCallback&&this.listeningCallback())}getIdFromMessage(t){const e=t.data,[s,i]=e,a=s&240,r=t.currentTarget.name||"unknown",l=a===144||a===128?"note":"ctrl",p=r.replace(/[^a-zA-Z0-9]/g,"");return`${i}_${l}_${p}`}normalizeValue(t){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=>{this.resolveListen=t})}cancelListen(){this.isListening=!1,this.resolveListen=null}getSignal(t){return()=>this.values.get(t)??0}}const W=new U;class _{constructor(){this.configs=new Map,this.lastRandomUpdateTime=0,this.currentRandomValue=0,this.startTime=performance.now(),this.configs.set("constant",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("sine",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("sawtooth",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("triangle",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("square",{frequency:.1,amplitude:1,offset:0,phase:0}),this.configs.set("random",{frequency:10,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,r=(Math.sin(s*e.frequency*Math.PI*2+i)+1)/2;return this.normalizeOutput(r,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,r=a<.5?a*2:2-a*2;return this.normalizeOutput(r,e)}square(t){const e=t?{...this.configs.get("square"),...t}:this.configs.get("square"),s=this.getTime(),i=e.phase,r=(s*e.frequency+i)%1<.5?0:1;return this.normalizeOutput(r,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 _,z=class z{constructor(t,e,s={}){this.changeFns=new Set,this.object=t,this.property=e,this.key=s.id??e,this.initialValue=this.object[this.property],this.domElement=o("div",{className:"cp-controller"});const i=s.label??ct(e),a=o("label",{className:"cp-label"},[String(i)]);a.setAttribute("title",String(i)),this.domElement.appendChild(a),s.disabled&&this.domElement.setAttribute("data-disabled","true")}get value(){return this.object[this.property]}setValue(t,e=!0){this.object[this.property]=t,e&&this.emitChange(t),this.updateDisplay()}save(){return this.value}load(t){this.setValue(t)}reset(){this.setValue(this.initialValue)}onChange(t){return this.changeFns.add(t),this}emitChange(t){for(const e of this.changeFns)e(t)}appendWidget(t){this.domElement.appendChild(t)}};z.audio=E,z.midi=W,z.math=J;let d=z;class Y extends d{constructor(t,e,s={}){super(t,e,s),this.input=o("input",{type:"number",className:"cp-input-number",value:String(this.value)}),this.input.addEventListener("input",()=>{}),this.input.addEventListener("blur",()=>{const i=parseFloat(this.input.value);isNaN(i)?this.input.value=String(this.value):this.setValue(i)}),this.input.addEventListener("keydown",i=>{i.key==="Enter"&&this.input.blur()}),this.appendWidget(this.input)}updateDisplay(){this.input.value=String(this.value)}}const X={linear:n=>n,quadIn:n=>n*n,quadOut:n=>n*(2-n),quadInOut:n=>n<.5?2*n*n:-1+(4-2*n)*n,cubicIn:n=>n*n*n,cubicOut:n=>--n*n*n+1,cubicInOut:n=>n<.5?4*n*n*n:(n-1)*(2*n-2)*(2*n-2)+1,expoIn:n=>n===0?0:Math.pow(2,10*(n-1)),expoOut:n=>n===1?1:-Math.pow(2,-10*n)+1,expoInOut:n=>n===0||n===1?n:(n*=2)<1?.5*Math.pow(2,10*(n-1)):.5*(-Math.pow(2,-10*--n)+2),sineIn:n=>1-Math.cos(n*Math.PI/2),sineOut:n=>Math.sin(n*Math.PI/2),sineInOut:n=>-(Math.cos(Math.PI*n)-1)/2};class G{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=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=X[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","volume","bass","mids","highs","constant","sine","sawtooth","triangle","square","random","midi"],l=>this.setSignalType(l));this.signalSelect=e.select,t.appendChild(e.row),this.midiRow=o("div",{className:"cp-setting-row",style:"display: none;"});const s=o("label",{className:"cp-setting-label"},["Midi"]);this.midiBtn=o("button",{className:"cp-button cp-input-small"},["Learn"]),this.midiBtn.addEventListener("click",async()=>{if(this.midiBtn.textContent==="Listening..."){d.midi.cancelListen(),this.setMidiId(null);return}this.midiBtn.textContent="Listening...";const l=await d.midi.listen();this.setMidiId(l)}),this.midiRow.appendChild(s),this.midiRow.appendChild(this.midiBtn),t.appendChild(this.midiRow),this.mathParamsContainer=o("div",{style:"display: none; flex-direction: column; gap: 4px;"}),t.appendChild(this.mathParamsContainer);const i=this.createSettingSelect("behaviour",["forward","backward","loopForward","loopBackward","pingpong"],l=>this.setBehaviour(l));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(X),l=>this.setEase(l));this.easeRow=a.row,this.easeSelect=a.select,this.easeRow.style.display="none",this.easeSelect.value=this.currentEase,t.appendChild(this.easeRow);const r=o("hr",{className:"cp-separator"});t.appendChild(r)}createSettingSelect(t,e,s){const i=o("div",{className:"cp-setting-row"}),a=o("label",{className:"cp-setting-label"},[t]),r=o("select",{className:"cp-select cp-input-small"});return e.forEach(l=>{const p=o("option",{value:l},[l]);r.appendChild(p)}),r.addEventListener("change",()=>s(r.value)),i.appendChild(a),i.appendChild(r),{row:i,select:r}}createNumberInput(t,e,s,i,a,r){const l=o("div",{className:"cp-setting-row"}),p=o("label",{className:"cp-setting-label"},[t]),u=o("input",{className:"cp-input-number cp-input-small",type:"number",value:String(e),min:String(s),max:String(i),step:String(a)});return u.addEventListener("input",()=>{const m=parseFloat(u.value);isNaN(m)||r(m)}),l.appendChild(p),l.appendChild(u),{row:l,input:u}}updateMathParams(t){this.mathParamsContainer.innerHTML="";const e=d.math.getConfig(t);let s="Frequency",i=.1,a=10,r=.1;t==="random"?a=30:t==="constant"&&(s="Speed",i=.01,a=2,r=.01);const l=this.createNumberInput(s,e.frequency,i,a,r,m=>d.math.setConfig(t,{frequency:m}));this.mathParamsContainer.appendChild(l.row);const p=this.createNumberInput("Amplitude",e.amplitude,0,2,.1,m=>d.math.setConfig(t,{amplitude:m}));this.mathParamsContainer.appendChild(p.row);const u=this.createNumberInput("Offset",e.offset,0,1,.1,m=>d.math.setConfig(t,{offset:m}));if(this.mathParamsContainer.appendChild(u.row),["sine","sawtooth","triangle","square"].includes(t)){const m=this.createNumberInput("Phase",e.phase,0,1,.01,b=>d.math.setConfig(t,{phase:b}));this.mathParamsContainer.appendChild(m.row)}}setSignalType(t){if(!t||t==="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",s=["constant","sine","sawtooth","triangle","square","random"].includes(t),i=["volume","bass","mids","highs"].includes(t);this.midiRow.style.display=e?"grid":"none",this.mathParamsContainer.style.display=s?"grid":"none",s&&this.updateMathParams(t),this.easeRow.style.display="grid",this.behaviourRow.style.display="grid",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){this.currentMidiId=t,this.midiBtn.textContent=t??"Learn"}setEase(t){this.currentEase=t,this.easeSelect.value!==t&&(this.easeSelect.value=t)}setBehaviour(t){this.currentBehaviour=t,this.behaviourSelect.value!==t&&(this.behaviourSelect.value=t)}start(){!this.rafId&&this.currentSignalType&&this.loop()}stop(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)}save(){return{type:this.currentSignalType,midiId:this.currentMidiId,ease:this.currentEase,behaviour:this.currentBehaviour}}load(t){t&&(this.setSignalType(t.type),this.setMidiId(t.midiId||null),this.setEase(t.ease||"linear"),this.setBehaviour(t.behaviour||"forward"))}reset(){this.setSignalType("none"),this.setEase("linear"),this.setBehaviour("forward"),this.setMidiId(null)}}class Z 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=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"});this.input=o("input",{type:"range",className:"cp-input-range",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=o("span",{className:"cp-value-display"},[String(this.value.toFixed(1))]),this.input.addEventListener("input",()=>{const v=parseFloat(this.input.value);isNaN(v)||(this.setValue(v),this.display.textContent=String(v.toFixed(1)))}),this.input.addEventListener("click",v=>{v.stopPropagation()});const r=o("div",{className:"cp-controller-summary-content"});r.appendChild(this.input),r.appendChild(this.display),a.appendChild(r),i.appendChild(a);const l=o("div",{className:"cp-number-settings"}),p=this.createSetting("min",s.min,v=>this.setMin(v));this.minInput=p.input,l.appendChild(p.row);const u=this.createSetting("max",s.max,v=>this.setMax(v));this.maxInput=u.input,l.appendChild(u.row);const m=this.createSetting("step",s.step,v=>this.setStep(v));this.stepInput=m.input,l.appendChild(m.row);const b=o("hr",{className:"cp-separator"});l.appendChild(b),this.signalHandler=new G({container:l,onChange:(v,S)=>this.applySignal(v,S)}),i.appendChild(l),this.appendWidget(i)}setMin(t){typeof t=="number"&&(t=String(t)),t===""||isNaN(parseFloat(t))?this.input.removeAttribute("min"):(this.input.min=t,this.min=parseFloat(t)),this.minInput&&this.minInput.value!==t&&(this.minInput.value=t)}setMax(t){typeof t=="number"&&(t=String(t)),t===""||isNaN(parseFloat(t))?this.input.removeAttribute("max"):(this.input.max=t,this.max=parseFloat(t)),this.maxInput&&this.maxInput.value!==t&&(this.maxInput.value=t)}setStep(t){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 s=this.max-this.min;let i;if(e==="forward")i=this.min+t*s;else if(e==="backward")i=this.max-t*s;else{const a=t*(s*.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))}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 s=parseFloat(e),i=this.min;return i+Math.round((t-i)/s)*s}createSetting(t,e,s){const i=o("div",{className:"cp-setting-row"}),a=o("label",{className:"cp-setting-label"},[t]),r=o("input",{type:"number",className:"cp-input-number cp-input-small",step:"any"});return e!==void 0&&(r.value=String(e)),r.addEventListener("input",()=>s(r.value)),i.appendChild(a),i.appendChild(r),{row:i,input:r}}updateDisplay(){this.input.value=String(this.value),this.display.textContent=String(this.value.toFixed(1))}save(){return{value:this.value,settings:{min:this.min,max:this.max,step:this.input.step,signal:this.signalHandler.save()}}}load(t){if(typeof t=="number")this.setValue(t),this.resetSettings();else if(typeof t=="object"&&t!==null&&"value"in t){const e=t.settings||{};e.min!==void 0?this.setMin(e.min):this.setMin(this.initialOptions.min!==void 0?this.initialOptions.min:""),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 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(){this.setValue(this.initialValue),this.resetSettings()}resetSettings(){this.setMin(this.initialOptions.min!==void 0?this.initialOptions.min:""),this.setMax(this.initialOptions.max!==void 0?this.initialOptions.max:""),this.setStep(this.initialOptions.step),this.signalHandler?.reset()}}class K extends d{constructor(t,e,s){super(t,e,s),this.optionValues=[],this.select=o("select",{className:"cp-select"}),this.optionValues=s.options||[],this.optionValues.forEach((i,a)=>{const r=o("option",{value:String(a)},[String(i)]);this.select.appendChild(r)}),this.updateDisplay(),this.select.addEventListener("change",()=>{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,s)=>{const i=o("option",{value:String(s)},[String(e)]);this.select.appendChild(i)}),this.updateDisplay(),this.select.value===""&&this.optionValues.length>0&&this.setValue(this.optionValues[0])}updateDisplay(){const t=this.optionValues.indexOf(this.value);t!==-1&&(this.select.value=String(t))}}class Q extends d{constructor(t,e,s={}){const i={action:e};super(i,"action",s),this.domElement.querySelector(".cp-label")?.remove();const a=s.label??t;this.button=o("button",{className:"cp-button"},[String(a)]),this.button.addEventListener("click",()=>{const r=this.value;typeof r=="function"&&r(),this.emitChange(r)}),this.appendWidget(this.button)}updateDisplay(){}}class tt extends d{constructor(t,e,s={}){super(t,e,s),this.input=o("input",{type:"checkbox",className:"cp-checkbox"}),this.input.checked=this.value,this.input.addEventListener("change",()=>{this.setValue(this.input.checked)}),this.appendWidget(this.input)}updateDisplay(){this.input.checked=this.value}}class et extends d{constructor(t,e,s){super(t,e,s),this.buttons=[],this.optionValues=[],this.container=o("div",{className:"cp-radios"}),this.optionValues=s.options||[],this.optionValues.forEach(i=>{const a=o("button",{className:"cp-button cp-radio"},[String(i)]);a.addEventListener("click",()=>{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,s)=>{this.optionValues[s]===t?e.setAttribute("data-active","true"):e.removeAttribute("data-active")})}}class st extends d{constructor(t,e,s={}){super(t,e,s),this.input=o("input",{type:"color",className:"cp-input-color",value:this.value||"#000000"}),this.appendWidget(this.input),this.input.addEventListener("input",i=>{const a=i.target;this.setValue(a.value)}),this.updateDisplay()}updateDisplay(){this.input.value=this.value}}function it(n){const t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;n=n.replace(t,(s,i,a,r)=>i+i+a+a+r+r);const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return e?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:[0,0,0]}function ht(n,t,e){return"#"+((1<<24)+(Math.round(n)<<16)+(Math.round(t)<<8)+Math.round(e)).toString(16).slice(1)}function N(n){const t=n/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function F(n){return n<=.0031308?n*12.92*255:(1.055*Math.pow(n,1/2.4)-.055)*255}function dt(n,t,e){const[s,i,a]=it(n),[r,l,p]=it(t),u=N(s),m=N(i),b=N(a),v=N(r),S=N(l),T=N(p),f=u+e*(v-u),B=m+e*(S-m),C=b+e*(T-b),c=F(f),g=F(B),y=F(C);return ht(c,g,y)}class nt 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 i=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"}),r=o("div",{className:"cp-controller-summary-content"});this.displayText=o("span",{className:"cp-value-display"},[String(this.value)]),r.appendChild(this.displayText),a.appendChild(r),i.appendChild(a);const l=o("div",{className:"cp-number-settings"});this.stopsContainer=o("div",{className:"cp-stops-container"}),this.renderStops(),l.appendChild(this.stopsContainer);const p=o("button",{className:"cp-button"},["+ Add Stop"]);p.addEventListener("click",()=>{this.stops.push({color:"#ffffff",position:.5}),this.sortStops(),this.renderStops(),this.updateOutput()}),l.appendChild(p);const u=o("hr",{className:"cp-separator"});l.appendChild(u),this.signalHandler=new G({container:l,onChange:(m,b)=>this.applySignal(m,b)}),i.appendChild(l),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 s=o("div",{className:"cp-gradient-stop-row"}),i=o("input",{type:"color",className:"cp-input-color",value:t.color});i.addEventListener("input",l=>{t.color=l.target.value,this.updateOutput()});const a=o("input",{type:"number",className:"cp-input-number cp-input-small",min:"0",max:"1",step:"0.01",value:String(t.position)});a.addEventListener("change",l=>{let p=parseFloat(l.target.value);isNaN(p)&&(p=0),t.position=Math.max(0,Math.min(1,p)),this.sortStops(),this.renderStops(),this.updateOutput()});const r=j(()=>{this.stops.splice(e,1),this.renderStops(),this.updateOutput()});s.appendChild(i),s.appendChild(a),s.appendChild(r),this.stopsContainer.appendChild(s)})}updateOutput(t=this.manualPosition){if(this.stops.length===0)return;if(this.stops.length===1){this.setValue(this.stops[0].color),this.updateDisplay();return}let e="#000000";if(t=Math.max(0,Math.min(1,t)),t<=this.stops[0].position)e=this.stops[0].color;else if(t>=this.stops[this.stops.length-1].position)e=this.stops[this.stops.length-1].color;else 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 r=a.position-i.position,l=r===0?0:(t-i.position)/r;e=dt(i.color,a.color,l);break}}this.setValue(e),this.updateDisplay()}updateDisplay(){this.displayText&&(this.displayText.textContent=this.value)}applySignal(t,e){let s=t;if(e==="forward")s=t;else if(e==="backward")s=1-t;else{const i=t*.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(s),this.manualPosition=s}save(){return{stops:this.stops,settings:{signal:this.signalHandler.save()}}}load(t){t&&t.stops&&(this.stops=t.stops,this.sortStops(),this.renderStops()),t&&t.settings&&this.signalHandler?.load(t.settings.signal)}reset(){this.stops=this.initialOptions.stops||[{color:"#000000",position:0},{color:"#ffffff",position:1}],this.sortStops(),this.renderStops(),this.signalHandler?.reset(),this.updateOutput(0)}}class at 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=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"}),r=o("div",{className:"cp-controller-summary-content"}),l=o("span",{className:"cp-value-display"},[`${this.items.length} items`]);r.appendChild(l),a.appendChild(r),i.appendChild(a);const p=o("div",{className:"cp-number-settings"});this.itemsContainer=o("div",{className:"cp-stops-container"}),this.renderItems(),p.appendChild(this.itemsContainer);const u=o("button",{className:"cp-button cp-input-small",style:"margin-top: 8px; width: 100%;"},["+ Add Item"]);u.addEventListener("click",()=>{this.addItem()}),p.appendChild(u),i.appendChild(p),this.appendWidget(i)}parseValue(t){return!t||t.trim()===""?[]:t.split(",").map(e=>e.trim())}serializeValue(){return this.items.join(",")}getDefaultItemValue(){switch(this.itemType){case"color":return"#ffffff";case"number":return"0";default:return""}}addItem(t){const e=t!==void 0?t:this.getDefaultItemValue();this.items.push(e),this.renderItems(),this.updateValue()}updateValue(){const t=this.serializeValue();this.setValue(t),this.updateSummary()}updateSummary(){const t=this.domElement.querySelector(".cp-value-display");t&&(t.textContent=`${this.items.length} items`)}renderItems(){this.itemsContainer.innerHTML="",this.items.forEach((t,e)=>{const s=o("div",{className:"cp-array-row"});let i;this.itemType==="color"?i=o("input",{type:"color",className:"cp-input-color",value:t}):this.itemType==="number"?i=o("input",{type:"number",className:"cp-input-number cp-input-small",step:"any",value:t}):i=o("input",{type:"text",className:"cp-input-number cp-input-small",value:t}),i.addEventListener("input",r=>{this.items[e]=r.target.value,this.updateValue()});const a=j(()=>{this.items.splice(e,1),this.renderItems(),this.updateValue()});s.appendChild(i),s.appendChild(a),this.itemsContainer.appendChild(s)})}updateDisplay(){}save(){return[...this.items]}load(t){Array.isArray(t)?this.items=[...t]:typeof t=="string"&&(this.items=this.parseValue(t)),this.renderItems(),this.updateValue()}reset(){const t=this.initialValue||"";this.items=this.parseValue(t),this.renderItems(),this.updateValue()}}class ut{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 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=o("span",{className:"cp-stats"}),this.rafId=requestAnimationFrame(this.render)}destroy(){cancelAnimationFrame(this.rafId)}}class D{constructor(){this.controllers=[],this.folders=[]}addNumber(t,e,s={}){const i=new Y(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addRange(t,e,s={}){const i=new Z(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addSelect(t,e,s={}){const i=new K(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addBoolean(t,e,s={}){const i=new tt(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addButton(t,e,s={}){const i=new Q(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addRadio(t,e,s={}){const i=new et(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addColor(t,e,s={}){const i=new st(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addGradient(t,e,s={}){const i=new nt(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addArray(t,e,s={}){const i=new at(t,e,s);return this.contentElement.appendChild(i.domElement),this.controllers.push(i),i}addFolder(t){const e=new ot(t);return this.addSeparator(),this.contentElement.appendChild(e.domElement),this.folders.push(e),e}addSeparator(){const t=o("hr",{className:"cp-separator"});this.contentElement.appendChild(t)}save(){const t={controllers:{},folders:{}};for(const e of this.controllers)typeof e.value!="function"&&(t.controllers[e.key]=e.save());for(const e of this.folders)t.folders[e.title]=e.save();return t}load(t){if(!t){this.reset();return}for(const e of this.controllers)if(typeof e.value!="function")if(t.controllers&&e.key in t.controllers){const s=t.controllers[e.key];s!==void 0&&e.load(s)}else e.reset();for(const e of this.folders){const s=t.folders?t.folders[e.title]:void 0;e.load(s)}}reset(){for(const t of this.controllers)typeof t.value!="function"&&t.reset();for(const t of this.folders)t.reset()}}class ot extends D{constructor(t){super(),this.title=t,this.domElement=o("details",{className:"cp-folder",open:!0}),this.summaryElement=o("summary",{className:"cp-summary"},[t]),this.domElement.appendChild(this.summaryElement),this.contentElement=o("div",{className:"cp-content cp-folder-content"}),this.domElement.appendChild(this.contentElement)}}class mt extends D{constructor(t,e={}){super(),lt(),this.domElement=o("details",{className:"cp-root",open:!0}),this.summaryElement=o("summary",{className:"cp-summary cp-summary-root"}),this.domElement.appendChild(this.summaryElement);const s=o("span",{},[e.title||"ControlPanel"]);this.summaryElement.appendChild(s),this.stats=new ut,this.summaryElement.appendChild(this.stats.domElement);let i=!1,a=0,r=0,l=0,p=0;this.summaryElement.addEventListener("mousedown",c=>{if(c.target!==this.summaryElement&&c.target!==s)return;i=!0,a=c.clientX,r=c.clientY;const g=this.domElement.getBoundingClientRect();l=g.left,p=g.top,c.preventDefault()}),document.addEventListener("mousemove",c=>{if(!i)return;const g=c.clientX-a,y=c.clientY-r,w=l+g,A=p+y;this.domElement.style.left=`${w}px`,this.domElement.style.top=`${A}px`,this.domElement.style.right="auto",this.domElement.style.bottom="auto"}),document.addEventListener("mouseup",()=>{i&&(i=!1,this.savePositionAndSize())}),new ResizeObserver(()=>{i||this.savePositionAndSize()}).observe(this.domElement),this.restorePositionAndSize(),this.contentElement=o("div",{className:"cp-content"}),this.domElement.appendChild(this.contentElement);const m=this.addFolder("_Signals"),b={audioInput:null,fftSize:2048};m.addRadio(b,"audioInput",{label:"Audio Signal",options:["microphone","browser"]}).onChange(c=>{E.setInput(c)}),m.addSelect(b,"fftSize",{label:"FFT Size",options:[256,512,1024,2048]}).onChange(c=>{E.setFFTSize(c)}),m.addRange(E,"smoothingTimeConstant",{min:0,max:.99,step:.01,label:"Smoothing"}).onChange(c=>{E.analyser.smoothingTimeConstant=c}),m.addRange(E,"spectrumBoost",{min:1,max:5,step:.1,label:"Compression"}),t?t.appendChild(this.domElement):document.body.appendChild(this.domElement);const v=e.title||"ControlPanel";this.presetStoragePrefix=`cp-presets-${v}-`;const S=this.addFolder("_User Presets"),T=()=>{const c=["Default"];if(typeof localStorage>"u")return c;for(let g=0;g<localStorage.length;g++){const y=localStorage.key(g);if(y&&y.startsWith(this.presetStoragePrefix)){const w=y.substring(this.presetStoragePrefix.length);w!=="Default"&&!c.includes(w)&&c.push(w)}}return c.sort()},f={selected:"Default",save:()=>{const c=prompt("Preset Name:",f.selected);if(c){if(c==="Default"){alert("Cannot overwrite Default preset");return}const g=this.presetStoragePrefix+c;this.saveToLocalStorage(g);const y=T();C.setOptions(y),f.selected=c,C.setValue(c)}},load:()=>{const c=f.selected,g=this.presetStoragePrefix+c;this.loadFromLocalStorage(g),f.selected=c,C.setValue(c)},delete:()=>{if(f.selected==="Default"){alert("Cannot delete Default preset");return}if(confirm(`Delete preset "${f.selected}"?`)){const c=this.presetStoragePrefix+f.selected;localStorage.removeItem(c);const g=T();C.setOptions(g),f.selected="Default",C.setValue("Default"),this.reset()}},export:()=>{const c=this.save(),g=O=>{const P={controllers:{},folders:{}};for(const[V,q]of Object.entries(O.controllers))V.startsWith("_")||(P.controllers[V]=q);for(const[V,q]of Object.entries(O.folders))V.startsWith("_")||(P.folders[V]=g(q));return P},y=g(c),w={_presetName:f.selected||"CustomPreset",_exportDate:new Date().toISOString(),_instructions:"To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",...y},A=JSON.stringify(w,null,2),I=new Blob([A],{type:"application/json"}),M=URL.createObjectURL(I),x=document.createElement("a");x.href=M;const k=new Date().toISOString().split("T")[0],rt=f.selected.replace(/[^a-z0-9]/gi,"-").toLowerCase();x.download=`${v.toLowerCase()}-preset-${rt}-${k}.json`,document.body.appendChild(x),x.click(),document.body.removeChild(x),URL.revokeObjectURL(M)},import:()=>{const c=document.createElement("input");c.type="file",c.accept=".json",c.onchange=g=>{const y=g.target.files?.[0];if(!y)return;const w=new FileReader;w.onload=A=>{try{const I=A.target?.result,M=JSON.parse(I),x={controllers:M.controllers||{},folders:M.folders||{}};if(!x.controllers||!x.folders){alert("Invalid preset file: missing 'controllers' or 'folders'");return}this.load(x);const k=M._presetName||"ImportedPreset";if(confirm(`Preset loaded! Save as "${k}" to User Presets?`)){const O=this.presetStoragePrefix+k;this.saveToLocalStorage(O);const P=T();C.setOptions(P),f.selected=k,C.setValue(k)}}catch(I){alert(`Failed to import preset: ${I instanceof Error?I.message:"Invalid JSON"}`),console.error("Import error:",I)}},w.readAsText(y)},c.click()}},B=T(),C=S.addSelect(f,"selected",{label:"Preset",options:B});S.addButton("Load",()=>f.load()),S.addButton("Save",()=>f.save()),S.addButton("Delete",()=>f.delete()),S.addButton("Export",()=>f.export()),S.addButton("Import",()=>f.import())}saveToLocalStorage(t){const e=this.save();try{localStorage.setItem(t,JSON.stringify(e))}catch(s){console.warn("ControlPanel: Failed to save to localStorage",s)}}loadFromLocalStorage(t){try{const e=localStorage.getItem(t);if(e){const s=JSON.parse(e);this.load(s)}}catch(e){console.warn("ControlPanel: Failed to load from localStorage",e)}}saveDefaultPreset(){const t=this.presetStoragePrefix+"Default";this.save(),this.saveToLocalStorage(t)}savePositionAndSize(){const t=this.domElement.getBoundingClientRect(),e=`cp-position-${this.presetStoragePrefix}`,s={left:t.left,top:t.top,width:this.domElement.offsetWidth,height:this.domElement.offsetHeight};try{sessionStorage.setItem(e,JSON.stringify(s))}catch(i){console.warn("Failed to save panel position/size",i)}}restorePositionAndSize(){const t=`cp-position-${this.presetStoragePrefix}`;try{const e=sessionStorage.getItem(t);if(e){const s=JSON.parse(e);this.domElement.style.left=`${s.left}px`,this.domElement.style.top=`${s.top}px`,this.domElement.style.right="auto",this.domElement.style.bottom="auto",this.domElement.style.width=`${s.width}px`,this.domElement.style.height=`${s.height}px`}}catch(e){console.warn("Failed to restore panel position/size",e)}}destroy(){this.stats.destroy(),this.domElement.remove(),this.controllers=[],this.folders=[]}}h.ArrayController=at,h.AudioSignals=H,h.BooleanController=tt,h.ButtonController=Q,h.ColorController=st,h.ControlPanel=mt,h.ControlPanelContainer=D,h.Controller=d,h.Folder=ot,h.GradientController=nt,h.MathSignals=_,h.MidiSignals=U,h.NumberController=Y,h.RadioController=et,h.RangeController=Z,h.SelectController=K,h.audioSignals=E,h.mathSignals=J,h.midiSignals=W,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAqZA,wBAAgB,YAAY,SAS3B"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AA8YA,wBAAgB,YAAY,SAS3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalmeadow/control-panel",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "description": "A minimalist, framework-agnostic control panel GUI",
   "author": "Digital Meadow <inbox@digitalmeadow.studio> (https://digitalmeadow.studio)",