@fragmentsx/render-react 1.6.0 → 1.6.2

package/dist/hooks/layer/useLayerValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerValue.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAGV,OAAO,EAER,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI/D,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,aACd,OAAO,YACP,MAAM,YACN,oBAAoB,UAkF/B,CAAC"}
+{"version":3,"file":"useLayerValue.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAGV,OAAO,EAER,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI/D,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,aACd,OAAO,YACP,MAAM,YACN,oBAAoB,UAmF/B,CAAC"}

package/dist/hooks/layer/useReadVariables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReadVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariables.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAuBrE,eAAO,MAAM,gBAAgB,iBACb,OAAO,EAAE,kBACP,UAAU,GAAG,IAAI;;;GA2GlC,CAAC"}
+{"version":3,"file":"useReadVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariables.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAwBrE,eAAO,MAAM,gBAAgB,iBACb,OAAO,EAAE,kBACP,UAAU,GAAG,IAAI;;;GAoHlC,CAAC"}

package/dist/hooks/utils/useExtractProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExtractProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useExtractProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAoMrE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACpB,UAAU,kBACJ,UAAU,gBACZ,OAAO,EAAE,KACtB,MAAM,CAAC,MAAM,EAAE,OAAO,CA8NxB,CAAC"}
+{"version":3,"file":"useExtractProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useExtractProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AA0OrE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACpB,UAAU,kBACJ,UAAU,gBACZ,OAAO,EAAE,KACtB,MAAM,CAAC,MAAM,EAAE,OAAO,CAwQxB,CAAC"}

package/dist/hooks/utils/useLayerInteractions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerInteractions.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useLayerInteractions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AASzD,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAwFtC,CAAC"}
+{"version":3,"file":"useLayerInteractions.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useLayerInteractions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AASzD,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAiGtC,CAAC"}

package/dist/index.cjs.js

@@ -1,4 +1,7 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const definition = require("@fragmentsx/definition");
@@ -885,10 +888,14 @@ const useReadVariables = (variableKeys, customManager) => {
   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
-  });
+  const safeFilterKeys = resultManager ? filterKeys : [];
+  const variableLayers = react$1.useGraphStack(
+    safeFilterKeys.length ? resultManager : null,
+    safeFilterKeys,
+    {
+      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(() => {
@@ -909,12 +916,13 @@ const useReadVariables = (variableKeys, customManager) => {
     (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
   );
   return filterKeys.map((variableKey, index) => {
-    var _a2;
-    const layer = variableLayers[index] ?? null;
+    var _a2, _b2;
+    variableLayers[index];
+    const layer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? 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);
+      collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_b2 = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _b2._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);
@@ -1902,6 +1910,7 @@ const useLayerStyles = (layerKey) => {
     return {};
   }
 };
+const MAX_NESTING_DEPTH = 5;
 function extractVariablesFromHtml(html) {
   if (!html) return [];
   const regex = /<span(?=\s)(?=(?:[^>]*?\s)?class="[^"]*variable[^"]*")(?=(?:[^>]*?\s)?data-type="mention")(?=(?:[^>]*?\s)?data-id="([^"]+)")[^>]*>.*?<\/span>/gi;
@@ -1920,24 +1929,75 @@ function extractVariablesFromHtml(html) {
   }
   return mentions;
 }
+function collectNestedVariableKeys(content, instanceProps, fragmentManager, maxDepth = MAX_NESTING_DEPTH) {
+  var _a, _b;
+  const allKeys = [];
+  const visited = /* @__PURE__ */ new Set();
+  let currentContents = [content];
+  for (let depth = 0; depth < maxDepth; depth++) {
+    const nextContents = [];
+    for (const html of currentContents) {
+      const variables = extractVariablesFromHtml(html);
+      for (const variable of variables) {
+        const keyStr = variable.variableKey;
+        if (visited.has(keyStr)) continue;
+        visited.add(keyStr);
+        allKeys.push(variable.variableKey);
+        const propertyId = (_a = core.entityOfKey(variable.variableKey)) == null ? void 0 : _a._id;
+        const value = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? ((_b = fragmentManager == null ? void 0 : fragmentManager.resolve(variable.variableKey)) == null ? void 0 : _b.defaultValue) ?? null;
+        if (typeof value === "string") {
+          nextContents.push(value);
+        }
+      }
+    }
+    if (nextContents.length === 0) break;
+    currentContents = nextContents;
+  }
+  return allKeys;
+}
+function resolveNestedContent(content, resolvedMap, maxDepth = MAX_NESTING_DEPTH) {
+  let result = content;
+  const visited = /* @__PURE__ */ new Set();
+  for (let depth = 0; depth < maxDepth; depth++) {
+    const variables = extractVariablesFromHtml(result);
+    if (variables.length === 0) break;
+    let hasCycle = false;
+    const depthKeys = /* @__PURE__ */ new Set();
+    for (const variable of variables) {
+      const key = variable.variableKey;
+      if (visited.has(key)) {
+        console.warn(`Circular variable reference detected: ${key}`);
+        hasCycle = true;
+        continue;
+      }
+      depthKeys.add(key);
+      result = result.replace(
+        variable.fullMatch,
+        String(resolvedMap.get(key) ?? "")
+      );
+    }
+    for (const key of depthKeys) {
+      visited.add(key);
+    }
+    if (hasCycle) break;
+  }
+  return result;
+}
 const useTextContent = (layerKey, manager) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const [content, , contentInfo] = useLayerValue(
-    layerKey,
-    "content",
-    fragmentManager
-  );
-  const variables = extractVariablesFromHtml(content);
-  const variableKeys = variables.map((variable) => variable.variableKey);
-  const resolvedVariables = useReadVariables(variableKeys);
-  let nextContent = content;
-  variables.forEach((variable, index) => {
+  const { props: instanceProps } = react.useContext(InstanceContext);
+  const [content] = useLayerValue(layerKey, "content", fragmentManager);
+  const allVariableKeys = react.useMemo(
+    () => collectNestedVariableKeys(content, instanceProps, fragmentManager),
+    [content, instanceProps, fragmentManager]
+  );
+  const allResolved = useReadVariables(allVariableKeys);
+  const resolvedMap = /* @__PURE__ */ new Map();
+  allVariableKeys.forEach((key, index) => {
     var _a;
-    nextContent = nextContent.replace(
-      variable.fullMatch,
-      ((_a = resolvedVariables[index]) == null ? void 0 : _a.value) ?? ""
-    );
+    resolvedMap.set(key, ((_a = allResolved[index]) == null ? void 0 : _a.value) ?? "");
   });
+  let nextContent = resolveNestedContent(content, resolvedMap);
   if (typeof nextContent === "string") {
     nextContent = nextContent.replace(
       /\{\{(.*?)}}/,
@@ -2046,14 +2106,21 @@ const useLayerInteractions = (layerKey, options) => {
   });
   const fireEvent = react.useCallback(
     (eventLink) => {
-      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);
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      const isVariableGoal = typeof eventLink === "number";
+      if (isVariableGoal) {
+        if (!areaScope) return null;
+        (_b = (_a2 = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a2.reachGoal) == null ? void 0 : _b.call(_a2, {
+          goalId: eventLink,
+          ...utils.pick(areaScope, "variantId", "campaignId", "areaId")
+        });
+        return;
+      }
+      const eventType = (_c = core.entityOfKey(eventLink)) == null ? void 0 : _c._type;
+      const eventValue = (_d = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _d.layer;
       if (eventType === definition.definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
         if (!areaScope) return null;
-        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, {
+        (_f = (_e = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _e.reachGoal) == null ? void 0 : _f.call(_e, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...utils.pick(areaScope, "variantId", "campaignId", "areaId")
         });
@@ -2061,9 +2128,9 @@ const useLayerInteractions = (layerKey, options) => {
       if (eventType === definition.definition.nodes.MutateEvent) {
         const target = eventValue == null ? void 0 : eventValue.target;
         const targetLayer = getNormalizeLayer(target, fragmentManager);
-        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_f = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _f.defaultValue);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_g = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _g.defaultValue);
         if (definition.isVariableLink(target) && utils.isValue(value)) {
-          const targetId = (_g = core.entityOfKey(target)) == null ? void 0 : _g._id;
+          const targetId = (_h = core.entityOfKey(target)) == null ? void 0 : _h._id;
           onChangeProps == null ? void 0 : onChangeProps(targetId, value);
         }
       }
@@ -2260,7 +2327,12 @@ const useCollection = (layerKey, options) => {
   });
   const sourceValues = react$1.useGraphStack(fragmentManager, sourceValue ?? []);
   const resultValues = (sourceValue ?? []).map(
-    (initValue, index) => (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
+    (initValue, index) => (
+      // Если initValue — объект (пришёл из пропсов через useReadVariables),
+      // он уже содержит актуальные значения и имеет приоритет.
+      // Если initValue — ссылка (строка), используем graph-версию для реактивности.
+      utils.isObject(initValue) ? initValue : (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
+    )
   );
   return {
     source,
@@ -2348,6 +2420,7 @@ const buildFieldIdMapping = (childDef, parentDef, childManager, parentManager) =
       continue;
     }
     mapping[parentFieldVar._id] = childFieldVar._id;
+    mapping[fieldName] = childFieldVar._id;
   }
   return mapping;
 };
@@ -2378,7 +2451,28 @@ const remapArrayItems = (items, mapping) => {
     return remapped;
   });
 };
+const fillArrayItemDefaults = (items, parentDef, manager) => {
+  if (!(parentDef == null ? void 0 : parentDef.fields)) return items;
+  const fields = utils.cleanGraph(parentDef.fields);
+  return items.map((item) => {
+    const filled = { ...item };
+    let changed = false;
+    for (const [fieldName, fieldRef] of Object.entries(fields)) {
+      const fieldVar = resolveFieldRef(fieldRef, manager);
+      if (!fieldVar) continue;
+      if (filled[fieldName] !== void 0) continue;
+      if (fieldVar._id && filled[fieldVar._id] !== void 0) continue;
+      if (fieldVar.defaultValue !== void 0) {
+        filled[fieldName] = fieldVar.defaultValue;
+        changed = true;
+      }
+    }
+    return changed ? filled : item;
+  });
+};
 const useExtractProps = (props, manager, parentManager, definitions) => {
+  const areaManager = react.useContext(AreaManagerContext);
+  const globalManager = react.useContext(GlobalManagerContext);
   const arrayVariableKeys = react.useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
     const keys = [];
@@ -2397,8 +2491,9 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
   const arrayResolvedResults = useReadVariables(arrayVariableKeys);
   const arrayResolvedByKey = {};
   arrayVariableKeys.forEach((key, i) => {
-    var _a;
+    var _a, _b;
     arrayResolvedByKey[key] = ((_a = arrayResolvedResults[i]) == null ? void 0 : _a.value) ?? null;
+    ((_b = arrayResolvedResults[i]) == null ? void 0 : _b.layer) ?? null;
   });
   const leafKeys = react.useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
@@ -2418,12 +2513,12 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     return keys;
   }, [definitions, manager]);
   const leafLayers = react$1.useGraphStack(leafKeys.length ? manager : null, leafKeys);
-  const arrayItemKeys = react.useMemo(() => {
+  const { arrayItemKeys, arrayItemManager } = react.useMemo(() => {
     var _a;
-    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
-    const resolveManager = parentManager ?? manager;
-    if (!resolveManager) return [];
+    if (!manager || !(definitions == null ? void 0 : definitions.length))
+      return { arrayItemKeys: [], arrayItemManager: null };
     const keys = [];
+    let itemManager = null;
     for (const defKey of definitions) {
       const defVar = manager.resolve(defKey);
       if (!(defVar == null ? void 0 : defVar._id)) continue;
@@ -2431,14 +2526,17 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         continue;
       const propValue = props[defVar._id];
       if (!definition.isVariableLink(propValue)) continue;
-      const parentVar = resolveManager.resolve(propValue);
+      const resolveManager = parentManager ?? manager;
+      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
       if ((parentVar == null ? void 0 : parentVar.type) !== definition.definition.variableType.Array) continue;
       const items = parentVar.defaultValue;
       if (!Array.isArray(items)) continue;
+      if (ownerManager) itemManager = ownerManager;
       for (const item of items) {
         if (definition.isLink(item)) {
           keys.push(item);
-          const resolved = resolveManager.resolve(item);
+          const resolved = ownerManager == null ? void 0 : ownerManager.resolve(item);
           if ((resolved == null ? void 0 : resolved.value) && utils.isObject(resolved.value) && ((_a = resolved.value) == null ? void 0 : _a._type)) {
             const valueKey = core.keyOfEntity(resolved.value);
             if (valueKey) keys.push(valueKey);
@@ -2446,13 +2544,14 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         }
       }
     }
-    return keys;
-  }, [definitions, manager, parentManager, props]);
+    return { arrayItemKeys: keys, arrayItemManager: itemManager };
+  }, [definitions, manager, parentManager, areaManager, globalManager, props]);
   const arrayItemLayers = react$1.useGraphStack(
-    arrayItemKeys.length ? parentManager ?? manager : null,
+    arrayItemKeys.length ? arrayItemManager ?? parentManager ?? manager : null,
     arrayItemKeys
   );
   return react.useMemo(() => {
+    var _a;
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return props;
     const resolveManager = parentManager ?? manager;
     const base = {};
@@ -2483,28 +2582,29 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         continue;
       }
       if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
-        if (definition.isVariableLink(propValue) && resolveManager) {
-          const parentVar = resolveManager.resolve(propValue);
+        if (definition.isVariableLink(propValue)) {
+          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
           if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
             const resolvedArray = arrayResolvedByKey[propValue];
             if (Array.isArray(resolvedArray)) {
-              const concreteItems = resolveArrayItems(
-                resolvedArray,
-                resolveManager
-              );
+              const itemResolver = parentVarManager ?? resolveManager;
+              const concreteItems = itemResolver ? resolveArrayItems(resolvedArray, itemResolver) : [];
               const childDef = resolveFieldRef(defVar.definition, manager);
-              const parentDef = resolveFieldRef(
-                parentVar.definition,
-                resolveManager
-              );
+              const parentDef = parentVarManager ? resolveFieldRef(parentVar.definition, parentVarManager) : utils.isObject(parentVar.definition) && ((_a = parentVar.definition) == null ? void 0 : _a._id) ? parentVar.definition : null;
               if ((childDef == null ? void 0 : childDef.type) === definition.definition.variableType.Object && (childDef == null ? void 0 : childDef.fields) && (parentDef == null ? void 0 : parentDef.type) === definition.definition.variableType.Object && (parentDef == null ? void 0 : parentDef.fields)) {
+                const filledItems = fillArrayItemDefaults(
+                  concreteItems,
+                  parentDef,
+                  parentVarManager ?? resolveManager
+                );
                 const mapping = buildFieldIdMapping(
                   childDef,
                   parentDef,
                   manager,
-                  resolveManager
+                  parentVarManager ?? resolveManager
                 );
-                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+                expanded[defVar._id] = remapArrayItems(filledItems, mapping);
               } else {
                 expanded[defVar._id] = concreteItems;
               }
@@ -2532,6 +2632,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     props,
     manager,
     parentManager,
+    areaManager,
+    globalManager,
     definitions
   ]);
 };
@@ -3377,6 +3479,24 @@ const useArea = (areaCode, options) => {
   }
   return asyncState;
 };
+class AreaErrorBoundary extends react.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { hasError: false });
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error("[fragments] Area error:", error, info.componentStack);
+    }
+  }
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
 const AreaInitial = (areaProps) => {
   var _a;
   const { data: areaData } = useArea(areaProps.areaCode, {
@@ -3391,20 +3511,23 @@ const AreaInitial = (areaProps) => {
     areaData == null ? void 0 : areaData.fragmentId,
     globalManager
   );
-  const resultProps = react.useMemo(
-    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(areaProps == null ? void 0 : areaProps.props) ?? {} }),
-    [areaData, areaProps]
-  );
-  if (!areaData) return null;
+  const resultProps = react.useMemo(() => {
+    const baseProps = (areaData == null ? void 0 : areaData.props) ?? {};
+    if (typeof (areaProps == null ? void 0 : areaProps.props) === "function") {
+      return { ...baseProps, ...areaProps.props(baseProps) };
+    }
+    return { ...baseProps, ...(areaProps == null ? void 0 : areaProps.props) ?? {} };
+  }, [areaData, areaProps]);
   const areaManager = react.useMemo(
     () => clientCore.createAreaManager({
-      areaId: areaData.areaId,
-      campaignId: areaData.campaignId,
-      variantId: areaData.variantId,
-      areaProperties: areaData.areaProperties
+      areaId: areaData == null ? void 0 : areaData.areaId,
+      campaignId: areaData == null ? void 0 : areaData.campaignId,
+      variantId: areaData == null ? void 0 : areaData.variantId,
+      areaProperties: areaData == null ? void 0 : areaData.areaProperties
     }),
-    [areaData.areaId]
+    [areaData == null ? void 0 : areaData.areaId]
   );
+  if (!areaData) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
@@ -3420,7 +3543,7 @@ const AreaInitial = (areaProps) => {
   ) });
 };
 const Area = (props) => {
-  return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) });
+  return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(AreaErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AreaErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) }) });
 };
 function cssToJsStyle(cssKey) {
   return cssKey.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

package/dist/index.es.js

@@ -1,4 +1,7 @@
-import { createContext, useContext, useMemo, useCallback, useEffect, useState, useRef, memo, Suspense } from "react";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createContext, useContext, useMemo, useCallback, useEffect, useState, useRef, memo, Suspense, Component } 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 { useGraph, useGraphStack } from "@graph-state/react";
@@ -883,10 +886,14 @@ const useReadVariables = (variableKeys, customManager) => {
   const areaManager = useContext(AreaManagerContext);
   const scopes = useContext(ScopeContext);
   const resultManager = customManager ?? ((_a = useContext(InstanceContext)) == null ? void 0 : _a.innerManager) ?? fragmentManager;
-  const variableLayers = useGraphStack(resultManager, filterKeys, {
-    pause: !filterKeys.length || !resultManager,
-    selector: (graph) => graph ? pick(graph, "_id", "defaultValue", "required") : graph
-  });
+  const safeFilterKeys = resultManager ? filterKeys : [];
+  const variableLayers = useGraphStack(
+    safeFilterKeys.length ? resultManager : null,
+    safeFilterKeys,
+    {
+      selector: (graph) => graph ? pick(graph, "_id", "defaultValue", "required") : graph
+    }
+  );
   useGraph(globalManager, (_b = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _b.key);
   useGraph(areaManager, (_c = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _c.key);
   const globalPropertyKeys = useMemo(() => {
@@ -907,12 +914,13 @@ const useReadVariables = (variableKeys, customManager) => {
     (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.CollectionItemScope
   );
   return filterKeys.map((variableKey, index) => {
-    var _a2;
-    const layer = variableLayers[index] ?? null;
+    var _a2, _b2;
+    variableLayers[index];
+    const layer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
     const { _id: propertyId } = layer ?? {};
     let collectionItemProp = void 0;
     if (lastCollectionItem && propertyId) {
-      collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_a2 = 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);
+      collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_b2 = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _b2._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);
@@ -1900,6 +1908,7 @@ const useLayerStyles = (layerKey) => {
     return {};
   }
 };
+const MAX_NESTING_DEPTH = 5;
 function extractVariablesFromHtml(html) {
   if (!html) return [];
   const regex = /<span(?=\s)(?=(?:[^>]*?\s)?class="[^"]*variable[^"]*")(?=(?:[^>]*?\s)?data-type="mention")(?=(?:[^>]*?\s)?data-id="([^"]+)")[^>]*>.*?<\/span>/gi;
@@ -1918,24 +1927,75 @@ function extractVariablesFromHtml(html) {
   }
   return mentions;
 }
+function collectNestedVariableKeys(content, instanceProps, fragmentManager, maxDepth = MAX_NESTING_DEPTH) {
+  var _a, _b;
+  const allKeys = [];
+  const visited = /* @__PURE__ */ new Set();
+  let currentContents = [content];
+  for (let depth = 0; depth < maxDepth; depth++) {
+    const nextContents = [];
+    for (const html of currentContents) {
+      const variables = extractVariablesFromHtml(html);
+      for (const variable of variables) {
+        const keyStr = variable.variableKey;
+        if (visited.has(keyStr)) continue;
+        visited.add(keyStr);
+        allKeys.push(variable.variableKey);
+        const propertyId = (_a = entityOfKey(variable.variableKey)) == null ? void 0 : _a._id;
+        const value = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? ((_b = fragmentManager == null ? void 0 : fragmentManager.resolve(variable.variableKey)) == null ? void 0 : _b.defaultValue) ?? null;
+        if (typeof value === "string") {
+          nextContents.push(value);
+        }
+      }
+    }
+    if (nextContents.length === 0) break;
+    currentContents = nextContents;
+  }
+  return allKeys;
+}
+function resolveNestedContent(content, resolvedMap, maxDepth = MAX_NESTING_DEPTH) {
+  let result = content;
+  const visited = /* @__PURE__ */ new Set();
+  for (let depth = 0; depth < maxDepth; depth++) {
+    const variables = extractVariablesFromHtml(result);
+    if (variables.length === 0) break;
+    let hasCycle = false;
+    const depthKeys = /* @__PURE__ */ new Set();
+    for (const variable of variables) {
+      const key = variable.variableKey;
+      if (visited.has(key)) {
+        console.warn(`Circular variable reference detected: ${key}`);
+        hasCycle = true;
+        continue;
+      }
+      depthKeys.add(key);
+      result = result.replace(
+        variable.fullMatch,
+        String(resolvedMap.get(key) ?? "")
+      );
+    }
+    for (const key of depthKeys) {
+      visited.add(key);
+    }
+    if (hasCycle) break;
+  }
+  return result;
+}
 const useTextContent = (layerKey, manager) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
-  const [content, , contentInfo] = useLayerValue(
-    layerKey,
-    "content",
-    fragmentManager
-  );
-  const variables = extractVariablesFromHtml(content);
-  const variableKeys = variables.map((variable) => variable.variableKey);
-  const resolvedVariables = useReadVariables(variableKeys);
-  let nextContent = content;
-  variables.forEach((variable, index) => {
+  const { props: instanceProps } = useContext(InstanceContext);
+  const [content] = useLayerValue(layerKey, "content", fragmentManager);
+  const allVariableKeys = useMemo(
+    () => collectNestedVariableKeys(content, instanceProps, fragmentManager),
+    [content, instanceProps, fragmentManager]
+  );
+  const allResolved = useReadVariables(allVariableKeys);
+  const resolvedMap = /* @__PURE__ */ new Map();
+  allVariableKeys.forEach((key, index) => {
     var _a;
-    nextContent = nextContent.replace(
-      variable.fullMatch,
-      ((_a = resolvedVariables[index]) == null ? void 0 : _a.value) ?? ""
-    );
+    resolvedMap.set(key, ((_a = allResolved[index]) == null ? void 0 : _a.value) ?? "");
   });
+  let nextContent = resolveNestedContent(content, resolvedMap);
   if (typeof nextContent === "string") {
     nextContent = nextContent.replace(
       /\{\{(.*?)}}/,
@@ -2044,14 +2104,21 @@ const useLayerInteractions = (layerKey, options) => {
   });
   const fireEvent = useCallback(
     (eventLink) => {
-      var _a2, _b, _c, _d, _e, _f, _g;
-      const eventType = (_a2 = entityOfKey(eventLink)) == null ? void 0 : _a2._type;
-      const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
-      console.log(scopes, eventLink, eventType, eventValue);
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      const isVariableGoal = typeof eventLink === "number";
+      if (isVariableGoal) {
+        if (!areaScope) return null;
+        (_b = (_a2 = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a2.reachGoal) == null ? void 0 : _b.call(_a2, {
+          goalId: eventLink,
+          ...pick(areaScope, "variantId", "campaignId", "areaId")
+        });
+        return;
+      }
+      const eventType = (_c = entityOfKey(eventLink)) == null ? void 0 : _c._type;
+      const eventValue = (_d = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _d.layer;
       if (eventType === definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
         if (!areaScope) return null;
-        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, {
+        (_f = (_e = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _e.reachGoal) == null ? void 0 : _f.call(_e, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...pick(areaScope, "variantId", "campaignId", "areaId")
         });
@@ -2059,9 +2126,9 @@ 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) ?? ((_f = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _f.defaultValue);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_g = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _g.defaultValue);
         if (isVariableLink$1(target) && isValue(value)) {
-          const targetId = (_g = entityOfKey(target)) == null ? void 0 : _g._id;
+          const targetId = (_h = entityOfKey(target)) == null ? void 0 : _h._id;
           onChangeProps == null ? void 0 : onChangeProps(targetId, value);
         }
       }
@@ -2258,7 +2325,12 @@ const useCollection = (layerKey, options) => {
   });
   const sourceValues = useGraphStack(fragmentManager, sourceValue ?? []);
   const resultValues = (sourceValue ?? []).map(
-    (initValue, index) => (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
+    (initValue, index) => (
+      // Если initValue — объект (пришёл из пропсов через useReadVariables),
+      // он уже содержит актуальные значения и имеет приоритет.
+      // Если initValue — ссылка (строка), используем graph-версию для реактивности.
+      isObject(initValue) ? initValue : (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
+    )
   );
   return {
     source,
@@ -2346,6 +2418,7 @@ const buildFieldIdMapping = (childDef, parentDef, childManager, parentManager) =
       continue;
     }
     mapping[parentFieldVar._id] = childFieldVar._id;
+    mapping[fieldName] = childFieldVar._id;
   }
   return mapping;
 };
@@ -2376,7 +2449,28 @@ const remapArrayItems = (items, mapping) => {
     return remapped;
   });
 };
+const fillArrayItemDefaults = (items, parentDef, manager) => {
+  if (!(parentDef == null ? void 0 : parentDef.fields)) return items;
+  const fields = cleanGraph(parentDef.fields);
+  return items.map((item) => {
+    const filled = { ...item };
+    let changed = false;
+    for (const [fieldName, fieldRef] of Object.entries(fields)) {
+      const fieldVar = resolveFieldRef(fieldRef, manager);
+      if (!fieldVar) continue;
+      if (filled[fieldName] !== void 0) continue;
+      if (fieldVar._id && filled[fieldVar._id] !== void 0) continue;
+      if (fieldVar.defaultValue !== void 0) {
+        filled[fieldName] = fieldVar.defaultValue;
+        changed = true;
+      }
+    }
+    return changed ? filled : item;
+  });
+};
 const useExtractProps = (props, manager, parentManager, definitions) => {
+  const areaManager = useContext(AreaManagerContext);
+  const globalManager = useContext(GlobalManagerContext);
   const arrayVariableKeys = useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
     const keys = [];
@@ -2395,8 +2489,9 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
   const arrayResolvedResults = useReadVariables(arrayVariableKeys);
   const arrayResolvedByKey = {};
   arrayVariableKeys.forEach((key, i) => {
-    var _a;
+    var _a, _b;
     arrayResolvedByKey[key] = ((_a = arrayResolvedResults[i]) == null ? void 0 : _a.value) ?? null;
+    ((_b = arrayResolvedResults[i]) == null ? void 0 : _b.layer) ?? null;
   });
   const leafKeys = useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
@@ -2416,12 +2511,12 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     return keys;
   }, [definitions, manager]);
   const leafLayers = useGraphStack(leafKeys.length ? manager : null, leafKeys);
-  const arrayItemKeys = useMemo(() => {
+  const { arrayItemKeys, arrayItemManager } = useMemo(() => {
     var _a;
-    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
-    const resolveManager = parentManager ?? manager;
-    if (!resolveManager) return [];
+    if (!manager || !(definitions == null ? void 0 : definitions.length))
+      return { arrayItemKeys: [], arrayItemManager: null };
     const keys = [];
+    let itemManager = null;
     for (const defKey of definitions) {
       const defVar = manager.resolve(defKey);
       if (!(defVar == null ? void 0 : defVar._id)) continue;
@@ -2429,14 +2524,17 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         continue;
       const propValue = props[defVar._id];
       if (!isVariableLink$1(propValue)) continue;
-      const parentVar = resolveManager.resolve(propValue);
+      const resolveManager = parentManager ?? manager;
+      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
       if ((parentVar == null ? void 0 : parentVar.type) !== definition.variableType.Array) continue;
       const items = parentVar.defaultValue;
       if (!Array.isArray(items)) continue;
+      if (ownerManager) itemManager = ownerManager;
       for (const item of items) {
         if (isLink$1(item)) {
           keys.push(item);
-          const resolved = resolveManager.resolve(item);
+          const resolved = ownerManager == null ? void 0 : ownerManager.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);
@@ -2444,13 +2542,14 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         }
       }
     }
-    return keys;
-  }, [definitions, manager, parentManager, props]);
+    return { arrayItemKeys: keys, arrayItemManager: itemManager };
+  }, [definitions, manager, parentManager, areaManager, globalManager, props]);
   const arrayItemLayers = useGraphStack(
-    arrayItemKeys.length ? parentManager ?? manager : null,
+    arrayItemKeys.length ? arrayItemManager ?? parentManager ?? manager : null,
     arrayItemKeys
   );
   return useMemo(() => {
+    var _a;
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return props;
     const resolveManager = parentManager ?? manager;
     const base = {};
@@ -2481,28 +2580,29 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
         continue;
       }
       if (defVar.type === definition.variableType.Array && defVar.definition) {
-        if (isVariableLink$1(propValue) && resolveManager) {
-          const parentVar = resolveManager.resolve(propValue);
+        if (isVariableLink$1(propValue)) {
+          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
           if ((parentVar == null ? void 0 : parentVar.type) === definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
             const resolvedArray = arrayResolvedByKey[propValue];
             if (Array.isArray(resolvedArray)) {
-              const concreteItems = resolveArrayItems(
-                resolvedArray,
-                resolveManager
-              );
+              const itemResolver = parentVarManager ?? resolveManager;
+              const concreteItems = itemResolver ? resolveArrayItems(resolvedArray, itemResolver) : [];
               const childDef = resolveFieldRef(defVar.definition, manager);
-              const parentDef = resolveFieldRef(
-                parentVar.definition,
-                resolveManager
-              );
+              const parentDef = parentVarManager ? resolveFieldRef(parentVar.definition, parentVarManager) : isObject(parentVar.definition) && ((_a = parentVar.definition) == null ? void 0 : _a._id) ? parentVar.definition : null;
               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 filledItems = fillArrayItemDefaults(
+                  concreteItems,
+                  parentDef,
+                  parentVarManager ?? resolveManager
+                );
                 const mapping = buildFieldIdMapping(
                   childDef,
                   parentDef,
                   manager,
-                  resolveManager
+                  parentVarManager ?? resolveManager
                 );
-                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+                expanded[defVar._id] = remapArrayItems(filledItems, mapping);
               } else {
                 expanded[defVar._id] = concreteItems;
               }
@@ -2530,6 +2630,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     props,
     manager,
     parentManager,
+    areaManager,
+    globalManager,
     definitions
   ]);
 };
@@ -3375,6 +3477,24 @@ const useArea = (areaCode, options) => {
   }
   return asyncState;
 };
+class AreaErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { hasError: false });
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error("[fragments] Area error:", error, info.componentStack);
+    }
+  }
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
 const AreaInitial = (areaProps) => {
   var _a;
   const { data: areaData } = useArea(areaProps.areaCode, {
@@ -3389,20 +3509,23 @@ const AreaInitial = (areaProps) => {
     areaData == null ? void 0 : areaData.fragmentId,
     globalManager
   );
-  const resultProps = useMemo(
-    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(areaProps == null ? void 0 : areaProps.props) ?? {} }),
-    [areaData, areaProps]
-  );
-  if (!areaData) return null;
+  const resultProps = useMemo(() => {
+    const baseProps = (areaData == null ? void 0 : areaData.props) ?? {};
+    if (typeof (areaProps == null ? void 0 : areaProps.props) === "function") {
+      return { ...baseProps, ...areaProps.props(baseProps) };
+    }
+    return { ...baseProps, ...(areaProps == null ? void 0 : areaProps.props) ?? {} };
+  }, [areaData, areaProps]);
   const areaManager = useMemo(
     () => createAreaManager({
-      areaId: areaData.areaId,
-      campaignId: areaData.campaignId,
-      variantId: areaData.variantId,
-      areaProperties: areaData.areaProperties
+      areaId: areaData == null ? void 0 : areaData.areaId,
+      campaignId: areaData == null ? void 0 : areaData.campaignId,
+      variantId: areaData == null ? void 0 : areaData.variantId,
+      areaProperties: areaData == null ? void 0 : areaData.areaProperties
     }),
-    [areaData.areaId]
+    [areaData == null ? void 0 : areaData.areaId]
   );
+  if (!areaData) return null;
   return /* @__PURE__ */ jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsx(
     Scope,
     {
@@ -3418,7 +3541,7 @@ const AreaInitial = (areaProps) => {
   ) });
 };
 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 }) });
+  return "globalManager" in props ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(GlobalManagerProvider, { value: props.globalManager, children: /* @__PURE__ */ jsx(AreaErrorBoundary, { children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) }) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AreaErrorBoundary, { children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) }) });
 };
 function cssToJsStyle(cssKey) {
   return cssKey.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

package/dist/nodes/Area/Area.d.ts

@@ -1,7 +1,8 @@
+export type AreaPropsFn = (variantProps: Record<string, unknown>) => Record<string, unknown>;
 export interface AreaProps {
     areaCode: string;
     globalManager?: unknown;
-    props?: Record<string, unknown>;
+    props?: Record<string, unknown> | AreaPropsFn;
     options?: {
         ssr?: boolean;
     };

package/dist/nodes/Area/Area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/nodes/Area/Area.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;CACH;AAqDD,eAAO,MAAM,IAAI,UAAW,SAAS,4CAYpC,CAAC"}
+{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/nodes/Area/Area.tsx"],"names":[],"mappings":"AAuCA,MAAM,MAAM,WAAW,GAAG,CACxB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAClC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7B,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC;IAC9C,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;CACH;AAwDD,eAAO,MAAM,IAAI,UAAW,SAAS,4CAgBpC,CAAC"}

package/dist/nodes/Area/Area.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Area.test.d.ts.map

package/dist/nodes/Area/Area.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.test.d.ts","sourceRoot":"","sources":["../../../src/nodes/Area/Area.test.tsx"],"names":[],"mappings":""}

package/dist/nodes/Area/index.d.ts

@@ -1,5 +1,5 @@
 export { Area } from './Area';
-export type { AreaProps } from './Area';
+export type { AreaProps, AreaPropsFn } from './Area';
 export { useArea } from './hooks/useArea';
 export type { UseAreaOptions, UseAreaResult, AreaData, } from './hooks/useArea.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/nodes/Area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/Area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EACV,cAAc,EACd,aAAa,EACb,QAAQ,GACT,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/Area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EACV,cAAc,EACd,aAAa,EACb,QAAQ,GACT,MAAM,uBAAuB,CAAC"}

package/dist/nodes/Collection/hooks/useCollection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Collection/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAY,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKzE,eAAO,MAAM,aAAa,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;;;;;CA2BzE,CAAC"}
+{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Collection/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAY,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKzE,eAAO,MAAM,aAAa,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;;;;;CA8BzE,CAAC"}

package/dist/nodes/Instance/Instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Instance.d.ts","sourceRoot":"","sources":["../../../src/nodes/Instance/Instance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAkB,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAc,OAAO,EAAe,MAAM,mBAAmB,CAAC;AAuErE,UAAU,eAAe;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D;AAiGD,eAAO,MAAM,QAAQ,yDAoBpB,CAAC"}
+{"version":3,"file":"Instance.d.ts","sourceRoot":"","sources":["../../../src/nodes/Instance/Instance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAkB,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAc,OAAO,EAAe,MAAM,mBAAmB,CAAC;AAuErE,UAAU,eAAe;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D;AAkGD,eAAO,MAAM,QAAQ,yDAoBpB,CAAC"}

package/dist/nodes/Text/hooks/useTextAttributes.d.ts

@@ -11,7 +11,7 @@ export declare const useTextAttributes: (layerKey: LinkKey, options?: UseTextAtt
     };
     styles: any;
     classnames: string | null;
-    content: any;
+    content: string;
     highlight: {
         stylesString: string;
     };

package/dist/nodes/Text/hooks/useTextContent.d.ts

@@ -1,3 +1,5 @@
 import { GraphState, LinkKey } from '@graph-state/core';
-export declare const useTextContent: (layerKey: LinkKey, manager: GraphState) => any;
+export declare function collectNestedVariableKeys(content: string, instanceProps: Record<string, any>, fragmentManager: GraphState | null, maxDepth?: number): LinkKey[];
+export declare function resolveNestedContent(content: string, resolvedMap: Map<string, any>, maxDepth?: number): string;
+export declare const useTextContent: (layerKey: LinkKey, manager: GraphState) => string;
 //# sourceMappingURL=useTextContent.d.ts.map

package/dist/nodes/Text/hooks/useTextContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextContent.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextContent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AA+BrE,eAAO,MAAM,cAAc,aAAc,OAAO,WAAW,UAAU,QA4CpE,CAAC"}
+{"version":3,"file":"useTextContent.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextContent.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,UAAU,EAEV,OAAO,EACR,MAAM,mBAAmB,CAAC;AAgC3B,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAClC,eAAe,EAAE,UAAU,GAAG,IAAI,EAClC,QAAQ,GAAE,MAA0B,GACnC,OAAO,EAAE,CAkCX;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,QAAQ,GAAE,MAA0B,GACnC,MAAM,CAmCR;AAED,eAAO,MAAM,cAAc,aAAc,OAAO,WAAW,UAAU,WA0BpE,CAAC"}

package/dist/nodes/Text/hooks/useTextContent.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useTextContent.test.d.ts.map

package/dist/nodes/Text/hooks/useTextContent.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextContent.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextContent.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.6.2",
   "type": "module",
   "files": [
     "dist"
@@ -27,9 +27,9 @@
     "@graph-state/core": "^0.13.2",
     "@graph-state/react": "^0.8.3",
     "react-use-measure": "^2.1.7",
-    "@fragmentsx/client-core": "0.4.1",
-    "@fragmentsx/definition": "0.2.2",
-    "@fragmentsx/utils": "0.2.0"
+    "@fragmentsx/client-core": "0.4.2",
+    "@fragmentsx/utils": "0.2.0",
+    "@fragmentsx/definition": "0.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",