@fragmentsx/render-react 1.1.1 → 1.1.3

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)), {
@@ -2194,6 +2196,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 +2234,7 @@ const useGlobalManager = (globalManager) => {
     setRenderTarget
   };
 };
-const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
   var _a;
   const {
     fragmentsGraph,
@@ -2321,7 +2325,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
@@ -3010,7 +3014,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 +3099,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 +3131,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 +3164,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 +3199,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 +3215,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 +3233,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 +3260,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 +3361,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 +3410,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 +3420,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 +3473,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 +3566,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 +3593,14 @@ 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]
+  );
   require$$0.useEffect(() => {
     (async () => {
       const response = await queryArea(options2.areaCode);
@@ -3565,6 +3611,8 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    fragmentManager,
+    props: resultProps,
     globalManager: resultGlobalManager
   };
 };
@@ -3598,8 +3646,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,
@@ -3629,7 +3677,7 @@ const Collection = ({
     fragmentManager,
     styles: styles2,
     sourceDefinition,
-    hash,
+    classnames,
     source,
     children,
     sourceValue
@@ -3650,7 +3698,7 @@ const Collection = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         FrameTag,
         {
-          className: hash,
+          className: classnames,
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
@@ -3688,16 +3736,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) {
@@ -3719,7 +3764,7 @@ const Frame = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag,
     {
-      className: hash,
+      className: classnames,
       "data-key": layerKey,
       style: {
         ...resultStyles,
@@ -3735,7 +3780,7 @@ const Frame = ({
 const FragmentInternal = ({
   fragmentId,
   globalManager,
-  interactive,
+  pauseInteractions,
   collectStyle,
   FrameElement = Frame
 }) => {
@@ -3767,7 +3812,7 @@ const FragmentInternal = ({
         FrameElement,
         {
           layerKey: childLink,
-          interactive,
+          pauseInteractions,
           collectStyle,
           hidden: !isResize && !isPrimary && !isTopFragment,
           style: { display: isPrimary ? null : "none" }
@@ -3792,7 +3837,7 @@ const Fragment = (props) => {
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
-  interactive = true,
+  pauseInteractions,
   FrameElement,
   ...instanceProps
 }) => {
@@ -3806,13 +3851,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 });
@@ -3843,7 +3888,7 @@ const InstanceInitial = ({
           children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(
             Tag,
             {
-              className: hash,
+              className: classnames,
               "data-key": instanceProps.layerKey,
               style: { ...style, ...cssProps },
               ...link.linkProps,
@@ -3854,7 +3899,7 @@ const InstanceInitial = ({
                   fragmentId,
                   globalManager,
                   FrameElement,
-                  interactive
+                  pauseInteractions
                 }
               )
             }
@@ -3864,7 +3909,7 @@ const InstanceInitial = ({
               fragmentId,
               globalManager,
               FrameElement,
-              interactive
+              pauseInteractions
             }
           ) })
         }
@@ -3887,7 +3932,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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import require$$0, { createContext, useState, useEffect, useContext, useRef, useCallback, useMemo, Suspense } from "react";
+import require$$0, { createContext, useState, useMemo, useEffect, useContext, useRef, useCallback, Suspense } from "react";
 import { definition } from "@fragmentsx/definition";
 import { isPartialKey, keyOfEntity, entityOfKey, isLinkKey } from "@graph-state/core";
 const collectStyles = (globalManager) => {
@@ -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)), {
@@ -2192,6 +2194,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 +2232,7 @@ const useGlobalManager = (globalManager) => {
     setRenderTarget
   };
 };
-const useFragmentManager = (fragmentId, inputGlobalManager, aa) => {
+const useFragmentManager = (fragmentId, inputGlobalManager) => {
   var _a;
   const {
     fragmentsGraph,
@@ -2319,7 +2323,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
@@ -3008,7 +3012,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 +3097,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 +3129,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 +3162,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 +3197,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 +3213,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 +3231,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 +3258,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 +3359,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 +3408,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 +3418,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 +3471,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 +3564,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 +3591,14 @@ 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]
+  );
   useEffect(() => {
     (async () => {
       const response = await queryArea(options2.areaCode);
@@ -3563,6 +3609,8 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    fragmentManager,
+    props: resultProps,
     globalManager: resultGlobalManager
   };
 };
@@ -3596,8 +3644,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,
@@ -3627,7 +3675,7 @@ const Collection = ({
     fragmentManager,
     styles: styles2,
     sourceDefinition,
-    hash,
+    classnames,
     source,
     children,
     sourceValue
@@ -3648,7 +3696,7 @@ const Collection = ({
       children: /* @__PURE__ */ jsx(
         FrameTag,
         {
-          className: hash,
+          className: classnames,
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
@@ -3686,16 +3734,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) {
@@ -3717,7 +3762,7 @@ const Frame = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
-      className: hash,
+      className: classnames,
       "data-key": layerKey,
       style: {
         ...resultStyles,
@@ -3733,7 +3778,7 @@ const Frame = ({
 const FragmentInternal = ({
   fragmentId,
   globalManager,
-  interactive,
+  pauseInteractions,
   collectStyle,
   FrameElement = Frame
 }) => {
@@ -3765,7 +3810,7 @@ const FragmentInternal = ({
         FrameElement,
         {
           layerKey: childLink,
-          interactive,
+          pauseInteractions,
           collectStyle,
           hidden: !isResize && !isPrimary && !isTopFragment,
           style: { display: isPrimary ? null : "none" }
@@ -3790,7 +3835,7 @@ const Fragment = (props) => {
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
-  interactive = true,
+  pauseInteractions,
   FrameElement,
   ...instanceProps
 }) => {
@@ -3804,13 +3849,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 });
@@ -3841,7 +3886,7 @@ const InstanceInitial = ({
           children: parentManager ? /* @__PURE__ */ jsx(
             Tag,
             {
-              className: hash,
+              className: classnames,
               "data-key": instanceProps.layerKey,
               style: { ...style, ...cssProps },
               ...link.linkProps,
@@ -3852,7 +3897,7 @@ const InstanceInitial = ({
                   fragmentId,
                   globalManager,
                   FrameElement,
-                  interactive
+                  pauseInteractions
                 }
               )
             }
@@ -3862,7 +3907,7 @@ const InstanceInitial = ({
               fragmentId,
               globalManager,
               FrameElement,
-              interactive
+              pauseInteractions
             }
           ) })
         }
@@ -3885,7 +3930,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.1",
+  "version": "1.1.3",
   "type": "module",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "vite": "^6.1.0",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.0",
-    "@fragmentsx/render-core": "0.1.0"
+    "@fragmentsx/render-core": "0.1.1"
   },
   "scripts": {
     "clear": "rm -r -f ./dist",

package/dist/components/Area/index.d.ts

@@ -1,3 +0,0 @@
-import { AreaProps } from '@fragmentsx/render-core';
-export declare const Area: (props: AreaProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Area/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Area/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAIV,MAAM,yBAAyB,CAAC;AA6BjC,eAAO,MAAM,IAAI,UAAW,SAAS,4CAYpC,CAAC"}

package/dist/components/Collection/index.d.ts

@@ -1,7 +0,0 @@
-import { FrameProps } from '../Frame';
-import { FC } from 'react';
-interface CollectionProps extends FrameProps {
-}
-export declare const Collection: FC<CollectionProps>;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Collection/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collection/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAGxC,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+D1C,CAAC"}

package/dist/components/Fragment/index.d.ts

@@ -1,2 +0,0 @@
-export declare const Fragment: (props: any) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Fragment/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Fragment/index.tsx"],"names":[],"mappings":"AAgFA,eAAO,MAAM,QAAQ,yDAuBpB,CAAC"}

package/dist/components/Frame/index.d.ts

@@ -1,15 +0,0 @@
-import { ElementType, FC } from 'react';
-import { LinkKey } from '@graph-state/core';
-import { UseFrameOptions } from '@fragmentsx/render-core/dist/components/Frame/hooks/useFrame';
-export interface FrameProps extends UseFrameOptions {
-    TextElement?: ElementType;
-    InstanceElement?: ElementType;
-    FrameElement?: ElementType;
-    CollectionElement?: ElementType;
-    styles?: boolean;
-    hidden?: boolean;
-    interactive?: boolean;
-    layerKey: LinkKey;
-}
-export declare const Frame: FC<FrameProps>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Frame/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAyB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAK5C,OAAO,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAC;AAG/F,MAAM,WAAW,UAAW,SAAQ,eAAe;IACjD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAwDhC,CAAC"}

package/dist/components/GlobalManager/index.d.ts

@@ -1,2 +0,0 @@
-export { GlobalManager } from '@fragmentsx/render-core';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/GlobalManager/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalManager/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/Instance/index.d.ts

@@ -1,18 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType } from 'react';
-import { LinkKey } from '@graph-state/core';
-interface InstanceOptions {
-    ssr?: boolean;
-}
-export interface InstanceProps extends ComponentPropsWithoutRef<"div"> {
-    FrameElement?: ElementType;
-    layerKey?: LinkKey;
-    fragmentId?: string;
-    interactive?: boolean;
-    props?: Record<string, unknown>;
-    options?: InstanceOptions;
-    globalManager?: unknown;
-    Tag?: string | ElementType;
-}
-export declare const Instance: (props: any) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Instance/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Instance/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAgB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAW5C,UAAU,eAAe;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC5B;AAoFD,eAAO,MAAM,QAAQ,yDAYpB,CAAC"}

package/dist/components/Text/index.d.ts

@@ -1,10 +0,0 @@
-import { LinkKey } from '@graph-state/core';
-import { ComponentPropsWithoutRef, ElementType, FC } from 'react';
-import { UseTextAttributes } from '@fragmentsx/render-core/dist/components/Text/hooks/useTextAttributes';
-interface TextProps extends ComponentPropsWithoutRef<"div">, UseTextAttributes {
-    Tag?: string | ElementType;
-    layerKey: LinkKey;
-}
-export declare const Text: FC<TextProps>;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Text/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,UAAU,SAAU,SAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,iBAAiB;IAC5E,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAgB9B,CAAC"}

package/dist/helpers/collectStyles.d.ts

@@ -1,3 +0,0 @@
-import { GraphState } from '@graph-state/core';
-export declare const collectStyles: (globalManager: GraphState) => import("react/jsx-runtime").JSX.Element[] | null;
-//# sourceMappingURL=collectStyles.d.ts.map

package/dist/helpers/collectStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"collectStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/collectStyles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/C,eAAO,MAAM,aAAa,kBAAmB,UAAU,qDA4CtD,CAAC"}

package/dist/helpers/hydration.d.ts

@@ -1,3 +0,0 @@
-export declare function serializeData(data: any): string;
-export declare function getHydratedData(id: string): any;
-//# sourceMappingURL=hydration.d.ts.map

package/dist/helpers/hydration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hydration.d.ts","sourceRoot":"","sources":["../../src/helpers/hydration.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,UAGtC;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,OAYzC"}

package/dist/helpers/isBrowser.d.ts

@@ -1,2 +0,0 @@
-export declare const isBrowser: boolean;
-//# sourceMappingURL=isBrowser.d.ts.map

package/dist/helpers/isBrowser.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"isBrowser.d.ts","sourceRoot":"","sources":["../../src/helpers/isBrowser.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,SAAgC,CAAC"}

package/dist/helpers/loadFragmentManager.d.ts

@@ -1,3 +0,0 @@
-import { GraphState } from '@graph-state/core';
-export declare const loadFragmentManager: (globalManager: GraphState, fragmentId: number) => Promise<any>;
-//# sourceMappingURL=loadFragmentManager.d.ts.map

package/dist/helpers/loadFragmentManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"loadFragmentManager.d.ts","sourceRoot":"","sources":["../../src/helpers/loadFragmentManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,eAAO,MAAM,mBAAmB,kBACf,UAAU,cACb,MAAM,iBAmBnB,CAAC"}

package/dist/hocs/reactCSRAdapter.d.ts

@@ -1,2 +0,0 @@
-export declare function reactCSRAdapter(PreactComponent: any): (props: any) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=reactCSRAdapter.d.ts.map

package/dist/hocs/reactCSRAdapter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactCSRAdapter.d.ts","sourceRoot":"","sources":["../../src/hocs/reactCSRAdapter.tsx"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,CAAC,eAAe,EAAE,GAAG,WACX,GAAG,6CAgD3C"}

package/dist/hocs/reactSSRAdapter.d.ts

@@ -1,3 +0,0 @@
-export declare function createResource(resourceCache: any, key: string, fetcher: () => Promise<any>): any;
-export declare function reactSSRAdapter(PreactComponent: any): (props: any) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=reactSSRAdapter.d.ts.map

package/dist/hocs/reactSSRAdapter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactSSRAdapter.d.ts","sourceRoot":"","sources":["../../src/hocs/reactSSRAdapter.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAC5B,aAAa,KAAA,EACb,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,OA2B5B;AAED,wBAAgB,eAAe,CAAC,eAAe,EAAE,GAAG,WACF,GAAG,6CA4BpD"}

package/dist/index.d.ts

@@ -1,10 +0,0 @@
-export { collectStyles } from './helpers/collectStyles';
-export { Instance } from './components/Instance';
-export { Area } from './components/Area';
-export { Text } from './components/Text';
-export { Frame } from './components/Frame';
-export { Fragment } from './components/Fragment';
-export { Collection } from './components/Collection';
-export { Scope } from './providers/Scope';
-export * from '@fragmentsx/render-core';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,cAAc,yBAAyB,CAAC"}

package/dist/providers/Scope.d.ts

@@ -1,10 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { GraphState, LinkKey } from '@graph-state/core';
-interface ScopeProps extends PropsWithChildren {
-    fragmentManager: GraphState;
-    layerKey: LinkKey;
-    value: unknown;
-}
-export declare const Scope: FC<ScopeProps>;
-export {};
-//# sourceMappingURL=Scope.d.ts.map

package/dist/providers/Scope.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Scope.d.ts","sourceRoot":"","sources":["../../src/providers/Scope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAExD,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,eAAe,EAAE,UAAU,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAchC,CAAC"}

package/dist/reactAdapter.d.ts

@@ -1,2 +0,0 @@
-export declare function createReactComponent(PreactComponent: any): (props: any) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=reactAdapter.d.ts.map

package/dist/reactAdapter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactAdapter.d.ts","sourceRoot":"","sources":["../src/reactAdapter.ts"],"names":[],"mappings":"AAKA,wBAAgB,oBAAoB,CAAC,eAAe,EAAE,GAAG,2DAMxD"}