@fragmentsx/render-react 1.3.0 → 1.4.0

package/dist/index.es.js

@@ -1,9 +1,10 @@
-import { createContext, useContext, useReducer, useRef, useEffect, useCallback, useMemo, useState, Suspense } from "react";
-import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField } from "@fragmentsx/definition";
+import { createContext, useContext, useMemo, useReducer, useRef, useEffect, useCallback, useState, memo, Suspense } from "react";
+import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField, isLink as isLink$1 } from "@fragmentsx/definition";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cleanGraph, generateId, getKey as getKey$1, isValue, isObject, pick, toPx, setKey as setKey$1, toKebabCase, set, isPrimitive, get, omit, noop, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
+import { keyOfEntity, isPartialKey, entityOfKey, isLinkKey } from "@graph-state/core";
 import { useGraph, useGraphStack } from "@graph-state/react";
-import { noop, isPrimitive, isObject, generateId, getKey as getKey$1, isValue, pick, toPx, cleanGraph, setKey as setKey$1, toKebabCase, set, get, omit, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
-import { entityOfKey, keyOfEntity, isPartialKey, isLinkKey } from "@graph-state/core";
+import { createAreaManager } from "@fragmentsx/client-core";
 const GlobalManagerContext = createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
 const FragmentContext = createContext({
@@ -22,35 +23,9 @@ const RenderTargetContext = createContext(
   definition.renderTarget.document
 );
 const RenderTargetProvider = RenderTargetContext.Provider;
+const AreaManagerContext = createContext(null);
+const AreaManagerProvider = AreaManagerContext.Provider;
 const ScopeContext = createContext([]);
-const useGlobalManager = (globalManager) => {
-  var _a, _b;
-  const currentGlobalManager = useContext(GlobalManagerContext);
-  const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = 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) ?? noop,
-    setRenderTarget
-  };
-};
 const Scope = ({
   value,
   children,
@@ -58,9 +33,11 @@ const Scope = ({
   layerKey
 }) => {
   var _a, _b;
-  const { manager: globalManager } = useGlobalManager();
   const currentScope = useContext(ScopeContext) ?? [];
-  const nextScope = [...currentScope, value];
+  const nextScope = 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__ */ jsx(ScopeContext.Provider, { value: nextScope, children });
 };
@@ -71,191 +48,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 getNormalizeLayer$1(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 } = 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 } = useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  return layerKeys.map(
-    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
-  );
-};
-function useForceUpdate() {
-  return useReducer(() => ({}), {});
-}
-const extractVariableValue = (input, variableId) => {
-  if (isObject(input)) {
-    if (variableId in input) {
-      return input[variableId];
-    }
-    for (let key in input) {
-      if (input.hasOwnProperty(key)) {
-        const result = extractVariableValue(input[key], variableId);
-        if (result !== void 0) {
-          return result;
-        }
-      }
-    }
-  }
-  return void 0;
-};
-function deepMerge(a, b) {
-  if (!isObject(a) || !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 = useContext(ScopeContext);
-  const scopes = customScopes ?? contextScopes;
-  const unmountAbortController = useRef(new AbortController());
-  const [dep, forceUpdate] = useForceUpdate();
-  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.variableType.Object)
-      return variableLayer == null ? void 0 : variableLayer.defaultValue;
-    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
-      (acc, fieldLink) => {
-        var _a;
-        if (!!fieldLink && isVariableLink$1(fieldLink)) {
-          const _id = (_a = entityOfKey(fieldLink)) == null ? void 0 : _a._id;
-          if (_id) {
-            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  };
-  const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a, _b;
-    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
-    if (!variableLayer) return null;
-    if ((variableLayer == null ? void 0 : variableLayer.type) === 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.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 = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
-    if (!isVariableLink$1(variableKey2)) {
-      return {
-        value: null,
-        layer: null
-      };
-    }
-    let instanceScope = scopes.findLast(
-      (scope) => {
-        var _a2;
-        return (scope == null ? void 0 : scope.type) === 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.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.scopeTypes.CollectionItemScope
-    );
-    resolveVariableLayer(
-      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.value
-    );
-    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_e = 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 (isVariableLink$1(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);
@@ -431,6 +223,9 @@ const cloneLayer = (manager, layer, externalProps = {}) => {
       layerGraph,
       (key, value, history) => {
         const isRoot = history.length <= 2;
+        if ((value == null ? void 0 : value._type) === definition.nodes.Instance && key === "props") {
+          return cleanGraph(value);
+        }
         if (!!value && n(value) && !IGNORE_TYPES.includes(value._type)) {
           const nextId = generateId();
           const parentFromValue = getKey$1(value.parent);
@@ -667,6 +462,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 getNormalizeLayer$1(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 } = 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 } = 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);
@@ -802,111 +632,15 @@ const toCssCustomProperties = (props) => {
     {}
   );
 };
-const resolveFieldVar = (field, manager) => {
-  if (isObject(field) && (field == null ? void 0 : field._id)) {
-    return field;
-  }
-  if (isVariableLink$1(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 (isVariableLink$1(field)) {
-    return field;
-  }
-  if (isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
-    return keyOfEntity(field);
-  }
-  return void 0;
-};
-const expandConcreteValue = (objectVar, valueObj, childManager, result) => {
-  const fields = 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.variableType.Object && childFieldVar.fields && isObject(fieldValue)) {
-      expandConcreteValue(
-        childFieldVar,
-        fieldValue,
-        childManager,
-        result
-      );
-      continue;
-    }
-    result[childFieldVar._id] = fieldValue;
-  }
-};
-const expandVariableValue = (childObjectVar, parentObjectVar, childManager, resolveManager, result) => {
-  const childFields = cleanGraph(childObjectVar.fields);
-  const parentFields = 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.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === 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.variableType.Object && (childVar == null ? void 0 : childVar.fields)) {
-      if (isVariableLink$1(propValue)) {
-        const parentVar = resolveManager.resolve(propValue);
-        if ((parentVar == null ? void 0 : parentVar.type) === definition.variableType.Object && (parentVar == null ? void 0 : parentVar.fields)) {
-          expandVariableValue(
-            childVar,
-            parentVar,
-            childManager,
-            resolveManager,
-            result
-          );
-          continue;
-        }
-      } else if (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 = isLinkKey(fragmentKey);
@@ -949,22 +683,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)) {
@@ -1120,95 +838,216 @@ const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value,
     );
   }
 };
-const useLayerValue = (layerKey, fieldKey, options) => {
-  var _a;
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
-  if (!resultManager) {
-    return [null, noop, {}];
-  }
+const EMPTY_RESOLVED$1 = {
+  layerKey: null,
+  rawLayer: null,
+  layer: null,
+  isOverride: false
+};
+const useResolvedLayer = (layerKey, options) => {
+  const { manager } = useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? manager;
   const key = keyOfEntity(layerKey);
-  const [, updateLayerData] = useGraph(resultManager, key, {
-    // selector: (data) => (data ? pick(data, fieldKey) : data),
-  });
-  const { layer, rawLayer } = useNormalizeLayer(key, resultManager, options);
-  const rawValue = get(rawLayer, fieldKey);
-  const layerValue = get(layer, fieldKey);
-  const { value: variableValue } = useReadVariable(layerValue, options == null ? void 0 : options.scopes);
-  const currentValue = variableValue ?? layerValue;
-  const isInherit = isInheritField(resultManager, key, fieldKey);
-  const isOverride = !isInherit && !isPartOfPrimary(resultManager, key);
-  const setter = layerFieldSetter(resultManager, key, fieldKey, currentValue);
-  const resetOverride = useCallback(() => {
-    resultManager.mutate(
-      key,
-      (prev) => {
-        const r = omit(prev, fieldKey);
-        return r;
-      },
-      { replace: true }
-    );
-  }, [updateLayerData]);
-  const restore = useCallback(
-    (fallbackValue) => {
-      var _a2, _b, _c;
-      const tempValue = ((_c = (_b = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
-      updateLayerData({ [fieldKey]: tempValue });
-      return tempValue;
-    },
-    [updateLayerData, resultManager]
-  );
-  const updateValue = useCallback(
-    (value, options2) => {
-      setter(value, options2);
-    },
-    [setter]
-  );
-  const isVariable = isVariableLink$1(rawValue ?? layerValue);
-  const variableId = isVariable ? (_a = entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
-  return [
-    currentValue,
-    updateValue,
-    {
-      isOverride,
-      resetOverride,
-      isVariable,
-      cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
-      rawValue,
-      restore,
-      ...resultManager.entityOfKey(key)
-    }
-  ];
+  useGraph(resultManager, key);
+  if (!resultManager || !key) {
+    return EMPTY_RESOLVED$1;
+  }
+  const rawLayer = resultManager.resolve(key);
+  const overrider = getOverrider(resultManager, key);
+  const layer = getNormalizeLayer$1(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 };
 };
-const processOptionalSize = (value, type) => {
-  if (value === -1) return "";
-  if (type === definition.sizing.Fixed) return toPx(value);
-  if (type === definition.sizing.Relative) return `${value}%`;
-  return "";
+function useForceUpdate() {
+  return useReducer(() => ({}), {});
+}
+const EMPTY_RESOLVED = {
+  values: {},
+  cssVariableValues: {},
+  rawValues: {}
 };
-const useOptionalSize = (type, layerKey) => {
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const [value] = useLayerValue(layerKey, type, fragmentManager);
-  const [valueType] = useLayerValue(layerKey, `${type}Type`, fragmentManager);
-  return useMemo(
-    () => processOptionalSize(value, valueType),
-    [valueType, value]
-  );
+const extractVariableValue$1 = (input, variableId) => {
+  if (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;
 };
-const useLayerSize = (layerKey) => {
-  const { manager } = useContext(FragmentContext);
-  const minWidth = useOptionalSize("minWidth", layerKey);
-  const minHeight = useOptionalSize("minHeight", layerKey);
-  const maxWidth = useOptionalSize("maxWidth", layerKey);
-  const maxHeight = useOptionalSize("maxHeight", layerKey);
-  return {
-    // width: widthCalc(widthValue),
-    // height: heightCalc(heightValue),
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight
+function deepMerge$1(a, b) {
+  if (!isObject(a) || !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 = useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  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 = entityOfKey(variableKey)) == null ? void 0 : _a2._id;
+    if (!isVariableLink$1(variableKey)) {
+      return { value: null, layer: null };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a3;
+        return (scope == null ? void 0 : scope.type) === 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.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.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.variableType.Object)
+          return variableLayer2;
+        const extractVariableDefaultValue = (mgr, varEntity) => {
+          const varLayer = mgr.resolve(varEntity);
+          if ((varLayer == null ? void 0 : varLayer.type) !== 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 && isVariableLink$1(fieldLink)) {
+                const _id = (_a4 = 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.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue$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 (isVariableLink$1(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return { value: resultValue, layer: variableLayer };
+  };
+  const resolveField = (fieldPath, value, raw) => {
+    var _a2;
+    rawValues[fieldPath] = raw;
+    if (isVariableLink$1(value)) {
+      const resolved = readVariable(value);
+      values[fieldPath] = resolved.value ?? value;
+      const variableId = (_a2 = 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 (isObject(value) && !isVariableLink$1(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 = useContext(RenderTargetContext);
@@ -1218,131 +1057,17 @@ const useRenderTarget = () => {
     isDocument: renderTarget === definition.renderTarget.document
   };
 };
-const autoSizes = [definition.sizing.Hug];
-const useLayerSizeValue = (layerKey, sizeType) => {
+const useReadVariables = (variableKeys) => {
+  const filterKeys = variableKeys.filter(isVariableLink$1);
   const { manager: fragmentManager } = useContext(FragmentContext);
-  const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
-  const { isDocument } = useRenderTarget();
-  const isTop = isTopLevel(fragmentManager, layerKey);
-  const isPartOfInstance = !!instanceLayerKey;
-  const layerParent = getParent(fragmentManager, layerKey);
-  const { layer: normalizeParentLayer } = useNormalizeLayer(
-    layerParent,
-    fragmentManager
-  );
-  const layerNode = fragmentManager.resolve(layerKey);
-  const [instanceType] = useLayerValue(
-    instanceLayerKey,
-    `${sizeType}Type`,
-    fragmentManager
-  );
-  const [valueType] = useLayerValue(
-    layerKey,
-    `${sizeType}Type`,
-    fragmentManager
-  );
-  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
-  return useCallback(
-    (value) => {
-      if (isTop && isDocument && (normalizeParentLayer == null ? void 0 : normalizeParentLayer[growType]) === definition.fragmentGrowingMode.fill) {
-        return "100%";
-      }
-      if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
-        return "100%";
-      }
-      if (autoSizes.includes(valueType)) {
-        return layerNode._type === definition.nodes.Instance ? "auto" : "fit-content";
-      }
-      if (valueType === definition.sizing.Relative) {
-        return `${value}%`;
-      }
-      if (valueType === definition.sizing.Fill) {
-        return `100%`;
-      }
-      return toPx(value);
-    },
-    [
-      isTop,
-      layerParent,
-      isDocument,
-      growType,
-      isPartOfInstance,
-      instanceType,
-      valueType,
-      layerNode
-    ]
-  );
-};
-const useLayerPosition = (layerKey) => {
-  const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const isTop = isTopLevel(fragmentManager, layerKey);
-  const { isDocument } = useRenderTarget();
-  const [width] = useLayerValue(layerKey, "width");
-  const [height] = useLayerValue(layerKey, "height");
-  const widthCalc = useLayerSizeValue(layerKey, "width")(width);
-  const heightCalc = useLayerSizeValue(layerKey, "height")(height);
-  const [position] = useLayerValue(layerKey, "position");
-  const [centerAnchorX] = useLayerValue(layerKey, "centerAnchorX");
-  const [centerAnchorY] = useLayerValue(layerKey, "centerAnchorY");
-  const [top] = useLayerValue(layerKey, "top");
-  const [left] = useLayerValue(layerKey, "left");
-  const [right] = useLayerValue(layerKey, "right");
-  const [bottom] = useLayerValue(layerKey, "bottom");
-  const skipPosition = isTop && isDocument || !!instanceLayerKey && isTop;
-  if (isTop && !skipPosition) {
-    return {
-      position: definition.positionType.absolute,
-      top: toPx(top),
-      left: toPx(left),
-      width,
-      height
-    };
-  }
-  if (position === definition.positionType.relative || skipPosition) {
-    return {
-      position: definition.positionType.relative,
-      width: widthCalc,
-      height: heightCalc
-    };
-  }
-  const hasConstrainX = isFiniteNumber(left) && isFiniteNumber(right);
-  const hasConstrainY = isFiniteNumber(top) && isFiniteNumber(bottom);
-  const hasAnyConstrainX = isFiniteNumber(left) || isFiniteNumber(right);
-  const hasAnyConstrainY = isFiniteNumber(top) || isFiniteNumber(bottom);
-  return {
-    position,
-    left: isFiniteNumber(left) ? toPx(left) : !isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
-    top: isFiniteNumber(top) ? toPx(top) : !isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
-    right: isFiniteNumber(right) ? toPx(right) : null,
-    bottom: isFiniteNumber(bottom) ? toPx(bottom) : null,
-    width: hasConstrainX ? null : widthCalc,
-    height: hasConstrainY ? null : heightCalc,
-    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
-  };
-};
-const useImagePaint = (imageLinkKey) => {
-  var _a;
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const [, , srcInfo] = useLayerValue(imageLinkKey, "src", fragmentManager);
-  const [scale] = useLayerValue(imageLinkKey, "scale", fragmentManager);
-  return {
-    background: srcInfo.cssVariableValue,
-    backgroundRepeat: "no-repeat",
-    backgroundSize: (_a = scale == null ? void 0 : scale.toLowerCase) == null ? void 0 : _a.call(scale)
-  };
-};
-const useReadVariables = (variableKeys) => {
-  const filterKeys = variableKeys.filter(isVariableLink$1);
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const { props, innerManager, layerKey } = useContext(InstanceContext);
-  const resultManager = innerManager ?? fragmentManager;
-  const variableLayers = useGraphStack(
-    !!filterKeys.length ? resultManager : null,
-    filterKeys,
-    {
-      selector: (graph) => graph ? pick(graph, "defaultValue", "required") : graph
-    }
+  const { props, innerManager, layerKey } = useContext(InstanceContext);
+  const resultManager = innerManager ?? fragmentManager;
+  const variableLayers = useGraphStack(
+    !!filterKeys.length ? resultManager : null,
+    filterKeys,
+    {
+      selector: (graph) => graph ? pick(graph, "defaultValue", "required") : graph
+    }
   );
   return variableLayers.map((layer) => {
     const { _id: propertyId } = layer ?? {};
@@ -1356,6 +1081,164 @@ const useReadVariables = (variableKeys) => {
     };
   });
 };
+const extractVariableValue = (input, variableId) => {
+  if (isObject(input)) {
+    if (variableId in input) {
+      return input[variableId];
+    }
+    for (let key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue(input[key], variableId);
+        if (result !== void 0) {
+          return result;
+        }
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge(a, b) {
+  if (!isObject(a) || !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 = useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  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.variableType.Object)
+      return variableLayer == null ? void 0 : variableLayer.defaultValue;
+    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
+      (acc, fieldLink) => {
+        var _a;
+        if (!!fieldLink && isVariableLink$1(fieldLink)) {
+          const _id = (_a = entityOfKey(fieldLink)) == null ? void 0 : _a._id;
+          if (_id) {
+            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  };
+  const resolveVariableLayer = (manager, variableLink, customProps) => {
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
+    if (!variableLayer) return null;
+    if ((variableLayer == null ? void 0 : variableLayer.type) === 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.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 = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
+    if (!isVariableLink$1(variableKey2)) {
+      return {
+        value: null,
+        layer: null
+      };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a2;
+        return (scope == null ? void 0 : scope.type) === 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.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.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (isVariableLink$1(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return {
+      value: resultValue,
+      layer: variableLayer
+    };
+  };
+  subscriptions.current = [];
+  const result = readVariable(variableKey);
+  return {
+    ...result,
+    readVariable,
+    _dep: dep
+  };
+};
 const useLayersValue = (layerKeys, fieldKey, options) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
@@ -1421,6 +1304,66 @@ const useLayersValue = (layerKeys, fieldKey, options) => {
     ];
   });
 };
+const useLayerValue = (layerKey, fieldKey, options) => {
+  var _a;
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
+  if (!resultManager) {
+    return [null, noop, {}];
+  }
+  const key = keyOfEntity(layerKey);
+  const [, updateLayerData] = useGraph(resultManager, key, {
+    // selector: (data) => (data ? pick(data, fieldKey) : data),
+  });
+  const { layer, rawLayer } = useNormalizeLayer(key, resultManager, options);
+  const rawValue = get(rawLayer, fieldKey);
+  const layerValue = get(layer, fieldKey);
+  const { value: variableValue } = useReadVariable(layerValue, options == null ? void 0 : options.scopes);
+  const currentValue = variableValue ?? layerValue;
+  const isInherit = isInheritField(resultManager, key, fieldKey);
+  const isOverride = !isInherit && !isPartOfPrimary(resultManager, key);
+  const setter = layerFieldSetter(resultManager, key, fieldKey, currentValue);
+  const resetOverride = useCallback(() => {
+    resultManager.mutate(
+      key,
+      (prev) => {
+        const r = omit(prev, fieldKey);
+        return r;
+      },
+      { replace: true }
+    );
+  }, [updateLayerData]);
+  const restore = useCallback(
+    (fallbackValue) => {
+      var _a2, _b, _c;
+      const tempValue = ((_c = (_b = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
+      updateLayerData({ [fieldKey]: tempValue });
+      return tempValue;
+    },
+    [updateLayerData, resultManager]
+  );
+  const updateValue = useCallback(
+    (value, options2) => {
+      setter(value, options2);
+    },
+    [setter]
+  );
+  const isVariable = isVariableLink$1(rawValue ?? layerValue);
+  const variableId = isVariable ? (_a = entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
+  return [
+    currentValue,
+    updateValue,
+    {
+      isOverride,
+      resetOverride,
+      isVariable,
+      cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
+      rawValue,
+      restore,
+      ...resultManager.entityOfKey(key)
+    }
+  ];
+};
 const useLayerChildren = (layerKey, customManager) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [layerData] = useGraph(customManager ?? fragmentManager, layerKey, {
@@ -1511,6 +1454,272 @@ const useLayerLinearGradient = (linearGradientLink) => {
     [angle, stopValues]
   );
 };
+const processOptionalSize = (value, type) => {
+  if (value === -1) return "";
+  if (type === definition.sizing.Fixed) return toPx(value);
+  if (type === 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 } = useContext(FragmentContext);
+  const [value] = useLayerValue(layerKey, type, fragmentManager);
+  const [valueType] = useLayerValue(layerKey, `${type}Type`, fragmentManager);
+  return useMemo(
+    () => processOptionalSize(value, valueType),
+    [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 } = useContext(FragmentContext);
+  const minWidth = useOptionalSize("minWidth", layerKey);
+  const minHeight = useOptionalSize("minHeight", layerKey);
+  const maxWidth = useOptionalSize("maxWidth", layerKey);
+  const maxHeight = useOptionalSize("maxHeight", layerKey);
+  return {
+    // width: widthCalc(widthValue),
+    // height: heightCalc(heightValue),
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight
+  };
+};
+const autoSizes = [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.fragmentGrowingMode.fill) {
+      return "100%";
+    }
+    if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+      return "100%";
+    }
+    if (autoSizes.includes(valueType)) {
+      return (layerNode == null ? void 0 : layerNode._type) === definition.nodes.Instance ? "auto" : "fit-content";
+    }
+    if (valueType === definition.sizing.Relative) return `${value}%`;
+    if (valueType === definition.sizing.Fill) return `100%`;
+    return toPx(value);
+  };
+};
+const useLayerSizeValue = (layerKey, sizeType) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
+  const { isDocument } = useRenderTarget();
+  const isTop = isTopLevel(fragmentManager, layerKey);
+  const isPartOfInstance = !!instanceLayerKey;
+  const layerParent = getParent(fragmentManager, layerKey);
+  const { layer: normalizeParentLayer } = useNormalizeLayer(
+    layerParent,
+    fragmentManager
+  );
+  const layerNode = fragmentManager.resolve(layerKey);
+  const [instanceType] = useLayerValue(
+    instanceLayerKey,
+    `${sizeType}Type`,
+    fragmentManager
+  );
+  const [valueType] = useLayerValue(
+    layerKey,
+    `${sizeType}Type`,
+    fragmentManager
+  );
+  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
+  return useCallback(
+    (value) => {
+      if (isTop && isDocument && (normalizeParentLayer == null ? void 0 : normalizeParentLayer[growType]) === definition.fragmentGrowingMode.fill) {
+        return "100%";
+      }
+      if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+        return "100%";
+      }
+      if (autoSizes.includes(valueType)) {
+        return layerNode._type === definition.nodes.Instance ? "auto" : "fit-content";
+      }
+      if (valueType === definition.sizing.Relative) {
+        return `${value}%`;
+      }
+      if (valueType === definition.sizing.Fill) {
+        return `100%`;
+      }
+      return toPx(value);
+    },
+    [
+      isTop,
+      layerParent,
+      isDocument,
+      growType,
+      isPartOfInstance,
+      instanceType,
+      valueType,
+      layerNode
+    ]
+  );
+};
+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.positionType.absolute,
+      top: toPx(top),
+      left: toPx(left),
+      width,
+      height
+    };
+  }
+  if (position === definition.positionType.relative || skipPosition) {
+    return {
+      position: definition.positionType.relative,
+      width: widthCalc(width),
+      height: heightCalc(height)
+    };
+  }
+  const hasConstrainX = isFiniteNumber(left) && isFiniteNumber(right);
+  const hasConstrainY = isFiniteNumber(top) && isFiniteNumber(bottom);
+  const hasAnyConstrainX = isFiniteNumber(left) || isFiniteNumber(right);
+  const hasAnyConstrainY = isFiniteNumber(top) || isFiniteNumber(bottom);
+  return {
+    position,
+    left: isFiniteNumber(left) ? toPx(left) : !isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
+    top: isFiniteNumber(top) ? toPx(top) : !isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
+    right: isFiniteNumber(right) ? toPx(right) : null,
+    bottom: isFiniteNumber(bottom) ? toPx(bottom) : null,
+    width: hasConstrainX ? null : widthCalc(width),
+    height: hasConstrainY ? null : heightCalc(height),
+    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
+  };
+};
+const useLayerPosition = (layerKey) => {
+  const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const isTop = isTopLevel(fragmentManager, layerKey);
+  const { isDocument } = useRenderTarget();
+  const [width] = useLayerValue(layerKey, "width");
+  const [height] = useLayerValue(layerKey, "height");
+  const widthCalc = useLayerSizeValue(layerKey, "width")(width);
+  const heightCalc = useLayerSizeValue(layerKey, "height")(height);
+  const [position] = useLayerValue(layerKey, "position");
+  const [centerAnchorX] = useLayerValue(layerKey, "centerAnchorX");
+  const [centerAnchorY] = useLayerValue(layerKey, "centerAnchorY");
+  const [top] = useLayerValue(layerKey, "top");
+  const [left] = useLayerValue(layerKey, "left");
+  const [right] = useLayerValue(layerKey, "right");
+  const [bottom] = useLayerValue(layerKey, "bottom");
+  const skipPosition = isTop && isDocument || !!instanceLayerKey && isTop;
+  if (isTop && !skipPosition) {
+    return {
+      position: definition.positionType.absolute,
+      top: toPx(top),
+      left: toPx(left),
+      width,
+      height
+    };
+  }
+  if (position === definition.positionType.relative || skipPosition) {
+    return {
+      position: definition.positionType.relative,
+      width: widthCalc,
+      height: heightCalc
+    };
+  }
+  const hasConstrainX = isFiniteNumber(left) && isFiniteNumber(right);
+  const hasConstrainY = isFiniteNumber(top) && isFiniteNumber(bottom);
+  const hasAnyConstrainX = isFiniteNumber(left) || isFiniteNumber(right);
+  const hasAnyConstrainY = isFiniteNumber(top) || isFiniteNumber(bottom);
+  return {
+    position,
+    left: isFiniteNumber(left) ? toPx(left) : !isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
+    top: isFiniteNumber(top) ? toPx(top) : !isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
+    right: isFiniteNumber(right) ? toPx(right) : null,
+    bottom: isFiniteNumber(bottom) ? toPx(bottom) : null,
+    width: hasConstrainX ? null : widthCalc,
+    height: hasConstrainY ? null : heightCalc,
+    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
+  };
+};
+const 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 } = useContext(FragmentContext);
+  const [, , srcInfo] = useLayerValue(imageLinkKey, "src", fragmentManager);
+  const [scale] = useLayerValue(imageLinkKey, "scale", fragmentManager);
+  return {
+    background: srcInfo.cssVariableValue,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: (_a = scale == null ? void 0 : scale.toLowerCase) == null ? void 0 : _a.call(scale)
+  };
+};
+const calcLayerBackground = (paintVars, imageVars, imageSizeVars, linearGradient) => {
+  const fillType = paintVars.values.type;
+  const cssSolidFill = paintVars.cssVariableValues.solid;
+  const cssImageSize = imageSizeVars.cssVariableValues.imageSize;
+  if (fillType === definition.paintMode.Solid) {
+    return { background: cssSolidFill };
+  }
+  if (fillType === definition.paintMode.Image) {
+    const image = calcImagePaint(imageVars);
+    return {
+      ...image,
+      backgroundSize: cssImageSize ?? image.backgroundSize
+    };
+  }
+  if (fillType === definition.paintMode.LinearGradient) {
+    return linearGradient;
+  }
+  return { background: null };
+};
 const useLayerBackground = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [paintLinkKey] = useLayerValue(layerKey, "paint", fragmentManager);
@@ -1556,6 +1765,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.layerMode.flex ? "flex" : null;
+};
 const useLayerDisplay = (layerKey) => {
   const { manager } = useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(layerKey, "layerMode", manager);
@@ -1567,6 +1782,15 @@ const useLayerDisplay = (layerKey) => {
     return layerModeValue === 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");
@@ -1580,6 +1804,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.borderType.None) {
+    return { border: null };
+  }
+  if (borderPaint.type === 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.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.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.paintMode.Solid ? borderPaint.solid : "transparent"
+      ),
+      background
+    };
+  }
+  if (borderPaint.type === definition.paintMode.Solid) {
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
+  }
+  return { border: null };
+};
 const useLayerBorder = (layerKey) => {
   var _a, _b;
   const [borderLinkKey] = useLayerValue(layerKey, "border");
@@ -1620,6 +1874,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.layerMode.flex;
+  const baseFlow = layerDirectionValue === 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: 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 } = useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(
@@ -1655,6 +1931,15 @@ const useLayerLayout = (layerKey) => {
     padding: isFlex ? padding : null
   };
 };
+const calcLayerTextStyles = (vars) => {
+  const attributes = vars.values.attributes;
+  const color = vars.values["attributes.color"];
+  const cleanAttributes = omit(attributes, "_id", "_type");
+  return {
+    ...cleanAttributes,
+    color
+  };
+};
 const useLayerTextStyles = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
@@ -1665,6 +1950,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.layerDirection.horizontal ? widthType : heightType;
+  return {
+    flex: type === definition.sizing.Fill ? "1 0 0" : "0 0 auto"
+  };
+};
 const useLayerFlex = (layerKey) => {
   const { manager } = useContext(FragmentContext);
   const [widthType] = useLayerValue(layerKey, "widthType", manager);
@@ -1680,48 +1974,121 @@ const useLayerFlex = (layerKey) => {
     flex: type === 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 } = 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 } = 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 = isVariableLink$1(paintVars.rawValues.image) ? paintVars.rawValues.image : layerKey;
+    const imageSizeResolved = useResolvedLayer(
+      imageSizeLayerKey,
+      SKIP_OVERRIDE
+    );
+    const imageSizeVars = useResolvedLayerVariables(
+      imageSizeResolved.layer,
+      imageSizeResolved.rawLayer
+    );
+    const parentLayerKey = keyOfEntity(
+      getParent(fragmentManager, layerKey)
+    );
+    const parentResolved = useResolvedLayer(
+      parentLayerKey,
+      SKIP_OVERRIDE
+    );
+    const parentVars = useResolvedLayerVariables(
+      parentResolved.layer,
+      parentResolved.rawLayer
     );
-    const [whiteSpace] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
-    const textStyles = useLayerTextStyles(layerKey);
-    const [overflow] = useLayerValue(layerKey, "overflow", fragmentManager);
+    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 layout = calcLayerLayout(vars);
+    const textStyles = calcLayerTextStyles(vars);
+    const layerFlex = calcLayerFlex(vars, parentVars);
     return {
-      // ...(props ?? {}),
       ...background,
       ...border,
       ...position,
-      opacity,
-      overflow,
-      rotate: isValue(rotate) ? `${rotate}deg` : null,
-      "border-radius": isValue(rawBorderRadius) ? borderRadius : null,
-      "white-space": whiteSpace,
-      "z-index": zIndex !== -1 ? zIndex : null,
+      opacity: vars.values.opacity,
+      overflow: vars.values.overflow,
+      rotate: isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      "border-radius": 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 {};
@@ -1826,6 +2193,34 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
   };
 };
+const useGlobalManager = (globalManager) => {
+  var _a, _b;
+  const currentGlobalManager = useContext(GlobalManagerContext);
+  const resultManager = globalManager ?? currentGlobalManager;
+  const [fragmentsGraph] = 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) ?? noop,
+    setRenderTarget
+  };
+};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1850,12 +2245,14 @@ const useLayerInteractions = (layerKey, options) => {
   });
   const fireEvent = useCallback(
     (eventLink) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const eventType = (_a = 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.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,
           ...pick(areaScope, "variantId", "campaignId", "areaId")
         });
@@ -1863,10 +2260,10 @@ const useLayerInteractions = (layerKey, options) => {
       if (eventType === 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 (isVariableLink$1(target) && isValue(value)) {
-          const targetId = (_f = 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 = entityOfKey(target)) == null ? void 0 : _g._id;
+          (_h = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _h.call(instanceScope, targetId, value);
         }
       }
     },
@@ -2073,52 +2470,249 @@ const useCollection = (layerKey, options) => {
     ...frame
   };
 };
-const collectLeafFieldKeys = (objectVar, manager, keys) => {
-  if (!(objectVar == null ? void 0 : objectVar.fields)) return;
-  const fields = cleanGraph(objectVar.fields);
-  for (const fieldValue of Object.values(fields)) {
-    let fieldVar;
-    let fieldKey;
-    if (isVariableLink$1(fieldValue)) {
-      fieldKey = fieldValue;
-      fieldVar = manager.resolve(fieldKey);
-    } else if (isObject(fieldValue) && (fieldValue == null ? void 0 : fieldValue._type) && (fieldValue == null ? void 0 : fieldValue._id)) {
-      fieldKey = keyOfEntity(fieldValue);
-      fieldVar = fieldValue;
-    }
+const resolveFieldRef = (field, manager) => {
+  if (isVariableLink$1(field)) {
+    return manager.resolve(field);
+  }
+  if (isObject(field) && (field == null ? void 0 : field._id)) {
+    return field;
+  }
+  return void 0;
+};
+const fieldRefToKey = (field) => {
+  if (isVariableLink$1(field)) {
+    return field;
+  }
+  if (isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
+    return keyOfEntity(field);
+  }
+  return void 0;
+};
+const collectLeafKeys = (defVar, manager, keys) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = 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.variableType.Object && fieldVar.fields) {
-      collectLeafFieldKeys(fieldVar, manager, keys);
+      collectLeafKeys(fieldVar, manager, keys);
     } else {
       keys.push(fieldKey);
     }
   }
 };
-const useExpandedObjectProps = (props, manager, parentManager, definitions) => {
-  const objectFieldKeys = useMemo(() => {
+const flattenObjectFields = (defVar, valueObj, manager, result) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = 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.variableType.Object && fieldVar.fields && 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 = cleanGraph(childDef.fields);
+  const parentFields = 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.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === 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 (isLink$1(item)) {
+      const resolved = manager.resolve(item);
+      if (!resolved) continue;
+      const payload = isObject(resolved.value) ? resolved.value : resolved;
+      if (isObject(payload)) {
+        result.push(cleanGraph(payload));
+      }
+    } else if (isObject(item)) {
+      const payload = isObject(item.value) ? item.value : item;
+      result.push(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 = 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.variableType.Object && (defVar == null ? void 0 : defVar.fields)) {
-        collectLeafFieldKeys(defVar, manager, keys);
+      if (!defVar) continue;
+      if (defVar.type === definition.variableType.Object && defVar.fields) {
+        collectLeafKeys(defVar, manager, keys);
+      } else if (defVar.type === definition.variableType.Array && defVar.definition) {
+        const arrDef = resolveFieldRef(defVar.definition, manager);
+        if ((arrDef == null ? void 0 : arrDef.type) === definition.variableType.Object && (arrDef == null ? void 0 : arrDef.fields)) {
+          collectLeafKeys(arrDef, manager, keys);
+        }
       }
     }
     return keys;
   }, [definitions, manager]);
-  const fieldVarLayers = useGraphStack(
-    objectFieldKeys.length ? manager : null,
-    objectFieldKeys
+  const leafLayers = useGraphStack(leafKeys.length ? manager : null, leafKeys);
+  const arrayItemKeys = 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.variableType.Array || !defVar.definition)
+        continue;
+      const propValue = props[defVar._id];
+      if (!isVariableLink$1(propValue)) continue;
+      const parentVar = resolveManager.resolve(propValue);
+      if ((parentVar == null ? void 0 : parentVar.type) !== definition.variableType.Array) continue;
+      const items = parentVar.defaultValue;
+      if (!Array.isArray(items)) continue;
+      for (const item of items) {
+        if (isLink$1(item)) {
+          keys.push(item);
+          const resolved = resolveManager.resolve(item);
+          if ((resolved == null ? void 0 : resolved.value) && isObject(resolved.value) && ((_a = resolved.value) == null ? void 0 : _a._type)) {
+            const valueKey = keyOfEntity(resolved.value);
+            if (valueKey) keys.push(valueKey);
+          }
+        }
+      }
+    }
+    return keys;
+  }, [definitions, manager, parentManager, props, _dep]);
+  const arrayItemLayers = useGraphStack(
+    arrayItemKeys.length ? parentManager ?? manager : null,
+    arrayItemKeys
   );
   return 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.variableType.Object && defVar.fields) {
+        if (isObject(propValue)) {
+          flattenObjectFields(
+            defVar,
+            propValue,
+            manager,
+            expanded
+          );
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      if (defVar.type === definition.variableType.Array && defVar.definition) {
+        if (isVariableLink$1(propValue) && resolveManager) {
+          const parentVar = resolveManager.resolve(propValue);
+          if ((parentVar == null ? void 0 : parentVar.type) === 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.variableType.Object && (childDef == null ? void 0 : childDef.fields) && (parentDef == null ? void 0 : parentDef.type) === 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,
@@ -2132,9 +2726,7 @@ const CollectionItem = ({
   keyOfEntity(layer);
   const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
-  const inputProps = isObject(value) ? {
-    ...value
-  } : {
+  const inputProps = {
     [definitionId]: value
   };
   const props = cleanGraph(inputProps);
@@ -2142,7 +2734,7 @@ const CollectionItem = ({
     () => sourceDefinition ? [sourceDefinition] : [],
     [sourceDefinition]
   );
-  const expandedProps = useExpandedObjectProps(props, manager, void 0, definitions);
+  const expandedProps = useExtractProps(props, manager, void 0, definitions);
   const cssVars = useMemo(
     () => toCssCustomProperties(expandedProps),
     [expandedProps]
@@ -2280,24 +2872,18 @@ const Frame = ({
     }
   );
 };
-const useIsomorphicEffect = (callback, deps) => {
-  useEffect(callback, deps);
-  if (!isBrowser$1) {
-    callback();
-  }
-};
 const useCssChunk = (linkKey) => {
   const { manager } = useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
   const [enabled] = useLayerValue(linkKey, "enabled", { manager });
-  const styleSheet = useStyleSheet(manager);
-  const reset = useRef(noop);
-  useIsomorphicEffect(() => {
-    if (enabled && chunkId) {
-      reset.current = styleSheet.addCssChunk(chunkId);
-    }
-    return reset.current;
-  }, [enabled]);
+  const { addCssChunk } = useStyleSheet(manager);
+  useEffect(() => {
+    if (!enabled || !chunkId) return;
+    const cleanup = addCssChunk(chunkId);
+    return () => {
+      cleanup();
+    };
+  }, [enabled, chunkId, addCssChunk]);
 };
 const CssChunk = ({ linkKey }) => {
   useCssChunk(linkKey);
@@ -2311,23 +2897,18 @@ const useFragmentManager = (fragmentId, inputGlobalManager) => {
     getFragmentManager,
     queryFragmentManager
   } = useGlobalManager(inputGlobalManager);
-  const [loading, setLoading] = useState(false);
   const manager = getFragmentManager(fragmentId);
+  const loading = !!fragmentId && !manager;
   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) => {
@@ -2385,7 +2966,7 @@ const useFragment = (fragmentId, globalManager) => {
   const { properties: definitions } = useFragmentProperties(fragmentId);
   const scopes = useContext(ScopeContext);
   !(scopes == null ? void 0 : scopes.length);
-  const { addLayerStyle, addCssChunk, mount, unmount } = useStyleSheet(
+  const { addLayerStyle, mount, unmount } = useStyleSheet(
     fragmentContext.manager
   );
   if (fragmentContext.manager) {
@@ -2420,35 +3001,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__ */ jsxs("div", { "data-key": layerKey, className: hash, children: [
+const FragmentInternal = 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__ */ jsxs("div", { "data-key": layerKey, className: hash, children: [
       chunkLinks.map((linkKey) => /* @__PURE__ */ jsx(CssChunk, { linkKey })),
       children.map((childLink) => {
         var _a;
@@ -2466,21 +3038,51 @@ const FragmentInternal = ({
           childLink
         );
       })
-    ] })
-  );
-};
+    ] });
+  }
+);
 const Fragment = (props) => {
   const currentGlobalManager = useContext(GlobalManagerContext);
   const { manager: resultGlobalManager } = useGlobalManager(
     props.globalManager
   );
   const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
-  const Base = /* @__PURE__ */ jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
+  const fragmentContextValue = useMemo(() => ({ manager }), [manager]);
+  const Base = /* @__PURE__ */ jsx(FragmentContext.Provider, { value: fragmentContextValue, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
   if (!currentGlobalManager) {
     return /* @__PURE__ */ jsx(GlobalManagerProvider, { value: resultGlobalManager, children: Base });
   }
   return Base;
 };
+const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
+  const fields = cleanGraph(objectVar.fields);
+  const result = {};
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    let fieldVar;
+    let fieldKey;
+    if (isVariableLink$1(fieldRef)) {
+      fieldKey = fieldRef;
+      fieldVar = manager == null ? void 0 : manager.resolve(fieldKey);
+    } else if (isObject(fieldRef) && (fieldRef == null ? void 0 : fieldRef._id)) {
+      fieldKey = keyOfEntity(fieldRef);
+      fieldVar = fieldRef;
+    }
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === 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(
@@ -2499,13 +3101,39 @@ const useInstanceProps = (instanceProps) => {
     };
   }
   const extractProps = cleanGraph(inputProps);
+  const { readVariable } = useReadVariable();
+  let resolvedProps = extractProps;
+  if (!isTopInstance) {
+    resolvedProps = {};
+    for (const [key, value] of Object.entries(extractProps)) {
+      if (!isVariableLink$1(value)) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      const varLayer = fragmentManager == null ? void 0 : fragmentManager.resolve(value);
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.variableType.Array) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.variableType.Object && (varLayer == null ? void 0 : varLayer.fields)) {
+        resolvedProps[key] = resolveObjectToConcreteValue(
+          varLayer,
+          fragmentManager,
+          readVariable
+        );
+        continue;
+      }
+      const { value: resolved } = readVariable(value);
+      resolvedProps[key] = resolved;
+    }
+  }
   useEffect(() => {
     if (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 }));
@@ -2582,7 +3210,7 @@ const InstanceInitial = ({
     ...instanceProps,
     pauseInteractions
   });
-  const expandedProps = useExpandedObjectProps(
+  const expandedProps = useExtractProps(
     props,
     innerManager,
     parentManager,
@@ -2593,49 +3221,56 @@ const InstanceInitial = ({
     [expandedProps]
   );
   useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
+  const scopeValue = useMemo(
+    () => ({
+      type: definition.scopeTypes.InstanceScope,
+      props: expandedProps,
+      definitions,
+      fragmentId,
+      documentManager: innerManager,
+      layerKey: instanceProps.layerKey,
+      onChangeProps
+    }),
+    [
+      expandedProps,
+      definitions,
+      fragmentId,
+      innerManager,
+      instanceProps.layerKey,
+      onChangeProps
+    ]
+  );
+  const instanceContextValue = useMemo(
+    () => ({
+      layerKey: instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      props: expandedProps
+    }),
+    [
+      instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      expandedProps
+    ]
+  );
   return /* @__PURE__ */ jsx(
     Scope,
     {
       fragmentManager: innerManager,
       layerKey: instanceProps.layerKey,
-      value: {
-        type: definition.scopeTypes.InstanceScope,
-        props: expandedProps,
-        definitions,
-        fragmentId,
-        documentManager: innerManager,
-        layerKey: instanceProps.layerKey,
-        onChangeProps
-      },
-      children: /* @__PURE__ */ jsx(
-        InstanceContext$1.Provider,
+      value: scopeValue,
+      children: /* @__PURE__ */ jsx(InstanceContext$1.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsx(
+        Tag,
         {
-          value: {
-            layerKey: instanceProps.layerKey,
-            definitions,
-            innerManager,
-            parentManager,
-            props: expandedProps
-          },
-          children: parentManager ? /* @__PURE__ */ jsx(
-            Tag,
-            {
-              className: classnames,
-              "data-key": instanceProps.layerKey,
-              style: { ...style, ...cssVars },
-              ...link.linkProps,
-              ...events,
-              children: /* @__PURE__ */ jsx(
-                Fragment,
-                {
-                  fragmentId,
-                  globalManager,
-                  FrameElement,
-                  pauseInteractions
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+          className: classnames,
+          "data-key": instanceProps.layerKey,
+          style: { ...style, ...cssVars },
+          ...link.linkProps,
+          ...events,
+          children: /* @__PURE__ */ jsx(
             Fragment,
             {
               fragmentId,
@@ -2643,9 +3278,17 @@ const InstanceInitial = ({
               FrameElement,
               pauseInteractions
             }
-          ) })
+          )
         }
-      )
+      ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+        Fragment,
+        {
+          fragmentId,
+          globalManager,
+          FrameElement,
+          pauseInteractions
+        }
+      ) }) })
     }
   );
 };
@@ -2693,18 +3336,28 @@ const useArea = (options) => {
 const AreaInitial = (areaProps) => {
   const areaData = useArea(areaProps);
   if (!areaData) return null;
-  return /* @__PURE__ */ jsx(
+  const areaManager = useMemo(
+    () => createAreaManager({
+      areaId: areaData.areaId,
+      campaignId: areaData.campaignId,
+      variantId: areaData.variantId,
+      areaProperties: areaData.areaProperties
+    }),
+    [areaData.areaId]
+  );
+  return /* @__PURE__ */ jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsx(
     Scope,
     {
       fragmentManager: areaData.fragmentManager,
       layerKey: "Area",
       value: {
         type: definition.scopeTypes.AreaScope,
+        areaManager,
         ...areaData ?? {}
       },
       children: /* @__PURE__ */ jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props })
     }
-  );
+  ) });
 };
 const Area = (props) => {
   return "globalManager" in props ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) });
@@ -2731,6 +3384,8 @@ const useLayerCssOverride = (layerKey) => {
 };
 export {
   Area,
+  AreaManagerContext,
+  AreaManagerProvider,
   Collection,
   CssChunk,
   CustomRender,
@@ -2761,7 +3416,6 @@ export {
   declareFragmentProperty,
   defaultCustomRender,
   duplicateLayer,
-  expandObjectProps,
   findBreakpoint,
   getAllParents,
   getHydratedData,
@@ -2783,7 +3437,6 @@ export {
   isTopLevel,
   isVariableLink,
   layerFieldSetter,
-  loadFragmentManager,
   makeSnapshot,
   moveChildren,
   nodeWalker,
@@ -2827,6 +3480,8 @@ export {
   useReadVariable,
   useReadVariables,
   useRenderTarget,
+  useResolvedLayer,
+  useResolvedLayerVariables,
   useTextAttributes,
   useTextContent,
   useTextHighlight,