@fragmentsx/render-react 0.0.5 → 1.1.0

package/dist/index.es.js

@@ -1,14 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import require$$0, { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo } from "react";
-import { isLinkKey } from "@graph-state/core";
+import require$$0, { createContext, useState, useEffect, useContext, useRef, useCallback, useMemo, Suspense } from "react";
 import { definition } from "@fragmentsx/definition";
+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;
-    const a = (_a = manager.extractStyleSheet()) == null ? void 0 : _a.at(0);
-    return a;
+    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",
@@ -18,7 +17,253 @@ const collectStyles = (globalManager) => {
     }
   ));
 };
-"function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout;
+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);
+    }
+  };
+}
+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);
+      });
+    }
+    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);
+  }
+  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 {
+      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;
+    }
+  }
+  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));
+  }
+  return t2;
+}
+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") {
@@ -26,8 +271,8 @@ const collectStyles = (globalManager) => {
       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 (e) {
-    console.error("vite-plugin-css-injected-by-js", e);
+  } catch (e2) {
+    console.error("vite-plugin-css-injected-by-js", e2);
   }
 })();
 const createConstants = (...constants) => {
@@ -40,6 +285,7 @@ const nodes = createConstants(
   "Fragment",
   "FragmentInstance",
   "Instance",
+  "Collection",
   "Breakpoint",
   "Frame",
   "Image",
@@ -52,14 +298,9 @@ const nodes = createConstants(
 );
 const fragmentGrowingMode = createConstants("auto", "fill");
 const borderType = createConstants("None", "Solid", "Dashed", "Dotted");
-const linkTarget = createConstants("_blank");
+const linkTarget = createConstants("_blank", "none");
 const paintMode = createConstants("None", "Solid", "Image");
-const imagePaintScaleModes = createConstants(
-  "Fill",
-  "Fit",
-  "Crop",
-  "Tile"
-);
+const imagePaintScaleModes = createConstants("Auto", "Contain", "Cover");
 const constrain = createConstants(
   "Min",
   "Center",
@@ -101,6 +342,7 @@ const effectName = createConstants(
 const variableType = createConstants(
   "Event",
   "String",
+  "Link",
   "Boolean",
   "Array",
   "Color",
@@ -108,6 +350,7 @@ const variableType = createConstants(
   "Date",
   "Enum",
   "Number",
+  "Image",
   "Object"
 );
 const whiteSpace = createConstants(
@@ -144,8 +387,14 @@ const variableTransforms = createConstants(
 );
 const renderTarget = createConstants("canvas", "document");
 const renderMode = createConstants("viewport", "parent", "fixed");
-const interactions = createConstants("click", "mouseover");
-const eventMode = createConstants("goal", "callback");
+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,
@@ -168,6 +417,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   positionType,
   renderMode,
   renderTarget,
+  scopeTypes,
   sizing,
   textDecorations,
   textTransform,
@@ -953,13 +1203,13 @@ const linkValidator = /* @__PURE__ */ check(
     return !!value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
   }
 );
-const isLink = (value) => {
+const isLink$1 = (value) => {
   var _a;
   return (_a = /* @__PURE__ */ safeParse(linkValidator, value)) == null ? void 0 : _a.success;
 };
-const isVariableLink = (value) => {
+const isVariableLink$1 = (value) => {
   var _a, _b;
-  return isLink(value) && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.at(0)) === nodes.Variable;
+  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;
@@ -967,9 +1217,17 @@ const getMetadata = (schema) => {
   return ((_a = pipelines == null ? void 0 : pipelines.find((pipe2) => /* @__PURE__ */ isOfKind("metadata", pipe2))) == null ? void 0 : _a.metadata) ?? null;
 };
 const layerField = (schema, meta) => {
-  const modifiedSchema = (meta == null ? void 0 : meta.variable) ? /* @__PURE__ */ union([schema, /* @__PURE__ */ pipe(/* @__PURE__ */ string(), linkValidator)]) : schema;
+  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(modifiedSchema),
+    /* @__PURE__ */ optional(/* @__PURE__ */ union(schemaParts)),
     /* @__PURE__ */ transform((meta == null ? void 0 : meta.transform) ?? ((v2) => v2)),
     /* @__PURE__ */ metadata(meta ?? {})
   );
@@ -992,8 +1250,28 @@ const PositionSchema = /* @__PURE__ */ object({
   position: layerField(/* @__PURE__ */ enum_(Object.keys(positionType)), {
     fallback: positionType.absolute
   }),
-  top: layerField(/* @__PURE__ */ number(), { fallback: 0, transform: Math.ceil }),
-  left: layerField(/* @__PURE__ */ number(), { fallback: 0, transform: Math.ceil })
+  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)), {
@@ -1001,6 +1279,7 @@ const SceneSchema = /* @__PURE__ */ object({
     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({
@@ -1010,14 +1289,22 @@ const FillSchema = /* @__PURE__ */ object({
   solidFill: layerField(/* @__PURE__ */ string(), { fallback: "#fff" }),
   imageFill: layerField(/* @__PURE__ */ string()),
   imageSize: layerField(/* @__PURE__ */ picklist(Object.keys(imagePaintScaleModes)), {
-    fallback: imagePaintScaleModes.Fill
+    fallback: imagePaintScaleModes.Auto
   })
 });
 const BorderSchema = /* @__PURE__ */ object({
   borderType: layerField(/* @__PURE__ */ picklist(Object.keys(borderType)), {
     fallback: borderType.None
   }),
-  borderWidth: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ minValue(0)), { fallback: 0 }),
+  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({
@@ -1100,6 +1387,15 @@ const InteractionsSchema = /* @__PURE__ */ object({
 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 }),
@@ -1120,6 +1416,7 @@ const FrameSchema = /* @__PURE__ */ pipe(
     ...LayerSchema.entries,
     ...InteractionsSchema.entries,
     ...CssOverrideSchema.entries,
+    ...LinkSchema.entries,
     overflow: OverflowSchema,
     borderRadius: BorderRadiusSchema
   })
@@ -1132,33 +1429,22 @@ const TextSchema = /* @__PURE__ */ object({
   whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
     fallback: whiteSpace.pre
   }),
-  variableContent: layerField(/* @__PURE__ */ string(), { fallback: null, variable: true }),
+  textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
   parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
-  attributes: layerField(
-    /* @__PURE__ */ object({
-      fontSize: layerField(/* @__PURE__ */ string(), { fallback: "14px" }),
-      color: layerField(/* @__PURE__ */ string(), { fallback: "#000" }),
-      lineHeight: layerField(/* @__PURE__ */ string(), { fallback: "14px" }),
-      fontWeight: layerField(/* @__PURE__ */ string(), { fallback: "normal" }),
-      letterSpacing: layerField(/* @__PURE__ */ string(), { fallback: "0px" }),
-      textTransform: layerField(/* @__PURE__ */ string(), { fallback: "none" }),
-      textDecoration: layerField(/* @__PURE__ */ string(), { fallback: "none" }),
-      whiteSpace: layerField(/* @__PURE__ */ string(), { fallback: "pre" }),
-      textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" })
-    }),
-    { fallback: {} }
-  ),
   ...GraphFieldSchema.entries,
   ...OverridesSchema.entries,
+  ...CssOverrideSchema.entries,
   ...PositionSchema.entries,
   ...SceneSchema.entries,
-  ...SizeSchema.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.auto,
+    fallback: fragmentGrowingMode.fill,
     overridable: false
   }),
   verticalGrow: layerField(/* @__PURE__ */ enum_(Object.keys(fragmentGrowingMode)), {
@@ -1198,13 +1484,17 @@ const InstanceSchema = /* @__PURE__ */ object({
   ...OverridesSchema.entries,
   ...PositionSchema.entries,
   ...SizeSchema.entries,
-  ...SceneSchema.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
   }),
@@ -1217,10 +1507,12 @@ const NumberVariableSchema = /* @__PURE__ */ object({
   ...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
   }),
@@ -1229,10 +1521,12 @@ const BooleanVariableSchema = /* @__PURE__ */ object({
   ...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
   }),
@@ -1242,6 +1536,7 @@ const ColorVariableSchema = /* @__PURE__ */ object({
   ...GraphFieldSchema.entries
 });
 const StringVariableSchema = /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
   name: layerField(/* @__PURE__ */ string(), {
     fallback: "String",
     overridable: false
@@ -1249,6 +1544,7 @@ const StringVariableSchema = /* @__PURE__ */ object({
   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: "" }),
@@ -1256,10 +1552,12 @@ const StringVariableSchema = /* @__PURE__ */ object({
   ...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
   }),
@@ -1270,28 +1568,141 @@ const EventVariableSchema = /* @__PURE__ */ object({
   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.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) return null;
+    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);
@@ -1300,35 +1711,62 @@ const normalizeLayer = (schema, rawLayer, options2) => {
         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;
-        const resultValue = parsedLayer[key] ?? overrideValue ?? fallback;
+        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 (e) {
-    console.error(e);
+  } catch (e2) {
+    console.error(e2);
     return null;
   }
 };
-const getNormalizeLayer$1 = (layer, overrider) => {
+const getNormalizeLayer$1 = (layer, overrider, withFallback) => {
   if (!layer) return null;
   const schema = getLayerSchema(layer);
   if (!schema) return null;
   return normalizeLayer(schema, layer, {
-    overrideTarget: overrider
+    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) => {
-  var _a, _b;
   const schema = getLayerSchema(layer);
-  if (schema && ((_a = schema == null ? void 0 : schema.entries) == null ? void 0 : _a[field])) {
-    return /* @__PURE__ */ safeParse((_b = schema.entries) == null ? void 0 : _b[field], value);
+  const fieldSchema = findSchemaByPath(schema, field);
+  if (fieldSchema) {
+    return /* @__PURE__ */ safeParse(fieldSchema, value);
   }
   return { success: false, output: value };
 };
 const RenderTargetContext = createContext(
   index.renderTarget.document
 );
-RenderTargetContext.Provider;
+const RenderTargetProvider = RenderTargetContext.Provider;
 const useRenderTarget = () => {
   const renderTarget2 = useContext(RenderTargetContext);
   return {
@@ -1337,70 +1775,73 @@ const useRenderTarget = () => {
     isDocument: renderTarget2 === index.renderTarget.document
   };
 };
-const FragmentContext = createContext({
-  manager: null
-});
 var withSelector = { exports: {} };
-var withSelector_production_min = {};
+var withSelector_production = {};
 var shim = { exports: {} };
-var useSyncExternalStoreShim_production_min = {};
+var useSyncExternalStoreShim_production = {};
 /**
  * @license React
- * use-sync-external-store-shim.production.min.js
+ * use-sync-external-store-shim.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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_min;
-function requireUseSyncExternalStoreShim_production_min() {
-  if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
-  hasRequiredUseSyncExternalStoreShim_production_min = 1;
-  var e = require$$0;
-  function h(a, b2) {
-    return a === b2 && (0 !== a || 1 / a === 1 / b2) || a !== a && b2 !== b2;
-  }
-  var k = "function" === typeof Object.is ? Object.is : h, l = e.useState, m = e.useEffect, n = e.useLayoutEffect, p = e.useDebugValue;
-  function q(a, b2) {
-    var d = b2(), f2 = l({ inst: { value: d, getSnapshot: b2 } }), c = f2[0].inst, g = f2[1];
-    n(function() {
-      c.value = d;
-      c.getSnapshot = b2;
-      r(c) && g({ inst: c });
-    }, [a, d, b2]);
-    m(function() {
-      r(c) && g({ inst: c });
-      return a(function() {
-        r(c) && g({ inst: c });
-      });
-    }, [a]);
-    p(d);
-    return d;
+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 r(a) {
-    var b2 = a.getSnapshot;
-    a = a.value;
+  function checkIfSnapshotChanged(inst) {
+    var latestGetSnapshot = inst.getSnapshot;
+    inst = inst.value;
     try {
-      var d = b2();
-      return !k(a, d);
-    } catch (f2) {
+      var nextValue = latestGetSnapshot();
+      return !objectIs(inst, nextValue);
+    } catch (error) {
       return true;
     }
   }
-  function t(a, b2) {
-    return b2();
+  function useSyncExternalStore$1(subscribe, getSnapshot) {
+    return getSnapshot();
   }
-  var u2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
-  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u2;
-  return useSyncExternalStoreShim_production_min;
+  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) Facebook, Inc. and its affiliates.
+ * 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.
@@ -1409,120 +1850,63 @@ 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 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);
-        }
-      }
-      function is(x, y2) {
-        return x === y2 && (x !== 0 || 1 / x === 1 / y2) || x !== x && y2 !== y2;
+  "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);
       }
-      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.");
-            }
-          }
-        }
-        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;
-            }
-          }
-        }
-        var _useState = useState2({
-          inst: {
-            value,
-            getSnapshot
-          }
-        }), inst = _useState[0].inst, forceUpdate = _useState[1];
-        useLayoutEffect(function() {
+      cachedValue = useState2({
+        inst: { value, getSnapshot }
+      });
+      var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
+      useLayoutEffect(
+        function() {
           inst.value = value;
           inst.getSnapshot = getSnapshot;
-          if (checkIfSnapshotChanged(inst)) {
-            forceUpdate({
-              inst
-            });
-          }
-        }, [subscribe, value, getSnapshot]);
-        useEffect2(function() {
-          if (checkIfSnapshotChanged(inst)) {
-            forceUpdate({
-              inst
-            });
-          }
-          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;
-        }
-      }
-      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());
+          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;
@@ -1530,7 +1914,7 @@ function requireShim() {
   if (hasRequiredShim) return shim.exports;
   hasRequiredShim = 1;
   if (process.env.NODE_ENV === "production") {
-    shim.exports = requireUseSyncExternalStoreShim_production_min();
+    shim.exports = requireUseSyncExternalStoreShim_production();
   } else {
     shim.exports = requireUseSyncExternalStoreShim_development();
   }
@@ -1538,70 +1922,81 @@ function requireShim() {
 }
 /**
  * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
+ * use-sync-external-store-shim/with-selector.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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_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, b2) {
-    return a === b2 && (0 !== a || 1 / a === 1 / b2) || a !== a && b2 !== b2;
-  }
-  var q = "function" === typeof Object.is ? Object.is : p, r = n.useSyncExternalStore, t = h.useRef, u2 = h.useEffect, v = h.useMemo, w = h.useDebugValue;
-  withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b2, e, l, g) {
-    var c = t(null);
-    if (null === c.current) {
-      var f2 = { hasValue: false, value: null };
-      c.current = f2;
-    } else f2 = c.current;
-    c = v(function() {
-      function a2(a3) {
-        if (!c2) {
-          c2 = true;
-          d2 = a3;
-          a3 = l(a3);
-          if (void 0 !== g && f2.hasValue) {
-            var b3 = f2.value;
-            if (g(b3, a3)) return k = b3;
+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;
           }
-          return k = a3;
+          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;
         }
-        b3 = k;
-        if (q(d2, a3)) return b3;
-        var e2 = l(a3);
-        if (void 0 !== g && g(b3, e2)) return b3;
-        d2 = a3;
-        return k = e2;
-      }
-      var c2 = false, d2, k, m = void 0 === e ? null : e;
-      return [function() {
-        return a2(b2());
-      }, null === m ? void 0 : function() {
-        return a2(m());
-      }];
-    }, [b2, e, l, g]);
-    var d = r(a, c[0], c[1]);
-    u2(function() {
-      f2.hasValue = true;
-      f2.value = d;
-    }, [d]);
-    w(d);
-    return d;
+        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_min;
+  return withSelector_production;
 }
 var withSelector_development = {};
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.development.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -1610,88 +2005,66 @@ 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, useMemo2 = 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;
-        }
-        var _useMemo = useMemo2(function() {
-          var hasMemo = false;
-          var memoizedSnapshot;
-          var memoizedSelection;
-          var memoizedSelector = function(nextSnapshot) {
+  "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;
-              var _nextSelection = selector(nextSnapshot);
-              if (isEqual !== void 0) {
-                if (inst.hasValue) {
-                  var currentSelection = inst.value;
-                  if (isEqual(currentSelection, _nextSelection)) {
-                    memoizedSelection = currentSelection;
-                    return currentSelection;
-                  }
-                }
+              nextSnapshot = selector(nextSnapshot);
+              if (void 0 !== isEqual && inst.hasValue) {
+                var currentSelection = inst.value;
+                if (isEqual(currentSelection, nextSnapshot))
+                  return memoizedSelection = currentSelection;
               }
-              memoizedSelection = _nextSelection;
-              return _nextSelection;
-            }
-            var prevSnapshot = memoizedSnapshot;
-            var prevSelection = memoizedSelection;
-            if (objectIs(prevSnapshot, nextSnapshot)) {
-              return prevSelection;
+              return memoizedSelection = nextSnapshot;
             }
+            currentSelection = memoizedSelection;
+            if (objectIs(memoizedSnapshot, nextSnapshot))
+              return currentSelection;
             var nextSelection = selector(nextSnapshot);
-            if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
-              return prevSelection;
-            }
+            if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+              return memoizedSnapshot = nextSnapshot, currentSelection;
             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() {
+            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;
-      }
-      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());
-      }
-    })();
-  }
+        },
+        [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;
@@ -1699,48 +2072,87 @@ function requireWithSelector() {
   if (hasRequiredWithSelector) return withSelector.exports;
   hasRequiredWithSelector = 1;
   if (process.env.NODE_ENV === "production") {
-    withSelector.exports = requireWithSelector_production_min();
+    withSelector.exports = requireWithSelector_production();
   } else {
     withSelector.exports = requireWithSelector_development();
   }
   return withSelector.exports;
 }
 var withSelectorExports = requireWithSelector();
-var b = (t) => t, y = (t, e, n) => {
+var x = (t2) => t2, y = (t2, e2, n2) => {
   var _a, _b;
-  let r = useRef((_a = t == null ? void 0 : t.resolve) == null ? void 0 : _a.call(t, e, n)), o = ((_b = t == null ? void 0 : t.keyOfEntity) == null ? void 0 : _b.call(t, e)) ?? e, p = useCallback((s) => {
+  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 o ? (r.current = (_a2 = t == null ? void 0 : t.resolve) == null ? void 0 : _a2.call(t, o, n), s(), (_b2 = t == null ? void 0 : t.subscribe) == null ? void 0 : _b2.call(t, o, () => {
+    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, o, n), s();
-    }, n)) : () => {
+      return r2.current = (_a3 = t2 == null ? void 0 : t2.resolve) == null ? void 0 : _a3.call(t2, s2, n2), p2();
+    }, n2)) : () => {
     };
-  }, [t, o]), i = useCallback((s, u2) => {
-    let c = typeof e == "string" ? e : t.keyOfEntity(e);
-    e && c && t.mutate(c, s, u2);
-  }, [t, e]), a = () => r.current;
-  return [withSelectorExports.useSyncExternalStoreWithSelector(p, a, a, b), i];
+  }, [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 = (a, b2) => {
-  for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp.call(b2, prop))
-      __defNormalProp(a, prop, b2[prop]);
+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(b2)) {
-      if (__propIsEnum.call(b2, prop))
-        __defNormalProp(a, prop, b2[prop]);
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a2, prop, b[prop]);
     }
-  return a;
+  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 toKebabCase = (value) => value.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase());
+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) => {
@@ -1755,22 +2167,109 @@ function omit(obj, ...props) {
   });
   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 i = 0; i < layerKey.length; i++) {
-    hash = (hash << 5) - hash + layerKey.charCodeAt(i);
+  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 getKey = (v) => isKey(v) ? v.slice(1) : null;
-const isKey = (v) => typeof v === "string" && v.startsWith("$");
-const getParent = (manager, layerKey) => {
+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 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(() => {
+    (async () => {
+      if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+        setLoading(true);
+        await queryFragmentManager(fragmentId);
+        setLoading(false);
+      }
+    })();
+  }, [fragmentId, fragmentsGraph]);
+  return {
+    loading,
+    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;
@@ -1789,6 +2288,89 @@ const isPartOfPrimary = (manager, 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);
@@ -1802,63 +2384,328 @@ const isInheritField = (manager, layerEntity, field) => {
   }
   return false;
 };
-const getLayer = (manager, layer) => {
+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);
+  return getNormalizeLayer$1(layerData, overrider, options2 == null ? void 0 : options2.withFallback);
 };
-const getNormalizeLayer = (layerKey, manager) => {
+const getNormalizeLayer = (layerKey, manager, options2) => {
   const layer = manager == null ? void 0 : manager.resolve(layerKey);
-  const parsedLayer = getLayer(manager, layerKey);
+  const parsedLayer = getLayer(manager, layerKey, options2);
   return {
     rawLayer: layer,
     layer: parsedLayer
   };
 };
-const useNormalizeLayer = (layerKey, manager) => {
+const useNormalizeLayer = (layerKey, manager, options2) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const resultManager = manager ?? fragmentManager;
-  return getNormalizeLayer(layerKey, resultManager);
+  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 isVariable = isVariableLink(variableKey);
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const { props, innerManager, layerKey } = useContext(InstanceContext);
-  const resultManager = innerManager ?? fragmentManager;
-  const { _id: propertyId } = (resultManager == null ? void 0 : resultManager.entityOfKey(variableKey)) ?? {};
-  const [variableLayer] = y(
-    isVariable ? fragmentManager : null,
-    variableKey,
-    {
-      selector: (graph) => graph ? pick(graph, "defaultValue", "required") : graph
+  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
+          );
+        })
+      };
     }
-  );
-  (props == null ? void 0 : props[propertyId]) ?? null;
-  (variableLayer == null ? void 0 : variableLayer.required) ?? false;
-  (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    return variableLayer;
+  };
   const readVariable = (variableKey2) => {
-    const isVariable2 = isVariableLink(variableKey2);
-    if (!isVariable2) {
+    var _a, _b, _c;
+    const variableId = (_a = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
+    if (!isVariableLink$1(variableKey2)) {
       return {
         value: null,
         layer: null
       };
     }
-    const variableLayer2 = pick(
-      (resultManager == null ? void 0 : resultManager.resolve(variableKey2)) ?? {},
-      "defaultValue",
-      "required"
+    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
     );
-    const { _id: propertyId2 } = (resultManager == null ? void 0 : resultManager.entityOfKey(variableKey2)) ?? {};
-    const currentValue2 = (props == null ? void 0 : props[propertyId2]) ?? null;
-    const required2 = (variableLayer2 == null ? void 0 : variableLayer2.required) ?? false;
-    const defaultValue2 = (variableLayer2 == null ? void 0 : variableLayer2.defaultValue) ?? null;
-    const resultValue2 = required2 ? currentValue2 : currentValue2 ?? defaultValue2;
+    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: resultValue2,
-      layer: variableLayer2
+      value: resultValue,
+      layer: variableLayer
     };
   };
   const { layer, value } = readVariable(variableKey);
@@ -1870,7 +2717,7 @@ const useReadVariable = (variableKey) => {
 };
 const useLayerCssVariable = (inputValue) => {
   const { manager } = useContext(FragmentContext);
-  const isVariable = isVariableLink(inputValue);
+  const isVariable = isVariableLink$1(inputValue);
   const [variableValue] = y(isVariable ? manager : null, inputValue, {
     selector: (graph) => pick(graph, "defaultValue", "_id")
   });
@@ -1878,25 +2725,30 @@ const useLayerCssVariable = (inputValue) => {
     value: isVariable ? `var(--${variableValue == null ? void 0 : variableValue._id}, ${variableValue == null ? void 0 : variableValue.defaultValue})` : null
   };
 };
-const useLayerValue = (layerKey, fieldKey, manager) => {
-  const resultManager = manager;
-  const key = layerKey;
+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
+    // selector: (data) => (data ? pick(data, fieldKey) : data),
   });
-  const { layer, rawLayer } = useNormalizeLayer(key, resultManager);
-  const rawValue = rawLayer == null ? void 0 : rawLayer[fieldKey];
-  const layerValue = layer == null ? void 0 : layer[fieldKey];
+  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(
-      layerKey,
+      key,
       (prev) => {
-        const r = omit(prev, fieldKey);
-        return r;
+        const r2 = omit(prev, fieldKey);
+        return r2;
       },
       { replace: true }
     );
@@ -1904,37 +2756,26 @@ const useLayerValue = (layerKey, fieldKey, manager) => {
   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[layerKey]) == null ? void 0 : _c[fieldKey];
-      updateLayerData({ [fieldKey]: tempValue ?? fallbackValue });
+      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, options2) => {
-      var _a, _b;
-      const { success, output } = parseLayerField(layer, fieldKey, value);
-      if (success) {
-        if (isVariableLink(value)) {
-          resultManager.mutate((_a = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a.temp, {
-            [layerKey]: {
-              [fieldKey]: currentValue
-            }
-          });
-          resultManager.resolve((_b = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _b.temp);
-        }
-        updateLayerData({ [fieldKey]: output }, options2);
-      }
+    (value, options22) => {
+      setter(value, options22);
     },
-    [layer, fieldKey, updateLayerData, resultManager, layerKey, currentValue]
+    [setter]
   );
-  const { value: cssValue } = useLayerCssVariable(rawValue);
+  const { value: cssValue } = useLayerCssVariable(rawValue ?? layerValue);
   return [
     currentValue,
     updateValue,
     {
       isOverride,
       resetOverride,
-      isVariable: isVariableLink(rawValue ?? layerValue),
+      isVariable: isVariableLink$1(rawValue ?? layerValue),
       cssVariableValue: cssValue ?? currentValue,
       rawValue,
       restore,
@@ -1942,14 +2783,48 @@ const useLayerValue = (layerKey, fieldKey, manager) => {
     }
   ];
 };
+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 } = useRenderTarget();
+  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,
@@ -1964,7 +2839,7 @@ const useLayerSizeValue = (layerKey, sizeType) => {
   const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
   return useCallback(
     (value) => {
-      if (isTop && isDocument && (layerParent == null ? void 0 : layerParent[growType]) === index.fragmentGrowingMode.fill) {
+      if (isTop && isDocument && (normalizeParentLayer == null ? void 0 : normalizeParentLayer[growType]) === index.fragmentGrowingMode.fill) {
         return "100%";
       }
       if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
@@ -1993,57 +2868,53 @@ const useLayerSizeValue = (layerKey, sizeType) => {
     ]
   );
 };
-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 [widthValue] = useLayerValue(layerKey, "width", manager);
-  const [heightValue] = useLayerValue(layerKey, "height", manager);
-  const widthCalc = useLayerSizeValue(layerKey, "width");
-  const heightCalc = useLayerSizeValue(layerKey, "height");
-  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 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;
-  const [position] = useLayerValue(layerKey, "position", fragmentManager);
-  const [top] = useLayerValue(layerKey, "top", fragmentManager);
-  const [left] = useLayerValue(layerKey, "left", fragmentManager);
-  return useMemo(
-    () => ({
-      position: skipPosition ? index.positionType.relative : position,
-      top: position === index.positionType.absolute && !skipPosition ? toPx(top) : null,
-      left: position === index.positionType.absolute && !skipPosition ? toPx(left) : null
-    }),
-    [skipPosition, position, top]
-  );
+  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);
@@ -2053,7 +2924,7 @@ const useLayerBackground = (layerKey) => {
     "solidFill",
     fragmentManager
   );
-  const [, , { cssVariableValue: cssImageFill }] = useLayerValue(
+  const [imageFill, , { cssVariableValue: cssImageFill }] = useLayerValue(
     layerKey,
     "imageFill",
     fragmentManager
@@ -2070,13 +2941,10 @@ const useLayerBackground = (layerKey) => {
       };
     }
     if (fillType === index.paintMode.Image && cssImageFill) {
-      const sizeMap = {
-        [index.imagePaintScaleModes.Fill]: "cover",
-        [index.imagePaintScaleModes.Fit]: "contain"
-      };
       return {
-        background: `url(${cssImageFill})`,
-        backgroundSize: sizeMap[cssImageSize]
+        background: `url(${imageFill})`,
+        backgroundSize: cssImageSize == null ? void 0 : cssImageSize.toLowerCase(),
+        backgroundRepeat: "no-repeat"
       };
     }
     return {
@@ -2103,9 +2971,31 @@ const useCalcLayerBorder = (layerKey) => {
     fragmentManager
   );
   return (width, color) => {
-    let value = "";
+    let value = {
+      borderTop: ``,
+      borderRight: ``,
+      borderBottom: ``,
+      borderLeft: ``
+    };
     if (typeof borderTypeValue === "string" && borderTypeValue !== index.borderType.None) {
-      value = `${toPx(width)} ${borderTypeValue.toLowerCase()} ${color}`;
+      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;
   };
@@ -2116,7 +3006,7 @@ const useLayerBorder = (layerKey) => {
   const [borderColor] = useLayerValue(layerKey, "borderColor", fragmentManager);
   const calcBorder = useCalcLayerBorder(layerKey);
   return useMemo(
-    () => ({ border: calcBorder(borderWidth, borderColor) }),
+    () => calcBorder(borderWidth, borderColor),
     [borderWidth, borderColor]
   );
 };
@@ -2162,8 +3052,17 @@ const useLayerLayout = (layerKey) => {
     ]
   );
 };
+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) => {
-  var _a;
   try {
     if (!layerKey) {
       throw new Error("Empty layer key");
@@ -2171,140 +3070,151 @@ const useLayerStyles = (layerKey) => {
     const { manager: fragmentManager } = useContext(FragmentContext);
     const [opacity] = useLayerValue(layerKey, "opacity", fragmentManager);
     const layerSize = useLayerSize(layerKey);
-    const { position, top, left } = useLayerPosition(layerKey);
+    const position = useLayerPosition(layerKey);
     const display = useLayerDisplay(layerKey);
     const background = useLayerBackground(layerKey);
-    const { border } = useLayerBorder(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);
-    let props = {};
-    const { _type } = fragmentManager.entityOfKey(layerKey) ?? {};
-    if (_type === index.nodes.Instance) {
-      const instanceProps = omit(
-        (_a = fragmentManager == null ? void 0 : fragmentManager.resolve(layerKey)) == null ? void 0 : _a.props,
-        "_id",
-        "_type"
-      );
-      props = Object.entries(instanceProps).reduce((acc, [key, value]) => {
-        acc[`--${key}`] = value;
-        return acc;
-      }, {});
-    }
+    const textStyles = useLayerTextStyles(layerKey);
     return {
-      ...props ?? {},
-      display,
-      border,
+      // ...(props ?? {}),
+      ...border,
       ...background,
-      position,
-      top,
-      left,
+      ...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 (e) {
-    console.debug(e);
+  } catch (e2) {
     return {};
   }
 };
-const GlobalManager$1 = createContext(null);
-const useGlobalManager = (globalManager) => {
-  var _a, _b;
-  const currentGlobalManager = useContext(GlobalManager$1);
-  const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = y(
-    resultManager,
-    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
-  );
-  const queryFragmentManager = async (id) => {
-    var _a2;
-    const queryResult = await ((_a2 = resultManager == null ? void 0 : resultManager.$fetch) == null ? void 0 : _a2.queryFragment(id));
-    const { document: document2, linkedFragments } = queryResult ?? {};
-    if (linkedFragments) {
-      linkedFragments.forEach(({ id: id2, document: document22 }) => {
-        resultManager.$fragments.createFragmentManager(id2, document22);
-      });
-    }
-    return resultManager.$fragments.createFragmentManager(id, document2);
-  };
-  const setRenderTarget = (value) => {
-    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
-  };
-  return {
-    fragmentsGraph,
-    manager: resultManager,
-    queryFragmentManager,
-    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? noop,
-    setRenderTarget
-  };
-};
-const useFragmentManager = (fragmentId, inputGlobalManager) => {
-  const {
-    fragmentsGraph,
-    manager: globalManager,
-    getFragmentManager,
-    queryFragmentManager
-  } = useGlobalManager(inputGlobalManager);
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    (async () => {
-      if (fragmentsGraph && !getFragmentManager(fragmentId)) {
-        setLoading(true);
-        await queryFragmentManager(fragmentId);
-        setLoading(false);
-      }
-    })();
-  }, [fragmentId, fragmentsGraph]);
-  return {
-    loading,
-    manager: getFragmentManager(fragmentId),
-    queryFragmentManager
-    // loadFragmentManager,
-  };
-};
 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 {
-    properties: (instanceFragment == null ? void 0 : instanceFragment.properties) ?? [],
+    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 useHash = (layerKey) => {
-  const { manager } = useContext(FragmentContext);
+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 instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
   const styles2 = useLayerStyles(instanceProps.layerKey);
+  const events = useLayerInteractions(instanceProps.layerKey, instanceProps);
   const { manager: resultGlobalManager } = useGlobalManager(
     instanceProps == null ? void 0 : instanceProps.globalManager
   );
-  const resultProps = { ...instanceLayerProps, ...instanceProps.props ?? {} };
   const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
-  const hash = useHash(instanceProps.layerKey);
+  const { props, cssProps } = useInstanceProps(instanceProps);
+  const hash = useHash(instanceProps.layerKey, innerFragmentManager);
   return {
     hash,
     styles: styles2,
+    events,
     definitions,
-    props: resultProps,
+    props,
+    cssProps,
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
@@ -2327,10 +3237,9 @@ const useLayerChildren = (layerKey, customManager) => {
 };
 const useFragmentChildren = (fragmentId) => {
   const { layerKey: instanceLayerKey } = useContext(InstanceContext);
-  const { manager } = useFragmentManager(fragmentId);
-  const layerKey = `${index.nodes.Fragment}:${fragmentId}`;
-  const children = useLayerChildren(layerKey, manager);
-  const { isDocument } = useRenderTarget();
+  const { manager, fragmentLayerKey } = useFragmentManager(fragmentId);
+  const children = useLayerChildren(fragmentLayerKey, manager);
+  const { isDocument, renderTarget: renderTarget2 } = useRenderTarget();
   const [resizeChildren, setResizeChildren] = useState(null);
   useRef();
   const setRef = useCallback(
@@ -2352,147 +3261,133 @@ const useFragmentChildren = (fragmentId) => {
     setRef
   };
 };
-const getStylesheetKey = (fragmentKey) => {
-  const isLink2 = isLinkKey(fragmentKey);
-  if (isLink2) {
-    const [type, id] = fragmentKey.split(":");
-    return `stylesheet-${id}`;
-  }
-  return `stylesheet-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 {
-    injectStyle
-  };
-}
-const useStyleSheet = () => {
-  const { manager } = useContext(FragmentContext);
-  const { injectStyle } = useInjectedStyle();
+const useStyleSheet = (manager) => {
+  var _a, _b;
   const addLayerStyle = useCallback(
     (layerKey, styles2, layer) => {
-      var _a;
-      if ("addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
-        (_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.addStyle(layerKey, styles2, layer);
-        if (isBrowser_default) {
-          injectStyle();
-        }
+      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
+    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) => {
-  const layerKey = `${index.nodes.Fragment}:${fragmentId}`;
-  const { manager } = useContext(FragmentContext);
+  var _a, _b;
+  const instanceContext = useContext(InstanceContext);
+  const fragmentContext = useFragmentManager(fragmentId);
   const { isDocument } = useRenderTarget();
-  const { setRef, children, isResize } = useFragmentChildren(fragmentId);
-  const hash = useHash(layerKey);
-  const { addLayerStyle } = useStyleSheet();
-  if (manager) {
+  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(
-      layerKey,
+      fragmentContext.fragmentLayerKey,
       {
         width: "100%",
         height: "100%",
         "container-type": (children == null ? void 0 : children.length) === 1 ? "normal" : "inline-size"
       },
-      manager == null ? void 0 : manager.resolve(layerKey),
-      manager == null ? void 0 : manager.key
+      (_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,
-    manager,
+    fragmentContext,
+    layerKey: fragmentContext.fragmentLayerKey,
+    isTopFragment: !instanceContext.layerKey,
     setRef,
     children,
-    isResize
+    isResize,
+    definitions
   };
 };
-const useLayerInteractions = (layerKey) => {
-  const { manager: globalManager } = useGlobalManager();
+const useLayerLink = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
-  const [interactions2] = useLayerValue(
-    layerKey,
-    "interactions",
-    fragmentManager
-  );
-  const { readVariable } = useReadVariable();
-  const fireEvent = useCallback(
-    (eventLink) => {
-      var _a, _b;
-      const event = fragmentManager.resolve(eventLink);
-      const { value: eventValue } = readVariable(eventLink);
-      if ((event == null ? void 0 : event.mode) === index.eventMode.goal) {
-        (_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);
-      }
-    },
-    [globalManager, fragmentManager]
-  );
-  return useMemo(() => {
-    if (!interactions2 || !Array.isArray(interactions2)) 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]);
+  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) => {
+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);
-  const { addLayerStyle } = useStyleSheet();
-  const events = useLayerInteractions(layerKey);
-  addLayerStyle(layerKey, styles2, fragmentManager.resolve(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
+    events,
+    linkProps: link.linkProps
   };
 };
-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>`;
-};
+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(
@@ -2500,22 +3395,33 @@ const useTextContent = (layerKey, manager) => {
     "content",
     fragmentManager
   );
-  const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
-  return useMemo(() => {
-    if (typeof content === "string" && isValue(attributes)) {
-      return wrapTextInParagraphWithAttributes(content, attributes);
-    }
-    return content;
-  }, [contentInfo, content, attributes]);
+  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) => {
+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);
-  const { addLayerStyle } = useStyleSheet();
-  addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
+  const hash = useHash(layerKey, fragmentManager);
+  const { addLayerStyle } = useStyleSheet(fragmentManager);
+  if (collectStyle) {
+    addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
+  }
   return {
+    styles: styles2,
     hash,
     content
   };
@@ -2530,150 +3436,524 @@ function useMounted() {
   }, []);
   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 {
+    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);
-StyleSheetContext.Provider;
-const Text = ({ layerKey }) => {
-  const { hash, content } = useTextAttributes(layerKey);
-  return /* @__PURE__ */ jsx("div", { className: hash, "data-key": layerKey, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: content } }) });
+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 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, hidden }) => {
-  const { styles, hash, children, type, events } = useFrame(layerKey);
+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 null;
+    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) {
-    return /* @__PURE__ */ jsx(Text, { layerKey });
+    const Tag2 = (restProps == null ? void 0 : restProps.TextElement) ?? Text;
+    return /* @__PURE__ */ jsx(Tag2, { layerKey, ...restProps });
   }
   if (type === definition.nodes.Instance) {
-    return /* @__PURE__ */ jsx(Instance, { layerKey });
+    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(
-    "div",
+    Tag,
     {
       className: hash,
       "data-key": layerKey,
-      style: { ...styles, display: hidden ? "none" : styles.display },
+      style: {
+        ...resultStyles,
+        display: hidden ? "none" : resultStyles.display
+      },
       ...events,
-      children: children.map((childLink) => /* @__PURE__ */ jsx(Frame, { layerKey: childLink }, childLink))
+      ...linkProps,
+      ...restProps,
+      children: children.map((childLink) => /* @__PURE__ */ jsx(FrameElement, { layerKey: childLink, ...restProps }, childLink))
     }
   );
 };
-const FragmentInternal = ({ fragmentId, globalManager }) => {
-  const { children, manager, hash, isResize } = useFragment(
-    fragmentId
-  );
-  if (!manager) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-key": `${definition.nodes.Fragment}:${fragmentId}`,
-      className: hash,
-      children: children.map((childLink) => {
-        const childLayer = manager == null ? void 0 : manager.resolve(childLink);
-        const isPrimary = (childLayer == null ? void 0 : childLayer.isPrimary) ?? false;
-        return /* @__PURE__ */ jsx(
-          Frame,
-          {
-            layerKey: childLink,
-            hidden: !isResize && !isPrimary
-          },
-          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 { manager: resultGlobalManager } = useGlobalManager();
+  const currentGlobalManager = useContext(GlobalManager);
+  const { manager: resultGlobalManager } = useGlobalManager(
+    props.globalManager
+  );
   const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
-  return /* @__PURE__ */ jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
-};
-const isBrowser = typeof window !== "undefined";
-const loadFragmentManager = async (globalManager, fragmentId) => {
-  var _a;
-  const { document: document2, linkedFragments } = await ((_a = globalManager == null ? void 0 : globalManager.queryFragment) == null ? void 0 : _a.call(
-    globalManager,
-    fragmentId
-  ));
-  if (fragmentId && document2) {
-    if (linkedFragments) {
-      linkedFragments.forEach(({ id, document: document22 }) => {
-        globalManager == null ? void 0 : globalManager.createFragmentManager(id, document22);
-      });
-    }
-    return globalManager == null ? void 0 : globalManager.createFragmentManager(fragmentId, document2);
+  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 null;
+  return Base;
 };
-function createResource(resourceCache, key, fetcher) {
-  if (resourceCache.has(key)) return resourceCache.get(key);
-  let status = "pending";
-  let result;
-  const suspender = fetcher().then(
-    (r) => {
-      status = "success";
-      result = r;
-    },
-    (e) => {
-      status = "error";
-      result = e;
-    }
-  );
-  const resource = {
-    read() {
-      if (status === "pending") throw suspender;
-      if (status === "error") throw result;
-      return result;
-    }
-  };
-  resourceCache.set(key, resource);
-  return resource;
-}
-const InstanceInitial = (instanceProps) => {
+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);
-  if (!isBrowser) {
-    if (globalManager && !("resourceCache" in globalManager)) {
-      globalManager.resourceCache = /* @__PURE__ */ new Map();
-    }
-    const resource = createResource(
-      globalManager.resourceCache,
-      fragmentId,
-      () => loadFragmentManager(globalManager, fragmentId)
-    );
-    resource.read();
+  } = 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(
-    InstanceContext.Provider,
+    Scope,
     {
+      fragmentManager: innerManager,
+      layerKey: instanceProps.layerKey,
       value: {
-        layerKey: instanceProps.layerKey,
+        type: definition.scopeTypes.InstanceScope,
+        props,
         definitions,
-        innerManager,
-        parentManager,
-        props
+        fragmentId,
+        documentManager: innerManager,
+        layerKey: instanceProps.layerKey
       },
-      children: parentManager ? /* @__PURE__ */ jsx("div", { className: hash, "data-key": instanceProps.layerKey, children: /* @__PURE__ */ jsx(Fragment, { fragmentId, globalManager }) }) : /* @__PURE__ */ jsx(Fragment, { fragmentId, globalManager })
+      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(GlobalManager$1, { value: props.globalManager, children: /* @__PURE__ */ jsx(InstanceInitial, { ...props }) }) : /* @__PURE__ */ jsx(InstanceInitial, { ...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 GlobalManager = ({ children, value }) => {
-  return /* @__PURE__ */ jsx(GlobalManager$1, { value, children });
+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,
-  useGlobalManager
+  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,
+  useInjectedStyle,
+  useInstance,
+  useLayerChildren,
+  useLayerCssOverride,
+  useLayerDisplay,
+  useLayerLayout,
+  useLayerLink,
+  useLayerScopes,
+  useLayerSizeValue,
+  useLayerTextStyles,
+  useLayerValue,
+  useMounted,
+  useNormalizeLayer,
+  useReadVariable,
+  useRenderTarget,
+  useTextAttributes,
+  useTextContent,
+  wrapTextInParagraphWithAttributes
 };