@fragmentsx/render-react 1.2.6 → 1.4.0

package/dist/index.es.js

@@ -1,9 +1,10 @@
-import { createContext, useContext, useReducer, useRef, useEffect, useCallback, useMemo, useState, Suspense } from "react";
-import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField } from "@fragmentsx/definition";
+import { createContext, useContext, useMemo, useReducer, useRef, useEffect, useCallback, useState, memo, Suspense } from "react";
+import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField, isLink as isLink$1 } from "@fragmentsx/definition";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cleanGraph, generateId, getKey as getKey$1, isValue, isObject, pick, toPx, setKey as setKey$1, toKebabCase, set, isPrimitive, get, omit, noop, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
+import { keyOfEntity, isPartialKey, entityOfKey, isLinkKey } from "@graph-state/core";
 import { useGraph, useGraphStack } from "@graph-state/react";
-import { noop, isPrimitive, isObject, generateId, getKey as getKey$1, isValue, pick, toPx, cleanGraph, flattenObject, setKey as setKey$1, toKebabCase, set, get, omit, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
-import { entityOfKey, keyOfEntity, isPartialKey, isLinkKey } from "@graph-state/core";
+import { createAreaManager } from "@fragmentsx/client-core";
 const GlobalManagerContext = createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
 const FragmentContext = createContext({
@@ -22,35 +23,9 @@ const RenderTargetContext = createContext(
   definition.renderTarget.document
 );
 const RenderTargetProvider = RenderTargetContext.Provider;
+const AreaManagerContext = createContext(null);
+const AreaManagerProvider = AreaManagerContext.Provider;
 const ScopeContext = createContext([]);
-const useGlobalManager = (globalManager) => {
-  var _a, _b;
-  const currentGlobalManager = useContext(GlobalManagerContext);
-  const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = useGraph(
-    resultManager,
-    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
-  );
-  const queryFragmentManager = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
-  };
-  const queryArea = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
-  };
-  const setRenderTarget = (value) => {
-    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
-  };
-  return {
-    fragmentsGraph,
-    manager: resultManager,
-    queryFragmentManager,
-    queryArea,
-    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? noop,
-    setRenderTarget
-  };
-};
 const Scope = ({
   value,
   children,
@@ -58,9 +33,11 @@ const Scope = ({
   layerKey
 }) => {
   var _a, _b;
-  const { manager: globalManager } = useGlobalManager();
   const currentScope = useContext(ScopeContext) ?? [];
-  const nextScope = [...currentScope, value];
+  const nextScope = useMemo(
+    () => [...currentScope, value],
+    [currentScope, value]
+  );
   (_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.registerScope) == null ? void 0 : _b.call(_a, layerKey, value);
   return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: nextScope, children });
 };
@@ -71,191 +48,6 @@ const getOverrider = (manager, layerEntity) => {
   const layer = manager.resolve(layerEntity);
   return manager.resolve(getKey(layer == null ? void 0 : layer.overrideFrom) ?? layerEntity);
 };
-const getLayer = (manager, layer, options) => {
-  if (!manager || !layer) return null;
-  const layerKey = manager.keyOfEntity(layer);
-  const layerData = manager.resolve(layerKey);
-  const overrider = getOverrider(manager, layerKey);
-  return getNormalizeLayer$1(layerData, overrider, options == null ? void 0 : options.withFallback);
-};
-const getNormalizeLayer = (layerKey, manager, options) => {
-  const layer = manager == null ? void 0 : manager.resolve(layerKey);
-  const parsedLayer = getLayer(manager, layerKey, options);
-  return {
-    layerKey,
-    rawLayer: layer,
-    layer: parsedLayer
-  };
-};
-const useNormalizeLayer = (layerKey, manager, options) => {
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  if (!resultManager) {
-    return {
-      layerKey,
-      rawLayer: null,
-      layer: null
-    };
-  }
-  return getNormalizeLayer(layerKey, resultManager, options);
-};
-const useNormalizeLayers = (layerKeys, manager, options) => {
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const resultManager = manager ?? fragmentManager;
-  return layerKeys.map(
-    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
-  );
-};
-function useForceUpdate() {
-  return useReducer(() => ({}), {});
-}
-const extractVariableValue = (input, variableId) => {
-  if (isObject(input)) {
-    if (variableId in input) {
-      return input[variableId];
-    }
-    for (let key in input) {
-      if (input.hasOwnProperty(key)) {
-        const result = extractVariableValue(input[key], variableId);
-        if (result !== void 0) {
-          return result;
-        }
-      }
-    }
-  }
-  return void 0;
-};
-function deepMerge(a, b) {
-  if (!isObject(a) || !isObject(b)) return a;
-  const result = { ...b };
-  for (const [key, value] of Object.entries(a)) {
-    if (key in result && typeof result[key] === "object" && typeof value === "object") {
-      result[key] = deepMerge(value, result[key]);
-    } else {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-const useReadVariable = (variableKey, customScopes) => {
-  const contextScopes = useContext(ScopeContext);
-  const scopes = customScopes ?? contextScopes;
-  const unmountAbortController = useRef(new AbortController());
-  const [dep, forceUpdate] = useForceUpdate();
-  useEffect(
-    () => () => {
-      var _a;
-      (_a = unmountAbortController.current) == null ? void 0 : _a.abort("unmount");
-    },
-    []
-  );
-  const extractVariableDefaultValue = (manager, variableEntity) => {
-    const variableLayer = manager.resolve(variableEntity);
-    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.variableType.Object)
-      return variableLayer == null ? void 0 : variableLayer.defaultValue;
-    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
-      (acc, fieldLink) => {
-        var _a;
-        if (!!fieldLink && isVariableLink$1(fieldLink)) {
-          const _id = (_a = entityOfKey(fieldLink)) == null ? void 0 : _a._id;
-          if (_id) {
-            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  };
-  const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a, _b;
-    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
-    if (!variableLayer) return null;
-    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.variableType.Array) {
-      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.variableType.Object)
-        return variableLayer;
-      const definitionDefaultValue = extractVariableDefaultValue(
-        manager,
-        definitionLayer
-      );
-      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
-      return {
-        ...variableLayer,
-        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
-          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
-          return deepMerge(
-            customItemValue ? { ...item, ...customItemValue } : item,
-            definitionDefaultValue
-          );
-        })
-      };
-    }
-    return variableLayer;
-  };
-  const readVariable = (variableKey2) => {
-    var _a, _b, _c, _d, _e;
-    const variableId = (_a = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
-    if (!isVariableLink$1(variableKey2)) {
-      return {
-        value: null,
-        layer: null
-      };
-    }
-    let instanceScope = scopes.findLast(
-      (scope) => {
-        var _a2;
-        return (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
-      }
-    );
-    if (!instanceScope) {
-      instanceScope = scopes.find(
-        (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope
-      );
-    }
-    const variableLayer = resolveVariableLayer(
-      instanceScope == null ? void 0 : instanceScope.documentManager,
-      variableKey2
-    );
-    (_c = instanceScope == null ? void 0 : instanceScope.documentManager) == null ? void 0 : _c.subscribe(variableKey2, forceUpdate, {
-      signal: (_b = unmountAbortController.current) == null ? void 0 : _b.signal
-    });
-    let instanceProp = (_d = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _d[variableId];
-    if (Array.isArray(instanceProp)) {
-      instanceProp = instanceProp.map(
-        (rawProp, index) => {
-          var _a2;
-          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
-        }
-      );
-    }
-    const lastCollectionItem = scopes.findLast(
-      (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.CollectionItemScope
-    );
-    resolveVariableLayer(
-      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.value
-    );
-    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_e = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _e._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
-    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
-    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
-    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
-    if (isVariableLink$1(resultValue)) {
-      return readVariable(resultValue);
-    }
-    return {
-      value: resultValue,
-      layer: variableLayer
-    };
-  };
-  const result = readVariable(variableKey);
-  return {
-    ...result,
-    readVariable
-  };
-};
 const getParent = (manager, layerKey) => {
   const layer = manager.resolve(layerKey);
   return manager.resolve(getKey(layer == null ? void 0 : layer.parent) ?? null);
@@ -431,6 +223,9 @@ const cloneLayer = (manager, layer, externalProps = {}) => {
       layerGraph,
       (key, value, history) => {
         const isRoot = history.length <= 2;
+        if ((value == null ? void 0 : value._type) === definition.nodes.Instance && key === "props") {
+          return cleanGraph(value);
+        }
         if (!!value && n(value) && !IGNORE_TYPES.includes(value._type)) {
           const nextId = generateId();
           const parentFromValue = getKey$1(value.parent);
@@ -667,6 +462,41 @@ const moveChildren = (manager, targetKey, to, index) => {
     spliceChildren(manager, targetParent, targetKey);
   }
 };
+const getLayer = (manager, layer, options) => {
+  if (!manager || !layer) return null;
+  const layerKey = manager.keyOfEntity(layer);
+  const layerData = manager.resolve(layerKey);
+  const overrider = getOverrider(manager, layerKey);
+  return getNormalizeLayer$1(layerData, overrider, options == null ? void 0 : options.withFallback);
+};
+const getNormalizeLayer = (layerKey, manager, options) => {
+  const layer = manager == null ? void 0 : manager.resolve(layerKey);
+  const parsedLayer = getLayer(manager, layerKey, options);
+  return {
+    layerKey,
+    rawLayer: layer,
+    layer: parsedLayer
+  };
+};
+const useNormalizeLayer = (layerKey, manager, options) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
+  return getNormalizeLayer(layerKey, resultManager, options);
+};
+const useNormalizeLayers = (layerKeys, manager, options) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = manager ?? fragmentManager;
+  return layerKeys.map(
+    (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
+  );
+};
 const calcBackground = (manager, layerKey) => {
   manager.resolve(layerKey);
   const { layer } = getNormalizeLayer(layerKey, manager);
@@ -779,23 +609,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.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(cleanGraph(flattenObject(props))).reduce(
+const toCssCustomProperties = (props) => {
+  return Object.entries(props).reduce(
     (acc, [key, value]) => {
       var _a, _b;
-      if (isVariableLink(value)) {
+      if (isVariableLink$1(value)) {
         const nestedVariableId = (_a = 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;
@@ -804,12 +632,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) {
@@ -861,21 +683,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;
@@ -884,6 +733,9 @@ const duplicateLayer = (manager, layer) => {
     const linkedMap = {};
     const nextLayer = nodeWalker(layerGraph, (key, value, history) => {
       const nextId = generateId();
+      if ((value == null ? void 0 : value._type) === definition.nodes.Instance && key === "props") {
+        return cleanGraph(value);
+      }
       if (!!value && n(value)) {
         linkedMap[keyOfEntity(value)] = keyOfEntity({ ...value, _id: nextId });
         const linkedParent = linkedMap == null ? void 0 : linkedMap[getKey$1(value.parent)];
@@ -950,6 +802,14 @@ const wrapTextInParagraphWithAttributes = (text, attributes) => {
   ).map(([key, value]) => `${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.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 } = parseLayerField(
@@ -978,26 +838,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 } = useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? manager;
+  const key = keyOfEntity(layerKey);
+  useGraph(resultManager, key);
+  if (!resultManager || !key) {
+    return EMPTY_RESOLVED$1;
+  }
+  const rawLayer = resultManager.resolve(key);
+  const overrider = getOverrider(resultManager, key);
+  const layer = getNormalizeLayer$1(rawLayer, overrider, options == null ? void 0 : options.withFallback);
+  let isOverride = false;
+  if (!(options == null ? void 0 : options.skipOverrideCheck)) {
+    isOverride = !isPartOfPrimary(resultManager, key);
+  }
+  return { layerKey: key, rawLayer, layer, isOverride };
+};
+function useForceUpdate() {
+  return useReducer(() => ({}), {});
+}
+const EMPTY_RESOLVED = {
+  values: {},
+  cssVariableValues: {},
+  rawValues: {}
+};
+const extractVariableValue$1 = (input, variableId) => {
+  if (isObject(input)) {
+    if (variableId in input) return input[variableId];
+    for (const key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue$1(input[key], variableId);
+        if (result !== void 0) return result;
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge$1(a, b) {
+  if (!isObject(a) || !isObject(b)) return a;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge$1(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useResolvedLayerVariables = (layer, rawLayer, customScopes) => {
   var _a;
-  const isVariable = isVariableLink$1(inputValue);
-  const variableValue = manager.resolve(manager, inputValue);
-  const id = (_a = entityOfKey(inputValue)) == null ? void 0 : _a._id;
+  const contextScopes = useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  useEffect(() => {
+    const controller = new AbortController();
+    let ready = false;
+    const update = () => {
+      if (!ready) return;
+      forceUpdate();
+    };
+    for (const { manager, key } of subscriptions.current) {
+      manager.subscribe(key, update, { signal: controller.signal });
+    }
+    ready = true;
+    return () => controller.abort();
+  });
+  if (!layer) {
+    subscriptions.current = [];
+    return EMPTY_RESOLVED;
+  }
+  const values = {};
+  const cssVariableValues = {};
+  const rawValues = {};
+  const readVariable = (variableKey) => {
+    var _a2, _b, _c;
+    const variableId = (_a2 = entityOfKey(variableKey)) == null ? void 0 : _a2._id;
+    if (!isVariableLink$1(variableKey)) {
+      return { value: null, layer: null };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a3;
+        return (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope && !!((_a3 = scope.documentManager) == null ? void 0 : _a3.resolve(variableKey));
+      }
+    );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope
+      );
+    }
+    const resolveVariableLayer = (manager, variableLink, customProps) => {
+      var _a3, _b2;
+      const variableLayer2 = (_a3 = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a3.layer;
+      if (!variableLayer2) return null;
+      if ((variableLayer2 == null ? void 0 : variableLayer2.type) === definition.variableType.Array) {
+        const definitionLayer = manager.resolve(variableLayer2 == null ? void 0 : variableLayer2.definition);
+        if (!((_b2 = variableLayer2 == null ? void 0 : variableLayer2.defaultValue) == null ? void 0 : _b2.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.variableType.Object)
+          return variableLayer2;
+        const extractVariableDefaultValue = (mgr, varEntity) => {
+          const varLayer = mgr.resolve(varEntity);
+          if ((varLayer == null ? void 0 : varLayer.type) !== definition.variableType.Object)
+            return varLayer == null ? void 0 : varLayer.defaultValue;
+          return Object.values((varLayer == null ? void 0 : varLayer.fields) ?? {}).reduce(
+            (acc, fieldLink) => {
+              var _a4;
+              if (!!fieldLink && isVariableLink$1(fieldLink)) {
+                const _id = (_a4 = entityOfKey(fieldLink)) == null ? void 0 : _a4._id;
+                if (_id) acc[_id] = extractVariableDefaultValue(mgr, fieldLink);
+              }
+              return acc;
+            },
+            {}
+          );
+        };
+        const definitionDefaultValue = extractVariableDefaultValue(
+          manager,
+          definitionLayer
+        );
+        const customValue = customProps == null ? void 0 : customProps[variableLayer2 == null ? void 0 : variableLayer2._id];
+        return {
+          ...variableLayer2,
+          defaultValue: variableLayer2.defaultValue.map(
+            (item, index) => {
+              const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
+              return deepMerge$1(
+                customItemValue ? { ...item, ...customItemValue } : item,
+                definitionDefaultValue
+              );
+            }
+          )
+        };
+      }
+      return variableLayer2;
+    };
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey
+    );
+    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey) {
+      subscriptions.current.push({
+        manager: instanceScope.documentManager,
+        key: variableKey
+      });
+    }
+    let instanceProp = variableId ? (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId] : void 0;
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index) => {
+          var _a3;
+          return deepMerge$1(rawProp, (_a3 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a3.at(index));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue$1(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (isVariableLink$1(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return { value: resultValue, layer: variableLayer };
+  };
+  const resolveField = (fieldPath, value, raw) => {
+    var _a2;
+    rawValues[fieldPath] = raw;
+    if (isVariableLink$1(value)) {
+      const resolved = readVariable(value);
+      values[fieldPath] = resolved.value ?? value;
+      const variableId = (_a2 = entityOfKey(value)) == null ? void 0 : _a2._id;
+      cssVariableValues[fieldPath] = `var(--${variableId}, ${transformCssValue(
+        resolved.value ?? value
+      )})`;
+    } else {
+      values[fieldPath] = value;
+      cssVariableValues[fieldPath] = transformCssValue(value);
+    }
+  };
+  subscriptions.current = [];
+  for (const [field, value] of Object.entries(layer)) {
+    resolveField(field, value, rawLayer == null ? void 0 : rawLayer[field]);
+    if (isObject(value) && !isVariableLink$1(value)) {
+      for (const [nestedField, nestedValue] of Object.entries(
+        value
+      )) {
+        resolveField(
+          `${field}.${nestedField}`,
+          nestedValue,
+          (_a = rawLayer == null ? void 0 : rawLayer[field]) == null ? void 0 : _a[nestedField]
+        );
+      }
+    }
+  }
+  return { values, cssVariableValues, rawValues };
+};
+const useRenderTarget = () => {
+  const renderTarget = useContext(RenderTargetContext);
   return {
-    value: isVariable ? `var(--${id}, ${variableValue == null ? void 0 : variableValue.defaultValue})` : null
+    renderTarget,
+    isCanvas: renderTarget === definition.renderTarget.canvas,
+    isDocument: renderTarget === definition.renderTarget.document
   };
 };
-const useLayerCssVariable = (inputValue) => {
-  var _a;
-  const { manager } = useContext(FragmentContext);
-  const isVariable = isVariableLink$1(inputValue);
-  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
-  const variableId = (layer == null ? void 0 : layer._id) ?? ((_a = entityOfKey(inputValue)) == null ? void 0 : _a._id);
+const useReadVariables = (variableKeys) => {
+  const filterKeys = variableKeys.filter(isVariableLink$1);
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const { props, innerManager, layerKey } = useContext(InstanceContext);
+  const resultManager = innerManager ?? fragmentManager;
+  const variableLayers = useGraphStack(
+    !!filterKeys.length ? resultManager : null,
+    filterKeys,
+    {
+      selector: (graph) => graph ? pick(graph, "defaultValue", "required") : graph
+    }
+  );
+  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 (isObject(input)) {
+    if (variableId in input) {
+      return input[variableId];
+    }
+    for (let key in input) {
+      if (input.hasOwnProperty(key)) {
+        const result = extractVariableValue(input[key], variableId);
+        if (result !== void 0) {
+          return result;
+        }
+      }
+    }
+  }
+  return void 0;
+};
+function deepMerge(a, b) {
+  if (!isObject(a) || !isObject(b)) return a;
+  const result = { ...b };
+  for (const [key, value] of Object.entries(a)) {
+    if (key in result && typeof result[key] === "object" && typeof value === "object") {
+      result[key] = deepMerge(value, result[key]);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+const useReadVariable = (variableKey, customScopes) => {
+  const contextScopes = useContext(ScopeContext);
+  const scopes = customScopes ?? contextScopes;
+  const subscriptions = useRef([]);
+  const [dep, forceUpdate] = useForceUpdate();
+  useEffect(() => {
+    const controller = new AbortController();
+    let ready = false;
+    const update = () => {
+      if (!ready) return;
+      forceUpdate();
+    };
+    for (const { manager, key } of subscriptions.current) {
+      manager.subscribe(key, update, { signal: controller.signal });
+    }
+    ready = true;
+    return () => controller.abort();
+  });
+  const extractVariableDefaultValue = (manager, variableEntity) => {
+    const variableLayer = manager.resolve(variableEntity);
+    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.variableType.Object)
+      return variableLayer == null ? void 0 : variableLayer.defaultValue;
+    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
+      (acc, fieldLink) => {
+        var _a;
+        if (!!fieldLink && isVariableLink$1(fieldLink)) {
+          const _id = (_a = entityOfKey(fieldLink)) == null ? void 0 : _a._id;
+          if (_id) {
+            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  };
+  const resolveVariableLayer = (manager, variableLink, customProps) => {
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
+    if (!variableLayer) return null;
+    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.variableType.Array) {
+      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.variableType.Object)
+        return variableLayer;
+      const definitionDefaultValue = extractVariableDefaultValue(
+        manager,
+        definitionLayer
+      );
+      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
+      return {
+        ...variableLayer,
+        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
+          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
+          return deepMerge(
+            customItemValue ? { ...item, ...customItemValue } : item,
+            definitionDefaultValue
+          );
+        })
+      };
+    }
+    return variableLayer;
+  };
+  const readVariable = (variableKey2) => {
+    var _a, _b, _c;
+    const variableId = (_a = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
+    if (!isVariableLink$1(variableKey2)) {
+      return {
+        value: null,
+        layer: null
+      };
+    }
+    let instanceScope = scopes.findLast(
+      (scope) => {
+        var _a2;
+        return (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
+      }
+    );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope
+      );
+    }
+    const variableLayer = resolveVariableLayer(
+      instanceScope == null ? void 0 : instanceScope.documentManager,
+      variableKey2
+    );
+    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey2) {
+      subscriptions.current.push({
+        manager: instanceScope.documentManager,
+        key: variableKey2
+      });
+    }
+    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
+    if (Array.isArray(instanceProp)) {
+      instanceProp = instanceProp.map(
+        (rawProp, index) => {
+          var _a2;
+          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
+        }
+      );
+    }
+    const lastCollectionItem = scopes.findLast(
+      (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.CollectionItemScope
+    );
+    resolveVariableLayer(
+      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
+      lastCollectionItem == null ? void 0 : lastCollectionItem.value
+    );
+    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
+    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
+    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
+    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
+    if (isVariableLink$1(resultValue)) {
+      return readVariable(resultValue);
+    }
+    return {
+      value: resultValue,
+      layer: variableLayer
+    };
+  };
+  subscriptions.current = [];
+  const result = readVariable(variableKey);
   return {
-    value: isVariable ? `var(--${variableId}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
+    ...result,
+    readVariable,
+    _dep: dep
   };
 };
+const useLayersValue = (layerKeys, fieldKey, options) => {
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
+  if (!resultManager) {
+    return [];
+  }
+  const keys = (layerKeys == null ? void 0 : layerKeys.map(keyOfEntity)) ?? [];
+  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 = get(normalizedLayer.rawLayer, fieldKey);
+    const layerValue = 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 = 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 = isVariableLink$1(rawValue ?? layerValue);
+    const variableId = isVariable ? (_b = 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 } = useContext(FragmentContext);
   const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
   if (!resultManager) {
@@ -1027,8 +1335,8 @@ const useLayerValue = (layerKey, fieldKey, options) => {
   }, [updateLayerData]);
   const restore = 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;
     },
@@ -1040,27 +1348,123 @@ const useLayerValue = (layerKey, fieldKey, options) => {
     },
     [setter]
   );
-  const { value: cssValue } = useLayerCssVariable(rawValue ?? layerValue);
+  const isVariable = isVariableLink$1(rawValue ?? layerValue);
+  const variableId = isVariable ? (_a = entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
   return [
     currentValue,
     updateValue,
     {
       isOverride,
       resetOverride,
-      isVariable: isVariableLink$1(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 } = useContext(FragmentContext);
+  const [layerData] = useGraph(customManager ?? fragmentManager, layerKey, {
+    selector: (data) => 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 = 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 } = useContext(FragmentContext);
+  const [link] = useLayerValue(layerKey, "link", fragmentManager);
+  const [href] = useLayerValue(link, "href", fragmentManager);
+  const [isNewTab] = useLayerValue(link, "isNewTab", fragmentManager);
+  const isLink2 = isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
+  const linkTarget = isNewTab ? "_blank" : "";
+  const linkProps = 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 } = 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 = 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 useMemo(
+    () => ({
+      "background-image": calcLinearGradient(angle, stopValues)
+    }),
+    [angle, stopValues]
+  );
+};
 const processOptionalSize = (value, type) => {
   if (value === -1) return "";
   if (type === definition.sizing.Fixed) return toPx(value);
   if (type === definition.sizing.Relative) return `${value}%`;
   return "";
 };
+const calcOptionalSize = (type, vars) => {
+  const value = vars.values[type];
+  const valueType = vars.values[`${type}Type`];
+  return processOptionalSize(value, valueType);
+};
 const useOptionalSize = (type, layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [value] = useLayerValue(layerKey, type, fragmentManager);
@@ -1070,6 +1474,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 } = useContext(FragmentContext);
   const minWidth = useOptionalSize("minWidth", layerKey);
@@ -1085,15 +1497,30 @@ const useLayerSize = (layerKey) => {
     maxHeight
   };
 };
-const useRenderTarget = () => {
-  const renderTarget = useContext(RenderTargetContext);
-  return {
-    renderTarget,
-    isCanvas: renderTarget === definition.renderTarget.canvas,
-    isDocument: renderTarget === definition.renderTarget.document
+const autoSizes = [definition.sizing.Hug];
+const calcLayerSizeValue = (resolved, vars, sizeType, parentResolved, instanceVars, context) => {
+  const { isDocument, isTopLevel: isTop, instanceLayerKey } = context;
+  const isPartOfInstance = !!instanceLayerKey;
+  const layerNode = resolved.rawLayer;
+  const instanceType = instanceVars.values[`${sizeType}Type`];
+  const valueType = vars.values[`${sizeType}Type`];
+  const growType = sizeType === "width" ? "horizontalGrow" : "verticalGrow";
+  return (value) => {
+    var _a;
+    if (isTop && isDocument && ((_a = parentResolved.layer) == null ? void 0 : _a[growType]) === definition.fragmentGrowingMode.fill) {
+      return "100%";
+    }
+    if (isTop && isPartOfInstance && !autoSizes.includes(instanceType)) {
+      return "100%";
+    }
+    if (autoSizes.includes(valueType)) {
+      return (layerNode == null ? void 0 : layerNode._type) === definition.nodes.Instance ? "auto" : "fit-content";
+    }
+    if (valueType === definition.sizing.Relative) return `${value}%`;
+    if (valueType === definition.sizing.Fill) return `100%`;
+    return toPx(value);
   };
 };
-const autoSizes = [definition.sizing.Hug];
 const useLayerSizeValue = (layerKey, sizeType) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
@@ -1148,6 +1575,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.positionType.absolute,
+      top: toPx(top),
+      left: toPx(left),
+      width,
+      height
+    };
+  }
+  if (position === definition.positionType.relative || skipPosition) {
+    return {
+      position: definition.positionType.relative,
+      width: widthCalc(width),
+      height: heightCalc(height)
+    };
+  }
+  const hasConstrainX = isFiniteNumber(left) && isFiniteNumber(right);
+  const hasConstrainY = isFiniteNumber(top) && isFiniteNumber(bottom);
+  const hasAnyConstrainX = isFiniteNumber(left) || isFiniteNumber(right);
+  const hasAnyConstrainY = isFiniteNumber(top) || isFiniteNumber(bottom);
+  return {
+    position,
+    left: isFiniteNumber(left) ? toPx(left) : !isFiniteNumber(right) ? `${centerAnchorX * 100}%` : null,
+    top: isFiniteNumber(top) ? toPx(top) : !isFiniteNumber(bottom) ? `${centerAnchorY * 100}%` : null,
+    right: isFiniteNumber(right) ? toPx(right) : null,
+    bottom: isFiniteNumber(bottom) ? toPx(bottom) : null,
+    width: hasConstrainX ? null : widthCalc(width),
+    height: hasConstrainY ? null : heightCalc(height),
+    transform: !hasAnyConstrainX || !hasAnyConstrainY ? `translate3d(${!hasAnyConstrainX ? "-50%" : 0}, ${!hasAnyConstrainY ? "-50%" : 0}, 0px)` : null
+  };
+};
 const useLayerPosition = (layerKey) => {
   const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
   const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1196,6 +1682,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 } = useContext(FragmentContext);
@@ -1207,186 +1701,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(isVariableLink$1);
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const { props, innerManager, layerKey } = useContext(InstanceContext);
-  const resultManager = innerManager ?? fragmentManager;
-  const variableLayers = useGraphStack(
-    !!filterKeys.length ? resultManager : null,
-    filterKeys,
-    {
-      selector: (graph) => graph ? pick(graph, "defaultValue", "required") : graph
-    }
-  );
-  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.paintMode.Solid) {
+    return { background: cssSolidFill };
+  }
+  if (fillType === definition.paintMode.Image) {
+    const image = calcImagePaint(imageVars);
     return {
-      value: resultValue,
-      layer
+      ...image,
+      backgroundSize: cssImageSize ?? image.backgroundSize
     };
-  });
-};
-const useLayersValue = (layerKeys, fieldKey, options) => {
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
-  if (!resultManager) {
-    return [];
   }
-  const keys = (layerKeys == null ? void 0 : layerKeys.map(keyOfEntity)) ?? [];
-  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 = get(normalizedLayer.rawLayer, fieldKey);
-    const layerValue = 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 = 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: isVariableLink$1(rawValue ?? layerValue),
-        cssVariableValue: cssValue ?? currentValue,
-        rawValue,
-        restore,
-        ...resultManager.entityOfKey(normalizedLayer.layerKey)
-      }
-    ];
-  });
-};
-const useLayerChildren = (layerKey, customManager) => {
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const [layerData] = useGraph(customManager ?? fragmentManager, layerKey, {
-    selector: (data) => 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 = 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.paintMode.LinearGradient) {
+    return linearGradient;
   }
-  return resultScopes;
-};
-const useLayerLink = (layerKey) => {
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const [link] = useLayerValue(layerKey, "link", fragmentManager);
-  const [href] = useLayerValue(link, "href", fragmentManager);
-  const [isNewTab] = useLayerValue(link, "isNewTab", fragmentManager);
-  const isLink2 = isValue(href) && typeof href === "string" && !!(href == null ? void 0 : href.length);
-  const linkTarget = isNewTab ? "_blank" : "";
-  const linkProps = 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 } = 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 = 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 useMemo(
-    () => ({
-      "background-image": calcLinearGradient(angle, stopValues)
-    }),
-    [angle, stopValues]
-  );
+  return { background: null };
 };
 const useLayerBackground = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1429,9 +1761,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.layerMode.flex ? "flex" : null;
+};
 const useLayerDisplay = (layerKey) => {
   const { manager } = useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(layerKey, "layerMode", manager);
@@ -1443,6 +1782,15 @@ const useLayerDisplay = (layerKey) => {
     return layerModeValue === definition.layerMode.flex ? "flex" : null;
   }, [layerModeValue, visible]);
 };
+const calcLayerPaint = (paintVars) => {
+  return {
+    type: paintVars.values.type,
+    solid: paintVars.values.solid,
+    solidCssValue: paintVars.cssVariableValues.solid,
+    image: paintVars.values.image,
+    linearGradientLink: paintVars.values.linearGradient
+  };
+};
 const useLayerPaint = (paintLinkKey) => {
   const [type] = useLayerValue(paintLinkKey, "type");
   const [solid, , solidInfo] = useLayerValue(paintLinkKey, "solid");
@@ -1456,18 +1804,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.borderType.None) {
+    return { border: null };
+  }
+  if (borderPaint.type === definition.paintMode.LinearGradient) {
+    let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    if (paint.type === definition.paintMode.LinearGradient) {
+      background = `${linearGradient == null ? void 0 : linearGradient["background-image"]} padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    }
+    if (paint.type === definition.paintMode.None) {
+      background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient == null ? void 0 : borderLinearGradient["background-image"]} border-box`;
+    }
+    return {
+      ...calcBorderSides(
+        type,
+        width,
+        borderPaint.type === definition.paintMode.Solid ? borderPaint.solid : "transparent"
+      ),
+      background
+    };
+  }
+  if (borderPaint.type === definition.paintMode.Solid) {
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
+  }
+  return { border: null };
+};
 const useLayerBorder = (layerKey) => {
+  var _a, _b;
   const [borderLinkKey] = useLayerValue(layerKey, "border");
   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.borderType.None) {
     return {
       border: null
@@ -1476,7 +1855,7 @@ const useLayerBorder = (layerKey) => {
   if (borderPaint.type === definition.paintMode.LinearGradient) {
     let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient} border-box`;
     if (paint.type === 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.paintMode.None) {
       background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient} border-box`;
@@ -1495,6 +1874,28 @@ const useLayerBorder = (layerKey) => {
   }
   return { border: null };
 };
+const calcLayerLayout = (vars) => {
+  const layerModeValue = vars.values.layerMode;
+  const layerWrap = vars.values.layerWrap;
+  const layerDistribute = vars.values.layerDistribute;
+  const layerDirectionValue = vars.values.layerDirection;
+  const layerAlign = vars.values.layerAlign;
+  const padding = vars.values.padding;
+  const gap = vars.values.layerGap;
+  const isFlex = layerModeValue === definition.layerMode.flex;
+  const baseFlow = layerDirectionValue === definition.layerDirection.vertical ? "column" : "row";
+  const wrap = isFlex ? layerWrap ? "wrap" : null : null;
+  const flexFlow = [baseFlow, wrap].filter(Boolean).join(" ");
+  return {
+    display: isFlex ? "flex" : null,
+    gap: toPx(gap),
+    flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+    justifyContent: isFlex ? layerDistribute : null,
+    flexFlow,
+    alignItems: isFlex ? layerAlign : null,
+    padding: isFlex ? padding : null
+  };
+};
 const useLayerLayout = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [layerModeValue] = useLayerValue(
@@ -1530,6 +1931,15 @@ const useLayerLayout = (layerKey) => {
     padding: isFlex ? padding : null
   };
 };
+const calcLayerTextStyles = (vars) => {
+  const attributes = vars.values.attributes;
+  const color = vars.values["attributes.color"];
+  const cleanAttributes = omit(attributes, "_id", "_type");
+  return {
+    ...cleanAttributes,
+    color
+  };
+};
 const useLayerTextStyles = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [attributes] = useLayerValue(layerKey, "attributes", fragmentManager);
@@ -1540,6 +1950,15 @@ const useLayerTextStyles = (layerKey) => {
     color
   };
 };
+const calcLayerFlex = (vars, parentVars) => {
+  const widthType = vars.values.widthType;
+  const heightType = vars.values.heightType;
+  const layerDirectionValue = parentVars.values.layerDirection;
+  const type = layerDirectionValue === definition.layerDirection.horizontal ? widthType : heightType;
+  return {
+    flex: type === definition.sizing.Fill ? "1 0 0" : "0 0 auto"
+  };
+};
 const useLayerFlex = (layerKey) => {
   const { manager } = useContext(FragmentContext);
   const [widthType] = useLayerValue(layerKey, "widthType", manager);
@@ -1555,48 +1974,121 @@ const useLayerFlex = (layerKey) => {
     flex: type === definition.sizing.Fill ? "1 0 0" : "0 0 auto"
   };
 };
+const SKIP_OVERRIDE = { skipOverrideCheck: true };
 const useLayerStyles = (layerKey) => {
   try {
-    if (!layerKey) {
-      throw new Error("Empty layer key");
-    }
+    if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = useContext(FragmentContext);
-    const [opacity] = useLayerValue(layerKey, "opacity", fragmentManager);
-    const layerSize = useLayerSize(layerKey);
-    const position = useLayerPosition(layerKey);
-    const layerFlex = useLayerFlex(layerKey);
-    const display = useLayerDisplay(layerKey);
-    const background = useLayerBackground(layerKey);
-    const border = useLayerBorder(layerKey);
-    const layout = useLayerLayout(layerKey);
-    const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
-    const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
-    const [borderRadius, , { rawValue: rawBorderRadius }] = useLayerValue(
-      layerKey,
-      "borderRadius",
-      fragmentManager
+    const { layerKey: instanceLayerKey } = useContext(InstanceContext$1);
+    const { isDocument } = useRenderTarget();
+    const resolved = useResolvedLayer(layerKey);
+    const vars = useResolvedLayerVariables(resolved.layer, resolved.rawLayer);
+    const paintResolved = useResolvedLayer(vars.values.paint, SKIP_OVERRIDE);
+    const paintVars = useResolvedLayerVariables(
+      paintResolved.layer,
+      paintResolved.rawLayer
+    );
+    const borderResolved = useResolvedLayer(vars.values.border, SKIP_OVERRIDE);
+    const borderVars = useResolvedLayerVariables(
+      borderResolved.layer,
+      borderResolved.rawLayer
+    );
+    const borderPaintResolved = useResolvedLayer(
+      borderVars.values.paint,
+      SKIP_OVERRIDE
+    );
+    const borderPaintVars = useResolvedLayerVariables(
+      borderPaintResolved.layer,
+      borderPaintResolved.rawLayer
+    );
+    const imageResolved = useResolvedLayer(
+      paintVars.values.image,
+      SKIP_OVERRIDE
+    );
+    const imageVars = useResolvedLayerVariables(
+      imageResolved.layer,
+      imageResolved.rawLayer
+    );
+    const imageSizeLayerKey = isVariableLink$1(paintVars.rawValues.image) ? paintVars.rawValues.image : layerKey;
+    const imageSizeResolved = useResolvedLayer(
+      imageSizeLayerKey,
+      SKIP_OVERRIDE
+    );
+    const imageSizeVars = useResolvedLayerVariables(
+      imageSizeResolved.layer,
+      imageSizeResolved.rawLayer
+    );
+    const parentLayerKey = keyOfEntity(
+      getParent(fragmentManager, layerKey)
+    );
+    const parentResolved = useResolvedLayer(
+      parentLayerKey,
+      SKIP_OVERRIDE
+    );
+    const parentVars = useResolvedLayerVariables(
+      parentResolved.layer,
+      parentResolved.rawLayer
+    );
+    const 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: isValue(rotate) ? `${rotate}deg` : null,
-      "border-radius": isValue(rawBorderRadius) ? borderRadius : null,
-      "white-space": whiteSpace,
-      "z-index": zIndex !== -1 ? zIndex : null,
+      opacity: vars.values.opacity,
+      overflow: vars.values.overflow,
+      rotate: isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      "border-radius": isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      "white-space": vars.values.whiteSpace,
+      "z-index": vars.values.zIndex !== -1 ? vars.values.zIndex : null,
       ...layout,
       ...layerSize,
       ...textStyles,
       ...layerFlex,
       display
-      // "user-select": "none",
-      // ...cssOverride,
     };
   } catch (e) {
     return {};
@@ -1701,6 +2193,34 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
   };
 };
+const useGlobalManager = (globalManager) => {
+  var _a, _b;
+  const currentGlobalManager = useContext(GlobalManagerContext);
+  const resultManager = globalManager ?? currentGlobalManager;
+  const [fragmentsGraph] = useGraph(
+    resultManager,
+    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
+  );
+  const queryFragmentManager = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const queryArea = (id) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
+  };
+  const setRenderTarget = (value) => {
+    resultManager == null ? void 0 : resultManager.setRenderTarget(value);
+  };
+  return {
+    fragmentsGraph,
+    manager: resultManager,
+    queryFragmentManager,
+    queryArea,
+    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? noop,
+    setRenderTarget
+  };
+};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1725,12 +2245,14 @@ const useLayerInteractions = (layerKey, options) => {
   });
   const fireEvent = useCallback(
     (eventLink) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const eventType = (_a = entityOfKey(eventLink)) == null ? void 0 : _a._type;
       const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      console.log(scopes, eventLink, eventType, eventValue);
       if (eventType === definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
         if (!areaScope) return null;
-        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal) == null ? void 0 : _d.call(_c, {
+        console.log((_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal);
+        (_e = (_d = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _d.reachGoal) == null ? void 0 : _e.call(_d, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...pick(areaScope, "variantId", "campaignId", "areaId")
         });
@@ -1738,10 +2260,10 @@ const useLayerInteractions = (layerKey, options) => {
       if (eventType === definition.nodes.MutateEvent) {
         const target = eventValue == null ? void 0 : eventValue.target;
         const targetLayer = getNormalizeLayer(target, fragmentManager);
-        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_e = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _e.defaultValue);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_f = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _f.defaultValue);
         if (isVariableLink$1(target) && isValue(value)) {
-          const targetId = (_f = entityOfKey(target)) == null ? void 0 : _f._id;
-          (_g = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _g.call(instanceScope, targetId, value);
+          const targetId = (_g = entityOfKey(target)) == null ? void 0 : _g._id;
+          (_h = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _h.call(instanceScope, targetId, value);
         }
       }
     },
@@ -1948,41 +2470,250 @@ const useCollection = (layerKey, options) => {
     ...frame
   };
 };
-const useExtractProps = ({
-  layerKey,
-  definitions,
-  manager,
-  inputProps
-}) => {
-  const flatDefinition = 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.variableType.Array) return;
-      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Object) {
-        Object.values(cleanGraph(resolvedDefinition == null ? void 0 : resolvedDefinition.fields)).forEach(run);
-      } else if (isVariableLink$1(defLink)) {
-        acc.push(defLink);
+const resolveFieldRef = (field, manager) => {
+  if (isVariableLink$1(field)) {
+    return manager.resolve(field);
+  }
+  if (isObject(field) && (field == null ? void 0 : field._id)) {
+    return field;
+  }
+  return void 0;
+};
+const fieldRefToKey = (field) => {
+  if (isVariableLink$1(field)) {
+    return field;
+  }
+  if (isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
+    return keyOfEntity(field);
+  }
+  return void 0;
+};
+const collectLeafKeys = (defVar, manager, keys) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = cleanGraph(defVar.fields);
+  for (const fieldRef of Object.values(fields)) {
+    const fieldVar = resolveFieldRef(fieldRef, manager);
+    const fieldKey = fieldRefToKey(fieldRef);
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === definition.variableType.Object && fieldVar.fields) {
+      collectLeafKeys(fieldVar, manager, keys);
+    } else {
+      keys.push(fieldKey);
+    }
+  }
+};
+const flattenObjectFields = (defVar, valueObj, manager, result) => {
+  if (!(defVar == null ? void 0 : defVar.fields)) return;
+  const fields = cleanGraph(defVar.fields);
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    const fieldVar = resolveFieldRef(fieldRef, manager);
+    if (!(fieldVar == null ? void 0 : fieldVar._id)) continue;
+    const fieldValue = valueObj[fieldName] ?? valueObj[fieldVar._id];
+    if (fieldValue === void 0) continue;
+    if (fieldVar.type === definition.variableType.Object && fieldVar.fields && isObject(fieldValue)) {
+      flattenObjectFields(
+        fieldVar,
+        fieldValue,
+        manager,
+        result
+      );
+    } else {
+      result[fieldVar._id] = fieldValue;
+    }
+  }
+};
+const buildFieldIdMapping = (childDef, parentDef, childManager, parentManager) => {
+  const mapping = {};
+  if (!(childDef == null ? void 0 : childDef.fields) || !(parentDef == null ? void 0 : parentDef.fields)) return mapping;
+  const childFields = cleanGraph(childDef.fields);
+  const parentFields = cleanGraph(parentDef.fields);
+  for (const [fieldName, childFieldRef] of Object.entries(childFields)) {
+    const parentFieldRef = parentFields[fieldName];
+    if (!parentFieldRef) continue;
+    const childFieldVar = resolveFieldRef(childFieldRef, childManager);
+    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
+    const parentFieldVar = resolveFieldRef(parentFieldRef, parentManager);
+    if (!(parentFieldVar == null ? void 0 : parentFieldVar._id)) continue;
+    if (childFieldVar.type === definition.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === definition.variableType.Object && (parentFieldVar == null ? void 0 : parentFieldVar.fields)) {
+      Object.assign(
+        mapping,
+        buildFieldIdMapping(
+          childFieldVar,
+          parentFieldVar,
+          childManager,
+          parentManager
+        )
+      );
+      continue;
+    }
+    mapping[parentFieldVar._id] = childFieldVar._id;
+  }
+  return mapping;
+};
+const resolveArrayItems = (items, manager) => {
+  const result = [];
+  for (const item of items) {
+    if (isLink$1(item)) {
+      const resolved = manager.resolve(item);
+      if (!resolved) continue;
+      const payload = isObject(resolved.value) ? resolved.value : resolved;
+      if (isObject(payload)) {
+        result.push(cleanGraph(payload));
       }
-    };
-    definitions.forEach(run);
-    return acc;
-  }, [definitions]);
-  const definitionsData = useGraphStack(manager, flatDefinition);
-  const definitionProps = 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 cleanGraph({
-    ...inputProps,
-    ...definitionProps
+    } else if (isObject(item)) {
+      const payload = isObject(item.value) ? item.value : item;
+      result.push(cleanGraph(payload));
+    }
+  }
+  return result;
+};
+const remapArrayItems = (items, mapping) => {
+  return items.map((item) => {
+    const remapped = {};
+    for (const [key, value] of Object.entries(item)) {
+      const newKey = mapping[key] ?? key;
+      remapped[newKey] = value;
+    }
+    return remapped;
   });
 };
+const useExtractProps = (props, manager, parentManager, definitions) => {
+  const { readVariable, _dep } = useReadVariable();
+  const leafKeys = useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!defVar) continue;
+      if (defVar.type === definition.variableType.Object && defVar.fields) {
+        collectLeafKeys(defVar, manager, keys);
+      } else if (defVar.type === definition.variableType.Array && defVar.definition) {
+        const arrDef = resolveFieldRef(defVar.definition, manager);
+        if ((arrDef == null ? void 0 : arrDef.type) === definition.variableType.Object && (arrDef == null ? void 0 : arrDef.fields)) {
+          collectLeafKeys(arrDef, manager, keys);
+        }
+      }
+    }
+    return keys;
+  }, [definitions, manager]);
+  const leafLayers = useGraphStack(leafKeys.length ? manager : null, leafKeys);
+  const arrayItemKeys = useMemo(() => {
+    var _a;
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const resolveManager = parentManager ?? manager;
+    if (!resolveManager) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!(defVar == null ? void 0 : defVar._id)) continue;
+      if (defVar.type !== definition.variableType.Array || !defVar.definition)
+        continue;
+      const propValue = props[defVar._id];
+      if (!isVariableLink$1(propValue)) continue;
+      const parentVar = resolveManager.resolve(propValue);
+      if ((parentVar == null ? void 0 : parentVar.type) !== definition.variableType.Array) continue;
+      const items = parentVar.defaultValue;
+      if (!Array.isArray(items)) continue;
+      for (const item of items) {
+        if (isLink$1(item)) {
+          keys.push(item);
+          const resolved = resolveManager.resolve(item);
+          if ((resolved == null ? void 0 : resolved.value) && isObject(resolved.value) && ((_a = resolved.value) == null ? void 0 : _a._type)) {
+            const valueKey = keyOfEntity(resolved.value);
+            if (valueKey) keys.push(valueKey);
+          }
+        }
+      }
+    }
+    return keys;
+  }, [definitions, manager, parentManager, props, _dep]);
+  const arrayItemLayers = useGraphStack(
+    arrayItemKeys.length ? parentManager ?? manager : null,
+    arrayItemKeys
+  );
+  return useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return props;
+    const resolveManager = parentManager ?? manager;
+    const base = {};
+    for (const layer of 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.variableType.Object && defVar.fields) {
+        if (isObject(propValue)) {
+          flattenObjectFields(
+            defVar,
+            propValue,
+            manager,
+            expanded
+          );
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      if (defVar.type === definition.variableType.Array && defVar.definition) {
+        if (isVariableLink$1(propValue) && resolveManager) {
+          const parentVar = resolveManager.resolve(propValue);
+          if ((parentVar == null ? void 0 : parentVar.type) === definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
+            const { value: resolvedArray } = readVariable(propValue);
+            if (Array.isArray(resolvedArray)) {
+              const concreteItems = resolveArrayItems(
+                resolvedArray,
+                resolveManager
+              );
+              const childDef = resolveFieldRef(defVar.definition, manager);
+              const parentDef = resolveFieldRef(
+                parentVar.definition,
+                resolveManager
+              );
+              if ((childDef == null ? void 0 : childDef.type) === definition.variableType.Object && (childDef == null ? void 0 : childDef.fields) && (parentDef == null ? void 0 : parentDef.type) === definition.variableType.Object && (parentDef == null ? void 0 : parentDef.fields)) {
+                const mapping = buildFieldIdMapping(
+                  childDef,
+                  parentDef,
+                  manager,
+                  resolveManager
+                );
+                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+              } else {
+                expanded[defVar._id] = concreteItems;
+              }
+              continue;
+            }
+          }
+          expanded[defVar._id] = propValue;
+          continue;
+        }
+        expanded[defVar._id] = propValue;
+        continue;
+      }
+      expanded[defVar._id] = propValue;
+    }
+    for (const [key, value] of Object.entries(props)) {
+      if (!handledPropKeys.has(key) && !(key in expanded)) {
+        expanded[key] = value;
+      }
+    }
+    return { ...base, ...expanded };
+  }, [
+    leafLayers,
+    arrayItemLayers,
+    props,
+    manager,
+    parentManager,
+    definitions,
+    _dep
+  ]);
+};
 const CollectionItem = ({
   layer,
   manager,
@@ -1992,20 +2723,22 @@ const CollectionItem = ({
   ...restProps
 }) => {
   var _a;
-  const layerKey = keyOfEntity(layer);
+  keyOfEntity(layer);
   const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
-  const props = useExtractProps({
-    layerKey,
-    definitions: [sourceDefinition],
-    inputProps: isObject(value) ? {
-      // [definitionId]: layer.value,
-      ...value
-    } : {
-      [definitionId]: value
-    },
-    manager
-  });
+  const inputProps = {
+    [definitionId]: value
+  };
+  const props = cleanGraph(inputProps);
+  const definitions = useMemo(
+    () => sourceDefinition ? [sourceDefinition] : [],
+    [sourceDefinition]
+  );
+  const expandedProps = useExtractProps(props, manager, void 0, definitions);
+  const cssVars = useMemo(
+    () => toCssCustomProperties(expandedProps),
+    [expandedProps]
+  );
   return /* @__PURE__ */ jsx(
     Scope,
     {
@@ -2015,7 +2748,7 @@ const CollectionItem = ({
         type: definition.scopeTypes.CollectionItemScope,
         ...restProps,
         sourceDefinition,
-        value: props,
+        value: expandedProps,
         manager
       },
       children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
@@ -2023,7 +2756,7 @@ const CollectionItem = ({
         {
           style: {
             display: "contents",
-            ...getCssVariables(props ?? {})
+            ...cssVars
           },
           children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
         },
@@ -2139,24 +2872,18 @@ const Frame = ({
     }
   );
 };
-const useIsomorphicEffect = (callback, deps) => {
-  useEffect(callback, deps);
-  if (!isBrowser$1) {
-    callback();
-  }
-};
 const useCssChunk = (linkKey) => {
   const { manager } = useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
   const [enabled] = useLayerValue(linkKey, "enabled", { manager });
-  const styleSheet = useStyleSheet(manager);
-  const reset = useRef(noop);
-  useIsomorphicEffect(() => {
-    if (enabled && chunkId) {
-      reset.current = styleSheet.addCssChunk(chunkId);
-    }
-    return reset.current;
-  }, [enabled]);
+  const { addCssChunk } = useStyleSheet(manager);
+  useEffect(() => {
+    if (!enabled || !chunkId) return;
+    const cleanup = addCssChunk(chunkId);
+    return () => {
+      cleanup();
+    };
+  }, [enabled, chunkId, addCssChunk]);
 };
 const CssChunk = ({ linkKey }) => {
   useCssChunk(linkKey);
@@ -2170,23 +2897,18 @@ const useFragmentManager = (fragmentId, inputGlobalManager) => {
     getFragmentManager,
     queryFragmentManager
   } = useGlobalManager(inputGlobalManager);
-  const [loading, setLoading] = useState(false);
   const manager = getFragmentManager(fragmentId);
+  const loading = !!fragmentId && !manager;
   useEffect(() => {
-    (async () => {
-      if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
-        setLoading(true);
-        await queryFragmentManager(fragmentId);
-        setLoading(false);
-      }
-    })();
+    if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+      queryFragmentManager(fragmentId);
+    }
   }, [fragmentId, fragmentsGraph]);
   return {
     loading,
     manager,
     fragmentLayerKey: (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root,
     queryFragmentManager
-    // loadFragmentManager,
   };
 };
 const useFragmentChildren = (fragmentId) => {
@@ -2244,7 +2966,7 @@ const useFragment = (fragmentId, globalManager) => {
   const { properties: definitions } = useFragmentProperties(fragmentId);
   const scopes = useContext(ScopeContext);
   !(scopes == null ? void 0 : scopes.length);
-  const { addLayerStyle, addCssChunk, mount, unmount } = useStyleSheet(
+  const { addLayerStyle, mount, unmount } = useStyleSheet(
     fragmentContext.manager
   );
   if (fragmentContext.manager) {
@@ -2279,35 +3001,26 @@ const useFragment = (fragmentId, globalManager) => {
     definitions
   };
 };
-const FragmentInternal = ({
-  fragmentId,
-  globalManager,
-  pauseInteractions,
-  collectStyle,
-  FrameElement = Frame
-}) => {
-  const {
-    children,
-    fragmentContext,
-    hash,
-    chunkLinks,
-    isResize,
-    isTopFragment,
-    definitions,
-    layerKey
-  } = useFragment(fragmentId);
-  if (!fragmentContext.manager) return null;
-  return (
-    // <Scope
-    //   fragmentManager={fragmentContext.manager}
-    //   layerKey={layerKey}
-    //   value={{
-    //     type: definition.scopeTypes.FragmentScope,
-    //     manager: fragmentContext.manager,
-    //     definitions,
-    //   }}
-    // >
-    /* @__PURE__ */ jsxs("div", { "data-key": layerKey, className: hash, children: [
+const FragmentInternal = memo(
+  ({
+    fragmentId,
+    globalManager,
+    pauseInteractions,
+    collectStyle,
+    FrameElement = Frame
+  }) => {
+    const {
+      children,
+      fragmentContext,
+      hash,
+      chunkLinks,
+      isResize,
+      isTopFragment,
+      definitions,
+      layerKey
+    } = useFragment(fragmentId);
+    if (!fragmentContext.manager) return null;
+    return /* @__PURE__ */ jsxs("div", { "data-key": layerKey, className: hash, children: [
       chunkLinks.map((linkKey) => /* @__PURE__ */ jsx(CssChunk, { linkKey })),
       children.map((childLink) => {
         var _a;
@@ -2325,29 +3038,57 @@ const FragmentInternal = ({
           childLink
         );
       })
-    ] })
-  );
-};
+    ] });
+  }
+);
 const Fragment = (props) => {
   const currentGlobalManager = useContext(GlobalManagerContext);
   const { manager: resultGlobalManager } = useGlobalManager(
     props.globalManager
   );
   const { manager } = useFragmentManager(props.fragmentId, resultGlobalManager);
-  const Base = /* @__PURE__ */ jsx(FragmentContext.Provider, { value: { manager }, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
+  const fragmentContextValue = useMemo(() => ({ manager }), [manager]);
+  const Base = /* @__PURE__ */ jsx(FragmentContext.Provider, { value: fragmentContextValue, children: /* @__PURE__ */ jsx(FragmentInternal, { ...props }) });
   if (!currentGlobalManager) {
     return /* @__PURE__ */ jsx(GlobalManagerProvider, { value: resultGlobalManager, children: Base });
   }
   return Base;
 };
+const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
+  const fields = cleanGraph(objectVar.fields);
+  const result = {};
+  for (const [fieldName, fieldRef] of Object.entries(fields)) {
+    let fieldVar;
+    let fieldKey;
+    if (isVariableLink$1(fieldRef)) {
+      fieldKey = fieldRef;
+      fieldVar = manager == null ? void 0 : manager.resolve(fieldKey);
+    } else if (isObject(fieldRef) && (fieldRef == null ? void 0 : fieldRef._id)) {
+      fieldKey = keyOfEntity(fieldRef);
+      fieldVar = fieldRef;
+    }
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === definition.variableType.Object && fieldVar.fields) {
+      result[fieldName] = resolveObjectToConcreteValue(
+        fieldVar,
+        manager,
+        readVariable
+      );
+    } else {
+      const { value } = readVariable(fieldKey);
+      if (value != null) {
+        result[fieldName] = value;
+      }
+    }
+  }
+  return result;
+};
 const useInstanceProps = (instanceProps) => {
   const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
   const { manager: loadedManager } = useFragmentManager(
     isTopInstance ? instanceProps == null ? void 0 : instanceProps.fragmentId : null
   );
   const { manager: fragmentContextManager } = useContext(FragmentContext);
-  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
-  const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
@@ -2359,19 +3100,40 @@ const useInstanceProps = (instanceProps) => {
       ...localProps
     };
   }
-  const extractProps = useExtractProps({
-    definitions,
-    manager: fragmentManager,
-    inputProps
-  });
+  const extractProps = cleanGraph(inputProps);
+  const { readVariable } = useReadVariable();
+  let resolvedProps = extractProps;
+  if (!isTopInstance) {
+    resolvedProps = {};
+    for (const [key, value] of Object.entries(extractProps)) {
+      if (!isVariableLink$1(value)) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      const varLayer = fragmentManager == null ? void 0 : fragmentManager.resolve(value);
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.variableType.Array) {
+        resolvedProps[key] = value;
+        continue;
+      }
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.variableType.Object && (varLayer == null ? void 0 : varLayer.fields)) {
+        resolvedProps[key] = resolveObjectToConcreteValue(
+          varLayer,
+          fragmentManager,
+          readVariable
+        );
+        continue;
+      }
+      const { value: resolved } = readVariable(value);
+      resolvedProps[key] = resolved;
+    }
+  }
   useEffect(() => {
     if (isValue(instanceProps == null ? void 0 : instanceProps.props)) {
       setLocalProps(instanceProps.props);
     }
   }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
-    props: extractProps,
-    cssProps: getCssVariables(extractProps),
+    props: resolvedProps,
     onChangeProps: (variableId, value) => {
       var _a;
       setLocalProps((prev) => ({ ...prev, [variableId]: value }));
@@ -2389,7 +3151,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
@@ -2400,7 +3162,6 @@ const useInstance = (instanceProps) => {
     events,
     definitions,
     props,
-    cssProps,
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
@@ -2408,6 +3169,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 = {},
@@ -2415,13 +3192,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,
@@ -2434,52 +3210,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 = useMemo(
+    () => toCssCustomProperties(expandedProps),
+    [expandedProps]
+  );
+  useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
+  const scopeValue = useMemo(
+    () => ({
+      type: definition.scopeTypes.InstanceScope,
+      props: expandedProps,
+      definitions,
+      fragmentId,
+      documentManager: innerManager,
+      layerKey: instanceProps.layerKey,
+      onChangeProps
+    }),
+    [
+      expandedProps,
+      definitions,
+      fragmentId,
+      innerManager,
+      instanceProps.layerKey,
+      onChangeProps
+    ]
+  );
+  const instanceContextValue = useMemo(
+    () => ({
+      layerKey: instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      props: expandedProps
+    }),
+    [
+      instanceProps.layerKey,
+      definitions,
+      innerManager,
+      parentManager,
+      expandedProps
+    ]
+  );
   return /* @__PURE__ */ jsx(
     Scope,
     {
       fragmentManager: innerManager,
       layerKey: instanceProps.layerKey,
-      value: {
-        type: definition.scopeTypes.InstanceScope,
-        props,
-        definitions,
-        fragmentId,
-        documentManager: innerManager,
-        layerKey: instanceProps.layerKey,
-        onChangeProps
-      },
-      children: /* @__PURE__ */ jsx(
-        InstanceContext$1.Provider,
+      value: scopeValue,
+      children: /* @__PURE__ */ jsx(InstanceContext$1.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsx(
+        Tag,
         {
-          value: {
-            layerKey: instanceProps.layerKey,
-            definitions,
-            innerManager,
-            parentManager,
-            props
-          },
-          children: parentManager ? /* @__PURE__ */ jsx(
-            Tag,
-            {
-              className: classnames,
-              "data-key": instanceProps.layerKey,
-              style: { ...style, ...cssProps },
-              ...link.linkProps,
-              ...events,
-              children: /* @__PURE__ */ jsx(
-                Fragment,
-                {
-                  fragmentId,
-                  globalManager,
-                  FrameElement,
-                  pauseInteractions
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssProps }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+          className: classnames,
+          "data-key": instanceProps.layerKey,
+          style: { ...style, ...cssVars },
+          ...link.linkProps,
+          ...events,
+          children: /* @__PURE__ */ jsx(
             Fragment,
             {
               fragmentId,
@@ -2487,9 +3278,17 @@ const InstanceInitial = ({
               FrameElement,
               pauseInteractions
             }
-          ) })
+          )
         }
-      )
+      ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+        Fragment,
+        {
+          fragmentId,
+          globalManager,
+          FrameElement,
+          pauseInteractions
+        }
+      ) }) })
     }
   );
 };
@@ -2509,26 +3308,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] = 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 = 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]
   );
-  useEffect(() => {
-    (async () => {
-      const response = await queryArea(options.areaCode);
-      if (response) {
-        setAreaData(response);
-      }
-    })();
-  }, []);
   return {
     ...areaData,
     fragmentManager,
@@ -2537,28 +3334,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__ */ jsx(
+  const areaManager = useMemo(
+    () => createAreaManager({
+      areaId: areaData.areaId,
+      campaignId: areaData.campaignId,
+      variantId: areaData.variantId,
+      areaProperties: areaData.areaProperties
+    }),
+    [areaData.areaId]
+  );
+  return /* @__PURE__ */ jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsx(
     Scope,
     {
       fragmentManager: areaData.fragmentManager,
       layerKey: "Area",
       value: {
         type: definition.scopeTypes.AreaScope,
+        areaManager,
         ...areaData ?? {}
       },
       children: /* @__PURE__ */ jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props })
     }
-  );
+  ) });
 };
 const Area = (props) => {
   return "globalManager" in props ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) });
@@ -2585,6 +3384,8 @@ const useLayerCssOverride = (layerKey) => {
 };
 export {
   Area,
+  AreaManagerContext,
+  AreaManagerProvider,
   Collection,
   CssChunk,
   CustomRender,
@@ -2611,12 +3412,12 @@ export {
   cloneLayer,
   copyLayer,
   createLayer,
+  createSuspenseResource,
   declareFragmentProperty,
   defaultCustomRender,
   duplicateLayer,
   findBreakpoint,
   getAllParents,
-  getCssVariables,
   getHydratedData,
   getKey,
   getNormalizeLayer,
@@ -2624,6 +3425,7 @@ export {
   getOverriderByLayers,
   getParent,
   getStylesheetKey,
+  getSuspenseCache,
   hashGenerator,
   insertChildren,
   isBrowser,
@@ -2635,7 +3437,6 @@ export {
   isTopLevel,
   isVariableLink,
   layerFieldSetter,
-  loadFragmentManager,
   makeSnapshot,
   moveChildren,
   nodeWalker,
@@ -2644,6 +3445,7 @@ export {
   serializeData,
   setKey,
   spliceChildren,
+  toCssCustomProperties,
   transformCssValue,
   useArea,
   useCollection,
@@ -2661,7 +3463,6 @@ export {
   useLayerBorder,
   useLayerChildren,
   useLayerCssOverride,
-  useLayerCssVariable,
   useLayerDisplay,
   useLayerFlex,
   useLayerLayout,
@@ -2679,6 +3480,8 @@ export {
   useReadVariable,
   useReadVariables,
   useRenderTarget,
+  useResolvedLayer,
+  useResolvedLayerVariables,
   useTextAttributes,
   useTextContent,
   useTextHighlight,