@fragmentsx/client-core 0.1.3 → 0.2.0

package/dist/index.es.js

@@ -4,619 +4,220 @@ var r = (e) => !e && e == null, y = (e) => !r(e), a = (e) => typeof e == "object
   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;
+var D = (e) => s(e), re = (e) => i(e), se = (e) => t(e), T = (e) => a(e), ie = (e, r2) => {
+  if (e === r2) return true;
+  if (Array.isArray(e) && Array.isArray(r2)) return e.length === r2.length && e.every((c, o) => r2[o] === c);
+  if (!T(e) || !T(r2)) return false;
+  let f2 = Object.keys(e), p = Object.keys(r2);
+  if (f2.length !== p.length) return false;
+  for (let c of f2) {
+    if (!p.includes(c)) return false;
+    let o = e[c], E = r2[c];
+    if (l(o) && l(E) && o !== E) return false;
   }
   return true;
-};
-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;
-  }
+}, z = (e, r2) => {
+  if (e === r2) return true;
+  if (Array.isArray(e) && Array.isArray(r2)) return e.length === r2.length && e.every((c, o) => z(c, r2[o]));
+  if (!T(r2) || !T(e)) return e === r2;
+  let f2 = Object.keys(e), p = Object.keys(r2);
+  if (f2.length !== p.length) return false;
+  for (let c of f2) if (!p.includes(c) || !z(e[c], r2[c])) return false;
   return true;
 };
-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 Q = (...e) => Array.from(new Set(e)), oe = (...e) => e.filter((r2, f2, p) => s(r2) ? p.indexOf(r2) === f2 : true);
+var P = (e) => e && e.split(".").length > 1, X = (e, r2) => {
+  if (!e || !r2) return false;
+  if (typeof e != "string" || typeof r2 != "string") return null;
+  let [f2, p] = e.split(":"), [c, o] = r2.split(":");
+  return f2 !== c ? false : p.startsWith(o);
+}, ae = (e) => D(e) && P(e) ? e.split(".")[0] : e;
+var ce = () => {
+  let e = /* @__PURE__ */ new Map(), r2 = /* @__PURE__ */ new Map(), f2 = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set([]), V = (n, u2) => {
     var _a;
-    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) => {
+    p.set(n, Q(...p.get(n) || [], u2)), c.set(u2, Q(...c.get(u2) ?? [], n)), M(n, ((_a = p.get(n)) == null ? void 0 : _a.length) || 0);
+  }, x = (n, u2) => {
     var _a;
-    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) => {
+    p.set(u2, (p.get(u2) || []).filter((k) => k !== n)), c.set(n, (c.get(n) ?? []).filter((k) => k !== u2)), M(u2, ((_a = p.get(u2)) == null ? void 0 : _a.length) || 0);
+  }, I = (n, u2 = []) => {
+    let k = p.get(n) || [];
+    u2.push(...k);
+    let S = k.map((L) => I(L, u2)).flat();
+    return u2.push(...S), Array.from(new Set(u2).values());
+  }, A = (n) => {
+    M(n, 0), B();
+  }, Y = (n) => n ? f2.get(n) : null, w = (n, u2, k) => {
     var _a;
-    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 = () => {
+    if (typeof n == "string") {
+      f2.set(n, u2);
+      let [S] = n.split(":");
+      P(n) || (r2.has(S) ? (_a = r2.get(S)) == null ? void 0 : _a.add(n) : r2.set(S, /* @__PURE__ */ new Set([n])));
+    }
+    k && n && n !== k && V(n, k);
+  }, j = (n) => n ? f2.has(n) : false, M = (n, u2) => {
+    if (Array.isArray(n)) n.forEach((k, S) => M(k, S));
+    else {
+      let k = o.get(n);
+      o.set(n, u2), u2 ? !k && u2 && E.delete(n) : E.add(n);
+    }
+  }, N = () => Array.from(f2.entries()), _ = (n) => o.get(n) ?? 0, B = () => {
     var _a, _b;
-    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) => {
+    for (let n of E.keys()) {
+      if (_(n) > 0) continue;
+      let k = f2.get(n);
+      E.delete(n), f2.delete(n), o.delete(n);
+      let S = p.get(n) ?? [], L = c.get(n) ?? [];
+      S.forEach((K) => {
         var _a2, _b2;
-        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);
+        c.set(K, ((_b2 = (_a2 = c.get(K)) == null ? void 0 : _a2.filter) == null ? void 0 : _b2.call(_a2, (J) => J !== n)) ?? []);
+      }), L.forEach((K) => {
+        M(K, _(K) - 1);
       });
-      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));
+      let [C] = n.split(":");
+      P(n) || ((_a = r2.get(C)) == null ? void 0 : _a.delete(n), ((_b = r2.get(C)) == null ? void 0 : _b.size) || r2.delete(C)), p.delete(n), (e.get("onRemoveLink") ?? []).forEach((K) => K(n, k ?? null));
     }
   };
-  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])
-  };
+  return { readLink: Y, writeLink: w, hasLink: j, getLinkEntries: N, parentRefs: p, childrenRefs: c, addRefs: V, removeRefs: x, getChildren: (n) => c.get(n), getParents: (n) => p.get(n), getLinkedRefs: I, invalidate: A, links: f2, types: r2, refCount: o, runGarbageCollector: B, onRemoveLink: (n) => e.set("onRemoveLink", [...(e == null ? void 0 : e.get("onRemoveLink")) ?? [], n]) };
 };
-var joinKeys = (...keys) => {
+var Z = (...e) => {
   var _a;
-  return (_a = keys == null ? void 0 : keys.filter(Boolean)) == null ? void 0 : _a.join(".");
+  return (_a = e == null ? void 0 : e.filter(Boolean)) == null ? void 0 : _a.join(".");
 };
-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
-  };
-};
-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;
+var pe = process.env.NODE_ENV !== "production";
+var fe = (e = []) => {
+  let r2 = [], f2 = (c) => {
+    r2.push(c);
+  }, p = (c) => r2.reduce((o, E) => E(o) ?? o, c);
+  return e.forEach(f2), { use: f2, runPlugins: p };
 };
-var createDebugState = () => {
-  const listeners = /* @__PURE__ */ new Set();
-  const onDebugEvent = (callback) => {
-    listeners.add(callback);
-  };
-  const debug = (event) => {
-    listeners.forEach((callback) => {
-      callback({ ...event, timestamp: Date.now() });
+var le = (e) => e && T(e) ? ["_id", "_type", "key", "mutate", "resolve"].every((f2) => f2 in e) : false;
+var ue = () => {
+  let e = /* @__PURE__ */ new Set();
+  return { debug: (p) => {
+    e.forEach((c) => {
+      c({ ...p, timestamp: Date.now() });
     });
-  };
-  return {
-    debug,
-    onDebugEvent
-  };
+  }, onDebugEvent: (p) => {
+    e.add(p);
+  } };
 };
-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 ye = /* @__PURE__ */ new Set(), Se = (e) => `[GraphState]: ${e}`;
+function ee(e) {
+  ye.has(e) || (console.warn(Se(e)), ye.add(e));
 }
-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 $ = (e) => {
+  if (typeof e == "string") return q(e) ? e : null;
+  if (!(e == null ? void 0 : e._type)) return null;
+  let r2 = null;
+  return (y(e.id) || y(e._id)) && (r2 = `${e.id ?? e._id}`), r2 && `${e._type}:${r2}`;
 };
-var entityOfKey = (entity) => {
-  if (isObject$1(entity) && (entity == null ? void 0 : entity._type) && keyOfEntity(entity)) {
-    return entity;
-  }
-  if (!entity || typeof entity !== "string")
-    return null;
-  const [typeName, ...restTypes] = entity.split(":");
-  if (!typeName || restTypes.length < 1)
-    return null;
-  return {
-    _type: typeName,
-    _id: restTypes.join(":")
-  };
+var q = (e) => {
+  if (T(e) && (e == null ? void 0 : e._type) && $(e)) return e;
+  if (!e || typeof e != "string") return null;
+  let [r2, ...f2] = e.split(":");
+  return !r2 || f2.length < 1 ? null : { _type: r2, _id: f2.join(":") };
 };
-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;
-  };
-  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 mutateField = (input, parentFieldKey, options2) => {
+var he = 0, Re = 100, we = "State", me = "$EACH:ROOT$", kt = (e) => {
+  let r2 = (e == null ? void 0 : e._id) ?? `${he++}`, f2 = (e == null ? void 0 : e._type) ?? we, p = `${f2}:${r2}`, c = [le, ...(e == null ? void 0 : e.skip) ?? []], o = ce(), E = ue(), V = fe(e == null ? void 0 : e.plugins), x = /* @__PURE__ */ new Map(), I = 0, A = (t2) => c.some((i2) => i2(t2)), Y = (t2, i2) => {
+    let a2 = (i2 == null ? void 0 : i2.withPartialKeys) ?? false, s2 = L(t2);
+    return s2 ? (o.getParents(s2) ?? []).filter((g2) => a2 ? !P(g2) : g2) : [];
+  }, w = (t2, i2) => {
+    let a2 = (i2 == null ? void 0 : i2.deep) ?? false, s2 = (i2 == null ? void 0 : i2.safe) ?? false, l2 = (i2 == null ? void 0 : i2.keepLinks) ?? false, { selector: g2, ...y$1 } = i2 || {}, d = y(t2) ? L(t2) : null;
+    E.debug({ type: "resolve", entity: t2, options: i2 });
+    let h = d ? o.readLink(d) : null;
+    return A(h) ? h : ((T(h) || Array.isArray(h)) && (h = Object.entries(h).reduce((b, [G, m]) => {
+      let R = m;
+      return A(R) || (Array.isArray(m) ? (R = m.map((O) => A(O) ? O : D(O) && !s2 && !o.hasLink(O) ? null : X(O, d) && !l2 || a2 ? j(O, y$1) : O), s2 || (R = R.filter(y))) : D(m) && !s2 && !o.hasLink(m) ? R = null : (X(L(m), d) && !l2 || a2) && (R = j(m, y$1))), b[G] = R, b;
+    }, {})), h ? g2 ? g2({ ...h }) : { ...h } : s2 ? t2 : null);
+  }, j = (t2, i2) => w(t2, i2) ?? t2, M = (t2) => {
+    let i2 = L(t2);
+    i2 && (o.getChildren(i2) || []).forEach((s2) => {
+      P(s2) || o.removeRefs(i2, s2);
+    });
+  }, N = (t2, i2, a2) => {
     var _a, _b, _c, _d;
-    if ((!input || l(input)) && !isLinkKey(input) || isSkipped(input)) {
-      return input;
-    }
-    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
-          });
-        }
-        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 ((internal.hasChange || isReplace) && !parentKey) {
-      notify(graphKey, prevGraph);
-    }
-    debugState.debug({
-      type: "afterMutate",
-      entity: entityGraphKey,
-      data: rawData,
-      nextData: nextGraph,
-      options: options2,
-      hasChange: internal.hasChange
+    if ((!t2 || l(t2)) && !D(t2) || A(t2)) return t2;
+    let s2 = re(t2) ? L(t2) : t2;
+    if (D(s2)) {
+      let d = ae(i2) ?? "", h = ((_a = a2 == null ? void 0 : a2.internal) == null ? void 0 : _a.visitors.get(d)) ?? [], b = ((_b = a2 == null ? void 0 : a2.internal) == null ? void 0 : _b.visitors.get(s2)) ?? [];
+      if (h.includes(s2) || s2 === d) return null;
+      (_d = (_c = a2 == null ? void 0 : a2.internal) == null ? void 0 : _c.visitors) == null ? void 0 : _d.set(s2, [...b, d]);
+    }
+    if (Array.isArray(t2)) return t2.map((d) => {
+      let h = i2 ? Z(i2, `${he++}`) : void 0;
+      return N(d, h, a2);
     });
-    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);
+    let g2 = (D(t2) ? t2 : se(t2) ? L(t2) : null) ?? i2;
+    return ((a2 == null ? void 0 : a2.overrideMutateMethod) || _)(g2, t2, a2);
+  }, _ = (t2, ...i2) => {
+    let { graphKey: a2, options: s2, data: l2 } = K(t2, ...i2);
+    E.debug({ type: "beforeMutate", entity: a2, data: l2, options: s2 });
+    let g2 = D(l2) ? C(l2) : l2, y2 = a2 ?? p, d = P == null ? void 0 : P(y2), h = s2 == null ? void 0 : s2.parent, b = w(y2 ?? ""), G = (s2 == null ? void 0 : s2.internal) || { hasChange: false, visitors: /* @__PURE__ */ new Map([]) }, m = { ...g2, ...C(y2) }, R = !(s2 == null ? void 0 : s2.parent), O = (s2 == null ? void 0 : s2.replace) ? typeof (s2 == null ? void 0 : s2.replace) == "function" ? s2.replace(m) : (s2 == null ? void 0 : s2.replace) === "deep" ? true : R || d : false;
+    if (A(g2)) return o.writeLink(y2, g2, h), y2;
+    !O && T(b) && T(m) && (m = { ...b, ...m }), O && M(y2);
+    let U = Object.entries(m).reduce((W, [H, be]) => {
+      let te = Z(y2, H), v = be, F = b == null ? void 0 : b[H], ve = T(g2) && H in g2;
+      A(v) || (!O && ve && Array.isArray(v) && Array.isArray(F) && (v = [...F, ...v]), (T(v) || Array.isArray(v) || D(v)) && (v = N(v, te, { ...s2, parent: y2, internal: G })), Array.isArray(v) && (s2 == null ? void 0 : s2.dedup) !== false && (v = oe(...v)));
+      let Le = ie(F, te === v ? j(v) : v);
+      return G.hasChange = G.hasChange || !Le, !O && D(F) && F !== v && o.removeRefs(y2, F), W[H] = v, W;
+    }, {});
+    return o.writeLink(y2, U, h), h || o.runGarbageCollector(), (G.hasChange || O) && !h && n(y2, b), E.debug({ type: "afterMutate", entity: a2, data: l2, nextData: U, options: s2, hasChange: G.hasChange }), y2;
+  }, B = (t2) => {
+    let i2 = L(t2);
+    if (E.debug({ type: "invalidate", entity: i2 }), i2) {
+      let a2 = o.getParents(i2) || [];
+      o.invalidate(i2), a2.forEach((s2) => {
+        let l2 = o.readLink(s2), g2 = w(s2, { safe: false, keepLinks: true });
+        o.writeLink(s2, g2), n(s2, l2);
       });
     }
-  };
-  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) };
+  }, n = (t2, i2, a2) => {
+    if (I > Re) throw new Error("Too deep notify.");
+    let s2 = (a2 == null ? void 0 : a2.depth) ?? 0, l2 = L(t2);
+    if (E.debug({ type: "notify", entity: l2 }), l2) {
+      I++;
+      let g2 = [...x.get(l2) || [], ...x.get(me) || []], y2 = o.getChildren(l2) || [], d = w(l2), h = (b) => {
+        let G = d && (b == null ? void 0 : b(d)), m = i2 && (b == null ? void 0 : b(i2));
+        return { next: G, prev: m, hasChange: !z(G, m) };
       };
-      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 }]);
-      }
-      cache2.onRemoveLink((link, prevValue) => {
-        if (link === key) {
-          notify(key, prevValue);
-        }
-      });
-    }
-    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);
+      g2.forEach(({ callback: b, options: G }) => {
+        let m = G == null ? void 0 : G.selector;
+        if (!(((G == null ? void 0 : G.directChangesOnly) ?? false) && s2 > 0)) if (m) {
+          let { next: O, prev: U, hasChange: W } = h(m);
+          W && b(O, U);
+        } else b(d, i2);
+      }), y2.forEach((b) => n(b, i2, { depth: s2 + 1 }));
+    }
+    I = 0;
+  }, u2 = (...t2) => {
+    let i2 = typeof t2[0] == "function" ? me : t2[0], a2 = typeof t2[0] == "function" ? t2[0] : t2[1], s2 = typeof t2[0] == "function" ? t2[1] : t2[2], l2 = L(i2);
+    l2 && (x.has(l2) ? x.set(l2, [...Array.from(x.get(l2) || []), { callback: a2, options: s2 }]) : x.set(l2, [{ callback: a2, options: s2 }]));
+    let g2 = () => {
+      if (l2) {
+        let y2 = (x.get(l2) || []).findIndex((d) => d.callback === a2);
+        if (y2 !== -1) {
+          let d = x.get(l2) || [];
+          d.splice(y2, 1), x.set(l2, d);
         }
       }
     };
-    if (options2 == null ? void 0 : options2.signal) {
-      options2.signal.addEventListener("abort", unsubscribe, { once: true });
-    }
-    return unsubscribe;
-  };
-  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);
+    return (s2 == null ? void 0 : s2.signal) && s2.signal.addEventListener("abort", g2, { once: true }), g2;
+  }, k = (t2) => [...o.types.get(t2) ?? []], S = (t2) => {
+    let i2 = (typeof t2 == "string" ? t2 : L(t2)) || "";
+    return (o.getParents(i2) ?? []).map((s2) => w(s2));
+  }, L = (t2) => (ee("Instance keyOfEntity is deprecated. Use static method keyOfEntity."), $(t2)), C = (t2) => (ee("Instance entityOfKey is deprecated. Use static method entityOfKey."), q(t2)), K = (t2, ...i2) => {
+    let a2 = typeof t2 == "string" ? i2[0] : t2;
+    return typeof a2 == "function" ? a2 = a2(w(t2)) : D(a2) && (a2 = C(a2)), { graphKey: typeof t2 == "string" ? t2 : L(t2), options: typeof t2 == "string" ? i2[1] : i2[0], data: a2 };
+  };
+  function J(t2) {
+    V.use(t2), t2(this);
   }
-  const addSkip = (predictor) => {
-    skipPredictors.push(predictor);
+  let ke = (t2) => {
+    c.push(t2);
   };
-  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);
+  (e == null ? void 0 : e.initialState) && _(e.initialState, { replace: "deep" });
+  let Ee = { _type: f2, _id: r2, key: p, getReferences: Y, mutate: _, subscribe: u2, resolve: w, safeResolve: j, resolveParents: S, inspectFields: k, invalidate: B, keyOfEntity: L, entityOfKey: C, getArgumentsForMutate: K, types: o.types, cache: o, use: J, addSkip: ke, subscribers: pe ? x : void 0, onDebugEvent: E.onDebugEvent };
+  return o.onRemoveLink((t2, i2) => E.debug({ type: "garbageRemove", entity: t2, prevValue: i2 })), o.onRemoveLink(n), V.runPlugins(Ee);
 };
 const createConstants$1 = (...constants) => {
   return constants.reduce((acc, constant) => {
@@ -637,12 +238,27 @@ const nodes = createConstants$1(
   "CssLink",
   "Variable",
   "ComputedValue",
-  "TransformValue"
+  "TransformValue",
+  "StopColor",
+  "LinearGradient",
+  "CssChunk",
+  "Border",
+  "Paint",
+  "Link",
+  "Classname",
+  "ImagePaint"
 );
 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 paintMode = createConstants$1(
+  "None",
+  "Solid",
+  "LinearGradient",
+  "RadialGradient",
+  "ConicGradient",
+  "Image"
+);
 const imagePaintScaleModes = createConstants$1("Auto", "Contain", "Cover");
 const constrain = createConstants$1(
   "Min",
@@ -733,16 +349,19 @@ 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(
+  "AreaScope",
   "InstanceScope",
   "FragmentScope",
   "CollectionScope",
   "CollectionItemScope"
 );
+const cssChunkScopeTypes = createConstants$1("Global", "Fragment");
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   borderType,
   constrain,
   createConstants: createConstants$1,
+  cssChunkScopeTypes,
   effectName,
   effectType,
   eventMode,
@@ -1577,32 +1196,8 @@ const SceneSchema = /* @__PURE__ */ object({
   }),
   visible: layerField(/* @__PURE__ */ boolean(), { fallback: true, variable: true }),
   rotate: layerField(/* @__PURE__ */ number(), { fallback: null }),
-  zIndex: layerField(/* @__PURE__ */ number(), { fallback: -1 })
-});
-const FillSchema = /* @__PURE__ */ object({
-  fillType: layerField(/* @__PURE__ */ picklist(Object.keys(paintMode)), {
-    fallback: paintMode.None
-  }),
-  solidFill: layerField(/* @__PURE__ */ string(), { fallback: "#fff" }),
-  imageFill: layerField(/* @__PURE__ */ string()),
-  imageSize: layerField(/* @__PURE__ */ picklist(Object.keys(imagePaintScaleModes)), {
-    fallback: imagePaintScaleModes.Auto
-  })
-});
-const BorderSchema = /* @__PURE__ */ object({
-  borderType: layerField(/* @__PURE__ */ picklist(Object.keys(borderType)), {
-    fallback: borderType.None
-  }),
-  borderWidth: layerField(/* @__PURE__ */ string(), {
-    fallback: "1px",
-    transform: (value) => {
-      if (typeof value === "number") {
-        return `${value}px`;
-      }
-      return value;
-    }
-  }),
-  borderColor: layerField(/* @__PURE__ */ string(), { fallback: "#fff" })
+  zIndex: layerField(/* @__PURE__ */ number(), { fallback: null }),
+  classnames: layerField(/* @__PURE__ */ array(linkValidator), { fallback: [] })
 });
 const SizeSchema = /* @__PURE__ */ object({
   widthType: layerField(/* @__PURE__ */ picklist(Object.keys(sizing)), {
@@ -1684,15 +1279,6 @@ 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 }),
@@ -1701,19 +1287,19 @@ const LinkSchema = /* @__PURE__ */ object({
       overridable: false
     }),
     isPrimary: layerField(/* @__PURE__ */ boolean(), { fallback: false, overridable: false }),
-    parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+    border: layerField(linkValidator),
+    paint: layerField(linkValidator),
+    link: layerField(linkValidator),
     ...ChildrenSchema.entries,
     ...GraphFieldSchema.entries,
     ...OverridesSchema.entries,
+    parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
     ...PositionSchema.entries,
     ...SceneSchema.entries,
-    ...FillSchema.entries,
-    ...BorderSchema.entries,
     ...SizeSchema.entries,
     ...LayerSchema.entries,
     ...InteractionsSchema.entries,
     ...CssOverrideSchema.entries,
-    ...LinkSchema.entries,
     overflow: OverflowSchema,
     borderRadius: BorderRadiusSchema
   })
@@ -1728,14 +1314,14 @@ const LinkSchema = /* @__PURE__ */ object({
   }),
   textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
   parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  link: layerField(linkValidator),
   ...GraphFieldSchema.entries,
   ...OverridesSchema.entries,
   ...CssOverrideSchema.entries,
   ...PositionSchema.entries,
   ...SceneSchema.entries,
   ...SizeSchema.entries,
-  ...InteractionsSchema.entries,
-  ...LinkSchema.entries
+  ...InteractionsSchema.entries
 });
 /* @__PURE__ */ object({
   name: layerField(/* @__PURE__ */ string(), { fallback: "Fragment", overridable: false }),
@@ -1752,6 +1338,10 @@ const LinkSchema = /* @__PURE__ */ object({
     fallback: [],
     overridable: false
   }),
+  cssChunks: layerField(/* @__PURE__ */ array(linkValidator), {
+    fallback: [],
+    overridable: false
+  }),
   ...GraphFieldSchema.entries,
   ...ChildrenSchema.entries
 });
@@ -1777,13 +1367,13 @@ const LinkSchema = /* @__PURE__ */ object({
       fallback: {}
     }
   ),
+  link: layerField(linkValidator),
   ...GraphFieldSchema.entries,
   ...OverridesSchema.entries,
   ...PositionSchema.entries,
   ...SizeSchema.entries,
   ...SceneSchema.entries,
-  ...InteractionsSchema.entries,
-  ...LinkSchema.entries
+  ...InteractionsSchema.entries
 });
 /* @__PURE__ */ object({
   nodePropertyControlReference: layerField(/* @__PURE__ */ string(), { fallback: null }),
@@ -1846,6 +1436,7 @@ const LinkSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
   isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  isRich: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
 /* @__PURE__ */ object({
@@ -1929,9 +1520,6 @@ const LinkSchema = /* @__PURE__ */ object({
   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(
@@ -1942,18 +1530,18 @@ const LinkSchema = /* @__PURE__ */ object({
     }),
     parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
     source: layerField(linkValidator, {}),
+    border: layerField(linkValidator),
+    paint: layerField(linkValidator),
+    link: 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
+    ...CssOverrideSchema.entries
   })
 );
 /* @__PURE__ */ object({
@@ -1971,17 +1559,106 @@ const LinkSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
+/* @__PURE__ */ object({
+  ...OverridesSchema.entries,
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  position: layerField(/* @__PURE__ */ pipe(/* @__PURE__ */ number(), /* @__PURE__ */ maxValue(1), /* @__PURE__ */ minValue(0)), {
+    fallback: 0
+  }),
+  value: layerField(/* @__PURE__ */ string(), { fallback: "#000", variable: true }),
+  ...GraphFieldSchema.entries
+});
+/* @__PURE__ */ object({
+  ...OverridesSchema.entries,
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  angle: layerField(/* @__PURE__ */ number(), {
+    fallback: 0
+  }),
+  stops: layerField(/* @__PURE__ */ array(linkValidator), { fallback: [] }),
+  ...GraphFieldSchema.entries
+});
+/* @__PURE__ */ object({
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  chunkId: layerField(/* @__PURE__ */ number()),
+  // content: layerField(v.string(), {
+  //   fallback: "",
+  // }),
+  // scope: layerField(v.picklist(Object.keys(definition.cssChunkScopeTypes)), {
+  //   fallback: definition.cssChunkScopeTypes.Fragment,
+  // }),
+  enabled: layerField(/* @__PURE__ */ boolean(), {
+    fallback: true,
+    variable: true
+  }),
+  ...GraphFieldSchema.entries
+});
+/* @__PURE__ */ object({
+  ...OverridesSchema.entries,
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ picklist(Object.keys(borderType)), {
+    fallback: borderType.None
+  }),
+  width: layerField(/* @__PURE__ */ string(), {
+    fallback: "1px",
+    transform: (value) => {
+      if (typeof value === "number") {
+        return `${value}px`;
+      }
+      return value;
+    }
+  }),
+  paint: layerField(linkValidator),
+  ...GraphFieldSchema.entries
+});
+/* @__PURE__ */ object({
+  ...OverridesSchema.entries,
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  type: layerField(/* @__PURE__ */ picklist(Object.keys(paintMode)), {
+    fallback: paintMode.None
+  }),
+  solid: layerField(/* @__PURE__ */ string(), { fallback: "#fff" }),
+  linearGradient: layerField(linkValidator),
+  image: layerField(linkValidator),
+  ...GraphFieldSchema.entries
+});
+/* @__PURE__ */ object({
+  ...GraphFieldSchema.entries,
+  ...OverridesSchema.entries,
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  src: layerField(/* @__PURE__ */ string()),
+  scale: layerField(/* @__PURE__ */ picklist(Object.keys(imagePaintScaleModes)), {
+    fallback: imagePaintScaleModes.Auto
+  })
+});
+/* @__PURE__ */ object({
+  ...OverridesSchema.entries,
+  ...GraphFieldSchema.entries,
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  href: layerField(/* @__PURE__ */ string(), { fallback: null }),
+  isNewTab: layerField(/* @__PURE__ */ boolean(), {
+    fallback: true
+  })
+});
+/* @__PURE__ */ object({
+  parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
+  value: layerField(/* @__PURE__ */ string(), { fallback: "" }),
+  enabled: layerField(/* @__PURE__ */ boolean(), {
+    fallback: true,
+    variable: true
+  }),
+  ...GraphFieldSchema.entries
+});
 const BASE_HEADERS = {
   "Content-Type": "application/json"
 };
 const createFetcher = (baseUrl, defaultHeaders = {}) => {
-  const cache2 = /* @__PURE__ */ new Map();
+  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 (cache2.has(cacheKey)) {
-      return cache2.get(cacheKey);
+    if (cache.has(cacheKey)) {
+      return cache.get(cacheKey);
     }
     if (inflightRequests.has(cacheKey)) {
       return inflightRequests.get(cacheKey);
@@ -2000,7 +1677,7 @@ const createFetcher = (baseUrl, defaultHeaders = {}) => {
       if (!res.ok) throw new Error(`Fetch error: ${res.status}`);
       const data = await res.json();
       if (!query2.includes("mutation")) {
-        cache2.set(cacheKey, data);
+        cache.set(cacheKey, data);
       }
       return data;
     }).finally(() => {
@@ -2010,33 +1687,48 @@ const createFetcher = (baseUrl, defaultHeaders = {}) => {
     return request;
   };
   const invalidate = (endpoint, options) => {
-    cache2.delete(getCacheKey(endpoint, options));
+    cache.delete(getCacheKey(endpoint, options));
   };
-  const clearCache = () => cache2.clear();
+  const clearCache = () => cache.clear();
   return { query, invalidate, clearCache };
 };
-const getFragmentQuery = (fragmentId, isSelf) => {
-  return {
-    query: isSelf ? `
-query FragmentDocument($fragmentId: Int!) {
-    fragment(fragmentIds: [$fragmentId]) {
+const googleFonts = `googleFonts {
+            id
+            variants
+            subsets
+            family
+            version
+            files {
+              url
+              variant
+            }
+            category
+        }`;
+const linkedCssChunk = `linkedCssChunk {
+          id
+          content
+        }`;
+const fragment = `
+      {
         id
         document
         linkedFragments {
             id
             document
         }
-    }
+        ${googleFonts}
+        ${linkedCssChunk}
+      }
+        `;
+const getFragmentQuery = (fragmentId, isSelf) => {
+  return {
+    query: isSelf ? `
+query FragmentDocument($fragmentId: Int!) {
+    fragment(fragmentIds: [$fragmentId]) ${fragment}
 }
 ` : `
 query FragmentDocument($fragmentId: Int!) {
-    clientFragment(fragmentId: $fragmentId) {
-        id
-        document
-        linkedFragments {
-            id
-            document
-        }
+    clientFragment(fragmentId: $fragmentId) ${fragment}
     }
 }`,
     variables: {
@@ -2056,10 +1748,13 @@ var createConstants = (...constants) => {
     return acc;
   }, {});
 };
+var noop = () => void 0;
 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) {
+  if (!(layerKey == null ? void 0 : layerKey.length))
+    return layerKey;
   let hash = 0;
   for (let i2 = 0; i2 < layerKey.length; i2++) {
     hash = (hash << 5) - hash + layerKey.charCodeAt(i2);
@@ -2068,6 +1763,137 @@ function hashGenerator(layerKey) {
   const raw = Math.abs(hash).toString(36);
   return /^[0-9]/.test(raw) ? `h${raw}` : raw;
 }
+function toFontFamily(category, family) {
+  const normalizedCategory = category.toLowerCase().trim();
+  const safeFamily = family.includes(" ") || family.includes(",") ? `"${family}"` : family;
+  let fallback;
+  switch (normalizedCategory) {
+    case "sans-serif":
+    case "serif":
+      const placeholder = `${family} Placeholder`;
+      const safePlaceholder = placeholder.includes(" ") || placeholder.includes(",") ? `"${placeholder}"` : placeholder;
+      fallback = `${safePlaceholder}, ${normalizedCategory}`;
+      break;
+    case "display":
+    case "handwritten":
+      fallback = "sans-serif";
+      break;
+    case "monospaced":
+      fallback = "monospace";
+      break;
+    default:
+      fallback = "sans-serif";
+  }
+  return `${safeFamily}, ${fallback}`;
+}
+var WEIGHT_NAMES = {
+  100: "Thin",
+  200: "Extra Light",
+  300: "Light",
+  400: "Regular",
+  500: "Medium",
+  600: "Semi Bold",
+  700: "Bold",
+  800: "Extra Bold",
+  900: "Black"
+};
+var VARIANT_NAMES = {
+  normal: "",
+  italic: "Italic",
+  "italic-normal": "Italic"
+};
+function parseFontWeight(value) {
+  const strValue = String(value).toLowerCase();
+  let weight = 400;
+  let variant = "normal";
+  const hasItalic = strValue.includes("italic");
+  const numericMatch = strValue.match(/\d+/);
+  if (numericMatch) {
+    weight = parseInt(numericMatch[0], 10);
+  } else {
+    switch (strValue.replace("italic", "").trim()) {
+      case "thin":
+        weight = 100;
+        break;
+      case "extralight":
+      case "extra-light":
+        weight = 200;
+        break;
+      case "light":
+        weight = 300;
+        break;
+      case "normal":
+      case "regular":
+        weight = 400;
+        break;
+      case "medium":
+        weight = 500;
+        break;
+      case "semibold":
+      case "semi-bold":
+        weight = 600;
+        break;
+      case "bold":
+        weight = 700;
+        break;
+      case "extrabold":
+      case "extra-bold":
+        weight = 800;
+        break;
+      case "black":
+        weight = 900;
+        break;
+    }
+  }
+  if (hasItalic) {
+    variant = "italic";
+    if (!numericMatch && !WEIGHT_NAMES[weight]) {
+      variant = "italic-normal";
+    }
+  }
+  return { weight, variant, name: "" };
+}
+function generateDisplayName(parsed) {
+  const { weight, variant } = parsed;
+  let baseName = WEIGHT_NAMES[weight] || `Weight ${weight}`;
+  if (variant !== "normal") {
+    if (weight === 400 && variant === "italic") {
+      baseName = "Italic";
+    } else if (variant === "italic-normal") {
+      baseName = "Italic";
+    } else if (variant === "italic") {
+      if (weight >= 100 && weight <= 300) {
+        baseName = `Thin Italic`;
+      } else {
+        const variantName = VARIANT_NAMES[variant];
+        baseName = variantName ? `${baseName} ${variantName}` : baseName;
+      }
+    }
+  }
+  return baseName.trim();
+}
+var variantOrder = {
+  normal: 0,
+  "italic-normal": 1,
+  italic: 2
+};
+function getFontWeights(values) {
+  return [...values].map((originalValue) => {
+    const parsed = parseFontWeight(originalValue);
+    const displayName = generateDisplayName(parsed);
+    return {
+      original: String(originalValue),
+      weight: parsed.weight,
+      variant: parsed.variant,
+      displayName
+    };
+  }).sort((a2, b) => {
+    if (a2.weight !== b.weight) {
+      return a2.weight - b.weight;
+    }
+    return variantOrder[a2.variant] - variantOrder[b.variant];
+  });
+}
 const fetchBeacon = (baseUrl) => {
   const sender = isBrowser_default && typeof (navigator == null ? void 0 : navigator.sendBeacon) === "function" ? navigator.sendBeacon : () => null;
   const sendBeacon = (data) => {
@@ -2085,9 +1911,24 @@ const getAreaListQuery = (areaCodes) => {
   return {
     query: `query($areaCodes: [String!]!) {
   clientAreas(areaCodes: $areaCodes) {
+  areaId
+campaignId
         areaProperties
-projectProperties
+        projectProperties
+        font {
+          id
+          variants
+          subsets
+          family
+          version
+          files {
+            url
+            variant
+          }
+          category
+        }
         variant {
+        id
           fragment {
               props
               fragment {
@@ -2097,6 +1938,18 @@ projectProperties
                       id
                       document
                   }
+                  googleFonts {
+                      id
+                      variants
+                      subsets
+                      family
+                      version
+                      files {
+                        url
+                        variant
+                      }
+                      category
+                  }
               }
           }
         }
@@ -2121,6 +1974,32 @@ const fetchPlugin = (state) => {
   }
   const fetcher = createFetcher(url, headers);
   const beaconFetcher = fetchBeacon();
+  const registerFragmentDocument = (fragmentId, fragment2) => {
+    var _a2, _b2;
+    const fragmentDocument = fragment2 == null ? void 0 : fragment2.document;
+    if (!fragmentDocument) {
+      console.error("Empty document");
+      return null;
+    }
+    if (fragment2) {
+      state.$fetch.cacheDocuments.set(fragmentId, fragmentDocument);
+      if (Array.isArray(fragment2.linkedFragments)) {
+        fragment2.linkedFragments.forEach(
+          (linkedFragment) => registerFragmentDocument(linkedFragment.id, linkedFragment)
+        );
+      }
+      if (Array.isArray(fragment2.linkedCssChunk)) {
+        fragment2.linkedCssChunk.forEach(
+          (linkedChunk) => state.$fetch.cacheCssChunks.set(linkedChunk.id, linkedChunk.content)
+        );
+      }
+      if ("$fonts" in state) {
+        (_b2 = fragment2 == null ? void 0 : fragment2.googleFonts) == null ? void 0 : _b2.forEach((_a2 = state.$fonts) == null ? void 0 : _a2.registerFont);
+      }
+      return fragmentDocument;
+    }
+    return null;
+  };
   const queryFragment = async (fragmentId) => {
     var _a2;
     if (!apiToken || !fragmentId) return null;
@@ -2133,45 +2012,28 @@ const fetchPlugin = (state) => {
       fragmentQuery.variables,
       { referrerPolicy: "unsafe-url" }
     );
-    let fragment = null;
+    let fragment2 = null;
     if (!!(response == null ? void 0 : response.data) && "clientFragment" in response.data) {
-      fragment = response.data.clientFragment;
+      fragment2 = 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;
+      fragment2 = (_a2 = response.data.fragment) == null ? void 0 : _a2.at(0);
     }
-    return null;
+    return registerFragmentDocument(fragmentId, fragment2);
   };
   const queryArea = async (areaCode) => {
     return queryAreaList([areaCode]).then((res) => res == null ? void 0 : res.at(0));
   };
-  const queryAreaList = async (areaCodes) => {
+  const queryAreaList = async (areaCodes2) => {
     var _a2;
-    if (!apiToken || !areaCodes) return null;
-    const nonLoadedAreas = areaCodes.filter(
+    if (!apiToken || !areaCodes2) return null;
+    const nonLoadedAreas = areaCodes2.filter(
       (code) => !state.$fetch.cacheAreaDocuments.has(code)
     );
     if (!nonLoadedAreas.length) {
-      return areaCodes.map(state.$fetch.cacheAreaDocuments.get);
+      return areaCodes2.map(state.$fetch.cacheAreaDocuments.get);
     }
-    const areaQuery = getAreaListQuery(areaCodes);
+    const areaQuery = getAreaListQuery(areaCodes2);
     const response = await fetcher.query(
       areaQuery.query,
       areaQuery.variables,
@@ -2180,19 +2042,10 @@ const fetchPlugin = (state) => {
     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
-            )
-          );
-        }
+        var _a3;
+        const areaCode = areaCodes2 == null ? void 0 : areaCodes2.at(index2);
+        const areaFragment = area.variant.fragment.fragment;
+        registerFragmentDocument(areaFragment.id, areaFragment);
         const resultProps = [
           ...area.projectProperties ?? [],
           ...area.areaProperties ?? []
@@ -2201,16 +2054,24 @@ const fetchPlugin = (state) => {
           return acc;
         }, area.variant.fragment.props);
         const entity = {
+          areaId: area.areaId,
+          campaignId: area.campaignId,
+          variantId: area.variant.id,
           fragmentId: area.variant.fragment.fragment.id,
+          font: area.font,
           props: resultProps
         };
+        if ("$fonts" in state) {
+          (_a3 = state.$fonts) == null ? void 0 : _a3.registerFont(area.font);
+        }
         state.$fetch.cacheAreaDocuments.set(areaCode, entity);
       });
-      return areaCodes.map((code) => state.$fetch.cacheAreaDocuments.get(code));
+      return areaCodes2.map((code) => state.$fetch.cacheAreaDocuments.get(code));
     }
     return null;
   };
   state.$fetch = {
+    cacheCssChunks: /* @__PURE__ */ new Map(),
     cacheDocuments: /* @__PURE__ */ new Map(),
     cacheAreaDocuments: /* @__PURE__ */ new Map(),
     queryFragment,
@@ -2218,6 +2079,7 @@ const fetchPlugin = (state) => {
     queryAreaList,
     query: fetcher.query,
     sendBeacon: beaconFetcher.sendBeacon,
+    readCssChunk: (id) => state.$fetch.cacheCssChunks.get(id) ?? null,
     readFragment: (fragmentId) => state.$fetch.cacheDocuments.get(fragmentId) ?? null,
     readArea: (areaCode) => state.$fetch.cacheAreaDocuments.get(areaCode) ?? null
   };
@@ -2226,11 +2088,11 @@ const getAllChildren = (layerResolver, layerKey, acc = []) => {
   var _a;
   const layer = layerResolver(layerKey) ?? {};
   if (acc.length === 0) {
-    acc.push(keyOfEntity(layerKey));
+    acc.push($(layerKey));
   }
   (_a = layer == null ? void 0 : layer.children) == null ? void 0 : _a.forEach((child) => {
     if (child) {
-      acc.push(keyOfEntity(child));
+      acc.push($(child));
       getAllChildren(layerResolver, child, acc);
     }
   });
@@ -2292,47 +2154,56 @@ const makeCss = (styles, layerResolver) => (layerKey) => {
     css: toCSS(resultCssRules) + cssOverride
   };
 };
-const autoInjector = (key, state, graphKey, transformStyles) => {
-  const removeStyle = () => {
-    if (!isBrowser_default) return;
-    const el = document.getElementById(key);
-    if (el) el.remove();
+const injectStyle = (id, styles) => {
+  if (!styles || !isBrowser_default) {
+    return noop;
+  }
+  const existing = document.getElementById(id);
+  if (existing && existing.tagName === "STYLE") {
+    existing.textContent = styles;
+    return;
+  }
+  if (existing) existing.remove();
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = styles;
+  document.head.appendChild(style);
+  return () => {
+    style.remove();
   };
-  const injectStyle = (styles) => {
+};
+const autoInjector = (key, state, graphKey, transformStyles) => {
+  let countDepends = 0;
+  const removeStyle = (customKey) => {
+    const resultKey = customKey ?? key;
     if (!isBrowser_default) return;
-    if (!styles) {
-      removeStyle();
-      return;
-    }
-    const existing = document.getElementById(key);
-    if (existing && existing.tagName === "STYLE") {
-      existing.textContent = styles;
-      return;
+    countDepends--;
+    if (countDepends <= 0) {
+      const el = document.getElementById(resultKey);
+      if (el) el.remove();
     }
-    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 }
-  );
+  if (graphKey) {
+    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(key, resultStyle);
+        }
+      },
+      { directChangesOnly: true }
+    );
+  }
   const mount = () => {
     isMounted = true;
     if (pendingStyles) {
-      injectStyle(pendingStyles);
+      countDepends++;
+      injectStyle(key, pendingStyles);
     } else {
       removeStyle();
     }
@@ -2341,7 +2212,7 @@ const autoInjector = (key, state, graphKey, transformStyles) => {
     isMounted = false;
     removeStyle();
   };
-  return { mount, unmount };
+  return { mount, unmount, injectStyle, removeStyle };
 };
 function generatePrimaryCssBlocks(layerResolver, group, cssMaker) {
   const children = getAllChildren(layerResolver, group.primary);
@@ -2392,7 +2263,7 @@ function extractStyleSheet(styles, layerResolver) {
   );
   return fragmentCssRules;
 }
-const fragmentStylesheetPlugin = (state) => {
+const fragmentStylesheetPlugin = (globalState) => (state) => {
   const KEY = `${PLUGIN_TYPES.FragmentStylesheet}:root`;
   const addStyle = (layerKey, style) => {
     state.mutate(KEY, {
@@ -2404,9 +2275,26 @@ const fragmentStylesheetPlugin = (state) => {
   state.mutate(KEY, {
     styles: {}
   });
-  const fragmentStyleInjector = autoInjector(state.key, state, KEY, (graph) => {
-    return extractStyleSheet(graph.styles, state.resolve);
-  });
+  const fragmentStyleInjector = autoInjector(
+    state.key,
+    state,
+    KEY,
+    (graph) => {
+      return extractStyleSheet(graph.styles, state.resolve);
+    }
+  );
+  const addCssChunk = (chunkId) => {
+    var _a, _b, _c, _d;
+    const chunkContent = (_b = (_a = globalState == null ? void 0 : globalState.$fetch) == null ? void 0 : _a.readCssChunk) == null ? void 0 : _b.call(_a, chunkId);
+    if (chunkContent) {
+      return (_d = (_c = globalState == null ? void 0 : globalState.$globalStylesheet) == null ? void 0 : _c.addDependStyle) == null ? void 0 : _d.call(
+        _c,
+        `CssChunk:${chunkId}`,
+        chunkContent
+      );
+    }
+    return noop;
+  };
   const destroyStyles = () => {
     state.mutate(
       KEY,
@@ -2420,12 +2308,16 @@ const fragmentStylesheetPlugin = (state) => {
   state.$styleSheet = {
     key: KEY,
     addStyle,
+    addCssChunk,
     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 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);
@@ -2447,15 +2339,25 @@ const globalStylesheetPlugin = (state) => {
       styles: [style]
     });
   };
+  const addDependStyle = (key, style) => {
+    globalStyleInjector.injectStyle(key, style);
+    return () => globalStyleInjector.removeStyle(key);
+  };
   state.mutate({
     _type: PLUGIN_TYPES.GlobalStylesheet,
     _id: "root",
     styles: []
   });
   const globalStyleInjector = autoInjector("global", state, KEY);
+  const addStyleTag = (key, style) => {
+    globalStyleInjector.injectStyle(style, key);
+    return () => globalStyleInjector.removeStyle(key);
+  };
   state.$globalStylesheet = {
     key: KEY,
     addStyle,
+    addDependStyle,
+    addStyleTag,
     mount: globalStyleInjector.mount,
     unmount: globalStyleInjector.unmount,
     extractStyles: () => {
@@ -2501,7 +2403,7 @@ const fragmentsPlugin = (options) => (state) => {
       _type: "Spring",
       _id: "root"
     };
-    const manager = createState({
+    const manager = kt({
       _type: "FragmentManager",
       _id: fragmentId,
       initialState: initialDocument,
@@ -2513,7 +2415,7 @@ const fragmentsPlugin = (options) => (state) => {
           };
         },
         // cssPlugin,
-        fragmentStylesheetPlugin,
+        fragmentStylesheetPlugin(state),
         scopesPlugin,
         ...plugins
       ],
@@ -2536,6 +2438,7 @@ const fragmentsPlugin = (options) => (state) => {
         [fragmentId]: manager
       }
     });
+    return manager;
   };
   const getManager = (fragmentId) => {
     var _a, _b;
@@ -2558,8 +2461,8 @@ const fragmentsPlugin = (options) => (state) => {
   });
   return state;
 };
-const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: String) {
-  addClientMetric(metric: {metricType: $type, metricValue: $value})
+const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: GoalAchievementPost!) {
+  addClientMetric(metric: {metricType: $type, achievement: $value})
 }`;
 const pendingPixels = /* @__PURE__ */ new Set();
 const sendWithImage = (url) => {
@@ -2687,7 +2590,11 @@ const loadPlugin = (state) => {
     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);
+      const fragmentManager2 = state.$fragments.createFragmentManager(
+        fragmentId,
+        readFragment
+      );
+      return fragmentManager2;
     }
     if (readFragment && fragmentManager) return fragmentManager;
     const loader = async () => {
@@ -2732,6 +2639,56 @@ const loadPlugin = (state) => {
     readArea
   };
 };
+const fontsPlugin = (state) => {
+  const fonts = /* @__PURE__ */ new Map();
+  let defaultFontFamily = null;
+  const registerFont = (font) => {
+    const fontFamily = font.family;
+    if (!fonts.has(fontFamily)) {
+      fonts.set(fontFamily, font);
+      getStyles();
+    }
+  };
+  const setDefaultFont = (fontFamily) => {
+    defaultFontFamily = fontFamily;
+    getStyles();
+  };
+  const getStyles = () => {
+    const styles = [];
+    for (const [fontFamily, font] of fonts) {
+      const files = font.files ?? [];
+      for (const file of files) {
+        const [weightItem] = getFontWeights([file.variant]);
+        styles.push(`@font-face {
+  font-family: '${fontFamily}';
+  font-style: ${weightItem.variant};
+  font-weight: ${weightItem.weight};
+  font-display: swap;
+  src: url(${file.url}) format('woff2');
+}`);
+      }
+    }
+    if (defaultFontFamily) {
+      const font = fonts.get(defaultFontFamily);
+      if (font) {
+        const fontFamily = toFontFamily(font.category, font.family);
+        styles.push(`
+      [data-key^="Fragment"] {
+        * {
+          font-family: ${fontFamily}, sans-serif;        
+        }
+      }`);
+      }
+    }
+    injectStyle("fonts", styles.join("\n"));
+  };
+  state.$fonts = {
+    fonts,
+    registerFont,
+    setDefaultFont
+  };
+  return state;
+};
 const PLUGIN_TYPES = createConstants(
   "FragmentsPlugin",
   "GlobalStylesheet",
@@ -2739,7 +2696,7 @@ const PLUGIN_TYPES = createConstants(
 );
 const createFragmentsClient = (options) => {
   const BACKEND_TARGET = (options == null ? void 0 : options.isSelf) ? "/graphql" : "http://85.192.29.65/graphql";
-  return createState({
+  return kt({
     _type: "GlobalManager",
     initialState: {},
     skip: [
@@ -2758,12 +2715,14 @@ const createFragmentsClient = (options) => {
         };
       },
       fetchPlugin,
+      fontsPlugin,
       fragmentsPlugin({
         plugins: options == null ? void 0 : options.fragmentPlugins
       }),
       loadPlugin,
       globalMetricsPlugin,
       globalStylesheetPlugin
+      // stylesPlugin,
     ]
   });
 };