@fragmentsx/render-react 1.5.3 → 1.6.0

package/dist/index.cjs.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const definition = require("@fragmentsx/definition");
 const jsxRuntime = require("react/jsx-runtime");
+const react$1 = require("@graph-state/react");
 const utils = require("@fragmentsx/utils");
 const core = require("@graph-state/core");
-const react$1 = require("@graph-state/react");
 const clientCore = require("@fragmentsx/client-core");
 const GlobalManagerContext = react.createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
@@ -14,12 +14,13 @@ const FragmentContext = react.createContext({
 });
 const defaultCustomRender = (layerKey, node) => node;
 const CustomRender = react.createContext(defaultCustomRender);
-const InstanceContext$1 = react.createContext({
+const InstanceContext = react.createContext({
   layerKey: null,
   parentManager: null,
   innerManager: null,
   props: {},
-  definitions: []
+  definitions: [],
+  onChangeProps: null
 });
 const RenderTargetContext = react.createContext(
   definition.definition.renderTarget.document
@@ -662,8 +663,8 @@ function hashGenerator(layerKey) {
   return /^[0-9]/.test(raw) ? `h${raw}` : raw;
 }
 const transformCssValue = (value) => {
-  var _a;
-  if ((_a = value == null ? void 0 : value.startsWith) == null ? void 0 : _a.call(value, "http")) {
+  var _a, _b;
+  if (((_a = value == null ? void 0 : value.startsWith) == null ? void 0 : _a.call(value, "http")) || ((_b = value == null ? void 0 : value.startsWith) == null ? void 0 : _b.call(value, "data:"))) {
     value = `url("${value}")`;
   }
   return value;
@@ -863,178 +864,135 @@ const useResolvedLayer = (layerKey, options) => {
   }
   return { layerKey: key, rawLayer, layer, isOverride };
 };
-function useForceUpdate() {
-  return react.useReducer(() => ({}), {});
-}
-const EMPTY_RESOLVED = {
-  values: {},
-  cssVariableValues: {},
-  rawValues: {}
-};
-const extractVariableValue$1 = (input, variableId) => {
-  if (utils.isObject(input)) {
+const extractVariableValue = (input, variableId) => {
+  if (input && typeof input === "object") {
     if (variableId in input) return input[variableId];
     for (const key in input) {
       if (input.hasOwnProperty(key)) {
-        const result = extractVariableValue$1(input[key], variableId);
+        const result = extractVariableValue(input[key], variableId);
         if (result !== void 0) return result;
       }
     }
   }
   return void 0;
 };
-function deepMerge$1(a, b) {
-  if (!utils.isObject(a) || !utils.isObject(b)) return a;
-  const result = { ...b };
-  for (const [key, value] of Object.entries(a)) {
-    if (key in result && typeof result[key] === "object" && typeof value === "object") {
-      result[key] = deepMerge$1(value, result[key]);
-    } else {
-      result[key] = value;
+const useReadVariables = (variableKeys, customManager) => {
+  var _a, _b, _c, _d;
+  const filterKeys = variableKeys.filter(definition.isVariableLink);
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const { props: instanceProps } = react.useContext(InstanceContext);
+  const globalManager = react.useContext(GlobalManagerContext);
+  const areaManager = react.useContext(AreaManagerContext);
+  const scopes = react.useContext(ScopeContext);
+  const resultManager = customManager ?? ((_a = react.useContext(InstanceContext)) == null ? void 0 : _a.innerManager) ?? fragmentManager;
+  const variableLayers = react$1.useGraphStack(resultManager, filterKeys, {
+    pause: !filterKeys.length || !resultManager,
+    selector: (graph) => graph ? utils.pick(graph, "_id", "defaultValue", "required") : graph
+  });
+  react$1.useGraph(globalManager, (_b = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _b.key);
+  react$1.useGraph(areaManager, (_c = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _c.key);
+  const globalPropertyKeys = react.useMemo(() => {
+    if (!(globalManager == null ? void 0 : globalManager.$properties)) return [];
+    return filterKeys.filter((key) => globalManager.resolve(key));
+  }, [filterKeys, globalManager]);
+  const areaPropertyKeys = react.useMemo(() => {
+    if (!(areaManager == null ? void 0 : areaManager.$properties)) return [];
+    return filterKeys.filter((key) => areaManager.resolve(key));
+  }, [filterKeys, areaManager]);
+  react$1.useGraphStack(
+    globalPropertyKeys.length ? globalManager : null,
+    globalPropertyKeys
+  );
+  react$1.useGraphStack(areaPropertyKeys.length ? areaManager : null, areaPropertyKeys);
+  const lastCollectionItem = (_d = scopes == null ? void 0 : scopes.findLast) == null ? void 0 : _d.call(
+    scopes,
+    (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
+  );
+  return filterKeys.map((variableKey, index) => {
+    var _a2;
+    const layer = variableLayers[index] ?? null;
+    const { _id: propertyId } = layer ?? {};
+    let collectionItemProp = void 0;
+    if (lastCollectionItem && propertyId) {
+      collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_a2 = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _a2._id) === propertyId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, propertyId);
+    }
+    const instanceProp = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? null;
+    const areaLayer = areaManager == null ? void 0 : areaManager.resolve(variableKey);
+    const areaProp = (areaLayer == null ? void 0 : areaLayer.defaultValue) ?? null;
+    const globalLayer = globalManager == null ? void 0 : globalManager.resolve(variableKey);
+    const globalProp = (globalLayer == null ? void 0 : globalLayer.defaultValue) ?? null;
+    const required = (layer == null ? void 0 : layer.required) ?? false;
+    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
+    const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? areaProp ?? globalProp ?? null;
+    const resultValue = required ? currentValue : currentValue ?? defaultValue;
+    if (definition.isVariableLink(resultValue)) {
+      const refKey = resultValue;
+      const refAreaLayer = areaManager == null ? void 0 : areaManager.resolve(refKey);
+      const refGlobalLayer = globalManager == null ? void 0 : globalManager.resolve(refKey);
+      const refFragmentLayer = resultManager == null ? void 0 : resultManager.resolve(refKey);
+      const refValue = (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
+      return {
+        value: refValue,
+        layer: refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
+      };
     }
-  }
-  return result;
-}
-const useResolvedLayerVariables = (layer, rawLayer, customScopes) => {
-  var _a;
-  const contextScopes = react.useContext(ScopeContext);
-  const scopes = customScopes ?? contextScopes;
-  const subscriptions = react.useRef([]);
-  const [dep, forceUpdate] = useForceUpdate();
-  react.useEffect(() => {
-    const controller = new AbortController();
-    let ready = false;
-    const update = () => {
-      if (!ready) return;
-      forceUpdate();
+    return {
+      value: resultValue,
+      layer: layer ?? areaLayer ?? globalLayer ?? null
     };
-    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 EMPTY_RESOLVED = {
+  values: {},
+  cssVariableValues: {},
+  rawValues: {}
+};
+const collectVariableKeys = (layer) => {
+  const keys = [];
+  if (!layer) return keys;
+  for (const [, value] of Object.entries(layer)) {
+    if (definition.isVariableLink(value)) {
+      keys.push(value);
+    } else if (utils.isObject(value) && !definition.isVariableLink(value)) {
+      for (const [, nestedValue] of Object.entries(
+        value
+      )) {
+        if (definition.isVariableLink(nestedValue)) {
+          keys.push(nestedValue);
+        }
+      }
+    }
   }
+  return keys;
+};
+const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
+  var _a;
+  const variableKeys = collectVariableKeys(layer);
+  const resolved = useReadVariables(variableKeys);
+  if (!layer) return EMPTY_RESOLVED;
+  const resolvedByKey = {};
+  variableKeys.forEach((key, i) => {
+    var _a2;
+    resolvedByKey[key] = ((_a2 = resolved[i]) == null ? void 0 : _a2.value) ?? null;
+  });
   const values = {};
   const cssVariableValues = {};
   const rawValues = {};
-  const readVariable = (variableKey) => {
-    var _a2, _b, _c;
-    const variableId = (_a2 = core.entityOfKey(variableKey)) == null ? void 0 : _a2._id;
-    if (!definition.isVariableLink(variableKey)) {
-      return { value: null, layer: null };
-    }
-    let instanceScope = scopes.findLast(
-      (scope) => {
-        var _a3;
-        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a3 = scope.documentManager) == null ? void 0 : _a3.resolve(variableKey));
-      }
-    );
-    if (!instanceScope) {
-      instanceScope = scopes.find(
-        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
-      );
-    }
-    const resolveVariableLayer = (manager, variableLink, customProps) => {
-      var _a3, _b2;
-      const variableLayer2 = (_a3 = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a3.layer;
-      if (!variableLayer2) return null;
-      if ((variableLayer2 == null ? void 0 : variableLayer2.type) === definition.definition.variableType.Array) {
-        const definitionLayer = manager.resolve(variableLayer2 == null ? void 0 : variableLayer2.definition);
-        if (!((_b2 = variableLayer2 == null ? void 0 : variableLayer2.defaultValue) == null ? void 0 : _b2.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
-          return variableLayer2;
-        const extractVariableDefaultValue = (mgr, varEntity) => {
-          const varLayer = mgr.resolve(varEntity);
-          if ((varLayer == null ? void 0 : varLayer.type) !== definition.definition.variableType.Object)
-            return varLayer == null ? void 0 : varLayer.defaultValue;
-          return Object.values((varLayer == null ? void 0 : varLayer.fields) ?? {}).reduce(
-            (acc, fieldLink) => {
-              var _a4;
-              if (!!fieldLink && definition.isVariableLink(fieldLink)) {
-                const _id = (_a4 = core.entityOfKey(fieldLink)) == null ? void 0 : _a4._id;
-                if (_id) acc[_id] = extractVariableDefaultValue(mgr, fieldLink);
-              }
-              return acc;
-            },
-            {}
-          );
-        };
-        const definitionDefaultValue = extractVariableDefaultValue(
-          manager,
-          definitionLayer
-        );
-        const customValue = customProps == null ? void 0 : customProps[variableLayer2 == null ? void 0 : variableLayer2._id];
-        return {
-          ...variableLayer2,
-          defaultValue: variableLayer2.defaultValue.map(
-            (item, index) => {
-              const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
-              return deepMerge$1(
-                customItemValue ? { ...item, ...customItemValue } : item,
-                definitionDefaultValue
-              );
-            }
-          )
-        };
-      }
-      return variableLayer2;
-    };
-    const variableLayer = resolveVariableLayer(
-      instanceScope == null ? void 0 : instanceScope.documentManager,
-      variableKey
-    );
-    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey) {
-      subscriptions.current.push({
-        manager: instanceScope.documentManager,
-        key: variableKey
-      });
-    }
-    let instanceProp = variableId ? (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId] : void 0;
-    if (Array.isArray(instanceProp)) {
-      instanceProp = instanceProp.map(
-        (rawProp, index) => {
-          var _a3;
-          return deepMerge$1(rawProp, (_a3 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a3.at(index));
-        }
-      );
-    }
-    const lastCollectionItem = scopes.findLast(
-      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
-    );
-    resolveVariableLayer(
-      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.value
-    );
-    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue$1(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
-    const currentValue = variableKey === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
-    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
-    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
-    if (definition.isVariableLink(resultValue)) {
-      return readVariable(resultValue);
-    }
-    return { value: resultValue, layer: variableLayer };
-  };
   const resolveField = (fieldPath, value, raw) => {
     var _a2;
     rawValues[fieldPath] = raw;
     if (definition.isVariableLink(value)) {
-      const resolved = readVariable(value);
-      values[fieldPath] = resolved.value ?? value;
+      const resolvedValue = resolvedByKey[value] ?? value;
+      values[fieldPath] = resolvedValue;
       const variableId = (_a2 = core.entityOfKey(value)) == null ? void 0 : _a2._id;
       cssVariableValues[fieldPath] = `var(--${variableId}, ${transformCssValue(
-        resolved.value ?? value
+        resolvedValue
       )})`;
     } else {
       values[fieldPath] = value;
       cssVariableValues[fieldPath] = transformCssValue(value);
     }
   };
-  subscriptions.current = [];
   for (const [field, value] of Object.entries(layer)) {
     resolveField(field, value, rawLayer == null ? void 0 : rawLayer[field]);
     if (utils.isObject(value) && !definition.isVariableLink(value)) {
@@ -1059,188 +1017,6 @@ const useRenderTarget = () => {
     isDocument: renderTarget === definition.definition.renderTarget.document
   };
 };
-const useReadVariables = (variableKeys) => {
-  const filterKeys = variableKeys.filter(definition.isVariableLink);
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const { props, innerManager, layerKey } = react.useContext(InstanceContext);
-  const resultManager = innerManager ?? fragmentManager;
-  const variableLayers = react$1.useGraphStack(
-    !!filterKeys.length ? resultManager : null,
-    filterKeys,
-    {
-      selector: (graph) => graph ? utils.pick(graph, "defaultValue", "required") : graph
-    }
-  );
-  return variableLayers.map((layer) => {
-    const { _id: propertyId } = layer ?? {};
-    const currentValue = (props == null ? void 0 : props[propertyId]) ?? null;
-    const required = (layer == null ? void 0 : layer.required) ?? false;
-    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? defaultValue;
-    return {
-      value: resultValue,
-      layer
-    };
-  });
-};
-const extractVariableValue = (input, variableId) => {
-  if (utils.isObject(input)) {
-    if (variableId in input) {
-      return input[variableId];
-    }
-    for (let key in input) {
-      if (input.hasOwnProperty(key)) {
-        const result = extractVariableValue(input[key], variableId);
-        if (result !== void 0) {
-          return result;
-        }
-      }
-    }
-  }
-  return void 0;
-};
-function deepMerge(a, b) {
-  if (!utils.isObject(a) || !utils.isObject(b)) return a;
-  const result = { ...b };
-  for (const [key, value] of Object.entries(a)) {
-    if (key in result && typeof result[key] === "object" && typeof value === "object") {
-      result[key] = deepMerge(value, result[key]);
-    } else {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-const useReadVariable = (variableKey, customScopes) => {
-  const contextScopes = react.useContext(ScopeContext);
-  const scopes = customScopes ?? contextScopes;
-  const subscriptions = react.useRef([]);
-  const [dep, forceUpdate] = useForceUpdate();
-  react.useEffect(() => {
-    const controller = new AbortController();
-    let ready = false;
-    const update = () => {
-      if (!ready) return;
-      forceUpdate();
-    };
-    for (const { manager, key } of subscriptions.current) {
-      manager.subscribe(key, update, { signal: controller.signal });
-    }
-    ready = true;
-    return () => controller.abort();
-  });
-  const extractVariableDefaultValue = (manager, variableEntity) => {
-    const variableLayer = manager.resolve(variableEntity);
-    if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.definition.variableType.Object)
-      return variableLayer == null ? void 0 : variableLayer.defaultValue;
-    return Object.values((variableLayer == null ? void 0 : variableLayer.fields) ?? {}).reduce(
-      (acc, fieldLink) => {
-        var _a;
-        if (!!fieldLink && definition.isVariableLink(fieldLink)) {
-          const _id = (_a = core.entityOfKey(fieldLink)) == null ? void 0 : _a._id;
-          if (_id) {
-            acc[_id] = extractVariableDefaultValue(manager, fieldLink);
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  };
-  const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a, _b;
-    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
-    if (!variableLayer) return null;
-    if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
-      const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
-        return variableLayer;
-      const definitionDefaultValue = extractVariableDefaultValue(
-        manager,
-        definitionLayer
-      );
-      const customValue = customProps == null ? void 0 : customProps[variableLayer == null ? void 0 : variableLayer._id];
-      return {
-        ...variableLayer,
-        defaultValue: (variableLayer == null ? void 0 : variableLayer.defaultValue).map((item, index) => {
-          const customItemValue = Array.isArray(customValue) ? customValue.at(index) : null;
-          return deepMerge(
-            customItemValue ? { ...item, ...customItemValue } : item,
-            definitionDefaultValue
-          );
-        })
-      };
-    }
-    return variableLayer;
-  };
-  const readVariable = (variableKey2) => {
-    var _a, _b, _c;
-    const variableId = (_a = core.entityOfKey(variableKey2)) == null ? void 0 : _a._id;
-    if (!definition.isVariableLink(variableKey2)) {
-      return {
-        value: null,
-        layer: null
-      };
-    }
-    let instanceScope = scopes.findLast(
-      (scope) => {
-        var _a2;
-        return (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
-      }
-    );
-    if (!instanceScope) {
-      instanceScope = scopes.find(
-        (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
-      );
-    }
-    const variableLayer = resolveVariableLayer(
-      instanceScope == null ? void 0 : instanceScope.documentManager,
-      variableKey2
-    );
-    if ((instanceScope == null ? void 0 : instanceScope.documentManager) && variableKey2) {
-      subscriptions.current.push({
-        manager: instanceScope.documentManager,
-        key: variableKey2
-      });
-    }
-    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
-    if (Array.isArray(instanceProp)) {
-      instanceProp = instanceProp.map(
-        (rawProp, index) => {
-          var _a2;
-          return deepMerge(rawProp, (_a2 = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a2.at(index));
-        }
-      );
-    }
-    const lastCollectionItem = scopes.findLast(
-      (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
-    );
-    resolveVariableLayer(
-      lastCollectionItem == null ? void 0 : lastCollectionItem.manager,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
-      lastCollectionItem == null ? void 0 : lastCollectionItem.value
-    );
-    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
-    const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
-    const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
-    const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
-    const resultValue = required ? currentValue : currentValue ?? collectionItemProp ?? defaultValue;
-    if (definition.isVariableLink(resultValue)) {
-      return readVariable(resultValue);
-    }
-    return {
-      value: resultValue,
-      layer: variableLayer
-    };
-  };
-  subscriptions.current = [];
-  const result = readVariable(variableKey);
-  return {
-    ...result,
-    readVariable,
-    _dep: dep
-  };
-};
 const useLayersValue = (layerKeys, fieldKey, options) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
@@ -1252,12 +1028,21 @@ const useLayersValue = (layerKeys, fieldKey, options) => {
     // selector: (data) => (data ? pick(data, fieldKey) : data),
   });
   const normalizeLayers = useNormalizeLayers(keys, resultManager, options);
-  const { readVariable } = useReadVariable(null, options == null ? void 0 : options.scopes);
+  const variableKeysFromLayers = normalizeLayers.map((nl) => utils.get(nl.layer, fieldKey)).filter(definition.isVariableLink);
+  const resolvedVariables = useReadVariables(
+    variableKeysFromLayers,
+    resultManager
+  );
+  const resolvedByKey = {};
+  variableKeysFromLayers.forEach((key, i) => {
+    var _a;
+    resolvedByKey[key] = ((_a = resolvedVariables[i]) == null ? void 0 : _a.value) ?? null;
+  });
   return normalizeLayers.map((normalizedLayer) => {
-    var _a, _b;
+    var _a;
     const rawValue = utils.get(normalizedLayer.rawLayer, fieldKey);
     const layerValue = utils.get(normalizedLayer.layer, fieldKey);
-    const variableValue = (_a = readVariable(layerValue)) == null ? void 0 : _a.value;
+    const variableValue = definition.isVariableLink(layerValue) ? resolvedByKey[layerValue] ?? null : null;
     const currentValue = variableValue ?? layerValue;
     const isInherit = isInheritField(
       resultManager,
@@ -1282,15 +1067,15 @@ const useLayersValue = (layerKeys, fieldKey, options) => {
       );
     };
     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;
+      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[normalizedLayer.layerKey]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
       return tempValue;
     };
     const updateValue = (value, options2) => {
       setter(value, options2);
     };
     const isVariable = definition.isVariableLink(rawValue ?? layerValue);
-    const variableId = isVariable ? (_b = core.entityOfKey(layerValue)) == null ? void 0 : _b._id : null;
+    const variableId = isVariable ? (_a = core.entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
     return [
       currentValue,
       updateValue,
@@ -1307,7 +1092,7 @@ const useLayersValue = (layerKeys, fieldKey, options) => {
   });
 };
 const useLayerValue = (layerKey, fieldKey, options) => {
-  var _a;
+  var _a, _b;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
   if (!resultManager) {
@@ -1320,7 +1105,11 @@ const useLayerValue = (layerKey, fieldKey, options) => {
   const { layer, rawLayer } = useNormalizeLayer(key, resultManager, options);
   const rawValue = utils.get(rawLayer, fieldKey);
   const layerValue = utils.get(layer, fieldKey);
-  const { value: variableValue } = useReadVariable(layerValue, options == null ? void 0 : options.scopes);
+  const variableResults = useReadVariables(
+    definition.isVariableLink(layerValue) ? [layerValue] : [],
+    resultManager
+  );
+  const variableValue = ((_a = variableResults[0]) == null ? void 0 : _a.value) ?? null;
   const currentValue = variableValue ?? layerValue;
   const isInherit = isInheritField(resultManager, key, fieldKey);
   const isOverride = !isInherit && !isPartOfPrimary(resultManager, key);
@@ -1337,8 +1126,8 @@ const useLayerValue = (layerKey, fieldKey, options) => {
   }, [updateLayerData]);
   const restore = react.useCallback(
     (fallbackValue) => {
-      var _a2, _b, _c;
-      const tempValue = ((_c = (_b = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
+      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[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
       updateLayerData({ [fieldKey]: tempValue });
       return tempValue;
     },
@@ -1351,7 +1140,7 @@ const useLayerValue = (layerKey, fieldKey, options) => {
     [setter]
   );
   const isVariable = definition.isVariableLink(rawValue ?? layerValue);
-  const variableId = isVariable ? (_a = core.entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
+  const variableId = isVariable ? (_b = core.entityOfKey(layerValue)) == null ? void 0 : _b._id : null;
   return [
     currentValue,
     updateValue,
@@ -1366,6 +1155,20 @@ const useLayerValue = (layerKey, fieldKey, options) => {
     }
   ];
 };
+const useReadVariable = (variableKey, _customScopes) => {
+  const keys = variableKey && definition.isVariableLink(variableKey) ? [variableKey] : [];
+  const results = useReadVariables(keys);
+  const result = results[0] ?? { value: null, layer: null };
+  return {
+    ...result,
+    readVariable: () => {
+      throw new Error(
+        "readVariable() removed — используй useReadVariables"
+      );
+    },
+    _dep: 0
+  };
+};
 const useLayerChildren = (layerKey, customManager) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const [layerData] = react$1.useGraph(customManager ?? fragmentManager, layerKey, {
@@ -1415,6 +1218,7 @@ const useLayerLink = (layerKey) => {
   };
 };
 const useLayerVariableValue = (layerKey, fieldKey, manager) => {
+  var _a;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const resultManager = manager ?? fragmentManager;
   const [layerValue, updateValue, layerInfo] = useLayerValue(
@@ -1422,9 +1226,11 @@ const useLayerVariableValue = (layerKey, fieldKey, manager) => {
     fieldKey,
     resultManager
   );
-  const { value: instanceValue } = useReadVariable(
-    (layerInfo == null ? void 0 : layerInfo.isVariable) ? layerValue : null
+  const variableResults = useReadVariables(
+    (layerInfo == null ? void 0 : layerInfo.isVariable) && definition.isVariableLink(layerValue) ? [layerValue] : [],
+    resultManager
   );
+  const instanceValue = ((_a = variableResults[0]) == null ? void 0 : _a.value) ?? null;
   return [
     (layerInfo == null ? void 0 : layerInfo.isVariable) ? instanceValue : layerValue,
     updateValue,
@@ -1525,7 +1331,7 @@ const calcLayerSizeValue = (resolved, vars, sizeType, parentResolved, instanceVa
 };
 const useLayerSizeValue = (layerKey, sizeType) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
+  const { layerKey: instanceLayerKey } = react.useContext(InstanceContext);
   const { isDocument } = useRenderTarget();
   const isTop = isTopLevel(fragmentManager, layerKey);
   const isPartOfInstance = !!instanceLayerKey;
@@ -1637,7 +1443,7 @@ const calcLayerPosition = (resolved, vars, parentResolved, instanceResolved, ins
   };
 };
 const useLayerPosition = (layerKey) => {
-  const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
+  const { layerKey: instanceLayerKey } = react.useContext(InstanceContext);
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const isTop = isTopLevel(fragmentManager, layerKey);
   const { isDocument } = useRenderTarget();
@@ -1981,7 +1787,7 @@ const useLayerStyles = (layerKey) => {
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = react.useContext(FragmentContext);
-    const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
+    const { layerKey: instanceLayerKey } = react.useContext(InstanceContext);
     const { isDocument } = useRenderTarget();
     const resolved = useResolvedLayer(layerKey);
     const vars = useResolvedLayerVariables(resolved.layer, resolved.rawLayer);
@@ -2122,16 +1928,14 @@ const useTextContent = (layerKey, manager) => {
     fragmentManager
   );
   const variables = extractVariablesFromHtml(content);
-  const { readVariable } = useReadVariable();
-  react$1.useGraphStack(
-    fragmentManager,
-    variables.map((variable) => variable.variableKey)
-  );
+  const variableKeys = variables.map((variable) => variable.variableKey);
+  const resolvedVariables = useReadVariables(variableKeys);
   let nextContent = content;
-  variables.forEach((variable) => {
+  variables.forEach((variable, index) => {
+    var _a;
     nextContent = nextContent.replace(
       variable.fullMatch,
-      readVariable(variable.variableKey).value ?? ""
+      ((_a = resolvedVariables[index]) == null ? void 0 : _a.value) ?? ""
     );
   });
   if (typeof nextContent === "string") {
@@ -2219,31 +2023,31 @@ const useGlobalManager = (globalManager) => {
   };
 };
 const useLayerInteractions = (layerKey, options) => {
+  var _a;
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const scopes = react.useContext(ScopeContext);
-  const areaScope = scopes.find(
+  const areaScope = (_a = scopes == null ? void 0 : scopes.find) == null ? void 0 : _a.call(
+    scopes,
     (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.AreaScope
   );
-  const instanceScope = scopes.find(
-    (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
-  );
+  const { onChangeProps } = react.useContext(InstanceContext);
   const [interactionLinks] = useLayerValue(layerKey, "interactions");
   const interactionOns = useLayersValue(interactionLinks, "on");
   const interactionEvents = useLayersValue(interactionLinks, "event");
   const interactions = (interactionLinks ?? []).map((linkKey, index) => {
-    var _a, _b;
+    var _a2, _b;
     return {
       linkKey,
-      on: (_a = interactionOns == null ? void 0 : interactionOns.at(index)) == null ? void 0 : _a.at(0),
+      on: (_a2 = interactionOns == null ? void 0 : interactionOns.at(index)) == null ? void 0 : _a2.at(0),
       event: (_b = interactionEvents == null ? void 0 : interactionEvents.at(index)) == null ? void 0 : _b.at(0)
     };
   });
   const fireEvent = react.useCallback(
     (eventLink) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      const eventType = (_a = core.entityOfKey(eventLink)) == null ? void 0 : _a._type;
+      var _a2, _b, _c, _d, _e, _f, _g;
+      const eventType = (_a2 = core.entityOfKey(eventLink)) == null ? void 0 : _a2._type;
       const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
       console.log(scopes, eventLink, eventType, eventValue);
       if (eventType === definition.definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
@@ -2260,7 +2064,7 @@ const useLayerInteractions = (layerKey, options) => {
         const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_f = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _f.defaultValue);
         if (definition.isVariableLink(target) && utils.isValue(value)) {
           const targetId = (_g = core.entityOfKey(target)) == null ? void 0 : _g._id;
-          (_h = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _h.call(instanceScope, targetId, value);
+          onChangeProps == null ? void 0 : onChangeProps(targetId, value);
         }
       }
     },
@@ -2575,7 +2379,27 @@ const remapArrayItems = (items, mapping) => {
   });
 };
 const useExtractProps = (props, manager, parentManager, definitions) => {
-  const { readVariable, _dep } = useReadVariable();
+  const arrayVariableKeys = react.useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if (!(defVar == null ? void 0 : defVar._id)) continue;
+      if (defVar.type !== definition.definition.variableType.Array || !defVar.definition)
+        continue;
+      const propValue = props[defVar._id];
+      if (definition.isVariableLink(propValue)) {
+        keys.push(propValue);
+      }
+    }
+    return keys;
+  }, [definitions, manager, props]);
+  const arrayResolvedResults = useReadVariables(arrayVariableKeys);
+  const arrayResolvedByKey = {};
+  arrayVariableKeys.forEach((key, i) => {
+    var _a;
+    arrayResolvedByKey[key] = ((_a = arrayResolvedResults[i]) == null ? void 0 : _a.value) ?? null;
+  });
   const leafKeys = react.useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
     const keys = [];
@@ -2623,7 +2447,7 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
     }
     return keys;
-  }, [definitions, manager, parentManager, props, _dep]);
+  }, [definitions, manager, parentManager, props]);
   const arrayItemLayers = react$1.useGraphStack(
     arrayItemKeys.length ? parentManager ?? manager : null,
     arrayItemKeys
@@ -2662,7 +2486,7 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         if (definition.isVariableLink(propValue) && resolveManager) {
           const parentVar = resolveManager.resolve(propValue);
           if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
-            const { value: resolvedArray } = readVariable(propValue);
+            const resolvedArray = arrayResolvedByKey[propValue];
             if (Array.isArray(resolvedArray)) {
               const concreteItems = resolveArrayItems(
                 resolvedArray,
@@ -2704,11 +2528,11 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
   }, [
     leafLayers,
     arrayItemLayers,
+    arrayResolvedResults,
     props,
     manager,
     parentManager,
-    definitions,
-    _dep
+    definitions
   ]);
 };
 const CollectionItem = ({
@@ -2895,8 +2719,10 @@ const useFragmentManager = (fragmentId, inputGlobalManager) => {
   } = useGlobalManager(inputGlobalManager);
   react$1.useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$fragments) == null ? void 0 : _a.key, {
     selector: (state) => {
-      var _a2;
-      return ((_a2 = state == null ? void 0 : state.managers) == null ? void 0 : _a2[fragmentId]) ?? null;
+      return {
+        ...state,
+        managers: fragmentId ? utils.pick(state.managers, fragmentId) : state.managers
+      };
     }
   });
   const manager = getFragmentManager(fragmentId);
@@ -2914,7 +2740,7 @@ const useFragmentManager = (fragmentId, inputGlobalManager) => {
   };
 };
 const useFragmentChildren = (fragmentId) => {
-  const { layerKey: instanceLayerKey } = react.useContext(InstanceContext$1);
+  const { layerKey: instanceLayerKey } = react.useContext(InstanceContext);
   const { manager, fragmentLayerKey } = useFragmentManager(fragmentId);
   const children = useLayerChildren(fragmentLayerKey, manager);
   const [resizeChildren, setResizeChildren] = react.useState(null);
@@ -2957,7 +2783,7 @@ const useFragmentCssChunks = (fragmentId) => {
 };
 const useFragment = (fragmentId, globalManager) => {
   var _a, _b;
-  const instanceContext = react.useContext(InstanceContext$1);
+  const instanceContext = react.useContext(InstanceContext);
   const fragmentContext = useFragmentManager(fragmentId);
   const { setRef, children, isResize, primary } = useFragmentChildren(fragmentId);
   const chunkLinks = useFragmentCssChunks(fragmentId);
@@ -3056,7 +2882,64 @@ const Fragment = (props) => {
   }
   return Base;
 };
-const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
+const resolveFromManagers = (key, ...managers) => {
+  for (const mgr of managers) {
+    if (!mgr) continue;
+    const layer = mgr.resolve(key, { deep: true });
+    if (layer == null ? void 0 : layer.type) return { layer, manager: mgr };
+  }
+  return { layer: null, manager: null };
+};
+const collectAllVariableKeys = (extractProps, fragmentManager, globalManager, areaManager) => {
+  const keys = [];
+  const collectFromObject = (obj) => {
+    for (const value of Object.values(obj)) {
+      if (definition.isVariableLink(value)) {
+        keys.push(value);
+      } else if (utils.isObject(value)) {
+        collectFromObject(value);
+      }
+    }
+  };
+  const collectObjectFields = (objectVar, manager) => {
+    const fields = utils.cleanGraph(objectVar.fields);
+    for (const fieldRef of Object.values(fields)) {
+      let fieldKey;
+      let fieldVar;
+      if (definition.isVariableLink(fieldRef)) {
+        fieldKey = fieldRef;
+        fieldVar = manager == null ? void 0 : manager.resolve(fieldKey);
+      } else if (utils.isObject(fieldRef) && (fieldRef == null ? void 0 : fieldRef._id)) {
+        fieldKey = core.keyOfEntity(fieldRef);
+        fieldVar = fieldRef;
+      }
+      if (!fieldVar || !fieldKey) continue;
+      if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields) {
+        collectObjectFields(fieldVar, manager);
+      } else {
+        keys.push(fieldKey);
+      }
+    }
+  };
+  for (const value of Object.values(extractProps)) {
+    if (definition.isVariableLink(value)) {
+      keys.push(value);
+      const { layer: varLayer, manager: varManager } = resolveFromManagers(
+        value,
+        fragmentManager,
+        globalManager,
+        areaManager
+      );
+      if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Object && (varLayer == null ? void 0 : varLayer.fields)) {
+        collectObjectFields(varLayer, varManager);
+      }
+    } else if (utils.isObject(value)) {
+      collectFromObject(value);
+    }
+  }
+  return keys;
+};
+const resolveObjectToConcreteValueFromMap = (objectVar, manager, resolvedByKey) => {
   const fields = utils.cleanGraph(objectVar.fields);
   const result = {};
   for (const [fieldName, fieldRef] of Object.entries(fields)) {
@@ -3071,13 +2954,13 @@ const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
     }
     if (!fieldVar || !fieldKey) continue;
     if (fieldVar.type === definition.definition.variableType.Object && fieldVar.fields) {
-      result[fieldName] = resolveObjectToConcreteValue(
+      result[fieldName] = resolveObjectToConcreteValueFromMap(
         fieldVar,
         manager,
-        readVariable
+        resolvedByKey
       );
     } else {
-      const { value } = readVariable(fieldKey);
+      const value = resolvedByKey[fieldKey];
       if (value != null) {
         result[fieldName] = value;
       }
@@ -3085,12 +2968,30 @@ const resolveObjectToConcreteValue = (objectVar, manager, readVariable) => {
   }
   return result;
 };
+const deepResolveObjectValuesFromMap = (obj, resolvedByKey) => {
+  const result = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (definition.isVariableLink(value)) {
+      result[key] = resolvedByKey[value];
+    } else if (utils.isObject(value)) {
+      result[key] = deepResolveObjectValuesFromMap(
+        value,
+        resolvedByKey
+      );
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+};
 const useInstanceProps = (instanceProps) => {
   const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
   const { manager: loadedManager } = useFragmentManager(
     isTopInstance ? instanceProps == null ? void 0 : instanceProps.fragmentId : null
   );
   const { manager: fragmentContextManager } = react.useContext(FragmentContext);
+  const globalManager = react.useContext(GlobalManagerContext);
+  const areaManager = react.useContext(AreaManagerContext);
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = react$1.useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
@@ -3103,30 +3004,52 @@ const useInstanceProps = (instanceProps) => {
     };
   }
   const extractProps = utils.cleanGraph(inputProps);
-  const { readVariable } = useReadVariable();
+  const variableKeys = !isTopInstance ? collectAllVariableKeys(
+    extractProps,
+    fragmentManager,
+    globalManager,
+    areaManager
+  ) : [];
+  const resolvedVariableResults = useReadVariables(variableKeys);
+  const resolvedByKey = {};
+  variableKeys.forEach((key, i) => {
+    var _a;
+    resolvedByKey[key] = ((_a = resolvedVariableResults[i]) == null ? void 0 : _a.value) ?? null;
+  });
   let resolvedProps = extractProps;
   if (!isTopInstance) {
     resolvedProps = {};
     for (const [key, value] of Object.entries(extractProps)) {
       if (!definition.isVariableLink(value)) {
-        resolvedProps[key] = value;
+        if (utils.isObject(value)) {
+          resolvedProps[key] = deepResolveObjectValuesFromMap(
+            value,
+            resolvedByKey
+          );
+        } else {
+          resolvedProps[key] = value;
+        }
         continue;
       }
-      const varLayer = fragmentManager == null ? void 0 : fragmentManager.resolve(value);
+      const { layer: varLayer, manager: varManager } = resolveFromManagers(
+        value,
+        fragmentManager,
+        globalManager,
+        areaManager
+      );
       if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Array) {
         resolvedProps[key] = value;
         continue;
       }
       if ((varLayer == null ? void 0 : varLayer.type) === definition.definition.variableType.Object && (varLayer == null ? void 0 : varLayer.fields)) {
-        resolvedProps[key] = resolveObjectToConcreteValue(
+        resolvedProps[key] = resolveObjectToConcreteValueFromMap(
           varLayer,
-          fragmentManager,
-          readVariable
+          varManager,
+          resolvedByKey
         );
         continue;
       }
-      const { value: resolved } = readVariable(value);
-      resolvedProps[key] = resolved;
+      resolvedProps[key] = resolvedByKey[value] ?? value;
     }
   }
   react.useEffect(() => {
@@ -3187,6 +3110,45 @@ const useSuspenseLoadArea = (globalManager, areaCode, skip) => {
   if (valueOrPromise == null) return null;
   return createSuspenseResource(`area:${areaCode}`, valueOrPromise, cache).read();
 };
+const collectPropertyCssVars = (manager, result) => {
+  if (!(manager == null ? void 0 : manager.$properties)) return;
+  const keys = manager.$properties.getPropertyKeys() ?? [];
+  const processField = (fieldLayer) => {
+    if (!(fieldLayer == null ? void 0 : fieldLayer._id)) return;
+    if (fieldLayer.type === definition.definition.variableType.Object && fieldLayer.fields) {
+      for (const [key, ref] of Object.entries(fieldLayer.fields)) {
+        if (key === "_type" || key === "_id") continue;
+        const child = utils.isObject(ref) ? ref : manager.resolve(ref);
+        if (child) processField(child);
+      }
+      return;
+    }
+    if (fieldLayer.defaultValue != null) {
+      result[`--${fieldLayer._id}`] = String(fieldLayer.defaultValue);
+    }
+  };
+  for (const key of keys) {
+    const layer = manager.resolve(key, { deep: true });
+    if (layer) processField(layer);
+  }
+};
+const useManagerCssProperties = () => {
+  var _a, _b, _c, _d;
+  const globalManager = react.useContext(GlobalManagerContext);
+  const areaManager = react.useContext(AreaManagerContext);
+  react$1.useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _a.key);
+  react$1.useGraph(areaManager, (_b = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _b.key);
+  const globalKeys = ((_c = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _c.getPropertyKeys()) ?? [];
+  const areaKeys = ((_d = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _d.getPropertyKeys()) ?? [];
+  react$1.useGraphStack(globalKeys.length ? globalManager : null, globalKeys);
+  react$1.useGraphStack(areaKeys.length ? areaManager : null, areaKeys);
+  return react.useMemo(() => {
+    const vars = {};
+    collectPropertyCssVars(globalManager, vars);
+    collectPropertyCssVars(areaManager, vars);
+    return vars;
+  }, [globalManager, areaManager, globalKeys.length, areaKeys.length]);
+};
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
@@ -3218,71 +3180,43 @@ const InstanceInitial = ({
     parentManager,
     definitions
   );
-  const cssVars = react.useMemo(
+  const propsCssVars = react.useMemo(
     () => toCssCustomProperties(expandedProps),
     [expandedProps]
   );
-  useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
-  const scopeValue = react.useMemo(
-    () => ({
-      type: definition.definition.scopeTypes.InstanceScope,
-      props: expandedProps,
-      definitions,
-      fragmentId,
-      documentManager: innerManager,
-      layerKey: instanceProps.layerKey,
-      onChangeProps
-    }),
-    [
-      expandedProps,
-      definitions,
-      fragmentId,
-      innerManager,
-      instanceProps.layerKey,
-      onChangeProps
-    ]
+  const managerCssVars = useManagerCssProperties();
+  const cssVars = react.useMemo(
+    () => ({ ...managerCssVars, ...propsCssVars }),
+    [managerCssVars, propsCssVars]
   );
+  useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
   const instanceContextValue = react.useMemo(
     () => ({
       layerKey: instanceProps.layerKey,
       definitions,
       innerManager,
       parentManager,
-      props: expandedProps
+      props: expandedProps,
+      onChangeProps
     }),
     [
       instanceProps.layerKey,
       definitions,
       innerManager,
       parentManager,
-      expandedProps
+      expandedProps,
+      onChangeProps
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Scope,
+  return /* @__PURE__ */ jsxRuntime.jsx(InstanceContext.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
     {
-      fragmentManager: innerManager,
-      layerKey: instanceProps.layerKey,
-      value: scopeValue,
-      children: /* @__PURE__ */ jsxRuntime.jsx(InstanceContext$1.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
-        Tag,
-        {
-          className: classnames,
-          "data-key": instanceProps.layerKey,
-          style: { ...style, ...cssVars },
-          ...link.linkProps,
-          ...events,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            Fragment,
-            {
-              fragmentId,
-              globalManager,
-              FrameElement,
-              pauseInteractions
-            }
-          )
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+      className: classnames,
+      "data-key": instanceProps.layerKey,
+      style: { ...style, ...cssVars },
+      ...link.linkProps,
+      ...events,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         Fragment,
         {
           fragmentId,
@@ -3290,18 +3224,26 @@ const InstanceInitial = ({
           FrameElement,
           pauseInteractions
         }
-      ) }) })
+      )
     }
-  );
+  ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Fragment,
+    {
+      fragmentId,
+      globalManager,
+      FrameElement,
+      pauseInteractions
+    }
+  ) }) });
 };
 const Instance = (props) => {
-  return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Test" }), children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(
     RenderTargetProvider,
     {
       value: props.renderTarget ?? definition.definition.renderTarget.document,
       children: /* @__PURE__ */ jsxRuntime.jsx(InstanceInitial, { ...props })
     }
-  ) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Test" }), children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(
     RenderTargetProvider,
     {
       value: props.renderTarget ?? definition.definition.renderTarget.document,
@@ -3512,7 +3454,7 @@ exports.Frame = Frame;
 exports.GlobalManagerContext = GlobalManagerContext;
 exports.GlobalManagerProvider = GlobalManagerProvider;
 exports.Instance = Instance;
-exports.InstanceContext = InstanceContext$1;
+exports.InstanceContext = InstanceContext;
 exports.RenderTargetContext = RenderTargetContext;
 exports.RenderTargetProvider = RenderTargetProvider;
 exports.Scope = Scope;