@digitalmeadow/control-panel 1.0.16 → 1.0.17

package/dist/index.js

@@ -1,6 +1,6 @@
 const W = `
 .cp-root {
-  --cp-scale: 1;
+  --cp-scale: 2;
   
   --cp-space-1: calc(1px * var(--cp-scale));
   --cp-space-2: calc(2px * var(--cp-scale));
@@ -8,6 +8,8 @@ const W = `
   --cp-space-6: calc(6px * var(--cp-scale));
   --cp-space-8: calc(8px * var(--cp-scale));
   
+  --cp-border-width: calc(1px * var(--cp-scale));
+
   --cp-font-size-main: calc(10px * var(--cp-scale));
   --cp-font-size-details: calc(10px * var(--cp-scale));
   
@@ -142,7 +144,7 @@ const W = `
   padding: var(--cp-space-2) var(--cp-space-4);
   background: transparent;
   color: inherit;
-  border: 1px solid var(--cp-color-2);
+  border: var(--cp-border-width) solid var(--cp-color-2);
   border-radius: var(--cp-border-radius);
   font-family: inherit;
   font-size: inherit;
@@ -186,7 +188,7 @@ const W = `
   -moz-appearance: none;
   color: transparent;
   background: transparent;
-  border: 1px solid var(--cp-color-2);
+  border: var(--cp-border-width) solid var(--cp-color-2);
   border-radius: var(--cp-border-radius);
   outline: none;
   font-size: 0;
@@ -292,7 +294,7 @@ const W = `
   margin: var(--cp-space-4) 0;
   width: 100%;
   border: none;
-  border-top: 1px solid var(--cp-color-1);
+  border-top: var(--cp-border-width) solid var(--cp-color-1);
 }
 
 .cp-setting-row {
@@ -360,7 +362,7 @@ const W = `
 .cp-input-color {
   width: var(--cp-swatch-size);
   height: var(--cp-swatch-size);
-  border: 1px solid var(--cp-color-1);
+  border: var(--cp-border-width) solid var(--cp-color-1);
   border-radius: 50%;
   -webkit-appearance: none;
 }
@@ -390,7 +392,7 @@ function _() {
   const n = document.createElement("style");
   n.id = "control-panel-styles", n.textContent = W, document.head.appendChild(n), B = !0;
 }
-function r(n, t = {}, e = []) {
+function o(n, t = {}, e = []) {
   const s = document.createElement(n);
   for (const [i, a] of Object.entries(t))
     i === "className" ? s.className = String(a) : i === "style" && typeof a == "object" ? Object.assign(s.style, a) : i === "open" && typeof a == "boolean" ? a ? s.setAttribute("open", "") : s.removeAttribute("open") : typeof a != "object" && s.setAttribute(i, String(a));
@@ -399,7 +401,7 @@ function r(n, t = {}, e = []) {
   return s;
 }
 function j(n) {
-  const t = r(
+  const t = o(
     "button",
     {
       className: "cp-button cp-button-delete"
@@ -426,8 +428,8 @@ function Y(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], l = e[s + 1];
-  return (n - i) / (a - i) * (l - o) + o;
+  const i = t[s], a = t[s + 1], r = e[s], l = e[s + 1];
+  return (n - i) / (a - i) * (l - r) + r;
 }
 class X {
   constructor() {
@@ -473,8 +475,8 @@ class X {
         this.dataArray[h] = Math.min(255, this.dataArray[h] * y);
       }
     }
-    const t = [2, 10], e = [10, 150], s = [150, 600], i = this.getAverage(t[0], t[1]), a = this.getAverage(e[0], e[1]), o = this.getAverage(s[0], s[1]), l = this.getAverage(0, s[1]);
-    this.processLevel("bass", i), this.processLevel("mids", a), this.processLevel("highs", o), this.processLevel("volume", l);
+    const t = [2, 10], e = [10, 150], s = [150, 600], i = this.getAverage(t[0], t[1]), a = this.getAverage(e[0], e[1]), r = this.getAverage(s[0], s[1]), l = this.getAverage(0, s[1]);
+    this.processLevel("bass", i), this.processLevel("mids", a), this.processLevel("highs", r), this.processLevel("volume", l);
   }
   processLevel(t, e) {
     this.peaks[t] -= 5e-4, this.peaks[t] = q(this.peaks[t], 0.1, 1), e > this.peaks[t] && (this.peaks[t] = e), this.levels[t] = q(
@@ -519,11 +521,11 @@ class G {
   handleMessage(t) {
     const e = t.data, [s] = e;
     if ((s & 240) >= 240) return;
-    const a = this.getIdFromMessage(t), o = this.normalizeValue(e);
-    this.values.set(a, o), this.isListening && this.resolveListen && o > 0 && (this.resolveListen(a), this.isListening = !1, this.resolveListen = null, this.listeningCallback && this.listeningCallback());
+    const a = this.getIdFromMessage(t), r = this.normalizeValue(e);
+    this.values.set(a, r), this.isListening && this.resolveListen && r > 0 && (this.resolveListen(a), this.isListening = !1, this.resolveListen = null, this.listeningCallback && this.listeningCallback());
   }
   getIdFromMessage(t) {
-    const e = t.data, [s, i] = e, a = s & 240, o = t.currentTarget.name || "unknown", l = a === 144 || a === 128 ? "note" : "ctrl", p = o.replace(/[^a-zA-Z0-9]/g, "");
+    const e = t.data, [s, i] = e, a = s & 240, r = t.currentTarget.name || "unknown", l = a === 144 || a === 128 ? "note" : "ctrl", p = r.replace(/[^a-zA-Z0-9]/g, "");
     return `${i}_${l}_${p}`;
   }
   normalizeValue(t) {
@@ -598,20 +600,20 @@ class K {
     return this.normalizeOutput(i, e);
   }
   sine(t) {
-    const e = t ? { ...this.configs.get("sine"), ...t } : this.configs.get("sine"), s = this.getTime(), i = e.phase * Math.PI * 2, o = (Math.sin(s * e.frequency * Math.PI * 2 + i) + 1) / 2;
-    return this.normalizeOutput(o, e);
+    const e = t ? { ...this.configs.get("sine"), ...t } : this.configs.get("sine"), s = this.getTime(), i = e.phase * Math.PI * 2, r = (Math.sin(s * e.frequency * Math.PI * 2 + i) + 1) / 2;
+    return this.normalizeOutput(r, e);
   }
   sawtooth(t) {
     const e = t ? { ...this.configs.get("sawtooth"), ...t } : this.configs.get("sawtooth"), s = this.getTime(), i = e.phase, a = (s * e.frequency + i) % 1 + i % 1;
     return this.normalizeOutput(a % 1, e);
   }
   triangle(t) {
-    const e = t ? { ...this.configs.get("triangle"), ...t } : this.configs.get("triangle"), s = this.getTime(), i = e.phase, a = (s * e.frequency + i) % 1, o = a < 0.5 ? a * 2 : 2 - a * 2;
-    return this.normalizeOutput(o, e);
+    const e = t ? { ...this.configs.get("triangle"), ...t } : this.configs.get("triangle"), s = this.getTime(), i = e.phase, a = (s * e.frequency + i) % 1, r = a < 0.5 ? a * 2 : 2 - a * 2;
+    return this.normalizeOutput(r, e);
   }
   square(t) {
-    const e = t ? { ...this.configs.get("square"), ...t } : this.configs.get("square"), s = this.getTime(), i = e.phase, o = (s * e.frequency + i) % 1 < 0.5 ? 0 : 1;
-    return this.normalizeOutput(o, e);
+    const e = t ? { ...this.configs.get("square"), ...t } : this.configs.get("square"), s = this.getTime(), i = e.phase, r = (s * e.frequency + i) % 1 < 0.5 ? 0 : 1;
+    return this.normalizeOutput(r, e);
   }
   random(t) {
     const e = t ? { ...this.configs.get("random"), ...t } : this.configs.get("random"), s = performance.now(), i = 1e3 / e.frequency;
@@ -639,8 +641,8 @@ class K {
 }
 const Q = new K(), A = class A {
   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" }, [
+    this.changeFns = /* @__PURE__ */ new Set(), this.object = t, this.property = e, this.key = s.id ?? e, this.initialValue = this.object[this.property], this.domElement = o("div", { className: "cp-controller" });
+    const i = s.label ?? J(e), a = o("label", { className: "cp-label" }, [
       String(i)
     ]);
     a.setAttribute("title", String(i)), this.domElement.appendChild(a), s.disabled && this.domElement.setAttribute("data-disabled", "true");
@@ -675,7 +677,7 @@ A.audio = k, A.midi = Z, A.math = Q;
 let u = A;
 class tt extends u {
   constructor(t, e, s = {}) {
-    super(t, e, s), this.input = r("input", {
+    super(t, e, s), this.input = o("input", {
       type: "number",
       className: "cp-input-number",
       value: String(this.value)
@@ -747,16 +749,16 @@ class H {
       ],
       (l) => this.setSignalType(l)
     );
-    this.signalSelect = e.select, t.appendChild(e.row), this.midiRow = r("div", {
+    this.signalSelect = e.select, t.appendChild(e.row), this.midiRow = o("div", {
       className: "cp-setting-row",
       style: "display: none;"
     });
-    const s = r(
+    const s = o(
       "label",
       { className: "cp-setting-label" },
       ["Midi"]
     );
-    this.midiBtn = r(
+    this.midiBtn = o(
       "button",
       { className: "cp-button cp-input-small" },
       ["Learn"]
@@ -768,7 +770,7 @@ class H {
       this.midiBtn.textContent = "Listening...";
       const l = await u.midi.listen();
       this.setMidiId(l);
-    }), this.midiRow.appendChild(s), this.midiRow.appendChild(this.midiBtn), t.appendChild(this.midiRow), this.mathParamsContainer = r("div", {
+    }), this.midiRow.appendChild(s), this.midiRow.appendChild(this.midiBtn), t.appendChild(this.midiRow), this.mathParamsContainer = o("div", {
       className: "cp-number-settings"
     }), t.appendChild(this.mathParamsContainer);
     const i = this.createSettingSelect(
@@ -783,24 +785,24 @@ class H {
       (l) => this.setEase(l)
     );
     this.easeRow = a.row, this.easeSelect = a.select, this.easeRow.style.display = "none", this.easeSelect.value = this.currentEase, t.appendChild(this.easeRow);
-    const o = r("hr", { className: "cp-separator" });
-    t.appendChild(o);
+    const r = o("hr", { className: "cp-separator" });
+    t.appendChild(r);
   }
   createSettingSelect(t, e, s) {
-    const i = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
+    const i = o("div", { className: "cp-setting-row" }), a = o("label", { className: "cp-setting-label" }, [
       t
-    ]), o = r("select", {
+    ]), r = o("select", {
       className: "cp-select cp-input-small"
     });
     return e.forEach((l) => {
-      const p = r("option", { value: l }, [l]);
-      o.appendChild(p);
-    }), o.addEventListener("change", () => s(o.value)), i.appendChild(a), i.appendChild(o), { row: i, select: o };
+      const p = o("option", { value: l }, [l]);
+      r.appendChild(p);
+    }), r.addEventListener("change", () => s(r.value)), i.appendChild(a), i.appendChild(r), { row: i, select: r };
   }
-  createNumberInput(t, e, s, i, a, o) {
-    const l = r("div", { className: "cp-setting-row" }), p = r("label", { className: "cp-setting-label" }, [
+  createNumberInput(t, e, s, i, a, r) {
+    const l = o("div", { className: "cp-setting-row" }), p = o("label", { className: "cp-setting-label" }, [
       t
-    ]), h = r("input", {
+    ]), h = o("input", {
       className: "cp-input-number cp-input-small",
       type: "number",
       value: String(e),
@@ -810,20 +812,20 @@ class H {
     });
     return h.addEventListener("input", () => {
       const d = parseFloat(h.value);
-      isNaN(d) || o(d);
+      isNaN(d) || r(d);
     }), l.appendChild(p), l.appendChild(h), { row: l, input: h };
   }
   updateMathParams(t) {
     this.mathParamsContainer.innerHTML = "";
     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);
+    let s = "Frequency", i = 0.1, a = 10, r = 0.1;
+    t === "random" ? a = 30 : t === "constant" && (s = "Speed", i = 0.01, a = 2, r = 0.01);
     const l = this.createNumberInput(
       s,
       e.frequency,
       i,
       a,
-      o,
+      r,
       (d) => u.math.setConfig(t, { frequency: d })
     );
     this.mathParamsContainer.appendChild(l.row);
@@ -905,16 +907,16 @@ class H {
 class et 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", {
+    const i = o("details", {
       className: "cp-controller-details"
-    }), a = r("summary", {
+    }), a = o("summary", {
       className: "cp-controller-summary"
     });
-    this.input = r("input", {
+    this.input = o("input", {
       type: "range",
       className: "cp-input-range",
       step: s.step ?? "any"
-    }), s.min !== void 0 && (this.input.min = String(s.min)), s.max !== void 0 && (this.input.max = String(s.max)), this.input.value = String(this.value), this.display = r(
+    }), s.min !== void 0 && (this.input.min = String(s.min)), s.max !== void 0 && (this.input.max = String(s.max)), this.input.value = String(this.value), this.display = o(
       "span",
       {
         className: "cp-value-display"
@@ -926,11 +928,11 @@ class et extends u {
     }), this.input.addEventListener("click", (f) => {
       f.stopPropagation();
     });
-    const o = r("div", {
+    const r = o("div", {
       className: "cp-controller-summary-content"
     });
-    o.appendChild(this.input), o.appendChild(this.display), a.appendChild(o), i.appendChild(a);
-    const l = r("div", { className: "cp-number-settings" }), p = this.createSetting(
+    r.appendChild(this.input), r.appendChild(this.display), a.appendChild(r), i.appendChild(a);
+    const l = o("div", { className: "cp-number-settings" }), p = this.createSetting(
       "min",
       s.min,
       (f) => this.setMin(f)
@@ -948,7 +950,7 @@ class et extends u {
       (f) => this.setStep(f)
     );
     this.stepInput = d.input, l.appendChild(d.row);
-    const y = r("hr", { className: "cp-separator" });
+    const y = o("hr", { className: "cp-separator" });
     l.appendChild(y), this.signalHandler = new H({
       container: l,
       onChange: (f, b) => this.applySignal(f, b)
@@ -985,14 +987,14 @@ class et extends u {
     return i + Math.round((t - i) / s) * s;
   }
   createSetting(t, e, s) {
-    const i = r("div", { className: "cp-setting-row" }), a = r("label", { className: "cp-setting-label" }, [
+    const i = o("div", { className: "cp-setting-row" }), a = o("label", { className: "cp-setting-label" }, [
       t
-    ]), o = r("input", {
+    ]), r = o("input", {
       type: "number",
       className: "cp-input-number cp-input-small",
       step: "any"
     });
-    return e !== void 0 && (o.value = String(e)), o.addEventListener("input", () => s(o.value)), i.appendChild(a), i.appendChild(o), { row: i, input: o };
+    return e !== void 0 && (r.value = String(e)), r.addEventListener("input", () => s(r.value)), i.appendChild(a), i.appendChild(r), { row: i, input: r };
   }
   updateDisplay() {
     this.input.value = String(this.value), this.display.textContent = String(this.value.toFixed(1));
@@ -1035,11 +1037,11 @@ class et extends u {
 }
 class st 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) }, [
+    super(t, e, s), this.optionValues = [], this.select = o("select", { className: "cp-select" }), this.optionValues = s.options || [], this.optionValues.forEach((i, a) => {
+      const r = o("option", { value: String(a) }, [
         String(i)
       ]);
-      this.select.appendChild(o);
+      this.select.appendChild(r);
     }), this.updateDisplay(), this.select.addEventListener("change", () => {
       const i = parseInt(this.select.value), a = this.optionValues[i];
       this.setValue(a);
@@ -1047,7 +1049,7 @@ class st extends u {
   }
   setOptions(t) {
     this.select.innerHTML = "", this.optionValues = t, this.optionValues.forEach((e, s) => {
-      const i = r("option", { value: String(s) }, [
+      const i = o("option", { value: String(s) }, [
         String(e)
       ]);
       this.select.appendChild(i);
@@ -1063,11 +1065,11 @@ class it extends u {
     const i = { action: e };
     super(i, "action", s), this.domElement.querySelector(".cp-label")?.remove();
     const a = s.label ?? t;
-    this.button = r("button", { className: "cp-button" }, [
+    this.button = o("button", { className: "cp-button" }, [
       String(a)
     ]), this.button.addEventListener("click", () => {
-      const o = this.value;
-      typeof o == "function" && o(), this.emitChange(o);
+      const r = this.value;
+      typeof r == "function" && r(), this.emitChange(r);
     }), this.appendWidget(this.button);
   }
   updateDisplay() {
@@ -1075,7 +1077,7 @@ class it extends u {
 }
 class nt extends u {
   constructor(t, e, s = {}) {
-    super(t, e, s), this.input = r("input", {
+    super(t, e, s), this.input = o("input", {
       type: "checkbox",
       className: "cp-checkbox"
     }), this.input.checked = this.value, this.input.addEventListener("change", () => {
@@ -1088,8 +1090,8 @@ class nt extends u {
 }
 class at 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" }, [
+    super(t, e, s), this.buttons = [], this.optionValues = [], this.container = o("div", { className: "cp-radios" }), this.optionValues = s.options || [], this.optionValues.forEach((i) => {
+      const a = o("button", { className: "cp-button cp-radio" }, [
         String(i)
       ]);
       a.addEventListener("click", () => {
@@ -1104,9 +1106,9 @@ class at extends u {
     });
   }
 }
-class ot extends u {
+class rt extends u {
   constructor(t, e, s = {}) {
-    super(t, e, s), this.input = r("input", {
+    super(t, e, s), this.input = o("input", {
       type: "color",
       className: "cp-input-color",
       value: this.value || "#000000"
@@ -1121,7 +1123,7 @@ class ot extends u {
 }
 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);
+  n = n.replace(t, (s, i, a, r) => i + i + a + a + r + r);
   const e = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);
   return e ? [
     parseInt(e[1], 16),
@@ -1129,7 +1131,7 @@ function $(n) {
     parseInt(e[3], 16)
   ] : [0, 0, 0];
 }
-function rt(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 T(n) {
@@ -1140,8 +1142,8 @@ function F(n) {
   return n <= 31308e-7 ? n * 12.92 * 255 : (1.055 * Math.pow(n, 1 / 2.4) - 0.055) * 255;
 }
 function lt(n, t, e) {
-  const [s, i, a] = $(n), [o, l, p] = $(t), h = T(s), d = T(i), y = T(a), f = T(o), b = T(l), E = T(p), g = h + e * (f - h), V = d + e * (b - d), S = y + e * (E - y), c = F(g), m = F(V), v = F(S);
-  return rt(c, m, v);
+  const [s, i, a] = $(n), [r, l, p] = $(t), h = T(s), d = T(i), y = T(a), f = T(r), b = T(l), E = T(p), g = h + e * (f - h), V = d + e * (b - d), S = y + e * (E - y), c = F(g), m = F(V), v = F(S);
+  return ot(c, m, v);
 }
 class ct extends u {
   constructor(t, e, s = {}) {
@@ -1149,23 +1151,23 @@ class ct extends u {
       { color: "#000000", position: 0 },
       { color: "#ffffff", position: 1 }
     ], this.sortStops();
-    const i = r("details", {
+    const i = o("details", {
       className: "cp-controller-details"
-    }), a = r("summary", {
+    }), a = o("summary", {
       className: "cp-controller-summary"
-    }), o = r("div", {
+    }), r = o("div", {
       className: "cp-controller-summary-content"
     });
-    this.displayText = r(
+    this.displayText = o(
       "span",
       { className: "cp-value-display" },
       [String(this.value)]
-    ), o.appendChild(this.displayText), a.appendChild(o), i.appendChild(a);
-    const l = r("div", { className: "cp-number-settings" });
-    this.stopsContainer = r("div", {
+    ), r.appendChild(this.displayText), a.appendChild(r), i.appendChild(a);
+    const l = o("div", { className: "cp-number-settings" });
+    this.stopsContainer = o("div", {
       className: "cp-stops-container"
     }), this.renderStops(), l.appendChild(this.stopsContainer);
-    const p = r(
+    const p = o(
       "button",
       {
         className: "cp-button"
@@ -1175,7 +1177,7 @@ class ct extends u {
     p.addEventListener("click", () => {
       this.stops.push({ color: "#ffffff", position: 0.5 }), this.sortStops(), this.renderStops(), this.updateOutput();
     }), l.appendChild(p);
-    const h = r("hr", { className: "cp-separator" });
+    const h = o("hr", { className: "cp-separator" });
     l.appendChild(h), this.signalHandler = new H({
       container: l,
       onChange: (d, y) => this.applySignal(d, y)
@@ -1186,7 +1188,7 @@ class ct extends u {
   }
   renderStops() {
     this.stopsContainer.innerHTML = "", this.stops.forEach((t, e) => {
-      const s = r("div", { className: "cp-gradient-stop-row" }), i = r("input", {
+      const s = o("div", { className: "cp-gradient-stop-row" }), i = o("input", {
         type: "color",
         className: "cp-input-color",
         value: t.color
@@ -1194,7 +1196,7 @@ class ct extends u {
       i.addEventListener("input", (l) => {
         t.color = l.target.value, this.updateOutput();
       });
-      const a = r("input", {
+      const a = o("input", {
         type: "number",
         className: "cp-input-number cp-input-small",
         min: "0",
@@ -1206,10 +1208,10 @@ class ct extends u {
         let p = parseFloat(l.target.value);
         isNaN(p) && (p = 0), t.position = Math.max(0, Math.min(1, p)), this.sortStops(), this.renderStops(), this.updateOutput();
       });
-      const o = j(() => {
+      const r = j(() => {
         this.stops.splice(e, 1), this.renderStops(), this.updateOutput();
       });
-      s.appendChild(i), s.appendChild(a), s.appendChild(o), this.stopsContainer.appendChild(s);
+      s.appendChild(i), s.appendChild(a), s.appendChild(r), this.stopsContainer.appendChild(s);
     });
   }
   // Calculate color at t (0-1) and update value
@@ -1228,7 +1230,7 @@ class ct extends u {
       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, l = o === 0 ? 0 : (t - i.position) / o;
+          const r = a.position - i.position, l = r === 0 ? 0 : (t - i.position) / r;
           e = lt(i.color, a.color, l);
           break;
         }
@@ -1271,21 +1273,21 @@ class ct extends u {
 class pt 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", {
+    const i = o("details", {
       className: "cp-controller-details"
-    }), a = r("summary", {
+    }), a = o("summary", {
       className: "cp-controller-summary"
-    }), o = r("div", {
+    }), r = o("div", {
       className: "cp-controller-summary-content"
-    }), l = r("span", { className: "cp-value-display" }, [
+    }), l = o("span", { className: "cp-value-display" }, [
       `${this.items.length} items`
     ]);
-    o.appendChild(l), a.appendChild(o), i.appendChild(a);
-    const p = r("div", { className: "cp-number-settings" });
-    this.itemsContainer = r("div", {
+    r.appendChild(l), a.appendChild(r), i.appendChild(a);
+    const p = o("div", { className: "cp-number-settings" });
+    this.itemsContainer = o("div", {
       className: "cp-stops-container"
     }), this.renderItems(), p.appendChild(this.itemsContainer);
-    const h = r(
+    const h = o(
       "button",
       {
         className: "cp-button cp-input-small",
@@ -1327,23 +1329,23 @@ class pt extends u {
   }
   renderItems() {
     this.itemsContainer.innerHTML = "", this.items.forEach((t, e) => {
-      const s = r("div", { className: "cp-array-row" });
+      const s = o("div", { className: "cp-array-row" });
       let i;
-      this.itemType === "color" ? i = r("input", {
+      this.itemType === "color" ? i = o("input", {
         type: "color",
         className: "cp-input-color",
         value: t
-      }) : this.itemType === "number" ? i = r("input", {
+      }) : this.itemType === "number" ? i = o("input", {
         type: "number",
         className: "cp-input-number cp-input-small",
         step: "any",
         value: t
-      }) : i = r("input", {
+      }) : i = o("input", {
         type: "text",
         className: "cp-input-number cp-input-small",
         value: t
-      }), i.addEventListener("input", (o) => {
-        this.items[e] = o.target.value, this.updateValue();
+      }), i.addEventListener("input", (r) => {
+        this.items[e] = r.target.value, this.updateValue();
       });
       const a = j(() => {
         this.items.splice(e, 1), this.renderItems(), this.updateValue();
@@ -1376,7 +1378,7 @@ class ht {
         i && (s = ` / ${Math.round(i.usedJSHeapSize / 1048576)}MB`), this.domElement.textContent = `${e} FPS${s}`, this.prevTime = t, this.frames = 0;
       }
       this.rafId = requestAnimationFrame(this.render);
-    }, this.domElement = r("span", { className: "cp-stats" }), this.rafId = requestAnimationFrame(this.render);
+    }, this.domElement = o("span", { className: "cp-stats" }), this.rafId = requestAnimationFrame(this.render);
   }
   destroy() {
     cancelAnimationFrame(this.rafId);
@@ -1411,7 +1413,7 @@ class U {
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addColor(t, e, s = {}) {
-    const i = new ot(t, e, s);
+    const i = new rt(t, e, s);
     return this.contentElement.appendChild(i.domElement), this.controllers.push(i), i;
   }
   addGradient(t, e, s = {}) {
@@ -1427,7 +1429,7 @@ class U {
     return this.addSeparator(), this.contentElement.appendChild(e.domElement), this.folders.push(e), e;
   }
   addSeparator() {
-    const t = r("hr", { className: "cp-separator" });
+    const t = o("hr", { className: "cp-separator" });
     this.contentElement.appendChild(t);
   }
   save() {
@@ -1467,47 +1469,47 @@ class U {
 }
 class dt extends U {
   constructor(t) {
-    super(), this.title = t, this.domElement = r("details", {
+    super(), this.title = t, this.domElement = o("details", {
       className: "cp-folder",
       open: !0
-    }), this.summaryElement = r(
+    }), this.summaryElement = o(
       "summary",
       {
         className: "cp-summary"
       },
       [t]
-    ), this.domElement.appendChild(this.summaryElement), this.contentElement = r("div", {
+    ), this.domElement.appendChild(this.summaryElement), this.contentElement = o("div", {
       className: "cp-content cp-folder-content"
     }), this.domElement.appendChild(this.contentElement);
   }
 }
 class ut extends U {
   constructor(t, e = {}) {
-    super(), _(), this.domElement = r("details", {
+    super(), _(), this.domElement = o("details", {
       className: "cp-root",
       open: !0
-    }), this.summaryElement = r("summary", {
+    }), this.summaryElement = o("summary", {
       className: "cp-summary cp-summary-root"
     }), this.domElement.appendChild(this.summaryElement);
-    const s = r("span", {}, [
+    const s = o("span", {}, [
       e.title || "ControlPanel"
     ]);
     this.summaryElement.appendChild(s), this.stats = new ht(), this.summaryElement.appendChild(this.stats.domElement);
-    let i = !1, a = 0, o = 0, l = 0, p = 0;
+    let i = !1, a = 0, r = 0, l = 0, p = 0;
     this.summaryElement.addEventListener("mousedown", (c) => {
       if (c.target !== this.summaryElement && c.target !== s) return;
-      i = !0, a = c.clientX, o = c.clientY;
+      i = !0, a = c.clientX, r = c.clientY;
       const m = this.domElement.getBoundingClientRect();
       l = m.left, p = m.top, c.preventDefault();
     }), document.addEventListener("mousemove", (c) => {
       if (!i) return;
-      const m = c.clientX - a, v = c.clientY - o, w = l + m, M = p + v;
+      const m = c.clientX - a, v = c.clientY - r, w = l + m, M = p + v;
       this.domElement.style.left = `${w}px`, this.domElement.style.top = `${M}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);
+    }).observe(this.domElement), this.restorePositionAndSize(), this.contentElement = o("div", { className: "cp-content" }), this.domElement.appendChild(this.contentElement);
     const d = this.addFolder("_Signals"), y = {
       audioInput: null,
       fftSize: 2048
@@ -1701,7 +1703,7 @@ export {
   X as AudioSignals,
   nt as BooleanController,
   it as ButtonController,
-  ot as ColorController,
+  rt as ColorController,
   ut as ControlPanel,
   U as ControlPanelContainer,
   u as Controller,

package/dist/index.umd.cjs

@@ -1,6 +1,6 @@
 (function(h,L){typeof exports=="object"&&typeof module<"u"?L(exports):typeof define=="function"&&define.amd?define(["exports"],L):(h=typeof globalThis<"u"?globalThis:h||self,L(h.ControlPanel={}))})(this,(function(h){"use strict";const L=`
 .cp-root {
-  --cp-scale: 1;
+  --cp-scale: 2;
   
   --cp-space-1: calc(1px * var(--cp-scale));
   --cp-space-2: calc(2px * var(--cp-scale));
@@ -8,6 +8,8 @@
   --cp-space-6: calc(6px * var(--cp-scale));
   --cp-space-8: calc(8px * var(--cp-scale));
   
+  --cp-border-width: calc(1px * var(--cp-scale));
+
   --cp-font-size-main: calc(10px * var(--cp-scale));
   --cp-font-size-details: calc(10px * var(--cp-scale));
   
@@ -142,7 +144,7 @@
   padding: var(--cp-space-2) var(--cp-space-4);
   background: transparent;
   color: inherit;
-  border: 1px solid var(--cp-color-2);
+  border: var(--cp-border-width) solid var(--cp-color-2);
   border-radius: var(--cp-border-radius);
   font-family: inherit;
   font-size: inherit;
@@ -186,7 +188,7 @@
   -moz-appearance: none;
   color: transparent;
   background: transparent;
-  border: 1px solid var(--cp-color-2);
+  border: var(--cp-border-width) solid var(--cp-color-2);
   border-radius: var(--cp-border-radius);
   outline: none;
   font-size: 0;
@@ -292,7 +294,7 @@
   margin: var(--cp-space-4) 0;
   width: 100%;
   border: none;
-  border-top: 1px solid var(--cp-color-1);
+  border-top: var(--cp-border-width) solid var(--cp-color-1);
 }
 
 .cp-setting-row {
@@ -360,7 +362,7 @@
 .cp-input-color {
   width: var(--cp-swatch-size);
   height: var(--cp-swatch-size);
-  border: 1px solid var(--cp-color-1);
+  border: var(--cp-border-width) solid var(--cp-color-1);
   border-radius: 50%;
   -webkit-appearance: none;
 }

package/dist/styles.d.ts.map

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

package/package.json

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