@digitalmeadow/control-panel 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,3 +1,291 @@
+const R = `
+.cp-root {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  width: 280px;
+  max-height: 90vh;
+  overflow: auto;
+  background: transparent;
+  color: #fff;
+  mix-blend-mode: exclusion;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
+  font-size: 10px;
+  line-height: 1.2;
+  padding: 8px;
+  z-index: 100;
+}
+
+.cp-root::-webkit-scrollbar {
+  width: 1px;
+}
+.cp-root::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cp-root::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.cp-summary {
+  cursor: pointer;
+  user-select: none;
+  font-weight: bold;
+  outline: none;
+}
+
+.cp-summary-root {
+  position: sticky;
+  top: 0;
+}
+
+.cp-stats {
+  float: right;
+  font-weight: normal;
+  opacity: 0.6;
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+
+.cp-content {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cp-folder {
+  width: 100%;
+}
+
+.cp-folder-content {
+  margin: 0 0 6px 0;
+  padding: 4px 0 0 9px;
+}
+
+.cp-controller {
+  display: flex;
+}
+
+.cp-label {
+  margin: auto 0;
+  width: 50%;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  padding-right: 8px;
+  opacity: 0.8;
+}
+
+.cp-input-number {
+  width: 50%;
+  background: transparent;
+  border: 1px solid #fff;
+  color: inherit;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.cp-input-number:focus {
+  outline: none;
+  border-color: #fff;
+  background: transparent;
+}
+
+.cp-select {
+  width: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  border: none;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.cp-checkbox {
+  margin: auto 0;
+}
+
+.cp-button {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.3);
+  border: none;
+  padding: 4px 2px;
+  border-radius: 2px;
+  cursor: pointer;
+  text-align: center;
+  font-family: inherit;
+  font-size: inherit;
+  transition: background 0.1s;
+}
+
+.cp-button:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.cp-button:active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(1px);
+}
+
+.cp-controller[data-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.cp-controller-details {
+  width: 50%;
+}
+
+.cp-controller-summary {
+  cursor: pointer;
+  outline: none;
+}
+
+.cp-controller-summary-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: calc(100% - 16px);
+  vertical-align: middle;
+}
+
+.cp-input-range {
+  -webkit-appearance: none;
+  flex: 1;
+  min-width: 0;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.3);
+  margin: 0;
+  vertical-align: middle;
+  cursor: grab;
+}
+.cp-input-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 8px;
+  border-radius: 1px;
+  background: #fff;
+  cursor: grab;
+}
+.cp-input-range::-moz-range-thumb {
+  width: 4px;
+  height: 16px;
+  background: #fff;
+  cursor: grab;
+}
+
+.cp-input-range:active {
+  cursor: grabbing;
+}
+
+.cp-value-display {
+  min-width: 24px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.9em;
+  opacity: 0.8;
+  user-select: none;
+}
+
+.cp-number-settings {
+  margin-top: 4px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cp-separator {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  margin: 4px 0;
+  width: 100%;
+}
+
+.cp-setting-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cp-setting-label {
+  width: 50%;
+  font-size: 0.9em;
+  opacity: 0.7;
+}
+
+.cp-input-small {
+  width: 50%;
+}
+
+.cp-radios {
+  width: 50%;
+  display: flex;
+  gap: 2px;
+}
+
+.cp-radio {
+  flex: 1;
+  font-size: 0.9em;
+  padding: 4px 2px;
+  height: 100%;
+}
+
+.cp-radio[data-active="true"] {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #fff;
+  font-weight: bold;
+}
+
+.cp-button-delete {
+  width: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.cp-input-color {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  outline: none;
+
+  isolation: isolate;
+  mix-blend-mode: normal;
+  cursor: pointer;
+}
+
+.cp-color-swatch {
+  width: 10px;
+  height: 10px;
+  margin-right: 8px;
+}
+
+.cp-stops-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+`;
+let V = !1;
+function j() {
+  if (V) return;
+  const n = document.createElement("style");
+  n.id = "control-panel-styles", n.textContent = R, document.head.appendChild(n), V = !0;
+}
 function r(n, t = {}, e = []) {
   const i = document.createElement(n);
   for (const [s, a] of Object.entries(t))
@@ -16,13 +304,13 @@ function B(n) {
   );
   return t.addEventListener("click", n), t;
 }
-function R(n) {
+function $(n) {
   return n.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUpperCase()).trim();
 }
 function D(n, t, e) {
   return Math.min(Math.max(n, t), e);
 }
-function j(n, t, e) {
+function q(n, t, e) {
   if (t.length !== e.length)
     throw new Error("Input and output ranges must have the same length");
   if (t.length < 2)
@@ -34,10 +322,10 @@ function j(n, t, e) {
     return e[e.length - 1];
   if (i === 0 && n < t[0])
     return e[0];
-  const s = t[i], a = t[i + 1], o = e[i], h = e[i + 1];
-  return (n - s) / (a - s) * (h - o) + o;
+  const s = t[i], a = t[i + 1], o = e[i], c = e[i + 1];
+  return (n - s) / (a - s) * (c - o) + o;
 }
-class z {
+class H {
   constructor() {
     this.source = null, this.stream = null, this.fftSize = 2048, this.smoothingTimeConstant = 0.92, this.spectrumBoost = 2, this.levels = {
       bass: 0,
@@ -75,18 +363,18 @@ class z {
   }
   update() {
     if (this.analyser.getByteFrequencyData(this.dataArray), this.analyser.getByteTimeDomainData(this.waveformArray), this.spectrumBoost !== 1) {
-      const p = this.dataArray.length;
-      for (let c = 0; c < p; c++) {
-        const u = 1 + c / p * (this.spectrumBoost - 1);
-        this.dataArray[c] = Math.min(255, this.dataArray[c] * u);
+      const h = this.dataArray.length;
+      for (let p = 0; p < h; p++) {
+        const u = 1 + p / h * (this.spectrumBoost - 1);
+        this.dataArray[p] = Math.min(255, this.dataArray[p] * u);
       }
     }
-    const t = [2, 10], e = [10, 150], i = [150, 600], s = this.getAverage(t[0], t[1]), a = this.getAverage(e[0], e[1]), o = this.getAverage(i[0], i[1]), h = this.getAverage(0, i[1]);
-    this.processLevel("bass", s), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", h);
+    const t = [2, 10], e = [10, 150], i = [150, 600], s = this.getAverage(t[0], t[1]), a = this.getAverage(e[0], e[1]), o = this.getAverage(i[0], i[1]), c = this.getAverage(0, i[1]);
+    this.processLevel("bass", s), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", c);
   }
   processLevel(t, e) {
     this.peaks[t] -= 5e-4, this.peaks[t] = D(this.peaks[t], 0.1, 1), e > this.peaks[t] && (this.peaks[t] = e), this.levels[t] = D(
-      j(e, [0, this.peaks[t]], [0, 1]),
+      q(e, [0, this.peaks[t]], [0, 1]),
       0,
       1
     );
@@ -103,8 +391,8 @@ class z {
     return () => this.levels[t];
   }
 }
-const x = new z();
-class $ {
+const C = new H();
+class U {
   constructor() {
     this.midiAccess = null, this.values = /* @__PURE__ */ new Map(), this.isListening = !1, this.resolveListen = null, this.listeningCallback = null, this.init();
   }
@@ -131,8 +419,8 @@ class $ {
     this.values.set(a, o), this.isListening && this.resolveListen && o > 0 && (this.resolveListen(a), this.isListening = !1, this.resolveListen = null, this.listeningCallback && this.listeningCallback());
   }
   getIdFromMessage(t) {
-    const e = t.data, [i, s] = e, a = i & 240, o = t.currentTarget.name || "unknown", h = a === 144 || a === 128 ? "note" : "ctrl", p = o.replace(/[^a-zA-Z0-9]/g, "");
-    return `${s}_${h}_${p}`;
+    const e = t.data, [i, s] = e, a = i & 240, o = t.currentTarget.name || "unknown", c = a === 144 || a === 128 ? "note" : "ctrl", h = o.replace(/[^a-zA-Z0-9]/g, "");
+    return `${s}_${c}_${h}`;
   }
   normalizeValue(t) {
     const [e, i, s] = t, a = e & 240;
@@ -150,10 +438,10 @@ class $ {
     return () => this.values.get(t) ?? 0;
   }
 }
-const q = new $(), M = class M {
+const _ = new U(), k = class k {
   constructor(t, e, i = {}) {
     this.changeFns = /* @__PURE__ */ new Set(), this.object = t, this.property = e, this.key = i.id ?? e, this.initialValue = this.object[this.property], this.domElement = r("div", { className: "cp-controller" });
-    const s = i.label ?? R(e), a = r("label", { className: "cp-label" }, [
+    const s = i.label ?? $(e), a = r("label", { className: "cp-label" }, [
       String(s)
     ]);
     a.setAttribute("title", String(s)), this.domElement.appendChild(a), i.disabled && this.domElement.setAttribute("data-disabled", "true");
@@ -184,8 +472,8 @@ const q = new $(), M = class M {
     this.domElement.appendChild(t);
   }
 };
-M.audio = x, M.midi = q;
-let m = M;
+k.audio = C, k.midi = _;
+let m = k;
 const O = {
   linear: (n) => n,
   quadIn: (n) => n * n,
@@ -259,9 +547,9 @@ class P {
     ]), o = r("select", {
       className: "cp-select cp-input-small"
     });
-    return e.forEach((h) => {
-      const p = r("option", { value: h }, [h]);
-      o.appendChild(p);
+    return e.forEach((c) => {
+      const h = r("option", { value: c }, [c]);
+      o.appendChild(h);
     }), o.addEventListener("change", () => i(o.value)), s.appendChild(a), s.appendChild(o), { row: s, select: o };
   }
   setSignalType(t) {
@@ -303,7 +591,7 @@ class P {
     this.setSignalType("none"), this.setEase("linear"), this.setBehaviour("forward"), this.setMidiId(null);
   }
 }
-class H extends m {
+class W extends m {
   constructor(t, e, i = {}) {
     super(t, e, i), this.pingPongDirection = 1, this.min = 0, this.max = 100, this.initialOptions = i, this.min = i.min ?? 0, this.max = i.max ?? 100;
     const s = r("details", {
@@ -331,29 +619,29 @@ class H extends m {
       className: "cp-controller-summary-content"
     });
     o.appendChild(this.input), o.appendChild(this.display), a.appendChild(o), s.appendChild(a);
-    const h = r("div", { className: "cp-number-settings" }), p = this.createSetting(
+    const c = r("div", { className: "cp-number-settings" }), h = this.createSetting(
       "min",
       i.min,
       (l) => this.setMin(l)
     );
-    this.minInput = p.input, h.appendChild(p.row);
-    const c = this.createSetting(
+    this.minInput = h.input, c.appendChild(h.row);
+    const p = this.createSetting(
       "max",
       i.max,
       (l) => this.setMax(l)
     );
-    this.maxInput = c.input, h.appendChild(c.row);
+    this.maxInput = p.input, c.appendChild(p.row);
     const y = this.createSetting(
       "step",
       i.step,
       (l) => this.setStep(l)
     );
-    this.stepInput = y.input, h.appendChild(y.row);
+    this.stepInput = y.input, c.appendChild(y.row);
     const u = r("hr", { className: "cp-separator" });
-    h.appendChild(u), this.signalHandler = new P({
-      container: h,
+    c.appendChild(u), this.signalHandler = new P({
+      container: c,
       onChange: (l, d) => this.applySignal(l, d)
-    }), s.appendChild(h), this.appendWidget(s);
+    }), s.appendChild(c), this.appendWidget(s);
   }
   // Setters
   setMin(t) {
@@ -434,7 +722,7 @@ class H extends m {
     ), this.setStep(this.initialOptions.step), this.signalHandler?.reset();
   }
 }
-class U extends m {
+class J extends m {
   constructor(t, e, i) {
     super(t, e, i), this.optionValues = [], this.select = r("select", { className: "cp-select" }), this.optionValues = i.options || [], this.optionValues.forEach((s, a) => {
       const o = r("option", { value: String(a) }, [
@@ -459,7 +747,7 @@ class U extends m {
     t !== -1 && (this.select.value = String(t));
   }
 }
-class _ extends m {
+class G extends m {
   constructor(t, e, i = {}) {
     const s = { action: e };
     super(s, "action", i);
@@ -474,7 +762,7 @@ class _ extends m {
   updateDisplay() {
   }
 }
-class W extends m {
+class Z extends m {
   constructor(t, e, i = {}) {
     super(t, e, i), this.input = r("input", {
       type: "checkbox",
@@ -487,7 +775,7 @@ class W extends m {
     this.input.checked = this.value;
   }
 }
-class J extends m {
+class K extends m {
   constructor(t, e, i) {
     super(t, e, i), this.buttons = [], this.optionValues = [], this.container = r("div", { className: "cp-radios" }), this.optionValues = i.options || [], this.optionValues.forEach((s) => {
       const a = r("button", { className: "cp-button cp-radio" }, [
@@ -505,7 +793,7 @@ class J extends m {
     });
   }
 }
-class G extends m {
+class Y extends m {
   constructor(t, e, i = {}) {
     super(t, e, i), this.input = r("input", {
       type: "color",
@@ -530,21 +818,21 @@ function F(n) {
     parseInt(e[3], 16)
   ] : [0, 0, 0];
 }
-function Z(n, t, e) {
+function Q(n, t, e) {
   return "#" + ((1 << 24) + (Math.round(n) << 16) + (Math.round(t) << 8) + Math.round(e)).toString(16).slice(1);
 }
 function w(n) {
   const t = n / 255;
   return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
 }
-function A(n) {
+function L(n) {
   return n <= 31308e-7 ? n * 12.92 * 255 : (1.055 * Math.pow(n, 1 / 2.4) - 0.055) * 255;
 }
-function K(n, t, e) {
-  const [i, s, a] = F(n), [o, h, p] = F(t), c = w(i), y = w(s), u = w(a), l = w(o), d = w(h), f = w(p), v = c + e * (l - c), I = y + e * (d - y), S = u + e * (f - u), C = A(v), g = A(I), b = A(S);
-  return Z(C, g, b);
+function X(n, t, e) {
+  const [i, s, a] = F(n), [o, c, h] = F(t), p = w(i), y = w(s), u = w(a), l = w(o), d = w(c), f = w(h), b = p + e * (l - p), I = y + e * (d - y), v = u + e * (f - u), x = L(b), g = L(I), S = L(v);
+  return Q(x, g, S);
 }
-class Q extends m {
+class tt extends m {
   constructor(t, e, i = {}) {
     super(t, e, i), this.stops = [], this.pingPongDirection = 1, this.animationT = 0, this.manualPosition = 0, this.initialOptions = i, this.stops = i.stops || [
       { color: "#000000", position: 0 },
@@ -565,25 +853,25 @@ class Q extends m {
       { className: "cp-value-display" },
       [String(this.value)]
     ), o.appendChild(this.displayColor), o.appendChild(this.displayText), a.appendChild(o), s.appendChild(a);
-    const h = r("div", { className: "cp-number-settings" });
+    const c = r("div", { className: "cp-number-settings" });
     this.stopsContainer = r("div", {
       className: "cp-stops-container"
-    }), this.renderStops(), h.appendChild(this.stopsContainer);
-    const p = r(
+    }), this.renderStops(), c.appendChild(this.stopsContainer);
+    const h = r(
       "button",
       {
         className: "cp-button"
       },
       ["+ Add Stop"]
     );
-    p.addEventListener("click", () => {
+    h.addEventListener("click", () => {
       this.stops.push({ color: "#ffffff", position: 0.5 }), this.sortStops(), this.renderStops(), this.updateOutput();
-    }), h.appendChild(p);
-    const c = r("hr", { className: "cp-separator" });
-    h.appendChild(c), this.signalHandler = new P({
-      container: h,
+    }), c.appendChild(h);
+    const p = r("hr", { className: "cp-separator" });
+    c.appendChild(p), this.signalHandler = new P({
+      container: c,
       onChange: (y, u) => this.applySignal(y, u)
-    }), s.appendChild(h), this.appendWidget(s), this.updateOutput(0);
+    }), s.appendChild(c), this.appendWidget(s), this.updateOutput(0);
   }
   sortStops() {
     this.stops.sort((t, e) => t.position - e.position);
@@ -595,8 +883,8 @@ class Q extends m {
         className: "cp-input-color",
         value: t.color
       });
-      s.addEventListener("input", (h) => {
-        t.color = h.target.value, this.updateOutput();
+      s.addEventListener("input", (c) => {
+        t.color = c.target.value, this.updateOutput();
       });
       const a = r("input", {
         type: "number",
@@ -606,9 +894,9 @@ class Q extends m {
         step: "0.01",
         value: String(t.position)
       });
-      a.addEventListener("change", (h) => {
-        let p = parseFloat(h.target.value);
-        isNaN(p) && (p = 0), t.position = Math.max(0, Math.min(1, p)), this.sortStops(), this.renderStops(), this.updateOutput();
+      a.addEventListener("change", (c) => {
+        let h = parseFloat(c.target.value);
+        isNaN(h) && (h = 0), t.position = Math.max(0, Math.min(1, h)), this.sortStops(), this.renderStops(), this.updateOutput();
       });
       const o = B(() => {
         this.stops.splice(e, 1), this.renderStops(), this.updateOutput();
@@ -632,8 +920,8 @@ class Q extends m {
       for (let i = 0; i < this.stops.length - 1; i++) {
         const s = this.stops[i], a = this.stops[i + 1];
         if (t >= s.position && t <= a.position) {
-          const o = a.position - s.position, h = o === 0 ? 0 : (t - s.position) / o;
-          e = K(s.color, a.color, h);
+          const o = a.position - s.position, c = o === 0 ? 0 : (t - s.position) / o;
+          e = X(s.color, a.color, c);
           break;
         }
       }
@@ -672,7 +960,7 @@ class Q extends m {
     ], this.sortStops(), this.renderStops(), this.signalHandler?.reset(), this.updateOutput(0);
   }
 }
-class X extends m {
+class et extends m {
   constructor(t, e, i = {}) {
     super(t, e, i), this.items = [], this.initialOptions = i, this.itemType = i.itemType || "string", this.items = this.parseValue(this.value);
     const s = r("details", {
@@ -681,15 +969,15 @@ class X extends m {
       className: "cp-controller-summary"
     }), o = r("div", {
       className: "cp-controller-summary-content"
-    }), h = r("span", { className: "cp-value-display" }, [
+    }), c = r("span", { className: "cp-value-display" }, [
       `${this.items.length} items`
     ]);
-    o.appendChild(h), a.appendChild(o), s.appendChild(a);
-    const p = r("div", { className: "cp-number-settings" });
+    o.appendChild(c), a.appendChild(o), s.appendChild(a);
+    const h = r("div", { className: "cp-number-settings" });
     this.itemsContainer = r("div", {
       className: "cp-stops-container"
-    }), this.renderItems(), p.appendChild(this.itemsContainer);
-    const c = r(
+    }), this.renderItems(), h.appendChild(this.itemsContainer);
+    const p = r(
       "button",
       {
         className: "cp-button cp-input-small",
@@ -697,9 +985,9 @@ class X extends m {
       },
       ["+ Add Item"]
     );
-    c.addEventListener("click", () => {
+    p.addEventListener("click", () => {
       this.addItem();
-    }), p.appendChild(c), s.appendChild(p), this.appendWidget(s);
+    }), h.appendChild(p), s.appendChild(h), this.appendWidget(s);
   }
   parseValue(t) {
     return !t || t.trim() === "" ? [] : t.split(",").map((e) => e.trim());
@@ -768,7 +1056,7 @@ class X extends m {
     this.items = this.parseValue(t), this.renderItems(), this.updateValue();
   }
 }
-class Y {
+class st {
   constructor() {
     this.frames = 0, this.pollingInterval = 1e3, this.prevTime = performance.now(), this.render = () => {
       this.frames++;
@@ -786,44 +1074,44 @@ class Y {
     cancelAnimationFrame(this.rafId);
   }
 }
-class k {
+class z {
   constructor() {
     this.controllers = [], this.folders = [];
   }
   addNumber(t, e, i = {}) {
-    const s = new H(t, e, i);
+    const s = new W(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addSelect(t, e, i = {}) {
-    const s = new U(t, e, i);
+    const s = new J(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addBoolean(t, e, i = {}) {
-    const s = new W(t, e, i);
+    const s = new Z(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addButton(t, e, i = {}) {
-    const s = new _(t, e, i);
+    const s = new G(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addRadio(t, e, i = {}) {
-    const s = new J(t, e, i);
+    const s = new K(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addColor(t, e, i = {}) {
-    const s = new G(t, e, i);
+    const s = new Y(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addGradient(t, e, i = {}) {
-    const s = new Q(t, e, i);
+    const s = new tt(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addArray(t, e, i = {}) {
-    const s = new X(t, e, i);
+    const s = new et(t, e, i);
     return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
   }
   addFolder(t) {
-    const e = new tt(t);
+    const e = new it(t);
     return this.contentElement.appendChild(e.domElement), this.folders.push(e), e;
   }
   save() {
@@ -861,7 +1149,7 @@ class k {
       t.reset();
   }
 }
-class tt extends k {
+class it extends z {
   constructor(t) {
     super(), this.title = t, this.domElement = r("details", {
       className: "cp-folder",
@@ -879,9 +1167,9 @@ class tt extends k {
     );
   }
 }
-class et extends k {
+class nt extends z {
   constructor(t, e = {}) {
-    super(), this.domElement = r("details", {
+    super(), j(), this.domElement = r("details", {
       className: "cp-root",
       open: !0
     }), this.summaryElement = r("summary", {
@@ -890,7 +1178,7 @@ class et extends k {
     const i = r("span", {}, [
       e.title || "ControlPanel"
     ]);
-    this.summaryElement.appendChild(i), this.stats = new Y(), this.summaryElement.appendChild(this.stats.domElement), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
+    this.summaryElement.appendChild(i), this.stats = new st(), this.summaryElement.appendChild(this.stats.domElement), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
     const s = this.addFolder("_Signals"), a = {
       audioInput: null,
       fftSize: 2048
@@ -899,20 +1187,20 @@ class et extends k {
       label: "Audio Signal",
       options: ["microphone", "browser"]
     }).onChange((l) => {
-      x.setInput(l);
+      C.setInput(l);
     }), s.addSelect(a, "fftSize", {
       label: "FFT Size",
       options: [256, 512, 1024, 2048]
     }).onChange((l) => {
-      x.setFFTSize(l);
-    }), s.addNumber(x, "smoothingTimeConstant", {
+      C.setFFTSize(l);
+    }), s.addNumber(C, "smoothingTimeConstant", {
       min: 0,
       max: 0.99,
       step: 0.01,
       label: "Smoothing"
     }).onChange((l) => {
-      x.analyser.smoothingTimeConstant = l;
-    }), s.addNumber(x, "spectrumBoost", {
+      C.analyser.smoothingTimeConstant = l;
+    }), s.addNumber(C, "spectrumBoost", {
       min: 1,
       max: 5,
       step: 0.1,
@@ -920,21 +1208,21 @@ class et extends k {
     }), t ? t.appendChild(this.domElement) : document.body.appendChild(this.domElement);
     const o = e.title || "ControlPanel";
     this.presetStoragePrefix = `cp-presets-${o}-`;
-    const h = this.addFolder("_User Presets"), p = () => {
+    const c = this.addFolder("_User Presets"), h = () => {
       const l = ["Default"];
       if (typeof localStorage > "u") return l;
       for (let d = 0; d < localStorage.length; d++) {
         const f = localStorage.key(d);
         if (f && f.startsWith(this.presetStoragePrefix)) {
-          const v = f.substring(this.presetStoragePrefix.length);
-          v !== "Default" && !l.includes(v) && l.push(v);
+          const b = f.substring(this.presetStoragePrefix.length);
+          b !== "Default" && !l.includes(b) && l.push(b);
         }
       }
       return l.sort();
-    }, c = {
+    }, p = {
       selected: "Default",
       save: () => {
-        const l = prompt("Preset Name:", c.selected);
+        const l = prompt("Preset Name:", p.selected);
         if (l) {
           if (l === "Default") {
             alert("Cannot overwrite Default preset");
@@ -942,24 +1230,24 @@ class et extends k {
           }
           const d = this.presetStoragePrefix + l;
           this.saveToLocalStorage(d);
-          const f = p();
-          u.setOptions(f), c.selected = l, u.setValue(l);
+          const f = h();
+          u.setOptions(f), p.selected = l, u.setValue(l);
         }
       },
       load: () => {
-        const l = c.selected, d = this.presetStoragePrefix + l;
-        this.loadFromLocalStorage(d), c.selected = l, u.setValue(l);
+        const l = p.selected, d = this.presetStoragePrefix + l;
+        this.loadFromLocalStorage(d), p.selected = l, u.setValue(l);
       },
       delete: () => {
-        if (c.selected === "Default") {
+        if (p.selected === "Default") {
           alert("Cannot delete Default preset");
           return;
         }
-        if (confirm(`Delete preset "${c.selected}"?`)) {
-          const l = this.presetStoragePrefix + c.selected;
+        if (confirm(`Delete preset "${p.selected}"?`)) {
+          const l = this.presetStoragePrefix + p.selected;
           localStorage.removeItem(l);
-          const d = p();
-          u.setOptions(d), c.selected = "Default", u.setValue("Default"), this.reset();
+          const d = h();
+          u.setOptions(d), p.selected = "Default", u.setValue("Default"), this.reset();
         }
       },
       export: () => {
@@ -968,34 +1256,34 @@ class et extends k {
             controllers: {},
             folders: {}
           };
-          for (const [E, L] of Object.entries(T.controllers))
-            E.startsWith("_") || (N.controllers[E] = L);
-          for (const [E, L] of Object.entries(
+          for (const [E, M] of Object.entries(T.controllers))
+            E.startsWith("_") || (N.controllers[E] = M);
+          for (const [E, M] of Object.entries(
             T.folders
           ))
-            E.startsWith("_") || (N.folders[E] = d(L));
+            E.startsWith("_") || (N.folders[E] = d(M));
           return N;
-        }, f = d(l), v = {
-          _presetName: c.selected || "CustomPreset",
+        }, f = d(l), b = {
+          _presetName: p.selected || "CustomPreset",
           _exportDate: (/* @__PURE__ */ new Date()).toISOString(),
           _instructions: "To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",
           ...f
-        }, I = JSON.stringify(v, null, 2), S = new Blob([I], { type: "application/json" }), C = URL.createObjectURL(S), g = document.createElement("a");
-        g.href = C;
-        const b = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], V = c.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
-        g.download = `${o.toLowerCase()}-preset-${V}-${b}.json`, document.body.appendChild(g), g.click(), document.body.removeChild(g), URL.revokeObjectURL(C);
+        }, I = JSON.stringify(b, null, 2), v = new Blob([I], { type: "application/json" }), x = URL.createObjectURL(v), g = document.createElement("a");
+        g.href = x;
+        const S = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], A = p.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
+        g.download = `${o.toLowerCase()}-preset-${A}-${S}.json`, document.body.appendChild(g), g.click(), document.body.removeChild(g), URL.revokeObjectURL(x);
       },
       import: () => {
         const l = document.createElement("input");
         l.type = "file", l.accept = ".json", l.onchange = (d) => {
           const f = d.target.files?.[0];
           if (!f) return;
-          const v = new FileReader();
-          v.onload = (I) => {
+          const b = new FileReader();
+          b.onload = (I) => {
             try {
-              const S = I.target?.result, C = JSON.parse(S), g = {
-                controllers: C.controllers || {},
-                folders: C.folders || {}
+              const v = I.target?.result, x = JSON.parse(v), g = {
+                controllers: x.controllers || {},
+                folders: x.folders || {}
               };
               if (!g.controllers || !g.folders) {
                 alert(
@@ -1004,28 +1292,28 @@ class et extends k {
                 return;
               }
               this.load(g);
-              const b = C._presetName || "ImportedPreset";
+              const S = x._presetName || "ImportedPreset";
               if (confirm(
-                `Preset loaded! Save as "${b}" to User Presets?`
+                `Preset loaded! Save as "${S}" to User Presets?`
               )) {
-                const T = this.presetStoragePrefix + b;
+                const T = this.presetStoragePrefix + S;
                 this.saveToLocalStorage(T);
-                const N = p();
-                u.setOptions(N), c.selected = b, u.setValue(b);
+                const N = h();
+                u.setOptions(N), p.selected = S, u.setValue(S);
               }
-            } catch (S) {
+            } catch (v) {
               alert(
-                `Failed to import preset: ${S instanceof Error ? S.message : "Invalid JSON"}`
-              ), console.error("Import error:", S);
+                `Failed to import preset: ${v instanceof Error ? v.message : "Invalid JSON"}`
+              ), console.error("Import error:", v);
             }
-          }, v.readAsText(f);
+          }, b.readAsText(f);
         }, l.click();
       }
-    }, y = p(), u = h.addSelect(c, "selected", {
+    }, y = h(), u = c.addSelect(p, "selected", {
       label: "Preset",
       options: y
     });
-    h.addButton("Load", () => c.load()), h.addButton("Save / New", () => c.save()), h.addButton("Delete", () => c.delete()), h.addButton("Export JSON", () => c.export()), h.addButton("Import JSON", () => c.import());
+    c.addButton("Load", () => p.load()), c.addButton("Save / New", () => p.save()), c.addButton("Delete", () => p.delete()), c.addButton("Export JSON", () => p.export()), c.addButton("Import JSON", () => p.import());
   }
   saveToLocalStorage(t) {
     const e = this.save();
@@ -1055,18 +1343,20 @@ class et extends k {
   }
 }
 export {
-  X as ArrayController,
-  z as AudioSignals,
-  W as BooleanController,
-  _ as ButtonController,
-  G as ColorController,
-  et as ControlPanel,
+  et as ArrayController,
+  H as AudioSignals,
+  Z as BooleanController,
+  G as ButtonController,
+  Y as ColorController,
+  nt as ControlPanel,
+  z as ControlPanelContainer,
   m as Controller,
-  Q as GradientController,
-  $ as MidiSignals,
-  H as NumberController,
-  J as RadioController,
-  U as SelectController,
-  x as audioSignals,
-  q as midiSignals
+  it as Folder,
+  tt as GradientController,
+  U as MidiSignals,
+  W as NumberController,
+  K as RadioController,
+  J as SelectController,
+  C as audioSignals,
+  _ as midiSignals
 };