relly-ui 1.0.2 → 1.1.0

package/dist/relly-ui.es.js

@@ -1,7 +1,7 @@
-var pe = Object.defineProperty;
-var ue = (y, i, e) => i in y ? pe(y, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : y[i] = e;
-var l = (y, i, e) => ue(y, typeof i != "symbol" ? i + "" : i, e);
-class C {
+var ge = Object.defineProperty;
+var be = (f, i, e) => i in f ? ge(f, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : f[i] = e;
+var l = (f, i, e) => be(f, typeof i != "symbol" ? i + "" : i, e);
+class E {
   constructor(i, e, t, n, s) {
     l(this, "element");
     l(this, "labelEl");
@@ -101,24 +101,24 @@ class C {
     this.isListening && this.bindingEngine && (this.bindingEngine.unregister(this), this.isListening = !1), this.presetManager && this.presetManager.unregister(this), this.element.remove();
   }
 }
-class L extends C {
-  constructor(e, t, n, s, r, a) {
+class I extends E {
+  constructor(e, t, n, s, r, o) {
     super(e, t, n, s, r);
     l(this, "wrapperEl");
     l(this, "boxEl");
     l(this, "soundEngine");
-    this.soundEngine = a, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-checkbox-wrapper", this.wrapperEl.setAttribute("role", "checkbox"), this.wrapperEl.setAttribute("tabindex", "0"), this.boxEl = document.createElement("div"), this.boxEl.className = "relly-checkbox-box", this.boxEl.innerHTML = `
+    this.soundEngine = o, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-checkbox-wrapper", this.wrapperEl.setAttribute("role", "checkbox"), this.wrapperEl.setAttribute("tabindex", "0"), this.boxEl = document.createElement("div"), this.boxEl.className = "relly-checkbox-box", this.boxEl.innerHTML = `
       <svg class="relly-checkbox-icon" viewBox="0 0 12 10">
         <polyline points="1.5 5 4.5 8.5 10.5 1.5"></polyline>
       </svg>
     `, this.wrapperEl.appendChild(this.boxEl), this.controlEl.appendChild(this.wrapperEl), this.wrapperEl.addEventListener("click", () => {
       var h;
-      const o = !this.getValue();
-      (h = this.soundEngine) == null || h.playToggle(o), this.setValue(o);
-    }), this.wrapperEl.addEventListener("keydown", (o) => {
+      const a = !this.getValue();
+      (h = this.soundEngine) == null || h.playToggle(a), this.setValue(a);
+    }), this.wrapperEl.addEventListener("keydown", (a) => {
       var h;
-      if (o.key === " " || o.key === "Enter") {
-        o.preventDefault();
+      if (a.key === " " || a.key === "Enter") {
+        a.preventDefault();
         const c = !this.getValue();
         (h = this.soundEngine) == null || h.playToggle(c), this.setValue(c);
       }
@@ -133,8 +133,8 @@ class L extends C {
     return this.wrapperEl.setAttribute("aria-checked", e ? "true" : "false"), e ? this.wrapperEl.classList.add("relly-checked") : this.wrapperEl.classList.remove("relly-checked"), this;
   }
 }
-class V extends C {
-  constructor(e, t, n, s, r, a) {
+class V extends E {
+  constructor(e, t, n, s, r, o) {
     super(e, t, n, s, r);
     l(this, "containerEl");
     l(this, "rangeInput");
@@ -144,30 +144,30 @@ class V extends C {
     l(this, "min", 0);
     l(this, "max", 100);
     l(this, "step", 1);
-    this.soundEngine = a, this.containerEl = document.createElement("div"), this.containerEl.className = "relly-slider-container", this.rangeInput = document.createElement("input"), this.rangeInput.type = "range", this.rangeInput.className = "relly-slider-range", this.numberInput = document.createElement("input"), this.numberInput.type = "number", this.numberInput.className = "relly-slider-number", this.numberInput.title = "Drag horizontally to scrub value, or type directly", this.containerEl.appendChild(this.rangeInput), this.containerEl.appendChild(this.numberInput), this.controlEl.appendChild(this.containerEl), this.applyConstraints(), this.rangeInput.addEventListener("input", () => {
-      const o = parseFloat(this.rangeInput.value);
-      this.triggerSound(), this.setValue(o);
+    this.soundEngine = o, this.containerEl = document.createElement("div"), this.containerEl.className = "relly-slider-container", this.rangeInput = document.createElement("input"), this.rangeInput.type = "range", this.rangeInput.className = "relly-slider-range", this.numberInput = document.createElement("input"), this.numberInput.type = "number", this.numberInput.className = "relly-slider-number", this.numberInput.title = "Drag horizontally to scrub value, or type directly", this.containerEl.appendChild(this.rangeInput), this.containerEl.appendChild(this.numberInput), this.controlEl.appendChild(this.containerEl), this.applyConstraints(), this.rangeInput.addEventListener("input", () => {
+      const a = parseFloat(this.rangeInput.value);
+      this.triggerSound(), this.setValue(a);
     }), this.numberInput.addEventListener("change", () => {
-      let o = parseFloat(this.numberInput.value);
-      isNaN(o) && (o = this.min), o = Math.max(this.min, Math.min(this.max, o)), this.triggerSound(), this.setValue(o);
+      let a = parseFloat(this.numberInput.value);
+      isNaN(a) && (a = this.min), a = Math.max(this.min, Math.min(this.max, a)), this.triggerSound(), this.setValue(a);
     }), this.setupJogScrubbing(), this.update();
   }
   setupJogScrubbing() {
     let e = !1, t = 0, n = 0;
-    const s = (a) => {
-      const o = a.clientX - t;
-      if (!e && Math.abs(o) > 3 && (e = !0, typeof document < "u" && document.body.classList.add("relly-jog-scrubbing")), e) {
-        const h = a.shiftKey ? 10 : a.altKey ? 0.1 : 1, c = this.step * h, m = o * c;
+    const s = (o) => {
+      const a = o.clientX - t;
+      if (!e && Math.abs(a) > 3 && (e = !0, typeof document < "u" && document.body.classList.add("relly-jog-scrubbing")), e) {
+        const h = o.shiftKey ? 10 : o.altKey ? 0.1 : 1, c = this.step * h, m = a * c;
         let p = n + m;
         p = Math.max(this.min, Math.min(this.max, p));
-        const d = (c.toString().split(".")[1] || "").length, f = 1 / c;
-        p = Math.round(p * f) / f, p = parseFloat(p.toFixed(Math.min(d, 4))), this.triggerSound(), this.setValue(p), a.preventDefault();
+        const d = (c.toString().split(".")[1] || "").length, y = 1 / c;
+        p = Math.round(p * y) / y, p = parseFloat(p.toFixed(Math.min(d, 4))), this.triggerSound(), this.setValue(p), o.preventDefault();
       }
     }, r = () => {
       e && typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"), typeof window < "u" && (window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", r));
     };
-    this.numberInput.addEventListener("mousedown", (a) => {
-      t = a.clientX, n = parseFloat(this.numberInput.value) || 0, e = !1, typeof window < "u" && (window.addEventListener("mousemove", s), window.addEventListener("mouseup", r));
+    this.numberInput.addEventListener("mousedown", (o) => {
+      t = o.clientX, n = parseFloat(this.numberInput.value) || 0, e = !1, typeof window < "u" && (window.addEventListener("mousemove", s), window.addEventListener("mouseup", r));
     });
   }
   triggerSound() {
@@ -196,7 +196,7 @@ class V extends C {
     return this.rangeInput.value = e.toString(), this.numberInput.value = e.toString(), this;
   }
 }
-class A extends C {
+class A extends E {
   constructor(e, t, n) {
     super(e);
     l(this, "buttonEl");
@@ -220,13 +220,13 @@ class A extends C {
     return this;
   }
 }
-class z extends C {
-  constructor(e, t, n, s, r, a) {
-    super(e, t, n, r, a);
+class z extends E {
+  constructor(e, t, n, s, r, o) {
+    super(e, t, n, r, o);
     l(this, "selectEl");
     l(this, "optionsMap", /* @__PURE__ */ new Map());
     this.selectEl = document.createElement("select"), this.selectEl.className = "relly-select-input", this.controlEl.appendChild(this.selectEl), s && this.setOptions(s), this.selectEl.addEventListener("change", () => {
-      const o = this.selectEl.value, h = this.optionsMap.has(o) ? this.optionsMap.get(o) : o;
+      const a = this.selectEl.value, h = this.optionsMap.has(a) ? this.optionsMap.get(a) : a;
       this.setValue(h);
     }), this.update();
   }
@@ -255,7 +255,7 @@ class z extends C {
     return this.selectEl.value = String(e), this;
   }
 }
-class B extends C {
+class B extends E {
   constructor(e, t, n, s) {
     super(e, t, n, s);
     l(this, "valueBadge");
@@ -270,7 +270,7 @@ class B extends C {
     return this.valueBadge.textContent = this.formatter(e), this;
   }
 }
-class N extends C {
+class N extends E {
   constructor(e, t, n, s, r) {
     super(e, t, n, s);
     l(this, "canvasContainer");
@@ -303,8 +303,8 @@ class N extends C {
     l(this, "onMouseMove", (e) => {
       const t = this.canvas.getBoundingClientRect(), n = e.clientX - t.left, s = this.cssWidth;
       if (s <= 0) return;
-      const r = s / Math.max(1, this.bufferSize - 1), a = Math.round(n / r), o = Math.max(0, Math.min(this.bufferSize - 1, a));
-      o !== this.hoverIndex && (this.hoverIndex = o, this.updateTooltip(n), this.draw());
+      const r = s / Math.max(1, this.bufferSize - 1), o = Math.round(n / r), a = Math.max(0, Math.min(this.bufferSize - 1, o));
+      a !== this.hoverIndex && (this.hoverIndex = a, this.updateTooltip(n), this.draw());
     });
     l(this, "onMouseLeave", () => {
       this.hoverIndex = null, this.graphTooltipEl.classList.remove("relly-tooltip-show"), this.draw();
@@ -314,8 +314,8 @@ class N extends C {
       (e = this.soundEngine) == null || e.playClick(), this.isPaused = !this.isPaused, this.isPaused ? this.canvasContainer.classList.add("relly-graph-paused") : this.canvasContainer.classList.remove("relly-graph-paused"), this.updateStats(), this.draw();
     });
     this.soundEngine = r, this.element.className = "relly-graph-row", this.element.innerHTML = "";
-    const a = document.createElement("div");
-    a.className = "relly-graph-header", this.labelEl = document.createElement("span"), this.labelEl.className = "relly-graph-label", this.labelEl.textContent = e, this.statsEl = document.createElement("div"), this.statsEl.className = "relly-graph-stats", this.statsEl.innerHTML = '<span class="relly-graph-val">0</span>', a.appendChild(this.labelEl), a.appendChild(this.statsEl), this.element.appendChild(a), this.legendEl = document.createElement("div"), this.legendEl.className = "relly-graph-legend", this.element.appendChild(this.legendEl), this.canvasContainer = document.createElement("div"), this.canvasContainer.className = "relly-graph-canvas-container", this.canvasContainer.title = "Click to pause/freeze data stream for inspection", this.canvas = document.createElement("canvas"), this.canvas.className = "relly-graph-canvas", this.canvasContainer.appendChild(this.canvas), this.graphTooltipEl = document.createElement("div"), this.graphTooltipEl.className = "relly-graph-tooltip", this.canvasContainer.appendChild(this.graphTooltipEl), this.element.appendChild(this.canvasContainer), this.ctx = this.canvas.getContext("2d"), this.primarySeries = {
+    const o = document.createElement("div");
+    o.className = "relly-graph-header", this.labelEl = document.createElement("span"), this.labelEl.className = "relly-graph-label", this.labelEl.textContent = e, this.statsEl = document.createElement("div"), this.statsEl.className = "relly-graph-stats", this.statsEl.innerHTML = '<span class="relly-graph-val">0</span>', o.appendChild(this.labelEl), o.appendChild(this.statsEl), this.element.appendChild(o), this.legendEl = document.createElement("div"), this.legendEl.className = "relly-graph-legend", this.element.appendChild(this.legendEl), this.canvasContainer = document.createElement("div"), this.canvasContainer.className = "relly-graph-canvas-container", this.canvasContainer.title = "Click to pause/freeze data stream for inspection", this.canvas = document.createElement("canvas"), this.canvas.className = "relly-graph-canvas", this.canvasContainer.appendChild(this.canvas), this.graphTooltipEl = document.createElement("div"), this.graphTooltipEl.className = "relly-graph-tooltip", this.canvasContainer.appendChild(this.graphTooltipEl), this.element.appendChild(this.canvasContainer), this.ctx = this.canvas.getContext("2d"), this.primarySeries = {
       id: "default",
       label: e,
       color: "#38bdf8",
@@ -346,9 +346,9 @@ class N extends C {
     if (this.hoverIndex === null) return;
     let t = "";
     for (const r of this.seriesList) {
-      const a = this.bufferSize - r.buffer.length, o = this.hoverIndex - a;
-      if (o >= 0 && o < r.buffer.length) {
-        const h = r.buffer[o];
+      const o = this.bufferSize - r.buffer.length, a = this.hoverIndex - o;
+      if (a >= 0 && a < r.buffer.length) {
+        const h = r.buffer[a];
         t += `<div><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:${r.color};margin-right:4px;"></span>${r.label}: <b>${this.formatter(h)}</b></div>`;
       }
     }
@@ -458,8 +458,8 @@ class N extends C {
   updateStats() {
     const e = this.primarySeries.buffer.length > 0 ? this.primarySeries.buffer[this.primarySeries.buffer.length - 1] : 0;
     let t = this.min, n = this.max, s = [];
-    for (const a of this.seriesList)
-      s = s.concat(a.buffer);
+    for (const o of this.seriesList)
+      s = s.concat(o.buffer);
     s.length > 0 && (t = Math.min(...s), n = Math.max(...s));
     const r = this.isPaused ? '<span class="relly-graph-badge relly-graph-badge--paused">PAUSED</span>' : "";
     this.statsEl.innerHTML = `
@@ -481,31 +481,31 @@ class N extends C {
     const e = this.ctx, t = this.cssWidth, n = this.cssHeight;
     e.clearRect(0, 0, t, n), e.save(), e.setLineDash([2, 4]), e.strokeStyle = "rgba(255, 255, 255, 0.08)", e.lineWidth = 1;
     for (let d of [0.25, 0.5, 0.75]) {
-      const f = Math.round(n * d);
-      e.beginPath(), e.moveTo(0, f), e.lineTo(t, f), e.stroke();
+      const y = Math.round(n * d);
+      e.beginPath(), e.moveTo(0, y), e.lineTo(t, y), e.stroke();
     }
     e.restore();
     let s = [];
     for (const d of this.seriesList)
       s = s.concat(d.buffer);
     if (s.length === 0) return;
-    const r = Math.min(...s), a = Math.max(...s);
-    let o = this.autoRange ? r : this.min, h = this.autoRange ? a : this.max;
-    a > h && (h = a), r < o && (o = r), o === h && (o -= 1, h += 1);
-    const c = (h - o) * 0.16 || 1;
-    o -= c, h += c;
-    const m = h - o || 1, p = t / Math.max(1, this.bufferSize - 1);
+    const r = Math.min(...s), o = Math.max(...s);
+    let a = this.autoRange ? r : this.min, h = this.autoRange ? o : this.max;
+    o > h && (h = o), r < a && (a = r), a === h && (a -= 1, h += 1);
+    const c = (h - a) * 0.16 || 1;
+    a -= c, h += c;
+    const m = h - a || 1, p = t / Math.max(1, this.bufferSize - 1);
     for (const d of this.seriesList) {
       if (d.buffer.length === 0) continue;
-      const f = d.buffer.length === 1 ? [d.buffer[0], d.buffer[0]] : d.buffer, x = this.bufferSize - f.length, u = [];
-      for (let g = 0; g < f.length; g++) {
-        const b = (x + g) * p, w = Math.max(0, Math.min(1, (f[g] - o) / m)), M = Math.max(4, Math.min(n - 4, n - 6 - w * (n - 12)));
+      const y = d.buffer.length === 1 ? [d.buffer[0], d.buffer[0]] : d.buffer, x = this.bufferSize - y.length, u = [];
+      for (let g = 0; g < y.length; g++) {
+        const b = (x + g) * p, C = Math.max(0, Math.min(1, (y[g] - a) / m)), M = Math.max(4, Math.min(n - 4, n - 6 - C * (n - 12)));
         u.push({ x: b, y: M });
       }
       if (e.beginPath(), e.moveTo(u[0].x, n), e.lineTo(u[0].x, u[0].y), this.smoothCurves && u.length > 2)
         for (let g = 0; g < u.length - 1; g++) {
-          const b = u[g], w = u[g + 1], M = (b.x + w.x) / 2;
-          e.bezierCurveTo(M, b.y, M, w.y, w.x, w.y);
+          const b = u[g], C = u[g + 1], M = (b.x + C.x) / 2;
+          e.bezierCurveTo(M, b.y, M, C.y, C.x, C.y);
         }
       else
         for (let g = 1; g < u.length; g++)
@@ -514,24 +514,24 @@ class N extends C {
       const v = e.createLinearGradient(0, 0, 0, n);
       if (v.addColorStop(0, d.fillColor || `${d.color}40`), v.addColorStop(1, "rgba(0, 0, 0, 0)"), e.fillStyle = v, e.fill(), e.beginPath(), e.moveTo(u[0].x, u[0].y), this.smoothCurves && u.length > 2)
         for (let g = 0; g < u.length - 1; g++) {
-          const b = u[g], w = u[g + 1], M = (b.x + w.x) / 2;
-          e.bezierCurveTo(M, b.y, M, w.y, w.x, w.y);
+          const b = u[g], C = u[g + 1], M = (b.x + C.x) / 2;
+          e.bezierCurveTo(M, b.y, M, C.y, C.x, C.y);
         }
       else
         for (let g = 1; g < u.length; g++)
           e.lineTo(u[g].x, u[g].y);
       e.save(), e.strokeStyle = d.color, e.lineWidth = 2, e.shadowColor = d.color, e.shadowBlur = 5, e.stroke(), e.restore();
-      const E = u[u.length - 1];
-      E && (e.beginPath(), e.arc(E.x, E.y, 4, 0, Math.PI * 2), e.fillStyle = d.color, e.globalAlpha = 0.35, e.fill(), e.globalAlpha = 1, e.beginPath(), e.arc(E.x, E.y, 2, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill());
+      const w = u[u.length - 1];
+      w && (e.beginPath(), e.arc(w.x, w.y, 4, 0, Math.PI * 2), e.fillStyle = d.color, e.globalAlpha = 0.35, e.fill(), e.globalAlpha = 1, e.beginPath(), e.arc(w.x, w.y, 2, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill());
     }
     if (this.hoverIndex !== null) {
       const d = Math.round(this.hoverIndex * p);
       e.save(), e.setLineDash([3, 3]), e.strokeStyle = "rgba(255, 255, 255, 0.45)", e.lineWidth = 1, e.beginPath(), e.moveTo(d, 0), e.lineTo(d, n), e.stroke(), e.restore();
-      for (const f of this.seriesList) {
-        const x = this.bufferSize - f.buffer.length, u = this.hoverIndex - x;
-        if (u >= 0 && u < f.buffer.length) {
-          const v = f.buffer[u], E = Math.max(0, Math.min(1, (v - o) / m)), g = Math.max(4, Math.min(n - 4, n - 6 - E * (n - 12)));
-          e.beginPath(), e.arc(d, g, 4.5, 0, Math.PI * 2), e.fillStyle = f.color, e.fill(), e.beginPath(), e.arc(d, g, 2, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill();
+      for (const y of this.seriesList) {
+        const x = this.bufferSize - y.buffer.length, u = this.hoverIndex - x;
+        if (u >= 0 && u < y.buffer.length) {
+          const v = y.buffer[u], w = Math.max(0, Math.min(1, (v - a) / m)), g = Math.max(4, Math.min(n - 4, n - 6 - w * (n - 12)));
+          e.beginPath(), e.arc(d, g, 4.5, 0, Math.PI * 2), e.fillStyle = y.color, e.fill(), e.beginPath(), e.arc(d, g, 2, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill();
         }
       }
     }
@@ -540,19 +540,19 @@ class N extends C {
     this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.mediaQueryList && (this.mediaQueryList.removeEventListener("change", this.onResolutionChange), this.mediaQueryList = null), this.canvas.removeEventListener("mousemove", this.onMouseMove), this.canvas.removeEventListener("mouseleave", this.onMouseLeave), this.canvas.removeEventListener("click", this.onCanvasClick), super.destroy();
   }
 }
-class R extends C {
-  constructor(e, t, n, s, r, a) {
+class R extends E {
+  constructor(e, t, n, s, r, o) {
     super(e, t, n, s, r);
     l(this, "wrapperEl");
     l(this, "previewEl");
-    l(this, "hexTextEl");
+    l(this, "hexInputEl");
     l(this, "nativeColorInput");
     l(this, "eyeDropperBtn");
     l(this, "swatchesContainer");
     l(this, "swatches", []);
     l(this, "swatchButtons", /* @__PURE__ */ new Map());
     l(this, "soundEngine");
-    this.soundEngine = a, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-color-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "relly-color-preview", this.previewEl.title = "Click to open color palette", this.hexTextEl = document.createElement("span"), this.hexTextEl.className = "relly-color-text", this.nativeColorInput = document.createElement("input"), this.nativeColorInput.type = "color", this.nativeColorInput.className = "relly-color-native", this.wrapperEl.appendChild(this.previewEl), this.wrapperEl.appendChild(this.hexTextEl), this.wrapperEl.appendChild(this.nativeColorInput), typeof window < "u" && "EyeDropper" in window && (this.eyeDropperBtn = document.createElement("button"), this.eyeDropperBtn.type = "button", this.eyeDropperBtn.className = "relly-eyedropper-btn", this.eyeDropperBtn.title = "Pick color from screen", this.eyeDropperBtn.innerHTML = `
+    this.soundEngine = o, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-color-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "relly-color-preview", this.previewEl.title = "Click to open color palette", this.hexInputEl = document.createElement("input"), this.hexInputEl.type = "text", this.hexInputEl.className = "relly-color-text relly-color-input", this.hexInputEl.spellcheck = !1, this.hexInputEl.maxLength = 9, this.nativeColorInput = document.createElement("input"), this.nativeColorInput.type = "color", this.nativeColorInput.className = "relly-color-native", this.wrapperEl.appendChild(this.previewEl), this.wrapperEl.appendChild(this.hexInputEl), this.wrapperEl.appendChild(this.nativeColorInput), typeof window < "u" && "EyeDropper" in window && (this.eyeDropperBtn = document.createElement("button"), this.eyeDropperBtn.type = "button", this.eyeDropperBtn.className = "relly-eyedropper-btn", this.eyeDropperBtn.title = "Pick color from screen", this.eyeDropperBtn.innerHTML = `
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="m14 7 3 3m-1-5a2.83 2.83 0 0 1 4 4L7 22H3v-4L16 5Z"></path>
         </svg>
@@ -564,11 +564,16 @@ class R extends C {
       }
     }), this.wrapperEl.appendChild(this.eyeDropperBtn)), this.controlEl.appendChild(this.wrapperEl), this.previewEl.addEventListener("click", () => {
       this.nativeColorInput.click();
-    }), this.hexTextEl.addEventListener("click", () => {
-      this.nativeColorInput.click();
+    }), this.hexInputEl.addEventListener("input", () => {
+      let a = this.hexInputEl.value.trim();
+      !a.startsWith("#") && /^[0-9a-fA-F]{3,8}$/.test(a) && (a = "#" + a), /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(a) && this.setValue(a);
+    }), this.hexInputEl.addEventListener("change", () => {
+      var h;
+      let a = this.hexInputEl.value.trim();
+      !a.startsWith("#") && /^[0-9a-fA-F]{3,8}$/.test(a) && (a = "#" + a), /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(a) ? ((h = this.soundEngine) == null || h.playClick(), this.setValue(a)) : this.update();
     }), this.nativeColorInput.addEventListener("input", () => {
-      const o = this.nativeColorInput.value;
-      this.setValue(o);
+      const a = this.nativeColorInput.value;
+      this.setValue(a);
     }), this.update();
   }
   setSoundEngine(e) {
@@ -589,16 +594,16 @@ class R extends C {
     return [...this.swatches];
   }
   update() {
-    if (!this.previewEl || !this.hexTextEl) return this;
+    if (!this.previewEl || !this.hexInputEl) return this;
     const e = String(this.getValue() || "#000000");
-    this.previewEl.style.backgroundColor = e, this.hexTextEl.textContent = e.toUpperCase(), e.startsWith("#") && (e.length === 7 || e.length === 4) && (this.nativeColorInput.value = e.length === 4 ? `#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}` : e);
+    this.previewEl.style.backgroundColor = e, document.activeElement !== this.hexInputEl && (this.hexInputEl.value = e.toUpperCase()), e.startsWith("#") && (e.length === 7 || e.length === 4) && (this.nativeColorInput.value = e.length === 4 ? `#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}` : e);
     const t = e.toLowerCase();
     for (const [n, s] of this.swatchButtons.entries())
       n === t ? s.classList.add("relly-swatch-active") : s.classList.remove("relly-swatch-active");
     return this;
   }
 }
-class P extends C {
+class P extends E {
   constructor(e, t, n, s, r) {
     super(e, t, n, s, r);
     l(this, "containerEl");
@@ -608,25 +613,25 @@ class P extends C {
     l(this, "max");
     l(this, "step", 0.1);
     this.containerEl = document.createElement("div"), this.containerEl.className = "relly-point2d-container";
-    const a = document.createElement("div");
-    a.className = "relly-point2d-item";
-    const o = document.createElement("span");
-    o.className = "relly-point2d-tag", o.textContent = "X", this.xInput = document.createElement("input"), this.xInput.type = "number", this.xInput.className = "relly-point2d-input", this.xInput.step = String(this.step), a.appendChild(o), a.appendChild(this.xInput);
+    const o = document.createElement("div");
+    o.className = "relly-point2d-item";
+    const a = document.createElement("span");
+    a.className = "relly-point2d-tag", a.textContent = "X", this.xInput = document.createElement("input"), this.xInput.type = "number", this.xInput.className = "relly-point2d-input", this.xInput.step = String(this.step), o.appendChild(a), o.appendChild(this.xInput);
     const h = document.createElement("div");
     h.className = "relly-point2d-item";
     const c = document.createElement("span");
-    c.className = "relly-point2d-tag", c.textContent = "Y", this.yInput = document.createElement("input"), this.yInput.type = "number", this.yInput.className = "relly-point2d-input", this.yInput.step = String(this.step), h.appendChild(c), h.appendChild(this.yInput), this.containerEl.appendChild(a), this.containerEl.appendChild(h), this.controlEl.appendChild(this.containerEl), this.xInput.addEventListener("change", () => this.handleInputChange()), this.yInput.addEventListener("change", () => this.handleInputChange()), this.setupInputScrubbing(this.xInput, "x"), this.setupInputScrubbing(this.yInput, "y"), this.update();
+    c.className = "relly-point2d-tag", c.textContent = "Y", this.yInput = document.createElement("input"), this.yInput.type = "number", this.yInput.className = "relly-point2d-input", this.yInput.step = String(this.step), h.appendChild(c), h.appendChild(this.yInput), this.containerEl.appendChild(o), this.containerEl.appendChild(h), this.controlEl.appendChild(this.containerEl), this.xInput.addEventListener("change", () => this.handleInputChange()), this.yInput.addEventListener("change", () => this.handleInputChange()), this.setupInputScrubbing(this.xInput, "x"), this.setupInputScrubbing(this.yInput, "y"), this.update();
   }
   setupInputScrubbing(e, t) {
     let n = !1, s = 0, r = 0;
-    const a = (h) => {
+    const o = (h) => {
       const c = h.clientX - s;
       if (!n && Math.abs(c) > 3 && (n = !0, typeof document < "u" && document.body.classList.add("relly-jog-scrubbing")), n) {
         const m = h.shiftKey ? 10 : h.altKey ? 0.1 : 1, p = this.step * m;
         let d = r + c * p;
         this.min !== void 0 && (d = Math.max(this.min, d)), this.max !== void 0 && (d = Math.min(this.max, d));
-        const f = (p.toString().split(".")[1] || "").length, x = 1 / p;
-        d = Math.round(d * x) / x, d = parseFloat(d.toFixed(Math.min(f, 4)));
+        const y = (p.toString().split(".")[1] || "").length, x = 1 / p;
+        d = Math.round(d * x) / x, d = parseFloat(d.toFixed(Math.min(y, 4)));
         const u = this.getValue();
         if (Array.isArray(u)) {
           const v = [u[0], u[1]];
@@ -635,11 +640,11 @@ class P extends C {
           this.setValue({ ...u, [t]: d });
         h.preventDefault();
       }
-    }, o = () => {
-      n && typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"), typeof window < "u" && (window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", o));
+    }, a = () => {
+      n && typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"), typeof window < "u" && (window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", a));
     };
     e.addEventListener("mousedown", (h) => {
-      s = h.clientX, r = parseFloat(e.value) || 0, n = !1, typeof window < "u" && (window.addEventListener("mousemove", a), window.addEventListener("mouseup", o));
+      s = h.clientX, r = parseFloat(e.value) || 0, n = !1, typeof window < "u" && (window.addEventListener("mousemove", o), window.addEventListener("mouseup", a));
     });
   }
   setMin(e) {
@@ -671,7 +676,7 @@ class P extends C {
     return Array.isArray(e) ? (t = e[0] || 0, n = e[1] || 0) : typeof e == "object" && e !== null && (t = e.x || 0, n = e.y || 0), this.xInput.value = String(t), this.yInput.value = String(n), this;
   }
 }
-class D extends C {
+class D extends E {
   constructor(e, t, n, s, r) {
     super(e, t, n, s, r);
     l(this, "containerEl");
@@ -682,10 +687,10 @@ class D extends C {
     l(this, "max");
     l(this, "step", 0.1);
     this.containerEl = document.createElement("div"), this.containerEl.className = "relly-point3d-container";
-    const a = document.createElement("div");
-    a.className = "relly-point3d-item";
-    const o = document.createElement("span");
-    o.className = "relly-point3d-tag relly-point3d-tag--x", o.textContent = "X", this.xInput = document.createElement("input"), this.xInput.type = "number", this.xInput.className = "relly-point3d-input", this.xInput.step = String(this.step), a.appendChild(o), a.appendChild(this.xInput);
+    const o = document.createElement("div");
+    o.className = "relly-point3d-item";
+    const a = document.createElement("span");
+    a.className = "relly-point3d-tag relly-point3d-tag--x", a.textContent = "X", this.xInput = document.createElement("input"), this.xInput.type = "number", this.xInput.className = "relly-point3d-input", this.xInput.step = String(this.step), o.appendChild(a), o.appendChild(this.xInput);
     const h = document.createElement("div");
     h.className = "relly-point3d-item";
     const c = document.createElement("span");
@@ -693,35 +698,35 @@ class D extends C {
     const m = document.createElement("div");
     m.className = "relly-point3d-item";
     const p = document.createElement("span");
-    p.className = "relly-point3d-tag relly-point3d-tag--z", p.textContent = "Z", this.zInput = document.createElement("input"), this.zInput.type = "number", this.zInput.className = "relly-point3d-input", this.zInput.step = String(this.step), m.appendChild(p), m.appendChild(this.zInput), this.containerEl.appendChild(a), this.containerEl.appendChild(h), this.containerEl.appendChild(m), this.controlEl.appendChild(this.containerEl), this.xInput.addEventListener("change", () => this.handleInputChange()), this.yInput.addEventListener("change", () => this.handleInputChange()), this.zInput.addEventListener("change", () => this.handleInputChange()), this.setupInputScrubbing(this.xInput, "x"), this.setupInputScrubbing(this.yInput, "y"), this.setupInputScrubbing(this.zInput, "z"), this.update();
+    p.className = "relly-point3d-tag relly-point3d-tag--z", p.textContent = "Z", this.zInput = document.createElement("input"), this.zInput.type = "number", this.zInput.className = "relly-point3d-input", this.zInput.step = String(this.step), m.appendChild(p), m.appendChild(this.zInput), this.containerEl.appendChild(o), this.containerEl.appendChild(h), this.containerEl.appendChild(m), this.controlEl.appendChild(this.containerEl), this.xInput.addEventListener("change", () => this.handleInputChange()), this.yInput.addEventListener("change", () => this.handleInputChange()), this.zInput.addEventListener("change", () => this.handleInputChange()), this.setupInputScrubbing(this.xInput, "x"), this.setupInputScrubbing(this.yInput, "y"), this.setupInputScrubbing(this.zInput, "z"), this.update();
   }
   setupInputScrubbing(e, t) {
     let n = !1, s = 0, r = 0;
-    const a = (h) => {
+    const o = (h) => {
       const c = h.clientX - s;
       if (!n && Math.abs(c) > 3 && (n = !0, typeof document < "u" && document.body.classList.add("relly-jog-scrubbing")), n) {
         const m = h.shiftKey ? 10 : h.altKey ? 0.1 : 1, p = this.step * m;
         let d = r + c * p;
         this.min !== void 0 && (d = Math.max(this.min, d)), this.max !== void 0 && (d = Math.min(this.max, d));
-        const f = (p.toString().split(".")[1] || "").length, x = 1 / p;
-        d = Math.round(d * x) / x, d = parseFloat(d.toFixed(Math.min(f, 4)));
+        const y = (p.toString().split(".")[1] || "").length, x = 1 / p;
+        d = Math.round(d * x) / x, d = parseFloat(d.toFixed(Math.min(y, 4)));
         const u = this.getValue();
         if (Array.isArray(u)) {
           const v = [
             u[0] ?? 0,
             u[1] ?? 0,
             u[2] ?? 0
-          ], E = t === "x" ? 0 : t === "y" ? 1 : 2;
-          v[E] = d, this.setValue(v);
+          ], w = t === "x" ? 0 : t === "y" ? 1 : 2;
+          v[w] = d, this.setValue(v);
         } else
           this.setValue({ ...u, [t]: d });
         h.preventDefault();
       }
-    }, o = () => {
-      window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", o), n && (n = !1, typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"));
+    }, a = () => {
+      window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", a), n && (n = !1, typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"));
     };
     e.addEventListener("mousedown", (h) => {
-      h.button === 0 && (s = h.clientX, r = parseFloat(e.value) || 0, window.addEventListener("mousemove", a), window.addEventListener("mouseup", o));
+      h.button === 0 && (s = h.clientX, r = parseFloat(e.value) || 0, window.addEventListener("mousemove", o), window.addEventListener("mouseup", a));
     });
   }
   handleInputChange() {
@@ -749,8 +754,8 @@ class D extends C {
     return Array.isArray(e) ? (t = e[0] || 0, n = e[1] || 0, s = e[2] || 0) : typeof e == "object" && e !== null && (t = e.x || 0, n = e.y || 0, s = e.z || 0), this.xInput.value = String(t), this.yInput.value = String(n), this.zInput.value = String(s), this;
   }
 }
-class H extends C {
-  constructor(e, t, n, s, r, a) {
+class j extends E {
+  constructor(e, t, n, s, r, o) {
     super(e, t, n, s, r);
     l(this, "wrapperEl");
     l(this, "trackEl");
@@ -764,7 +769,7 @@ class H extends C {
     l(this, "step", 1);
     l(this, "soundEngine");
     l(this, "formatter", (e, t) => `[${e.toFixed(1)}, ${t.toFixed(1)}]`);
-    this.soundEngine = a, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-range-wrapper", this.inputMin = document.createElement("input"), this.inputMin.type = "number", this.inputMin.className = "relly-range-input relly-range-input--min", this.trackEl = document.createElement("div"), this.trackEl.className = "relly-range-track", this.barEl = document.createElement("div"), this.barEl.className = "relly-range-bar", this.thumbMin = document.createElement("div"), this.thumbMin.className = "relly-range-thumb relly-range-thumb--min", this.thumbMin.title = "Drag min", this.thumbMax = document.createElement("div"), this.thumbMax.className = "relly-range-thumb relly-range-thumb--max", this.thumbMax.title = "Drag max", this.trackEl.appendChild(this.barEl), this.trackEl.appendChild(this.thumbMin), this.trackEl.appendChild(this.thumbMax), this.inputMax = document.createElement("input"), this.inputMax.type = "number", this.inputMax.className = "relly-range-input relly-range-input--max", this.wrapperEl.appendChild(this.inputMin), this.wrapperEl.appendChild(this.trackEl), this.wrapperEl.appendChild(this.inputMax), this.controlEl.appendChild(this.wrapperEl), this.setupListeners(), this.update();
+    this.soundEngine = o, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-range-wrapper", this.inputMin = document.createElement("input"), this.inputMin.type = "number", this.inputMin.className = "relly-range-input relly-range-input--min", this.trackEl = document.createElement("div"), this.trackEl.className = "relly-range-track", this.barEl = document.createElement("div"), this.barEl.className = "relly-range-bar", this.thumbMin = document.createElement("div"), this.thumbMin.className = "relly-range-thumb relly-range-thumb--min", this.thumbMin.title = "Drag min", this.thumbMax = document.createElement("div"), this.thumbMax.className = "relly-range-thumb relly-range-thumb--max", this.thumbMax.title = "Drag max", this.trackEl.appendChild(this.barEl), this.trackEl.appendChild(this.thumbMin), this.trackEl.appendChild(this.thumbMax), this.inputMax = document.createElement("input"), this.inputMax.type = "number", this.inputMax.className = "relly-range-input relly-range-input--max", this.wrapperEl.appendChild(this.inputMin), this.wrapperEl.appendChild(this.trackEl), this.wrapperEl.appendChild(this.inputMax), this.controlEl.appendChild(this.wrapperEl), this.setupListeners(), this.update();
   }
   setupListeners() {
     this.inputMin.addEventListener("change", () => {
@@ -777,13 +782,13 @@ class H extends C {
   }
   setupThumbDrag(e, t) {
     let n = !1;
-    const s = (a) => {
-      var f, x;
+    const s = (o) => {
+      var y, x;
       if (!n) return;
-      const o = this.trackEl.getBoundingClientRect(), h = Math.max(0, Math.min(1, (a.clientX - o.left) / o.width)), c = this.min + h * (this.max - this.min), m = this.applyStep(c), [p, d] = this.getCurrentRange();
+      const a = this.trackEl.getBoundingClientRect(), h = Math.max(0, Math.min(1, (o.clientX - a.left) / a.width)), c = this.min + h * (this.max - this.min), m = this.applyStep(c), [p, d] = this.getCurrentRange();
       if (t === "min") {
         const u = Math.min(m, d);
-        u !== p && ((f = this.soundEngine) == null || f.playTick(), this.setRangeValue(u, d));
+        u !== p && ((y = this.soundEngine) == null || y.playTick(), this.setRangeValue(u, d));
       } else {
         const u = Math.max(m, p);
         u !== d && ((x = this.soundEngine) == null || x.playTick(), this.setRangeValue(p, u));
@@ -791,28 +796,28 @@ class H extends C {
     }, r = () => {
       n && (n = !1, window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", r));
     };
-    e.addEventListener("mousedown", (a) => {
-      a.button === 0 && (a.preventDefault(), a.stopPropagation(), n = !0, window.addEventListener("mousemove", s), window.addEventListener("mouseup", r));
+    e.addEventListener("mousedown", (o) => {
+      o.button === 0 && (o.preventDefault(), o.stopPropagation(), n = !0, window.addEventListener("mousemove", s), window.addEventListener("mouseup", r));
     });
   }
   setupBarDrag() {
     let e = !1, t = 0, n = 0, s = 0;
-    const r = (o) => {
+    const r = (a) => {
       var v;
       if (!e) return;
-      const h = this.trackEl.getBoundingClientRect(), m = (o.clientX - t) / h.width * (this.max - this.min), p = s - n;
+      const h = this.trackEl.getBoundingClientRect(), m = (a.clientX - t) / h.width * (this.max - this.min), p = s - n;
       let d = Math.max(this.min, Math.min(this.max - p, n + m));
       d = this.applyStep(d);
-      const f = this.applyStep(d + p), [x, u] = this.getCurrentRange();
-      (d !== x || f !== u) && ((v = this.soundEngine) == null || v.playTick(), this.setRangeValue(d, f));
-    }, a = () => {
-      e && (e = !1, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", a));
+      const y = this.applyStep(d + p), [x, u] = this.getCurrentRange();
+      (d !== x || y !== u) && ((v = this.soundEngine) == null || v.playTick(), this.setRangeValue(d, y));
+    }, o = () => {
+      e && (e = !1, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", o));
     };
-    this.barEl.addEventListener("mousedown", (o) => {
-      if (o.button !== 0) return;
-      o.preventDefault(), o.stopPropagation(), e = !0, t = o.clientX;
+    this.barEl.addEventListener("mousedown", (a) => {
+      if (a.button !== 0) return;
+      a.preventDefault(), a.stopPropagation(), e = !0, t = a.clientX;
       const [h, c] = this.getCurrentRange();
-      n = h, s = c, window.addEventListener("mousemove", r), window.addEventListener("mouseup", a);
+      n = h, s = c, window.addEventListener("mousemove", r), window.addEventListener("mouseup", o);
     });
   }
   applyStep(e) {
@@ -852,15 +857,15 @@ class H extends C {
     return this.thumbMin.style.left = `${s}%`, this.thumbMax.style.left = `${r}%`, this.barEl.style.left = `${s}%`, this.barEl.style.width = `${Math.max(0, r - s)}%`, this.barEl.title = this.formatter(e, t), this.inputMin.value = String(e), this.inputMax.value = String(t), this;
   }
 }
-class j extends C {
-  constructor(e, t, n, s = [], r, a, o) {
-    super(e, t, n, r, a);
+class H extends E {
+  constructor(e, t, n, s = [], r, o, a) {
+    super(e, t, n, r, o);
     l(this, "containerEl");
     l(this, "gliderEl");
     l(this, "buttons", /* @__PURE__ */ new Map());
     l(this, "optionsMap", /* @__PURE__ */ new Map());
     l(this, "soundEngine");
-    this.soundEngine = o, this.containerEl = document.createElement("div"), this.containerEl.className = "relly-segmented-container", this.gliderEl = document.createElement("div"), this.gliderEl.className = "relly-segmented-glider", this.containerEl.appendChild(this.gliderEl), this.controlEl.appendChild(this.containerEl), this.setOptions(s);
+    this.soundEngine = a, this.containerEl = document.createElement("div"), this.containerEl.className = "relly-segmented-container", this.gliderEl = document.createElement("div"), this.gliderEl.className = "relly-segmented-glider", this.containerEl.appendChild(this.gliderEl), this.controlEl.appendChild(this.containerEl), this.setOptions(s);
   }
   setOptions(e) {
     if (this.optionsMap.clear(), this.buttons.clear(), this.containerEl.innerHTML = "", this.containerEl.appendChild(this.gliderEl), Array.isArray(e))
@@ -899,7 +904,7 @@ class j extends C {
     return this;
   }
 }
-class F extends C {
+class F extends E {
   constructor(e, t, n, s) {
     super(e, t, n, s);
     l(this, "wrapperEl");
@@ -934,6 +939,172 @@ class F extends C {
     return this.ledEl.className = `relly-status-led relly-status-led--${t}`, this.badgeEl.className = `relly-status-badge relly-status-badge--${t}`, this.badgeEl.textContent = this.customBadge || t.toUpperCase(), this.customDetail ? (this.detailEl.textContent = this.customDetail, this.detailEl.style.display = "inline-block") : this.detailEl.style.display = "none", this;
   }
 }
+class q extends E {
+  constructor(e, t, n, s = {}, r, o, a) {
+    super(e, t, n, r, o);
+    l(this, "wrapperEl");
+    l(this, "inputEl");
+    l(this, "trackEl");
+    l(this, "thumbEl");
+    l(this, "statusTextEl");
+    l(this, "onLabel");
+    l(this, "offLabel");
+    l(this, "soundEngine");
+    this.soundEngine = a, this.onLabel = s.onLabel, this.offLabel = s.offLabel, this.wrapperEl = document.createElement("label"), this.wrapperEl.className = "relly-switch-wrap", this.inputEl = document.createElement("input"), this.inputEl.type = "checkbox", this.inputEl.className = "relly-switch-native", this.trackEl = document.createElement("span"), this.trackEl.className = "relly-switch-track", this.thumbEl = document.createElement("span"), this.thumbEl.className = "relly-switch-thumb", this.trackEl.appendChild(this.thumbEl), this.statusTextEl = document.createElement("span"), this.statusTextEl.className = "relly-switch-text", this.wrapperEl.appendChild(this.inputEl), this.wrapperEl.appendChild(this.trackEl), this.wrapperEl.appendChild(this.statusTextEl), this.controlEl.appendChild(this.wrapperEl), this.inputEl.addEventListener("change", () => {
+      var c;
+      const h = this.inputEl.checked;
+      (c = this.soundEngine) == null || c.playToggle(h), this.setValue(h);
+    }), s.disabled && this.setDisabled(!0), s.tooltip && this.setTooltip(s.tooltip), this.update();
+  }
+  setSoundEngine(e) {
+    return this.soundEngine = e, this;
+  }
+  setOnLabel(e) {
+    return this.onLabel = e, this.update(), this;
+  }
+  setOffLabel(e) {
+    return this.offLabel = e, this.update(), this;
+  }
+  onToggle(e) {
+    return this.onChange(e);
+  }
+  setDisabled(e) {
+    return super.setDisabled(e), this.inputEl && (this.inputEl.disabled = e), this;
+  }
+  update() {
+    if (!this.inputEl || !this.trackEl) return this;
+    const e = !!this.getValue();
+    return this.inputEl.checked = e, e ? this.trackEl.classList.add("relly-switch-track--checked") : this.trackEl.classList.remove("relly-switch-track--checked"), this.onLabel || this.offLabel ? (this.statusTextEl.textContent = e ? this.onLabel || "ON" : this.offLabel || "OFF", this.statusTextEl.style.display = "inline-block") : this.statusTextEl.style.display = "none", this;
+  }
+}
+class J extends E {
+  constructor(e = [], t) {
+    super("");
+    l(this, "groupContainerEl");
+    l(this, "buttonElements", []);
+    l(this, "soundEngine");
+    this.soundEngine = t, this.element.className = "relly-row relly-button-group-row", this.element.innerHTML = "", this.groupContainerEl = document.createElement("div"), this.groupContainerEl.className = "relly-button-group", this.element.appendChild(this.groupContainerEl);
+    for (const n of e)
+      this.addButton(n);
+  }
+  addButton(e) {
+    const t = document.createElement("button");
+    return t.type = "button", t.className = "relly-btn relly-btn--group", t.textContent = e.label, e.danger && t.classList.add("relly-btn--danger"), e.primary && t.classList.add("relly-btn--primary"), e.disabled && (t.disabled = !0), e.tooltip && (t.title = e.tooltip), t.addEventListener("click", (n) => {
+      var s;
+      n.stopPropagation(), (s = this.soundEngine) == null || s.playClick(), e.onClick(t);
+    }), this.buttonElements.push(t), this.groupContainerEl.appendChild(t), this;
+  }
+  setSoundEngine(e) {
+    return this.soundEngine = e, this;
+  }
+  setDisabled(e) {
+    super.setDisabled(e);
+    for (const t of this.buttonElements)
+      t.disabled = e;
+    return this;
+  }
+  update() {
+    return this;
+  }
+}
+class $ extends E {
+  constructor(e, t, n, s = {}, r, o, a) {
+    super(e, t, n, r, o);
+    l(this, "wrapperEl");
+    l(this, "inputEl");
+    l(this, "clearBtn");
+    l(this, "soundEngine");
+    this.soundEngine = a, this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-text-wrap", this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "relly-text-input", this.inputEl.spellcheck = !1, s.placeholder && (this.inputEl.placeholder = s.placeholder), s.maxLength && (this.inputEl.maxLength = s.maxLength), s.readOnly && (this.inputEl.readOnly = !0), this.wrapperEl.appendChild(this.inputEl), s.clearable && (this.clearBtn = document.createElement("button"), this.clearBtn.type = "button", this.clearBtn.className = "relly-text-clear", this.clearBtn.innerHTML = "✕", this.clearBtn.title = "Clear text", this.clearBtn.style.display = "none", this.clearBtn.addEventListener("click", (h) => {
+      h.stopPropagation(), this.setValue(""), this.inputEl.focus();
+    }), this.wrapperEl.appendChild(this.clearBtn)), this.controlEl.appendChild(this.wrapperEl), this.inputEl.addEventListener("input", () => {
+      const h = this.inputEl.value;
+      this.setValue(h), this.updateClearBtn(h);
+    }), this.inputEl.addEventListener("change", () => {
+      var h;
+      (h = this.soundEngine) == null || h.playClick(), this.setValue(this.inputEl.value);
+    }), s.disabled && this.setDisabled(!0), s.tooltip && this.setTooltip(s.tooltip), this.update();
+  }
+  setSoundEngine(e) {
+    return this.soundEngine = e, this;
+  }
+  setPlaceholder(e) {
+    return this.inputEl.placeholder = e, this;
+  }
+  setMaxLength(e) {
+    return this.inputEl.maxLength = e, this;
+  }
+  setReadOnly(e) {
+    return this.inputEl.readOnly = e, this;
+  }
+  setDisabled(e) {
+    return super.setDisabled(e), this.inputEl && (this.inputEl.disabled = e), this;
+  }
+  updateClearBtn(e) {
+    this.clearBtn && (this.clearBtn.style.display = e.length > 0 ? "flex" : "none");
+  }
+  update() {
+    if (!this.inputEl) return this;
+    const e = String(this.getValue() ?? "");
+    return document.activeElement !== this.inputEl && (this.inputEl.value = e), this.updateClearBtn(e), this;
+  }
+}
+class U extends E {
+  constructor(e, t, n, s = {}, r) {
+    super(e, t, n, r);
+    l(this, "trackEl");
+    l(this, "barEl");
+    l(this, "valueEl");
+    l(this, "min", 0);
+    l(this, "max", 100);
+    l(this, "showValue", !0);
+    l(this, "formatter");
+    this.min = s.min ?? 0, this.max = s.max ?? 100, this.showValue = s.showValue !== !1, this.formatter = s.format || ((a, h) => `${Math.round(h)}%`);
+    const o = document.createElement("div");
+    o.className = "relly-progress-wrap", this.trackEl = document.createElement("div"), this.trackEl.className = "relly-progress-track", this.barEl = document.createElement("div"), this.barEl.className = "relly-progress-bar", s.color && (this.barEl.style.backgroundColor = s.color, this.barEl.style.boxShadow = `0 0 10px ${s.color}88`), this.trackEl.appendChild(this.barEl), this.valueEl = document.createElement("span"), this.valueEl.className = "relly-progress-text", this.valueEl.style.display = this.showValue ? "inline-block" : "none", o.appendChild(this.trackEl), o.appendChild(this.valueEl), this.controlEl.appendChild(o), s.tooltip && this.setTooltip(s.tooltip), this.update();
+  }
+  setMin(e) {
+    return this.min = e, this.update(), this;
+  }
+  setMax(e) {
+    return this.max = e, this.update(), this;
+  }
+  setColor(e) {
+    return this.barEl.style.backgroundColor = e, this.barEl.style.boxShadow = `0 0 10px ${e}88`, this;
+  }
+  setShowValue(e) {
+    return this.showValue = e, this.valueEl.style.display = e ? "inline-block" : "none", this;
+  }
+  setFormat(e) {
+    return this.formatter = e, this.update(), this;
+  }
+  update() {
+    if (!this.barEl || !this.valueEl) return this;
+    const e = Number(this.getValue()) || 0, t = Math.max(this.min, Math.min(this.max, e)), n = this.max - this.min || 1, s = Math.max(0, Math.min(100, (t - this.min) / n * 100));
+    return this.barEl.style.width = `${s}%`, this.valueEl.textContent = this.formatter(e, s), this;
+  }
+}
+class Y extends E {
+  constructor(e, t = !1) {
+    super("");
+    l(this, "titleEl");
+    l(this, "lineLeftEl");
+    l(this, "lineRightEl");
+    this.element.className = "relly-separator-row", this.element.innerHTML = "";
+    const n = document.createElement("div");
+    n.className = "relly-separator", t && n.classList.add("relly-separator--dashed"), this.lineLeftEl = document.createElement("span"), this.lineLeftEl.className = "relly-separator-line", n.appendChild(this.lineLeftEl), e && (n.classList.add("relly-separator--has-title"), this.titleEl = document.createElement("span"), this.titleEl.className = "relly-separator-title", this.titleEl.textContent = e, n.appendChild(this.titleEl), this.lineRightEl = document.createElement("span"), this.lineRightEl.className = "relly-separator-line", n.appendChild(this.lineRightEl)), this.element.appendChild(n);
+  }
+  setTitle(e) {
+    if (!this.titleEl) {
+      this.titleEl = document.createElement("span"), this.titleEl.className = "relly-separator-title";
+      const t = this.element.querySelector(".relly-separator");
+      t.classList.add("relly-separator--has-title"), t.appendChild(this.titleEl), this.lineRightEl = document.createElement("span"), this.lineRightEl.className = "relly-separator-line", t.appendChild(this.lineRightEl);
+    }
+    return this.titleEl.textContent = e, this;
+  }
+  update() {
+    return this;
+  }
+}
 class T {
   constructor(i, e, t, n) {
     l(this, "children", []);
@@ -949,11 +1120,11 @@ class T {
   onSectionExpanded(i) {
     if (this.accordion)
       for (const e of this.children)
-        e instanceof q && e !== i && e.setCollapsed(!0);
+        e instanceof G && e !== i && e.setCollapsed(!0);
   }
   addCheckbox(i, e) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new L(
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), o = new I(
         r,
         s.object,
         s.property,
@@ -961,9 +1132,9 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return s.tooltip && a.setTooltip(s.tooltip), (s.onChange || s.onToggle) && a.onChange(s.onChange || s.onToggle), s.listen && a.listen(), s.showIf && a.showIf(s.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+      return s.tooltip && o.setTooltip(s.tooltip), (s.onChange || s.onToggle) && o.onChange(s.onChange || s.onToggle), s.listen && o.listen(), s.showIf && o.showIf(s.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
     }
-    const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new L(
+    const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new I(
       t,
       i,
       e,
@@ -978,7 +1149,7 @@ class T {
   }
   addSlider(i, e) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new V(
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), o = new V(
         r,
         s.object,
         s.property,
@@ -986,7 +1157,7 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return s.min !== void 0 && a.setMin(s.min), s.max !== void 0 && a.setMax(s.max), s.step !== void 0 && a.setStep(s.step), s.tooltip && a.setTooltip(s.tooltip), s.onChange && a.onChange(s.onChange), s.listen && a.listen(), s.showIf && a.showIf(s.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+      return s.min !== void 0 && o.setMin(s.min), s.max !== void 0 && o.setMax(s.max), s.step !== void 0 && o.setStep(s.step), s.tooltip && o.setTooltip(s.tooltip), s.onChange && o.onChange(s.onChange), s.listen && o.listen(), s.showIf && o.showIf(s.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new V(
       t,
@@ -1014,8 +1185,8 @@ class T {
   }
   addSelect(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new z(a, r.object, r.property, r.options, this.bindingEngine, this.presetManager);
-      return r.tooltip && o.setTooltip(r.tooltip), r.onChange && o.onChange(r.onChange), r.listen && o.listen(), r.showIf && o.showIf(r.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new z(o, r.object, r.property, r.options, this.bindingEngine, this.presetManager);
+      return r.tooltip && a.setTooltip(r.tooltip), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
     }
     const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new z(
       n,
@@ -1032,8 +1203,8 @@ class T {
   }
   addDynamicLabel(i, e) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new B(r, s.object, s.property, this.bindingEngine);
-      return s.format && a.setFormat(s.format), s.tooltip && a.setTooltip(s.tooltip), s.showIf && a.showIf(s.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), o = new B(r, s.object, s.property, this.bindingEngine);
+      return s.format && o.setFormat(s.format), s.tooltip && o.setTooltip(s.tooltip), s.showIf && o.showIf(s.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new B(t, i, e, this.bindingEngine);
     return this.contentEl.appendChild(n.element), this.children.push(n), n;
@@ -1043,8 +1214,8 @@ class T {
   }
   addGraph(i, e) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new N(r, s.object, s.property, this.bindingEngine, this.soundEngine);
-      return s.range && a.setRange(s.range[0], s.range[1]), s.color && a.setColor(s.color, s.fillColor), s.bufferSize && a.setBufferSize(s.bufferSize), s.smooth !== void 0 && a.setSmooth(s.smooth), s.height && a.setHeight(s.height), s.format && a.setFormat(s.format), s.tooltip && a.setTooltip(s.tooltip), s.showIf && a.showIf(s.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), o = new N(r, s.object, s.property, this.bindingEngine, this.soundEngine);
+      return s.range && o.setRange(s.range[0], s.range[1]), s.color && o.setColor(s.color, s.fillColor), s.bufferSize && o.setBufferSize(s.bufferSize), s.smooth !== void 0 && o.setSmooth(s.smooth), s.height && o.setHeight(s.height), s.format && o.setFormat(s.format), s.tooltip && o.setTooltip(s.tooltip), s.showIf && o.showIf(s.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new N(t, i, e, this.bindingEngine, this.soundEngine);
     return this.contentEl.appendChild(n.element), this.children.push(n), n;
@@ -1059,10 +1230,10 @@ class T {
       t++, h >= n + 1e3 && (e.fps = Math.round(t * 1e3 / (h - n)), t = 0, n = h), s = requestAnimationFrame(r);
     };
     typeof requestAnimationFrame < "u" && (s = requestAnimationFrame(r));
-    const a = this.addGraph(e, "fps").setLabel(i).setRange(0, 120).setColor("#22c55e", "rgba(34, 197, 94, 0.25)").setFormat((h) => `${Math.round(h)} FPS`), o = a.destroy.bind(a);
-    return a.destroy = () => {
-      typeof cancelAnimationFrame < "u" && s && cancelAnimationFrame(s), o();
-    }, a;
+    const o = this.addGraph(e, "fps").setLabel(i).setRange(0, 120).setColor("#22c55e", "rgba(34, 197, 94, 0.25)").setFormat((h) => `${Math.round(h)} FPS`), a = o.destroy.bind(o);
+    return o.destroy = () => {
+      typeof cancelAnimationFrame < "u" && s && cancelAnimationFrame(s), a();
+    }, o;
   }
   createFPSGraph(i = "FPS") {
     return this.addFPSGraph(i);
@@ -1072,13 +1243,13 @@ class T {
     let t;
     const n = () => {
       if (typeof performance < "u" && performance.memory) {
-        const a = performance.memory.usedJSHeapSize / 1048576;
-        e.mem = Number(a.toFixed(1));
+        const o = performance.memory.usedJSHeapSize / 1048576;
+        e.mem = Number(o.toFixed(1));
       } else
         e.mem = Number((Math.sin(Date.now() / 2500) * 8 + 48).toFixed(1));
     };
     n(), typeof setInterval < "u" && (t = setInterval(n, 1e3));
-    const s = this.addGraph(e, "mem").setLabel(i).setAutoRange(!0).setColor("#a855f7", "rgba(168, 85, 247, 0.25)").setFormat((a) => `${a.toFixed(1)} MB`), r = s.destroy.bind(s);
+    const s = this.addGraph(e, "mem").setLabel(i).setAutoRange(!0).setColor("#a855f7", "rgba(168, 85, 247, 0.25)").setFormat((o) => `${o.toFixed(1)} MB`), r = s.destroy.bind(s);
     return s.destroy = () => {
       t && clearInterval(t), r();
     }, s;
@@ -1088,7 +1259,7 @@ class T {
   }
   addColor(i, e) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new R(
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), o = new R(
         r,
         s.object,
         s.property,
@@ -1096,7 +1267,7 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return s.tooltip && a.setTooltip(s.tooltip), s.swatches && a.setSwatches(s.swatches), s.onChange && a.onChange(s.onChange), s.listen && a.listen(), s.showIf && a.showIf(s.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+      return s.tooltip && o.setTooltip(s.tooltip), s.swatches && o.setSwatches(s.swatches), s.onChange && o.onChange(s.onChange), s.listen && o.listen(), s.showIf && o.showIf(s.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new R(
       t,
@@ -1113,8 +1284,8 @@ class T {
   }
   addPoint2D(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new P(a, r.object, r.property, this.bindingEngine, this.presetManager);
-      return r.min !== void 0 && o.setMin(r.min), r.max !== void 0 && o.setMax(r.max), r.step !== void 0 && o.setStep(r.step), r.tooltip && o.setTooltip(r.tooltip), r.onChange && o.onChange(r.onChange), r.listen && o.listen(), r.showIf && o.showIf(r.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new P(o, r.object, r.property, this.bindingEngine, this.presetManager);
+      return r.min !== void 0 && a.setMin(r.min), r.max !== void 0 && a.setMax(r.max), r.step !== void 0 && a.setStep(r.step), r.tooltip && a.setTooltip(r.tooltip), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
     }
     const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new P(n, i, e, this.bindingEngine, this.presetManager);
     return (t == null ? void 0 : t.min) !== void 0 && s.setMin(t.min), (t == null ? void 0 : t.max) !== void 0 && s.setMax(t.max), (t == null ? void 0 : t.step) !== void 0 && s.setStep(t.step), this.contentEl.appendChild(s.element), this.children.push(s), s;
@@ -1124,8 +1295,8 @@ class T {
   }
   addPoint3D(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new D(a, r.object, r.property, this.bindingEngine, this.presetManager);
-      return r.min !== void 0 && o.setMin(r.min), r.max !== void 0 && o.setMax(r.max), r.step !== void 0 && o.setStep(r.step), r.tooltip && o.setTooltip(r.tooltip), r.contextMenu && o.setContextMenu(r.contextMenu), r.onChange && o.onChange(r.onChange), r.listen && o.listen(), r.showIf && o.showIf(r.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new D(o, r.object, r.property, this.bindingEngine, this.presetManager);
+      return r.min !== void 0 && a.setMin(r.min), r.max !== void 0 && a.setMax(r.max), r.step !== void 0 && a.setStep(r.step), r.tooltip && a.setTooltip(r.tooltip), r.contextMenu && a.setContextMenu(r.contextMenu), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
     }
     const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new D(n, i, e, this.bindingEngine, this.presetManager);
     return (t == null ? void 0 : t.min) !== void 0 && s.setMin(t.min), (t == null ? void 0 : t.max) !== void 0 && s.setMax(t.max), (t == null ? void 0 : t.step) !== void 0 && s.setStep(t.step), this.contentEl.appendChild(s.element), this.children.push(s), s;
@@ -1141,17 +1312,17 @@ class T {
   }
   addRange(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new H(
-        a,
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new j(
+        o,
         r.object,
         r.property,
         this.bindingEngine,
         this.presetManager,
         this.soundEngine
       );
-      return r.min !== void 0 && o.setMin(r.min), r.max !== void 0 && o.setMax(r.max), r.step !== void 0 && o.setStep(r.step), r.tooltip && o.setTooltip(r.tooltip), r.contextMenu && o.setContextMenu(r.contextMenu), r.onChange && o.onChange(r.onChange), r.listen && o.listen(), r.showIf && o.showIf(r.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
+      return r.min !== void 0 && a.setMin(r.min), r.max !== void 0 && a.setMax(r.max), r.step !== void 0 && a.setStep(r.step), r.tooltip && a.setTooltip(r.tooltip), r.contextMenu && a.setContextMenu(r.contextMenu), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
     }
-    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new H(
+    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new j(
       n,
       i,
       e,
@@ -1166,8 +1337,8 @@ class T {
   }
   addSegmented(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new j(
-        a,
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new H(
+        o,
         r.object,
         r.property,
         r.options || [],
@@ -1175,9 +1346,9 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return r.tooltip && o.setTooltip(r.tooltip), r.contextMenu && o.setContextMenu(r.contextMenu), r.onChange && o.onChange(r.onChange), r.listen && o.listen(), r.showIf && o.showIf(r.showIf), this.contentEl.appendChild(o.element), this.children.push(o), o;
+      return r.tooltip && a.setTooltip(r.tooltip), r.contextMenu && a.setContextMenu(r.contextMenu), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
     }
-    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new j(
+    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new H(
       n,
       i,
       e,
@@ -1201,10 +1372,10 @@ class T {
       );
       return c.status && p.setStatus(c.status, c.badge, c.detail), c.badge && p.setBadge(c.badge), c.detail && p.setDetail(c.detail), c.tooltip && p.setTooltip(c.tooltip), c.contextMenu && p.setContextMenu(c.contextMenu), c.listen && p.listen(), c.showIf && p.showIf(c.showIf), this.contentEl.appendChild(p.element), this.children.push(p), p;
     }
-    const r = e ? e.charAt(0).toUpperCase() + e.slice(1) : typeof i == "string" ? i : "Status", a = typeof i == "string" ? void 0 : i, o = typeof i == "string" ? void 0 : e, h = new F(
+    const r = e ? e.charAt(0).toUpperCase() + e.slice(1) : typeof i == "string" ? i : "Status", o = typeof i == "string" ? void 0 : i, a = typeof i == "string" ? void 0 : e, h = new F(
       r,
-      a,
       o,
+      a,
       this.bindingEngine
     );
     return h.setStatus(t, n, s), this.contentEl.appendChild(h.element), this.children.push(h), h;
@@ -1212,8 +1383,107 @@ class T {
   createStatus(i, e, t = "online", n, s) {
     return this.addStatus(i, e, t, n, s);
   }
+  addSwitch(i, e, t) {
+    if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new q(
+        o,
+        r.object,
+        r.property,
+        r,
+        this.bindingEngine,
+        this.presetManager,
+        this.soundEngine
+      );
+      return r.tooltip && a.setTooltip(r.tooltip), r.contextMenu && a.setContextMenu(r.contextMenu), r.onToggle && a.onToggle(r.onToggle), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+    }
+    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new q(
+      n,
+      i,
+      e,
+      t || {},
+      this.bindingEngine,
+      this.presetManager,
+      this.soundEngine
+    );
+    return this.contentEl.appendChild(s.element), this.children.push(s), s;
+  }
+  createSwitch(i, e, t) {
+    return this.addSwitch(i, e, t);
+  }
+  addButtonGroup(i) {
+    const e = new J(i, this.soundEngine);
+    return this.contentEl.appendChild(e.element), this.children.push(e), e;
+  }
+  createButtonGroup(i) {
+    return this.addButtonGroup(i);
+  }
+  addText(i, e, t) {
+    if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new $(
+        o,
+        r.object,
+        r.property,
+        r,
+        this.bindingEngine,
+        this.presetManager,
+        this.soundEngine
+      );
+      return r.tooltip && a.setTooltip(r.tooltip), r.contextMenu && a.setContextMenu(r.contextMenu), r.onChange && a.onChange(r.onChange), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+    }
+    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new $(
+      n,
+      i,
+      e,
+      t || {},
+      this.bindingEngine,
+      this.presetManager,
+      this.soundEngine
+    );
+    return this.contentEl.appendChild(s.element), this.children.push(s), s;
+  }
+  createText(i, e, t) {
+    return this.addText(i, e, t);
+  }
+  addInput(i, e, t) {
+    return this.addText(i, e, t);
+  }
+  createInput(i, e, t) {
+    return this.addText(i, e, t);
+  }
+  addProgress(i, e, t) {
+    if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
+      const r = i, o = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), a = new U(
+        o,
+        r.object,
+        r.property,
+        r,
+        this.bindingEngine
+      );
+      return r.tooltip && a.setTooltip(r.tooltip), r.listen && a.listen(), r.showIf && a.showIf(r.showIf), this.contentEl.appendChild(a.element), this.children.push(a), a;
+    }
+    const n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new U(
+      n,
+      i,
+      e,
+      t || {},
+      this.bindingEngine
+    );
+    return this.contentEl.appendChild(s.element), this.children.push(s), s;
+  }
+  createProgress(i, e, t) {
+    return this.addProgress(i, e, t);
+  }
+  addSeparator(i, e = !1) {
+    let t, n = e;
+    typeof i == "object" && i !== null ? (t = i.title, i.dashed !== void 0 && (n = i.dashed)) : t = i;
+    const s = new Y(t, n);
+    return this.contentEl.appendChild(s.element), this.children.push(s), s;
+  }
+  createSeparator(i, e = !1) {
+    return this.addSeparator(i, e);
+  }
   addRow() {
-    const i = new G(this.bindingEngine, this.presetManager, this.soundEngine);
+    const i = new _(this.bindingEngine, this.presetManager, this.soundEngine);
     return this.contentEl.appendChild(i.element), this.children.push(i), i;
   }
   createRow() {
@@ -1222,7 +1492,7 @@ class T {
   addSection(i = "Section", e = !1) {
     let t = "", n = e;
     typeof i == "object" && i !== null ? (t = i.label || i.title || "Section", i.collapsed !== void 0 && (n = i.collapsed)) : t = i || "Section";
-    const s = new q(t, this.bindingEngine, this.presetManager, n, this.soundEngine);
+    const s = new G(t, this.bindingEngine, this.presetManager, n, this.soundEngine);
     return s.setParentContainer(this), this.contentEl.appendChild(s.element), this.children.push(s), s;
   }
   addFolder(i = "Folder", e = !1) {
@@ -1291,6 +1561,44 @@ class T {
         e = this.addStatus(i.object, i.property, i.status, i.badge, i.detail);
         break;
       }
+      case "switch": {
+        e = this.addSwitch(i.object, i.property, {
+          onLabel: i.onLabel,
+          offLabel: i.offLabel,
+          disabled: i.disabled,
+          tooltip: i.tooltip
+        });
+        break;
+      }
+      case "buttonGroup": {
+        e = this.addButtonGroup(i.buttons || []);
+        break;
+      }
+      case "text": {
+        e = this.addText(i.object, i.property, {
+          placeholder: i.placeholder,
+          maxLength: i.maxLength,
+          readOnly: i.readOnly,
+          clearable: i.clearable,
+          disabled: i.disabled,
+          tooltip: i.tooltip
+        });
+        break;
+      }
+      case "progress": {
+        e = this.addProgress(i.object, i.property, {
+          min: i.min,
+          max: i.max,
+          color: i.color,
+          showValue: i.showValue,
+          tooltip: i.tooltip
+        });
+        break;
+      }
+      case "separator": {
+        e = this.addSeparator(i.title || i.label);
+        break;
+      }
       case "section":
       case "folder": {
         e = this.addSection(t, i.collapsed || !1);
@@ -1307,7 +1615,7 @@ class T {
     this.children = [];
   }
 }
-class G extends T {
+class _ extends T {
   constructor(e, t, n) {
     const s = document.createElement("div");
     s.className = "relly-multi-row";
@@ -1326,11 +1634,11 @@ class G extends T {
     this.destroyChildren(), this.element.remove();
   }
 }
-class q extends T {
+class G extends T {
   constructor(e, t, n, s = !1, r) {
-    const a = document.createElement("div");
-    a.className = "relly-section-content";
-    super(a, t, n, r);
+    const o = document.createElement("div");
+    o.className = "relly-section-content";
+    super(o, t, n, r);
     l(this, "element");
     l(this, "headerEl");
     l(this, "titleEl");
@@ -1340,12 +1648,12 @@ class q extends T {
     l(this, "parentContainer");
     l(this, "disabled", !1);
     this.label = e, this.element = document.createElement("div"), this.element.className = "relly-section", this.headerEl = document.createElement("div"), this.headerEl.className = "relly-section-header";
-    const o = document.createElement("div");
-    o.className = "relly-section-title-wrap", this.arrowEl = document.createElement("span"), this.arrowEl.innerHTML = `
+    const a = document.createElement("div");
+    a.className = "relly-section-title-wrap", this.arrowEl = document.createElement("span"), this.arrowEl.innerHTML = `
       <svg class="relly-section-arrow" viewBox="0 0 10 10">
         <polygon points="2,1 8,5 2,9"></polygon>
       </svg>
-    `, this.titleEl = document.createElement("span"), this.titleEl.textContent = e, o.appendChild(this.arrowEl), o.appendChild(this.titleEl), this.headerEl.appendChild(o), this.element.appendChild(this.headerEl), this.element.appendChild(this.contentEl), this.headerEl.addEventListener("click", () => {
+    `, this.titleEl = document.createElement("span"), this.titleEl.textContent = e, a.appendChild(this.arrowEl), a.appendChild(this.titleEl), this.headerEl.appendChild(a), this.element.appendChild(this.headerEl), this.element.appendChild(this.contentEl), this.headerEl.addEventListener("click", () => {
       var h;
       this.disabled || ((h = this.soundEngine) == null || h.playClick(), this.toggle());
     }), s && this.setCollapsed(!0);
@@ -1386,7 +1694,7 @@ class q extends T {
     this.conditionPredicate && this.bindingEngine.unregister(this), this.destroyChildren(), this.element.remove();
   }
 }
-class W {
+class Q {
   constructor() {
     l(this, "listeners", /* @__PURE__ */ new Set());
     l(this, "rafId", null);
@@ -1424,7 +1732,7 @@ class W {
     this.stop(), this.listeners.clear();
   }
 }
-class X {
+class Z {
   constructor() {
     l(this, "components", /* @__PURE__ */ new Set());
     l(this, "pendingValues", {});
@@ -1491,7 +1799,7 @@ class X {
     this.components.clear(), this.pendingValues = {};
   }
 }
-const U = {
+const K = {
   bg: "#1c1d22",
   fg: "#d1d5db",
   headerBg: "#141518",
@@ -1505,7 +1813,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, J = {
+}, O = {
   bg: "#ffffff",
   fg: "#374151",
   headerBg: "#f3f4f6",
@@ -1519,7 +1827,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, Y = {
+}, ee = {
   bg: "#0f051d",
   fg: "#e0f2fe",
   headerBg: "#180a33",
@@ -1533,7 +1841,7 @@ const U = {
   font: '"JetBrains Mono", Consolas, monospace',
   fontSize: "11px",
   rowHeight: "26px"
-}, _ = {
+}, te = {
   bg: "#2e3440",
   fg: "#d8dee9",
   headerBg: "#242933",
@@ -1547,7 +1855,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, Q = {
+}, ie = {
   bg: "#282a36",
   fg: "#f8f8f2",
   headerBg: "#1e1f29",
@@ -1561,7 +1869,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, Z = {
+}, ne = {
   bg: "#1a1b26",
   fg: "#a9b1d6",
   headerBg: "#16161e",
@@ -1575,7 +1883,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, O = {
+}, se = {
   bg: "#0a0f0d",
   fg: "#00ff66",
   headerBg: "#050a08",
@@ -1589,7 +1897,7 @@ const U = {
   font: '"JetBrains Mono", Consolas, monospace',
   fontSize: "11px",
   rowHeight: "26px"
-}, ee = {
+}, re = {
   bg: "#241b2f",
   fg: "#f8f8f2",
   headerBg: "#191322",
@@ -1604,14 +1912,14 @@ const U = {
   fontSize: "11px",
   rowHeight: "26px"
 };
-class te {
+class le {
   constructor(i, e) {
     l(this, "currentTheme");
     l(this, "currentThemeName");
-    this.panelElement = i, this.currentTheme = { ...U }, this.currentThemeName = "dark", e ? this.applyTheme(e) : this.applyToDOM(this.currentTheme);
+    this.panelElement = i, this.currentTheme = { ...K }, this.currentThemeName = "dark", e ? this.applyTheme(e) : this.applyToDOM(this.currentTheme);
   }
   applyTheme(i) {
-    typeof i == "string" && (this.currentThemeName = i), i === "light" ? this.currentTheme = { ...J } : i === "dark" ? this.currentTheme = { ...U } : i === "cyberpunk" ? this.currentTheme = { ...Y } : i === "nord" ? this.currentTheme = { ..._ } : i === "dracula" ? this.currentTheme = { ...Q } : i === "tokyo-night" ? this.currentTheme = { ...Z } : i === "matrix" ? this.currentTheme = { ...O } : i === "synthwave" ? this.currentTheme = { ...ee } : typeof i == "object" && (this.currentTheme = { ...this.currentTheme, ...i }, this.currentThemeName = "custom"), this.applyToDOM(this.currentTheme);
+    typeof i == "string" && (this.currentThemeName = i), i === "light" ? this.currentTheme = { ...O } : i === "dark" ? this.currentTheme = { ...K } : i === "cyberpunk" ? this.currentTheme = { ...ee } : i === "nord" ? this.currentTheme = { ...te } : i === "dracula" ? this.currentTheme = { ...ie } : i === "tokyo-night" ? this.currentTheme = { ...ne } : i === "matrix" ? this.currentTheme = { ...se } : i === "synthwave" ? this.currentTheme = { ...re } : typeof i == "object" && (this.currentTheme = { ...this.currentTheme, ...i }, this.currentThemeName = "custom"), this.applyToDOM(this.currentTheme);
   }
   getCurrentThemeName() {
     return this.currentThemeName;
@@ -1624,7 +1932,7 @@ class te {
     return { ...this.currentTheme };
   }
 }
-class ie {
+class ae {
   constructor(i, e, t) {
     l(this, "isDragging", !1);
     l(this, "startX", 0);
@@ -1643,8 +1951,8 @@ class ie {
   clampToViewport() {
     if (typeof window > "u") return;
     const i = this.panel.getBoundingClientRect(), e = i.width, t = i.height, n = Math.max(0, window.innerWidth - e), s = Math.max(0, window.innerHeight - t);
-    let r = i.left, a = i.top;
-    r > n && (r = n), r < 0 && (r = 0), a > s && (a = s), a < 0 && (a = 0), this.panel.style.left = `${Math.round(r)}px`, this.panel.style.top = `${Math.round(a)}px`, this.panel.style.right = "auto", this.panel.style.bottom = "auto";
+    let r = i.left, o = i.top;
+    r > n && (r = n), r < 0 && (r = 0), o > s && (o = s), o < 0 && (o = 0), this.panel.style.left = `${Math.round(r)}px`, this.panel.style.top = `${Math.round(o)}px`, this.panel.style.right = "auto", this.panel.style.bottom = "auto";
   }
   onResize() {
     this.clampToViewport();
@@ -1660,7 +1968,7 @@ class ie {
     if (!this.isDragging) return;
     const e = i.clientX - this.startX, t = i.clientY - this.startY;
     let n = this.initialLeft + e, s = this.initialTop + t;
-    const r = this.panel.getBoundingClientRect(), a = r.width, o = r.height, h = Math.max(0, window.innerWidth - a), c = Math.max(0, window.innerHeight - o);
+    const r = this.panel.getBoundingClientRect(), o = r.width, a = r.height, h = Math.max(0, window.innerWidth - o), c = Math.max(0, window.innerHeight - a);
     let m = !1;
     this.magneticSnap && (Math.abs(n) < this.snapThreshold ? (n = 0, m = !0) : Math.abs(n - h) < this.snapThreshold && (n = h, m = !0), Math.abs(s) < this.snapThreshold ? (s = 0, m = !0) : Math.abs(s - c) < this.snapThreshold && (s = c, m = !0), m && !this.wasSnapped && ((p = this.soundEngine) == null || p.playSnap()), this.wasSnapped = m), n = Math.max(0, Math.min(n, h)), s = Math.max(0, Math.min(s, c)), this.panel.style.left = `${n}px`, this.panel.style.top = `${s}px`;
   }
@@ -1671,7 +1979,7 @@ class ie {
     this.handle.removeEventListener("mousedown", this.onMouseDownBound), typeof window < "u" && (window.removeEventListener("mousemove", this.onMouseMoveBound), window.removeEventListener("mouseup", this.onMouseUpBound), window.removeEventListener("resize", this.onResizeBound));
   }
 }
-class ne {
+class oe {
   constructor(i, e = 240, t = 120) {
     l(this, "handleEl");
     l(this, "isResizing", !1);
@@ -1708,11 +2016,11 @@ class ne {
   }
   onMouseMove(i) {
     if (!this.isResizing) return;
-    const e = i.clientX - this.startX, t = i.clientY - this.startY, n = this.panel.getBoundingClientRect(), s = Math.max(this.minWidth, window.innerWidth - n.left - 8), r = Math.max(this.minHeight, window.innerHeight - n.top - 8), a = Math.max(this.minWidth, Math.min(s, this.initialWidth + e)), o = Math.max(
+    const e = i.clientX - this.startX, t = i.clientY - this.startY, n = this.panel.getBoundingClientRect(), s = Math.max(this.minWidth, window.innerWidth - n.left - 8), r = Math.max(this.minHeight, window.innerHeight - n.top - 8), o = Math.max(this.minWidth, Math.min(s, this.initialWidth + e)), a = Math.max(
       this.minHeight,
       Math.min(r, this.initialHeight + t)
     );
-    this.panel.style.width = `${Math.round(a)}px`, this.panel.style.height = `${Math.round(o)}px`;
+    this.panel.style.width = `${Math.round(o)}px`, this.panel.style.height = `${Math.round(a)}px`;
     const h = this.panel.querySelector(".relly-body");
     h && (h.style.maxHeight = "none", h.style.flex = "1");
   }
@@ -1723,7 +2031,7 @@ class ne {
     this.handleEl.removeEventListener("mousedown", this.onMouseDownBound), typeof window < "u" && (window.removeEventListener("mousemove", this.onMouseMoveBound), window.removeEventListener("mouseup", this.onMouseUpBound), window.removeEventListener("resize", this.onResizeBound)), this.handleEl.remove();
   }
 }
-class $ {
+class W {
   constructor(i, e) {
     l(this, "onKeyDownBound");
     this.hotkey = i, this.onToggle = e, this.onKeyDownBound = this.onKeyDown.bind(this), typeof window < "u" && window.addEventListener("keydown", this.onKeyDownBound);
@@ -1750,7 +2058,7 @@ class $ {
     typeof window < "u" && window.removeEventListener("keydown", this.onKeyDownBound);
   }
 }
-class se {
+class he {
   constructor(i, e = {}) {
     l(this, "element");
     l(this, "inputEl");
@@ -1775,8 +2083,8 @@ class se {
       const t = typeof i.composedPath == "function" ? i.composedPath() : [];
       for (const r of t)
         if (r instanceof HTMLElement) {
-          const a = r.tagName;
-          if (a === "INPUT" || a === "TEXTAREA" || a === "SELECT" || r.isContentEditable || r.classList.contains("relly-search-input"))
+          const o = r.tagName;
+          if (o === "INPUT" || o === "TEXTAREA" || o === "SELECT" || r.isContentEditable || r.classList.contains("relly-search-input"))
             return;
         }
       let n = document.activeElement;
@@ -1792,7 +2100,7 @@ class se {
     return this.inputEl;
   }
   filter(i) {
-    var o;
+    var a;
     const e = i.trim();
     if (!e) {
       this.clearBtn.style.display = "none", this.resetFilter();
@@ -1804,8 +2112,8 @@ class se {
       const c = h.querySelector(".relly-row-label, .relly-graph-header span"), m = (c == null ? void 0 : c.textContent) || "";
       if ((this.ignoreCase ? m.toLowerCase() : m).includes(t)) {
         h.classList.remove("relly-search-hidden");
-        const f = h.closest(".relly-section");
-        f && (f.classList.remove("relly-section--collapsed"), f.classList.remove("relly-search-hidden"));
+        const y = h.closest(".relly-section");
+        y && (y.classList.remove("relly-section--collapsed"), y.classList.remove("relly-search-hidden"));
       } else
         h.classList.add("relly-search-hidden");
     }), this.bodyEl.querySelectorAll(".relly-section").forEach((h) => {
@@ -1816,16 +2124,16 @@ class se {
         ".relly-row:not(.relly-search-hidden), .relly-graph-row:not(.relly-search-hidden)"
       ).length === 0 && h.classList.add("relly-search-hidden");
     });
-    const r = this.bodyEl.querySelector('.relly-tab-content:not([style*="display: none"])'), a = r == null ? void 0 : r.querySelectorAll(
+    const r = this.bodyEl.querySelector('.relly-tab-content:not([style*="display: none"])'), o = r == null ? void 0 : r.querySelectorAll(
       ".relly-row:not(.relly-search-hidden), .relly-graph-row:not(.relly-search-hidden)"
     );
-    if (!a || a.length === 0) {
+    if (!o || o.length === 0) {
       const h = Array.from(this.bodyEl.querySelectorAll(".relly-tab-content"));
       for (let c = 0; c < h.length; c++)
         if (h[c].querySelectorAll(
           ".relly-row:not(.relly-search-hidden), .relly-graph-row:not(.relly-search-hidden)"
         ).length > 0) {
-          const p = (o = this.bodyEl.parentElement) == null ? void 0 : o.querySelectorAll(".relly-tab-btn");
+          const p = (a = this.bodyEl.parentElement) == null ? void 0 : a.querySelectorAll(".relly-tab-btn");
           if (p && p[c]) {
             p[c].click();
             break;
@@ -1845,7 +2153,7 @@ class se {
     typeof window < "u" && window.removeEventListener("keydown", this.onGlobalKeyDownBound), this.element.remove();
   }
 }
-class re {
+class ce {
   constructor(i = !0, e = "synth") {
     l(this, "ctx", null);
     l(this, "enabled", !0);
@@ -1896,16 +2204,16 @@ class re {
         const t = e.currentTime, n = e.createOscillator(), s = e.createGain();
         if (this.soundPack === "mechanical") {
           n.type = "triangle";
-          const r = i ? 2800 : 1800, a = i ? 900 : 400;
-          n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(a, t + 0.018), s.gain.setValueAtTime(0.055 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.018), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.02);
+          const r = i ? 2800 : 1800, o = i ? 900 : 400;
+          n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(o, t + 0.018), s.gain.setValueAtTime(0.055 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.018), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.02);
         } else if (this.soundPack === "bubble") {
           n.type = "sine";
-          const r = i ? 380 : 900, a = i ? 1100 : 280;
-          n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(a, t + 0.028), s.gain.setValueAtTime(0.045 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.028), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.03);
+          const r = i ? 380 : 900, o = i ? 1100 : 280;
+          n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(o, t + 0.028), s.gain.setValueAtTime(0.045 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.028), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.03);
         } else if (this.soundPack === "arcade") {
           n.type = "square";
-          const r = i ? 523.25 : 659.25, a = i ? 783.99 : 392;
-          n.frequency.setValueAtTime(r, t), n.frequency.setValueAtTime(a, t + 0.015), s.gain.setValueAtTime(0.025 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.03), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.032);
+          const r = i ? 523.25 : 659.25, o = i ? 783.99 : 392;
+          n.frequency.setValueAtTime(r, t), n.frequency.setValueAtTime(o, t + 0.015), s.gain.setValueAtTime(0.025 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.03), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.032);
         } else {
           n.type = "triangle";
           const r = i ? 650 : 450;
@@ -1951,8 +2259,8 @@ class re {
       try {
         const t = e.currentTime, n = e.createOscillator(), s = e.createGain();
         n.type = this.soundPack === "arcade" ? "square" : "sine";
-        const r = i ? 380 : 640, a = i ? 680 : 340;
-        n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(a, t + 0.05), s.gain.setValueAtTime(0.03 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.05), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.055);
+        const r = i ? 380 : 640, o = i ? 680 : 340;
+        n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(o, t + 0.05), s.gain.setValueAtTime(0.03 * this.volume, t), s.gain.exponentialRampToValueAtTime(1e-4, t + 0.05), n.connect(s), s.connect(e.destination), n.start(t), n.stop(t + 0.055);
       } catch {
       }
   }
@@ -1975,7 +2283,7 @@ class re {
       }
   }
 }
-class le {
+class de {
   constructor(i, e) {
     l(this, "element");
     l(this, "textareaEl");
@@ -2004,12 +2312,12 @@ class le {
     }), this.dropzoneEl.addEventListener("drop", (c) => {
       c.preventDefault(), this.dropzoneEl.classList.remove("relly-dropzone-drag"), c.dataTransfer && c.dataTransfer.files.length > 0 && this.readFile(c.dataTransfer.files[0]);
     }), t.appendChild(this.dropzoneEl), t.appendChild(this.fileInput), this.textareaEl = document.createElement("textarea"), this.textareaEl.className = "relly-import-textarea", this.textareaEl.placeholder = "Paste JSON configuration here...", t.appendChild(this.textareaEl), this.errorEl = document.createElement("div"), this.errorEl.className = "relly-import-error", t.appendChild(this.errorEl);
-    const a = document.createElement("div");
-    a.className = "relly-modal-actions";
-    const o = document.createElement("button");
-    o.className = "relly-btn", o.textContent = "Cancel", o.style.flex = "1", o.addEventListener("click", () => this.hide());
+    const o = document.createElement("div");
+    o.className = "relly-modal-actions";
+    const a = document.createElement("button");
+    a.className = "relly-btn", a.textContent = "Cancel", a.style.flex = "1", a.addEventListener("click", () => this.hide());
     const h = document.createElement("button");
-    h.className = "relly-btn relly-btn-primary", h.textContent = "Apply & Load", h.style.flex = "2", h.addEventListener("click", () => this.apply()), a.appendChild(o), a.appendChild(h), t.appendChild(a), this.element.appendChild(t), this.element.addEventListener("click", (c) => {
+    h.className = "relly-btn relly-btn-primary", h.textContent = "Apply & Load", h.style.flex = "2", h.addEventListener("click", () => this.apply()), o.appendChild(a), o.appendChild(h), t.appendChild(o), this.element.appendChild(t), this.element.addEventListener("click", (c) => {
       c.target === this.element && this.hide();
     }), this.parentEl.appendChild(this.element);
   }
@@ -2048,24 +2356,24 @@ class le {
     this.element.remove();
   }
 }
-class ae {
+class pe {
   static load(i, e) {
     const t = e.target, n = (s, r) => {
-      for (const a of r) {
-        const o = a.children || a.controls;
-        if (a.type === "section") {
+      for (const o of r) {
+        const a = o.children || o.controls;
+        if (o.type === "section") {
           const h = s.addSection(
-            a.label || "Section",
-            a.collapsed
+            o.label || "Section",
+            o.collapsed
           );
-          a.showIf && h.showIf && h.showIf(a.showIf), o && Array.isArray(o) && n(h, o);
-        } else if (a.type === "row") {
+          o.showIf && h.showIf && h.showIf(o.showIf), a && Array.isArray(a) && n(h, a);
+        } else if (o.type === "row") {
           const h = s.addRow();
-          o && Array.isArray(o) && n(h, o);
+          a && Array.isArray(a) && n(h, a);
         } else {
           const h = {
-            ...a,
-            object: a.object !== void 0 ? a.object : t
+            ...o,
+            object: o.object !== void 0 ? o.object : t
           };
           s.createComponent(h);
         }
@@ -2074,7 +2382,7 @@ class ae {
     e.controls && Array.isArray(e.controls) && n(i, e.controls);
   }
 }
-class oe {
+class ue {
   constructor(i, e) {
     l(this, "containerEl");
     this.parentEl = i, this.soundEngine = e, this.containerEl = document.createElement("div"), this.containerEl.className = "relly-toast-container", this.parentEl.appendChild(this.containerEl);
@@ -2088,18 +2396,18 @@ class oe {
     s.className = "relly-toast-icon", s.innerHTML = this.getIconSvg(e);
     const r = document.createElement("span");
     r.className = "relly-toast-msg", r.textContent = i;
-    const a = document.createElement("button");
-    a.className = "relly-toast-close", a.innerHTML = "✕", a.title = "Dismiss", n.appendChild(s), n.appendChild(r), n.appendChild(a);
-    const o = () => {
+    const o = document.createElement("button");
+    o.className = "relly-toast-close", o.innerHTML = "✕", o.title = "Dismiss", n.appendChild(s), n.appendChild(r), n.appendChild(o);
+    const a = () => {
       n.classList.contains("relly-toast-leave") || (n.classList.add("relly-toast-leave"), setTimeout(() => {
         n.parentElement && n.parentElement.removeChild(n);
       }, 200));
     };
-    return a.addEventListener("click", (c) => {
-      c.stopPropagation(), o();
-    }), n.addEventListener("click", o), this.containerEl.appendChild(n), requestAnimationFrame(() => {
+    return o.addEventListener("click", (c) => {
+      c.stopPropagation(), a();
+    }), n.addEventListener("click", a), this.containerEl.appendChild(n), requestAnimationFrame(() => {
       n.classList.add("relly-toast-enter");
-    }), t > 0 && setTimeout(o, t), n;
+    }), t > 0 && setTimeout(a, t), n;
   }
   getIconSvg(i) {
     switch (i) {
@@ -2118,7 +2426,7 @@ class oe {
     this.containerEl.parentElement && this.containerEl.parentElement.removeChild(this.containerEl);
   }
 }
-class he {
+class me {
   constructor(i, e) {
     l(this, "menuEl");
     l(this, "currentComponent");
@@ -2148,8 +2456,8 @@ class he {
       c.type = "button", c.className = "relly-context-item", h.danger && c.classList.add("relly-context-item--danger"), h.disabled && (c.disabled = !0);
       let m = "";
       h.icon && (m = `<span class="relly-context-icon">${h.icon}</span>`), c.innerHTML = `${m}<span class="relly-context-label">${h.label}</span>`, c.addEventListener("click", (p) => {
-        var f;
-        p.stopPropagation(), (f = this.soundEngine) == null || f.playClick();
+        var y;
+        p.stopPropagation(), (y = this.soundEngine) == null || y.playClick();
         const d = this.currentComponent;
         this.hide(), h.action(d);
       }), this.menuEl.appendChild(c);
@@ -2157,8 +2465,8 @@ class he {
     this.menuEl.style.display = "flex";
     const n = this.panelEl.getBoundingClientRect();
     let s = e - n.left, r = t - n.top;
-    const a = 160, o = this.menuEl.offsetHeight || 120;
-    s + a > n.width && (s = Math.max(4, n.width - a - 4)), r + o > n.height && (r = Math.max(4, n.height - o - 4)), this.menuEl.style.left = `${s}px`, this.menuEl.style.top = `${r}px`;
+    const o = 160, a = this.menuEl.offsetHeight || 120;
+    s + o > n.width && (s = Math.max(4, n.width - o - 4)), r + a > n.height && (r = Math.max(4, n.height - a - 4)), this.menuEl.style.left = `${s}px`, this.menuEl.style.top = `${r}px`;
   }
   hide() {
     this.menuEl.style.display = "none", this.currentComponent = void 0;
@@ -2167,7 +2475,7 @@ class he {
     typeof window < "u" && (window.removeEventListener("click", this.onDocClickBound), window.removeEventListener("keydown", this.onKeyDownBound)), this.panelEl.removeEventListener("contextmenu", this.onContextMenu), this.menuEl.parentElement && this.menuEl.parentElement.removeChild(this.menuEl);
   }
 }
-class ce extends T {
+class fe extends T {
   constructor(e, t, n, s) {
     const r = document.createElement("div");
     r.className = "relly-tab-content";
@@ -2186,7 +2494,7 @@ class ce extends T {
     this.destroyChildren(), this.buttonEl.remove(), this.contentEl.remove();
   }
 }
-class de {
+class ye {
   constructor(i, e, t, n, s) {
     l(this, "barEl");
     l(this, "bodyEl");
@@ -2196,7 +2504,7 @@ class de {
   }
   addTab(i) {
     this.barEl.style.display = "flex";
-    const e = new ce(i, this.bindingEngine, this.presetManager, this.soundEngine);
+    const e = new fe(i, this.bindingEngine, this.presetManager, this.soundEngine);
     return this.tabs.push(e), this.barEl.appendChild(e.buttonEl), this.bodyEl.appendChild(e.contentEl), e.buttonEl.addEventListener("click", () => {
       this.switchTab(e);
     }), this.tabs.length === 1 && this.switchTab(e, !1), e;
@@ -2219,22 +2527,22 @@ class de {
     this.tabs = [], this.barEl.remove();
   }
 }
-const me = ':root{--relly-bg: #1c1d22;--relly-fg: #d1d5db;--relly-header-bg: #141518;--relly-header-fg: #f3f4f6;--relly-accent: #6366f1;--relly-accent-hover: #4f46e5;--relly-border: rgba(255, 255, 255, .08);--relly-input-bg: #26272e;--relly-input-hover: #2f3039;--relly-radius: 6px;--relly-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--relly-font-size: 11px;--relly-row-height: 26px;--relly-ease: cubic-bezier(.16, 1, .3, 1);--relly-transition: all .2s var(--relly-ease)}.relly-host{position:fixed;z-index:999999;pointer-events:none}.relly-panel{position:fixed;z-index:999999;background-color:var(--relly-bg);color:var(--relly-fg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #0006;font-family:var(--relly-font);font-size:var(--relly-font-size);-webkit-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden!important;overflow-x:hidden!important;display:flex;flex-direction:column;pointer-events:auto;opacity:1;transform:scale(1) translateY(0);transition:opacity .22s var(--relly-ease),transform .22s var(--relly-ease);min-width:240px;min-height:120px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.relly-panel.relly-mini-hud{width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;border-radius:9999px!important;box-shadow:0 4px 20px #0006,0 0 0 1px var(--relly-accent)}.relly-panel.relly-mini-hud .relly-header{border-bottom:none;padding:5px 12px;border-radius:9999px;background-color:var(--relly-bg)}.relly-panel.relly-mini-hud .relly-body,.relly-panel.relly-mini-hud .relly-search-bar,.relly-panel.relly-mini-hud .relly-tabs-bar,.relly-panel.relly-mini-hud .relly-resize-handle,.relly-panel.relly-mini-hud .relly-header-btn:not(.relly-minihud-btn){display:none!important}.relly-panel.relly-mini-hud .relly-header-title:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background-color:var(--relly-accent);box-shadow:0 0 6px var(--relly-accent);margin-right:6px;animation:relly-pulse 2s infinite ease-in-out}@keyframes relly-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.relly-panel *{box-sizing:border-box}.relly-panel,.relly-panel *,.relly-body,.relly-tabs-bar,.relly-search-bar{scrollbar-width:none!important;-ms-overflow-style:none!important}.relly-panel *::-webkit-scrollbar,.relly-panel::-webkit-scrollbar,.relly-body::-webkit-scrollbar,.relly-tabs-bar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.relly-panel.relly-hidden{opacity:0!important;transform:scale(.95) translateY(-6px)!important;pointer-events:none!important}.relly-header{display:flex;align-items:center;justify-content:space-between;background-color:var(--relly-header-bg);color:var(--relly-header-fg);padding:6px 10px;font-weight:600;border-bottom:1px solid var(--relly-border);cursor:grab;transition:background-color .2s var(--relly-ease);flex-shrink:0}.relly-header:active{cursor:grabbing}.relly-header-title{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relly-header-title svg{width:14px;height:14px;color:var(--relly-accent);transition:transform .2s var(--relly-ease)}.relly-header-title:hover svg{transform:rotate(15deg)}.relly-header-actions{display:flex;align-items:center;gap:4px}.relly-header-btn{background:transparent;border:none;color:var(--relly-fg);opacity:.7;padding:2px 6px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;transition:opacity .15s,background-color .15s,transform .1s var(--relly-ease)}.relly-header-btn:hover{opacity:1;background-color:#ffffff1a;transform:scale(1.08)}.relly-header-btn:active{transform:scale(.92)}.relly-resize-handle{position:absolute;bottom:0;right:0;width:14px;height:14px;cursor:se-resize;display:flex;align-items:center;justify-content:center;opacity:.4;transition:opacity .15s var(--relly-ease);z-index:100}.relly-resize-handle svg{width:9px;height:9px;stroke:var(--relly-fg);stroke-width:1.5}.relly-resize-handle:hover{opacity:1}.relly-search-bar{display:flex;align-items:center;padding:4px 8px;background-color:#0003;border-bottom:1px solid var(--relly-border);gap:6px;flex-shrink:0}.relly-search-input{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:3px 6px;outline:none;transition:border-color .15s var(--relly-ease),background-color .15s}.relly-search-input:focus{border-color:var(--relly-accent);background-color:var(--relly-input-hover)}.relly-search-clear{background:none;border:none;color:var(--relly-fg);cursor:pointer;opacity:.5;font-size:10px;padding:0 4px;transition:opacity .15s}.relly-search-clear:hover{opacity:1}.relly-tabs-bar{display:flex;background-color:var(--relly-header-bg);border-bottom:1px solid var(--relly-border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none!important;-ms-overflow-style:none!important}.relly-tabs-bar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.relly-tab-btn{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--relly-fg);opacity:.6;padding:5px 8px;font-family:inherit;font-size:11px;cursor:pointer;white-space:nowrap;transition:all .2s var(--relly-ease)}.relly-tab-btn:hover{opacity:.9;background-color:#ffffff08}.relly-tab-btn.relly-tab-active{opacity:1;color:var(--relly-accent);border-bottom-color:var(--relly-accent)}.relly-tab-content{display:none}.relly-tab-content.relly-tab-content--active{display:flex;flex-direction:column}.relly-body{display:flex;flex-direction:column;overflow-y:auto!important;overflow-x:hidden!important;max-height:80vh;flex:1;transition:max-height .25s var(--relly-ease);scrollbar-width:none!important;-ms-overflow-style:none!important}.relly-body::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.relly-panel.relly-collapsed .relly-body{display:none}.relly-copy-toast{position:absolute;top:36px;right:10px;background:var(--relly-accent);color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:600;box-shadow:0 4px 12px #0000004d;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .2s var(--relly-ease),transform .2s var(--relly-ease);z-index:9999999}.relly-copy-toast.relly-toast-show{opacity:1;transform:translateY(0)}.relly-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999999;display:flex;align-items:center;justify-content:center;padding:12px;opacity:0;pointer-events:none;transition:opacity .2s var(--relly-ease)}.relly-modal-backdrop.relly-modal-show{opacity:1;pointer-events:auto}.relly-modal{width:100%;max-width:320px;background:var(--relly-bg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);box-shadow:0 12px 30px #0009;padding:12px;display:flex;flex-direction:column;gap:8px;transform:scale(.95);transition:transform .2s var(--relly-ease)}.relly-modal-backdrop.relly-modal-show .relly-modal{transform:scale(1)}.relly-modal-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--relly-header-fg);font-size:12px}.relly-dropzone{border:1.5px dashed var(--relly-border);border-radius:4px;padding:12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--relly-fg);opacity:.8;font-size:11px;background:#00000026;transition:all .2s var(--relly-ease)}.relly-dropzone:hover,.relly-dropzone.relly-dropzone-drag{border-color:var(--relly-accent);opacity:1;background:#6366f114}.relly-import-textarea{width:100%;height:90px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:monospace;font-size:10px;padding:6px;outline:none;resize:vertical}.relly-import-textarea:focus{border-color:var(--relly-accent)}.relly-import-error{color:#ef4444;font-size:10px;min-height:12px}.relly-modal-actions{display:flex;gap:6px}.relly-btn-primary{background:var(--relly-accent)!important;color:#fff!important;border-color:var(--relly-accent)!important}.relly-btn-primary:hover{background:var(--relly-accent-hover)!important}.relly-toast-container{position:absolute;top:36px;right:8px;display:flex;flex-direction:column;gap:6px;z-index:9999999;pointer-events:none;max-width:240px}.relly-toast{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--relly-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-size:11px;box-shadow:0 4px 16px #00000073;pointer-events:auto;opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .2s var(--relly-ease),transform .2s var(--relly-ease);cursor:pointer}.relly-toast.relly-toast-enter{opacity:1;transform:translateY(0) scale(1)}.relly-toast.relly-toast-leave{opacity:0;transform:translateY(-6px) scale(.95)}.relly-toast-icon svg{width:14px;height:14px;display:block}.relly-toast--success{border-left:3px solid #22c55e}.relly-toast--success .relly-toast-icon{color:#22c55e}.relly-toast--warning{border-left:3px solid #f59e0b}.relly-toast--warning .relly-toast-icon{color:#f59e0b}.relly-toast--error{border-left:3px solid #ef4444}.relly-toast--error .relly-toast-icon{color:#ef4444}.relly-toast--info{border-left:3px solid var(--relly-accent)}.relly-toast--info .relly-toast-icon{color:var(--relly-accent)}.relly-toast-msg{flex:1;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.relly-toast-close{background:transparent;border:none;color:var(--relly-fg);opacity:.5;cursor:pointer;padding:0 2px;font-size:11px}.relly-toast-close:hover{opacity:1}.relly-context-menu{position:absolute;background:var(--relly-bg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);box-shadow:0 8px 24px #0000008c;padding:4px;display:flex;flex-direction:column;min-width:140px;z-index:99999999;animation:relly-menu-in .15s var(--relly-ease)}@keyframes relly-menu-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.relly-context-item{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:5px 8px;border-radius:3px;cursor:pointer;text-align:left;transition:background-color .12s var(--relly-ease),color .12s}.relly-context-item:hover:not(:disabled){background-color:var(--relly-accent);color:#fff}.relly-context-item:disabled{opacity:.4;cursor:not-allowed}.relly-context-item--danger:hover:not(:disabled){background-color:#ef4444!important;color:#fff!important}.relly-context-separator{height:1px;background-color:var(--relly-border);margin:3px 0}.relly-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--relly-row-height);padding:3px 10px;border-bottom:1px solid var(--relly-border);position:relative;transition:background-color .15s var(--relly-ease),opacity .2s var(--relly-ease)}.relly-row:hover{background-color:#ffffff08}.relly-row.relly-search-hidden{display:none!important}.relly-row-label{flex:0 0 40%;max-width:40%;color:var(--relly-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--relly-font-size);cursor:default;position:relative}.relly-row-control{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}.relly-multi-row{display:flex;align-items:stretch;width:100%;border-bottom:1px solid var(--relly-border)}.relly-multi-row .relly-row{flex:1;border-bottom:none;border-right:1px solid var(--relly-border);padding:3px 6px}.relly-multi-row .relly-row:last-child{border-right:none}.relly-multi-row .relly-row-label{flex:0 0 auto;max-width:none;margin-right:4px}.relly-tooltip{position:absolute;bottom:calc(100% + 4px);left:10px;background-color:#111216;color:#f3f4f6;padding:4px 8px;border-radius:4px;font-size:10px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;border:1px solid var(--relly-border);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s var(--relly-ease),transform .18s var(--relly-ease);z-index:99999999}.relly-row:hover .relly-tooltip{opacity:1;transform:translateY(0)}.relly-checkbox-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.relly-checkbox-box{width:16px;height:16px;border-radius:4px;background-color:var(--relly-input-bg);border:1px solid var(--relly-border);display:flex;align-items:center;justify-content:center;transition:background-color .18s var(--relly-ease),border-color .18s var(--relly-ease),transform .15s var(--relly-ease)}.relly-checkbox-wrapper:hover .relly-checkbox-box{border-color:var(--relly-accent);transform:scale(1.05)}.relly-checkbox-wrapper:active .relly-checkbox-box{transform:scale(.95)}.relly-checkbox-wrapper.relly-checked .relly-checkbox-box{background-color:var(--relly-accent);border-color:var(--relly-accent);animation:relly-pop .25s var(--relly-ease)}@keyframes relly-pop{0%{transform:scale(.85)}60%{transform:scale(1.15)}to{transform:scale(1)}}.relly-checkbox-icon{display:none;width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none}.relly-checkbox-wrapper.relly-checked .relly-checkbox-icon{display:block}.relly-slider-container{display:flex;align-items:center;gap:8px;width:100%}.relly-slider-range{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--relly-input-bg);outline:none;cursor:pointer;transition:background-color .15s var(--relly-ease)}.relly-slider-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--relly-accent);cursor:pointer;box-shadow:0 1px 3px #0000004d;transition:transform .15s var(--relly-ease),background-color .15s}.relly-slider-range::-webkit-slider-thumb:hover{transform:scale(1.25);background:var(--relly-accent-hover)}.relly-slider-range::-webkit-slider-thumb:active{transform:scale(1.35)}.relly-slider-number{width:50px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right;outline:none;transition:border-color .15s var(--relly-ease),background-color .15s}.relly-slider-number:focus{border-color:var(--relly-accent);background:var(--relly-input-hover)}.relly-btn{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;font-weight:500;padding:4px 10px;cursor:pointer;transition:background-color .15s var(--relly-ease),border-color .15s,color .15s,transform .1s var(--relly-ease);text-align:center}.relly-btn:hover{background-color:var(--relly-input-hover);border-color:var(--relly-accent);color:#fff;transform:translateY(-1px)}.relly-btn:active{transform:translateY(1px) scale(.98)}.relly-select-input{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:3px 6px;outline:none;cursor:pointer;transition:border-color .15s var(--relly-ease),background-color .15s}.relly-select-input:focus{border-color:var(--relly-accent);background:var(--relly-input-hover)}.relly-dynamic-value{color:var(--relly-accent);font-weight:500;font-family:monospace;font-size:11px;background:#6366f11a;padding:2px 6px;border-radius:4px;border:1px solid rgba(99,102,241,.2);transition:all .2s var(--relly-ease)}.relly-color-wrapper{display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-end}.relly-color-preview{width:20px;height:20px;border-radius:4px;border:1px solid var(--relly-border);cursor:pointer;box-shadow:inset 0 0 2px #0006;transition:transform .15s var(--relly-ease),border-color .15s}.relly-color-preview:hover{transform:scale(1.15);border-color:#fff}.relly-eyedropper-btn{background:transparent;border:none;color:var(--relly-fg);cursor:pointer;opacity:.7;padding:2px 4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:opacity .15s var(--relly-ease),transform .1s var(--relly-ease)}.relly-eyedropper-btn svg{width:13px;height:13px}.relly-eyedropper-btn:hover{opacity:1;color:var(--relly-accent);transform:scale(1.15)}.relly-color-native{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.relly-color-text{font-family:monospace;font-size:11px;color:var(--relly-fg)}.relly-color-swatches{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-right:4px}.relly-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:0;box-sizing:border-box;transition:transform .12s var(--relly-ease),border-color .12s;box-shadow:inset 0 0 2px #00000059}.relly-color-swatch:hover{transform:scale(1.25);border-color:#fff;z-index:2}.relly-color-swatch.relly-swatch-active{border:1.5px solid #fff;box-shadow:0 0 4px var(--relly-accent)}.relly-point2d-container{display:flex;align-items:center;gap:4px;width:100%}.relly-point2d-item{display:flex;align-items:center;gap:2px;flex:1}.relly-point2d-tag{font-size:10px;font-weight:600;color:var(--relly-accent);font-family:monospace}.relly-point2d-input{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right;outline:none;transition:border-color .15s var(--relly-ease)}.relly-point2d-input:focus{border-color:var(--relly-accent)}.relly-graph-row{display:flex;flex-direction:column;padding:6px 10px;border-bottom:1px solid var(--relly-border);gap:5px;transition:opacity .2s var(--relly-ease)}.relly-graph-row.relly-search-hidden{display:none!important}.relly-graph-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--relly-fg)}.relly-graph-label{font-weight:500;opacity:.85}.relly-graph-stats{display:flex;align-items:center;gap:5px;font-family:monospace;font-size:10px}.relly-graph-badge{opacity:.55;font-size:9px}.relly-graph-badge--paused{opacity:1!important;color:#f59e0b;background:#f59e0b2e;font-weight:700;border-radius:3px;padding:1px 4px;border:1px solid rgba(245,158,11,.4);letter-spacing:.5px}.relly-graph-val{color:var(--relly-accent);font-weight:600;background:#6366f11f;padding:1px 4px;border-radius:3px;border:1px solid rgba(99,102,241,.2)}.relly-graph-legend{display:none;align-items:center;gap:8px;font-size:9px;font-family:monospace;opacity:.75;margin-top:-2px}.relly-graph-legend-item{display:flex;align-items:center;gap:4px}.relly-graph-legend-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.relly-graph-canvas-container{width:100%;height:90px;background:var(--relly-input-bg);border-radius:4px;border:1px solid var(--relly-border);overflow:hidden;position:relative;box-shadow:inset 0 2px 6px #00000040;cursor:crosshair;transition:border-color .2s ease,box-shadow .2s ease}.relly-graph-canvas-container.relly-graph-paused{border-color:#f59e0b;box-shadow:inset 0 2px 6px #00000040,0 0 10px #f59e0b40}.relly-graph-canvas{width:100%;height:100%;display:block}.relly-graph-tooltip{position:absolute;pointer-events:none;background:#0f172aeb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--relly-border);border-radius:4px;padding:3px 6px;font-size:9px;font-family:monospace;color:#fff;white-space:nowrap;z-index:10;transform:translate(-50%);opacity:0;transition:opacity .12s ease;box-shadow:0 4px 12px #00000080}.relly-graph-tooltip.relly-tooltip-show{opacity:1}.relly-section{display:flex;flex-direction:column;border-bottom:1px solid var(--relly-border);transition:opacity .2s var(--relly-ease)}.relly-section.relly-search-hidden{display:none!important}.relly-section-header{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background-color:#ffffff05;cursor:pointer;font-weight:600;color:var(--relly-header-fg);transition:background-color .15s var(--relly-ease)}.relly-section-header:hover{background-color:#ffffff0d}.relly-section-title-wrap{display:flex;align-items:center;gap:6px}.relly-section-arrow{width:12px;height:12px;transition:transform .22s var(--relly-ease);fill:currentColor}.relly-section.relly-section--collapsed .relly-section-arrow{transform:rotate(-90deg)}.relly-section-content{display:flex;flex-direction:column;padding-left:6px;border-left:2px solid var(--relly-accent);transition:opacity .2s var(--relly-ease)}.relly-section.relly-section--collapsed .relly-section-content{display:none}.relly-disabled,.relly-component-row.relly-disabled,.relly-section.relly-disabled{opacity:.42!important;pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important;filter:grayscale(.5)}.relly-jog-scrubbing,.relly-jog-scrubbing *{cursor:ew-resize!important;-webkit-user-select:none!important;user-select:none!important}.relly-mini-sparkline{width:48px;height:16px;display:inline-block;vertical-align:middle;margin-left:6px;border-radius:3px;background:#00000040}.relly-point3d-container{display:flex;align-items:center;gap:4px;width:100%}.relly-point3d-item{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.relly-point3d-tag{font-size:9px;font-weight:700;line-height:1;padding:2px 4px;border-radius:3px;text-transform:uppercase}.relly-point3d-tag--x{background-color:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.4)}.relly-point3d-tag--y{background-color:#22c55e33;color:#22c55e;border:1px solid rgba(34,197,94,.4)}.relly-point3d-tag--z{background-color:#3b82f633;color:#3b82f6;border:1px solid rgba(59,130,246,.4)}.relly-point3d-input{width:100%;min-width:24px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:3px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right;cursor:ew-resize}.relly-range-wrapper{display:flex;align-items:center;gap:6px;width:100%}.relly-range-track{flex:1;height:6px;background:var(--relly-input-bg);border-radius:9999px;position:relative;cursor:pointer;box-shadow:inset 0 1px 2px #0000004d}.relly-range-bar{position:absolute;top:0;bottom:0;background:var(--relly-accent);border-radius:9999px;cursor:grab;transition:background-color .15s}.relly-range-bar:active{cursor:grabbing;background:var(--relly-accent-hover)}.relly-range-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--relly-accent);transform:translate(-50%,-50%);cursor:grab;z-index:2;transition:transform .1s var(--relly-ease),box-shadow .15s;box-shadow:0 1px 4px #0006}.relly-range-thumb:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 6px var(--relly-accent)}.relly-range-thumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.25)}.relly-range-input{width:38px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:3px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right}.relly-segmented-container{display:flex;position:relative;background:var(--relly-input-bg);border-radius:4px;border:1px solid var(--relly-border);padding:2px;width:100%;overflow:hidden}.relly-segmented-glider{position:absolute;top:2px;bottom:2px;background:var(--relly-accent);border-radius:3px;box-shadow:0 1px 4px #00000059;transition:transform .2s var(--relly-ease),width .2s var(--relly-ease),opacity .15s;pointer-events:none;z-index:1}.relly-segmented-btn{flex:1;position:relative;background:transparent;border:none;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:3px 6px;cursor:pointer;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;transition:color .15s var(--relly-ease)}.relly-segmented-btn:hover{color:#fff}.relly-segmented-btn.relly-segmented-btn--active{color:#fff;font-weight:600}.relly-status-wrapper{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-end}.relly-status-led{position:relative;width:8px;height:8px;display:flex;align-items:center;justify-content:center}.relly-status-led-core{width:7px;height:7px;border-radius:50%;background-color:#22c55e;position:relative;z-index:2}.relly-status-pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;background-color:inherit;opacity:.75;animation:relly-status-pulse 2s cubic-bezier(.24,0,.38,1) infinite;z-index:1}@keyframes relly-status-pulse{0%{transform:scale(.95);opacity:.8}70%{transform:scale(2.4);opacity:0}to{transform:scale(2.4);opacity:0}}.relly-status-led--online .relly-status-led-core,.relly-status-led--online .relly-status-pulse-ring{background-color:#22c55e}.relly-status-led--busy .relly-status-led-core,.relly-status-led--busy .relly-status-pulse-ring{background-color:#f59e0b}.relly-status-led--offline .relly-status-led-core,.relly-status-led--offline .relly-status-pulse-ring{background-color:#ef4444}.relly-status-led--info .relly-status-led-core,.relly-status-led--info .relly-status-pulse-ring{background-color:#3b82f6}.relly-status-led--ready .relly-status-led-core,.relly-status-led--ready .relly-status-pulse-ring{background-color:#a855f7}.relly-status-badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:9999px;text-transform:uppercase;letter-spacing:.04em;background:#ffffff14}.relly-status-badge--online{color:#22c55e;background:#22c55e26}.relly-status-badge--busy{color:#f59e0b;background:#f59e0b26}.relly-status-badge--offline{color:#ef4444;background:#ef444426}.relly-status-badge--info{color:#3b82f6;background:#3b82f626}.relly-status-badge--ready{color:#a855f7;background:#a855f726}.relly-status-detail{font-size:10px;color:var(--relly-fg);opacity:.7;font-family:monospace}', I = "relly-ui-stylesheet";
-function K(y) {
-  const i = y || (typeof document < "u" ? document : null);
-  if (!i || "getElementById" in i && i.getElementById(I) || "querySelector" in i && i.querySelector(`#${I}`)) return;
+const xe = ':root{--relly-bg: #1c1d22;--relly-fg: #d1d5db;--relly-header-bg: #141518;--relly-header-fg: #f3f4f6;--relly-accent: #6366f1;--relly-accent-hover: #4f46e5;--relly-border: rgba(255, 255, 255, .08);--relly-input-bg: #26272e;--relly-input-hover: #2f3039;--relly-radius: 6px;--relly-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--relly-font-size: 11px;--relly-row-height: 26px;--relly-ease: cubic-bezier(.16, 1, .3, 1);--relly-transition: all .2s var(--relly-ease)}.relly-host{position:fixed;z-index:999999;pointer-events:none}.relly-panel{position:fixed;z-index:999999;background-color:var(--relly-bg);color:var(--relly-fg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #0006;font-family:var(--relly-font);font-size:var(--relly-font-size);-webkit-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden!important;overflow-x:hidden!important;display:flex;flex-direction:column;pointer-events:auto;opacity:1;transform:scale(1) translateY(0);transition:opacity .22s var(--relly-ease),transform .22s var(--relly-ease);min-width:240px;min-height:120px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.relly-panel.relly-mini-hud{width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;border-radius:9999px!important;box-shadow:0 4px 20px #0006,0 0 0 1px var(--relly-accent)}.relly-panel.relly-mini-hud .relly-header{border-bottom:none;padding:5px 12px;border-radius:9999px;background-color:var(--relly-bg)}.relly-panel.relly-mini-hud .relly-body,.relly-panel.relly-mini-hud .relly-search-bar,.relly-panel.relly-mini-hud .relly-tabs-bar,.relly-panel.relly-mini-hud .relly-resize-handle,.relly-panel.relly-mini-hud .relly-header-btn:not(.relly-minihud-btn){display:none!important}.relly-panel.relly-mini-hud .relly-header-title:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background-color:var(--relly-accent);box-shadow:0 0 6px var(--relly-accent);margin-right:6px;animation:relly-pulse 2s infinite ease-in-out}@keyframes relly-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.relly-panel *{box-sizing:border-box}.relly-panel,.relly-panel *,.relly-body,.relly-tabs-bar,.relly-search-bar{scrollbar-width:none!important;-ms-overflow-style:none!important}.relly-panel *::-webkit-scrollbar,.relly-panel::-webkit-scrollbar,.relly-body::-webkit-scrollbar,.relly-tabs-bar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.relly-panel.relly-hidden{opacity:0!important;transform:scale(.95) translateY(-6px)!important;pointer-events:none!important}.relly-header{display:flex;align-items:center;justify-content:space-between;background-color:var(--relly-header-bg);color:var(--relly-header-fg);padding:6px 10px;font-weight:600;border-bottom:1px solid var(--relly-border);cursor:grab;transition:background-color .2s var(--relly-ease);flex-shrink:0}.relly-header:active{cursor:grabbing}.relly-header-title{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relly-header-title svg{width:14px;height:14px;color:var(--relly-accent);transition:transform .2s var(--relly-ease)}.relly-header-title:hover svg{transform:rotate(15deg)}.relly-header-actions{display:flex;align-items:center;gap:4px}.relly-header-btn{background:transparent;border:none;color:var(--relly-fg);opacity:.7;padding:2px 6px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;transition:opacity .15s,background-color .15s,transform .1s var(--relly-ease)}.relly-header-btn:hover{opacity:1;background-color:#ffffff1a;transform:scale(1.08)}.relly-header-btn:active{transform:scale(.92)}.relly-resize-handle{position:absolute;bottom:0;right:0;width:14px;height:14px;cursor:se-resize;display:flex;align-items:center;justify-content:center;opacity:.4;transition:opacity .15s var(--relly-ease);z-index:100}.relly-resize-handle svg{width:9px;height:9px;stroke:var(--relly-fg);stroke-width:1.5}.relly-resize-handle:hover{opacity:1}.relly-search-bar{display:flex;align-items:center;padding:4px 8px;background-color:#0003;border-bottom:1px solid var(--relly-border);gap:6px;flex-shrink:0}.relly-search-input{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:3px 6px;outline:none;transition:border-color .15s var(--relly-ease),background-color .15s}.relly-search-input:focus{border-color:var(--relly-accent);background-color:var(--relly-input-hover)}.relly-search-clear{background:none;border:none;color:var(--relly-fg);cursor:pointer;opacity:.5;font-size:10px;padding:0 4px;transition:opacity .15s}.relly-search-clear:hover{opacity:1}.relly-tabs-bar{display:flex;background-color:var(--relly-header-bg);border-bottom:1px solid var(--relly-border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none!important;-ms-overflow-style:none!important}.relly-tabs-bar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.relly-tab-btn{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--relly-fg);opacity:.6;padding:5px 8px;font-family:inherit;font-size:11px;cursor:pointer;white-space:nowrap;transition:all .2s var(--relly-ease)}.relly-tab-btn:hover{opacity:.9;background-color:#ffffff08}.relly-tab-btn.relly-tab-active{opacity:1;color:var(--relly-accent);border-bottom-color:var(--relly-accent)}.relly-tab-content{display:none}.relly-tab-content.relly-tab-content--active{display:flex;flex-direction:column}.relly-body{display:flex;flex-direction:column;overflow-y:auto!important;overflow-x:hidden!important;max-height:80vh;flex:1;transition:max-height .25s var(--relly-ease);scrollbar-width:none!important;-ms-overflow-style:none!important}.relly-body::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.relly-panel.relly-collapsed .relly-body{display:none}.relly-copy-toast{position:absolute;top:36px;right:10px;background:var(--relly-accent);color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:600;box-shadow:0 4px 12px #0000004d;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .2s var(--relly-ease),transform .2s var(--relly-ease);z-index:9999999}.relly-copy-toast.relly-toast-show{opacity:1;transform:translateY(0)}.relly-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999999;display:flex;align-items:center;justify-content:center;padding:12px;opacity:0;pointer-events:none;transition:opacity .2s var(--relly-ease)}.relly-modal-backdrop.relly-modal-show{opacity:1;pointer-events:auto}.relly-modal{width:100%;max-width:320px;background:var(--relly-bg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);box-shadow:0 12px 30px #0009;padding:12px;display:flex;flex-direction:column;gap:8px;transform:scale(.95);transition:transform .2s var(--relly-ease)}.relly-modal-backdrop.relly-modal-show .relly-modal{transform:scale(1)}.relly-modal-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--relly-header-fg);font-size:12px}.relly-dropzone{border:1.5px dashed var(--relly-border);border-radius:4px;padding:12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--relly-fg);opacity:.8;font-size:11px;background:#00000026;transition:all .2s var(--relly-ease)}.relly-dropzone:hover,.relly-dropzone.relly-dropzone-drag{border-color:var(--relly-accent);opacity:1;background:#6366f114}.relly-import-textarea{width:100%;height:90px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:monospace;font-size:10px;padding:6px;outline:none;resize:vertical}.relly-import-textarea:focus{border-color:var(--relly-accent)}.relly-import-error{color:#ef4444;font-size:10px;min-height:12px}.relly-modal-actions{display:flex;gap:6px}.relly-btn-primary{background:var(--relly-accent)!important;color:#fff!important;border-color:var(--relly-accent)!important}.relly-btn-primary:hover{background:var(--relly-accent-hover)!important}.relly-toast-container{position:absolute;top:36px;right:8px;display:flex;flex-direction:column;gap:6px;z-index:9999999;pointer-events:none;max-width:240px}.relly-toast{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--relly-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-size:11px;box-shadow:0 4px 16px #00000073;pointer-events:auto;opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .2s var(--relly-ease),transform .2s var(--relly-ease);cursor:pointer}.relly-toast.relly-toast-enter{opacity:1;transform:translateY(0) scale(1)}.relly-toast.relly-toast-leave{opacity:0;transform:translateY(-6px) scale(.95)}.relly-toast-icon svg{width:14px;height:14px;display:block}.relly-toast--success{border-left:3px solid #22c55e}.relly-toast--success .relly-toast-icon{color:#22c55e}.relly-toast--warning{border-left:3px solid #f59e0b}.relly-toast--warning .relly-toast-icon{color:#f59e0b}.relly-toast--error{border-left:3px solid #ef4444}.relly-toast--error .relly-toast-icon{color:#ef4444}.relly-toast--info{border-left:3px solid var(--relly-accent)}.relly-toast--info .relly-toast-icon{color:var(--relly-accent)}.relly-toast-msg{flex:1;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.relly-toast-close{background:transparent;border:none;color:var(--relly-fg);opacity:.5;cursor:pointer;padding:0 2px;font-size:11px}.relly-toast-close:hover{opacity:1}.relly-context-menu{position:absolute;background:var(--relly-bg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);box-shadow:0 8px 24px #0000008c;padding:4px;display:flex;flex-direction:column;min-width:140px;z-index:99999999;animation:relly-menu-in .15s var(--relly-ease)}@keyframes relly-menu-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.relly-context-item{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:5px 8px;border-radius:3px;cursor:pointer;text-align:left;transition:background-color .12s var(--relly-ease),color .12s}.relly-context-item:hover:not(:disabled){background-color:var(--relly-accent);color:#fff}.relly-context-item:disabled{opacity:.4;cursor:not-allowed}.relly-context-item--danger:hover:not(:disabled){background-color:#ef4444!important;color:#fff!important}.relly-context-separator{height:1px;background-color:var(--relly-border);margin:3px 0}.relly-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--relly-row-height);padding:3px 10px;border-bottom:1px solid var(--relly-border);position:relative;transition:background-color .15s var(--relly-ease),opacity .2s var(--relly-ease)}.relly-row:hover{background-color:#ffffff08}.relly-row.relly-search-hidden{display:none!important}.relly-row-label{flex:0 0 40%;max-width:40%;color:var(--relly-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--relly-font-size);cursor:default;position:relative}.relly-row-control{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}.relly-multi-row{display:flex;align-items:stretch;width:100%;border-bottom:1px solid var(--relly-border)}.relly-multi-row .relly-row{flex:1;border-bottom:none;border-right:1px solid var(--relly-border);padding:3px 6px}.relly-multi-row .relly-row:last-child{border-right:none}.relly-multi-row .relly-row-label{flex:0 0 auto;max-width:none;margin-right:4px}.relly-tooltip{position:absolute;bottom:calc(100% + 4px);left:10px;background-color:#111216;color:#f3f4f6;padding:4px 8px;border-radius:4px;font-size:10px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;border:1px solid var(--relly-border);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s var(--relly-ease),transform .18s var(--relly-ease);z-index:99999999}.relly-row:hover .relly-tooltip{opacity:1;transform:translateY(0)}.relly-checkbox-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.relly-checkbox-box{width:16px;height:16px;border-radius:4px;background-color:var(--relly-input-bg);border:1px solid var(--relly-border);display:flex;align-items:center;justify-content:center;transition:background-color .18s var(--relly-ease),border-color .18s var(--relly-ease),transform .15s var(--relly-ease)}.relly-checkbox-wrapper:hover .relly-checkbox-box{border-color:var(--relly-accent);transform:scale(1.05)}.relly-checkbox-wrapper:active .relly-checkbox-box{transform:scale(.95)}.relly-checkbox-wrapper.relly-checked .relly-checkbox-box{background-color:var(--relly-accent);border-color:var(--relly-accent);animation:relly-pop .25s var(--relly-ease)}@keyframes relly-pop{0%{transform:scale(.85)}60%{transform:scale(1.15)}to{transform:scale(1)}}.relly-checkbox-icon{display:none;width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none}.relly-checkbox-wrapper.relly-checked .relly-checkbox-icon{display:block}.relly-slider-container{display:flex;align-items:center;gap:8px;width:100%}.relly-slider-range{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--relly-input-bg);outline:none;cursor:pointer;transition:background-color .15s var(--relly-ease)}.relly-slider-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--relly-accent);cursor:pointer;box-shadow:0 1px 3px #0000004d;transition:transform .15s var(--relly-ease),background-color .15s}.relly-slider-range::-webkit-slider-thumb:hover{transform:scale(1.25);background:var(--relly-accent-hover)}.relly-slider-range::-webkit-slider-thumb:active{transform:scale(1.35)}.relly-slider-number{width:50px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right;outline:none;transition:border-color .15s var(--relly-ease),background-color .15s}.relly-slider-number:focus{border-color:var(--relly-accent);background:var(--relly-input-hover)}.relly-btn{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;font-weight:500;padding:4px 10px;cursor:pointer;transition:background-color .15s var(--relly-ease),border-color .15s,color .15s,transform .1s var(--relly-ease);text-align:center}.relly-btn:hover{background-color:var(--relly-input-hover);border-color:var(--relly-accent);color:#fff;transform:translateY(-1px)}.relly-btn:active{transform:translateY(1px) scale(.98)}.relly-select-input{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:3px 6px;outline:none;cursor:pointer;transition:border-color .15s var(--relly-ease),background-color .15s}.relly-select-input:focus{border-color:var(--relly-accent);background:var(--relly-input-hover)}.relly-dynamic-value{color:var(--relly-accent);font-weight:500;font-family:monospace;font-size:11px;background:#6366f11a;padding:2px 6px;border-radius:4px;border:1px solid rgba(99,102,241,.2);transition:all .2s var(--relly-ease)}.relly-color-wrapper{display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-end}.relly-color-preview{width:20px;height:20px;border-radius:4px;border:1px solid var(--relly-border);cursor:pointer;box-shadow:inset 0 0 2px #0006;transition:transform .15s var(--relly-ease),border-color .15s}.relly-color-preview:hover{transform:scale(1.15);border-color:#fff}.relly-eyedropper-btn{background:transparent;border:none;color:var(--relly-fg);cursor:pointer;opacity:.7;padding:2px 4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:opacity .15s var(--relly-ease),transform .1s var(--relly-ease)}.relly-eyedropper-btn svg{width:13px;height:13px}.relly-eyedropper-btn:hover{opacity:1;color:var(--relly-accent);transform:scale(1.15)}.relly-color-native{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.relly-color-text{font-family:monospace;font-size:11px;color:var(--relly-fg);background:transparent;border:1px solid transparent;border-radius:var(--relly-radius);padding:2px 4px;width:72px;text-transform:uppercase;transition:all .15s ease}.relly-color-text:hover{border-color:#fff3;background:var(--relly-input-bg)}.relly-color-text:focus{outline:none;border-color:var(--relly-accent);background:var(--relly-input-bg);box-shadow:0 0 0 2px #38bdf833}.relly-color-swatches{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-right:4px}.relly-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:0;box-sizing:border-box;transition:transform .12s var(--relly-ease),border-color .12s;box-shadow:inset 0 0 2px #00000059}.relly-color-swatch:hover{transform:scale(1.25);border-color:#fff;z-index:2}.relly-color-swatch.relly-swatch-active{border:1.5px solid #fff;box-shadow:0 0 4px var(--relly-accent)}.relly-point2d-container{display:flex;align-items:center;gap:4px;width:100%}.relly-point2d-item{display:flex;align-items:center;gap:2px;flex:1}.relly-point2d-tag{font-size:10px;font-weight:600;color:var(--relly-accent);font-family:monospace}.relly-point2d-input{width:100%;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:4px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right;outline:none;transition:border-color .15s var(--relly-ease)}.relly-point2d-input:focus{border-color:var(--relly-accent)}.relly-graph-row{display:flex;flex-direction:column;padding:6px 10px;border-bottom:1px solid var(--relly-border);gap:5px;transition:opacity .2s var(--relly-ease)}.relly-graph-row.relly-search-hidden{display:none!important}.relly-graph-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--relly-fg)}.relly-graph-label{font-weight:500;opacity:.85}.relly-graph-stats{display:flex;align-items:center;gap:5px;font-family:monospace;font-size:10px}.relly-graph-badge{opacity:.55;font-size:9px}.relly-graph-badge--paused{opacity:1!important;color:#f59e0b;background:#f59e0b2e;font-weight:700;border-radius:3px;padding:1px 4px;border:1px solid rgba(245,158,11,.4);letter-spacing:.5px}.relly-graph-val{color:var(--relly-accent);font-weight:600;background:#6366f11f;padding:1px 4px;border-radius:3px;border:1px solid rgba(99,102,241,.2)}.relly-graph-legend{display:none;align-items:center;gap:8px;font-size:9px;font-family:monospace;opacity:.75;margin-top:-2px}.relly-graph-legend-item{display:flex;align-items:center;gap:4px}.relly-graph-legend-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.relly-graph-canvas-container{width:100%;height:90px;background:var(--relly-input-bg);border-radius:4px;border:1px solid var(--relly-border);overflow:hidden;position:relative;box-shadow:inset 0 2px 6px #00000040;cursor:crosshair;transition:border-color .2s ease,box-shadow .2s ease}.relly-graph-canvas-container.relly-graph-paused{border-color:#f59e0b;box-shadow:inset 0 2px 6px #00000040,0 0 10px #f59e0b40}.relly-graph-canvas{width:100%;height:100%;display:block}.relly-graph-tooltip{position:absolute;pointer-events:none;background:#0f172aeb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--relly-border);border-radius:4px;padding:3px 6px;font-size:9px;font-family:monospace;color:#fff;white-space:nowrap;z-index:10;transform:translate(-50%);opacity:0;transition:opacity .12s ease;box-shadow:0 4px 12px #00000080}.relly-graph-tooltip.relly-tooltip-show{opacity:1}.relly-section{display:flex;flex-direction:column;border-bottom:1px solid var(--relly-border);transition:opacity .2s var(--relly-ease)}.relly-section.relly-search-hidden{display:none!important}.relly-section-header{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background-color:#ffffff05;cursor:pointer;font-weight:600;color:var(--relly-header-fg);transition:background-color .15s var(--relly-ease)}.relly-section-header:hover{background-color:#ffffff0d}.relly-section-title-wrap{display:flex;align-items:center;gap:6px}.relly-section-arrow{width:12px;height:12px;transition:transform .22s var(--relly-ease);fill:currentColor}.relly-section.relly-section--collapsed .relly-section-arrow{transform:rotate(-90deg)}.relly-section-content{display:flex;flex-direction:column;padding-left:6px;border-left:2px solid var(--relly-accent);transition:opacity .2s var(--relly-ease)}.relly-section.relly-section--collapsed .relly-section-content{display:none}.relly-disabled,.relly-component-row.relly-disabled,.relly-section.relly-disabled{opacity:.42!important;pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important;filter:grayscale(.5)}.relly-jog-scrubbing,.relly-jog-scrubbing *{cursor:ew-resize!important;-webkit-user-select:none!important;user-select:none!important}.relly-mini-sparkline{width:48px;height:16px;display:inline-block;vertical-align:middle;margin-left:6px;border-radius:3px;background:#00000040}.relly-point3d-container{display:flex;align-items:center;gap:4px;width:100%}.relly-point3d-item{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.relly-point3d-tag{font-size:9px;font-weight:700;line-height:1;padding:2px 4px;border-radius:3px;text-transform:uppercase}.relly-point3d-tag--x{background-color:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.4)}.relly-point3d-tag--y{background-color:#22c55e33;color:#22c55e;border:1px solid rgba(34,197,94,.4)}.relly-point3d-tag--z{background-color:#3b82f633;color:#3b82f6;border:1px solid rgba(59,130,246,.4)}.relly-point3d-input{width:100%;min-width:24px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:3px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right;cursor:ew-resize}.relly-range-wrapper{display:flex;align-items:center;gap:6px;width:100%}.relly-range-track{flex:1;height:6px;background:var(--relly-input-bg);border-radius:9999px;position:relative;cursor:pointer;box-shadow:inset 0 1px 2px #0000004d}.relly-range-bar{position:absolute;top:0;bottom:0;background:var(--relly-accent);border-radius:9999px;cursor:grab;transition:background-color .15s}.relly-range-bar:active{cursor:grabbing;background:var(--relly-accent-hover)}.relly-range-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--relly-accent);transform:translate(-50%,-50%);cursor:grab;z-index:2;transition:transform .1s var(--relly-ease),box-shadow .15s;box-shadow:0 1px 4px #0006}.relly-range-thumb:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 6px var(--relly-accent)}.relly-range-thumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.25)}.relly-range-input{width:38px;background:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:3px;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:2px 4px;text-align:right}.relly-segmented-container{display:flex;position:relative;background:var(--relly-input-bg);border-radius:4px;border:1px solid var(--relly-border);padding:2px;width:100%;overflow:hidden}.relly-segmented-glider{position:absolute;top:2px;bottom:2px;background:var(--relly-accent);border-radius:3px;box-shadow:0 1px 4px #00000059;transition:transform .2s var(--relly-ease),width .2s var(--relly-ease),opacity .15s;pointer-events:none;z-index:1}.relly-segmented-btn{flex:1;position:relative;background:transparent;border:none;color:var(--relly-fg);font-family:inherit;font-size:11px;padding:3px 6px;cursor:pointer;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;transition:color .15s var(--relly-ease)}.relly-segmented-btn:hover{color:#fff}.relly-segmented-btn.relly-segmented-btn--active{color:#fff;font-weight:600}.relly-status-wrapper{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-end}.relly-status-led{position:relative;width:8px;height:8px;display:flex;align-items:center;justify-content:center}.relly-status-led-core{width:7px;height:7px;border-radius:50%;background-color:#22c55e;position:relative;z-index:2}.relly-status-pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;background-color:inherit;opacity:.75;animation:relly-status-pulse 2s cubic-bezier(.24,0,.38,1) infinite;z-index:1}@keyframes relly-status-pulse{0%{transform:scale(.95);opacity:.8}70%{transform:scale(2.4);opacity:0}to{transform:scale(2.4);opacity:0}}.relly-status-led--online .relly-status-led-core,.relly-status-led--online .relly-status-pulse-ring{background-color:#22c55e}.relly-status-led--busy .relly-status-led-core,.relly-status-led--busy .relly-status-pulse-ring{background-color:#f59e0b}.relly-status-led--offline .relly-status-led-core,.relly-status-led--offline .relly-status-pulse-ring{background-color:#ef4444}.relly-status-led--info .relly-status-led-core,.relly-status-led--info .relly-status-pulse-ring{background-color:#3b82f6}.relly-status-led--ready .relly-status-led-core,.relly-status-led--ready .relly-status-pulse-ring{background-color:#a855f7}.relly-status-badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:9999px;text-transform:uppercase;letter-spacing:.04em;background:#ffffff14}.relly-status-badge--online{color:#22c55e;background:#22c55e26}.relly-status-badge--busy{color:#f59e0b;background:#f59e0b26}.relly-status-badge--offline{color:#ef4444;background:#ef444426}.relly-status-badge--info{color:#3b82f6;background:#3b82f626}.relly-status-badge--ready{color:#a855f7;background:#a855f726}.relly-status-detail{font-size:10px;color:var(--relly-fg);opacity:.7;font-family:monospace}.relly-switch-wrap{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.relly-switch-native{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.relly-switch-track{position:relative;width:34px;height:18px;border-radius:9999px;background-color:#ffffff29;border:1px solid rgba(255,255,255,.12);transition:all .22s cubic-bezier(.4,0,.2,1);display:inline-block}.relly-switch-wrap:hover .relly-switch-track{background-color:#ffffff3d;border-color:#fff3}.relly-switch-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background-color:#fff;box-shadow:0 1px 3px #0006;transition:transform .22s cubic-bezier(.34,1.56,.64,1),background-color .2s}.relly-switch-track--checked{background-color:var(--relly-accent);border-color:var(--relly-accent);box-shadow:0 0 10px var(--relly-accent)}.relly-switch-track--checked .relly-switch-thumb{transform:translate(16px);background-color:#fff}.relly-switch-text{font-size:10px;font-family:monospace;font-weight:700;color:var(--relly-fg);opacity:.8}.relly-button-group-row{padding:3px 0}.relly-button-group{display:flex;width:100%;gap:4px}.relly-btn--group{flex:1;min-width:0;padding:5px 8px;font-size:11px;font-weight:600;text-align:center;border-radius:var(--relly-radius);background-color:var(--relly-input-bg);color:var(--relly-fg);border:1px solid var(--relly-border);cursor:pointer;transition:all .16s var(--relly-ease)}.relly-btn--group:hover{background-color:var(--relly-input-hover);border-color:var(--relly-accent);transform:translateY(-1px)}.relly-btn--group:active{transform:translateY(1px)}.relly-btn--group.relly-btn--primary{background-color:var(--relly-accent);color:#0f172a;border-color:var(--relly-accent)}.relly-btn--group.relly-btn--primary:hover{filter:brightness(1.15);box-shadow:0 0 10px var(--relly-accent)}.relly-btn--group.relly-btn--danger{color:#f87171;border-color:#ef444459}.relly-btn--group.relly-btn--danger:hover{background-color:#ef44442e;border-color:#ef4444}.relly-text-wrap{position:relative;display:flex;align-items:center;width:100%}.relly-text-input{width:100%;background-color:var(--relly-input-bg);border:1px solid var(--relly-border);border-radius:var(--relly-radius);color:var(--relly-fg);font-size:11px;padding:4px 24px 4px 8px;outline:none;transition:all .15s ease}.relly-text-input:hover{background-color:var(--relly-input-hover);border-color:#fff3}.relly-text-input:focus{border-color:var(--relly-accent);background-color:var(--relly-input-hover);box-shadow:0 0 0 2px #38bdf833}.relly-text-clear{position:absolute;right:6px;background:none;border:none;color:var(--relly-fg);opacity:.45;cursor:pointer;font-size:10px;padding:2px 4px;line-height:1;transition:opacity .15s}.relly-text-clear:hover{opacity:1}.relly-progress-wrap{display:flex;align-items:center;gap:8px;width:100%}.relly-progress-track{flex:1;height:6px;border-radius:9999px;background-color:#ffffff1a;overflow:hidden;position:relative}.relly-progress-bar{height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--relly-accent),#38bdf8);box-shadow:0 0 8px var(--relly-accent);transition:width .18s ease-out;width:0%}.relly-progress-text{font-size:10px;font-family:monospace;font-weight:700;color:var(--relly-fg);opacity:.8;min-width:32px;text-align:right}.relly-separator-row{padding:6px 0}.relly-separator{display:flex;align-items:center;gap:8px;width:100%}.relly-separator-line{flex:1;height:1px;background-color:#ffffff1f}.relly-separator--dashed .relly-separator-line{background:none;border-bottom:1px dashed rgba(255,255,255,.2);height:0}.relly-separator-title{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--relly-fg);opacity:.55;white-space:nowrap}', L = "relly-ui-stylesheet";
+function X(f) {
+  const i = f || (typeof document < "u" ? document : null);
+  if (!i || "getElementById" in i && i.getElementById(L) || "querySelector" in i && i.querySelector(`#${L}`)) return;
   const e = document.createElement("style");
-  e.id = I, e.textContent = me, "head" in i && i.head ? i.head.appendChild(e) : i.appendChild(e);
+  e.id = L, e.textContent = xe, "head" in i && i.head ? i.head.appendChild(e) : i.appendChild(e);
 }
 const S = class S extends T {
   // Calm, readable telemetry rate (~5.5 samples per sec)
   constructor(e = {}) {
-    const t = e.shadowDOM !== !1, n = new W(), s = new X(), r = new re(e.sound !== !1, e.soundPack || "synth"), a = document.createElement("div");
-    a.className = "relly-panel";
-    const o = e.width ?? 280;
-    if (a.style.width = typeof o == "number" ? `${o}px` : o, e.height) {
+    const t = e.shadowDOM !== !1, n = new Q(), s = new Z(), r = new ce(e.sound !== !1, e.soundPack || "synth"), o = document.createElement("div");
+    o.className = "relly-panel";
+    const a = e.width ?? 280;
+    if (o.style.width = typeof a == "number" ? `${a}px` : a, e.height) {
       const b = e.height;
-      a.style.height = typeof b == "number" ? `${b}px` : b;
+      o.style.height = typeof b == "number" ? `${b}px` : b;
     }
     const h = document.createElement("div");
     h.className = "relly-header";
@@ -2257,23 +2565,23 @@ const S = class S extends T {
         <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
       </svg>
     `, p.appendChild(d);
-    const f = document.createElement("button");
-    f.className = "relly-header-btn", f.title = "Import settings from JSON", f.innerHTML = `
+    const y = document.createElement("button");
+    y.className = "relly-header-btn", y.title = "Import settings from JSON", y.innerHTML = `
       <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
         <polyline points="7 10 12 15 17 10"></polyline>
         <line x1="12" y1="15" x2="12" y2="3"></line>
       </svg>
-    `, p.appendChild(f);
+    `, p.appendChild(y);
     const x = document.createElement("button");
     x.className = "relly-header-btn relly-minihud-btn", x.title = "Toggle Mini-HUD pill (or double-click header)", x.textContent = "⤢", p.appendChild(x);
     const u = document.createElement("button");
-    u.className = "relly-header-btn", u.title = "Collapse/Expand", u.textContent = "_", p.appendChild(u), h.appendChild(c), h.appendChild(p), a.appendChild(h);
+    u.className = "relly-header-btn", u.title = "Collapse/Expand", u.textContent = "_", p.appendChild(u), h.appendChild(c), h.appendChild(p), o.appendChild(h);
     const v = document.createElement("div");
-    v.className = "relly-copy-toast", v.textContent = "JSON Copied!", a.appendChild(v);
-    const E = document.createElement("div");
-    E.className = "relly-body", e.height && (E.style.maxHeight = "none", E.style.flex = "1"), a.appendChild(E);
-    super(E, n, s, r);
+    v.className = "relly-copy-toast", v.textContent = "JSON Copied!", o.appendChild(v);
+    const w = document.createElement("div");
+    w.className = "relly-body", e.height && (w.style.maxHeight = "none", w.style.flex = "1"), o.appendChild(w);
+    super(w, n, s, r);
     l(this, "hostEl");
     l(this, "shadowRoot", null);
     l(this, "panelEl");
@@ -2305,11 +2613,11 @@ const S = class S extends T {
     l(this, "sparklineAnimId");
     l(this, "lastSparklineTime", 0);
     l(this, "sparklineInterval", 180);
-    this.panelEl = a, this.headerEl = h, this.titleEl = m, this.collapseBtn = u, this.copyToastEl = v, this.soundEngine = r, this.onResizeBound = () => this.clampToViewport(), e.searchBar && (this.searchBarInstance = new se(E, e.searchOptions), h.insertAdjacentElement("afterend", this.searchBarInstance.element)), this.themeManager = new te(this.panelEl, e.theme), this.mount(e, t), e.autoInjectStyles !== !1 && (this.shadowRoot ? K(this.shadowRoot) : K()), e.draggable !== !1 && (this.draggableInstance = new ie(this.headerEl, this.panelEl, this.soundEngine)), e.resizable !== !1 && (this.resizableInstance = new ne(this.panelEl)), this.toastManager = new oe(this.panelEl, this.soundEngine), this.contextMenuManager = new he(this.panelEl, this.soundEngine), this.importModalInstance = new le(this.panelEl, (b) => {
+    this.panelEl = o, this.headerEl = h, this.titleEl = m, this.collapseBtn = u, this.copyToastEl = v, this.soundEngine = r, this.onResizeBound = () => this.clampToViewport(), e.searchBar && (this.searchBarInstance = new he(w, e.searchOptions), h.insertAdjacentElement("afterend", this.searchBarInstance.element)), this.themeManager = new le(this.panelEl, e.theme), this.mount(e, t), e.autoInjectStyles !== !1 && (this.shadowRoot ? X(this.shadowRoot) : X()), e.draggable !== !1 && (this.draggableInstance = new ae(this.headerEl, this.panelEl, this.soundEngine)), e.resizable !== !1 && (this.resizableInstance = new oe(this.panelEl)), this.toastManager = new ue(this.panelEl, this.soundEngine), this.contextMenuManager = new me(this.panelEl, this.soundEngine), this.importModalInstance = new de(this.panelEl, (b) => {
       this.importJSON(b);
     });
     const g = e.hotkey === void 0 ? "KeyH" : e.hotkey;
-    g && (this.hotkeyInstance = new $(g, () => {
+    g && (this.hotkeyInstance = new W(g, () => {
       this.toggle();
     })), x.addEventListener("click", (b) => {
       b.stopPropagation(), this.toggleMiniHud();
@@ -2319,9 +2627,9 @@ const S = class S extends T {
       b.stopPropagation(), this.soundEngine.playClick(), this.toggleCollapse();
     }), d.addEventListener("click", (b) => {
       b.stopPropagation(), this.soundEngine.playClick(), this.copyJSON();
-    }), f.addEventListener("click", (b) => {
-      var w;
-      b.stopPropagation(), this.soundEngine.playClick(), (w = this.importModalInstance) == null || w.show();
+    }), y.addEventListener("click", (b) => {
+      var C;
+      b.stopPropagation(), this.soundEngine.playClick(), (C = this.importModalInstance) == null || C.show();
     }), e.soundVolume !== void 0 && this.soundEngine.setVolume(e.soundVolume), e.accordion && this.setAccordion(!0), e.ghostOnIdle && this.setGhostMode(!0, e.idleOpacity), this.initSparkline(c), this.panelEl.addEventListener("mouseenter", () => {
       this.ghostOnIdle && (this.panelEl.style.opacity = "1");
     }), this.panelEl.addEventListener("mouseleave", () => {
@@ -2349,7 +2657,7 @@ const S = class S extends T {
     }
   }
   addTab(e) {
-    return this.tabsManagerInstance || (this.tabsManagerInstance = new de(
+    return this.tabsManagerInstance || (this.tabsManagerInstance = new ye(
       this.headerEl,
       this.contentEl,
       this.bindingEngine,
@@ -2388,7 +2696,7 @@ const S = class S extends T {
     return this;
   }
   loadSchema(e) {
-    return e.title && this.setTitle(e.title), ae.load(this, e), this;
+    return e.title && this.setTitle(e.title), pe.load(this, e), this;
   }
   setTitle(e) {
     return this.titleEl.textContent = e, this;
@@ -2462,15 +2770,15 @@ const S = class S extends T {
     if (!e) return;
     const t = 48, n = 16;
     if (e.clearRect(0, 0, t, n), this.sparklineData.length < 2) return;
-    const s = Math.min(...this.sparklineData) - 1, a = Math.max(...this.sparklineData) + 1 - s || 1, o = t / (this.sparklineData.length - 1);
+    const s = Math.min(...this.sparklineData) - 1, o = Math.max(...this.sparklineData) + 1 - s || 1, a = t / (this.sparklineData.length - 1);
     e.beginPath(), e.moveTo(0, n);
     for (let h = 0; h < this.sparklineData.length; h++) {
-      const c = h * o, m = n - (this.sparklineData[h] - s) / a * (n - 3) - 1.5;
+      const c = h * a, m = n - (this.sparklineData[h] - s) / o * (n - 3) - 1.5;
       e.lineTo(c, m);
     }
     e.lineTo(t, n), e.closePath(), e.fillStyle = "rgba(56, 189, 248, 0.2)", e.fill(), e.beginPath();
     for (let h = 0; h < this.sparklineData.length; h++) {
-      const c = h * o, m = n - (this.sparklineData[h] - s) / a * (n - 3) - 1.5;
+      const c = h * a, m = n - (this.sparklineData[h] - s) / o * (n - 3) - 1.5;
       h === 0 ? e.moveTo(c, m) : e.lineTo(c, m);
     }
     e.strokeStyle = "#38bdf8", e.lineWidth = 1.3, e.stroke();
@@ -2483,7 +2791,7 @@ const S = class S extends T {
     return this.setCollapsed(!this.isPanelCollapsed);
   }
   setHotkey(e) {
-    return this.hotkeyInstance ? this.hotkeyInstance.setHotkey(e) : this.hotkeyInstance = new $(e, () => this.toggle()), this;
+    return this.hotkeyInstance ? this.hotkeyInstance.setHotkey(e) : this.hotkeyInstance = new W(e, () => this.toggle()), this;
   }
   setCollapsed(e) {
     return this.isPanelCollapsed = e, this.isPanelCollapsed ? (this.panelEl.classList.add("relly-collapsed"), this.collapseBtn.textContent = "+", this.bindingEngine.pause()) : (this.panelEl.classList.remove("relly-collapsed"), this.collapseBtn.textContent = "_", this.bindingEngine.resume()), this.autoSave && this.queueAutoSave(), this;
@@ -2575,10 +2883,10 @@ const S = class S extends T {
     typeof window < "u" && (window.removeEventListener("resize", this.onResizeBound), this.sparklineAnimId && cancelAnimationFrame(this.sparklineAnimId)), this.draggableInstance && this.draggableInstance.destroy(), this.resizableInstance && this.resizableInstance.destroy(), this.hotkeyInstance && this.hotkeyInstance.destroy(), this.searchBarInstance && this.searchBarInstance.destroy(), this.tabsManagerInstance && this.tabsManagerInstance.destroy(), this.importModalInstance && this.importModalInstance.destroy(), this.toastManager.destroy(), this.contextMenuManager.destroy(), this.bindingEngine.destroy(), this.destroyChildren(), this.hostEl ? this.hostEl.remove() : this.panelEl.remove();
   }
 };
-l(S, "version", "1.0.2");
+l(S, "version", "1.1.0");
 let k = S;
 Object.assign(k, {
-  Checkbox: L,
+  Checkbox: I,
   Slider: V,
   Button: A,
   Select: z,
@@ -2587,78 +2895,88 @@ Object.assign(k, {
   ColorPicker: R,
   Point2D: P,
   Point3D: D,
-  RangeSlider: H,
-  Segmented: j,
+  RangeSlider: j,
+  Segmented: H,
   StatusIndicator: F,
-  Section: q,
-  Row: G,
-  Tab: ce,
-  TabsManager: de,
-  BaseComponent: C,
-  BindingEngine: W,
-  PresetManager: X,
-  ThemeManager: te,
-  DARK_THEME: U,
-  LIGHT_THEME: J,
-  CYBERPUNK_THEME: Y,
-  NORD_THEME: _,
-  DRACULA_THEME: Q,
-  TOKYO_NIGHT_THEME: Z,
-  MATRIX_THEME: O,
-  SYNTHWAVE_THEME: ee,
-  Draggable: ie,
-  Resizable: ne,
-  HotkeyManager: $,
-  SearchBar: se,
-  SoundEngine: re,
-  ImportModal: le,
-  ToastManager: oe,
-  ContextMenuManager: he,
-  SchemaLoader: ae,
+  Switch: q,
+  ButtonGroup: J,
+  TextInput: $,
+  Progress: U,
+  Separator: Y,
+  Section: G,
+  Row: _,
+  Tab: fe,
+  TabsManager: ye,
+  BaseComponent: E,
+  BindingEngine: Q,
+  PresetManager: Z,
+  ThemeManager: le,
+  DARK_THEME: K,
+  LIGHT_THEME: O,
+  CYBERPUNK_THEME: ee,
+  NORD_THEME: te,
+  DRACULA_THEME: ie,
+  TOKYO_NIGHT_THEME: ne,
+  MATRIX_THEME: se,
+  SYNTHWAVE_THEME: re,
+  Draggable: ae,
+  Resizable: oe,
+  HotkeyManager: W,
+  SearchBar: he,
+  SoundEngine: ce,
+  ImportModal: de,
+  ToastManager: ue,
+  ContextMenuManager: me,
+  SchemaLoader: pe,
   ContainerHelper: T,
   RellyUI: k
 });
 typeof window < "u" && (window.RellyUI = k);
 export {
-  C as BaseComponent,
-  W as BindingEngine,
+  E as BaseComponent,
+  Q as BindingEngine,
   A as Button,
-  Y as CYBERPUNK_THEME,
-  L as Checkbox,
+  J as ButtonGroup,
+  ee as CYBERPUNK_THEME,
+  I as Checkbox,
   R as ColorPicker,
   T as ContainerHelper,
-  he as ContextMenuManager,
-  U as DARK_THEME,
-  Q as DRACULA_THEME,
-  ie as Draggable,
+  me as ContextMenuManager,
+  K as DARK_THEME,
+  ie as DRACULA_THEME,
+  ae as Draggable,
   B as DynamicLabel,
   N as Graph,
-  $ as HotkeyManager,
-  le as ImportModal,
-  J as LIGHT_THEME,
-  O as MATRIX_THEME,
-  _ as NORD_THEME,
+  W as HotkeyManager,
+  de as ImportModal,
+  O as LIGHT_THEME,
+  se as MATRIX_THEME,
+  te as NORD_THEME,
   P as Point2D,
   D as Point3D,
-  X as PresetManager,
-  H as RangeSlider,
+  Z as PresetManager,
+  U as Progress,
+  j as RangeSlider,
   k as RellyUI,
-  ne as Resizable,
-  G as Row,
-  ee as SYNTHWAVE_THEME,
-  ae as SchemaLoader,
-  se as SearchBar,
-  q as Section,
-  j as Segmented,
+  oe as Resizable,
+  _ as Row,
+  re as SYNTHWAVE_THEME,
+  pe as SchemaLoader,
+  he as SearchBar,
+  G as Section,
+  H as Segmented,
   z as Select,
+  Y as Separator,
   V as Slider,
-  re as SoundEngine,
+  ce as SoundEngine,
   F as StatusIndicator,
-  Z as TOKYO_NIGHT_THEME,
-  ce as Tab,
-  de as TabsManager,
-  te as ThemeManager,
-  oe as ToastManager,
+  q as Switch,
+  ne as TOKYO_NIGHT_THEME,
+  fe as Tab,
+  ye as TabsManager,
+  $ as TextInput,
+  le as ThemeManager,
+  ue as ToastManager,
   k as default
 };
 //# sourceMappingURL=relly-ui.es.js.map