perfect-gui 4.12.0 → 4.12.4

package/dist/{perfect-gui.mjs → perfect-gui.js}

@@ -1,78 +1,265 @@
-class R {
-  constructor(e, t = {}, i) {
-    if (this.parent = e, this.propReferences = [], typeof t != "object")
-      throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);
-    let l = typeof t.label == "string" && t.label || " ";
+let F = class {
+  constructor(t, e = {}, i) {
+    this.parent = t;
+    let s = "";
+    typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("label")) ? s = e.label == "" ? " " : e.label : s = " " : s = e == "" ? " " : e;
+    const l = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, a = document.createElement("div");
+    return a.className = "p-gui__button", a.textContent = s, l && a.setAttribute("title", l), a.addEventListener("click", () => {
+      i && i(), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    }), typeof e.color == "string" && (a.style.setProperty("--color-accent", e.color), a.style.setProperty("--color-accent-hover", e.hoverColor || e.color)), this.parent.wrapper.append(a), a;
+  }
+};
+class M {
+  constructor(t, e = {}, i) {
+    if (this.parent = t, this.propReferences = [], typeof e != "object")
+      throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);
+    let s = typeof e.label == "string" && e.label || " ";
     this.isObject = !1;
-    let s = null;
-    this.obj = t.obj, this.prop = t.prop;
-    let o = typeof t.value == "number" ? t.value : null;
-    if (this.min = t.min ?? 0, this.max = t.max ?? 1, this.step = t.step || (this.max - this.min) / 100, this.decimals = this.parent._countDecimals(this.step), this.callback = typeof i == "function" ? i : null, o !== null)
+    let l = null;
+    this.obj = e.obj, this.prop = e.prop;
+    let a = typeof e.value == "number" ? e.value : null;
+    if (this.min = e.min ?? 0, this.max = e.max ?? 1, this.step = e.step || (this.max - this.min) / 100, this.decimals = this.parent._countDecimals(this.step), this.callback = typeof i == "function" ? i : null, a !== null)
       (this.prop != null || this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (this.prop != null && this.obj != null) {
       if (typeof this.prop != "string")
         throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);
       if (typeof this.obj != "object")
         throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);
-      l == " " && (l = this.prop), s = this.propReferences.push(this.obj[this.prop]) - 1, this.isObject = !0;
+      s == " " && (s = this.prop), l = this.propReferences.push(this.obj[this.prop]) - 1, this.isObject = !0;
     } else
-      (this.prop != null && this.obj == null || this.prop == null && this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), o = (this.max - this.min) / 2;
-    const r = typeof t.tooltip == "string" ? t.tooltip : t.tooltip === !0 ? l : null;
-    this.imageContainer = null;
-    const n = document.createElement("div");
-    n.className = "p-gui__slider", r && n.setAttribute("title", r);
-    const c = document.createElement("div");
-    c.className = "p-gui__slider-name", c.textContent = l, n.append(c), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), n.append(this.ctrlDiv);
-    const a = document.createElement("div");
-    return a.className = "p-gui__slider-bar", this.ctrlDiv.append(a), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", a.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : o, n.append(this.valueInput), setTimeout(() => {
-      const d = this.handle.offsetWidth;
-      this.handle.position = this._mapLinear(this.valueInput.value, this.min, this.max, d / 2, 88 - d / 2), this.handle.position = Math.min(this.handle.position, 88 - d / 2), this.handle.position = Math.max(this.handle.position, d / 2), this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`, this.filling.style.width = `${this.handle.position}px`;
+      (this.prop != null && this.obj == null || this.prop == null && this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), a = (this.max - this.min) / 2;
+    const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, r = document.createElement("div");
+    r.className = "p-gui__slider", o && r.setAttribute("title", o), this.parent.wrapper.append(r);
+    const p = document.createElement("div");
+    p.className = "p-gui__slider-name", p.textContent = s, r.append(p), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), r.append(this.ctrlDiv);
+    const u = document.createElement("div");
+    return u.className = "p-gui__slider-bar", this.ctrlDiv.append(u), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", u.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : a, r.append(this.valueInput), setTimeout(() => {
+      const n = this.handle.offsetWidth;
+      this.handle.position = this._mapLinear(this.valueInput.value, this.min, this.max, n / 2, 88 - n / 2), this.handle.position = Math.min(this.handle.position, 88 - n / 2), this.handle.position = Math.max(this.handle.position, n / 2), this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`, this.filling.style.width = `${this.handle.position}px`;
     }, 0), this.valueInput.addEventListener("change", () => {
       this._updateHandlePositionFromValue(), this._triggerCallbacks();
-    }), this.ctrlDiv.addEventListener("pointerdown", (d) => {
-      this.ctrlDiv.pointerDown = !0, this.ctrlDiv.prevPosition = d.clientX, this._updateHandlePositionFromPointer(d, !0);
-    }), window.addEventListener("pointerup", (d) => {
+    }), this.ctrlDiv.addEventListener("pointerdown", (n) => {
+      this.ctrlDiv.pointerDown = !0, this.ctrlDiv.prevPosition = n.clientX, this._updateHandlePositionFromPointer(n, !0);
+    }), window.addEventListener("pointerup", (n) => {
       this.ctrlDiv.pointerDown = !1;
-    }), window.addEventListener("pointermove", (d) => {
-      this.ctrlDiv.pointerDown && (this.ctrlDiv.pointerDelta = d.clientX - this.ctrlDiv.prevPosition, this._updateHandlePositionFromPointer(d));
+    }), window.addEventListener("pointermove", (n) => {
+      this.ctrlDiv.pointerDown && (this.ctrlDiv.pointerDelta = n.clientX - this.ctrlDiv.prevPosition, this._updateHandlePositionFromPointer(n));
     }), this.isObject && Object.defineProperty(this.obj, this.prop, {
-      set: (d) => {
-        this.propReferences[s] = d, this.valueInput.value = d, this._updateHandlePositionFromValue(), this.callback && this.callback(parseFloat(this.valueInput.value));
+      set: (n) => {
+        this.propReferences[l] = n, this.valueInput.value = n, this._updateHandlePositionFromValue(), this.callback && this.callback(parseFloat(this.valueInput.value));
       },
-      get: () => this.propReferences[s]
-    }), n;
+      get: () => this.propReferences[l]
+    }), r;
   }
-  _updateHandlePositionFromPointer(e, t = !1) {
-    const i = this.ctrlDiv.offsetWidth, l = this.handle.offsetWidth, s = e.clientX - this.ctrlDiv.prevPosition, o = parseFloat(this.valueInput.value);
-    let r;
-    t ? r = e.offsetX : r = this.handle.position + s, r = Math.max(l / 2, Math.min(r, i - l / 2));
-    let n = this.min + (this.max - this.min) * (r - l / 2) / (i - l);
-    n > o ? n = this._quantizeFloor(n, this.step) : n = this._quantizeCeil(n, this.step), n = parseFloat(n.toFixed(9));
-    const c = parseFloat((o + this.step).toFixed(9)), a = parseFloat((o - this.step).toFixed(9));
-    (n >= c || n <= a) && (n = n.toFixed(this.decimals), this.valueInput.value = n, this.ctrlDiv.prevPosition = e.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${r}px)`, this.handle.position = r, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
+  _updateHandlePositionFromPointer(t, e = !1) {
+    const i = this.ctrlDiv.offsetWidth, s = this.handle.offsetWidth, l = t.clientX - this.ctrlDiv.prevPosition, a = parseFloat(this.valueInput.value);
+    let o;
+    e ? o = t.offsetX : o = this.handle.position + l, o = Math.max(s / 2, Math.min(o, i - s / 2));
+    let r = this.min + (this.max - this.min) * (o - s / 2) / (i - s);
+    r > a ? r = this._quantizeFloor(r, this.step) : r = this._quantizeCeil(r, this.step), r = parseFloat(r.toFixed(9));
+    const p = parseFloat((a + this.step).toFixed(9)), u = parseFloat((a - this.step).toFixed(9));
+    (r >= p || r <= u) && (r = r.toFixed(this.decimals), this.valueInput.value = r, this.ctrlDiv.prevPosition = t.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${o}px)`, this.handle.position = o, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
   }
   _updateHandlePositionFromValue() {
-    const e = this.ctrlDiv.offsetWidth, t = this.handle.offsetWidth;
-    let i = this._mapLinear(this.valueInput.value, this.min, this.max, t / 2, e - t / 2);
-    i = Math.max(t / 2, Math.min(i, e - t / 2)), this.handle.style.transform = `translate(-50%, -50%) translateX(${i}px)`, this.handle.position = i, this.filling.style.width = this.handle.position + "px";
+    const t = this.ctrlDiv.offsetWidth, e = this.handle.offsetWidth;
+    let i = this._mapLinear(this.valueInput.value, this.min, this.max, e / 2, t - e / 2);
+    i = Math.max(e / 2, Math.min(i, t - e / 2)), this.handle.style.transform = `translate(-50%, -50%) translateX(${i}px)`, this.handle.position = i, this.filling.style.width = this.handle.position + "px";
   }
   _triggerCallbacks() {
     this.isObject ? this.obj[this.prop] = parseFloat(this.valueInput.value) : this.callback && this.callback(parseFloat(this.valueInput.value)), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
   }
-  _mapLinear(e, t, i, l, s) {
-    return l + (e - t) * (s - l) / (i - t);
+  _mapLinear(t, e, i, s, l) {
+    return s + (t - e) * (l - s) / (i - e);
   }
-  _quantize(e, t) {
-    return t * Math.round(e / t);
+  _quantize(t, e) {
+    return e * Math.round(t / e);
   }
-  _quantizeCeil(e, t) {
-    return t * Math.ceil(e / t);
+  _quantizeCeil(t, e) {
+    return e * Math.ceil(t / e);
   }
-  _quantizeFloor(e, t) {
-    return t * Math.floor(e / t);
+  _quantizeFloor(t, e) {
+    return e * Math.floor(t / e);
   }
 }
-const P = (
+class H {
+  constructor(t, e = {}, i) {
+    if (this.parent = t, typeof e != "object")
+      throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);
+    let s;
+    if (typeof e.path == "string")
+      s = e.path;
+    else
+      throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
+    let l = s.replace(/^.*[\\\/]/, ""), a;
+    e.label == null ? a = l : a = typeof e.label == "string" && e.label || " ";
+    const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? a : null, r = e.selected === !0, p = e.selectionBorder !== !1;
+    let u = "";
+    e.width && (typeof e.width == "number" && (e.width += "px"), u += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), u += `height: ${e.height}; `);
+    const n = document.createElement("div");
+    n.className = "p-gui__image", n.style = "background-image: url(" + s + "); " + u, o && n.setAttribute("title", o), this.parent.imageContainer.append(n), r && p && n.classList.add("p-gui__image--selected");
+    const g = document.createElement("div");
+    return g.className = "p-gui__image-text", g.textContent = a, n.append(g), n.addEventListener("click", () => {
+      let d = n.parentElement.querySelectorAll(".p-gui__image--selected");
+      for (let c = 0; c < d.length; c++)
+        d[c].classList.remove("p-gui__image--selected");
+      p && n.classList.add("p-gui__image--selected"), typeof i == "function" && i({ path: s, text: a }), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    }), n;
+  }
+}
+class N {
+  constructor(t, e = {}, i) {
+    if (this.parent = t, typeof e != "object")
+      throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
+    let s = typeof e.label == "string" && e.label || " ", l = !1, a = null, o = e.obj, r = e.prop, p = typeof e.value == "boolean" ? e.value : null;
+    if (p !== null)
+      (r != null || o != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
+    else if (r != null && o != null) {
+      if (typeof r != "string")
+        throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof r}.`);
+      if (typeof o != "object")
+        throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);
+      s == " " && (s = r), a = this.parent.propReferences.push(o[r]) - 1, l = !0;
+    } else
+      (r != null && o == null || r == null && o == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
+    const u = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, n = document.createElement("div");
+    n.textContent = s, n.className = "p-gui__toggle", u && n.setAttribute("title", u), n.addEventListener("click", (c) => {
+      const h = c.target.childNodes[1];
+      let f = !0;
+      h.classList.contains("p-gui__toggle-checkbox--active") && (f = !1), h.classList.toggle("p-gui__toggle-checkbox--active"), l ? o[r] = f : typeof i == "function" && i(f), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    });
+    let g = (() => l ? o[r] ? " p-gui__toggle-checkbox--active" : "" : p ? " p-gui__toggle-checkbox--active" : "")();
+    const d = document.createElement("div");
+    return d.className = "p-gui__toggle-checkbox" + g, n.append(d), l && Object.defineProperty(o, r, {
+      set: (c) => {
+        this.parent.propReferences[a] = c, c ? d.classList.add("p-gui__toggle-checkbox--active") : d.classList.remove("p-gui__toggle-checkbox--active"), typeof i == "function" && i(c);
+      },
+      get: () => this.parent.propReferences[a]
+    }), n;
+  }
+}
+class X {
+  constructor(t, e = {}, i) {
+    if (this.parent = t, typeof e != "object")
+      throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
+    let s = typeof e.label == "string" ? e.label : " ", l = !1, a = null, o = e.obj, r = e.prop, p = Array.isArray(e.values) ? e.values : null, u, n = typeof p[0] != "string";
+    const g = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null;
+    if (i = typeof i == "function" ? i : null, e.value !== void 0 || e.value === void 0 && o === void 0 && r === void 0)
+      (r != null || o != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), u = (() => {
+        if (!p)
+          return null;
+        if (typeof e.value == "string")
+          return p.indexOf(e.value);
+        if (typeof e.value == "number")
+          return e.value;
+      })();
+    else if (r != null && o != null) {
+      if (typeof r != "string")
+        throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof r}.`);
+      if (typeof o != "object")
+        throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);
+      u = (() => {
+        if (!p)
+          return null;
+        if (typeof o[r] == "string")
+          return n ? p.find((h) => h.value === o[r]).value : p.indexOf(o[r]);
+        if (typeof o[r] == "number")
+          return n ? p.find((h) => h.value === o[r]).value : o[r];
+      })(), a = this.parent.propReferences.push(o[r]) - 1, l = !0;
+    } else
+      (r != null && o == null || r == null && o == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
+    let d = document.createElement("div");
+    d.className = "p-gui__list", d.textContent = s, g && d.setAttribute("title", g), this.parent.wrapper.append(d);
+    let c = document.createElement("select");
+    return d.append(c), c.className = "p-gui__list-dropdown", c.addEventListener("change", (h) => {
+      l ? o[r] = h.target.value : i && i(h.target.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    }), p && p.forEach((h, f) => {
+      const b = n ? h.label : h, v = n ? h.value : h;
+      let m = document.createElement("option");
+      m.setAttribute("value", v), m.textContent = b, c.append(m), (!n && u == f || n && u == v) && m.setAttribute("selected", "");
+    }), l && Object.defineProperty(o, r, {
+      set: (h) => {
+        let f, b, v;
+        n ? (v = p.find((w) => w.value == h), b = (v == null ? void 0 : v.value) || p[0].value, f = p.indexOf(v)) : (typeof h == "string" && (f = p.indexOf(h), b = h), typeof h == "number" && (f = h, b = p[h])), this.parent.propReferences[a] = n ? b : h;
+        const m = c.querySelector("[selected]");
+        m && m.removeAttribute("selected"), c.querySelectorAll("option")[f].setAttribute("selected", ""), typeof i == "function" && i(n ? v : b, f);
+      },
+      get: () => this.parent.propReferences[a]
+    }), d;
+  }
+}
+class S {
+  constructor(t, e = {}, i) {
+    if (this.parent = t, typeof e != "object")
+      throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);
+    let s = typeof e.label == "string" && e.label || " ", l = !1, a = null, o = e.obj, r = e.prop, p;
+    const u = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null;
+    if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : p = e.value), p || (p = "#000000"), e.value !== void 0)
+      (r != null || o != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
+    else if (r != null && o != null) {
+      if (typeof r != "string")
+        throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof r}.`);
+      if (typeof o != "object")
+        throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);
+      s == " " && (s = r), a = this.parent.propReferences.push(o[r]) - 1, l = !0;
+    } else
+      (r != null && o == null || r == null && o == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
+    const n = document.createElement("div");
+    n.className = "p-gui__color", n.textContent = s, u && n.setAttribute("title", u), this.parent.wrapper.append(n);
+    const g = document.createElement("input");
+    return g.className = "p-gui__color-picker", g.setAttribute("type", "color"), g.value = p, n.append(g), typeof i == "function" && g.addEventListener("input", () => {
+      l ? o[r] = g.value : typeof i == "function" && i(g.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    }), l && Object.defineProperty(o, r, {
+      set: (d) => {
+        this.parent.propReferences[a] = d, g.value = d, typeof i == "function" && i(d);
+      },
+      get: () => this.parent.propReferences[a]
+    }), n;
+  }
+}
+class W {
+  constructor(t, e = {}, i) {
+    if (this.parent = t, typeof e != "object")
+      throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
+    let s = typeof e.label == "string" && e.label || " ";
+    const l = e.x.min ?? 0, a = e.x.max ?? 1, o = e.y.min ?? 0, r = e.y.max ?? 1, p = e.x.step || (a - l) / 100, u = e.y.step || (r - o) / 100, n = this.parent._countDecimals(p), g = this.parent._countDecimals(u), d = e.x.obj, c = e.x.prop, h = this.parent.propReferences.push(d[c]) - 1, f = e.y.obj, b = e.y.prop, v = this.parent.propReferences.push(f[b]) - 1, m = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null;
+    i = typeof i == "function" ? i : null;
+    const w = document.createElement("div");
+    w.className = "p-gui__vector2", w.textContent = s, m && w.setAttribute("title", m), this.parent.wrapper.append(w);
+    const k = document.createElement("div");
+    k.className = "p-gui__vector-value", k.textContent = d[c] + ", " + f[b], w.append(k);
+    const _ = document.createElement("div");
+    _.className = "p-gui__vector2-area", w.append(_), _.addEventListener("click", (x) => {
+      const E = parseFloat(this.parent._mapLinear(x.offsetX, 0, _.clientWidth, l, a)), j = parseFloat(this.parent._mapLinear(x.offsetY, 0, _.clientHeight, r, o));
+      d[c] = E.toFixed(n), f[b] = j.toFixed(g), i && i(d[c], d[b]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    });
+    const U = (x) => {
+      const E = _.getBoundingClientRect(), j = x.clientX - E.left, P = x.clientY - E.top, $ = this.parent._mapLinear(j, 0, _.clientWidth, l, a), O = this.parent._mapLinear(P, 0, _.clientHeight, r, o), D = Math.max(l, Math.min(a, $)), L = Math.max(o, Math.min(r, O));
+      d[c] = parseFloat(D.toFixed(n)), f[b] = parseFloat(L.toFixed(g)), i && i(d[c], f[b]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
+    };
+    _.addEventListener("pointerdown", (x) => {
+      U(x), document.addEventListener("pointermove", U), document.addEventListener("pointerup", () => {
+        document.removeEventListener("pointermove", U);
+      }, { once: !0 });
+    });
+    const C = document.createElement("div");
+    C.className = "p-gui__vector2-line p-gui__vector2-line-x", _.append(C);
+    const R = document.createElement("div");
+    R.className = "p-gui__vector2-line p-gui__vector2-line-y", _.append(R);
+    const A = document.createElement("div");
+    return A.className = "p-gui__vector2-dot", _.append(A), A.style.left = this.parent._mapLinear(d[c], l, a, 0, _.clientWidth) + "px", A.style.top = this.parent._mapLinear(f[b], o, r, _.clientHeight, 0) + "px", Object.defineProperty(d, c, {
+      set: (x) => {
+        this.parent.propReferences[h] = x, A.style.left = this.parent._mapLinear(x, l, a, 0, _.clientWidth) + "px", k.textContent = String(x) + ", " + f[b];
+      },
+      get: () => this.parent.propReferences[h]
+    }), Object.defineProperty(f, b, {
+      set: (x) => {
+        this.parent.propReferences[v] = x, A.style.top = this.parent._mapLinear(x, o, r, _.clientHeight, 0) + "px", k.textContent = d[c] + ", " + String(x);
+      },
+      get: () => this.parent.propReferences[v]
+    }), w;
+  }
+}
+const G = (
   /* css */
   `
 .p-gui__button {
@@ -94,7 +281,7 @@ const P = (
     margin-inline: 0;
 }
 `
-), O = (
+), Y = (
   /* css */
   `
 .p-gui__slider {
@@ -147,7 +334,7 @@ const P = (
     position: absolute;
     top: -25%;
     left: 0;
-    height: 150%;
+    height: 100%;
     background: var(--color-accent);
     width: 0;
 }
@@ -157,8 +344,8 @@ const P = (
 }
 
 .p-gui__slider-handle {
-    width: 15px;
-    height: 8px;
+    width: 9px;
+    height: 9px;
     position: absolute;
     top: 50%;
     left: 0;
@@ -189,7 +376,7 @@ const P = (
     outline: none;
 }
 `
-), $ = (
+), B = (
   /* css */
   `
 .p-gui__list {
@@ -231,44 +418,43 @@ const P = (
     background: rgba(255, 255, 255, .1);
 }
 `
-), D = (
+), z = (
   /* css */
   `
-.p-gui__switch {
-    background: rgba(255, 255, 255, .05);
+.p-gui__toggle {
     color: var(--color-text-dark);
     transition: var(--transition) background, var(--transition) color;
 }
 
-.p-gui__switch:hover {
+.p-gui__toggle:hover {
     background: rgba(255, 255, 255, .1);
     color: var(--color-text-light);
 }
 
-.p-gui__folder .p-gui__switch {
+.p-gui__folder .p-gui__toggle {
     margin-inline: 0;
 }
 
-.p-gui__switch-checkbox {
-    width: 5px;
-    height: 5px;
-    background-color: rgba(0, 0, 0, .5);
-    border: 1px solid grey;
+.p-gui__toggle-checkbox {
+    width: 10px;
+    height: 10px;
+    background-color: rgba(255, 255, 255, 0.1);
     position: absolute;
     top: 0;
     right: 10px;
     bottom: 0;
     margin: auto;
-    border-radius: 50%;
+    border-radius: 2px;
     pointer-events: none;
+    transition: .5s all ease;
 }
 
-.p-gui__switch-checkbox--active {
-    background-color: #00ff89;
-    box-shadow: 0 0 7px #00ff89;
+.p-gui__toggle-checkbox--active {
+    background-color: #ddd;
+    box-shadow: 0 0 5px #ddd;
 }
 `
-), F = (
+), V = (
   /* css */
   `
 .p-gui__color {
@@ -306,7 +492,7 @@ const P = (
     border: none;
 }
 `
-), L = (
+), T = (
   /* css */
   `
     .p-gui__vector2 {
@@ -371,7 +557,7 @@ const P = (
         position: absolute;
     }
 `
-), H = (
+), Q = (
   /* css */
   `
     .p-gui__image-container {
@@ -427,13 +613,13 @@ const P = (
         
     }
 `
-), N = (
+), q = (
   /* css */
   `
     .p-gui__folder {
         width: 100%;
         position: relative;
-        background: #333333;
+        background: var(--color-bg);
         overflow: auto;
         margin-bottom: 2px;
         display: flex;
@@ -482,13 +668,13 @@ const P = (
     }
 `
 );
-function M(j) {
+function J(y) {
   return (
     /* css */
     `
     .p-gui {
         --main-border-radius: 3px;
-        --color-bg: #121212;
+        --color-bg: #161616;
         --color-border: #222222;
         --color-border-2: transparent;
         --color-text-light: #ffffff;
@@ -497,7 +683,7 @@ function M(j) {
         --color-accent-hover: #dddddd;
         --transition: .1s linear;
     
-        position: ${j};
+        position: ${y};
         top: 0;
         left: 0;
         transform: translate3d(0,0,0);
@@ -589,7 +775,7 @@ function M(j) {
     
     .p-gui__slider, 
     .p-gui__button, 
-    .p-gui__switch,
+    .p-gui__toggle,
     .p-gui__list,
     .p-gui__vector2,
     .p-gui__color {
@@ -606,45 +792,45 @@ function M(j) {
     
     .p-gui__slider:hover, 
     .p-gui__button:hover, 
-    .p-gui__switch:hover,
+    .p-gui__toggle:hover,
     .p-gui__list:hover,
     .p-gui__vector2:hover,
     .p-gui__color:hover {
         border-color: rgba(255,255,255,.2);
     }   
     
-    ${P}
+    ${G}
     
-    ${H}
+    ${Q}
     
-    ${$}
+    ${B}
     
-    ${D}
+    ${z}
 
-    ${O}
+    ${Y}
     
-    ${F}
+    ${V}
     
-    ${L}
+    ${T}
     
-    ${N}
+    ${q}
 `
   );
 }
-class U {
-  constructor(e = {}) {
-    if (this.firstParent = this, e.container ? (this.container = typeof e.container == "string" ? document.querySelector(e.container) : e.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], e.isFolder) {
-      this._folderConstructor(e.folderOptions);
+class I {
+  constructor(t = {}) {
+    if (this.firstParent = this, t.container ? (this.container = typeof t.container == "string" ? document.querySelector(t.container) : t.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], t.isFolder) {
+      this._folderConstructor(t.folderOptions);
       return;
     }
-    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.label = e != null && typeof e.label == "string" ? e.label : "", this.backgroundColor = e.color || null, this.opacity = e.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${M(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
+    typeof t.onUpdate == "function" && (this.onUpdate = t.onUpdate), this.label = t != null && typeof t.label == "string" ? t.label : "", this.backgroundColor = t.color || null, this.opacity = t.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${J(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable(), this.closed = !1, t.closed && this.toggleClose();
   }
   _styleInstance() {
-    let e = this._getScrollbarWidth(this.container);
-    if (this.screenCorner.x == "left" ? this.xOffset = 0 : this.xOffset = this.container.clientWidth - this.wrapperWidth - e, this.instanceId > 0) {
-      let t = this.container.querySelectorAll(".p-gui");
-      for (let i = 0; i < t.length; i++)
-        this.screenCorner.y == t[i].dataset.cornerY && (this.screenCorner.x == "left" && t[i].dataset.cornerX == "left" ? this.xOffset += t[i].offsetWidth : this.screenCorner.x == "right" && t[i].dataset.cornerX == "right" && (this.xOffset -= t[i].offsetWidth));
+    let t = this._getScrollbarWidth(this.container);
+    if (this.screenCorner.x == "left" ? this.xOffset = 0 : this.xOffset = this.container.clientWidth - this.wrapperWidth - t, this.instanceId > 0) {
+      let e = this.container.querySelectorAll(".p-gui");
+      for (let i = 0; i < e.length; i++)
+        this.screenCorner.y == e[i].dataset.cornerY && (this.screenCorner.x == "left" && e[i].dataset.cornerX == "left" ? this.xOffset += e[i].offsetWidth : this.screenCorner.x == "right" && e[i].dataset.cornerX == "right" && (this.xOffset -= e[i].offsetWidth));
     }
     this.yOffset = 0, this.position = {
       prevX: this.xOffset,
@@ -660,253 +846,88 @@ class U {
             opacity: ${this.opacity};
         }`);
   }
-  _folderConstructor(e) {
-    this.wrapper = e.wrapper, this.isFolder = !0, this.parent = e.parent, this.firstParent = e.firstParent;
+  _folderConstructor(t) {
+    this.wrapper = t.wrapper, this.isFolder = !0, this.parent = t.parent, this.firstParent = t.firstParent;
   }
-  _parseScreenCorner(e) {
-    let t = { x: "right", y: "top" };
-    return e == null || (typeof e != "string" && console.error("[perfect-gui] Position must be a string."), e.includes("left") && (t.x = "left"), e.includes("bottom") && (t.y = "bottom")), t;
+  _parseScreenCorner(t) {
+    let e = { x: "right", y: "top" };
+    return t == null || (typeof t != "string" && console.error("[perfect-gui] Position must be a string."), t.includes("left") && (e.x = "left"), t.includes("bottom") && (e.y = "bottom")), e;
   }
-  _getScrollbarWidth(e) {
-    return e === document.body ? window.innerWidth - document.documentElement.clientWidth : e.offsetWidth - e.clientWidth;
+  _getScrollbarWidth(t) {
+    return t === document.body ? window.innerWidth - document.documentElement.clientWidth : t.offsetWidth - t.clientWidth;
   }
   _handleResize() {
     if (this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), this.initMaxHeight && (this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.wrapper.style.maxHeight = this.maxHeight + "px", this.hasBeenDragged)
       return;
-    let e = this._getScrollbarWidth(this.container);
-    if (this.xOffset = this.screenCorner.x == "left" ? 0 : this.container.clientWidth - this.wrapperWidth - e, this.instanceId > 0) {
-      let t = this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);
-      for (let i = 0; i < t.length && !(parseInt(t[i].id.replace("p-gui-", "")) > this.instanceId); i++)
-        this.screenCorner.y == t[i].dataset.cornerY && (this.screenCorner.x == "left" && t[i].dataset.cornerX == "left" ? this.xOffset += t[i].offsetWidth : this.screenCorner.x == "right" && t[i].dataset.cornerX == "right" && (this.xOffset -= t[i].offsetWidth));
+    let t = this._getScrollbarWidth(this.container);
+    if (this.xOffset = this.screenCorner.x == "left" ? 0 : this.container.clientWidth - this.wrapperWidth - t, this.instanceId > 0) {
+      let e = this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);
+      for (let i = 0; i < e.length && !(parseInt(e[i].id.replace("p-gui-", "")) > this.instanceId); i++)
+        this.screenCorner.y == e[i].dataset.cornerY && (this.screenCorner.x == "left" && e[i].dataset.cornerX == "left" ? this.xOffset += e[i].offsetWidth : this.screenCorner.x == "right" && e[i].dataset.cornerX == "right" && (this.xOffset -= e[i].offsetWidth));
     }
     this.position = { prevX: this.xOffset, prevY: this.yOffset, x: this.xOffset, y: this.yOffset }, this.wrapper.style.transform = `translate3d(${this.position.x}px, ${this.position.y}px, 0)`;
   }
-  _addStyles(e) {
-    this.stylesheet.innerHTML += e;
+  _addStyles(t) {
+    this.stylesheet.innerHTML += t;
   }
   _addWrapper() {
     this.wrapper = document.createElement("div"), this.wrapper.id = "p-gui-" + this.instanceId, this.wrapper.className = "p-gui", this.wrapper.setAttribute("data-lenis-prevent", ""), this.container.append(this.wrapper), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.wrapper.append(this.header);
-    const e = document.createElement("div");
-    e.className = "p-gui__header-close", e.addEventListener("click", this.toggleClose.bind(this)), this.header.append(e);
+    const t = document.createElement("div");
+    t.className = "p-gui__header-close", t.addEventListener("click", this.toggleClose.bind(this)), this.header.append(t);
   }
-  button(e, t) {
-    let i = "";
-    typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("label")) ? i = e.label == "" ? " " : e.label : i = " " : i = e == "" ? " " : e;
-    const l = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    this.imageContainer = null;
-    const s = document.createElement("div");
-    s.className = "p-gui__button", s.textContent = i, l && s.setAttribute("title", l), s.addEventListener("click", () => {
-      t && t(), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), this.wrapper.append(s), typeof e.color == "string" && (s.style.setProperty("--color-accent", e.color), s.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
+  button(t = {}, e) {
+    return this.imageContainer = null, new F(this, t, e);
   }
-  image(e = {}, t) {
-    if (typeof e != "object")
-      throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);
-    let i;
-    if (typeof e.path == "string")
-      i = e.path;
-    else
-      throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
-    let l = i.replace(/^.*[\\\/]/, ""), s;
-    e.label == null ? s = l : s = typeof e.label == "string" && e.label || " ";
-    const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, r = e.selected === !0, n = e.selectionBorder !== !1;
-    let c = "";
-    e.width && (typeof e.width == "number" && (e.width += "px"), c += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), c += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
-    const a = document.createElement("div");
-    a.className = "p-gui__image", a.style = "background-image: url(" + i + "); " + c, o && a.setAttribute("title", o), this.imageContainer.append(a), r && n && a.classList.add("p-gui__image--selected");
-    const d = document.createElement("div");
-    return d.className = "p-gui__image-text", d.textContent = s, a.append(d), a.addEventListener("click", () => {
-      let p = a.parentElement.querySelectorAll(".p-gui__image--selected");
-      for (let h = 0; h < p.length; h++)
-        p[h].classList.remove("p-gui__image--selected");
-      n && a.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: i, text: s }), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), a;
-  }
-  slider(e = {}, t) {
-    const i = new R(this, e, t);
-    this.wrapper.append(i);
-  }
-  toggle(e = {}, t) {
-    if (typeof e != "object")
-      throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.label == "string" && e.label || " ", l = !1, s = null, o = e.obj, r = e.prop, n = typeof e.value == "boolean" ? e.value : null;
-    if (n !== null)
-      (r != null || o != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
-    else if (r != null && o != null) {
-      if (typeof r != "string")
-        throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof r}.`);
-      if (typeof o != "object")
-        throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);
-      i == " " && (i = r), s = this.propReferences.push(o[r]) - 1, l = !0;
-    } else
-      (r != null && o == null || r == null && o == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
-    const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    this.imageContainer = null;
-    const a = document.createElement("div");
-    a.textContent = i, a.className = "p-gui__switch", c && a.setAttribute("title", c), this.wrapper.append(a), a.addEventListener("click", (h) => {
-      const u = h.target.childNodes[1];
-      let f = !0;
-      u.classList.contains("p-gui__switch-checkbox--active") && (f = !1), u.classList.toggle("p-gui__switch-checkbox--active"), l ? o[r] = f : typeof t == "function" && t(f), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    });
-    let d = (() => l ? o[r] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
-    const p = document.createElement("div");
-    p.className = "p-gui__switch-checkbox" + d, a.append(p), l && Object.defineProperty(o, r, {
-      set: (h) => {
-        this.propReferences[s] = h, h ? p.classList.add("p-gui__switch-checkbox--active") : p.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(h);
-      },
-      get: () => this.propReferences[s]
-    });
+  image(t = {}, e) {
+    return this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer)), new H(this, t, e);
   }
-  list(e = {}, t) {
-    if (typeof e != "object")
-      throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.label == "string" ? e.label : " ", l = !1, s = null, o = e.obj, r = e.prop, n = Array.isArray(e.values) ? e.values : null, c, a = typeof n[0] != "string";
-    const d = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    if (t = typeof t == "function" ? t : null, e.value !== void 0 || e.value === void 0 && o === void 0 && r === void 0)
-      (r != null || o != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), c = (() => {
-        if (!n)
-          return null;
-        if (typeof e.value == "string")
-          return n.indexOf(e.value);
-        if (typeof e.value == "number")
-          return e.value;
-      })();
-    else if (r != null && o != null) {
-      if (typeof r != "string")
-        throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof r}.`);
-      if (typeof o != "object")
-        throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);
-      c = (() => {
-        if (!n)
-          return null;
-        if (typeof o[r] == "string")
-          return a ? n.find((u) => u.value === o[r]).value : n.indexOf(o[r]);
-        if (typeof o[r] == "number")
-          return a ? n.find((u) => u.value === o[r]).value : o[r];
-      })(), s = this.propReferences.push(o[r]) - 1, l = !0;
-    } else
-      (r != null && o == null || r == null && o == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
-    this.imageContainer = null;
-    let p = document.createElement("div");
-    p.className = "p-gui__list", p.textContent = i, d && p.setAttribute("title", d), this.wrapper.append(p);
-    let h = document.createElement("select");
-    p.append(h), h.className = "p-gui__list-dropdown", h.addEventListener("change", (u) => {
-      l ? o[r] = u.target.value : t && t(u.target.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), n && n.forEach((u, f) => {
-      const g = a ? u.label : u, x = a ? u.value : u;
-      let v = document.createElement("option");
-      v.setAttribute("value", x), v.textContent = g, h.append(v), (!a && c == f || a && c == x) && v.setAttribute("selected", "");
-    }), l && Object.defineProperty(o, r, {
-      set: (u) => {
-        let f, g, x;
-        a ? (x = n.find((m) => m.value == u), g = (x == null ? void 0 : x.value) || n[0].value, f = n.indexOf(x)) : (typeof u == "string" && (f = n.indexOf(u), g = u), typeof u == "number" && (f = u, g = n[u])), this.propReferences[s] = a ? g : u;
-        const v = h.querySelector("[selected]");
-        v && v.removeAttribute("selected"), h.querySelectorAll("option")[f].setAttribute("selected", ""), typeof t == "function" && t(a ? x : g, f);
-      },
-      get: () => this.propReferences[s]
-    });
+  slider(t = {}, e) {
+    return this.imageContainer = null, new M(this, t, e);
   }
-  color(e = {}, t) {
-    if (typeof e != "object")
-      throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.label == "string" && e.label || " ", l = !1, s = null, o = e.obj, r = e.prop, n;
-    const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : n = e.value), n || (n = "#000000"), e.value !== void 0)
-      (r != null || o != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
-    else if (r != null && o != null) {
-      if (typeof r != "string")
-        throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof r}.`);
-      if (typeof o != "object")
-        throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);
-      i == " " && (i = r), s = this.propReferences.push(o[r]) - 1, l = !0;
-    } else
-      (r != null && o == null || r == null && o == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
+  toggle(t = {}, e) {
     this.imageContainer = null;
-    const a = document.createElement("div");
-    a.className = "p-gui__color", a.textContent = i, c && a.setAttribute("title", c), this.wrapper.append(a);
-    const d = document.createElement("input");
-    d.className = "p-gui__color-picker", d.setAttribute("type", "color"), d.value = n, a.append(d), typeof t == "function" && d.addEventListener("input", () => {
-      l ? o[r] = d.value : typeof t == "function" && t(d.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), l && Object.defineProperty(o, r, {
-      set: (p) => {
-        this.propReferences[s] = p, d.value = p, typeof t == "function" && t(p);
-      },
-      get: () => this.propReferences[s]
-    });
+    const i = new N(this, t, e);
+    return this.wrapper.append(i), i;
   }
-  vector2(e = {}, t) {
-    if (typeof e != "object")
-      throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.label == "string" && e.label || " ";
-    const l = e.x.min ?? 0, s = e.x.max ?? 1, o = e.y.min ?? 0, r = e.y.max ?? 1, n = e.x.step || (s - l) / 100, c = e.y.step || (r - o) / 100, a = this._countDecimals(n), d = this._countDecimals(c), p = e.x.obj, h = e.x.prop, u = this.propReferences.push(p[h]) - 1, f = e.y.obj, g = e.y.prop, x = this.propReferences.push(f[g]) - 1, v = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    t = typeof t == "function" ? t : null, this.imageContainer = null;
-    const m = document.createElement("div");
-    m.className = "p-gui__vector2", m.textContent = i, v && m.setAttribute("title", v), this.wrapper.append(m);
-    const y = document.createElement("div");
-    y.className = "p-gui__vector-value", y.textContent = p[h] + ", " + f[g], m.append(y);
-    const b = document.createElement("div");
-    b.className = "p-gui__vector2-area", m.append(b), b.addEventListener("click", (_) => {
-      const k = parseFloat(this._mapLinear(_.offsetX, 0, b.clientWidth, l, s)), E = parseFloat(this._mapLinear(_.offsetY, 0, b.clientHeight, r, o));
-      p[h] = k.toFixed(a), f[g] = E.toFixed(d), t && t(p[h], p[g]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    });
-    let A = !1;
-    b.addEventListener("pointerdown", (_) => {
-      A = !0;
-    }), b.addEventListener("pointerup", () => {
-      A = !1;
-    }), b.addEventListener("pointermove", (_) => {
-      if (A) {
-        const k = parseFloat(this._mapLinear(_.offsetX, 0, b.clientWidth, l, s)), E = parseFloat(this._mapLinear(_.offsetY, 0, b.clientHeight, r, o));
-        p[h] = k.toFixed(a), f[g] = E.toFixed(d), t && t(p[h], p[g]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-      }
-    });
-    const I = document.createElement("div");
-    I.className = "p-gui__vector2-line p-gui__vector2-line-x", b.append(I);
-    const C = document.createElement("div");
-    C.className = "p-gui__vector2-line p-gui__vector2-line-y", b.append(C);
-    const w = document.createElement("div");
-    w.className = "p-gui__vector2-dot", b.append(w), w.style.left = this._mapLinear(p[h], l, s, 0, b.clientWidth) + "px", w.style.top = this._mapLinear(f[g], o, r, b.clientHeight, 0) + "px", Object.defineProperty(p, h, {
-      set: (_) => {
-        this.propReferences[u] = _, w.style.left = this._mapLinear(_, l, s, 0, b.clientWidth) + "px", y.textContent = String(_) + ", " + f[g];
-      },
-      get: () => this.propReferences[u]
-    }), Object.defineProperty(f, g, {
-      set: (_) => {
-        this.propReferences[x] = _, w.style.top = this._mapLinear(_, o, r, b.clientHeight, 0) + "px", y.textContent = p[h] + ", " + String(_);
-      },
-      get: () => this.propReferences[x]
-    });
+  list(t = {}, e) {
+    return this.imageContainer = null, new X(this, t, e);
   }
-  folder(e = {}) {
-    let t = typeof e.closed == "boolean" ? e.closed : !1, i = e.label || "", l = e.color || null, s = e.maxHeight || null;
+  color(t = {}, e) {
+    return this.imageContainer = null, new S(this, t, e);
+  }
+  vector2(t = {}, e) {
+    return this.imageContainer = null, new W(this, t, e);
+  }
+  folder(t = {}) {
+    let e = typeof t.closed == "boolean" ? t.closed : !1, i = t.label || "", s = t.color || null, l = t.maxHeight || null;
     this.imageContainer = null;
-    let o = "p-gui__folder";
-    this.folders.length == 0 && (o += " p-gui__folder--first"), t && (o += " p-gui__folder--closed");
-    let r = l ? `background-color: ${l};` : "";
-    r += s ? `max-height: ${s}px;` : "";
-    const n = document.createElement("div");
-    n.className = o, n.style = r, this.wrapper.append(n);
-    const c = document.createElement("div");
-    c.innerHTML = `<span class="p-gui__folder-arrow"></span>${i}`, c.className = "p-gui__folder-header", n.append(c), c.addEventListener("click", () => {
-      n.classList.toggle("p-gui__folder--closed");
+    let a = "p-gui__folder";
+    this.folders.length == 0 && (a += " p-gui__folder--first"), e && (a += " p-gui__folder--closed");
+    let o = s ? `background-color: ${s};` : "";
+    o += l ? `max-height: ${l}px;` : "";
+    const r = document.createElement("div");
+    r.className = a, r.style = o, this.wrapper.append(r);
+    const p = document.createElement("div");
+    p.innerHTML = `<span class="p-gui__folder-arrow"></span>${i}`, p.className = "p-gui__folder-header", r.append(p), p.addEventListener("click", () => {
+      r.classList.toggle("p-gui__folder--closed");
     });
-    let a = new U({ isFolder: !0, folderOptions: {
-      wrapper: n,
+    let u = new I({ isFolder: !0, folderOptions: {
+      wrapper: r,
       parent: this,
       firstParent: this.firstParent
     } });
-    return this.folders.push(a), a;
+    return this.folders.push(u), u;
   }
   _makeDraggable() {
-    var e = this;
-    this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", l);
-    function t(s) {
-      s.preventDefault(), e.position.initX = e.position.x, e.position.initY = e.position.y, e.position.prevX = s.clientX, e.position.prevY = s.clientY, document.addEventListener("pointermove", i);
+    var t = this;
+    this.header.addEventListener("pointerdown", e), this.header.addEventListener("pointerup", s);
+    function e(l) {
+      l.preventDefault(), t.position.initX = t.position.x, t.position.initY = t.position.y, t.position.prevX = l.clientX, t.position.prevY = l.clientY, document.addEventListener("pointermove", i);
     }
-    function i(s) {
-      s.preventDefault(), e.hasBeenDragged || (e.hasBeenDragged = !0, e.wrapper.setAttribute("data-dragged", "true")), e.position.x = e.position.initX + s.clientX - e.position.prevX, e.position.y = e.position.initY + s.clientY - e.position.prevY, e.wrapper.style.transform = "translate3d(" + e.position.x + "px," + e.position.y + "px,0)";
+    function i(l) {
+      l.preventDefault(), t.hasBeenDragged || (t.hasBeenDragged = !0, t.wrapper.setAttribute("data-dragged", "true")), t.position.x = t.position.initX + l.clientX - t.position.prevX, t.position.y = t.position.initY + l.clientY - t.position.prevY, t.wrapper.style.transform = "translate3d(" + t.position.x + "px," + t.position.y + "px,0)";
     }
-    function l(s) {
+    function s(l) {
       document.removeEventListener("pointermove", i);
     }
   }
@@ -916,18 +937,18 @@ class U {
   kill() {
     this.wrapper.remove();
   }
-  _mapLinear(e, t, i, l, s) {
-    return l + (e - t) * (s - l) / (i - t);
+  _mapLinear(t, e, i, s, l) {
+    return s + (t - e) * (l - s) / (i - e);
   }
-  _countDecimals(e) {
-    const t = e.toString(), i = t.indexOf(".");
-    return i === -1 ? 0 : t.length - i - 1;
+  _countDecimals(t) {
+    const e = t.toString(), i = e.indexOf(".");
+    return i === -1 ? 0 : e.length - i - 1;
   }
-  static registerPlugin(e) {
-    for (let t in e)
-      U.prototype[t] = e[t];
+  static registerPlugin(t) {
+    for (let e in t)
+      I.prototype[e] = t[e];
   }
 }
 export {
-  U as default
+  I as default
 };