@fragmentsx/render-react 1.6.2 → 1.6.3

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;AAwBrE,eAAO,MAAM,gBAAgB,iBACb,OAAO,EAAE,kBACP,UAAU,GAAG,IAAI;;;GAoHlC,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;AAyBrE,eAAO,MAAM,gBAAgB,iBACb,OAAO,EAAE,kBACP,UAAU,GAAG,IAAI;;;GA2IlC,CAAC"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useResolvedLayerVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useResolvedLayerVariables.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AA8BD,eAAO,MAAM,yBAAyB,UAC7B,GAAG,YACA,GAAG,kBACG,OAAO,EAAE,KACxB,iBAiDF,CAAC"}
+{"version":3,"file":"useResolvedLayerVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useResolvedLayerVariables.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AA8BD,eAAO,MAAM,yBAAyB,UAC7B,GAAG,YACA,GAAG,kBACG,OAAO,EAAE,KACxB,iBA2DF,CAAC"}

package/dist/index.cjs.js

@@ -31,6 +31,8 @@ const RenderTargetContext = react.createContext(
 const RenderTargetProvider = RenderTargetContext.Provider;
 const AreaManagerContext = react.createContext(null);
 const AreaManagerProvider = AreaManagerContext.Provider;
+const CampaignManagerContext = react.createContext(null);
+const CampaignManagerProvider = CampaignManagerContext.Provider;
 const ScopeContext = react.createContext([]);
 const Scope = ({
   value,
@@ -880,12 +882,13 @@ const extractVariableValue = (input, variableId) => {
   return void 0;
 };
 const useReadVariables = (variableKeys, customManager) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const filterKeys = variableKeys.filter(definition.isVariableLink);
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const { props: instanceProps } = react.useContext(InstanceContext);
   const globalManager = react.useContext(GlobalManagerContext);
   const areaManager = react.useContext(AreaManagerContext);
+  const campaignManager = react.useContext(CampaignManagerContext);
   const scopes = react.useContext(ScopeContext);
   const resultManager = customManager ?? ((_a = react.useContext(InstanceContext)) == null ? void 0 : _a.innerManager) ?? fragmentManager;
   const safeFilterKeys = resultManager ? filterKeys : [];
@@ -898,6 +901,7 @@ const useReadVariables = (variableKeys, customManager) => {
   );
   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);
+  react$1.useGraph(campaignManager, (_d = campaignManager == null ? void 0 : campaignManager.$properties) == null ? void 0 : _d.key);
   const globalPropertyKeys = react.useMemo(() => {
     if (!(globalManager == null ? void 0 : globalManager.$properties)) return [];
     return filterKeys.filter((key) => globalManager.resolve(key));
@@ -906,12 +910,20 @@ const useReadVariables = (variableKeys, customManager) => {
     if (!(areaManager == null ? void 0 : areaManager.$properties)) return [];
     return filterKeys.filter((key) => areaManager.resolve(key));
   }, [filterKeys, areaManager]);
+  const campaignPropertyKeys = react.useMemo(() => {
+    if (!(campaignManager == null ? void 0 : campaignManager.$properties)) return [];
+    return filterKeys.filter((key) => campaignManager.resolve(key));
+  }, [filterKeys, campaignManager]);
   react$1.useGraphStack(
     globalPropertyKeys.length ? globalManager : null,
     globalPropertyKeys
   );
   react$1.useGraphStack(areaPropertyKeys.length ? areaManager : null, areaPropertyKeys);
-  const lastCollectionItem = (_d = scopes == null ? void 0 : scopes.findLast) == null ? void 0 : _d.call(
+  react$1.useGraphStack(
+    campaignPropertyKeys.length ? campaignManager : null,
+    campaignPropertyKeys
+  );
+  const lastCollectionItem = (_e = scopes == null ? void 0 : scopes.findLast) == null ? void 0 : _e.call(
     scopes,
     (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.CollectionItemScope
   );
@@ -925,28 +937,31 @@ const useReadVariables = (variableKeys, customManager) => {
       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 campaignLayer = campaignManager == null ? void 0 : campaignManager.resolve(variableKey);
+    const campaignProp = (campaignLayer == null ? void 0 : campaignLayer.defaultValue) ?? null;
     const areaLayer = areaManager == null ? void 0 : areaManager.resolve(variableKey);
     const areaProp = (areaLayer == null ? void 0 : areaLayer.defaultValue) ?? null;
     const globalLayer = globalManager == null ? void 0 : globalManager.resolve(variableKey);
     const globalProp = (globalLayer == null ? void 0 : globalLayer.defaultValue) ?? null;
     const required = (layer == null ? void 0 : layer.required) ?? false;
     const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
-    const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? areaProp ?? globalProp ?? null;
+    const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? campaignProp ?? areaProp ?? globalProp ?? null;
     const resultValue = required ? currentValue : currentValue ?? defaultValue;
     if (definition.isVariableLink(resultValue)) {
       const refKey = resultValue;
+      const refCampaignLayer = campaignManager == null ? void 0 : campaignManager.resolve(refKey);
       const refAreaLayer = areaManager == null ? void 0 : areaManager.resolve(refKey);
       const refGlobalLayer = globalManager == null ? void 0 : globalManager.resolve(refKey);
       const refFragmentLayer = resultManager == null ? void 0 : resultManager.resolve(refKey);
-      const refValue = (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
+      const refValue = (refCampaignLayer == null ? void 0 : refCampaignLayer.defaultValue) ?? (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
       return {
         value: refValue,
-        layer: refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
+        layer: refCampaignLayer ?? refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
       };
     }
     return {
       value: resultValue,
-      layer: layer ?? areaLayer ?? globalLayer ?? null
+      layer: layer ?? campaignLayer ?? areaLayer ?? globalLayer ?? null
     };
   });
 };
@@ -979,9 +994,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
   const resolved = useReadVariables(variableKeys);
   if (!layer) return EMPTY_RESOLVED;
   const resolvedByKey = {};
+  const defaultByKey = {};
   variableKeys.forEach((key, i) => {
-    var _a2;
+    var _a2, _b, _c;
     resolvedByKey[key] = ((_a2 = resolved[i]) == null ? void 0 : _a2.value) ?? null;
+    defaultByKey[key] = ((_c = (_b = resolved[i]) == null ? void 0 : _b.layer) == null ? void 0 : _c.defaultValue) ?? null;
   });
   const values = {};
   const cssVariableValues = {};
@@ -990,12 +1007,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
     var _a2;
     rawValues[fieldPath] = raw;
     if (definition.isVariableLink(value)) {
-      const resolvedValue = resolvedByKey[value] ?? value;
+      const resolvedValue = value in resolvedByKey ? resolvedByKey[value] : value;
       values[fieldPath] = resolvedValue;
       const variableId = (_a2 = core.entityOfKey(value)) == null ? void 0 : _a2._id;
-      cssVariableValues[fieldPath] = `var(--${variableId}, ${transformCssValue(
-        resolvedValue
-      )})`;
+      const staticDefault = defaultByKey[value];
+      cssVariableValues[fieldPath] = staticDefault != null ? `var(--${variableId}, ${transformCssValue(staticDefault)})` : `var(--${variableId})`;
     } else {
       values[fieldPath] = value;
       cssVariableValues[fieldPath] = transformCssValue(value);
@@ -2135,7 +2151,7 @@ const useLayerInteractions = (layerKey, options) => {
         }
       }
     },
-    [globalManager, fragmentManager, areaScope]
+    [globalManager, fragmentManager, areaScope, onChangeProps]
   );
   react.useEffect(() => {
     if (!pause && Array.isArray(interactions)) {
@@ -3099,7 +3115,7 @@ const useInstanceProps = (instanceProps) => {
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
   const [localProps, setLocalProps] = react.useState(instanceProps.props ?? {});
   let inputProps = instanceLayerProps;
-  if (isTopInstance && utils.isObject(inputProps) && utils.isObject(localProps)) {
+  if (utils.isObject(inputProps) && utils.isObject(localProps)) {
     inputProps = {
       ...inputProps,
       ...localProps
@@ -3151,7 +3167,7 @@ const useInstanceProps = (instanceProps) => {
         );
         continue;
       }
-      resolvedProps[key] = resolvedByKey[value] ?? value;
+      resolvedProps[key] = value in resolvedByKey ? resolvedByKey[value] : value;
     }
   }
   react.useEffect(() => {
@@ -3527,8 +3543,15 @@ const AreaInitial = (areaProps) => {
     }),
     [areaData == null ? void 0 : areaData.areaId]
   );
+  const campaignManager = react.useMemo(
+    () => (areaData == null ? void 0 : areaData.campaignId) ? clientCore.createCampaignManager({
+      campaignId: areaData.campaignId,
+      campaignProperties: areaData.campaignProperties ?? void 0
+    }) : null,
+    [areaData == null ? void 0 : areaData.campaignId]
+  );
   if (!areaData) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsxRuntime.jsx(CampaignManagerProvider, { value: campaignManager, children: /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
       fragmentManager,
@@ -3540,7 +3563,7 @@ const AreaInitial = (areaProps) => {
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(Instance, { fragmentId: areaData.fragmentId, props: resultProps })
     }
-  ) });
+  ) }) });
 };
 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(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 }) }) });
@@ -3568,6 +3591,8 @@ const useLayerCssOverride = (layerKey) => {
 exports.Area = Area;
 exports.AreaManagerContext = AreaManagerContext;
 exports.AreaManagerProvider = AreaManagerProvider;
+exports.CampaignManagerContext = CampaignManagerContext;
+exports.CampaignManagerProvider = CampaignManagerProvider;
 exports.Collection = Collection;
 exports.CssChunk = CssChunk;
 exports.CustomRender = CustomRender;

package/dist/index.es.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useGraph, useGraphStack } from "@graph-state/react";
 import { cleanGraph, generateId, getKey as getKey$1, isValue, isObject, pick, toPx, setKey as setKey$1, toKebabCase, set, isPrimitive, get, omit, noop, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
 import { keyOfEntity, isPartialKey, entityOfKey, isLinkKey } from "@graph-state/core";
-import { createAreaManager } from "@fragmentsx/client-core";
+import { createAreaManager, createCampaignManager } from "@fragmentsx/client-core";
 const GlobalManagerContext = createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
 const FragmentContext = createContext({
@@ -29,6 +29,8 @@ const RenderTargetContext = createContext(
 const RenderTargetProvider = RenderTargetContext.Provider;
 const AreaManagerContext = createContext(null);
 const AreaManagerProvider = AreaManagerContext.Provider;
+const CampaignManagerContext = createContext(null);
+const CampaignManagerProvider = CampaignManagerContext.Provider;
 const ScopeContext = createContext([]);
 const Scope = ({
   value,
@@ -878,12 +880,13 @@ const extractVariableValue = (input, variableId) => {
   return void 0;
 };
 const useReadVariables = (variableKeys, customManager) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const filterKeys = variableKeys.filter(isVariableLink$1);
   const { manager: fragmentManager } = useContext(FragmentContext);
   const { props: instanceProps } = useContext(InstanceContext);
   const globalManager = useContext(GlobalManagerContext);
   const areaManager = useContext(AreaManagerContext);
+  const campaignManager = useContext(CampaignManagerContext);
   const scopes = useContext(ScopeContext);
   const resultManager = customManager ?? ((_a = useContext(InstanceContext)) == null ? void 0 : _a.innerManager) ?? fragmentManager;
   const safeFilterKeys = resultManager ? filterKeys : [];
@@ -896,6 +899,7 @@ const useReadVariables = (variableKeys, customManager) => {
   );
   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);
+  useGraph(campaignManager, (_d = campaignManager == null ? void 0 : campaignManager.$properties) == null ? void 0 : _d.key);
   const globalPropertyKeys = useMemo(() => {
     if (!(globalManager == null ? void 0 : globalManager.$properties)) return [];
     return filterKeys.filter((key) => globalManager.resolve(key));
@@ -904,12 +908,20 @@ const useReadVariables = (variableKeys, customManager) => {
     if (!(areaManager == null ? void 0 : areaManager.$properties)) return [];
     return filterKeys.filter((key) => areaManager.resolve(key));
   }, [filterKeys, areaManager]);
+  const campaignPropertyKeys = useMemo(() => {
+    if (!(campaignManager == null ? void 0 : campaignManager.$properties)) return [];
+    return filterKeys.filter((key) => campaignManager.resolve(key));
+  }, [filterKeys, campaignManager]);
   useGraphStack(
     globalPropertyKeys.length ? globalManager : null,
     globalPropertyKeys
   );
   useGraphStack(areaPropertyKeys.length ? areaManager : null, areaPropertyKeys);
-  const lastCollectionItem = (_d = scopes == null ? void 0 : scopes.findLast) == null ? void 0 : _d.call(
+  useGraphStack(
+    campaignPropertyKeys.length ? campaignManager : null,
+    campaignPropertyKeys
+  );
+  const lastCollectionItem = (_e = scopes == null ? void 0 : scopes.findLast) == null ? void 0 : _e.call(
     scopes,
     (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.CollectionItemScope
   );
@@ -923,28 +935,31 @@ const useReadVariables = (variableKeys, customManager) => {
       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 campaignLayer = campaignManager == null ? void 0 : campaignManager.resolve(variableKey);
+    const campaignProp = (campaignLayer == null ? void 0 : campaignLayer.defaultValue) ?? null;
     const areaLayer = areaManager == null ? void 0 : areaManager.resolve(variableKey);
     const areaProp = (areaLayer == null ? void 0 : areaLayer.defaultValue) ?? null;
     const globalLayer = globalManager == null ? void 0 : globalManager.resolve(variableKey);
     const globalProp = (globalLayer == null ? void 0 : globalLayer.defaultValue) ?? null;
     const required = (layer == null ? void 0 : layer.required) ?? false;
     const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
-    const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? areaProp ?? globalProp ?? null;
+    const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? campaignProp ?? areaProp ?? globalProp ?? null;
     const resultValue = required ? currentValue : currentValue ?? defaultValue;
     if (isVariableLink$1(resultValue)) {
       const refKey = resultValue;
+      const refCampaignLayer = campaignManager == null ? void 0 : campaignManager.resolve(refKey);
       const refAreaLayer = areaManager == null ? void 0 : areaManager.resolve(refKey);
       const refGlobalLayer = globalManager == null ? void 0 : globalManager.resolve(refKey);
       const refFragmentLayer = resultManager == null ? void 0 : resultManager.resolve(refKey);
-      const refValue = (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
+      const refValue = (refCampaignLayer == null ? void 0 : refCampaignLayer.defaultValue) ?? (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
       return {
         value: refValue,
-        layer: refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
+        layer: refCampaignLayer ?? refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
       };
     }
     return {
       value: resultValue,
-      layer: layer ?? areaLayer ?? globalLayer ?? null
+      layer: layer ?? campaignLayer ?? areaLayer ?? globalLayer ?? null
     };
   });
 };
@@ -977,9 +992,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
   const resolved = useReadVariables(variableKeys);
   if (!layer) return EMPTY_RESOLVED;
   const resolvedByKey = {};
+  const defaultByKey = {};
   variableKeys.forEach((key, i) => {
-    var _a2;
+    var _a2, _b, _c;
     resolvedByKey[key] = ((_a2 = resolved[i]) == null ? void 0 : _a2.value) ?? null;
+    defaultByKey[key] = ((_c = (_b = resolved[i]) == null ? void 0 : _b.layer) == null ? void 0 : _c.defaultValue) ?? null;
   });
   const values = {};
   const cssVariableValues = {};
@@ -988,12 +1005,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
     var _a2;
     rawValues[fieldPath] = raw;
     if (isVariableLink$1(value)) {
-      const resolvedValue = resolvedByKey[value] ?? value;
+      const resolvedValue = value in resolvedByKey ? resolvedByKey[value] : value;
       values[fieldPath] = resolvedValue;
       const variableId = (_a2 = entityOfKey(value)) == null ? void 0 : _a2._id;
-      cssVariableValues[fieldPath] = `var(--${variableId}, ${transformCssValue(
-        resolvedValue
-      )})`;
+      const staticDefault = defaultByKey[value];
+      cssVariableValues[fieldPath] = staticDefault != null ? `var(--${variableId}, ${transformCssValue(staticDefault)})` : `var(--${variableId})`;
     } else {
       values[fieldPath] = value;
       cssVariableValues[fieldPath] = transformCssValue(value);
@@ -2133,7 +2149,7 @@ const useLayerInteractions = (layerKey, options) => {
         }
       }
     },
-    [globalManager, fragmentManager, areaScope]
+    [globalManager, fragmentManager, areaScope, onChangeProps]
   );
   useEffect(() => {
     if (!pause && Array.isArray(interactions)) {
@@ -3097,7 +3113,7 @@ const useInstanceProps = (instanceProps) => {
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
   const [localProps, setLocalProps] = useState(instanceProps.props ?? {});
   let inputProps = instanceLayerProps;
-  if (isTopInstance && isObject(inputProps) && isObject(localProps)) {
+  if (isObject(inputProps) && isObject(localProps)) {
     inputProps = {
       ...inputProps,
       ...localProps
@@ -3149,7 +3165,7 @@ const useInstanceProps = (instanceProps) => {
         );
         continue;
       }
-      resolvedProps[key] = resolvedByKey[value] ?? value;
+      resolvedProps[key] = value in resolvedByKey ? resolvedByKey[value] : value;
     }
   }
   useEffect(() => {
@@ -3525,8 +3541,15 @@ const AreaInitial = (areaProps) => {
     }),
     [areaData == null ? void 0 : areaData.areaId]
   );
+  const campaignManager = useMemo(
+    () => (areaData == null ? void 0 : areaData.campaignId) ? createCampaignManager({
+      campaignId: areaData.campaignId,
+      campaignProperties: areaData.campaignProperties ?? void 0
+    }) : null,
+    [areaData == null ? void 0 : areaData.campaignId]
+  );
   if (!areaData) return null;
-  return /* @__PURE__ */ jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AreaManagerProvider, { value: areaManager, children: /* @__PURE__ */ jsx(CampaignManagerProvider, { value: campaignManager, children: /* @__PURE__ */ jsx(
     Scope,
     {
       fragmentManager,
@@ -3538,7 +3561,7 @@ const AreaInitial = (areaProps) => {
       },
       children: /* @__PURE__ */ jsx(Instance, { fragmentId: areaData.fragmentId, props: resultProps })
     }
-  ) });
+  ) }) });
 };
 const Area = (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 }) }) });
@@ -3567,6 +3590,8 @@ export {
   Area,
   AreaManagerContext,
   AreaManagerProvider,
+  CampaignManagerContext,
+  CampaignManagerProvider,
   Collection,
   CssChunk,
   CustomRender,

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":"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"}
+{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/nodes/Area/Area.tsx"],"names":[],"mappings":"AA8CA,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;AAqED,eAAO,MAAM,IAAI,UAAW,SAAS,4CAgBpC,CAAC"}

package/dist/nodes/Area/hooks/useArea.types.d.ts

@@ -13,6 +13,7 @@ export interface AreaData {
     campaignId: string;
     variantId: string;
     areaProperties?: unknown;
+    campaignProperties?: any[] | null;
 }
 export interface UseAreaResult {
     data: AreaData | null;

package/dist/nodes/Area/hooks/useArea.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useArea.types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Area/hooks/useArea.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB"}
+{"version":3,"file":"useArea.types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Area/hooks/useArea.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB"}

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

@@ -1 +1 @@
-{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA+K1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;gCAwG7B,MAAM,SAAS,OAAO;CAKrD,CAAC"}
+{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA+K1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;gCA2G7B,MAAM,SAAS,OAAO;CAKrD,CAAC"}

package/dist/nodes/Instance/test/collection-isolation.browser.test.d.ts

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

package/dist/nodes/Instance/test/collection-isolation.browser.test.d.ts.map

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

package/dist/nodes/Instance/test/mutate-event.test.d.ts

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

package/dist/nodes/Instance/test/mutate-event.test.d.ts.map

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

package/dist/providers/CampaignManager.d.ts

@@ -0,0 +1,3 @@
+export declare const CampaignManagerContext: import('react').Context<null>;
+export declare const CampaignManagerProvider: import('react').Provider<null>;
+//# sourceMappingURL=CampaignManager.d.ts.map

package/dist/providers/CampaignManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CampaignManager.d.ts","sourceRoot":"","sources":["../../src/providers/CampaignManager.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,+BAAsB,CAAC;AAC1D,eAAO,MAAM,uBAAuB,gCAAkC,CAAC"}

package/dist/providers/index.d.ts

@@ -4,6 +4,7 @@ export * from './CustomRender';
 export * from './InstanceContext';
 export * from './RenderTarget';
 export * from './AreaManager';
+export * from './CampaignManager';
 export { Scope } from './Scope';
 export { ScopeContext } from './Scope/ScopeContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/providers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.6.2",
+  "version": "1.6.3",
   "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.2",
-    "@fragmentsx/utils": "0.2.0",
-    "@fragmentsx/definition": "0.2.2"
+    "@fragmentsx/client-core": "0.4.3",
+    "@fragmentsx/definition": "0.2.2",
+    "@fragmentsx/utils": "0.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",