@fragmentsx/render-react 1.6.2 → 1.7.0

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({
@@ -21,7 +21,8 @@ const InstanceContext = createContext({
   innerManager: null,
   props: {},
   definitions: [],
-  onChangeProps: null
+  onChangeProps: null,
+  instanceId: null
 });
 const RenderTargetContext = createContext(
   definition.renderTarget.document
@@ -29,6 +30,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 +881,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 +900,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,54 +909,67 @@ 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
   );
   return filterKeys.map((variableKey, index) => {
     var _a2, _b2;
     variableLayers[index];
-    const layer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? 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 fragmentLayer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
+    const layer = fragmentLayer ?? campaignLayer ?? areaLayer ?? globalLayer ?? null;
     const { _id: propertyId } = layer ?? {};
     let collectionItemProp = void 0;
     if (lastCollectionItem && 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);
-    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 required = (fragmentLayer == null ? void 0 : fragmentLayer.required) ?? (layer == null ? void 0 : layer.required) ?? false;
+    const defaultValue = (fragmentLayer == null ? void 0 : fragmentLayer.defaultValue) ?? (layer == null ? void 0 : layer.defaultValue) ?? 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
     };
   });
 };
 const EMPTY_RESOLVED = {
   values: {},
   cssVariableValues: {},
-  rawValues: {}
+  rawValues: {},
+  isVariable: {}
 };
 const collectVariableKeys = (layer) => {
   const keys = [];
@@ -977,23 +995,26 @@ 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 = {};
   const rawValues = {};
+  const isVariable = {};
   const resolveField = (fieldPath, value, raw) => {
     var _a2;
     rawValues[fieldPath] = raw;
+    isVariable[fieldPath] = isVariableLink$1(value);
     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);
@@ -1013,7 +1034,7 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
       }
     }
   }
-  return { values, cssVariableValues, rawValues };
+  return { values, cssVariableValues, rawValues, isVariable };
 };
 const useRenderTarget = () => {
   const renderTarget = useContext(RenderTargetContext);
@@ -1253,10 +1274,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
   const stopsPosition = useLayersValue(stops, "position");
   const stopValues = useMemo(
     () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b, _c;
+      var _a, _b;
       return [
-        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
-        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
+        (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(0),
+        (_b = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _b.at(0)
       ];
     })) ?? [],
     [stops, stopsValue, stopsPosition]
@@ -1268,6 +1289,38 @@ const useLayerLinearGradient = (linearGradientLink) => {
     [angle, stopValues]
   );
 };
+const useStyleRegistrar = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  const { instanceId } = useContext(InstanceContext);
+  const baseline = {};
+  const instance = {};
+  const hasInstance = !!instanceId;
+  return {
+    add(prop, value, isDynamic) {
+      (isDynamic && hasInstance ? instance : baseline)[prop] = value;
+    },
+    addAll(styles, isDynamic) {
+      if (styles) {
+        Object.assign(isDynamic && hasInstance ? instance : baseline, styles);
+      }
+    },
+    flush() {
+      var _a, _b, _c, _d;
+      (_b = (_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.addBaselineStyle) == null ? void 0 : _b.call(_a, layerKey, baseline);
+      if (instanceId && Object.keys(instance).length > 0) {
+        (_d = (_c = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _c.addInstanceStyle) == null ? void 0 : _d.call(
+          _c,
+          layerKey,
+          instanceId,
+          instance
+        );
+      }
+    },
+    getStyles() {
+      return { ...baseline, ...instance };
+    }
+  };
+};
 const processOptionalSize = (value, type) => {
   if (value === -1) return "";
   if (type === definition.sizing.Fixed) return toPx(value);
@@ -1499,7 +1552,7 @@ const useLayerPosition = (layerKey) => {
 const calcImagePaint = (imageVars) => {
   var _a, _b;
   return {
-    background: imageVars.cssVariableValues.src,
+    background: transformCssValue(imageVars.values.src),
     backgroundRepeat: "no-repeat",
     backgroundSize: (_b = (_a = imageVars.values.scale) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)
   };
@@ -1517,16 +1570,16 @@ const useImagePaint = (imageLinkKey) => {
 };
 const calcLayerBackground = (paintVars, imageVars, imageSizeVars, linearGradient) => {
   const fillType = paintVars.values.type;
-  const cssSolidFill = paintVars.cssVariableValues.solid;
-  const cssImageSize = imageSizeVars.cssVariableValues.imageSize;
+  const solidFill = paintVars.values.solid;
+  const imageSize = imageSizeVars.values.imageSize;
   if (fillType === definition.paintMode.Solid) {
-    return { background: cssSolidFill };
+    return { background: solidFill };
   }
   if (fillType === definition.paintMode.Image) {
     const image = calcImagePaint(imageVars);
     return {
       ...image,
-      backgroundSize: cssImageSize ?? image.backgroundSize
+      backgroundSize: imageSize ?? image.backgroundSize
     };
   }
   if (fillType === definition.paintMode.LinearGradient) {
@@ -1644,7 +1697,7 @@ const calcLayerBorder = (borderVars, borderPaintVars, borderLinearGradient, pain
     };
   }
   if (borderPaint.type === definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solidCssValue);
+    return calcBorderSides(type, width, borderPaint.solid);
   }
   return { border: null };
 };
@@ -1789,7 +1842,9 @@ const useLayerFlex = (layerKey) => {
   };
 };
 const SKIP_OVERRIDE = { skipOverrideCheck: true };
-const useLayerStyles = (layerKey) => {
+const useLayerStyles = (layerKey, options) => {
+  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
+  const reg = useStyleRegistrar(layerKey);
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1888,24 +1943,47 @@ const useLayerStyles = (layerKey) => {
     const layout = calcLayerLayout(vars);
     const textStyles = calcLayerTextStyles(vars);
     const layerFlex = calcLayerFlex(vars, parentVars);
-    return {
-      ...background,
-      ...border,
-      ...position,
-      opacity: vars.values.opacity,
-      overflow: vars.values.overflow,
-      rotate: isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
-      "border-radius": isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
-      "white-space": vars.values.whiteSpace,
-      "z-index": vars.values.zIndex !== -1 ? vars.values.zIndex : null,
-      ...layout,
-      ...layerSize,
-      ...textStyles,
-      ...layerFlex,
-      display
-    };
+    reg.add("opacity", vars.values.opacity, vars.isVariable.opacity);
+    reg.add("overflow", vars.values.overflow, vars.isVariable.overflow);
+    reg.add(
+      "border-radius",
+      isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      vars.isVariable.borderRadius
+    );
+    reg.add("white-space", vars.values.whiteSpace, vars.isVariable.whiteSpace);
+    reg.add(
+      "rotate",
+      isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      vars.isVariable.rotate
+    );
+    reg.add(
+      "z-index",
+      vars.values.zIndex !== -1 ? vars.values.zIndex : null,
+      vars.isVariable.zIndex
+    );
+    const bgDynamic = paintVars.isVariable.solid || paintVars.isVariable.type || imageVars.isVariable.src;
+    reg.addAll(background, bgDynamic);
+    const borderDynamic = borderPaintVars.isVariable.solid || borderVars.isVariable.type;
+    reg.addAll(border, borderDynamic);
+    const posDynamic = vars.isVariable.width || vars.isVariable.height || vars.isVariable.position || vars.isVariable.widthType || vars.isVariable.heightType;
+    reg.addAll(position, posDynamic);
+    const layoutDynamic = vars.isVariable.layerMode || vars.isVariable.layerDirection || vars.isVariable.layerDistribute || vars.isVariable.layerAlign || vars.isVariable.padding || vars.isVariable.layerGap;
+    reg.addAll(layout, layoutDynamic);
+    const flexDynamic = vars.isVariable.widthType || vars.isVariable.heightType || parentVars.isVariable.layerDirection;
+    reg.addAll(layerFlex, flexDynamic);
+    const sizeDynamic = vars.isVariable.minWidth || vars.isVariable.maxWidth || vars.isVariable.minHeight || vars.isVariable.maxHeight;
+    reg.addAll(layerSize, sizeDynamic);
+    const textDynamic = vars.isVariable["attributes.color"];
+    reg.addAll(textStyles, textDynamic);
+    reg.add(
+      "display",
+      display,
+      vars.isVariable.visible || vars.isVariable.layerMode
+    );
+    if (collectStyle) {
+      reg.flush();
+    }
   } catch (e) {
-    return {};
   }
 };
 const MAX_NESTING_DEPTH = 5;
@@ -2012,6 +2090,7 @@ const useHash = (layerKey, manager) => {
 };
 const useClassnames = (layerKey, manager) => {
   const hash = useHash(layerKey, manager);
+  const { instanceId } = useContext(InstanceContext);
   const [classnames] = useLayerValue(layerKey, "classnames", { manager });
   const values = useLayersValue(classnames, "value");
   const enables = useLayersValue(classnames, "enabled");
@@ -2023,40 +2102,13 @@ const useClassnames = (layerKey, manager) => {
     [values, enables]
   );
   if (!layerKey || !manager) return null;
-  let base = [hash];
+  const instanceHash = instanceId ? hashGenerator$1(instanceId) : null;
+  let base = [hash, instanceHash].filter(Boolean);
   if (classnames == null ? void 0 : classnames.length) {
     base = [...base, ...list];
   }
   return base.join(" ");
 };
-const useStyleSheet = (manager) => {
-  var _a, _b;
-  const addLayerStyle = useCallback(
-    (layerKey, styles, layer) => {
-      var _a2, _b2;
-      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
-        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles, layer);
-      }
-    },
-    [manager]
-  );
-  const addCssChunk = useCallback(
-    (id) => {
-      var _a2, _b2;
-      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addCssChunk" in (manager == null ? void 0 : manager.$styleSheet)) {
-        return (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addCssChunk) == null ? void 0 : _b2.call(_a2, id);
-      }
-      return noop;
-    },
-    [manager]
-  );
-  return {
-    addLayerStyle,
-    addCssChunk,
-    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? noop,
-    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
-  };
-};
 const useGlobalManager = (globalManager) => {
   var _a;
   const currentGlobalManager = useContext(GlobalManagerContext);
@@ -2133,7 +2185,7 @@ const useLayerInteractions = (layerKey, options) => {
         }
       }
     },
-    [globalManager, fragmentManager, areaScope]
+    [globalManager, fragmentManager, areaScope, onChangeProps]
   );
   useEffect(() => {
     if (!pause && Array.isArray(interactions)) {
@@ -2239,20 +2291,15 @@ const useTextHighlight = (layerKey, options) => {
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
-  const styles = useLayerStyles(layerKey);
+  useLayerStyles(layerKey, { collectStyle });
   const highlight = useTextHighlight(layerKey);
   const content = useTextContent(layerKey);
   const classnames = useClassnames(layerKey, fragmentManager);
   const hash = useHash(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
   return {
     hash,
     events,
-    styles,
     classnames,
     content,
     highlight
@@ -2279,32 +2326,22 @@ const Text = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        dangerouslySetInnerHTML: { __html: content }
-      }
-    )
+    /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: content } })
   ] });
 };
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
   const layer = fragmentManager.entityOfKey(layerKey);
-  const styles = useLayerStyles(layerKey);
+  useLayerStyles(layerKey, { collectStyle });
   const children = useLayerChildren(layerKey);
   const classnames = useClassnames(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options);
   const link = useLayerLink(layerKey);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
   return {
     Tag: (link == null ? void 0 : link.isLink) ? (options == null ? void 0 : options.FrameTag) ?? "a" : (options == null ? void 0 : options.FrameTag) ?? "div",
     type: layer == null ? void 0 : layer._type,
     classnames,
-    styles,
     children,
     events,
     linkProps: link.linkProps
@@ -2641,12 +2678,15 @@ const CollectionItem = ({
   FrameElement,
   children,
   sourceDefinition,
+  index,
   ...restProps
 }) => {
-  var _a;
+  var _a, _b;
   keyOfEntity(layer);
   const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
+  const itemId = ((_b = entityOfKey(layer)) == null ? void 0 : _b._id) ?? index;
+  const collectionInstanceId = `ci:${itemId}`;
   const inputProps = {
     [definitionId]: value
   };
@@ -2672,17 +2712,31 @@ const CollectionItem = ({
         value: expandedProps,
         manager
       },
-      children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
-        "div",
+      children: /* @__PURE__ */ jsx(
+        InstanceContext.Provider,
         {
-          style: {
-            display: "contents",
-            ...cssVars
+          value: {
+            layerKey: null,
+            parentManager: null,
+            innerManager: null,
+            props: {},
+            definitions: [],
+            onChangeProps: null,
+            instanceId: collectionInstanceId
           },
-          children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
-        },
-        child
-      ))
+          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "contents",
+                ...cssVars
+              },
+              children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
+            },
+            child
+          ))
+        }
+      )
     }
   );
 };
@@ -2724,6 +2778,7 @@ const Collection = ({
           children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsx(
             CollectionItem,
             {
+              index,
               layer: itemValue,
               manager: fragmentManager,
               source,
@@ -2755,11 +2810,13 @@ const Frame = ({
   pauseInteractions,
   ...restProps
 }) => {
-  const { styles, classnames, children, type, events, linkProps, Tag } = useFrame(layerKey, {
-    ...restProps,
-    pauseInteractions
-  });
-  const resultStyles = inputStyles ?? styles;
+  const { classnames, children, type, events, linkProps, Tag } = useFrame(
+    layerKey,
+    {
+      ...restProps,
+      pauseInteractions
+    }
+  );
   const isMounted = useMounted();
   if (isMounted && hidden) {
     return /* @__PURE__ */ jsx("div", {});
@@ -2782,10 +2839,7 @@ const Frame = ({
     {
       className: classnames,
       "data-key": layerKey,
-      style: {
-        ...resultStyles,
-        display: hidden ? "none" : resultStyles.display
-      },
+      style: inputStyles ? { ...inputStyles, display: hidden ? "none" : inputStyles.display } : hidden ? { display: "none" } : restProps == null ? void 0 : restProps.style,
       ...events,
       ...linkProps,
       ...restProps,
@@ -2793,6 +2847,34 @@ const Frame = ({
     }
   );
 };
+const useStyleSheet = (manager) => {
+  var _a, _b;
+  const addLayerStyle = useCallback(
+    (layerKey, styles, layer) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
+        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles, layer);
+      }
+    },
+    [manager]
+  );
+  const addCssChunk = useCallback(
+    (id) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addCssChunk" in (manager == null ? void 0 : manager.$styleSheet)) {
+        return (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addCssChunk) == null ? void 0 : _b2.call(_a2, id);
+      }
+      return noop;
+    },
+    [manager]
+  );
+  return {
+    addLayerStyle,
+    addCssChunk,
+    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? noop,
+    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
+  };
+};
 const useCssChunk = (linkKey) => {
   const { manager } = useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
@@ -3097,7 +3179,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 +3231,7 @@ const useInstanceProps = (instanceProps) => {
         );
         continue;
       }
-      resolvedProps[key] = resolvedByKey[value] ?? value;
+      resolvedProps[key] = value in resolvedByKey ? resolvedByKey[value] : value;
     }
   }
   useEffect(() => {
@@ -3259,6 +3341,10 @@ const InstanceInitial = ({
   var _a;
   const ssr = ((_a = instanceProps == null ? void 0 : instanceProps.options) == null ? void 0 : _a.ssr) ?? true;
   const link = useLayerLink(instanceProps.layerKey);
+  const parentInstanceId = useContext(InstanceContext).instanceId;
+  const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
+  const instanceIdRef = useRef(isTopInstance ? crypto.randomUUID() : null);
+  const instanceId = parentInstanceId ? `${parentInstanceId}:${instanceProps.layerKey}` : instanceIdRef.current ?? instanceProps.layerKey;
   const Tag = (link == null ? void 0 : link.isLink) ? inputTag ?? "a" : inputTag ?? "div";
   const {
     fragmentId,
@@ -3297,7 +3383,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       props: expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     }),
     [
       instanceProps.layerKey,
@@ -3305,7 +3392,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     ]
   );
   return /* @__PURE__ */ jsx(InstanceContext.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsx(
@@ -3525,8 +3613,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 +3633,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 +3662,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;