@janbox/storefront-builder 1.0.4 → 1.0.6

package/dist/editor.js

@@ -1,18 +1,17 @@
-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-CBDllFpx.js";
-import { t as qr } from "./index-CBDllFpx.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 $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 { 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 {
+import { jsx as n, Fragment as ye, jsxs as k } from "@emotion/react/jsx-runtime";
+import { u as ze, a as te, b as re, D as Ve, c as _e, W as j, d as E, e as qe, f as Ge, g as Ne, h as Le, i as Ue, j as Ze, k as ue, l as Qe, m as we, n as ie, A as Ee, o as Ye, C as Se, p as Me, q as Ke, r as Xe, T as Je, s as fe, R as et } from "./index-BU9pvpw_.js";
+import { t as zr } from "./index-BU9pvpw_.js";
+import { useRef as Re, useState as F, useEffect as _, createElement as $e, Fragment as J, Suspense as tt } from "react";
+import { c as I, N as pe, B as ge, g as rt, a as nt, u as W, W as st, b as je, i as ot, P as it } from "./countdown-timer.node-CAsCNVin.js";
+import { useToggle as Ae } from "usehooks-ts";
+import { CacheProvider as ct, Global as at, createElement as lt } from "@emotion/react";
+import { useFloating as dt, autoUpdate as ht, flip as ut, size as wt, useHover as ft, safePolygon as pt, useFocus as gt, useDismiss as mt, useRole as kt, useInteractions as vt, FloatingPortal as De } from "@floating-ui/react";
+import { ThemeProvider as bt, FLOATING_Z_INDEX as Ct, breakpoint as xt } from "@janbox/storefront-ui/theme";
+import { useNode as yt, ROOT_NODE as B, serializeNode as Nt } from "@craftjs/core";
+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 Rt } from "@craftjs/layers";
+class $t {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -45,22 +44,22 @@ class At {
     });
   }
 }
-const Dt = () => new At();
-function It() {
-  return _e(Dt);
+const jt = () => new $t();
+function At() {
+  return ze(jt);
 }
-function Tt(e) {
+function Dt(e) {
   if (e.sheet)
     return e.sheet;
   for (var t = 0; t < document.styleSheets.length; t++)
     if (document.styleSheets[t].ownerNode === e)
       return document.styleSheets[t];
 }
-function Pt(e) {
+function It(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 Wt = /* @__PURE__ */ (function() {
+var Tt = /* @__PURE__ */ (function() {
   function e(s) {
     var r = this;
     this._insertTag = function(i) {
@@ -72,10 +71,10 @@ var Wt = /* @__PURE__ */ (function() {
   return t.hydrate = function(r) {
     r.forEach(this._insertTag);
   }, t.insert = function(r) {
-    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(Pt(this));
+    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(It(this));
     var i = this.tags[this.tags.length - 1];
     if (this.isSpeedy) {
-      var o = Tt(i);
+      var o = Dt(i);
       try {
         o.insertRule(r, o.cssRules.length);
       } catch {
@@ -89,20 +88,20 @@ var Wt = /* @__PURE__ */ (function() {
       return (i = r.parentNode) == null ? void 0 : i.removeChild(r);
     }), this.tags = [], this.ctr = 0;
   }, e;
-})(), 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) {
+})(), S = "-ms-", ee = "-moz-", p = "-webkit-", Ie = "comm", le = "rule", de = "decl", Pt = "@import", Te = "@keyframes", Wt = "@layer", Bt = Math.abs, ne = String.fromCharCode, Ot = Object.assign;
+function Ft(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) {
+function Pe(e) {
   return e.trim();
 }
-function _t(e, t) {
+function Ht(e, t) {
   return (e = t.exec(e)) ? e[0] : e;
 }
-function f(e, t, s) {
+function g(e, t, s) {
   return e.replace(t, s);
 }
-function ie(e, t) {
+function ce(e, t) {
   return e.indexOf(t);
 }
 function L(e, t) {
@@ -123,30 +122,30 @@ function Q(e, t) {
 function zt(e, t) {
   return e.map(t).join("");
 }
-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: "" };
+var se = 1, H = 1, We = 0, R = 0, y = 0, z = "";
+function oe(e, t, s, r, i, o, h) {
+  return { value: e, root: t, parent: s, type: r, props: i, children: o, line: se, column: H, length: h, return: "" };
 }
 function V(e, t) {
-  return Ht(se("", null, null, "", null, null, 0), e, { length: -e.length }, t);
+  return Ot(oe("", null, null, "", null, null, 0), e, { length: -e.length }, t);
 }
-function qt() {
+function Vt() {
   return y;
 }
-function Gt() {
-  return y = R > 0 ? L(H, --R) : 0, F--, y === 10 && (F = 1, ne--), y;
+function _t() {
+  return y = R > 0 ? L(z, --R) : 0, H--, y === 10 && (H = 1, se--), y;
 }
 function $() {
-  return y = R < Be ? L(H, R++) : 0, F++, y === 10 && (F = 1, ne++), y;
+  return y = R < We ? L(z, R++) : 0, H++, y === 10 && (H = 1, se++), y;
 }
 function T() {
-  return L(H, R);
+  return L(z, R);
 }
 function Y() {
   return R;
 }
 function U(e, t) {
-  return q(H, e, t);
+  return q(z, e, t);
 }
 function G(e) {
   switch (e) {
@@ -186,26 +185,26 @@ function G(e) {
   }
   return 0;
 }
-function Oe(e) {
-  return ne = F = 1, Be = D(H = e), R = 0, [];
+function Be(e) {
+  return se = H = 1, We = D(z = e), R = 0, [];
 }
-function Fe(e) {
-  return H = "", e;
+function Oe(e) {
+  return z = "", e;
 }
 function K(e) {
-  return We(U(R - 1, ce(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+  return Pe(U(R - 1, ae(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
-function Ut(e) {
+function qt(e) {
   for (; (y = T()) && y < 33; )
     $();
   return G(e) > 2 || G(y) > 3 ? "" : " ";
 }
-function Zt(e, t) {
+function Gt(e, t) {
   for (; --t && $() && !(y < 48 || y > 102 || y > 57 && y < 65 || y > 70 && y < 97); )
     ;
   return U(e, Y() + (t < 6 && T() == 32 && $() == 32));
 }
-function ce(e) {
+function ae(e) {
   for (; $(); )
     switch (y) {
       // ] ) " '
@@ -214,11 +213,11 @@ function ce(e) {
       // " '
       case 34:
       case 39:
-        e !== 34 && e !== 39 && ce(y);
+        e !== 34 && e !== 39 && ae(y);
         break;
       // (
       case 40:
-        e === 41 && ce(e);
+        e === 41 && ae(e);
         break;
       // \
       case 92:
@@ -227,27 +226,27 @@ function ce(e) {
     }
   return R;
 }
-function Qt(e, t) {
+function Ut(e, t) {
   for (; $() && e + y !== 57; )
     if (e + y === 84 && T() === 47)
       break;
-  return "/*" + U(t, R - 1) + "*" + re(e === 47 ? e : $());
+  return "/*" + U(t, R - 1) + "*" + ne(e === 47 ? e : $());
 }
-function Yt(e) {
+function Zt(e) {
   for (; !G(T()); )
     $();
   return U(e, R);
 }
-function Kt(e) {
-  return Fe(X("", null, null, null, [""], e = Oe(e), 0, [0], e));
+function Qt(e) {
+  return Oe(X("", null, null, null, [""], e = Be(e), 0, [0], e));
 }
-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 = $()) {
+function X(e, t, s, r, i, o, h, c, u) {
+  for (var b = 0, l = 0, a = h, f = 0, v = 0, w = 0, d = 1, N = 1, m = 1, x = 0, M = "", Z = i, P = o, A = r, C = M; N; )
+    switch (w = x, x = $()) {
       // (
       case 40:
-        if (v != 108 && L(C, a - 1) == 58) {
-          ie(C += f(K(x), "&", "&\f"), "&\f") != -1 && (p = -1);
+        if (w != 108 && L(C, a - 1) == 58) {
+          ce(C += g(K(x), "&", "&\f"), "&\f") != -1 && (m = -1);
           break;
         }
       // " ' [
@@ -261,28 +260,28 @@ function X(e, t, s, r, i, o, h, c, d) {
       case 10:
       case 13:
       case 32:
-        C += Ut(v);
+        C += qt(w);
         break;
       // \
       case 92:
-        C += Zt(Y() - 1, 7);
+        C += Gt(Y() - 1, 7);
         continue;
       // /
       case 47:
         switch (T()) {
           case 42:
           case 47:
-            Q(Xt(Qt($(), Y()), t, s), d);
+            Q(Yt(Ut($(), Y()), t, s), u);
             break;
           default:
             C += "/";
         }
         break;
       // {
-      case 123 * w:
-        c[k++] = D(C) * p;
+      case 123 * d:
+        c[b++] = D(C) * m;
       // } ; \0
-      case 125 * w:
+      case 125 * d:
       case 59:
       case 0:
         switch (x) {
@@ -292,18 +291,18 @@ function X(e, t, s, r, i, o, h, c, d) {
             N = 0;
           // ;
           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);
+            m == -1 && (C = g(C, /\f/g, "")), v > 0 && D(C) - a && Q(v > 32 ? be(C + ";", r, s, a - 1) : be(g(C, " ", "") + ";", r, s, a - 2), u);
             break;
           // @ ;
           case 59:
             C += ";";
           // { rule/at-rule
           default:
-            if (Q(A = ve(C, t, s, k, l, i, c, M, Z = [], P = [], a), o), x === 123)
+            if (Q(A = ve(C, t, s, b, 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) {
+                switch (f === 99 && L(C, 3) === 110 ? 100 : f) {
                   // d l m s
                   case 100:
                   case 108:
@@ -315,72 +314,72 @@ function X(e, t, s, r, i, o, h, c, d) {
                     X(C, A, A, A, [""], P, 0, c, P);
                 }
         }
-        k = l = b = 0, w = p = 1, M = C = "", a = h;
+        b = l = v = 0, d = m = 1, M = C = "", a = h;
         break;
       // :
       case 58:
-        a = 1 + D(C), b = v;
+        a = 1 + D(C), v = w;
       default:
-        if (w < 1) {
+        if (d < 1) {
           if (x == 123)
-            --w;
-          else if (x == 125 && w++ == 0 && Gt() == 125)
+            --d;
+          else if (x == 125 && d++ == 0 && _t() == 125)
             continue;
         }
-        switch (C += re(x), x * w) {
+        switch (C += ne(x), x * d) {
           // &
           case 38:
-            p = l > 0 ? 1 : (C += "\f", -1);
+            m = l > 0 ? 1 : (C += "\f", -1);
             break;
           // ,
           case 44:
-            c[k++] = (D(C) - 1) * p, p = 1;
+            c[b++] = (D(C) - 1) * m, m = 1;
             break;
           // @
           case 64:
-            T() === 45 && (C += K($())), m = T(), l = a = D(M = C += Yt(Y())), x++;
+            T() === 45 && (C += K($())), f = T(), l = a = D(M = C += Zt(Y())), x++;
             break;
           // -
           case 45:
-            v === 45 && D(C) == 2 && (w = 0);
+            w === 45 && D(C) == 2 && (d = 0);
         }
     }
   return o;
 }
-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 ve(e, t, s, r, i, o, h, c, u, b, l) {
+  for (var a = i - 1, f = i === 0 ? o : [""], v = he(f), w = 0, d = 0, N = 0; w < r; ++w)
+    for (var m = 0, x = q(e, a + 1, a = Bt(d = h[w])), M = e; m < v; ++m)
+      (M = Pe(d > 0 ? f[m] + " " + x : g(x, /&\f/g, f[m]))) && (u[N++] = M);
+  return oe(e, t, s, i === 0 ? le : c, u, b, l);
 }
-function Xt(e, t, s) {
-  return se(e, t, s, Te, re(qt()), q(e, 2, -2), 0);
+function Yt(e, t, s) {
+  return oe(e, t, s, Ie, ne(Vt()), q(e, 2, -2), 0);
 }
 function be(e, t, s, r) {
-  return se(e, t, s, de, q(e, 0, r), q(e, r + 1, -1), r);
+  return oe(e, t, s, de, q(e, 0, r), q(e, r + 1, -1), r);
 }
 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 Jt(e, t, s, r) {
+function Kt(e, t, s, r) {
   switch (e.type) {
-    case Ot:
+    case Wt:
       if (e.children.length) break;
-    case Bt:
+    case Pt:
     case de:
       return e.return = e.return || e.value;
-    case Te:
+    case Ie:
       return "";
-    case Pe:
+    case Te:
       return e.return = e.value + "{" + O(e.children, r) + "}";
     case le:
       e.value = e.props.join(",");
   }
   return D(s = O(e.children, r)) ? e.return = e.value + "{" + s + "}" : "";
 }
-function er(e) {
+function Xt(e) {
   var t = he(e);
   return function(s, r, i, o) {
     for (var h = "", c = 0; c < t; c++)
@@ -388,21 +387,21 @@ function er(e) {
     return h;
   };
 }
-function tr(e) {
+function Jt(e) {
   return function(t) {
     t.root || (t = t.return) && e(t);
   };
 }
-var rr = function(t, s, r) {
+var er = function(t, s, r) {
   for (var i = 0, o = 0; i = o, o = T(), i === 38 && o === 12 && (s[r] = 1), !G(o); )
     $();
   return U(t, R);
-}, nr = function(t, s) {
+}, tr = function(t, s) {
   var r = -1, i = 44;
   do
     switch (G(i)) {
       case 0:
-        i === 38 && T() === 12 && (s[r] = 1), t[r] += rr(R - 1, s, r);
+        i === 38 && T() === 12 && (s[r] = 1), t[r] += er(R - 1, s, r);
         break;
       case 2:
         t[r] += K(i);
@@ -414,13 +413,13 @@ var rr = function(t, s, r) {
         }
       // fallthrough
       default:
-        t[r] += re(i);
+        t[r] += ne(i);
     }
   while (i = $());
   return t;
-}, sr = function(t, s) {
-  return Fe(nr(Oe(t), s));
-}, Ce = /* @__PURE__ */ new WeakMap(), or = function(t) {
+}, rr = function(t, s) {
+  return Oe(tr(Be(t), s));
+}, Ce = /* @__PURE__ */ new WeakMap(), nr = 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 +427,12 @@ var rr = 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 = [], 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];
+      for (var o = [], h = rr(s, o), c = r.props, u = 0, b = 0; u < h.length; u++)
+        for (var l = 0; l < c.length; l++, b++)
+          t.props[b] = o[u] ? h[u].replace(/&\f/g, c[l]) : c[l] + " " + h[u];
     }
   }
-}, ir = function(t) {
+}, sr = function(t) {
   if (t.type === "decl") {
     var s = t.value;
     // charcode for l
@@ -441,11 +440,11 @@ var rr = function(t, s, r) {
     s.charCodeAt(2) === 98 && (t.return = "", t.value = "");
   }
 };
-function He(e, t) {
-  switch (Vt(e, t)) {
+function Fe(e, t) {
+  switch (Ft(e, t)) {
     // color-adjust
     case 5103:
-      return u + "print-" + e + e;
+      return p + "print-" + e + e;
     // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
     case 5737:
     case 4201:
@@ -475,58 +474,58 @@ function He(e, t) {
     case 5365:
     case 5621:
     case 3829:
-      return u + e + e;
+      return p + e + e;
     // appearance, user-select, transform, hyphens, text-size-adjust
     case 5349:
     case 4246:
     case 4810:
     case 6968:
     case 2756:
-      return u + e + ee + e + S + e + e;
+      return p + e + ee + e + S + e + e;
     // flex, flex-direction
     case 6828:
     case 4268:
-      return u + e + S + e + e;
+      return p + e + S + e + e;
     // order
     case 6165:
-      return u + e + S + "flex-" + e + e;
+      return p + e + S + "flex-" + e + e;
     // align-items
     case 5187:
-      return u + e + f(e, /(\w+).+(:[^]+)/, u + "box-$1$2" + S + "flex-$1$2") + e;
+      return p + e + g(e, /(\w+).+(:[^]+)/, p + "box-$1$2" + S + "flex-$1$2") + e;
     // align-self
     case 5443:
-      return u + e + S + "flex-item-" + f(e, /flex-|-self/, "") + e;
+      return p + e + S + "flex-item-" + g(e, /flex-|-self/, "") + e;
     // align-content
     case 4675:
-      return u + e + S + "flex-line-pack" + f(e, /align-content|flex-|-self/, "") + e;
+      return p + e + S + "flex-line-pack" + g(e, /align-content|flex-|-self/, "") + e;
     // flex-shrink
     case 5548:
-      return u + e + S + f(e, "shrink", "negative") + e;
+      return p + e + S + g(e, "shrink", "negative") + e;
     // flex-basis
     case 5292:
-      return u + e + S + f(e, "basis", "preferred-size") + e;
+      return p + e + S + g(e, "basis", "preferred-size") + e;
     // flex-grow
     case 6060:
-      return u + "box-" + f(e, "-grow", "") + u + e + S + f(e, "grow", "positive") + e;
+      return p + "box-" + g(e, "-grow", "") + p + e + S + g(e, "grow", "positive") + e;
     // transition
     case 4554:
-      return u + f(e, /([^-])(transform)/g, "$1" + u + "$2") + e;
+      return p + g(e, /([^-])(transform)/g, "$1" + p + "$2") + e;
     // cursor
     case 6187:
-      return f(f(f(e, /(zoom-|grab)/, u + "$1"), /(image-set)/, u + "$1"), e, "") + e;
+      return g(g(g(e, /(zoom-|grab)/, p + "$1"), /(image-set)/, p + "$1"), e, "") + e;
     // background, background-image
     case 5495:
     case 3959:
-      return f(e, /(image-set\([^]*)/, u + "$1$`$1");
+      return g(e, /(image-set\([^]*)/, p + "$1$`$1");
     // justify-content
     case 4968:
-      return f(f(e, /(.+:)(flex-)?(.*)/, u + "box-pack:$3" + S + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + u + e + e;
+      return g(g(e, /(.+:)(flex-)?(.*)/, p + "box-pack:$3" + S + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + p + e + e;
     // (margin|padding)-inline-(start|end)
     case 4095:
     case 3583:
     case 4068:
     case 2532:
-      return f(e, /(.+)-inline(.+)/, u + "$1$2") + e;
+      return g(e, /(.+)-inline(.+)/, p + "$1$2") + e;
     // (min|max)?(width|height|inline-size|block-size)
     case 8116:
     case 7059:
@@ -546,10 +545,10 @@ 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" + ee + (L(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
+          return g(e, /(.+:)(.+)-([^]+)/, "$1" + p + "$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;
+          return ~ce(e, "stretch") ? Fe(g(e, "stretch", "fill-available"), t) + e : e;
       }
       break;
     // position: sticky
@@ -557,13 +556,13 @@ function He(e, t) {
       if (L(e, t + 1) !== 115) break;
     // display: (flex|inline-flex)
     case 6444:
-      switch (L(e, D(e) - 3 - (~ie(e, "!important") && 10))) {
+      switch (L(e, D(e) - 3 - (~ce(e, "!important") && 10))) {
         // stic(k)y
         case 107:
-          return f(e, ":", ":" + u) + e;
+          return g(e, ":", ":" + p) + e;
         // (inline-)?fl(e)x
         case 101:
-          return f(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + u + (L(e, 14) === 45 ? "inline-" : "") + "box$3$1" + u + "$2$3$1" + S + "$2box$3") + e;
+          return g(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + p + (L(e, 14) === 45 ? "inline-" : "") + "box$3$1" + p + "$2$3$1" + S + "$2box$3") + e;
       }
       break;
     // writing-mode
@@ -571,83 +570,83 @@ function He(e, t) {
       switch (L(e, t + 11)) {
         // vertical-l(r)
         case 114:
-          return u + e + S + f(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+          return p + e + S + g(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
         // vertical-r(l)
         case 108:
-          return u + e + S + f(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+          return p + e + S + g(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
         // horizontal(-)tb
         case 45:
-          return u + e + S + f(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+          return p + e + S + g(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
       }
-      return u + e + S + e + e;
+      return p + e + S + e + e;
   }
   return e;
 }
-var cr = function(t, s, r, i) {
+var or = function(t, s, r, i) {
   if (t.length > -1 && !t.return) switch (t.type) {
     case de:
-      t.return = He(t.value, t.length);
+      t.return = Fe(t.value, t.length);
       break;
-    case Pe:
+    case Te:
       return O([V(t, {
-        value: f(t.value, "@", "@" + u)
+        value: g(t.value, "@", "@" + p)
       })], i);
     case le:
       if (t.length) return zt(t.props, function(o) {
-        switch (_t(o, /(::plac\w+|:read-\w+)/)) {
+        switch (Ht(o, /(::plac\w+|:read-\w+)/)) {
           // :read-(only|write)
           case ":read-only":
           case ":read-write":
             return O([V(t, {
-              props: [f(o, /:(read-\w+)/, ":" + ee + "$1")]
+              props: [g(o, /:(read-\w+)/, ":" + ee + "$1")]
             })], i);
           // :placeholder
           case "::placeholder":
             return O([V(t, {
-              props: [f(o, /:(plac\w+)/, ":" + u + "input-$1")]
+              props: [g(o, /:(plac\w+)/, ":" + p + "input-$1")]
             }), V(t, {
-              props: [f(o, /:(plac\w+)/, ":" + ee + "$1")]
+              props: [g(o, /:(plac\w+)/, ":" + ee + "$1")]
             }), V(t, {
-              props: [f(o, /:(plac\w+)/, S + "input-$1")]
+              props: [g(o, /:(plac\w+)/, S + "input-$1")]
             })], i);
         }
         return "";
       });
   }
-}, ar = [cr], lr = function(t) {
+}, ir = [or], cr = function(t) {
   var s = t.key;
   if (s === "css") {
     var r = document.querySelectorAll("style[data-emotion]:not([data-s])");
-    Array.prototype.forEach.call(r, function(w) {
-      var N = w.getAttribute("data-emotion");
-      N.indexOf(" ") !== -1 && (document.head.appendChild(w), w.setAttribute("data-s", ""));
+    Array.prototype.forEach.call(r, function(d) {
+      var N = d.getAttribute("data-emotion");
+      N.indexOf(" ") !== -1 && (document.head.appendChild(d), d.setAttribute("data-s", ""));
     });
   }
-  var i = t.stylisPlugins || ar, o = {}, h, c = [];
+  var i = t.stylisPlugins || ir, 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(" "), p = 1; p < N.length; p++)
-        o[N[p]] = !0;
-      c.push(w);
+    function(d) {
+      for (var N = d.getAttribute("data-emotion").split(" "), m = 1; m < N.length; m++)
+        o[N[m]] = !0;
+      c.push(d);
     }
   );
-  var d, k = [or, ir];
+  var u, b = [nr, sr];
   {
-    var l, a = [Jt, tr(function(w) {
-      l.insert(w);
-    })], m = er(k.concat(i, a)), b = function(N) {
-      return O(Kt(N), m);
+    var l, a = [Kt, Jt(function(d) {
+      l.insert(d);
+    })], f = Xt(b.concat(i, a)), v = function(N) {
+      return O(Qt(N), f);
     };
-    d = function(N, p, x, M) {
-      l = x, b(N ? N + "{" + p.styles + "}" : p.styles), M && (v.inserted[p.name] = !0);
+    u = function(N, m, x, M) {
+      l = x, v(N ? N + "{" + m.styles + "}" : m.styles), M && (w.inserted[m.name] = !0);
     };
   }
-  var v = {
+  var w = {
     key: s,
-    sheet: new Wt({
+    sheet: new Tt({
       key: s,
       container: h,
       nonce: t.nonce,
@@ -658,68 +657,68 @@ var cr = function(t, s, r, i) {
     nonce: t.nonce,
     inserted: o,
     registered: {},
-    insert: d
+    insert: u
   };
-  return v.sheet.hydrate(c), v;
+  return w.sheet.hydrate(c), w;
 };
-const Ve = ({ children: e, viewport: t, containerProps: s }) => {
-  const r = je(null), [{ theme: i }] = ae(), [o, h] = _({
+const He = ({ children: e, viewport: t, containerProps: s }) => {
+  const r = Re(null), { theme: i } = te(), [o, h] = F({
     width: 0,
     height: 0
   });
-  z(() => {
-    const v = St((N) => {
-      const p = N.at(0)?.target;
-      if (!p) return;
-      const { width: x, height: M } = p.getBoundingClientRect();
+  _(() => {
+    const w = Lt((N) => {
+      const m = N.at(0)?.target;
+      if (!m) return;
+      const { width: x, height: M } = m.getBoundingClientRect();
       h(() => ({
         width: x,
         height: M
       }));
-    }, 200), w = new ResizeObserver(v);
-    return r.current && w.observe(r.current), () => w.disconnect();
+    }, 200), d = new ResizeObserver(w);
+    return r.current && d.observe(r.current), () => d.disconnect();
   }, []);
-  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;
+  const c = me(t?.width) ? t.width(o.width) : t?.width, u = me(t?.height) ? t.height(o.height) : t?.height, b = ke(c) ? o.width / c : 1, l = ke(u) ? o.height / u : 1, a = Math.min(b, l, 1), f = (u ?? o.height / a) || 0, v = (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(${a})`,
-        width: b,
-        height: m,
-        marginLeft: (o.width - b) / 2,
-        marginTop: (o.height - m) / 2
+        width: v,
+        height: f,
+        marginLeft: (o.width - v) / 2,
+        marginTop: (o.height - f) / 2
       },
       className: "tw:absolute",
       children: /* @__PURE__ */ n(
-        Mt,
+        Et,
         {
           sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
           allow: "autoplay; encrypted-media",
           width: c ?? "100%",
-          height: d ?? "100%",
-          children: /* @__PURE__ */ n(dr, { theme: i, children: e })
+          height: u ?? "100%",
+          children: /* @__PURE__ */ n(ar, { theme: i, children: e })
         }
       )
     }
   ) }) });
-}, 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);
+}, ar = ({ children: e, theme: t }) => {
+  const { document: s, window: r } = St(), [i, o] = F(!1), h = Re(window.customElements.define.bind(window.customElements));
+  _(() => {
+    const u = h.current;
+    return r && (window.customElements.define = function(b, l, a) {
+      window.customElements.get(b) || r.customElements.define(b, l, a), u(b, l, a);
     }), s?.head.replaceWith(document.head.cloneNode(!0)), o(!0), () => {
-      window.customElements.define = d;
+      window.customElements.define = u;
     };
   }, [s, r]);
-  const c = lr({
+  const c = cr({
     key: "css",
     container: s?.head
   });
-  return i ? /* @__PURE__ */ n(Ne, { children: /* @__PURE__ */ g(lt, { value: c, children: [
+  return i ? /* @__PURE__ */ n(ye, { children: /* @__PURE__ */ k(ct, { value: c, children: [
     /* @__PURE__ */ n(
-      dt,
+      at,
       {
         styles: {
           ".frame-content": {
@@ -740,21 +739,21 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
         }
       }
     ),
-    /* @__PURE__ */ n(xt, { theme: t, children: e })
+    /* @__PURE__ */ n(bt, { theme: t, children: e })
   ] }) }) : null;
-}, hr = ({ render: e }) => {
-  const { id: t, renderer: s } = Lt((o) => ({
-    resolvedId: st(o),
-    renderer: nt(o).renderer
+}, lr = ({ render: e }) => {
+  const { id: t, renderer: s } = yt((o) => ({
+    resolvedId: nt(o),
+    renderer: rt(o).renderer
   })), {
     queryParams: { mode: r }
-  } = te(), { isActive: i } = W((o, h) => ({
+  } = re(), { isActive: i } = W((o, h) => ({
     isActive: h.getEvent("selected").contains(t) && t !== B
   }));
-  return s ? Ae(s, { render: e }) : /* @__PURE__ */ g(J, { children: [
-    i && r === "full" && /* @__PURE__ */ g(J, { children: [
-      /* @__PURE__ */ n(ze, {}),
-      /* @__PURE__ */ n(qe, {})
+  return s ? $e(s, { render: e }) : /* @__PURE__ */ k(J, { children: [
+    i && r === "full" && /* @__PURE__ */ k(J, { children: [
+      /* @__PURE__ */ n(Ve, {}),
+      /* @__PURE__ */ n(_e, {})
     ] }),
     e
   ] });
@@ -762,7 +761,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>
-`, wr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, dr = `<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,84 +769,89 @@ 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>
-`, ur = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, hr = `<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>
-`, 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 = () => {
+`, 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>', wr = () => {
   const {
     queryParams: { mode: e, screen: t },
     setQueryParams: s
-  } = te(), { actions: r, canRedo: i, canUndo: o } = W((l, a) => ({
-    enabled: l.options.enabled,
-    canUndo: a.history.canUndo(),
-    canRedo: a.history.canRedo()
-  })), h = (l) => {
+  } = re(), [r, i] = F(!1), { handlers: o } = te(), { actions: h, canRedo: c, canUndo: u, query: b } = W((w, d) => ({
+    enabled: w.options.enabled,
+    canUndo: d.history.canUndo(),
+    canRedo: d.history.canRedo()
+  })), l = (w) => {
     s({
-      screen: l
+      screen: w
     });
-  }, c = () => {
+  }, a = () => {
     s({ mode: e === "full" ? "compact" : "full" });
-  }, d = () => {
-    ye.emit("close");
-  }, k = () => {
-    r.selectNode(), ye.emit("submit");
+  }, f = () => {
+    o.close();
+  }, v = async () => {
+    try {
+      return h.selectNode(), o.submit(b.getSerializedNodes());
+    } catch {
+    } finally {
+      i(!1);
+    }
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ k(
     "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__ */ 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__ */ k("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
+          /* @__PURE__ */ n(j, { size: "32", onClick: f, children: /* @__PURE__ */ n(E, { source: ur }) }),
+          /* @__PURE__ */ n(qe, { onSelectionChange: l, value: t, children: Ge.map(({ icon: w, size: d }) => /* @__PURE__ */ n(j, { value: d, children: /* @__PURE__ */ n(E, { source: w }) }, d)) }),
+          /* @__PURE__ */ k("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: h.history.undo, disabled: !u, children: /* @__PURE__ */ n(E, { source: xe }) }),
+            /* @__PURE__ */ n(j, { onClick: h.history.redo, disabled: !c, 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" ? ur : wr }) }) })
+          /* @__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: a, children: /* @__PURE__ */ n(E, { source: e === "full" ? hr : dr }) }) })
         ] }),
-        /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ n(Le, { onClick: k, children: "Save" }) })
+        /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ n(Ne, { isLoading: r, onClick: v, children: "Save" }) })
       ]
     }
   );
-}, gr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, fr = `<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>
-`, mr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, pr = `<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>
-`, 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" })
+`, gr = ({ elements: e, sections: t }) => /* @__PURE__ */ k("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(Le, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ n(E, { source: fr }) }) }),
+  /* @__PURE__ */ k(Ue, { defaultIndex: 1, className: "tw:flex-1 tw:overflow-hidden tw:border-t tw:border-ic-white-1s", children: [
+    /* @__PURE__ */ k(Ze, { children: [
+      /* @__PURE__ */ n(ue, { className: "tw:flex-1", children: "Sections" }),
+      /* @__PURE__ */ n(ue, { className: "tw:flex-1", children: "Elements" })
     ] }),
-    /* @__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)) }) })
+    /* @__PURE__ */ k(Qe, { className: "tw:flex-1 tw:overflow-hidden", children: [
+      /* @__PURE__ */ n(we, { children: /* @__PURE__ */ n(ie, { className: "tw:h-full tw:py-2", children: t?.map((s, r) => /* @__PURE__ */ n(kr, { group: s }, r)) }) }),
+      /* @__PURE__ */ n(we, { className: "tw:h-full tw:overflow-hidden", children: /* @__PURE__ */ n(ie, { className: "tw:h-full tw:py-2", children: e?.map((s, r) => /* @__PURE__ */ n(mr, { group: s }, r)) }) })
     ] })
   ] })
-] }), vr = ({ group: e }) => {
-  const [t, s] = De(!0), { actions: r, connectors: i } = W();
-  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: [
+] }), mr = ({ group: e }) => {
+  const [t, s] = Ae(!0), { actions: r, connectors: i } = W();
+  return /* @__PURE__ */ k("div", { className: "tw:flex tw:flex-col tw:text-sm", children: [
+    /* @__PURE__ */ n(Ne, { onClick: s, className: "tw:bg-transparent", children: /* @__PURE__ */ k("div", { className: "tw:flex tw:items-center tw:justify-between tw:flex-1 tw:text-sm", children: [
       e.name,
       /* @__PURE__ */ n(
         E,
         {
-          source: Se,
+          source: Ee,
           className: I("tw:transition-transform", {
             "tw:rotate-180": !t
           })
         }
       )
     ] }) }),
-    /* @__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(Ye, { 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__ */ k("div", { className: "tw:space-y-1", children: [
       /* @__PURE__ */ n(
         "div",
         {
@@ -858,42 +862,42 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
           ),
           ref: (c) => {
             c && i.create(c, o.template, {
-              onCreate(d) {
-                (typeof o.autoFocus == "function" ? o.autoFocus(d) : o.autoFocus) && r.selectNode(d.rootNodeId), o.onCreate?.(d);
+              onCreate(u) {
+                (typeof o.autoFocus == "function" ? o.autoFocus(u) : o.autoFocus) && r.selectNode(u.rootNodeId), o.onCreate?.(u);
               }
             });
           },
-          children: /* @__PURE__ */ n(ot, { width: void 0, height: void 0, ...o.icon })
+          children: /* @__PURE__ */ n(st, { width: void 0, height: void 0, ...o.icon })
         }
       ),
       /* @__PURE__ */ n("p", { className: "tw:text-xs tw:mx-auto tw:text-center", children: o.name })
     ] }, h)) }) })
   ] });
-}, br = ({ group: e }) => {
-  const [t, s] = _(!1), { refs: r, floatingStyles: i, context: o } = wt({
+}, kr = ({ group: e }) => {
+  const [t, s] = F(!1), { refs: r, floatingStyles: i, context: o } = dt({
     open: t,
     onOpenChange: s,
     placement: "right-start",
     middleware: [
-      ft(),
-      pt({
-        apply({ elements: m }) {
-          const b = {
-            zIndex: `${yt}`,
-            height: `${m.reference.getBoundingClientRect().height}px`
+      ut(),
+      wt({
+        apply({ elements: f }) {
+          const v = {
+            zIndex: `${Ct}`,
+            height: `${f.reference.getBoundingClientRect().height}px`
           };
-          Object.assign(m.floating.style, b);
+          Object.assign(f.floating.style, v);
         }
       })
     ],
-    whileElementsMounted: ut
+    whileElementsMounted: ht
   });
-  z(() => {
+  _(() => {
     r.setPositionReference(document.querySelector("aside"));
   }, [r]);
-  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(
+  const h = ft(o, { move: !1, handleClose: pt() }), c = gt(o), u = mt(o), b = kt(o), { getReferenceProps: l, getFloatingProps: a } = vt([h, c, u, b]);
+  return /* @__PURE__ */ k(J, { children: [
+    /* @__PURE__ */ k(
       "button",
       {
         className: I(
@@ -905,31 +909,31 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
         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: mr })
+          /* @__PURE__ */ n(E, { className: "tw:rotate-180", source: pr })
         ]
       }
     ),
-    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: [
+    t && /* @__PURE__ */ n(De, { children: /* @__PURE__ */ n("div", { style: i, ...a(), ref: r.setFloating, children: /* @__PURE__ */ k("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(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 })) }) })
+      /* @__PURE__ */ n(ie, { className: "tw:flex-1 tw:px-3", children: /* @__PURE__ */ n("div", { className: "tw:flex tw:flex-col tw:gap-4", children: e.sections.map((f, v) => /* @__PURE__ */ lt(vr, { ...f, key: v })) }) })
     ] }) }) })
   ] });
-}, Cr = ({ template: e, autoFocus: t = !0, onCreate: s }) => {
-  const [, r] = _(!1), [i] = ae(), { actions: o, connectors: h, resolver: c, query: d } = W((l) => ({
+}, vr = ({ template: e, autoFocus: t = !0, onCreate: s }) => {
+  const [, r] = F(!1), i = te(), { actions: o, connectors: h, resolver: c, query: u } = W((l) => ({
     resolver: l.options.resolver
-  })), k = _(() => {
+  })), b = F(() => {
     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)
+    "rootNodeId" in l ? a = l : a = u.parseReactElement(l).toNodeTree();
+    const { rootNodeId: f, nodes: v } = a, w = {};
+    return Object.entries(v).forEach(([d, N]) => {
+      const m = Nt(N.data, c), x = d === f ? B : d;
+      w[x] = {
+        ...m,
+        parent: m.parent === f ? B : m.parent,
+        nodes: m.nodes?.map((M) => M === f ? B : M)
       };
-    }), v;
+    }), w;
   })[0];
   return /* @__PURE__ */ n(
     "div",
@@ -945,20 +949,20 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
       onDragStart: () => r(!0),
       onDragEnd: () => r(!1),
       children: /* @__PURE__ */ n("div", { className: "tw:relative tw:aspect-video tw:rounded-lg tw:overflow-hidden tw:w-60 tw:pointer-events-none", children: /* @__PURE__ */ n("div", { className: "tw:absolute tw:inset-0", children: /* @__PURE__ */ n(
-        Ve,
+        He,
         {
           containerProps: {
             style: {
               backgroundColor: i.theme.palette.background.default
             }
           },
-          viewport: { width: Nt.md.minWidth },
-          children: /* @__PURE__ */ n(Me, { resolver: c, children: /* @__PURE__ */ n(Re, { data: k }) })
+          viewport: { width: xt.md.minWidth },
+          children: /* @__PURE__ */ n(Se, { resolver: c, children: /* @__PURE__ */ n(Me, { data: b }) })
         }
       ) }) })
     }
   );
-}, xr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, br = `<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"/>
@@ -969,77 +973,77 @@ 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>
-`, yr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Cr = `<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>
-`, Nr = (e) => {
+`, xr = (e) => {
   const { query: t, actions: s } = W(), {
     id: r,
     expanded: i,
     actions: o,
     displayName: h,
     children: c,
-    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();
+    depth: u
+  } = Rt((v) => ({
+    expanded: v.expanded,
+    displayName: je(t.node(v.id).get())
+  })), { selected: b, selectable: l } = W((v, w) => {
+    const d = w.node(r).get();
     return {
-      selected: v.getEvent("selected").contains(r),
-      nodeDOM: w.dom,
-      selectable: it(w)
+      selected: w.getEvent("selected").contains(r),
+      nodeDOM: d.dom,
+      selectable: ot(d)
     };
   });
-  z(() => {
+  _(() => {
     r === B && o.setExpandedState(!0);
-  }, [o, r]), z(() => {
+  }, [o, r]), _(() => {
     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((p) => w.includes(p));
+    c.some((w) => {
+      const d = t.getEvent("selected").all();
+      return d.includes(w) ? !0 : t.node(w).descendants(!0).some((m) => d.includes(m));
     }) && o.setExpandedState(!0);
   }, [c, o, t]);
   const a = () => {
     s.selectNode(r);
-  }, m = (b) => {
-    b.stopPropagation(), o.toggleLayer();
+  }, f = (v) => {
+    v.stopPropagation(), o.toggleLayer();
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ k(
     "div",
     {
       className: "tw:py-1",
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ k(
           "div",
           {
             onClick: a,
             style: {
-              paddingLeft: Math.max(0, d - 1) * 16
+              paddingLeft: Math.max(0, u - 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 === B,
-                "tw:bg-ic-black-7s": k,
+                "tw:bg-ic-black-7s": b,
                 "tw:pointer-events-none": !l
               }
             ),
             children: [
-              c.length ? /* @__PURE__ */ n(j, { className: "tw:pointer-events-auto", onClick: m, children: /* @__PURE__ */ n(
+              c.length ? /* @__PURE__ */ n(j, { className: "tw:pointer-events-auto", onClick: f, children: /* @__PURE__ */ n(
                 E,
                 {
                   className: I("tw:transition-transform tw:-rotate-90", {
                     "tw:rotate-0": i
                   }),
                   size: 16,
-                  source: Se
+                  source: Ee
                 }
-              ) }) : /* @__PURE__ */ n("div", { className: "tw:p-1", children: /* @__PURE__ */ n(E, { size: 16, source: yr }) }),
+              ) }) : /* @__PURE__ */ n("div", { className: "tw:p-1", children: /* @__PURE__ */ n(E, { size: 16, source: Cr }) }),
               /* @__PURE__ */ n(
                 "span",
                 {
@@ -1056,12 +1060,12 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
       ]
     }
   );
-}, Lr = ({ onClose: e }) => {
-  const t = It(), s = (r) => {
+}, yr = ({ onClose: e }) => {
+  const t = At(), s = (r) => {
     t.start(r);
   };
-  return /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ g(
-    Xe.div,
+  return /* @__PURE__ */ n(De, { children: /* @__PURE__ */ k(
+    Ke.div,
     {
       drag: !0,
       dragControls: t,
@@ -1069,62 +1073,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__ */ g(
+        /* @__PURE__ */ k(
           "div",
           {
             onPointerDown: s,
             className: "tw:py-2 tw:cursor-grab tw:flex tw:items-center tw:justify-between tw:px-4",
             children: [
-              /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
-                /* @__PURE__ */ n(E, { source: xr }),
+              /* @__PURE__ */ k("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+                /* @__PURE__ */ n(E, { source: br }),
                 /* @__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(j, { onClick: e, children: /* @__PURE__ */ n(E, { source: Xe }) })
             ]
           }
         ),
-        /* @__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 }) })
+        /* @__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: xr }) })
       ]
     }
   ) });
-}, Er = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, Nr = `<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>
-`, Sr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Lr = `<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>
-`, Mr = ({ insert: e }) => {
-  const [t, s] = De(!1), {
+`, Er = ({ insert: e }) => {
+  const [t, s] = Ae(!1), {
     queryParams: {
       action: r = "insert"
       /* Insert */
     },
     setQueryParams: i
-  } = te(), { actions: o, isDeletable: h, focusedNode: c } = W((a, m) => {
-    const b = m.getEvent("selected").first(), v = b ? m.node(b) : null;
+  } = re(), { actions: o, isDeletable: h, focusedNode: c } = W((a, f) => {
+    const v = f.getEvent("selected").first(), w = v ? f.node(v) : null;
     return {
       enabled: a.options.enabled,
-      isDeletable: !!(v?.isDeletable() && (v.get().data.custom?.deletable ?? !0)),
-      focusedNode: v?.get()
+      isDeletable: !!(w?.isDeletable() && (w.get().data.custom?.deletable ?? !0)),
+      focusedNode: w?.get()
     };
-  }), d = () => {
+  }), u = () => {
     o.selectNode();
-  }, k = (a) => {
+  }, b = (a) => {
     o.delete(a.currentTarget.value);
   }, l = (a) => {
-    const m = a.currentTarget.value;
-    m === "layers" ? s() : (d(), i({
-      action: m
+    const f = a.currentTarget.value;
+    f === "layers" ? s() : (u(), i({
+      action: f
     }));
   };
-  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: [
+  return /* @__PURE__ */ k(J, { children: [
+    /* @__PURE__ */ k("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__ */ k("div", { className: "tw:px-1 tw:flex tw:flex-col tw:gap-1", children: [
+        !!e && /* @__PURE__ */ k(ye, { children: [
           /* @__PURE__ */ n(
             j,
             {
@@ -1136,7 +1140,7 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
               value: "insert",
               className: "tw:relative",
               size: "32",
-              children: /* @__PURE__ */ n(E, { source: ct })
+              children: /* @__PURE__ */ n(E, { source: it })
             }
           ),
           /* @__PURE__ */ n("hr", { className: "tw:border-ic-white-2s" })
@@ -1152,55 +1156,56 @@ const Ve = ({ children: e, viewport: t, containerProps: s }) => {
             value: "layers",
             className: "tw:relative",
             size: "32",
-            children: /* @__PURE__ */ n(E, { source: Er })
+            children: /* @__PURE__ */ n(E, { source: Nr })
           }
         )
       ] }),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ k(
         "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(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 }) })
+            !c?.related.inspector && /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto scrollbar", children: r === "insert" && !!e && /* @__PURE__ */ n(gr, { elements: e.elements, sections: e.sections }) }),
+            !!c?.related?.inspector && /* @__PURE__ */ k("div", { className: "tw:flex tw:flex-col tw:flex-1 tw:overflow-hidden", children: [
+              /* @__PURE__ */ k("div", { className: "tw:flex tw:items-center tw:gap-2 tw:px-2 tw:py-2", children: [
+                /* @__PURE__ */ n(j, { onClick: u, children: /* @__PURE__ */ n(E, { source: Lr }) }),
+                /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-hidden", children: /* @__PURE__ */ n(Le, { fullWidth: !0, value: je(c), size: "32" }) }),
+                h && /* @__PURE__ */ n(j, { value: c.id, onClick: b, children: /* @__PURE__ */ n(E, { className: "tw:text-ic-red-4s", source: Je }) })
               ] }),
-              /* @__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) }) })
+              /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s scrollbar-hidden", children: /* @__PURE__ */ n(tt, { fallback: null, children: $e(c.related.inspector) }) })
             ] })
           ]
         }
       )
     ] }),
-    t && /* @__PURE__ */ n(Lr, { onClose: s })
+    t && /* @__PURE__ */ n(yr, { onClose: s })
   ] });
-}, Vr = ({ theme: e, insert: t, resolver: s }) => {
+}, Or = ({ theme: e, insert: t, resolver: s, handlers: r }) => {
   const {
-    queryParams: { screen: r }
-  } = te();
-  return ae({
-    theme: e
-  }), /* @__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 }),
+    queryParams: { screen: i }
+  } = re();
+  return te({
+    theme: e,
+    handlers: r
+  }), /* @__PURE__ */ n(Se, { enabled: !0, onRender: lr, resolver: s, children: /* @__PURE__ */ k("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(wr, {}),
+    /* @__PURE__ */ k("div", { className: "tw:flex-1 tw:overflow-hidden tw:flex", children: [
+      /* @__PURE__ */ n(Er, { insert: t }),
       /* @__PURE__ */ n(
-        Ve,
+        He,
         {
           viewport: {
-            width: (i) => r === "lg" ? Math.max(i, fe[r]) : fe[r]
+            width: (o) => i === "lg" ? Math.max(o, fe[i]) : fe[i]
           },
-          children: /* @__PURE__ */ n(Re, { children: /* @__PURE__ */ n(tt, {}) })
+          children: /* @__PURE__ */ n(Me, { children: /* @__PURE__ */ n(et, {}) })
         }
       )
     ] })
   ] }) });
 };
 export {
-  Vr as Editor,
-  te as useEditorQueryParams,
-  qr as useEditorResponsive,
-  ae as useEditorState
+  Or as Editor,
+  te as useEditor,
+  re as useEditorQueryParams,
+  zr as useEditorResponsive
 };