@fragmentsx/render-react 1.6.3 → 1.8.0

package/dist/index.cjs.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const definition = require("@fragmentsx/definition");
 const jsxRuntime = require("react/jsx-runtime");
-const react$1 = require("@graph-state/react");
 const utils = require("@fragmentsx/utils");
 const core = require("@graph-state/core");
+const react$1 = require("@graph-state/react");
 const clientCore = require("@fragmentsx/client-core");
 const GlobalManagerContext = react.createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
@@ -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
@@ -930,21 +931,22 @@ const useReadVariables = (variableKeys, customManager) => {
   return filterKeys.map((variableKey, index) => {
     var _a2, _b2;
     variableLayers[index];
-    const layer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
-    const { _id: propertyId } = layer ?? {};
-    let collectionItemProp = void 0;
-    if (lastCollectionItem && propertyId) {
-      collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_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 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 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)) {
@@ -953,7 +955,7 @@ const useReadVariables = (variableKeys, customManager) => {
       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 = (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;
+      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) ?? null;
       return {
         value: refValue,
         layer: refCampaignLayer ?? refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
@@ -968,7 +970,8 @@ const useReadVariables = (variableKeys, customManager) => {
 const EMPTY_RESOLVED = {
   values: {},
   cssVariableValues: {},
-  rawValues: {}
+  rawValues: {},
+  isVariable: {}
 };
 const collectVariableKeys = (layer) => {
   const keys = [];
@@ -1003,9 +1006,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
   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 = value in resolvedByKey ? resolvedByKey[value] : value;
       values[fieldPath] = resolvedValue;
@@ -1031,7 +1036,7 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
       }
     }
   }
-  return { values, cssVariableValues, rawValues };
+  return { values, cssVariableValues, rawValues, isVariable };
 };
 const useRenderTarget = () => {
   const renderTarget = react.useContext(RenderTargetContext);
@@ -1271,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]
@@ -1286,6 +1291,40 @@ 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 {
+    baseline,
+    instance,
+    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);
@@ -1517,7 +1556,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)
   };
@@ -1535,16 +1574,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) {
@@ -1662,7 +1701,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 };
 };
@@ -1807,7 +1846,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 = (options == null ? void 0 : options.registrar) ?? useStyleRegistrar(layerKey);
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1906,24 +1947,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 && !(options == null ? void 0 : options.registrar)) {
+      reg.flush();
+    }
   } catch (e) {
-    return {};
   }
 };
 const MAX_NESTING_DEPTH = 5;
@@ -2022,6 +2086,39 @@ const useTextContent = (layerKey, manager) => {
   }
   return nextContent;
 };
+function extractStyleVarIds(html) {
+  if (!html) return [];
+  const ids = /* @__PURE__ */ new Set();
+  const varRegex = /var\(--([a-zA-Z0-9_-]+)/g;
+  let match;
+  while ((match = varRegex.exec(html)) !== null) {
+    ids.add(match[1]);
+  }
+  return Array.from(ids);
+}
+const useTextCssVars = (layerKey, reg, input) => {
+  const varIds = react.useMemo(() => {
+    const fromContent = extractStyleVarIds(input.content);
+    const fromHighlight = extractStyleVarIds(input.highlightStylesString);
+    return [.../* @__PURE__ */ new Set([...fromContent, ...fromHighlight])];
+  }, [input.content, input.highlightStylesString]);
+  const variableKeys = react.useMemo(
+    () => varIds.map(
+      (id) => core.keyOfEntity({
+        _type: definition.definition.nodes.Variable,
+        _id: id
+      })
+    ),
+    [varIds]
+  );
+  const resolved = useReadVariables(variableKeys);
+  varIds.forEach((id, index) => {
+    var _a;
+    const value = (_a = resolved[index]) == null ? void 0 : _a.value;
+    if (value == null) return;
+    reg.add(`--${id}`, String(value), true);
+  });
+};
 const useHash = (layerKey, manager) => {
   if (!layerKey || !manager) return null;
   const layer = manager.resolve(layerKey);
@@ -2030,6 +2127,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");
@@ -2041,40 +2139,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);
@@ -2257,24 +2328,21 @@ 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);
   const highlight = useTextHighlight(layerKey);
   const content = useTextContent(layerKey);
+  const reg = useStyleRegistrar(layerKey);
+  useLayerStyles(layerKey, { collectStyle, registrar: reg });
+  useTextCssVars(layerKey, reg, {
+    content,
+    highlightStylesString: highlight.stylesString
+  });
+  if (collectStyle) {
+    reg.flush();
+  }
   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
-  };
+  return { hash, events, classnames, content, highlight };
 };
 const Text = ({
   layerKey,
@@ -2297,32 +2365,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
@@ -2341,8 +2399,9 @@ const useCollection = (layerKey, options) => {
   const [sourceValue] = useLayerValue(layerKey, "source", {
     manager: fragmentManager
   });
-  const sourceValues = react$1.useGraphStack(fragmentManager, sourceValue ?? []);
-  const resultValues = (sourceValue ?? []).map(
+  const safeSourceValue = Array.isArray(sourceValue) ? sourceValue : [];
+  const sourceValues = react$1.useGraphStack(fragmentManager, safeSourceValue);
+  const resultValues = safeSourceValue.map(
     (initValue, index) => (
       // Если initValue — объект (пришёл из пропсов через useReadVariables),
       // он уже содержит актуальные значения и имеет приоритет.
@@ -2488,6 +2547,7 @@ const fillArrayItemDefaults = (items, parentDef, manager) => {
 };
 const useExtractProps = (props, manager, parentManager, definitions) => {
   const areaManager = react.useContext(AreaManagerContext);
+  const campaignManager = react.useContext(CampaignManagerContext);
   const globalManager = react.useContext(GlobalManagerContext);
   const arrayVariableKeys = react.useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
@@ -2543,8 +2603,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       const propValue = props[defVar._id];
       if (!definition.isVariableLink(propValue)) continue;
       const resolveManager = parentManager ?? manager;
-      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
-      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
+      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ? campaignManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
       if ((parentVar == null ? void 0 : parentVar.type) !== definition.definition.variableType.Array) continue;
       const items = parentVar.defaultValue;
       if (!Array.isArray(items)) continue;
@@ -2561,7 +2621,15 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
     }
     return { arrayItemKeys: keys, arrayItemManager: itemManager };
-  }, [definitions, manager, parentManager, areaManager, globalManager, props]);
+  }, [
+    definitions,
+    manager,
+    parentManager,
+    campaignManager,
+    areaManager,
+    globalManager,
+    props
+  ]);
   const arrayItemLayers = react$1.useGraphStack(
     arrayItemKeys.length ? arrayItemManager ?? parentManager ?? manager : null,
     arrayItemKeys
@@ -2599,8 +2667,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
       if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
         if (definition.isVariableLink(propValue)) {
-          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
-          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
+          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ? campaignManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
           if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
             const resolvedArray = arrayResolvedByKey[propValue];
             if (Array.isArray(resolvedArray)) {
@@ -2648,6 +2716,7 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     props,
     manager,
     parentManager,
+    campaignManager,
     areaManager,
     globalManager,
     definitions
@@ -2659,12 +2728,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,10 +2746,6 @@ const CollectionItem = ({
     [sourceDefinition]
   );
   const expandedProps = useExtractProps(props, manager, void 0, definitions);
-  const cssVars = react.useMemo(
-    () => toCssCustomProperties(expandedProps),
-    [expandedProps]
-  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
@@ -2690,17 +2758,21 @@ 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" }, children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child }) }, child))
+        }
+      )
     }
   );
 };
@@ -2742,6 +2814,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,
@@ -2773,11 +2846,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", {});
@@ -2800,10 +2875,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,
@@ -2811,6 +2883,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 });
@@ -3228,45 +3328,6 @@ const useSuspenseLoadArea = (globalManager, areaCode, skip) => {
   if (valueOrPromise == null) return null;
   return createSuspenseResource(`area:${areaCode}`, valueOrPromise, cache).read();
 };
-const collectPropertyCssVars = (manager, result) => {
-  if (!(manager == null ? void 0 : manager.$properties)) return;
-  const keys = manager.$properties.getPropertyKeys() ?? [];
-  const processField = (fieldLayer) => {
-    if (!(fieldLayer == null ? void 0 : fieldLayer._id)) return;
-    if (fieldLayer.type === definition.definition.variableType.Object && fieldLayer.fields) {
-      for (const [key, ref] of Object.entries(fieldLayer.fields)) {
-        if (key === "_type" || key === "_id") continue;
-        const child = utils.isObject(ref) ? ref : manager.resolve(ref);
-        if (child) processField(child);
-      }
-      return;
-    }
-    if (fieldLayer.defaultValue != null) {
-      result[`--${fieldLayer._id}`] = String(fieldLayer.defaultValue);
-    }
-  };
-  for (const key of keys) {
-    const layer = manager.resolve(key, { deep: true });
-    if (layer) processField(layer);
-  }
-};
-const useManagerCssProperties = () => {
-  var _a, _b, _c, _d;
-  const globalManager = react.useContext(GlobalManagerContext);
-  const areaManager = react.useContext(AreaManagerContext);
-  react$1.useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _a.key);
-  react$1.useGraph(areaManager, (_b = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _b.key);
-  const globalKeys = ((_c = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _c.getPropertyKeys()) ?? [];
-  const areaKeys = ((_d = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _d.getPropertyKeys()) ?? [];
-  react$1.useGraphStack(globalKeys.length ? globalManager : null, globalKeys);
-  react$1.useGraphStack(areaKeys.length ? areaManager : null, areaKeys);
-  return react.useMemo(() => {
-    const vars = {};
-    collectPropertyCssVars(globalManager, vars);
-    collectPropertyCssVars(areaManager, vars);
-    return vars;
-  }, [globalManager, areaManager, globalKeys.length, areaKeys.length]);
-};
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
@@ -3277,6 +3338,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,
@@ -3298,15 +3363,6 @@ const InstanceInitial = ({
     parentManager,
     definitions
   );
-  const propsCssVars = react.useMemo(
-    () => toCssCustomProperties(expandedProps),
-    [expandedProps]
-  );
-  const managerCssVars = useManagerCssProperties();
-  const cssVars = react.useMemo(
-    () => ({ ...managerCssVars, ...propsCssVars }),
-    [managerCssVars, propsCssVars]
-  );
   useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
   const instanceContextValue = react.useMemo(
     () => ({
@@ -3315,7 +3371,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       props: expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     }),
     [
       instanceProps.layerKey,
@@ -3323,7 +3380,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(InstanceContext.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3331,7 +3389,7 @@ const InstanceInitial = ({
     {
       className: classnames,
       "data-key": instanceProps.layerKey,
-      style: { ...style, ...cssVars },
+      style,
       ...link.linkProps,
       ...events,
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3344,7 +3402,7 @@ const InstanceInitial = ({
         }
       )
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
     Fragment,
     {
       fragmentId,