@digitalmeadow/control-panel 1.0.5 → 1.0.7

package/dist/index.js

@@ -1,25 +1,53 @@
-const z = `
+const W = `
 .cp-root {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  width: 280px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: min(280px, 90%);
   max-height: 90vh;
   overflow: auto;
   background: transparent;
+  resize: both;
   color: #fff;
-  mix-blend-mode: exclusion;
+  min-width: 200px;
+  min-height: 50px;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
     sans-serif;
   font-size: 10px;
   line-height: 1.2;
   padding: 8px;
-  z-index: 100;
+}
+
+/* Apply blend mode to all children except color inputs */
+.cp-root .cp-label, 
+.cp-root .cp-setting-label,
+.cp-root .cp-summary,
+.cp-root .cp-controller-summary,
+.cp-root .cp-separator,
+.cp-root .cp-value-display,
+.cp-root .cp-button,
+.cp-root .cp-input-number,
+.cp-root .cp-input-range,
+.cp-root .cp-select,
+.cp-root .cp-radio
+{
+  mix-blend-mode: difference;
+}
+
+.cp-root .cp-input-color,
+.cp-root .cp-color-swatch {
+  mix-blend-mode: normal;
+  isolation: isolate;
+}
+
+.cp-root:not([open]) .cp-summary-root {
+  opacity: 0.5;
 }
 
 .cp-root::-webkit-scrollbar {
   width: 1px;
+  height: 1px;
 }
 .cp-root::-webkit-scrollbar-track {
   background: transparent;
@@ -38,6 +66,7 @@ const z = `
 .cp-summary-root {
   position: sticky;
   top: 0;
+  cursor: grab;
 }
 
 .cp-stats {
@@ -83,7 +112,7 @@ const z = `
 .cp-input-number {
   width: 50%;
   background: transparent;
-  border: 1px solid #fff;
+  border: 1px solid rgba(255, 255, 255, 0.3);
   color: inherit;
   padding: 2px 4px;
   border-radius: 2px;
@@ -99,6 +128,7 @@ const z = `
 
 .cp-select {
   width: 50%;
+  color: inherit;
   background: rgba(255, 255, 255, 0.3);
   border: none;
   padding: 2px 4px;
@@ -113,6 +143,7 @@ const z = `
 
 .cp-button {
   width: 100%;
+  color: inherit;
   background: rgba(255, 255, 255, 0.3);
   border: none;
   padding: 4px 2px;
@@ -259,9 +290,6 @@ const z = `
   border: none;
   background: none;
   outline: none;
-
-  isolation: isolate;
-  mix-blend-mode: normal;
   cursor: pointer;
 }
 
@@ -277,11 +305,11 @@ const z = `
   gap: 4px;
 }
 `;
-let V = !1;
-function R() {
-  if (V) return;
+let B = !1;
+function _() {
+  if (B) return;
   const n = document.createElement("style");
-  n.id = "control-panel-styles", n.textContent = z, document.head.appendChild(n), V = !0;
+  n.id = "control-panel-styles", n.textContent = W, document.head.appendChild(n), B = !0;
 }
 function r(n, t = {}, e = []) {
   const s = document.createElement(n);
@@ -291,7 +319,7 @@ function r(n, t = {}, e = []) {
     typeof i == "string" ? s.appendChild(document.createTextNode(i)) : s.appendChild(i);
   return s;
 }
-function D(n) {
+function j(n) {
   const t = r(
     "button",
     {
@@ -301,13 +329,13 @@ function D(n) {
   );
   return t.addEventListener("click", n), t;
 }
-function j(n) {
+function J(n) {
   return n.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUpperCase()).trim();
 }
-function O(n, t, e) {
+function q(n, t, e) {
   return Math.min(Math.max(n, t), e);
 }
-function $(n, t, e) {
+function Y(n, t, e) {
   if (t.length !== e.length)
     throw new Error("Input and output ranges must have the same length");
   if (t.length < 2)
@@ -319,10 +347,10 @@ function $(n, t, e) {
     return e[e.length - 1];
   if (s === 0 && n < t[0])
     return e[0];
-  const i = t[s], a = t[s + 1], o = e[s], c = e[s + 1];
-  return (n - i) / (a - i) * (c - o) + o;
+  const i = t[s], a = t[s + 1], o = e[s], l = e[s + 1];
+  return (n - i) / (a - i) * (l - o) + o;
 }
-class U {
+class X {
   constructor() {
     this.source = null, this.stream = null, this.fftSize = 2048, this.smoothingTimeConstant = 0.82, this.spectrumBoost = 3, this.levels = {
       volume: 0,
@@ -360,18 +388,18 @@ class U {
   }
   update() {
     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 m = 1 + h / p * (this.spectrumBoost - 1);
-        this.dataArray[h] = Math.min(255, this.dataArray[h] * m);
+      const h = this.dataArray.length;
+      for (let p = 0; p < h; p++) {
+        const b = 1 + p / h * (this.spectrumBoost - 1);
+        this.dataArray[p] = Math.min(255, this.dataArray[p] * 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]), o = this.getAverage(s[0], s[1]), c = this.getAverage(0, s[1]);
-    this.processLevel("bass", i), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", c);
+    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]);
+    this.processLevel("bass", i), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", l);
   }
   processLevel(t, e) {
-    this.peaks[t] -= 5e-4, this.peaks[t] = O(this.peaks[t], 0.1, 1), e > this.peaks[t] && (this.peaks[t] = e), this.levels[t] = O(
-      $(e, [0, this.peaks[t]], [0, 1]),
+    this.peaks[t] -= 5e-4, this.peaks[t] = q(this.peaks[t], 0.1, 1), e > this.peaks[t] && (this.peaks[t] = e), this.levels[t] = q(
+      Y(e, [0, this.peaks[t]], [0, 1]),
       0,
       1
     );
@@ -388,8 +416,8 @@ class U {
     return () => this.levels[t];
   }
 }
-const C = new U();
-class H {
+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();
   }
@@ -416,8 +444,8 @@ class H {
     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, [s, i] = e, a = s & 240, o = t.currentTarget.name || "unknown", c = a === 144 || a === 128 ? "note" : "ctrl", p = o.replace(/[^a-zA-Z0-9]/g, "");
-    return `${i}_${c}_${p}`;
+    const e = t.data, [s, i] = e, a = s & 240, o = t.currentTarget.name || "unknown", l = a === 144 || a === 128 ? "note" : "ctrl", h = o.replace(/[^a-zA-Z0-9]/g, "");
+    return `${i}_${l}_${h}`;
   }
   normalizeValue(t) {
     const [e, s, i] = t, a = e & 240;
@@ -435,8 +463,8 @@ class H {
     return () => this.values.get(t) ?? 0;
   }
 }
-const W = new H();
-class _ {
+const Z = new G();
+class K {
   constructor() {
     this.configs = /* @__PURE__ */ new Map(), this.lastRandomUpdateTime = 0, this.currentRandomValue = 0, this.startTime = performance.now(), this.configs.set("constant", {
       frequency: 0.1,
@@ -530,10 +558,10 @@ class _ {
     this.startTime = performance.now(), this.lastRandomUpdateTime = 0, this.currentRandomValue = 0;
   }
 }
-const J = new _(), T = class T {
+const Q = new K(), P = class P {
   constructor(t, e, s = {}) {
     this.changeFns = /* @__PURE__ */ new Set(), this.object = t, this.property = e, this.key = s.id ?? e, this.initialValue = this.object[this.property], this.domElement = r("div", { className: "cp-controller" });
-    const i = s.label ?? j(e), a = r("label", { className: "cp-label" }, [
+    const i = s.label ?? J(e), a = r("label", { className: "cp-label" }, [
       String(i)
     ]);
     a.setAttribute("title", String(i)), this.domElement.appendChild(a), s.disabled && this.domElement.setAttribute("data-disabled", "true");
@@ -564,9 +592,9 @@ const J = new _(), T = class T {
     this.domElement.appendChild(t);
   }
 };
-T.audio = C, T.midi = W, T.math = J;
-let d = T;
-const P = {
+P.audio = M, P.midi = Z, P.math = Q;
+let u = P;
+const R = {
   linear: (n) => n,
   quadIn: (n) => n * n,
   quadOut: (n) => n * (2 - n),
@@ -581,24 +609,24 @@ const P = {
   sineOut: (n) => Math.sin(n * Math.PI / 2),
   sineInOut: (n) => -(Math.cos(Math.PI * n) - 1) / 2
 };
-class B {
+class H {
   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)()) : [
+        this.currentSignalType === "midi" ? this.currentMidiId && (e = u.midi.getSignal(this.currentMidiId)()) : [
           "constant",
           "sine",
           "sawtooth",
           "triangle",
           "square",
           "random"
-        ].includes(this.currentSignalType) ? e = d.math.getSignal(
+        ].includes(this.currentSignalType) ? e = u.math.getSignal(
           this.currentSignalType
-        )() : ["volume", "bass", "mids", "highs"].includes(this.currentSignalType) && (e = d.audio.getSignal(
+        )() : ["volume", "bass", "mids", "highs"].includes(this.currentSignalType) && (e = u.audio.getSignal(
           this.currentSignalType
         )());
-        const s = P[this.currentEase](e);
+        const s = R[this.currentEase](e);
         this.onChange(s, this.currentBehaviour), this.rafId = requestAnimationFrame(this.loop);
       }
     }, this.onChange = t.onChange, this.setupControllers(t.container);
@@ -637,11 +665,11 @@ class B {
       ["Learn"]
     ), this.midiBtn.addEventListener("click", async () => {
       if (this.midiBtn.textContent === "Listening...") {
-        d.midi.cancelListen(), this.setMidiId(null);
+        u.midi.cancelListen(), this.setMidiId(null);
         return;
       }
       this.midiBtn.textContent = "Listening...";
-      const o = await d.midi.listen();
+      const o = await u.midi.listen();
       this.setMidiId(o);
     }), this.midiRow.appendChild(s), this.midiRow.appendChild(this.midiBtn), t.appendChild(this.midiRow), this.mathParamsContainer = r("div", {
       style: "display: none; flex-direction: column; gap: 4px;"
@@ -654,7 +682,7 @@ class B {
     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(P),
+      Object.keys(R),
       (o) => this.setEase(o)
     );
     this.easeRow = a.row, this.easeSelect = a.select, this.easeRow.style.display = "none", this.easeSelect.value = this.currentEase, t.appendChild(this.easeRow);
@@ -665,15 +693,15 @@ class B {
     ]), o = r("select", {
       className: "cp-select cp-input-small"
     });
-    return e.forEach((c) => {
-      const p = r("option", { value: c }, [c]);
-      o.appendChild(p);
+    return e.forEach((l) => {
+      const h = r("option", { value: l }, [l]);
+      o.appendChild(h);
     }), o.addEventListener("change", () => s(o.value)), i.appendChild(a), i.appendChild(o), { row: i, select: o };
   }
   createNumberInput(t, e, s, i, a, o) {
-    const c = r("div", { className: "cp-setting-row" }), p = r("label", { className: "cp-setting-label" }, [
+    const l = r("div", { className: "cp-setting-row" }), h = r("label", { className: "cp-setting-label" }, [
       t
-    ]), h = r("input", {
+    ]), p = r("input", {
       className: "cp-input-number cp-input-small",
       type: "number",
       value: String(e),
@@ -681,52 +709,52 @@ class B {
       max: String(i),
       step: String(a)
     });
-    return h.addEventListener("input", () => {
-      const u = parseFloat(h.value);
-      isNaN(u) || o(u);
-    }), c.appendChild(p), c.appendChild(h), { row: c, input: h };
+    return p.addEventListener("input", () => {
+      const d = parseFloat(p.value);
+      isNaN(d) || o(d);
+    }), l.appendChild(h), l.appendChild(p), { row: l, input: p };
   }
   updateMathParams(t) {
     this.mathParamsContainer.innerHTML = "";
-    const e = d.math.getConfig(t);
+    const e = u.math.getConfig(t);
     let s = "Frequency", i = 0.1, a = 10, o = 0.1;
     t === "random" ? a = 30 : t === "constant" && (s = "Speed", i = 0.01, a = 2, o = 0.01);
-    const c = this.createNumberInput(
+    const l = this.createNumberInput(
       s,
       e.frequency,
       i,
       a,
       o,
-      (u) => d.math.setConfig(t, { frequency: u })
+      (d) => u.math.setConfig(t, { frequency: d })
     );
-    this.mathParamsContainer.appendChild(c.row);
-    const p = this.createNumberInput(
+    this.mathParamsContainer.appendChild(l.row);
+    const h = this.createNumberInput(
       "Amplitude",
       e.amplitude,
       0,
       2,
       0.1,
-      (u) => d.math.setConfig(t, { amplitude: u })
+      (d) => u.math.setConfig(t, { amplitude: d })
     );
-    this.mathParamsContainer.appendChild(p.row);
-    const h = this.createNumberInput(
+    this.mathParamsContainer.appendChild(h.row);
+    const p = this.createNumberInput(
       "Offset",
       e.offset,
       0,
       1,
       0.1,
-      (u) => d.math.setConfig(t, { offset: u })
+      (d) => u.math.setConfig(t, { offset: d })
     );
-    if (this.mathParamsContainer.appendChild(h.row), ["sine", "sawtooth", "triangle", "square"].includes(t)) {
-      const u = this.createNumberInput(
+    if (this.mathParamsContainer.appendChild(p.row), ["sine", "sawtooth", "triangle", "square"].includes(t)) {
+      const d = this.createNumberInput(
         "Phase",
         e.phase,
         0,
         1,
         0.01,
-        (m) => d.math.setConfig(t, { phase: m })
+        (b) => u.math.setConfig(t, { phase: b })
       );
-      this.mathParamsContainer.appendChild(u.row);
+      this.mathParamsContainer.appendChild(d.row);
     }
   }
   setSignalType(t) {
@@ -742,7 +770,7 @@ class B {
         "square",
         "random"
       ].includes(t), i = ["volume", "bass", "mids", "highs"].includes(t);
-      this.midiRow.style.display = e ? "flex" : "none", this.mathParamsContainer.style.display = s ? "flex" : "none", s && this.updateMathParams(t), this.easeRow.style.display = "flex", this.behaviourRow.style.display = "flex", i ? (this.currentMidiId = null, d.audio.ctx.state === "suspended" && d.audio.setInput("microphone")) : e || (this.currentMidiId = null), this.start(), this.signalSelect.value !== t && (this.signalSelect.value = t);
+      this.midiRow.style.display = e ? "flex" : "none", this.mathParamsContainer.style.display = s ? "flex" : "none", s && this.updateMathParams(t), this.easeRow.style.display = "flex", this.behaviourRow.style.display = "flex", i ? (this.currentMidiId = null, u.audio.ctx.state === "suspended" && u.audio.setInput("microphone")) : e || (this.currentMidiId = null), this.start(), this.signalSelect.value !== t && (this.signalSelect.value = t);
     }
   }
   setMidiId(t) {
@@ -775,7 +803,7 @@ class B {
     this.setSignalType("none"), this.setEase("linear"), this.setBehaviour("forward"), this.setMidiId(null);
   }
 }
-class G extends d {
+class tt extends u {
   constructor(t, e, s = {}) {
     super(t, e, s), this.pingPongDirection = 1, this.min = 0, this.max = 100, this.initialOptions = s, this.min = s.min ?? 0, this.max = s.max ?? 100;
     const i = r("details", {
@@ -794,38 +822,38 @@ class G extends d {
       },
       [String(this.value.toFixed(1))]
     ), this.input.addEventListener("input", () => {
-      const l = parseFloat(this.input.value);
-      isNaN(l) || (this.setValue(l), this.display.textContent = String(l.toFixed(1)));
-    }), this.input.addEventListener("click", (l) => {
-      l.stopPropagation();
+      const g = parseFloat(this.input.value);
+      isNaN(g) || (this.setValue(g), this.display.textContent = String(g.toFixed(1)));
+    }), this.input.addEventListener("click", (g) => {
+      g.stopPropagation();
     });
     const o = r("div", {
       className: "cp-controller-summary-content"
     });
     o.appendChild(this.input), o.appendChild(this.display), a.appendChild(o), i.appendChild(a);
-    const c = r("div", { className: "cp-number-settings" }), p = this.createSetting(
+    const l = r("div", { className: "cp-number-settings" }), h = this.createSetting(
       "min",
       s.min,
-      (l) => this.setMin(l)
+      (g) => this.setMin(g)
     );
-    this.minInput = p.input, c.appendChild(p.row);
-    const h = this.createSetting(
+    this.minInput = h.input, l.appendChild(h.row);
+    const p = this.createSetting(
       "max",
       s.max,
-      (l) => this.setMax(l)
+      (g) => this.setMax(g)
     );
-    this.maxInput = h.input, c.appendChild(h.row);
-    const u = this.createSetting(
+    this.maxInput = p.input, l.appendChild(p.row);
+    const d = this.createSetting(
       "step",
       s.step,
-      (l) => this.setStep(l)
+      (g) => this.setStep(g)
     );
-    this.stepInput = u.input, c.appendChild(u.row);
-    const m = r("hr", { className: "cp-separator" });
-    c.appendChild(m), this.signalHandler = new B({
-      container: c,
-      onChange: (l, f) => this.applySignal(l, f)
-    }), i.appendChild(c), this.appendWidget(i);
+    this.stepInput = d.input, l.appendChild(d.row);
+    const b = r("hr", { className: "cp-separator" });
+    l.appendChild(b), this.signalHandler = new H({
+      container: l,
+      onChange: (g, v) => this.applySignal(g, v)
+    }), i.appendChild(l), this.appendWidget(i);
   }
   // Setters
   setMin(t) {
@@ -906,7 +934,7 @@ class G extends d {
     ), this.setStep(this.initialOptions.step), this.signalHandler?.reset();
   }
 }
-class Z extends d {
+class et extends u {
   constructor(t, e, s) {
     super(t, e, s), this.optionValues = [], this.select = r("select", { className: "cp-select" }), this.optionValues = s.options || [], this.optionValues.forEach((i, a) => {
       const o = r("option", { value: String(a) }, [
@@ -931,7 +959,7 @@ class Z extends d {
     t !== -1 && (this.select.value = String(t));
   }
 }
-class K extends d {
+class st extends u {
   constructor(t, e, s = {}) {
     const i = { action: e };
     super(i, "action", s);
@@ -946,7 +974,7 @@ class K extends d {
   updateDisplay() {
   }
 }
-class Y extends d {
+class it extends u {
   constructor(t, e, s = {}) {
     super(t, e, s), this.input = r("input", {
       type: "checkbox",
@@ -959,7 +987,7 @@ class Y extends d {
     this.input.checked = this.value;
   }
 }
-class Q extends d {
+class nt extends u {
   constructor(t, e, s) {
     super(t, e, s), this.buttons = [], this.optionValues = [], this.container = r("div", { className: "cp-radios" }), this.optionValues = s.options || [], this.optionValues.forEach((i) => {
       const a = r("button", { className: "cp-button cp-radio" }, [
@@ -977,7 +1005,7 @@ class Q extends d {
     });
   }
 }
-class X extends d {
+class at extends u {
   constructor(t, e, s = {}) {
     super(t, e, s), this.input = r("input", {
       type: "color",
@@ -992,7 +1020,7 @@ class X extends d {
     this.input.value = this.value;
   }
 }
-function F(n) {
+function $(n) {
   const t = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   n = n.replace(t, (s, i, a, o) => i + i + a + a + o + o);
   const e = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);
@@ -1002,21 +1030,21 @@ function F(n) {
     parseInt(e[3], 16)
   ] : [0, 0, 0];
 }
-function tt(n, t, e) {
+function ot(n, t, e) {
   return "#" + ((1 << 24) + (Math.round(n) << 16) + (Math.round(t) << 8) + Math.round(e)).toString(16).slice(1);
 }
-function w(n) {
+function T(n) {
   const t = n / 255;
   return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
 }
-function L(n) {
+function D(n) {
   return n <= 31308e-7 ? n * 12.92 * 255 : (1.055 * Math.pow(n, 1 / 2.4) - 0.055) * 255;
 }
-function et(n, t, e) {
-  const [s, i, a] = F(n), [o, c, p] = F(t), h = w(s), u = w(i), m = w(a), l = w(o), f = w(c), g = w(p), b = h + e * (l - h), I = u + e * (f - u), v = m + e * (g - m), S = L(b), y = L(I), x = L(v);
-  return tt(S, y, x);
+function rt(n, t, e) {
+  const [s, i, a] = $(n), [o, l, h] = $(t), p = T(s), d = T(i), b = T(a), g = T(o), v = T(l), E = T(h), f = p + e * (g - p), V = d + e * (v - d), x = b + e * (E - b), c = D(f), m = D(V), y = D(x);
+  return ot(c, m, y);
 }
-class st extends d {
+class lt extends u {
   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 },
@@ -1037,25 +1065,25 @@ class st extends d {
       { className: "cp-value-display" },
       [String(this.value)]
     ), o.appendChild(this.displayColor), o.appendChild(this.displayText), a.appendChild(o), i.appendChild(a);
-    const c = r("div", { className: "cp-number-settings" });
+    const l = r("div", { className: "cp-number-settings" });
     this.stopsContainer = r("div", {
       className: "cp-stops-container"
-    }), this.renderStops(), c.appendChild(this.stopsContainer);
-    const p = r(
+    }), this.renderStops(), l.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();
-    }), c.appendChild(p);
-    const h = r("hr", { className: "cp-separator" });
-    c.appendChild(h), this.signalHandler = new B({
-      container: c,
-      onChange: (u, m) => this.applySignal(u, m)
-    }), i.appendChild(c), this.appendWidget(i), this.updateOutput(0);
+    }), l.appendChild(h);
+    const p = r("hr", { className: "cp-separator" });
+    l.appendChild(p), this.signalHandler = new H({
+      container: l,
+      onChange: (d, b) => this.applySignal(d, b)
+    }), i.appendChild(l), this.appendWidget(i), this.updateOutput(0);
   }
   sortStops() {
     this.stops.sort((t, e) => t.position - e.position);
@@ -1067,8 +1095,8 @@ class st extends d {
         className: "cp-input-color",
         value: t.color
       });
-      i.addEventListener("input", (c) => {
-        t.color = c.target.value, this.updateOutput();
+      i.addEventListener("input", (l) => {
+        t.color = l.target.value, this.updateOutput();
       });
       const a = r("input", {
         type: "number",
@@ -1078,11 +1106,11 @@ class st extends d {
         step: "0.01",
         value: String(t.position)
       });
-      a.addEventListener("change", (c) => {
-        let p = parseFloat(c.target.value);
-        isNaN(p) && (p = 0), t.position = Math.max(0, Math.min(1, p)), this.sortStops(), this.renderStops(), this.updateOutput();
+      a.addEventListener("change", (l) => {
+        let h = parseFloat(l.target.value);
+        isNaN(h) && (h = 0), t.position = Math.max(0, Math.min(1, h)), this.sortStops(), this.renderStops(), this.updateOutput();
       });
-      const o = D(() => {
+      const o = j(() => {
         this.stops.splice(e, 1), this.renderStops(), this.updateOutput();
       });
       s.appendChild(i), s.appendChild(a), s.appendChild(o), this.stopsContainer.appendChild(s);
@@ -1104,8 +1132,8 @@ class st extends d {
       for (let s = 0; s < this.stops.length - 1; s++) {
         const i = this.stops[s], a = this.stops[s + 1];
         if (t >= i.position && t <= a.position) {
-          const o = a.position - i.position, c = o === 0 ? 0 : (t - i.position) / o;
-          e = et(i.color, a.color, c);
+          const o = a.position - i.position, l = o === 0 ? 0 : (t - i.position) / o;
+          e = rt(i.color, a.color, l);
           break;
         }
       }
@@ -1144,7 +1172,7 @@ class st extends d {
     ], this.sortStops(), this.renderStops(), this.signalHandler?.reset(), this.updateOutput(0);
   }
 }
-class it extends d {
+class ct extends u {
   constructor(t, e, s = {}) {
     super(t, e, s), this.items = [], this.initialOptions = s, this.itemType = s.itemType || "string", this.items = this.parseValue(this.value);
     const i = r("details", {
@@ -1153,15 +1181,15 @@ class it extends d {
       className: "cp-controller-summary"
     }), o = r("div", {
       className: "cp-controller-summary-content"
-    }), c = r("span", { className: "cp-value-display" }, [
+    }), l = r("span", { className: "cp-value-display" }, [
       `${this.items.length} items`
     ]);
-    o.appendChild(c), a.appendChild(o), i.appendChild(a);
-    const p = r("div", { className: "cp-number-settings" });
+    o.appendChild(l), a.appendChild(o), i.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 h = r(
+    }), this.renderItems(), h.appendChild(this.itemsContainer);
+    const p = r(
       "button",
       {
         className: "cp-button cp-input-small",
@@ -1169,9 +1197,9 @@ class it extends d {
       },
       ["+ Add Item"]
     );
-    h.addEventListener("click", () => {
+    p.addEventListener("click", () => {
       this.addItem();
-    }), p.appendChild(h), i.appendChild(p), this.appendWidget(i);
+    }), h.appendChild(p), i.appendChild(h), this.appendWidget(i);
   }
   parseValue(t) {
     return !t || t.trim() === "" ? [] : t.split(",").map((e) => e.trim());
@@ -1221,7 +1249,7 @@ class it extends d {
       }), i.addEventListener("input", (o) => {
         this.items[e] = o.target.value, this.updateValue();
       });
-      const a = D(() => {
+      const a = j(() => {
         this.items.splice(e, 1), this.renderItems(), this.updateValue();
       });
       s.appendChild(i), s.appendChild(a), this.itemsContainer.appendChild(s);
@@ -1240,7 +1268,7 @@ class it extends d {
     this.items = this.parseValue(t), this.renderItems(), this.updateValue();
   }
 }
-class nt {
+class ht {
   constructor() {
     this.frames = 0, this.pollingInterval = 1e3, this.prevTime = performance.now(), this.render = () => {
       this.frames++;
@@ -1258,44 +1286,44 @@ class nt {
     cancelAnimationFrame(this.rafId);
   }
 }
-class q {
+class U {
   constructor() {
     this.controllers = [], this.folders = [];
   }
   addNumber(t, e, s = {}) {
-    const i = new G(t, e, s);
+    const i = new tt(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addSelect(t, e, s = {}) {
-    const i = new Z(t, e, s);
+    const i = new et(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addBoolean(t, e, s = {}) {
-    const i = new Y(t, e, s);
+    const i = new it(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addButton(t, e, s = {}) {
-    const i = new K(t, e, s);
+    const i = new st(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addRadio(t, e, s = {}) {
-    const i = new Q(t, e, s);
+    const i = new nt(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addColor(t, e, s = {}) {
-    const i = new X(t, e, s);
+    const i = new at(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addGradient(t, e, s = {}) {
-    const i = new st(t, e, s);
+    const i = new lt(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addArray(t, e, s = {}) {
-    const i = new it(t, e, s);
+    const i = new ct(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addFolder(t) {
-    const e = new at(t);
+    const e = new pt(t);
     return this.contentElement.appendChild(e.domElement), this.folders.push(e), e;
   }
   save() {
@@ -1333,7 +1361,7 @@ class q {
       t.reset();
   }
 }
-class at extends q {
+class pt extends U {
   constructor(t) {
     super(), this.title = t, this.domElement = r("details", {
       className: "cp-folder",
@@ -1351,9 +1379,9 @@ class at extends q {
     );
   }
 }
-class ot extends q {
+class dt extends U {
   constructor(t, e = {}) {
-    super(), R(), this.domElement = r("details", {
+    super(), _(), this.domElement = r("details", {
       className: "cp-root",
       open: !0
     }), this.summaryElement = r("summary", {
@@ -1362,142 +1390,157 @@ class ot extends q {
     const s = r("span", {}, [
       e.title || "ControlPanel"
     ]);
-    this.summaryElement.appendChild(s), this.stats = new nt(), this.summaryElement.appendChild(this.stats.domElement), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
-    const i = this.addFolder("_Signals"), a = {
+    this.summaryElement.appendChild(s), this.stats = new ht(), this.summaryElement.appendChild(this.stats.domElement);
+    let i = !1, a = 0, o = 0, l = 0, h = 0;
+    this.summaryElement.addEventListener("mousedown", (c) => {
+      if (c.target !== this.summaryElement && c.target !== s) return;
+      i = !0, a = c.clientX, o = c.clientY;
+      const m = this.domElement.getBoundingClientRect();
+      l = m.left, h = m.top, c.preventDefault();
+    }), document.addEventListener("mousemove", (c) => {
+      if (!i) return;
+      const m = c.clientX - a, y = c.clientY - o, S = l + m, k = h + y;
+      this.domElement.style.left = `${S}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"), b = {
       audioInput: null,
       fftSize: 2048
     };
-    i.addRadio(a, "audioInput", {
+    d.addRadio(b, "audioInput", {
       label: "Audio Signal",
       options: ["microphone", "browser"]
-    }).onChange((l) => {
-      C.setInput(l);
-    }), i.addSelect(a, "fftSize", {
+    }).onChange((c) => {
+      M.setInput(c);
+    }), d.addSelect(b, "fftSize", {
       label: "FFT Size",
       options: [256, 512, 1024, 2048]
-    }).onChange((l) => {
-      C.setFFTSize(l);
-    }), i.addNumber(C, "smoothingTimeConstant", {
+    }).onChange((c) => {
+      M.setFFTSize(c);
+    }), d.addNumber(M, "smoothingTimeConstant", {
       min: 0,
       max: 0.99,
       step: 0.01,
       label: "Smoothing"
-    }).onChange((l) => {
-      C.analyser.smoothingTimeConstant = l;
-    }), i.addNumber(C, "spectrumBoost", {
+    }).onChange((c) => {
+      M.analyser.smoothingTimeConstant = c;
+    }), d.addNumber(M, "spectrumBoost", {
       min: 1,
       max: 5,
       step: 0.1,
       label: "Compression"
     }), t ? t.appendChild(this.domElement) : document.body.appendChild(this.domElement);
-    const o = e.title || "ControlPanel";
-    this.presetStoragePrefix = `cp-presets-${o}-`;
-    const c = this.addFolder("_User Presets"), p = () => {
-      const l = ["Default"];
-      if (typeof localStorage > "u") return l;
-      for (let f = 0; f < localStorage.length; f++) {
-        const g = localStorage.key(f);
-        if (g && g.startsWith(this.presetStoragePrefix)) {
-          const b = g.substring(this.presetStoragePrefix.length);
-          b !== "Default" && !l.includes(b) && l.push(b);
+    const g = e.title || "ControlPanel";
+    this.presetStoragePrefix = `cp-presets-${g}-`;
+    const v = this.addFolder("_User Presets"), E = () => {
+      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 S = y.substring(this.presetStoragePrefix.length);
+          S !== "Default" && !c.includes(S) && c.push(S);
         }
       }
-      return l.sort();
-    }, h = {
+      return c.sort();
+    }, f = {
       selected: "Default",
       save: () => {
-        const l = prompt("Preset Name:", h.selected);
-        if (l) {
-          if (l === "Default") {
+        const c = prompt("Preset Name:", f.selected);
+        if (c) {
+          if (c === "Default") {
             alert("Cannot overwrite Default preset");
             return;
           }
-          const f = this.presetStoragePrefix + l;
-          this.saveToLocalStorage(f);
-          const g = p();
-          m.setOptions(g), h.selected = l, m.setValue(l);
+          const m = this.presetStoragePrefix + c;
+          this.saveToLocalStorage(m);
+          const y = E();
+          x.setOptions(y), f.selected = c, x.setValue(c);
         }
       },
       load: () => {
-        const l = h.selected, f = this.presetStoragePrefix + l;
-        this.loadFromLocalStorage(f), h.selected = l, m.setValue(l);
+        const c = f.selected, m = this.presetStoragePrefix + c;
+        this.loadFromLocalStorage(m), f.selected = c, x.setValue(c);
       },
       delete: () => {
-        if (h.selected === "Default") {
+        if (f.selected === "Default") {
           alert("Cannot delete Default preset");
           return;
         }
-        if (confirm(`Delete preset "${h.selected}"?`)) {
-          const l = this.presetStoragePrefix + h.selected;
-          localStorage.removeItem(l);
-          const f = p();
-          m.setOptions(f), h.selected = "Default", m.setValue("Default"), this.reset();
+        if (confirm(`Delete preset "${f.selected}"?`)) {
+          const c = this.presetStoragePrefix + f.selected;
+          localStorage.removeItem(c);
+          const m = E();
+          x.setOptions(m), f.selected = "Default", x.setValue("Default"), this.reset();
         }
       },
       export: () => {
-        const l = this.save(), f = (M) => {
-          const N = {
+        const c = this.save(), m = (O) => {
+          const L = {
             controllers: {},
             folders: {}
           };
-          for (const [E, k] of Object.entries(M.controllers))
-            E.startsWith("_") || (N.controllers[E] = k);
-          for (const [E, k] of Object.entries(
-            M.folders
+          for (const [A, F] of Object.entries(O.controllers))
+            A.startsWith("_") || (L.controllers[A] = F);
+          for (const [A, F] of Object.entries(
+            O.folders
           ))
-            E.startsWith("_") || (N.folders[E] = f(k));
-          return N;
-        }, g = f(l), b = {
-          _presetName: h.selected || "CustomPreset",
+            A.startsWith("_") || (L.folders[A] = m(F));
+          return L;
+        }, y = m(c), S = {
+          _presetName: f.selected || "CustomPreset",
           _exportDate: (/* @__PURE__ */ new Date()).toISOString(),
           _instructions: "To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",
-          ...g
-        }, I = JSON.stringify(b, null, 2), v = new Blob([I], { type: "application/json" }), S = URL.createObjectURL(v), y = document.createElement("a");
-        y.href = S;
-        const x = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], A = h.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
-        y.download = `${o.toLowerCase()}-preset-${A}-${x}.json`, document.body.appendChild(y), y.click(), document.body.removeChild(y), URL.revokeObjectURL(S);
+          ...y
+        }, k = JSON.stringify(S, null, 2), C = new Blob([k], { type: "application/json" }), I = URL.createObjectURL(C), w = document.createElement("a");
+        w.href = I;
+        const N = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], z = f.selected.replace(/[^a-z0-9]/gi, "-").toLowerCase();
+        w.download = `${g.toLowerCase()}-preset-${z}-${N}.json`, document.body.appendChild(w), w.click(), document.body.removeChild(w), URL.revokeObjectURL(I);
       },
       import: () => {
-        const l = document.createElement("input");
-        l.type = "file", l.accept = ".json", l.onchange = (f) => {
-          const g = f.target.files?.[0];
-          if (!g) return;
-          const b = new FileReader();
-          b.onload = (I) => {
+        const c = document.createElement("input");
+        c.type = "file", c.accept = ".json", c.onchange = (m) => {
+          const y = m.target.files?.[0];
+          if (!y) return;
+          const S = new FileReader();
+          S.onload = (k) => {
             try {
-              const v = I.target?.result, S = JSON.parse(v), y = {
-                controllers: S.controllers || {},
-                folders: S.folders || {}
+              const C = k.target?.result, I = JSON.parse(C), w = {
+                controllers: I.controllers || {},
+                folders: I.folders || {}
               };
-              if (!y.controllers || !y.folders) {
+              if (!w.controllers || !w.folders) {
                 alert(
                   "Invalid preset file: missing 'controllers' or 'folders'"
                 );
                 return;
               }
-              this.load(y);
-              const x = S._presetName || "ImportedPreset";
+              this.load(w);
+              const N = I._presetName || "ImportedPreset";
               if (confirm(
-                `Preset loaded! Save as "${x}" to User Presets?`
+                `Preset loaded! Save as "${N}" to User Presets?`
               )) {
-                const M = this.presetStoragePrefix + x;
-                this.saveToLocalStorage(M);
-                const N = p();
-                m.setOptions(N), h.selected = x, m.setValue(x);
+                const O = this.presetStoragePrefix + N;
+                this.saveToLocalStorage(O);
+                const L = E();
+                x.setOptions(L), f.selected = N, x.setValue(N);
               }
-            } catch (v) {
+            } catch (C) {
               alert(
-                `Failed to import preset: ${v instanceof Error ? v.message : "Invalid JSON"}`
-              ), console.error("Import error:", v);
+                `Failed to import preset: ${C instanceof Error ? C.message : "Invalid JSON"}`
+              ), console.error("Import error:", C);
             }
-          }, b.readAsText(g);
-        }, l.click();
+          }, S.readAsText(y);
+        }, c.click();
       }
-    }, u = p(), m = c.addSelect(h, "selected", {
+    }, V = E(), x = v.addSelect(f, "selected", {
       label: "Preset",
-      options: u
+      options: V
     });
-    c.addButton("Load", () => h.load()), c.addButton("Save / New", () => h.save()), c.addButton("Delete", () => h.delete()), c.addButton("Export JSON", () => h.export()), c.addButton("Import JSON", () => h.import());
+    v.addButton("Load", () => f.load()), v.addButton("Save / New", () => f.save()), v.addButton("Delete", () => f.delete()), v.addButton("Export JSON", () => f.export()), v.addButton("Import JSON", () => f.import());
   }
   saveToLocalStorage(t) {
     const e = this.save();
@@ -1522,27 +1565,52 @@ class ot extends q {
     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 = [];
   }
 }
 export {
-  it as ArrayController,
-  U as AudioSignals,
-  Y as BooleanController,
-  K as ButtonController,
-  X as ColorController,
-  ot as ControlPanel,
-  q as ControlPanelContainer,
-  d as Controller,
-  at as Folder,
-  st as GradientController,
-  _ as MathSignals,
-  H as MidiSignals,
-  G as NumberController,
-  Q as RadioController,
-  Z as SelectController,
-  C as audioSignals,
-  J as mathSignals,
-  W as midiSignals
+  ct as ArrayController,
+  X as AudioSignals,
+  it as BooleanController,
+  st as ButtonController,
+  at as ColorController,
+  dt as ControlPanel,
+  U as ControlPanelContainer,
+  u as Controller,
+  pt as Folder,
+  lt as GradientController,
+  K as MathSignals,
+  G as MidiSignals,
+  tt as NumberController,
+  nt as RadioController,
+  et as SelectController,
+  M as audioSignals,
+  Q as mathSignals,
+  Z as midiSignals
 };