@fragmentsx/render-react 0.0.4 → 1.0.0

package/dist/index.es.js

@@ -1,464 +1,3959 @@
-import { render, createElement, Instance as Instance$1, Fragment as Fragment$1 } from "@fragmentsx/render-core";
-import require$$0, { createContext, useContext, useRef, useCallback, useState, useEffect } from "react";
-import "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import require$$0, { createContext, useState, useEffect, useContext, useRef, useCallback, useMemo, Suspense } from "react";
 import { definition } from "@fragmentsx/definition";
-const GlobalManager = createContext(null);
-function createReactComponent(PreactComponent) {
-  return function ReactWrapper(props) {
-    const globalManager = useContext(GlobalManager);
-    const containerRef = require$$0.useRef(null);
-    require$$0.useEffect(() => {
-      if (containerRef.current) {
-        render(
-          createElement(PreactComponent, {
-            ...props,
-            globalManager: (props == null ? void 0 : props.globalManager) ?? globalManager
-          }),
-          containerRef.current
-        );
-      }
-      return () => {
-        if (containerRef.current) {
-          render(null, containerRef.current);
-        }
-      };
-    }, [props, globalManager]);
-    return require$$0.createElement("div", { ref: containerRef });
+import { isPartialKey, keyOfEntity, entityOfKey, isLinkKey } from "@graph-state/core";
+const collectStyles = (globalManager) => {
+  if (!globalManager) return null;
+  const allFragments = globalManager.$fragments.getManagers();
+  const extractors = Object.entries(allFragments).filter(([, value]) => !!(value == null ? void 0 : value.resolve)).map(([fragmentId, manager]) => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.extract) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.at(0);
+  });
+  return extractors.map((extractor) => /* @__PURE__ */ jsx(
+    "style",
+    {
+      id: `fragments-${extractor == null ? void 0 : extractor.fragment}`,
+      dangerouslySetInnerHTML: { __html: extractor == null ? void 0 : extractor.styles.join("") }
+    }
+  ));
+};
+var n, l, t, i, r, o, e, f, c, s, a, p = {}, v = [], y$1 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, d = Array.isArray;
+function w(n2, l2) {
+  for (var t2 in l2) n2[t2] = l2[t2];
+  return n2;
+}
+function g(n2) {
+  n2 && n2.parentNode && n2.parentNode.removeChild(n2);
+}
+function _(l2, t2, u) {
+  var i2, r2, o2, e2 = {};
+  for (o2 in t2) "key" == o2 ? i2 = t2[o2] : "ref" == o2 ? r2 = t2[o2] : e2[o2] = t2[o2];
+  if (arguments.length > 2 && (e2.children = arguments.length > 3 ? n.call(arguments, 2) : u), "function" == typeof l2 && null != l2.defaultProps) for (o2 in l2.defaultProps) void 0 === e2[o2] && (e2[o2] = l2.defaultProps[o2]);
+  return m(l2, e2, i2, r2, null);
+}
+function m(n2, u, i2, r2, o2) {
+  var e2 = { type: n2, props: u, key: i2, ref: r2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: null == o2 ? ++t : o2, __i: -1, __u: 0 };
+  return null == o2 && null != l.vnode && l.vnode(e2), e2;
+}
+function k(n2) {
+  return n2.children;
+}
+function x$1(n2, l2) {
+  this.props = n2, this.context = l2;
+}
+function S$1(n2, l2) {
+  if (null == l2) return n2.__ ? S$1(n2.__, n2.__i + 1) : null;
+  for (var t2; l2 < n2.__k.length; l2++) if (null != (t2 = n2.__k[l2]) && null != t2.__e) return t2.__e;
+  return "function" == typeof n2.type ? S$1(n2) : null;
+}
+function C(n2) {
+  var l2, t2;
+  if (null != (n2 = n2.__) && null != n2.__c) {
+    for (n2.__e = n2.__c.base = null, l2 = 0; l2 < n2.__k.length; l2++) if (null != (t2 = n2.__k[l2]) && null != t2.__e) {
+      n2.__e = n2.__c.base = t2.__e;
+      break;
+    }
+    return C(n2);
+  }
+}
+function M(n2) {
+  (!n2.__d && (n2.__d = true) && i.push(n2) && !$.__r++ || r !== l.debounceRendering) && ((r = l.debounceRendering) || o)($);
+}
+function $() {
+  for (var n2, t2, u, r2, o2, f2, c2, s2 = 1; i.length; ) i.length > s2 && i.sort(e), n2 = i.shift(), s2 = i.length, n2.__d && (u = void 0, o2 = (r2 = (t2 = n2).__v).__e, f2 = [], c2 = [], t2.__P && ((u = w({}, r2)).__v = r2.__v + 1, l.vnode && l.vnode(u), O(t2.__P, u, r2, t2.__n, t2.__P.namespaceURI, 32 & r2.__u ? [o2] : null, f2, null == o2 ? S$1(r2) : o2, !!(32 & r2.__u), c2), u.__v = r2.__v, u.__.__k[u.__i] = u, z(f2, u, c2), u.__e != o2 && C(u)));
+  $.__r = 0;
+}
+function I(n2, l2, t2, u, i2, r2, o2, e2, f2, c2, s2) {
+  var a2, h, y2, d2, w2, g2, _2 = u && u.__k || v, m2 = l2.length;
+  for (f2 = P(t2, l2, _2, f2, m2), a2 = 0; a2 < m2; a2++) null != (y2 = t2.__k[a2]) && (h = -1 === y2.__i ? p : _2[y2.__i] || p, y2.__i = a2, g2 = O(n2, y2, h, i2, r2, o2, e2, f2, c2, s2), d2 = y2.__e, y2.ref && h.ref != y2.ref && (h.ref && q(h.ref, null, y2), s2.push(y2.ref, y2.__c || d2, y2)), null == w2 && null != d2 && (w2 = d2), 4 & y2.__u || h.__k === y2.__k ? f2 = A(y2, f2, n2) : "function" == typeof y2.type && void 0 !== g2 ? f2 = g2 : d2 && (f2 = d2.nextSibling), y2.__u &= -7);
+  return t2.__e = w2, f2;
+}
+function P(n2, l2, t2, u, i2) {
+  var r2, o2, e2, f2, c2, s2 = t2.length, a2 = s2, h = 0;
+  for (n2.__k = new Array(i2), r2 = 0; r2 < i2; r2++) null != (o2 = l2[r2]) && "boolean" != typeof o2 && "function" != typeof o2 ? (f2 = r2 + h, (o2 = n2.__k[r2] = "string" == typeof o2 || "number" == typeof o2 || "bigint" == typeof o2 || o2.constructor == String ? m(null, o2, null, null, null) : d(o2) ? m(k, { children: o2 }, null, null, null) : void 0 === o2.constructor && o2.__b > 0 ? m(o2.type, o2.props, o2.key, o2.ref ? o2.ref : null, o2.__v) : o2).__ = n2, o2.__b = n2.__b + 1, e2 = null, -1 !== (c2 = o2.__i = L(o2, t2, f2, a2)) && (a2--, (e2 = t2[c2]) && (e2.__u |= 2)), null == e2 || null === e2.__v ? (-1 == c2 && (i2 > s2 ? h-- : i2 < s2 && h++), "function" != typeof o2.type && (o2.__u |= 4)) : c2 != f2 && (c2 == f2 - 1 ? h-- : c2 == f2 + 1 ? h++ : (c2 > f2 ? h-- : h++, o2.__u |= 4))) : n2.__k[r2] = null;
+  if (a2) for (r2 = 0; r2 < s2; r2++) null != (e2 = t2[r2]) && 0 == (2 & e2.__u) && (e2.__e == u && (u = S$1(e2)), B(e2, e2));
+  return u;
+}
+function A(n2, l2, t2) {
+  var u, i2;
+  if ("function" == typeof n2.type) {
+    for (u = n2.__k, i2 = 0; u && i2 < u.length; i2++) u[i2] && (u[i2].__ = n2, l2 = A(u[i2], l2, t2));
+    return l2;
+  }
+  n2.__e != l2 && (l2 && n2.type && !t2.contains(l2) && (l2 = S$1(n2)), t2.insertBefore(n2.__e, l2 || null), l2 = n2.__e);
+  do {
+    l2 = l2 && l2.nextSibling;
+  } while (null != l2 && 8 == l2.nodeType);
+  return l2;
+}
+function L(n2, l2, t2, u) {
+  var i2, r2, o2 = n2.key, e2 = n2.type, f2 = l2[t2];
+  if (null === f2 && null == n2.key || f2 && o2 == f2.key && e2 === f2.type && 0 == (2 & f2.__u)) return t2;
+  if (u > (null != f2 && 0 == (2 & f2.__u) ? 1 : 0)) for (i2 = t2 - 1, r2 = t2 + 1; i2 >= 0 || r2 < l2.length; ) {
+    if (i2 >= 0) {
+      if ((f2 = l2[i2]) && 0 == (2 & f2.__u) && o2 == f2.key && e2 === f2.type) return i2;
+      i2--;
+    }
+    if (r2 < l2.length) {
+      if ((f2 = l2[r2]) && 0 == (2 & f2.__u) && o2 == f2.key && e2 === f2.type) return r2;
+      r2++;
+    }
+  }
+  return -1;
+}
+function T(n2, l2, t2) {
+  "-" == l2[0] ? n2.setProperty(l2, null == t2 ? "" : t2) : n2[l2] = null == t2 ? "" : "number" != typeof t2 || y$1.test(l2) ? t2 : t2 + "px";
+}
+function j(n2, l2, t2, u, i2) {
+  var r2;
+  n: if ("style" == l2) if ("string" == typeof t2) n2.style.cssText = t2;
+  else {
+    if ("string" == typeof u && (n2.style.cssText = u = ""), u) for (l2 in u) t2 && l2 in t2 || T(n2.style, l2, "");
+    if (t2) for (l2 in t2) u && t2[l2] === u[l2] || T(n2.style, l2, t2[l2]);
+  }
+  else if ("o" == l2[0] && "n" == l2[1]) r2 = l2 != (l2 = l2.replace(f, "$1")), l2 = l2.toLowerCase() in n2 || "onFocusOut" == l2 || "onFocusIn" == l2 ? l2.toLowerCase().slice(2) : l2.slice(2), n2.l || (n2.l = {}), n2.l[l2 + r2] = t2, t2 ? u ? t2.t = u.t : (t2.t = c, n2.addEventListener(l2, r2 ? a : s, r2)) : n2.removeEventListener(l2, r2 ? a : s, r2);
+  else {
+    if ("http://www.w3.org/2000/svg" == i2) l2 = l2.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
+    else if ("width" != l2 && "height" != l2 && "href" != l2 && "list" != l2 && "form" != l2 && "tabIndex" != l2 && "download" != l2 && "rowSpan" != l2 && "colSpan" != l2 && "role" != l2 && "popover" != l2 && l2 in n2) try {
+      n2[l2] = null == t2 ? "" : t2;
+      break n;
+    } catch (n3) {
+    }
+    "function" == typeof t2 || (null == t2 || false === t2 && "-" != l2[4] ? n2.removeAttribute(l2) : n2.setAttribute(l2, "popover" == l2 && 1 == t2 ? "" : t2));
+  }
+}
+function F(n2) {
+  return function(t2) {
+    if (this.l) {
+      var u = this.l[t2.type + n2];
+      if (null == t2.u) t2.u = c++;
+      else if (t2.u < u.t) return;
+      return u(l.event ? l.event(t2) : t2);
+    }
   };
 }
-const useGlobalManager = () => useContext(GlobalManager);
-var shim = { exports: {} };
-var useSyncExternalStoreShim_production_min = {};
-/**
- * @license React
- * use-sync-external-store-shim.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredUseSyncExternalStoreShim_production_min;
-function requireUseSyncExternalStoreShim_production_min() {
-  if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
-  hasRequiredUseSyncExternalStoreShim_production_min = 1;
-  var e = require$$0;
-  function h(a, b) {
-    return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
-  }
-  var k = "function" === typeof Object.is ? Object.is : h, l = e.useState, m = e.useEffect, n = e.useLayoutEffect, p = e.useDebugValue;
-  function q(a, b) {
-    var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
-    n(function() {
-      c.value = d;
-      c.getSnapshot = b;
-      r(c) && g({ inst: c });
-    }, [a, d, b]);
-    m(function() {
-      r(c) && g({ inst: c });
-      return a(function() {
-        r(c) && g({ inst: c });
+function O(n2, t2, u, i2, r2, o2, e2, f2, c2, s2) {
+  var a2, h, p2, v2, y2, _2, m2, b, S2, C2, M2, $2, P2, A2, H, L2, T2, j2 = t2.type;
+  if (void 0 !== t2.constructor) return null;
+  128 & u.__u && (c2 = !!(32 & u.__u), o2 = [f2 = t2.__e = u.__e]), (a2 = l.__b) && a2(t2);
+  n: if ("function" == typeof j2) try {
+    if (b = t2.props, S2 = "prototype" in j2 && j2.prototype.render, C2 = (a2 = j2.contextType) && i2[a2.__c], M2 = a2 ? C2 ? C2.props.value : a2.__ : i2, u.__c ? m2 = (h = t2.__c = u.__c).__ = h.__E : (S2 ? t2.__c = h = new j2(b, M2) : (t2.__c = h = new x$1(b, M2), h.constructor = j2, h.render = D), C2 && C2.sub(h), h.props = b, h.state || (h.state = {}), h.context = M2, h.__n = i2, p2 = h.__d = true, h.__h = [], h._sb = []), S2 && null == h.__s && (h.__s = h.state), S2 && null != j2.getDerivedStateFromProps && (h.__s == h.state && (h.__s = w({}, h.__s)), w(h.__s, j2.getDerivedStateFromProps(b, h.__s))), v2 = h.props, y2 = h.state, h.__v = t2, p2) S2 && null == j2.getDerivedStateFromProps && null != h.componentWillMount && h.componentWillMount(), S2 && null != h.componentDidMount && h.__h.push(h.componentDidMount);
+    else {
+      if (S2 && null == j2.getDerivedStateFromProps && b !== v2 && null != h.componentWillReceiveProps && h.componentWillReceiveProps(b, M2), !h.__e && (null != h.shouldComponentUpdate && false === h.shouldComponentUpdate(b, h.__s, M2) || t2.__v == u.__v)) {
+        for (t2.__v != u.__v && (h.props = b, h.state = h.__s, h.__d = false), t2.__e = u.__e, t2.__k = u.__k, t2.__k.some(function(n3) {
+          n3 && (n3.__ = t2);
+        }), $2 = 0; $2 < h._sb.length; $2++) h.__h.push(h._sb[$2]);
+        h._sb = [], h.__h.length && e2.push(h);
+        break n;
+      }
+      null != h.componentWillUpdate && h.componentWillUpdate(b, h.__s, M2), S2 && null != h.componentDidUpdate && h.__h.push(function() {
+        h.componentDidUpdate(v2, y2, _2);
       });
-    }, [a]);
-    p(d);
-    return d;
+    }
+    if (h.context = M2, h.props = b, h.__P = n2, h.__e = false, P2 = l.__r, A2 = 0, S2) {
+      for (h.state = h.__s, h.__d = false, P2 && P2(t2), a2 = h.render(h.props, h.state, h.context), H = 0; H < h._sb.length; H++) h.__h.push(h._sb[H]);
+      h._sb = [];
+    } else do {
+      h.__d = false, P2 && P2(t2), a2 = h.render(h.props, h.state, h.context), h.state = h.__s;
+    } while (h.__d && ++A2 < 25);
+    h.state = h.__s, null != h.getChildContext && (i2 = w(w({}, i2), h.getChildContext())), S2 && !p2 && null != h.getSnapshotBeforeUpdate && (_2 = h.getSnapshotBeforeUpdate(v2, y2)), L2 = a2, null != a2 && a2.type === k && null == a2.key && (L2 = N(a2.props.children)), f2 = I(n2, d(L2) ? L2 : [L2], t2, u, i2, r2, o2, e2, f2, c2, s2), h.base = t2.__e, t2.__u &= -161, h.__h.length && e2.push(h), m2 && (h.__E = h.__ = null);
+  } catch (n3) {
+    if (t2.__v = null, c2 || null != o2) if (n3.then) {
+      for (t2.__u |= c2 ? 160 : 128; f2 && 8 == f2.nodeType && f2.nextSibling; ) f2 = f2.nextSibling;
+      o2[o2.indexOf(f2)] = null, t2.__e = f2;
+    } else for (T2 = o2.length; T2--; ) g(o2[T2]);
+    else t2.__e = u.__e, t2.__k = u.__k;
+    l.__e(n3, t2, u);
   }
-  function r(a) {
-    var b = a.getSnapshot;
-    a = a.value;
+  else null == o2 && t2.__v == u.__v ? (t2.__k = u.__k, t2.__e = u.__e) : f2 = t2.__e = V(u.__e, t2, u, i2, r2, o2, e2, c2, s2);
+  return (a2 = l.diffed) && a2(t2), 128 & t2.__u ? void 0 : f2;
+}
+function z(n2, t2, u) {
+  for (var i2 = 0; i2 < u.length; i2++) q(u[i2], u[++i2], u[++i2]);
+  l.__c && l.__c(t2, n2), n2.some(function(t3) {
     try {
-      var d = b();
-      return !k(a, d);
-    } catch (f) {
-      return true;
+      n2 = t3.__h, t3.__h = [], n2.some(function(n3) {
+        n3.call(t3);
+      });
+    } catch (n3) {
+      l.__e(n3, t3.__v);
+    }
+  });
+}
+function N(n2) {
+  return "object" != typeof n2 || null == n2 ? n2 : d(n2) ? n2.map(N) : w({}, n2);
+}
+function V(t2, u, i2, r2, o2, e2, f2, c2, s2) {
+  var a2, h, v2, y2, w2, _2, m2, b = i2.props, k2 = u.props, x2 = u.type;
+  if ("svg" == x2 ? o2 = "http://www.w3.org/2000/svg" : "math" == x2 ? o2 = "http://www.w3.org/1998/Math/MathML" : o2 || (o2 = "http://www.w3.org/1999/xhtml"), null != e2) {
+    for (a2 = 0; a2 < e2.length; a2++) if ((w2 = e2[a2]) && "setAttribute" in w2 == !!x2 && (x2 ? w2.localName == x2 : 3 == w2.nodeType)) {
+      t2 = w2, e2[a2] = null;
+      break;
     }
   }
-  function t(a, b) {
-    return b();
+  if (null == t2) {
+    if (null == x2) return document.createTextNode(k2);
+    t2 = document.createElementNS(o2, x2, k2.is && k2), c2 && (l.__m && l.__m(u, e2), c2 = false), e2 = null;
+  }
+  if (null === x2) b === k2 || c2 && t2.data === k2 || (t2.data = k2);
+  else {
+    if (e2 = e2 && n.call(t2.childNodes), b = i2.props || p, !c2 && null != e2) for (b = {}, a2 = 0; a2 < t2.attributes.length; a2++) b[(w2 = t2.attributes[a2]).name] = w2.value;
+    for (a2 in b) if (w2 = b[a2], "children" == a2) ;
+    else if ("dangerouslySetInnerHTML" == a2) v2 = w2;
+    else if (!(a2 in k2)) {
+      if ("value" == a2 && "defaultValue" in k2 || "checked" == a2 && "defaultChecked" in k2) continue;
+      j(t2, a2, null, w2, o2);
+    }
+    for (a2 in k2) w2 = k2[a2], "children" == a2 ? y2 = w2 : "dangerouslySetInnerHTML" == a2 ? h = w2 : "value" == a2 ? _2 = w2 : "checked" == a2 ? m2 = w2 : c2 && "function" != typeof w2 || b[a2] === w2 || j(t2, a2, w2, b[a2], o2);
+    if (h) c2 || v2 && (h.__html === v2.__html || h.__html === t2.innerHTML) || (t2.innerHTML = h.__html), u.__k = [];
+    else if (v2 && (t2.innerHTML = ""), I("template" === u.type ? t2.content : t2, d(y2) ? y2 : [y2], u, i2, r2, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : o2, e2, f2, e2 ? e2[0] : i2.__k && S$1(i2, 0), c2, s2), null != e2) for (a2 = e2.length; a2--; ) g(e2[a2]);
+    c2 || (a2 = "value", "progress" == x2 && null == _2 ? t2.removeAttribute("value") : void 0 !== _2 && (_2 !== t2[a2] || "progress" == x2 && !_2 || "option" == x2 && _2 !== b[a2]) && j(t2, a2, _2, b[a2], o2), a2 = "checked", void 0 !== m2 && m2 !== t2[a2] && j(t2, a2, m2, b[a2], o2));
   }
-  var u = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
-  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u;
-  return useSyncExternalStoreShim_production_min;
+  return t2;
 }
-var useSyncExternalStoreShim_development = {};
-/**
- * @license React
- * use-sync-external-store-shim.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredUseSyncExternalStoreShim_development;
-function requireUseSyncExternalStoreShim_development() {
-  if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-  hasRequiredUseSyncExternalStoreShim_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function() {
-      if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-      }
-      var React = require$$0;
-      var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-      function error(format) {
-        {
-          {
-            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-              args[_key2 - 1] = arguments[_key2];
-            }
-            printWarning("error", format, args);
-          }
-        }
+function q(n2, t2, u) {
+  try {
+    if ("function" == typeof n2) {
+      var i2 = "function" == typeof n2.__u;
+      i2 && n2.__u(), i2 && null == t2 || (n2.__u = n2(t2));
+    } else n2.current = t2;
+  } catch (n3) {
+    l.__e(n3, u);
+  }
+}
+function B(n2, t2, u) {
+  var i2, r2;
+  if (l.unmount && l.unmount(n2), (i2 = n2.ref) && (i2.current && i2.current !== n2.__e || q(i2, null, t2)), null != (i2 = n2.__c)) {
+    if (i2.componentWillUnmount) try {
+      i2.componentWillUnmount();
+    } catch (n3) {
+      l.__e(n3, t2);
+    }
+    i2.base = i2.__P = null;
+  }
+  if (i2 = n2.__k) for (r2 = 0; r2 < i2.length; r2++) i2[r2] && B(i2[r2], t2, u || "function" != typeof n2.type);
+  u || g(n2.__e), n2.__c = n2.__ = n2.__e = void 0;
+}
+function D(n2, l2, t2) {
+  return this.constructor(n2, t2);
+}
+function E(t2, u, i2) {
+  var r2, o2, e2, f2;
+  u == document && (u = document.documentElement), l.__ && l.__(t2, u), o2 = (r2 = "function" == typeof i2) ? null : i2 && i2.__k || u.__k, e2 = [], f2 = [], O(u, t2 = (!r2 && i2 || u).__k = _(k, null, [t2]), o2 || p, p, u.namespaceURI, !r2 && i2 ? [i2] : o2 ? null : u.firstChild ? n.call(u.childNodes) : null, e2, !r2 && i2 ? i2 : o2 ? o2.__e : u.firstChild, r2, f2), z(e2, t2, f2);
+}
+function G(n2, l2) {
+  E(n2, l2, G);
+}
+function J(l2, t2, u) {
+  var i2, r2, o2, e2, f2 = w({}, l2.props);
+  for (o2 in l2.type && l2.type.defaultProps && (e2 = l2.type.defaultProps), t2) "key" == o2 ? i2 = t2[o2] : "ref" == o2 ? r2 = t2[o2] : f2[o2] = void 0 === t2[o2] && void 0 !== e2 ? e2[o2] : t2[o2];
+  return arguments.length > 2 && (f2.children = arguments.length > 3 ? n.call(arguments, 2) : u), m(l2.type, f2, i2 || l2.key, r2 || l2.ref, null);
+}
+n = v.slice, l = { __e: function(n2, l2, t2, u) {
+  for (var i2, r2, o2; l2 = l2.__; ) if ((i2 = l2.__c) && !i2.__) try {
+    if ((r2 = i2.constructor) && null != r2.getDerivedStateFromError && (i2.setState(r2.getDerivedStateFromError(n2)), o2 = i2.__d), null != i2.componentDidCatch && (i2.componentDidCatch(n2, u || {}), o2 = i2.__d), o2) return i2.__E = i2;
+  } catch (l3) {
+    n2 = l3;
+  }
+  throw n2;
+} }, t = 0, x$1.prototype.setState = function(n2, l2) {
+  var t2;
+  t2 = null != this.__s && this.__s !== this.state ? this.__s : this.__s = w({}, this.state), "function" == typeof n2 && (n2 = n2(w({}, t2), this.props)), n2 && w(t2, n2), null != n2 && this.__v && (l2 && this._sb.push(l2), M(this));
+}, x$1.prototype.forceUpdate = function(n2) {
+  this.__v && (this.__e = true, n2 && this.__h.push(n2), M(this));
+}, x$1.prototype.render = k, i = [], o = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, e = function(n2, l2) {
+  return n2.__v.__b - l2.__v.__b;
+}, $.__r = 0, f = /(PointerCapture)$|Capture$/i, c = 0, s = F(false), a = F(true);
+(function() {
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._fragment_1c708_1 {\n    width: 100%;\n    height: 100%;\n}\n\n._fragmentDocument_1c708_6 {\n    display: contents;\n}\n._text_1liuf_1 {\n    white-space: pre;\n    :where(p) {\n        margin: 0;\n    }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e2) {
+    console.error("vite-plugin-css-injected-by-js", e2);
+  }
+})();
+const createConstants = (...constants) => {
+  return constants.reduce((acc, constant) => {
+    acc[constant] = constant;
+    return acc;
+  }, {});
+};
+const nodes = createConstants(
+  "Fragment",
+  "FragmentInstance",
+  "Instance",
+  "Collection",
+  "Breakpoint",
+  "Frame",
+  "Image",
+  "Text",
+  "SolidPaintStyle",
+  "CssLink",
+  "Variable",
+  "ComputedValue",
+  "TransformValue"
+);
+const fragmentGrowingMode = createConstants("auto", "fill");
+const borderType = createConstants("None", "Solid", "Dashed", "Dotted");
+const linkTarget = createConstants("_blank", "none");
+const paintMode = createConstants("None", "Solid", "Image");
+const imagePaintScaleModes = createConstants("Auto", "Contain", "Cover");
+const constrain = createConstants(
+  "Min",
+  "Center",
+  "Max",
+  "Stretch",
+  "Scale"
+);
+const positionType = createConstants("absolute", "relative");
+const sizing = createConstants("Fixed", "Hug", "Fill", "Relative");
+const layerMode = createConstants("none", "flex");
+const layerDirection = createConstants("vertical", "horizontal");
+const layerAlign = createConstants("start", "center", "end");
+const layerDistribute = createConstants(
+  "start",
+  "center",
+  "end",
+  "space-between",
+  "space-around"
+);
+const textTransform = createConstants(
+  "none",
+  "uppercase",
+  "lowercase",
+  "capitalize"
+);
+const textDecorations = createConstants(
+  "none",
+  "underline",
+  "line-through"
+);
+const effectType = createConstants("loop", "appear", "hover", "tap");
+const effectName = createConstants(
+  "fade",
+  "slide",
+  "bounce",
+  "wiggle",
+  "increase"
+);
+const variableType = createConstants(
+  "Event",
+  "String",
+  "Link",
+  "Boolean",
+  "Array",
+  "Color",
+  "ComponentInstance",
+  "Date",
+  "Enum",
+  "Number",
+  "Image",
+  "Object"
+);
+const whiteSpace = createConstants(
+  "normal",
+  "nowrap",
+  "pre",
+  "pre-wrap",
+  "pre-line",
+  "break-spaces"
+);
+const overflow = createConstants("visible", "hidden", "scroll");
+const variableTransforms = createConstants(
+  "convert",
+  "exists",
+  "equals",
+  "startWith",
+  "endWith",
+  "contains",
+  "dateBefore",
+  "dateAfter",
+  "dateBetween",
+  "feature",
+  "notFeature",
+  "gt",
+  // Greater than
+  "gte",
+  // Greater than or equals
+  "lt",
+  // Less than
+  "lte",
+  // Less than or equals,
+  "convertFromBoolean",
+  "negative"
+);
+const renderTarget = createConstants("canvas", "document");
+const renderMode = createConstants("viewport", "parent", "fixed");
+const interactions = createConstants("click", "mouseover", "appear");
+const eventMode = createConstants("goal", "callback", "tracker");
+const scopeTypes = createConstants(
+  "InstanceScope",
+  "FragmentScope",
+  "CollectionScope",
+  "CollectionItemScope"
+);
+const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  borderType,
+  constrain,
+  createConstants,
+  effectName,
+  effectType,
+  eventMode,
+  fragmentGrowingMode,
+  imagePaintScaleModes,
+  interactions,
+  layerAlign,
+  layerDirection,
+  layerDistribute,
+  layerMode,
+  linkTarget,
+  nodes,
+  overflow,
+  paintMode,
+  positionType,
+  renderMode,
+  renderTarget,
+  scopeTypes,
+  sizing,
+  textDecorations,
+  textTransform,
+  variableTransforms,
+  variableType,
+  whiteSpace
+}, Symbol.toStringTag, { value: "Module" }));
+// @__NO_SIDE_EFFECTS__
+function getGlobalConfig(config2) {
+  return {
+    lang: (config2 == null ? void 0 : config2.lang) ?? void 0,
+    message: config2 == null ? void 0 : config2.message,
+    abortEarly: (config2 == null ? void 0 : config2.abortEarly) ?? void 0,
+    abortPipeEarly: (config2 == null ? void 0 : config2.abortPipeEarly) ?? void 0
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function getGlobalMessage(lang) {
+  return void 0;
+}
+// @__NO_SIDE_EFFECTS__
+function getSchemaMessage(lang) {
+  return void 0;
+}
+// @__NO_SIDE_EFFECTS__
+function getSpecificMessage(reference, lang) {
+  var _a;
+  return (_a = void 0) == null ? void 0 : _a.get(lang);
+}
+// @__NO_SIDE_EFFECTS__
+function _stringify(input) {
+  var _a, _b;
+  const type = typeof input;
+  if (type === "string") {
+    return `"${input}"`;
+  }
+  if (type === "number" || type === "bigint" || type === "boolean") {
+    return `${input}`;
+  }
+  if (type === "object" || type === "function") {
+    return (input && ((_b = (_a = Object.getPrototypeOf(input)) == null ? void 0 : _a.constructor) == null ? void 0 : _b.name)) ?? "null";
+  }
+  return type;
+}
+function _addIssue(context, label, dataset, config2, other) {
+  const input = other && "input" in other ? other.input : dataset.value;
+  const expected = (other == null ? void 0 : other.expected) ?? context.expects ?? null;
+  const received = (other == null ? void 0 : other.received) ?? /* @__PURE__ */ _stringify(input);
+  const issue = {
+    kind: context.kind,
+    type: context.type,
+    input,
+    expected,
+    received,
+    message: `Invalid ${label}: ${expected ? `Expected ${expected} but r` : "R"}eceived ${received}`,
+    requirement: context.requirement,
+    path: other == null ? void 0 : other.path,
+    issues: other == null ? void 0 : other.issues,
+    lang: config2.lang,
+    abortEarly: config2.abortEarly,
+    abortPipeEarly: config2.abortPipeEarly
+  };
+  const isSchema = context.kind === "schema";
+  const message = (other == null ? void 0 : other.message) ?? context.message ?? /* @__PURE__ */ getSpecificMessage(context.reference, issue.lang) ?? (isSchema ? /* @__PURE__ */ getSchemaMessage(issue.lang) : null) ?? config2.message ?? /* @__PURE__ */ getGlobalMessage(issue.lang);
+  if (message !== void 0) {
+    issue.message = typeof message === "function" ? (
+      // @ts-expect-error
+      message(issue)
+    ) : message;
+  }
+  if (isSchema) {
+    dataset.typed = false;
+  }
+  if (dataset.issues) {
+    dataset.issues.push(issue);
+  } else {
+    dataset.issues = [issue];
+  }
+}
+// @__NO_SIDE_EFFECTS__
+function _getStandardProps(context) {
+  return {
+    version: 1,
+    vendor: "valibot",
+    validate(value2) {
+      return context["~run"]({ value: value2 }, /* @__PURE__ */ getGlobalConfig());
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function _isValidObjectKey(object2, key) {
+  return Object.hasOwn(object2, key) && key !== "__proto__" && key !== "prototype" && key !== "constructor";
+}
+// @__NO_SIDE_EFFECTS__
+function _joinExpects(values2, separator) {
+  const list = [...new Set(values2)];
+  if (list.length > 1) {
+    return `(${list.join(` ${separator} `)})`;
+  }
+  return list[0] ?? "never";
+}
+// @__NO_SIDE_EFFECTS__
+function isOfKind(kind, object2) {
+  return object2.kind === kind;
+}
+var ValiError = class extends Error {
+  /**
+   * Creates a Valibot error with useful information.
+   *
+   * @param issues The error issues.
+   */
+  constructor(issues) {
+    super(issues[0].message);
+    this.name = "ValiError";
+    this.issues = issues;
+  }
+};
+// @__NO_SIDE_EFFECTS__
+function check(requirement, message) {
+  return {
+    kind: "validation",
+    type: "check",
+    reference: check,
+    async: false,
+    expects: null,
+    requirement,
+    message,
+    "~run"(dataset, config2) {
+      if (dataset.typed && !this.requirement(dataset.value)) {
+        _addIssue(this, "input", dataset, config2);
       }
-      function printWarning(level, format, args) {
-        {
-          var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-          var stack = ReactDebugCurrentFrame.getStackAddendum();
-          if (stack !== "") {
-            format += "%s";
-            args = args.concat([stack]);
-          }
-          var argsWithFormat = args.map(function(item) {
-            return String(item);
-          });
-          argsWithFormat.unshift("Warning: " + format);
-          Function.prototype.apply.call(console[level], console, argsWithFormat);
-        }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function maxValue(requirement, message) {
+  return {
+    kind: "validation",
+    type: "max_value",
+    reference: maxValue,
+    async: false,
+    expects: `<=${requirement instanceof Date ? requirement.toJSON() : /* @__PURE__ */ _stringify(requirement)}`,
+    requirement,
+    message,
+    "~run"(dataset, config2) {
+      if (dataset.typed && !(dataset.value <= this.requirement)) {
+        _addIssue(this, "value", dataset, config2, {
+          received: dataset.value instanceof Date ? dataset.value.toJSON() : /* @__PURE__ */ _stringify(dataset.value)
+        });
       }
-      function is(x, y2) {
-        return x === y2 && (x !== 0 || 1 / x === 1 / y2) || x !== x && y2 !== y2;
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function metadata(metadata_) {
+  return {
+    kind: "metadata",
+    type: "metadata",
+    reference: metadata,
+    metadata: metadata_
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function minValue(requirement, message) {
+  return {
+    kind: "validation",
+    type: "min_value",
+    reference: minValue,
+    async: false,
+    expects: `>=${requirement instanceof Date ? requirement.toJSON() : /* @__PURE__ */ _stringify(requirement)}`,
+    requirement,
+    message,
+    "~run"(dataset, config2) {
+      if (dataset.typed && !(dataset.value >= this.requirement)) {
+        _addIssue(this, "value", dataset, config2, {
+          received: dataset.value instanceof Date ? dataset.value.toJSON() : /* @__PURE__ */ _stringify(dataset.value)
+        });
       }
-      var objectIs = typeof Object.is === "function" ? Object.is : is;
-      var useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue = React.useDebugValue;
-      var didWarnOld18Alpha = false;
-      var didWarnUncachedGetSnapshot = false;
-      function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
-        {
-          if (!didWarnOld18Alpha) {
-            if (React.startTransition !== void 0) {
-              didWarnOld18Alpha = true;
-              error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.");
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function transform(operation) {
+  return {
+    kind: "transformation",
+    type: "transform",
+    reference: transform,
+    async: false,
+    operation,
+    "~run"(dataset) {
+      dataset.value = this.operation(dataset.value);
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function getFallback(schema, dataset, config2) {
+  return typeof schema.fallback === "function" ? (
+    // @ts-expect-error
+    schema.fallback(dataset, config2)
+  ) : (
+    // @ts-expect-error
+    schema.fallback
+  );
+}
+// @__NO_SIDE_EFFECTS__
+function getDefault(schema, dataset, config2) {
+  return typeof schema.default === "function" ? (
+    // @ts-expect-error
+    schema.default(dataset, config2)
+  ) : (
+    // @ts-expect-error
+    schema.default
+  );
+}
+// @__NO_SIDE_EFFECTS__
+function any() {
+  return {
+    kind: "schema",
+    type: "any",
+    reference: any,
+    expects: "any",
+    async: false,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset) {
+      dataset.typed = true;
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function array(item, message) {
+  return {
+    kind: "schema",
+    type: "array",
+    reference: array,
+    expects: "Array",
+    async: false,
+    item,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      var _a;
+      const input = dataset.value;
+      if (Array.isArray(input)) {
+        dataset.typed = true;
+        dataset.value = [];
+        for (let key = 0; key < input.length; key++) {
+          const value2 = input[key];
+          const itemDataset = this.item["~run"]({ value: value2 }, config2);
+          if (itemDataset.issues) {
+            const pathItem = {
+              type: "array",
+              origin: "value",
+              input,
+              key,
+              value: value2
+            };
+            for (const issue of itemDataset.issues) {
+              if (issue.path) {
+                issue.path.unshift(pathItem);
+              } else {
+                issue.path = [pathItem];
+              }
+              (_a = dataset.issues) == null ? void 0 : _a.push(issue);
             }
-          }
-        }
-        var value = getSnapshot();
-        {
-          if (!didWarnUncachedGetSnapshot) {
-            var cachedValue = getSnapshot();
-            if (!objectIs(value, cachedValue)) {
-              error("The result of getSnapshot should be cached to avoid an infinite loop");
-              didWarnUncachedGetSnapshot = true;
+            if (!dataset.issues) {
+              dataset.issues = itemDataset.issues;
+            }
+            if (config2.abortEarly) {
+              dataset.typed = false;
+              break;
             }
           }
-        }
-        var _useState = useState2({
-          inst: {
-            value,
-            getSnapshot
-          }
-        }), inst = _useState[0].inst, forceUpdate = _useState[1];
-        useLayoutEffect(function() {
-          inst.value = value;
-          inst.getSnapshot = getSnapshot;
-          if (checkIfSnapshotChanged(inst)) {
-            forceUpdate({
-              inst
-            });
-          }
-        }, [subscribe, value, getSnapshot]);
-        useEffect2(function() {
-          if (checkIfSnapshotChanged(inst)) {
-            forceUpdate({
-              inst
-            });
+          if (!itemDataset.typed) {
+            dataset.typed = false;
           }
-          var handleStoreChange = function() {
-            if (checkIfSnapshotChanged(inst)) {
-              forceUpdate({
-                inst
-              });
-            }
-          };
-          return subscribe(handleStoreChange);
-        }, [subscribe]);
-        useDebugValue(value);
-        return value;
-      }
-      function checkIfSnapshotChanged(inst) {
-        var latestGetSnapshot = inst.getSnapshot;
-        var prevValue = inst.value;
-        try {
-          var nextValue = latestGetSnapshot();
-          return !objectIs(prevValue, nextValue);
-        } catch (error2) {
-          return true;
+          dataset.value.push(itemDataset.value);
         }
+      } else {
+        _addIssue(this, "type", dataset, config2);
       }
-      function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
-        return getSnapshot();
-      }
-      var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-      var isServerEnvironment = !canUseDOM;
-      var shim2 = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-      var useSyncExternalStore$2 = React.useSyncExternalStore !== void 0 ? React.useSyncExternalStore : shim2;
-      useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
-      if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function boolean(message) {
+  return {
+    kind: "schema",
+    type: "boolean",
+    reference: boolean,
+    expects: "boolean",
+    async: false,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (typeof dataset.value === "boolean") {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
       }
-    })();
-  }
-  return useSyncExternalStoreShim_development;
+      return dataset;
+    }
+  };
 }
-var hasRequiredShim;
-function requireShim() {
-  if (hasRequiredShim) return shim.exports;
-  hasRequiredShim = 1;
-  if (process.env.NODE_ENV === "production") {
-    shim.exports = requireUseSyncExternalStoreShim_production_min();
-  } else {
-    shim.exports = requireUseSyncExternalStoreShim_development();
+// @__NO_SIDE_EFFECTS__
+function enum_(enum__, message) {
+  const options2 = [];
+  for (const key in enum__) {
+    if (`${+key}` !== key || typeof enum__[key] !== "string" || !Object.is(enum__[enum__[key]], +key)) {
+      options2.push(enum__[key]);
+    }
   }
-  return shim.exports;
+  return {
+    kind: "schema",
+    type: "enum",
+    reference: enum_,
+    expects: /* @__PURE__ */ _joinExpects(options2.map(_stringify), "|"),
+    async: false,
+    enum: enum__,
+    options: options2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (this.options.includes(dataset.value)) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
 }
-var shimExports = requireShim();
-var withSelector = { exports: {} };
-var withSelector_production_min = {};
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredWithSelector_production_min;
-function requireWithSelector_production_min() {
-  if (hasRequiredWithSelector_production_min) return withSelector_production_min;
-  hasRequiredWithSelector_production_min = 1;
-  var h = require$$0, n = requireShim();
-  function p(a, b) {
-    return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
-  }
-  var q = "function" === typeof Object.is ? Object.is : p, r = n.useSyncExternalStore, t = h.useRef, u = h.useEffect, v = h.useMemo, w = h.useDebugValue;
-  withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e, l, g) {
-    var c = t(null);
-    if (null === c.current) {
-      var f = { hasValue: false, value: null };
-      c.current = f;
-    } else f = c.current;
-    c = v(function() {
-      function a2(a3) {
-        if (!c2) {
-          c2 = true;
-          d2 = a3;
-          a3 = l(a3);
-          if (void 0 !== g && f.hasValue) {
-            var b2 = f.value;
-            if (g(b2, a3)) return k = b2;
-          }
-          return k = a3;
-        }
-        b2 = k;
-        if (q(d2, a3)) return b2;
-        var e2 = l(a3);
-        if (void 0 !== g && g(b2, e2)) return b2;
-        d2 = a3;
-        return k = e2;
-      }
-      var c2 = false, d2, k, m = void 0 === e ? null : e;
-      return [function() {
-        return a2(b());
-      }, null === m ? void 0 : function() {
-        return a2(m());
-      }];
-    }, [b, e, l, g]);
-    var d = r(a, c[0], c[1]);
-    u(function() {
-      f.hasValue = true;
-      f.value = d;
-    }, [d]);
-    w(d);
-    return d;
-  };
-  return withSelector_production_min;
+// @__NO_SIDE_EFFECTS__
+function literal(literal_, message) {
+  return {
+    kind: "schema",
+    type: "literal",
+    reference: literal,
+    expects: /* @__PURE__ */ _stringify(literal_),
+    async: false,
+    literal: literal_,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (dataset.value === this.literal) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
 }
-var withSelector_development = {};
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredWithSelector_development;
-function requireWithSelector_development() {
-  if (hasRequiredWithSelector_development) return withSelector_development;
-  hasRequiredWithSelector_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function() {
-      if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-      }
-      var React = require$$0;
-      var shim2 = requireShim();
-      function is(x, y2) {
-        return x === y2 && (x !== 0 || 1 / x === 1 / y2) || x !== x && y2 !== y2;
-      }
-      var objectIs = typeof Object.is === "function" ? Object.is : is;
-      var useSyncExternalStore = shim2.useSyncExternalStore;
-      var useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo = React.useMemo, useDebugValue = React.useDebugValue;
-      function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef2(null);
-        var inst;
-        if (instRef.current === null) {
-          inst = {
-            hasValue: false,
-            value: null
-          };
-          instRef.current = inst;
-        } else {
-          inst = instRef.current;
+// @__NO_SIDE_EFFECTS__
+function nullable(wrapped, default_) {
+  return {
+    kind: "schema",
+    type: "nullable",
+    reference: nullable,
+    expects: `(${wrapped.expects} | null)`,
+    async: false,
+    wrapped,
+    default: default_,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (dataset.value === null) {
+        if (this.default !== void 0) {
+          dataset.value = /* @__PURE__ */ getDefault(this, dataset, config2);
         }
-        var _useMemo = useMemo(function() {
-          var hasMemo = false;
-          var memoizedSnapshot;
-          var memoizedSelection;
-          var memoizedSelector = function(nextSnapshot) {
-            if (!hasMemo) {
-              hasMemo = true;
-              memoizedSnapshot = nextSnapshot;
-              var _nextSelection = selector(nextSnapshot);
-              if (isEqual !== void 0) {
-                if (inst.hasValue) {
-                  var currentSelection = inst.value;
-                  if (isEqual(currentSelection, _nextSelection)) {
-                    memoizedSelection = currentSelection;
-                    return currentSelection;
-                  }
+        if (dataset.value === null) {
+          dataset.typed = true;
+          return dataset;
+        }
+      }
+      return this.wrapped["~run"](dataset, config2);
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function number(message) {
+  return {
+    kind: "schema",
+    type: "number",
+    reference: number,
+    expects: "number",
+    async: false,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (typeof dataset.value === "number" && !isNaN(dataset.value)) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function object(entries, message) {
+  return {
+    kind: "schema",
+    type: "object",
+    reference: object,
+    expects: "Object",
+    async: false,
+    entries,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      var _a;
+      const input = dataset.value;
+      if (input && typeof input === "object") {
+        dataset.typed = true;
+        dataset.value = {};
+        for (const key in this.entries) {
+          const valueSchema = this.entries[key];
+          if (key in input || (valueSchema.type === "exact_optional" || valueSchema.type === "optional" || valueSchema.type === "nullish") && // @ts-expect-error
+          valueSchema.default !== void 0) {
+            const value2 = key in input ? (
+              // @ts-expect-error
+              input[key]
+            ) : /* @__PURE__ */ getDefault(valueSchema);
+            const valueDataset = valueSchema["~run"]({ value: value2 }, config2);
+            if (valueDataset.issues) {
+              const pathItem = {
+                type: "object",
+                origin: "value",
+                input,
+                key,
+                value: value2
+              };
+              for (const issue of valueDataset.issues) {
+                if (issue.path) {
+                  issue.path.unshift(pathItem);
+                } else {
+                  issue.path = [pathItem];
                 }
+                (_a = dataset.issues) == null ? void 0 : _a.push(issue);
+              }
+              if (!dataset.issues) {
+                dataset.issues = valueDataset.issues;
+              }
+              if (config2.abortEarly) {
+                dataset.typed = false;
+                break;
               }
-              memoizedSelection = _nextSelection;
-              return _nextSelection;
             }
-            var prevSnapshot = memoizedSnapshot;
-            var prevSelection = memoizedSelection;
-            if (objectIs(prevSnapshot, nextSnapshot)) {
-              return prevSelection;
+            if (!valueDataset.typed) {
+              dataset.typed = false;
             }
-            var nextSelection = selector(nextSnapshot);
-            if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
-              return prevSelection;
+            dataset.value[key] = valueDataset.value;
+          } else if (valueSchema.fallback !== void 0) {
+            dataset.value[key] = /* @__PURE__ */ getFallback(valueSchema);
+          } else if (valueSchema.type !== "exact_optional" && valueSchema.type !== "optional" && valueSchema.type !== "nullish") {
+            _addIssue(this, "key", dataset, config2, {
+              input: void 0,
+              expected: `"${key}"`,
+              path: [
+                {
+                  type: "object",
+                  origin: "key",
+                  input,
+                  key,
+                  // @ts-expect-error
+                  value: input[key]
+                }
+              ]
+            });
+            if (config2.abortEarly) {
+              break;
             }
-            memoizedSnapshot = nextSnapshot;
-            memoizedSelection = nextSelection;
-            return nextSelection;
-          };
-          var maybeGetServerSnapshot = getServerSnapshot === void 0 ? null : getServerSnapshot;
-          var getSnapshotWithSelector = function() {
-            return memoizedSelector(getSnapshot());
-          };
-          var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : function() {
-            return memoizedSelector(maybeGetServerSnapshot());
-          };
-          return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-        }, [getSnapshot, getServerSnapshot, selector, isEqual]), getSelection = _useMemo[0], getServerSelection = _useMemo[1];
-        var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-        useEffect2(function() {
-          inst.hasValue = true;
-          inst.value = value;
-        }, [value]);
-        useDebugValue(value);
-        return value;
+          }
+        }
+      } else {
+        _addIssue(this, "type", dataset, config2);
       }
-      withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
-      if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function optional(wrapped, default_) {
+  return {
+    kind: "schema",
+    type: "optional",
+    reference: optional,
+    expects: `(${wrapped.expects} | undefined)`,
+    async: false,
+    wrapped,
+    default: default_,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (dataset.value === void 0) {
+        if (this.default !== void 0) {
+          dataset.value = /* @__PURE__ */ getDefault(this, dataset, config2);
+        }
+        if (dataset.value === void 0) {
+          dataset.typed = true;
+          return dataset;
+        }
       }
-    })();
-  }
-  return withSelector_development;
+      return this.wrapped["~run"](dataset, config2);
+    }
+  };
 }
-var hasRequiredWithSelector;
-function requireWithSelector() {
-  if (hasRequiredWithSelector) return withSelector.exports;
-  hasRequiredWithSelector = 1;
-  if (process.env.NODE_ENV === "production") {
-    withSelector.exports = requireWithSelector_production_min();
-  } else {
-    withSelector.exports = requireWithSelector_development();
-  }
-  return withSelector.exports;
+// @__NO_SIDE_EFFECTS__
+function picklist(options2, message) {
+  return {
+    kind: "schema",
+    type: "picklist",
+    reference: picklist,
+    expects: /* @__PURE__ */ _joinExpects(options2.map(_stringify), "|"),
+    async: false,
+    options: options2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (this.options.includes(dataset.value)) {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
 }
-requireWithSelector();
-var y = (t, e, n) => {
-  var _a, _b;
-  let r = useRef((_a = t == null ? void 0 : t.resolve) == null ? void 0 : _a.call(t, e, n)), s = ((_b = t == null ? void 0 : t.keyOfEntity) == null ? void 0 : _b.call(t, e)) ?? e, u = useCallback((o) => {
+// @__NO_SIDE_EFFECTS__
+function record(key, value2, message) {
+  return {
+    kind: "schema",
+    type: "record",
+    reference: record,
+    expects: "Object",
+    async: false,
+    key,
+    value: value2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      var _a, _b;
+      const input = dataset.value;
+      if (input && typeof input === "object") {
+        dataset.typed = true;
+        dataset.value = {};
+        for (const entryKey in input) {
+          if (/* @__PURE__ */ _isValidObjectKey(input, entryKey)) {
+            const entryValue = input[entryKey];
+            const keyDataset = this.key["~run"]({ value: entryKey }, config2);
+            if (keyDataset.issues) {
+              const pathItem = {
+                type: "object",
+                origin: "key",
+                input,
+                key: entryKey,
+                value: entryValue
+              };
+              for (const issue of keyDataset.issues) {
+                issue.path = [pathItem];
+                (_a = dataset.issues) == null ? void 0 : _a.push(issue);
+              }
+              if (!dataset.issues) {
+                dataset.issues = keyDataset.issues;
+              }
+              if (config2.abortEarly) {
+                dataset.typed = false;
+                break;
+              }
+            }
+            const valueDataset = this.value["~run"](
+              { value: entryValue },
+              config2
+            );
+            if (valueDataset.issues) {
+              const pathItem = {
+                type: "object",
+                origin: "value",
+                input,
+                key: entryKey,
+                value: entryValue
+              };
+              for (const issue of valueDataset.issues) {
+                if (issue.path) {
+                  issue.path.unshift(pathItem);
+                } else {
+                  issue.path = [pathItem];
+                }
+                (_b = dataset.issues) == null ? void 0 : _b.push(issue);
+              }
+              if (!dataset.issues) {
+                dataset.issues = valueDataset.issues;
+              }
+              if (config2.abortEarly) {
+                dataset.typed = false;
+                break;
+              }
+            }
+            if (!keyDataset.typed || !valueDataset.typed) {
+              dataset.typed = false;
+            }
+            if (keyDataset.typed) {
+              dataset.value[keyDataset.value] = valueDataset.value;
+            }
+          }
+        }
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function string(message) {
+  return {
+    kind: "schema",
+    type: "string",
+    reference: string,
+    expects: "string",
+    async: false,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      if (typeof dataset.value === "string") {
+        dataset.typed = true;
+      } else {
+        _addIssue(this, "type", dataset, config2);
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function _subIssues(datasets) {
+  let issues;
+  if (datasets) {
+    for (const dataset of datasets) {
+      if (issues) {
+        issues.push(...dataset.issues);
+      } else {
+        issues = dataset.issues;
+      }
+    }
+  }
+  return issues;
+}
+// @__NO_SIDE_EFFECTS__
+function union(options2, message) {
+  return {
+    kind: "schema",
+    type: "union",
+    reference: union,
+    expects: /* @__PURE__ */ _joinExpects(
+      options2.map((option) => option.expects),
+      "|"
+    ),
+    async: false,
+    options: options2,
+    message,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      let validDataset;
+      let typedDatasets;
+      let untypedDatasets;
+      for (const schema of this.options) {
+        const optionDataset = schema["~run"]({ value: dataset.value }, config2);
+        if (optionDataset.typed) {
+          if (optionDataset.issues) {
+            if (typedDatasets) {
+              typedDatasets.push(optionDataset);
+            } else {
+              typedDatasets = [optionDataset];
+            }
+          } else {
+            validDataset = optionDataset;
+            break;
+          }
+        } else {
+          if (untypedDatasets) {
+            untypedDatasets.push(optionDataset);
+          } else {
+            untypedDatasets = [optionDataset];
+          }
+        }
+      }
+      if (validDataset) {
+        return validDataset;
+      }
+      if (typedDatasets) {
+        if (typedDatasets.length === 1) {
+          return typedDatasets[0];
+        }
+        _addIssue(this, "type", dataset, config2, {
+          issues: /* @__PURE__ */ _subIssues(typedDatasets)
+        });
+        dataset.typed = true;
+      } else if ((untypedDatasets == null ? void 0 : untypedDatasets.length) === 1) {
+        return untypedDatasets[0];
+      } else {
+        _addIssue(this, "type", dataset, config2, {
+          issues: /* @__PURE__ */ _subIssues(untypedDatasets)
+        });
+      }
+      return dataset;
+    }
+  };
+}
+function parse(schema, input, config2) {
+  const dataset = schema["~run"]({ value: input }, /* @__PURE__ */ getGlobalConfig(config2));
+  if (dataset.issues) {
+    throw new ValiError(dataset.issues);
+  }
+  return dataset.value;
+}
+// @__NO_SIDE_EFFECTS__
+function pipe(...pipe2) {
+  return {
+    ...pipe2[0],
+    pipe: pipe2,
+    get "~standard"() {
+      return /* @__PURE__ */ _getStandardProps(this);
+    },
+    "~run"(dataset, config2) {
+      for (const item of pipe2) {
+        if (item.kind !== "metadata") {
+          if (dataset.issues && (item.kind === "schema" || item.kind === "transformation")) {
+            dataset.typed = false;
+            break;
+          }
+          if (!dataset.issues || !config2.abortEarly && !config2.abortPipeEarly) {
+            dataset = item["~run"](dataset, config2);
+          }
+        }
+      }
+      return dataset;
+    }
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function safeParse(schema, input, config2) {
+  const dataset = schema["~run"]({ value: input }, /* @__PURE__ */ getGlobalConfig(config2));
+  return {
+    typed: dataset.typed,
+    success: !dataset.issues,
+    output: dataset.value,
+    issues: dataset.issues
+  };
+}
+const linkValidator = /* @__PURE__ */ check(
+  (value) => {
+    var _a, _b;
+    return !!value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+  }
+);
+const isLink$1 = (value) => {
+  var _a;
+  return (_a = /* @__PURE__ */ safeParse(linkValidator, value)) == null ? void 0 : _a.success;
+};
+const isVariableLink$1 = (value) => {
+  var _a, _b;
+  return isLink$1(value) && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.at(0)) === nodes.Variable;
+};
+const getMetadata = (schema) => {
+  var _a;
+  const pipelines = (schema == null ? void 0 : schema.pipe) ?? [];
+  return ((_a = pipelines == null ? void 0 : pipelines.find((pipe2) => /* @__PURE__ */ isOfKind("metadata", pipe2))) == null ? void 0 : _a.metadata) ?? null;
+};
+const layerField = (schema, meta) => {
+  const overridable = (meta == null ? void 0 : meta.overridable) ?? true;
+  const variable = (meta == null ? void 0 : meta.variable) ?? false;
+  const schemaParts = [schema];
+  if (variable) {
+    schemaParts.push(/* @__PURE__ */ pipe(/* @__PURE__ */ string(), linkValidator));
+  }
+  if (overridable) {
+    schemaParts.push(/* @__PURE__ */ any());
+  }
+  return /* @__PURE__ */ pipe(
+    /* @__PURE__ */ optional(/* @__PURE__ */ union(schemaParts)),
+    /* @__PURE__ */ transform((meta == null ? void 0 : meta.transform) ?? ((v2) => v2)),
+    /* @__PURE__ */ metadata(meta ?? {})
+  );
+};
+const ChildrenSchema = /* @__PURE__ */ object({
+  children: layerField(/* @__PURE__ */ array(/* @__PURE__ */ string()), {
+    fallback: [],
+    overridable: false
+  })
+});
+const GraphFieldSchema = /* @__PURE__ */ object({
+  _id: /* @__PURE__ */ union([/* @__PURE__ */ string(), /* @__PURE__ */ number()]),
+  _type: /* @__PURE__ */ picklist(Object.keys(nodes))
+});
+const OverridesSchema = /* @__PURE__ */ object({
+  overrides: layerField(/* @__PURE__ */ array(/* @__PURE__ */ string()), { overridable: false }),
+  overrideFrom: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false })
+});
+const PositionSchema = /* @__PURE__ */ object({
+  position: layerField(/* @__PURE__ */ enum_(Object.keys(positionType)), {
+    fallback: positionType.absolute
+  }),
+  top: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ number()), {
+    fallback: null,
+    transform: (value) => typeof value === "number" ? Math.ceil(value) : value
+  }),
+  left: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ number()), {
+    fallback: null,
+    transform: (value) => typeof value === "number" ? Math.ceil(value) : value
+  }),
+  right: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ number()), {
+    fallback: null,
+    transform: (value) => typeof value === "number" ? Math.ceil(value) : value
+  }),
+  bottom: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ number()), {
+    fallback: null,
+    transform: (value) => typeof value === "number" ? Math.ceil(value) : value
+  }),
+  centerAnchorX: layerField(/* @__PURE__ */ number(), {
+    fallback: 0.5
+  }),
+  centerAnchorY: layerField(/* @__PURE__ */ number(), {
+    fallback: 0.5
+  })
+});
+const SceneSchema = /* @__PURE__ */ object({
+  opacity: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0), /* @__PURE__ */ maxValue(1)), {
+    fallback: 1,
+    variable: true
+  }),
+  visible: layerField(/* @__PURE__ */ boolean(), { fallback: true, variable: true }),
+  rotate: layerField(/* @__PURE__ */ number(), { fallback: null }),
+  zIndex: layerField(/* @__PURE__ */ number(), { fallback: -1 })
+});
+const FillSchema = /* @__PURE__ */ object({
+  fillType: layerField(/* @__PURE__ */ picklist(Object.keys(paintMode)), {
+    fallback: paintMode.None
+  }),
+  solidFill: layerField(/* @__PURE__ */ string(), { fallback: "#fff" }),
+  imageFill: layerField(/* @__PURE__ */ string()),
+  imageSize: layerField(/* @__PURE__ */ picklist(Object.keys(imagePaintScaleModes)), {
+    fallback: imagePaintScaleModes.Auto
+  })
+});
+const BorderSchema = /* @__PURE__ */ object({
+  borderType: layerField(/* @__PURE__ */ picklist(Object.keys(borderType)), {
+    fallback: borderType.None
+  }),
+  borderWidth: layerField(/* @__PURE__ */ string(), {
+    fallback: "1px",
+    transform: (value) => {
+      if (typeof value === "number") {
+        return `${value}px`;
+      }
+      return value;
+    }
+  }),
+  borderColor: layerField(/* @__PURE__ */ string(), { fallback: "#fff" })
+});
+const SizeSchema = /* @__PURE__ */ object({
+  widthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  heightType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  width: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), {
+    fallback: 0,
+    transform: Math.ceil
+  }),
+  height: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), {
+    fallback: 0,
+    transform: Math.ceil
+  }),
+  aspectRatio: layerField(/* @__PURE__ */ number(), { fallback: -1 }),
+  minWidth: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  minWidthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  maxWidth: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  maxWidthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  minHeight: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  minHeightType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  }),
+  maxHeight: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(-1))), {
+    fallback: -1,
+    transform: Math.ceil
+  }),
+  maxHeightType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
+    fallback: sizing.Fixed
+  })
+});
+const LayerSchema = /* @__PURE__ */ object({
+  layerMode: layerField(/* @__PURE__ */ picklist(Object.keys(layerMode)), {
+    fallback: layerMode.none
+  }),
+  layerAlign: layerField(/* @__PURE__ */ picklist(Object.keys(layerAlign)), {
+    fallback: layerAlign.start
+  }),
+  layerDirection: layerField(/* @__PURE__ */ picklist(Object.keys(layerDirection)), {
+    fallback: layerDirection.horizontal
+  }),
+  layerDistribute: layerField(/* @__PURE__ */ picklist(Object.keys(layerDistribute)), {
+    fallback: layerDistribute.start
+  }),
+  layerWrap: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  layerGap: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), { fallback: 0 }),
+  padding: layerField(/* @__PURE__ */ string(), { fallback: "0px" })
+});
+const OverflowSchema = layerField(/* @__PURE__ */ picklist(Object.keys(overflow)), {
+  fallback: overflow.hidden
+});
+const BorderRadiusSchema = layerField(/* @__PURE__ */ string(), { fallback: "0px" });
+const InteractionsSchema = /* @__PURE__ */ object({
+  interactions: layerField(
+    /* @__PURE__ */ array(
+      /* @__PURE__ */ object({
+        on: /* @__PURE__ */ enum_(Object.keys(interactions)),
+        event: /* @__PURE__ */ nullable(linkValidator)
+      })
+    ),
+    { fallback: [] }
+  )
+});
+const CssOverrideSchema = /* @__PURE__ */ object({
+  cssOverride: layerField(/* @__PURE__ */ string(), { fallback: "" })
+});
+const LinkSchema = /* @__PURE__ */ object({
+  href: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  hrefNewTab: layerField(/* @__PURE__ */ boolean(), {
+    fallback: true
+  })
+  // hrefTarget: layerField(v.picklist(Object.keys(linkTarget)), {
+  //   fallback: linkTarget._blank,
+  // }),
+});
+const FrameSchema = /* @__PURE__ */ pipe(
+  /* @__PURE__ */ object({
+    name: layerField(/* @__PURE__ */ string(), { fallback: "Frame", overridable: false }),
+    isBreakpoint: layerField(/* @__PURE__ */ boolean(), {
+      fallback: false,
+      overridable: false
+    }),
+    isPrimary: layerField(/* @__PURE__ */ boolean(), { fallback: false, overridable: false }),
+    parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+    ...ChildrenSchema.entries,
+    ...GraphFieldSchema.entries,
+    ...OverridesSchema.entries,
+    ...PositionSchema.entries,
+    ...SceneSchema.entries,
+    ...FillSchema.entries,
+    ...BorderSchema.entries,
+    ...SizeSchema.entries,
+    ...LayerSchema.entries,
+    ...InteractionsSchema.entries,
+    ...CssOverrideSchema.entries,
+    ...LinkSchema.entries,
+    overflow: OverflowSchema,
+    borderRadius: BorderRadiusSchema
+  })
+);
+const TextSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), { fallback: "Text", overridable: false }),
+  content: layerField(/* @__PURE__ */ string(), {
+    fallback: ""
+  }),
+  whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
+    fallback: whiteSpace.pre
+  }),
+  textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  ...GraphFieldSchema.entries,
+  ...OverridesSchema.entries,
+  ...CssOverrideSchema.entries,
+  ...PositionSchema.entries,
+  ...SceneSchema.entries,
+  ...SizeSchema.entries,
+  ...InteractionsSchema.entries,
+  ...LinkSchema.entries
+});
+const FragmentSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), { fallback: "Fragment", overridable: false }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  horizontalGrow: layerField(/* @__PURE__ */ enum_(Object.keys(fragmentGrowingMode)), {
+    fallback: fragmentGrowingMode.fill,
+    overridable: false
+  }),
+  verticalGrow: layerField(/* @__PURE__ */ enum_(Object.keys(fragmentGrowingMode)), {
+    fallback: fragmentGrowingMode.auto,
+    overridable: false
+  }),
+  properties: layerField(/* @__PURE__ */ array(/* @__PURE__ */ string()), {
+    fallback: [],
+    overridable: false
+  }),
+  ...GraphFieldSchema.entries,
+  ...ChildrenSchema.entries
+});
+const InstanceSchema = /* @__PURE__ */ object({
+  name: layerField(/* @__PURE__ */ string(), { fallback: "Instance", overridable: false }),
+  fragment: layerField(/* @__PURE__ */ number()),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  props: layerField(
+    /* @__PURE__ */ record(
+      /* @__PURE__ */ string(),
+      /* @__PURE__ */ union([
+        /* @__PURE__ */ string(),
+        /* @__PURE__ */ number(),
+        /* @__PURE__ */ boolean(),
+        // For goals
+        /* @__PURE__ */ object({
+          code: /* @__PURE__ */ string(),
+          name: /* @__PURE__ */ string()
+        })
+      ])
+    ),
+    {
+      fallback: {}
+    }
+  ),
+  ...GraphFieldSchema.entries,
+  ...OverridesSchema.entries,
+  ...PositionSchema.entries,
+  ...SizeSchema.entries,
+  ...SceneSchema.entries,
+  ...InteractionsSchema.entries,
+  ...LinkSchema.entries
+});
+const NumberVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Number",
+    overridable: false
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Number), {
+    fallback: variableType.Number
+  }),
+  defaultValue: layerField(/* @__PURE__ */ number(), { fallback: 0 }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  min: layerField(/* @__PURE__ */ number(), { fallback: 1 }),
+  max: layerField(/* @__PURE__ */ number(), { fallback: 100 }),
+  step: layerField(/* @__PURE__ */ number(), { fallback: 1 }),
+  displayStepper: layerField(/* @__PURE__ */ boolean(), { fallback: true }),
+  ...GraphFieldSchema.entries
+});
+const BooleanVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Boolean",
+    overridable: false
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Boolean), {
+    fallback: variableType.Boolean
+  }),
+  defaultValue: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const ColorVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "String",
+    overridable: false
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Color), {
+    fallback: variableType.Color
+  }),
+  // TODO Add color validator
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: "#000" }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const StringVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "String",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.String), {
+    fallback: variableType.String
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const EventVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Event",
+    overridable: false
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Event), {
+    fallback: variableType.Event
+  }),
+  mode: layerField(/* @__PURE__ */ picklist(Object.keys(eventMode)), {
+    fallback: eventMode.callback
+  }),
+  defaultValue: layerField(/* @__PURE__ */ any()),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const LinkVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Link",
+    overridable: false
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Link), {
+    fallback: variableType.Link
+  }),
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const EnumVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Option",
+    overridable: false
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Enum), {
+    fallback: variableType.Enum
+  }),
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  cases: layerField(
+    /* @__PURE__ */ array(
+      /* @__PURE__ */ object({
+        id: /* @__PURE__ */ string(),
+        name: /* @__PURE__ */ string()
+      })
+    ),
+    { fallback: [] }
+  ),
+  ...GraphFieldSchema.entries
+});
+const ObjectVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Object",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Object), {
+    fallback: variableType.Object
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  defaultValue: layerField(/* @__PURE__ */ object({}), { fallback: {} }),
+  fields: layerField(/* @__PURE__ */ record(/* @__PURE__ */ string(), linkValidator), { fallback: {} }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const ImageVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Image",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Image), {
+    fallback: variableType.Image
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  defaultValue: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  imageSize: layerField(/* @__PURE__ */ picklist(Object.keys(imagePaintScaleModes)), {
+    fallback: imagePaintScaleModes.Auto
+  }),
+  ...GraphFieldSchema.entries
+});
+const CollectionSchema = /* @__PURE__ */ pipe(
+  /* @__PURE__ */ object({
+    name: layerField(/* @__PURE__ */ string(), {
+      fallback: "Collection",
+      overridable: false
+    }),
+    parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+    source: layerField(linkValidator, {}),
+    ...ChildrenSchema.entries,
+    ...GraphFieldSchema.entries,
+    ...OverridesSchema.entries,
+    ...PositionSchema.entries,
+    ...SceneSchema.entries,
+    ...FillSchema.entries,
+    ...BorderSchema.entries,
+    ...SizeSchema.entries,
+    ...LayerSchema.entries,
+    ...InteractionsSchema.entries,
+    ...CssOverrideSchema.entries,
+    ...LinkSchema.entries
+  })
+);
+const ArrayVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  name: layerField(/* @__PURE__ */ string(), {
+    fallback: "Collection",
+    overridable: false
+  }),
+  type: layerField(/* @__PURE__ */ literal(variableType.Array), {
+    fallback: variableType.Array
+  }),
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  defaultValue: layerField(/* @__PURE__ */ array(/* @__PURE__ */ any()), { fallback: [] }),
+  definition: layerField(linkValidator, { fallback: null }),
+  required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  ...GraphFieldSchema.entries
+});
+const getLayerSchema = (layer) => {
+  if (!(layer == null ? void 0 : layer._type)) return null;
+  if ((layer == null ? void 0 : layer._type) === nodes.Frame) return FrameSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Text) return TextSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Fragment) return FragmentSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Instance) return InstanceSchema;
+  if ((layer == null ? void 0 : layer._type) === nodes.Collection) return CollectionSchema;
+  if (layer._type === nodes.Variable) {
+    const types = {
+      [variableType.Number]: NumberVariableSchema,
+      [variableType.Boolean]: BooleanVariableSchema,
+      [variableType.String]: StringVariableSchema,
+      [variableType.Color]: ColorVariableSchema,
+      [variableType.Event]: EventVariableSchema,
+      [variableType.Link]: LinkVariableSchema,
+      [variableType.Enum]: EnumVariableSchema,
+      [variableType.Object]: ObjectVariableSchema,
+      [variableType.Image]: ImageVariableSchema,
+      [variableType.Array]: ArrayVariableSchema
+    };
+    if (layer.type in types) {
+      return types[layer.type];
+    }
+  }
+};
+const isObject$1 = (x2) => !!x2 && typeof x2 === "object" && !Array.isArray(x2);
+const normalizeLayer = (schema, rawLayer, options2) => {
+  try {
+    if (!rawLayer || !schema.entries) return null;
+    const withFallback = (options2 == null ? void 0 : options2.withFallback) ?? true;
+    const overrideTarget = options2 == null ? void 0 : options2.overrideTarget;
+    const parsedLayer = parse(schema, rawLayer);
+    return Object.fromEntries(
+      Object.entries(schema.entries).map(([key, schemaEntity]) => {
+        const schemaMeta = getMetadata(schemaEntity);
+        const fallback = withFallback ? schemaMeta == null ? void 0 : schemaMeta.fallback : null;
+        const overrideValue = (schemaMeta == null ? void 0 : schemaMeta.overridable) !== false && overrideTarget ? overrideTarget == null ? void 0 : overrideTarget[key] : null;
+        let layerValue = parsedLayer[key];
+        if (isObject$1(layerValue) && isObject$1(overrideValue)) {
+          layerValue = { ...overrideValue, ...layerValue };
+        }
+        if (schemaEntity && "wrapped" in schemaEntity && "entries" in schemaEntity.wrapped && isObject$1(schemaEntity.wrapped.entries)) {
+          layerValue = normalizeLayer(
+            schemaEntity.wrapped,
+            layerValue,
+            options2
+          );
+        }
+        const resultValue = layerValue ?? overrideValue ?? fallback;
+        return [key, resultValue];
+      })
+    );
+  } catch (e2) {
+    console.error(e2);
+    return null;
+  }
+};
+const getNormalizeLayer$1 = (layer, overrider, withFallback) => {
+  if (!layer) return null;
+  const schema = getLayerSchema(layer);
+  if (!schema) return null;
+  return normalizeLayer(schema, layer, {
+    overrideTarget: overrider,
+    withFallback
+  });
+};
+function findSchemaByPath(schema, path) {
+  if (!path) return void 0;
+  const parts = path.split(".");
+  let current = schema;
+  for (const part of parts) {
+    if (!current || typeof current !== "object") return void 0;
+    if ("entries" in current) {
+      if (!(part in current.entries)) return void 0;
+      current = current.entries[part];
+    } else if ("wrapped" in current && "entries" in current.wrapped) {
+      current = current.wrapped.entries[part];
+    }
+  }
+  return current;
+}
+const parseLayerField = (layer, field, value) => {
+  const schema = getLayerSchema(layer);
+  const fieldSchema = findSchemaByPath(schema, field);
+  if (fieldSchema) {
+    return /* @__PURE__ */ safeParse(fieldSchema, value);
+  }
+  return { success: false, output: value };
+};
+const RenderTargetContext = createContext(
+  index.renderTarget.document
+);
+const RenderTargetProvider = RenderTargetContext.Provider;
+const useRenderTarget = () => {
+  const renderTarget2 = useContext(RenderTargetContext);
+  return {
+    renderTarget: renderTarget2,
+    isCanvas: renderTarget2 === index.renderTarget.canvas,
+    isDocument: renderTarget2 === index.renderTarget.document
+  };
+};
+var withSelector = { exports: {} };
+var withSelector_production = {};
+var shim = { exports: {} };
+var useSyncExternalStoreShim_production = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredUseSyncExternalStoreShim_production;
+function requireUseSyncExternalStoreShim_production() {
+  if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+  hasRequiredUseSyncExternalStoreShim_production = 1;
+  var React = require$$0;
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue = React.useDebugValue;
+  function useSyncExternalStore$2(subscribe, getSnapshot) {
+    var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+    useLayoutEffect(
+      function() {
+        inst.value = value;
+        inst.getSnapshot = getSnapshot;
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+      },
+      [subscribe, value, getSnapshot]
+    );
+    useEffect2(
+      function() {
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        return subscribe(function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        });
+      },
+      [subscribe]
+    );
+    useDebugValue(value);
+    return value;
+  }
+  function checkIfSnapshotChanged(inst) {
+    var latestGetSnapshot = inst.getSnapshot;
+    inst = inst.value;
+    try {
+      var nextValue = latestGetSnapshot();
+      return !objectIs(inst, nextValue);
+    } catch (error) {
+      return true;
+    }
+  }
+  function useSyncExternalStore$1(subscribe, getSnapshot) {
+    return getSnapshot();
+  }
+  var shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+  useSyncExternalStoreShim_production.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
+  return useSyncExternalStoreShim_production;
+}
+var useSyncExternalStoreShim_development = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredUseSyncExternalStoreShim_development;
+function requireUseSyncExternalStoreShim_development() {
+  if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+  hasRequiredUseSyncExternalStoreShim_development = 1;
+  "production" !== process.env.NODE_ENV && function() {
+    function is(x2, y2) {
+      return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+    }
+    function useSyncExternalStore$2(subscribe, getSnapshot) {
+      didWarnOld18Alpha || void 0 === React.startTransition || (didWarnOld18Alpha = true, console.error(
+        "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+      ));
+      var value = getSnapshot();
+      if (!didWarnUncachedGetSnapshot) {
+        var cachedValue = getSnapshot();
+        objectIs(value, cachedValue) || (console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        ), didWarnUncachedGetSnapshot = true);
+      }
+      cachedValue = useState2({
+        inst: { value, getSnapshot }
+      });
+      var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
+      useLayoutEffect(
+        function() {
+          inst.value = value;
+          inst.getSnapshot = getSnapshot;
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        },
+        [subscribe, value, getSnapshot]
+      );
+      useEffect2(
+        function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          return subscribe(function() {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          });
+        },
+        [subscribe]
+      );
+      useDebugValue(value);
+      return value;
+    }
+    function checkIfSnapshotChanged(inst) {
+      var latestGetSnapshot = inst.getSnapshot;
+      inst = inst.value;
+      try {
+        var nextValue = latestGetSnapshot();
+        return !objectIs(inst, nextValue);
+      } catch (error) {
+        return true;
+      }
+    }
+    function useSyncExternalStore$1(subscribe, getSnapshot) {
+      return getSnapshot();
+    }
+    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var React = require$$0, objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue = React.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+    useSyncExternalStoreShim_development.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
+    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }();
+  return useSyncExternalStoreShim_development;
+}
+var hasRequiredShim;
+function requireShim() {
+  if (hasRequiredShim) return shim.exports;
+  hasRequiredShim = 1;
+  if (process.env.NODE_ENV === "production") {
+    shim.exports = requireUseSyncExternalStoreShim_production();
+  } else {
+    shim.exports = requireUseSyncExternalStoreShim_development();
+  }
+  return shim.exports;
+}
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredWithSelector_production;
+function requireWithSelector_production() {
+  if (hasRequiredWithSelector_production) return withSelector_production;
+  hasRequiredWithSelector_production = 1;
+  var React = require$$0, shim2 = requireShim();
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue = React.useDebugValue;
+  withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+    var instRef = useRef2(null);
+    if (null === instRef.current) {
+      var inst = { hasValue: false, value: null };
+      instRef.current = inst;
+    } else inst = instRef.current;
+    instRef = useMemo2(
+      function() {
+        function memoizedSelector(nextSnapshot) {
+          if (!hasMemo) {
+            hasMemo = true;
+            memoizedSnapshot = nextSnapshot;
+            nextSnapshot = selector(nextSnapshot);
+            if (void 0 !== isEqual && inst.hasValue) {
+              var currentSelection = inst.value;
+              if (isEqual(currentSelection, nextSnapshot))
+                return memoizedSelection = currentSelection;
+            }
+            return memoizedSelection = nextSnapshot;
+          }
+          currentSelection = memoizedSelection;
+          if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+          var nextSelection = selector(nextSnapshot);
+          if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+            return memoizedSnapshot = nextSnapshot, currentSelection;
+          memoizedSnapshot = nextSnapshot;
+          return memoizedSelection = nextSelection;
+        }
+        var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+        return [
+          function() {
+            return memoizedSelector(getSnapshot());
+          },
+          null === maybeGetServerSnapshot ? void 0 : function() {
+            return memoizedSelector(maybeGetServerSnapshot());
+          }
+        ];
+      },
+      [getSnapshot, getServerSnapshot, selector, isEqual]
+    );
+    var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+    useEffect2(
+      function() {
+        inst.hasValue = true;
+        inst.value = value;
+      },
+      [value]
+    );
+    useDebugValue(value);
+    return value;
+  };
+  return withSelector_production;
+}
+var withSelector_development = {};
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredWithSelector_development;
+function requireWithSelector_development() {
+  if (hasRequiredWithSelector_development) return withSelector_development;
+  hasRequiredWithSelector_development = 1;
+  "production" !== process.env.NODE_ENV && function() {
+    function is(x2, y2) {
+      return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+    }
+    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var React = require$$0, shim2 = requireShim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue = React.useDebugValue;
+    withSelector_development.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+      var instRef = useRef2(null);
+      if (null === instRef.current) {
+        var inst = { hasValue: false, value: null };
+        instRef.current = inst;
+      } else inst = instRef.current;
+      instRef = useMemo2(
+        function() {
+          function memoizedSelector(nextSnapshot) {
+            if (!hasMemo) {
+              hasMemo = true;
+              memoizedSnapshot = nextSnapshot;
+              nextSnapshot = selector(nextSnapshot);
+              if (void 0 !== isEqual && inst.hasValue) {
+                var currentSelection = inst.value;
+                if (isEqual(currentSelection, nextSnapshot))
+                  return memoizedSelection = currentSelection;
+              }
+              return memoizedSelection = nextSnapshot;
+            }
+            currentSelection = memoizedSelection;
+            if (objectIs(memoizedSnapshot, nextSnapshot))
+              return currentSelection;
+            var nextSelection = selector(nextSnapshot);
+            if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+              return memoizedSnapshot = nextSnapshot, currentSelection;
+            memoizedSnapshot = nextSnapshot;
+            return memoizedSelection = nextSelection;
+          }
+          var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+          return [
+            function() {
+              return memoizedSelector(getSnapshot());
+            },
+            null === maybeGetServerSnapshot ? void 0 : function() {
+              return memoizedSelector(maybeGetServerSnapshot());
+            }
+          ];
+        },
+        [getSnapshot, getServerSnapshot, selector, isEqual]
+      );
+      var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+      useEffect2(
+        function() {
+          inst.hasValue = true;
+          inst.value = value;
+        },
+        [value]
+      );
+      useDebugValue(value);
+      return value;
+    };
+    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }();
+  return withSelector_development;
+}
+var hasRequiredWithSelector;
+function requireWithSelector() {
+  if (hasRequiredWithSelector) return withSelector.exports;
+  hasRequiredWithSelector = 1;
+  if (process.env.NODE_ENV === "production") {
+    withSelector.exports = requireWithSelector_production();
+  } else {
+    withSelector.exports = requireWithSelector_development();
+  }
+  return withSelector.exports;
+}
+var withSelectorExports = requireWithSelector();
+var x = (t2) => t2, y = (t2, e2, n2) => {
+  var _a, _b;
+  let r2 = useRef((_a = t2 == null ? void 0 : t2.resolve) == null ? void 0 : _a.call(t2, e2, n2)), s2 = ((_b = t2 == null ? void 0 : t2.keyOfEntity) == null ? void 0 : _b.call(t2, e2)) ?? e2, o2 = useCallback((p2) => {
     var _a2, _b2;
-    return s ? (r.current = (_a2 = t == null ? void 0 : t.resolve) == null ? void 0 : _a2.call(t, s, n), o(), (_b2 = t == null ? void 0 : t.subscribe) == null ? void 0 : _b2.call(t, s, () => {
+    return s2 ? (r2.current = (_a2 = t2 == null ? void 0 : t2.resolve) == null ? void 0 : _a2.call(t2, s2, n2), p2(), (_b2 = t2 == null ? void 0 : t2.subscribe) == null ? void 0 : _b2.call(t2, s2, () => {
       var _a3;
-      return r.current = (_a3 = t == null ? void 0 : t.resolve) == null ? void 0 : _a3.call(t, s, n), o();
-    }, n)) : () => {
+      return r2.current = (_a3 = t2 == null ? void 0 : t2.resolve) == null ? void 0 : _a3.call(t2, s2, n2), p2();
+    }, n2)) : () => {
     };
-  }, [t, s]), i = useCallback((o) => {
-    let p = typeof e == "string" ? e : t.keyOfEntity(e);
-    e && p && t.mutate(p, o);
-  }, [t, e]), a = () => r.current;
-  return [shimExports.useSyncExternalStore(u, a, a), i];
-};
-const useFragmentManager = (fragmentId) => {
-  const globalManager = useGlobalManager();
-  const [globalGraph] = y(globalManager, globalManager == null ? void 0 : globalManager.key);
-  const [loading, setLoading] = useState(false);
-  const getFragmentManager = (id) => {
-    var _a;
-    return (_a = globalGraph == null ? void 0 : globalGraph.fragmentsManagers) == null ? void 0 : _a[id];
+  }, [t2, s2]), a2 = useCallback((p2, c2) => {
+    let u2 = typeof e2 == "string" ? e2 : keyOfEntity(e2);
+    e2 && u2 && t2.mutate(u2, p2, c2);
+  }, [t2, e2]), i2 = () => (n2 == null ? void 0 : n2.pause) ? null : r2.current;
+  return [withSelectorExports.useSyncExternalStoreWithSelector(o2, i2, i2, x), a2];
+};
+var R = (t2) => t2, S = (t2, e2, n2) => {
+  let r2 = useCallback((c2) => c2.map((u2) => t2.resolve(u2, n2)).filter(Boolean), [t2, n2]), s2 = useMemo(() => e2.map((c2) => t2.keyOfEntity(c2) || c2).join(), [e2]), o2 = useRef(r2(e2));
+  useRef([]);
+  let i2 = useCallback((c2) => {
+    if (e2) {
+      let u2 = () => {
+        o2.current = r2(e2), c2();
+      }, l2 = new AbortController();
+      return e2.forEach((f2) => {
+        f2 && t2.subscribe(f2, u2, { signal: l2.signal, ...n2 });
+      }), u2(), () => l2.abort("unsubscribe");
+    }
+    return () => {
+    };
+  }, [t2, s2]), p2 = () => o2.current;
+  return withSelectorExports.useSyncExternalStoreWithSelector(i2, p2, p2, R);
+};
+const GlobalManager = createContext(null);
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a2, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a2, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a2, prop, b[prop]);
+    }
+  return a2;
+};
+var toPx = (val) => typeof val === "string" || typeof val === "number" ? `${val}px` : "0px";
+var isObject = (input) => {
+  return typeof input === "object" && input !== null && !Array.isArray(input);
+};
+var isEmptyValue = (value) => !value && (value === null || value === void 0);
+var isValue = (value) => !isEmptyValue(value);
+var get = (obj, path, defValue) => {
+  if (!path)
+    return void 0;
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+  const result = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj);
+  return result === void 0 ? defValue : result;
+};
+var set = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+  return pathArray.reduce((acc, key, i2) => {
+    if (acc[key] === void 0)
+      acc[key] = {};
+    if (i2 === pathArray.length - 1)
+      acc[key] = value;
+    return acc[key];
+  }, obj);
+};
+var isPrimitive = (value) => typeof value !== "object" && typeof value !== "function" || value === null;
+var toKebabCase = (value) => value.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($2, ofs) => (ofs ? "-" : "") + $2.toLowerCase());
+var noop = () => void 0;
+var pick = (obj, ...props) => {
+  return props.reduce((result, prop) => {
+    result[prop] = obj[prop];
+    return result;
+  }, {});
+};
+function omit(obj, ...props) {
+  const result = __spreadValues({}, obj);
+  props.forEach((prop) => {
+    delete result[prop];
+  });
+  return result;
+}
+var cleanGraph = (input) => isObject(input) ? omit(input, "_type", "_id") : input;
+var isBrowser_default = typeof window !== "undefined";
+var generateId = () => Math.random().toString(16).slice(2);
+var flattenObject = (obj) => {
+  const result = {};
+  function flatten(current) {
+    for (let key in current) {
+      if (current.hasOwnProperty(key)) {
+        const value = current[key];
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          flatten(value);
+        } else {
+          result[key] = value;
+        }
+      }
+    }
+  }
+  flatten(obj);
+  return result;
+};
+function isFiniteNumber(value) {
+  return typeof value === "number" && isFinite(value);
+}
+var setKey$1 = (v2) => `$${v2}`;
+function hashGenerator(layerKey) {
+  let hash = 0;
+  for (let i2 = 0; i2 < layerKey.length; i2++) {
+    hash = (hash << 5) - hash + layerKey.charCodeAt(i2);
+    hash |= 0;
+  }
+  const raw = Math.abs(hash).toString(36);
+  return /^[0-9]/.test(raw) ? `h${raw}` : raw;
+}
+const useGlobalManager = (globalManager) => {
+  var _a, _b;
+  const currentGlobalManager = useContext(GlobalManager);
+  const resultManager = globalManager ?? currentGlobalManager;
+  const [fragmentsGraph] = y(
+    resultManager,
+    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
+  );
+  const queryFragmentManager = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const queryArea = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
   };
-  const loadFragmentManager = async (id) => {
-    setLoading(true);
-    const fragmentDocument = await globalGraph.fetchManager.queryFragment(id);
-    const res = globalManager == null ? void 0 : globalManager.createFragmentManager(id, fragmentDocument);
-    setLoading(false);
-    return res;
+  const setRenderTarget = (value) => {
+    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
   };
+  return {
+    fragmentsGraph,
+    manager: resultManager,
+    queryFragmentManager,
+    queryArea,
+    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? noop,
+    setRenderTarget
+  };
+};
+const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+  var _a;
+  const {
+    fragmentsGraph,
+    manager: gg,
+    getFragmentManager,
+    queryFragmentManager
+  } = useGlobalManager(inputGlobalManager);
+  const [loading, setLoading] = useState(false);
+  const manager = getFragmentManager(fragmentId);
   useEffect(() => {
-    loadFragmentManager(fragmentId);
-  }, [fragmentId]);
+    (async () => {
+      if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+        setLoading(true);
+        await queryFragmentManager(fragmentId);
+        setLoading(false);
+      }
+    })();
+  }, [fragmentId, fragmentsGraph]);
   return {
     loading,
-    manager: getFragmentManager(fragmentId)
+    manager,
+    fragmentLayerKey: (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root,
+    queryFragmentManager
+    // loadFragmentManager,
+  };
+};
+const FragmentContext = createContext({
+  manager: null
+});
+const setKey = (v2) => `$${v2}`;
+const getKey = (v2) => isKey(v2) ? v2.slice(1) : null;
+const isKey = (v2) => typeof v2 === "string" && v2.startsWith("$");
+const getParent = (manager, layerKey) => {
+  const layer = manager.resolve(layerKey);
+  return manager.resolve(getKey(layer == null ? void 0 : layer.parent) ?? null);
+};
+const isRootLayer = (manager, layerKey) => {
+  var _a, _b;
+  const resolvedNode = (_a = manager == null ? void 0 : manager.resolve) == null ? void 0 : _a.call(manager, layerKey);
+  return ((_b = getParent(manager, layerKey)) == null ? void 0 : _b._type) === index.nodes.Fragment && !(resolvedNode == null ? void 0 : resolvedNode.isBreakpoint);
+};
+const isTopLevel = (manager, layerKey) => {
+  var _a;
+  return ((_a = getParent(manager, layerKey)) == null ? void 0 : _a._type) === index.nodes.Fragment;
+};
+const getAllParents = (manager, layerKey, stack = []) => {
+  const parent = getParent(manager, layerKey);
+  if (parent) {
+    stack.push(parent);
+    getAllParents(manager, manager.keyOfEntity(parent), stack);
+  }
+  return stack;
+};
+const isPartOfPrimary = (manager, layerKey) => {
+  var _a;
+  const allParents = getAllParents(manager, manager.keyOfEntity(layerKey));
+  const layer = manager.resolve(layerKey);
+  return (layer == null ? void 0 : layer.isPrimary) ?? !!((_a = allParents == null ? void 0 : allParents.find) == null ? void 0 : _a.call(allParents, (parent) => !!(parent == null ? void 0 : parent.isPrimary)));
+};
+const createLayer = (externalLayerData, overrideId = false) => {
+  if (!externalLayerData || !isObject(externalLayerData)) return null;
+  const cleanLayer = Object.entries(externalLayerData).reduce(
+    (acc, [key, value]) => {
+      if (isObject(value) && "_type" in value && "_id" in value && isPartialKey(`${value._type}:${value._id}`)) {
+        delete value._id;
+        delete value._type;
+      }
+      acc[key] = value;
+      return acc;
+    },
+    {}
+  );
+  return overrideId ? {
+    ...cleanLayer,
+    _id: generateId()
+  } : {
+    _id: generateId(),
+    ...cleanLayer
+  };
+};
+const cloneLayer = (manager, layer, externalProps = {}, _parent) => {
+  const layerGraph = manager.resolve(layer);
+  const layerKey = manager.keyOfEntity(layer);
+  const layerParent = _parent ?? manager.keyOfEntity(getParent(manager, layerKey));
+  if (layerGraph) {
+    const clonedLayer = createLayer(
+      {
+        _type: layerGraph._type,
+        overrideFrom: setKey(layerKey),
+        parent: setKey(layerParent),
+        ...(layerGraph == null ? void 0 : layerGraph._type) === index.nodes.Instance ? pick(layerGraph, "fragment") : {},
+        ...externalProps
+      },
+      true
+    );
+    const clonedChildren = ((layerGraph == null ? void 0 : layerGraph.children) ?? []).map(
+      (child) => cloneLayer(manager, child, {}, manager.keyOfEntity(clonedLayer))
+    );
+    const clonedKey = manager.mutate({
+      ...clonedLayer,
+      children: clonedChildren
+    });
+    manager.mutate(layerKey, {
+      overrides: [clonedKey]
+    });
+    return clonedKey;
+  }
+  return null;
+};
+function makeSnapshot(globalManager, targetFragmentId) {
+  var _a, _b;
+  if (!globalManager || !targetFragmentId) return null;
+  const targetFragment = (_b = (_a = globalManager == null ? void 0 : globalManager.$fragments) == null ? void 0 : _a.getManager) == null ? void 0 : _b.call(_a, targetFragmentId);
+  if (!targetFragment) return null;
+  const fragmentDocument = targetFragment.resolve(
+    targetFragment.$fragment.root,
+    { deep: true }
+  );
+  const linkedFragments = Array.from(
+    new Set(
+      targetFragment.inspectFields(index.nodes.Instance).map((link) => {
+        var _a2;
+        return (_a2 = targetFragment.resolve(link)) == null ? void 0 : _a2.fragment;
+      }).values()
+    )
+  );
+  const linkedGoals = Array.from(
+    new Set(
+      targetFragment.inspectFields(index.nodes.Variable).map(targetFragment == null ? void 0 : targetFragment.resolve).filter((graph) => {
+        return (graph == null ? void 0 : graph.type) === index.variableType.Event && (graph == null ? void 0 : graph.mode) === index.eventMode.goal;
+      }).map((graph) => {
+        var _a2;
+        return (_a2 = graph == null ? void 0 : graph.defaultValue) == null ? void 0 : _a2.goalId;
+      }).filter(Boolean).values()
+    )
+  );
+  return {
+    document: fragmentDocument,
+    linkedFragments,
+    linkedGoals
+  };
+}
+const getOverrider = (manager, layerEntity) => {
+  const layer = manager.resolve(layerEntity);
+  return manager.resolve(getKey(layer == null ? void 0 : layer.overrideFrom) ?? layerEntity);
+};
+const isInheritField = (manager, layerEntity, field) => {
+  const layer = manager.resolve(layerEntity);
+  if (layer) {
+    const overrider = getOverrider(manager, layer);
+    if ((overrider == null ? void 0 : overrider._id) === (layer == null ? void 0 : layer._id)) return false;
+    return !!overrider && !isValue(layer == null ? void 0 : layer[field]);
+  }
+  return false;
+};
+const declareFragmentProperty = (manager, property, fragmentLink = manager.$fragment.root) => {
+  const propertyLayer = createLayer(property);
+  if (propertyLayer && "type" in propertyLayer) {
+    manager.mutate(manager.keyOfEntity(fragmentLink), {
+      properties: [propertyLayer]
+    });
+    return manager.keyOfEntity(propertyLayer);
+  }
+  return null;
+};
+const appendChildren = (manager, target, ...children) => {
+  const targetEntity = manager.entityOfKey(target);
+  const parseChildren = children.map(
+    (child) => createLayer({
+      ...manager.entityOfKey(child) ?? child,
+      parent: setKey(manager.keyOfEntity(target))
+    })
+  ).filter(Boolean);
+  if (targetEntity._type !== index.nodes.Frame) {
+    manager.mutate(manager.keyOfEntity(target), {
+      children: parseChildren
+    });
+    return;
+  }
+  const primaryTarget = getOverrider(manager, target);
+  const isPrimaryTarget = isPartOfPrimary(manager, target);
+  ((primaryTarget == null ? void 0 : primaryTarget.overrides) ?? []).forEach((override) => {
+    const overridesChildren = parseChildren.map((child) => {
+      const nextChild = createLayer(
+        {
+          ...pick(child, "parent", "_type"),
+          overrideFrom: setKey(manager.keyOfEntity(child))
+        },
+        true
+      );
+      if (!isPrimaryTarget) {
+        nextChild.visible = true;
+      }
+      return nextChild;
+    }).filter(Boolean);
+    overridesChildren.forEach((child, index2) => {
+      const primaryChild = parseChildren.at(index2);
+      if ("overrides" in primaryChild) {
+        primaryChild.overrides.push(manager.keyOfEntity(child));
+      } else {
+        primaryChild.overrides = [manager.keyOfEntity(child)];
+      }
+    });
+    manager.mutate(manager.keyOfEntity(override), {
+      children: overridesChildren
+    });
+  });
+  manager.mutate(manager.keyOfEntity(primaryTarget), {
+    children: parseChildren.map((child) => ({
+      ...child,
+      visible: isPrimaryTarget
+    }))
+  });
+  return parseChildren.map(manager.keyOfEntity);
+};
+const insertChildren = (manager, target, index2, ...layerKeys) => {
+  appendChildren(manager, target, ...layerKeys);
+  const targetLayer = manager.resolve(target);
+  const overrideLayers = ((targetLayer == null ? void 0 : targetLayer.overrides) ?? []).map(manager.resolve);
+  [targetLayer, ...overrideLayers].forEach((layer) => {
+    const children = (layer == null ? void 0 : layer.children) ?? [];
+    const appendedLayers = children.slice(layerKeys.length * -1);
+    const nextChildren = children.slice(0, layerKeys.length * -1);
+    nextChildren.splice(index2, 0, ...appendedLayers);
+    manager.mutate(
+      manager.keyOfEntity(layer),
+      (prev) => ({
+        ...prev,
+        children: nextChildren
+      }),
+      { replace: true }
+    );
+  });
+};
+const removeChildren = (manager, ...layerKeys) => {
+  layerKeys.map(manager.resolve).forEach((layer) => {
+    const isPrimary = isPartOfPrimary(manager, layer);
+    if (isPrimary || (layer == null ? void 0 : layer.isBreakpoint)) {
+      ((layer == null ? void 0 : layer.overrides) ?? []).concat((layer == null ? void 0 : layer.children) ?? []).forEach(manager.invalidate);
+      manager.invalidate(layer);
+    } else {
+      manager.mutate(manager.keyOfEntity(layer), {
+        visible: false
+      });
+    }
+  });
+};
+const moveChildren = (manager, targetKey, toKey, index2) => {
+  const targetClone = duplicateLayer(manager, targetKey, true);
+  insertChildren(manager, toKey, index2, targetClone);
+  removeChildren(manager, targetKey);
+};
+const duplicateLayer = (manager, layer, _deep, _newParent) => {
+  var _a;
+  const layerGraph = manager.resolve(layer);
+  if (layerGraph) {
+    const nextId = generateId();
+    const nextLayerKey = keyOfEntity({
+      _type: layerGraph._type,
+      _id: nextId
+    });
+    const clonedChildren = ((layerGraph == null ? void 0 : layerGraph.children) ?? []).map(
+      (child) => duplicateLayer(manager, child, true, nextLayerKey)
+    );
+    const duplicatedLayer = createLayer(
+      {
+        _type: layerGraph._type,
+        ...layerGraph,
+        _id: nextId,
+        parent: _deep ? setKey$1(_newParent) : layerGraph == null ? void 0 : layerGraph.parent,
+        children: clonedChildren
+      },
+      false
+    );
+    const duplicatedKey = manager.mutate(duplicatedLayer);
+    if (!_deep) {
+      const parent = getParent(manager, layer);
+      if (parent) {
+        const layerIndex = (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.findIndex(
+          (child) => child === manager.keyOfEntity(layer)
+        );
+        insertChildren(manager, parent, layerIndex + 1, duplicatedKey);
+      }
+    }
+    return duplicatedKey;
+  }
+  return null;
+};
+const isVariableLink = (value) => {
+  var _a;
+  return isLink(value) && ((_a = value == null ? void 0 : value.split(":")) == null ? void 0 : _a.at(0)) === index.nodes.Variable;
+};
+const isLink = (value) => {
+  var _a, _b;
+  return value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+};
+const getCssVariables = (props) => {
+  return Object.entries(cleanGraph(flattenObject(props))).reduce(
+    (acc, [key, value]) => {
+      var _a;
+      if (isVariableLink(value)) {
+        const nestedVariableId = (_a = entityOfKey(value)) == null ? void 0 : _a._id;
+        value = `var(--${nestedVariableId})`;
+      }
+      acc[`--${key}`] = value;
+      return acc;
+    },
+    {}
+  );
+};
+const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value, options2) => {
+  var _a;
+  const { success, output } = parseLayerField(
+    manager.resolve(layerKey),
+    fieldKey,
+    value
+  );
+  if (success) {
+    if (isVariableLink$1(value)) {
+      manager.mutate((_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.temp, {
+        [layerKey]: {
+          [fieldKey]: currentValue
+        }
+      });
+    }
+    manager.mutate(
+      layerKey,
+      (prev) => {
+        set(prev, fieldKey, output);
+        return prev;
+      },
+      options2
+    );
+  }
+};
+const getLayer = (manager, layer, options2) => {
+  if (!manager || !layer) return null;
+  const layerKey = manager.keyOfEntity(layer);
+  const layerData = manager.resolve(layerKey);
+  const overrider = getOverrider(manager, layerKey);
+  return getNormalizeLayer$1(layerData, overrider, options2 == null ? void 0 : options2.withFallback);
+};
+const getNormalizeLayer = (layerKey, manager, options2) => {
+  const layer = manager == null ? void 0 : manager.resolve(layerKey);
+  const parsedLayer = getLayer(manager, layerKey, options2);
+  return {
+    rawLayer: layer,
+    layer: parsedLayer
+  };
+};
+const useNormalizeLayer = (layerKey, manager, options2) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  return getNormalizeLayer(layerKey, resultManager, options2);
+};
+const ScopeContext = createContext([]);
+const extractVariableValue = (input, variableId) => {
+  if (isObject(input)) {
+    if (variableId in input) {
+      return input[variableId];
+    }
+    for (let key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue(input[key], variableId);
+        if (result !== void 0) {
+          return result;
+        }
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge(a2, b) {
+  if (!isObject(a2) || !isObject(b)) return a2;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a2)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useReadVariable = (variableKey) => {
+  const scopes = useContext(ScopeContext);
+  const extractVariableDefaultValue = (manager, variableEntity) => {
+    const variableLayer = manager.resolve(variableEntity);
+    if ((variableLayer == null ? void 0 : variableLayer.type) !== index.variableType.Object)
+      return variableLayer == null ? void 0 : variableLayer.defaultValue;
+    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
+      (acc, fieldLink) => {
+        var _a;
+        if (!!fieldLink && isVariableLink$1(fieldLink)) {
+          const _id = (_a = entityOfKey(fieldLink)) == null ? void 0 : _a._id;
+          if (_id) {
+            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
+          }
+        }
+        return acc;
+      },
+      {}
+    );
   };
+  const resolveVariableLayer = (manager, variableLink, customProps) => {
+    var _a;
+    const variableLayer = manager == null ? void 0 : manager.resolve(variableLink);
+    if (!variableLayer) return null;
+    if ((variableLayer == null ? void 0 : variableLayer.type) === index.variableType.Array) {
+      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
+      if (!((_a = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== index.variableType.Object)
+        return variableLayer;
+      const definitionDefaultValue = extractVariableDefaultValue(
+        manager,
+        definitionLayer
+      );
+      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
+      return {
+        ...variableLayer,
+        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index2) => {
+          const customItemValue = Array.isArray(customValue) ? customValue.at(index2) : null;
+          return deepMerge(
+            customItemValue ? { ...item, ...customItemValue } : item,
+            definitionDefaultValue
+          );
+        })
+      };
+    }
+    return variableLayer;
+  };
+  const readVariable = (variableKey2) => {
+    var _a, _b, _c;
+    const variableId = (_a = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
+    if (!isVariableLink$1(variableKey2)) {
+      return {
+        value: null,
+        layer: null
+      };
+    }
+    const instanceScope = scopes.findLast(
+      (scope) => {
+        var _a2;
+        return (scope == null ? void 0 : scope.type) === index.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
+      }
+    );
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey2
+    );
+    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index2) => {
+          var _a2;
+          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index2));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === index.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (isVariableLink$1(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return {
+      value: resultValue,
+      layer: variableLayer
+    };
+  };
+  const { layer, value } = readVariable(variableKey);
+  return {
+    value,
+    layer,
+    readVariable
+  };
+};
+const useLayerCssVariable = (inputValue) => {
+  const { manager } = useContext(FragmentContext);
+  const isVariable = isVariableLink$1(inputValue);
+  const [variableValue] = y(isVariable ? manager : null, inputValue, {
+    selector: (graph) => pick(graph, "defaultValue", "_id")
+  });
+  return {
+    value: isVariable ? `var(--${variableValue == null ? void 0 : variableValue._id}, ${variableValue == null ? void 0 : variableValue.defaultValue})` : null
+  };
+};
+const useLayerValue = (layerKey, fieldKey, options2) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = (options2 == null ? void 0 : options2.manager) ?? fragmentManager;
+  if (!resultManager) {
+    return [null, noop, {}];
+  }
+  const key = keyOfEntity(layerKey);
+  const [, updateLayerData] = y(resultManager, key, {
+    // selector: (data) => (data ? pick(data, fieldKey) : data),
+  });
+  const { layer, rawLayer } = useNormalizeLayer(key, resultManager, options2);
+  const rawValue = get(rawLayer, fieldKey);
+  const layerValue = get(layer, fieldKey);
+  const { value: variableValue } = useReadVariable(layerValue);
+  const currentValue = variableValue ?? layerValue;
+  const isInherit = isInheritField(resultManager, key, fieldKey);
+  const isOverride = !isInherit && !isPartOfPrimary(resultManager, key);
+  const setter = layerFieldSetter(resultManager, key, fieldKey, currentValue);
+  const resetOverride = useCallback(() => {
+    resultManager.mutate(
+      key,
+      (prev) => {
+        const r2 = omit(prev, fieldKey);
+        return r2;
+      },
+      { replace: true }
+    );
+  }, [updateLayerData]);
+  const restore = useCallback(
+    (fallbackValue) => {
+      var _a, _b, _c;
+      const tempValue = ((_c = (_b = resultManager.resolve((_a = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
+      updateLayerData({ [fieldKey]: tempValue });
+      return tempValue;
+    },
+    [updateLayerData, resultManager]
+  );
+  const updateValue = useCallback(
+    (value, options22) => {
+      setter(value, options22);
+    },
+    [setter]
+  );
+  const { value: cssValue } = useLayerCssVariable(rawValue ?? layerValue);
+  return [
+    currentValue,
+    updateValue,
+    {
+      isOverride,
+      resetOverride,
+      isVariable: isVariableLink$1(rawValue ?? layerValue),
+      cssVariableValue: cssValue ?? currentValue,
+      rawValue,
+      restore,
+      ...resultManager.entityOfKey(key)
+    }
+  ];
+};
+const processOptionalSize = (value, type) => {
+  if (value === -1) return "";
+  if (type === index.sizing.Fixed) return toPx(value);
+  if (type === index.sizing.Relative) return `${value}%`;
+  return "";
+};
+const useOptionalSize = (type, layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [value] = useLayerValue(layerKey, type, fragmentManager);
+  const [valueType] = useLayerValue(layerKey, `${type}Type`, fragmentManager);
+  return useMemo(
+    () => processOptionalSize(value, valueType),
+    [valueType, value]
+  );
+};
+const useLayerSize = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  const minWidth = useOptionalSize("minWidth", layerKey);
+  const minHeight = useOptionalSize("minHeight", layerKey);
+  const maxWidth = useOptionalSize("maxWidth", layerKey);
+  const maxHeight = useOptionalSize("maxHeight", layerKey);
+  return {
+    // width: widthCalc(widthValue),
+    // height: heightCalc(heightValue),
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight
+  };
+};
+const autoSizes = [index.sizing.Hug];
+const useLayerSizeValue = (layerKey, sizeType) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext);
+  const { isDocument, renderTarget: renderTarget2 } = useRenderTarget();
+  const isTop = isTopLevel(fragmentManager, layerKey);
+  const isPartOfInstance = !!instanceLayerKey;
+  const layerParent = getParent(fragmentManager, layerKey);
+  const { layer: normalizeParentLayer } = useNormalizeLayer(
+    layerParent,
+    fragmentManager
+  );
+  const layerNode = fragmentManager.resolve(layerKey);
+  const [instanceType] = useLayerValue(
+    instanceLayerKey,
+    `${sizeType}Type`,
+    fragmentManager
+  );
+  const [valueType] = useLayerValue(
+    layerKey,
+    `${sizeType}Type`,
+    fragmentManager
+  );
+  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
+  return useCallback(
+    (value) => {
+      if (isTop && isDocument && (normalizeParentLayer == null ? void 0 : normalizeParentLayer[growType]) === index.fragmentGrowingMode.fill) {
+        return "100%";
+      }
+      if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+        return "100%";
+      }
+      if (autoSizes.includes(valueType)) {
+        return layerNode._type === index.nodes.Instance ? "auto" : "min-content";
+      }
+      if (valueType === index.sizing.Relative) {
+        return `${value}%`;
+      }
+      if (valueType === index.sizing.Fill) {
+        return `100%`;
+      }
+      return toPx(value);
+    },
+    [
+      isTop,
+      isDocument,
+      layerParent,
+      growType,
+      isPartOfInstance,
+      instanceType,
+      valueType,
+      layerNode
+    ]
+  );
+};
+const useLayerPosition = (layerKey) => {
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext);
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { isDocument } = useRenderTarget();
+  const isTop = isTopLevel(fragmentManager, layerKey);
+  const [width] = useLayerValue(layerKey, "width");
+  const [height] = useLayerValue(layerKey, "height");
+  const widthCalc = useLayerSizeValue(layerKey, "width")(width);
+  const heightCalc = useLayerSizeValue(layerKey, "height")(height);
+  const [position] = useLayerValue(layerKey, "position");
+  const [centerAnchorX] = useLayerValue(layerKey, "centerAnchorX");
+  const [centerAnchorY] = useLayerValue(layerKey, "centerAnchorY");
+  const [top] = useLayerValue(layerKey, "top");
+  const [left] = useLayerValue(layerKey, "left");
+  const [right] = useLayerValue(layerKey, "right");
+  const [bottom] = useLayerValue(layerKey, "bottom");
+  const skipPosition = isTop && isDocument || !!instanceLayerKey && isTop;
+  if (isTop && !skipPosition) {
+    return {
+      position: index.positionType.absolute,
+      top: toPx(top),
+      left: toPx(left),
+      width,
+      height
+    };
+  }
+  if (position === index.positionType.relative || skipPosition) {
+    return {
+      position: index.positionType.relative,
+      width: widthCalc,
+      height: heightCalc
+    };
+  }
+  const hasConstrainX = isFiniteNumber(left) && isFiniteNumber(right);
+  const hasConstrainY = isFiniteNumber(top) && isFiniteNumber(bottom);
+  const hasAnyConstrainX = isFiniteNumber(left) || isFiniteNumber(right);
+  const hasAnyConstrainY = isFiniteNumber(top) || isFiniteNumber(bottom);
+  return {
+    position,
+    left: isFiniteNumber(left) ? toPx(left) : !isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
+    top: isFiniteNumber(top) ? toPx(top) : !isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
+    right: isFiniteNumber(right) ? toPx(right) : null,
+    bottom: isFiniteNumber(bottom) ? toPx(bottom) : null,
+    width: hasConstrainX ? null : widthCalc,
+    height: hasConstrainY ? null : heightCalc,
+    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
+  };
+};
+const useLayerBackground = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [fillType] = useLayerValue(layerKey, "fillType", fragmentManager);
+  const [, , { cssVariableValue: cssSolidFill }] = useLayerValue(
+    layerKey,
+    "solidFill",
+    fragmentManager
+  );
+  const [imageFill, , { cssVariableValue: cssImageFill }] = useLayerValue(
+    layerKey,
+    "imageFill",
+    fragmentManager
+  );
+  const [, , { cssVariableValue: cssImageSize }] = useLayerValue(
+    layerKey,
+    "imageSize",
+    fragmentManager
+  );
+  return useMemo(() => {
+    if (fillType === index.paintMode.Solid) {
+      return {
+        background: cssSolidFill
+      };
+    }
+    if (fillType === index.paintMode.Image && cssImageFill) {
+      return {
+        background: `url(${imageFill})`,
+        backgroundSize: cssImageSize == null ? void 0 : cssImageSize.toLowerCase(),
+        backgroundRepeat: "no-repeat"
+      };
+    }
+    return {
+      background: "transparent"
+    };
+  }, [fillType, cssImageFill, cssSolidFill]);
+};
+const useLayerDisplay = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  const [layerModeValue] = useLayerValue(layerKey, "layerMode", manager);
+  const [visible] = useLayerValue(layerKey, "visible", manager);
+  return useMemo(() => {
+    if (!visible) {
+      return "none";
+    }
+    return layerModeValue === index.layerMode.flex ? "flex" : null;
+  }, [layerModeValue, visible]);
+};
+const useCalcLayerBorder = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [borderTypeValue] = useLayerValue(
+    layerKey,
+    "borderType",
+    fragmentManager
+  );
+  return (width, color) => {
+    let value = {
+      borderTop: ``,
+      borderRight: ``,
+      borderBottom: ``,
+      borderLeft: ``
+    };
+    if (typeof borderTypeValue === "string" && borderTypeValue !== index.borderType.None) {
+      const staticPart = `${borderTypeValue.toLowerCase()} ${color}`;
+      const widthSides = width == null ? void 0 : width.split(" ");
+      if (widthSides.length === 1) {
+        const widthValue = widthSides == null ? void 0 : widthSides.at(0);
+        value = {
+          borderTop: `${widthValue} ${staticPart}`,
+          borderRight: `${widthValue} ${staticPart}`,
+          borderBottom: `${widthValue} ${staticPart}`,
+          borderLeft: `${widthValue} ${staticPart}`
+        };
+      } else {
+        value = {
+          borderTop: `${widthSides == null ? void 0 : widthSides.at(0)} ${staticPart}`,
+          borderRight: `${widthSides == null ? void 0 : widthSides.at(1)} ${staticPart}`,
+          borderBottom: `${widthSides == null ? void 0 : widthSides.at(2)} ${staticPart}`,
+          borderLeft: `${widthSides == null ? void 0 : widthSides.at(3)} ${staticPart}`
+        };
+      }
+    }
+    return value;
+  };
+};
+const useLayerBorder = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [borderWidth] = useLayerValue(layerKey, "borderWidth", fragmentManager);
+  const [borderColor] = useLayerValue(layerKey, "borderColor", fragmentManager);
+  const calcBorder = useCalcLayerBorder(layerKey);
+  return useMemo(
+    () => calcBorder(borderWidth, borderColor),
+    [borderWidth, borderColor]
+  );
+};
+const useLayerLayout = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [layerModeValue] = useLayerValue(
+    layerKey,
+    "layerMode",
+    fragmentManager
+  );
+  const [layerWrap] = useLayerValue(layerKey, "layerWrap", fragmentManager);
+  const [layerDistribute2] = useLayerValue(
+    layerKey,
+    "layerDistribute",
+    fragmentManager
+  );
+  const [layerDirectionValue] = useLayerValue(
+    layerKey,
+    "layerDirection",
+    fragmentManager
+  );
+  const [layerAlign2] = useLayerValue(layerKey, "layerAlign", fragmentManager);
+  const [padding] = useLayerValue(layerKey, "padding", fragmentManager);
+  const [gap] = useLayerValue(layerKey, "layerGap", fragmentManager);
+  const isFlex = layerModeValue === index.layerMode.flex;
+  return useMemo(
+    () => ({
+      display: isFlex ? "flex" : null,
+      gap: toPx(gap),
+      flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+      justifyContent: isFlex ? layerDistribute2 : null,
+      flexDirection: isFlex ? layerDirectionValue === index.layerDirection.vertical ? "column" : "row" : null,
+      alignItems: isFlex ? layerAlign2 : null,
+      padding: isFlex ? padding : null
+    }),
+    [
+      isFlex,
+      layerWrap,
+      layerDistribute2,
+      layerDirectionValue,
+      layerAlign2,
+      padding
+    ]
+  );
+};
+const useLayerTextStyles = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
+  const [color] = useLayerValue(layerKey, "attributes.color", fragmentManager);
+  const cleanAttributes = omit(attributes, "_id", "_type");
+  return {
+    ...cleanAttributes,
+    color
+  };
+};
+const useLayerStyles = (layerKey) => {
+  try {
+    if (!layerKey) {
+      throw new Error("Empty layer key");
+    }
+    const { manager: fragmentManager } = useContext(FragmentContext);
+    const [opacity] = useLayerValue(layerKey, "opacity", fragmentManager);
+    const layerSize = useLayerSize(layerKey);
+    const position = useLayerPosition(layerKey);
+    const display = useLayerDisplay(layerKey);
+    const background = useLayerBackground(layerKey);
+    const border = useLayerBorder(layerKey);
+    const layout = useLayerLayout(layerKey);
+    const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
+    const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
+    const [borderRadius] = useLayerValue(
+      layerKey,
+      "borderRadius",
+      fragmentManager
+    );
+    const [whiteSpace2] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
+    const textStyles = useLayerTextStyles(layerKey);
+    return {
+      // ...(props ?? {}),
+      ...border,
+      ...background,
+      ...position,
+      opacity,
+      rotate: isValue(rotate) ? `${rotate}deg` : null,
+      "border-radius": borderRadius,
+      "white-space": whiteSpace2,
+      "z-index": zIndex !== -1 ? zIndex : null,
+      ...layout,
+      ...layerSize,
+      ...textStyles,
+      display,
+      "user-select": "none"
+      // ...cssOverride,
+    };
+  } catch (e2) {
+    return {};
+  }
 };
 const useFragmentProperties = (fragmentId) => {
   var _a;
   const { manager } = useFragmentManager(fragmentId);
   const [instanceFragment] = y(manager, (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root);
-  return (instanceFragment == null ? void 0 : instanceFragment.properties) ?? [];
+  return {
+    properties: ((instanceFragment == null ? void 0 : instanceFragment.properties) ?? []).map((manager == null ? void 0 : manager.resolve) ?? noop).filter((prop) => !(prop == null ? void 0 : prop.parent)).map(keyOfEntity),
+    manager
+  };
 };
-const useRenderTarget = () => {
-  const globalManager = useGlobalManager();
-  const [globalManagerGraph] = y(globalManager, globalManager == null ? void 0 : globalManager.key);
-  const renderTargetValue = (globalManagerGraph == null ? void 0 : globalManagerGraph.renderTarget) ?? definition.renderTarget.canvas;
+const useHash = (layerKey, manager) => {
+  if (!layerKey || !manager) return null;
+  const layer = manager.resolve(layerKey);
+  const overrideFrom = getKey(layer == null ? void 0 : layer.overrideFrom);
+  return hashGenerator(overrideFrom ?? layerKey);
+};
+const useInstanceProps = (instanceProps) => {
+  const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
+  const { manager: loadedManager } = useFragmentManager(
+    isTopInstance ? instanceProps == null ? void 0 : instanceProps.fragmentId : null
+  );
+  const { manager: fragmentContextManager } = useContext(FragmentContext);
+  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
+  const definitionsData = S(innerFragmentManager, definitions);
+  const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
+  const [instanceLayer] = y(fragmentManager, instanceProps.layerKey);
+  const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
+  const mergedProps = useMemo(() => {
+    let base = instanceLayerProps;
+    if (isTopInstance && isObject(base) && isObject(instanceProps == null ? void 0 : instanceProps.props)) {
+      base = {
+        ...base,
+        ...instanceProps == null ? void 0 : instanceProps.props
+      };
+    }
+    if (isTopInstance && fragmentManager) {
+      definitionsData.forEach((definition2) => {
+        var _a;
+        const defId = definition2._id;
+        base[defId] = ((_a = instanceProps == null ? void 0 : instanceProps.props) == null ? void 0 : _a[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
+      });
+    }
+    return omit(base, "_type", "_id");
+  }, [isTopInstance, fragmentManager, instanceLayerProps, definitionsData]);
+  return {
+    props: mergedProps,
+    cssProps: getCssVariables(mergedProps)
+  };
+};
+const useLayerInteractions = (layerKey, options2) => {
+  const pause = (options2 == null ? void 0 : options2.pauseInteractions) ?? false;
+  const { manager: globalManager } = useGlobalManager();
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [interactions2] = useLayerValue(
+    layerKey,
+    "interactions",
+    fragmentManager
+  );
+  const { readVariable } = useReadVariable();
+  const fireEvent = useCallback(
+    (eventLink) => {
+      var _a, _b, _c, _d;
+      const event = fragmentManager.resolve(eventLink);
+      const { value: eventValue } = readVariable(eventLink);
+      if ((event == null ? void 0 : event.mode) === index.eventMode.goal && (eventValue == null ? void 0 : eventValue.code)) {
+        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, eventValue == null ? void 0 : eventValue.code);
+      }
+      if ((event == null ? void 0 : event.mode) === index.eventMode.tracker && eventValue) {
+        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.trackAdPixel) == null ? void 0 : _d.call(_c, eventValue);
+      }
+      if ((event == null ? void 0 : event.mode) === index.eventMode.callback && typeof eventValue === "function") {
+        eventValue();
+      }
+    },
+    [globalManager, fragmentManager]
+  );
+  useEffect(() => {
+    if (!pause && Array.isArray(interactions2)) {
+      interactions2 == null ? void 0 : interactions2.filter((el) => (el == null ? void 0 : el.on) === index.interactions.appear).map((el) => el.event).forEach(fireEvent);
+    }
+  }, [pause]);
+  return useMemo(() => {
+    if (!pause && !interactions2 || !Array.isArray(interactions2)) return {};
+    if (pause) return {};
+    const clickEvents = interactions2 == null ? void 0 : interactions2.filter((el) => (el == null ? void 0 : el.on) === index.interactions.click).map((el) => el.event);
+    return {
+      onClick: () => {
+        clickEvents.map(fireEvent);
+      }
+    };
+  }, [interactions2, fireEvent, pause]);
+};
+const useInstance = (instanceProps) => {
+  const { manager: parentManager } = useContext(FragmentContext);
+  const [instanceLayer] = y(parentManager, instanceProps.layerKey);
+  const styles2 = useLayerStyles(instanceProps.layerKey);
+  const events = useLayerInteractions(instanceProps.layerKey, instanceProps);
+  const { manager: resultGlobalManager } = useGlobalManager(
+    instanceProps == null ? void 0 : instanceProps.globalManager
+  );
+  const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
+  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
+  const { props, cssProps } = useInstanceProps(instanceProps);
+  const hash = useHash(instanceProps.layerKey, innerFragmentManager);
+  return {
+    hash,
+    styles: styles2,
+    events,
+    definitions,
+    props,
+    cssProps,
+    parentManager,
+    innerManager: innerFragmentManager,
+    fragmentId: resultFragmentId,
+    globalManager: resultGlobalManager
+  };
+};
+const InstanceContext = createContext({
+  layerKey: null,
+  parentManager: null,
+  innerManager: null,
+  props: {},
+  definitions: []
+});
+const useLayerChildren = (layerKey, customManager) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [layerData] = y(customManager ?? fragmentManager, layerKey, {
+    selector: (data) => pick(data, "children")
+  });
+  return (layerData == null ? void 0 : layerData.children) ?? [];
+};
+const useFragmentChildren = (fragmentId) => {
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext);
+  const { manager, fragmentLayerKey } = useFragmentManager(fragmentId);
+  const children = useLayerChildren(fragmentLayerKey, manager);
+  const { isDocument, renderTarget: renderTarget2 } = useRenderTarget();
+  const [resizeChildren, setResizeChildren] = useState(null);
+  useRef();
+  const setRef = useCallback(
+    (node) => {
+    },
+    [isDocument, instanceLayerKey, manager, children]
+  );
+  const primary = children == null ? void 0 : children.find(
+    (breakpoint) => {
+      var _a;
+      return (_a = manager.resolve(breakpoint)) == null ? void 0 : _a.isPrimary;
+    }
+  );
+  return {
+    primary,
+    children,
+    //isBrowser && resizeChildren ? resizeChildren : children, //isStyleSheetRender ? children ?? [] : primary ? [primary] : [],
+    isResize: isBrowser_default && resizeChildren,
+    setRef
+  };
+};
+const useStyleSheet = (manager) => {
+  var _a, _b;
+  const addLayerStyle = useCallback(
+    (layerKey, styles2, layer) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
+        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles2, layer);
+      }
+    },
+    [manager]
+  );
+  return {
+    addLayerStyle,
+    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? noop,
+    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
+  };
+};
+const useFragment = (fragmentId, globalManager) => {
+  var _a, _b;
+  const instanceContext = useContext(InstanceContext);
+  const fragmentContext = useFragmentManager(fragmentId);
+  const { isDocument } = useRenderTarget();
+  const { setRef, children, isResize, primary } = useFragmentChildren(fragmentId);
+  const hash = useHash(
+    fragmentContext.fragmentLayerKey,
+    fragmentContext.manager
+  );
+  const { properties: definitions } = useFragmentProperties(fragmentId);
+  const scopes = useContext(ScopeContext);
+  !(scopes == null ? void 0 : scopes.length);
+  const { addLayerStyle, mount, unmount } = useStyleSheet(
+    fragmentContext.manager
+  );
+  if (fragmentContext.manager) {
+    addLayerStyle(
+      fragmentContext.fragmentLayerKey,
+      {
+        width: "100%",
+        height: "100%",
+        "container-type": (children == null ? void 0 : children.length) === 1 ? "normal" : "inline-size"
+      },
+      (_a = fragmentContext.manager) == null ? void 0 : _a.resolve(fragmentContext.fragmentLayerKey),
+      (_b = fragmentContext.manager) == null ? void 0 : _b.key
+    );
+    mount();
+  }
+  useEffect(() => {
+    return () => {
+      unmount();
+    };
+  }, []);
+  return {
+    hash,
+    isDocument,
+    fragmentContext,
+    layerKey: fragmentContext.fragmentLayerKey,
+    isTopFragment: !instanceContext.layerKey,
+    setRef,
+    children,
+    isResize,
+    definitions
+  };
+};
+const useLayerLink = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [href] = useLayerValue(layerKey, "href", fragmentManager);
+  const [hrefNewTab] = useLayerValue(layerKey, "hrefNewTab", fragmentManager);
+  const isLink2 = isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
+  const linkTarget2 = hrefNewTab ? "_blank" : "";
+  const linkProps = useMemo(() => {
+    if (isLink2) {
+      return {
+        target: linkTarget2,
+        href
+      };
+    }
+    return {};
+  }, [linkTarget2, href, isLink2]);
+  return {
+    isLink: isLink2,
+    linkHref: href,
+    linkTarget: hrefNewTab ? "_blank" : "",
+    linkProps
+  };
+};
+const useFrame = (layerKey, options2) => {
+  const collectStyle = (options2 == null ? void 0 : options2.collectStyle) ?? true;
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const layer = fragmentManager.entityOfKey(layerKey);
+  const styles2 = useLayerStyles(layerKey);
+  const children = useLayerChildren(layerKey);
+  const hash = useHash(layerKey, fragmentManager);
+  const { addLayerStyle } = useStyleSheet(fragmentManager);
+  const events = useLayerInteractions(layerKey, options2);
+  const link = useLayerLink(layerKey);
+  if (collectStyle) {
+    addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
+  }
+  return {
+    Tag: (link == null ? void 0 : link.isLink) ? (options2 == null ? void 0 : options2.FrameTag) ?? "a" : (options2 == null ? void 0 : options2.FrameTag) ?? "div",
+    type: layer == null ? void 0 : layer._type,
+    hash,
+    styles: {},
+    //isBrowser ? pick(styles, "background") : {},
+    children,
+    events,
+    linkProps: link.linkProps
+  };
+};
+function extractVariablesFromHtml(html) {
+  if (!html) return [];
+  const regex = /<span(?=\s)(?=(?:[^>]*?\s)?class="[^"]*variable[^"]*")(?=(?:[^>]*?\s)?data-type="mention")(?=(?:[^>]*?\s)?data-id="([^"]+)")[^>]*>.*?<\/span>/gi;
+  const mentions = [];
+  let match;
+  while ((match = regex.exec(html)) !== null) {
+    mentions.push({
+      fullMatch: match[0],
+      dataId: match[1],
+      variableKey: keyOfEntity({
+        _type: index.nodes.Variable,
+        _id: match[1]
+      }),
+      position: match.index
+    });
+  }
+  return mentions;
+}
+const useTextContent = (layerKey, manager) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [content, , contentInfo] = useLayerValue(
+    layerKey,
+    "content",
+    fragmentManager
+  );
+  const variables = extractVariablesFromHtml(content);
+  const { readVariable } = useReadVariable();
+  S(
+    fragmentManager,
+    variables.map((variable) => variable.variableKey)
+  );
+  let nextContent = content;
+  variables.forEach((variable) => {
+    nextContent = nextContent.replace(
+      variable.fullMatch,
+      readVariable(variable.variableKey).value
+    );
+  });
+  return nextContent;
+};
+const useTextAttributes = (layerKey, options2) => {
+  const collectStyle = (options2 == null ? void 0 : options2.collectStyle) ?? true;
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const styles2 = useLayerStyles(layerKey);
+  const content = useTextContent(layerKey);
+  const hash = useHash(layerKey, fragmentManager);
+  const { addLayerStyle } = useStyleSheet(fragmentManager);
+  if (collectStyle) {
+    addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
+  }
+  return {
+    styles: styles2,
+    hash,
+    content
+  };
+};
+function useMounted() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+}
+const allowAttributes = [
+  "fontSize",
+  "fontWeight",
+  "color",
+  "lineHeight",
+  "letterSpacing",
+  "textTransform",
+  "textDecoration",
+  "textAlign"
+];
+const wrapTextInParagraphWithAttributes = (text2, attributes) => {
+  if (text2.startsWith("<p")) return text2;
+  const style = Object.entries(attributes).filter(
+    ([key, value]) => isValue(value) && allowAttributes.includes(key) && typeof value === "string" && !!value.length
+  ).map(([key, value]) => `${toKebabCase(key)}: ${value}`).join("; ");
+  return `<p style="${style}">${text2}</p>`;
+};
+const findBreakpoint = (breakpoints = [], width) => {
+  if (!(breakpoints == null ? void 0 : breakpoints.length)) return null;
+  const sortBreakpoints = breakpoints.toSorted((a2, b) => (a2 == null ? void 0 : a2.width) - (b == null ? void 0 : b.width));
+  return sortBreakpoints.reduce(
+    (prev, curr) => width >= curr.width ? curr : prev
+  );
+};
+const copyLayer = (manager, layer) => {
+  const layerGraph = manager.resolve(layer);
+  if (layerGraph) {
+    const layer2 = createLayer(
+      {
+        _type: layerGraph._type,
+        ...layerGraph
+      },
+      true
+    );
+    if ((layerGraph == null ? void 0 : layerGraph.children) && layer2) {
+      layer2.children = ((layerGraph == null ? void 0 : layerGraph.children) ?? []).map(
+        (child) => copyLayer(manager, child)
+      );
+    }
+    return layer2;
+  }
+  return null;
+};
+const getStylesheetKey = (fragmentKey) => {
+  const isLink2 = isLinkKey(fragmentKey);
+  if (isLink2) {
+    const [type, id] = fragmentKey.split(":");
+    return `stylesheet-${id}`;
+  }
+  return `stylesheet-${fragmentKey ?? "unknown"}`;
+};
+function useInjectedStyle() {
+  const { manager } = useContext(FragmentContext);
+  const injectStyle = () => {
+    var _a, _b;
+    const styles2 = (_b = (_a = manager == null ? void 0 : manager.$styleSheet.extract()) == null ? void 0 : _a.at(0)) == null ? void 0 : _b.styles;
+    if (isBrowser_default && styles2) {
+      const stylesheetKey = getStylesheetKey(manager == null ? void 0 : manager.key);
+      if (document.getElementById(stylesheetKey)) {
+        const el = document.getElementById(stylesheetKey);
+        if (el) el.remove();
+      }
+      const style = document.createElement("style");
+      style.id = stylesheetKey;
+      style.textContent = styles2.join("");
+      document.head.appendChild(style);
+    }
+  };
   return {
-    renderTarget: renderTargetValue,
-    isCanvas: renderTargetValue === definition.renderTarget.canvas,
-    isDocument: renderTargetValue === definition.renderTarget.document,
-    setRenderTarget: (target) => {
-      globalManager == null ? void 0 : globalManager.setRenderTarget(target);
+    injectStyle
+  };
+}
+const useLayerScopes = (fragmentManager, layerKey) => {
+  var _a, _b;
+  const layerParents = getAllParents(fragmentManager, layerKey);
+  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
+  layerParents.forEach((parent) => {
+    var _a2, _b2, _c, _d;
+    const parentLink = keyOfEntity(parent);
+    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
+      resultScopes.push((_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get(parentLink));
     }
+  });
+  return resultScopes;
+};
+function cssToJsStyle(cssKey) {
+  return cssKey.replace(/-([a-z])/g, (_2, letter) => letter.toUpperCase());
+}
+function cssStringToJsObject(cssString) {
+  const jsStyles = {};
+  const declarations = cssString.split(";");
+  declarations.forEach((decl) => {
+    if (!decl.trim()) return;
+    const [property, value] = decl.split(":").map((s2) => s2.trim());
+    if (!property || !value) return;
+    const jsProperty = cssToJsStyle(property);
+    jsStyles[jsProperty] = value;
+  });
+  return jsStyles;
+}
+const useLayerCssOverride = (layerKey) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const [cssOverride] = useLayerValue(layerKey, "cssOverride", fragmentManager);
+  return isValue(cssOverride) ? cssStringToJsObject(cssOverride) : {};
+};
+const StyleSheetContext = createContext(null);
+const StyleSheetProvider = StyleSheetContext.Provider;
+const useArea = (options2) => {
+  const { manager: resultGlobalManager, queryArea } = useGlobalManager(
+    options2 == null ? void 0 : options2.globalManager
+  );
+  const [areaData, setAreaData] = useState(queryArea(options2.areaCode));
+  useEffect(() => {
+    (async () => {
+      const response = await queryArea(options2.areaCode);
+      if (response) {
+        setAreaData(response);
+      }
+    })();
+  }, []);
+  return {
+    ...areaData,
+    globalManager: resultGlobalManager
   };
 };
-const Fragment = createReactComponent(Fragment$1);
-const Instance = createReactComponent(Instance$1);
+const useCollection = (layerKey, options2) => {
+  var _a;
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const frame = useFrame(layerKey, options2);
+  const children = useLayerChildren(layerKey, fragmentManager);
+  const [collectionLayer] = y(fragmentManager, layerKey, {
+    selector: (graph) => pick(graph, "source")
+  });
+  const source = collectionLayer == null ? void 0 : collectionLayer.source;
+  const sourceDefinition = (_a = fragmentManager == null ? void 0 : fragmentManager.resolve(source)) == null ? void 0 : _a.definition;
+  const [sourceValue] = useLayerValue(layerKey, "source", fragmentManager);
+  return {
+    source,
+    sourceDefinition,
+    sourceValue: sourceValue ?? [],
+    fragmentManager,
+    children,
+    ...frame
+  };
+};
+const text = "_text_1tdzv_1";
+const styles = {
+  text
+};
+const Text = ({
+  layerKey,
+  Tag = "div",
+  collectStyle,
+  ...restProps
+}) => {
+  const { hash, content } = useTextAttributes(layerKey, { collectStyle });
+  return /* @__PURE__ */ jsx(Tag, { className: hash, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.text,
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  ) });
+};
+const Scope = ({
+  value,
+  children,
+  fragmentManager,
+  layerKey
+}) => {
+  var _a, _b;
+  const currentScope = useContext(ScopeContext) ?? [];
+  const nextScope = [...currentScope, value];
+  (_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.registerScope) == null ? void 0 : _b.call(_a, layerKey, value);
+  return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: nextScope, children });
+};
+const Collection = ({
+  layerKey,
+  styles: inputStyles,
+  ...restProps
+}) => {
+  var _a;
+  const {
+    fragmentManager,
+    styles: styles2,
+    sourceDefinition,
+    hash,
+    source,
+    children,
+    sourceValue
+  } = useCollection(layerKey, restProps);
+  const FrameTag = (restProps == null ? void 0 : restProps.FrameTag) ?? "div";
+  const FrameElement = (restProps == null ? void 0 : restProps.FrameElement) ?? Frame;
+  const resultStyles = inputStyles ?? styles2;
+  return /* @__PURE__ */ jsx(
+    Scope,
+    {
+      fragmentManager,
+      layerKey,
+      value: {
+        type: definition.scopeTypes.CollectionScope,
+        source,
+        manager: fragmentManager
+      },
+      children: /* @__PURE__ */ jsx(
+        FrameTag,
+        {
+          className: hash,
+          "data-key": layerKey,
+          style: resultStyles,
+          ...restProps,
+          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (collectionItem, index2) => /* @__PURE__ */ jsx(
+            Scope,
+            {
+              fragmentManager,
+              layerKey: `${layerKey}.${index2}`,
+              value: {
+                type: definition.scopeTypes.CollectionItemScope,
+                source,
+                sourceDefinition,
+                value: collectionItem,
+                manager: fragmentManager
+              },
+              children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "contents",
+                    ...getCssVariables(collectionItem ?? {})
+                  },
+                  children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
+                },
+                child
+              ))
+            }
+          ))
+        }
+      )
+    }
+  );
+};
+const Frame = ({
+  layerKey,
+  styles: inputStyles,
+  hidden,
+  interactive,
+  ...restProps
+}) => {
+  const { styles: styles2, hash, children, type, events, linkProps, Tag } = useFrame(
+    layerKey,
+    {
+      ...restProps,
+      pauseInteractions: !interactive
+    }
+  );
+  const resultStyles = inputStyles ?? styles2;
+  const isMounted = useMounted();
+  if (isMounted && hidden) {
+    return /* @__PURE__ */ jsx("div", {});
+  }
+  if (type === definition.nodes.Collection) {
+    const Tag2 = (restProps == null ? void 0 : restProps.CollectionElement) ?? Collection;
+    return /* @__PURE__ */ jsx(Tag2, { layerKey, ...restProps });
+  }
+  if (type === definition.nodes.Text) {
+    const Tag2 = (restProps == null ? void 0 : restProps.TextElement) ?? Text;
+    return /* @__PURE__ */ jsx(Tag2, { layerKey, ...restProps });
+  }
+  if (type === definition.nodes.Instance) {
+    const Tag2 = (restProps == null ? void 0 : restProps.InstanceElement) ?? Instance;
+    return /* @__PURE__ */ jsx(Tag2, { layerKey, ...restProps });
+  }
+  const FrameElement = (restProps == null ? void 0 : restProps.FrameElement) ?? Frame;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: hash,
+      "data-key": layerKey,
+      style: {
+        ...resultStyles,
+        display: hidden ? "none" : resultStyles.display
+      },
+      ...events,
+      ...linkProps,
+      ...restProps,
+      children: children.map((childLink) => /* @__PURE__ */ jsx(FrameElement, { layerKey: childLink, ...restProps }, childLink))
+    }
+  );
+};
+const FragmentInternal = ({
+  fragmentId,
+  globalManager,
+  interactive,
+  collectStyle,
+  FrameElement = Frame
+}) => {
+  const {
+    children,
+    fragmentContext,
+    hash,
+    isResize,
+    isTopFragment,
+    definitions,
+    layerKey
+  } = useFragment(fragmentId);
+  if (!fragmentContext.manager) return null;
+  return (
+    // <Scope
+    //   fragmentManager={fragmentContext.manager}
+    //   layerKey={layerKey}
+    //   value={{
+    //     type: definition.scopeTypes.FragmentScope,
+    //     manager: fragmentContext.manager,
+    //     definitions,
+    //   }}
+    // >
+    /* @__PURE__ */ jsx("div", { "data-key": layerKey, className: hash, children: children.map((childLink) => {
+      var _a;
+      const childLayer = (_a = fragmentContext.manager) == null ? void 0 : _a.resolve(childLink);
+      const isPrimary = (childLayer == null ? void 0 : childLayer.isPrimary) ?? false;
+      return /* @__PURE__ */ jsx(
+        FrameElement,
+        {
+          layerKey: childLink,
+          interactive,
+          collectStyle,
+          hidden: !isResize && !isPrimary && !isTopFragment,
+          style: { display: isPrimary ? null : "none" }
+        },
+        childLink
+      );
+    }) })
+  );
+};
+const Fragment = (props) => {
+  const currentGlobalManager = useContext(GlobalManager);
+  const { manager: resultGlobalManager } = useGlobalManager(
+    props.globalManager
+  );
+  const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
+  const Base = /* @__PURE__ */ jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
+  if (!currentGlobalManager) {
+    return /* @__PURE__ */ jsx(GlobalManager.Provider, { value: resultGlobalManager, children: Base });
+  }
+  return Base;
+};
+const InstanceInitial = ({
+  Tag: inputTag,
+  style = {},
+  interactive = true,
+  FrameElement,
+  ...instanceProps
+}) => {
+  var _a, _b, _c;
+  const ssr = ((_a = instanceProps == null ? void 0 : instanceProps.options) == null ? void 0 : _a.ssr) ?? true;
+  const link = useLayerLink(instanceProps.layerKey);
+  const Tag = (link == null ? void 0 : link.isLink) ? inputTag ?? "a" : inputTag ?? "div";
+  const {
+    fragmentId,
+    cssProps,
+    parentManager,
+    events,
+    props,
+    hash,
+    innerManager,
+    definitions,
+    globalManager
+  } = useInstance({
+    ...instanceProps,
+    pauseInteractions: !interactive
+  });
+  if (ssr) {
+    (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadFragment) == null ? void 0 : _c.call(_b, fragmentId, { suspense: true });
+  }
+  return /* @__PURE__ */ jsx(
+    Scope,
+    {
+      fragmentManager: innerManager,
+      layerKey: instanceProps.layerKey,
+      value: {
+        type: definition.scopeTypes.InstanceScope,
+        props,
+        definitions,
+        fragmentId,
+        documentManager: innerManager,
+        layerKey: instanceProps.layerKey
+      },
+      children: /* @__PURE__ */ jsx(
+        InstanceContext.Provider,
+        {
+          value: {
+            layerKey: instanceProps.layerKey,
+            definitions,
+            innerManager,
+            parentManager,
+            props
+          },
+          children: parentManager ? /* @__PURE__ */ jsx(
+            Tag,
+            {
+              className: hash,
+              "data-key": instanceProps.layerKey,
+              style: { ...style, ...cssProps },
+              ...link.linkProps,
+              ...events,
+              children: /* @__PURE__ */ jsx(
+                Fragment,
+                {
+                  fragmentId,
+                  globalManager,
+                  FrameElement,
+                  interactive
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssProps }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+            Fragment,
+            {
+              fragmentId,
+              globalManager,
+              FrameElement,
+              interactive
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+const Instance = (props) => {
+  return "globalManager" in props ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("h1", { children: "Test" }), children: /* @__PURE__ */ jsx(GlobalManager, { value: props.globalManager, children: /* @__PURE__ */ jsx(InstanceInitial, { ...props }) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("h1", { children: "Test" }), children: /* @__PURE__ */ jsx(InstanceInitial, { ...props }) });
+};
+const isBrowser = typeof window !== "undefined";
+const AreaInitial = (areaProps) => {
+  var _a, _b, _c;
+  const { manager: globalManager } = useGlobalManager(areaProps == null ? void 0 : areaProps.globalManager);
+  const ssr = ((_a = areaProps == null ? void 0 : areaProps.options) == null ? void 0 : _a.ssr) ?? true;
+  if (isBrowser || ssr) {
+    (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadArea) == null ? void 0 : _c.call(_b, areaProps.areaCode, {
+      suspense: true
+    });
+  }
+  const areaData = useArea(areaProps);
+  if (!areaData) return null;
+  return /* @__PURE__ */ jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props });
+};
+const Area = (props) => {
+  return "globalManager" in props ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(GlobalManager, { value: props.globalManager, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) });
+};
 export {
+  Area,
+  Collection,
   Fragment,
+  FragmentContext,
+  Frame,
   GlobalManager,
   Instance,
+  InstanceContext,
+  RenderTargetContext,
+  RenderTargetProvider,
+  Scope,
+  ScopeContext,
+  StyleSheetContext,
+  StyleSheetProvider,
+  Text,
+  appendChildren,
+  J as cloneElement,
+  cloneLayer,
+  collectStyles,
+  copyLayer,
+  _ as createElement,
+  createLayer,
+  declareFragmentProperty,
+  duplicateLayer,
+  findBreakpoint,
+  getAllParents,
+  getCssVariables,
+  getNormalizeLayer,
+  getOverrider,
+  getParent,
+  _ as h,
+  G as hydrate,
+  insertChildren,
+  isInheritField,
+  isPartOfPrimary,
+  isRootLayer,
+  isTopLevel,
+  layerFieldSetter,
+  makeSnapshot,
+  moveChildren,
+  processOptionalSize,
+  removeChildren,
+  E as render,
+  useArea,
+  useCalcLayerBorder,
+  useCollection,
+  useFragment,
+  useFragmentChildren,
   useFragmentManager,
   useFragmentProperties,
+  useFrame,
   useGlobalManager,
-  useRenderTarget
+  useInjectedStyle,
+  useInstance,
+  useLayerChildren,
+  useLayerCssOverride,
+  useLayerDisplay,
+  useLayerLayout,
+  useLayerLink,
+  useLayerScopes,
+  useLayerSizeValue,
+  useLayerTextStyles,
+  useLayerValue,
+  useMounted,
+  useNormalizeLayer,
+  useReadVariable,
+  useRenderTarget,
+  useTextAttributes,
+  useTextContent,
+  wrapTextInParagraphWithAttributes
 };