@fragmentsx/render-react 1.6.1 → 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;;;GAiHlC,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;AAwMrE;;;;;;;;;;;;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,CAkQxB,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");
@@ -913,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);
@@ -1906,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;
@@ -1924,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(
       /\{\{(.*?)}}/,
@@ -2050,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")
         });
@@ -2065,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);
         }
       }
@@ -2264,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,
@@ -2383,6 +2451,25 @@ 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);
@@ -2506,13 +2593,18 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
               const childDef = resolveFieldRef(defVar.definition, manager);
               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,
                   parentVarManager ?? resolveManager
                 );
-                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+                expanded[defVar._id] = remapArrayItems(filledItems, mapping);
               } else {
                 expanded[defVar._id] = concreteItems;
               }
@@ -3387,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, {
@@ -3401,10 +3511,13 @@ 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]
-  );
+  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 == null ? void 0 : areaData.areaId,
@@ -3430,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";
@@ -911,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);
@@ -1904,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;
@@ -1922,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(
       /\{\{(.*?)}}/,
@@ -2048,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")
         });
@@ -2063,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);
         }
       }
@@ -2262,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,
@@ -2381,6 +2449,25 @@ 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);
@@ -2504,13 +2591,18 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
               const childDef = resolveFieldRef(defVar.definition, manager);
               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,
                   parentVarManager ?? resolveManager
                 );
-                expanded[defVar._id] = remapArrayItems(concreteItems, mapping);
+                expanded[defVar._id] = remapArrayItems(filledItems, mapping);
               } else {
                 expanded[defVar._id] = concreteItems;
               }
@@ -3385,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, {
@@ -3399,10 +3509,13 @@ 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]
-  );
+  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 == null ? void 0 : areaData.areaId,
@@ -3428,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/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.1",
+  "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/definition": "0.2.2",
+    "@fragmentsx/client-core": "0.4.2",
     "@fragmentsx/utils": "0.2.0",
-    "@fragmentsx/client-core": "0.4.2"
+    "@fragmentsx/definition": "0.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",