@fragmentsx/render-react 1.6.2 → 1.7.0

package/dist/index.cjs.js

@@ -23,7 +23,8 @@ const InstanceContext = react.createContext({
   innerManager: null,
   props: {},
   definitions: [],
-  onChangeProps: null
+  onChangeProps: null,
+  instanceId: null
 });
 const RenderTargetContext = react.createContext(
   definition.definition.renderTarget.document
@@ -31,6 +32,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 +883,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 +902,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,54 +911,67 @@ 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
   );
   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 = 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);
-    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 (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
     };
   });
 };
 const EMPTY_RESOLVED = {
   values: {},
   cssVariableValues: {},
-  rawValues: {}
+  rawValues: {},
+  isVariable: {}
 };
 const collectVariableKeys = (layer) => {
   const keys = [];
@@ -979,23 +997,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] = definition.isVariableLink(value);
     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);
@@ -1015,7 +1036,7 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
       }
     }
   }
-  return { values, cssVariableValues, rawValues };
+  return { values, cssVariableValues, rawValues, isVariable };
 };
 const useRenderTarget = () => {
   const renderTarget = react.useContext(RenderTargetContext);
@@ -1255,10 +1276,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
   const stopsPosition = useLayersValue(stops, "position");
   const stopValues = react.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]
@@ -1270,6 +1291,38 @@ const useLayerLinearGradient = (linearGradientLink) => {
     [angle, stopValues]
   );
 };
+const useStyleRegistrar = (layerKey) => {
+  const { manager } = react.useContext(FragmentContext);
+  const { instanceId } = react.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.definition.sizing.Fixed) return utils.toPx(value);
@@ -1501,7 +1554,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)
   };
@@ -1519,16 +1572,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.definition.paintMode.Solid) {
-    return { background: cssSolidFill };
+    return { background: solidFill };
   }
   if (fillType === definition.definition.paintMode.Image) {
     const image = calcImagePaint(imageVars);
     return {
       ...image,
-      backgroundSize: cssImageSize ?? image.backgroundSize
+      backgroundSize: imageSize ?? image.backgroundSize
     };
   }
   if (fillType === definition.definition.paintMode.LinearGradient) {
@@ -1646,7 +1699,7 @@ const calcLayerBorder = (borderVars, borderPaintVars, borderLinearGradient, pain
     };
   }
   if (borderPaint.type === definition.definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solidCssValue);
+    return calcBorderSides(type, width, borderPaint.solid);
   }
   return { border: null };
 };
@@ -1791,7 +1844,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 } = react.useContext(FragmentContext);
@@ -1890,24 +1945,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: utils.isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
-      "border-radius": utils.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",
+      utils.isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      vars.isVariable.borderRadius
+    );
+    reg.add("white-space", vars.values.whiteSpace, vars.isVariable.whiteSpace);
+    reg.add(
+      "rotate",
+      utils.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;
@@ -2014,6 +2092,7 @@ const useHash = (layerKey, manager) => {
 };
 const useClassnames = (layerKey, manager) => {
   const hash = useHash(layerKey, manager);
+  const { instanceId } = react.useContext(InstanceContext);
   const [classnames] = useLayerValue(layerKey, "classnames", { manager });
   const values = useLayersValue(classnames, "value");
   const enables = useLayersValue(classnames, "enabled");
@@ -2025,40 +2104,13 @@ const useClassnames = (layerKey, manager) => {
     [values, enables]
   );
   if (!layerKey || !manager) return null;
-  let base = [hash];
+  const instanceHash = instanceId ? utils.hashGenerator(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 = react.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 = react.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 utils.noop;
-    },
-    [manager]
-  );
-  return {
-    addLayerStyle,
-    addCssChunk,
-    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? utils.noop,
-    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
-  };
-};
 const useGlobalManager = (globalManager) => {
   var _a;
   const currentGlobalManager = react.useContext(GlobalManagerContext);
@@ -2135,7 +2187,7 @@ const useLayerInteractions = (layerKey, options) => {
         }
       }
     },
-    [globalManager, fragmentManager, areaScope]
+    [globalManager, fragmentManager, areaScope, onChangeProps]
   );
   react.useEffect(() => {
     if (!pause && Array.isArray(interactions)) {
@@ -2241,20 +2293,15 @@ const useTextHighlight = (layerKey, options) => {
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.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
@@ -2281,32 +2328,22 @@ const Text = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        dangerouslySetInnerHTML: { __html: content }
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } })
   ] });
 };
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.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
@@ -2643,12 +2680,15 @@ const CollectionItem = ({
   FrameElement,
   children,
   sourceDefinition,
+  index,
   ...restProps
 }) => {
-  var _a;
+  var _a, _b;
   core.keyOfEntity(layer);
   const definitionId = ((_a = core.entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
+  const itemId = ((_b = core.entityOfKey(layer)) == null ? void 0 : _b._id) ?? index;
+  const collectionInstanceId = `ci:${itemId}`;
   const inputProps = {
     [definitionId]: value
   };
@@ -2674,17 +2714,31 @@ const CollectionItem = ({
         value: expandedProps,
         manager
       },
-      children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        InstanceContext.Provider,
         {
-          style: {
-            display: "contents",
-            ...cssVars
+          value: {
+            layerKey: null,
+            parentManager: null,
+            innerManager: null,
+            props: {},
+            definitions: [],
+            onChangeProps: null,
+            instanceId: collectionInstanceId
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
-        },
-        child
-      ))
+          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "contents",
+                ...cssVars
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
+            },
+            child
+          ))
+        }
+      )
     }
   );
 };
@@ -2726,6 +2780,7 @@ const Collection = ({
           children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsxRuntime.jsx(
             CollectionItem,
             {
+              index,
               layer: itemValue,
               manager: fragmentManager,
               source,
@@ -2757,11 +2812,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__ */ jsxRuntime.jsx("div", {});
@@ -2784,10 +2841,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,
@@ -2795,6 +2849,34 @@ const Frame = ({
     }
   );
 };
+const useStyleSheet = (manager) => {
+  var _a, _b;
+  const addLayerStyle = react.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 = react.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 utils.noop;
+    },
+    [manager]
+  );
+  return {
+    addLayerStyle,
+    addCssChunk,
+    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? utils.noop,
+    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
+  };
+};
 const useCssChunk = (linkKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
@@ -3099,7 +3181,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 +3233,7 @@ const useInstanceProps = (instanceProps) => {
         );
         continue;
       }
-      resolvedProps[key] = resolvedByKey[value] ?? value;
+      resolvedProps[key] = value in resolvedByKey ? resolvedByKey[value] : value;
     }
   }
   react.useEffect(() => {
@@ -3261,6 +3343,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 = react.useContext(InstanceContext).instanceId;
+  const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
+  const instanceIdRef = react.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,
@@ -3299,7 +3385,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       props: expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     }),
     [
       instanceProps.layerKey,
@@ -3307,7 +3394,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(InstanceContext.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3527,8 +3615,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 +3635,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 +3663,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;