@fragmentsx/render-web 0.1.2 → 0.1.4

package/dist/index.cjs.js

@@ -734,6 +734,7 @@ const renderMode$1 = createConstants$1("viewport", "parent", "fixed");
 const interactions$1 = createConstants$1("click", "mouseover", "appear");
 const eventMode$1 = createConstants$1("goal", "callback", "tracker");
 const scopeTypes$1 = createConstants$1(
+  "AreaScope",
   "InstanceScope",
   "FragmentScope",
   "CollectionScope",
@@ -1578,7 +1579,8 @@ const SceneSchema$1 = /* @__PURE__ */ object$1({
   }),
   visible: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: true, variable: true }),
   rotate: layerField$1(/* @__PURE__ */ number$1(), { fallback: null }),
-  zIndex: layerField$1(/* @__PURE__ */ number$1(), { fallback: -1 })
+  zIndex: layerField$1(/* @__PURE__ */ number$1(), { fallback: null }),
+  classnames: layerField$1(/* @__PURE__ */ array$1(/* @__PURE__ */ number$1()), { fallback: [] })
 });
 const FillSchema$1 = /* @__PURE__ */ object$1({
   fillType: layerField$1(/* @__PURE__ */ picklist$1(Object.keys(paintMode$1)), {
@@ -1725,7 +1727,7 @@ const LinkSchema$1 = /* @__PURE__ */ object$1({
     fallback: ""
   }),
   whiteSpace: layerField$1(/* @__PURE__ */ enum_$1(Object.keys(whiteSpace$1)), {
-    fallback: whiteSpace$1.pre
+    fallback: whiteSpace$1.normal
   }),
   textAlign: layerField$1(/* @__PURE__ */ string$1(), { fallback: "left" }),
   parent: layerField$1(/* @__PURE__ */ nullable$1(/* @__PURE__ */ string$1()), { overridable: false }),
@@ -1847,6 +1849,7 @@ const LinkSchema$1 = /* @__PURE__ */ object$1({
   required: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: false }),
   placeholder: layerField$1(/* @__PURE__ */ string$1(), { fallback: "" }),
   isTextarea: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: false }),
+  isRich: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: false }),
   ...GraphFieldSchema$1.entries
 });
 /* @__PURE__ */ object$1({
@@ -2058,6 +2061,8 @@ var isBrowser_default$1 = typeof window !== "undefined";
 var getKey$1 = (v2) => isKey$1(v2) ? v2.slice(1) : null;
 var isKey$1 = (v2) => typeof v2 === "string" && v2.startsWith("$");
 function hashGenerator$1(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);
@@ -2083,9 +2088,12 @@ const getAreaListQuery = (areaCodes) => {
   return {
     query: `query($areaCodes: [String!]!) {
   clientAreas(areaCodes: $areaCodes) {
+  areaId
+campaignId
         areaProperties
 projectProperties
         variant {
+        id
           fragment {
               props
               fragment {
@@ -2199,6 +2207,9 @@ const fetchPlugin = (state) => {
           return acc;
         }, area.variant.fragment.props);
         const entity = {
+          areaId: area.areaId,
+          campaignId: area.campaignId,
+          variantId: area.variant.id,
           fragmentId: area.variant.fragment.fragment.id,
           props: resultProps
         };
@@ -2291,10 +2302,14 @@ const makeCss = (styles2, layerResolver) => (layerKey) => {
   };
 };
 const autoInjector = (key, state, graphKey, transformStyles) => {
+  let countDepends = 0;
   const removeStyle = () => {
     if (!isBrowser_default$1) return;
-    const el = document.getElementById(key);
-    if (el) el.remove();
+    countDepends--;
+    if (countDepends <= 0) {
+      const el = document.getElementById(key);
+      if (el) el.remove();
+    }
   };
   const injectStyle = (styles2) => {
     if (!isBrowser_default$1) return;
@@ -2302,6 +2317,7 @@ const autoInjector = (key, state, graphKey, transformStyles) => {
       removeStyle();
       return;
     }
+    countDepends++;
     const existing = document.getElementById(key);
     if (existing && existing.tagName === "STYLE") {
       existing.textContent = styles2;
@@ -2330,6 +2346,7 @@ const autoInjector = (key, state, graphKey, transformStyles) => {
   const mount = () => {
     isMounted = true;
     if (pendingStyles) {
+      countDepends++;
       injectStyle(pendingStyles);
     } else {
       removeStyle();
@@ -2534,6 +2551,7 @@ const fragmentsPlugin = (options) => (state) => {
         [fragmentId]: manager
       }
     });
+    return manager;
   };
   const getManager = (fragmentId) => {
     var _a, _b;
@@ -2556,8 +2574,8 @@ const fragmentsPlugin = (options) => (state) => {
   });
   return state;
 };
-const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: String) {
-  addClientMetric(metric: {metricType: $type, metricValue: $value})
+const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: GoalAchievementPost!) {
+  addClientMetric(metric: {metricType: $type, achievement: $value})
 }`;
 const pendingPixels = /* @__PURE__ */ new Set();
 const sendWithImage = (url) => {
@@ -3519,6 +3537,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",
@@ -4409,7 +4428,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)), {
@@ -4556,7 +4576,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 }),
@@ -4678,6 +4698,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({
@@ -5165,6 +5186,8 @@ function isFiniteNumber(value) {
   return typeof value === "number" && isFinite(value);
 }
 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);
@@ -5201,7 +5224,7 @@ const useGlobalManager = (globalManager) => {
     setRenderTarget
   };
 };
-const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
   var _a;
   const {
     fragmentsGraph,
@@ -5601,7 +5624,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}%`;
@@ -5679,13 +5702,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
   );
@@ -5695,7 +5719,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(),
@@ -5705,7 +5729,12 @@ const useLayerBackground = (layerKey) => {
     return {
       background: "transparent"
     };
-  }, [fillType, cssImageFill, cssSolidFill]);
+  }, [
+    fillType,
+    cssImageFillOptions.cssVariableValue,
+    cssSolidFill,
+    cssImageSize
+  ]);
 };
 const useLayerDisplay = (layerKey) => {
   const { manager } = x$2(FragmentContext);
@@ -5758,7 +5787,11 @@ const useCalcLayerBorder = (layerKey) => {
 const useLayerBorder = (layerKey) => {
   const { manager: fragmentManager } = x$2(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 T$1(
     () => calcBorder(borderWidth, borderColor),
@@ -5839,12 +5872,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,
@@ -5869,12 +5904,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(
@@ -5908,10 +5937,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 } = x$2(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",
@@ -5921,10 +5972,14 @@ const useLayerInteractions = (layerKey, options2) => {
   const fireEvent = q$1(
     (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);
@@ -5933,13 +5988,13 @@ const useLayerInteractions = (layerKey, options2) => {
         eventValue();
       }
     },
-    [globalManager, fragmentManager]
+    [globalManager, fragmentManager, areaScope]
   );
   y$2(() => {
     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 T$1(() => {
     if (!pause && !interactions2 || !Array.isArray(interactions2)) return {};
     if (pause) return {};
@@ -5951,6 +6006,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 } = x$2(FragmentContext);
   const [instanceLayer] = y(parentManager, instanceProps.layerKey);
@@ -5962,9 +6033,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,
@@ -6133,9 +6207,11 @@ const useFragment = (fragmentId, globalManager) => {
       (_a = fragmentContext.manager) == null ? void 0 : _a.resolve(fragmentContext.fragmentLayerKey),
       (_b = fragmentContext.manager) == null ? void 0 : _b.key
     );
-    mount();
   }
   y$2(() => {
+    if (fragmentContext.manager) {
+      mount();
+    }
     return () => {
       unmount();
     };
@@ -6183,7 +6259,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);
@@ -6193,7 +6269,7 @@ const useFrame = (layerKey, options2) => {
   return {
     Tag: (link == null ? void 0 : link.isLink) ? "a" : "div",
     type: layer == null ? void 0 : layer._type,
-    hash,
+    classnames,
     styles: {},
     //isBrowser ? pick(styles, "background") : {},
     children,
@@ -6249,14 +6325,14 @@ const useTextAttributes = (layerKey, options2) => {
   const { manager: fragmentManager } = x$2(FragmentContext);
   const styles2 = useLayerStyles(layerKey);
   const content = useTextContent(layerKey);
-  const hash = useHash(layerKey, fragmentManager);
+  const classnames = useClassnames(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   {
     addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
   }
   return {
     styles: styles2,
-    hash,
+    classnames,
     content
   };
 };
@@ -6355,6 +6431,14 @@ const useArea = (options2) => {
     options2 == null ? void 0 : options2.globalManager
   );
   const [areaData, setAreaData] = d(queryArea(options2.areaCode));
+  const { manager: fragmentManager } = useFragmentManager(
+    areaData.fragmentId,
+    resultGlobalManager
+  );
+  const resultProps = T$1(
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options2 == null ? void 0 : options2.props) ?? [] }),
+    [areaData, options2]
+  );
   y$2(() => {
     (async () => {
       const response = await queryArea(options2.areaCode);
@@ -6365,6 +6449,8 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    fragmentManager,
+    props: resultProps,
     globalManager: resultGlobalManager
   };
 };

package/dist/index.es.js

@@ -733,6 +733,7 @@ const renderMode$1 = createConstants$1("viewport", "parent", "fixed");
 const interactions$1 = createConstants$1("click", "mouseover", "appear");
 const eventMode$1 = createConstants$1("goal", "callback", "tracker");
 const scopeTypes$1 = createConstants$1(
+  "AreaScope",
   "InstanceScope",
   "FragmentScope",
   "CollectionScope",
@@ -1577,7 +1578,8 @@ const SceneSchema$1 = /* @__PURE__ */ object$1({
   }),
   visible: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: true, variable: true }),
   rotate: layerField$1(/* @__PURE__ */ number$1(), { fallback: null }),
-  zIndex: layerField$1(/* @__PURE__ */ number$1(), { fallback: -1 })
+  zIndex: layerField$1(/* @__PURE__ */ number$1(), { fallback: null }),
+  classnames: layerField$1(/* @__PURE__ */ array$1(/* @__PURE__ */ number$1()), { fallback: [] })
 });
 const FillSchema$1 = /* @__PURE__ */ object$1({
   fillType: layerField$1(/* @__PURE__ */ picklist$1(Object.keys(paintMode$1)), {
@@ -1724,7 +1726,7 @@ const LinkSchema$1 = /* @__PURE__ */ object$1({
     fallback: ""
   }),
   whiteSpace: layerField$1(/* @__PURE__ */ enum_$1(Object.keys(whiteSpace$1)), {
-    fallback: whiteSpace$1.pre
+    fallback: whiteSpace$1.normal
   }),
   textAlign: layerField$1(/* @__PURE__ */ string$1(), { fallback: "left" }),
   parent: layerField$1(/* @__PURE__ */ nullable$1(/* @__PURE__ */ string$1()), { overridable: false }),
@@ -1846,6 +1848,7 @@ const LinkSchema$1 = /* @__PURE__ */ object$1({
   required: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: false }),
   placeholder: layerField$1(/* @__PURE__ */ string$1(), { fallback: "" }),
   isTextarea: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: false }),
+  isRich: layerField$1(/* @__PURE__ */ boolean$1(), { fallback: false }),
   ...GraphFieldSchema$1.entries
 });
 /* @__PURE__ */ object$1({
@@ -2057,6 +2060,8 @@ var isBrowser_default$1 = typeof window !== "undefined";
 var getKey$1 = (v2) => isKey$1(v2) ? v2.slice(1) : null;
 var isKey$1 = (v2) => typeof v2 === "string" && v2.startsWith("$");
 function hashGenerator$1(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);
@@ -2082,9 +2087,12 @@ const getAreaListQuery = (areaCodes) => {
   return {
     query: `query($areaCodes: [String!]!) {
   clientAreas(areaCodes: $areaCodes) {
+  areaId
+campaignId
         areaProperties
 projectProperties
         variant {
+        id
           fragment {
               props
               fragment {
@@ -2198,6 +2206,9 @@ const fetchPlugin = (state) => {
           return acc;
         }, area.variant.fragment.props);
         const entity = {
+          areaId: area.areaId,
+          campaignId: area.campaignId,
+          variantId: area.variant.id,
           fragmentId: area.variant.fragment.fragment.id,
           props: resultProps
         };
@@ -2290,10 +2301,14 @@ const makeCss = (styles2, layerResolver) => (layerKey) => {
   };
 };
 const autoInjector = (key, state, graphKey, transformStyles) => {
+  let countDepends = 0;
   const removeStyle = () => {
     if (!isBrowser_default$1) return;
-    const el = document.getElementById(key);
-    if (el) el.remove();
+    countDepends--;
+    if (countDepends <= 0) {
+      const el = document.getElementById(key);
+      if (el) el.remove();
+    }
   };
   const injectStyle = (styles2) => {
     if (!isBrowser_default$1) return;
@@ -2301,6 +2316,7 @@ const autoInjector = (key, state, graphKey, transformStyles) => {
       removeStyle();
       return;
     }
+    countDepends++;
     const existing = document.getElementById(key);
     if (existing && existing.tagName === "STYLE") {
       existing.textContent = styles2;
@@ -2329,6 +2345,7 @@ const autoInjector = (key, state, graphKey, transformStyles) => {
   const mount = () => {
     isMounted = true;
     if (pendingStyles) {
+      countDepends++;
       injectStyle(pendingStyles);
     } else {
       removeStyle();
@@ -2533,6 +2550,7 @@ const fragmentsPlugin = (options) => (state) => {
         [fragmentId]: manager
       }
     });
+    return manager;
   };
   const getManager = (fragmentId) => {
     var _a, _b;
@@ -2555,8 +2573,8 @@ const fragmentsPlugin = (options) => (state) => {
   });
   return state;
 };
-const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: String) {
-  addClientMetric(metric: {metricType: $type, metricValue: $value})
+const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: GoalAchievementPost!) {
+  addClientMetric(metric: {metricType: $type, achievement: $value})
 }`;
 const pendingPixels = /* @__PURE__ */ new Set();
 const sendWithImage = (url) => {
@@ -3518,6 +3536,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",
@@ -4408,7 +4427,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)), {
@@ -4555,7 +4575,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 }),
@@ -4677,6 +4697,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({
@@ -5164,6 +5185,8 @@ function isFiniteNumber(value) {
   return typeof value === "number" && isFinite(value);
 }
 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);
@@ -5200,7 +5223,7 @@ const useGlobalManager = (globalManager) => {
     setRenderTarget
   };
 };
-const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
   var _a;
   const {
     fragmentsGraph,
@@ -5600,7 +5623,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}%`;
@@ -5678,13 +5701,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
   );
@@ -5694,7 +5718,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(),
@@ -5704,7 +5728,12 @@ const useLayerBackground = (layerKey) => {
     return {
       background: "transparent"
     };
-  }, [fillType, cssImageFill, cssSolidFill]);
+  }, [
+    fillType,
+    cssImageFillOptions.cssVariableValue,
+    cssSolidFill,
+    cssImageSize
+  ]);
 };
 const useLayerDisplay = (layerKey) => {
   const { manager } = x$2(FragmentContext);
@@ -5757,7 +5786,11 @@ const useCalcLayerBorder = (layerKey) => {
 const useLayerBorder = (layerKey) => {
   const { manager: fragmentManager } = x$2(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 T$1(
     () => calcBorder(borderWidth, borderColor),
@@ -5838,12 +5871,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,
@@ -5868,12 +5903,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(
@@ -5907,10 +5936,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 } = x$2(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",
@@ -5920,10 +5971,14 @@ const useLayerInteractions = (layerKey, options2) => {
   const fireEvent = q$1(
     (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);
@@ -5932,13 +5987,13 @@ const useLayerInteractions = (layerKey, options2) => {
         eventValue();
       }
     },
-    [globalManager, fragmentManager]
+    [globalManager, fragmentManager, areaScope]
   );
   y$2(() => {
     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 T$1(() => {
     if (!pause && !interactions2 || !Array.isArray(interactions2)) return {};
     if (pause) return {};
@@ -5950,6 +6005,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 } = x$2(FragmentContext);
   const [instanceLayer] = y(parentManager, instanceProps.layerKey);
@@ -5961,9 +6032,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,
@@ -6132,9 +6206,11 @@ const useFragment = (fragmentId, globalManager) => {
       (_a = fragmentContext.manager) == null ? void 0 : _a.resolve(fragmentContext.fragmentLayerKey),
       (_b = fragmentContext.manager) == null ? void 0 : _b.key
     );
-    mount();
   }
   y$2(() => {
+    if (fragmentContext.manager) {
+      mount();
+    }
     return () => {
       unmount();
     };
@@ -6182,7 +6258,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);
@@ -6192,7 +6268,7 @@ const useFrame = (layerKey, options2) => {
   return {
     Tag: (link == null ? void 0 : link.isLink) ? "a" : "div",
     type: layer == null ? void 0 : layer._type,
-    hash,
+    classnames,
     styles: {},
     //isBrowser ? pick(styles, "background") : {},
     children,
@@ -6248,14 +6324,14 @@ const useTextAttributes = (layerKey, options2) => {
   const { manager: fragmentManager } = x$2(FragmentContext);
   const styles2 = useLayerStyles(layerKey);
   const content = useTextContent(layerKey);
-  const hash = useHash(layerKey, fragmentManager);
+  const classnames = useClassnames(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   {
     addLayerStyle(layerKey, styles2, fragmentManager.resolve(layerKey));
   }
   return {
     styles: styles2,
-    hash,
+    classnames,
     content
   };
 };
@@ -6354,6 +6430,14 @@ const useArea = (options2) => {
     options2 == null ? void 0 : options2.globalManager
   );
   const [areaData, setAreaData] = d(queryArea(options2.areaCode));
+  const { manager: fragmentManager } = useFragmentManager(
+    areaData.fragmentId,
+    resultGlobalManager
+  );
+  const resultProps = T$1(
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options2 == null ? void 0 : options2.props) ?? [] }),
+    [areaData, options2]
+  );
   y$2(() => {
     (async () => {
       const response = await queryArea(options2.areaCode);
@@ -6364,6 +6448,8 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    fragmentManager,
+    props: resultProps,
     globalManager: resultGlobalManager
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-web",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "dist"
@@ -24,9 +24,9 @@
   "dependencies": {
     "@graph-state/checkers": "^0.1.2",
     "@graph-state/core": "^0.13.0",
-    "@fragmentsx/client-core": "0.1.2",
+    "@fragmentsx/client-core": "0.1.4",
     "@fragmentsx/definition": "0.1.0",
-    "@fragmentsx/render-core": "0.1.0",
+    "@fragmentsx/render-core": "0.1.1",
     "@fragmentsx/utils": "0.1.0"
   },
   "devDependencies": {