relly-ui 1.0.0 → 1.0.2

package/dist/relly-ui.es.js

@@ -1,23 +1,23 @@
 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 a = (y, i, e) => ue(y, typeof i != "symbol" ? i + "" : i, e);
+var l = (y, i, e) => ue(y, typeof i != "symbol" ? i + "" : i, e);
 class C {
   constructor(i, e, t, n, s) {
-    a(this, "element");
-    a(this, "labelEl");
-    a(this, "controlEl");
-    a(this, "label");
-    a(this, "tooltipText");
-    a(this, "tooltipEl");
-    a(this, "conditionPredicate");
-    a(this, "targetObject");
-    a(this, "property");
-    a(this, "initialValue");
-    a(this, "prevValue");
-    a(this, "onChangeCallback");
-    a(this, "isListening", !1);
-    a(this, "contextMenuItems");
-    a(this, "disabled", !1);
+    l(this, "element");
+    l(this, "labelEl");
+    l(this, "controlEl");
+    l(this, "label");
+    l(this, "tooltipText");
+    l(this, "tooltipEl");
+    l(this, "conditionPredicate");
+    l(this, "targetObject");
+    l(this, "property");
+    l(this, "initialValue");
+    l(this, "prevValue");
+    l(this, "onChangeCallback");
+    l(this, "isListening", !1);
+    l(this, "contextMenuItems");
+    l(this, "disabled", !1);
     if (this.bindingEngine = n, this.presetManager = s, this.label = i, this.targetObject = e, this.property = t, this.targetObject && this.property) {
       this.prevValue = this.targetObject[this.property];
       try {
@@ -102,12 +102,12 @@ class C {
   }
 }
 class L extends C {
-  constructor(e, t, n, s, r, l) {
+  constructor(e, t, n, s, r, a) {
     super(e, t, n, s, r);
-    a(this, "wrapperEl");
-    a(this, "boxEl");
-    a(this, "soundEngine");
-    this.soundEngine = l, 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 = `
+    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 = `
       <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>
@@ -134,17 +134,17 @@ class L extends C {
   }
 }
 class V extends C {
-  constructor(e, t, n, s, r, l) {
+  constructor(e, t, n, s, r, a) {
     super(e, t, n, s, r);
-    a(this, "containerEl");
-    a(this, "rangeInput");
-    a(this, "numberInput");
-    a(this, "soundEngine");
-    a(this, "lastSoundTime", 0);
-    a(this, "min", 0);
-    a(this, "max", 100);
-    a(this, "step", 1);
-    this.soundEngine = l, 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", () => {
+    l(this, "containerEl");
+    l(this, "rangeInput");
+    l(this, "numberInput");
+    l(this, "soundEngine");
+    l(this, "lastSoundTime", 0);
+    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.numberInput.addEventListener("change", () => {
@@ -154,20 +154,20 @@ class V extends C {
   }
   setupJogScrubbing() {
     let e = !1, t = 0, n = 0;
-    const s = (l) => {
-      const o = l.clientX - t;
+    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 = l.shiftKey ? 10 : l.altKey ? 0.1 : 1, c = this.step * h, u = o * c;
-        let p = n + u;
+        const h = a.shiftKey ? 10 : a.altKey ? 0.1 : 1, c = this.step * h, m = o * c;
+        let p = n + m;
         p = Math.max(this.min, Math.min(this.max, p));
-        const d = (this.step.toString().split(".")[1] || "").length;
-        p = parseFloat(p.toFixed(Math.max(d, 2))), this.triggerSound(), this.setValue(p), l.preventDefault();
+        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();
       }
     }, 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", (l) => {
-      t = l.clientX, n = parseFloat(this.numberInput.value) || 0, e = !1, typeof window < "u" && (window.addEventListener("mousemove", s), window.addEventListener("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));
     });
   }
   triggerSound() {
@@ -199,9 +199,9 @@ class V extends C {
 class A extends C {
   constructor(e, t, n) {
     super(e);
-    a(this, "buttonEl");
-    a(this, "clickHandler");
-    a(this, "soundEngine");
+    l(this, "buttonEl");
+    l(this, "clickHandler");
+    l(this, "soundEngine");
     this.soundEngine = n, this.labelEl.style.display = "none", this.controlEl.style.flex = "1", this.buttonEl = document.createElement("button"), this.buttonEl.className = "relly-btn", this.buttonEl.textContent = e, this.controlEl.appendChild(this.buttonEl), t && this.onClick(t), this.buttonEl.addEventListener("click", (s) => {
       var r;
       (r = this.soundEngine) == null || r.playClick(), this.clickHandler && this.clickHandler(s);
@@ -221,10 +221,10 @@ class A extends C {
   }
 }
 class z extends C {
-  constructor(e, t, n, s, r, l) {
-    super(e, t, n, r, l);
-    a(this, "selectEl");
-    a(this, "optionsMap", /* @__PURE__ */ new Map());
+  constructor(e, t, n, s, r, a) {
+    super(e, t, n, r, a);
+    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;
       this.setValue(h);
@@ -258,8 +258,8 @@ class z extends C {
 class B extends C {
   constructor(e, t, n, s) {
     super(e, t, n, s);
-    a(this, "valueBadge");
-    a(this, "formatter", (e) => String(e ?? ""));
+    l(this, "valueBadge");
+    l(this, "formatter", (e) => String(e ?? ""));
     this.valueBadge = document.createElement("span"), this.valueBadge.className = "relly-dynamic-value", this.controlEl.appendChild(this.valueBadge), this.update();
   }
   setFormat(e) {
@@ -273,49 +273,49 @@ class B extends C {
 class N extends C {
   constructor(e, t, n, s, r) {
     super(e, t, n, s);
-    a(this, "canvasContainer");
-    a(this, "canvas");
-    a(this, "ctx", null);
-    a(this, "statsEl");
-    a(this, "graphTooltipEl");
-    a(this, "legendEl");
-    a(this, "primarySeries");
-    a(this, "seriesList", []);
-    a(this, "seriesMap", /* @__PURE__ */ new Map());
-    a(this, "bufferSize", 60);
-    a(this, "min", 0);
-    a(this, "max", 100);
-    a(this, "autoRange", !0);
-    a(this, "smoothCurves", !0);
-    a(this, "isPaused", !1);
-    a(this, "formatter", (e) => typeof e == "number" && !isNaN(e) ? e.toFixed(1) : "0");
-    a(this, "cssWidth", 280);
-    a(this, "cssHeight", 90);
-    a(this, "sampleInterval", 50);
-    a(this, "lastSampleTime", 0);
-    a(this, "hoverIndex", null);
-    a(this, "resizeObserver", null);
-    a(this, "mediaQueryList", null);
-    a(this, "soundEngine");
-    a(this, "onResolutionChange", () => {
+    l(this, "canvasContainer");
+    l(this, "canvas");
+    l(this, "ctx", null);
+    l(this, "statsEl");
+    l(this, "graphTooltipEl");
+    l(this, "legendEl");
+    l(this, "primarySeries");
+    l(this, "seriesList", []);
+    l(this, "seriesMap", /* @__PURE__ */ new Map());
+    l(this, "bufferSize", 60);
+    l(this, "min", 0);
+    l(this, "max", 100);
+    l(this, "autoRange", !0);
+    l(this, "smoothCurves", !0);
+    l(this, "isPaused", !1);
+    l(this, "formatter", (e) => typeof e == "number" && !isNaN(e) ? e.toFixed(1) : "0");
+    l(this, "cssWidth", 280);
+    l(this, "cssHeight", 90);
+    l(this, "sampleInterval", 50);
+    l(this, "lastSampleTime", 0);
+    l(this, "hoverIndex", null);
+    l(this, "resizeObserver", null);
+    l(this, "mediaQueryList", null);
+    l(this, "soundEngine");
+    l(this, "onResolutionChange", () => {
       this.updateDPRListener(), this.resizeCanvas(), this.draw();
     });
-    a(this, "onMouseMove", (e) => {
+    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), l = Math.round(n / r), o = Math.max(0, Math.min(this.bufferSize - 1, l));
+      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());
     });
-    a(this, "onMouseLeave", () => {
+    l(this, "onMouseLeave", () => {
       this.hoverIndex = null, this.graphTooltipEl.classList.remove("relly-tooltip-show"), this.draw();
     });
-    a(this, "onCanvasClick", () => {
+    l(this, "onCanvasClick", () => {
       var e;
       (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 l = document.createElement("div");
-    l.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>', l.appendChild(this.labelEl), l.appendChild(this.statsEl), this.element.appendChild(l), 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 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 = {
       id: "default",
       label: e,
       color: "#38bdf8",
@@ -346,7 +346,7 @@ class N extends C {
     if (this.hoverIndex === null) return;
     let t = "";
     for (const r of this.seriesList) {
-      const l = this.bufferSize - r.buffer.length, o = this.hoverIndex - l;
+      const a = this.bufferSize - r.buffer.length, o = this.hoverIndex - a;
       if (o >= 0 && o < r.buffer.length) {
         const h = r.buffer[o];
         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>`;
@@ -382,7 +382,7 @@ class N extends C {
   checkDirty() {
     if (this.checkVisibility(), !this.targetObject || !this.property || this.isPaused) return;
     const e = this.targetObject[this.property], t = typeof performance < "u" ? performance.now() : Date.now();
-    (t - this.lastSampleTime >= this.sampleInterval || e !== this.prevValue) && (this.lastSampleTime = t, this.prevValue = e, this.update(), this.triggerChange(e, this.prevValue));
+    t - this.lastSampleTime >= this.sampleInterval && (this.lastSampleTime = t, this.prevValue = e, this.update(), this.triggerChange(e, this.prevValue));
   }
   setSmooth(e) {
     return this.smoothCurves = e, this.draw(), this;
@@ -447,13 +447,19 @@ class N extends C {
     if (this.isPaused) return this;
     if (typeof t != "number" || isNaN(t) || !isFinite(t)) return this;
     const n = this.seriesMap.get(e);
-    return n ? (n.buffer.push(t), n.buffer.length > this.bufferSize && n.buffer.shift(), this) : (this.addSeries(e, { color: "#ec4899", label: e }), this.pushSeries(e, t));
+    return n ? (n.buffer.push(t), n.buffer.length > this.bufferSize && n.buffer.shift(), this.updateStats(), this.draw(), this) : (this.addSeries(e, { color: "#ec4899", label: e }), this.pushSeries(e, t));
+  }
+  getLatestValue() {
+    if (this.primarySeries.buffer.length > 0)
+      return this.primarySeries.buffer[this.primarySeries.buffer.length - 1];
+    const e = this.getValue();
+    return typeof e == "number" && !isNaN(e) ? e : 0;
   }
   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 l of this.seriesList)
-      s = s.concat(l.buffer);
+    for (const a of this.seriesList)
+      s = s.concat(a.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 = `
@@ -475,57 +481,57 @@ 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 g = Math.round(n * d);
-      e.beginPath(), e.moveTo(0, g), e.lineTo(t, g), e.stroke();
+      const f = Math.round(n * d);
+      e.beginPath(), e.moveTo(0, f), e.lineTo(t, f), 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), l = Math.max(...s);
-    let o = this.autoRange ? r : this.min, h = this.autoRange ? l : this.max;
-    l > h && (h = l), r < o && (o = r), o === h && (o -= 1, h += 1);
+    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 u = h - o || 1, p = t / Math.max(1, this.bufferSize - 1);
+    const m = h - o || 1, p = t / Math.max(1, this.bufferSize - 1);
     for (const d of this.seriesList) {
       if (d.buffer.length === 0) continue;
-      const g = d.buffer.length === 1 ? [d.buffer[0], d.buffer[0]] : d.buffer, b = this.bufferSize - g.length, m = [];
-      for (let f = 0; f < g.length; f++) {
-        const x = (b + f) * p, w = Math.max(0, Math.min(1, (g[f] - o) / u)), M = Math.max(4, Math.min(n - 4, n - 6 - w * (n - 12)));
-        m.push({ x, y: M });
+      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)));
+        u.push({ x: b, y: M });
       }
-      if (e.beginPath(), e.moveTo(m[0].x, n), e.lineTo(m[0].x, m[0].y), this.smoothCurves && m.length > 2)
-        for (let f = 0; f < m.length - 1; f++) {
-          const x = m[f], w = m[f + 1], M = (x.x + w.x) / 2;
-          e.bezierCurveTo(M, x.y, M, w.y, w.x, w.y);
+      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);
         }
       else
-        for (let f = 1; f < m.length; f++)
-          e.lineTo(m[f].x, m[f].y);
-      e.lineTo(m[m.length - 1].x, n), e.closePath();
+        for (let g = 1; g < u.length; g++)
+          e.lineTo(u[g].x, u[g].y);
+      e.lineTo(u[u.length - 1].x, n), e.closePath();
       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(m[0].x, m[0].y), this.smoothCurves && m.length > 2)
-        for (let f = 0; f < m.length - 1; f++) {
-          const x = m[f], w = m[f + 1], M = (x.x + w.x) / 2;
-          e.bezierCurveTo(M, x.y, M, w.y, w.x, w.y);
+      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);
         }
       else
-        for (let f = 1; f < m.length; f++)
-          e.lineTo(m[f].x, m[f].y);
+        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 = m[m.length - 1];
+      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());
     }
     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 g of this.seriesList) {
-        const b = this.bufferSize - g.buffer.length, m = this.hoverIndex - b;
-        if (m >= 0 && m < g.buffer.length) {
-          const v = g.buffer[m], E = Math.max(0, Math.min(1, (v - o) / u)), f = Math.max(4, Math.min(n - 4, n - 6 - E * (n - 12)));
-          e.beginPath(), e.arc(d, f, 4.5, 0, Math.PI * 2), e.fillStyle = g.color, e.fill(), e.beginPath(), e.arc(d, f, 2, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill();
+      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();
         }
       }
     }
@@ -535,18 +541,18 @@ class N extends C {
   }
 }
 class R extends C {
-  constructor(e, t, n, s, r, l) {
+  constructor(e, t, n, s, r, a) {
     super(e, t, n, s, r);
-    a(this, "wrapperEl");
-    a(this, "previewEl");
-    a(this, "hexTextEl");
-    a(this, "nativeColorInput");
-    a(this, "eyeDropperBtn");
-    a(this, "swatchesContainer");
-    a(this, "swatches", []);
-    a(this, "swatchButtons", /* @__PURE__ */ new Map());
-    a(this, "soundEngine");
-    this.soundEngine = l, 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 = `
+    l(this, "wrapperEl");
+    l(this, "previewEl");
+    l(this, "hexTextEl");
+    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 = `
         <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>
@@ -558,6 +564,8 @@ 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.nativeColorInput.addEventListener("input", () => {
       const o = this.nativeColorInput.value;
       this.setValue(o);
@@ -593,45 +601,45 @@ class R extends C {
 class P extends C {
   constructor(e, t, n, s, r) {
     super(e, t, n, s, r);
-    a(this, "containerEl");
-    a(this, "xInput");
-    a(this, "yInput");
-    a(this, "min");
-    a(this, "max");
-    a(this, "step", 0.1);
+    l(this, "containerEl");
+    l(this, "xInput");
+    l(this, "yInput");
+    l(this, "min");
+    l(this, "max");
+    l(this, "step", 0.1);
     this.containerEl = document.createElement("div"), this.containerEl.className = "relly-point2d-container";
-    const l = document.createElement("div");
-    l.className = "relly-point2d-item";
+    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), l.appendChild(o), l.appendChild(this.xInput);
+    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 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(l), 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(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();
   }
   setupInputScrubbing(e, t) {
     let n = !1, s = 0, r = 0;
-    const l = (h) => {
+    const a = (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 u = h.shiftKey ? 10 : h.altKey ? 0.1 : 1, p = this.step * u;
+        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 g = (this.step.toString().split(".")[1] || "").length;
-        d = parseFloat(d.toFixed(Math.max(g, 2)));
-        const b = this.getValue();
-        if (Array.isArray(b)) {
-          const m = [b[0], b[1]];
-          m[t === "x" ? 0 : 1] = d, this.setValue(m);
+        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 u = this.getValue();
+        if (Array.isArray(u)) {
+          const v = [u[0], u[1]];
+          v[t === "x" ? 0 : 1] = d, this.setValue(v);
         } else
-          this.setValue({ ...b, [t]: d });
+          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", l), window.removeEventListener("mouseup", o));
+      n && typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"), typeof window < "u" && (window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", o));
     };
     e.addEventListener("mousedown", (h) => {
-      s = h.clientX, r = parseFloat(e.value) || 0, n = !1, typeof window < "u" && (window.addEventListener("mousemove", l), window.addEventListener("mouseup", o));
+      s = h.clientX, r = parseFloat(e.value) || 0, n = !1, typeof window < "u" && (window.addEventListener("mousemove", a), window.addEventListener("mouseup", o));
     });
   }
   setMin(e) {
@@ -666,54 +674,54 @@ class P extends C {
 class D extends C {
   constructor(e, t, n, s, r) {
     super(e, t, n, s, r);
-    a(this, "containerEl");
-    a(this, "xInput");
-    a(this, "yInput");
-    a(this, "zInput");
-    a(this, "min");
-    a(this, "max");
-    a(this, "step", 0.1);
+    l(this, "containerEl");
+    l(this, "xInput");
+    l(this, "yInput");
+    l(this, "zInput");
+    l(this, "min");
+    l(this, "max");
+    l(this, "step", 0.1);
     this.containerEl = document.createElement("div"), this.containerEl.className = "relly-point3d-container";
-    const l = document.createElement("div");
-    l.className = "relly-point3d-item";
+    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), l.appendChild(o), l.appendChild(this.xInput);
+    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 h = document.createElement("div");
     h.className = "relly-point3d-item";
     const c = document.createElement("span");
     c.className = "relly-point3d-tag relly-point3d-tag--y", c.textContent = "Y", this.yInput = document.createElement("input"), this.yInput.type = "number", this.yInput.className = "relly-point3d-input", this.yInput.step = String(this.step), h.appendChild(c), h.appendChild(this.yInput);
-    const u = document.createElement("div");
-    u.className = "relly-point3d-item";
+    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), u.appendChild(p), u.appendChild(this.zInput), this.containerEl.appendChild(l), this.containerEl.appendChild(h), this.containerEl.appendChild(u), 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(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();
   }
   setupInputScrubbing(e, t) {
     let n = !1, s = 0, r = 0;
-    const l = (h) => {
+    const a = (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 u = h.shiftKey ? 10 : h.altKey ? 0.1 : 1, p = this.step * u;
+        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 g = (this.step.toString().split(".")[1] || "").length;
-        d = parseFloat(d.toFixed(Math.max(g, 2)));
-        const b = this.getValue();
-        if (Array.isArray(b)) {
-          const m = [
-            b[0] ?? 0,
-            b[1] ?? 0,
-            b[2] ?? 0
-          ], v = t === "x" ? 0 : t === "y" ? 1 : 2;
-          m[v] = d, this.setValue(m);
+        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 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);
         } else
-          this.setValue({ ...b, [t]: d });
+          this.setValue({ ...u, [t]: d });
         h.preventDefault();
       }
     }, o = () => {
-      window.removeEventListener("mousemove", l), window.removeEventListener("mouseup", o), n && (n = !1, typeof document < "u" && document.body.classList.remove("relly-jog-scrubbing"));
+      window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", o), 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", l), window.addEventListener("mouseup", o));
+      h.button === 0 && (s = h.clientX, r = parseFloat(e.value) || 0, window.addEventListener("mousemove", a), window.addEventListener("mouseup", o));
     });
   }
   handleInputChange() {
@@ -742,21 +750,21 @@ class D extends C {
   }
 }
 class H extends C {
-  constructor(e, t, n, s, r, l) {
+  constructor(e, t, n, s, r, a) {
     super(e, t, n, s, r);
-    a(this, "wrapperEl");
-    a(this, "trackEl");
-    a(this, "barEl");
-    a(this, "thumbMin");
-    a(this, "thumbMax");
-    a(this, "inputMin");
-    a(this, "inputMax");
-    a(this, "min", 0);
-    a(this, "max", 100);
-    a(this, "step", 1);
-    a(this, "soundEngine");
-    a(this, "formatter", (e, t) => `[${e.toFixed(1)}, ${t.toFixed(1)}]`);
-    this.soundEngine = l, 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();
+    l(this, "wrapperEl");
+    l(this, "trackEl");
+    l(this, "barEl");
+    l(this, "thumbMin");
+    l(this, "thumbMax");
+    l(this, "inputMin");
+    l(this, "inputMax");
+    l(this, "min", 0);
+    l(this, "max", 100);
+    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();
   }
   setupListeners() {
     this.inputMin.addEventListener("change", () => {
@@ -769,22 +777,22 @@ class H extends C {
   }
   setupThumbDrag(e, t) {
     let n = !1;
-    const s = (l) => {
-      var g, b;
+    const s = (a) => {
+      var f, x;
       if (!n) return;
-      const o = this.trackEl.getBoundingClientRect(), h = Math.max(0, Math.min(1, (l.clientX - o.left) / o.width)), c = this.min + h * (this.max - this.min), u = this.applyStep(c), [p, d] = this.getCurrentRange();
+      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();
       if (t === "min") {
-        const m = Math.min(u, d);
-        m !== p && ((g = this.soundEngine) == null || g.playTick(), this.setRangeValue(m, d));
+        const u = Math.min(m, d);
+        u !== p && ((f = this.soundEngine) == null || f.playTick(), this.setRangeValue(u, d));
       } else {
-        const m = Math.max(u, p);
-        m !== d && ((b = this.soundEngine) == null || b.playTick(), this.setRangeValue(p, m));
+        const u = Math.max(m, p);
+        u !== d && ((x = this.soundEngine) == null || x.playTick(), this.setRangeValue(p, u));
       }
     }, r = () => {
       n && (n = !1, window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", r));
     };
-    e.addEventListener("mousedown", (l) => {
-      l.button === 0 && (l.preventDefault(), l.stopPropagation(), n = !0, window.addEventListener("mousemove", s), window.addEventListener("mouseup", r));
+    e.addEventListener("mousedown", (a) => {
+      a.button === 0 && (a.preventDefault(), a.stopPropagation(), n = !0, window.addEventListener("mousemove", s), window.addEventListener("mouseup", r));
     });
   }
   setupBarDrag() {
@@ -792,19 +800,19 @@ class H extends C {
     const r = (o) => {
       var v;
       if (!e) return;
-      const h = this.trackEl.getBoundingClientRect(), u = (o.clientX - t) / h.width * (this.max - this.min), p = s - n;
-      let d = Math.max(this.min, Math.min(this.max - p, n + u));
+      const h = this.trackEl.getBoundingClientRect(), m = (o.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 g = this.applyStep(d + p), [b, m] = this.getCurrentRange();
-      (d !== b || g !== m) && ((v = this.soundEngine) == null || v.playTick(), this.setRangeValue(d, g));
-    }, l = () => {
-      e && (e = !1, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", l));
+      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));
     };
     this.barEl.addEventListener("mousedown", (o) => {
       if (o.button !== 0) return;
       o.preventDefault(), o.stopPropagation(), e = !0, t = o.clientX;
       const [h, c] = this.getCurrentRange();
-      n = h, s = c, window.addEventListener("mousemove", r), window.addEventListener("mouseup", l);
+      n = h, s = c, window.addEventListener("mousemove", r), window.addEventListener("mouseup", a);
     });
   }
   applyStep(e) {
@@ -845,13 +853,13 @@ class H extends C {
   }
 }
 class j extends C {
-  constructor(e, t, n, s = [], r, l, o) {
-    super(e, t, n, r, l);
-    a(this, "containerEl");
-    a(this, "gliderEl");
-    a(this, "buttons", /* @__PURE__ */ new Map());
-    a(this, "optionsMap", /* @__PURE__ */ new Map());
-    a(this, "soundEngine");
+  constructor(e, t, n, s = [], r, a, o) {
+    super(e, t, n, r, a);
+    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);
   }
   setOptions(e) {
@@ -894,13 +902,13 @@ class j extends C {
 class F extends C {
   constructor(e, t, n, s) {
     super(e, t, n, s);
-    a(this, "wrapperEl");
-    a(this, "ledEl");
-    a(this, "badgeEl");
-    a(this, "detailEl");
-    a(this, "currentStatus", "online");
-    a(this, "customBadge");
-    a(this, "customDetail");
+    l(this, "wrapperEl");
+    l(this, "ledEl");
+    l(this, "badgeEl");
+    l(this, "detailEl");
+    l(this, "currentStatus", "online");
+    l(this, "customBadge");
+    l(this, "customDetail");
     this.wrapperEl = document.createElement("div"), this.wrapperEl.className = "relly-status-wrapper", this.ledEl = document.createElement("div"), this.ledEl.className = "relly-status-led relly-status-led--online", this.ledEl.innerHTML = `
       <span class="relly-status-pulse-ring"></span>
       <span class="relly-status-led-core"></span>
@@ -928,8 +936,8 @@ class F extends C {
 }
 class T {
   constructor(i, e, t, n) {
-    a(this, "children", []);
-    a(this, "accordion", !1);
+    l(this, "children", []);
+    l(this, "accordion", !1);
     this.contentEl = i, this.bindingEngine = e, this.presetManager = t, this.soundEngine = n;
   }
   setAccordion(i) {
@@ -945,7 +953,7 @@ class T {
   }
   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), l = new L(
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new L(
         r,
         s.object,
         s.property,
@@ -953,7 +961,7 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return s.tooltip && l.setTooltip(s.tooltip), (s.onChange || s.onToggle) && l.onChange(s.onChange || s.onToggle), s.listen && l.listen(), s.showIf && l.showIf(s.showIf), this.contentEl.appendChild(l.element), this.children.push(l), l;
+      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;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new L(
       t,
@@ -970,7 +978,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), l = new V(
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new V(
         r,
         s.object,
         s.property,
@@ -978,7 +986,7 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return s.min !== void 0 && l.setMin(s.min), s.max !== void 0 && l.setMax(s.max), s.step !== void 0 && l.setStep(s.step), s.tooltip && l.setTooltip(s.tooltip), s.onChange && l.onChange(s.onChange), s.listen && l.listen(), s.showIf && l.showIf(s.showIf), this.contentEl.appendChild(l.element), this.children.push(l), l;
+      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;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new V(
       t,
@@ -1006,7 +1014,7 @@ class T {
   }
   addSelect(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, l = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new z(l, r.object, r.property, r.options, this.bindingEngine, this.presetManager);
+      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 n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new z(
@@ -1024,8 +1032,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), l = new B(r, s.object, s.property, this.bindingEngine);
-      return s.format && l.setFormat(s.format), s.tooltip && l.setTooltip(s.tooltip), s.showIf && l.showIf(s.showIf), this.contentEl.appendChild(l.element), this.children.push(l), l;
+      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 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;
@@ -1035,8 +1043,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), l = new N(r, s.object, s.property, this.bindingEngine, this.soundEngine);
-      return s.range && l.setRange(s.range[0], s.range[1]), s.color && l.setColor(s.color, s.fillColor), s.bufferSize && l.setBufferSize(s.bufferSize), s.smooth !== void 0 && l.setSmooth(s.smooth), s.height && l.setHeight(s.height), s.format && l.setFormat(s.format), s.tooltip && l.setTooltip(s.tooltip), s.showIf && l.showIf(s.showIf), this.contentEl.appendChild(l.element), this.children.push(l), l;
+      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 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;
@@ -1051,10 +1059,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 l = this.addGraph(e, "fps").setLabel(i).setRange(0, 120).setColor("#22c55e", "rgba(34, 197, 94, 0.25)").setFormat((h) => `${Math.round(h)} FPS`), o = l.destroy.bind(l);
-    return l.destroy = () => {
+    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();
-    }, l;
+    }, a;
   }
   createFPSGraph(i = "FPS") {
     return this.addFPSGraph(i);
@@ -1064,13 +1072,13 @@ class T {
     let t;
     const n = () => {
       if (typeof performance < "u" && performance.memory) {
-        const l = performance.memory.usedJSHeapSize / 1048576;
-        e.mem = Number(l.toFixed(1));
+        const a = performance.memory.usedJSHeapSize / 1048576;
+        e.mem = Number(a.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((l) => `${l.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((a) => `${a.toFixed(1)} MB`), r = s.destroy.bind(s);
     return s.destroy = () => {
       t && clearInterval(t), r();
     }, s;
@@ -1080,7 +1088,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), l = new R(
+      const s = i, r = s.label || s.property.charAt(0).toUpperCase() + s.property.slice(1), a = new R(
         r,
         s.object,
         s.property,
@@ -1088,7 +1096,7 @@ class T {
         this.presetManager,
         this.soundEngine
       );
-      return s.tooltip && l.setTooltip(s.tooltip), s.swatches && l.setSwatches(s.swatches), s.onChange && l.onChange(s.onChange), s.listen && l.listen(), s.showIf && l.showIf(s.showIf), this.contentEl.appendChild(l.element), this.children.push(l), l;
+      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;
     }
     const t = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", n = new R(
       t,
@@ -1105,7 +1113,7 @@ class T {
   }
   addPoint2D(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, l = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new P(l, r.object, r.property, this.bindingEngine, this.presetManager);
+      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 n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new P(n, i, e, this.bindingEngine, this.presetManager);
@@ -1116,7 +1124,7 @@ class T {
   }
   addPoint3D(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, l = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new D(l, r.object, r.property, this.bindingEngine, this.presetManager);
+      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 n = e ? e.charAt(0).toUpperCase() + e.slice(1) : "", s = new D(n, i, e, this.bindingEngine, this.presetManager);
@@ -1133,8 +1141,8 @@ class T {
   }
   addRange(i, e, t) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const r = i, l = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new H(
-        l,
+      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new H(
+        a,
         r.object,
         r.property,
         this.bindingEngine,
@@ -1158,8 +1166,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, l = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new j(
-        l,
+      const r = i, a = r.label || r.property.charAt(0).toUpperCase() + r.property.slice(1), o = new j(
+        a,
         r.object,
         r.property,
         r.options || [],
@@ -1185,17 +1193,17 @@ class T {
   }
   addStatus(i, e, t = "online", n, s) {
     if (typeof i == "object" && i !== null && e === void 0 && "object" in i && "property" in i) {
-      const c = i, u = c.label || c.property.charAt(0).toUpperCase() + c.property.slice(1), p = new F(
-        u,
+      const c = i, m = c.label || c.property.charAt(0).toUpperCase() + c.property.slice(1), p = new F(
+        m,
         c.object,
         c.property,
         this.bindingEngine
       );
       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", l = 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", a = typeof i == "string" ? void 0 : i, o = typeof i == "string" ? void 0 : e, h = new F(
       r,
-      l,
+      a,
       o,
       this.bindingEngine
     );
@@ -1205,7 +1213,7 @@ class T {
     return this.addStatus(i, e, t, n, s);
   }
   addRow() {
-    const i = new K(this.bindingEngine, this.presetManager, this.soundEngine);
+    const i = new G(this.bindingEngine, this.presetManager, this.soundEngine);
     return this.contentEl.appendChild(i.element), this.children.push(i), i;
   }
   createRow() {
@@ -1299,13 +1307,13 @@ class T {
     this.children = [];
   }
 }
-class K extends T {
+class G extends T {
   constructor(e, t, n) {
     const s = document.createElement("div");
     s.className = "relly-multi-row";
     super(s, e, t, n);
-    a(this, "element");
-    a(this, "disabled", !1);
+    l(this, "element");
+    l(this, "disabled", !1);
     this.element = s;
   }
   setDisabled(e) {
@@ -1320,17 +1328,17 @@ class K extends T {
 }
 class q extends T {
   constructor(e, t, n, s = !1, r) {
-    const l = document.createElement("div");
-    l.className = "relly-section-content";
-    super(l, t, n, r);
-    a(this, "element");
-    a(this, "headerEl");
-    a(this, "titleEl");
-    a(this, "arrowEl");
-    a(this, "isCollapsed", !1);
-    a(this, "conditionPredicate");
-    a(this, "parentContainer");
-    a(this, "disabled", !1);
+    const a = document.createElement("div");
+    a.className = "relly-section-content";
+    super(a, t, n, r);
+    l(this, "element");
+    l(this, "headerEl");
+    l(this, "titleEl");
+    l(this, "arrowEl");
+    l(this, "isCollapsed", !1);
+    l(this, "conditionPredicate");
+    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 = `
@@ -1378,12 +1386,12 @@ class q extends T {
     this.conditionPredicate && this.bindingEngine.unregister(this), this.destroyChildren(), this.element.remove();
   }
 }
-class G {
+class W {
   constructor() {
-    a(this, "listeners", /* @__PURE__ */ new Set());
-    a(this, "rafId", null);
-    a(this, "isRunning", !1);
-    a(this, "isPaused", !1);
+    l(this, "listeners", /* @__PURE__ */ new Set());
+    l(this, "rafId", null);
+    l(this, "isRunning", !1);
+    l(this, "isPaused", !1);
   }
   register(i) {
     this.listeners.add(i), !this.isRunning && !this.isPaused && this.start();
@@ -1416,11 +1424,11 @@ class G {
     this.stop(), this.listeners.clear();
   }
 }
-class W {
+class X {
   constructor() {
-    a(this, "components", /* @__PURE__ */ new Set());
-    a(this, "pendingValues", {});
-    a(this, "changeCallback");
+    l(this, "components", /* @__PURE__ */ new Set());
+    l(this, "pendingValues", {});
+    l(this, "changeCallback");
   }
   setOnChange(i) {
     this.changeCallback = i;
@@ -1497,7 +1505,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, X = {
+}, J = {
   bg: "#ffffff",
   fg: "#374151",
   headerBg: "#f3f4f6",
@@ -1511,7 +1519,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, J = {
+}, Y = {
   bg: "#0f051d",
   fg: "#e0f2fe",
   headerBg: "#180a33",
@@ -1525,7 +1533,7 @@ const U = {
   font: '"JetBrains Mono", Consolas, monospace',
   fontSize: "11px",
   rowHeight: "26px"
-}, Y = {
+}, _ = {
   bg: "#2e3440",
   fg: "#d8dee9",
   headerBg: "#242933",
@@ -1539,7 +1547,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, _ = {
+}, Q = {
   bg: "#282a36",
   fg: "#f8f8f2",
   headerBg: "#1e1f29",
@@ -1553,7 +1561,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, Q = {
+}, Z = {
   bg: "#1a1b26",
   fg: "#a9b1d6",
   headerBg: "#16161e",
@@ -1567,7 +1575,7 @@ const U = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "11px",
   rowHeight: "26px"
-}, Z = {
+}, O = {
   bg: "#0a0f0d",
   fg: "#00ff66",
   headerBg: "#050a08",
@@ -1581,7 +1589,7 @@ const U = {
   font: '"JetBrains Mono", Consolas, monospace',
   fontSize: "11px",
   rowHeight: "26px"
-}, O = {
+}, ee = {
   bg: "#241b2f",
   fg: "#f8f8f2",
   headerBg: "#191322",
@@ -1596,14 +1604,14 @@ const U = {
   fontSize: "11px",
   rowHeight: "26px"
 };
-class ee {
+class te {
   constructor(i, e) {
-    a(this, "currentTheme");
-    a(this, "currentThemeName");
+    l(this, "currentTheme");
+    l(this, "currentThemeName");
     this.panelElement = i, this.currentTheme = { ...U }, this.currentThemeName = "dark", e ? this.applyTheme(e) : this.applyToDOM(this.currentTheme);
   }
   applyTheme(i) {
-    typeof i == "string" && (this.currentThemeName = i), i === "light" ? this.currentTheme = { ...X } : i === "dark" ? this.currentTheme = { ...U } : i === "cyberpunk" ? this.currentTheme = { ...J } : i === "nord" ? this.currentTheme = { ...Y } : i === "dracula" ? this.currentTheme = { ..._ } : i === "tokyo-night" ? this.currentTheme = { ...Q } : i === "matrix" ? this.currentTheme = { ...Z } : i === "synthwave" ? this.currentTheme = { ...O } : 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 = { ...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);
   }
   getCurrentThemeName() {
     return this.currentThemeName;
@@ -1616,27 +1624,27 @@ class ee {
     return { ...this.currentTheme };
   }
 }
-class te {
+class ie {
   constructor(i, e, t) {
-    a(this, "isDragging", !1);
-    a(this, "startX", 0);
-    a(this, "startY", 0);
-    a(this, "initialLeft", 0);
-    a(this, "initialTop", 0);
-    a(this, "wasSnapped", !1);
-    a(this, "snapThreshold", 18);
-    a(this, "magneticSnap", !0);
-    a(this, "onMouseDownBound");
-    a(this, "onMouseMoveBound");
-    a(this, "onMouseUpBound");
-    a(this, "onResizeBound");
+    l(this, "isDragging", !1);
+    l(this, "startX", 0);
+    l(this, "startY", 0);
+    l(this, "initialLeft", 0);
+    l(this, "initialTop", 0);
+    l(this, "wasSnapped", !1);
+    l(this, "snapThreshold", 18);
+    l(this, "magneticSnap", !0);
+    l(this, "onMouseDownBound");
+    l(this, "onMouseMoveBound");
+    l(this, "onMouseUpBound");
+    l(this, "onResizeBound");
     this.handle = i, this.panel = e, this.soundEngine = t, this.onMouseDownBound = this.onMouseDown.bind(this), this.onMouseMoveBound = this.onMouseMove.bind(this), this.onMouseUpBound = this.onMouseUp.bind(this), this.onResizeBound = this.onResize.bind(this), this.handle.addEventListener("mousedown", this.onMouseDownBound), typeof window < "u" && window.addEventListener("resize", this.onResizeBound);
   }
   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, l = i.top;
-    r > n && (r = n), r < 0 && (r = 0), l > s && (l = s), l < 0 && (l = 0), this.panel.style.left = `${Math.round(r)}px`, this.panel.style.top = `${Math.round(l)}px`, this.panel.style.right = "auto", this.panel.style.bottom = "auto";
+    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";
   }
   onResize() {
     this.clampToViewport();
@@ -1652,9 +1660,9 @@ class te {
     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(), l = r.width, o = r.height, h = Math.max(0, window.innerWidth - l), c = Math.max(0, window.innerHeight - o);
-    let u = !1;
-    this.magneticSnap && (Math.abs(n) < this.snapThreshold ? (n = 0, u = !0) : Math.abs(n - h) < this.snapThreshold && (n = h, u = !0), Math.abs(s) < this.snapThreshold ? (s = 0, u = !0) : Math.abs(s - c) < this.snapThreshold && (s = c, u = !0), u && !this.wasSnapped && ((p = this.soundEngine) == null || p.playSnap()), this.wasSnapped = u), 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`;
+    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);
+    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`;
   }
   onMouseUp() {
     this.isDragging = !1, this.wasSnapped = !1, window.removeEventListener("mousemove", this.onMouseMoveBound), window.removeEventListener("mouseup", this.onMouseUpBound);
@@ -1663,18 +1671,18 @@ class te {
     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 ie {
+class ne {
   constructor(i, e = 240, t = 120) {
-    a(this, "handleEl");
-    a(this, "isResizing", !1);
-    a(this, "startX", 0);
-    a(this, "startY", 0);
-    a(this, "initialWidth", 0);
-    a(this, "initialHeight", 0);
-    a(this, "onMouseDownBound");
-    a(this, "onMouseMoveBound");
-    a(this, "onMouseUpBound");
-    a(this, "onResizeBound");
+    l(this, "handleEl");
+    l(this, "isResizing", !1);
+    l(this, "startX", 0);
+    l(this, "startY", 0);
+    l(this, "initialWidth", 0);
+    l(this, "initialHeight", 0);
+    l(this, "onMouseDownBound");
+    l(this, "onMouseMoveBound");
+    l(this, "onMouseUpBound");
+    l(this, "onResizeBound");
     this.panel = i, this.minWidth = e, this.minHeight = t, this.handleEl = document.createElement("div"), this.handleEl.className = "relly-resize-handle", this.handleEl.title = "Drag to resize panel", this.handleEl.innerHTML = `
       <svg viewBox="0 0 10 10">
         <line x1="8" y1="2" x2="2" y2="8"></line>
@@ -1700,11 +1708,11 @@ class ie {
   }
   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), l = 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), a = Math.max(this.minWidth, Math.min(s, this.initialWidth + e)), o = Math.max(
       this.minHeight,
       Math.min(r, this.initialHeight + t)
     );
-    this.panel.style.width = `${Math.round(l)}px`, this.panel.style.height = `${Math.round(o)}px`;
+    this.panel.style.width = `${Math.round(a)}px`, this.panel.style.height = `${Math.round(o)}px`;
     const h = this.panel.querySelector(".relly-body");
     h && (h.style.maxHeight = "none", h.style.flex = "1");
   }
@@ -1715,10 +1723,10 @@ class ie {
     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 ne {
+class $ {
   constructor(i, e) {
-    a(this, "onKeyDownBound");
-    this.hotkey = i, this.onToggle = e, this.onKeyDownBound = this.onKeyDown.bind(this), this.hotkey && typeof window < "u" && window.addEventListener("keydown", this.onKeyDownBound);
+    l(this, "onKeyDownBound");
+    this.hotkey = i, this.onToggle = e, this.onKeyDownBound = this.onKeyDown.bind(this), typeof window < "u" && window.addEventListener("keydown", this.onKeyDownBound);
   }
   onKeyDown(i) {
     var n;
@@ -1744,11 +1752,11 @@ class ne {
 }
 class se {
   constructor(i, e = {}) {
-    a(this, "element");
-    a(this, "inputEl");
-    a(this, "clearBtn");
-    a(this, "ignoreCase");
-    a(this, "onGlobalKeyDownBound");
+    l(this, "element");
+    l(this, "inputEl");
+    l(this, "clearBtn");
+    l(this, "ignoreCase");
+    l(this, "onGlobalKeyDownBound");
     this.bodyEl = i, this.ignoreCase = e.ignoreCase !== !1, this.element = document.createElement("div"), this.element.className = "relly-search-bar", this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "relly-search-input", this.inputEl.placeholder = e.placeholder || 'Filter settings... (Press "/" to focus)', this.clearBtn = document.createElement("button"), this.clearBtn.className = "relly-search-clear", this.clearBtn.textContent = "✕", this.clearBtn.title = "Clear search", this.clearBtn.style.display = "none", this.element.appendChild(this.inputEl), this.element.appendChild(this.clearBtn), this.inputEl.addEventListener("input", () => {
       this.filter(this.inputEl.value);
     }), this.inputEl.addEventListener("keydown", (t) => {
@@ -1767,8 +1775,8 @@ class se {
       const t = typeof i.composedPath == "function" ? i.composedPath() : [];
       for (const r of t)
         if (r instanceof HTMLElement) {
-          const l = r.tagName;
-          if (l === "INPUT" || l === "TEXTAREA" || l === "SELECT" || r.isContentEditable || r.classList.contains("relly-search-input"))
+          const a = r.tagName;
+          if (a === "INPUT" || a === "TEXTAREA" || a === "SELECT" || r.isContentEditable || r.classList.contains("relly-search-input"))
             return;
         }
       let n = document.activeElement;
@@ -1784,6 +1792,7 @@ class se {
     return this.inputEl;
   }
   filter(i) {
+    var o;
     const e = i.trim();
     if (!e) {
       this.clearBtn.style.display = "none", this.resetFilter();
@@ -1791,22 +1800,38 @@ class se {
     }
     this.clearBtn.style.display = "block";
     const t = this.ignoreCase ? e.toLowerCase() : e;
-    this.bodyEl.querySelectorAll(".relly-row, .relly-graph-row").forEach((r) => {
-      const l = r.querySelector(".relly-row-label, .relly-graph-header span"), o = (l == null ? void 0 : l.textContent) || "";
-      if ((this.ignoreCase ? o.toLowerCase() : o).includes(t)) {
-        r.classList.remove("relly-search-hidden");
-        const u = r.closest(".relly-section");
-        u && (u.classList.remove("relly-section--collapsed"), u.classList.remove("relly-search-hidden"));
+    this.bodyEl.querySelectorAll(".relly-row, .relly-graph-row").forEach((h) => {
+      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"));
       } else
-        r.classList.add("relly-search-hidden");
-    }), this.bodyEl.querySelectorAll(".relly-section").forEach((r) => {
-      const l = r.querySelector(".relly-section-title-wrap span:last-child"), o = (l == null ? void 0 : l.textContent) || "";
-      (this.ignoreCase ? o.toLowerCase() : o).includes(t) ? (r.classList.remove("relly-search-hidden"), r.classList.remove("relly-section--collapsed"), r.querySelectorAll(".relly-row, .relly-graph-row").forEach((c) => {
-        c.classList.remove("relly-search-hidden");
-      })) : r.querySelectorAll(
+        h.classList.add("relly-search-hidden");
+    }), this.bodyEl.querySelectorAll(".relly-section").forEach((h) => {
+      const c = h.querySelector(".relly-section-title-wrap span:last-child"), m = (c == null ? void 0 : c.textContent) || "";
+      (this.ignoreCase ? m.toLowerCase() : m).includes(t) ? (h.classList.remove("relly-search-hidden"), h.classList.remove("relly-section--collapsed"), h.querySelectorAll(".relly-row, .relly-graph-row").forEach((d) => {
+        d.classList.remove("relly-search-hidden");
+      })) : h.querySelectorAll(
         ".relly-row:not(.relly-search-hidden), .relly-graph-row:not(.relly-search-hidden)"
-      ).length === 0 && r.classList.add("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(
+      ".relly-row:not(.relly-search-hidden), .relly-graph-row:not(.relly-search-hidden)"
+    );
+    if (!a || a.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");
+          if (p && p[c]) {
+            p[c].click();
+            break;
+          }
+        }
+    }
   }
   clear() {
     this.inputEl.value = "", this.clearBtn.style.display = "none", this.resetFilter();
@@ -1822,10 +1847,10 @@ class se {
 }
 class re {
   constructor(i = !0, e = "synth") {
-    a(this, "ctx", null);
-    a(this, "enabled", !0);
-    a(this, "volume", 1);
-    a(this, "soundPack", "synth");
+    l(this, "ctx", null);
+    l(this, "enabled", !0);
+    l(this, "volume", 1);
+    l(this, "soundPack", "synth");
     this.enabled = i, this.soundPack = e;
   }
   setEnabled(i) {
@@ -1871,16 +1896,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, l = i ? 900 : 400;
-          n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(l, 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, 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);
         } else if (this.soundPack === "bubble") {
           n.type = "sine";
-          const r = i ? 380 : 900, l = i ? 1100 : 280;
-          n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(l, 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, 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);
         } else if (this.soundPack === "arcade") {
           n.type = "square";
-          const r = i ? 523.25 : 659.25, l = i ? 783.99 : 392;
-          n.frequency.setValueAtTime(r, t), n.frequency.setValueAtTime(l, 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, 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);
         } else {
           n.type = "triangle";
           const r = i ? 650 : 450;
@@ -1926,8 +1951,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, l = i ? 680 : 340;
-        n.frequency.setValueAtTime(r, t), n.frequency.exponentialRampToValueAtTime(l, 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, 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);
       } catch {
       }
   }
@@ -1950,13 +1975,13 @@ class re {
       }
   }
 }
-class ae {
+class le {
   constructor(i, e) {
-    a(this, "element");
-    a(this, "textareaEl");
-    a(this, "errorEl");
-    a(this, "dropzoneEl");
-    a(this, "fileInput");
+    l(this, "element");
+    l(this, "textareaEl");
+    l(this, "errorEl");
+    l(this, "dropzoneEl");
+    l(this, "fileInput");
     this.parentEl = i, this.onApply = e, this.element = document.createElement("div"), this.element.className = "relly-modal-backdrop";
     const t = document.createElement("div");
     t.className = "relly-modal";
@@ -1979,12 +2004,12 @@ class ae {
     }), 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 l = document.createElement("div");
-    l.className = "relly-modal-actions";
+    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 h = document.createElement("button");
-    h.className = "relly-btn relly-btn-primary", h.textContent = "Apply & Load", h.style.flex = "2", h.addEventListener("click", () => this.apply()), l.appendChild(o), l.appendChild(h), t.appendChild(l), 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()), a.appendChild(o), a.appendChild(h), t.appendChild(a), this.element.appendChild(t), this.element.addEventListener("click", (c) => {
       c.target === this.element && this.hide();
     }), this.parentEl.appendChild(this.element);
   }
@@ -2023,24 +2048,24 @@ class ae {
     this.element.remove();
   }
 }
-class le {
+class ae {
   static load(i, e) {
     const t = e.target, n = (s, r) => {
-      for (const l of r) {
-        const o = l.children || l.controls;
-        if (l.type === "section") {
+      for (const a of r) {
+        const o = a.children || a.controls;
+        if (a.type === "section") {
           const h = s.addSection(
-            l.label || "Section",
-            l.collapsed
+            a.label || "Section",
+            a.collapsed
           );
-          l.showIf && h.showIf && h.showIf(l.showIf), o && Array.isArray(o) && n(h, o);
-        } else if (l.type === "row") {
+          a.showIf && h.showIf && h.showIf(a.showIf), o && Array.isArray(o) && n(h, o);
+        } else if (a.type === "row") {
           const h = s.addRow();
           o && Array.isArray(o) && n(h, o);
         } else {
           const h = {
-            ...l,
-            object: l.object !== void 0 ? l.object : t
+            ...a,
+            object: a.object !== void 0 ? a.object : t
           };
           s.createComponent(h);
         }
@@ -2051,7 +2076,7 @@ class le {
 }
 class oe {
   constructor(i, e) {
-    a(this, "containerEl");
+    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);
   }
   notify(i, e = "info", t = 2600) {
@@ -2063,14 +2088,14 @@ 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 l = document.createElement("button");
-    l.className = "relly-toast-close", l.innerHTML = "✕", l.title = "Dismiss", n.appendChild(s), n.appendChild(r), n.appendChild(l);
+    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 = () => {
       n.classList.contains("relly-toast-leave") || (n.classList.add("relly-toast-leave"), setTimeout(() => {
         n.parentElement && n.parentElement.removeChild(n);
       }, 200));
     };
-    return l.addEventListener("click", (c) => {
+    return a.addEventListener("click", (c) => {
       c.stopPropagation(), o();
     }), n.addEventListener("click", o), this.containerEl.appendChild(n), requestAnimationFrame(() => {
       n.classList.add("relly-toast-enter");
@@ -2095,11 +2120,11 @@ class oe {
 }
 class he {
   constructor(i, e) {
-    a(this, "menuEl");
-    a(this, "currentComponent");
-    a(this, "onDocClickBound");
-    a(this, "onKeyDownBound");
-    a(this, "onContextMenu", (i) => {
+    l(this, "menuEl");
+    l(this, "currentComponent");
+    l(this, "onDocClickBound");
+    l(this, "onKeyDownBound");
+    l(this, "onContextMenu", (i) => {
       let e = i.target, t = e == null ? void 0 : e.closest(".relly-row, .relly-graph-row");
       if (!t) return;
       const n = t.__rellyComponent, s = n == null ? void 0 : n.getContextMenu();
@@ -2121,17 +2146,19 @@ class he {
       }
       const c = document.createElement("button");
       c.type = "button", c.className = "relly-context-item", h.danger && c.classList.add("relly-context-item--danger"), h.disabled && (c.disabled = !0);
-      let u = "";
-      h.icon && (u = `<span class="relly-context-icon">${h.icon}</span>`), c.innerHTML = `${u}<span class="relly-context-label">${h.label}</span>`, c.addEventListener("click", (p) => {
-        var d;
-        p.stopPropagation(), (d = this.soundEngine) == null || d.playClick(), this.hide(), h.action(this.currentComponent);
+      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();
+        const d = this.currentComponent;
+        this.hide(), h.action(d);
       }), this.menuEl.appendChild(c);
     }
     this.menuEl.style.display = "flex";
     const n = this.panelEl.getBoundingClientRect();
     let s = e - n.left, r = t - n.top;
-    const l = 160, o = this.menuEl.offsetHeight || 120;
-    s + l > n.width && (s = Math.max(4, n.width - l - 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 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`;
   }
   hide() {
     this.menuEl.style.display = "none", this.currentComponent = void 0;
@@ -2145,8 +2172,8 @@ class ce extends T {
     const r = document.createElement("div");
     r.className = "relly-tab-content";
     super(r, t, n, s);
-    a(this, "contentEl");
-    a(this, "buttonEl");
+    l(this, "contentEl");
+    l(this, "buttonEl");
     this.label = e, this.contentEl = r, this.buttonEl = document.createElement("button"), this.buttonEl.className = "relly-tab-btn", this.buttonEl.textContent = e;
   }
   getLabel() {
@@ -2161,10 +2188,10 @@ class ce extends T {
 }
 class de {
   constructor(i, e, t, n, s) {
-    a(this, "barEl");
-    a(this, "bodyEl");
-    a(this, "tabs", []);
-    a(this, "activeTab", null);
+    l(this, "barEl");
+    l(this, "bodyEl");
+    l(this, "tabs", []);
+    l(this, "activeTab", null);
     this.bindingEngine = t, this.presetManager = n, this.soundEngine = s, this.barEl = document.createElement("div"), this.barEl.className = "relly-tabs-bar", this.barEl.style.display = "none", this.bodyEl = e, i.insertAdjacentElement("afterend", this.barEl);
   }
   addTab(i) {
@@ -2183,6 +2210,9 @@ class de {
   getActiveTab() {
     return this.activeTab;
   }
+  getTabs() {
+    return this.tabs;
+  }
   destroy() {
     for (const i of this.tabs)
       i.destroy();
@@ -2190,20 +2220,21 @@ class de {
   }
 }
 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 $(y) {
+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 e = document.createElement("style");
   e.id = I, e.textContent = me, "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 G(), s = new W(), r = new re(e.sound !== !1, e.soundPack || "synth"), l = document.createElement("div");
-    l.className = "relly-panel";
+    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 (l.style.width = typeof o == "number" ? `${o}px` : o, e.height) {
-      const x = e.height;
-      l.style.height = typeof x == "number" ? `${x}px` : x;
+    if (a.style.width = typeof o == "number" ? `${o}px` : o, e.height) {
+      const b = e.height;
+      a.style.height = typeof b == "number" ? `${b}px` : b;
     }
     const h = document.createElement("div");
     h.className = "relly-header";
@@ -2215,8 +2246,8 @@ const S = class S extends T {
         <line x1="9" y1="21" x2="9" y2="9"></line>
       </svg>
     `;
-    const u = document.createElement("span");
-    u.textContent = e.title || "RellyUI", c.appendChild(u);
+    const m = document.createElement("span");
+    m.textContent = e.title || "RellyUI", c.appendChild(m);
     const p = document.createElement("div");
     p.className = "relly-header-actions";
     const d = document.createElement("button");
@@ -2226,69 +2257,71 @@ 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 g = document.createElement("button");
-    g.className = "relly-header-btn", g.title = "Import settings from JSON", g.innerHTML = `
+    const f = document.createElement("button");
+    f.className = "relly-header-btn", f.title = "Import settings from JSON", f.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(g);
-    const b = document.createElement("button");
-    b.className = "relly-header-btn relly-minihud-btn", b.title = "Toggle Mini-HUD pill (or double-click header)", b.textContent = "⤢", p.appendChild(b);
-    const m = document.createElement("button");
-    m.className = "relly-header-btn", m.title = "Collapse/Expand", m.textContent = "_", p.appendChild(m), h.appendChild(c), h.appendChild(p), l.appendChild(h);
+    `, p.appendChild(f);
+    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);
     const v = document.createElement("div");
-    v.className = "relly-copy-toast", v.textContent = "JSON Copied!", l.appendChild(v);
+    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"), l.appendChild(E);
+    E.className = "relly-body", e.height && (E.style.maxHeight = "none", E.style.flex = "1"), a.appendChild(E);
     super(E, n, s, r);
-    a(this, "hostEl");
-    a(this, "shadowRoot", null);
-    a(this, "panelEl");
-    a(this, "headerEl");
-    a(this, "titleEl");
-    a(this, "collapseBtn");
-    a(this, "copyToastEl");
-    a(this, "themeManager");
-    a(this, "soundEngine");
-    a(this, "draggableInstance");
-    a(this, "resizableInstance");
-    a(this, "hotkeyInstance");
-    a(this, "searchBarInstance");
-    a(this, "tabsManagerInstance");
-    a(this, "importModalInstance");
-    a(this, "toastManager");
-    a(this, "contextMenuManager");
-    a(this, "isPanelCollapsed", !1);
-    a(this, "isPanelHidden", !1);
-    a(this, "isMiniHud", !1);
-    a(this, "ghostOnIdle", !1);
-    a(this, "idleOpacity", 0.38);
-    a(this, "onResizeBound");
-    a(this, "autoSave", !1);
-    a(this, "autoSaveKey", "relly-ui-session");
-    a(this, "autoSaveTimeout", null);
-    a(this, "sparklineCtx");
-    a(this, "sparklineData", [12, 14, 15, 18, 16, 20, 22, 21, 24, 25, 28, 30]);
-    a(this, "sparklineAnimId");
-    this.panelEl = l, this.headerEl = h, this.titleEl = u, this.collapseBtn = m, 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 ee(this.panelEl, e.theme), this.mount(e, t), e.autoInjectStyles !== !1 && (this.shadowRoot ? $(this.shadowRoot) : $()), e.draggable !== !1 && (this.draggableInstance = new te(this.headerEl, this.panelEl, this.soundEngine)), e.resizable !== !1 && (this.resizableInstance = new ie(this.panelEl)), this.toastManager = new oe(this.panelEl, this.soundEngine), this.contextMenuManager = new he(this.panelEl, this.soundEngine), this.importModalInstance = new ae(this.panelEl, (x) => {
-      this.importJSON(x);
+    l(this, "hostEl");
+    l(this, "shadowRoot", null);
+    l(this, "panelEl");
+    l(this, "headerEl");
+    l(this, "titleEl");
+    l(this, "collapseBtn");
+    l(this, "copyToastEl");
+    l(this, "themeManager");
+    l(this, "soundEngine");
+    l(this, "draggableInstance");
+    l(this, "resizableInstance");
+    l(this, "hotkeyInstance");
+    l(this, "searchBarInstance");
+    l(this, "tabsManagerInstance");
+    l(this, "importModalInstance");
+    l(this, "toastManager");
+    l(this, "contextMenuManager");
+    l(this, "isPanelCollapsed", !1);
+    l(this, "isPanelHidden", !1);
+    l(this, "isMiniHud", !1);
+    l(this, "ghostOnIdle", !1);
+    l(this, "idleOpacity", 0.38);
+    l(this, "onResizeBound");
+    l(this, "autoSave", !1);
+    l(this, "autoSaveKey", "relly-ui-session");
+    l(this, "autoSaveTimeout", null);
+    l(this, "sparklineCtx");
+    l(this, "sparklineData", [16, 17, 18, 17, 19, 20, 21, 20, 22, 23, 22, 24, 25, 24, 25, 26]);
+    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.importJSON(b);
     });
-    const f = e.hotkey === void 0 ? "KeyH" : e.hotkey;
-    f && (this.hotkeyInstance = new ne(f, () => {
+    const g = e.hotkey === void 0 ? "KeyH" : e.hotkey;
+    g && (this.hotkeyInstance = new $(g, () => {
       this.toggle();
-    })), b.addEventListener("click", (x) => {
-      x.stopPropagation(), this.toggleMiniHud();
-    }), this.headerEl.addEventListener("dblclick", (x) => {
-      x.target.closest(".relly-header-btn") || this.toggleMiniHud();
-    }), this.collapseBtn.addEventListener("click", (x) => {
-      x.stopPropagation(), this.soundEngine.playClick(), this.toggleCollapse();
-    }), d.addEventListener("click", (x) => {
-      x.stopPropagation(), this.soundEngine.playClick(), this.copyJSON();
-    }), g.addEventListener("click", (x) => {
+    })), x.addEventListener("click", (b) => {
+      b.stopPropagation(), this.toggleMiniHud();
+    }), this.headerEl.addEventListener("dblclick", (b) => {
+      b.target.closest(".relly-header-btn") || this.toggleMiniHud();
+    }), this.collapseBtn.addEventListener("click", (b) => {
+      b.stopPropagation(), this.soundEngine.playClick(), this.toggleCollapse();
+    }), d.addEventListener("click", (b) => {
+      b.stopPropagation(), this.soundEngine.playClick(), this.copyJSON();
+    }), f.addEventListener("click", (b) => {
       var w;
-      x.stopPropagation(), this.soundEngine.playClick(), (w = this.importModalInstance) == null || w.show();
+      b.stopPropagation(), this.soundEngine.playClick(), (w = this.importModalInstance) == null || w.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", () => {
@@ -2355,7 +2388,7 @@ const S = class S extends T {
     return this;
   }
   loadSchema(e) {
-    return e.title && this.setTitle(e.title), le.load(this, e), this;
+    return e.title && this.setTitle(e.title), ae.load(this, e), this;
   }
   setTitle(e) {
     return this.titleEl.textContent = e, this;
@@ -2396,30 +2429,51 @@ const S = class S extends T {
   initSparkline(e) {
     const t = document.createElement("canvas");
     t.className = "relly-mini-sparkline", t.width = 48, t.height = 16, e.appendChild(t), this.sparklineCtx = t.getContext("2d");
-    const n = () => {
-      this.isMiniHud && this.sparklineCtx && this.drawSparkline(), typeof requestAnimationFrame < "u" && (this.sparklineAnimId = requestAnimationFrame(n));
+    const n = (s) => {
+      this.isMiniHud && this.sparklineCtx && (!this.lastSparklineTime || s - this.lastSparklineTime >= this.sparklineInterval) && (this.lastSparklineTime = s, this.updateSparklinePoint(), this.drawSparkline()), typeof requestAnimationFrame < "u" && (this.sparklineAnimId = requestAnimationFrame(n));
     };
     typeof requestAnimationFrame < "u" && (this.sparklineAnimId = requestAnimationFrame(n));
   }
+  findActiveGraphValue() {
+    for (const e of this.children)
+      if (typeof e.getLatestValue == "function")
+        return e.getLatestValue();
+    if (this.tabsManagerInstance) {
+      for (const e of this.tabsManagerInstance.getTabs())
+        for (const t of e.children || [])
+          if (typeof t.getLatestValue == "function")
+            return t.getLatestValue();
+    }
+    return null;
+  }
+  updateSparklinePoint() {
+    let e;
+    const t = this.findActiveGraphValue();
+    if (t !== null && !isNaN(t) && isFinite(t))
+      e = t;
+    else {
+      const n = this.sparklineData[this.sparklineData.length - 1] ?? 20;
+      e = Math.max(8, Math.min(28, n + (Math.random() - 0.49) * 2.2));
+    }
+    this.sparklineData.push(e), this.sparklineData.length > 20 && this.sparklineData.shift();
+  }
   drawSparkline() {
     const e = this.sparklineCtx;
     if (!e) return;
     const t = 48, n = 16;
-    e.clearRect(0, 0, t, n);
-    const s = this.sparklineData[this.sparklineData.length - 1], r = Math.max(8, Math.min(26, s + (Math.random() - 0.48) * 3));
-    this.sparklineData.push(r), this.sparklineData.length > 14 && this.sparklineData.shift();
-    const l = Math.min(...this.sparklineData) - 1, h = Math.max(...this.sparklineData) + 1 - l || 1, c = t / (this.sparklineData.length - 1);
+    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);
     e.beginPath(), e.moveTo(0, n);
-    for (let u = 0; u < this.sparklineData.length; u++) {
-      const p = u * c, d = n - (this.sparklineData[u] - l) / h * (n - 2) - 1;
-      e.lineTo(p, d);
+    for (let h = 0; h < this.sparklineData.length; h++) {
+      const c = h * o, m = n - (this.sparklineData[h] - s) / a * (n - 3) - 1.5;
+      e.lineTo(c, m);
     }
-    e.lineTo(t, n), e.closePath(), e.fillStyle = "rgba(56, 189, 248, 0.25)", e.fill(), e.beginPath();
-    for (let u = 0; u < this.sparklineData.length; u++) {
-      const p = u * c, d = n - (this.sparklineData[u] - l) / h * (n - 2) - 1;
-      u === 0 ? e.moveTo(p, d) : e.lineTo(p, d);
+    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;
+      h === 0 ? e.moveTo(c, m) : e.lineTo(c, m);
     }
-    e.strokeStyle = "#38bdf8", e.lineWidth = 1.4, e.stroke();
+    e.strokeStyle = "#38bdf8", e.lineWidth = 1.3, e.stroke();
   }
   clampToViewport() {
     var e, t;
@@ -2428,6 +2482,9 @@ const S = class S extends T {
   toggleCollapse() {
     return this.setCollapsed(!this.isPanelCollapsed);
   }
+  setHotkey(e) {
+    return this.hotkeyInstance ? this.hotkeyInstance.setHotkey(e) : this.hotkeyInstance = new $(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;
   }
@@ -2518,7 +2575,7 @@ 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();
   }
 };
-a(S, "version", "1.0.0");
+l(S, "version", "1.0.2");
 let k = S;
 Object.assign(k, {
   Checkbox: L,
@@ -2534,62 +2591,62 @@ Object.assign(k, {
   Segmented: j,
   StatusIndicator: F,
   Section: q,
-  Row: K,
+  Row: G,
   Tab: ce,
   TabsManager: de,
   BaseComponent: C,
-  BindingEngine: G,
-  PresetManager: W,
-  ThemeManager: ee,
+  BindingEngine: W,
+  PresetManager: X,
+  ThemeManager: te,
   DARK_THEME: U,
-  LIGHT_THEME: X,
-  CYBERPUNK_THEME: J,
-  NORD_THEME: Y,
-  DRACULA_THEME: _,
-  TOKYO_NIGHT_THEME: Q,
-  MATRIX_THEME: Z,
-  SYNTHWAVE_THEME: O,
-  Draggable: te,
-  Resizable: ie,
-  HotkeyManager: ne,
+  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: ae,
+  ImportModal: le,
   ToastManager: oe,
   ContextMenuManager: he,
-  SchemaLoader: le,
+  SchemaLoader: ae,
   ContainerHelper: T,
   RellyUI: k
 });
 typeof window < "u" && (window.RellyUI = k);
 export {
   C as BaseComponent,
-  G as BindingEngine,
+  W as BindingEngine,
   A as Button,
-  J as CYBERPUNK_THEME,
+  Y as CYBERPUNK_THEME,
   L as Checkbox,
   R as ColorPicker,
   T as ContainerHelper,
   he as ContextMenuManager,
   U as DARK_THEME,
-  _ as DRACULA_THEME,
-  te as Draggable,
+  Q as DRACULA_THEME,
+  ie as Draggable,
   B as DynamicLabel,
   N as Graph,
-  ne as HotkeyManager,
-  ae as ImportModal,
-  X as LIGHT_THEME,
-  Z as MATRIX_THEME,
-  Y as NORD_THEME,
+  $ as HotkeyManager,
+  le as ImportModal,
+  J as LIGHT_THEME,
+  O as MATRIX_THEME,
+  _ as NORD_THEME,
   P as Point2D,
   D as Point3D,
-  W as PresetManager,
+  X as PresetManager,
   H as RangeSlider,
   k as RellyUI,
-  ie as Resizable,
-  K as Row,
-  O as SYNTHWAVE_THEME,
-  le as SchemaLoader,
+  ne as Resizable,
+  G as Row,
+  ee as SYNTHWAVE_THEME,
+  ae as SchemaLoader,
   se as SearchBar,
   q as Section,
   j as Segmented,
@@ -2597,10 +2654,10 @@ export {
   V as Slider,
   re as SoundEngine,
   F as StatusIndicator,
-  Q as TOKYO_NIGHT_THEME,
+  Z as TOKYO_NIGHT_THEME,
   ce as Tab,
   de as TabsManager,
-  ee as ThemeManager,
+  te as ThemeManager,
   oe as ToastManager,
   k as default
 };