@fragmentsx/client-core 0.0.1 → 0.1.0

package/dist/index.cjs.js

@@ -1,421 +1,636 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var t = (e) => !e && e == null, s = (e) => !t(e), y = (e) => typeof e == "object" && !Array.isArray(e) && s(e), a = (e) => typeof Node == "object" ? e instanceof Node : e && typeof e == "object" && typeof e.nodeType == "number" && typeof e.nodeName == "string", p = (e) => typeof e == "string" || n(e), n = (e) => typeof e == "object" && typeof e._type == "string", r = (e) => typeof e == "string" && e.split(":").length >= 2, i = (e) => typeof e != "object" && typeof e != "function" || e === null, b = (e) => typeof e == "string" ? /<\/?[a-z][\s\S]*>/i.test(e) : false;
-var G = (t2) => r(t2), te = (t2) => p(t2), ne = (t2) => n(t2), S = (t2) => y(t2), re = (t2, s2) => {
-  if (t2 === s2) return true;
-  if (Array.isArray(t2) && Array.isArray(s2)) return t2.length === s2.length && t2.every((a2, h) => s2[h] === a2);
-  if (!S(t2) || !S(s2)) return false;
-  let p2 = Object.keys(t2), c = Object.keys(s2);
-  if (p2.length !== c.length) return false;
-  for (let a2 of p2) {
-    if (!c.includes(a2)) return false;
-    let h = t2[a2], l = s2[a2];
-    if (i(h) && i(l) && h !== l) return false;
+var r = (e) => !e && e == null, y = (e) => !r(e), a = (e) => typeof e == "object" && !Array.isArray(e) && y(e), f = (e) => typeof Node == "object" ? e instanceof Node : e && typeof e == "object" && typeof e.nodeType == "number" && typeof e.nodeName == "string", i = (e) => typeof e == "string" || t(e), t = (e) => typeof e == "object" && typeof e._type == "string", s = (e) => typeof e == "string" && e.split(":").length >= 2, l = (e) => typeof e != "object" && typeof e != "function" || e === null, g = (e) => typeof e == "string" ? /<\/?[a-z][\s\S]*>/i.test(e) : false, u = (e) => (n) => {
+  var _a;
+  if (!n) return false;
+  let o = null;
+  return s(n) && (o = (_a = n.split(":")) == null ? void 0 : _a[0]), t(n) && (o = n._type), o ? !e.includes(o) : false;
+};
+var isLinkKey = (input) => s(input);
+var isGraphOrKey = (input) => i(input);
+var isGraph = (input) => t(input);
+var isObject$1 = (input) => a(input);
+var shallowEqual = (a2, b) => {
+  if (a2 === b)
+    return true;
+  if (Array.isArray(a2) && Array.isArray(b)) {
+    return a2.length === b.length && a2.every((val, index2) => b[index2] === val);
+  }
+  if (!isObject$1(a2) || !isObject$1(b))
+    return false;
+  const keysA = Object.keys(a2);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (const key of keysA) {
+    if (!keysB.includes(key))
+      return false;
+    const aValue = a2[key];
+    const bValue = b[key];
+    if (l(aValue) && l(bValue) && aValue !== bValue)
+      return false;
   }
   return true;
-}, W = (t2, s2) => {
-  if (t2 === s2) return true;
-  if (Array.isArray(t2) && Array.isArray(s2)) return t2.length === s2.length && t2.every((a2, h) => W(a2, s2[h]));
-  if (!S(s2) || !S(t2)) return t2 === s2;
-  let p2 = Object.keys(t2), c = Object.keys(s2);
-  if (p2.length !== c.length) return false;
-  for (let a2 of p2) if (!c.includes(a2) || !W(t2[a2], s2[a2])) return false;
+};
+var deepEqual = (a2, b) => {
+  if (a2 === b)
+    return true;
+  if (Array.isArray(a2) && Array.isArray(b)) {
+    return a2.length === b.length && a2.every((val, i2) => deepEqual(val, b[i2]));
+  }
+  if (!isObject$1(b) || !isObject$1(a2))
+    return a2 === b;
+  const keysA = Object.keys(a2);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (const key of keysA) {
+    if (!keysB.includes(key))
+      return false;
+    if (!deepEqual(a2[key], b[key]))
+      return false;
+  }
   return true;
 };
-var z = (...t2) => Array.from(new Set(t2)), se = (...t2) => t2.filter((s2, p2, c) => r(s2) ? c.indexOf(s2) === p2 : true);
-var I = (t2) => t2 && t2.split(".").length > 1, Y = (t2, s2) => {
-  if (!t2 || !s2) return false;
-  if (typeof t2 != "string" || typeof s2 != "string") return null;
-  let [p2, c] = t2.split(":"), [a2, h] = s2.split(":");
-  return p2 !== a2 ? false : c.startsWith(h);
-}, ie = (t2) => G(t2) && I(t2) ? t2.split(".")[0] : t2;
-var oe = () => {
-  let t2 = /* @__PURE__ */ new Map(), s2 = /* @__PURE__ */ new Map(), p2 = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), a2 = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Set([]), O = (n2, g) => {
+var unique = (...values) => Array.from(new Set(values));
+var uniqueLinks = (...values) => values.filter((item, index2, arr) => s(item) ? arr.indexOf(item) === index2 : true);
+var isPartialKey = (key) => key && key.split(".").length > 1;
+var isPartialGraph = (entity) => {
+  if (isObject$1(entity) && "_id" in entity && typeof entity._id === "string") {
+    return entity._id.includes(".");
+  }
+  return false;
+};
+var isPartOfGraph = (entityKey, graphKey) => {
+  if (!entityKey || !graphKey)
+    return false;
+  if (typeof entityKey !== "string" || typeof graphKey !== "string")
+    return null;
+  const [entityType, entityId] = entityKey.split(":");
+  const [graphType, graphId] = graphKey.split(":");
+  if (entityType !== graphType)
+    return false;
+  return entityId.startsWith(graphId);
+};
+var getGraphLink = (input) => {
+  if (isLinkKey(input)) {
+    if (isPartialKey(input)) {
+      return input.split(".")[0];
+    }
+  }
+  return input;
+};
+var createCache = () => {
+  const listeners = /* @__PURE__ */ new Map();
+  const types2 = /* @__PURE__ */ new Map();
+  const links = /* @__PURE__ */ new Map();
+  const parentRefs = /* @__PURE__ */ new Map();
+  const childrenRefs = /* @__PURE__ */ new Map();
+  const refCount = /* @__PURE__ */ new Map();
+  const gbLinks = /* @__PURE__ */ new Set([]);
+  const addRefs = (targetKey, depKey) => {
     var _a;
-    c.set(n2, z(...c.get(n2) || [], g)), a2.set(g, z(...a2.get(g) ?? [], n2)), M(n2, ((_a = c.get(n2)) == null ? void 0 : _a.length) || 0);
-  }, q = (n2, g) => {
+    parentRefs.set(targetKey, unique(...parentRefs.get(targetKey) || [], depKey));
+    childrenRefs.set(depKey, unique(...childrenRefs.get(depKey) ?? [], targetKey));
+    updateRefCountForLink(targetKey, ((_a = parentRefs.get(targetKey)) == null ? void 0 : _a.length) || 0);
+  };
+  const removeRefs = (targetKey, depKey) => {
     var _a;
-    c.set(g, (c.get(g) || []).filter((k) => k !== n2)), a2.set(n2, (a2.get(n2) ?? []).filter((k) => k !== g)), M(g, ((_a = c.get(g)) == null ? void 0 : _a.length) || 0);
-  }, T = (n2, g = []) => {
-    let k = c.get(n2) || [];
-    g.push(...k);
-    let x = k.map((E) => T(E, g)).flat();
-    return g.push(...x), Array.from(new Set(g).values());
-  }, V = (n2) => {
-    M(n2, 0), B();
-  }, P = (n2) => n2 ? p2.get(n2) : null, R = (n2, g, k) => {
+    parentRefs.set(
+      depKey,
+      (parentRefs.get(depKey) || []).filter((key) => key !== targetKey)
+    );
+    childrenRefs.set(
+      targetKey,
+      (childrenRefs.get(targetKey) ?? []).filter((key) => key !== depKey)
+    );
+    updateRefCountForLink(depKey, ((_a = parentRefs.get(depKey)) == null ? void 0 : _a.length) || 0);
+  };
+  const getLinkedRefs = (key, stack = []) => {
+    const deps = parentRefs.get(key) || [];
+    stack.push(...deps);
+    const deepDeps = deps.map((ref) => getLinkedRefs(ref, stack)).flat();
+    stack.push(...deepDeps);
+    return Array.from(new Set(stack).values());
+  };
+  const invalidate = (key) => {
+    updateRefCountForLink(key, 0);
+    runGarbageCollector();
+  };
+  const readLink = (key) => {
+    if (key) {
+      return links.get(key);
+    }
+    return null;
+  };
+  const writeLink = (key, value, depKey) => {
     var _a;
-    if (typeof n2 == "string") {
-      p2.set(n2, g);
-      let [x] = n2.split(":");
-      I(n2) || (s2.has(x) ? (_a = s2.get(x)) == null ? void 0 : _a.add(n2) : s2.set(x, /* @__PURE__ */ new Set([n2])));
-    }
-    k && n2 && n2 !== k && O(n2, k);
-  }, _ = (n2) => n2 ? p2.has(n2) : false, M = (n2, g) => {
-    if (Array.isArray(n2)) n2.forEach((k, x) => M(k, x));
-    else {
-      let k = h.get(n2);
-      h.set(n2, g), g ? !k && g && l.delete(n2) : l.add(n2);
-    }
-  }, $ = () => Array.from(p2.entries()), j = (n2) => h.get(n2) ?? 0, B = () => {
+    if (typeof key === "string") {
+      links.set(key, value);
+      const [type] = key.split(":");
+      if (!isPartialKey(key)) {
+        if (!types2.has(type)) {
+          types2.set(type, /* @__PURE__ */ new Set([key]));
+        } else {
+          (_a = types2.get(type)) == null ? void 0 : _a.add(key);
+        }
+      }
+    }
+    if (depKey && key && key !== depKey) {
+      addRefs(key, depKey);
+    }
+  };
+  const hasLink = (key) => {
+    if (key) {
+      return links.has(key);
+    }
+    return false;
+  };
+  const updateRefCountForLink = (link, count) => {
+    if (Array.isArray(link)) {
+      link.forEach((link2, index2) => updateRefCountForLink(link2, index2));
+    } else {
+      const prevCount = refCount.get(link);
+      refCount.set(link, count);
+      if (!count) {
+        gbLinks.add(link);
+      } else if (!prevCount && count) {
+        gbLinks.delete(link);
+      }
+    }
+  };
+  const getLinkEntries = () => Array.from(links.entries());
+  const getRefCount = (link) => refCount.get(link) ?? 0;
+  const runGarbageCollector = () => {
     var _a, _b;
-    for (let n2 of l.keys()) {
-      if (j(n2) > 0) continue;
-      let k = p2.get(n2);
-      l.delete(n2), p2.delete(n2), h.delete(n2);
-      let x = c.get(n2) ?? [], E = a2.get(n2) ?? [];
-      x.forEach((A) => {
+    for (const link of gbLinks.keys()) {
+      const count = getRefCount(link);
+      if (count > 0)
+        continue;
+      const currentValue = links.get(link);
+      gbLinks.delete(link);
+      links.delete(link);
+      refCount.delete(link);
+      const parents = parentRefs.get(link) ?? [];
+      const children = childrenRefs.get(link) ?? [];
+      parents.forEach((parentKey) => {
         var _a2, _b2;
-        a2.set(A, ((_b2 = (_a2 = a2.get(A)) == null ? void 0 : _a2.filter) == null ? void 0 : _b2.call(_a2, (U) => U !== n2)) ?? []);
-      }), E.forEach((A) => {
-        M(A, j(A) - 1);
+        childrenRefs.set(parentKey, ((_b2 = (_a2 = childrenRefs.get(parentKey)) == null ? void 0 : _a2.filter) == null ? void 0 : _b2.call(_a2, (childLink) => childLink !== link)) ?? []);
+      });
+      children.forEach((childKey) => {
+        updateRefCountForLink(childKey, getRefCount(childKey) - 1);
       });
-      let [C] = n2.split(":");
-      I(n2) || ((_a = s2.get(C)) == null ? void 0 : _a.delete(n2), ((_b = s2.get(C)) == null ? void 0 : _b.size) || s2.delete(C)), c.delete(n2), (t2.get("onRemoveLink") ?? []).forEach((A) => A(n2, k ?? null));
+      const [type] = link.split(":");
+      if (!isPartialKey(link)) {
+        (_a = types2.get(type)) == null ? void 0 : _a.delete(link);
+        if (!((_b = types2.get(type)) == null ? void 0 : _b.size)) {
+          types2.delete(type);
+        }
+      }
+      parentRefs.delete(link);
+      (listeners.get("onRemoveLink") ?? []).forEach((listener) => listener(link, currentValue ?? null));
     }
   };
-  return { readLink: P, writeLink: R, hasLink: _, getLinkEntries: $, parentRefs: c, childrenRefs: a2, addRefs: O, removeRefs: q, getChildren: (n2) => a2.get(n2), getParents: (n2) => c.get(n2), getLinkedRefs: T, invalidate: V, links: p2, types: s2, refCount: h, runGarbageCollector: B, onRemoveLink: (n2) => t2.set("onRemoveLink", [...(t2 == null ? void 0 : t2.get("onRemoveLink")) ?? [], n2]) };
+  return {
+    readLink,
+    writeLink,
+    hasLink,
+    getLinkEntries,
+    parentRefs,
+    childrenRefs,
+    addRefs,
+    removeRefs,
+    getChildren: (key) => childrenRefs.get(key),
+    getParents: (key) => parentRefs.get(key),
+    getLinkedRefs,
+    invalidate,
+    links,
+    types: types2,
+    refCount,
+    runGarbageCollector,
+    onRemoveLink: (callback) => listeners.set("onRemoveLink", [...(listeners == null ? void 0 : listeners.get("onRemoveLink")) ?? [], callback])
+  };
 };
-var J = (...t2) => {
+var joinKeys = (...keys) => {
   var _a;
-  return (_a = t2 == null ? void 0 : t2.filter(Boolean)) == null ? void 0 : _a.join(".");
-};
-var ae = process.env.NODE_ENV !== "production";
-var ce = (t2 = []) => {
-  let s2 = [], p2 = (a2) => {
-    s2.push(a2);
-  }, c = (a2) => s2.reduce((h, l) => l(h) ?? h, a2);
-  return t2.forEach(p2), { use: p2, runPlugins: c };
-};
-var le = (t2) => t2 && S(t2) ? ["_id", "_type", "key", "mutate", "resolve"].every((p2) => p2 in t2) : false;
-var ue = () => {
-  let t2 = /* @__PURE__ */ new Set();
-  return { debug: (c) => {
-    t2.forEach((a2) => {
-      a2({ ...c, timestamp: Date.now() });
-    });
-  }, onDebugEvent: (c) => {
-    t2.add(c);
-  } };
+  return (_a = keys == null ? void 0 : keys.filter(Boolean)) == null ? void 0 : _a.join(".");
 };
-var pe = () => Math.random().toString(16).slice(2);
-var De = 0, Se = 100, Ge = "State", fe = "$EACH:ROOT$", it = (t2) => {
-  let s$1 = (t2 == null ? void 0 : t2._id) ?? `${De++}`, p2 = (t2 == null ? void 0 : t2._type) ?? Ge, c = (t2 == null ? void 0 : t2.keys) ?? {}, a2 = `${p2}:${s$1}`, h = [le, ...(t2 == null ? void 0 : t2.skip) ?? []], l = oe(), O = ue(), q = ce(t2 == null ? void 0 : t2.plugins), T = /* @__PURE__ */ new Map(), V = 0, P = (e) => h.some((r2) => r2(e)), R = (e, r2) => {
-    let i2 = (r2 == null ? void 0 : r2.deep) ?? false, o = (r2 == null ? void 0 : r2.safe) ?? false, f = (r2 == null ? void 0 : r2.keepLinks) ?? false, { selector: m, ...d } = r2 || {}, y2 = s(e) ? E(e) : null;
-    O.debug({ type: "resolve", entity: e, options: r2 });
-    let u = y2 ? l.readLink(y2) : null;
-    return P(u) ? u : ((S(u) || Array.isArray(u)) && (u = Object.entries(u).reduce((L, [w, v]) => {
-      let K = v;
-      return P(K) || (Array.isArray(v) ? (K = v.map((D) => P(D) ? D : G(D) && !o && !l.hasLink(D) ? null : Y(D, y2) && !f || i2 ? _(D, d) : D), o || (K = K.filter(s))) : G(v) && !o && !l.hasLink(v) ? K = null : (Y(E(v), y2) && !f || i2) && (K = _(v, d))), L[w] = K, L;
-    }, {})), u ? m ? m({ ...u }) : { ...u } : o ? e : null);
-  }, _ = (e, r2) => R(e, r2) ?? e, M = (e) => {
-    let r2 = E(e);
-    r2 && (l.getChildren(r2) || []).forEach((o) => {
-      I(o) || l.removeRefs(r2, o);
-    });
-  }, $ = (e, r2, i$1) => {
-    var _a, _b, _c, _d;
-    if ((!e || i(e)) && !G(e) || P(e)) return e;
-    let o = te(e) ? E(e) : e;
-    if (G(o)) {
-      let y2 = ie(r2) ?? "", u = ((_a = i$1 == null ? void 0 : i$1.internal) == null ? void 0 : _a.visitors.get(y2)) ?? [], L = ((_b = i$1 == null ? void 0 : i$1.internal) == null ? void 0 : _b.visitors.get(o)) ?? [];
-      if (u.includes(o) || o === y2) return null;
-      (_d = (_c = i$1 == null ? void 0 : i$1.internal) == null ? void 0 : _c.visitors) == null ? void 0 : _d.set(o, [...L, y2]);
-    }
-    if (Array.isArray(e)) return e.map((y2) => {
-      let u = r2 ? J(r2, `${pe()}`) : void 0;
-      return $(y2, u, i$1);
-    });
-    let m = (G(e) ? e : ne(e) ? E(e) : null) ?? r2;
-    return ((i$1 == null ? void 0 : i$1.overrideMutateMethod) || j)(m, e, i$1);
-  }, j = (e, ...r2) => {
-    let { graphKey: i2, options: o, data: f } = A(e, ...r2);
-    O.debug({ type: "beforeMutate", entity: i2, data: f, options: o });
-    let m = G(f) ? C(f) : f, d = i2 ?? a2, y2 = I == null ? void 0 : I(d), u = o == null ? void 0 : o.parent, L = R(d ?? ""), w = (o == null ? void 0 : o.internal) || { hasChange: false, visitors: /* @__PURE__ */ new Map([]) }, v = { ...m, ...C(d) }, K = !(o == null ? void 0 : o.parent), D = (o == null ? void 0 : o.replace) ? typeof (o == null ? void 0 : o.replace) == "function" ? o.replace(v) : (o == null ? void 0 : o.replace) === "deep" ? true : K || y2 : false;
-    if (P(m)) return l.writeLink(d, m, u), d;
-    !D && S(L) && S(v) && (v = { ...L, ...v }), D && M(d);
-    let Q = Object.entries(v).reduce((X, [N, de]) => {
-      let Z = J(d, N), b2 = de, F = L == null ? void 0 : L[N], he = S(m) && N in m;
-      P(b2) || (!D && he && Array.isArray(b2) && Array.isArray(F) && (b2 = [...F, ...b2]), (S(b2) || Array.isArray(b2) || G(b2)) && (b2 = $(b2, Z, { ...o, parent: d, internal: w })), Array.isArray(b2) && (o == null ? void 0 : o.dedup) !== false && (b2 = se(...b2)));
-      let me = re(F, Z === b2 ? _(b2) : b2);
-      return w.hasChange = w.hasChange || !me, !D && G(F) && F !== b2 && l.removeRefs(d, F), X[N] = b2, X;
-    }, {});
-    return l.writeLink(d, Q, u), u || l.runGarbageCollector(), (w.hasChange || D) && n2(d, L), O.debug({ type: "afterMutate", entity: i2, data: f, nextData: Q, options: o, hasChange: w.hasChange }), d;
-  }, B = (e) => {
-    let r2 = E(e);
-    if (O.debug({ type: "invalidate", entity: r2 }), r2) {
-      let i2 = l.getParents(r2) || [];
-      l.invalidate(r2), i2.forEach((o) => {
-        let f = l.readLink(o), m = R(o, { safe: false, keepLinks: true });
-        l.writeLink(o, m), n2(o, f);
-      });
-    }
-  }, n2 = (e, r2) => {
-    if (V > Se) throw new Error("Too deep notify.");
-    let i2 = E(e);
-    if (O.debug({ type: "notify", entity: i2 }), i2) {
-      V++;
-      let o = [...T.get(i2) || [], ...T.get(fe) || []], f = l.getChildren(i2) || [], m = R(i2), d = (y2) => {
-        let u = m && (y2 == null ? void 0 : y2(m)), L = r2 && (y2 == null ? void 0 : y2(r2));
-        return { next: u, prev: L, hasChange: !W(u, L) };
-      };
-      o.forEach(({ callback: y2, selector: u }) => {
-        if (u) {
-          let { next: L, prev: w, hasChange: v } = d(u);
-          v && y2(L, w);
-        } else y2(m, r2);
-      }), f.forEach((y2) => n2(y2, r2));
-    }
-    V = 0;
-  }, g = (...e) => {
-    let r2 = typeof e[0] == "function" ? fe : e[0], i2 = typeof e[0] == "function" ? e[0] : e[1], o = typeof e[0] == "function" ? e[1] : e[2], f = E(r2), m = o == null ? void 0 : o.selector;
-    f && (T.has(f) ? T.set(f, [...Array.from(T.get(f) || []), { callback: i2, selector: m }]) : T.set(f, [{ callback: i2, selector: m }]), l.onRemoveLink((y2, u) => {
-      y2 === f && n2(f, u);
-    }));
-    let d = () => {
-      if (f) {
-        let y2 = (T.get(f) || []).findIndex((u) => u.callback === i2);
-        if (y2 !== -1) {
-          let u = T.get(f) || [];
-          u.splice(y2, 1), T.set(f, u);
-        }
-      }
-    };
-    return (o == null ? void 0 : o.signal) && o.signal.addEventListener("abort", d, { once: true }), d;
-  }, k = (e) => [...l.types.get(e) ?? []], x = (e) => {
-    let r2 = (typeof e == "string" ? e : E(e)) || "";
-    return (l.getParents(r2) ?? []).map((o) => R(o));
-  }, E = (e) => {
-    var _a;
-    if (typeof e == "string") return C(e) ? e : null;
-    if (!(e == null ? void 0 : e._type)) return null;
-    let r2 = null;
-    return e._type in c ? r2 = ((_a = c[e._type]) == null ? void 0 : _a.call(c, e)) ?? null : (s(e.id) || s(e._id)) && (r2 = `${e.id ?? e._id}`), r2 && `${e._type}:${r2}`;
-  }, C = (e) => {
-    if (S(e) && (e == null ? void 0 : e._type) && E(e)) return e;
-    if (!e || typeof e != "string") return null;
-    let [r2, ...i2] = e.split(":");
-    return !r2 || i2.length < 1 ? null : { _type: r2, _id: i2.join(":") };
-  }, A = (e, ...r2) => {
-    let i2 = typeof e == "string" ? r2[0] : e;
-    return typeof i2 == "function" ? i2 = i2(R(e)) : G(i2) && (i2 = C(i2)), { graphKey: typeof e == "string" ? e : E(e), options: typeof e == "string" ? r2[1] : r2[0], data: i2 };
-  };
-  function U(e) {
-    q.use(e), e(this);
-  }
-  let ye = (e) => {
-    h.push(e);
+var isDev = process.env.NODE_ENV !== "production";
+var createPluginsState = (initialPlugins = []) => {
+  const plugins = [];
+  const use = (plugin) => {
+    plugins.push(plugin);
+  };
+  const runPlugins = (state) => {
+    return plugins.reduce((graphState, plugin) => plugin(graphState) ?? graphState, state);
+  };
+  initialPlugins.forEach(use);
+  return {
+    use,
+    runPlugins
   };
-  (t2 == null ? void 0 : t2.initialState) && j(t2.initialState, { replace: true });
-  let ge = { _type: p2, _id: s$1, key: a2, mutate: j, subscribe: g, resolve: R, safeResolve: _, resolveParents: x, inspectFields: k, invalidate: B, keyOfEntity: E, entityOfKey: C, getArgumentsForMutate: A, types: l.types, cache: l, use: U, addSkip: ye, subscribers: ae ? T : void 0, onDebugEvent: O.onDebugEvent };
-  return l.onRemoveLink((e, r2) => O.debug({ type: "garbageRemove", entity: e, prevValue: r2 })), q.runPlugins(ge);
 };
-const BASE_HEADERS = {
-  "Content-Type": "application/json"
+var isGraphState = (input) => {
+  if (!input)
+    return false;
+  if (isObject$1(input)) {
+    const fields = ["_id", "_type", "key", "mutate", "resolve"];
+    return fields.every((field) => field in input);
+  }
+  return false;
 };
-const createFetcher = (baseUrl, defaultHeaders = {}) => {
-  const cache = /* @__PURE__ */ new Map();
-  const inflightRequests = /* @__PURE__ */ new Map();
-  const getCacheKey = (query2, variables, options) => JSON.stringify({ query: query2, variables, options });
-  const query = async (query2, variables = {}, options = {}) => {
-    const cacheKey = getCacheKey(query2, variables, options);
-    if (cache.has(cacheKey)) {
-      return cache.get(cacheKey);
-    }
-    if (inflightRequests.has(cacheKey)) {
-      return inflightRequests.get(cacheKey);
-    }
-    const request = fetch(baseUrl, {
-      ...options,
-      method: "POST",
-      body: JSON.stringify({ query: query2, variables }),
-      headers: {
-        ...BASE_HEADERS,
-        ...defaultHeaders,
-        ...options.headers
-      }
-    }).then(async (res) => {
-      if (!res.ok) throw new Error(`Fetch error: ${res.status}`);
-      const data = await res.json();
-      if (!query2.includes("mutation")) {
-        cache.set(cacheKey, data);
-      }
-      return data;
-    }).finally(() => {
-      inflightRequests.delete(cacheKey);
+var createDebugState = () => {
+  const listeners = /* @__PURE__ */ new Set();
+  const onDebugEvent = (callback) => {
+    listeners.add(callback);
+  };
+  const debug = (event) => {
+    listeners.forEach((callback) => {
+      callback({ ...event, timestamp: Date.now() });
     });
-    inflightRequests.set(cacheKey, request);
-    return request;
   };
-  const invalidate = (endpoint, options) => {
-    cache.delete(getCacheKey(endpoint, options));
+  return {
+    debug,
+    onDebugEvent
   };
-  const clearCache = () => cache.clear();
-  return { query, invalidate, clearCache };
 };
-const getFragmentQuery = (isSelf) => isSelf ? `
-query FragmentDocument($fragmentSlug: Int!) {
-    fragment(fragmentIds: [$fragmentSlug]) {
-        id
-        document
-        linkedFragments {
-            id
-            document
-        }
-    }
-}
-` : `
-query FragmentDocument($fragmentSlug: Int!) {
-    clientFragment(fragmentId: $fragmentSlug) {
-        id
-        document
-        linkedFragments {
-            id
-            document
-        }
-    }
+var cache = /* @__PURE__ */ new Set();
+var wrapMessage = (message) => `[GraphState]: ${message}`;
+function warn(message) {
+  if (!cache.has(message)) {
+    console.warn(wrapMessage(message));
+    cache.add(message);
+  }
 }
-`;
-var isEmptyValue = (value) => !value && (value === null || value === void 0);
-var isValue = (value) => !isEmptyValue(value);
-var createConstants$1 = (...constants) => {
-  return constants.reduce((acc, constant) => {
-    acc[constant] = constant;
-    return acc;
-  }, {});
+var keyOfEntity = (entity) => {
+  if (typeof entity === "string") {
+    return entityOfKey(entity) ? entity : null;
+  }
+  if (!(entity == null ? void 0 : entity._type)) {
+    return null;
+  }
+  let entityId = null;
+  if (y(entity.id) || y(entity._id)) {
+    entityId = `${entity.id ?? entity._id}`;
+  }
+  return !entityId ? entityId : `${entity._type}:${entityId}`;
 };
-var isBrowser_default = typeof window !== "undefined";
-var generateId = () => Math.random().toString(16).slice(2);
-var setKey = (v) => `$${v}`;
-var getKey = (v) => isKey(v) ? v.slice(1) : null;
-var isKey = (v) => typeof v === "string" && v.startsWith("$");
-function hashGenerator(layerKey) {
-  let hash = 0;
-  for (let i2 = 0; i2 < layerKey.length; i2++) {
-    hash = (hash << 5) - hash + layerKey.charCodeAt(i2);
-    hash |= 0;
+var entityOfKey = (entity) => {
+  if (isObject$1(entity) && (entity == null ? void 0 : entity._type) && keyOfEntity(entity)) {
+    return entity;
   }
-  const raw = Math.abs(hash).toString(36);
-  return /^[0-9]/.test(raw) ? `h${raw}` : raw;
-}
-const getEmptyFragment = (fragmentId) => {
-  const layerId = generateId();
+  if (!entity || typeof entity !== "string")
+    return null;
+  const [typeName, ...restTypes] = entity.split(":");
+  if (!typeName || restTypes.length < 1)
+    return null;
   return {
-    [`Fragment:${fragmentId}`]: {
-      _type: "Fragment",
-      _id: fragmentId,
-      children: [`Frame:${layerId}`],
-      layoutSizingHorizontal: "Fixed",
-      layoutSizingVertical: "Fixed",
-      horizontalGrow: "auto",
-      verticalGrow: "auto",
-      renderMode: "parent",
-      opacity: 1,
-      visible: true,
-      overflow: "hidden",
-      overrides: [],
-      properties: ["Variable:62218c840bd111"]
-    },
-    [`Frame:${layerId}`]: {
-      _type: "Frame",
-      _id: layerId,
-      opacity: 1,
-      parent: setKey(`Fragment:${fragmentId}`),
-      visible: true,
-      overflow: "visible",
-      children: [],
-      width: 320,
-      height: 200,
-      layoutSizingHorizontal: "Fixed",
-      layoutSizingVertical: "Fixed",
-      fillType: "Solid",
-      positionType: "absolute",
-      solidFill: "rgba(255, 255, 255, 1)",
-      name: "Frame",
-      isPrimary: true,
-      threshold: 320
-    }
+    _type: typeName,
+    _id: restTypes.join(":")
   };
 };
-const fetchBeacon = (baseUrl) => {
-  const sender = isBrowser_default && typeof (navigator == null ? void 0 : navigator.sendBeacon) === "function" ? navigator.sendBeacon : () => null;
-  const sendBeacon = (data) => {
-    try {
-      sender("/graphql", "test");
-    } catch (e) {
-      console.error(e);
+function omit(obj, ...props) {
+  const result = { ...obj };
+  props.forEach((prop) => {
+    delete result[prop];
+  });
+  return result;
+}
+var ID = 0;
+var DEEP_LIMIT = 100;
+var STATE_TYPE = "State";
+var EACH_UPDATED = "$EACH:ROOT$";
+var createState = (options) => {
+  const id = (options == null ? void 0 : options._id) ?? `${ID++}`;
+  const type = (options == null ? void 0 : options._type) ?? STATE_TYPE;
+  const stateKey = `${type}:${id}`;
+  const skipPredictors = [isGraphState, ...(options == null ? void 0 : options.skip) ?? []];
+  const cache2 = createCache();
+  const debugState = createDebugState();
+  const pluginsStore = createPluginsState(options == null ? void 0 : options.plugins);
+  const subscribers = /* @__PURE__ */ new Map();
+  let deepIndex = 0;
+  const isSkipped = (entity) => {
+    return skipPredictors.some((predictor) => predictor(entity));
+  };
+  const getReferences = (entity, options2) => {
+    const withPartialKeys = (options2 == null ? void 0 : options2.withPartialKeys) ?? false;
+    const key = keyOfEntity2(entity);
+    if (!key)
+      return [];
+    const values = cache2.getParents(key) ?? [];
+    return values.filter((v) => withPartialKeys ? !isPartialKey(v) : v);
+  };
+  const resolve = (input, options2) => {
+    const isDeep = (options2 == null ? void 0 : options2.deep) ?? false;
+    const isSafe = (options2 == null ? void 0 : options2.safe) ?? false;
+    const keepLinks = (options2 == null ? void 0 : options2.keepLinks) ?? false;
+    const removeLinkFromSubGraph = (options2 == null ? void 0 : options2.removeLinkFromSubGraph) ?? true;
+    const { selector, ...coreOptions } = options2 || {};
+    const inputKey = y(input) ? keyOfEntity2(input) : null;
+    debugState.debug({ type: "resolve", entity: input, options: options2 });
+    let value = inputKey ? cache2.readLink(inputKey) : null;
+    if (isSkipped(value))
+      return value;
+    if (isObject$1(value) || Array.isArray(value)) {
+      value = Object.entries(value).reduce((acc, [key, value2]) => {
+        let resultValue = value2;
+        if (!isSkipped(resultValue)) {
+          if (Array.isArray(value2)) {
+            resultValue = value2.map((v) => {
+              if (isSkipped(v))
+                return v;
+              if (isLinkKey(v) && !isSafe && !cache2.hasLink(v)) {
+                return null;
+              }
+              return isPartOfGraph(v, inputKey) && !keepLinks || isDeep ? safeResolve(v, coreOptions) : v;
+            });
+            if (!isSafe) {
+              resultValue = resultValue.filter(y);
+            }
+          } else {
+            if (isLinkKey(value2) && !isSafe && !cache2.hasLink(value2)) {
+              resultValue = null;
+            } else if (isPartOfGraph(keyOfEntity2(value2), inputKey) && !keepLinks || isDeep) {
+              resultValue = safeResolve(value2, coreOptions);
+            }
+          }
+        }
+        acc[key] = isPartialGraph(resultValue) && removeLinkFromSubGraph ? omit(resultValue, "_type", "_id") : resultValue;
+        return acc;
+      }, {});
     }
+    return value ? selector ? selector({ ...value }) : { ...value } : isSafe ? input : null;
   };
-  return {
-    sendBeacon
+  const safeResolve = (input, options2) => resolve(input, options2) ?? input;
+  const unlinkGraph = (entity) => {
+    const graphKey = keyOfEntity2(entity);
+    if (graphKey) {
+      const deps = cache2.getChildren(graphKey) || [];
+      deps.forEach((depLink) => {
+        if (!isPartialKey(depLink)) {
+          cache2.removeRefs(graphKey, depLink);
+        }
+      });
+    }
   };
-};
-const fetchPlugin = (state) => {
-  var _a, _b, _c;
-  const isSelf = ((_a = state == null ? void 0 : state.env) == null ? void 0 : _a.isSelf) ?? false;
-  const url = ((_b = state == null ? void 0 : state.env) == null ? void 0 : _b.url) ?? "http://localhost/graphql";
-  const apiToken = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.apiToken;
-  const fetcher = createFetcher(url, {
-    Authorization: `Bearer ${apiToken}`
-  });
-  const beaconFetcher = fetchBeacon();
-  const queryFragment = async (fragmentId) => {
-    var _a2, _b2, _c2, _d;
-    if (!apiToken) return null;
-    if (state.$fetch.cacheLinks.get(fragmentId)) {
-      return state.$fetch.cacheLinks.get(fragmentId);
+  const mutateField = (input, parentFieldKey, options2) => {
+    var _a, _b, _c, _d;
+    if ((!input || l(input)) && !isLinkKey(input) || isSkipped(input)) {
+      return input;
     }
-    const response = await fetcher.query(getFragmentQuery(isSelf), {
-      fragmentSlug: fragmentId
-    });
-    const fragment = isSelf ? (_b2 = (_a2 = response == null ? void 0 : response.data) == null ? void 0 : _a2.fragment) == null ? void 0 : _b2[0] : (_c2 = response == null ? void 0 : response.data) == null ? void 0 : _c2.clientFragment;
-    let fragmentDocument = fragment == null ? void 0 : fragment.document;
-    if (typeof fragmentDocument === "string") {
-      try {
-        if (Object.keys(JSON.parse(fragmentDocument)).length === 0) {
-          fragmentDocument = getEmptyFragment(fragmentId);
+    const inputLinkKey = isGraphOrKey(input) ? keyOfEntity2(input) : input;
+    if (isLinkKey(inputLinkKey)) {
+      const parentGraph = getGraphLink(parentFieldKey) ?? "";
+      const parentPaths = ((_a = options2 == null ? void 0 : options2.internal) == null ? void 0 : _a.visitors.get(parentGraph)) ?? [];
+      const visitorsPaths = ((_b = options2 == null ? void 0 : options2.internal) == null ? void 0 : _b.visitors.get(inputLinkKey)) ?? [];
+      if (parentPaths.includes(inputLinkKey) || inputLinkKey === parentGraph) {
+        return null;
+      }
+      (_d = (_c = options2 == null ? void 0 : options2.internal) == null ? void 0 : _c.visitors) == null ? void 0 : _d.set(inputLinkKey, [...visitorsPaths, parentGraph]);
+    }
+    if (Array.isArray(input)) {
+      return input.map((item) => {
+        const indexKey = parentFieldKey ? joinKeys(parentFieldKey, `${ID++}`) : void 0;
+        return mutateField(item, indexKey, options2);
+      });
+    }
+    const entityKey = isLinkKey(input) ? input : isGraph(input) ? keyOfEntity2(input) : null;
+    const childKey = entityKey ?? parentFieldKey;
+    const mutateMethod = (options2 == null ? void 0 : options2.overrideMutateMethod) || mutate;
+    return mutateMethod(childKey, input, options2);
+  };
+  const mutate = (entity, ...args) => {
+    const { graphKey: entityGraphKey, options: options2, data: rawData } = getArgumentsForMutate(entity, ...args);
+    debugState.debug({ type: "beforeMutate", entity: entityGraphKey, data: rawData, options: options2 });
+    const data = isLinkKey(rawData) ? entityOfKey2(rawData) : rawData;
+    const graphKey = entityGraphKey ?? stateKey;
+    const partialKey = isPartialKey == null ? void 0 : isPartialKey(graphKey);
+    const parentKey = options2 == null ? void 0 : options2.parent;
+    const prevGraph = resolve(graphKey ?? "", { removeLinkFromSubGraph: false });
+    const internal = (options2 == null ? void 0 : options2.internal) || { hasChange: false, visitors: /* @__PURE__ */ new Map([]) };
+    let graphData = {
+      ...data,
+      ...entityOfKey2(graphKey)
+    };
+    const isTopLevelGraph = !(options2 == null ? void 0 : options2.parent);
+    const isReplace = (options2 == null ? void 0 : options2.replace) ? typeof (options2 == null ? void 0 : options2.replace) === "function" ? options2.replace(graphData) : (options2 == null ? void 0 : options2.replace) === "deep" ? true : isTopLevelGraph || partialKey : false;
+    if (isSkipped(data)) {
+      cache2.writeLink(graphKey, data, parentKey);
+      return graphKey;
+    }
+    if (!isReplace && isObject$1(prevGraph) && isObject$1(graphData)) {
+      graphData = {
+        ...prevGraph,
+        ...graphData
+      };
+    }
+    if (isReplace) {
+      unlinkGraph(graphKey);
+    }
+    const nextGraph = Object.entries(graphData).reduce((acc, [key, value]) => {
+      const fieldKey = joinKeys(graphKey, key);
+      let fieldValue = value;
+      const prevValue = prevGraph == null ? void 0 : prevGraph[key];
+      const isUpdateField = isObject$1(data) && key in data;
+      if (!isSkipped(fieldValue)) {
+        if (!isReplace && isUpdateField && Array.isArray(fieldValue) && Array.isArray(prevValue)) {
+          fieldValue = [...prevValue, ...fieldValue];
+        }
+        if (isObject$1(fieldValue) || Array.isArray(fieldValue) || isLinkKey(fieldValue)) {
+          fieldValue = mutateField(fieldValue, fieldKey, {
+            ...options2,
+            parent: graphKey,
+            internal
+          });
         }
-      } catch (e) {
-        console.error(e);
+        if (Array.isArray(fieldValue) && (options2 == null ? void 0 : options2.dedup) !== false) {
+          fieldValue = uniqueLinks(...fieldValue);
+        }
+      }
+      const isEqual = shallowEqual(prevValue, fieldKey === fieldValue ? safeResolve(fieldValue) : fieldValue);
+      internal.hasChange = internal.hasChange || !isEqual;
+      if (!isReplace && isLinkKey(prevValue) && prevValue !== fieldValue) {
+        cache2.removeRefs(graphKey, prevValue);
       }
+      acc[key] = fieldValue;
+      return acc;
+    }, {});
+    cache2.writeLink(graphKey, nextGraph, parentKey);
+    if (!parentKey) {
+      cache2.runGarbageCollector();
     }
-    if (fragment) {
-      state.$fetch.cacheDocuments.set(fragmentId, fragmentDocument);
-      if (Array.isArray(fragment.linkedFragments)) {
-        fragment.linkedFragments.forEach(
-          (linkedFragment) => state.$fetch.cacheDocuments.set(
-            linkedFragment.id,
-            linkedFragment.document
-          )
-        );
+    if ((internal.hasChange || isReplace) && !parentKey) {
+      notify(graphKey, prevGraph);
+    }
+    debugState.debug({
+      type: "afterMutate",
+      entity: entityGraphKey,
+      data: rawData,
+      nextData: nextGraph,
+      options: options2,
+      hasChange: internal.hasChange
+    });
+    return graphKey;
+  };
+  const invalidate = (entity) => {
+    const key = keyOfEntity2(entity);
+    debugState.debug({ type: "invalidate", entity: key });
+    if (key) {
+      const parents = cache2.getParents(key) || [];
+      cache2.invalidate(key);
+      parents.forEach((parentKey) => {
+        const prevParent = cache2.readLink(parentKey);
+        const freshParent = resolve(parentKey, { safe: false, keepLinks: true, removeLinkFromSubGraph: false });
+        cache2.writeLink(parentKey, freshParent);
+        notify(parentKey, prevParent);
+      });
+    }
+  };
+  const notify = (entity, prevState, _internal) => {
+    if (deepIndex > DEEP_LIMIT) {
+      throw new Error("Too deep notify.");
+    }
+    const depth = (_internal == null ? void 0 : _internal.depth) ?? 0;
+    const key = keyOfEntity2(entity);
+    debugState.debug({ type: "notify", entity: key });
+    if (key) {
+      deepIndex++;
+      const subs = [...subscribers.get(key) || [], ...subscribers.get(EACH_UPDATED) || []];
+      const deps = cache2.getChildren(key) || [];
+      const nextResult = resolve(key);
+      const getSelectedValues = (selector) => {
+        const next = nextResult && (selector == null ? void 0 : selector(nextResult));
+        const prev = prevState && (selector == null ? void 0 : selector(prevState));
+        return { next, prev, hasChange: !deepEqual(next, prev) };
+      };
+      subs.forEach(({ callback, options: options2 }) => {
+        const selector = options2 == null ? void 0 : options2.selector;
+        const directChangesOnly = (options2 == null ? void 0 : options2.directChangesOnly) ?? false;
+        if (directChangesOnly && depth > 0) {
+          return;
+        }
+        if (selector) {
+          const { next, prev, hasChange } = getSelectedValues(selector);
+          if (hasChange)
+            callback(next, prev);
+        } else {
+          callback(nextResult, prevState);
+        }
+      });
+      deps.forEach(
+        (dep) => notify(dep, prevState, {
+          depth: depth + 1
+        })
+      );
+    }
+    deepIndex = 0;
+  };
+  const subscribe = (...args) => {
+    const input = typeof args[0] === "function" ? EACH_UPDATED : args[0];
+    const callback = typeof args[0] === "function" ? args[0] : args[1];
+    const options2 = typeof args[0] === "function" ? args[1] : args[2];
+    const key = keyOfEntity2(input);
+    if (key) {
+      if (subscribers.has(key)) {
+        subscribers.set(key, [...Array.from(subscribers.get(key) || []), { callback, options: options2 }]);
+      } else {
+        subscribers.set(key, [{ callback, options: options2 }]);
       }
-      (_d = state.$fetch.cacheLinks) == null ? void 0 : _d.set(fragmentId, {
-        document: state.$fetch.cacheDocuments.get(fragmentId),
-        linkedFragments: fragment.linkedFragments ?? []
+      cache2.onRemoveLink((link, prevValue) => {
+        if (link === key) {
+          notify(key, prevValue);
+        }
       });
-      return state.$fetch.cacheLinks.get(fragmentId);
     }
-    return null;
+    const unsubscribe = () => {
+      if (key) {
+        const subIndex = (subscribers.get(key) || []).findIndex((sub) => sub.callback === callback);
+        if (subIndex !== -1) {
+          const nextSubscribers = subscribers.get(key) || [];
+          nextSubscribers.splice(subIndex, 1);
+          subscribers.set(key, nextSubscribers);
+        }
+      }
+    };
+    if (options2 == null ? void 0 : options2.signal) {
+      options2.signal.addEventListener("abort", unsubscribe, { once: true });
+    }
+    return unsubscribe;
   };
-  state.$fetch = {
-    cacheDocuments: /* @__PURE__ */ new Map(),
-    cacheLinks: /* @__PURE__ */ new Map(),
-    queryFragment,
-    query: fetcher.query,
-    sendBeacon: beaconFetcher.sendBeacon,
-    readFragment: (fragmentId) => state.$fetch.cacheDocuments.get(fragmentId)
+  const inspectFields = (graphType) => [...cache2.types.get(graphType) ?? []];
+  const resolveParents = (field) => {
+    const key = (typeof field === "string" ? field : keyOfEntity2(field)) || "";
+    const refs = cache2.getParents(key) ?? [];
+    return refs.map((ref) => resolve(ref));
+  };
+  const keyOfEntity2 = (entity) => {
+    warn("Instance keyOfEntity is deprecated. Use static method keyOfEntity.");
+    return keyOfEntity(entity);
+  };
+  const entityOfKey2 = (entity) => {
+    warn("Instance entityOfKey is deprecated. Use static method entityOfKey.");
+    return entityOfKey(entity);
+  };
+  const getArgumentsForMutate = (entity, ...args) => {
+    let data = typeof entity === "string" ? args[0] : entity;
+    if (typeof data === "function") {
+      data = data(resolve(entity));
+    } else if (isLinkKey(data)) {
+      data = entityOfKey2(data);
+    }
+    return {
+      graphKey: typeof entity === "string" ? entity : keyOfEntity2(entity),
+      options: typeof entity === "string" ? args[1] : args[0],
+      data
+    };
+  };
+  function use(plugin) {
+    pluginsStore.use(plugin);
+    plugin(this);
+  }
+  const addSkip = (predictor) => {
+    skipPredictors.push(predictor);
+  };
+  if (options == null ? void 0 : options.initialState) {
+    mutate(options.initialState, { replace: "deep" });
+  }
+  const graphState = {
+    _type: type,
+    _id: id,
+    key: stateKey,
+    getReferences,
+    mutate,
+    subscribe,
+    resolve,
+    safeResolve,
+    resolveParents,
+    inspectFields,
+    invalidate,
+    keyOfEntity: keyOfEntity2,
+    entityOfKey: entityOfKey2,
+    getArgumentsForMutate,
+    types: cache2.types,
+    cache: cache2,
+    use,
+    addSkip,
+    subscribers: isDev ? subscribers : void 0,
+    onDebugEvent: debugState.onDebugEvent
   };
+  cache2.onRemoveLink((link, prevValue) => debugState.debug({ type: "garbageRemove", entity: link, prevValue }));
+  return pluginsStore.runPlugins(graphState);
 };
-const createConstants = (...constants) => {
+const createConstants$1 = (...constants) => {
   return constants.reduce((acc, constant) => {
     acc[constant] = constant;
     return acc;
   }, {});
 };
-const nodes = createConstants(
+const nodes = createConstants$1(
   "Fragment",
   "FragmentInstance",
   "Instance",
+  "Collection",
   "Breakpoint",
   "Frame",
   "Image",
@@ -426,57 +641,53 @@ const nodes = createConstants(
   "ComputedValue",
   "TransformValue"
 );
-const fragmentGrowingMode = createConstants("auto", "fill");
-const borderType = createConstants("None", "Solid", "Dashed", "Dotted");
-const linkTarget = createConstants("_blank");
-const paintMode = createConstants("None", "Solid", "Image");
-const imagePaintScaleModes = createConstants(
-  "Fill",
-  "Fit",
-  "Crop",
-  "Tile"
-);
-const constrain = createConstants(
+const fragmentGrowingMode = createConstants$1("auto", "fill");
+const borderType = createConstants$1("None", "Solid", "Dashed", "Dotted");
+const linkTarget = createConstants$1("_blank", "none");
+const paintMode = createConstants$1("None", "Solid", "Image");
+const imagePaintScaleModes = createConstants$1("Auto", "Contain", "Cover");
+const constrain = createConstants$1(
   "Min",
   "Center",
   "Max",
   "Stretch",
   "Scale"
 );
-const positionType = createConstants("absolute", "relative");
-const sizing = createConstants("Fixed", "Hug", "Fill", "Relative");
-const layerMode = createConstants("none", "flex");
-const layerDirection = createConstants("vertical", "horizontal");
-const layerAlign = createConstants("start", "center", "end");
-const layerDistribute = createConstants(
+const positionType = createConstants$1("absolute", "relative");
+const sizing = createConstants$1("Fixed", "Hug", "Fill", "Relative");
+const layerMode = createConstants$1("none", "flex");
+const layerDirection = createConstants$1("vertical", "horizontal");
+const layerAlign = createConstants$1("start", "center", "end");
+const layerDistribute = createConstants$1(
   "start",
   "center",
   "end",
   "space-between",
   "space-around"
 );
-const textTransform = createConstants(
+const textTransform = createConstants$1(
   "none",
   "uppercase",
   "lowercase",
   "capitalize"
 );
-const textDecorations = createConstants(
+const textDecorations = createConstants$1(
   "none",
   "underline",
   "line-through"
 );
-const effectType = createConstants("loop", "appear", "hover", "tap");
-const effectName = createConstants(
+const effectType = createConstants$1("loop", "appear", "hover", "tap");
+const effectName = createConstants$1(
   "fade",
   "slide",
   "bounce",
   "wiggle",
   "increase"
 );
-const variableType = createConstants(
+const variableType = createConstants$1(
   "Event",
   "String",
+  "Link",
   "Boolean",
   "Array",
   "Color",
@@ -484,9 +695,10 @@ const variableType = createConstants(
   "Date",
   "Enum",
   "Number",
+  "Image",
   "Object"
 );
-const whiteSpace = createConstants(
+const whiteSpace = createConstants$1(
   "normal",
   "nowrap",
   "pre",
@@ -494,8 +706,8 @@ const whiteSpace = createConstants(
   "pre-line",
   "break-spaces"
 );
-const overflow = createConstants("visible", "hidden", "scroll");
-const variableTransforms = createConstants(
+const overflow = createConstants$1("visible", "hidden", "scroll");
+const variableTransforms = createConstants$1(
   "convert",
   "exists",
   "equals",
@@ -518,15 +730,21 @@ const variableTransforms = createConstants(
   "convertFromBoolean",
   "negative"
 );
-const renderTarget = createConstants("canvas", "document");
-const renderMode = createConstants("viewport", "parent", "fixed");
-const interactions = createConstants("click", "mouseover");
-const eventMode = createConstants("goal", "callback");
+const renderTarget = createConstants$1("canvas", "document");
+const renderMode = createConstants$1("viewport", "parent", "fixed");
+const interactions = createConstants$1("click", "mouseover", "appear");
+const eventMode = createConstants$1("goal", "callback", "tracker");
+const scopeTypes = createConstants$1(
+  "InstanceScope",
+  "FragmentScope",
+  "CollectionScope",
+  "CollectionItemScope"
+);
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   borderType,
   constrain,
-  createConstants,
+  createConstants: createConstants$1,
   effectName,
   effectType,
   eventMode,
@@ -544,6 +762,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   positionType,
   renderMode,
   renderTarget,
+  scopeTypes,
   sizing,
   textDecorations,
   textTransform,
@@ -1297,9 +1516,17 @@ const linkValidator = /* @__PURE__ */ check(
   }
 );
 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 ?? {})
   );
@@ -1322,8 +1549,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)), {
@@ -1331,6 +1578,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({
@@ -1340,14 +1588,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({
@@ -1430,6 +1686,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,
+  // }),
+});
 /* @__PURE__ */ pipe(
   /* @__PURE__ */ object({
     name: layerField(/* @__PURE__ */ string(), { fallback: "Frame", overridable: false }),
@@ -1450,6 +1715,7 @@ const CssOverrideSchema = /* @__PURE__ */ object({
     ...LayerSchema.entries,
     ...InteractionsSchema.entries,
     ...CssOverrideSchema.entries,
+    ...LinkSchema.entries,
     overflow: OverflowSchema,
     borderRadius: BorderRadiusSchema
   })
@@ -1462,33 +1728,22 @@ const CssOverrideSchema = /* @__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
 });
 /* @__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)), {
@@ -1528,13 +1783,17 @@ const CssOverrideSchema = /* @__PURE__ */ object({
   ...OverridesSchema.entries,
   ...PositionSchema.entries,
   ...SizeSchema.entries,
-  ...SceneSchema.entries
+  ...SceneSchema.entries,
+  ...InteractionsSchema.entries,
+  ...LinkSchema.entries
 });
 /* @__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
   }),
@@ -1547,10 +1806,12 @@ const CssOverrideSchema = /* @__PURE__ */ object({
   ...GraphFieldSchema.entries
 });
 /* @__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
   }),
@@ -1559,10 +1820,12 @@ const CssOverrideSchema = /* @__PURE__ */ object({
   ...GraphFieldSchema.entries
 });
 /* @__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
   }),
@@ -1572,6 +1835,7 @@ const CssOverrideSchema = /* @__PURE__ */ object({
   ...GraphFieldSchema.entries
 });
 /* @__PURE__ */ object({
+  nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
   name: layerField(/* @__PURE__ */ string(), {
     fallback: "String",
     overridable: false
@@ -1579,6 +1843,7 @@ const CssOverrideSchema = /* @__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: "" }),
@@ -1586,10 +1851,12 @@ const CssOverrideSchema = /* @__PURE__ */ object({
   ...GraphFieldSchema.entries
 });
 /* @__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
   }),
@@ -1600,36 +1867,394 @@ const CssOverrideSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
-const findGroups = (state) => {
-  var _a;
-  const cache = (_a = state.$styleSheet) == null ? void 0 : _a.cache;
-  const fragments = Array.from(cache.keys()).filter(
+/* @__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
+});
+/* @__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
+});
+/* @__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
+});
+/* @__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
+});
+/* @__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
+  })
+);
+/* @__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 BASE_HEADERS = {
+  "Content-Type": "application/json"
+};
+const createFetcher = (baseUrl, defaultHeaders = {}) => {
+  const cache2 = /* @__PURE__ */ new Map();
+  const inflightRequests = /* @__PURE__ */ new Map();
+  const getCacheKey = (query2, variables, options) => JSON.stringify({ query: query2, variables, options });
+  const query = async (query2, variables = {}, options = {}) => {
+    const cacheKey = getCacheKey(query2, variables, options);
+    if (cache2.has(cacheKey)) {
+      return cache2.get(cacheKey);
+    }
+    if (inflightRequests.has(cacheKey)) {
+      return inflightRequests.get(cacheKey);
+    }
+    const request = fetch(baseUrl, {
+      ...options,
+      method: "POST",
+      body: JSON.stringify({ query: query2, variables }),
+      credentials: "include",
+      headers: {
+        ...BASE_HEADERS,
+        ...defaultHeaders,
+        ...options.headers
+      }
+    }).then(async (res) => {
+      if (!res.ok) throw new Error(`Fetch error: ${res.status}`);
+      const data = await res.json();
+      if (!query2.includes("mutation")) {
+        cache2.set(cacheKey, data);
+      }
+      return data;
+    }).finally(() => {
+      inflightRequests.delete(cacheKey);
+    });
+    inflightRequests.set(cacheKey, request);
+    return request;
+  };
+  const invalidate = (endpoint, options) => {
+    cache2.delete(getCacheKey(endpoint, options));
+  };
+  const clearCache = () => cache2.clear();
+  return { query, invalidate, clearCache };
+};
+const getFragmentQuery = (fragmentId, isSelf) => {
+  return {
+    query: isSelf ? `
+query FragmentDocument($fragmentId: Int!) {
+    fragment(fragmentIds: [$fragmentId]) {
+        id
+        document
+        linkedFragments {
+            id
+            document
+        }
+    }
+}
+` : `
+query FragmentDocument($fragmentId: Int!) {
+    clientFragment(fragmentId: $fragmentId) {
+        id
+        document
+        linkedFragments {
+            id
+            document
+        }
+    }
+}`,
+    variables: {
+      fragmentId
+    },
+    _type: null
+  };
+};
+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 createConstants = (...constants) => {
+  return constants.reduce((acc, constant) => {
+    acc[constant] = constant;
+    return acc;
+  }, {});
+};
+var isBrowser_default = typeof window !== "undefined";
+var getKey = (v) => isKey(v) ? v.slice(1) : null;
+var isKey = (v) => typeof v === "string" && v.startsWith("$");
+function hashGenerator(layerKey) {
+  let hash = 0;
+  for (let i2 = 0; i2 < layerKey.length; i2++) {
+    hash = (hash << 5) - hash + layerKey.charCodeAt(i2);
+    hash |= 0;
+  }
+  const raw = Math.abs(hash).toString(36);
+  return /^[0-9]/.test(raw) ? `h${raw}` : raw;
+}
+const fetchBeacon = (baseUrl) => {
+  const sender = isBrowser_default && typeof (navigator == null ? void 0 : navigator.sendBeacon) === "function" ? navigator.sendBeacon : () => null;
+  const sendBeacon = (data) => {
+    try {
+      sender("/graphql", "test");
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  return {
+    sendBeacon
+  };
+};
+const getAreaListQuery = (areaCodes) => {
+  return {
+    query: `query($areaCodes: [String!]!) {
+  clientAreas(areaCodes: $areaCodes) {
+        variant {
+          fragment {
+              props
+              fragment {
+                  id
+                  document
+                  linkedFragments {
+                      id
+                      document
+                  }
+              }
+          }
+        }
+    }
+}`,
+    variables: {
+      areaCodes
+    }
+  };
+};
+const fetchPlugin = (state) => {
+  var _a, _b, _c;
+  const isSelf = ((_a = state == null ? void 0 : state.env) == null ? void 0 : _a.isSelf) ?? false;
+  const url = (_b = state == null ? void 0 : state.env) == null ? void 0 : _b.backendEndpoint;
+  const apiToken = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.apiToken;
+  const fetcher = createFetcher(url, {
+    Authorization: `Bearer ${apiToken}`
+  });
+  const beaconFetcher = fetchBeacon();
+  const queryFragment = async (fragmentId) => {
+    var _a2;
+    if (!apiToken || !fragmentId) return null;
+    if (state.$fetch.cacheDocuments.has(fragmentId)) {
+      return state.$fetch.cacheDocuments.get(fragmentId);
+    }
+    const fragmentQuery = getFragmentQuery(fragmentId, isSelf);
+    const response = await fetcher.query(
+      fragmentQuery.query,
+      fragmentQuery.variables,
+      { referrerPolicy: "unsafe-url" }
+    );
+    let fragment = null;
+    if (!!(response == null ? void 0 : response.data) && "clientFragment" in response.data) {
+      fragment = response.data.clientFragment;
+    }
+    if (!!(response == null ? void 0 : response.data) && "fragment" in response.data) {
+      fragment = (_a2 = response.data.fragment) == null ? void 0 : _a2.at(0);
+    }
+    const fragmentDocument = fragment == null ? void 0 : fragment.document;
+    if (!fragmentDocument) {
+      console.error("Empty document");
+      return null;
+    }
+    if (fragment) {
+      state.$fetch.cacheDocuments.set(fragmentId, fragmentDocument);
+      if (Array.isArray(fragment.linkedFragments)) {
+        fragment.linkedFragments.forEach(
+          (linkedFragment) => state.$fetch.cacheDocuments.set(
+            linkedFragment.id,
+            linkedFragment.document
+          )
+        );
+      }
+      return fragmentDocument;
+    }
+    return null;
+  };
+  const queryArea = async (areaCode) => {
+    return queryAreaList([areaCode]).then((res) => res == null ? void 0 : res.at(0));
+  };
+  const queryAreaList = async (areaCodes) => {
+    var _a2;
+    if (!apiToken || !areaCodes) return null;
+    const nonLoadedAreas = areaCodes.filter(
+      (code) => !state.$fetch.cacheAreaDocuments.has(code)
+    );
+    if (!nonLoadedAreas.length) {
+      return areaCodes.map(state.$fetch.cacheAreaDocuments.get);
+    }
+    const areaQuery = getAreaListQuery(areaCodes);
+    const response = await fetcher.query(
+      areaQuery.query,
+      areaQuery.variables,
+      { referrerPolicy: "unsafe-url" }
+    );
+    const areas = (_a2 = response == null ? void 0 : response.data) == null ? void 0 : _a2.clientAreas;
+    if (areas) {
+      areas.forEach((area, index2) => {
+        const areaCode = areaCodes == null ? void 0 : areaCodes.at(index2);
+        state.$fetch.cacheDocuments.set(
+          area.variant.fragment.fragment.id,
+          area.variant.fragment.fragment.document
+        );
+        if (Array.isArray(area.variant.fragment.fragment.linkedFragments)) {
+          area.variant.fragment.fragment.linkedFragments.forEach(
+            (linkedFragment) => state.$fetch.cacheDocuments.set(
+              linkedFragment.id,
+              linkedFragment.document
+            )
+          );
+        }
+        const entity = {
+          fragmentId: area.variant.fragment.fragment.id,
+          props: area.variant.fragment.props
+        };
+        state.$fetch.cacheAreaDocuments.set(areaCode, entity);
+      });
+      return areaCodes.map((code) => state.$fetch.cacheAreaDocuments.get(code));
+    }
+    return null;
+  };
+  state.$fetch = {
+    cacheDocuments: /* @__PURE__ */ new Map(),
+    cacheAreaDocuments: /* @__PURE__ */ new Map(),
+    queryFragment,
+    queryArea,
+    queryAreaList,
+    query: fetcher.query,
+    sendBeacon: beaconFetcher.sendBeacon,
+    readFragment: (fragmentId) => state.$fetch.cacheDocuments.get(fragmentId) ?? null,
+    readArea: (areaCode) => state.$fetch.cacheAreaDocuments.get(areaCode) ?? null
+  };
+};
+const getAllChildren = (layerResolver, layerKey, acc = []) => {
+  var _a;
+  const layer = layerResolver(layerKey) ?? {};
+  if (acc.length === 0) {
+    acc.push(keyOfEntity(layerKey));
+  }
+  (_a = layer == null ? void 0 : layer.children) == null ? void 0 : _a.forEach((child) => {
+    if (child) {
+      acc.push(keyOfEntity(child));
+      getAllChildren(layerResolver, child, acc);
+    }
+  });
+  return acc;
+};
+const buildCssBlock = (block) => {
+  if (!block || block.css === "") return "";
+  return `.${block.hash} {${block.css}}`;
+};
+const findGroups = (styles, layerResolver) => {
+  const fragments = Object.keys(styles).filter(
     (key) => key == null ? void 0 : key.includes(index.nodes.Fragment)
-  ) ?? [];
+  );
   const createFragmentSlice = (fragmentLayerKey) => {
-    var _a2;
-    const rootLayer = (_a2 = cache.get(fragmentLayerKey)) == null ? void 0 : _a2.layer;
+    const rootLayer = layerResolver(fragmentLayerKey);
     const breakpoints = ((rootLayer == null ? void 0 : rootLayer.children) ?? []).map(
-      (child) => {
-        var _a3;
-        return (_a3 = cache.get(child)) == null ? void 0 : _a3.layer;
-      }
+      (child) => layerResolver(child)
     );
     const primaryBreakpoint = breakpoints.find(
       (breakpoint) => breakpoint == null ? void 0 : breakpoint.isPrimary
     );
-    const smaller = breakpoints.filter((f) => !!f && (f == null ? void 0 : f.width) < (primaryBreakpoint == null ? void 0 : primaryBreakpoint.width)).sort((a2, b2) => b2.width - a2.width);
-    const larger = breakpoints.filter((f) => !!f && (f == null ? void 0 : f.width) > (primaryBreakpoint == null ? void 0 : primaryBreakpoint.width)).sort((a2, b2) => a2.width - b2.width);
+    const smaller = breakpoints.filter((f2) => !!f2 && (f2 == null ? void 0 : f2.width) < (primaryBreakpoint == null ? void 0 : primaryBreakpoint.width)).sort((a2, b) => b.width - a2.width);
+    const larger = breakpoints.filter((f2) => !!f2 && (f2 == null ? void 0 : f2.width) > (primaryBreakpoint == null ? void 0 : primaryBreakpoint.width)).sort((a2, b) => a2.width - b.width);
     return {
+      fragmentLayerKey,
       fragment: rootLayer,
-      primary: primaryBreakpoint,
+      primary: `${primaryBreakpoint._type}:${primaryBreakpoint == null ? void 0 : primaryBreakpoint._id}`,
       smaller: smaller ?? [],
       larger: larger ?? []
     };
   };
   return fragments.map(createFragmentSlice).filter((slice) => slice.primary);
 };
-const toCSS = (styles) => Object.entries(styles).filter(([, value]) => isValue(value) && value !== "").map(
+const toCSS = (styles) => Object.entries(styles).filter(
+  ([key, value]) => isValue(value) && value !== "" && !["_type", "_id"].includes(key)
+).map(
   ([key, value]) => `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value};`
 ).join("\n");
 function compareRules(prev = {}, next = {}) {
@@ -1641,92 +2266,216 @@ function compareRules(prev = {}, next = {}) {
   }
   return diff;
 }
-const makeCss = (state) => (entity) => {
-  var _a, _b, _c, _d, _e;
-  const cache = (_a = state.$styleSheet) == null ? void 0 : _a.cache;
-  const layerKey = state.keyOfEntity(entity);
-  const cacheLayer = cache.get(layerKey);
-  const isPrimary = !((_b = cacheLayer == null ? void 0 : cacheLayer.layer) == null ? void 0 : _b.overrideFrom);
-  const layerHash = hashGenerator(
-    isPrimary ? layerKey : getKey((_c = cacheLayer == null ? void 0 : cacheLayer.layer) == null ? void 0 : _c.overrideFrom)
-  );
-  const layerCss = cacheLayer == null ? void 0 : cacheLayer.styles;
-  const overriderLayerCss = ((_e = cache.get(getKey((_d = cacheLayer == null ? void 0 : cacheLayer.layer) == null ? void 0 : _d.overrideFrom))) == null ? void 0 : _e.styles) ?? {};
+const makeCss = (styles, layerResolver) => (layerKey) => {
+  const cacheLayer = layerResolver(layerKey);
+  const isPrimary = !(cacheLayer == null ? void 0 : cacheLayer.overrideFrom);
+  const overrideFromKey = (cacheLayer == null ? void 0 : cacheLayer.overrideFrom) ? String(getKey(cacheLayer == null ? void 0 : cacheLayer.overrideFrom)) : void 0;
+  const layerHash = hashGenerator(isPrimary ? layerKey : overrideFromKey);
+  const layerCss = styles == null ? void 0 : styles[layerKey];
+  const overriderLayerCss = overrideFromKey ? (styles == null ? void 0 : styles[overrideFromKey]) ?? {} : {};
   const resultCssRules = compareRules(overriderLayerCss, layerCss);
+  const cssOverride = (cacheLayer == null ? void 0 : cacheLayer.cssOverride) ?? "";
   return {
     hash: layerHash,
-    css: toCSS(resultCssRules)
+    css: toCSS(resultCssRules) + cssOverride
   };
 };
-const getAllChildren = (state, start, acc = []) => {
-  var _a, _b;
-  const cache = (_a = state.$styleSheet) == null ? void 0 : _a.cache;
-  const layerKey = state.keyOfEntity(start);
-  const { layer } = cache.get(layerKey) ?? {};
-  if (acc.length === 0) {
-    acc.push(layerKey);
+const autoInjector = (key, state, graphKey, transformStyles) => {
+  const removeStyle = () => {
+    if (!isBrowser_default) return;
+    const el = document.getElementById(key);
+    if (el) el.remove();
+  };
+  const injectStyle = (styles) => {
+    if (!isBrowser_default) return;
+    if (!styles) {
+      removeStyle();
+      return;
+    }
+    const existing = document.getElementById(key);
+    if (existing && existing.tagName === "STYLE") {
+      existing.textContent = styles;
+      return;
+    }
+    if (existing) existing.remove();
+    const style = document.createElement("style");
+    style.id = key;
+    style.textContent = styles;
+    document.head.appendChild(style);
+  };
+  let isMounted = false;
+  let pendingStyles = "";
+  state.subscribe(
+    graphKey,
+    (next) => {
+      const styles = (transformStyles == null ? void 0 : transformStyles(next)) ?? (next == null ? void 0 : next.styles) ?? [];
+      const resultStyle = styles.join("\n");
+      pendingStyles = resultStyle;
+      if (isMounted) {
+        injectStyle(resultStyle);
+      }
+    },
+    { directChangesOnly: true }
+  );
+  const mount = () => {
+    isMounted = true;
+    if (pendingStyles) {
+      injectStyle(pendingStyles);
+    } else {
+      removeStyle();
+    }
+  };
+  const unmount = () => {
+    isMounted = false;
+    removeStyle();
+  };
+  return { mount, unmount };
+};
+function generatePrimaryCssBlocks(layerResolver, group, cssMaker) {
+  const children = getAllChildren(layerResolver, group.primary);
+  return children.map(cssMaker).map(buildCssBlock);
+}
+function generateSmallerCssBlocks(layerResolver, group, cssMaker) {
+  return group.smaller.map(
+    (smallerLayer, index2, arr) => {
+      const smallerChildren = getAllChildren(layerResolver, smallerLayer);
+      const smallerCssBlocks = smallerChildren.map(cssMaker);
+      const max = index2 === 0 ? group.primary.width - 1 : arr[index2 - 1].width;
+      return `@container (max-width: ${max}px) {${smallerCssBlocks.map(buildCssBlock).join("")}}`;
+    }
+  );
+}
+function generateLargerCssBlocks(layerResolver, group, cssMaker) {
+  return group.larger.map(
+    (largerLayer, index2, arr) => {
+      const largerChildren = getAllChildren(layerResolver, largerLayer);
+      const largerCssBlocks = largerChildren.map(cssMaker);
+      const min = largerLayer.width;
+      const max = index2 < arr.length - 1 ? arr[index2 + 1].width - 1 : null;
+      const containerQuery = max ? `@container (min-width: ${min}px) and (max-width: ${max}px)` : `@container (min-width: ${min}px)`;
+      return `${containerQuery} {${largerCssBlocks.map(buildCssBlock).join("")}}`;
+    }
+  );
+}
+function extractStyleSheet(styles, layerResolver) {
+  const [group] = findGroups(styles, layerResolver);
+  if (!group) {
+    return [];
   }
-  (_b = layer == null ? void 0 : layer.children) == null ? void 0 : _b.forEach((child) => {
-    acc.push(child);
-    getAllChildren(state, child, acc);
+  const cssMaker = makeCss(styles, layerResolver);
+  const fragmentCssRules = [];
+  fragmentCssRules.push(buildCssBlock(cssMaker(group.fragmentLayerKey)));
+  const primaryStyles = generatePrimaryCssBlocks(
+    layerResolver,
+    group,
+    cssMaker
+  );
+  fragmentCssRules.push(...primaryStyles);
+  fragmentCssRules.push(
+    ...generateSmallerCssBlocks(layerResolver, group, cssMaker)
+  );
+  fragmentCssRules.push(
+    ...generateLargerCssBlocks(layerResolver, group, cssMaker)
+  );
+  return fragmentCssRules;
+}
+const fragmentStylesheetPlugin = (state) => {
+  const KEY = `${PLUGIN_TYPES.FragmentStylesheet}:root`;
+  const addStyle = (layerKey, style) => {
+    state.mutate(KEY, {
+      styles: {
+        [layerKey]: style
+      }
+    });
+  };
+  state.mutate(KEY, {
+    styles: {}
   });
-  return acc;
-};
-const buildCssBlock = (block) => {
-  if (!block || block.css === "") return "";
-  return `.${block.hash} {${block.css}}`;
+  const fragmentStyleInjector = autoInjector(state.key, state, KEY, (graph) => {
+    return extractStyleSheet(graph.styles, state.resolve);
+  });
+  const destroyStyles = () => {
+    state.mutate(
+      KEY,
+      {
+        styles: {}
+      },
+      { replace: true }
+    );
+    fragmentStyleInjector.unmount();
+  };
+  state.$styleSheet = {
+    key: KEY,
+    addStyle,
+    mount: fragmentStyleInjector.mount,
+    unmount: destroyStyles,
+    extract: (withTag) => {
+      var _a;
+      const graph = state.resolve(KEY);
+      const styles = extractStyleSheet(graph == null ? void 0 : graph.styles, state.resolve);
+      const resultStyle = styles.join("\n");
+      if (withTag) {
+        const id = state.entityOfKey((_a = state.$fragment) == null ? void 0 : _a.root);
+        return `<style id="fragment-${id._id}">${resultStyle}</style>`;
+      }
+      return resultStyle;
+    }
+  };
+  return state;
 };
-const styleSheetPlugin = (state) => {
-  const extractStyleSheet = () => {
-    const fragments = findGroups(state);
-    const cssMaker = makeCss(state);
-    const fragmentsStyle = fragments.map((group) => {
-      const fragmentCssRules = [];
-      fragmentCssRules.push(buildCssBlock(cssMaker(group.fragment)));
-      const children = getAllChildren(state, group.primary);
-      const primaryCssBlocks = children.map(cssMaker);
-      primaryCssBlocks.forEach((block) => {
-        fragmentCssRules.push(buildCssBlock(block));
-      });
-      group.smaller.forEach((smallerLayer, index2, arr) => {
-        const smallerChildren = getAllChildren(state, smallerLayer);
-        const smallerCssBlocks = smallerChildren.map(cssMaker);
-        const max = index2 === 0 ? group.primary.width - 1 : arr[index2 - 1].width;
-        fragmentCssRules.push(
-          `@container (max-width: ${max}px) {${smallerCssBlocks.map(buildCssBlock).join("")}}`
-        );
-      });
-      group.larger.forEach((largerLayer, index2, arr) => {
-        const largerChildren = getAllChildren(state, largerLayer);
-        const largerCssBlocks = largerChildren.map((l) => cssMaker(l, 123));
-        const min = largerLayer.width;
-        const max = index2 < arr.length - 1 ? arr[index2 + 1].width - 1 : null;
-        const containerQuery = max ? `@container (min-width: ${min}px) and (max-width: ${max}px)` : `@container (min-width: ${min}px)`;
-        fragmentCssRules.push(
-          `${containerQuery} {${largerCssBlocks.map(buildCssBlock).join("")}}`
-        );
-      });
-      fragmentCssRules.push(`[data-key^="Text"] { p {margin: 0;} }`);
-      return {
-        fragment: state.keyOfEntity(group.fragment),
-        styles: fragmentCssRules
-      };
+const globalCss = '[data-key^="Fragment"] {\n    [data-key^="Text"] {\n        p {\n            margin: 0;\n            font-size: 14px;\n            color: #000;\n            font-weight: 400;\n        }\n    }\n\n    /* 1. Use a more-intuitive box-sizing model */\n\n    *, *::before, *::after {\n        box-sizing: border-box;\n    }\n\n    /* 2. Remove default margin */\n\n    * {\n        margin: 0;\n    }\n\n    /* 3. Enable keyword animations */\n    @media (prefers-reduced-motion: no-preference) {\n        html {\n            interpolate-size: allow-keywords;\n        }\n    }\n\n    body {\n        /* 4. Add accessible line-height */\n        line-height: 1.5;\n        /* 5. Improve text rendering */\n        -webkit-font-smoothing: antialiased;\n    }\n\n    /* 6. Improve media defaults */\n\n    img, picture, video, canvas, svg {\n        display: block;\n        max-width: 100%;\n    }\n\n    /* 7. Inherit fonts for form controls */\n\n    input, button, textarea, select {\n        font: inherit;\n    }\n\n    /* 8. Avoid text overflows */\n\n    p, h1, h2, h3, h4, h5, h6 {\n        overflow-wrap: break-word;\n    }\n\n    /*\n      10. Create a root stacking context\n    */\n\n    #root, #__next {\n        isolation: isolate;\n    }\n\n    a {\n        text-decoration: none;\n    }\n}\n';
+const globalStylesheetPlugin = (state) => {
+  if (!("$fragments" in state)) {
+    throw new Error("GlobalStylesheetPlugin need $fragments plugin");
+  }
+  const KEY = `${PLUGIN_TYPES.GlobalStylesheet}:root`;
+  const addStyle = (style) => {
+    state.mutate(KEY, {
+      styles: [style]
     });
-    return fragmentsStyle;
   };
-  state.$styleSheet = {
-    cache: /* @__PURE__ */ new Map(),
-    addStyle: (layerKey, styles, layer) => {
-      var _a, _b;
-      return (_b = (_a = state.$styleSheet) == null ? void 0 : _a.cache) == null ? void 0 : _b.set(layerKey, { styles, layer });
-    },
-    extract: extractStyleSheet
+  state.mutate({
+    _type: PLUGIN_TYPES.GlobalStylesheet,
+    _id: "root",
+    styles: []
+  });
+  const globalStyleInjector = autoInjector("global", state, KEY);
+  state.$globalStylesheet = {
+    key: KEY,
+    addStyle,
+    mount: globalStyleInjector.mount,
+    unmount: globalStyleInjector.unmount,
+    extractStyles: () => {
+      const allFragments = state.$fragments.getManagers();
+      const styles = Object.entries(allFragments).filter(([, value]) => !!(value == null ? void 0 : value.resolve)).map(([, manager]) => manager.$styleSheet.extract(true));
+      return styles.join("");
+    }
   };
+  addStyle(globalCss);
+  globalStyleInjector.mount();
+  return state;
 };
-const fragmentsPlugin = (state) => {
+const scopesPlugin = (state) => {
+  const scopesMap = /* @__PURE__ */ new Map();
+  const registerScope = (layerKey, scopeValue) => {
+    scopesMap.set(layerKey, scopeValue);
+  };
+  state.$scopes = {
+    scopes: scopesMap,
+    registerScope
+  };
+  return state;
+};
+const fragmentsPlugin = (options) => (state) => {
+  const plugins = (options == null ? void 0 : options.plugins) ?? [];
   const createFragmentManager = (fragmentId, initialDocument = {}) => {
     var _a, _b;
     if (!fragmentId || !initialDocument) return null;
+    const fragmentLayerId = (initialDocument == null ? void 0 : initialDocument._type) === index.nodes.Fragment ? initialDocument == null ? void 0 : initialDocument._id : null;
+    if (!fragmentLayerId) {
+      console.error("Cannot find fragment layer id");
+      return;
+    }
     const cacheManager = (_b = (_a = state.resolve(state.$fragments.key)) == null ? void 0 : _a.managers) == null ? void 0 : _b[fragmentId];
     if (cacheManager) {
       return cacheManager;
@@ -1739,21 +2488,33 @@ const fragmentsPlugin = (state) => {
       _type: "Spring",
       _id: "root"
     };
-    const manager = it({
+    const manager = createState({
       _type: "FragmentManager",
       _id: fragmentId,
       initialState: initialDocument,
       plugins: [
         (state2) => {
           state2.$fragment = {
-            root: `${index.nodes.Fragment}:${fragmentId}`,
+            root: `${index.nodes.Fragment}:${fragmentLayerId}`,
             temp: "Temp:root"
           };
         },
         // cssPlugin,
-        styleSheetPlugin
+        fragmentStylesheetPlugin,
+        scopesPlugin,
+        ...plugins
       ],
-      skip: [b, a, isKey]
+      skip: [
+        g,
+        f,
+        isKey,
+        u([
+          ...Object.keys(index.nodes),
+          "Temp",
+          "Spring",
+          PLUGIN_TYPES.FragmentStylesheet
+        ])
+      ]
     });
     manager.mutate(tempGraph);
     manager.mutate(springGraph);
@@ -1772,13 +2533,13 @@ const fragmentsPlugin = (state) => {
     return (_a = state.resolve(state.$fragments.key)) == null ? void 0 : _a.managers;
   };
   state.$fragments = {
-    key: `FragmentsPlugin:root`,
+    key: `${PLUGIN_TYPES.FragmentsPlugin}:root`,
     createFragmentManager,
     getManager,
     getManagers
   };
   state.mutate({
-    _type: "FragmentsPlugin",
+    _type: PLUGIN_TYPES.FragmentsPlugin,
     _id: "root",
     managers: {}
   });
@@ -1787,76 +2548,255 @@ const fragmentsPlugin = (state) => {
 const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: String) {
   addClientMetric(metric: {metricType: $type, metricValue: $value})
 }`;
-const types = createConstants$1(
+const pendingPixels = /* @__PURE__ */ new Set();
+const sendWithImage = (url) => {
+  try {
+    const pixel = new Image();
+    pixel.referrerPolicy = "no-referrer";
+    const handleCleanup = () => {
+      pixel.removeEventListener("load", handleCleanup);
+      pixel.removeEventListener("error", handleCleanup);
+      pendingPixels.delete(pixel);
+    };
+    pixel.addEventListener("load", handleCleanup, { once: true });
+    pixel.addEventListener("error", handleCleanup, { once: true });
+    pendingPixels.add(pixel);
+    pixel.src = url;
+  } catch {
+  }
+};
+const sendWithFetch = (url) => {
+  if (typeof fetch !== "function") {
+    return false;
+  }
+  try {
+    fetch(url, {
+      method: "GET",
+      mode: "no-cors",
+      keepalive: true
+    }).catch(() => void 0);
+    return true;
+  } catch {
+    return false;
+  }
+};
+const sendWithNavigatorBeacon = (url) => {
+  if (typeof navigator === "undefined" || typeof navigator.sendBeacon !== "function") {
+    return false;
+  }
+  try {
+    return navigator.sendBeacon(url);
+  } catch {
+    return false;
+  }
+};
+const trackAdPixel = (pixelUrl, customBeacon) => {
+  if (!isBrowser_default) {
+    return;
+  }
+  const url = pixelUrl == null ? void 0 : pixelUrl.trim();
+  if (!url) {
+    return;
+  }
+  if (typeof customBeacon === "function") {
+    try {
+      const result = customBeacon(url);
+      if (result === true) {
+        return;
+      }
+    } catch {
+    }
+  }
+  if (sendWithNavigatorBeacon(url)) {
+    return;
+  }
+  if (sendWithFetch(url)) {
+    return;
+  }
+  sendWithImage(url);
+};
+const types = createConstants(
   "INIT_SESSION",
   "RELEASE_SESSION",
   "REACH_PROJECT_GOAL"
 );
-const metricsPlugin = (state) => {
-  const sendMetric = (type, value) => {
-    var _a, _b;
-    (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.sendBeacon;
-    const query = (_b = state == null ? void 0 : state.$fetch) == null ? void 0 : _b.query;
-    query(addClientMetric, { type, value });
-  };
-  const initClient = async () => {
-    console.log("initClient");
-    sendMetric(types.INIT_SESSION);
-  };
-  const releaseClient = async () => {
-    sendMetric(types.RELEASE_SESSION);
+const globalMetricsPlugin = (state) => {
+  const sendMetric = async (type, value) => {
+    var _a;
+    const query = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.query;
+    await query(addClientMetric, { type, value });
   };
   const reachGoal = (goal) => {
     sendMetric(types.REACH_PROJECT_GOAL, goal);
   };
+  const sendAdPixel = (pixelUrl) => {
+    var _a;
+    trackAdPixel(pixelUrl, (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.sendBeacon);
+  };
   state.$metrics = {
-    initClient,
-    releaseClient,
-    reachGoal
+    reachGoal,
+    trackAdPixel: sendAdPixel
   };
 };
+const loadPlugin = (state) => {
+  if (!["$fetch", "$fragments"].every((field) => field in state)) {
+    console.error("LoadFragmentPlugin depends from Fetch and Fragments plugin");
+    return state;
+  }
+  const resourceCache = /* @__PURE__ */ new Map();
+  const createSuspenseResource = (key, fetcher) => {
+    if (resourceCache.has(key)) return resourceCache.get(key);
+    let status = "pending";
+    let result;
+    const suspender = fetcher().then(
+      (r2) => {
+        status = "success";
+        result = r2;
+      },
+      (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 loadFragment = (fragmentId, options) => {
+    var _a, _b;
+    const suspense = options == null ? void 0 : options.suspense;
+    const readFragment = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.readFragment(fragmentId);
+    const fragmentManager = (_b = state == null ? void 0 : state.$fragments) == null ? void 0 : _b.getManager(fragmentId);
+    if (readFragment && !fragmentManager) {
+      return state.$fragments.createFragmentManager(fragmentId, readFragment);
+    }
+    if (readFragment && fragmentManager) return fragmentManager;
+    const loader = async () => {
+      var _a2;
+      const fragmentDocument = await ((_a2 = state == null ? void 0 : state.$fetch) == null ? void 0 : _a2.queryFragment(fragmentId));
+      return state.$fragments.createFragmentManager(
+        fragmentId,
+        fragmentDocument
+      );
+    };
+    if (suspense) {
+      const resource = createSuspenseResource(fragmentId, loader);
+      return resource.read();
+    }
+    return loader();
+  };
+  const loadArea = (areaCode, options) => {
+    var _a;
+    const suspense = options == null ? void 0 : options.suspense;
+    const readArea2 = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.readArea(areaCode);
+    if (readArea2) return readArea2;
+    const loader = async () => {
+      var _a2;
+      const areaEntity = await ((_a2 = state == null ? void 0 : state.$fetch) == null ? void 0 : _a2.queryArea(areaCode));
+      console.log(areaEntity);
+      await loadFragment(areaEntity == null ? void 0 : areaEntity.fragmentId, {
+        suspense: false
+      });
+      return areaEntity;
+    };
+    if (suspense) {
+      const resource = createSuspenseResource(areaCode, loader);
+      return resource.read();
+    }
+    return loader();
+  };
+  const readArea = () => {
+    return state;
+  };
+  state.$load = {
+    loadFragment,
+    loadArea,
+    readArea
+  };
+};
+const PLUGIN_TYPES = createConstants(
+  "FragmentsPlugin",
+  "GlobalStylesheet",
+  "FragmentStylesheet"
+);
 const createFragmentsClient = (options) => {
-  return it({
+  const BACKEND_TARGET = (options == null ? void 0 : options.isSelf) ? "/graphql" : "http://85.192.29.65/graphql";
+  return createState({
     _type: "GlobalManager",
     initialState: {},
+    skip: [
+      u([
+        ...Object.keys(index.nodes),
+        ...Object.keys(PLUGIN_TYPES)
+      ])
+    ],
     plugins: [
       (state) => {
         state.env = {
           isSelf: (options == null ? void 0 : options.isSelf) ?? false,
-          url: options == null ? void 0 : options.url,
+          backendEndpoint: BACKEND_TARGET,
           apiToken: options == null ? void 0 : options.apiToken
         };
-        state.$global = {};
-        state.extractStyles = async () => {
-          const allFragments = state.$fragments.getManagers();
-          const extractors = Object.entries(allFragments).filter(([, value]) => !!(value == null ? void 0 : value.resolve)).map(([, manager]) => manager.$styleSheet.extract());
-          const extractedStyles = await Promise.all(extractors);
-          return Object.values(
-            extractedStyles.reduce((acc, extrected) => {
-              Object.entries(extrected).forEach(([key, styleTag]) => {
-                acc[key] = styleTag;
-              });
-              return acc;
-            }, {})
-          );
-        };
       },
       fetchPlugin,
-      fragmentsPlugin,
-      metricsPlugin,
-      (state) => {
-        var _a, _b, _c, _d, _e;
-        if (isBrowser_default) {
-          if (!((_a = state == null ? void 0 : state.env) == null ? void 0 : _a.isSelf)) {
-            (_c = (_b = state == null ? void 0 : state.$metrics) == null ? void 0 : _b.initClient) == null ? void 0 : _c.call(_b);
-            window.addEventListener(
-              "beforeunload",
-              (_e = (_d = state == null ? void 0 : state.$metrics) == null ? void 0 : _d.releaseClient) == null ? void 0 : _e.call(_d)
-            );
-          }
-        }
-      }
+      fragmentsPlugin({
+        plugins: options == null ? void 0 : options.fragmentPlugins
+      }),
+      loadPlugin,
+      globalMetricsPlugin,
+      globalStylesheetPlugin
     ]
   });
 };
+const ssrPlugin = (state) => {
+  var _a, _b, _c;
+  if (!["$fragments"].every((field) => field in state)) {
+    console.error("SSRPlugin depends from Fragments plugin");
+    return state;
+  }
+  const cacheDocuments = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.cacheDocuments;
+  const cacheAreas = (_b = state == null ? void 0 : state.$fetch) == null ? void 0 : _b.cacheAreaDocuments;
+  const createManager = (_c = state == null ? void 0 : state.$fragments) == null ? void 0 : _c.createFragmentManager;
+  const fromMap = (map) => {
+    return Array.from(map).reduce((acc, [key, value]) => {
+      acc[key] = value;
+      return acc;
+    }, {});
+  };
+  const extractData = () => {
+    const documents = fromMap(cacheDocuments.entries());
+    const areas = fromMap(cacheAreas.entries());
+    return {
+      documents,
+      areas
+    };
+  };
+  const restoreData = (input) => {
+    if (!input || typeof input !== "object" && !Array.isArray(input))
+      return null;
+    if ("documents" in input && isObject(input.documents)) {
+      Object.entries(input.documents).forEach(([fragmentId, doc]) => {
+        cacheDocuments.set(+fragmentId, doc);
+        createManager(+fragmentId, doc);
+      });
+    }
+    if ("areas" in input && isObject(input.areas)) {
+      Object.entries(input.areas).forEach(([areaCode, entity]) => {
+        cacheAreas.set(areaCode, entity);
+      });
+    }
+  };
+  state.$ssr = {
+    extractData,
+    restoreData
+  };
+  return state;
+};
 exports.createFragmentsClient = createFragmentsClient;
+exports.ssrPlugin = ssrPlugin;