@digitalmeadow/control-panel 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Digital Meadow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+# Control Panel
+
+GUI control panel for creative coding.
+
+## Controllers
+
+- Number
+- Select
+- Boolean
+- Button
+- Radio
+- Color
+- Gradient
+- Array
+
+## Usage
+
+```typescript
+import { GUI } from "./src/gui";
+
+const state = { number: 50, color: "#3498db", enabled: true };
+const gui = new GUI();
+
+gui.addNumber(state, "number", { min: 0, max: 100, step: 1 });
+gui.addColor(state, "color");
+gui.addBoolean(state, "enabled");
+gui.addButton("Reset", () => gui.reset());
+
+gui.saveDefaultPreset();
+```
+
+## Folders
+
+```typescript
+const folder = gui.addFolder("Settings");
+folder.addNumber(state, "value", { min: 0, max: 100 });
+
+const nested = folder.addFolder("Advanced");
+nested.addNumber(state, "other", { min: 0, max: 100 });
+```
+
+## Development
+
+```bash
+pnpm dev
+pnpm build
+```
+
+## API
+
+```typescript
+gui.addNumber(object, property, options?)
+gui.addSelect(object, property, options?)
+gui.addBoolean(object, property, options?)
+gui.addButton(label, fn, options?)
+gui.addRadio(object, property, options?)
+gui.addColor(object, property, options?)
+gui.addGradient(object, property, options?)
+gui.addArray(object, property, options?)
+gui.addFolder(title)
+
+gui.save()
+gui.load(state)
+gui.reset()
+gui.saveDefaultPreset()
+```
+
+## Options
+
+All controllers:
+- `label?: string`
+- `disabled?: boolean`
+- `id?: string`
+
+Number:
+- `min?: number`
+- `max?: number`
+- `step?: number`
+
+Select/Radio:
+- `options?: T[]`
+
+Gradient:
+- `stops?: ColorStop[]`
+
+Array:
+- `itemType?: "color" | "number" | "string"`

package/dist/control-panel.css

@@ -0,0 +1 @@
+.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:#ffffff80}.cp-summary{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:700;outline:none}.cp-summary-root{position:sticky;top:0}.cp-stats{float:right;font-weight:400;opacity:.6;font-size:.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;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;-webkit-user-select:none;user-select:none;padding-right:8px;opacity:.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:#ffffff4d;border:none;padding:2px 4px;border-radius:2px;font-family:inherit;font-size:inherit}.cp-checkbox{margin:auto 0}.cp-button{width:100%;background:#ffffff4d;border:none;padding:4px 2px;border-radius:2px;cursor:pointer;text-align:center;font-family:inherit;font-size:inherit;transition:background .1s}.cp-button:hover{background:#fff6}.cp-button:active{background:#fff3;transform:translateY(1px)}.cp-controller[data-disabled=true]{opacity:.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:#ffffff4d;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:.9em;opacity:.8;-webkit-user-select:none;user-select:none}.cp-number-settings{margin-top:4px;background:transparent;border:1px solid rgba(255,255,255,.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,.3);margin:4px 0;width:100%}.cp-setting-row{display:flex;align-items:center;gap:4px}.cp-setting-label{width:50%;font-size:.9em;opacity:.7}.cp-input-small{width:50%}.cp-radios{width:50%;display:flex;gap:2px}.cp-radio{flex:1;font-size:.9em;padding:4px 2px;height:100%}.cp-radio[data-active=true]{background:#fff3;border-color:#fff;font-weight:700}.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}

package/dist/control-panel.js

@@ -0,0 +1,1068 @@
+function r(n, t = {}, e = []) {
+  const i = document.createElement(n);
+  for (const [s, a] of Object.entries(t))
+    s === "className" ? i.className = String(a) : s === "style" && typeof a == "object" ? Object.assign(i.style, a) : s === "open" && typeof a == "boolean" ? a ? i.setAttribute("open", "") : i.removeAttribute("open") : typeof a != "object" && i.setAttribute(s, String(a));
+  for (const s of e)
+    typeof s == "string" ? i.appendChild(document.createTextNode(s)) : i.appendChild(s);
+  return i;
+}
+function B(n) {
+  const t = r(
+    "button",
+    {
+      className: "cp-button cp-button-delete"
+    },
+    ["×"]
+  );
+  return t.addEventListener("click", n), t;
+}
+function R(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) {
+  if (t.length !== e.length)
+    throw new Error("Input and output ranges must have the same length");
+  if (t.length < 2)
+    throw new Error("Input and output ranges must have at least two values");
+  let i = 0;
+  for (; i < t.length - 1 && n > t[i + 1]; )
+    i++;
+  if (i === t.length - 1)
+    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], l = e[i + 1];
+  return (n - s) / (a - s) * (l - o) + o;
+}
+class z {
+  constructor() {
+    this.source = null, this.stream = null, this.fftSize = 2048, this.smoothingTimeConstant = 0.92, this.spectrumBoost = 2, this.levels = {
+      bass: 0,
+      mids: 0,
+      highs: 0,
+      volume: 0
+    }, this.peaks = {
+      bass: 0,
+      mids: 0,
+      highs: 0,
+      volume: 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 i = await e;
+      this.ctx.state === "suspended" && this.ctx.resume(), this.source && this.source.disconnect(), this.stream && this.stream.getTracks().forEach((s) => s.stop()), this.stream = i, this.source = this.ctx.createMediaStreamSource(this.stream), this.source.connect(this.analyser), this._isAnalyzing = !0, this.loop();
+    } 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 d = this.dataArray.length;
+      for (let h = 0; h < d; h++) {
+        const p = 1 + h / d * (this.spectrumBoost - 1);
+        this.dataArray[h] = Math.min(255, this.dataArray[h] * p);
+      }
+    }
+    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]), l = this.getAverage(0, i[1]);
+    this.processLevel("bass", s), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", l);
+  }
+  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]),
+      0,
+      1
+    );
+  }
+  getAverage(t, e) {
+    let i = 0;
+    const s = e - t;
+    if (s <= 0) return 0;
+    for (let a = t; a < e; a++)
+      i += this.dataArray[a];
+    return i / s / 255;
+  }
+  getSignal(t) {
+    return () => this.levels[t];
+  }
+}
+const x = new z();
+class $ {
+  constructor() {
+    this.midiAccess = null, this.values = /* @__PURE__ */ 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, [i] = e;
+    if ((i & 240) >= 240) return;
+    const a = this.getIdFromMessage(t), o = this.normalizeValue(e);
+    this.values.set(a, o), this.isListening && this.resolveListen && o > 0 && (this.resolveListen(a), this.isListening = !1, this.resolveListen = null, this.listeningCallback && this.listeningCallback());
+  }
+  getIdFromMessage(t) {
+    const e = t.data, [i, s] = e, a = i & 240, o = t.currentTarget.name || "unknown", l = a === 144 || a === 128 ? "note" : "ctrl", d = o.replace(/[^a-zA-Z0-9]/g, "");
+    return `${s}_${l}_${d}`;
+  }
+  normalizeValue(t) {
+    const [e, i, s] = t, a = e & 240;
+    return a === 144 ? s > 0 ? 1 : 0 : a === 128 ? 0 : a === 176 ? s / 127 : 0;
+  }
+  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 U = new $(), M = class M {
+  constructor(t, e, i = {}) {
+    this.changeFns = /* @__PURE__ */ new Set(), this.object = t, this.property = e, this.key = i.id ?? e, this.initialValue = this.object[this.property], this.domElement = r("div", { className: "cp-controller" });
+    const s = i.label ?? R(e), a = r("label", { className: "cp-label" }, [
+      String(s)
+    ]);
+    a.setAttribute("title", String(s)), this.domElement.appendChild(a), i.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);
+  }
+};
+M.audio = x, M.midi = U;
+let m = M;
+const O = {
+  linear: (n) => n,
+  quadIn: (n) => n * n,
+  quadOut: (n) => n * (2 - n),
+  quadInOut: (n) => n < 0.5 ? 2 * n * n : -1 + (4 - 2 * n) * n,
+  cubicIn: (n) => n * n * n,
+  cubicOut: (n) => --n * n * n + 1,
+  cubicInOut: (n) => n < 0.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 ? 0.5 * Math.pow(2, 10 * (n - 1)) : 0.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 k {
+  constructor(t) {
+    this.rafId = null, this.currentSignalType = null, this.currentMidiId = null, this.currentEase = "linear", this.currentBehaviour = "forward", this.loop = () => {
+      if (this.currentSignalType) {
+        let e = 0;
+        this.currentSignalType === "midi" ? this.currentMidiId && (e = m.midi.getSignal(this.currentMidiId)()) : e = m.audio.getSignal(this.currentSignalType)();
+        const i = O[this.currentEase](e);
+        this.onChange(i, this.currentBehaviour), this.rafId = requestAnimationFrame(this.loop);
+      }
+    }, this.onChange = t.onChange, this.setupControllers(t.container);
+  }
+  setupControllers(t) {
+    const e = this.createSettingSelect(
+      "signal",
+      ["none", "bass", "mids", "highs", "volume", "midi"],
+      (o) => this.setSignalType(o)
+    );
+    this.signalSelect = e.select, t.appendChild(e.row), this.midiRow = r("div", {
+      className: "cp-setting-row",
+      style: "display: none;"
+    });
+    const i = r(
+      "label",
+      { className: "cp-setting-label" },
+      ["Midi"]
+    );
+    this.midiBtn = r(
+      "button",
+      { className: "cp-button cp-input-small" },
+      ["Learn"]
+    ), this.midiBtn.addEventListener("click", async () => {
+      if (this.midiBtn.textContent === "Listening...") {
+        m.midi.cancelListen(), this.setMidiId(null);
+        return;
+      }
+      this.midiBtn.textContent = "Listening...";
+      const o = await m.midi.listen();
+      this.setMidiId(o);
+    }), this.midiRow.appendChild(i), this.midiRow.appendChild(this.midiBtn), t.appendChild(this.midiRow);
+    const s = this.createSettingSelect(
+      "behaviour",
+      ["forward", "backward", "loopForward", "loopBackward", "pingpong"],
+      (o) => this.setBehaviour(o)
+    );
+    this.behaviourRow = s.row, this.behaviourSelect = s.select, this.behaviourRow.style.display = "none", this.behaviourSelect.value = this.currentBehaviour, t.appendChild(this.behaviourRow);
+    const a = this.createSettingSelect(
+      "ease",
+      Object.keys(O),
+      (o) => this.setEase(o)
+    );
+    this.easeRow = a.row, this.easeSelect = a.select, this.easeRow.style.display = "none", this.easeSelect.value = this.currentEase, t.appendChild(this.easeRow);
+  }
+  createSettingSelect(t, e, i) {
+    const s = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
+      t
+    ]), o = r("select", {
+      className: "cp-select cp-input-small"
+    });
+    return e.forEach((l) => {
+      const d = r("option", { value: l }, [l]);
+      o.appendChild(d);
+    }), o.addEventListener("change", () => i(o.value)), s.appendChild(a), s.appendChild(o), { row: s, select: o };
+  }
+  setSignalType(t) {
+    if (!t || t === "none")
+      this.currentSignalType = null, this.currentMidiId = null, this.midiRow.style.display = "none", this.easeRow.style.display = "none", this.behaviourRow.style.display = "none", this.stop(), this.signalSelect.value !== "none" && (this.signalSelect.value = "none");
+    else {
+      this.currentSignalType = t;
+      const e = t === "midi";
+      this.midiRow.style.display = e ? "flex" : "none", this.easeRow.style.display = "flex", this.behaviourRow.style.display = "flex", e || (this.currentMidiId = null, m.audio.ctx.state === "suspended" && m.audio.setInput("microphone")), this.start(), this.signalSelect.value !== t && (this.signalSelect.value = t);
+    }
+  }
+  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 q 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", {
+      className: "cp-controller-details"
+    }), a = r("summary", {
+      className: "cp-controller-summary"
+    });
+    this.input = r("input", {
+      type: "range",
+      className: "cp-input-range",
+      step: i.step ?? "any"
+    }), i.min !== void 0 && (this.input.min = String(i.min)), i.max !== void 0 && (this.input.max = String(i.max)), this.input.value = String(this.value), this.display = r(
+      "span",
+      {
+        className: "cp-value-display"
+      },
+      [String(this.value.toFixed(1))]
+    ), this.input.addEventListener("input", () => {
+      const p = parseFloat(this.input.value);
+      isNaN(p) || (this.setValue(p), this.display.textContent = String(p.toFixed(1)));
+    }), this.input.addEventListener("click", (p) => {
+      p.stopPropagation();
+    });
+    const o = r("div", {
+      className: "cp-controller-summary-content"
+    });
+    o.appendChild(this.input), o.appendChild(this.display), a.appendChild(o), s.appendChild(a);
+    const l = r("div", { className: "cp-number-settings" }), d = this.createSetting(
+      "min",
+      i.min,
+      (p) => this.setMin(p)
+    );
+    this.minInput = d.input, l.appendChild(d.row);
+    const h = this.createSetting(
+      "max",
+      i.max,
+      (p) => this.setMax(p)
+    );
+    this.maxInput = h.input, l.appendChild(h.row);
+    const y = this.createSetting(
+      "step",
+      i.step,
+      (p) => this.setStep(p)
+    );
+    this.stepInput = y.input, l.appendChild(y.row), this.signalHandler = new k({
+      container: l,
+      onChange: (p, c) => this.applySignal(p, c)
+    }), s.appendChild(l), this.appendWidget(s);
+  }
+  // Setters
+  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 i = this.max - this.min;
+    let s;
+    if (e === "forward")
+      s = this.min + t * i;
+    else if (e === "backward")
+      s = this.max - t * i;
+    else {
+      const a = t * (i * 0.01);
+      s = this.value, e === "loopForward" ? (s += a, s > this.max && (s = this.min + (s - this.min) % i)) : e === "loopBackward" ? (s -= a, s < this.min && (s = this.max - (this.max - s) % i)) : e === "pingpong" && (s += a * this.pingPongDirection, s >= this.max ? (s = this.max, this.pingPongDirection = -1) : s <= this.min && (s = this.min, this.pingPongDirection = 1));
+    }
+    s = this.roundToStep(s), this.setValue(s), this.input.value = String(s), this.display.textContent = String(s.toFixed(1));
+  }
+  roundToStep(t) {
+    const e = this.input.step;
+    if (e === "any" || e === "" || isNaN(parseFloat(e)))
+      return t;
+    const i = parseFloat(e), s = this.min;
+    return s + Math.round((t - s) / i) * i;
+  }
+  createSetting(t, e, i) {
+    const s = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
+      t
+    ]), o = r("input", {
+      type: "number",
+      className: "cp-input-number cp-input-small",
+      step: "any"
+    });
+    return e !== void 0 && (o.value = String(e)), o.addEventListener("input", () => i(o.value)), s.appendChild(a), s.appendChild(o), { row: s, input: o };
+  }
+  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 i = t.value;
+      !isNaN(this.min) && i < this.min && (i = this.min), !isNaN(this.max) && i > this.max && (i = this.max), this.setValue(i), this.signalHandler?.load(e.signal);
+    }
+  }
+  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 H 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) }, [
+        String(s)
+      ]);
+      this.select.appendChild(o);
+    }), this.updateDisplay(), this.select.addEventListener("change", () => {
+      const s = parseInt(this.select.value), a = this.optionValues[s];
+      this.setValue(a);
+    }), this.appendWidget(this.select);
+  }
+  setOptions(t) {
+    this.select.innerHTML = "", this.optionValues = t, this.optionValues.forEach((e, i) => {
+      const s = r("option", { value: String(i) }, [
+        String(e)
+      ]);
+      this.select.appendChild(s);
+    }), 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 _ extends m {
+  constructor(t, e, i = {}) {
+    const s = { action: e };
+    super(s, "action", i);
+    const a = i.label ?? t;
+    this.button = r("button", { className: "cp-button" }, [
+      String(a)
+    ]), this.button.addEventListener("click", () => {
+      const o = this.value;
+      typeof o == "function" && o(), this.emitChange(o);
+    }), this.appendWidget(this.button);
+  }
+  updateDisplay() {
+  }
+}
+class W extends m {
+  constructor(t, e, i = {}) {
+    super(t, e, i), this.input = r("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 G 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" }, [
+        String(s)
+      ]);
+      a.addEventListener("click", () => {
+        this.setValue(s);
+      }), this.container.appendChild(a), this.buttons.push(a);
+    }), this.updateDisplay(), this.appendWidget(this.container);
+  }
+  updateDisplay() {
+    const t = this.value;
+    this.buttons.forEach((e, i) => {
+      this.optionValues[i] === t ? e.setAttribute("data-active", "true") : e.removeAttribute("data-active");
+    });
+  }
+}
+class J extends m {
+  constructor(t, e, i = {}) {
+    super(t, e, i), this.input = r("input", {
+      type: "color",
+      className: "cp-input-color",
+      value: this.value || "#000000"
+    }), this.appendWidget(this.input), this.input.addEventListener("input", (s) => {
+      const a = s.target;
+      this.setValue(a.value);
+    }), this.updateDisplay();
+  }
+  updateDisplay() {
+    this.input.value = this.value;
+  }
+}
+function F(n) {
+  const t = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  n = n.replace(t, (i, s, a, o) => s + s + a + a + o + o);
+  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 Z(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) {
+  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, l, d] = F(t), h = w(i), y = w(s), p = w(a), c = w(o), u = w(l), f = w(d), v = h + e * (c - h), I = y + e * (u - y), S = p + e * (f - p), C = A(v), g = A(I), b = A(S);
+  return Z(C, g, b);
+}
+class Q extends m {
+  constructor(t, e, i = {}) {
+    super(t, e, i), this.stops = [], this.pingPongDirection = 1, this.animationT = 0, this.manualPosition = 0, this.initialOptions = i, this.stops = i.stops || [
+      { color: "#000000", position: 0 },
+      { color: "#ffffff", position: 1 }
+    ], this.sortStops();
+    const s = r("details", {
+      className: "cp-controller-details"
+    }), a = r("summary", {
+      className: "cp-controller-summary"
+    }), o = r("div", {
+      className: "cp-controller-summary-content"
+    });
+    this.displayColor = r("div", {
+      className: "cp-color-swatch",
+      style: `background-color: ${this.value}`
+    }), this.displayText = r(
+      "span",
+      { className: "cp-value-display" },
+      [String(this.value)]
+    ), o.appendChild(this.displayColor), o.appendChild(this.displayText), a.appendChild(o), s.appendChild(a);
+    const l = r("div", { className: "cp-number-settings" });
+    this.stopsContainer = r("div", {
+      className: "cp-stops-container"
+    }), this.renderStops(), l.appendChild(this.stopsContainer);
+    const d = r(
+      "button",
+      {
+        className: "cp-button"
+      },
+      ["+ Add Stop"]
+    );
+    d.addEventListener("click", () => {
+      this.stops.push({ color: "#ffffff", position: 0.5 }), this.sortStops(), this.renderStops(), this.updateOutput();
+    }), l.appendChild(d);
+    const h = r("hr", { className: "cp-separator" });
+    l.appendChild(h), this.signalHandler = new k({
+      container: l,
+      onChange: (y, p) => this.applySignal(y, p)
+    }), s.appendChild(l), this.appendWidget(s), this.updateOutput(0);
+  }
+  sortStops() {
+    this.stops.sort((t, e) => t.position - e.position);
+  }
+  renderStops() {
+    this.stopsContainer.innerHTML = "", this.stops.forEach((t, e) => {
+      const i = r("div", { className: "cp-setting-row" }), s = r("input", {
+        type: "color",
+        className: "cp-input-color",
+        value: t.color
+      });
+      s.addEventListener("input", (l) => {
+        t.color = l.target.value, this.updateOutput();
+      });
+      const a = r("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 d = parseFloat(l.target.value);
+        isNaN(d) && (d = 0), t.position = Math.max(0, Math.min(1, d)), this.sortStops(), this.renderStops(), this.updateOutput();
+      });
+      const o = B(() => {
+        this.stops.splice(e, 1), this.renderStops(), this.updateOutput();
+      });
+      i.appendChild(s), i.appendChild(a), i.appendChild(o), this.stopsContainer.appendChild(i);
+    });
+  }
+  // Calculate color at t (0-1) and update value
+  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 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, l = o === 0 ? 0 : (t - s.position) / o;
+          e = K(s.color, a.color, l);
+          break;
+        }
+      }
+    this.setValue(e), this.updateDisplay();
+  }
+  updateDisplay() {
+    this.displayColor && (this.displayColor.style.backgroundColor = this.value), this.displayText && (this.displayText.textContent = this.value);
+  }
+  applySignal(t, e) {
+    let i = t;
+    if (e === "forward")
+      i = t;
+    else if (e === "backward")
+      i = 1 - t;
+    else {
+      const s = t * 0.05;
+      e === "loopForward" ? (this.animationT = (this.animationT + s) % 1, i = this.animationT) : e === "loopBackward" ? (this.animationT = (this.animationT - s + 1) % 1, i = this.animationT) : e === "pingpong" && (this.animationT += s * this.pingPongDirection, this.animationT >= 1 ? (this.animationT = 1, this.pingPongDirection = -1) : this.animationT <= 0 && (this.animationT = 0, this.pingPongDirection = 1), i = this.animationT);
+    }
+    this.updateOutput(i), this.manualPosition = i;
+  }
+  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 X extends m {
+  constructor(t, e, i = {}) {
+    super(t, e, i), this.items = [], this.initialOptions = i, this.itemType = i.itemType || "string", this.items = this.parseValue(this.value);
+    const s = r("details", {
+      className: "cp-controller-details"
+    }), a = r("summary", {
+      className: "cp-controller-summary"
+    }), o = r("div", {
+      className: "cp-controller-summary-content"
+    }), l = r("span", { className: "cp-value-display" }, [
+      `${this.items.length} items`
+    ]);
+    o.appendChild(l), a.appendChild(o), s.appendChild(a);
+    const d = r("div", { className: "cp-number-settings" });
+    this.itemsContainer = r("div", {
+      className: "cp-stops-container"
+    }), this.renderItems(), d.appendChild(this.itemsContainer);
+    const h = r(
+      "button",
+      {
+        className: "cp-button cp-input-small",
+        style: "margin-top: 8px; width: 100%;"
+      },
+      ["+ Add Item"]
+    );
+    h.addEventListener("click", () => {
+      this.addItem();
+    }), d.appendChild(h), s.appendChild(d), this.appendWidget(s);
+  }
+  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 i = r("div", { className: "cp-setting-row" });
+      let s;
+      this.itemType === "color" ? s = r("input", {
+        type: "color",
+        className: "cp-input-color",
+        value: t
+      }) : this.itemType === "number" ? s = r("input", {
+        type: "number",
+        className: "cp-input-number cp-input-small",
+        step: "any",
+        value: t
+      }) : s = r("input", {
+        type: "text",
+        className: "cp-input-number cp-input-small",
+        value: t
+      }), s.addEventListener("input", (o) => {
+        this.items[e] = o.target.value, this.updateValue();
+      });
+      const a = B(() => {
+        this.items.splice(e, 1), this.renderItems(), this.updateValue();
+      });
+      i.appendChild(s), i.appendChild(a), this.itemsContainer.appendChild(i);
+    });
+  }
+  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 Y {
+  constructor() {
+    this.frames = 0, this.pollingInterval = 1e3, this.prevTime = performance.now(), this.render = () => {
+      this.frames++;
+      const t = performance.now();
+      if (t >= this.prevTime + this.pollingInterval) {
+        const e = Math.round(this.frames * 1e3 / (t - this.prevTime));
+        let i = "";
+        const s = performance.memory;
+        s && (i = ` / ${Math.round(s.usedJSHeapSize / 1048576)}MB`), this.domElement.textContent = `${e} FPS${i}`, this.prevTime = t, this.frames = 0;
+      }
+      this.rafId = requestAnimationFrame(this.render);
+    }, this.domElement = r("span", { className: "cp-stats" }), this.rafId = requestAnimationFrame(this.render);
+  }
+  destroy() {
+    cancelAnimationFrame(this.rafId);
+  }
+}
+class P {
+  constructor() {
+    this.controllers = [], this.folders = [];
+  }
+  addNumber(t, e, i = {}) {
+    const s = new q(t, e, i);
+    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  }
+  addSelect(t, e, i = {}) {
+    const s = new H(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);
+    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  }
+  addButton(t, e, i = {}) {
+    const s = new _(t, e, i);
+    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  }
+  addRadio(t, e, i = {}) {
+    const s = new G(t, e, i);
+    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  }
+  addColor(t, e, i = {}) {
+    const s = new J(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);
+    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  }
+  addArray(t, e, i = {}) {
+    const s = new X(t, e, i);
+    return this.contentElement.appendChild(s.domElement), this.controllers.push(s), s;
+  }
+  addFolder(t) {
+    const e = new tt(t);
+    return this.contentElement.appendChild(e.domElement), this.folders.push(e), e;
+  }
+  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 i = t.controllers[e.key];
+          i !== void 0 && e.load(i);
+        } else
+          e.reset();
+    for (const e of this.folders) {
+      const i = t.folders ? t.folders[e.title] : void 0;
+      e.load(i);
+    }
+  }
+  reset() {
+    for (const t of this.controllers)
+      typeof t.value != "function" && t.reset();
+    for (const t of this.folders)
+      t.reset();
+  }
+}
+class tt extends P {
+  constructor(t) {
+    super(), this.title = t, this.domElement = r("details", {
+      className: "cp-folder",
+      open: !0
+    }), this.summaryElement = r(
+      "summary",
+      {
+        className: "cp-summary"
+      },
+      [t]
+    ), this.domElement.appendChild(this.summaryElement), this.contentElement = r("div", {
+      className: "cp-content cp-folder-content"
+    }), this.domElement.appendChild(this.contentElement), this.domElement.appendChild(
+      r("hr", { className: "cp-separator" })
+    );
+  }
+}
+class et extends P {
+  constructor(t, e = {}) {
+    super(), this.domElement = r("details", {
+      className: "cp-root",
+      open: !0
+    }), this.summaryElement = r("summary", {
+      className: "cp-summary cp-summary-root"
+    }), this.domElement.appendChild(this.summaryElement);
+    const i = r("span", {}, [e.title || "GUI"]);
+    this.summaryElement.appendChild(i), this.stats = new Y(), this.summaryElement.appendChild(this.stats.domElement), this.contentElement = r("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
+    const s = this.addFolder("_Signals"), a = {
+      audioInput: null,
+      fftSize: 2048
+    };
+    s.addRadio(a, "audioInput", {
+      label: "Audio Signal",
+      options: ["microphone", "browser"]
+    }).onChange((c) => {
+      x.setInput(c);
+    }), s.addSelect(a, "fftSize", {
+      label: "FFT Size",
+      options: [256, 512, 1024, 2048]
+    }).onChange((c) => {
+      x.setFFTSize(c);
+    }), s.addNumber(x, "smoothingTimeConstant", {
+      min: 0,
+      max: 0.99,
+      step: 0.01,
+      label: "Smoothing"
+    }).onChange((c) => {
+      x.analyser.smoothingTimeConstant = c;
+    }), s.addNumber(x, "spectrumBoost", {
+      min: 1,
+      max: 5,
+      step: 0.1,
+      label: "Compression"
+    }), t ? t.appendChild(this.domElement) : document.body.appendChild(this.domElement);
+    const o = e.title || "GUI";
+    this.presetStoragePrefix = `cp-presets-${o}-`;
+    const l = this.addFolder("_User Presets"), d = () => {
+      const c = ["Default"];
+      if (typeof localStorage > "u") return c;
+      for (let u = 0; u < localStorage.length; u++) {
+        const f = localStorage.key(u);
+        if (f && f.startsWith(this.presetStoragePrefix)) {
+          const v = f.substring(this.presetStoragePrefix.length);
+          v !== "Default" && !c.includes(v) && c.push(v);
+        }
+      }
+      return c.sort();
+    }, h = {
+      selected: "Default",
+      save: () => {
+        const c = prompt("Preset Name:", h.selected);
+        if (c) {
+          if (c === "Default") {
+            alert("Cannot overwrite Default preset");
+            return;
+          }
+          const u = this.presetStoragePrefix + c;
+          this.saveToLocalStorage(u);
+          const f = d();
+          p.setOptions(f), h.selected = c, p.setValue(c);
+        }
+      },
+      load: () => {
+        const c = h.selected, u = this.presetStoragePrefix + c;
+        this.loadFromLocalStorage(u), h.selected = c, p.setValue(c);
+      },
+      delete: () => {
+        if (h.selected === "Default") {
+          alert("Cannot delete Default preset");
+          return;
+        }
+        if (confirm(`Delete preset "${h.selected}"?`)) {
+          const c = this.presetStoragePrefix + h.selected;
+          localStorage.removeItem(c);
+          const u = d();
+          p.setOptions(u), h.selected = "Default", p.setValue("Default"), this.reset();
+        }
+      },
+      export: () => {
+        const c = this.save(), u = (T) => {
+          const N = {
+            controllers: {},
+            folders: {}
+          };
+          for (const [E, L] of Object.entries(T.controllers))
+            E.startsWith("_") || (N.controllers[E] = L);
+          for (const [E, L] of Object.entries(
+            T.folders
+          ))
+            E.startsWith("_") || (N.folders[E] = u(L));
+          return N;
+        }, f = u(c), v = {
+          _presetName: h.selected || "CustomPreset",
+          _exportDate: (/* @__PURE__ */ new Date()).toISOString(),
+          _instructions: "To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",
+          ...f
+        }, I = JSON.stringify(v, null, 2), S = new Blob([I], { type: "application/json" }), C = URL.createObjectURL(S), g = document.createElement("a");
+        g.href = C;
+        const b = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], V = h.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);
+      },
+      import: () => {
+        const c = document.createElement("input");
+        c.type = "file", c.accept = ".json", c.onchange = (u) => {
+          const f = u.target.files?.[0];
+          if (!f) return;
+          const v = new FileReader();
+          v.onload = (I) => {
+            try {
+              const S = I.target?.result, C = JSON.parse(S), g = {
+                controllers: C.controllers || {},
+                folders: C.folders || {}
+              };
+              if (!g.controllers || !g.folders) {
+                alert(
+                  "Invalid preset file: missing 'controllers' or 'folders'"
+                );
+                return;
+              }
+              this.load(g);
+              const b = C._presetName || "ImportedPreset";
+              if (confirm(
+                `Preset loaded! Save as "${b}" to User Presets?`
+              )) {
+                const T = this.presetStoragePrefix + b;
+                this.saveToLocalStorage(T);
+                const N = d();
+                p.setOptions(N), h.selected = b, p.setValue(b);
+              }
+            } catch (S) {
+              alert(
+                `Failed to import preset: ${S instanceof Error ? S.message : "Invalid JSON"}`
+              ), console.error("Import error:", S);
+            }
+          }, v.readAsText(f);
+        }, c.click();
+      }
+    }, y = d(), p = l.addSelect(h, "selected", {
+      label: "Preset",
+      options: y
+    });
+    l.addButton("Load", () => h.load()), l.addButton("Save / New", () => h.save()), l.addButton("Delete", () => h.delete()), l.addButton("Export JSON", () => h.export()), l.addButton("Import JSON", () => h.import());
+  }
+  saveToLocalStorage(t) {
+    const e = this.save();
+    try {
+      localStorage.setItem(t, JSON.stringify(e));
+    } catch (i) {
+      console.warn("GUI: Failed to save to localStorage", i);
+    }
+  }
+  loadFromLocalStorage(t) {
+    try {
+      const e = localStorage.getItem(t);
+      if (e) {
+        const i = JSON.parse(e);
+        this.load(i);
+      }
+    } catch (e) {
+      console.warn("GUI: Failed to load from localStorage", e);
+    }
+  }
+  saveDefaultPreset() {
+    const t = this.presetStoragePrefix + "Default";
+    this.save(), this.saveToLocalStorage(t);
+  }
+  destroy() {
+    this.stats.destroy(), this.domElement.remove(), this.controllers = [], this.folders = [];
+  }
+}
+export {
+  X as ArrayController,
+  z as AudioSignals,
+  W as BooleanController,
+  _ as ButtonController,
+  J as ColorController,
+  m as Controller,
+  et as GUI,
+  Q as GradientController,
+  $ as MidiSignals,
+  q as NumberController,
+  G as RadioController,
+  H as SelectController,
+  x as audioSignals,
+  U as midiSignals
+};

package/dist/control-panel.umd.cjs

@@ -0,0 +1 @@
+(function(u,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(u=typeof globalThis<"u"?globalThis:u||self,o(u.ControlPanel={}))})(this,(function(u){"use strict";function o(n,t={},e=[]){const i=document.createElement(n);for(const[s,a]of Object.entries(t))s==="className"?i.className=String(a):s==="style"&&typeof a=="object"?Object.assign(i.style,a):s==="open"&&typeof a=="boolean"?a?i.setAttribute("open",""):i.removeAttribute("open"):typeof a!="object"&&i.setAttribute(s,String(a));for(const s of e)typeof s=="string"?i.appendChild(document.createTextNode(s)):i.appendChild(s);return i}function D(n){const t=o("button",{className:"cp-button cp-button-delete"},["×"]);return t.addEventListener("click",n),t}function K(n){return n.replace(/([A-Z])/g," $1").replace(/^./,t=>t.toUpperCase()).trim()}function O(n,t,e){return Math.min(Math.max(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)throw new Error("Input and output ranges must have at least two values");let i=0;for(;i<t.length-1&&n>t[i+1];)i++;if(i===t.length-1)return e[e.length-1];if(i===0&&n<t[0])return e[0];const s=t[i],a=t[i+1],r=e[i],l=e[i+1];return(n-s)/(a-s)*(l-r)+r}class B{constructor(){this.source=null,this.stream=null,this.fftSize=2048,this.smoothingTimeConstant=.92,this.spectrumBoost=2,this.levels={bass:0,mids:0,highs:0,volume:0},this.peaks={bass:0,mids:0,highs:0,volume: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 i=await e;this.ctx.state==="suspended"&&this.ctx.resume(),this.source&&this.source.disconnect(),this.stream&&this.stream.getTracks().forEach(s=>s.stop()),this.stream=i,this.source=this.ctx.createMediaStreamSource(this.stream),this.source.connect(this.analyser),this._isAnalyzing=!0,this.loop()}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 d=this.dataArray.length;for(let h=0;h<d;h++){const p=1+h/d*(this.spectrumBoost-1);this.dataArray[h]=Math.min(255,this.dataArray[h]*p)}}const t=[2,10],e=[10,150],i=[150,600],s=this.getAverage(t[0],t[1]),a=this.getAverage(e[0],e[1]),r=this.getAverage(i[0],i[1]),l=this.getAverage(0,i[1]);this.processLevel("bass",s),this.processLevel("mids",a),this.processLevel("highs",r),this.processLevel("volume",l)}processLevel(t,e){this.peaks[t]-=5e-4,this.peaks[t]=O(this.peaks[t],.1,1),e>this.peaks[t]&&(this.peaks[t]=e),this.levels[t]=O(Q(e,[0,this.peaks[t]],[0,1]),0,1)}getAverage(t,e){let i=0;const s=e-t;if(s<=0)return 0;for(let a=t;a<e;a++)i+=this.dataArray[a];return i/s/255}getSignal(t){return()=>this.levels[t]}}const x=new B;class F{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,[i]=e;if((i&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,[i,s]=e,a=i&240,r=t.currentTarget.name||"unknown",l=a===144||a===128?"note":"ctrl",d=r.replace(/[^a-zA-Z0-9]/g,"");return`${s}_${l}_${d}`}normalizeValue(t){const[e,i,s]=t,a=e&240;return a===144?s>0?1:0:a===128?0:a===176?s/127:0}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 k=new F,M=class M{constructor(t,e,i={}){this.changeFns=new Set,this.object=t,this.property=e,this.key=i.id??e,this.initialValue=this.object[this.property],this.domElement=o("div",{className:"cp-controller"});const s=i.label??K(e),a=o("label",{className:"cp-label"},[String(s)]);a.setAttribute("title",String(s)),this.domElement.appendChild(a),i.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)}};M.audio=x,M.midi=k;let m=M;const P={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 R{constructor(t){this.rafId=null,this.currentSignalType=null,this.currentMidiId=null,this.currentEase="linear",this.currentBehaviour="forward",this.loop=()=>{if(this.currentSignalType){let e=0;this.currentSignalType==="midi"?this.currentMidiId&&(e=m.midi.getSignal(this.currentMidiId)()):e=m.audio.getSignal(this.currentSignalType)();const i=P[this.currentEase](e);this.onChange(i,this.currentBehaviour),this.rafId=requestAnimationFrame(this.loop)}},this.onChange=t.onChange,this.setupControllers(t.container)}setupControllers(t){const e=this.createSettingSelect("signal",["none","bass","mids","highs","volume","midi"],r=>this.setSignalType(r));this.signalSelect=e.select,t.appendChild(e.row),this.midiRow=o("div",{className:"cp-setting-row",style:"display: none;"});const i=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..."){m.midi.cancelListen(),this.setMidiId(null);return}this.midiBtn.textContent="Listening...";const r=await m.midi.listen();this.setMidiId(r)}),this.midiRow.appendChild(i),this.midiRow.appendChild(this.midiBtn),t.appendChild(this.midiRow);const s=this.createSettingSelect("behaviour",["forward","backward","loopForward","loopBackward","pingpong"],r=>this.setBehaviour(r));this.behaviourRow=s.row,this.behaviourSelect=s.select,this.behaviourRow.style.display="none",this.behaviourSelect.value=this.currentBehaviour,t.appendChild(this.behaviourRow);const a=this.createSettingSelect("ease",Object.keys(P),r=>this.setEase(r));this.easeRow=a.row,this.easeSelect=a.select,this.easeRow.style.display="none",this.easeSelect.value=this.currentEase,t.appendChild(this.easeRow)}createSettingSelect(t,e,i){const s=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 d=o("option",{value:l},[l]);r.appendChild(d)}),r.addEventListener("change",()=>i(r.value)),s.appendChild(a),s.appendChild(r),{row:s,select:r}}setSignalType(t){if(!t||t==="none")this.currentSignalType=null,this.currentMidiId=null,this.midiRow.style.display="none",this.easeRow.style.display="none",this.behaviourRow.style.display="none",this.stop(),this.signalSelect.value!=="none"&&(this.signalSelect.value="none");else{this.currentSignalType=t;const e=t==="midi";this.midiRow.style.display=e?"flex":"none",this.easeRow.style.display="flex",this.behaviourRow.style.display="flex",e||(this.currentMidiId=null,m.audio.ctx.state==="suspended"&&m.audio.setInput("microphone")),this.start(),this.signalSelect.value!==t&&(this.signalSelect.value=t)}}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 j 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=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"});this.input=o("input",{type:"range",className:"cp-input-range",step:i.step??"any"}),i.min!==void 0&&(this.input.min=String(i.min)),i.max!==void 0&&(this.input.max=String(i.max)),this.input.value=String(this.value),this.display=o("span",{className:"cp-value-display"},[String(this.value.toFixed(1))]),this.input.addEventListener("input",()=>{const p=parseFloat(this.input.value);isNaN(p)||(this.setValue(p),this.display.textContent=String(p.toFixed(1)))}),this.input.addEventListener("click",p=>{p.stopPropagation()});const r=o("div",{className:"cp-controller-summary-content"});r.appendChild(this.input),r.appendChild(this.display),a.appendChild(r),s.appendChild(a);const l=o("div",{className:"cp-number-settings"}),d=this.createSetting("min",i.min,p=>this.setMin(p));this.minInput=d.input,l.appendChild(d.row);const h=this.createSetting("max",i.max,p=>this.setMax(p));this.maxInput=h.input,l.appendChild(h.row);const v=this.createSetting("step",i.step,p=>this.setStep(p));this.stepInput=v.input,l.appendChild(v.row),this.signalHandler=new R({container:l,onChange:(p,c)=>this.applySignal(p,c)}),s.appendChild(l),this.appendWidget(s)}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 i=this.max-this.min;let s;if(e==="forward")s=this.min+t*i;else if(e==="backward")s=this.max-t*i;else{const a=t*(i*.01);s=this.value,e==="loopForward"?(s+=a,s>this.max&&(s=this.min+(s-this.min)%i)):e==="loopBackward"?(s-=a,s<this.min&&(s=this.max-(this.max-s)%i)):e==="pingpong"&&(s+=a*this.pingPongDirection,s>=this.max?(s=this.max,this.pingPongDirection=-1):s<=this.min&&(s=this.min,this.pingPongDirection=1))}s=this.roundToStep(s),this.setValue(s),this.input.value=String(s),this.display.textContent=String(s.toFixed(1))}roundToStep(t){const e=this.input.step;if(e==="any"||e===""||isNaN(parseFloat(e)))return t;const i=parseFloat(e),s=this.min;return s+Math.round((t-s)/i)*i}createSetting(t,e,i){const s=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",()=>i(r.value)),s.appendChild(a),s.appendChild(r),{row:s,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 i=t.value;!isNaN(this.min)&&i<this.min&&(i=this.min),!isNaN(this.max)&&i>this.max&&(i=this.max),this.setValue(i),this.signalHandler?.load(e.signal)}}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 z extends m{constructor(t,e,i){super(t,e,i),this.optionValues=[],this.select=o("select",{className:"cp-select"}),this.optionValues=i.options||[],this.optionValues.forEach((s,a)=>{const r=o("option",{value:String(a)},[String(s)]);this.select.appendChild(r)}),this.updateDisplay(),this.select.addEventListener("change",()=>{const s=parseInt(this.select.value),a=this.optionValues[s];this.setValue(a)}),this.appendWidget(this.select)}setOptions(t){this.select.innerHTML="",this.optionValues=t,this.optionValues.forEach((e,i)=>{const s=o("option",{value:String(i)},[String(e)]);this.select.appendChild(s)}),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 U extends m{constructor(t,e,i={}){const s={action:e};super(s,"action",i);const a=i.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 $ extends m{constructor(t,e,i={}){super(t,e,i),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 q extends m{constructor(t,e,i){super(t,e,i),this.buttons=[],this.optionValues=[],this.container=o("div",{className:"cp-radios"}),this.optionValues=i.options||[],this.optionValues.forEach(s=>{const a=o("button",{className:"cp-button cp-radio"},[String(s)]);a.addEventListener("click",()=>{this.setValue(s)}),this.container.appendChild(a),this.buttons.push(a)}),this.updateDisplay(),this.appendWidget(this.container)}updateDisplay(){const t=this.value;this.buttons.forEach((e,i)=>{this.optionValues[i]===t?e.setAttribute("data-active","true"):e.removeAttribute("data-active")})}}class H extends m{constructor(t,e,i={}){super(t,e,i),this.input=o("input",{type:"color",className:"cp-input-color",value:this.value||"#000000"}),this.appendWidget(this.input),this.input.addEventListener("input",s=>{const a=s.target;this.setValue(a.value)}),this.updateDisplay()}updateDisplay(){this.input.value=this.value}}function _(n){const t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;n=n.replace(t,(i,s,a,r)=>s+s+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 X(n,t,e){return"#"+((1<<24)+(Math.round(n)<<16)+(Math.round(t)<<8)+Math.round(e)).toString(16).slice(1)}function I(n){const t=n/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function A(n){return n<=.0031308?n*12.92*255:(1.055*Math.pow(n,1/2.4)-.055)*255}function Y(n,t,e){const[i,s,a]=_(n),[r,l,d]=_(t),h=I(i),v=I(s),p=I(a),c=I(r),f=I(l),g=I(d),S=h+e*(c-h),N=v+e*(f-v),C=p+e*(g-p),b=A(S),y=A(N),w=A(C);return X(b,y,w)}class W 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},{color:"#ffffff",position:1}],this.sortStops();const s=o("details",{className:"cp-controller-details"}),a=o("summary",{className:"cp-controller-summary"}),r=o("div",{className:"cp-controller-summary-content"});this.displayColor=o("div",{className:"cp-color-swatch",style:`background-color: ${this.value}`}),this.displayText=o("span",{className:"cp-value-display"},[String(this.value)]),r.appendChild(this.displayColor),r.appendChild(this.displayText),a.appendChild(r),s.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 d=o("button",{className:"cp-button"},["+ Add Stop"]);d.addEventListener("click",()=>{this.stops.push({color:"#ffffff",position:.5}),this.sortStops(),this.renderStops(),this.updateOutput()}),l.appendChild(d);const h=o("hr",{className:"cp-separator"});l.appendChild(h),this.signalHandler=new R({container:l,onChange:(v,p)=>this.applySignal(v,p)}),s.appendChild(l),this.appendWidget(s),this.updateOutput(0)}sortStops(){this.stops.sort((t,e)=>t.position-e.position)}renderStops(){this.stopsContainer.innerHTML="",this.stops.forEach((t,e)=>{const i=o("div",{className:"cp-setting-row"}),s=o("input",{type:"color",className:"cp-input-color",value:t.color});s.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 d=parseFloat(l.target.value);isNaN(d)&&(d=0),t.position=Math.max(0,Math.min(1,d)),this.sortStops(),this.renderStops(),this.updateOutput()});const r=D(()=>{this.stops.splice(e,1),this.renderStops(),this.updateOutput()});i.appendChild(s),i.appendChild(a),i.appendChild(r),this.stopsContainer.appendChild(i)})}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 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 r=a.position-s.position,l=r===0?0:(t-s.position)/r;e=Y(s.color,a.color,l);break}}this.setValue(e),this.updateDisplay()}updateDisplay(){this.displayColor&&(this.displayColor.style.backgroundColor=this.value),this.displayText&&(this.displayText.textContent=this.value)}applySignal(t,e){let i=t;if(e==="forward")i=t;else if(e==="backward")i=1-t;else{const s=t*.05;e==="loopForward"?(this.animationT=(this.animationT+s)%1,i=this.animationT):e==="loopBackward"?(this.animationT=(this.animationT-s+1)%1,i=this.animationT):e==="pingpong"&&(this.animationT+=s*this.pingPongDirection,this.animationT>=1?(this.animationT=1,this.pingPongDirection=-1):this.animationT<=0&&(this.animationT=0,this.pingPongDirection=1),i=this.animationT)}this.updateOutput(i),this.manualPosition=i}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 G 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=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),s.appendChild(a);const d=o("div",{className:"cp-number-settings"});this.itemsContainer=o("div",{className:"cp-stops-container"}),this.renderItems(),d.appendChild(this.itemsContainer);const h=o("button",{className:"cp-button cp-input-small",style:"margin-top: 8px; width: 100%;"},["+ Add Item"]);h.addEventListener("click",()=>{this.addItem()}),d.appendChild(h),s.appendChild(d),this.appendWidget(s)}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 i=o("div",{className:"cp-setting-row"});let s;this.itemType==="color"?s=o("input",{type:"color",className:"cp-input-color",value:t}):this.itemType==="number"?s=o("input",{type:"number",className:"cp-input-number cp-input-small",step:"any",value:t}):s=o("input",{type:"text",className:"cp-input-number cp-input-small",value:t}),s.addEventListener("input",r=>{this.items[e]=r.target.value,this.updateValue()});const a=D(()=>{this.items.splice(e,1),this.renderItems(),this.updateValue()});i.appendChild(s),i.appendChild(a),this.itemsContainer.appendChild(i)})}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 tt{constructor(){this.frames=0,this.pollingInterval=1e3,this.prevTime=performance.now(),this.render=()=>{this.frames++;const t=performance.now();if(t>=this.prevTime+this.pollingInterval){const e=Math.round(this.frames*1e3/(t-this.prevTime));let i="";const s=performance.memory;s&&(i=` / ${Math.round(s.usedJSHeapSize/1048576)}MB`),this.domElement.textContent=`${e} FPS${i}`,this.prevTime=t,this.frames=0}this.rafId=requestAnimationFrame(this.render)},this.domElement=o("span",{className:"cp-stats"}),this.rafId=requestAnimationFrame(this.render)}destroy(){cancelAnimationFrame(this.rafId)}}class J{constructor(){this.controllers=[],this.folders=[]}addNumber(t,e,i={}){const s=new j(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addSelect(t,e,i={}){const s=new z(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addBoolean(t,e,i={}){const s=new $(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addButton(t,e,i={}){const s=new U(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addRadio(t,e,i={}){const s=new q(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addColor(t,e,i={}){const s=new H(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addGradient(t,e,i={}){const s=new W(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addArray(t,e,i={}){const s=new G(t,e,i);return this.contentElement.appendChild(s.domElement),this.controllers.push(s),s}addFolder(t){const e=new et(t);return this.contentElement.appendChild(e.domElement),this.folders.push(e),e}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 i=t.controllers[e.key];i!==void 0&&e.load(i)}else e.reset();for(const e of this.folders){const i=t.folders?t.folders[e.title]:void 0;e.load(i)}}reset(){for(const t of this.controllers)typeof t.value!="function"&&t.reset();for(const t of this.folders)t.reset()}}class et extends J{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),this.domElement.appendChild(o("hr",{className:"cp-separator"}))}}class st extends J{constructor(t,e={}){super(),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 i=o("span",{},[e.title||"GUI"]);this.summaryElement.appendChild(i),this.stats=new tt,this.summaryElement.appendChild(this.stats.domElement),this.contentElement=o("div",{className:"cp-content"}),this.domElement.appendChild(this.contentElement);const s=this.addFolder("_Signals"),a={audioInput:null,fftSize:2048};s.addRadio(a,"audioInput",{label:"Audio Signal",options:["microphone","browser"]}).onChange(c=>{x.setInput(c)}),s.addSelect(a,"fftSize",{label:"FFT Size",options:[256,512,1024,2048]}).onChange(c=>{x.setFFTSize(c)}),s.addNumber(x,"smoothingTimeConstant",{min:0,max:.99,step:.01,label:"Smoothing"}).onChange(c=>{x.analyser.smoothingTimeConstant=c}),s.addNumber(x,"spectrumBoost",{min:1,max:5,step:.1,label:"Compression"}),t?t.appendChild(this.domElement):document.body.appendChild(this.domElement);const r=e.title||"GUI";this.presetStoragePrefix=`cp-presets-${r}-`;const l=this.addFolder("_User Presets"),d=()=>{const c=["Default"];if(typeof localStorage>"u")return c;for(let f=0;f<localStorage.length;f++){const g=localStorage.key(f);if(g&&g.startsWith(this.presetStoragePrefix)){const S=g.substring(this.presetStoragePrefix.length);S!=="Default"&&!c.includes(S)&&c.push(S)}}return c.sort()},h={selected:"Default",save:()=>{const c=prompt("Preset Name:",h.selected);if(c){if(c==="Default"){alert("Cannot overwrite Default preset");return}const f=this.presetStoragePrefix+c;this.saveToLocalStorage(f);const g=d();p.setOptions(g),h.selected=c,p.setValue(c)}},load:()=>{const c=h.selected,f=this.presetStoragePrefix+c;this.loadFromLocalStorage(f),h.selected=c,p.setValue(c)},delete:()=>{if(h.selected==="Default"){alert("Cannot delete Default preset");return}if(confirm(`Delete preset "${h.selected}"?`)){const c=this.presetStoragePrefix+h.selected;localStorage.removeItem(c);const f=d();p.setOptions(f),h.selected="Default",p.setValue("Default"),this.reset()}},export:()=>{const c=this.save(),f=L=>{const E={controllers:{},folders:{}};for(const[T,V]of Object.entries(L.controllers))T.startsWith("_")||(E.controllers[T]=V);for(const[T,V]of Object.entries(L.folders))T.startsWith("_")||(E.folders[T]=f(V));return E},g=f(c),S={_presetName:h.selected||"CustomPreset",_exportDate:new Date().toISOString(),_instructions:"To add as factory preset: Copy 'controllers' and 'folders' fields into the presets.json file",...g},N=JSON.stringify(S,null,2),C=new Blob([N],{type:"application/json"}),b=URL.createObjectURL(C),y=document.createElement("a");y.href=b;const w=new Date().toISOString().split("T")[0],Z=h.selected.replace(/[^a-z0-9]/gi,"-").toLowerCase();y.download=`${r.toLowerCase()}-preset-${Z}-${w}.json`,document.body.appendChild(y),y.click(),document.body.removeChild(y),URL.revokeObjectURL(b)},import:()=>{const c=document.createElement("input");c.type="file",c.accept=".json",c.onchange=f=>{const g=f.target.files?.[0];if(!g)return;const S=new FileReader;S.onload=N=>{try{const C=N.target?.result,b=JSON.parse(C),y={controllers:b.controllers||{},folders:b.folders||{}};if(!y.controllers||!y.folders){alert("Invalid preset file: missing 'controllers' or 'folders'");return}this.load(y);const w=b._presetName||"ImportedPreset";if(confirm(`Preset loaded! Save as "${w}" to User Presets?`)){const L=this.presetStoragePrefix+w;this.saveToLocalStorage(L);const E=d();p.setOptions(E),h.selected=w,p.setValue(w)}}catch(C){alert(`Failed to import preset: ${C instanceof Error?C.message:"Invalid JSON"}`),console.error("Import error:",C)}},S.readAsText(g)},c.click()}},v=d(),p=l.addSelect(h,"selected",{label:"Preset",options:v});l.addButton("Load",()=>h.load()),l.addButton("Save / New",()=>h.save()),l.addButton("Delete",()=>h.delete()),l.addButton("Export JSON",()=>h.export()),l.addButton("Import JSON",()=>h.import())}saveToLocalStorage(t){const e=this.save();try{localStorage.setItem(t,JSON.stringify(e))}catch(i){console.warn("GUI: Failed to save to localStorage",i)}}loadFromLocalStorage(t){try{const e=localStorage.getItem(t);if(e){const i=JSON.parse(e);this.load(i)}}catch(e){console.warn("GUI: Failed to load from localStorage",e)}}saveDefaultPreset(){const t=this.presetStoragePrefix+"Default";this.save(),this.saveToLocalStorage(t)}destroy(){this.stats.destroy(),this.domElement.remove(),this.controllers=[],this.folders=[]}}u.ArrayController=G,u.AudioSignals=B,u.BooleanController=$,u.ButtonController=U,u.ColorController=H,u.Controller=m,u.GUI=st,u.GradientController=W,u.MidiSignals=F,u.NumberController=j,u.RadioController=q,u.SelectController=z,u.audioSignals=x,u.midiSignals=k,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@digitalmeadow/control-panel",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A minimalist, framework-agnostic control panel GUI",
+  "author": "Digital Meadow <inbox@digitalmeadow.studio> (https://digitalmeadow.studio)",
+  "keywords": [
+    "control panel",
+    "gui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/digitalmeadow/control-panel.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/control-panel.umd.cjs",
+  "module": "./dist/control-panel.js",
+  "exports": {
+    ".": {
+      "import": "./dist/control-panel.js",
+      "require": "./dist/control-panel.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.3",
+    "typescript": "5.9.3",
+    "vite": "7.3.1"
+  }
+}