@fragmentsx/render-react 1.3.0 → 1.5.0

package/dist/index.cjs.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const definition = require("@fragmentsx/definition");
 const jsxRuntime = require("react/jsx-runtime");
-const react$1 = require("@graph-state/react");
 const utils = require("@fragmentsx/utils");
 const core = require("@graph-state/core");
+const react$1 = require("@graph-state/react");
+const clientCore = require("@fragmentsx/client-core");
 const GlobalManagerContext = react.createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
 const FragmentContext = react.createContext({
@@ -24,35 +25,9 @@ const RenderTargetContext = react.createContext(
   definition.definition.renderTarget.document
 );
 const RenderTargetProvider = RenderTargetContext.Provider;
+const AreaManagerContext = react.createContext(null);
+const AreaManagerProvider = AreaManagerContext.Provider;
 const ScopeContext = react.createContext([]);
-const useGlobalManager = (globalManager) => {
-  var _a, _b;
-  const currentGlobalManager = react.useContext(GlobalManagerContext);
-  const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = react$1.useGraph(
-    resultManager,
-    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
-  );
-  const queryFragmentManager = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
-  };
-  const queryArea = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
-  };
-  const setRenderTarget = (value) => {
-    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
-  };
-  return {
-    fragmentsGraph,
-    manager: resultManager,
-    queryFragmentManager,
-    queryArea,
-    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? utils.noop,
-    setRenderTarget
-  };
-};
 const Scope = ({
   value,
   children,
@@ -60,9 +35,11 @@ const Scope = ({
   layerKey
 }) => {
   var _a, _b;
-  const { manager: globalManager } = useGlobalManager();
   const currentScope = react.useContext(ScopeContext) ?? [];
-  const nextScope = [...currentScope, value];
+  const nextScope = react.useMemo(
+    () => [...currentScope, value],
+    [currentScope, value]
+  );
   (_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.registerScope) == null ? void 0 : _b.call(_a, layerKey, value);
   return /* @__PURE__ */ jsxRuntime.jsx(ScopeContext.Provider, { value: nextScope, children });
 };
@@ -73,191 +50,6 @@ const getOverrider = (manager, layerEntity) => {
   const layer = manager.resolve(layerEntity);
   return manager.resolve(getKey(layer == null ? void 0 : layer.overrideFrom) ?? layerEntity);
 };
-const getLayer = (manager, layer, options) => {
-  if (!manager || !layer) return null;
-  const layerKey = manager.keyOfEntity(layer);
-  const layerData = manager.resolve(layerKey);
-  const overrider = getOverrider(manager, layerKey);
-  return definition.getNormalizeLayer(layerData, overrider, options == null ? void 0 : options.withFallback);
-};
-const getNormalizeLayer = (layerKey, manager, options) => {
-  const layer = manager == null ? void 0 : manager.resolve(layerKey);
-  const parsedLayer = getLayer(manager, layerKey, options);
-  return {
-    layerKey,
-    rawLayer: layer,
-    layer: parsedLayer
-  };
-};
-const useNormalizeLayer = (layerKey, manager, options) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  if (!resultManager) {
-    return {
-      layerKey,
-      rawLayer: null,
-      layer: null
-    };
-  }
-  return getNormalizeLayer(layerKey, resultManager, options);
-};
-const useNormalizeLayers = (layerKeys, manager, options) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  return layerKeys.map(
-    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
-  );
-};
-function useForceUpdate() {
-  return react.useReducer(() => ({}), {});
-}
-const extractVariableValue = (input, variableId) => {
-  if (utils.isObject(input)) {
-    if (variableId in input) {
-      return input[variableId];
-    }
-    for (let key in input) {
-      if (input.hasOwnProperty(key)) {
-        const result = extractVariableValue(input[key], variableId);
-        if (result !== void 0) {
-          return result;
-        }
-      }
-    }
-  }
-  return void 0;
-};
-function deepMerge(a, b) {
-  if (!utils.isObject(a) || !utils.isObject(b)) return a;
-  const result = { ...b };
-  for (const [key, value] of Object.entries(a)) {
-    if (key in result && typeof result[key] === "object" && typeof value === "object") {
-      result[key] = deepMerge(value, result[key]);
-    } else {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-const useReadVariable = (variableKey, customScopes) => {
-  const contextScopes = react.useContext(ScopeContext);
-  const scopes = customScopes ?? contextScopes;
-  const unmountAbortController = react.useRef(new AbortController());
-  const [dep, forceUpdate] = useForceUpdate();
-  react.useEffect(
-    () => () => {
-      var _a;
-      (_a = unmountAbortController.current) == null ? void 0 : _a.abort("unmount");
-    },
-    []
-  );
-  const extractVariableDefaultValue = (manager, variableEntity) => {
-    const variableLayer = manager.resolve(variableEntity);
-    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.definition.variableType.Object)
-      return variableLayer == null ? void 0 : variableLayer.defaultValue;
-    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
-      (acc, fieldLink) => {
-        var _a;
-        if (!!fieldLink && definition.isVariableLink(fieldLink)) {
-          const _id = (_a = core.entityOfKey(fieldLink)) == null ? void 0 : _a._id;
-          if (_id) {
-            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  };
-  const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a, _b;
-    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
-    if (!variableLayer) return null;
-    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
-      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
-        return variableLayer;
-      const definitionDefaultValue = extractVariableDefaultValue(
-        manager,
-        definitionLayer
-      );
-      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
-      return {
-        ...variableLayer,
-        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
-          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
-          return deepMerge(
-            customItemValue ? { ...item, ...customItemValue } : item,
-            definitionDefaultValue
-          );
-        })
-      };
-    }
-    return variableLayer;
-  };
-  const readVariable = (variableKey2) => {
-    var _a, _b, _c, _d, _e;
-    const variableId = (_a = core.entityOfKey(variableKey2)) == null ? void 0 : _a._id;
-    if (!definition.isVariableLink(variableKey2)) {
-      return {
-        value: null,
-        layer: null
-      };
-    }
-    let instanceScope = scopes.findLast(
-      (scope) => {
-        var _a2;
-        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
-      }
-    );
-    if (!instanceScope) {
-      instanceScope = scopes.find(
-        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
-      );
-    }
-    const variableLayer = resolveVariableLayer(
-      instanceScope == null ? void 0 : instanceScope.documentManager,
-      variableKey2
-    );
-    (_c = instanceScope == null ? void 0 : instanceScope.documentManager) == null ? void 0 : _c.subscribe(variableKey2, forceUpdate, {
-      signal: (_b = unmountAbortController.current) == null ? void 0 : _b.signal
-    });
-    let instanceProp = (_d = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _d[variableId];
-    if (Array.isArray(instanceProp)) {
-      instanceProp = instanceProp.map(
-        (rawProp, index) => {
-          var _a2;
-          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
-        }
-      );
-    }
-    const lastCollectionItem = scopes.findLast(
-      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
-    );
-    resolveVariableLayer(
-      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.value
-    );
-    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_e = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _e._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
-    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
-    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
-    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
-    if (definition.isVariableLink(resultValue)) {
-      return readVariable(resultValue);
-    }
-    return {
-      value: resultValue,
-      layer: variableLayer
-    };
-  };
-  const result = readVariable(variableKey);
-  return {
-    ...result,
-    readVariable
-  };
-};
 const getParent = (manager, layerKey) => {
   const layer = manager.resolve(layerKey);
   return manager.resolve(getKey(layer == null ? void 0 : layer.parent) ?? null);
@@ -433,6 +225,9 @@ const cloneLayer = (manager, layer, externalProps = {}) => {
       layerGraph,
       (key, value, history) => {
         const isRoot = history.length <= 2;
+        if ((value == null ? void 0 : value._type) === definition.definition.nodes.Instance && key === "props") {
+          return utils.cleanGraph(value);
+        }
         if (!!value && n(value) && !IGNORE_TYPES.includes(value._type)) {
           const nextId = utils.generateId();
           const parentFromValue = utils.getKey(value.parent);
@@ -669,6 +464,41 @@ const moveChildren = (manager, targetKey, to, index) => {
     spliceChildren(manager, targetParent, targetKey);
   }
 };
+const getLayer = (manager, layer, options) => {
+  if (!manager || !layer) return null;
+  const layerKey = manager.keyOfEntity(layer);
+  const layerData = manager.resolve(layerKey);
+  const overrider = getOverrider(manager, layerKey);
+  return definition.getNormalizeLayer(layerData, overrider, options == null ? void 0 : options.withFallback);
+};
+const getNormalizeLayer = (layerKey, manager, options) => {
+  const layer = manager == null ? void 0 : manager.resolve(layerKey);
+  const parsedLayer = getLayer(manager, layerKey, options);
+  return {
+    layerKey,
+    rawLayer: layer,
+    layer: parsedLayer
+  };
+};
+const useNormalizeLayer = (layerKey, manager, options) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
+  return getNormalizeLayer(layerKey, resultManager, options);
+};
+const useNormalizeLayers = (layerKeys, manager, options) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  return layerKeys.map(
+    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
+  );
+};
 const calcBackground = (manager, layerKey) => {
   manager.resolve(layerKey);
   const { layer } = getNormalizeLayer(layerKey, manager);
@@ -804,111 +634,15 @@ const toCssCustomProperties = (props) => {
     {}
   );
 };
-const resolveFieldVar = (field, manager) => {
-  if (utils.isObject(field) && (field == null ? void 0 : field._id)) {
-    return field;
-  }
-  if (definition.isVariableLink(field) && manager) {
-    return manager.resolve(field);
+const declareFragmentProperty = (manager, property, fragmentLink = manager.$fragment.root) => {
+  const propertyLayer = createLayer(property);
+  if (propertyLayer && "type" in propertyLayer) {
+    manager.mutate(manager.keyOfEntity(fragmentLink), {
+      properties: [propertyLayer]
+    });
+    return manager.keyOfEntity(propertyLayer);
   }
-  return void 0;
-};
-const toVariableLink = (field) => {
-  if (definition.isVariableLink(field)) {
-    return field;
-  }
-  if (utils.isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
-    return core.keyOfEntity(field);
-  }
-  return void 0;
-};
-const expandConcreteValue = (objectVar, valueObj, childManager, result) => {
-  const fields = utils.cleanGraph(objectVar.fields);
-  for (const [fieldName, childField] of Object.entries(fields)) {
-    if (!(fieldName in valueObj)) continue;
-    const childFieldVar = resolveFieldVar(childField, childManager);
-    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
-    const fieldValue = valueObj[fieldName];
-    if (childFieldVar.type === definition.definition.variableType.Object && childFieldVar.fields && utils.isObject(fieldValue)) {
-      expandConcreteValue(
-        childFieldVar,
-        fieldValue,
-        childManager,
-        result
-      );
-      continue;
-    }
-    result[childFieldVar._id] = fieldValue;
-  }
-};
-const expandVariableValue = (childObjectVar, parentObjectVar, childManager, resolveManager, result) => {
-  const childFields = utils.cleanGraph(childObjectVar.fields);
-  const parentFields = utils.cleanGraph(parentObjectVar.fields);
-  for (const [fieldName, childField] of Object.entries(childFields)) {
-    const parentField = parentFields[fieldName];
-    if (!parentField) continue;
-    const childFieldVar = resolveFieldVar(childField, childManager);
-    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
-    const parentFieldVar = resolveFieldVar(parentField, resolveManager);
-    if (childFieldVar.type === definition.definition.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === definition.definition.variableType.Object && (parentFieldVar == null ? void 0 : parentFieldVar.fields)) {
-      expandVariableValue(
-        childFieldVar,
-        parentFieldVar,
-        childManager,
-        resolveManager,
-        result
-      );
-      continue;
-    }
-    const parentFieldLink = toVariableLink(parentField);
-    if (parentFieldLink) {
-      result[childFieldVar._id] = parentFieldLink;
-    }
-  }
-};
-const expandObjectProps = (props, childManager, parentManager) => {
-  if (!childManager) return props;
-  const resolveManager = parentManager ?? childManager;
-  const result = {};
-  for (const [propKey, propValue] of Object.entries(props)) {
-    const childVarKey = `Variable:${propKey}`;
-    const childVar = childManager.resolve(childVarKey);
-    if ((childVar == null ? void 0 : childVar.type) === definition.definition.variableType.Object && (childVar == null ? void 0 : childVar.fields)) {
-      if (definition.isVariableLink(propValue)) {
-        const parentVar = resolveManager.resolve(propValue);
-        if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Object && (parentVar == null ? void 0 : parentVar.fields)) {
-          expandVariableValue(
-            childVar,
-            parentVar,
-            childManager,
-            resolveManager,
-            result
-          );
-          continue;
-        }
-      } else if (utils.isObject(propValue)) {
-        expandConcreteValue(
-          childVar,
-          propValue,
-          childManager,
-          result
-        );
-        continue;
-      }
-    }
-    result[propKey] = propValue;
-  }
-  return result;
-};
-const declareFragmentProperty = (manager, property, fragmentLink = manager.$fragment.root) => {
-  const propertyLayer = createLayer(property);
-  if (propertyLayer && "type" in propertyLayer) {
-    manager.mutate(manager.keyOfEntity(fragmentLink), {
-      properties: [propertyLayer]
-    });
-    return manager.keyOfEntity(propertyLayer);
-  }
-  return null;
+  return null;
 };
 const getStylesheetKey = (fragmentKey) => {
   const isLink2 = core.isLinkKey(fragmentKey);
@@ -951,22 +685,6 @@ function getHydratedData(id) {
     return null;
   }
 }
-const loadFragmentManager = async (globalManager, fragmentId) => {
-  var _a, _b;
-  const { document: document2, linkedFragments } = await ((_b = (_a = globalManager == null ? void 0 : globalManager.$fetch) == null ? void 0 : _a.queryFragment) == null ? void 0 : _b.call(_a, fragmentId));
-  if (fragmentId && document2) {
-    if (linkedFragments) {
-      linkedFragments.forEach(({ id, document: document22 }) => {
-        globalManager == null ? void 0 : globalManager.$fragments.createFragmentManager(id, document22);
-      });
-    }
-    return globalManager == null ? void 0 : globalManager.$fragments.createFragmentManager(
-      fragmentId,
-      document2
-    );
-  }
-  return null;
-};
 const createSuspenseResource = (key, valueOrPromise, cache) => {
   if (cache.has(key)) return cache.get(key);
   if (!(valueOrPromise instanceof Promise)) {
@@ -1122,6 +840,472 @@ const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value,
     );
   }
 };
+const EMPTY_RESOLVED$1 = {
+  layerKey: null,
+  rawLayer: null,
+  layer: null,
+  isOverride: false
+};
+const useResolvedLayer = (layerKey, options) => {
+  const { manager } = react.useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? manager;
+  const key = core.keyOfEntity(layerKey);
+  react$1.useGraph(resultManager, key);
+  if (!resultManager || !key) {
+    return EMPTY_RESOLVED$1;
+  }
+  const rawLayer = resultManager.resolve(key);
+  const overrider = getOverrider(resultManager, key);
+  const layer = definition.getNormalizeLayer(rawLayer, overrider, options == null ? void 0 : options.withFallback);
+  let isOverride = false;
+  if (!(options == null ? void 0 : options.skipOverrideCheck)) {
+    isOverride = !isPartOfPrimary(resultManager, key);
+  }
+  return { layerKey: key, rawLayer, layer, isOverride };
+};
+function useForceUpdate() {
+  return react.useReducer(() => ({}), {});
+}
+const EMPTY_RESOLVED = {
+  values: {},
+  cssVariableValues: {},
+  rawValues: {}
+};
+const extractVariableValue$1 = (input, variableId) => {
+  if (utils.isObject(input)) {
+    if (variableId in input) return input[variableId];
+    for (const key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue$1(input[key], variableId);
+        if (result !== void 0) return result;
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge$1(a, b) {
+  if (!utils.isObject(a) || !utils.isObject(b)) return a;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge$1(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useResolvedLayerVariables = (layer, rawLayer, customScopes) => {
+  var _a;
+  const contextScopes = react.useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = react.useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  react.useEffect(() => {
+    const controller = new AbortController();
+    let ready = false;
+    const update = () => {
+      if (!ready) return;
+      forceUpdate();
+    };
+    for (const { manager, key } of subscriptions.current) {
+      manager.subscribe(key, update, { signal: controller.signal });
+    }
+    ready = true;
+    return () => controller.abort();
+  });
+  if (!layer) {
+    subscriptions.current = [];
+    return EMPTY_RESOLVED;
+  }
+  const values = {};
+  const cssVariableValues = {};
+  const rawValues = {};
+  const readVariable = (variableKey) => {
+    var _a2, _b, _c;
+    const variableId = (_a2 = core.entityOfKey(variableKey)) == null ? void 0 : _a2._id;
+    if (!definition.isVariableLink(variableKey)) {
+      return { value: null, layer: null };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a3;
+        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a3 = scope.documentManager) == null ? void 0 : _a3.resolve(variableKey));
+      }
+    );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
+      );
+    }
+    const resolveVariableLayer = (manager, variableLink, customProps) => {
+      var _a3, _b2;
+      const variableLayer2 = (_a3 = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a3.layer;
+      if (!variableLayer2) return null;
+      if ((variableLayer2 == null ? void 0 : variableLayer2.type) === definition.definition.variableType.Array) {
+        const definitionLayer = manager.resolve(variableLayer2 == null ? void 0 : variableLayer2.definition);
+        if (!((_b2 = variableLayer2 == null ? void 0 : variableLayer2.defaultValue) == null ? void 0 : _b2.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
+          return variableLayer2;
+        const extractVariableDefaultValue = (mgr, varEntity) => {
+          const varLayer = mgr.resolve(varEntity);
+          if ((varLayer == null ? void 0 : varLayer.type) !== definition.definition.variableType.Object)
+            return varLayer == null ? void 0 : varLayer.defaultValue;
+          return Object.values((varLayer == null ? void 0 : varLayer.fields) ?? {}).reduce(
+            (acc, fieldLink) => {
+              var _a4;
+              if (!!fieldLink && definition.isVariableLink(fieldLink)) {
+                const _id = (_a4 = core.entityOfKey(fieldLink)) == null ? void 0 : _a4._id;
+                if (_id) acc[_id] = extractVariableDefaultValue(mgr, fieldLink);
+              }
+              return acc;
+            },
+            {}
+          );
+        };
+        const definitionDefaultValue = extractVariableDefaultValue(
+          manager,
+          definitionLayer
+        );
+        const customValue = customProps == null ? void 0 : customProps[variableLayer2 == null ? void 0 : variableLayer2._id];
+        return {
+          ...variableLayer2,
+          defaultValue: variableLayer2.defaultValue.map(
+            (item, index) => {
+              const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
+              return deepMerge$1(
+                customItemValue ? { ...item, ...customItemValue } : item,
+                definitionDefaultValue
+              );
+            }
+          )
+        };
+      }
+      return variableLayer2;
+    };
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey
+    );
+    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey) {
+      subscriptions.current.push({
+        manager: instanceScope.documentManager,
+        key: variableKey
+      });
+    }
+    let instanceProp = variableId ? (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId] : void 0;
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index) => {
+          var _a3;
+          return deepMerge$1(rawProp, (_a3 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a3.at(index));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue$1(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (definition.isVariableLink(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return { value: resultValue, layer: variableLayer };
+  };
+  const resolveField = (fieldPath, value, raw) => {
+    var _a2;
+    rawValues[fieldPath] = raw;
+    if (definition.isVariableLink(value)) {
+      const resolved = readVariable(value);
+      values[fieldPath] = resolved.value ?? value;
+      const variableId = (_a2 = core.entityOfKey(value)) == null ? void 0 : _a2._id;
+      cssVariableValues[fieldPath] = `var(--${variableId}, ${transformCssValue(
+        resolved.value ?? value
+      )})`;
+    } else {
+      values[fieldPath] = value;
+      cssVariableValues[fieldPath] = transformCssValue(value);
+    }
+  };
+  subscriptions.current = [];
+  for (const [field, value] of Object.entries(layer)) {
+    resolveField(field, value, rawLayer == null ? void 0 : rawLayer[field]);
+    if (utils.isObject(value) && !definition.isVariableLink(value)) {
+      for (const [nestedField, nestedValue] of Object.entries(
+        value
+      )) {
+        resolveField(
+          `${field}.${nestedField}`,
+          nestedValue,
+          (_a = rawLayer == null ? void 0 : rawLayer[field]) == null ? void 0 : _a[nestedField]
+        );
+      }
+    }
+  }
+  return { values, cssVariableValues, rawValues };
+};
+const useRenderTarget = () => {
+  const renderTarget = react.useContext(RenderTargetContext);
+  return {
+    renderTarget,
+    isCanvas: renderTarget === definition.definition.renderTarget.canvas,
+    isDocument: renderTarget === definition.definition.renderTarget.document
+  };
+};
+const useReadVariables = (variableKeys) => {
+  const filterKeys = variableKeys.filter(definition.isVariableLink);
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const { props, innerManager, layerKey } = react.useContext(InstanceContext);
+  const resultManager = innerManager ?? fragmentManager;
+  const variableLayers = react$1.useGraphStack(
+    !!filterKeys.length ? resultManager : null,
+    filterKeys,
+    {
+      selector: (graph) => graph ? utils.pick(graph, "defaultValue", "required") : graph
+    }
+  );
+  return variableLayers.map((layer) => {
+    const { _id: propertyId } = layer ?? {};
+    const currentValue = (props == null ? void 0 : props[propertyId]) ?? null;
+    const required = (layer == null ? void 0 : layer.required) ?? false;
+    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? defaultValue;
+    return {
+      value: resultValue,
+      layer
+    };
+  });
+};
+const extractVariableValue = (input, variableId) => {
+  if (utils.isObject(input)) {
+    if (variableId in input) {
+      return input[variableId];
+    }
+    for (let key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue(input[key], variableId);
+        if (result !== void 0) {
+          return result;
+        }
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge(a, b) {
+  if (!utils.isObject(a) || !utils.isObject(b)) return a;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useReadVariable = (variableKey, customScopes) => {
+  const contextScopes = react.useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = react.useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  react.useEffect(() => {
+    const controller = new AbortController();
+    let ready = false;
+    const update = () => {
+      if (!ready) return;
+      forceUpdate();
+    };
+    for (const { manager, key } of subscriptions.current) {
+      manager.subscribe(key, update, { signal: controller.signal });
+    }
+    ready = true;
+    return () => controller.abort();
+  });
+  const extractVariableDefaultValue = (manager, variableEntity) => {
+    const variableLayer = manager.resolve(variableEntity);
+    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.definition.variableType.Object)
+      return variableLayer == null ? void 0 : variableLayer.defaultValue;
+    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
+      (acc, fieldLink) => {
+        var _a;
+        if (!!fieldLink && definition.isVariableLink(fieldLink)) {
+          const _id = (_a = core.entityOfKey(fieldLink)) == null ? void 0 : _a._id;
+          if (_id) {
+            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  };
+  const resolveVariableLayer = (manager, variableLink, customProps) => {
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
+    if (!variableLayer) return null;
+    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
+      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
+        return variableLayer;
+      const definitionDefaultValue = extractVariableDefaultValue(
+        manager,
+        definitionLayer
+      );
+      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
+      return {
+        ...variableLayer,
+        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
+          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
+          return deepMerge(
+            customItemValue ? { ...item, ...customItemValue } : item,
+            definitionDefaultValue
+          );
+        })
+      };
+    }
+    return variableLayer;
+  };
+  const readVariable = (variableKey2) => {
+    var _a, _b, _c;
+    const variableId = (_a = core.entityOfKey(variableKey2)) == null ? void 0 : _a._id;
+    if (!definition.isVariableLink(variableKey2)) {
+      return {
+        value: null,
+        layer: null
+      };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a2;
+        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
+      }
+    );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
+      );
+    }
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey2
+    );
+    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey2) {
+      subscriptions.current.push({
+        manager: instanceScope.documentManager,
+        key: variableKey2
+      });
+    }
+    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index) => {
+          var _a2;
+          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (definition.isVariableLink(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return {
+      value: resultValue,
+      layer: variableLayer
+    };
+  };
+  subscriptions.current = [];
+  const result = readVariable(variableKey);
+  return {
+    ...result,
+    readVariable,
+    _dep: dep
+  };
+};
+const useLayersValue = (layerKeys, fieldKey, options) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
+  if (!resultManager) {
+    return [];
+  }
+  const keys = (layerKeys == null ? void 0 : layerKeys.map(core.keyOfEntity)) ?? [];
+  react$1.useGraphStack(resultManager, keys, {
+    // selector: (data) => (data ? pick(data, fieldKey) : data),
+  });
+  const normalizeLayers = useNormalizeLayers(keys, resultManager, options);
+  const { readVariable } = useReadVariable(null, options == null ? void 0 : options.scopes);
+  return normalizeLayers.map((normalizedLayer) => {
+    var _a, _b;
+    const rawValue = utils.get(normalizedLayer.rawLayer, fieldKey);
+    const layerValue = utils.get(normalizedLayer.layer, fieldKey);
+    const variableValue = (_a = readVariable(layerValue)) == null ? void 0 : _a.value;
+    const currentValue = variableValue ?? layerValue;
+    const isInherit = isInheritField(
+      resultManager,
+      normalizedLayer.layerKey,
+      fieldKey
+    );
+    const isOverride = !isInherit && !isPartOfPrimary(resultManager, normalizedLayer.layerKey);
+    const setter = layerFieldSetter(
+      resultManager,
+      normalizedLayer.layerKey,
+      fieldKey,
+      currentValue
+    );
+    const resetOverride = () => {
+      resultManager.mutate(
+        normalizedLayer.layerKey,
+        (prev) => {
+          const r = utils.omit(prev, fieldKey);
+          return r;
+        },
+        { replace: true }
+      );
+    };
+    const restore = (fallbackValue) => {
+      var _a2, _b2, _c;
+      const tempValue = ((_c = (_b2 = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b2[normalizedLayer.layerKey]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
+      return tempValue;
+    };
+    const updateValue = (value, options2) => {
+      setter(value, options2);
+    };
+    const isVariable = definition.isVariableLink(rawValue ?? layerValue);
+    const variableId = isVariable ? (_b = core.entityOfKey(layerValue)) == null ? void 0 : _b._id : null;
+    return [
+      currentValue,
+      updateValue,
+      {
+        isOverride,
+        resetOverride,
+        isVariable,
+        cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
+        rawValue,
+        restore,
+        ...resultManager.entityOfKey(normalizedLayer.layerKey)
+      }
+    ];
+  });
+};
 const useLayerValue = (layerKey, fieldKey, options) => {
   var _a;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1182,12 +1366,107 @@ const useLayerValue = (layerKey, fieldKey, options) => {
     }
   ];
 };
+const useLayerChildren = (layerKey, customManager) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const [layerData] = react$1.useGraph(customManager ?? fragmentManager, layerKey, {
+    selector: (data) => utils.pick(data, "children")
+  });
+  return (layerData == null ? void 0 : layerData.children) ?? [];
+};
+const useLayerScopes = (fragmentManager, layerKey) => {
+  var _a, _b, _c, _d;
+  if (!fragmentManager || !layerKey) return [];
+  const layerParents = getAllParents(fragmentManager, layerKey);
+  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
+  layerParents.forEach((parent) => {
+    var _a2, _b2, _c2, _d2;
+    const parentLink = core.keyOfEntity(parent);
+    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
+      resultScopes.push((_d2 = (_c2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c2.scopes) == null ? void 0 : _d2.get(parentLink));
+    }
+  });
+  const areaScope = (_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get("Area");
+  if (areaScope) {
+    resultScopes.push(areaScope);
+  }
+  return resultScopes;
+};
+const useLayerLink = (layerKey) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const [link] = useLayerValue(layerKey, "link", fragmentManager);
+  const [href] = useLayerValue(link, "href", fragmentManager);
+  const [isNewTab] = useLayerValue(link, "isNewTab", fragmentManager);
+  const isLink2 = utils.isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
+  const linkTarget = isNewTab ? "_blank" : "";
+  const linkProps = react.useMemo(() => {
+    if (isLink2) {
+      return {
+        target: linkTarget,
+        href
+      };
+    }
+    return {};
+  }, [linkTarget, href, isLink2]);
+  return {
+    isLink: isLink2,
+    linkHref: href,
+    linkTarget,
+    linkProps
+  };
+};
+const useLayerVariableValue = (layerKey, fieldKey, manager) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  const [layerValue, updateValue, layerInfo] = useLayerValue(
+    layerKey,
+    fieldKey,
+    resultManager
+  );
+  const { value: instanceValue } = useReadVariable(
+    (layerInfo == null ? void 0 : layerInfo.isVariable) ? layerValue : null
+  );
+  return [
+    (layerInfo == null ? void 0 : layerInfo.isVariable) ? instanceValue : layerValue,
+    updateValue,
+    {
+      ...layerInfo,
+      rawValue: layerValue
+    }
+  ];
+};
+const useLayerLinearGradient = (linearGradientLink) => {
+  const [stops] = useLayerValue(linearGradientLink, "stops");
+  const [angle] = useLayerValue(linearGradientLink, "angle");
+  const stopsValue = useLayersValue(stops, "value");
+  const stopsPosition = useLayersValue(stops, "position");
+  const stopValues = react.useMemo(
+    () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
+      var _a, _b, _c;
+      return [
+        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
+        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
+      ];
+    })) ?? [],
+    [stops, stopsValue, stopsPosition]
+  );
+  return react.useMemo(
+    () => ({
+      "background-image": calcLinearGradient(angle, stopValues)
+    }),
+    [angle, stopValues]
+  );
+};
 const processOptionalSize = (value, type) => {
   if (value === -1) return "";
   if (type === definition.definition.sizing.Fixed) return utils.toPx(value);
   if (type === definition.definition.sizing.Relative) return `${value}%`;
   return "";
 };
+const calcOptionalSize = (type, vars) => {
+  const value = vars.values[type];
+  const valueType = vars.values[`${type}Type`];
+  return processOptionalSize(value, valueType);
+};
 const useOptionalSize = (type, layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [value] = useLayerValue(layerKey, type, fragmentManager);
@@ -1197,6 +1476,14 @@ const useOptionalSize = (type, layerKey) => {
     [valueType, value]
   );
 };
+const calcLayerSize = (vars) => {
+  return {
+    minWidth: calcOptionalSize("minWidth", vars),
+    minHeight: calcOptionalSize("minHeight", vars),
+    maxWidth: calcOptionalSize("maxWidth", vars),
+    maxHeight: calcOptionalSize("maxHeight", vars)
+  };
+};
 const useLayerSize = (layerKey) => {
   const { manager } = react.useContext(FragmentContext);
   const minWidth = useOptionalSize("minWidth", layerKey);
@@ -1208,19 +1495,34 @@ const useLayerSize = (layerKey) => {
     // height: heightCalc(heightValue),
     minWidth,
     minHeight,
-    maxWidth,
-    maxHeight
-  };
-};
-const useRenderTarget = () => {
-  const renderTarget = react.useContext(RenderTargetContext);
-  return {
-    renderTarget,
-    isCanvas: renderTarget === definition.definition.renderTarget.canvas,
-    isDocument: renderTarget === definition.definition.renderTarget.document
+    maxWidth,
+    maxHeight
   };
 };
 const autoSizes = [definition.definition.sizing.Hug];
+const calcLayerSizeValue = (resolved, vars, sizeType, parentResolved, instanceVars, context) => {
+  const { isDocument, isTopLevel: isTop, instanceLayerKey } = context;
+  const isPartOfInstance = !!instanceLayerKey;
+  const layerNode = resolved.rawLayer;
+  const instanceType = instanceVars.values[`${sizeType}Type`];
+  const valueType = vars.values[`${sizeType}Type`];
+  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
+  return (value) => {
+    var _a;
+    if (isTop && isDocument && ((_a = parentResolved.layer) == null ? void 0 : _a[growType]) === definition.definition.fragmentGrowingMode.fill) {
+      return "100%";
+    }
+    if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+      return "100%";
+    }
+    if (autoSizes.includes(valueType)) {
+      return (layerNode == null ? void 0 : layerNode._type) === definition.definition.nodes.Instance ? "auto" : "fit-content";
+    }
+    if (valueType === definition.definition.sizing.Relative) return `${value}%`;
+    if (valueType === definition.definition.sizing.Fill) return `100%`;
+    return utils.toPx(value);
+  };
+};
 const useLayerSizeValue = (layerKey, sizeType) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
@@ -1275,6 +1577,65 @@ const useLayerSizeValue = (layerKey, sizeType) => {
     ]
   );
 };
+const calcLayerPosition = (resolved, vars, parentResolved, instanceResolved, instanceVars, context) => {
+  const { isDocument, isTopLevel: isTop, instanceLayerKey } = context;
+  const width = vars.values.width;
+  const height = vars.values.height;
+  const widthCalc = calcLayerSizeValue(
+    resolved,
+    vars,
+    "width",
+    parentResolved,
+    instanceVars,
+    context
+  );
+  const heightCalc = calcLayerSizeValue(
+    resolved,
+    vars,
+    "height",
+    parentResolved,
+    instanceVars,
+    context
+  );
+  const position = vars.values.position;
+  const centerAnchorX = vars.values.centerAnchorX;
+  const centerAnchorY = vars.values.centerAnchorY;
+  const top = vars.values.top;
+  const left = vars.values.left;
+  const right = vars.values.right;
+  const bottom = vars.values.bottom;
+  const skipPosition = isTop && isDocument || !!instanceLayerKey && isTop;
+  if (isTop && !skipPosition) {
+    return {
+      position: definition.definition.positionType.absolute,
+      top: utils.toPx(top),
+      left: utils.toPx(left),
+      width,
+      height
+    };
+  }
+  if (position === definition.definition.positionType.relative || skipPosition) {
+    return {
+      position: definition.definition.positionType.relative,
+      width: widthCalc(width),
+      height: heightCalc(height)
+    };
+  }
+  const hasConstrainX = utils.isFiniteNumber(left) && utils.isFiniteNumber(right);
+  const hasConstrainY = utils.isFiniteNumber(top) && utils.isFiniteNumber(bottom);
+  const hasAnyConstrainX = utils.isFiniteNumber(left) || utils.isFiniteNumber(right);
+  const hasAnyConstrainY = utils.isFiniteNumber(top) || utils.isFiniteNumber(bottom);
+  return {
+    position,
+    left: utils.isFiniteNumber(left) ? utils.toPx(left) : !utils.isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
+    top: utils.isFiniteNumber(top) ? utils.toPx(top) : !utils.isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
+    right: utils.isFiniteNumber(right) ? utils.toPx(right) : null,
+    bottom: utils.isFiniteNumber(bottom) ? utils.toPx(bottom) : null,
+    width: hasConstrainX ? null : widthCalc(width),
+    height: hasConstrainY ? null : heightCalc(height),
+    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
+  };
+};
 const useLayerPosition = (layerKey) => {
   const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1323,6 +1684,14 @@ const useLayerPosition = (layerKey) => {
     transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
   };
 };
+const calcImagePaint = (imageVars) => {
+  var _a, _b;
+  return {
+    background: imageVars.cssVariableValues.src,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: (_b = (_a = imageVars.values.scale) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)
+  };
+};
 const useImagePaint = (imageLinkKey) => {
   var _a;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1334,184 +1703,24 @@ const useImagePaint = (imageLinkKey) => {
     backgroundSize: (_a = scale == null ? void 0 : scale.toLowerCase) == null ? void 0 : _a.call(scale)
   };
 };
-const useReadVariables = (variableKeys) => {
-  const filterKeys = variableKeys.filter(definition.isVariableLink);
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const { props, innerManager, layerKey } = react.useContext(InstanceContext);
-  const resultManager = innerManager ?? fragmentManager;
-  const variableLayers = react$1.useGraphStack(
-    !!filterKeys.length ? resultManager : null,
-    filterKeys,
-    {
-      selector: (graph) => graph ? utils.pick(graph, "defaultValue", "required") : graph
-    }
-  );
-  return variableLayers.map((layer) => {
-    const { _id: propertyId } = layer ?? {};
-    const currentValue = (props == null ? void 0 : props[propertyId]) ?? null;
-    const required = (layer == null ? void 0 : layer.required) ?? false;
-    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? defaultValue;
+const calcLayerBackground = (paintVars, imageVars, imageSizeVars, linearGradient) => {
+  const fillType = paintVars.values.type;
+  const cssSolidFill = paintVars.cssVariableValues.solid;
+  const cssImageSize = imageSizeVars.cssVariableValues.imageSize;
+  if (fillType === definition.definition.paintMode.Solid) {
+    return { background: cssSolidFill };
+  }
+  if (fillType === definition.definition.paintMode.Image) {
+    const image = calcImagePaint(imageVars);
     return {
-      value: resultValue,
-      layer
+      ...image,
+      backgroundSize: cssImageSize ?? image.backgroundSize
     };
-  });
-};
-const useLayersValue = (layerKeys, fieldKey, options) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
-  if (!resultManager) {
-    return [];
   }
-  const keys = (layerKeys == null ? void 0 : layerKeys.map(core.keyOfEntity)) ?? [];
-  react$1.useGraphStack(resultManager, keys, {
-    // selector: (data) => (data ? pick(data, fieldKey) : data),
-  });
-  const normalizeLayers = useNormalizeLayers(keys, resultManager, options);
-  const { readVariable } = useReadVariable(null, options == null ? void 0 : options.scopes);
-  return normalizeLayers.map((normalizedLayer) => {
-    var _a, _b;
-    const rawValue = utils.get(normalizedLayer.rawLayer, fieldKey);
-    const layerValue = utils.get(normalizedLayer.layer, fieldKey);
-    const variableValue = (_a = readVariable(layerValue)) == null ? void 0 : _a.value;
-    const currentValue = variableValue ?? layerValue;
-    const isInherit = isInheritField(
-      resultManager,
-      normalizedLayer.layerKey,
-      fieldKey
-    );
-    const isOverride = !isInherit && !isPartOfPrimary(resultManager, normalizedLayer.layerKey);
-    const setter = layerFieldSetter(
-      resultManager,
-      normalizedLayer.layerKey,
-      fieldKey,
-      currentValue
-    );
-    const resetOverride = () => {
-      resultManager.mutate(
-        normalizedLayer.layerKey,
-        (prev) => {
-          const r = utils.omit(prev, fieldKey);
-          return r;
-        },
-        { replace: true }
-      );
-    };
-    const restore = (fallbackValue) => {
-      var _a2, _b2, _c;
-      const tempValue = ((_c = (_b2 = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b2[normalizedLayer.layerKey]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
-      return tempValue;
-    };
-    const updateValue = (value, options2) => {
-      setter(value, options2);
-    };
-    const isVariable = definition.isVariableLink(rawValue ?? layerValue);
-    const variableId = isVariable ? (_b = core.entityOfKey(layerValue)) == null ? void 0 : _b._id : null;
-    return [
-      currentValue,
-      updateValue,
-      {
-        isOverride,
-        resetOverride,
-        isVariable,
-        cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
-        rawValue,
-        restore,
-        ...resultManager.entityOfKey(normalizedLayer.layerKey)
-      }
-    ];
-  });
-};
-const useLayerChildren = (layerKey, customManager) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const [layerData] = react$1.useGraph(customManager ?? fragmentManager, layerKey, {
-    selector: (data) => utils.pick(data, "children")
-  });
-  return (layerData == null ? void 0 : layerData.children) ?? [];
-};
-const useLayerScopes = (fragmentManager, layerKey) => {
-  var _a, _b, _c, _d;
-  if (!fragmentManager || !layerKey) return [];
-  const layerParents = getAllParents(fragmentManager, layerKey);
-  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
-  layerParents.forEach((parent) => {
-    var _a2, _b2, _c2, _d2;
-    const parentLink = core.keyOfEntity(parent);
-    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
-      resultScopes.push((_d2 = (_c2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c2.scopes) == null ? void 0 : _d2.get(parentLink));
-    }
-  });
-  const areaScope = (_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get("Area");
-  if (areaScope) {
-    resultScopes.push(areaScope);
+  if (fillType === definition.definition.paintMode.LinearGradient) {
+    return linearGradient;
   }
-  return resultScopes;
-};
-const useLayerLink = (layerKey) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const [link] = useLayerValue(layerKey, "link", fragmentManager);
-  const [href] = useLayerValue(link, "href", fragmentManager);
-  const [isNewTab] = useLayerValue(link, "isNewTab", fragmentManager);
-  const isLink2 = utils.isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
-  const linkTarget = isNewTab ? "_blank" : "";
-  const linkProps = react.useMemo(() => {
-    if (isLink2) {
-      return {
-        target: linkTarget,
-        href
-      };
-    }
-    return {};
-  }, [linkTarget, href, isLink2]);
-  return {
-    isLink: isLink2,
-    linkHref: href,
-    linkTarget,
-    linkProps
-  };
-};
-const useLayerVariableValue = (layerKey, fieldKey, manager) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  const [layerValue, updateValue, layerInfo] = useLayerValue(
-    layerKey,
-    fieldKey,
-    resultManager
-  );
-  const { value: instanceValue } = useReadVariable(
-    (layerInfo == null ? void 0 : layerInfo.isVariable) ? layerValue : null
-  );
-  return [
-    (layerInfo == null ? void 0 : layerInfo.isVariable) ? instanceValue : layerValue,
-    updateValue,
-    {
-      ...layerInfo,
-      rawValue: layerValue
-    }
-  ];
-};
-const useLayerLinearGradient = (linearGradientLink) => {
-  const [stops] = useLayerValue(linearGradientLink, "stops");
-  const [angle] = useLayerValue(linearGradientLink, "angle");
-  const stopsValue = useLayersValue(stops, "value");
-  const stopsPosition = useLayersValue(stops, "position");
-  const stopValues = react.useMemo(
-    () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b, _c;
-      return [
-        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
-        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
-      ];
-    })) ?? [],
-    [stops, stopsValue, stopsPosition]
-  );
-  return react.useMemo(
-    () => ({
-      "background-image": calcLinearGradient(angle, stopValues)
-    }),
-    [angle, stopValues]
-  );
+  return { background: null };
 };
 const useLayerBackground = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1558,6 +1767,12 @@ const useLayerBackground = (layerKey) => {
     linearGradient
   ]);
 };
+const calcLayerDisplay = (vars) => {
+  const layerModeValue = vars.values.layerMode;
+  const visible = vars.values.visible;
+  if (!visible) return "none";
+  return layerModeValue === definition.definition.layerMode.flex ? "flex" : null;
+};
 const useLayerDisplay = (layerKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(layerKey, "layerMode", manager);
@@ -1569,6 +1784,15 @@ const useLayerDisplay = (layerKey) => {
     return layerModeValue === definition.definition.layerMode.flex ? "flex" : null;
   }, [layerModeValue, visible]);
 };
+const calcLayerPaint = (paintVars) => {
+  return {
+    type: paintVars.values.type,
+    solid: paintVars.values.solid,
+    solidCssValue: paintVars.cssVariableValues.solid,
+    image: paintVars.values.image,
+    linearGradientLink: paintVars.values.linearGradient
+  };
+};
 const useLayerPaint = (paintLinkKey) => {
   const [type] = useLayerValue(paintLinkKey, "type");
   const [solid, , solidInfo] = useLayerValue(paintLinkKey, "solid");
@@ -1582,6 +1806,36 @@ const useLayerPaint = (paintLinkKey) => {
     linearGradientLink
   };
 };
+const calcLayerBorder = (borderVars, borderPaintVars, borderLinearGradient, paintVars, linearGradient) => {
+  const type = borderVars.values.type;
+  const width = borderVars.values.width;
+  const borderPaint = calcLayerPaint(borderPaintVars);
+  const paint = calcLayerPaint(paintVars);
+  if (type === definition.definition.borderType.None) {
+    return { border: null };
+  }
+  if (borderPaint.type === definition.definition.paintMode.LinearGradient) {
+    let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    if (paint.type === definition.definition.paintMode.LinearGradient) {
+      background = `${linearGradient == null ? void 0 : linearGradient["background-image"]} padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    }
+    if (paint.type === definition.definition.paintMode.None) {
+      background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    }
+    return {
+      ...calcBorderSides(
+        type,
+        width,
+        borderPaint.type === definition.definition.paintMode.Solid ? borderPaint.solid : "transparent"
+      ),
+      background
+    };
+  }
+  if (borderPaint.type === definition.definition.paintMode.Solid) {
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
+  }
+  return { border: null };
+};
 const useLayerBorder = (layerKey) => {
   var _a, _b;
   const [borderLinkKey] = useLayerValue(layerKey, "border");
@@ -1622,6 +1876,28 @@ const useLayerBorder = (layerKey) => {
   }
   return { border: null };
 };
+const calcLayerLayout = (vars) => {
+  const layerModeValue = vars.values.layerMode;
+  const layerWrap = vars.values.layerWrap;
+  const layerDistribute = vars.values.layerDistribute;
+  const layerDirectionValue = vars.values.layerDirection;
+  const layerAlign = vars.values.layerAlign;
+  const padding = vars.values.padding;
+  const gap = vars.values.layerGap;
+  const isFlex = layerModeValue === definition.definition.layerMode.flex;
+  const baseFlow = layerDirectionValue === definition.definition.layerDirection.vertical ? "column" : "row";
+  const wrap = isFlex ? layerWrap ? "wrap" : null : null;
+  const flexFlow = [baseFlow, wrap].filter(Boolean).join(" ");
+  return {
+    display: isFlex ? "flex" : null,
+    gap: utils.toPx(gap),
+    flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+    justifyContent: isFlex ? layerDistribute : null,
+    flexFlow,
+    alignItems: isFlex ? layerAlign : null,
+    padding: isFlex ? padding : null
+  };
+};
 const useLayerLayout = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(
@@ -1657,6 +1933,15 @@ const useLayerLayout = (layerKey) => {
     padding: isFlex ? padding : null
   };
 };
+const calcLayerTextStyles = (vars) => {
+  const attributes = vars.values.attributes;
+  const color = vars.values["attributes.color"];
+  const cleanAttributes = utils.omit(attributes, "_id", "_type");
+  return {
+    ...cleanAttributes,
+    color
+  };
+};
 const useLayerTextStyles = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
@@ -1667,6 +1952,15 @@ const useLayerTextStyles = (layerKey) => {
     color
   };
 };
+const calcLayerFlex = (vars, parentVars) => {
+  const widthType = vars.values.widthType;
+  const heightType = vars.values.heightType;
+  const layerDirectionValue = parentVars.values.layerDirection;
+  const type = layerDirectionValue === definition.definition.layerDirection.horizontal ? widthType : heightType;
+  return {
+    flex: type === definition.definition.sizing.Fill ? "1 0 0" : "0 0 auto"
+  };
+};
 const useLayerFlex = (layerKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [widthType] = useLayerValue(layerKey, "widthType", manager);
@@ -1682,48 +1976,121 @@ const useLayerFlex = (layerKey) => {
     flex: type === definition.definition.sizing.Fill ? "1 0 0" : "0 0 auto"
   };
 };
+const SKIP_OVERRIDE = { skipOverrideCheck: true };
 const useLayerStyles = (layerKey) => {
   try {
-    if (!layerKey) {
-      throw new Error("Empty layer key");
-    }
+    if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = react.useContext(FragmentContext);
-    const [opacity] = useLayerValue(layerKey, "opacity", fragmentManager);
-    const layerSize = useLayerSize(layerKey);
-    const position = useLayerPosition(layerKey);
-    const layerFlex = useLayerFlex(layerKey);
-    const display = useLayerDisplay(layerKey);
-    const background = useLayerBackground(layerKey);
-    const border = useLayerBorder(layerKey);
-    const layout = useLayerLayout(layerKey);
-    const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
-    const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
-    const [borderRadius, , { rawValue: rawBorderRadius }] = useLayerValue(
-      layerKey,
-      "borderRadius",
-      fragmentManager
+    const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
+    const { isDocument } = useRenderTarget();
+    const resolved = useResolvedLayer(layerKey);
+    const vars = useResolvedLayerVariables(resolved.layer, resolved.rawLayer);
+    const paintResolved = useResolvedLayer(vars.values.paint, SKIP_OVERRIDE);
+    const paintVars = useResolvedLayerVariables(
+      paintResolved.layer,
+      paintResolved.rawLayer
+    );
+    const borderResolved = useResolvedLayer(vars.values.border, SKIP_OVERRIDE);
+    const borderVars = useResolvedLayerVariables(
+      borderResolved.layer,
+      borderResolved.rawLayer
+    );
+    const borderPaintResolved = useResolvedLayer(
+      borderVars.values.paint,
+      SKIP_OVERRIDE
+    );
+    const borderPaintVars = useResolvedLayerVariables(
+      borderPaintResolved.layer,
+      borderPaintResolved.rawLayer
+    );
+    const imageResolved = useResolvedLayer(
+      paintVars.values.image,
+      SKIP_OVERRIDE
+    );
+    const imageVars = useResolvedLayerVariables(
+      imageResolved.layer,
+      imageResolved.rawLayer
+    );
+    const imageSizeLayerKey = definition.isVariableLink(paintVars.rawValues.image) ? paintVars.rawValues.image : layerKey;
+    const imageSizeResolved = useResolvedLayer(
+      imageSizeLayerKey,
+      SKIP_OVERRIDE
+    );
+    const imageSizeVars = useResolvedLayerVariables(
+      imageSizeResolved.layer,
+      imageSizeResolved.rawLayer
+    );
+    const parentLayerKey = core.keyOfEntity(
+      getParent(fragmentManager, layerKey)
+    );
+    const parentResolved = useResolvedLayer(
+      parentLayerKey,
+      SKIP_OVERRIDE
+    );
+    const parentVars = useResolvedLayerVariables(
+      parentResolved.layer,
+      parentResolved.rawLayer
+    );
+    const instanceResolved = useResolvedLayer(
+      instanceLayerKey,
+      SKIP_OVERRIDE
+    );
+    const instanceVars = useResolvedLayerVariables(
+      instanceResolved.layer,
+      instanceResolved.rawLayer
+    );
+    const paint = calcLayerPaint(paintVars);
+    const borderPaint = calcLayerPaint(borderPaintVars);
+    const linearGradient = useLayerLinearGradient(paint.linearGradientLink);
+    const borderLinearGradient = useLayerLinearGradient(
+      borderPaint.linearGradientLink
+    );
+    const context = {
+      isDocument,
+      isTopLevel: isTopLevel(fragmentManager, layerKey),
+      instanceLayerKey
+    };
+    const layerSize = calcLayerSize(vars);
+    const position = calcLayerPosition(
+      resolved,
+      vars,
+      parentResolved,
+      instanceResolved,
+      instanceVars,
+      context
+    );
+    const background = calcLayerBackground(
+      paintVars,
+      imageVars,
+      imageSizeVars,
+      linearGradient
+    );
+    const display = calcLayerDisplay(vars);
+    const border = calcLayerBorder(
+      borderVars,
+      borderPaintVars,
+      borderLinearGradient,
+      paintVars,
+      linearGradient
     );
-    const [whiteSpace] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
-    const textStyles = useLayerTextStyles(layerKey);
-    const [overflow] = useLayerValue(layerKey, "overflow", fragmentManager);
+    const layout = calcLayerLayout(vars);
+    const textStyles = calcLayerTextStyles(vars);
+    const layerFlex = calcLayerFlex(vars, parentVars);
     return {
-      // ...(props ?? {}),
       ...background,
       ...border,
       ...position,
-      opacity,
-      overflow,
-      rotate: utils.isValue(rotate) ? `${rotate}deg` : null,
-      "border-radius": utils.isValue(rawBorderRadius) ? borderRadius : null,
-      "white-space": whiteSpace,
-      "z-index": zIndex !== -1 ? zIndex : null,
+      opacity: vars.values.opacity,
+      overflow: vars.values.overflow,
+      rotate: utils.isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      "border-radius": utils.isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      "white-space": vars.values.whiteSpace,
+      "z-index": vars.values.zIndex !== -1 ? vars.values.zIndex : null,
       ...layout,
       ...layerSize,
       ...textStyles,
       ...layerFlex,
       display
-      // "user-select": "none",
-      // ...cssOverride,
     };
   } catch (e) {
     return {};
@@ -1828,6 +2195,34 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
   };
 };
+const useGlobalManager = (globalManager) => {
+  var _a, _b;
+  const currentGlobalManager = react.useContext(GlobalManagerContext);
+  const resultManager = globalManager ?? currentGlobalManager;
+  const [fragmentsGraph] = react$1.useGraph(
+    resultManager,
+    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
+  );
+  const queryFragmentManager = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const queryArea = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const setRenderTarget = (value) => {
+    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
+  };
+  return {
+    fragmentsGraph,
+    manager: resultManager,
+    queryFragmentManager,
+    queryArea,
+    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? utils.noop,
+    setRenderTarget
+  };
+};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1852,12 +2247,14 @@ const useLayerInteractions = (layerKey, options) => {
   });
   const fireEvent = react.useCallback(
     (eventLink) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const eventType = (_a = core.entityOfKey(eventLink)) == null ? void 0 : _a._type;
       const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      console.log(scopes, eventLink, eventType, eventValue);
       if (eventType === definition.definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
         if (!areaScope) return null;
-        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal) == null ? void 0 : _d.call(_c, {
+        console.log((_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal);
+        (_e = (_d = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _d.reachGoal) == null ? void 0 : _e.call(_d, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...utils.pick(areaScope, "variantId", "campaignId", "areaId")
         });
@@ -1865,10 +2262,10 @@ const useLayerInteractions = (layerKey, options) => {
       if (eventType === definition.definition.nodes.MutateEvent) {
         const target = eventValue == null ? void 0 : eventValue.target;
         const targetLayer = getNormalizeLayer(target, fragmentManager);
-        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_e = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _e.defaultValue);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_f = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _f.defaultValue);
         if (definition.isVariableLink(target) && utils.isValue(value)) {
-          const targetId = (_f = core.entityOfKey(target)) == null ? void 0 : _f._id;
-          (_g = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _g.call(instanceScope, targetId, value);
+          const targetId = (_g = core.entityOfKey(target)) == null ? void 0 : _g._id;
+          (_h = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _h.call(instanceScope, targetId, value);
         }
       }
     },
@@ -2075,52 +2472,249 @@ const useCollection = (layerKey, options) => {
     ...frame
   };
 };
-const collectLeafFieldKeys = (objectVar, manager, keys) => {
-  if (!(objectVar == null ? void 0 : objectVar.fields)) return;
-  const fields = utils.cleanGraph(objectVar.fields);
-  for (const fieldValue of Object.values(fields)) {
-    let fieldVar;
-    let fieldKey;
-    if (definition.isVariableLink(fieldValue)) {
-      fieldKey = fieldValue;
-      fieldVar = manager.resolve(fieldKey);
-    } else if (utils.isObject(fieldValue) && (fieldValue == null ? void 0 : fieldValue._type) && (fieldValue == null ? void 0 : fieldValue._id)) {
-      fieldKey = core.keyOfEntity(fieldValue);
-      fieldVar = fieldValue;
-    }
+const resolveFieldRef = (field, manager) => {
+  if (definition.isVariableLink(field)) {
+    return manager.resolve(field);
+  }
+  if (utils.isObject(field) && (field == null ? void 0 : field._id)) {
+    return field;
+  }
+  return void 0;
+};
+const fieldRefToKey = (field) => {
+  if (definition.isVariableLink(field)) {
+    return field;
+  }
+  if (utils.isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
+    return core.keyOfEntity(field);
+  }
+  return void 0;
+};
+const collectLeafKeys = (defVar, manager, keys) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = utils.cleanGraph(defVar.fields);
+  for (const fieldRef of Object.values(fields)) {
+    const fieldVar = resolveFieldRef(fieldRef, manager);
+    const fieldKey = fieldRefToKey(fieldRef);
     if (!fieldVar || !fieldKey) continue;
     if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields) {
-      collectLeafFieldKeys(fieldVar, manager, keys);
+      collectLeafKeys(fieldVar, manager, keys);
     } else {
       keys.push(fieldKey);
     }
   }
 };
-const useExpandedObjectProps = (props, manager, parentManager, definitions) => {
-  const objectFieldKeys = react.useMemo(() => {
+const flattenObjectFields = (defVar, valueObj, manager, result) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = utils.cleanGraph(defVar.fields);
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    const fieldVar = resolveFieldRef(fieldRef, manager);
+    if (!(fieldVar == null ? void 0 : fieldVar._id)) continue;
+    const fieldValue = valueObj[fieldName] ?? valueObj[fieldVar._id];
+    if (fieldValue === void 0) continue;
+    if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields && utils.isObject(fieldValue)) {
+      flattenObjectFields(
+        fieldVar,
+        fieldValue,
+        manager,
+        result
+      );
+    } else {
+      result[fieldVar._id] = fieldValue;
+    }
+  }
+};
+const buildFieldIdMapping = (childDef, parentDef, childManager, parentManager) => {
+  const mapping = {};
+  if (!(childDef == null ? void 0 : childDef.fields) || !(parentDef == null ? void 0 : parentDef.fields)) return mapping;
+  const childFields = utils.cleanGraph(childDef.fields);
+  const parentFields = utils.cleanGraph(parentDef.fields);
+  for (const [fieldName, childFieldRef] of Object.entries(childFields)) {
+    const parentFieldRef = parentFields[fieldName];
+    if (!parentFieldRef) continue;
+    const childFieldVar = resolveFieldRef(childFieldRef, childManager);
+    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
+    const parentFieldVar = resolveFieldRef(parentFieldRef, parentManager);
+    if (!(parentFieldVar == null ? void 0 : parentFieldVar._id)) continue;
+    if (childFieldVar.type === definition.definition.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === definition.definition.variableType.Object && (parentFieldVar == null ? void 0 : parentFieldVar.fields)) {
+      Object.assign(
+        mapping,
+        buildFieldIdMapping(
+          childFieldVar,
+          parentFieldVar,
+          childManager,
+          parentManager
+        )
+      );
+      continue;
+    }
+    mapping[parentFieldVar._id] = childFieldVar._id;
+  }
+  return mapping;
+};
+const resolveArrayItems = (items, manager) => {
+  const result = [];
+  for (const item of items) {
+    if (definition.isLink(item)) {
+      const resolved = manager.resolve(item);
+      if (!resolved) continue;
+      const payload = utils.isObject(resolved.value) ? resolved.value : resolved;
+      if (utils.isObject(payload)) {
+        result.push(utils.cleanGraph(payload));
+      }
+    } else if (utils.isObject(item)) {
+      const payload = utils.isObject(item.value) ? item.value : item;
+      result.push(utils.cleanGraph(payload));
+    }
+  }
+  return result;
+};
+const remapArrayItems = (items, mapping) => {
+  return items.map((item) => {
+    const remapped = {};
+    for (const [key, value] of Object.entries(item)) {
+      const newKey = mapping[key] ?? key;
+      remapped[newKey] = value;
+    }
+    return remapped;
+  });
+};
+const useExtractProps = (props, manager, parentManager, definitions) => {
+  const { readVariable, _dep } = useReadVariable();
+  const leafKeys = react.useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
     const keys = [];
     for (const defKey of definitions) {
       const defVar = manager.resolve(defKey);
-      if ((defVar == null ? void 0 : defVar.type) === definition.definition.variableType.Object && (defVar == null ? void 0 : defVar.fields)) {
-        collectLeafFieldKeys(defVar, manager, keys);
+      if (!defVar) continue;
+      if (defVar.type === definition.definition.variableType.Object && defVar.fields) {
+        collectLeafKeys(defVar, manager, keys);
+      } else if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
+        const arrDef = resolveFieldRef(defVar.definition, manager);
+        if ((arrDef == null ? void 0 : arrDef.type) === definition.definition.variableType.Object && (arrDef == null ? void 0 : arrDef.fields)) {
+          collectLeafKeys(arrDef, manager, keys);
+        }
       }
     }
     return keys;
   }, [definitions, manager]);
-  const fieldVarLayers = react$1.useGraphStack(
-    objectFieldKeys.length ? manager : null,
-    objectFieldKeys
+  const leafLayers = react$1.useGraphStack(leafKeys.length ? manager : null, leafKeys);
+  const arrayItemKeys = react.useMemo(() => {
+    var _a;
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const resolveManager = parentManager ?? manager;
+    if (!resolveManager) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!(defVar == null ? void 0 : defVar._id)) continue;
+      if (defVar.type !== definition.definition.variableType.Array || !defVar.definition)
+        continue;
+      const propValue = props[defVar._id];
+      if (!definition.isVariableLink(propValue)) continue;
+      const parentVar = resolveManager.resolve(propValue);
+      if ((parentVar == null ? void 0 : parentVar.type) !== definition.definition.variableType.Array) continue;
+      const items = parentVar.defaultValue;
+      if (!Array.isArray(items)) continue;
+      for (const item of items) {
+        if (definition.isLink(item)) {
+          keys.push(item);
+          const resolved = resolveManager.resolve(item);
+          if ((resolved == null ? void 0 : resolved.value) && utils.isObject(resolved.value) && ((_a = resolved.value) == null ? void 0 : _a._type)) {
+            const valueKey = core.keyOfEntity(resolved.value);
+            if (valueKey) keys.push(valueKey);
+          }
+        }
+      }
+    }
+    return keys;
+  }, [definitions, manager, parentManager, props, _dep]);
+  const arrayItemLayers = react$1.useGraphStack(
+    arrayItemKeys.length ? parentManager ?? manager : null,
+    arrayItemKeys
   );
   return react.useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return props;
+    const resolveManager = parentManager ?? manager;
     const base = {};
-    for (const layer of fieldVarLayers) {
+    for (const layer of leafLayers) {
       if ((layer == null ? void 0 : layer._id) && (layer == null ? void 0 : layer.defaultValue) != null) {
         base[layer._id] = layer.defaultValue;
       }
     }
-    return { ...base, ...expandObjectProps(props, manager, parentManager) };
-  }, [fieldVarLayers, props, manager, parentManager]);
+    const expanded = {};
+    const handledPropKeys = /* @__PURE__ */ new Set();
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!(defVar == null ? void 0 : defVar._id)) continue;
+      const propValue = props[defVar._id];
+      handledPropKeys.add(defVar._id);
+      if (propValue === void 0) continue;
+      if (defVar.type === definition.definition.variableType.Object && defVar.fields) {
+        if (utils.isObject(propValue)) {
+          flattenObjectFields(
+            defVar,
+            propValue,
+            manager,
+            expanded
+          );
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
+        if (definition.isVariableLink(propValue) && resolveManager) {
+          const parentVar = resolveManager.resolve(propValue);
+          if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
+            const { value: resolvedArray } = readVariable(propValue);
+            if (Array.isArray(resolvedArray)) {
+              const concreteItems = resolveArrayItems(
+                resolvedArray,
+                resolveManager
+              );
+              const childDef = resolveFieldRef(defVar.definition, manager);
+              const parentDef = resolveFieldRef(
+                parentVar.definition,
+                resolveManager
+              );
+              if ((childDef == null ? void 0 : childDef.type) === definition.definition.variableType.Object && (childDef == null ? void 0 : childDef.fields) && (parentDef == null ? void 0 : parentDef.type) === definition.definition.variableType.Object && (parentDef == null ? void 0 : parentDef.fields)) {
+                const mapping = buildFieldIdMapping(
+                  childDef,
+                  parentDef,
+                  manager,
+                  resolveManager
+                );
+                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+              } else {
+                expanded[defVar._id] = concreteItems;
+              }
+              continue;
+            }
+          }
+          expanded[defVar._id] = propValue;
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      expanded[defVar._id] = propValue;
+    }
+    for (const [key, value] of Object.entries(props)) {
+      if (!handledPropKeys.has(key) && !(key in expanded)) {
+        expanded[key] = value;
+      }
+    }
+    return { ...base, ...expanded };
+  }, [
+    leafLayers,
+    arrayItemLayers,
+    props,
+    manager,
+    parentManager,
+    definitions,
+    _dep
+  ]);
 };
 const CollectionItem = ({
   layer,
@@ -2134,9 +2728,7 @@ const CollectionItem = ({
   core.keyOfEntity(layer);
   const definitionId = ((_a = core.entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
-  const inputProps = utils.isObject(value) ? {
-    ...value
-  } : {
+  const inputProps = {
     [definitionId]: value
   };
   const props = utils.cleanGraph(inputProps);
@@ -2144,7 +2736,7 @@ const CollectionItem = ({
     () => sourceDefinition ? [sourceDefinition] : [],
     [sourceDefinition]
   );
-  const expandedProps = useExpandedObjectProps(props, manager, void 0, definitions);
+  const expandedProps = useExtractProps(props, manager, void 0, definitions);
   const cssVars = react.useMemo(
     () => toCssCustomProperties(expandedProps),
     [expandedProps]
@@ -2282,24 +2874,18 @@ const Frame = ({
     }
   );
 };
-const useIsomorphicEffect = (callback, deps) => {
-  react.useEffect(callback, deps);
-  if (!utils.isBrowser) {
-    callback();
-  }
-};
 const useCssChunk = (linkKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
   const [enabled] = useLayerValue(linkKey, "enabled", { manager });
-  const styleSheet = useStyleSheet(manager);
-  const reset = react.useRef(utils.noop);
-  useIsomorphicEffect(() => {
-    if (enabled && chunkId) {
-      reset.current = styleSheet.addCssChunk(chunkId);
-    }
-    return reset.current;
-  }, [enabled]);
+  const { addCssChunk } = useStyleSheet(manager);
+  react.useEffect(() => {
+    if (!enabled || !chunkId) return;
+    const cleanup = addCssChunk(chunkId);
+    return () => {
+      cleanup();
+    };
+  }, [enabled, chunkId, addCssChunk]);
 };
 const CssChunk = ({ linkKey }) => {
   useCssChunk(linkKey);
@@ -2313,23 +2899,18 @@ const useFragmentManager = (fragmentId, inputGlobalManager) => {
     getFragmentManager,
     queryFragmentManager
   } = useGlobalManager(inputGlobalManager);
-  const [loading, setLoading] = react.useState(false);
   const manager = getFragmentManager(fragmentId);
+  const loading = !!fragmentId && !manager;
   react.useEffect(() => {
-    (async () => {
-      if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
-        setLoading(true);
-        await queryFragmentManager(fragmentId);
-        setLoading(false);
-      }
-    })();
+    if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+      queryFragmentManager(fragmentId);
+    }
   }, [fragmentId, fragmentsGraph]);
   return {
     loading,
     manager,
     fragmentLayerKey: (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root,
     queryFragmentManager
-    // loadFragmentManager,
   };
 };
 const useFragmentChildren = (fragmentId) => {
@@ -2387,7 +2968,7 @@ const useFragment = (fragmentId, globalManager) => {
   const { properties: definitions } = useFragmentProperties(fragmentId);
   const scopes = react.useContext(ScopeContext);
   !(scopes == null ? void 0 : scopes.length);
-  const { addLayerStyle, addCssChunk, mount, unmount } = useStyleSheet(
+  const { addLayerStyle, mount, unmount } = useStyleSheet(
     fragmentContext.manager
   );
   if (fragmentContext.manager) {
@@ -2422,35 +3003,26 @@ const useFragment = (fragmentId, globalManager) => {
     definitions
   };
 };
-const FragmentInternal = ({
-  fragmentId,
-  globalManager,
-  pauseInteractions,
-  collectStyle,
-  FrameElement = Frame
-}) => {
-  const {
-    children,
-    fragmentContext,
-    hash,
-    chunkLinks,
-    isResize,
-    isTopFragment,
-    definitions,
-    layerKey
-  } = useFragment(fragmentId);
-  if (!fragmentContext.manager) return null;
-  return (
-    // <Scope
-    //   fragmentManager={fragmentContext.manager}
-    //   layerKey={layerKey}
-    //   value={{
-    //     type: definition.scopeTypes.FragmentScope,
-    //     manager: fragmentContext.manager,
-    //     definitions,
-    //   }}
-    // >
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-key": layerKey, className: hash, children: [
+const FragmentInternal = react.memo(
+  ({
+    fragmentId,
+    globalManager,
+    pauseInteractions,
+    collectStyle,
+    FrameElement = Frame
+  }) => {
+    const {
+      children,
+      fragmentContext,
+      hash,
+      chunkLinks,
+      isResize,
+      isTopFragment,
+      definitions,
+      layerKey
+    } = useFragment(fragmentId);
+    if (!fragmentContext.manager) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-key": layerKey, className: hash, children: [
       chunkLinks.map((linkKey) => /* @__PURE__ */ jsxRuntime.jsx(CssChunk, { linkKey })),
       children.map((childLink) => {
         var _a;
@@ -2468,21 +3040,51 @@ const FragmentInternal = ({
           childLink
         );
       })
-    ] })
-  );
-};
+    ] });
+  }
+);
 const Fragment = (props) => {
   const currentGlobalManager = react.useContext(GlobalManagerContext);
   const { manager: resultGlobalManager } = useGlobalManager(
     props.globalManager
   );
   const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
-  const Base = /* @__PURE__ */ jsxRuntime.jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsxRuntime.jsx(FragmentInternal, { ...props }) });
+  const fragmentContextValue = react.useMemo(() => ({ manager }), [manager]);
+  const Base = /* @__PURE__ */ jsxRuntime.jsx(FragmentContext.Provider, { value: fragmentContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FragmentInternal, { ...props }) });
   if (!currentGlobalManager) {
     return /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: resultGlobalManager, children: Base });
   }
   return Base;
 };
+const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
+  const fields = utils.cleanGraph(objectVar.fields);
+  const result = {};
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    let fieldVar;
+    let fieldKey;
+    if (definition.isVariableLink(fieldRef)) {
+      fieldKey = fieldRef;
+      fieldVar = manager == null ? void 0 : manager.resolve(fieldKey);
+    } else if (utils.isObject(fieldRef) && (fieldRef == null ? void 0 : fieldRef._id)) {
+      fieldKey = core.keyOfEntity(fieldRef);
+      fieldVar = fieldRef;
+    }
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields) {
+      result[fieldName] = resolveObjectToConcreteValue(
+        fieldVar,
+        manager,
+        readVariable
+      );
+    } else {
+      const { value } = readVariable(fieldKey);
+      if (value != null) {
+        result[fieldName] = value;
+      }
+    }
+  }
+  return result;
+};
 const useInstanceProps = (instanceProps) => {
   const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
   const { manager: loadedManager } = useFragmentManager(
@@ -2501,13 +3103,39 @@ const useInstanceProps = (instanceProps) => {
     };
   }
   const extractProps = utils.cleanGraph(inputProps);
+  const { readVariable } = useReadVariable();
+  let resolvedProps = extractProps;
+  if (!isTopInstance) {
+    resolvedProps = {};
+    for (const [key, value] of Object.entries(extractProps)) {
+      if (!definition.isVariableLink(value)) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      const varLayer = fragmentManager == null ? void 0 : fragmentManager.resolve(value);
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Array) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Object && (varLayer == null ? void 0 : varLayer.fields)) {
+        resolvedProps[key] = resolveObjectToConcreteValue(
+          varLayer,
+          fragmentManager,
+          readVariable
+        );
+        continue;
+      }
+      const { value: resolved } = readVariable(value);
+      resolvedProps[key] = resolved;
+    }
+  }
   react.useEffect(() => {
     if (utils.isValue(instanceProps == null ? void 0 : instanceProps.props)) {
       setLocalProps(instanceProps.props);
     }
   }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
-    props: extractProps,
+    props: resolvedProps,
     onChangeProps: (variableId, value) => {
       var _a;
       setLocalProps((prev) => ({ ...prev, [variableId]: value }));
@@ -2584,7 +3212,7 @@ const InstanceInitial = ({
     ...instanceProps,
     pauseInteractions
   });
-  const expandedProps = useExpandedObjectProps(
+  const expandedProps = useExtractProps(
     props,
     innerManager,
     parentManager,
@@ -2595,49 +3223,56 @@ const InstanceInitial = ({
     [expandedProps]
   );
   useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
+  const scopeValue = react.useMemo(
+    () => ({
+      type: definition.definition.scopeTypes.InstanceScope,
+      props: expandedProps,
+      definitions,
+      fragmentId,
+      documentManager: innerManager,
+      layerKey: instanceProps.layerKey,
+      onChangeProps
+    }),
+    [
+      expandedProps,
+      definitions,
+      fragmentId,
+      innerManager,
+      instanceProps.layerKey,
+      onChangeProps
+    ]
+  );
+  const instanceContextValue = react.useMemo(
+    () => ({
+      layerKey: instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      props: expandedProps
+    }),
+    [
+      instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      expandedProps
+    ]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
       fragmentManager: innerManager,
       layerKey: instanceProps.layerKey,
-      value: {
-        type: definition.definition.scopeTypes.InstanceScope,
-        props: expandedProps,
-        definitions,
-        fragmentId,
-        documentManager: innerManager,
-        layerKey: instanceProps.layerKey,
-        onChangeProps
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        InstanceContext$1.Provider,
+      value: scopeValue,
+      children: /* @__PURE__ */ jsxRuntime.jsx(InstanceContext$1.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
+        Tag,
         {
-          value: {
-            layerKey: instanceProps.layerKey,
-            definitions,
-            innerManager,
-            parentManager,
-            props: expandedProps
-          },
-          children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
-            Tag,
-            {
-              className: classnames,
-              "data-key": instanceProps.layerKey,
-              style: { ...style, ...cssVars },
-              ...link.linkProps,
-              ...events,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                Fragment,
-                {
-                  fragmentId,
-                  globalManager,
-                  FrameElement,
-                  pauseInteractions
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+          className: classnames,
+          "data-key": instanceProps.layerKey,
+          style: { ...style, ...cssVars },
+          ...link.linkProps,
+          ...events,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
             Fragment,
             {
               fragmentId,
@@ -2645,9 +3280,17 @@ const InstanceInitial = ({
               FrameElement,
               pauseInteractions
             }
-          ) })
+          )
         }
-      )
+      ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Fragment,
+        {
+          fragmentId,
+          globalManager,
+          FrameElement,
+          pauseInteractions
+        }
+      ) }) })
     }
   );
 };
@@ -2666,47 +3309,153 @@ const Instance = (props) => {
     }
   ) });
 };
-const useArea = (options) => {
-  var _a;
-  const { manager: resultGlobalManager } = useGlobalManager(
+const IDLE_STATE = {
+  data: null,
+  fetching: false,
+  error: null
+};
+const useAsyncLoadArea = (globalManager, areaCode, skip) => {
+  const [state, setState] = react.useState(IDLE_STATE);
+  const areaCodeRef = react.useRef(areaCode);
+  if (areaCodeRef.current !== areaCode) {
+    areaCodeRef.current = areaCode;
+    setState(IDLE_STATE);
+  }
+  react.useEffect(() => {
+    var _a, _b;
+    if (skip || !globalManager || !areaCode) return;
+    const cache = getSuspenseCache(globalManager);
+    const cacheKey = `area:${areaCode}`;
+    if (cache.has(cacheKey)) {
+      try {
+        const cached = cache.get(cacheKey).read();
+        setState({ data: cached, fetching: false, error: null });
+        return;
+      } catch (e) {
+        if (!(e instanceof Promise)) {
+          setState({ data: null, fetching: false, error: e });
+          return;
+        }
+      }
+    }
+    const valueOrPromise = cache.has(cacheKey) ? void 0 : (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadArea) == null ? void 0 : _b.call(_a, areaCode);
+    if (valueOrPromise != null && !(valueOrPromise instanceof Promise)) {
+      createSuspenseResource(cacheKey, valueOrPromise, cache);
+      setState({ data: valueOrPromise, fetching: false, error: null });
+      return;
+    }
+    if (valueOrPromise instanceof Promise) {
+      createSuspenseResource(cacheKey, valueOrPromise, cache);
+    }
+    setState({ data: null, fetching: true, error: null });
+    let cancelled = false;
+    const resource = cache.get(cacheKey);
+    if (!resource) return;
+    try {
+      const data = resource.read();
+      if (!cancelled) {
+        setState({ data, fetching: false, error: null });
+      }
+    } catch (e) {
+      if (e instanceof Promise) {
+        e.then(() => {
+          if (cancelled) return;
+          try {
+            const data = resource.read();
+            setState({ data, fetching: false, error: null });
+          } catch (err) {
+            if (!cancelled) {
+              setState({ data: null, fetching: false, error: err });
+            }
+          }
+        });
+      } else if (!cancelled) {
+        setState({ data: null, fetching: false, error: e });
+      }
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [skip, globalManager, areaCode]);
+  if (skip) return IDLE_STATE;
+  return state;
+};
+const resolveSuspense = (options) => {
+  if ((options == null ? void 0 : options.suspense) !== void 0) return options.suspense;
+  if ((options == null ? void 0 : options.ssr) !== void 0) return options.ssr;
+  return false;
+};
+const useArea = (areaCode, options) => {
+  const { manager: globalManager } = useGlobalManager(
     options == null ? void 0 : options.globalManager
   );
-  const ssr = ((_a = options == null ? void 0 : options.options) == null ? void 0 : _a.ssr) ?? true;
-  const areaData = useSuspenseLoadArea(
-    resultGlobalManager,
-    options.areaCode,
-    !(isBrowser || ssr)
+  const suspense = resolveSuspense(options);
+  const skip = !globalManager || !(isBrowser || suspense);
+  const suspenseData = useSuspenseLoadArea(
+    globalManager,
+    areaCode,
+    !suspense || skip
+  );
+  const asyncState = useAsyncLoadArea(
+    globalManager,
+    areaCode,
+    suspense || skip
+  );
+  if (skip) {
+    return { data: null, fetching: false, error: null };
+  }
+  if (suspense) {
+    return {
+      data: suspenseData ?? null,
+      fetching: false,
+      error: null
+    };
+  }
+  const throwOnError = (options == null ? void 0 : options.throwOnError) ?? true;
+  if (throwOnError && asyncState.error) {
+    throw asyncState.error;
+  }
+  return asyncState;
+};
+const AreaInitial = (areaProps) => {
+  const { data: areaData } = useArea(areaProps.areaCode, {
+    suspense: true,
+    globalManager: areaProps.globalManager
+  });
+  const { manager: globalManager } = useGlobalManager(
+    areaProps.globalManager
   );
   const { manager: fragmentManager } = useFragmentManager(
     areaData == null ? void 0 : areaData.fragmentId,
-    resultGlobalManager
+    globalManager
   );
   const resultProps = react.useMemo(
-    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options == null ? void 0 : options.props) ?? {} }),
-    [areaData, options]
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(areaProps == null ? void 0 : areaProps.props) ?? {} }),
+    [areaData, areaProps]
   );
-  return {
-    ...areaData,
-    fragmentManager,
-    props: resultProps,
-    globalManager: resultGlobalManager
-  };
-};
-const AreaInitial = (areaProps) => {
-  const areaData = useArea(areaProps);
   if (!areaData) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const areaManager = react.useMemo(
+    () => clientCore.createAreaManager({
+      areaId: areaData.areaId,
+      campaignId: areaData.campaignId,
+      variantId: areaData.variantId,
+      areaProperties: areaData.areaProperties
+    }),
+    [areaData.areaId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
-      fragmentManager: areaData.fragmentManager,
+      fragmentManager,
       layerKey: "Area",
       value: {
         type: definition.definition.scopeTypes.AreaScope,
+        areaManager,
         ...areaData ?? {}
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Instance, { fragmentId: areaData.fragmentId, props: resultProps })
     }
-  );
+  ) });
 };
 const Area = (props) => {
   return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) });
@@ -2732,6 +3481,8 @@ const useLayerCssOverride = (layerKey) => {
   return utils.isValue(cssOverride) ? cssStringToJsObject(cssOverride) : {};
 };
 exports.Area = Area;
+exports.AreaManagerContext = AreaManagerContext;
+exports.AreaManagerProvider = AreaManagerProvider;
 exports.Collection = Collection;
 exports.CssChunk = CssChunk;
 exports.CustomRender = CustomRender;
@@ -2762,7 +3513,6 @@ exports.createSuspenseResource = createSuspenseResource;
 exports.declareFragmentProperty = declareFragmentProperty;
 exports.defaultCustomRender = defaultCustomRender;
 exports.duplicateLayer = duplicateLayer;
-exports.expandObjectProps = expandObjectProps;
 exports.findBreakpoint = findBreakpoint;
 exports.getAllParents = getAllParents;
 exports.getHydratedData = getHydratedData;
@@ -2784,7 +3534,6 @@ exports.isRootLayer = isRootLayer;
 exports.isTopLevel = isTopLevel;
 exports.isVariableLink = isVariableLink;
 exports.layerFieldSetter = layerFieldSetter;
-exports.loadFragmentManager = loadFragmentManager;
 exports.makeSnapshot = makeSnapshot;
 exports.moveChildren = moveChildren;
 exports.nodeWalker = nodeWalker;
@@ -2828,6 +3577,8 @@ exports.useOptionalSize = useOptionalSize;
 exports.useReadVariable = useReadVariable;
 exports.useReadVariables = useReadVariables;
 exports.useRenderTarget = useRenderTarget;
+exports.useResolvedLayer = useResolvedLayer;
+exports.useResolvedLayerVariables = useResolvedLayerVariables;
 exports.useTextAttributes = useTextAttributes;
 exports.useTextContent = useTextContent;
 exports.useTextHighlight = useTextHighlight;