@fragmentsx/render-react 1.1.2 → 1.1.4

package/dist/index.cjs.js

@@ -392,6 +392,7 @@ const renderMode = createConstants("viewport", "parent", "fixed");
 const interactions = createConstants("click", "mouseover", "appear");
 const eventMode = createConstants("goal", "callback", "tracker");
 const scopeTypes = createConstants(
+  "AreaScope",
   "InstanceScope",
   "FragmentScope",
   "CollectionScope",
@@ -1282,7 +1283,8 @@ const SceneSchema = /* @__PURE__ */ object({
   }),
   visible: layerField(/* @__PURE__ */ boolean(), { fallback: true, variable: true }),
   rotate: layerField(/* @__PURE__ */ number(), { fallback: null }),
-  zIndex: layerField(/* @__PURE__ */ number(), { fallback: -1 })
+  zIndex: layerField(/* @__PURE__ */ number(), { fallback: null }),
+  classnames: layerField(/* @__PURE__ */ array(/* @__PURE__ */ number()), { fallback: [] })
 });
 const FillSchema = /* @__PURE__ */ object({
   fillType: layerField(/* @__PURE__ */ picklist(Object.keys(paintMode)), {
@@ -1429,7 +1431,7 @@ const TextSchema = /* @__PURE__ */ object({
     fallback: ""
   }),
   whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
-    fallback: whiteSpace.pre
+    fallback: whiteSpace.normal
   }),
   textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
   parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
@@ -1551,6 +1553,7 @@ const StringVariableSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
   isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  isRich: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
 const EventVariableSchema = /* @__PURE__ */ object({
@@ -2194,6 +2197,8 @@ function isFiniteNumber(value) {
 }
 var setKey$1 = (v2) => `$${v2}`;
 function hashGenerator(layerKey) {
+  if (!(layerKey == null ? void 0 : layerKey.length))
+    return layerKey;
   let hash = 0;
   for (let i2 = 0; i2 < layerKey.length; i2++) {
     hash = (hash << 5) - hash + layerKey.charCodeAt(i2);
@@ -2230,7 +2235,7 @@ const useGlobalManager = (globalManager) => {
     setRenderTarget
   };
 };
-const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
   var _a;
   const {
     fragmentsGraph,
@@ -2321,7 +2326,7 @@ const cloneLayer = (manager, layer, externalProps = {}, _parent) => {
         _type: layerGraph._type,
         overrideFrom: setKey(layerKey),
         parent: setKey(layerParent),
-        ...(layerGraph == null ? void 0 : layerGraph._type) === index.nodes.Instance ? pick(layerGraph, "fragment") : {},
+        ...(layerGraph == null ? void 0 : layerGraph._type) === index.nodes.Instance ? pick(layerGraph, "fragment", "props") : {},
         ...externalProps
       },
       true
@@ -2853,7 +2858,7 @@ const useLayerSizeValue = (layerKey, sizeType) => {
         return "100%";
       }
       if (autoSizes.includes(valueType)) {
-        return layerNode._type === index.nodes.Instance ? "auto" : "min-content";
+        return layerNode._type === index.nodes.Instance ? "auto" : "fit-content";
       }
       if (valueType === index.sizing.Relative) {
         return `${value}%`;
@@ -2931,13 +2936,14 @@ const useLayerBackground = (layerKey) => {
     "solidFill",
     fragmentManager
   );
-  const [imageFill, , { cssVariableValue: cssImageFill }] = useLayerValue(
+  const [imageFill, , cssImageFillOptions] = useLayerValue(
     layerKey,
     "imageFill",
     fragmentManager
   );
+  const imageSizeLayerKey = (cssImageFillOptions == null ? void 0 : cssImageFillOptions.isVariable) ? cssImageFillOptions == null ? void 0 : cssImageFillOptions.rawValue : layerKey;
   const [, , { cssVariableValue: cssImageSize }] = useLayerValue(
-    layerKey,
+    imageSizeLayerKey,
     "imageSize",
     fragmentManager
   );
@@ -2947,7 +2953,7 @@ const useLayerBackground = (layerKey) => {
         background: cssSolidFill
       };
     }
-    if (fillType === index.paintMode.Image && cssImageFill) {
+    if (fillType === index.paintMode.Image && cssImageFillOptions.cssVariableValue) {
       return {
         background: `url(${imageFill})`,
         backgroundSize: cssImageSize == null ? void 0 : cssImageSize.toLowerCase(),
@@ -2957,7 +2963,12 @@ const useLayerBackground = (layerKey) => {
     return {
       background: "transparent"
     };
-  }, [fillType, cssImageFill, cssSolidFill]);
+  }, [
+    fillType,
+    cssImageFillOptions.cssVariableValue,
+    cssSolidFill,
+    cssImageSize
+  ]);
 };
 const useLayerDisplay = (layerKey) => {
   const { manager } = require$$0.useContext(FragmentContext);
@@ -3010,7 +3021,11 @@ const useCalcLayerBorder = (layerKey) => {
 const useLayerBorder = (layerKey) => {
   const { manager: fragmentManager } = require$$0.useContext(FragmentContext);
   const [borderWidth] = useLayerValue(layerKey, "borderWidth", fragmentManager);
-  const [borderColor] = useLayerValue(layerKey, "borderColor", fragmentManager);
+  const [, , { cssVariableValue: borderColor }] = useLayerValue(
+    layerKey,
+    "borderColor",
+    fragmentManager
+  );
   const calcBorder = useCalcLayerBorder(layerKey);
   return require$$0.useMemo(
     () => calcBorder(borderWidth, borderColor),
@@ -3091,12 +3106,14 @@ const useLayerStyles = (layerKey) => {
     );
     const [whiteSpace2] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
     const textStyles = useLayerTextStyles(layerKey);
+    const [overflow2] = useLayerValue(layerKey, "overflow", fragmentManager);
     return {
       // ...(props ?? {}),
       ...border,
       ...background,
       ...position,
       opacity,
+      overflow: overflow2,
       rotate: isValue(rotate) ? `${rotate}deg` : null,
       "border-radius": borderRadius,
       "white-space": whiteSpace2,
@@ -3121,12 +3138,6 @@ const useFragmentProperties = (fragmentId) => {
     manager
   };
 };
-const useHash = (layerKey, manager) => {
-  if (!layerKey || !manager) return null;
-  const layer = manager.resolve(layerKey);
-  const overrideFrom = getKey(layer == null ? void 0 : layer.overrideFrom);
-  return hashGenerator(overrideFrom ?? layerKey);
-};
 const useInstanceProps = (instanceProps) => {
   const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
   const { manager: loadedManager } = useFragmentManager(
@@ -3160,10 +3171,32 @@ const useInstanceProps = (instanceProps) => {
     cssProps: getCssVariables(mergedProps)
   };
 };
+const useLayerScopes = (fragmentManager, layerKey) => {
+  var _a, _b, _c, _d;
+  if (!fragmentManager || !layerKey) return [];
+  const layerParents = getAllParents(fragmentManager, layerKey);
+  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
+  layerParents.forEach((parent) => {
+    var _a2, _b2, _c2, _d2;
+    const parentLink = core.keyOfEntity(parent);
+    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
+      resultScopes.push((_d2 = (_c2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c2.scopes) == null ? void 0 : _d2.get(parentLink));
+    }
+  });
+  const areaScope = (_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get("Area");
+  if (areaScope) {
+    resultScopes.push(areaScope);
+  }
+  return resultScopes;
+};
 const useLayerInteractions = (layerKey, options2) => {
   const pause = (options2 == null ? void 0 : options2.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
   const { manager: fragmentManager } = require$$0.useContext(FragmentContext);
+  const scopes = useLayerScopes(fragmentManager, layerKey);
+  const areaScope = scopes.find(
+    (scope) => (scope == null ? void 0 : scope.type) === index.scopeTypes.AreaScope
+  );
   const [interactions2] = useLayerValue(
     layerKey,
     "interactions",
@@ -3173,10 +3206,14 @@ const useLayerInteractions = (layerKey, options2) => {
   const fireEvent = require$$0.useCallback(
     (eventLink) => {
       var _a, _b, _c, _d;
+      if (!areaScope) return null;
       const event = fragmentManager.resolve(eventLink);
       const { value: eventValue } = readVariable(eventLink);
-      if ((event == null ? void 0 : event.mode) === index.eventMode.goal && (eventValue == null ? void 0 : eventValue.code)) {
-        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, eventValue == null ? void 0 : eventValue.code);
+      if ((event == null ? void 0 : event.mode) === index.eventMode.goal && (eventValue == null ? void 0 : eventValue.goalId)) {
+        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, {
+          goalId: eventValue == null ? void 0 : eventValue.goalId,
+          ...pick(areaScope, "variantId", "campaignId", "areaId")
+        });
       }
       if ((event == null ? void 0 : event.mode) === index.eventMode.tracker && eventValue) {
         (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.trackAdPixel) == null ? void 0 : _d.call(_c, eventValue);
@@ -3185,13 +3222,13 @@ const useLayerInteractions = (layerKey, options2) => {
         eventValue();
       }
     },
-    [globalManager, fragmentManager]
+    [globalManager, fragmentManager, areaScope]
   );
   require$$0.useEffect(() => {
     if (!pause && Array.isArray(interactions2)) {
       interactions2 == null ? void 0 : interactions2.filter((el) => (el == null ? void 0 : el.on) === index.interactions.appear).map((el) => el.event).forEach(fireEvent);
     }
-  }, [pause]);
+  }, [pause, areaScope]);
   return require$$0.useMemo(() => {
     if (!pause && !interactions2 || !Array.isArray(interactions2)) return {};
     if (pause) return {};
@@ -3203,6 +3240,22 @@ const useLayerInteractions = (layerKey, options2) => {
     };
   }, [interactions2, fireEvent, pause]);
 };
+const useHash = (layerKey, manager) => {
+  if (!layerKey || !manager) return null;
+  const layer = manager.resolve(layerKey);
+  const overrideFrom = getKey(layer == null ? void 0 : layer.overrideFrom);
+  return hashGenerator(overrideFrom ?? layerKey);
+};
+const useClassnames = (layerKey, manager) => {
+  const hash = useHash(layerKey, manager);
+  const [classnames] = useLayerValue(layerKey, "classnames", { manager });
+  if (!layerKey || !manager) return null;
+  let base = [hash];
+  if (classnames == null ? void 0 : classnames.length) {
+    base = [...base, ...classnames];
+  }
+  return base.join(" ");
+};
 const useInstance = (instanceProps) => {
   const { manager: parentManager } = require$$0.useContext(FragmentContext);
   const [instanceLayer] = y(parentManager, instanceProps.layerKey);
@@ -3214,9 +3267,12 @@ const useInstance = (instanceProps) => {
   const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
   const { props, cssProps } = useInstanceProps(instanceProps);
-  const hash = useHash(instanceProps.layerKey, innerFragmentManager);
+  const classnames = useClassnames(
+    instanceProps.layerKey,
+    innerFragmentManager
+  );
   return {
-    hash,
+    classnames,
     styles: styles2,
     events,
     definitions,
@@ -3312,9 +3368,11 @@ const useFragment = (fragmentId, globalManager) => {
       (_a = fragmentContext.manager) == null ? void 0 : _a.resolve(fragmentContext.fragmentLayerKey),
       (_b = fragmentContext.manager) == null ? void 0 : _b.key
     );
-    mount();
   }
   require$$0.useEffect(() => {
+    if (fragmentContext.manager) {
+      mount();
+    }
     return () => {
       unmount();
     };
@@ -3359,7 +3417,7 @@ const useFrame = (layerKey, options2) => {
   const layer = fragmentManager.entityOfKey(layerKey);
   const styles2 = useLayerStyles(layerKey);
   const children = useLayerChildren(layerKey);
-  const hash = useHash(layerKey, fragmentManager);
+  const classnames = useClassnames(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options2);
   const link = useLayerLink(layerKey);
@@ -3369,7 +3427,7 @@ const useFrame = (layerKey, options2) => {
   return {
     Tag: (link == null ? void 0 : link.isLink) ? (options2 == null ? void 0 : options2.FrameTag) ?? "a" : (options2 == null ? void 0 : options2.FrameTag) ?? "div",
     type: layer == null ? void 0 : layer._type,
-    hash,
+    classnames,
     styles: {},
     //isBrowser ? pick(styles, "background") : {},
     children,
@@ -3422,14 +3480,14 @@ const useTextAttributes = (layerKey, options2) => {
   const { manager: fragmentManager } = require$$0.useContext(FragmentContext);
   const styles2 = useLayerStyles(layerKey);
   const content = useTextContent(layerKey);
-  const hash = useHash(layerKey, fragmentManager);
+  const classnames = useClassnames(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   if (collectStyle) {
     addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
   }
   return {
     styles: styles2,
-    hash,
+    classnames,
     content
   };
 };
@@ -3515,19 +3573,6 @@ function useInjectedStyle() {
     injectStyle
   };
 }
-const useLayerScopes = (fragmentManager, layerKey) => {
-  var _a, _b;
-  const layerParents = getAllParents(fragmentManager, layerKey);
-  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
-  layerParents.forEach((parent) => {
-    var _a2, _b2, _c, _d;
-    const parentLink = core.keyOfEntity(parent);
-    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
-      resultScopes.push((_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get(parentLink));
-    }
-  });
-  return resultScopes;
-};
 function cssToJsStyle(cssKey) {
   return cssKey.replace(/-([a-z])/g, (_2, letter) => letter.toUpperCase());
 }
@@ -3555,6 +3600,10 @@ const useArea = (options2) => {
     options2 == null ? void 0 : options2.globalManager
   );
   const [areaData, setAreaData] = require$$0.useState(queryArea(options2.areaCode));
+  const { manager: fragmentManager } = useFragmentManager(
+    areaData.fragmentId,
+    resultGlobalManager
+  );
   const resultProps = require$$0.useMemo(
     () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options2 == null ? void 0 : options2.props) ?? [] }),
     [areaData, options2]
@@ -3569,6 +3618,7 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    fragmentManager,
     props: resultProps,
     globalManager: resultGlobalManager
   };
@@ -3603,8 +3653,8 @@ const Text = ({
   collectStyle,
   ...restProps
 }) => {
-  const { hash, content } = useTextAttributes(layerKey, { collectStyle });
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: hash, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const { classnames, content } = useTextAttributes(layerKey, { collectStyle });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: classnames, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: styles.text,
@@ -3634,7 +3684,7 @@ const Collection = ({
     fragmentManager,
     styles: styles2,
     sourceDefinition,
-    hash,
+    classnames,
     source,
     children,
     sourceValue
@@ -3655,7 +3705,7 @@ const Collection = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         FrameTag,
         {
-          className: hash,
+          className: classnames,
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
@@ -3693,16 +3743,13 @@ const Frame = ({
   layerKey,
   styles: inputStyles,
   hidden,
-  interactive,
+  pauseInteractions,
   ...restProps
 }) => {
-  const { styles: styles2, hash, children, type, events, linkProps, Tag } = useFrame(
-    layerKey,
-    {
-      ...restProps,
-      pauseInteractions: !interactive
-    }
-  );
+  const { styles: styles2, classnames, children, type, events, linkProps, Tag } = useFrame(layerKey, {
+    ...restProps,
+    pauseInteractions
+  });
   const resultStyles = inputStyles ?? styles2;
   const isMounted = useMounted();
   if (isMounted && hidden) {
@@ -3724,7 +3771,7 @@ const Frame = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag,
     {
-      className: hash,
+      className: classnames,
       "data-key": layerKey,
       style: {
         ...resultStyles,
@@ -3740,7 +3787,7 @@ const Frame = ({
 const FragmentInternal = ({
   fragmentId,
   globalManager,
-  interactive,
+  pauseInteractions,
   collectStyle,
   FrameElement = Frame
 }) => {
@@ -3772,7 +3819,7 @@ const FragmentInternal = ({
         FrameElement,
         {
           layerKey: childLink,
-          interactive,
+          pauseInteractions,
           collectStyle,
           hidden: !isResize && !isPrimary && !isTopFragment,
           style: { display: isPrimary ? null : "none" }
@@ -3797,7 +3844,7 @@ const Fragment = (props) => {
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
-  interactive = true,
+  pauseInteractions,
   FrameElement,
   ...instanceProps
 }) => {
@@ -3811,13 +3858,13 @@ const InstanceInitial = ({
     parentManager,
     events,
     props,
-    hash,
+    classnames,
     innerManager,
     definitions,
     globalManager
   } = useInstance({
     ...instanceProps,
-    pauseInteractions: !interactive
+    pauseInteractions
   });
   if (ssr) {
     (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadFragment) == null ? void 0 : _c.call(_b, fragmentId, { suspense: true });
@@ -3848,7 +3895,7 @@ const InstanceInitial = ({
           children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
             Tag,
             {
-              className: hash,
+              className: classnames,
               "data-key": instanceProps.layerKey,
               style: { ...style, ...cssProps },
               ...link.linkProps,
@@ -3859,7 +3906,7 @@ const InstanceInitial = ({
                   fragmentId,
                   globalManager,
                   FrameElement,
-                  interactive
+                  pauseInteractions
                 }
               )
             }
@@ -3869,7 +3916,7 @@ const InstanceInitial = ({
               fragmentId,
               globalManager,
               FrameElement,
-              interactive
+              pauseInteractions
             }
           ) })
         }
@@ -3892,7 +3939,18 @@ const AreaInitial = (areaProps) => {
   }
   const areaData = useArea(areaProps);
   if (!areaData) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Scope,
+    {
+      fragmentManager: areaData.fragmentManager,
+      layerKey: "Area",
+      value: {
+        type: definition.definition.scopeTypes.AreaScope,
+        ...areaData ?? {}
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props })
+    }
+  );
 };
 const Area = (props) => {
   return "globalManager" in props ? /* @__PURE__ */ jsxRuntime.jsx(require$$0.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalManager, { value: props.globalManager, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(require$$0.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AreaInitial, { ...props }) });

package/dist/index.es.js

@@ -390,6 +390,7 @@ const renderMode = createConstants("viewport", "parent", "fixed");
 const interactions = createConstants("click", "mouseover", "appear");
 const eventMode = createConstants("goal", "callback", "tracker");
 const scopeTypes = createConstants(
+  "AreaScope",
   "InstanceScope",
   "FragmentScope",
   "CollectionScope",
@@ -1280,7 +1281,8 @@ const SceneSchema = /* @__PURE__ */ object({
   }),
   visible: layerField(/* @__PURE__ */ boolean(), { fallback: true, variable: true }),
   rotate: layerField(/* @__PURE__ */ number(), { fallback: null }),
-  zIndex: layerField(/* @__PURE__ */ number(), { fallback: -1 })
+  zIndex: layerField(/* @__PURE__ */ number(), { fallback: null }),
+  classnames: layerField(/* @__PURE__ */ array(/* @__PURE__ */ number()), { fallback: [] })
 });
 const FillSchema = /* @__PURE__ */ object({
   fillType: layerField(/* @__PURE__ */ picklist(Object.keys(paintMode)), {
@@ -1427,7 +1429,7 @@ const TextSchema = /* @__PURE__ */ object({
     fallback: ""
   }),
   whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
-    fallback: whiteSpace.pre
+    fallback: whiteSpace.normal
   }),
   textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
   parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
@@ -1549,6 +1551,7 @@ const StringVariableSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
   isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  isRich: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
 const EventVariableSchema = /* @__PURE__ */ object({
@@ -2192,6 +2195,8 @@ function isFiniteNumber(value) {
 }
 var setKey$1 = (v2) => `$${v2}`;
 function hashGenerator(layerKey) {
+  if (!(layerKey == null ? void 0 : layerKey.length))
+    return layerKey;
   let hash = 0;
   for (let i2 = 0; i2 < layerKey.length; i2++) {
     hash = (hash << 5) - hash + layerKey.charCodeAt(i2);
@@ -2228,7 +2233,7 @@ const useGlobalManager = (globalManager) => {
     setRenderTarget
   };
 };
-const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
   var _a;
   const {
     fragmentsGraph,
@@ -2319,7 +2324,7 @@ const cloneLayer = (manager, layer, externalProps = {}, _parent) => {
         _type: layerGraph._type,
         overrideFrom: setKey(layerKey),
         parent: setKey(layerParent),
-        ...(layerGraph == null ? void 0 : layerGraph._type) === index.nodes.Instance ? pick(layerGraph, "fragment") : {},
+        ...(layerGraph == null ? void 0 : layerGraph._type) === index.nodes.Instance ? pick(layerGraph, "fragment", "props") : {},
         ...externalProps
       },
       true
@@ -2851,7 +2856,7 @@ const useLayerSizeValue = (layerKey, sizeType) => {
         return "100%";
       }
       if (autoSizes.includes(valueType)) {
-        return layerNode._type === index.nodes.Instance ? "auto" : "min-content";
+        return layerNode._type === index.nodes.Instance ? "auto" : "fit-content";
       }
       if (valueType === index.sizing.Relative) {
         return `${value}%`;
@@ -2929,13 +2934,14 @@ const useLayerBackground = (layerKey) => {
     "solidFill",
     fragmentManager
   );
-  const [imageFill, , { cssVariableValue: cssImageFill }] = useLayerValue(
+  const [imageFill, , cssImageFillOptions] = useLayerValue(
     layerKey,
     "imageFill",
     fragmentManager
   );
+  const imageSizeLayerKey = (cssImageFillOptions == null ? void 0 : cssImageFillOptions.isVariable) ? cssImageFillOptions == null ? void 0 : cssImageFillOptions.rawValue : layerKey;
   const [, , { cssVariableValue: cssImageSize }] = useLayerValue(
-    layerKey,
+    imageSizeLayerKey,
     "imageSize",
     fragmentManager
   );
@@ -2945,7 +2951,7 @@ const useLayerBackground = (layerKey) => {
         background: cssSolidFill
       };
     }
-    if (fillType === index.paintMode.Image && cssImageFill) {
+    if (fillType === index.paintMode.Image && cssImageFillOptions.cssVariableValue) {
       return {
         background: `url(${imageFill})`,
         backgroundSize: cssImageSize == null ? void 0 : cssImageSize.toLowerCase(),
@@ -2955,7 +2961,12 @@ const useLayerBackground = (layerKey) => {
     return {
       background: "transparent"
     };
-  }, [fillType, cssImageFill, cssSolidFill]);
+  }, [
+    fillType,
+    cssImageFillOptions.cssVariableValue,
+    cssSolidFill,
+    cssImageSize
+  ]);
 };
 const useLayerDisplay = (layerKey) => {
   const { manager } = useContext(FragmentContext);
@@ -3008,7 +3019,11 @@ const useCalcLayerBorder = (layerKey) => {
 const useLayerBorder = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const [borderWidth] = useLayerValue(layerKey, "borderWidth", fragmentManager);
-  const [borderColor] = useLayerValue(layerKey, "borderColor", fragmentManager);
+  const [, , { cssVariableValue: borderColor }] = useLayerValue(
+    layerKey,
+    "borderColor",
+    fragmentManager
+  );
   const calcBorder = useCalcLayerBorder(layerKey);
   return useMemo(
     () => calcBorder(borderWidth, borderColor),
@@ -3089,12 +3104,14 @@ const useLayerStyles = (layerKey) => {
     );
     const [whiteSpace2] = useLayerValue(layerKey, "whiteSpace", fragmentManager);
     const textStyles = useLayerTextStyles(layerKey);
+    const [overflow2] = useLayerValue(layerKey, "overflow", fragmentManager);
     return {
       // ...(props ?? {}),
       ...border,
       ...background,
       ...position,
       opacity,
+      overflow: overflow2,
       rotate: isValue(rotate) ? `${rotate}deg` : null,
       "border-radius": borderRadius,
       "white-space": whiteSpace2,
@@ -3119,12 +3136,6 @@ const useFragmentProperties = (fragmentId) => {
     manager
   };
 };
-const useHash = (layerKey, manager) => {
-  if (!layerKey || !manager) return null;
-  const layer = manager.resolve(layerKey);
-  const overrideFrom = getKey(layer == null ? void 0 : layer.overrideFrom);
-  return hashGenerator(overrideFrom ?? layerKey);
-};
 const useInstanceProps = (instanceProps) => {
   const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
   const { manager: loadedManager } = useFragmentManager(
@@ -3158,10 +3169,32 @@ const useInstanceProps = (instanceProps) => {
     cssProps: getCssVariables(mergedProps)
   };
 };
+const useLayerScopes = (fragmentManager, layerKey) => {
+  var _a, _b, _c, _d;
+  if (!fragmentManager || !layerKey) return [];
+  const layerParents = getAllParents(fragmentManager, layerKey);
+  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
+  layerParents.forEach((parent) => {
+    var _a2, _b2, _c2, _d2;
+    const parentLink = keyOfEntity(parent);
+    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
+      resultScopes.push((_d2 = (_c2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c2.scopes) == null ? void 0 : _d2.get(parentLink));
+    }
+  });
+  const areaScope = (_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get("Area");
+  if (areaScope) {
+    resultScopes.push(areaScope);
+  }
+  return resultScopes;
+};
 const useLayerInteractions = (layerKey, options2) => {
   const pause = (options2 == null ? void 0 : options2.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
   const { manager: fragmentManager } = useContext(FragmentContext);
+  const scopes = useLayerScopes(fragmentManager, layerKey);
+  const areaScope = scopes.find(
+    (scope) => (scope == null ? void 0 : scope.type) === index.scopeTypes.AreaScope
+  );
   const [interactions2] = useLayerValue(
     layerKey,
     "interactions",
@@ -3171,10 +3204,14 @@ const useLayerInteractions = (layerKey, options2) => {
   const fireEvent = useCallback(
     (eventLink) => {
       var _a, _b, _c, _d;
+      if (!areaScope) return null;
       const event = fragmentManager.resolve(eventLink);
       const { value: eventValue } = readVariable(eventLink);
-      if ((event == null ? void 0 : event.mode) === index.eventMode.goal && (eventValue == null ? void 0 : eventValue.code)) {
-        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, eventValue == null ? void 0 : eventValue.code);
+      if ((event == null ? void 0 : event.mode) === index.eventMode.goal && (eventValue == null ? void 0 : eventValue.goalId)) {
+        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, {
+          goalId: eventValue == null ? void 0 : eventValue.goalId,
+          ...pick(areaScope, "variantId", "campaignId", "areaId")
+        });
       }
       if ((event == null ? void 0 : event.mode) === index.eventMode.tracker && eventValue) {
         (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.trackAdPixel) == null ? void 0 : _d.call(_c, eventValue);
@@ -3183,13 +3220,13 @@ const useLayerInteractions = (layerKey, options2) => {
         eventValue();
       }
     },
-    [globalManager, fragmentManager]
+    [globalManager, fragmentManager, areaScope]
   );
   useEffect(() => {
     if (!pause && Array.isArray(interactions2)) {
       interactions2 == null ? void 0 : interactions2.filter((el) => (el == null ? void 0 : el.on) === index.interactions.appear).map((el) => el.event).forEach(fireEvent);
     }
-  }, [pause]);
+  }, [pause, areaScope]);
   return useMemo(() => {
     if (!pause && !interactions2 || !Array.isArray(interactions2)) return {};
     if (pause) return {};
@@ -3201,6 +3238,22 @@ const useLayerInteractions = (layerKey, options2) => {
     };
   }, [interactions2, fireEvent, pause]);
 };
+const useHash = (layerKey, manager) => {
+  if (!layerKey || !manager) return null;
+  const layer = manager.resolve(layerKey);
+  const overrideFrom = getKey(layer == null ? void 0 : layer.overrideFrom);
+  return hashGenerator(overrideFrom ?? layerKey);
+};
+const useClassnames = (layerKey, manager) => {
+  const hash = useHash(layerKey, manager);
+  const [classnames] = useLayerValue(layerKey, "classnames", { manager });
+  if (!layerKey || !manager) return null;
+  let base = [hash];
+  if (classnames == null ? void 0 : classnames.length) {
+    base = [...base, ...classnames];
+  }
+  return base.join(" ");
+};
 const useInstance = (instanceProps) => {
   const { manager: parentManager } = useContext(FragmentContext);
   const [instanceLayer] = y(parentManager, instanceProps.layerKey);
@@ -3212,9 +3265,12 @@ const useInstance = (instanceProps) => {
   const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
   const { props, cssProps } = useInstanceProps(instanceProps);
-  const hash = useHash(instanceProps.layerKey, innerFragmentManager);
+  const classnames = useClassnames(
+    instanceProps.layerKey,
+    innerFragmentManager
+  );
   return {
-    hash,
+    classnames,
     styles: styles2,
     events,
     definitions,
@@ -3310,9 +3366,11 @@ const useFragment = (fragmentId, globalManager) => {
       (_a = fragmentContext.manager) == null ? void 0 : _a.resolve(fragmentContext.fragmentLayerKey),
       (_b = fragmentContext.manager) == null ? void 0 : _b.key
     );
-    mount();
   }
   useEffect(() => {
+    if (fragmentContext.manager) {
+      mount();
+    }
     return () => {
       unmount();
     };
@@ -3357,7 +3415,7 @@ const useFrame = (layerKey, options2) => {
   const layer = fragmentManager.entityOfKey(layerKey);
   const styles2 = useLayerStyles(layerKey);
   const children = useLayerChildren(layerKey);
-  const hash = useHash(layerKey, fragmentManager);
+  const classnames = useClassnames(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options2);
   const link = useLayerLink(layerKey);
@@ -3367,7 +3425,7 @@ const useFrame = (layerKey, options2) => {
   return {
     Tag: (link == null ? void 0 : link.isLink) ? (options2 == null ? void 0 : options2.FrameTag) ?? "a" : (options2 == null ? void 0 : options2.FrameTag) ?? "div",
     type: layer == null ? void 0 : layer._type,
-    hash,
+    classnames,
     styles: {},
     //isBrowser ? pick(styles, "background") : {},
     children,
@@ -3420,14 +3478,14 @@ const useTextAttributes = (layerKey, options2) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const styles2 = useLayerStyles(layerKey);
   const content = useTextContent(layerKey);
-  const hash = useHash(layerKey, fragmentManager);
+  const classnames = useClassnames(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   if (collectStyle) {
     addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
   }
   return {
     styles: styles2,
-    hash,
+    classnames,
     content
   };
 };
@@ -3513,19 +3571,6 @@ function useInjectedStyle() {
     injectStyle
   };
 }
-const useLayerScopes = (fragmentManager, layerKey) => {
-  var _a, _b;
-  const layerParents = getAllParents(fragmentManager, layerKey);
-  const resultScopes = [(_b = (_a = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a.scopes) == null ? void 0 : _b.get(void 0)];
-  layerParents.forEach((parent) => {
-    var _a2, _b2, _c, _d;
-    const parentLink = keyOfEntity(parent);
-    if ((_b2 = (_a2 = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _a2.scopes) == null ? void 0 : _b2.has(parentLink)) {
-      resultScopes.push((_d = (_c = fragmentManager == null ? void 0 : fragmentManager.$scopes) == null ? void 0 : _c.scopes) == null ? void 0 : _d.get(parentLink));
-    }
-  });
-  return resultScopes;
-};
 function cssToJsStyle(cssKey) {
   return cssKey.replace(/-([a-z])/g, (_2, letter) => letter.toUpperCase());
 }
@@ -3553,6 +3598,10 @@ const useArea = (options2) => {
     options2 == null ? void 0 : options2.globalManager
   );
   const [areaData, setAreaData] = useState(queryArea(options2.areaCode));
+  const { manager: fragmentManager } = useFragmentManager(
+    areaData.fragmentId,
+    resultGlobalManager
+  );
   const resultProps = useMemo(
     () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options2 == null ? void 0 : options2.props) ?? [] }),
     [areaData, options2]
@@ -3567,6 +3616,7 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    fragmentManager,
     props: resultProps,
     globalManager: resultGlobalManager
   };
@@ -3601,8 +3651,8 @@ const Text = ({
   collectStyle,
   ...restProps
 }) => {
-  const { hash, content } = useTextAttributes(layerKey, { collectStyle });
-  return /* @__PURE__ */ jsx(Tag, { className: hash, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsx(
+  const { classnames, content } = useTextAttributes(layerKey, { collectStyle });
+  return /* @__PURE__ */ jsx(Tag, { className: classnames, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: styles.text,
@@ -3632,7 +3682,7 @@ const Collection = ({
     fragmentManager,
     styles: styles2,
     sourceDefinition,
-    hash,
+    classnames,
     source,
     children,
     sourceValue
@@ -3653,7 +3703,7 @@ const Collection = ({
       children: /* @__PURE__ */ jsx(
         FrameTag,
         {
-          className: hash,
+          className: classnames,
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
@@ -3691,16 +3741,13 @@ const Frame = ({
   layerKey,
   styles: inputStyles,
   hidden,
-  interactive,
+  pauseInteractions,
   ...restProps
 }) => {
-  const { styles: styles2, hash, children, type, events, linkProps, Tag } = useFrame(
-    layerKey,
-    {
-      ...restProps,
-      pauseInteractions: !interactive
-    }
-  );
+  const { styles: styles2, classnames, children, type, events, linkProps, Tag } = useFrame(layerKey, {
+    ...restProps,
+    pauseInteractions
+  });
   const resultStyles = inputStyles ?? styles2;
   const isMounted = useMounted();
   if (isMounted && hidden) {
@@ -3722,7 +3769,7 @@ const Frame = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
-      className: hash,
+      className: classnames,
       "data-key": layerKey,
       style: {
         ...resultStyles,
@@ -3738,7 +3785,7 @@ const Frame = ({
 const FragmentInternal = ({
   fragmentId,
   globalManager,
-  interactive,
+  pauseInteractions,
   collectStyle,
   FrameElement = Frame
 }) => {
@@ -3770,7 +3817,7 @@ const FragmentInternal = ({
         FrameElement,
         {
           layerKey: childLink,
-          interactive,
+          pauseInteractions,
           collectStyle,
           hidden: !isResize && !isPrimary && !isTopFragment,
           style: { display: isPrimary ? null : "none" }
@@ -3795,7 +3842,7 @@ const Fragment = (props) => {
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
-  interactive = true,
+  pauseInteractions,
   FrameElement,
   ...instanceProps
 }) => {
@@ -3809,13 +3856,13 @@ const InstanceInitial = ({
     parentManager,
     events,
     props,
-    hash,
+    classnames,
     innerManager,
     definitions,
     globalManager
   } = useInstance({
     ...instanceProps,
-    pauseInteractions: !interactive
+    pauseInteractions
   });
   if (ssr) {
     (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadFragment) == null ? void 0 : _c.call(_b, fragmentId, { suspense: true });
@@ -3846,7 +3893,7 @@ const InstanceInitial = ({
           children: parentManager ? /* @__PURE__ */ jsx(
             Tag,
             {
-              className: hash,
+              className: classnames,
               "data-key": instanceProps.layerKey,
               style: { ...style, ...cssProps },
               ...link.linkProps,
@@ -3857,7 +3904,7 @@ const InstanceInitial = ({
                   fragmentId,
                   globalManager,
                   FrameElement,
-                  interactive
+                  pauseInteractions
                 }
               )
             }
@@ -3867,7 +3914,7 @@ const InstanceInitial = ({
               fragmentId,
               globalManager,
               FrameElement,
-              interactive
+              pauseInteractions
             }
           ) })
         }
@@ -3890,7 +3937,18 @@ const AreaInitial = (areaProps) => {
   }
   const areaData = useArea(areaProps);
   if (!areaData) return null;
-  return /* @__PURE__ */ jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props });
+  return /* @__PURE__ */ jsx(
+    Scope,
+    {
+      fragmentManager: areaData.fragmentManager,
+      layerKey: "Area",
+      value: {
+        type: definition.scopeTypes.AreaScope,
+        ...areaData ?? {}
+      },
+      children: /* @__PURE__ */ jsx(Instance, { fragmentId: areaData.fragmentId, props: areaData == null ? void 0 : areaData.props })
+    }
+  );
 };
 const Area = (props) => {
   return "globalManager" in props ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(GlobalManager, { value: props.globalManager, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AreaInitial, { ...props }) });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "files": [
     "dist"