aptechka 0.5.42 → 0.7.0

package/lib/tweaker/index.js

@@ -1,92 +1,103 @@
-var ve = (t, e, r) => {
+var Ke = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
 };
-var d = (t, e, r) => (ve(t, e, "read from private field"), r ? r.call(t) : e.get(t)), H = (t, e, r) => {
+var d = (t, e, r) => (Ke(t, e, "read from private field"), r ? r.call(t) : e.get(t)), B = (t, e, r) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, M = (t, e, r, n) => (ve(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r);
-import { i as xe } from "../browser-0zX67oeU.js";
-import { CustomElement as fe, define as f } from "../custom-element/index.js";
-import { s as y, S as ie, a as P } from "../Store-BQXXikps.js";
-import { c as ke } from "../file-lxi_oXJf.js";
-import { d as Ce } from "../function-C10DGppn.js";
-import { e as p, a0 as re, a as Pe, aB as $e, D as w, p as I, a3 as Oe } from "../tags-CMPg9ETZ.js";
-import { c as m } from "../createStylesheet-DBCEbDjI.js";
-import { a as Me } from "../Viewport-CFFhFKqX.js";
-import { aptechkaTheme as o } from "../theme/index.js";
-import { AccordionElement as Te } from "../accordion/index.js";
-import { a as Ee } from "../index-BtsOv9u0.js";
-import { d as Re } from "../events-_C2CztxR.js";
+}, I = (t, e, r, i) => (Ke(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { i as rt } from "../browser-0zX67oeU.js";
+import { CustomElement as Ge, define as C } from "../custom-element/index.js";
+import { s as O, a as K, S as Ze } from "../Store-BI2xxXOA.js";
+import { c as st } from "../file-lxi_oXJf.js";
+import { d as it } from "../function-C10DGppn.js";
+import { s as Je } from "../gestures-D2Fdra_G.js";
+import { e as f, $ as xe, a as at, D as g, aA as nt, p as te, a2 as ot } from "../tags-BqJKcIve.js";
+import { c as P } from "../createStylesheet-CR_yi5tp.js";
+import { a as lt } from "../Viewport-D9IL7kUQ.js";
+import { aptechkaTheme as h } from "../theme/index.js";
+import { AccordionElement as ht } from "../accordion/index.js";
+import { a as ct } from "../index-BAH_fO2N.js";
+import { d as dt } from "../events-_C2CztxR.js";
 import "../checkbox/index.js";
-import { c as De } from "../math-BOBiC4TN.js";
-const we = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.536 3.464C19.07 2 16.714 2 12 2C7.286 2 4.929 2 3.464 3.464C2 4.93 2 7.286 2 12c0 4.714 0 7.071 1.464 8.535C4.93 22 7.286 22 12 22c4.714 0 7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536M16.75 12a.75.75 0 0 1-.75.75H9.81l1.72 1.72a.75.75 0 1 1-1.06 1.06l-3-3a.75.75 0 0 1 0-1.06l3-3a.75.75 0 1 1 1.06 1.06l-1.72 1.72H16a.75.75 0 0 1 .75.75" clip-rule="evenodd"/></svg>', me = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593c.734-.737 1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.601 3.601 0 0 0 15.24 2Z"/><path  d="M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847c.843.847.843 2.21.843 4.936v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936v-4.82Z"/></svg>', We = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Zm10-5.75a.75.75 0 0 1 .75.75v5.19l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72V7a.75.75 0 0 1 .75-.75Zm-4 10a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H8Z" clip-rule="evenodd"/></svg>', Fe = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Zm10 5.75a.75.75 0 0 0 .75-.75v-5.19l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72V17c0 .414.336.75.75.75Zm-4-10a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5H8Z" clip-rule="evenodd"/></svg>';
-var O, g;
-class ze {
+import { c as pt } from "../math-BOBiC4TN.js";
+import { n as Ve, t as ut } from "../polyfills-X6KXuHg-.js";
+import { elementResizer as He } from "../element-resizer/index.js";
+const Be = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.536 3.464C19.07 2 16.714 2 12 2C7.286 2 4.929 2 3.464 3.464C2 4.93 2 7.286 2 12c0 4.714 0 7.071 1.464 8.535C4.93 22 7.286 22 12 22c4.714 0 7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536M16.75 12a.75.75 0 0 1-.75.75H9.81l1.72 1.72a.75.75 0 1 1-1.06 1.06l-3-3a.75.75 0 0 1 0-1.06l3-3a.75.75 0 1 1 1.06 1.06l-1.72 1.72H16a.75.75 0 0 1 .75.75" clip-rule="evenodd"/></svg>', Xe = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593c.734-.737 1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.601 3.601 0 0 0 15.24 2Z"/><path  d="M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847c.843.847.843 2.21.843 4.936v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936v-4.82Z"/></svg>', gt = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Zm10-5.75a.75.75 0 0 1 .75.75v5.19l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72V7a.75.75 0 0 1 .75-.75Zm-4 10a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H8Z" clip-rule="evenodd"/></svg>', ft = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Zm10 5.75a.75.75 0 0 0 .75-.75v-5.19l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72V17c0 .414.336.75.75.75Zm-4-10a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5H8Z" clip-rule="evenodd"/></svg>';
+var V, k, z;
+class vt {
   constructor() {
-    H(this, O, "");
-    H(this, g, []);
-    M(this, O, y.projectName + "-studio");
+    B(this, V, "");
+    B(this, k, []);
+    B(this, z, {});
+    I(this, V, O.projectName + "-studio");
   }
   openPanel(e) {
-    d(this, g).includes(e) || d(this, g).push(e);
+    d(this, k).includes(e) || d(this, k).push(e);
   }
   closePanel(e) {
-    M(this, g, d(this, g).filter((r) => r !== e));
+    I(this, k, d(this, k).filter((r) => r !== e));
   }
   isPanelOpened(e) {
-    return d(this, g).includes(e);
+    return d(this, k).includes(e);
+  }
+  changedSizes(e) {
+    return d(this, z)[e];
+  }
+  changeSize(e, r) {
+    r ? d(this, z)[e] = r : delete d(this, z)[e];
   }
   save() {
     const e = {
-      openedPanels: d(this, g)
+      openedPanels: d(this, k),
+      changedSizes: d(this, z)
     };
-    localStorage.setItem(d(this, O), JSON.stringify(e)), y.saveState();
+    localStorage.setItem(d(this, V), JSON.stringify(e)), O.saveState();
   }
   load() {
-    y.loadState();
-    const e = localStorage.getItem(d(this, O));
+    O.loadState();
+    const e = localStorage.getItem(d(this, V));
     if (e)
       try {
         const r = JSON.parse(e);
-        r.openedPanels && M(this, g, r.openedPanels);
+        r.openedPanels && I(this, k, r.openedPanels), r.changedSizes && I(this, z, r.changedSizes);
       } catch (r) {
         console.error(r);
       }
   }
 }
-O = new WeakMap(), g = new WeakMap();
-const $ = new ze();
-var S;
-class N extends fe {
+V = new WeakMap(), k = new WeakMap(), z = new WeakMap();
+const S = new vt();
+var W;
+class H extends Ge {
   constructor(...r) {
     super();
-    H(this, S, void 0);
-    M(this, S, r);
+    B(this, W, void 0);
+    I(this, W, r);
   }
   addStore(r) {
-    d(this, S).push(r);
+    d(this, W).push(r);
   }
   get firstStore() {
-    return d(this, S)[0];
+    return d(this, W)[0];
   }
   get stores() {
-    return d(this, S);
+    return d(this, W);
   }
   updateStores(r) {
-    d(this, S).forEach((n) => {
-      n.current = r;
+    d(this, W).forEach((i) => {
+      i.current = r;
     });
   }
 }
-S = new WeakMap();
-var Ae = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, Le = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? Ie(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && Ae(e, r, a), a;
+W = new WeakMap();
+var wt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, bt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? mt(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && wt(e, r, s), s;
 };
-const Ne = m({
+const _t = P({
   ":host": {
     width: "100%",
     display: "inline-flex",
@@ -95,14 +106,14 @@ const Ne = m({
   "e-checkbox": {
     width: "var(--height-input)",
     height: "var(--height-input)",
-    borderRadius: o.borderRadiusSmall.var
+    borderRadius: h.borderRadiusSmall.var
   }
 });
-let oe = class extends N {
+let Ee = class extends H {
   constructor(...t) {
-    super(...t), this.openShadow(Ne), p(this, {
+    super(...t), this.openShadow(_t), f(this, {
       children: [
-        p("e-checkbox", {
+        f("e-checkbox", {
           onChange: (e) => {
             this.updateStores(e.currentTarget.checked);
           },
@@ -116,15 +127,15 @@ let oe = class extends N {
     });
   }
 };
-oe = Le([
-  f("e-tweaker-boolean-manager")
-], oe);
-var Ze = Object.defineProperty, He = Object.getOwnPropertyDescriptor, Ke = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? He(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && Ze(e, r, a), a;
+Ee = bt([
+  C("e-tweaker-boolean-manager")
+], Ee);
+var yt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, kt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? St(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && yt(e, r, s), s;
 };
-const Ge = m({
+const xt = P({
   ":host": {
     width: "100%",
     display: "inline-flex",
@@ -135,7 +146,7 @@ const Ge = m({
     height: "var(--height-input)",
     padding: "0",
     background: "none",
-    borderRadius: o.borderRadius.var,
+    borderRadius: h.borderRadius.var,
     border: "none",
     blockSize: "unset"
   },
@@ -143,15 +154,15 @@ const Ge = m({
     boxSizing: "border-box",
     padding: "0px",
     border: "none",
-    borderRadius: o.borderRadius.var,
+    borderRadius: h.borderRadius.var,
     height: "calc(var(--height-input) * 0.93)"
   }
 });
-let le = class extends N {
+let Oe = class extends H {
   constructor(...t) {
-    super(...t), this.openShadow(Ge), p(this, {
+    super(...t), this.openShadow(xt), f(this, {
       children: [
-        re({
+        xe({
           type: "color",
           value: this.firstStore,
           onInput: (e) => {
@@ -162,25 +173,25 @@ let le = class extends N {
     });
   }
 };
-le = Ke([
-  f("e-tweaker-color-manager")
-], le);
-var Je = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, Ye = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? Ve(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && Je(e, r, a), a;
+Oe = kt([
+  C("e-tweaker-color-manager")
+], Oe);
+var Ct = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, Mt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Pt(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && Ct(e, r, s), s;
 };
-const Be = m({
+const $t = P({
   a: {
     color: "inherit"
   }
 });
-let he = class extends N {
+let ze = class extends H {
   constructor(...t) {
     var e, r;
-    super(...t), this.openShadow(Be), p(this, {
+    super(...t), this.openShadow($t), f(this, {
       children: [
-        Pe({
+        at({
           href: this.firstStore,
           target: (r = (e = this.firstStore.passport) == null ? void 0 : e.manager) != null && r.sameWindow ? "_self" : "_blank",
           children: this.firstStore
@@ -189,26 +200,32 @@ let he = class extends N {
     });
   }
 };
-he = Ye([
-  f("e-tweaker-link-manager")
-], he);
-var qe = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, Ue = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? Qe(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && qe(e, r, a), a;
-}, Xe = (t, e, r) => {
+ze = Mt([
+  C("e-tweaker-link-manager")
+], ze);
+var Et = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, zt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ot(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && Et(e, r, s), s;
+}, Ae = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
-}, ae = (t, e, r) => (Xe(t, e, "read from private field"), r ? r.call(t) : e.get(t)), je = (t, e, r) => {
+}, o = (t, e, r) => (Ae(t, e, "read from private field"), r ? r.call(t) : e.get(t)), p = (t, e, r) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, T;
-const et = m({
+}, M = (t, e, r, i) => (Ae(t, e, "write to private field"), e.set(t, r), r), w = (t, e, r) => (Ae(t, e, "access private method"), r), L, re, Y, E, F, ne, oe, x, Z, le, he, R, N, ce, We, ye, Le, se, Se, de;
+const Wt = P({
   ":host": {
     width: "100%",
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    gap: "var(--gap-small)"
+  },
+  ".inputs-wrapper": {
+    display: "grid",
+    gap: "var(--gap-small)",
+    width: "100%"
   },
   input: {
     boxSizing: "border-box",
@@ -217,165 +234,186 @@ const et = m({
     fontFamily: "inherit",
     color: "inherit",
     border: "none",
-    fontSize: "var(--font-size-small)"
-  },
-  ".text-input": {
-    height: "var(--height-input)",
+    fontSize: "var(--font-size-small)",
     width: "100%",
+    height: "var(--height-input)",
     margin: "0",
     padding: "0 var(--gap-small)",
     backgroundColor: "rgba(255, 255, 255, 0.1)",
-    borderRadius: o.borderRadius.var
+    borderRadius: h.borderRadius.var
+  },
+  ".drag": {
+    position: "relative",
+    width: "100%",
+    height: "calc(var(--height-input) * 0.2)",
+    display: "flex",
+    alignItems: "center"
+  },
+  ".drag::before": {
+    content: '""',
+    position: "absolute",
+    left: "0",
+    width: "100%",
+    zIndex: "-1",
+    height: "1px",
+    borderBottom: `1px solid ${h.colorFont.var}`,
+    transform: "translateY(-50%)",
+    opacity: "0.3"
+  },
+  ":host(.infinite) .drag::before": {
+    borderBottom: `1px dashed ${h.colorFont.var}`
+  },
+  ".drag-knob": {
+    "--size": "calc(var(--height-input) * 0.4)",
+    width: "var(--size)",
+    height: "var(--size)"
+  },
+  ".drag-knob-inner": {
+    width: "100%",
+    height: "100%",
+    backgroundColor: h.colorFont.var,
+    borderRadius: h.borderRadiusSmall.var,
+    transition: "opacity var(--duration-short)"
+  },
+  ":host(.infinite) .grabbing .drag-knob-inner": {
+    opacity: 0.3
   }
 });
-let j = class extends N {
+let Te = class extends H {
   constructor(...t) {
-    super(...t), je(this, T, new ie([])), this.openShadow(et), p(this, {
-      children: [
-        re({
-          class: "text-input",
-          type: "string",
-          value: this.firstStore,
-          onChange: (e) => {
-            this.updateStores(
-              e.currentTarget.value
-            );
-          }
-        }),
-        ae(this, T)
-      ]
+    var e, r, i, s, n, a, T, j;
+    super(...t), p(this, R), p(this, ce), p(this, ye), p(this, se), p(this, L, []), p(this, re, []), p(this, Y, void 0), p(this, E, void 0), p(this, F, void 0), p(this, ne, void 0), p(this, oe, void 0), p(this, x, void 0), p(this, Z, !1), p(this, le, (G) => {
+      const m = w(this, R, N).call(this, G);
+      return m.map((u, J) => {
+        const Ce = typeof u == "string" ? parseFloat(u) || o(this, E) : u, b = pt(Ce, o(this, E), o(this, F)), Pe = ut(b, o(this, Y));
+        m[J] = Pe;
+      }), o(this, oe) === "number" ? m[0] : m;
+    }), p(this, he, () => {
+      w(this, R, N).call(this).map((G, m) => {
+        const u = o(this, L)[m];
+        u && (u.value = G.toString());
+      }), w(this, ce, We).call(this);
+    }), p(this, de, () => {
+      w(this, ce, We).call(this);
+    }), this.openShadow(Wt), M(this, E, Ve(
+      (r = (e = this.firstStore.passport) == null ? void 0 : e.manager) == null ? void 0 : r.min,
+      -1 / 0
+    )), M(this, F, Ve(
+      (s = (i = this.firstStore.passport) == null ? void 0 : i.manager) == null ? void 0 : s.max,
+      1 / 0
+    )), M(this, Y, ((a = (n = this.firstStore.passport) == null ? void 0 : n.manager) == null ? void 0 : a.step) || 0.01), M(this, ne, ((j = (T = this.firstStore.passport) == null ? void 0 : T.manager) == null ? void 0 : j.ease) || 1), M(this, oe, Array.isArray(this.firstStore.current) ? "array" : "number"), M(this, x, isFinite(o(this, F)) && isFinite(o(this, E))), f(this, {
+      class: o(this, x) ? "" : "infinite",
+      children: w(this, R, N).call(this).map((G, m) => g({
+        class: "inputs-wrapper",
+        children: [
+          xe({
+            type: "number",
+            step: o(this, Y),
+            min: o(this, E),
+            max: o(this, F),
+            ref: (u) => o(this, L).push(u),
+            value: G,
+            onChange: () => {
+              this.updateStores(
+                o(this, L).map((u) => parseFloat(u.value))
+              );
+            }
+          }),
+          g({
+            class: "drag",
+            children: [
+              g({
+                class: "drag-knob",
+                ref: (u) => o(this, re).push(u),
+                onPointerdown: (u) => {
+                  u.preventDefault(), M(this, Z, !0);
+                  const J = w(this, R, N).call(this), Ce = J[m], b = o(this, re)[m], Pe = o(this, L)[m];
+                  if (b && Pe) {
+                    const Me = b.parentElement, Qe = w(this, ye, Le).call(this);
+                    Me.classList.add("grabbing"), Je(
+                      ($e) => {
+                        const Ne = $e.x - u.x, Ue = o(this, x) ? Me.offsetWidth / (Qe || 1) : 1, et = Ce + Ne / Ue * o(this, ne);
+                        if (J[m] = et, !o(this, x)) {
+                          const tt = w(this, se, Se).call(this, b, 0);
+                          b.style.transform = `translateX(${tt + Ne}px)`;
+                        }
+                        this.updateStores([...J]);
+                      },
+                      () => {
+                        if (M(this, Z, !1), !o(this, x)) {
+                          const $e = w(this, se, Se).call(this, b, 0);
+                          b.style.transition = "transform 0.1s", b.style.transform = `translateX(${$e}px)`, Me.classList.remove("grabbing"), setTimeout(() => {
+                            b.style.transition = "";
+                          }, 100);
+                        }
+                      }
+                    );
+                  }
+                },
+                children: g({
+                  class: "drag-knob-inner"
+                })
+              })
+            ]
+          })
+        ]
+      }))
     });
   }
-  appendContent(t) {
-    ae(this, T).current = [...ae(this, T).current, t];
-  }
-};
-T = /* @__PURE__ */ new WeakMap();
-j = Ue([
-  f("e-tweaker-string-manager")
-], j);
-var tt = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, at = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? rt(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && tt(e, r, a), a;
-}, be = (t, e, r) => {
-  if (!e.has(t))
-    throw TypeError("Cannot " + r);
-}, _ = (t, e, r) => (be(t, e, "read from private field"), r ? r.call(t) : e.get(t)), K = (t, e, r) => {
-  if (e.has(t))
-    throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, ne = (t, e, r, n) => (be(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), E, R, D, J;
-let ee = class extends j {
-  constructor(...t) {
-    var e, r, n, a, i, s;
-    super(...t), K(this, E, void 0), K(this, R, void 0), K(this, D, void 0), K(this, J, (b) => {
-      const Z = typeof b == "string" ? parseFloat(b) || this.min : b, Se = De(Z, _(this, R), _(this, D));
-      return this.toFixed(Se);
-    }), ne(this, R, ((r = (e = this.firstStore.passport) == null ? void 0 : e.manager) == null ? void 0 : r.min) || 0), ne(this, D, ((a = (n = this.firstStore.passport) == null ? void 0 : n.manager) == null ? void 0 : a.max) || 1), ne(this, E, ((s = (i = this.firstStore.passport) == null ? void 0 : i.manager) == null ? void 0 : s.step) || 0.01);
-  }
-  get min() {
-    return _(this, R);
-  }
-  get max() {
-    return _(this, D);
-  }
-  get step() {
-    return _(this, E);
-  }
-  toFixed(t) {
-    var r;
-    const e = ((r = _(this, E).toString().split(".")[1]) == null ? void 0 : r.length) || 0;
-    return e ? +t.toFixed(e) : Math.ceil(t);
-  }
   connectedCallback() {
-    this.firstStore.addMiddleware(_(this, J));
+    this.firstStore.addMiddleware(o(this, le)), this.firstStore.subscribe(o(this, he)), He.subscribe(this, o(this, de));
   }
   disconnectedCallback() {
-    this.firstStore.removeMiddleware(_(this, J));
+    this.firstStore.removeMiddleware(o(this, le)), this.firstStore.unsubscribe(o(this, he)), He.unsubscribe(o(this, de));
   }
 };
+L = /* @__PURE__ */ new WeakMap();
+re = /* @__PURE__ */ new WeakMap();
+Y = /* @__PURE__ */ new WeakMap();
 E = /* @__PURE__ */ new WeakMap();
-R = /* @__PURE__ */ new WeakMap();
-D = /* @__PURE__ */ new WeakMap();
-J = /* @__PURE__ */ new WeakMap();
-ee = at([
-  f("e-tweaker-number-manager")
-], ee);
-var nt = Object.defineProperty, st = Object.getOwnPropertyDescriptor, it = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? st(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && nt(e, r, a), a;
+F = /* @__PURE__ */ new WeakMap();
+ne = /* @__PURE__ */ new WeakMap();
+oe = /* @__PURE__ */ new WeakMap();
+x = /* @__PURE__ */ new WeakMap();
+Z = /* @__PURE__ */ new WeakMap();
+le = /* @__PURE__ */ new WeakMap();
+he = /* @__PURE__ */ new WeakMap();
+R = /* @__PURE__ */ new WeakSet();
+N = function(t = this.firstStore.current) {
+  return Array.isArray(t) ? t : [t];
 };
-const ot = m({
-  ":host": {
-    width: "100%"
-  },
-  ".text-input": {
-    width: "60px",
-    marginRight: "var(--gap-large)",
-    textAlign: "center"
-  },
-  ".range-input": {
-    boxSizing: "border-box",
-    "-webkit-appearance": "none",
-    height: "8px",
-    width: "100%",
-    margin: "0",
-    padding: "0",
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    borderRadius: o.borderRadius.var
-  },
-  ".range-input::-webkit-slider-thumb": {
-    "-webkit-appearance": "none",
-    height: "calc(var(--height-input) * 0.7)",
-    width: o.borderRadius.var,
-    borderRadius: o.borderRadius.var,
-    backgroundColor: o.colorFont.var,
-    transitionProperty: "background-color",
-    transitionDuration: "var(--duration-short)"
-  },
-  ".range-input:focus::-webkit-slider-thumb": {
-    backgroundColor: o.colorActive.var
-  },
-  ".range-input::-webkit-slider-runnable-track": {
-    "-webkit-appearance": "none",
-    "box-shadow": "none",
-    border: "none",
-    background: "transparent"
-  }
-});
-let ce = class extends ee {
-  constructor(...t) {
-    super(...t), this.addStylesheet(ot), this.appendContent(
-      re({
-        class: "range-input",
-        type: "range",
-        min: this.min,
-        max: this.max,
-        step: this.step,
-        value: this.firstStore,
-        onInput: (e) => {
-          this.updateStores(
-            parseFloat(e.currentTarget.value)
-          );
-        }
-      })
-    );
-  }
+ce = /* @__PURE__ */ new WeakSet();
+We = function() {
+  w(this, R, N).call(this).map((t, e) => {
+    const r = o(this, re)[e];
+    if (r && (!o(this, Z) || o(this, Z) && o(this, x))) {
+      const i = w(this, se, Se).call(this, r, t);
+      r.style.transform = `translateX(${i}px)`;
+    }
+  });
+};
+ye = /* @__PURE__ */ new WeakSet();
+Le = function() {
+  return o(this, x) ? o(this, F) - o(this, E) : 0;
+};
+se = /* @__PURE__ */ new WeakSet();
+Se = function(t, e) {
+  const r = t.parentElement, i = w(this, ye, Le).call(this), s = i ? e / i : 0.5;
+  return (r.offsetWidth - t.offsetWidth) * s;
 };
-ce = it([
-  f("e-tweaker-range-manager")
-], ce);
-var lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, ct = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? ht(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && lt(e, r, a), a;
+de = /* @__PURE__ */ new WeakMap();
+Te = zt([
+  C("e-tweaker-number-manager")
+], Te);
+var Tt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, Ft = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Dt(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && Tt(e, r, s), s;
 };
-const dt = m({
+const Rt = P({
   "e-select": {
     width: "100%",
-    "--arrow-color": o.colorFont.var
+    "--arrow-color": h.colorFont.var
   },
   "e-select-head": {
     width: "100%",
@@ -388,12 +426,12 @@ const dt = m({
     transitionProperty: "color"
   },
   "e-select-option:hover": {
-    color: o.colorActive.var
+    color: h.colorActive.var
   },
   svg: {
     width: "16px",
     height: "16px",
-    fill: o.colorFont.var,
+    fill: h.colorFont.var,
     transitionProperty: "transform",
     transitionDuration: "var(--duration-short)"
   },
@@ -401,29 +439,29 @@ const dt = m({
     transform: "scaleY(-1)"
   }
 });
-let de = class extends N {
+let De = class extends H {
   constructor(...t) {
-    var r, n;
-    super(...t), this.openShadow(dt);
-    const e = ((n = (r = this.firstStore.passport) == null ? void 0 : r.manager) == null ? void 0 : n.variants) || [];
-    p(this, {
-      children: p("e-select", {
+    var r, i;
+    super(...t), this.openShadow(Rt);
+    const e = ((i = (r = this.firstStore.passport) == null ? void 0 : r.manager) == null ? void 0 : i.variants) || [];
+    f(this, {
+      children: f("e-select", {
         value: this.firstStore,
-        onChange: (a) => {
-          this.updateStores(a.currentTarget.value);
+        onChange: (s) => {
+          this.updateStores(s.currentTarget.value);
         },
         lightChildren: [
-          p("e-select-head", {
+          f("e-select-head", {
             lightChildren: [
-              $e({
+              nt({
                 "data-value-holder": ""
               })
             ]
           }),
           ...e.map(
-            (a, i) => p("e-select-option", {
-              lightChildren: a,
-              default: i === 0 ? !0 : null
+            (s, n) => f("e-select-option", {
+              lightChildren: s,
+              default: n === 0 ? !0 : null
             })
           )
         ]
@@ -431,37 +469,84 @@ let de = class extends N {
     });
   }
 };
-de = ct([
-  f("e-tweaker-select-manager")
-], de);
-const pt = {
-  boolean: oe,
-  color: le,
-  link: he,
-  number: ee,
-  range: ce,
-  select: de,
-  string: j
+De = Ft([
+  C("e-tweaker-select-manager")
+], De);
+var It = Object.defineProperty, At = Object.getOwnPropertyDescriptor, Lt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? At(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && It(e, r, s), s;
+};
+const Nt = P({
+  ":host": {
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
+  },
+  input: {
+    boxSizing: "border-box",
+    outline: "none",
+    fontVariantNumeric: "tabular-nums",
+    fontFamily: "inherit",
+    color: "inherit",
+    border: "none",
+    fontSize: "var(--font-size-small)",
+    height: "var(--height-input)",
+    width: "100%",
+    margin: "0",
+    padding: "0 var(--gap-small)",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: h.borderRadius.var
+  }
+});
+let Fe = class extends H {
+  constructor(...t) {
+    super(...t), this.openShadow(Nt), f(this, {
+      children: [
+        xe({
+          class: "text-input",
+          type: "string",
+          value: this.firstStore,
+          onChange: (e) => {
+            this.updateStores(
+              e.currentTarget.value
+            );
+          }
+        })
+      ]
+    });
+  }
+};
+Fe = Lt([
+  C("e-tweaker-string-manager")
+], Fe);
+const Kt = {
+  boolean: Ee,
+  color: Oe,
+  link: ze,
+  number: Te,
+  select: De,
+  string: Fe
 };
-var ut = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, gt = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? vt(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && ut(e, r, a), a;
-}, _e = (t, e, r) => {
+var Zt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, Ht = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Vt(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && Zt(e, r, s), s;
+}, Ye = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
-}, h = (t, e, r) => (_e(t, e, "read from private field"), r ? r.call(t) : e.get(t)), x = (t, e, r) => {
+}, c = (t, e, r) => (Ye(t, e, "read from private field"), r ? r.call(t) : e.get(t)), D = (t, e, r) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, k = (t, e, r, n) => (_e(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), u, W, F, z, A, V, Y;
-const ft = m({
+}, A = (t, e, r, i) => (Ye(t, e, "write to private field"), e.set(t, r), r), _, q, Q, U, ee, pe, ue;
+const jt = P({
   ":host": {
     display: "grid",
     gridAutoFlow: "column",
     gridTemplateColumns: "0.4fr 1fr",
     alignItems: "center",
-    color: o.colorFont.var,
+    color: h.colorFont.var,
     gap: "var(--gap-medium)"
   },
   ":host(.disabled)": {
@@ -484,7 +569,7 @@ const ft = m({
     margin: "0",
     border: "none",
     background: "none",
-    fill: o.colorFont.var,
+    fill: h.colorFont.var,
     transitionDuration: "var(--duration-short)",
     transitionProperty: "fill, opacity",
     opacity: "0"
@@ -493,55 +578,55 @@ const ft = m({
     opacity: "1"
   },
   ".head-button:hover": {
-    fill: o.colorActive.var
+    fill: h.colorActive.var
   },
   ".head-button svg": {
     width: "100%",
     height: "100%"
   }
 });
-let te = class extends fe {
+let ke = class extends Ge {
   constructor(t) {
-    var r, n, a, i;
-    super(), x(this, u, []), x(this, W, void 0), x(this, F, void 0), x(this, z, !1), x(this, A, void 0), x(this, V, () => {
-      P.current.find((s) => h(this, u).includes(s)) || this.remove();
-    }), x(this, Y, (s) => {
-      h(this, z) && ((s.metaKey || s.ctrlKey) && s.code === "KeyC" ? navigator.clipboard.writeText(h(this, u)[0].current) : (s.metaKey || s.ctrlKey) && s.code === "KeyR" && (h(this, u).forEach((b) => {
-        b.reset();
-      }), s.preventDefault()));
-    }), k(this, u, [t.store]), k(this, W, t.store.passport.name), k(this, F, h(this, W).split(".").slice(-1).toString());
-    const e = ((n = (r = t.store.passport) == null ? void 0 : r.manager) == null ? void 0 : n.type) || "string";
-    k(this, A, new pt[e](h(this, u)[0])), this.openShadow(ft), p(this, {
+    var r, i, s, n;
+    super(), D(this, _, []), D(this, q, void 0), D(this, Q, void 0), D(this, U, !1), D(this, ee, void 0), D(this, pe, () => {
+      K.current.find((a) => c(this, _).includes(a)) || this.remove();
+    }), D(this, ue, (a) => {
+      c(this, U) && ((a.metaKey || a.ctrlKey) && a.code === "KeyC" ? navigator.clipboard.writeText(c(this, _)[0].current) : (a.metaKey || a.ctrlKey) && a.code === "KeyR" && (c(this, _).forEach((T) => {
+        T.reset();
+      }), a.preventDefault()));
+    }), A(this, _, [t.store]), A(this, q, t.store.passport.name), A(this, Q, c(this, q).split(".").slice(-1).toString());
+    const e = ((i = (r = t.store.passport) == null ? void 0 : r.manager) == null ? void 0 : i.type) || "string";
+    A(this, ee, new Kt[e](c(this, _)[0])), this.openShadow(jt), f(this, {
       class: {
-        disabled: ((i = (a = t.store.passport) == null ? void 0 : a.manager) == null ? void 0 : i.disabled) || !1
+        disabled: ((n = (s = t.store.passport) == null ? void 0 : s.manager) == null ? void 0 : n.disabled) || !1
       },
       onPointerleave: () => {
-        k(this, z, !1);
+        A(this, U, !1);
       },
       onPointerenter: () => {
-        k(this, z, !0);
+        A(this, U, !0);
       },
       children: [
-        w({
+        g({
           class: "head",
           children: [
-            w({ class: "name", children: h(this, F) + ":" }),
-            w({
+            g({ class: "name", children: c(this, Q) + ":" }),
+            g({
               class: "head-buttons",
               children: [
-                I({
+                te({
                   class: "head-button",
-                  children: me,
+                  children: Xe,
                   onClick: () => {
-                    navigator.clipboard.writeText(h(this, u)[0].current);
+                    navigator.clipboard.writeText(c(this, _)[0].current);
                   }
                 }),
-                I({
+                te({
                   class: "head-button",
-                  children: we,
+                  children: Be,
                   onClick: () => {
-                    h(this, u).forEach((s) => {
-                      s.reset();
+                    c(this, _).forEach((a) => {
+                      a.reset();
                     });
                   }
                 })
@@ -549,56 +634,56 @@ let te = class extends fe {
             })
           ]
         }),
-        h(this, A)
+        c(this, ee)
       ]
     });
   }
   get key() {
-    return h(this, W);
+    return c(this, q);
   }
   get name() {
-    return h(this, F);
+    return c(this, Q);
   }
   get stores() {
-    return h(this, u);
+    return c(this, _);
   }
   addStore(t) {
-    h(this, A).addStore(t);
+    c(this, ee).addStore(t);
   }
   connectedCallback() {
-    P.subscribe(h(this, V)), addEventListener("keydown", h(this, Y)), Re(this);
+    K.subscribe(c(this, pe)), addEventListener("keydown", c(this, ue)), dt(this);
   }
   disconnectedCallback() {
-    P.unsubscribe(h(this, V)), removeEventListener("keydown", h(this, Y));
+    K.unsubscribe(c(this, pe)), removeEventListener("keydown", c(this, ue));
   }
 };
-u = /* @__PURE__ */ new WeakMap();
-W = /* @__PURE__ */ new WeakMap();
-F = /* @__PURE__ */ new WeakMap();
-z = /* @__PURE__ */ new WeakMap();
-A = /* @__PURE__ */ new WeakMap();
-V = /* @__PURE__ */ new WeakMap();
-Y = /* @__PURE__ */ new WeakMap();
-te = gt([
-  f("e-tweaker-field")
-], te);
-var wt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, bt = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? mt(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && wt(e, r, a), a;
-}, ye = (t, e, r) => {
+_ = /* @__PURE__ */ new WeakMap();
+q = /* @__PURE__ */ new WeakMap();
+Q = /* @__PURE__ */ new WeakMap();
+U = /* @__PURE__ */ new WeakMap();
+ee = /* @__PURE__ */ new WeakMap();
+pe = /* @__PURE__ */ new WeakMap();
+ue = /* @__PURE__ */ new WeakMap();
+ke = Ht([
+  C("e-tweaker-field")
+], ke);
+var Gt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, Bt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Jt(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && Gt(e, r, s), s;
+}, qe = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
-}, l = (t, e, r) => (ye(t, e, "read from private field"), r ? r.call(t) : e.get(t)), C = (t, e, r) => {
+}, l = (t, e, r) => (qe(t, e, "read from private field"), r ? r.call(t) : e.get(t)), $ = (t, e, r) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, se = (t, e, r, n) => (ye(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), v, B, c, q, Q, pe;
-const _t = m({
+}, X = (t, e, r, i) => (qe(t, e, "write to private field"), e.set(t, r), r), y, ge, v, fe, ve, we, me, Re;
+const Xt = P({
   ".wrapper": {
     boxSizing: "border-box",
     backgroundColor: "rgba(255, 255, 255, 0.1)",
-    borderRadius: o.borderRadius.var
+    borderRadius: h.borderRadius.var
   },
   ".head": {
     boxSizing: "border-box",
@@ -609,12 +694,12 @@ const _t = m({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: o.colorMainAux.var,
-    borderRadius: o.borderRadius.var
+    backgroundColor: h.colorMainAux.var,
+    borderRadius: h.borderRadius.var
   },
   ".name": {
     fontSize: "var(--font-size-large)",
-    color: o.colorFont.var
+    color: h.colorFont.var
   },
   ".body": {
     transitionProperty: "height",
@@ -631,49 +716,54 @@ const _t = m({
   ".arrow": {
     width: "20px",
     height: "20px",
-    fill: o.colorFont.var,
+    fill: h.colorFont.var,
     transition: "transform var(--duration-short)"
   },
   ".opened .arrow": {
     transform: "scaleY(-1)"
   }
 });
-let L = class extends Te {
+let ie = class extends ht {
   constructor(t) {
-    super(), C(this, v, void 0), C(this, B, new ie(null)), C(this, c, new ie([])), C(this, q, void 0), C(this, Q, null), C(this, pe, (e) => {
-      let r = [], n = [];
-      e.forEach((a) => {
-        r = [...r, ...a.removedNodes], n = [...n, ...a.addedNodes];
-      }), l(this, c).current = l(this, c).current.filter(
-        (a) => !r.includes(a)
-      ), l(this, v) && !l(this, c).current.length && !n.length && this.remove();
-    }), this.openShadow(_t), se(this, v, t.key), se(this, q, new MutationObserver(l(this, pe))), p(this, {
+    super(), $(this, y, void 0), $(this, ge, new Ze(null)), $(this, v, new Ze([])), $(this, fe, void 0), $(this, ve, null), $(this, we, null), $(this, me, null), $(this, Re, (e) => {
+      let r = [], i = [];
+      e.forEach((s) => {
+        r = [...r, ...s.removedNodes], i = [...i, ...s.addedNodes];
+      }), l(this, v).current = l(this, v).current.filter(
+        (s) => !r.includes(s)
+      ), l(this, y) && !l(this, v).current.length && !i.length && this.remove();
+    }), this.openShadow(Xt), X(this, y, t.key), X(this, fe, new MutationObserver(l(this, Re))), f(this, {
       onAccordionItemToggle: (e) => {
-        e.stopPropagation(), e.detail.opened ? $.openPanel(l(this, v)) : $.closePanel(l(this, v));
+        e.stopPropagation(), e.detail.opened ? S.openPanel(l(this, y)) : S.closePanel(l(this, y));
       },
       children: [
-        w({
+        g({
           class: "wrapper",
           children: [
-            w({
+            g({
               class: "head",
               children: [
-                l(this, v) ? w({
+                l(this, y) ? g({
                   class: "name",
-                  children: [l(this, v).split(".").slice(-1).toString()]
+                  children: [l(this, y).split(".").slice(-1).toString()]
                 }) : null,
-                l(this, B),
-                p(Ee, {
+                l(this, ge),
+                f(ct, {
                   class: "arrow"
                 })
               ]
             }),
-            w({
+            g({
               class: "body",
-              children: w({
+              ref: (e) => {
+                X(this, ve, e);
+              },
+              children: g({
                 class: "body-content",
-                children: l(this, c),
-                ref: (e) => se(this, Q, e.firstElementChild)
+                children: l(this, v),
+                ref: (e) => {
+                  X(this, we, e), X(this, me, e.firstElementChild);
+                }
               })
             })
           ]
@@ -682,31 +772,37 @@ let L = class extends Te {
     }), t != null && t.storeBox && this.handleStore(t.storeBox);
   }
   get key() {
-    return l(this, v);
+    return l(this, y);
   }
   get head() {
-    return l(this, B);
+    return l(this, ge);
   }
   get content() {
-    return l(this, c);
+    return l(this, v);
+  }
+  get bodyElement() {
+    return l(this, ve);
+  }
+  get contentElement() {
+    return l(this, we);
   }
   connectedCallback() {
     super.connectedCallback(), setTimeout(() => {
-      $.isPanelOpened(l(this, v)) && this.openAll({ skipTransition: !0 });
-    }, 50), l(this, q).observe(l(this, Q), {
+      S.isPanelOpened(l(this, y)) && this.openAll({ skipTransition: !0 });
+    }, 50), l(this, fe).observe(l(this, me), {
       childList: !0
     });
   }
   handleStore(t) {
     if (t.remainingFolders.length) {
-      const r = t.store.passport.name.split("."), n = r.slice(0, r.length - t.remainingFolders.length).join("."), a = l(this, c).current.find((i) => i.key === n);
-      a instanceof L ? a.handleStore({
+      const r = t.store.passport.name.split("."), i = r.slice(0, r.length - t.remainingFolders.length).join("."), s = l(this, v).current.find((n) => n.key === i);
+      s instanceof ie ? s.handleStore({
         store: t.store,
         remainingFolders: t.remainingFolders.slice(1)
-      }) : l(this, c).current = [
-        ...l(this, c).current,
-        new L({
-          key: n,
+      }) : l(this, v).current = [
+        ...l(this, v).current,
+        new ie({
+          key: i,
           storeBox: {
             store: t.store,
             remainingFolders: t.remainingFolders.slice(1)
@@ -714,40 +810,42 @@ let L = class extends Te {
         })
       ];
     } else {
-      const e = l(this, c).current.find(
+      const e = l(this, v).current.find(
         (r) => r.key === t.store.passport.name
       );
-      e instanceof te ? e.addStore(t.store) : l(this, c).current = [
-        ...l(this, c).current,
-        new te({
+      e instanceof ke ? e.addStore(t.store) : l(this, v).current = [
+        ...l(this, v).current,
+        new ke({
           store: t.store
         })
       ];
     }
   }
 };
+y = /* @__PURE__ */ new WeakMap();
+ge = /* @__PURE__ */ new WeakMap();
 v = /* @__PURE__ */ new WeakMap();
-B = /* @__PURE__ */ new WeakMap();
-c = /* @__PURE__ */ new WeakMap();
-q = /* @__PURE__ */ new WeakMap();
-Q = /* @__PURE__ */ new WeakMap();
-pe = /* @__PURE__ */ new WeakMap();
-L = bt([
-  f("e-tweaker-folder")
-], L);
-var yt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, xt = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? St(e, r) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (a = (n ? s(e, r, a) : s(a)) || a);
-  return n && a && yt(e, r, a), a;
-}, kt = (t, e, r) => {
+fe = /* @__PURE__ */ new WeakMap();
+ve = /* @__PURE__ */ new WeakMap();
+we = /* @__PURE__ */ new WeakMap();
+me = /* @__PURE__ */ new WeakMap();
+Re = /* @__PURE__ */ new WeakMap();
+ie = Bt([
+  C("e-tweaker-folder")
+], ie);
+var Yt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, Qt = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? qt(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  return i && s && Yt(e, r, s), s;
+}, Ut = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
-}, G = (t, e, r) => (kt(t, e, "read from private field"), r ? r.call(t) : e.get(t)), ge = (t, e, r) => {
+}, ae = (t, e, r) => (Ut(t, e, "read from private field"), e.get(t)), je = (t, e, r) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, U, X;
-const Ct = m({
+}, be, _e;
+const er = P({
   ":host": {
     "--tweaker-width": "500px",
     "--tweaker-offset": "20px",
@@ -766,8 +864,8 @@ const Ct = m({
     top: "var(--tweaker-offset)",
     right: "var(--tweaker-offset)",
     width: "var(--tweaker-width)",
-    backgroundColor: o.colorMain.var,
-    borderRadius: o.borderRadius.var,
+    backgroundColor: h.colorMain.var,
+    borderRadius: h.borderRadius.var,
     transition: "opacity 0.2s",
     zIndex: "100",
     opacity: "0.1"
@@ -775,6 +873,15 @@ const Ct = m({
   ":host(:hover)": {
     opacity: "1 !important"
   },
+  ".resize": {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: "calc(var(--tweaker-width) * 0.025)",
+    height: "100%",
+    zIndex: "1",
+    cursor: "ew-resize"
+  },
   ".tweaker-buttons": {
     display: "flex",
     alignItems: "center",
@@ -787,12 +894,12 @@ const Ct = m({
     margin: "0",
     background: "none",
     border: "none",
-    fill: o.colorFont.var,
+    fill: h.colorFont.var,
     transitionProperty: "fill",
     transitionDuration: "var(--duration-short)"
   },
   ".tweaker-button:hover": {
-    fill: o.colorActive.var
+    fill: h.colorActive.var
   },
   ".tweaker-button svg": {
     width: "100%",
@@ -813,12 +920,12 @@ const Ct = m({
   ":host .body-content::-webkit-scrollbar": {
     display: "none"
   },
-  [`@media ${Me["<=mobile"]}`]: {
+  [`@media ${lt["<=mobile"]}`]: {
     ":host": {
       position: "absolute",
       top: "0",
       right: "0",
-      width: "100%",
+      width: "100% !important",
       borderTopLeftRadius: "0",
       borderTopRightRadius: "0"
     },
@@ -830,14 +937,14 @@ const Ct = m({
     }
   }
 });
-let ue = class extends L {
+let Ie = class extends ie {
   constructor() {
     super({
       key: ""
-    }), ge(this, U, () => {
-      $.save();
-    }), ge(this, X, Ce(() => {
-      P.current.forEach((t) => {
+    }), je(this, be, () => {
+      S.save();
+    }), je(this, _e, it(() => {
+      K.current.forEach((t) => {
         if (t.passport) {
           const e = t.passport.name.split(".");
           this.handleStore({
@@ -846,58 +953,58 @@ let ue = class extends L {
           });
         }
       });
-    }, 10)), $.load(), this.addStylesheet(Ct), this.head.current = [
-      w({
+    }, 10)), S.load(), this.addStylesheet(er), this.head.current = [
+      g({
         class: "tweaker-buttons",
         onClick: (t) => {
           t.stopPropagation();
         },
         children: [
-          I({
+          te({
             class: "tweaker-button",
-            children: we,
+            children: Be,
             onClick: () => {
-              y.resetState();
+              O.resetState();
             }
           }),
-          I({
+          te({
             class: ["tweaker-button"],
-            children: [me],
+            children: [Xe],
             onClick: () => {
               navigator.clipboard.writeText(
-                JSON.stringify(y.getState())
+                JSON.stringify(O.getState())
               );
             }
           }),
-          I({
+          te({
             class: "tweaker-button",
-            children: We,
+            children: gt,
             onClick: () => {
-              ke(
-                y.projectName,
-                y.getState()
+              st(
+                O.projectName,
+                O.getState()
               );
             }
           }),
-          Oe({
+          ot({
             class: "tweaker-button",
             children: [
-              Fe,
-              re({
+              ft,
+              xe({
                 type: "file",
                 style: {
                   display: "none"
                 },
                 onChange: (t) => {
-                  var n;
-                  const r = (n = t.currentTarget.files) == null ? void 0 : n[0];
+                  var i;
+                  const r = (i = t.currentTarget.files) == null ? void 0 : i[0];
                   if (r) {
-                    const a = new FileReader();
-                    a.onload = (i) => {
-                      var b, Z;
-                      const s = (Z = (b = i.target) == null ? void 0 : b.result) == null ? void 0 : Z.toString();
-                      s && y.loadState(s);
-                    }, a.readAsText(r);
+                    const s = new FileReader();
+                    s.onload = (n) => {
+                      var T, j;
+                      const a = (j = (T = n.target) == null ? void 0 : T.result) == null ? void 0 : j.toString();
+                      a && O.loadState(a);
+                    }, s.readAsText(r);
                   }
                 }
               })
@@ -905,20 +1012,36 @@ let ue = class extends L {
           })
         ]
       })
-    ], this.addEventListener("accordionItemToggle", (t) => {
+    ], f(this.bodyElement, {
+      children: [
+        g({
+          class: "resize",
+          onPointerdown: (t) => {
+            const e = this.getBoundingClientRect();
+            Je((r) => {
+              const i = t.x - r.x, s = Math.max(400, e.width + i);
+              this.style.width = s + "px", S.changeSize("tweaker", s);
+            });
+          },
+          onDblclick: () => {
+            this.style.width = "", S.changeSize("tweaker", null);
+          }
+        })
+      ]
+    }), this.addEventListener("accordionItemToggle", (t) => {
       t.detail.opened ? this.style.opacity = "1" : this.style.opacity = "0.1";
     });
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("beforeunload", G(this, U)), P.subscribe(G(this, X));
+    super.connectedCallback(), window.addEventListener("beforeunload", ae(this, be)), K.subscribe(ae(this, _e)), S.changedSizes("tweaker") && (this.style.width = S.changedSizes("tweaker") + "px");
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("beforeunload", G(this, U)), $.save(), P.unsubscribe(G(this, X));
+    super.disconnectedCallback(), window.removeEventListener("beforeunload", ae(this, be)), S.save(), K.unsubscribe(ae(this, _e));
   }
 };
-U = /* @__PURE__ */ new WeakMap();
-X = /* @__PURE__ */ new WeakMap();
-ue = xt([
-  f("e-tweaker")
-], ue);
-xe && document.body.appendChild(new ue());
+be = /* @__PURE__ */ new WeakMap();
+_e = /* @__PURE__ */ new WeakMap();
+Ie = Qt([
+  C("e-tweaker")
+], Ie);
+rt && document.body.appendChild(new Ie());