npm - @fragmentsx/render-react - Versions diffs - 1.2.6 → 1.4.0 - Mend

@fragmentsx/render-react 1.2.6 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -3,9 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const definition = require("@fragmentsx/definition");
 const jsxRuntime = require("react/jsx-runtime");
-const react$1 = require("@graph-state/react");
 const utils = require("@fragmentsx/utils");
 const core = require("@graph-state/core");
+const react$1 = require("@graph-state/react");
+const clientCore = require("@fragmentsx/client-core");
 const GlobalManagerContext = react.createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
 const FragmentContext = react.createContext({
@@ -24,35 +25,9 @@ const RenderTargetContext = react.createContext(
   definition.definition.renderTarget.document
 );
 const RenderTargetProvider = RenderTargetContext.Provider;
+const AreaManagerContext = react.createContext(null);
+const AreaManagerProvider = AreaManagerContext.Provider;
 const ScopeContext = react.createContext([]);
-const useGlobalManager = (globalManager) => {
-  var _a, _b;
-  const currentGlobalManager = react.useContext(GlobalManagerContext);
-  const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = react$1.useGraph(
-    resultManager,
-    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
-  );
-  const queryFragmentManager = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
-  };
-  const queryArea = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
-  };
-  const setRenderTarget = (value) => {
-    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
-  };
-  return {
-    fragmentsGraph,
-    manager: resultManager,
-    queryFragmentManager,
-    queryArea,
-    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? utils.noop,
-    setRenderTarget
-  };
-};
 const Scope = ({
   value,
   children,
@@ -60,9 +35,11 @@ const Scope = ({
   layerKey
 }) => {
   var _a, _b;
-  const { manager: globalManager } = useGlobalManager();
   const currentScope = react.useContext(ScopeContext) ?? [];
-  const nextScope = [...currentScope, value];
+  const nextScope = react.useMemo(
+    () => [...currentScope, value],
+    [currentScope, value]
+  );
   (_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.registerScope) == null ? void 0 : _b.call(_a, layerKey, value);
   return /* @__PURE__ */ jsxRuntime.jsx(ScopeContext.Provider, { value: nextScope, children });
 };
@@ -73,191 +50,6 @@ const getOverrider = (manager, layerEntity) => {
   const layer = manager.resolve(layerEntity);
   return manager.resolve(getKey(layer == null ? void 0 : layer.overrideFrom) ?? layerEntity);
 };
-const getLayer = (manager, layer, options) => {
-  if (!manager || !layer) return null;
-  const layerKey = manager.keyOfEntity(layer);
-  const layerData = manager.resolve(layerKey);
-  const overrider = getOverrider(manager, layerKey);
-  return definition.getNormalizeLayer(layerData, overrider, options == null ? void 0 : options.withFallback);
-};
-const getNormalizeLayer = (layerKey, manager, options) => {
-  const layer = manager == null ? void 0 : manager.resolve(layerKey);
-  const parsedLayer = getLayer(manager, layerKey, options);
-  return {
-    layerKey,
-    rawLayer: layer,
-    layer: parsedLayer
-  };
-};
-const useNormalizeLayer = (layerKey, manager, options) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  if (!resultManager) {
-    return {
-      layerKey,
-      rawLayer: null,
-      layer: null
-    };
-  }
-  return getNormalizeLayer(layerKey, resultManager, options);
-};
-const useNormalizeLayers = (layerKeys, manager, options) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  return layerKeys.map(
-    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
-  );
-};
-function useForceUpdate() {
-  return react.useReducer(() => ({}), {});
-}
-const extractVariableValue = (input, variableId) => {
-  if (utils.isObject(input)) {
-    if (variableId in input) {
-      return input[variableId];
-    }
-    for (let key in input) {
-      if (input.hasOwnProperty(key)) {
-        const result = extractVariableValue(input[key], variableId);
-        if (result !== void 0) {
-          return result;
-        }
-      }
-    }
-  }
-  return void 0;
-};
-function deepMerge(a, b) {
-  if (!utils.isObject(a) || !utils.isObject(b)) return a;
-  const result = { ...b };
-  for (const [key, value] of Object.entries(a)) {
-    if (key in result && typeof result[key] === "object" && typeof value === "object") {
-      result[key] = deepMerge(value, result[key]);
-    } else {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-const useReadVariable = (variableKey, customScopes) => {
-  const contextScopes = react.useContext(ScopeContext);
-  const scopes = customScopes ?? contextScopes;
-  const unmountAbortController = react.useRef(new AbortController());
-  const [dep, forceUpdate] = useForceUpdate();
-  react.useEffect(
-    () => () => {
-      var _a;
-      (_a = unmountAbortController.current) == null ? void 0 : _a.abort("unmount");
-    },
-    []
-  );
-  const extractVariableDefaultValue = (manager, variableEntity) => {
-    const variableLayer = manager.resolve(variableEntity);
-    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.definition.variableType.Object)
-      return variableLayer == null ? void 0 : variableLayer.defaultValue;
-    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
-      (acc, fieldLink) => {
-        var _a;
-        if (!!fieldLink && definition.isVariableLink(fieldLink)) {
-          const _id = (_a = core.entityOfKey(fieldLink)) == null ? void 0 : _a._id;
-          if (_id) {
-            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  };
-  const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a, _b;
-    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
-    if (!variableLayer) return null;
-    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
-      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
-        return variableLayer;
-      const definitionDefaultValue = extractVariableDefaultValue(
-        manager,
-        definitionLayer
-      );
-      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
-      return {
-        ...variableLayer,
-        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
-          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
-          return deepMerge(
-            customItemValue ? { ...item, ...customItemValue } : item,
-            definitionDefaultValue
-          );
-        })
-      };
-    }
-    return variableLayer;
-  };
-  const readVariable = (variableKey2) => {
-    var _a, _b, _c, _d, _e;
-    const variableId = (_a = core.entityOfKey(variableKey2)) == null ? void 0 : _a._id;
-    if (!definition.isVariableLink(variableKey2)) {
-      return {
-        value: null,
-        layer: null
-      };
-    }
-    let instanceScope = scopes.findLast(
-      (scope) => {
-        var _a2;
-        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
-      }
-    );
-    if (!instanceScope) {
-      instanceScope = scopes.find(
-        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
-      );
-    }
-    const variableLayer = resolveVariableLayer(
-      instanceScope == null ? void 0 : instanceScope.documentManager,
-      variableKey2
-    );
-    (_c = instanceScope == null ? void 0 : instanceScope.documentManager) == null ? void 0 : _c.subscribe(variableKey2, forceUpdate, {
-      signal: (_b = unmountAbortController.current) == null ? void 0 : _b.signal
-    });
-    let instanceProp = (_d = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _d[variableId];
-    if (Array.isArray(instanceProp)) {
-      instanceProp = instanceProp.map(
-        (rawProp, index) => {
-          var _a2;
-          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
-        }
-      );
-    }
-    const lastCollectionItem = scopes.findLast(
-      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
-    );
-    resolveVariableLayer(
-      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.value
-    );
-    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_e = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _e._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
-    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
-    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
-    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
-    if (definition.isVariableLink(resultValue)) {
-      return readVariable(resultValue);
-    }
-    return {
-      value: resultValue,
-      layer: variableLayer
-    };
-  };
-  const result = readVariable(variableKey);
-  return {
-    ...result,
-    readVariable
-  };
-};
 const getParent = (manager, layerKey) => {
   const layer = manager.resolve(layerKey);
   return manager.resolve(getKey(layer == null ? void 0 : layer.parent) ?? null);
@@ -433,6 +225,9 @@ const cloneLayer = (manager, layer, externalProps = {}) => {
       layerGraph,
       (key, value, history) => {
         const isRoot = history.length <= 2;
+        if ((value == null ? void 0 : value._type) === definition.definition.nodes.Instance && key === "props") {
+          return utils.cleanGraph(value);
+        }
         if (!!value && n(value) && !IGNORE_TYPES.includes(value._type)) {
           const nextId = utils.generateId();
           const parentFromValue = utils.getKey(value.parent);
@@ -669,6 +464,41 @@ const moveChildren = (manager, targetKey, to, index) => {
     spliceChildren(manager, targetParent, targetKey);
   }
 };
+const getLayer = (manager, layer, options) => {
+  if (!manager || !layer) return null;
+  const layerKey = manager.keyOfEntity(layer);
+  const layerData = manager.resolve(layerKey);
+  const overrider = getOverrider(manager, layerKey);
+  return definition.getNormalizeLayer(layerData, overrider, options == null ? void 0 : options.withFallback);
+};
+const getNormalizeLayer = (layerKey, manager, options) => {
+  const layer = manager == null ? void 0 : manager.resolve(layerKey);
+  const parsedLayer = getLayer(manager, layerKey, options);
+  return {
+    layerKey,
+    rawLayer: layer,
+    layer: parsedLayer
+  };
+};
+const useNormalizeLayer = (layerKey, manager, options) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
+  return getNormalizeLayer(layerKey, resultManager, options);
+};
+const useNormalizeLayers = (layerKeys, manager, options) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  return layerKeys.map(
+    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
+  );
+};
 const calcBackground = (manager, layerKey) => {
   manager.resolve(layerKey);
   const { layer } = getNormalizeLayer(layerKey, manager);
@@ -781,23 +611,21 @@ const calcLinearGradient = (angle, values) => {
   }
   return `linear-gradient(${angle}deg, ${parts.join(", ")})`;
 };
-const isVariableLink = (value) => {
-  var _a;
-  return isLink(value) && ((_a = value == null ? void 0 : value.split(":")) == null ? void 0 : _a.at(0)) === definition.definition.nodes.Variable;
-};
-const isLink = (value) => {
-  var _a, _b;
-  return value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+const getOverriderByLayers = (layerKey, layers) => {
+  return layers.find((l) => {
+    var _a;
+    return (_a = l == null ? void 0 : l.overrides) == null ? void 0 : _a.includes(layerKey);
+  });
 };
-const getCssVariables = (props) => {
-  return Object.entries(utils.cleanGraph(utils.flattenObject(props))).reduce(
+const toCssCustomProperties = (props) => {
+  return Object.entries(props).reduce(
     (acc, [key, value]) => {
       var _a, _b;
-      if (isVariableLink(value)) {
+      if (definition.isVariableLink(value)) {
         const nestedVariableId = (_a = core.entityOfKey(value)) == null ? void 0 : _a._id;
         value = `var(--${nestedVariableId})`;
       }
-      if ((_b = value == null ? void 0 : value.startsWith) == null ? void 0 : _b.call(value, "http")) {
+      if (typeof value === "string" && ((_b = value.startsWith) == null ? void 0 : _b.call(value, "http"))) {
         value = `url("${value}")`;
       }
       acc[`--${key}`] = value;
@@ -806,12 +634,6 @@ const getCssVariables = (props) => {
     {}
   );
 };
-const getOverriderByLayers = (layerKey, layers) => {
-  return layers.find((l) => {
-    var _a;
-    return (_a = l == null ? void 0 : l.overrides) == null ? void 0 : _a.includes(layerKey);
-  });
-};
 const declareFragmentProperty = (manager, property, fragmentLink = manager.$fragment.root) => {
   const propertyLayer = createLayer(property);
   if (propertyLayer && "type" in propertyLayer) {
@@ -863,21 +685,48 @@ 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);
-      });
+const createSuspenseResource = (key, valueOrPromise, cache) => {
+  if (cache.has(key)) return cache.get(key);
+  if (!(valueOrPromise instanceof Promise)) {
+    const resource2 = {
+      read() {
+        return valueOrPromise;
+      }
+    };
+    cache.set(key, resource2);
+    return resource2;
+  }
+  let status = "pending";
+  let result;
+  let error;
+  const suspender = valueOrPromise.then(
+    (r) => {
+      status = "success";
+      result = r;
+    },
+    (e) => {
+      status = "error";
+      error = e;
     }
-    return globalManager == null ? void 0 : globalManager.$fragments.createFragmentManager(
-      fragmentId,
-      document2
-    );
+  );
+  const resource = {
+    read() {
+      if (status === "pending") throw suspender;
+      if (status === "error") throw error;
+      return result;
+    }
+  };
+  cache.set(key, resource);
+  return resource;
+};
+const globalCache = /* @__PURE__ */ new WeakMap();
+const getSuspenseCache = (manager) => {
+  let cache = globalCache.get(manager);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    globalCache.set(manager, cache);
   }
-  return null;
+  return cache;
 };
 const duplicateLayer = (manager, layer) => {
   var _a;
@@ -886,6 +735,9 @@ const duplicateLayer = (manager, layer) => {
     const linkedMap = {};
     const nextLayer = nodeWalker(layerGraph, (key, value, history) => {
       const nextId = utils.generateId();
+      if ((value == null ? void 0 : value._type) === definition.definition.nodes.Instance && key === "props") {
+        return utils.cleanGraph(value);
+      }
       if (!!value && n(value)) {
         linkedMap[core.keyOfEntity(value)] = core.keyOfEntity({ ...value, _id: nextId });
         const linkedParent = linkedMap == null ? void 0 : linkedMap[utils.getKey(value.parent)];
@@ -952,6 +804,14 @@ const wrapTextInParagraphWithAttributes = (text, attributes) => {
   ).map(([key, value]) => `${utils.toKebabCase(key)}: ${value}`).join("; ");
   return `<p style="${style}">${text}</p>`;
 };
+const isVariableLink = (value) => {
+  var _a;
+  return isLink(value) && ((_a = value == null ? void 0 : value.split(":")) == null ? void 0 : _a.at(0)) === definition.definition.nodes.Variable;
+};
+const isLink = (value) => {
+  var _a, _b;
+  return value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+};
 const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value, options) => {
   var _a;
   const { success, output } = definition.parseLayerField(
@@ -980,26 +840,474 @@ const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value,
     );
   }
 };
-const getLayerCssVariable = (manager, inputValue) => {
+const EMPTY_RESOLVED$1 = {
+  layerKey: null,
+  rawLayer: null,
+  layer: null,
+  isOverride: false
+};
+const useResolvedLayer = (layerKey, options) => {
+  const { manager } = react.useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? manager;
+  const key = core.keyOfEntity(layerKey);
+  react$1.useGraph(resultManager, key);
+  if (!resultManager || !key) {
+    return EMPTY_RESOLVED$1;
+  }
+  const rawLayer = resultManager.resolve(key);
+  const overrider = getOverrider(resultManager, key);
+  const layer = definition.getNormalizeLayer(rawLayer, overrider, options == null ? void 0 : options.withFallback);
+  let isOverride = false;
+  if (!(options == null ? void 0 : options.skipOverrideCheck)) {
+    isOverride = !isPartOfPrimary(resultManager, key);
+  }
+  return { layerKey: key, rawLayer, layer, isOverride };
+};
+function useForceUpdate() {
+  return react.useReducer(() => ({}), {});
+}
+const EMPTY_RESOLVED = {
+  values: {},
+  cssVariableValues: {},
+  rawValues: {}
+};
+const extractVariableValue$1 = (input, variableId) => {
+  if (utils.isObject(input)) {
+    if (variableId in input) return input[variableId];
+    for (const key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue$1(input[key], variableId);
+        if (result !== void 0) return result;
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge$1(a, b) {
+  if (!utils.isObject(a) || !utils.isObject(b)) return a;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge$1(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useResolvedLayerVariables = (layer, rawLayer, customScopes) => {
   var _a;
-  const isVariable = definition.isVariableLink(inputValue);
-  const variableValue = manager.resolve(manager, inputValue);
-  const id = (_a = core.entityOfKey(inputValue)) == null ? void 0 : _a._id;
+  const contextScopes = react.useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = react.useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  react.useEffect(() => {
+    const controller = new AbortController();
+    let ready = false;
+    const update = () => {
+      if (!ready) return;
+      forceUpdate();
+    };
+    for (const { manager, key } of subscriptions.current) {
+      manager.subscribe(key, update, { signal: controller.signal });
+    }
+    ready = true;
+    return () => controller.abort();
+  });
+  if (!layer) {
+    subscriptions.current = [];
+    return EMPTY_RESOLVED;
+  }
+  const values = {};
+  const cssVariableValues = {};
+  const rawValues = {};
+  const readVariable = (variableKey) => {
+    var _a2, _b, _c;
+    const variableId = (_a2 = core.entityOfKey(variableKey)) == null ? void 0 : _a2._id;
+    if (!definition.isVariableLink(variableKey)) {
+      return { value: null, layer: null };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a3;
+        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a3 = scope.documentManager) == null ? void 0 : _a3.resolve(variableKey));
+      }
+    );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
+      );
+    }
+    const resolveVariableLayer = (manager, variableLink, customProps) => {
+      var _a3, _b2;
+      const variableLayer2 = (_a3 = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a3.layer;
+      if (!variableLayer2) return null;
+      if ((variableLayer2 == null ? void 0 : variableLayer2.type) === definition.definition.variableType.Array) {
+        const definitionLayer = manager.resolve(variableLayer2 == null ? void 0 : variableLayer2.definition);
+        if (!((_b2 = variableLayer2 == null ? void 0 : variableLayer2.defaultValue) == null ? void 0 : _b2.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
+          return variableLayer2;
+        const extractVariableDefaultValue = (mgr, varEntity) => {
+          const varLayer = mgr.resolve(varEntity);
+          if ((varLayer == null ? void 0 : varLayer.type) !== definition.definition.variableType.Object)
+            return varLayer == null ? void 0 : varLayer.defaultValue;
+          return Object.values((varLayer == null ? void 0 : varLayer.fields) ?? {}).reduce(
+            (acc, fieldLink) => {
+              var _a4;
+              if (!!fieldLink && definition.isVariableLink(fieldLink)) {
+                const _id = (_a4 = core.entityOfKey(fieldLink)) == null ? void 0 : _a4._id;
+                if (_id) acc[_id] = extractVariableDefaultValue(mgr, fieldLink);
+              }
+              return acc;
+            },
+            {}
+          );
+        };
+        const definitionDefaultValue = extractVariableDefaultValue(
+          manager,
+          definitionLayer
+        );
+        const customValue = customProps == null ? void 0 : customProps[variableLayer2 == null ? void 0 : variableLayer2._id];
+        return {
+          ...variableLayer2,
+          defaultValue: variableLayer2.defaultValue.map(
+            (item, index) => {
+              const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
+              return deepMerge$1(
+                customItemValue ? { ...item, ...customItemValue } : item,
+                definitionDefaultValue
+              );
+            }
+          )
+        };
+      }
+      return variableLayer2;
+    };
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey
+    );
+    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey) {
+      subscriptions.current.push({
+        manager: instanceScope.documentManager,
+        key: variableKey
+      });
+    }
+    let instanceProp = variableId ? (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId] : void 0;
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index) => {
+          var _a3;
+          return deepMerge$1(rawProp, (_a3 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a3.at(index));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue$1(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (definition.isVariableLink(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return { value: resultValue, layer: variableLayer };
+  };
+  const resolveField = (fieldPath, value, raw) => {
+    var _a2;
+    rawValues[fieldPath] = raw;
+    if (definition.isVariableLink(value)) {
+      const resolved = readVariable(value);
+      values[fieldPath] = resolved.value ?? value;
+      const variableId = (_a2 = core.entityOfKey(value)) == null ? void 0 : _a2._id;
+      cssVariableValues[fieldPath] = `var(--${variableId}, ${transformCssValue(
+        resolved.value ?? value
+      )})`;
+    } else {
+      values[fieldPath] = value;
+      cssVariableValues[fieldPath] = transformCssValue(value);
+    }
+  };
+  subscriptions.current = [];
+  for (const [field, value] of Object.entries(layer)) {
+    resolveField(field, value, rawLayer == null ? void 0 : rawLayer[field]);
+    if (utils.isObject(value) && !definition.isVariableLink(value)) {
+      for (const [nestedField, nestedValue] of Object.entries(
+        value
+      )) {
+        resolveField(
+          `${field}.${nestedField}`,
+          nestedValue,
+          (_a = rawLayer == null ? void 0 : rawLayer[field]) == null ? void 0 : _a[nestedField]
+        );
+      }
+    }
+  }
+  return { values, cssVariableValues, rawValues };
+};
+const useRenderTarget = () => {
+  const renderTarget = react.useContext(RenderTargetContext);
   return {
-    value: isVariable ? `var(--${id}, ${variableValue == null ? void 0 : variableValue.defaultValue})` : null
+    renderTarget,
+    isCanvas: renderTarget === definition.definition.renderTarget.canvas,
+    isDocument: renderTarget === definition.definition.renderTarget.document
   };
 };
-const useLayerCssVariable = (inputValue) => {
-  var _a;
-  const { manager } = react.useContext(FragmentContext);
-  const isVariable = definition.isVariableLink(inputValue);
-  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
-  const variableId = (layer == null ? void 0 : layer._id) ?? ((_a = core.entityOfKey(inputValue)) == null ? void 0 : _a._id);
+const useReadVariables = (variableKeys) => {
+  const filterKeys = variableKeys.filter(definition.isVariableLink);
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const { props, innerManager, layerKey } = react.useContext(InstanceContext);
+  const resultManager = innerManager ?? fragmentManager;
+  const variableLayers = react$1.useGraphStack(
+    !!filterKeys.length ? resultManager : null,
+    filterKeys,
+    {
+      selector: (graph) => graph ? utils.pick(graph, "defaultValue", "required") : graph
+    }
+  );
+  return variableLayers.map((layer) => {
+    const { _id: propertyId } = layer ?? {};
+    const currentValue = (props == null ? void 0 : props[propertyId]) ?? null;
+    const required = (layer == null ? void 0 : layer.required) ?? false;
+    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? defaultValue;
+    return {
+      value: resultValue,
+      layer
+    };
+  });
+};
+const extractVariableValue = (input, variableId) => {
+  if (utils.isObject(input)) {
+    if (variableId in input) {
+      return input[variableId];
+    }
+    for (let key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue(input[key], variableId);
+        if (result !== void 0) {
+          return result;
+        }
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge(a, b) {
+  if (!utils.isObject(a) || !utils.isObject(b)) return a;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useReadVariable = (variableKey, customScopes) => {
+  const contextScopes = react.useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = react.useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  react.useEffect(() => {
+    const controller = new AbortController();
+    let ready = false;
+    const update = () => {
+      if (!ready) return;
+      forceUpdate();
+    };
+    for (const { manager, key } of subscriptions.current) {
+      manager.subscribe(key, update, { signal: controller.signal });
+    }
+    ready = true;
+    return () => controller.abort();
+  });
+  const extractVariableDefaultValue = (manager, variableEntity) => {
+    const variableLayer = manager.resolve(variableEntity);
+    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.definition.variableType.Object)
+      return variableLayer == null ? void 0 : variableLayer.defaultValue;
+    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
+      (acc, fieldLink) => {
+        var _a;
+        if (!!fieldLink && definition.isVariableLink(fieldLink)) {
+          const _id = (_a = core.entityOfKey(fieldLink)) == null ? void 0 : _a._id;
+          if (_id) {
+            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  };
+  const resolveVariableLayer = (manager, variableLink, customProps) => {
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
+    if (!variableLayer) return null;
+    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
+      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
+        return variableLayer;
+      const definitionDefaultValue = extractVariableDefaultValue(
+        manager,
+        definitionLayer
+      );
+      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
+      return {
+        ...variableLayer,
+        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
+          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
+          return deepMerge(
+            customItemValue ? { ...item, ...customItemValue } : item,
+            definitionDefaultValue
+          );
+        })
+      };
+    }
+    return variableLayer;
+  };
+  const readVariable = (variableKey2) => {
+    var _a, _b, _c;
+    const variableId = (_a = core.entityOfKey(variableKey2)) == null ? void 0 : _a._id;
+    if (!definition.isVariableLink(variableKey2)) {
+      return {
+        value: null,
+        layer: null
+      };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a2;
+        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
+      }
+    );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
+      );
+    }
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey2
+    );
+    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey2) {
+      subscriptions.current.push({
+        manager: instanceScope.documentManager,
+        key: variableKey2
+      });
+    }
+    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index) => {
+          var _a2;
+          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (definition.isVariableLink(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return {
+      value: resultValue,
+      layer: variableLayer
+    };
+  };
+  subscriptions.current = [];
+  const result = readVariable(variableKey);
   return {
-    value: isVariable ? `var(--${variableId}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
+    ...result,
+    readVariable,
+    _dep: dep
   };
 };
+const useLayersValue = (layerKeys, fieldKey, options) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
+  if (!resultManager) {
+    return [];
+  }
+  const keys = (layerKeys == null ? void 0 : layerKeys.map(core.keyOfEntity)) ?? [];
+  react$1.useGraphStack(resultManager, keys, {
+    // selector: (data) => (data ? pick(data, fieldKey) : data),
+  });
+  const normalizeLayers = useNormalizeLayers(keys, resultManager, options);
+  const { readVariable } = useReadVariable(null, options == null ? void 0 : options.scopes);
+  return normalizeLayers.map((normalizedLayer) => {
+    var _a, _b;
+    const rawValue = utils.get(normalizedLayer.rawLayer, fieldKey);
+    const layerValue = utils.get(normalizedLayer.layer, fieldKey);
+    const variableValue = (_a = readVariable(layerValue)) == null ? void 0 : _a.value;
+    const currentValue = variableValue ?? layerValue;
+    const isInherit = isInheritField(
+      resultManager,
+      normalizedLayer.layerKey,
+      fieldKey
+    );
+    const isOverride = !isInherit && !isPartOfPrimary(resultManager, normalizedLayer.layerKey);
+    const setter = layerFieldSetter(
+      resultManager,
+      normalizedLayer.layerKey,
+      fieldKey,
+      currentValue
+    );
+    const resetOverride = () => {
+      resultManager.mutate(
+        normalizedLayer.layerKey,
+        (prev) => {
+          const r = utils.omit(prev, fieldKey);
+          return r;
+        },
+        { replace: true }
+      );
+    };
+    const restore = (fallbackValue) => {
+      var _a2, _b2, _c;
+      const tempValue = ((_c = (_b2 = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b2[normalizedLayer.layerKey]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
+      return tempValue;
+    };
+    const updateValue = (value, options2) => {
+      setter(value, options2);
+    };
+    const isVariable = definition.isVariableLink(rawValue ?? layerValue);
+    const variableId = isVariable ? (_b = core.entityOfKey(layerValue)) == null ? void 0 : _b._id : null;
+    return [
+      currentValue,
+      updateValue,
+      {
+        isOverride,
+        resetOverride,
+        isVariable,
+        cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
+        rawValue,
+        restore,
+        ...resultManager.entityOfKey(normalizedLayer.layerKey)
+      }
+    ];
+  });
+};
 const useLayerValue = (layerKey, fieldKey, options) => {
+  var _a;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
   if (!resultManager) {
@@ -1029,8 +1337,8 @@ const useLayerValue = (layerKey, fieldKey, options) => {
   }, [updateLayerData]);
   const restore = react.useCallback(
     (fallbackValue) => {
-      var _a, _b, _c;
-      const tempValue = ((_c = (_b = resultManager.resolve((_a = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? 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;
     },
@@ -1042,27 +1350,123 @@ const useLayerValue = (layerKey, fieldKey, options) => {
     },
     [setter]
   );
-  const { value: cssValue } = useLayerCssVariable(rawValue ?? layerValue);
+  const isVariable = definition.isVariableLink(rawValue ?? layerValue);
+  const variableId = isVariable ? (_a = core.entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
   return [
     currentValue,
     updateValue,
     {
       isOverride,
       resetOverride,
-      isVariable: definition.isVariableLink(rawValue ?? layerValue),
-      cssVariableValue: cssValue ?? transformCssValue(currentValue),
+      isVariable,
+      cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
       rawValue,
       restore,
       ...resultManager.entityOfKey(key)
     }
   ];
 };
+const useLayerChildren = (layerKey, customManager) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const [layerData] = react$1.useGraph(customManager ?? fragmentManager, layerKey, {
+    selector: (data) => utils.pick(data, "children")
+  });
+  return (layerData == null ? void 0 : layerData.children) ?? [];
+};
+const useLayerScopes = (fragmentManager, layerKey) => {
+  var _a, _b, _c, _d;
+  if (!fragmentManager || !layerKey) return [];
+  const layerParents = getAllParents(fragmentManager, layerKey);
+  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
+  layerParents.forEach((parent) => {
+    var _a2, _b2, _c2, _d2;
+    const parentLink = core.keyOfEntity(parent);
+    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
+      resultScopes.push((_d2 = (_c2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c2.scopes) == null ? void 0 : _d2.get(parentLink));
+    }
+  });
+  const areaScope = (_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get("Area");
+  if (areaScope) {
+    resultScopes.push(areaScope);
+  }
+  return resultScopes;
+};
+const useLayerLink = (layerKey) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const [link] = useLayerValue(layerKey, "link", fragmentManager);
+  const [href] = useLayerValue(link, "href", fragmentManager);
+  const [isNewTab] = useLayerValue(link, "isNewTab", fragmentManager);
+  const isLink2 = utils.isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
+  const linkTarget = isNewTab ? "_blank" : "";
+  const linkProps = react.useMemo(() => {
+    if (isLink2) {
+      return {
+        target: linkTarget,
+        href
+      };
+    }
+    return {};
+  }, [linkTarget, href, isLink2]);
+  return {
+    isLink: isLink2,
+    linkHref: href,
+    linkTarget,
+    linkProps
+  };
+};
+const useLayerVariableValue = (layerKey, fieldKey, manager) => {
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  const [layerValue, updateValue, layerInfo] = useLayerValue(
+    layerKey,
+    fieldKey,
+    resultManager
+  );
+  const { value: instanceValue } = useReadVariable(
+    (layerInfo == null ? void 0 : layerInfo.isVariable) ? layerValue : null
+  );
+  return [
+    (layerInfo == null ? void 0 : layerInfo.isVariable) ? instanceValue : layerValue,
+    updateValue,
+    {
+      ...layerInfo,
+      rawValue: layerValue
+    }
+  ];
+};
+const useLayerLinearGradient = (linearGradientLink) => {
+  const [stops] = useLayerValue(linearGradientLink, "stops");
+  const [angle] = useLayerValue(linearGradientLink, "angle");
+  const stopsValue = useLayersValue(stops, "value");
+  const stopsPosition = useLayersValue(stops, "position");
+  const stopValues = react.useMemo(
+    () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
+      var _a, _b, _c;
+      return [
+        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
+        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
+      ];
+    })) ?? [],
+    [stops, stopsValue, stopsPosition]
+  );
+  return react.useMemo(
+    () => ({
+      "background-image": calcLinearGradient(angle, stopValues)
+    }),
+    [angle, stopValues]
+  );
+};
 const processOptionalSize = (value, type) => {
   if (value === -1) return "";
   if (type === definition.definition.sizing.Fixed) return utils.toPx(value);
   if (type === definition.definition.sizing.Relative) return `${value}%`;
   return "";
 };
+const calcOptionalSize = (type, vars) => {
+  const value = vars.values[type];
+  const valueType = vars.values[`${type}Type`];
+  return processOptionalSize(value, valueType);
+};
 const useOptionalSize = (type, layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [value] = useLayerValue(layerKey, type, fragmentManager);
@@ -1072,6 +1476,14 @@ const useOptionalSize = (type, layerKey) => {
     [valueType, value]
   );
 };
+const calcLayerSize = (vars) => {
+  return {
+    minWidth: calcOptionalSize("minWidth", vars),
+    minHeight: calcOptionalSize("minHeight", vars),
+    maxWidth: calcOptionalSize("maxWidth", vars),
+    maxHeight: calcOptionalSize("maxHeight", vars)
+  };
+};
 const useLayerSize = (layerKey) => {
   const { manager } = react.useContext(FragmentContext);
   const minWidth = useOptionalSize("minWidth", layerKey);
@@ -1087,15 +1499,30 @@ const useLayerSize = (layerKey) => {
     maxHeight
   };
 };
-const useRenderTarget = () => {
-  const renderTarget = react.useContext(RenderTargetContext);
-  return {
-    renderTarget,
-    isCanvas: renderTarget === definition.definition.renderTarget.canvas,
-    isDocument: renderTarget === definition.definition.renderTarget.document
+const autoSizes = [definition.definition.sizing.Hug];
+const calcLayerSizeValue = (resolved, vars, sizeType, parentResolved, instanceVars, context) => {
+  const { isDocument, isTopLevel: isTop, instanceLayerKey } = context;
+  const isPartOfInstance = !!instanceLayerKey;
+  const layerNode = resolved.rawLayer;
+  const instanceType = instanceVars.values[`${sizeType}Type`];
+  const valueType = vars.values[`${sizeType}Type`];
+  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
+  return (value) => {
+    var _a;
+    if (isTop && isDocument && ((_a = parentResolved.layer) == null ? void 0 : _a[growType]) === definition.definition.fragmentGrowingMode.fill) {
+      return "100%";
+    }
+    if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+      return "100%";
+    }
+    if (autoSizes.includes(valueType)) {
+      return (layerNode == null ? void 0 : layerNode._type) === definition.definition.nodes.Instance ? "auto" : "fit-content";
+    }
+    if (valueType === definition.definition.sizing.Relative) return `${value}%`;
+    if (valueType === definition.definition.sizing.Fill) return `100%`;
+    return utils.toPx(value);
   };
 };
-const autoSizes = [definition.definition.sizing.Hug];
 const useLayerSizeValue = (layerKey, sizeType) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
@@ -1150,6 +1577,65 @@ const useLayerSizeValue = (layerKey, sizeType) => {
     ]
   );
 };
+const calcLayerPosition = (resolved, vars, parentResolved, instanceResolved, instanceVars, context) => {
+  const { isDocument, isTopLevel: isTop, instanceLayerKey } = context;
+  const width = vars.values.width;
+  const height = vars.values.height;
+  const widthCalc = calcLayerSizeValue(
+    resolved,
+    vars,
+    "width",
+    parentResolved,
+    instanceVars,
+    context
+  );
+  const heightCalc = calcLayerSizeValue(
+    resolved,
+    vars,
+    "height",
+    parentResolved,
+    instanceVars,
+    context
+  );
+  const position = vars.values.position;
+  const centerAnchorX = vars.values.centerAnchorX;
+  const centerAnchorY = vars.values.centerAnchorY;
+  const top = vars.values.top;
+  const left = vars.values.left;
+  const right = vars.values.right;
+  const bottom = vars.values.bottom;
+  const skipPosition = isTop && isDocument || !!instanceLayerKey && isTop;
+  if (isTop && !skipPosition) {
+    return {
+      position: definition.definition.positionType.absolute,
+      top: utils.toPx(top),
+      left: utils.toPx(left),
+      width,
+      height
+    };
+  }
+  if (position === definition.definition.positionType.relative || skipPosition) {
+    return {
+      position: definition.definition.positionType.relative,
+      width: widthCalc(width),
+      height: heightCalc(height)
+    };
+  }
+  const hasConstrainX = utils.isFiniteNumber(left) && utils.isFiniteNumber(right);
+  const hasConstrainY = utils.isFiniteNumber(top) && utils.isFiniteNumber(bottom);
+  const hasAnyConstrainX = utils.isFiniteNumber(left) || utils.isFiniteNumber(right);
+  const hasAnyConstrainY = utils.isFiniteNumber(top) || utils.isFiniteNumber(bottom);
+  return {
+    position,
+    left: utils.isFiniteNumber(left) ? utils.toPx(left) : !utils.isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
+    top: utils.isFiniteNumber(top) ? utils.toPx(top) : !utils.isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
+    right: utils.isFiniteNumber(right) ? utils.toPx(right) : null,
+    bottom: utils.isFiniteNumber(bottom) ? utils.toPx(bottom) : null,
+    width: hasConstrainX ? null : widthCalc(width),
+    height: hasConstrainY ? null : heightCalc(height),
+    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
+  };
+};
 const useLayerPosition = (layerKey) => {
   const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1198,6 +1684,14 @@ const useLayerPosition = (layerKey) => {
     transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
   };
 };
+const calcImagePaint = (imageVars) => {
+  var _a, _b;
+  return {
+    background: imageVars.cssVariableValues.src,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: (_b = (_a = imageVars.values.scale) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)
+  };
+};
 const useImagePaint = (imageLinkKey) => {
   var _a;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1209,186 +1703,24 @@ const useImagePaint = (imageLinkKey) => {
     backgroundSize: (_a = scale == null ? void 0 : scale.toLowerCase) == null ? void 0 : _a.call(scale)
   };
 };
-const useReadVariables = (variableKeys) => {
-  const filterKeys = variableKeys.filter(definition.isVariableLink);
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const { props, innerManager, layerKey } = react.useContext(InstanceContext);
-  const resultManager = innerManager ?? fragmentManager;
-  const variableLayers = react$1.useGraphStack(
-    !!filterKeys.length ? resultManager : null,
-    filterKeys,
-    {
-      selector: (graph) => graph ? utils.pick(graph, "defaultValue", "required") : graph
-    }
-  );
-  return variableLayers.map((layer) => {
-    const { _id: propertyId } = layer ?? {};
-    const currentValue = (props == null ? void 0 : props[propertyId]) ?? null;
-    const required = (layer == null ? void 0 : layer.required) ?? false;
-    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? defaultValue;
+const calcLayerBackground = (paintVars, imageVars, imageSizeVars, linearGradient) => {
+  const fillType = paintVars.values.type;
+  const cssSolidFill = paintVars.cssVariableValues.solid;
+  const cssImageSize = imageSizeVars.cssVariableValues.imageSize;
+  if (fillType === definition.definition.paintMode.Solid) {
+    return { background: cssSolidFill };
+  }
+  if (fillType === definition.definition.paintMode.Image) {
+    const image = calcImagePaint(imageVars);
     return {
-      value: resultValue,
-      layer
+      ...image,
+      backgroundSize: cssImageSize ?? image.backgroundSize
     };
-  });
-};
-const useLayersValue = (layerKeys, fieldKey, options) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
-  if (!resultManager) {
-    return [];
   }
-  const keys = (layerKeys == null ? void 0 : layerKeys.map(core.keyOfEntity)) ?? [];
-  react$1.useGraphStack(resultManager, keys, {
-    // selector: (data) => (data ? pick(data, fieldKey) : data),
-  });
-  const normalizeLayers = useNormalizeLayers(keys, resultManager, options);
-  const { readVariable } = useReadVariable(null, options == null ? void 0 : options.scopes);
-  return normalizeLayers.map((normalizedLayer) => {
-    var _a, _b;
-    const rawValue = utils.get(normalizedLayer.rawLayer, fieldKey);
-    const layerValue = utils.get(normalizedLayer.layer, fieldKey);
-    const variableValue = (_a = readVariable(layerValue)) == null ? void 0 : _a.value;
-    const currentValue = variableValue ?? layerValue;
-    const isInherit = isInheritField(
-      resultManager,
-      normalizedLayer.layerKey,
-      fieldKey
-    );
-    const isOverride = !isInherit && !isPartOfPrimary(resultManager, normalizedLayer.layerKey);
-    const setter = layerFieldSetter(
-      resultManager,
-      normalizedLayer.layerKey,
-      fieldKey,
-      currentValue
-    );
-    const resetOverride = () => {
-      resultManager.mutate(
-        normalizedLayer.layerKey,
-        (prev) => {
-          const r = utils.omit(prev, fieldKey);
-          return r;
-        },
-        { replace: true }
-      );
-    };
-    const restore = (fallbackValue) => {
-      var _a2, _b2, _c;
-      const tempValue = ((_c = (_b2 = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b2[normalizedLayer.layerKey]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
-      return tempValue;
-    };
-    const updateValue = (value, options2) => {
-      setter(value, options2);
-    };
-    const cssValue = (_b = getLayerCssVariable(
-      resultManager,
-      rawValue ?? layerValue
-    )) == null ? void 0 : _b.value;
-    return [
-      currentValue,
-      updateValue,
-      {
-        isOverride,
-        resetOverride,
-        isVariable: definition.isVariableLink(rawValue ?? layerValue),
-        cssVariableValue: cssValue ?? currentValue,
-        rawValue,
-        restore,
-        ...resultManager.entityOfKey(normalizedLayer.layerKey)
-      }
-    ];
-  });
-};
-const useLayerChildren = (layerKey, customManager) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const [layerData] = react$1.useGraph(customManager ?? fragmentManager, layerKey, {
-    selector: (data) => utils.pick(data, "children")
-  });
-  return (layerData == null ? void 0 : layerData.children) ?? [];
-};
-const useLayerScopes = (fragmentManager, layerKey) => {
-  var _a, _b, _c, _d;
-  if (!fragmentManager || !layerKey) return [];
-  const layerParents = getAllParents(fragmentManager, layerKey);
-  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
-  layerParents.forEach((parent) => {
-    var _a2, _b2, _c2, _d2;
-    const parentLink = core.keyOfEntity(parent);
-    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
-      resultScopes.push((_d2 = (_c2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c2.scopes) == null ? void 0 : _d2.get(parentLink));
-    }
-  });
-  const areaScope = (_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get("Area");
-  if (areaScope) {
-    resultScopes.push(areaScope);
+  if (fillType === definition.definition.paintMode.LinearGradient) {
+    return linearGradient;
   }
-  return resultScopes;
-};
-const useLayerLink = (layerKey) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const [link] = useLayerValue(layerKey, "link", fragmentManager);
-  const [href] = useLayerValue(link, "href", fragmentManager);
-  const [isNewTab] = useLayerValue(link, "isNewTab", fragmentManager);
-  const isLink2 = utils.isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
-  const linkTarget = isNewTab ? "_blank" : "";
-  const linkProps = react.useMemo(() => {
-    if (isLink2) {
-      return {
-        target: linkTarget,
-        href
-      };
-    }
-    return {};
-  }, [linkTarget, href, isLink2]);
-  return {
-    isLink: isLink2,
-    linkHref: href,
-    linkTarget,
-    linkProps
-  };
-};
-const useLayerVariableValue = (layerKey, fieldKey, manager) => {
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  const [layerValue, updateValue, layerInfo] = useLayerValue(
-    layerKey,
-    fieldKey,
-    resultManager
-  );
-  const { value: instanceValue } = useReadVariable(
-    (layerInfo == null ? void 0 : layerInfo.isVariable) ? layerValue : null
-  );
-  return [
-    (layerInfo == null ? void 0 : layerInfo.isVariable) ? instanceValue : layerValue,
-    updateValue,
-    {
-      ...layerInfo,
-      rawValue: layerValue
-    }
-  ];
-};
-const useLayerLinearGradient = (linearGradientLink) => {
-  const [stops] = useLayerValue(linearGradientLink, "stops");
-  const [angle] = useLayerValue(linearGradientLink, "angle");
-  const stopsValue = useLayersValue(stops, "value");
-  const stopsPosition = useLayersValue(stops, "position");
-  const stopValues = react.useMemo(
-    () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b, _c;
-      return [
-        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
-        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
-      ];
-    })) ?? [],
-    [stops, stopsValue, stopsPosition]
-  );
-  return react.useMemo(
-    () => ({
-      "background-image": calcLinearGradient(angle, stopValues)
-    }),
-    [angle, stopValues]
-  );
+  return { background: null };
 };
 const useLayerBackground = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1431,9 +1763,16 @@ const useLayerBackground = (layerKey) => {
     cssImageFillOptions.cssVariableValue,
     cssSolidFill,
     cssImageSize,
-    image
+    image,
+    linearGradient
   ]);
 };
+const calcLayerDisplay = (vars) => {
+  const layerModeValue = vars.values.layerMode;
+  const visible = vars.values.visible;
+  if (!visible) return "none";
+  return layerModeValue === definition.definition.layerMode.flex ? "flex" : null;
+};
 const useLayerDisplay = (layerKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(layerKey, "layerMode", manager);
@@ -1445,6 +1784,15 @@ const useLayerDisplay = (layerKey) => {
     return layerModeValue === definition.definition.layerMode.flex ? "flex" : null;
   }, [layerModeValue, visible]);
 };
+const calcLayerPaint = (paintVars) => {
+  return {
+    type: paintVars.values.type,
+    solid: paintVars.values.solid,
+    solidCssValue: paintVars.cssVariableValues.solid,
+    image: paintVars.values.image,
+    linearGradientLink: paintVars.values.linearGradient
+  };
+};
 const useLayerPaint = (paintLinkKey) => {
   const [type] = useLayerValue(paintLinkKey, "type");
   const [solid, , solidInfo] = useLayerValue(paintLinkKey, "solid");
@@ -1458,18 +1806,49 @@ const useLayerPaint = (paintLinkKey) => {
     linearGradientLink
   };
 };
+const calcLayerBorder = (borderVars, borderPaintVars, borderLinearGradient, paintVars, linearGradient) => {
+  const type = borderVars.values.type;
+  const width = borderVars.values.width;
+  const borderPaint = calcLayerPaint(borderPaintVars);
+  const paint = calcLayerPaint(paintVars);
+  if (type === definition.definition.borderType.None) {
+    return { border: null };
+  }
+  if (borderPaint.type === definition.definition.paintMode.LinearGradient) {
+    let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    if (paint.type === definition.definition.paintMode.LinearGradient) {
+      background = `${linearGradient == null ? void 0 : linearGradient["background-image"]} padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    }
+    if (paint.type === definition.definition.paintMode.None) {
+      background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    }
+    return {
+      ...calcBorderSides(
+        type,
+        width,
+        borderPaint.type === definition.definition.paintMode.Solid ? borderPaint.solid : "transparent"
+      ),
+      background
+    };
+  }
+  if (borderPaint.type === definition.definition.paintMode.Solid) {
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
+  }
+  return { border: null };
+};
 const useLayerBorder = (layerKey) => {
+  var _a, _b;
   const [borderLinkKey] = useLayerValue(layerKey, "border");
   const [type] = useLayerValue(borderLinkKey, "type");
   const [width] = useLayerValue(borderLinkKey, "width");
   const [borderPaintLink] = useLayerValue(borderLinkKey, "paint");
   const borderPaint = useLayerPaint(borderPaintLink);
-  const borderLinearGradient = useLayerLinearGradient(
+  const borderLinearGradient = (_a = useLayerLinearGradient(
     borderPaint.linearGradientLink
-  );
+  )) == null ? void 0 : _a["background-image"];
   const [paintLinkKey] = useLayerValue(layerKey, "paint");
   const paint = useLayerPaint(paintLinkKey);
-  const linearGradient = useLayerLinearGradient(paint.linearGradientLink);
+  const linearGradient = (_b = useLayerLinearGradient(paint.linearGradientLink)) == null ? void 0 : _b["background-image"];
   if (type === definition.definition.borderType.None) {
     return {
       border: null
@@ -1478,7 +1857,7 @@ const useLayerBorder = (layerKey) => {
   if (borderPaint.type === definition.definition.paintMode.LinearGradient) {
     let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient} border-box`;
     if (paint.type === definition.definition.paintMode.LinearGradient) {
-      background = `${linearGradient["background-image"]} padding-box, ${borderLinearGradient["background-image"]} border-box`;
+      background = `${linearGradient} padding-box, ${borderLinearGradient} border-box`;
     }
     if (paint.type === definition.definition.paintMode.None) {
       background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient} border-box`;
@@ -1497,6 +1876,28 @@ const useLayerBorder = (layerKey) => {
   }
   return { border: null };
 };
+const calcLayerLayout = (vars) => {
+  const layerModeValue = vars.values.layerMode;
+  const layerWrap = vars.values.layerWrap;
+  const layerDistribute = vars.values.layerDistribute;
+  const layerDirectionValue = vars.values.layerDirection;
+  const layerAlign = vars.values.layerAlign;
+  const padding = vars.values.padding;
+  const gap = vars.values.layerGap;
+  const isFlex = layerModeValue === definition.definition.layerMode.flex;
+  const baseFlow = layerDirectionValue === definition.definition.layerDirection.vertical ? "column" : "row";
+  const wrap = isFlex ? layerWrap ? "wrap" : null : null;
+  const flexFlow = [baseFlow, wrap].filter(Boolean).join(" ");
+  return {
+    display: isFlex ? "flex" : null,
+    gap: utils.toPx(gap),
+    flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+    justifyContent: isFlex ? layerDistribute : null,
+    flexFlow,
+    alignItems: isFlex ? layerAlign : null,
+    padding: isFlex ? padding : null
+  };
+};
 const useLayerLayout = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(
@@ -1532,6 +1933,15 @@ const useLayerLayout = (layerKey) => {
     padding: isFlex ? padding : null
   };
 };
+const calcLayerTextStyles = (vars) => {
+  const attributes = vars.values.attributes;
+  const color = vars.values["attributes.color"];
+  const cleanAttributes = utils.omit(attributes, "_id", "_type");
+  return {
+    ...cleanAttributes,
+    color
+  };
+};
 const useLayerTextStyles = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
@@ -1542,6 +1952,15 @@ const useLayerTextStyles = (layerKey) => {
     color
   };
 };
+const calcLayerFlex = (vars, parentVars) => {
+  const widthType = vars.values.widthType;
+  const heightType = vars.values.heightType;
+  const layerDirectionValue = parentVars.values.layerDirection;
+  const type = layerDirectionValue === definition.definition.layerDirection.horizontal ? widthType : heightType;
+  return {
+    flex: type === definition.definition.sizing.Fill ? "1 0 0" : "0 0 auto"
+  };
+};
 const useLayerFlex = (layerKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [widthType] = useLayerValue(layerKey, "widthType", manager);
@@ -1557,48 +1976,121 @@ const useLayerFlex = (layerKey) => {
     flex: type === definition.definition.sizing.Fill ? "1 0 0" : "0 0 auto"
   };
 };
+const SKIP_OVERRIDE = { skipOverrideCheck: true };
 const useLayerStyles = (layerKey) => {
   try {
-    if (!layerKey) {
-      throw new Error("Empty layer key");
-    }
+    if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = react.useContext(FragmentContext);
-    const [opacity] = useLayerValue(layerKey, "opacity", fragmentManager);
-    const layerSize = useLayerSize(layerKey);
-    const position = useLayerPosition(layerKey);
-    const layerFlex = useLayerFlex(layerKey);
-    const display = useLayerDisplay(layerKey);
-    const background = useLayerBackground(layerKey);
-    const border = useLayerBorder(layerKey);
-    const layout = useLayerLayout(layerKey);
-    const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
-    const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
-    const [borderRadius, , { rawValue: rawBorderRadius }] = useLayerValue(
-      layerKey,
-      "borderRadius",
-      fragmentManager
+    const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
+    const { isDocument } = useRenderTarget();
+    const resolved = useResolvedLayer(layerKey);
+    const vars = useResolvedLayerVariables(resolved.layer, resolved.rawLayer);
+    const paintResolved = useResolvedLayer(vars.values.paint, SKIP_OVERRIDE);
+    const paintVars = useResolvedLayerVariables(
+      paintResolved.layer,
+      paintResolved.rawLayer
+    );
+    const borderResolved = useResolvedLayer(vars.values.border, SKIP_OVERRIDE);
+    const borderVars = useResolvedLayerVariables(
+      borderResolved.layer,
+      borderResolved.rawLayer
+    );
+    const borderPaintResolved = useResolvedLayer(
+      borderVars.values.paint,
+      SKIP_OVERRIDE
+    );
+    const borderPaintVars = useResolvedLayerVariables(
+      borderPaintResolved.layer,
+      borderPaintResolved.rawLayer
+    );
+    const imageResolved = useResolvedLayer(
+      paintVars.values.image,
+      SKIP_OVERRIDE
+    );
+    const imageVars = useResolvedLayerVariables(
+      imageResolved.layer,
+      imageResolved.rawLayer
+    );
+    const imageSizeLayerKey = definition.isVariableLink(paintVars.rawValues.image) ? paintVars.rawValues.image : layerKey;
+    const imageSizeResolved = useResolvedLayer(
+      imageSizeLayerKey,
+      SKIP_OVERRIDE
+    );
+    const imageSizeVars = useResolvedLayerVariables(
+      imageSizeResolved.layer,
+      imageSizeResolved.rawLayer
+    );
+    const parentLayerKey = core.keyOfEntity(
+      getParent(fragmentManager, layerKey)
+    );
+    const parentResolved = useResolvedLayer(
+      parentLayerKey,
+      SKIP_OVERRIDE
+    );
+    const parentVars = useResolvedLayerVariables(
+      parentResolved.layer,
+      parentResolved.rawLayer
+    );
+    const instanceResolved = useResolvedLayer(
+      instanceLayerKey,
+      SKIP_OVERRIDE
+    );
+    const instanceVars = useResolvedLayerVariables(
+      instanceResolved.layer,
+      instanceResolved.rawLayer
+    );
+    const paint = calcLayerPaint(paintVars);
+    const borderPaint = calcLayerPaint(borderPaintVars);
+    const linearGradient = useLayerLinearGradient(paint.linearGradientLink);
+    const borderLinearGradient = useLayerLinearGradient(
+      borderPaint.linearGradientLink
+    );
+    const context = {
+      isDocument,
+      isTopLevel: isTopLevel(fragmentManager, layerKey),
+      instanceLayerKey
+    };
+    const layerSize = calcLayerSize(vars);
+    const position = calcLayerPosition(
+      resolved,
+      vars,
+      parentResolved,
+      instanceResolved,
+      instanceVars,
+      context
+    );
+    const background = calcLayerBackground(
+      paintVars,
+      imageVars,
+      imageSizeVars,
+      linearGradient
     );
-    const [whiteSpace] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
-    const textStyles = useLayerTextStyles(layerKey);
-    const [overflow] = useLayerValue(layerKey, "overflow", fragmentManager);
+    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: utils.isValue(rotate) ? `${rotate}deg` : null,
-      "border-radius": utils.isValue(rawBorderRadius) ? borderRadius : null,
-      "white-space": whiteSpace,
-      "z-index": zIndex !== -1 ? zIndex : null,
+      opacity: vars.values.opacity,
+      overflow: vars.values.overflow,
+      rotate: utils.isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      "border-radius": utils.isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      "white-space": vars.values.whiteSpace,
+      "z-index": vars.values.zIndex !== -1 ? vars.values.zIndex : null,
       ...layout,
       ...layerSize,
       ...textStyles,
       ...layerFlex,
       display
-      // "user-select": "none",
-      // ...cssOverride,
     };
   } catch (e) {
     return {};
@@ -1703,6 +2195,34 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
   };
 };
+const useGlobalManager = (globalManager) => {
+  var _a, _b;
+  const currentGlobalManager = react.useContext(GlobalManagerContext);
+  const resultManager = globalManager ?? currentGlobalManager;
+  const [fragmentsGraph] = react$1.useGraph(
+    resultManager,
+    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
+  );
+  const queryFragmentManager = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const queryArea = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const setRenderTarget = (value) => {
+    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
+  };
+  return {
+    fragmentsGraph,
+    manager: resultManager,
+    queryFragmentManager,
+    queryArea,
+    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? utils.noop,
+    setRenderTarget
+  };
+};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1727,12 +2247,14 @@ const useLayerInteractions = (layerKey, options) => {
   });
   const fireEvent = react.useCallback(
     (eventLink) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const eventType = (_a = core.entityOfKey(eventLink)) == null ? void 0 : _a._type;
       const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      console.log(scopes, eventLink, eventType, eventValue);
       if (eventType === definition.definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
         if (!areaScope) return null;
-        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal) == null ? void 0 : _d.call(_c, {
+        console.log((_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal);
+        (_e = (_d = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _d.reachGoal) == null ? void 0 : _e.call(_d, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...utils.pick(areaScope, "variantId", "campaignId", "areaId")
         });
@@ -1740,10 +2262,10 @@ const useLayerInteractions = (layerKey, options) => {
       if (eventType === definition.definition.nodes.MutateEvent) {
         const target = eventValue == null ? void 0 : eventValue.target;
         const targetLayer = getNormalizeLayer(target, fragmentManager);
-        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_e = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _e.defaultValue);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_f = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _f.defaultValue);
         if (definition.isVariableLink(target) && utils.isValue(value)) {
-          const targetId = (_f = core.entityOfKey(target)) == null ? void 0 : _f._id;
-          (_g = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _g.call(instanceScope, targetId, value);
+          const targetId = (_g = core.entityOfKey(target)) == null ? void 0 : _g._id;
+          (_h = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _h.call(instanceScope, targetId, value);
         }
       }
     },
@@ -1950,41 +2472,250 @@ const useCollection = (layerKey, options) => {
     ...frame
   };
 };
-const useExtractProps = ({
-  layerKey,
-  definitions,
-  manager,
-  inputProps
-}) => {
-  const flatDefinition = react.useMemo(() => {
-    const acc = [];
-    const run = (defLink) => {
-      var _a;
-      const resolvedDefinition = (_a = getNormalizeLayer(defLink, manager)) == null ? void 0 : _a.layer;
-      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.definition.variableType.Array) return;
-      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.definition.variableType.Object) {
-        Object.values(utils.cleanGraph(resolvedDefinition == null ? void 0 : resolvedDefinition.fields)).forEach(run);
-      } else if (definition.isVariableLink(defLink)) {
-        acc.push(defLink);
+const resolveFieldRef = (field, manager) => {
+  if (definition.isVariableLink(field)) {
+    return manager.resolve(field);
+  }
+  if (utils.isObject(field) && (field == null ? void 0 : field._id)) {
+    return field;
+  }
+  return void 0;
+};
+const fieldRefToKey = (field) => {
+  if (definition.isVariableLink(field)) {
+    return field;
+  }
+  if (utils.isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
+    return core.keyOfEntity(field);
+  }
+  return void 0;
+};
+const collectLeafKeys = (defVar, manager, keys) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = utils.cleanGraph(defVar.fields);
+  for (const fieldRef of Object.values(fields)) {
+    const fieldVar = resolveFieldRef(fieldRef, manager);
+    const fieldKey = fieldRefToKey(fieldRef);
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields) {
+      collectLeafKeys(fieldVar, manager, keys);
+    } else {
+      keys.push(fieldKey);
+    }
+  }
+};
+const flattenObjectFields = (defVar, valueObj, manager, result) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = utils.cleanGraph(defVar.fields);
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    const fieldVar = resolveFieldRef(fieldRef, manager);
+    if (!(fieldVar == null ? void 0 : fieldVar._id)) continue;
+    const fieldValue = valueObj[fieldName] ?? valueObj[fieldVar._id];
+    if (fieldValue === void 0) continue;
+    if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields && utils.isObject(fieldValue)) {
+      flattenObjectFields(
+        fieldVar,
+        fieldValue,
+        manager,
+        result
+      );
+    } else {
+      result[fieldVar._id] = fieldValue;
+    }
+  }
+};
+const buildFieldIdMapping = (childDef, parentDef, childManager, parentManager) => {
+  const mapping = {};
+  if (!(childDef == null ? void 0 : childDef.fields) || !(parentDef == null ? void 0 : parentDef.fields)) return mapping;
+  const childFields = utils.cleanGraph(childDef.fields);
+  const parentFields = utils.cleanGraph(parentDef.fields);
+  for (const [fieldName, childFieldRef] of Object.entries(childFields)) {
+    const parentFieldRef = parentFields[fieldName];
+    if (!parentFieldRef) continue;
+    const childFieldVar = resolveFieldRef(childFieldRef, childManager);
+    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
+    const parentFieldVar = resolveFieldRef(parentFieldRef, parentManager);
+    if (!(parentFieldVar == null ? void 0 : parentFieldVar._id)) continue;
+    if (childFieldVar.type === definition.definition.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === definition.definition.variableType.Object && (parentFieldVar == null ? void 0 : parentFieldVar.fields)) {
+      Object.assign(
+        mapping,
+        buildFieldIdMapping(
+          childFieldVar,
+          parentFieldVar,
+          childManager,
+          parentManager
+        )
+      );
+      continue;
+    }
+    mapping[parentFieldVar._id] = childFieldVar._id;
+  }
+  return mapping;
+};
+const resolveArrayItems = (items, manager) => {
+  const result = [];
+  for (const item of items) {
+    if (definition.isLink(item)) {
+      const resolved = manager.resolve(item);
+      if (!resolved) continue;
+      const payload = utils.isObject(resolved.value) ? resolved.value : resolved;
+      if (utils.isObject(payload)) {
+        result.push(utils.cleanGraph(payload));
       }
-    };
-    definitions.forEach(run);
-    return acc;
-  }, [definitions]);
-  const definitionsData = react$1.useGraphStack(manager, flatDefinition);
-  const definitionProps = react.useMemo(
-    () => definitionsData.reduce((acc, definition2) => {
-      const defId = definition2._id;
-      acc[defId] = (inputProps == null ? void 0 : inputProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
-      return acc;
-    }, {}),
-    [inputProps]
-  );
-  return utils.cleanGraph({
-    ...inputProps,
-    ...definitionProps
+    } else if (utils.isObject(item)) {
+      const payload = utils.isObject(item.value) ? item.value : item;
+      result.push(utils.cleanGraph(payload));
+    }
+  }
+  return result;
+};
+const remapArrayItems = (items, mapping) => {
+  return items.map((item) => {
+    const remapped = {};
+    for (const [key, value] of Object.entries(item)) {
+      const newKey = mapping[key] ?? key;
+      remapped[newKey] = value;
+    }
+    return remapped;
   });
 };
+const useExtractProps = (props, manager, parentManager, definitions) => {
+  const { readVariable, _dep } = useReadVariable();
+  const leafKeys = react.useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!defVar) continue;
+      if (defVar.type === definition.definition.variableType.Object && defVar.fields) {
+        collectLeafKeys(defVar, manager, keys);
+      } else if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
+        const arrDef = resolveFieldRef(defVar.definition, manager);
+        if ((arrDef == null ? void 0 : arrDef.type) === definition.definition.variableType.Object && (arrDef == null ? void 0 : arrDef.fields)) {
+          collectLeafKeys(arrDef, manager, keys);
+        }
+      }
+    }
+    return keys;
+  }, [definitions, manager]);
+  const leafLayers = react$1.useGraphStack(leafKeys.length ? manager : null, leafKeys);
+  const arrayItemKeys = react.useMemo(() => {
+    var _a;
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const resolveManager = parentManager ?? manager;
+    if (!resolveManager) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!(defVar == null ? void 0 : defVar._id)) continue;
+      if (defVar.type !== definition.definition.variableType.Array || !defVar.definition)
+        continue;
+      const propValue = props[defVar._id];
+      if (!definition.isVariableLink(propValue)) continue;
+      const parentVar = resolveManager.resolve(propValue);
+      if ((parentVar == null ? void 0 : parentVar.type) !== definition.definition.variableType.Array) continue;
+      const items = parentVar.defaultValue;
+      if (!Array.isArray(items)) continue;
+      for (const item of items) {
+        if (definition.isLink(item)) {
+          keys.push(item);
+          const resolved = resolveManager.resolve(item);
+          if ((resolved == null ? void 0 : resolved.value) && utils.isObject(resolved.value) && ((_a = resolved.value) == null ? void 0 : _a._type)) {
+            const valueKey = core.keyOfEntity(resolved.value);
+            if (valueKey) keys.push(valueKey);
+          }
+        }
+      }
+    }
+    return keys;
+  }, [definitions, manager, parentManager, props, _dep]);
+  const arrayItemLayers = react$1.useGraphStack(
+    arrayItemKeys.length ? parentManager ?? manager : null,
+    arrayItemKeys
+  );
+  return react.useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return props;
+    const resolveManager = parentManager ?? manager;
+    const base = {};
+    for (const layer of leafLayers) {
+      if ((layer == null ? void 0 : layer._id) && (layer == null ? void 0 : layer.defaultValue) != null) {
+        base[layer._id] = layer.defaultValue;
+      }
+    }
+    const expanded = {};
+    const handledPropKeys = /* @__PURE__ */ new Set();
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!(defVar == null ? void 0 : defVar._id)) continue;
+      const propValue = props[defVar._id];
+      handledPropKeys.add(defVar._id);
+      if (propValue === void 0) continue;
+      if (defVar.type === definition.definition.variableType.Object && defVar.fields) {
+        if (utils.isObject(propValue)) {
+          flattenObjectFields(
+            defVar,
+            propValue,
+            manager,
+            expanded
+          );
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
+        if (definition.isVariableLink(propValue) && resolveManager) {
+          const parentVar = resolveManager.resolve(propValue);
+          if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
+            const { value: resolvedArray } = readVariable(propValue);
+            if (Array.isArray(resolvedArray)) {
+              const concreteItems = resolveArrayItems(
+                resolvedArray,
+                resolveManager
+              );
+              const childDef = resolveFieldRef(defVar.definition, manager);
+              const parentDef = resolveFieldRef(
+                parentVar.definition,
+                resolveManager
+              );
+              if ((childDef == null ? void 0 : childDef.type) === definition.definition.variableType.Object && (childDef == null ? void 0 : childDef.fields) && (parentDef == null ? void 0 : parentDef.type) === definition.definition.variableType.Object && (parentDef == null ? void 0 : parentDef.fields)) {
+                const mapping = buildFieldIdMapping(
+                  childDef,
+                  parentDef,
+                  manager,
+                  resolveManager
+                );
+                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+              } else {
+                expanded[defVar._id] = concreteItems;
+              }
+              continue;
+            }
+          }
+          expanded[defVar._id] = propValue;
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      expanded[defVar._id] = propValue;
+    }
+    for (const [key, value] of Object.entries(props)) {
+      if (!handledPropKeys.has(key) && !(key in expanded)) {
+        expanded[key] = value;
+      }
+    }
+    return { ...base, ...expanded };
+  }, [
+    leafLayers,
+    arrayItemLayers,
+    props,
+    manager,
+    parentManager,
+    definitions,
+    _dep
+  ]);
+};
 const CollectionItem = ({
   layer,
   manager,
@@ -1994,20 +2725,22 @@ const CollectionItem = ({
   ...restProps
 }) => {
   var _a;
-  const layerKey = core.keyOfEntity(layer);
+  core.keyOfEntity(layer);
   const definitionId = ((_a = core.entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
-  const props = useExtractProps({
-    layerKey,
-    definitions: [sourceDefinition],
-    inputProps: utils.isObject(value) ? {
-      // [definitionId]: layer.value,
-      ...value
-    } : {
-      [definitionId]: value
-    },
-    manager
-  });
+  const inputProps = {
+    [definitionId]: value
+  };
+  const props = utils.cleanGraph(inputProps);
+  const definitions = react.useMemo(
+    () => sourceDefinition ? [sourceDefinition] : [],
+    [sourceDefinition]
+  );
+  const expandedProps = useExtractProps(props, manager, void 0, definitions);
+  const cssVars = react.useMemo(
+    () => toCssCustomProperties(expandedProps),
+    [expandedProps]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
@@ -2017,7 +2750,7 @@ const CollectionItem = ({
         type: definition.definition.scopeTypes.CollectionItemScope,
         ...restProps,
         sourceDefinition,
-        value: props,
+        value: expandedProps,
         manager
       },
       children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2025,7 +2758,7 @@ const CollectionItem = ({
         {
           style: {
             display: "contents",
-            ...getCssVariables(props ?? {})
+            ...cssVars
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
         },
@@ -2141,24 +2874,18 @@ const Frame = ({
     }
   );
 };
-const useIsomorphicEffect = (callback, deps) => {
-  react.useEffect(callback, deps);
-  if (!utils.isBrowser) {
-    callback();
-  }
-};
 const useCssChunk = (linkKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
   const [enabled] = useLayerValue(linkKey, "enabled", { manager });
-  const styleSheet = useStyleSheet(manager);
-  const reset = react.useRef(utils.noop);
-  useIsomorphicEffect(() => {
-    if (enabled && chunkId) {
-      reset.current = styleSheet.addCssChunk(chunkId);
-    }
-    return reset.current;
-  }, [enabled]);
+  const { addCssChunk } = useStyleSheet(manager);
+  react.useEffect(() => {
+    if (!enabled || !chunkId) return;
+    const cleanup = addCssChunk(chunkId);
+    return () => {
+      cleanup();
+    };
+  }, [enabled, chunkId, addCssChunk]);
 };
 const CssChunk = ({ linkKey }) => {
   useCssChunk(linkKey);
@@ -2172,23 +2899,18 @@ const useFragmentManager = (fragmentId, inputGlobalManager) => {
     getFragmentManager,
     queryFragmentManager
   } = useGlobalManager(inputGlobalManager);
-  const [loading, setLoading] = react.useState(false);
   const manager = getFragmentManager(fragmentId);
+  const loading = !!fragmentId && !manager;
   react.useEffect(() => {
-    (async () => {
-      if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
-        setLoading(true);
-        await queryFragmentManager(fragmentId);
-        setLoading(false);
-      }
-    })();
+    if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+      queryFragmentManager(fragmentId);
+    }
   }, [fragmentId, fragmentsGraph]);
   return {
     loading,
     manager,
     fragmentLayerKey: (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root,
     queryFragmentManager
-    // loadFragmentManager,
   };
 };
 const useFragmentChildren = (fragmentId) => {
@@ -2246,7 +2968,7 @@ const useFragment = (fragmentId, globalManager) => {
   const { properties: definitions } = useFragmentProperties(fragmentId);
   const scopes = react.useContext(ScopeContext);
   !(scopes == null ? void 0 : scopes.length);
-  const { addLayerStyle, addCssChunk, mount, unmount } = useStyleSheet(
+  const { addLayerStyle, mount, unmount } = useStyleSheet(
     fragmentContext.manager
   );
   if (fragmentContext.manager) {
@@ -2281,35 +3003,26 @@ const useFragment = (fragmentId, globalManager) => {
     definitions
   };
 };
-const FragmentInternal = ({
-  fragmentId,
-  globalManager,
-  pauseInteractions,
-  collectStyle,
-  FrameElement = Frame
-}) => {
-  const {
-    children,
-    fragmentContext,
-    hash,
-    chunkLinks,
-    isResize,
-    isTopFragment,
-    definitions,
-    layerKey
-  } = useFragment(fragmentId);
-  if (!fragmentContext.manager) return null;
-  return (
-    // <Scope
-    //   fragmentManager={fragmentContext.manager}
-    //   layerKey={layerKey}
-    //   value={{
-    //     type: definition.scopeTypes.FragmentScope,
-    //     manager: fragmentContext.manager,
-    //     definitions,
-    //   }}
-    // >
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-key": layerKey, className: hash, children: [
+const FragmentInternal = react.memo(
+  ({
+    fragmentId,
+    globalManager,
+    pauseInteractions,
+    collectStyle,
+    FrameElement = Frame
+  }) => {
+    const {
+      children,
+      fragmentContext,
+      hash,
+      chunkLinks,
+      isResize,
+      isTopFragment,
+      definitions,
+      layerKey
+    } = useFragment(fragmentId);
+    if (!fragmentContext.manager) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-key": layerKey, className: hash, children: [
       chunkLinks.map((linkKey) => /* @__PURE__ */ jsxRuntime.jsx(CssChunk, { linkKey })),
       children.map((childLink) => {
         var _a;
@@ -2327,29 +3040,57 @@ const FragmentInternal = ({
           childLink
         );
       })
-    ] })
-  );
-};
+    ] });
+  }
+);
 const Fragment = (props) => {
   const currentGlobalManager = react.useContext(GlobalManagerContext);
   const { manager: resultGlobalManager } = useGlobalManager(
     props.globalManager
   );
   const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
-  const Base = /* @__PURE__ */ jsxRuntime.jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsxRuntime.jsx(FragmentInternal, { ...props }) });
+  const fragmentContextValue = react.useMemo(() => ({ manager }), [manager]);
+  const Base = /* @__PURE__ */ jsxRuntime.jsx(FragmentContext.Provider, { value: fragmentContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FragmentInternal, { ...props }) });
   if (!currentGlobalManager) {
     return /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: resultGlobalManager, children: Base });
   }
   return Base;
 };
+const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
+  const fields = utils.cleanGraph(objectVar.fields);
+  const result = {};
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    let fieldVar;
+    let fieldKey;
+    if (definition.isVariableLink(fieldRef)) {
+      fieldKey = fieldRef;
+      fieldVar = manager == null ? void 0 : manager.resolve(fieldKey);
+    } else if (utils.isObject(fieldRef) && (fieldRef == null ? void 0 : fieldRef._id)) {
+      fieldKey = core.keyOfEntity(fieldRef);
+      fieldVar = fieldRef;
+    }
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields) {
+      result[fieldName] = resolveObjectToConcreteValue(
+        fieldVar,
+        manager,
+        readVariable
+      );
+    } else {
+      const { value } = readVariable(fieldKey);
+      if (value != null) {
+        result[fieldName] = value;
+      }
+    }
+  }
+  return result;
+};
 const useInstanceProps = (instanceProps) => {
   const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
   const { manager: loadedManager } = useFragmentManager(
     isTopInstance ? instanceProps == null ? void 0 : instanceProps.fragmentId : null
   );
   const { manager: fragmentContextManager } = react.useContext(FragmentContext);
-  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
-  const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = react$1.useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
@@ -2361,19 +3102,40 @@ const useInstanceProps = (instanceProps) => {
       ...localProps
     };
   }
-  const extractProps = useExtractProps({
-    definitions,
-    manager: fragmentManager,
-    inputProps
-  });
+  const extractProps = utils.cleanGraph(inputProps);
+  const { readVariable } = useReadVariable();
+  let resolvedProps = extractProps;
+  if (!isTopInstance) {
+    resolvedProps = {};
+    for (const [key, value] of Object.entries(extractProps)) {
+      if (!definition.isVariableLink(value)) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      const varLayer = fragmentManager == null ? void 0 : fragmentManager.resolve(value);
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Array) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Object && (varLayer == null ? void 0 : varLayer.fields)) {
+        resolvedProps[key] = resolveObjectToConcreteValue(
+          varLayer,
+          fragmentManager,
+          readVariable
+        );
+        continue;
+      }
+      const { value: resolved } = readVariable(value);
+      resolvedProps[key] = resolved;
+    }
+  }
   react.useEffect(() => {
     if (utils.isValue(instanceProps == null ? void 0 : instanceProps.props)) {
       setLocalProps(instanceProps.props);
     }
   }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
-    props: extractProps,
-    cssProps: getCssVariables(extractProps),
+    props: resolvedProps,
     onChangeProps: (variableId, value) => {
       var _a;
       setLocalProps((prev) => ({ ...prev, [variableId]: value }));
@@ -2391,7 +3153,7 @@ const useInstance = (instanceProps) => {
   );
   const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
-  const { props, cssProps, onChangeProps } = useInstanceProps(instanceProps);
+  const { props, onChangeProps } = useInstanceProps(instanceProps);
   const classnames = useClassnames(
     instanceProps.layerKey,
     innerFragmentManager
@@ -2402,7 +3164,6 @@ const useInstance = (instanceProps) => {
     events,
     definitions,
     props,
-    cssProps,
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
@@ -2410,6 +3171,22 @@ const useInstance = (instanceProps) => {
     onChangeProps
   };
 };
+const useSuspenseLoadFragment = (globalManager, fragmentId, skip) => {
+  var _a, _b;
+  if (skip || !globalManager || !fragmentId) return;
+  const cache = getSuspenseCache(globalManager);
+  const valueOrPromise = (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadFragment) == null ? void 0 : _b.call(_a, fragmentId);
+  if (valueOrPromise == null) return;
+  createSuspenseResource(`fragment:${fragmentId}`, valueOrPromise, cache).read();
+};
+const useSuspenseLoadArea = (globalManager, areaCode, skip) => {
+  var _a, _b;
+  if (skip || !globalManager || !areaCode) return null;
+  const cache = getSuspenseCache(globalManager);
+  const valueOrPromise = (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadArea) == null ? void 0 : _b.call(_a, areaCode);
+  if (valueOrPromise == null) return null;
+  return createSuspenseResource(`area:${areaCode}`, valueOrPromise, cache).read();
+};
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
@@ -2417,13 +3194,12 @@ const InstanceInitial = ({
   FrameElement,
   ...instanceProps
 }) => {
-  var _a, _b, _c;
+  var _a;
   const ssr = ((_a = instanceProps == null ? void 0 : instanceProps.options) == null ? void 0 : _a.ssr) ?? true;
   const link = useLayerLink(instanceProps.layerKey);
   const Tag = (link == null ? void 0 : link.isLink) ? inputTag ?? "a" : inputTag ?? "div";
   const {
     fragmentId,
-    cssProps,
     parentManager,
     events,
     props,
@@ -2436,52 +3212,67 @@ const InstanceInitial = ({
     ...instanceProps,
     pauseInteractions
   });
-  if (ssr) {
-    (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadFragment) == null ? void 0 : _c.call(_b, fragmentId, { suspense: true });
-  }
+  const expandedProps = useExtractProps(
+    props,
+    innerManager,
+    parentManager,
+    definitions
+  );
+  const cssVars = react.useMemo(
+    () => toCssCustomProperties(expandedProps),
+    [expandedProps]
+  );
+  useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
+  const scopeValue = react.useMemo(
+    () => ({
+      type: definition.definition.scopeTypes.InstanceScope,
+      props: expandedProps,
+      definitions,
+      fragmentId,
+      documentManager: innerManager,
+      layerKey: instanceProps.layerKey,
+      onChangeProps
+    }),
+    [
+      expandedProps,
+      definitions,
+      fragmentId,
+      innerManager,
+      instanceProps.layerKey,
+      onChangeProps
+    ]
+  );
+  const instanceContextValue = react.useMemo(
+    () => ({
+      layerKey: instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      props: expandedProps
+    }),
+    [
+      instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      expandedProps
+    ]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
       fragmentManager: innerManager,
       layerKey: instanceProps.layerKey,
-      value: {
-        type: definition.definition.scopeTypes.InstanceScope,
-        props,
-        definitions,
-        fragmentId,
-        documentManager: innerManager,
-        layerKey: instanceProps.layerKey,
-        onChangeProps
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        InstanceContext$1.Provider,
+      value: scopeValue,
+      children: /* @__PURE__ */ jsxRuntime.jsx(InstanceContext$1.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
+        Tag,
         {
-          value: {
-            layerKey: instanceProps.layerKey,
-            definitions,
-            innerManager,
-            parentManager,
-            props
-          },
-          children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
-            Tag,
-            {
-              className: classnames,
-              "data-key": instanceProps.layerKey,
-              style: { ...style, ...cssProps },
-              ...link.linkProps,
-              ...events,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                Fragment,
-                {
-                  fragmentId,
-                  globalManager,
-                  FrameElement,
-                  pauseInteractions
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssProps }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+          className: classnames,
+          "data-key": instanceProps.layerKey,
+          style: { ...style, ...cssVars },
+          ...link.linkProps,
+          ...events,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
             Fragment,
             {
               fragmentId,
@@ -2489,9 +3280,17 @@ const InstanceInitial = ({
               FrameElement,
               pauseInteractions
             }
-          ) })
+          )
         }
-      )
+      ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Fragment,
+        {
+          fragmentId,
+          globalManager,
+          FrameElement,
+          pauseInteractions
+        }
+      ) }) })
     }
   );
 };
@@ -2511,26 +3310,24 @@ const Instance = (props) => {
   ) });
 };
 const useArea = (options) => {
-  const { manager: resultGlobalManager, queryArea } = useGlobalManager(
+  var _a;
+  const { manager: resultGlobalManager } = useGlobalManager(
     options == null ? void 0 : options.globalManager
   );
-  const [areaData, setAreaData] = react.useState(queryArea(options.areaCode));
+  const ssr = ((_a = options == null ? void 0 : options.options) == null ? void 0 : _a.ssr) ?? true;
+  const areaData = useSuspenseLoadArea(
+    resultGlobalManager,
+    options.areaCode,
+    !(isBrowser || ssr)
+  );
   const { manager: fragmentManager } = useFragmentManager(
-    areaData.fragmentId,
+    areaData == null ? void 0 : areaData.fragmentId,
     resultGlobalManager
   );
   const resultProps = react.useMemo(
-    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options == null ? void 0 : options.props) ?? [] }),
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options == null ? void 0 : options.props) ?? {} }),
     [areaData, options]
   );
-  react.useEffect(() => {
-    (async () => {
-      const response = await queryArea(options.areaCode);
-      if (response) {
-        setAreaData(response);
-      }
-    })();
-  }, []);
   return {
     ...areaData,
     fragmentManager,
@@ -2539,28 +3336,30 @@ const useArea = (options) => {
   };
 };
 const AreaInitial = (areaProps) => {
-  var _a, _b, _c;
-  const { manager: globalManager } = useGlobalManager(areaProps == null ? void 0 : areaProps.globalManager);
-  const ssr = ((_a = areaProps == null ? void 0 : areaProps.options) == null ? void 0 : _a.ssr) ?? true;
-  if (isBrowser || ssr) {
-    (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadArea) == null ? void 0 : _c.call(_b, areaProps.areaCode, {
-      suspense: true
-    });
-  }
   const areaData = useArea(areaProps);
   if (!areaData) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const areaManager = react.useMemo(
+    () => clientCore.createAreaManager({
+      areaId: areaData.areaId,
+      campaignId: areaData.campaignId,
+      variantId: areaData.variantId,
+      areaProperties: areaData.areaProperties
+    }),
+    [areaData.areaId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
       fragmentManager: areaData.fragmentManager,
       layerKey: "Area",
       value: {
         type: definition.definition.scopeTypes.AreaScope,
+        areaManager,
         ...areaData ?? {}
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props })
     }
-  );
+  ) });
 };
 const Area = (props) => {
   return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) });
@@ -2586,6 +3385,8 @@ const useLayerCssOverride = (layerKey) => {
   return utils.isValue(cssOverride) ? cssStringToJsObject(cssOverride) : {};
 };
 exports.Area = Area;
+exports.AreaManagerContext = AreaManagerContext;
+exports.AreaManagerProvider = AreaManagerProvider;
 exports.Collection = Collection;
 exports.CssChunk = CssChunk;
 exports.CustomRender = CustomRender;
@@ -2612,12 +3413,12 @@ exports.calcSize = calcSize;
 exports.cloneLayer = cloneLayer;
 exports.copyLayer = copyLayer;
 exports.createLayer = createLayer;
+exports.createSuspenseResource = createSuspenseResource;
 exports.declareFragmentProperty = declareFragmentProperty;
 exports.defaultCustomRender = defaultCustomRender;
 exports.duplicateLayer = duplicateLayer;
 exports.findBreakpoint = findBreakpoint;
 exports.getAllParents = getAllParents;
-exports.getCssVariables = getCssVariables;
 exports.getHydratedData = getHydratedData;
 exports.getKey = getKey;
 exports.getNormalizeLayer = getNormalizeLayer;
@@ -2625,6 +3426,7 @@ exports.getOverrider = getOverrider;
 exports.getOverriderByLayers = getOverriderByLayers;
 exports.getParent = getParent;
 exports.getStylesheetKey = getStylesheetKey;
+exports.getSuspenseCache = getSuspenseCache;
 exports.hashGenerator = hashGenerator;
 exports.insertChildren = insertChildren;
 exports.isBrowser = isBrowser;
@@ -2636,7 +3438,6 @@ exports.isRootLayer = isRootLayer;
 exports.isTopLevel = isTopLevel;
 exports.isVariableLink = isVariableLink;
 exports.layerFieldSetter = layerFieldSetter;
-exports.loadFragmentManager = loadFragmentManager;
 exports.makeSnapshot = makeSnapshot;
 exports.moveChildren = moveChildren;
 exports.nodeWalker = nodeWalker;
@@ -2645,6 +3446,7 @@ exports.removeChildren = removeChildren;
 exports.serializeData = serializeData;
 exports.setKey = setKey;
 exports.spliceChildren = spliceChildren;
+exports.toCssCustomProperties = toCssCustomProperties;
 exports.transformCssValue = transformCssValue;
 exports.useArea = useArea;
 exports.useCollection = useCollection;
@@ -2662,7 +3464,6 @@ exports.useLayerBackground = useLayerBackground;
 exports.useLayerBorder = useLayerBorder;
 exports.useLayerChildren = useLayerChildren;
 exports.useLayerCssOverride = useLayerCssOverride;
-exports.useLayerCssVariable = useLayerCssVariable;
 exports.useLayerDisplay = useLayerDisplay;
 exports.useLayerFlex = useLayerFlex;
 exports.useLayerLayout = useLayerLayout;
@@ -2680,6 +3481,8 @@ exports.useOptionalSize = useOptionalSize;
 exports.useReadVariable = useReadVariable;
 exports.useReadVariables = useReadVariables;
 exports.useRenderTarget = useRenderTarget;
+exports.useResolvedLayer = useResolvedLayer;
+exports.useResolvedLayerVariables = useResolvedLayerVariables;
 exports.useTextAttributes = useTextAttributes;
 exports.useTextContent = useTextContent;
 exports.useTextHighlight = useTextHighlight;