@janbox/storefront-builder 1.0.1 → 1.0.3

package/dist/editor.js

@@ -1,305 +1,18 @@
-import { b as E, g as x, a as e, c as b, d as ie, j as i, N as R, B as z, F as _, e as le, f as ae, u as C, W as ce, h as de, i as $, k as we, P as he } from "./countdown-timer.node-CTPWHLr7.js";
-import { a as ue, b as A, c as S, D as pe, d as me, W as p, e as k, f as ge, g as fe, h as G, i as U, j as ke, k as be, l as F, m as ve, n as D, o as H, F as Ce, A as q, p as xe, C as Z, q as Q, r as Ne, s as ye, T as Le, t as V, R as Se } from "./index-CY7cmOMU.js";
-import { v as Ft } from "./index-CY7cmOMU.js";
-import je from "mitt";
-import { createContext as X, useRef as K, useState as j, useEffect as N, createElement as Y, Fragment as L, Suspense as Ee } from "react";
-import { useToggle as J } from "usehooks-ts";
-import { Global as ee, CacheProvider as Me, createElement as De } from "@emotion/react";
-import { useFloating as We, autoUpdate as Ae, flip as Ie, size as Re, useHover as ze, safePolygon as Fe, useFocus as He, useDismiss as Ve, useRole as Te, useInteractions as Pe, FloatingPortal as te } from "@floating-ui/react";
-import { flatten as Be } from "flat";
-import { flatMap as Oe, throttle as _e, isFunction as T, isNumber as P } from "lodash-es";
-import $e, { useFrame as Ge } from "react-frame-component";
-import { Layers as Ue, useLayer as qe } from "@craftjs/layers";
-import { useNode as Ze, ROOT_NODE as W } from "@craftjs/core";
-const oe = "en", Qe = X(oe), M = (s, t = !0) => {
-  const r = `--text-${s}--{{property}}`, o = t ? `var(${r})` : r;
-  return {
-    fontSize: o.replace("{{property}}", "font-size"),
-    lineHeight: o.replace("{{property}}", "line-height")
-  };
-}, Xe = X(null), Ke = ({ theme: s, children: t, locale: r = oe }) => /* @__PURE__ */ E.jsxs(Xe.Provider, { value: s, children: [
-  /* @__PURE__ */ E.jsx(ee, { styles: Ye(s) }),
-  /* @__PURE__ */ E.jsx(Qe.Provider, { value: r, children: t })
-] }), Ye = ({ palette: s, typography: t }) => {
-  const r = Be(s), o = Object.fromEntries(
-    Object.keys(r).map((n) => [x(n, !1), r[n]])
-  ), w = Object.fromEntries(
-    Oe(
-      Object.keys(t).map((n) => {
-        const d = M(n, !1), { fontSize: l, lineHeight: a } = t[n];
-        return [
-          [d.fontSize, l],
-          [d.lineHeight, a]
-        ];
-      })
-    )
-  );
-  return {
-    // ─── Reset / Preflight ───────────────────────────────────────────────────
-    // 1. Prevent padding and border from affecting element width.
-    // 2. Allow adding a border to an element by just adding a border-width.
-    "*, ::before, ::after": {
-      boxSizing: "border-box",
-      // 1
-      borderWidth: 0,
-      // 2
-      borderStyle: "solid",
-      // 2
-      borderColor: x("border.default")
-    },
-    // 1. Use a consistent sensible line-height in all browsers.
-    // 2. Prevent adjustments of font size after orientation changes in iOS.
-    // 3. Use a more readable tab size.
-    // 4. Use the user's configured `sans` font-family by default.
-    // 5. Use the user's configured `sans` font-feature-settings by default.
-    // 6. Use the user's configured `sans` font-variation-settings by default.
-    // 7. Disable tap highlights on iOS
-    "html, :host": {
-      lineHeight: 1.5,
-      // 1
-      WebkitTextSizeAdjust: "100%",
-      // 2
-      MozTabSize: 4,
-      // 3
-      tabSize: 4,
-      // 3
-      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-      // 4
-      fontFeatureSettings: "normal",
-      // 5
-      fontVariationSettings: "normal",
-      // 6
-      WebkitTapHighlightColor: "transparent"
-      // 7
-    },
-    // 1. Remove the margin in all browsers.
-    // 2. Inherit line-height from `html` — overridden below by app-level typography.
-    body: {
-      margin: 0,
-      // 1
-      // ─── App-level styles ───────────────────────────────────────────
-      display: "flex",
-      flexDirection: "column",
-      minHeight: "100dvh",
-      color: x("neutral.600"),
-      backgroundColor: x("background.default"),
-      fontSize: M("sm").fontSize,
-      lineHeight: M("sm").lineHeight
-    },
-    // 1. Add the correct height in Firefox.
-    // 2. Correct the inheritance of border color in Firefox.
-    // 3. Ensure horizontal rules are visible by default.
-    hr: {
-      height: 0,
-      // 1
-      color: "inherit",
-      // 2
-      borderTopWidth: "1px"
-      // 3
-    },
-    // Add the correct text decoration in Chrome, Edge, and Safari.
-    "abbr:where([title])": {
-      textDecoration: "underline dotted"
-    },
-    // Remove the default font size and weight for headings.
-    "h1, h2, h3, h4, h5, h6": {
-      fontSize: "inherit",
-      fontWeight: "inherit"
-    },
-    // Reset links to optimize for opt-in styling instead of opt-out.
-    a: {
-      color: "inherit",
-      textDecoration: "inherit"
-    },
-    // Add the correct font weight in Edge and Safari.
-    "b, strong": {
-      fontWeight: "bolder"
-    },
-    // 1. Use the user's configured `mono` font-family by default.
-    // 2. Use the user's configured `mono` font-feature-settings by default.
-    // 3. Use the user's configured `mono` font-variation-settings by default.
-    // 4. Correct the odd `em` font sizing in all browsers.
-    "code, kbd, samp, pre": {
-      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      // 1
-      fontFeatureSettings: "normal",
-      // 2
-      fontVariationSettings: "normal",
-      // 3
-      fontSize: "1em"
-      // 4
-    },
-    // Add the correct font size in all browsers.
-    small: {
-      fontSize: "80%"
-    },
-    // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-    "sub, sup": {
-      fontSize: "75%",
-      lineHeight: 0,
-      position: "relative",
-      verticalAlign: "baseline"
-    },
-    sub: {
-      bottom: "-0.25em"
-    },
-    sup: {
-      top: "-0.5em"
-    },
-    // 1. Remove text indentation from table contents in Chrome and Safari.
-    // 2. Correct table border color inheritance in all Chrome and Safari.
-    // 3. Remove gaps between table borders by default.
-    table: {
-      textIndent: 0,
-      // 1
-      borderColor: "inherit",
-      // 2
-      borderCollapse: "collapse"
-      // 3
-    },
-    // 1. Change the font styles in all browsers.
-    // 2. Remove the margin in Firefox and Safari.
-    // 3. Remove default padding in all browsers.
-    "button, input, optgroup, select, textarea": {
-      fontFamily: "inherit",
-      // 1
-      fontFeatureSettings: "inherit",
-      // 1
-      fontVariationSettings: "inherit",
-      // 1
-      fontSize: "100%",
-      // 1
-      fontWeight: "inherit",
-      // 1
-      lineHeight: "inherit",
-      // 1
-      letterSpacing: "inherit",
-      // 1
-      color: "inherit",
-      // 1
-      margin: 0,
-      // 2
-      padding: 0
-      // 3
-    },
-    // Remove the inheritance of text transform in Edge and Firefox.
-    "button, select": {
-      textTransform: "none"
-    },
-    // 1. Correct the inability to style clickable types in iOS and Safari.
-    // 2. Remove default button styles.
-    "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
-      WebkitAppearance: "button",
-      // 1
-      backgroundColor: "transparent",
-      // 2
-      backgroundImage: "none"
-      // 2
-    },
-    // Use the modern Firefox focus style for all focusable elements.
-    ":-moz-focusring": {
-      outline: "auto"
-    },
-    // Remove the additional `:invalid` styles in Firefox.
-    ":-moz-ui-invalid": {
-      boxShadow: "none"
-    },
-    // Add the correct vertical alignment in Chrome and Firefox.
-    progress: {
-      verticalAlign: "baseline"
-    },
-    // Correct the cursor style of increment and decrement buttons in Safari.
-    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
-      height: "auto"
-    },
-    // 1. Correct the odd appearance in Chrome and Safari.
-    // 2. Correct the outline style in Safari.
-    "[type='search']": {
-      WebkitAppearance: "textfield",
-      // 1
-      outlineOffset: "-2px"
-      // 2
-    },
-    // Remove the inner padding in Chrome and Safari on macOS.
-    "::-webkit-search-decoration": {
-      WebkitAppearance: "none"
-    },
-    // 1. Correct the inability to style clickable types in iOS and Safari.
-    // 2. Change font properties to `inherit` in Safari.
-    "::-webkit-file-upload-button": {
-      WebkitAppearance: "button",
-      // 1
-      font: "inherit"
-      // 2
-    },
-    // Add the correct display in Chrome and Safari.
-    summary: {
-      display: "list-item"
-    },
-    // Removes the default spacing and border for appropriate elements.
-    "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": {
-      margin: 0
-    },
-    fieldset: {
-      margin: 0,
-      padding: 0
-    },
-    legend: {
-      padding: 0
-    },
-    "ol, ul, menu": {
-      listStyle: "none",
-      margin: 0,
-      padding: 0
-    },
-    // Reset default styling for dialogs.
-    dialog: {
-      padding: 0
-    },
-    // Prevent resizing textareas horizontally by default.
-    textarea: {
-      resize: "vertical"
-    },
-    // 1. Reset the default placeholder opacity in Firefox.
-    // 2. Set the default placeholder color to gray 400.
-    "input::placeholder, textarea::placeholder": {
-      opacity: 1,
-      // 1
-      color: x("neutral.400")
-    },
-    // Set the default cursor for buttons.
-    "button, [role='button']": {
-      cursor: "pointer"
-    },
-    // Make sure disabled buttons don't get the pointer cursor.
-    ":disabled": {
-      cursor: "default"
-    },
-    // 1. Make replaced elements `display: block` by default.
-    // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
-    "img, svg, video, canvas, audio, iframe, embed, object": {
-      display: "block",
-      // 1
-      verticalAlign: "middle"
-      // 2
-    },
-    // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
-    "img, video": {
-      maxWidth: "100%",
-      height: "auto"
-    },
-    // Make elements with the HTML hidden attribute stay hidden by default.
-    "[hidden]:where(:not([hidden='until-found']))": {
-      display: "none"
-    },
-    // ─── CSS Variables ───────────────────────────────────────────────────────
-    ":root": {
-      ...o,
-      ...w
-    }
-  };
-};
-class Je {
+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 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 { 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 {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -326,74 +39,687 @@ class Je {
    *
    * @public
    */
-  start(t, r) {
-    this.componentControls.forEach((o) => {
-      o.start(t.nativeEvent || t, r);
+  start(t, s) {
+    this.componentControls.forEach((r) => {
+      r.start(t.nativeEvent || t, s);
     });
   }
 }
-const et = () => new Je();
-function tt() {
-  return ue(et);
+const At = () => new jt();
+function Dt() {
+  return _e(At);
+}
+function It(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) {
+  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() {
+  function e(s) {
+    var r = this;
+    this._insertTag = function(i) {
+      var o;
+      r.tags.length === 0 ? r.insertionPoint ? o = r.insertionPoint.nextSibling : r.prepend ? o = r.container.firstChild : o = r.before : o = r.tags[r.tags.length - 1].nextSibling, r.container.insertBefore(i, o), r.tags.push(i);
+    }, this.isSpeedy = s.speedy === void 0 ? !0 : s.speedy, this.tags = [], this.ctr = 0, this.nonce = s.nonce, this.key = s.key, this.container = s.container, this.prepend = s.prepend, this.insertionPoint = s.insertionPoint, this.before = null;
+  }
+  var t = e.prototype;
+  return t.hydrate = function(r) {
+    r.forEach(this._insertTag);
+  }, t.insert = function(r) {
+    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);
+      try {
+        o.insertRule(r, o.cssRules.length);
+      } catch {
+      }
+    } else
+      i.appendChild(document.createTextNode(r));
+    this.ctr++;
+  }, t.flush = function() {
+    this.tags.forEach(function(r) {
+      var i;
+      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) {
+  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) {
+  return (e = t.exec(e)) ? e[0] : e;
+}
+function f(e, t, s) {
+  return e.replace(t, s);
+}
+function ie(e, t) {
+  return e.indexOf(t);
+}
+function L(e, t) {
+  return e.charCodeAt(t) | 0;
+}
+function _(e, t, s) {
+  return e.slice(t, s);
+}
+function D(e) {
+  return e.length;
+}
+function he(e) {
+  return e.length;
+}
+function U(e, t) {
+  return t.push(e), e;
+}
+function _t(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: "" };
+}
+function H(e, t) {
+  return Ft(ne("", null, null, "", null, null, 0), e, { length: -e.length }, t);
+}
+function zt() {
+  return x;
+}
+function Gt() {
+  return x = M > 0 ? L(F, --M) : 0, O--, x === 10 && (O = 1, re--), x;
+}
+function $() {
+  return x = M < Be ? L(F, M++) : 0, O++, x === 10 && (O = 1, re++), x;
+}
+function P() {
+  return L(F, M);
+}
+function Z() {
+  return M;
+}
+function G(e, t) {
+  return _(F, e, t);
+}
+function z(e) {
+  switch (e) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    // ; { } breakpoint token
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function Oe(e) {
+  return re = O = 1, Be = D(F = e), M = 0, [];
+}
+function Fe(e) {
+  return F = "", e;
+}
+function Q(e) {
+  return We(G(M - 1, ce(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+}
+function qt(e) {
+  for (; (x = P()) && x < 33; )
+    $();
+  return z(e) > 2 || z(x) > 3 ? "" : " ";
+}
+function Ut(e, t) {
+  for (; --t && $() && !(x < 48 || x > 102 || x > 57 && x < 65 || x > 70 && x < 97); )
+    ;
+  return G(e, Z() + (t < 6 && P() == 32 && $() == 32));
+}
+function ce(e) {
+  for (; $(); )
+    switch (x) {
+      // ] ) " '
+      case e:
+        return M;
+      // " '
+      case 34:
+      case 39:
+        e !== 34 && e !== 39 && ce(x);
+        break;
+      // (
+      case 40:
+        e === 41 && ce(e);
+        break;
+      // \
+      case 92:
+        $();
+        break;
+    }
+  return M;
+}
+function Zt(e, t) {
+  for (; $() && e + x !== 57; )
+    if (e + x === 84 && P() === 47)
+      break;
+  return "/*" + G(t, M - 1) + "*" + te(e === 47 ? e : $());
+}
+function Qt(e) {
+  for (; !z(P()); )
+    $();
+  return G(e, M);
+}
+function Yt(e) {
+  return Fe(Y("", 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 = $()) {
+      // (
+      case 40:
+        if (v != 108 && L(C, l - 1) == 58) {
+          ie(C += f(Q(y), "&", "&\f"), "&\f") != -1 && (b = -1);
+          break;
+        }
+      // " ' [
+      case 34:
+      case 39:
+      case 91:
+        C += Q(y);
+        break;
+      // \t \n \r \s
+      case 9:
+      case 10:
+      case 13:
+      case 32:
+        C += qt(v);
+        break;
+      // \
+      case 92:
+        C += Ut(Z() - 1, 7);
+        continue;
+      // /
+      case 47:
+        switch (P()) {
+          case 42:
+          case 47:
+            U(Kt(Zt($(), Z()), t, s), a);
+            break;
+          default:
+            C += "/";
+        }
+        break;
+      // {
+      case 123 * w:
+        c[g++] = D(C) * b;
+      // } ; \0
+      case 125 * w:
+      case 59:
+      case 0:
+        switch (y) {
+          // \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);
+            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);
+              else
+                switch (m === 99 && L(C, 3) === 110 ? 100 : m) {
+                  // d l m s
+                  case 100:
+                  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);
+                    break;
+                  default:
+                    Y(C, A, A, A, [""], T, 0, c, T);
+                }
+        }
+        g = h = k = 0, w = b = 1, R = C = "", l = d;
+        break;
+      // :
+      case 58:
+        l = 1 + D(C), k = v;
+      default:
+        if (w < 1) {
+          if (y == 123)
+            --w;
+          else if (y == 125 && w++ == 0 && Gt() == 125)
+            continue;
+        }
+        switch (C += te(y), y * w) {
+          // &
+          case 38:
+            b = h > 0 ? 1 : (C += "\f", -1);
+            break;
+          // ,
+          case 44:
+            c[g++] = (D(C) - 1) * b, b = 1;
+            break;
+          // @
+          case 64:
+            P() === 45 && (C += Q($())), m = P(), h = l = D(R = C += Qt(Z())), y++;
+            break;
+          // -
+          case 45:
+            v === 45 && D(C) == 2 && (w = 0);
+        }
+    }
+  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 Kt(e, t, s) {
+  return ne(e, t, s, Pe, te(zt()), _(e, 2, -2), 0);
+}
+function be(e, t, s, r) {
+  return ne(e, t, s, de, _(e, 0, r), _(e, r + 1, -1), r);
 }
-const ne = ({ children: s, viewport: t, containerProps: r }) => {
-  const o = K(null), [{ theme: w }] = A(), [n, d] = j({
+function B(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) {
+  switch (e.type) {
+    case Bt:
+      if (e.children.length) break;
+    case Wt:
+    case de:
+      return e.return = e.return || e.value;
+    case Pe:
+      return "";
+    case Te:
+      return e.return = e.value + "{" + B(e.children, r) + "}";
+    case le:
+      e.value = e.props.join(",");
+  }
+  return D(s = B(e.children, r)) ? e.return = e.value + "{" + s + "}" : "";
+}
+function Jt(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;
+  };
+}
+function er(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); )
+    $();
+  return G(t, M);
+}, rr = function(t, s) {
+  var r = -1, i = 44;
+  do
+    switch (z(i)) {
+      case 0:
+        i === 38 && P() === 12 && (s[r] = 1), t[r] += tr(M - 1, s, r);
+        break;
+      case 2:
+        t[r] += Q(i);
+        break;
+      case 4:
+        if (i === 44) {
+          t[++r] = P() === 58 ? "&\f" : "", s[r] = t[r].length;
+          break;
+        }
+      // fallthrough
+      default:
+        t[r] += te(i);
+    }
+  while (i = $());
+  return t;
+}, nr = function(t, s) {
+  return Fe(rr(Oe(t), s));
+}, Ce = /* @__PURE__ */ new WeakMap(), sr = 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)) {
+    for (var s = t.value, r = t.parent, i = t.column === r.column && t.line === r.line; r.type !== "rule"; )
+      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];
+    }
+  }
+}, or = function(t) {
+  if (t.type === "decl") {
+    var s = t.value;
+    // charcode for l
+    s.charCodeAt(0) === 108 && // charcode for b
+    s.charCodeAt(2) === 98 && (t.return = "", t.value = "");
+  }
+};
+function He(e, t) {
+  switch (Ht(e, t)) {
+    // color-adjust
+    case 5103:
+      return u + "print-" + e + e;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return u + e + e;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return u + e + X + e + S + e + e;
+    // flex, flex-direction
+    case 6828:
+    case 4268:
+      return u + e + S + e + e;
+    // order
+    case 6165:
+      return u + e + S + "flex-" + e + e;
+    // align-items
+    case 5187:
+      return u + e + f(e, /(\w+).+(:[^]+)/, u + "box-$1$2" + S + "flex-$1$2") + e;
+    // align-self
+    case 5443:
+      return u + e + S + "flex-item-" + f(e, /flex-|-self/, "") + e;
+    // align-content
+    case 4675:
+      return u + e + S + "flex-line-pack" + f(e, /align-content|flex-|-self/, "") + e;
+    // flex-shrink
+    case 5548:
+      return u + e + S + f(e, "shrink", "negative") + e;
+    // flex-basis
+    case 5292:
+      return u + e + S + f(e, "basis", "preferred-size") + e;
+    // flex-grow
+    case 6060:
+      return u + "box-" + f(e, "-grow", "") + u + e + S + f(e, "grow", "positive") + e;
+    // transition
+    case 4554:
+      return u + f(e, /([^-])(transform)/g, "$1" + u + "$2") + e;
+    // cursor
+    case 6187:
+      return f(f(f(e, /(zoom-|grab)/, u + "$1"), /(image-set)/, u + "$1"), e, "") + e;
+    // background, background-image
+    case 5495:
+    case 3959:
+      return f(e, /(image-set\([^]*)/, u + "$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;
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return f(e, /(.+)-inline(.+)/, u + "$1$2") + e;
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (D(e) - 1 - t > 6) switch (L(e, t + 1)) {
+        // (m)ax-content, (m)in-content
+        case 109:
+          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;
+        // (s)tretch
+        case 115:
+          return ~ie(e, "stretch") ? He(f(e, "stretch", "fill-available"), t) + e : e;
+      }
+      break;
+    // position: sticky
+    case 4949:
+      if (L(e, t + 1) !== 115) break;
+    // display: (flex|inline-flex)
+    case 6444:
+      switch (L(e, D(e) - 3 - (~ie(e, "!important") && 10))) {
+        // stic(k)y
+        case 107:
+          return f(e, ":", ":" + u) + 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;
+      }
+      break;
+    // writing-mode
+    case 5936:
+      switch (L(e, t + 11)) {
+        // vertical-l(r)
+        case 114:
+          return u + e + S + f(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;
+        // horizontal(-)tb
+        case 45:
+          return u + e + S + f(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+      }
+      return u + e + S + e + e;
+  }
+  return e;
+}
+var ir = 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, {
+        value: f(t.value, "@", "@" + u)
+      })], i);
+    case le:
+      if (t.length) return _t(t.props, function(o) {
+        switch (Vt(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")]
+            })], i);
+          // :placeholder
+          case "::placeholder":
+            return B([H(t, {
+              props: [f(o, /:(plac\w+)/, ":" + u + "input-$1")]
+            }), H(t, {
+              props: [f(o, /:(plac\w+)/, ":" + X + "$1")]
+            }), H(t, {
+              props: [f(o, /:(plac\w+)/, S + "input-$1")]
+            })], i);
+        }
+        return "";
+      });
+  }
+}, cr = [ir], ar = 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", ""));
+    });
+  }
+  var i = t.stylisPlugins || cr, o = {}, d, c = [];
+  d = 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;
+      c.push(w);
+    }
+  );
+  var a, g = [sr, or];
+  {
+    var h, l = [Xt, er(function(w) {
+      h.insert(w);
+    })], m = Jt(g.concat(i, l)), k = function(N) {
+      return B(Yt(N), m);
+    };
+    a = function(N, b, y, R) {
+      h = y, k(N ? N + "{" + b.styles + "}" : b.styles), R && (v.inserted[b.name] = !0);
+    };
+  }
+  var v = {
+    key: s,
+    sheet: new Tt({
+      key: s,
+      container: d,
+      nonce: t.nonce,
+      speedy: t.speedy,
+      prepend: t.prepend,
+      insertionPoint: t.insertionPoint
+    }),
+    nonce: t.nonce,
+    inserted: o,
+    registered: {},
+    insert: a
+  };
+  return v.sheet.hydrate(c), v;
+};
+const Ve = ({ children: e, viewport: t, containerProps: s }) => {
+  const r = je(null), [{ theme: i }] = ae(), [o, d] = ee({
     width: 0,
     height: 0
   });
-  N(() => {
-    const f = _e((I) => {
-      const y = I.at(0)?.target;
-      if (!y) return;
-      const { width: re, height: se } = y.getBoundingClientRect();
+  V(() => {
+    const v = Lt((N) => {
+      const b = N.at(0)?.target;
+      if (!b) return;
+      const { width: y, height: R } = b.getBoundingClientRect();
       d(() => ({
-        width: re,
-        height: se
+        width: y,
+        height: R
       }));
-    }, 200), v = new ResizeObserver(f);
-    return o.current && v.observe(o.current), () => v.disconnect();
+    }, 200), w = new ResizeObserver(v);
+    return r.current && w.observe(r.current), () => w.disconnect();
   }, []);
-  const l = T(t?.width) ? t.width(n.width) : t?.width, a = T(t?.height) ? t.height(n.height) : t?.height, u = P(l) ? n.width / l : 1, h = P(a) ? n.height / a : 1, c = Math.min(u, h, 1), g = (a ?? n.height / c) || 0, m = (l ?? n.width / c) || 0;
-  return /* @__PURE__ */ e("div", { ...r, className: b("tw:w-full tw:h-full tw:p-2 tw:bg-ic-ink-1s", r?.className), children: /* @__PURE__ */ e("div", { className: b("tw:w-full tw:h-full tw:overflow-hidden tw:relative"), ref: o, children: /* @__PURE__ */ e(
+  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;
+  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(${c})`,
-        width: m,
-        height: g,
-        marginLeft: (n.width - m) / 2,
-        marginTop: (n.height - g) / 2
+        transform: `scale(${l})`,
+        width: k,
+        height: m,
+        marginLeft: (o.width - k) / 2,
+        marginTop: (o.height - m) / 2
       },
       className: "tw:absolute",
-      children: /* @__PURE__ */ e(
-        $e,
+      children: /* @__PURE__ */ n(
+        Et,
         {
           sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
           allow: "autoplay; encrypted-media",
-          width: l ?? "100%",
+          width: c ?? "100%",
           height: a ?? "100%",
-          children: /* @__PURE__ */ e(ot, { theme: w, children: s })
+          children: /* @__PURE__ */ n(lr, { theme: i, children: e })
         }
       )
     }
   ) }) });
-}, ot = ({ children: s, theme: t }) => {
-  const { document: r, window: o } = Ge(), [w, n] = j(!1), d = K(window.customElements.define.bind(window.customElements));
-  N(() => {
+}, 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 o && (window.customElements.define = function(u, h, c) {
-      window.customElements.get(u) || o.customElements.define(u, h, c), a(u, h, c);
-    }), r?.head.replaceWith(document.head.cloneNode(!0)), n(!0), () => {
+    return r && (window.customElements.define = function(g, h, l) {
+      window.customElements.get(g) || r.customElements.define(g, h, l), a(g, h, l);
+    }), s?.head.replaceWith(document.head.cloneNode(!0)), o(!0), () => {
       window.customElements.define = a;
     };
-  }, [r, o]);
-  const l = ie({
+  }, [s, r]);
+  const c = ar({
     key: "css",
-    container: r?.head
+    container: s?.head
   });
-  return w ? /* @__PURE__ */ e(_, { children: /* @__PURE__ */ i(Me, { value: l, children: [
-    /* @__PURE__ */ e(
-      ee,
+  return i ? /* @__PURE__ */ n(Ne, { children: /* @__PURE__ */ p(lt, { value: c, children: [
+    /* @__PURE__ */ n(
+      dt,
       {
         styles: {
           ".frame-content": {
@@ -402,41 +728,41 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
             minHeight: "100vh",
             justifyContent: "center"
           },
-          [`& *[${R.DATA_NODE_DROP_TARGET}=${z.True}]`]: {
+          [`& *[${pe.DATA_NODE_DROP_TARGET}=${ge.True}]`]: {
             outlineWidth: 1,
             outlineStyle: "solid",
             outlineOffset: -1,
             outlineColor: "green"
           },
-          [`& *[${R.DATA_NODE_DROP_TARGET_ERROR}=${z.True}]`]: {
+          [`& *[${pe.DATA_NODE_DROP_TARGET_ERROR}=${ge.True}]`]: {
             outlineColor: "red"
           }
         }
       }
     ),
-    /* @__PURE__ */ e(Ke, { theme: t, children: s })
+    /* @__PURE__ */ n(xt, { theme: t, children: e })
   ] }) }) : null;
-}, nt = ({ render: s }) => {
-  const { id: t, renderer: r } = Ze((n) => ({
-    resolvedId: ae(n),
-    renderer: le(n).renderer
+}, dr = ({ render: e }) => {
+  const { id: t, renderer: s } = Rt((o) => ({
+    resolvedId: st(o),
+    renderer: nt(o).renderer
   })), {
-    queryParams: { mode: o }
-  } = S(), { isActive: w } = C((n, d) => ({
-    isActive: d.getEvent("selected").contains(t) && t !== W
+    queryParams: { mode: r }
+  } = J(), { isActive: i } = W((o, d) => ({
+    isActive: d.getEvent("selected").contains(t) && t !== oe
   }));
-  return r ? Y(r, { render: s }) : /* @__PURE__ */ i(L, { children: [
-    w && o === "full" && /* @__PURE__ */ i(L, { children: [
-      /* @__PURE__ */ e(pe, {}),
-      /* @__PURE__ */ e(me, {})
+  return s ? Ae(s, { render: e }) : /* @__PURE__ */ p(K, { children: [
+    i && r === "full" && /* @__PURE__ */ p(K, { children: [
+      /* @__PURE__ */ n(ze, {}),
+      /* @__PURE__ */ n(Ge, {})
     ] }),
-    s
+    e
   ] });
-}, B = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, xe = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <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>
-`, rt = `<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 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"/>
@@ -444,182 +770,182 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
 <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>
-`, st = `<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 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>
-`, it = '<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>', O = je(), lt = () => {
+`, 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 = () => {
   const {
-    queryParams: { mode: s, screen: t },
-    setQueryParams: r
-  } = S(), { actions: o, canRedo: w, canUndo: n } = C((h, c) => ({
+    queryParams: { mode: e, screen: t },
+    setQueryParams: s
+  } = J(), { actions: r, canRedo: i, canUndo: o } = W((h, l) => ({
     enabled: h.options.enabled,
-    canUndo: c.history.canUndo(),
-    canRedo: c.history.canRedo()
+    canUndo: l.history.canUndo(),
+    canRedo: l.history.canRedo()
   })), d = (h) => {
-    r({
+    s({
       screen: h
     });
-  }, l = () => {
-    r({ mode: s === "full" ? "compact" : "full" });
+  }, c = () => {
+    s({ mode: e === "full" ? "compact" : "full" });
   }, a = () => {
-    O.emit("close");
-  }, u = () => {
-    o.selectNode(), O.emit("submit");
+    ye.emit("close");
+  }, g = () => {
+    r.selectNode(), ye.emit("submit");
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: b(
+      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__ */ i("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
-          /* @__PURE__ */ e(k, { size: "32", onClick: a, children: /* @__PURE__ */ e(p, { source: it }) }),
-          /* @__PURE__ */ e(fe, { onSelectionChange: d, value: t, children: ge.map(({ icon: h, size: c }) => /* @__PURE__ */ e(k, { value: c, children: /* @__PURE__ */ e(p, { source: h }) }, c)) }),
-          /* @__PURE__ */ i("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: [
-            /* @__PURE__ */ e(k, { onClick: o.history.undo, disabled: !n, children: /* @__PURE__ */ e(p, { source: B }) }),
-            /* @__PURE__ */ e(k, { onClick: o.history.redo, disabled: !w, children: /* @__PURE__ */ e(p, { source: B, className: "tw:rotate-180" }) })
+        /* @__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__ */ 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__ */ e("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: /* @__PURE__ */ e(k, { onClick: l, children: /* @__PURE__ */ e(p, { source: s === "full" ? st : rt }) }) })
+          /* @__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__ */ e("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ e(G, { onClick: u, children: "Save" }) })
+        /* @__PURE__ */ n("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ n(Le, { onClick: g, children: "Save" }) })
       ]
     }
   );
-}, at = `<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="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>
-`, ct = `<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="M15 6L9 12L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, dt = ({ elements: s, sections: t }) => /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:h-full", children: [
-  /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:p-2 tw:gap-3", children: /* @__PURE__ */ e(U, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ e(p, { source: at }) }) }),
-  /* @__PURE__ */ i(ke, { defaultIndex: 1, className: "tw:flex-1 tw:overflow-hidden tw:border-t tw:border-ic-white-1s", children: [
-    /* @__PURE__ */ i(be, { children: [
-      /* @__PURE__ */ e(F, { className: "tw:flex-1", children: "Sections" }),
-      /* @__PURE__ */ e(F, { className: "tw:flex-1", children: "Elements" })
+`, 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: [
+      /* @__PURE__ */ n(we, { className: "tw:flex-1", children: "Sections" }),
+      /* @__PURE__ */ n(we, { className: "tw:flex-1", children: "Elements" })
     ] }),
-    /* @__PURE__ */ i(ve, { className: "tw:flex-1 tw:overflow-hidden", children: [
-      /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(D, { className: "tw:h-full tw:py-2", children: t.map((r, o) => /* @__PURE__ */ e(ht, { group: r }, o)) }) }),
-      /* @__PURE__ */ e(H, { className: "tw:h-full tw:overflow-hidden", children: /* @__PURE__ */ e(D, { className: "tw:h-full tw:py-2", children: s.map((r, o) => /* @__PURE__ */ e(wt, { group: r }, o)) }) })
+    /* @__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)) }) })
     ] })
   ] })
-] }), wt = ({ group: s }) => {
-  const [t, r] = J(!0), { actions: o, connectors: w } = C();
-  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:text-sm", children: [
-    /* @__PURE__ */ e(G, { onClick: r, className: "tw:bg-transparent", children: /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:justify-between tw:flex-1 tw:text-sm", children: [
-      s.name,
-      /* @__PURE__ */ e(
-        p,
+] }), kr = ({ 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: [
+      e.name,
+      /* @__PURE__ */ n(
+        E,
         {
-          source: q,
-          className: b("tw:transition-transform", {
+          source: Se,
+          className: I("tw:transition-transform", {
             "tw:rotate-180": !t
           })
         }
       )
     ] }) }),
-    /* @__PURE__ */ e(xe, { open: t, children: /* @__PURE__ */ e("div", { className: "tw:px-4 tw:py-2 tw:grid tw:grid-cols-2 tw:gap-4", children: s.elements.map((n, d) => /* @__PURE__ */ i("div", { className: "tw:space-y-1", children: [
-      /* @__PURE__ */ e(
+    /* @__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(
         "div",
         {
-          className: b(
+          className: I(
             "tw:bg-ic-ink-6s tw:relative tw:transition-transform tw:rounded-lg tw:hover:scale-105 tw:pointer-events-auto tw:aspect-video tw:overflow-hidden",
             "tw:cursor-grabbing tw:flex tw:flex-col tw:gap-1 tw:items-center tw:justify-center tw:p-1 tw:opacity-100 tw:text-ic-white-5s",
             "tw:after:absolute tw:after:inset-0 tw:after:content-empty tw:after:bg-ic-white-1s"
           ),
-          ref: (l) => {
-            l && w.create(l, n.template, {
+          ref: (c) => {
+            c && i.create(c, o.template, {
               onCreate(a) {
-                (typeof n.autoFocus == "function" ? n.autoFocus(a) : n.autoFocus) && o.selectNode(a.rootNodeId), n.onCreate?.(a);
+                (typeof o.autoFocus == "function" ? o.autoFocus(a) : o.autoFocus) && r.selectNode(a.rootNodeId), o.onCreate?.(a);
               }
             });
           },
-          children: /* @__PURE__ */ e(ce, { width: void 0, height: void 0, ...n.icon })
+          children: /* @__PURE__ */ n(ot, { width: void 0, height: void 0, ...o.icon })
         }
       ),
-      /* @__PURE__ */ e("p", { className: "tw:text-xs tw:mx-auto tw:text-center", children: n.name })
+      /* @__PURE__ */ n("p", { className: "tw:text-xs tw:mx-auto tw:text-center", children: o.name })
     ] }, d)) }) })
   ] });
-}, ht = ({ group: s }) => {
-  const [t, r] = j(!1), { refs: o, floatingStyles: w, context: n } = We({
+}, vr = ({ group: e }) => {
+  const [t, s] = ee(!1), { refs: r, floatingStyles: i, context: o } = wt({
     open: t,
-    onOpenChange: r,
+    onOpenChange: s,
     placement: "right-start",
     middleware: [
-      Ie(),
-      Re({
-        apply({ elements: g }) {
-          const m = {
-            zIndex: `${Ce}`,
-            height: `${g.reference.getBoundingClientRect().height}px`
+      ft(),
+      pt({
+        apply({ elements: m }) {
+          const k = {
+            zIndex: `${yt}`,
+            height: `${m.reference.getBoundingClientRect().height}px`
           };
-          Object.assign(g.floating.style, m);
+          Object.assign(m.floating.style, k);
         }
       })
     ],
-    whileElementsMounted: Ae
+    whileElementsMounted: ut
   });
-  N(() => {
-    o.setPositionReference(document.querySelector("aside"));
-  }, [o]);
-  const d = ze(n, { move: !1, handleClose: Fe() }), l = He(n), a = Ve(n), u = Te(n), { getReferenceProps: h, getFloatingProps: c } = Pe([d, l, a, u]);
-  return /* @__PURE__ */ i(L, { children: [
-    /* @__PURE__ */ i(
+  V(() => {
+    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(
       "button",
       {
-        className: b(
+        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(),
-        ref: o.setReference,
+        ref: r.setReference,
         children: [
-          /* @__PURE__ */ e("div", { className: "tw:bg-ic-white-1s tw:p-1.5 tw:rounded-lg", children: /* @__PURE__ */ e(p, { ...s.icon }) }),
-          /* @__PURE__ */ e("span", { className: "tw:flex-1 tw:truncate", children: s.name }),
-          /* @__PURE__ */ e(p, { className: "tw:rotate-180", source: ct })
+          /* @__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 })
         ]
       }
     ),
-    t && /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e("div", { style: w, ...c(), ref: o.setFloating, children: /* @__PURE__ */ i("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__ */ e("div", { className: "tw:h-12 tw:px-2 tw:flex tw:items-center", children: /* @__PURE__ */ e("h6", { className: "tw:font-medium", children: s.name }) }),
-      /* @__PURE__ */ e(D, { className: "tw:flex-1 tw:px-3", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-4", children: s.sections.map((g, m) => /* @__PURE__ */ De(ut, { ...g, key: m })) }) })
+    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: [
+      /* @__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 })) }) })
     ] }) }) })
   ] });
-}, ut = ({ template: s, autoFocus: t = !0, onCreate: r }) => {
-  const [, o] = j(!1), [w] = A(), { actions: n, connectors: d, resolver: l } = C((a) => ({
+}, 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
   }));
-  return /* @__PURE__ */ e(
+  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, s, {
-          onCreate(u) {
-            t && n.selectNode(u.rootNodeId), r?.(u);
+        a && d.create(a, e, {
+          onCreate(g) {
+            t && o.selectNode(g.rootNodeId), s?.(g);
           }
         });
       },
-      onDragStart: () => o(!0),
-      onDragEnd: () => o(!1),
-      children: /* @__PURE__ */ e("div", { className: "tw:relative tw:aspect-video tw:rounded-lg tw:overflow-hidden tw:w-60 tw:pointer-events-none", children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0", children: /* @__PURE__ */ e(
-        ne,
+      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,
         {
           containerProps: {
             style: {
-              backgroundColor: w.theme.palette.background.default
+              backgroundColor: i.theme.palette.background.default
             }
           },
-          viewport: { width: de.md.minWidth },
-          children: /* @__PURE__ */ e(Z, { resolver: l, children: /* @__PURE__ */ e(Q, {}) })
+          viewport: { width: Nt.md.minWidth },
+          children: /* @__PURE__ */ n(Me, { resolver: c, children: /* @__PURE__ */ n($e, {}) })
         }
       ) }) })
     }
   );
-}, pt = `<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">
 <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"/>
@@ -630,81 +956,81 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
 <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>
-`, mt = `<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">
 <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>
-`, gt = (s) => {
-  const { query: t, actions: r } = C(), {
-    id: o,
-    expanded: w,
-    actions: n,
+`, yr = (e) => {
+  const { query: t, actions: s } = W(), {
+    id: r,
+    expanded: i,
+    actions: o,
     displayName: d,
-    children: l,
+    children: c,
     depth: a
-  } = qe((m) => ({
-    expanded: m.expanded,
-    displayName: $(t.node(m.id).get())
-  })), { selected: u, selectable: h } = C((m, f) => {
-    const v = f.node(o).get();
+  } = $t((k) => ({
+    expanded: k.expanded,
+    displayName: Re(t.node(k.id).get())
+  })), { selected: g, selectable: h } = W((k, v) => {
+    const w = v.node(r).get();
     return {
-      selected: f.getEvent("selected").contains(o),
-      nodeDOM: v.dom,
-      selectable: we(v)
+      selected: v.getEvent("selected").contains(r),
+      nodeDOM: w.dom,
+      selectable: it(w)
     };
   });
-  N(() => {
-    o === W && n.setExpandedState(!0);
-  }, [n, o]), N(() => {
-    if (l.length === 0) return;
-    l.some((f) => {
-      const v = t.getEvent("selected").all();
-      return v.includes(f) ? !0 : t.node(f).descendants(!0).some((y) => v.includes(y));
-    }) && n.setExpandedState(!0);
-  }, [l, n, t]);
-  const c = () => {
-    r.selectNode(o);
-  }, g = (m) => {
-    m.stopPropagation(), n.toggleLayer();
+  V(() => {
+    r === oe && o.setExpandedState(!0);
+  }, [o, r]), V(() => {
+    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));
+    }) && o.setExpandedState(!0);
+  }, [c, o, t]);
+  const l = () => {
+    s.selectNode(r);
+  }, m = (k) => {
+    k.stopPropagation(), o.toggleLayer();
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ p(
     "div",
     {
       className: "tw:py-1",
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ p(
           "div",
           {
-            onClick: c,
+            onClick: l,
             style: {
               paddingLeft: Math.max(0, a - 1) * 16
             },
-            className: b(
+            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: o === W,
-                "tw:bg-ic-black-7s": u,
+                hidden: r === oe,
+                "tw:bg-ic-black-7s": g,
                 "tw:pointer-events-none": !h
               }
             ),
             children: [
-              l.length ? /* @__PURE__ */ e(k, { className: "tw:pointer-events-auto", onClick: g, children: /* @__PURE__ */ e(
-                p,
+              c.length ? /* @__PURE__ */ n(j, { className: "tw:pointer-events-auto", onClick: m, children: /* @__PURE__ */ n(
+                E,
                 {
-                  className: b("tw:transition-transform tw:-rotate-90", {
-                    "tw:rotate-0": w
+                  className: I("tw:transition-transform tw:-rotate-90", {
+                    "tw:rotate-0": i
                   }),
                   size: 16,
-                  source: q
+                  source: Se
                 }
-              ) }) : /* @__PURE__ */ e("div", { className: "tw:p-1", children: /* @__PURE__ */ e(p, { size: 16, source: mt }) }),
-              /* @__PURE__ */ e(
+              ) }) : /* @__PURE__ */ n("div", { className: "tw:p-1", children: /* @__PURE__ */ n(E, { size: 16, source: xr }) }),
+              /* @__PURE__ */ n(
                 "span",
                 {
-                  className: b("tw:flex-1 tw:truncate", {
+                  className: I("tw:flex-1 tw:truncate", {
                     "tw:text-ic-white-3s": !h
                   }),
                   children: d
@@ -713,16 +1039,16 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { className: "tw:space-y-1", children: s.children })
+        /* @__PURE__ */ n("div", { className: "tw:space-y-1", children: e.children })
       ]
     }
   );
-}, ft = ({ onClose: s }) => {
-  const t = tt(), r = (o) => {
-    t.start(o);
+}, Nr = ({ onClose: e }) => {
+  const t = Dt(), s = (r) => {
+    t.start(r);
   };
-  return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ i(
-    ye.div,
+  return /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ p(
+    Xe.div,
     {
       drag: !0,
       dragControls: t,
@@ -730,64 +1056,64 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
       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__ */ i(
+        /* @__PURE__ */ p(
           "div",
           {
-            onPointerDown: r,
+            onPointerDown: s,
             className: "tw:py-2 tw:cursor-grab tw:flex tw:items-center tw:justify-between tw:px-4",
             children: [
-              /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
-                /* @__PURE__ */ e(p, { source: pt }),
-                /* @__PURE__ */ e("p", { className: "tw:text-sm tw:font-medium", children: "Layers" })
+              /* @__PURE__ */ p("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+                /* @__PURE__ */ n(E, { source: Cr }),
+                /* @__PURE__ */ n("p", { className: "tw:text-sm tw:font-medium", children: "Layers" })
               ] }),
-              /* @__PURE__ */ e(k, { onClick: s, children: /* @__PURE__ */ e(p, { source: Ne }) })
+              /* @__PURE__ */ n(j, { onClick: e, children: /* @__PURE__ */ n(E, { source: Je }) })
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s tw:p-2", children: /* @__PURE__ */ e(Ue, { renderLayer: gt }) })
+        /* @__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 }) })
       ]
     }
   ) });
-}, kt = `<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 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>
-`, bt = `<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 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>
-`, vt = ({ insert: s }) => {
-  const [t, r] = J(!1), {
+`, Sr = ({ insert: e }) => {
+  const [t, s] = De(!1), {
     queryParams: {
-      action: o = "insert"
+      action: r = "insert"
       /* Insert */
     },
-    setQueryParams: w
-  } = S(), { actions: n, isDeletable: d, focusedNode: l } = C((c, g) => {
-    const m = g.getEvent("selected").first(), f = m ? g.node(m) : null;
+    setQueryParams: i
+  } = J(), { actions: o, isDeletable: d, focusedNode: c } = W((l, m) => {
+    const k = m.getEvent("selected").first(), v = k ? m.node(k) : null;
     return {
-      enabled: c.options.enabled,
-      isDeletable: !!(f?.isDeletable() && (f.get().data.custom?.deletable ?? !0)),
-      focusedNode: f?.get()
+      enabled: l.options.enabled,
+      isDeletable: !!(v?.isDeletable() && (v.get().data.custom?.deletable ?? !0)),
+      focusedNode: v?.get()
     };
   }), a = () => {
-    n.selectNode();
-  }, u = (c) => {
-    n.delete(c.currentTarget.value);
-  }, h = (c) => {
-    const g = c.currentTarget.value;
-    g === "layers" ? r() : (a(), w({
-      action: g
+    o.selectNode();
+  }, g = (l) => {
+    o.delete(l.currentTarget.value);
+  }, h = (l) => {
+    const m = l.currentTarget.value;
+    m === "layers" ? s() : (a(), i({
+      action: m
     }));
   };
-  return /* @__PURE__ */ i(L, { children: [
-    /* @__PURE__ */ i("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__ */ i("div", { className: "tw:px-1 tw:flex tw:flex-col tw:gap-1", children: [
-        !!s && /* @__PURE__ */ i(_, { children: [
-          /* @__PURE__ */ e(
-            k,
+  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: [
+          /* @__PURE__ */ n(
+            j,
             {
               tooltip: {
                 content: "Insert",
@@ -797,13 +1123,13 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
               value: "insert",
               className: "tw:relative",
               size: "32",
-              children: /* @__PURE__ */ e(p, { source: he })
+              children: /* @__PURE__ */ n(E, { source: ct })
             }
           ),
-          /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-2s" })
+          /* @__PURE__ */ n("hr", { className: "tw:border-ic-white-2s" })
         ] }),
-        /* @__PURE__ */ e(
-          k,
+        /* @__PURE__ */ n(
+          j,
           {
             tooltip: {
               content: "Layers",
@@ -813,55 +1139,55 @@ const ne = ({ children: s, viewport: t, containerProps: r }) => {
             value: "layers",
             className: "tw:relative",
             size: "32",
-            children: /* @__PURE__ */ e(p, { source: kt })
+            children: /* @__PURE__ */ n(E, { source: Lr })
           }
         )
       ] }),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ p(
         "div",
         {
-          className: b("tw:relative tw:flex tw:flex-col tw:border-l tw:border-ic-white-1s tw:w-72 tw:overflow-auto"),
+          className: I("tw:relative tw:flex tw:flex-col tw:border-l tw:border-ic-white-1s tw:w-72 tw:overflow-auto"),
           children: [
-            !l?.related.inspector && /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-auto scrollbar", children: o === "insert" && !!s && /* @__PURE__ */ e(dt, { elements: s.elements, sections: s.sections }) }),
-            !!l?.related?.inspector && /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:flex-1 tw:overflow-hidden", children: [
-              /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-2 tw:px-2 tw:py-2", children: [
-                /* @__PURE__ */ e(k, { onClick: a, children: /* @__PURE__ */ e(p, { source: bt }) }),
-                /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-hidden", children: /* @__PURE__ */ e(U, { fullWidth: !0, value: $(l), size: "32" }) }),
-                d && /* @__PURE__ */ e(k, { value: l.id, onClick: u, children: /* @__PURE__ */ e(p, { className: "tw:text-ic-red-4s", source: Le }) })
+            !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 }) })
               ] }),
-              /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s scrollbar-hidden", children: /* @__PURE__ */ e(Ee, { fallback: null, children: Y(l.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(at, { fallback: null, children: Ae(c.related.inspector) }) })
             ] })
           ]
         }
       )
     ] }),
-    t && /* @__PURE__ */ e(ft, { onClose: r })
+    t && /* @__PURE__ */ n(Nr, { onClose: s })
   ] });
-}, It = ({ theme: s, insert: t }) => {
+}, Hr = ({ theme: e, insert: t }) => {
   const {
-    queryParams: { screen: r }
-  } = S();
-  return A({
-    theme: s
-  }), /* @__PURE__ */ e(Z, { enabled: !0, onRender: nt, children: /* @__PURE__ */ i("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__ */ e(lt, {}),
-    /* @__PURE__ */ i("div", { className: "tw:flex-1 tw:overflow-hidden tw:flex", children: [
-      /* @__PURE__ */ e(vt, { insert: t }),
-      /* @__PURE__ */ e(
-        ne,
+    queryParams: { screen: s }
+  } = J();
+  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(
+        Ve,
         {
           viewport: {
-            width: (o) => r === "lg" ? Math.max(o, V[r]) : V[r]
+            width: (r) => s === "lg" ? Math.max(r, fe[s]) : fe[s]
           },
-          children: /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(Se, {}) })
+          children: /* @__PURE__ */ n($e, { children: /* @__PURE__ */ n(tt, {}) })
         }
       )
     ] })
   ] }) });
 };
 export {
-  It as Editor,
-  S as useEditorQueryParams,
-  Ft as useEditorResponsive,
-  A as useEditorState
+  Hr as Editor,
+  J as useEditorQueryParams,
+  zr as useEditorResponsive,
+  ae as useEditorState
 };