@janbox/storefront-builder 1.0.3 → 1.0.5

package/dist/editor.js

@@ -1,18 +1,18 @@
-import { jsx as n, Fragment as Ne, jsxs as p } from "@emotion/react/jsx-runtime";
-import { u as _e, a as ae, b as J, D as ze, c as Ge, W as j, d as E, e as qe, f as Ue, g as Le, h as Ee, i as Ze, j as Qe, k as we, l as Ye, m as ue, n as se, A as Se, o as Ke, C as Me, p as $e, q as Xe, r as Je, T as et, s as fe, R as tt } from "./index-DrJkOkbq.js";
-import { t as zr } from "./index-DrJkOkbq.js";
+import { jsx as n, Fragment as Ne, jsxs as g } from "@emotion/react/jsx-runtime";
+import { u as _e, a as ae, b as te, D as ze, c as qe, W as j, d as E, e as Ge, f as Ue, g as Le, h as Ee, i as Ze, j as Qe, k as we, l as Ye, m as ue, n as oe, A as Se, o as Ke, C as Me, p as Re, q as Xe, r as Je, T as et, s as fe, R as tt } from "./index-DrJkOkbq.js";
+import { t as qr } from "./index-DrJkOkbq.js";
 import rt from "mitt";
-import { c as I, N as pe, B as ge, g as nt, a as st, u as W, W as ot, b as Re, i as it, P as ct } from "./countdown-timer.node-CAsCNVin.js";
-import { useRef as je, useState as ee, useEffect as V, createElement as Ae, Fragment as K, Suspense as at } from "react";
+import { c as I, N as pe, B as ge, g as nt, a as st, u as W, W as ot, b as $e, i as it, P as ct } from "./countdown-timer.node-CAsCNVin.js";
+import { useRef as je, useState as _, useEffect as z, createElement as Ae, Fragment as J, Suspense as at } from "react";
 import { useToggle as De } from "usehooks-ts";
 import { CacheProvider as lt, Global as dt, createElement as ht } from "@emotion/react";
 import { useFloating as wt, autoUpdate as ut, flip as ft, size as pt, useHover as gt, safePolygon as mt, useFocus as kt, useDismiss as vt, useRole as bt, useInteractions as Ct, FloatingPortal as Ie } from "@floating-ui/react";
 import { ThemeProvider as xt, FLOATING_Z_INDEX as yt, breakpoint as Nt } from "@janbox/storefront-ui/theme";
-import { throttle as Lt, isFunction as me, isNumber as ke } from "lodash-es";
-import Et, { useFrame as St } from "react-frame-component";
-import { Layers as Mt, useLayer as $t } from "@craftjs/layers";
-import { useNode as Rt, ROOT_NODE as oe } from "@craftjs/core";
-class jt {
+import { useNode as Lt, ROOT_NODE as B, serializeNode as Et } from "@craftjs/core";
+import { throttle as St, isFunction as me, isNumber as ke } from "lodash-es";
+import Mt, { useFrame as Rt } from "react-frame-component";
+import { Layers as $t, useLayer as jt } from "@craftjs/layers";
+class At {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -45,11 +45,11 @@ class jt {
     });
   }
 }
-const At = () => new jt();
-function Dt() {
-  return _e(At);
+const Dt = () => new At();
+function It() {
+  return _e(Dt);
 }
-function It(e) {
+function Tt(e) {
   if (e.sheet)
     return e.sheet;
   for (var t = 0; t < document.styleSheets.length; t++)
@@ -60,7 +60,7 @@ function Pt(e) {
   var t = document.createElement("style");
   return t.setAttribute("data-emotion", e.key), e.nonce !== void 0 && t.setAttribute("nonce", e.nonce), t.appendChild(document.createTextNode("")), t.setAttribute("data-s", ""), t;
 }
-var Tt = /* @__PURE__ */ (function() {
+var Wt = /* @__PURE__ */ (function() {
   function e(s) {
     var r = this;
     this._insertTag = function(i) {
@@ -75,7 +75,7 @@ var Tt = /* @__PURE__ */ (function() {
     this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(Pt(this));
     var i = this.tags[this.tags.length - 1];
     if (this.isSpeedy) {
-      var o = It(i);
+      var o = Tt(i);
       try {
         o.insertRule(r, o.cssRules.length);
       } catch {
@@ -89,14 +89,14 @@ var Tt = /* @__PURE__ */ (function() {
       return (i = r.parentNode) == null ? void 0 : i.removeChild(r);
     }), this.tags = [], this.ctr = 0;
   }, e;
-})(), S = "-ms-", X = "-moz-", u = "-webkit-", Pe = "comm", le = "rule", de = "decl", Wt = "@import", Te = "@keyframes", Bt = "@layer", Ot = Math.abs, te = String.fromCharCode, Ft = Object.assign;
-function Ht(e, t) {
+})(), S = "-ms-", ee = "-moz-", u = "-webkit-", Te = "comm", le = "rule", de = "decl", Bt = "@import", Pe = "@keyframes", Ot = "@layer", Ft = Math.abs, re = String.fromCharCode, Ht = Object.assign;
+function Vt(e, t) {
   return L(e, 0) ^ 45 ? (((t << 2 ^ L(e, 0)) << 2 ^ L(e, 1)) << 2 ^ L(e, 2)) << 2 ^ L(e, 3) : 0;
 }
 function We(e) {
   return e.trim();
 }
-function Vt(e, t) {
+function _t(e, t) {
   return (e = t.exec(e)) ? e[0] : e;
 }
 function f(e, t, s) {
@@ -108,7 +108,7 @@ function ie(e, t) {
 function L(e, t) {
   return e.charCodeAt(t) | 0;
 }
-function _(e, t, s) {
+function q(e, t, s) {
   return e.slice(t, s);
 }
 function D(e) {
@@ -117,38 +117,38 @@ function D(e) {
 function he(e) {
   return e.length;
 }
-function U(e, t) {
+function Q(e, t) {
   return t.push(e), e;
 }
-function _t(e, t) {
+function zt(e, t) {
   return e.map(t).join("");
 }
-var re = 1, O = 1, Be = 0, M = 0, x = 0, F = "";
-function ne(e, t, s, r, i, o, d) {
-  return { value: e, root: t, parent: s, type: r, props: i, children: o, line: re, column: O, length: d, return: "" };
+var ne = 1, F = 1, Be = 0, R = 0, y = 0, H = "";
+function se(e, t, s, r, i, o, h) {
+  return { value: e, root: t, parent: s, type: r, props: i, children: o, line: ne, column: F, length: h, return: "" };
 }
-function H(e, t) {
-  return Ft(ne("", null, null, "", null, null, 0), e, { length: -e.length }, t);
+function V(e, t) {
+  return Ht(se("", null, null, "", null, null, 0), e, { length: -e.length }, t);
 }
-function zt() {
-  return x;
+function qt() {
+  return y;
 }
 function Gt() {
-  return x = M > 0 ? L(F, --M) : 0, O--, x === 10 && (O = 1, re--), x;
+  return y = R > 0 ? L(H, --R) : 0, F--, y === 10 && (F = 1, ne--), y;
 }
 function $() {
-  return x = M < Be ? L(F, M++) : 0, O++, x === 10 && (O = 1, re++), x;
+  return y = R < Be ? L(H, R++) : 0, F++, y === 10 && (F = 1, ne++), y;
 }
-function P() {
-  return L(F, M);
+function T() {
+  return L(H, R);
 }
-function Z() {
-  return M;
+function Y() {
+  return R;
 }
-function G(e, t) {
-  return _(F, e, t);
+function U(e, t) {
+  return q(H, e, t);
 }
-function z(e) {
+function G(e) {
   switch (e) {
     // \0 \t \n \r \s whitespace token
     case 0:
@@ -187,34 +187,34 @@ function z(e) {
   return 0;
 }
 function Oe(e) {
-  return re = O = 1, Be = D(F = e), M = 0, [];
+  return ne = F = 1, Be = D(H = e), R = 0, [];
 }
 function Fe(e) {
-  return F = "", e;
+  return H = "", e;
 }
-function Q(e) {
-  return We(G(M - 1, ce(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+function K(e) {
+  return We(U(R - 1, ce(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
-function qt(e) {
-  for (; (x = P()) && x < 33; )
+function Ut(e) {
+  for (; (y = T()) && y < 33; )
     $();
-  return z(e) > 2 || z(x) > 3 ? "" : " ";
+  return G(e) > 2 || G(y) > 3 ? "" : " ";
 }
-function Ut(e, t) {
-  for (; --t && $() && !(x < 48 || x > 102 || x > 57 && x < 65 || x > 70 && x < 97); )
+function Zt(e, t) {
+  for (; --t && $() && !(y < 48 || y > 102 || y > 57 && y < 65 || y > 70 && y < 97); )
     ;
-  return G(e, Z() + (t < 6 && P() == 32 && $() == 32));
+  return U(e, Y() + (t < 6 && T() == 32 && $() == 32));
 }
 function ce(e) {
   for (; $(); )
-    switch (x) {
+    switch (y) {
       // ] ) " '
       case e:
-        return M;
+        return R;
       // " '
       case 34:
       case 39:
-        e !== 34 && e !== 39 && ce(x);
+        e !== 34 && e !== 39 && ce(y);
         break;
       // (
       case 40:
@@ -225,54 +225,54 @@ function ce(e) {
         $();
         break;
     }
-  return M;
+  return R;
 }
-function Zt(e, t) {
-  for (; $() && e + x !== 57; )
-    if (e + x === 84 && P() === 47)
+function Qt(e, t) {
+  for (; $() && e + y !== 57; )
+    if (e + y === 84 && T() === 47)
       break;
-  return "/*" + G(t, M - 1) + "*" + te(e === 47 ? e : $());
+  return "/*" + U(t, R - 1) + "*" + re(e === 47 ? e : $());
 }
-function Qt(e) {
-  for (; !z(P()); )
+function Yt(e) {
+  for (; !G(T()); )
     $();
-  return G(e, M);
+  return U(e, R);
 }
-function Yt(e) {
-  return Fe(Y("", null, null, null, [""], e = Oe(e), 0, [0], e));
+function Kt(e) {
+  return Fe(X("", null, null, null, [""], e = Oe(e), 0, [0], e));
 }
-function Y(e, t, s, r, i, o, d, c, a) {
-  for (var g = 0, h = 0, l = d, m = 0, k = 0, v = 0, w = 1, N = 1, b = 1, y = 0, R = "", q = i, T = o, A = r, C = R; N; )
-    switch (v = y, y = $()) {
+function X(e, t, s, r, i, o, h, c, d) {
+  for (var k = 0, l = 0, a = h, m = 0, b = 0, v = 0, w = 1, N = 1, p = 1, x = 0, M = "", Z = i, P = o, A = r, C = M; N; )
+    switch (v = x, x = $()) {
       // (
       case 40:
-        if (v != 108 && L(C, l - 1) == 58) {
-          ie(C += f(Q(y), "&", "&\f"), "&\f") != -1 && (b = -1);
+        if (v != 108 && L(C, a - 1) == 58) {
+          ie(C += f(K(x), "&", "&\f"), "&\f") != -1 && (p = -1);
           break;
         }
       // " ' [
       case 34:
       case 39:
       case 91:
-        C += Q(y);
+        C += K(x);
         break;
       // \t \n \r \s
       case 9:
       case 10:
       case 13:
       case 32:
-        C += qt(v);
+        C += Ut(v);
         break;
       // \
       case 92:
-        C += Ut(Z() - 1, 7);
+        C += Zt(Y() - 1, 7);
         continue;
       // /
       case 47:
-        switch (P()) {
+        switch (T()) {
           case 42:
           case 47:
-            U(Kt(Zt($(), Z()), t, s), a);
+            Q(Xt(Qt($(), Y()), t, s), d);
             break;
           default:
             C += "/";
@@ -280,28 +280,28 @@ function Y(e, t, s, r, i, o, d, c, a) {
         break;
       // {
       case 123 * w:
-        c[g++] = D(C) * b;
+        c[k++] = D(C) * p;
       // } ; \0
       case 125 * w:
       case 59:
       case 0:
-        switch (y) {
+        switch (x) {
           // \0 }
           case 0:
           case 125:
             N = 0;
           // ;
-          case 59 + h:
-            b == -1 && (C = f(C, /\f/g, "")), k > 0 && D(C) - l && U(k > 32 ? be(C + ";", r, s, l - 1) : be(f(C, " ", "") + ";", r, s, l - 2), a);
+          case 59 + l:
+            p == -1 && (C = f(C, /\f/g, "")), b > 0 && D(C) - a && Q(b > 32 ? be(C + ";", r, s, a - 1) : be(f(C, " ", "") + ";", r, s, a - 2), d);
             break;
           // @ ;
           case 59:
             C += ";";
           // { rule/at-rule
           default:
-            if (U(A = ve(C, t, s, g, h, i, c, R, q = [], T = [], l), o), y === 123)
-              if (h === 0)
-                Y(C, t, A, A, q, o, l, c, T);
+            if (Q(A = ve(C, t, s, k, l, i, c, M, Z = [], P = [], a), o), x === 123)
+              if (l === 0)
+                X(C, t, A, A, Z, o, a, c, P);
               else
                 switch (m === 99 && L(C, 3) === 110 ? 100 : m) {
                   // d l m s
@@ -309,36 +309,36 @@ function Y(e, t, s, r, i, o, d, c, a) {
                   case 108:
                   case 109:
                   case 115:
-                    Y(e, A, A, r && U(ve(e, A, A, 0, 0, i, c, R, i, q = [], l), T), i, T, l, c, r ? q : T);
+                    X(e, A, A, r && Q(ve(e, A, A, 0, 0, i, c, M, i, Z = [], a), P), i, P, a, c, r ? Z : P);
                     break;
                   default:
-                    Y(C, A, A, A, [""], T, 0, c, T);
+                    X(C, A, A, A, [""], P, 0, c, P);
                 }
         }
-        g = h = k = 0, w = b = 1, R = C = "", l = d;
+        k = l = b = 0, w = p = 1, M = C = "", a = h;
         break;
       // :
       case 58:
-        l = 1 + D(C), k = v;
+        a = 1 + D(C), b = v;
       default:
         if (w < 1) {
-          if (y == 123)
+          if (x == 123)
             --w;
-          else if (y == 125 && w++ == 0 && Gt() == 125)
+          else if (x == 125 && w++ == 0 && Gt() == 125)
             continue;
         }
-        switch (C += te(y), y * w) {
+        switch (C += re(x), x * w) {
           // &
           case 38:
-            b = h > 0 ? 1 : (C += "\f", -1);
+            p = l > 0 ? 1 : (C += "\f", -1);
             break;
           // ,
           case 44:
-            c[g++] = (D(C) - 1) * b, b = 1;
+            c[k++] = (D(C) - 1) * p, p = 1;
             break;
           // @
           case 64:
-            P() === 45 && (C += Q($())), m = P(), h = l = D(R = C += Qt(Z())), y++;
+            T() === 45 && (C += K($())), m = T(), l = a = D(M = C += Yt(Y())), x++;
             break;
           // -
           case 45:
@@ -347,80 +347,80 @@ function Y(e, t, s, r, i, o, d, c, a) {
     }
   return o;
 }
-function ve(e, t, s, r, i, o, d, c, a, g, h) {
-  for (var l = i - 1, m = i === 0 ? o : [""], k = he(m), v = 0, w = 0, N = 0; v < r; ++v)
-    for (var b = 0, y = _(e, l + 1, l = Ot(w = d[v])), R = e; b < k; ++b)
-      (R = We(w > 0 ? m[b] + " " + y : f(y, /&\f/g, m[b]))) && (a[N++] = R);
-  return ne(e, t, s, i === 0 ? le : c, a, g, h);
+function ve(e, t, s, r, i, o, h, c, d, k, l) {
+  for (var a = i - 1, m = i === 0 ? o : [""], b = he(m), v = 0, w = 0, N = 0; v < r; ++v)
+    for (var p = 0, x = q(e, a + 1, a = Ft(w = h[v])), M = e; p < b; ++p)
+      (M = We(w > 0 ? m[p] + " " + x : f(x, /&\f/g, m[p]))) && (d[N++] = M);
+  return se(e, t, s, i === 0 ? le : c, d, k, l);
 }
-function Kt(e, t, s) {
-  return ne(e, t, s, Pe, te(zt()), _(e, 2, -2), 0);
+function Xt(e, t, s) {
+  return se(e, t, s, Te, re(qt()), q(e, 2, -2), 0);
 }
 function be(e, t, s, r) {
-  return ne(e, t, s, de, _(e, 0, r), _(e, r + 1, -1), r);
+  return se(e, t, s, de, q(e, 0, r), q(e, r + 1, -1), r);
 }
-function B(e, t) {
+function O(e, t) {
   for (var s = "", r = he(e), i = 0; i < r; i++)
     s += t(e[i], i, e, t) || "";
   return s;
 }
-function Xt(e, t, s, r) {
+function Jt(e, t, s, r) {
   switch (e.type) {
-    case Bt:
+    case Ot:
       if (e.children.length) break;
-    case Wt:
+    case Bt:
     case de:
       return e.return = e.return || e.value;
-    case Pe:
-      return "";
     case Te:
-      return e.return = e.value + "{" + B(e.children, r) + "}";
+      return "";
+    case Pe:
+      return e.return = e.value + "{" + O(e.children, r) + "}";
     case le:
       e.value = e.props.join(",");
   }
-  return D(s = B(e.children, r)) ? e.return = e.value + "{" + s + "}" : "";
+  return D(s = O(e.children, r)) ? e.return = e.value + "{" + s + "}" : "";
 }
-function Jt(e) {
+function er(e) {
   var t = he(e);
   return function(s, r, i, o) {
-    for (var d = "", c = 0; c < t; c++)
-      d += e[c](s, r, i, o) || "";
-    return d;
+    for (var h = "", c = 0; c < t; c++)
+      h += e[c](s, r, i, o) || "";
+    return h;
   };
 }
-function er(e) {
+function tr(e) {
   return function(t) {
     t.root || (t = t.return) && e(t);
   };
 }
-var tr = function(t, s, r) {
-  for (var i = 0, o = 0; i = o, o = P(), i === 38 && o === 12 && (s[r] = 1), !z(o); )
+var rr = function(t, s, r) {
+  for (var i = 0, o = 0; i = o, o = T(), i === 38 && o === 12 && (s[r] = 1), !G(o); )
     $();
-  return G(t, M);
-}, rr = function(t, s) {
+  return U(t, R);
+}, nr = function(t, s) {
   var r = -1, i = 44;
   do
-    switch (z(i)) {
+    switch (G(i)) {
       case 0:
-        i === 38 && P() === 12 && (s[r] = 1), t[r] += tr(M - 1, s, r);
+        i === 38 && T() === 12 && (s[r] = 1), t[r] += rr(R - 1, s, r);
         break;
       case 2:
-        t[r] += Q(i);
+        t[r] += K(i);
         break;
       case 4:
         if (i === 44) {
-          t[++r] = P() === 58 ? "&\f" : "", s[r] = t[r].length;
+          t[++r] = T() === 58 ? "&\f" : "", s[r] = t[r].length;
           break;
         }
       // fallthrough
       default:
-        t[r] += te(i);
+        t[r] += re(i);
     }
   while (i = $());
   return t;
-}, nr = function(t, s) {
-  return Fe(rr(Oe(t), s));
-}, Ce = /* @__PURE__ */ new WeakMap(), sr = function(t) {
+}, sr = function(t, s) {
+  return Fe(nr(Oe(t), s));
+}, Ce = /* @__PURE__ */ new WeakMap(), or = function(t) {
   if (!(t.type !== "rule" || !t.parent || // positive .length indicates that this rule contains pseudo
   // negative .length indicates that this rule has been already prefixed
   t.length < 1)) {
@@ -428,12 +428,12 @@ var tr = function(t, s, r) {
       if (r = r.parent, !r) return;
     if (!(t.props.length === 1 && s.charCodeAt(0) !== 58 && !Ce.get(r)) && !i) {
       Ce.set(t, !0);
-      for (var o = [], d = nr(s, o), c = r.props, a = 0, g = 0; a < d.length; a++)
-        for (var h = 0; h < c.length; h++, g++)
-          t.props[g] = o[a] ? d[a].replace(/&\f/g, c[h]) : c[h] + " " + d[a];
+      for (var o = [], h = sr(s, o), c = r.props, d = 0, k = 0; d < h.length; d++)
+        for (var l = 0; l < c.length; l++, k++)
+          t.props[k] = o[d] ? h[d].replace(/&\f/g, c[l]) : c[l] + " " + h[d];
     }
   }
-}, or = function(t) {
+}, ir = function(t) {
   if (t.type === "decl") {
     var s = t.value;
     // charcode for l
@@ -442,7 +442,7 @@ var tr = function(t, s, r) {
   }
 };
 function He(e, t) {
-  switch (Ht(e, t)) {
+  switch (Vt(e, t)) {
     // color-adjust
     case 5103:
       return u + "print-" + e + e;
@@ -482,7 +482,7 @@ function He(e, t) {
     case 4810:
     case 6968:
     case 2756:
-      return u + e + X + e + S + e + e;
+      return u + e + ee + e + S + e + e;
     // flex, flex-direction
     case 6828:
     case 4268:
@@ -546,7 +546,7 @@ function He(e, t) {
           if (L(e, t + 4) !== 45) break;
         // (f)ill-available, (f)it-content
         case 102:
-          return f(e, /(.+:)(.+)-([^]+)/, "$1" + u + "$2-$3$1" + X + (L(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
+          return f(e, /(.+:)(.+)-([^]+)/, "$1" + u + "$2-$3$1" + ee + (L(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
         // (s)tretch
         case 115:
           return ~ie(e, "stretch") ? He(f(e, "stretch", "fill-available"), t) + e : e;
@@ -583,38 +583,38 @@ function He(e, t) {
   }
   return e;
 }
-var ir = function(t, s, r, i) {
+var cr = function(t, s, r, i) {
   if (t.length > -1 && !t.return) switch (t.type) {
     case de:
       t.return = He(t.value, t.length);
       break;
-    case Te:
-      return B([H(t, {
+    case Pe:
+      return O([V(t, {
         value: f(t.value, "@", "@" + u)
       })], i);
     case le:
-      if (t.length) return _t(t.props, function(o) {
-        switch (Vt(o, /(::plac\w+|:read-\w+)/)) {
+      if (t.length) return zt(t.props, function(o) {
+        switch (_t(o, /(::plac\w+|:read-\w+)/)) {
           // :read-(only|write)
           case ":read-only":
           case ":read-write":
-            return B([H(t, {
-              props: [f(o, /:(read-\w+)/, ":" + X + "$1")]
+            return O([V(t, {
+              props: [f(o, /:(read-\w+)/, ":" + ee + "$1")]
             })], i);
           // :placeholder
           case "::placeholder":
-            return B([H(t, {
+            return O([V(t, {
               props: [f(o, /:(plac\w+)/, ":" + u + "input-$1")]
-            }), H(t, {
-              props: [f(o, /:(plac\w+)/, ":" + X + "$1")]
-            }), H(t, {
+            }), V(t, {
+              props: [f(o, /:(plac\w+)/, ":" + ee + "$1")]
+            }), V(t, {
               props: [f(o, /:(plac\w+)/, S + "input-$1")]
             })], i);
         }
         return "";
       });
   }
-}, cr = [ir], ar = function(t) {
+}, ar = [cr], lr = function(t) {
   var s = t.key;
   if (s === "css") {
     var r = document.querySelectorAll("style[data-emotion]:not([data-s])");
@@ -623,33 +623,33 @@ var ir = function(t, s, r, i) {
       N.indexOf(" ") !== -1 && (document.head.appendChild(w), w.setAttribute("data-s", ""));
     });
   }
-  var i = t.stylisPlugins || cr, o = {}, d, c = [];
-  d = t.container || document.head, Array.prototype.forEach.call(
+  var i = t.stylisPlugins || ar, o = {}, h, c = [];
+  h = t.container || document.head, Array.prototype.forEach.call(
     // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
     document.querySelectorAll('style[data-emotion^="' + s + ' "]'),
     function(w) {
-      for (var N = w.getAttribute("data-emotion").split(" "), b = 1; b < N.length; b++)
-        o[N[b]] = !0;
+      for (var N = w.getAttribute("data-emotion").split(" "), p = 1; p < N.length; p++)
+        o[N[p]] = !0;
       c.push(w);
     }
   );
-  var a, g = [sr, or];
+  var d, k = [or, ir];
   {
-    var h, l = [Xt, er(function(w) {
-      h.insert(w);
-    })], m = Jt(g.concat(i, l)), k = function(N) {
-      return B(Yt(N), m);
+    var l, a = [Jt, tr(function(w) {
+      l.insert(w);
+    })], m = er(k.concat(i, a)), b = function(N) {
+      return O(Kt(N), m);
     };
-    a = function(N, b, y, R) {
-      h = y, k(N ? N + "{" + b.styles + "}" : b.styles), R && (v.inserted[b.name] = !0);
+    d = function(N, p, x, M) {
+      l = x, b(N ? N + "{" + p.styles + "}" : p.styles), M && (v.inserted[p.name] = !0);
     };
   }
   var v = {
     key: s,
-    sheet: new Tt({
+    sheet: new Wt({
       key: s,
-      container: d,
+      container: h,
       nonce: t.nonce,
       speedy: t.speedy,
       prepend: t.prepend,
@@ -658,66 +658,66 @@ var ir = function(t, s, r, i) {
     nonce: t.nonce,
     inserted: o,
     registered: {},
-    insert: a
+    insert: d
   };
   return v.sheet.hydrate(c), v;
 };
 const Ve = ({ children: e, viewport: t, containerProps: s }) => {
-  const r = je(null), [{ theme: i }] = ae(), [o, d] = ee({
+  const r = je(null), [{ theme: i }] = ae(), [o, h] = _({
     width: 0,
     height: 0
   });
-  V(() => {
-    const v = Lt((N) => {
-      const b = N.at(0)?.target;
-      if (!b) return;
-      const { width: y, height: R } = b.getBoundingClientRect();
-      d(() => ({
-        width: y,
-        height: R
+  z(() => {
+    const v = St((N) => {
+      const p = N.at(0)?.target;
+      if (!p) return;
+      const { width: x, height: M } = p.getBoundingClientRect();
+      h(() => ({
+        width: x,
+        height: M
       }));
     }, 200), w = new ResizeObserver(v);
     return r.current && w.observe(r.current), () => w.disconnect();
   }, []);
-  const c = me(t?.width) ? t.width(o.width) : t?.width, a = me(t?.height) ? t.height(o.height) : t?.height, g = ke(c) ? o.width / c : 1, h = ke(a) ? o.height / a : 1, l = Math.min(g, h, 1), m = (a ?? o.height / l) || 0, k = (c ?? o.width / l) || 0;
+  const c = me(t?.width) ? t.width(o.width) : t?.width, d = me(t?.height) ? t.height(o.height) : t?.height, k = ke(c) ? o.width / c : 1, l = ke(d) ? o.height / d : 1, a = Math.min(k, l, 1), m = (d ?? o.height / a) || 0, b = (c ?? o.width / a) || 0;
   return /* @__PURE__ */ n("div", { ...s, className: I("tw:w-full tw:h-full tw:p-2 tw:bg-ic-ink-1s", s?.className), children: /* @__PURE__ */ n("div", { className: I("tw:w-full tw:h-full tw:overflow-hidden tw:relative"), ref: r, children: /* @__PURE__ */ n(
     "div",
     {
       style: {
-        transform: `scale(${l})`,
-        width: k,
+        transform: `scale(${a})`,
+        width: b,
         height: m,
-        marginLeft: (o.width - k) / 2,
+        marginLeft: (o.width - b) / 2,
         marginTop: (o.height - m) / 2
       },
       className: "tw:absolute",
       children: /* @__PURE__ */ n(
-        Et,
+        Mt,
         {
           sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
           allow: "autoplay; encrypted-media",
           width: c ?? "100%",
-          height: a ?? "100%",
-          children: /* @__PURE__ */ n(lr, { theme: i, children: e })
+          height: d ?? "100%",
+          children: /* @__PURE__ */ n(dr, { theme: i, children: e })
         }
       )
     }
   ) }) });
-}, lr = ({ children: e, theme: t }) => {
-  const { document: s, window: r } = St(), [i, o] = ee(!1), d = je(window.customElements.define.bind(window.customElements));
-  V(() => {
-    const a = d.current;
-    return r && (window.customElements.define = function(g, h, l) {
-      window.customElements.get(g) || r.customElements.define(g, h, l), a(g, h, l);
+}, dr = ({ children: e, theme: t }) => {
+  const { document: s, window: r } = Rt(), [i, o] = _(!1), h = je(window.customElements.define.bind(window.customElements));
+  z(() => {
+    const d = h.current;
+    return r && (window.customElements.define = function(k, l, a) {
+      window.customElements.get(k) || r.customElements.define(k, l, a), d(k, l, a);
     }), s?.head.replaceWith(document.head.cloneNode(!0)), o(!0), () => {
-      window.customElements.define = a;
+      window.customElements.define = d;
     };
   }, [s, r]);
-  const c = ar({
+  const c = lr({
     key: "css",
     container: s?.head
   });
-  return i ? /* @__PURE__ */ n(Ne, { children: /* @__PURE__ */ p(lt, { value: c, children: [
+  return i ? /* @__PURE__ */ n(Ne, { children: /* @__PURE__ */ g(lt, { value: c, children: [
     /* @__PURE__ */ n(
       dt,
       {
@@ -742,19 +742,19 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
     ),
     /* @__PURE__ */ n(xt, { theme: t, children: e })
   ] }) }) : null;
-}, dr = ({ render: e }) => {
-  const { id: t, renderer: s } = Rt((o) => ({
+}, hr = ({ render: e }) => {
+  const { id: t, renderer: s } = Lt((o) => ({
     resolvedId: st(o),
     renderer: nt(o).renderer
   })), {
     queryParams: { mode: r }
-  } = J(), { isActive: i } = W((o, d) => ({
-    isActive: d.getEvent("selected").contains(t) && t !== oe
+  } = te(), { isActive: i } = W((o, h) => ({
+    isActive: h.getEvent("selected").contains(t) && t !== B
   }));
-  return s ? Ae(s, { render: e }) : /* @__PURE__ */ p(K, { children: [
-    i && r === "full" && /* @__PURE__ */ p(K, { children: [
+  return s ? Ae(s, { render: e }) : /* @__PURE__ */ g(J, { children: [
+    i && r === "full" && /* @__PURE__ */ g(J, { children: [
       /* @__PURE__ */ n(ze, {}),
-      /* @__PURE__ */ n(Ge, {})
+      /* @__PURE__ */ n(qe, {})
     ] }),
     e
   ] });
@@ -762,7 +762,7 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
 <path d="M8 5L5 8L8 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M5 8H14C17.314 8 20 10.462 20 13.5V13.5C20 16.538 17.314 19 14 19H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, hr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, wr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 19.0004C11.158 19.0004 10.315 18.8224 9.496 18.5054" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20.882 12.4678C18.99 15.9668 15.495 18.9998 12 18.9998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M19.079 8.9209C19.77 9.7299 20.384 10.6119 20.882 11.5329C21.039 11.8239 21.039 12.1769 20.882 12.4679" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -770,72 +770,72 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
 <path d="M9.77299 14.2271C8.54299 12.9971 8.54299 11.0021 9.77299 9.77211C11.003 8.54211 12.998 8.54211 14.228 9.77211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M17.044 6.956C15.497 5.759 13.748 5 12 5C8.50499 5 5.00999 8.033 3.11799 11.533C2.96099 11.824 2.96099 12.177 3.11799 12.468C4.06399 14.217 5.40999 15.849 6.95599 17.045" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, wr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ur = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3.11799 12.467C2.96099 12.176 2.96099 11.823 3.11799 11.532C5.00999 8.033 8.50499 5 12 5C15.495 5 18.99 8.033 20.882 11.533C21.039 11.824 21.039 12.177 20.882 12.468C18.99 15.967 15.495 19 12 19C8.50499 19 5.00999 15.967 3.11799 12.467Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.1213 9.87868C15.2929 11.0502 15.2929 12.9497 14.1213 14.1213C12.9497 15.2929 11.0502 15.2929 9.87866 14.1213C8.70709 12.9497 8.70709 11.0502 9.87866 9.87868C11.0502 8.70711 12.9497 8.70711 14.1213 9.87868" stroke="currentColor" stroke-width="1.4286" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, ur = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M9.75 3C8.50736 3 7.5 4.00736 7.5 5.25C7.5 5.66421 7.83579 6 8.25 6C8.66421 6 9 5.66421 9 5.25C9 4.83579 9.33579 4.5 9.75 4.5H13.75C14.1642 4.5 14.5 4.83579 14.5 5.25V14.75C14.5 15.1642 14.1642 15.5 13.75 15.5H9.75C9.33579 15.5 9 15.1642 9 14.75C9 14.3358 8.66421 14 8.25 14C7.83579 14 7.5 14.3358 7.5 14.75C7.5 15.9926 8.50736 17 9.75 17H13.75C14.9926 17 16 15.9926 16 14.75V5.25C16 4.00736 14.9926 3 13.75 3H9.75Z" fill="currentColor"></path><path d="M12.25 10.75C12.6642 10.75 13 10.4142 13 10C13 9.58579 12.6642 9.25 12.25 9.25L6.56066 9.25L7.53033 8.28033C7.82322 7.98744 7.82322 7.51256 7.53033 7.21967C7.23744 6.92678 6.76256 6.92678 6.46967 7.21967L4.21967 9.46967C4.07902 9.61032 4 9.80109 4 10C4 10.1989 4.07902 10.3897 4.21967 10.5303L6.46967 12.7803C6.76256 13.0732 7.23744 13.0732 7.53033 12.7803C7.82322 12.4874 7.82322 12.0126 7.53033 11.7197L6.56066 10.75H12.25Z" fill="currentColor"></path></svg>', ye = rt(), fr = () => {
+`, fr = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M9.75 3C8.50736 3 7.5 4.00736 7.5 5.25C7.5 5.66421 7.83579 6 8.25 6C8.66421 6 9 5.66421 9 5.25C9 4.83579 9.33579 4.5 9.75 4.5H13.75C14.1642 4.5 14.5 4.83579 14.5 5.25V14.75C14.5 15.1642 14.1642 15.5 13.75 15.5H9.75C9.33579 15.5 9 15.1642 9 14.75C9 14.3358 8.66421 14 8.25 14C7.83579 14 7.5 14.3358 7.5 14.75C7.5 15.9926 8.50736 17 9.75 17H13.75C14.9926 17 16 15.9926 16 14.75V5.25C16 4.00736 14.9926 3 13.75 3H9.75Z" fill="currentColor"></path><path d="M12.25 10.75C12.6642 10.75 13 10.4142 13 10C13 9.58579 12.6642 9.25 12.25 9.25L6.56066 9.25L7.53033 8.28033C7.82322 7.98744 7.82322 7.51256 7.53033 7.21967C7.23744 6.92678 6.76256 6.92678 6.46967 7.21967L4.21967 9.46967C4.07902 9.61032 4 9.80109 4 10C4 10.1989 4.07902 10.3897 4.21967 10.5303L6.46967 12.7803C6.76256 13.0732 7.23744 13.0732 7.53033 12.7803C7.82322 12.4874 7.82322 12.0126 7.53033 11.7197L6.56066 10.75H12.25Z" fill="currentColor"></path></svg>', ye = rt(), pr = () => {
   const {
     queryParams: { mode: e, screen: t },
     setQueryParams: s
-  } = J(), { actions: r, canRedo: i, canUndo: o } = W((h, l) => ({
-    enabled: h.options.enabled,
-    canUndo: l.history.canUndo(),
-    canRedo: l.history.canRedo()
-  })), d = (h) => {
+  } = te(), { actions: r, canRedo: i, canUndo: o } = W((l, a) => ({
+    enabled: l.options.enabled,
+    canUndo: a.history.canUndo(),
+    canRedo: a.history.canRedo()
+  })), h = (l) => {
     s({
-      screen: h
+      screen: l
     });
   }, c = () => {
     s({ mode: e === "full" ? "compact" : "full" });
-  }, a = () => {
+  }, d = () => {
     ye.emit("close");
-  }, g = () => {
+  }, k = () => {
     r.selectNode(), ye.emit("submit");
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     "div",
     {
       className: I(
         "tw:flex tw:items-center tw:gap-4 tw:p-2 tw:justify-between tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm"
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
-          /* @__PURE__ */ n(j, { size: "32", onClick: a, children: /* @__PURE__ */ n(E, { source: ur }) }),
-          /* @__PURE__ */ n(qe, { onSelectionChange: d, value: t, children: Ue.map(({ icon: h, size: l }) => /* @__PURE__ */ n(j, { value: l, children: /* @__PURE__ */ n(E, { source: h }) }, l)) }),
-          /* @__PURE__ */ p("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: [
+        /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
+          /* @__PURE__ */ n(j, { size: "32", onClick: d, children: /* @__PURE__ */ n(E, { source: fr }) }),
+          /* @__PURE__ */ n(Ge, { onSelectionChange: h, value: t, children: Ue.map(({ icon: l, size: a }) => /* @__PURE__ */ n(j, { value: a, children: /* @__PURE__ */ n(E, { source: l }) }, a)) }),
+          /* @__PURE__ */ g("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: [
             /* @__PURE__ */ n(j, { onClick: r.history.undo, disabled: !o, children: /* @__PURE__ */ n(E, { source: xe }) }),
             /* @__PURE__ */ n(j, { onClick: r.history.redo, disabled: !i, children: /* @__PURE__ */ n(E, { source: xe, className: "tw:rotate-180" }) })
           ] }),
-          /* @__PURE__ */ n("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: /* @__PURE__ */ n(j, { onClick: c, children: /* @__PURE__ */ n(E, { source: e === "full" ? wr : hr }) }) })
+          /* @__PURE__ */ n("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: /* @__PURE__ */ n(j, { onClick: c, children: /* @__PURE__ */ n(E, { source: e === "full" ? ur : wr }) }) })
         ] }),
-        /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ n(Le, { onClick: g, children: "Save" }) })
+        /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ n(Le, { onClick: k, children: "Save" }) })
       ]
     }
   );
-}, pr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, gr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 19.9997L16.3763 16.376" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M4 11.25C4 15.2541 7.24594 18.5 11.25 18.5C15.2541 18.5 18.5 15.2541 18.5 11.25C18.5 7.24594 15.2541 4 11.25 4V4C7.24606 4.00029 4.00029 7.24606 4 11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, gr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, mr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, mr = ({ elements: e, sections: t }) => /* @__PURE__ */ p("div", { className: "tw:flex tw:flex-col tw:h-full", children: [
-  /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:p-2 tw:gap-3", children: /* @__PURE__ */ n(Ee, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ n(E, { source: pr }) }) }),
-  /* @__PURE__ */ p(Ze, { defaultIndex: 1, className: "tw:flex-1 tw:overflow-hidden tw:border-t tw:border-ic-white-1s", children: [
-    /* @__PURE__ */ p(Qe, { children: [
+`, kr = ({ elements: e, sections: t }) => /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:h-full", children: [
+  /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:p-2 tw:gap-3", children: /* @__PURE__ */ n(Ee, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ n(E, { source: gr }) }) }),
+  /* @__PURE__ */ g(Ze, { defaultIndex: 1, className: "tw:flex-1 tw:overflow-hidden tw:border-t tw:border-ic-white-1s", children: [
+    /* @__PURE__ */ g(Qe, { children: [
       /* @__PURE__ */ n(we, { className: "tw:flex-1", children: "Sections" }),
       /* @__PURE__ */ n(we, { className: "tw:flex-1", children: "Elements" })
     ] }),
-    /* @__PURE__ */ p(Ye, { className: "tw:flex-1 tw:overflow-hidden", children: [
-      /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(se, { className: "tw:h-full tw:py-2", children: t.map((s, r) => /* @__PURE__ */ n(vr, { group: s }, r)) }) }),
-      /* @__PURE__ */ n(ue, { className: "tw:h-full tw:overflow-hidden", children: /* @__PURE__ */ n(se, { className: "tw:h-full tw:py-2", children: e.map((s, r) => /* @__PURE__ */ n(kr, { group: s }, r)) }) })
+    /* @__PURE__ */ g(Ye, { className: "tw:flex-1 tw:overflow-hidden", children: [
+      /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(oe, { className: "tw:h-full tw:py-2", children: t?.map((s, r) => /* @__PURE__ */ n(br, { group: s }, r)) }) }),
+      /* @__PURE__ */ n(ue, { className: "tw:h-full tw:overflow-hidden", children: /* @__PURE__ */ n(oe, { className: "tw:h-full tw:py-2", children: e?.map((s, r) => /* @__PURE__ */ n(vr, { group: s }, r)) }) })
     ] })
   ] })
-] }), kr = ({ group: e }) => {
+] }), vr = ({ group: e }) => {
   const [t, s] = De(!0), { actions: r, connectors: i } = W();
-  return /* @__PURE__ */ p("div", { className: "tw:flex tw:flex-col tw:text-sm", children: [
-    /* @__PURE__ */ n(Le, { onClick: s, className: "tw:bg-transparent", children: /* @__PURE__ */ p("div", { className: "tw:flex tw:items-center tw:justify-between tw:flex-1 tw:text-sm", children: [
+  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:text-sm", children: [
+    /* @__PURE__ */ n(Le, { onClick: s, className: "tw:bg-transparent", children: /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:justify-between tw:flex-1 tw:text-sm", children: [
       e.name,
       /* @__PURE__ */ n(
         E,
@@ -847,7 +847,7 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ n(Ke, { open: t, children: /* @__PURE__ */ n("div", { className: "tw:px-4 tw:py-2 tw:grid tw:grid-cols-2 tw:gap-4", children: e.elements.map((o, d) => /* @__PURE__ */ p("div", { className: "tw:space-y-1", children: [
+    /* @__PURE__ */ n(Ke, { open: t, children: /* @__PURE__ */ n("div", { className: "tw:px-4 tw:py-2 tw:grid tw:grid-cols-2 tw:gap-4", children: e.elements.map((o, h) => /* @__PURE__ */ g("div", { className: "tw:space-y-1", children: [
       /* @__PURE__ */ n(
         "div",
         {
@@ -858,8 +858,8 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
           ),
           ref: (c) => {
             c && i.create(c, o.template, {
-              onCreate(a) {
-                (typeof o.autoFocus == "function" ? o.autoFocus(a) : o.autoFocus) && r.selectNode(a.rootNodeId), o.onCreate?.(a);
+              onCreate(d) {
+                (typeof o.autoFocus == "function" ? o.autoFocus(d) : o.autoFocus) && r.selectNode(d.rootNodeId), o.onCreate?.(d);
               }
             });
           },
@@ -867,10 +867,10 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
         }
       ),
       /* @__PURE__ */ n("p", { className: "tw:text-xs tw:mx-auto tw:text-center", children: o.name })
-    ] }, d)) }) })
+    ] }, h)) }) })
   ] });
-}, vr = ({ group: e }) => {
-  const [t, s] = ee(!1), { refs: r, floatingStyles: i, context: o } = wt({
+}, br = ({ group: e }) => {
+  const [t, s] = _(!1), { refs: r, floatingStyles: i, context: o } = wt({
     open: t,
     onOpenChange: s,
     placement: "right-start",
@@ -878,54 +878,67 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
       ft(),
       pt({
         apply({ elements: m }) {
-          const k = {
+          const b = {
             zIndex: `${yt}`,
             height: `${m.reference.getBoundingClientRect().height}px`
           };
-          Object.assign(m.floating.style, k);
+          Object.assign(m.floating.style, b);
         }
       })
     ],
     whileElementsMounted: ut
   });
-  V(() => {
+  z(() => {
     r.setPositionReference(document.querySelector("aside"));
   }, [r]);
-  const d = gt(o, { move: !1, handleClose: mt() }), c = kt(o), a = vt(o), g = bt(o), { getReferenceProps: h, getFloatingProps: l } = Ct([d, c, a, g]);
-  return /* @__PURE__ */ p(K, { children: [
-    /* @__PURE__ */ p(
+  const h = gt(o, { move: !1, handleClose: mt() }), c = kt(o), d = vt(o), k = bt(o), { getReferenceProps: l, getFloatingProps: a } = Ct([h, c, d, k]);
+  return /* @__PURE__ */ g(J, { children: [
+    /* @__PURE__ */ g(
       "button",
       {
         className: I(
           "tw:w-full tw:text-left tw:flex tw:items-center tw:text-ic-white-5s tw:gap-2 tw:p-2 tw:rounded-lg",
           "tw:hover:text-ic-white-6s tw:hover:bg-ic-white-1s tw:hover:font-medium"
         ),
-        ...h(),
+        ...l(),
         ref: r.setReference,
         children: [
           /* @__PURE__ */ n("div", { className: "tw:bg-ic-white-1s tw:p-1.5 tw:rounded-lg", children: /* @__PURE__ */ n(E, { ...e.icon }) }),
           /* @__PURE__ */ n("span", { className: "tw:flex-1 tw:truncate", children: e.name }),
-          /* @__PURE__ */ n(E, { className: "tw:rotate-180", source: gr })
+          /* @__PURE__ */ n(E, { className: "tw:rotate-180", source: mr })
         ]
       }
     ),
-    t && /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ n("div", { style: i, ...l(), ref: r.setFloating, children: /* @__PURE__ */ p("div", { className: "tw:h-full tw:flex tw:flex-col tw:border-l tw:border-t tw:border-ic-white-2s tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm", children: [
+    t && /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ n("div", { style: i, ...a(), ref: r.setFloating, children: /* @__PURE__ */ g("div", { className: "tw:h-full tw:flex tw:flex-col tw:border-l tw:border-t tw:border-ic-white-2s tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm", children: [
       /* @__PURE__ */ n("div", { className: "tw:h-12 tw:px-2 tw:flex tw:items-center", children: /* @__PURE__ */ n("h6", { className: "tw:font-medium", children: e.name }) }),
-      /* @__PURE__ */ n(se, { className: "tw:flex-1 tw:px-3", children: /* @__PURE__ */ n("div", { className: "tw:flex tw:flex-col tw:gap-4", children: e.sections.map((m, k) => /* @__PURE__ */ ht(br, { ...m, key: k })) }) })
+      /* @__PURE__ */ n(oe, { className: "tw:flex-1 tw:px-3", children: /* @__PURE__ */ n("div", { className: "tw:flex tw:flex-col tw:gap-4", children: e.sections.map((m, b) => /* @__PURE__ */ ht(Cr, { ...m, key: b })) }) })
     ] }) }) })
   ] });
-}, br = ({ template: e, autoFocus: t = !0, onCreate: s }) => {
-  const [, r] = ee(!1), [i] = ae(), { actions: o, connectors: d, resolver: c } = W((a) => ({
-    resolver: a.options.resolver
-  }));
+}, Cr = ({ template: e, autoFocus: t = !0, onCreate: s }) => {
+  const [, r] = _(!1), [i] = ae(), { actions: o, connectors: h, resolver: c, query: d } = W((l) => ({
+    resolver: l.options.resolver
+  })), k = _(() => {
+    const l = typeof e == "function" ? e() : e;
+    let a;
+    "rootNodeId" in l ? a = l : a = d.parseReactElement(l).toNodeTree();
+    const { rootNodeId: m, nodes: b } = a, v = {};
+    return Object.entries(b).forEach(([w, N]) => {
+      const p = Et(N.data, c), x = w === m ? B : w;
+      v[x] = {
+        ...p,
+        parent: p.parent === m ? B : p.parent,
+        nodes: p.nodes?.map((M) => M === m ? B : M)
+      };
+    }), v;
+  })[0];
   return /* @__PURE__ */ n(
     "div",
     {
       className: "tw:cursor-grab tw:border tw:border-ic-white-1s tw:rounded-lg tw:overflow-hidden",
-      ref: (a) => {
-        a && d.create(a, e, {
-          onCreate(g) {
-            t && o.selectNode(g.rootNodeId), s?.(g);
+      ref: (l) => {
+        l && h.create(l, e, {
+          onCreate(a) {
+            t && o.selectNode(a.rootNodeId), s?.(a);
           }
         });
       },
@@ -940,12 +953,12 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
             }
           },
           viewport: { width: Nt.md.minWidth },
-          children: /* @__PURE__ */ n(Me, { resolver: c, children: /* @__PURE__ */ n($e, {}) })
+          children: /* @__PURE__ */ n(Me, { resolver: c, children: /* @__PURE__ */ n(Re, { data: k }) })
         }
       ) }) })
     }
   );
-}, Cr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, xr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.5 2H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 9.5V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M10.257 16.6214L7.075 13.4394C6.489 12.8534 6.489 11.9034 7.075 11.3184V11.3184C7.661 10.7324 8.611 10.7324 9.196 11.3184" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -956,25 +969,25 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
 <path d="M2 17V18C2 19.105 2.895 20 4 20H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20 5V4C20 2.895 19.105 2 18 2H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, xr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, yr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="6.49771" cy="5.49762" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <circle cx="6.49771" cy="18.503" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6.49771 7.99854V16.0019" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <circle cx="17.5023" cy="13.0006" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6.49771 7.99854V7.99854C6.49771 10.7611 8.73722 13.0006 11.4998 13.0006H15.0013" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, yr = (e) => {
+`, Nr = (e) => {
   const { query: t, actions: s } = W(), {
     id: r,
     expanded: i,
     actions: o,
-    displayName: d,
+    displayName: h,
     children: c,
-    depth: a
-  } = $t((k) => ({
-    expanded: k.expanded,
-    displayName: Re(t.node(k.id).get())
-  })), { selected: g, selectable: h } = W((k, v) => {
+    depth: d
+  } = jt((b) => ({
+    expanded: b.expanded,
+    displayName: $e(t.node(b.id).get())
+  })), { selected: k, selectable: l } = W((b, v) => {
     const w = v.node(r).get();
     return {
       selected: v.getEvent("selected").contains(r),
@@ -982,38 +995,38 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
       selectable: it(w)
     };
   });
-  V(() => {
-    r === oe && o.setExpandedState(!0);
-  }, [o, r]), V(() => {
+  z(() => {
+    r === B && o.setExpandedState(!0);
+  }, [o, r]), z(() => {
     if (c.length === 0) return;
     c.some((v) => {
       const w = t.getEvent("selected").all();
-      return w.includes(v) ? !0 : t.node(v).descendants(!0).some((b) => w.includes(b));
+      return w.includes(v) ? !0 : t.node(v).descendants(!0).some((p) => w.includes(p));
     }) && o.setExpandedState(!0);
   }, [c, o, t]);
-  const l = () => {
+  const a = () => {
     s.selectNode(r);
-  }, m = (k) => {
-    k.stopPropagation(), o.toggleLayer();
+  }, m = (b) => {
+    b.stopPropagation(), o.toggleLayer();
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     "div",
     {
       className: "tw:py-1",
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ g(
           "div",
           {
-            onClick: l,
+            onClick: a,
             style: {
-              paddingLeft: Math.max(0, a - 1) * 16
+              paddingLeft: Math.max(0, d - 1) * 16
             },
             className: I(
               "tw:flex tw:items-center tw:gap-0.5 tw:cursor-pointer tw:rounded-1 tw:pr-2 tw:py-1 tw:border tw:border-ic-white-1s tw:hover:bg-ic-white-1s",
               {
-                hidden: r === oe,
-                "tw:bg-ic-black-7s": g,
-                "tw:pointer-events-none": !h
+                hidden: r === B,
+                "tw:bg-ic-black-7s": k,
+                "tw:pointer-events-none": !l
               }
             ),
             children: [
@@ -1026,14 +1039,14 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
                   size: 16,
                   source: Se
                 }
-              ) }) : /* @__PURE__ */ n("div", { className: "tw:p-1", children: /* @__PURE__ */ n(E, { size: 16, source: xr }) }),
+              ) }) : /* @__PURE__ */ n("div", { className: "tw:p-1", children: /* @__PURE__ */ n(E, { size: 16, source: yr }) }),
               /* @__PURE__ */ n(
                 "span",
                 {
                   className: I("tw:flex-1 tw:truncate", {
-                    "tw:text-ic-white-3s": !h
+                    "tw:text-ic-white-3s": !l
                   }),
-                  children: d
+                  children: h
                 }
               )
             ]
@@ -1043,11 +1056,11 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
       ]
     }
   );
-}, Nr = ({ onClose: e }) => {
-  const t = Dt(), s = (r) => {
+}, Lr = ({ onClose: e }) => {
+  const t = It(), s = (r) => {
     t.start(r);
   };
-  return /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ g(
     Xe.div,
     {
       drag: !0,
@@ -1056,62 +1069,62 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
       style: { zIndex: 1e5, width: 320, height: 400, top: 80, right: 40 },
       className: "tw:fixed tw:rounded-2 tw:bg-ic-ink-6s tw:text-white tw:flex tw:flex-col tw:border tw:border-ic-white-2s",
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ g(
           "div",
           {
             onPointerDown: s,
             className: "tw:py-2 tw:cursor-grab tw:flex tw:items-center tw:justify-between tw:px-4",
             children: [
-              /* @__PURE__ */ p("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
-                /* @__PURE__ */ n(E, { source: Cr }),
+              /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+                /* @__PURE__ */ n(E, { source: xr }),
                 /* @__PURE__ */ n("p", { className: "tw:text-sm tw:font-medium", children: "Layers" })
               ] }),
               /* @__PURE__ */ n(j, { onClick: e, children: /* @__PURE__ */ n(E, { source: Je }) })
             ]
           }
         ),
-        /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s tw:p-2", children: /* @__PURE__ */ n(Mt, { renderLayer: yr }) })
+        /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s tw:p-2", children: /* @__PURE__ */ n($t, { renderLayer: Nr }) })
       ]
     }
   ) });
-}, Lr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, Er = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.024L11.987 11.049L21 7.024L12.013 3L3 7.024Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M15.436 14.484L21 16.976L11.987 21L3 16.976L8.564 14.491" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M15.436 9.50903L21 12L11.987 16.024L3 12L8.564 9.51603" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Er = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Sr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5 12H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M10 7L5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M10 17L5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Sr = ({ insert: e }) => {
+`, Mr = ({ insert: e }) => {
   const [t, s] = De(!1), {
     queryParams: {
       action: r = "insert"
       /* Insert */
     },
     setQueryParams: i
-  } = J(), { actions: o, isDeletable: d, focusedNode: c } = W((l, m) => {
-    const k = m.getEvent("selected").first(), v = k ? m.node(k) : null;
+  } = te(), { actions: o, isDeletable: h, focusedNode: c } = W((a, m) => {
+    const b = m.getEvent("selected").first(), v = b ? m.node(b) : null;
     return {
-      enabled: l.options.enabled,
+      enabled: a.options.enabled,
       isDeletable: !!(v?.isDeletable() && (v.get().data.custom?.deletable ?? !0)),
       focusedNode: v?.get()
     };
-  }), a = () => {
+  }), d = () => {
     o.selectNode();
-  }, g = (l) => {
-    o.delete(l.currentTarget.value);
-  }, h = (l) => {
-    const m = l.currentTarget.value;
-    m === "layers" ? s() : (a(), i({
+  }, k = (a) => {
+    o.delete(a.currentTarget.value);
+  }, l = (a) => {
+    const m = a.currentTarget.value;
+    m === "layers" ? s() : (d(), i({
       action: m
     }));
   };
-  return /* @__PURE__ */ p(K, { children: [
-    /* @__PURE__ */ p("aside", { className: "tw:flex tw:items-stretch tw:bg-ic-ink-6s tw:relative tw:border-t tw:border-ic-white-2s tw:text-ic-white-6s tw:text-sm", children: [
-      /* @__PURE__ */ p("div", { className: "tw:px-1 tw:flex tw:flex-col tw:gap-1", children: [
-        !!e && /* @__PURE__ */ p(Ne, { children: [
+  return /* @__PURE__ */ g(J, { children: [
+    /* @__PURE__ */ g("aside", { className: "tw:flex tw:items-stretch tw:bg-ic-ink-6s tw:relative tw:border-t tw:border-ic-white-2s tw:text-ic-white-6s tw:text-sm", children: [
+      /* @__PURE__ */ g("div", { className: "tw:px-1 tw:flex tw:flex-col tw:gap-1", children: [
+        !!e && /* @__PURE__ */ g(Ne, { children: [
           /* @__PURE__ */ n(
             j,
             {
@@ -1119,7 +1132,7 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
                 content: "Insert",
                 placement: "right"
               },
-              onClick: h,
+              onClick: l,
               value: "insert",
               className: "tw:relative",
               size: "32",
@@ -1135,25 +1148,25 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
               content: "Layers",
               placement: "right"
             },
-            onClick: h,
+            onClick: l,
             value: "layers",
             className: "tw:relative",
             size: "32",
-            children: /* @__PURE__ */ n(E, { source: Lr })
+            children: /* @__PURE__ */ n(E, { source: Er })
           }
         )
       ] }),
-      /* @__PURE__ */ p(
+      /* @__PURE__ */ g(
         "div",
         {
           className: I("tw:relative tw:flex tw:flex-col tw:border-l tw:border-ic-white-1s tw:w-72 tw:overflow-auto"),
           children: [
-            !c?.related.inspector && /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto scrollbar", children: r === "insert" && !!e && /* @__PURE__ */ n(mr, { elements: e.elements, sections: e.sections }) }),
-            !!c?.related?.inspector && /* @__PURE__ */ p("div", { className: "tw:flex tw:flex-col tw:flex-1 tw:overflow-hidden", children: [
-              /* @__PURE__ */ p("div", { className: "tw:flex tw:items-center tw:gap-2 tw:px-2 tw:py-2", children: [
-                /* @__PURE__ */ n(j, { onClick: a, children: /* @__PURE__ */ n(E, { source: Er }) }),
-                /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-hidden", children: /* @__PURE__ */ n(Ee, { fullWidth: !0, value: Re(c), size: "32" }) }),
-                d && /* @__PURE__ */ n(j, { value: c.id, onClick: g, children: /* @__PURE__ */ n(E, { className: "tw:text-ic-red-4s", source: et }) })
+            !c?.related.inspector && /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto scrollbar", children: r === "insert" && !!e && /* @__PURE__ */ n(kr, { elements: e.elements, sections: e.sections }) }),
+            !!c?.related?.inspector && /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:flex-1 tw:overflow-hidden", children: [
+              /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-2 tw:px-2 tw:py-2", children: [
+                /* @__PURE__ */ n(j, { onClick: d, children: /* @__PURE__ */ n(E, { source: Sr }) }),
+                /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-hidden", children: /* @__PURE__ */ n(Ee, { fullWidth: !0, value: $e(c), size: "32" }) }),
+                h && /* @__PURE__ */ n(j, { value: c.id, onClick: k, children: /* @__PURE__ */ n(E, { className: "tw:text-ic-red-4s", source: et }) })
               ] }),
               /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s scrollbar-hidden", children: /* @__PURE__ */ n(at, { fallback: null, children: Ae(c.related.inspector) }) })
             ] })
@@ -1161,33 +1174,33 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
         }
       )
     ] }),
-    t && /* @__PURE__ */ n(Nr, { onClose: s })
+    t && /* @__PURE__ */ n(Lr, { onClose: s })
   ] });
-}, Hr = ({ theme: e, insert: t }) => {
+}, Vr = ({ theme: e, insert: t, resolver: s }) => {
   const {
-    queryParams: { screen: s }
-  } = J();
+    queryParams: { screen: r }
+  } = te();
   return ae({
     theme: e
-  }), /* @__PURE__ */ n(Me, { enabled: !0, onRender: dr, children: /* @__PURE__ */ p("div", { className: "tw:flex tw:flex-col tw:w-screen tw:h-screen tw:bg-ic-ink-6s tw:text-ic-white-6s", children: [
-    /* @__PURE__ */ n(fr, {}),
-    /* @__PURE__ */ p("div", { className: "tw:flex-1 tw:overflow-hidden tw:flex", children: [
-      /* @__PURE__ */ n(Sr, { insert: t }),
+  }), /* @__PURE__ */ n(Me, { enabled: !0, onRender: hr, resolver: s, children: /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:w-screen tw:h-screen tw:bg-ic-ink-6s tw:text-ic-white-6s", children: [
+    /* @__PURE__ */ n(pr, {}),
+    /* @__PURE__ */ g("div", { className: "tw:flex-1 tw:overflow-hidden tw:flex", children: [
+      /* @__PURE__ */ n(Mr, { insert: t }),
       /* @__PURE__ */ n(
         Ve,
         {
           viewport: {
-            width: (r) => s === "lg" ? Math.max(r, fe[s]) : fe[s]
+            width: (i) => r === "lg" ? Math.max(i, fe[r]) : fe[r]
           },
-          children: /* @__PURE__ */ n($e, { children: /* @__PURE__ */ n(tt, {}) })
+          children: /* @__PURE__ */ n(Re, { children: /* @__PURE__ */ n(tt, {}) })
         }
       )
     ] })
   ] }) });
 };
 export {
-  Hr as Editor,
-  J as useEditorQueryParams,
-  zr as useEditorResponsive,
+  Vr as Editor,
+  te as useEditorQueryParams,
+  qr as useEditorResponsive,
   ae as useEditorState
 };