@fragmentsx/render-react 1.2.1 → 1.2.3

package/dist/hooks/fragment/useFragmentCssChunks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFragmentCssChunks.d.ts","sourceRoot":"","sources":["../../../src/hooks/fragment/useFragmentCssChunks.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,eAAgB,MAAM,QAQtD,CAAC"}
+{"version":3,"file":"useFragmentCssChunks.d.ts","sourceRoot":"","sources":["../../../src/hooks/fragment/useFragmentCssChunks.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,eAAgB,MAAM,QAStD,CAAC"}

package/dist/hooks/layer/index.d.ts

@@ -7,5 +7,5 @@ export { useLayerScopes } from './useLayerScopes';
 export { useLayerLink } from './useLayerLink';
 export { useLayerCssVariable } from './useLayerCssVariable';
 export { useLayerVariableValue } from './useLayerVariableValue';
-export { useNormalizeLayer } from './useNormalizeLayer';
+export { useNormalizeLayer, getNormalizeLayer } from './useNormalizeLayer';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/layer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/hooks/layer/useLayerCssVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerCssVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerCssVariable.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG5D,eAAO,MAAM,mBAAmB,YAAa,UAAU;;CAQtD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAc/B,CAAC"}
+{"version":3,"file":"useLayerCssVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerCssVariable.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI5D,eAAO,MAAM,mBAAmB,YAAa,UAAU;;CAQtD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAU/B,CAAC"}

package/dist/hooks/layer/useNormalizeLayer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer/useNormalizeLayer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAY,eAAe,EAAE,MAAM,YAAY,CAAC;AAGvD,eAAO,MAAM,iBAAiB,aAClB,OAAO,WACR,OAAO,YACN,eAAe;;;;;;CAU1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,OAAO,YACP,eAAe;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAClB,OAAO,EAAE,YACV,OAAO,YACP,eAAe;;;;;;GAQ1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer/useNormalizeLayer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAY,eAAe,EAAE,MAAM,YAAY,CAAC;AAGvD,eAAO,MAAM,iBAAiB,aAClB,OAAO,WACR,OAAO,YACN,eAAe;;;;;;CAU1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,OAAO,YACP,eAAe;;;;;;CAc1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAClB,OAAO,EAAE,YACV,OAAO,YACP,eAAe;;;;;;GAQ1B,CAAC"}

package/dist/hooks/layer/useReadVariable.d.ts

@@ -2,9 +2,13 @@ import { LinkKey } from '@graph-state/core';
 export declare const useReadVariable: (variableKey?: LinkKey | null, customScopes?: unknown[]) => {
     readVariable: (variableKey?: LinkKey) => {
         value: any;
-        layer: any;
+        layer: {
+            [k: string]: any;
+        } | null;
     };
     value: any;
-    layer: any;
+    layer: {
+        [k: string]: any;
+    } | null;
 };
 //# sourceMappingURL=useReadVariable.d.ts.map

package/dist/hooks/layer/useReadVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReadVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariable.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAgDrE,eAAO,MAAM,eAAe,iBACZ,OAAO,GAAG,IAAI,iBACb,OAAO,EAAE;iCA+EY,OAAO;;;;;;CAgI5C,CAAC"}
+{"version":3,"file":"useReadVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariable.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAiDrE,eAAO,MAAM,eAAe,iBACZ,OAAO,GAAG,IAAI,iBACb,OAAO,EAAE;iCAgFY,OAAO;;;;;;;;;;CAgI5C,CAAC"}

package/dist/hooks/layer-styles/useLayerPaint.d.ts

@@ -2,6 +2,7 @@ import { LinkKey } from '@graph-state/core';
 export declare const useLayerPaint: (paintLinkKey: LinkKey) => {
     type: any;
     solid: any;
+    solidCssValue: any;
     image: any;
     linearGradientLink: any;
 };

package/dist/hooks/layer-styles/useLayerPaint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerPaint.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer-styles/useLayerPaint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,eAAO,MAAM,aAAa,iBAAkB,OAAO;;;;;CAYlD,CAAC"}
+{"version":3,"file":"useLayerPaint.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer-styles/useLayerPaint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,eAAO,MAAM,aAAa,iBAAkB,OAAO;;;;;;CAalD,CAAC"}

package/dist/hooks/render/index.d.ts

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

package/dist/hooks/render/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/render/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/hooks/utils/useLayerInteractions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerInteractions.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useLayerInteractions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAM5C,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAsEtC,CAAC"}
+{"version":3,"file":"useLayerInteractions.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useLayerInteractions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQzD,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAuFtC,CAAC"}

package/dist/index.cjs.js

@@ -92,6 +92,13 @@ const getNormalizeLayer = (layerKey, manager, options) => {
 const useNormalizeLayer = (layerKey, manager, options) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
   return getNormalizeLayer(layerKey, resultManager, options);
 };
 const useNormalizeLayers = (layerKeys, manager, options) => {
@@ -151,12 +158,12 @@ const useReadVariable = (variableKey, customScopes) => {
     );
   };
   const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a;
-    const variableLayer = manager == null ? void 0 : manager.resolve(variableLink);
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
     if (!variableLayer) return null;
     if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
       const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_a = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
         return variableLayer;
       const definitionDefaultValue = extractVariableDefaultValue(
         manager,
@@ -464,14 +471,12 @@ function makeSnapshot(globalManager, targetFragmentId) {
   ).filter(Boolean);
   const linkedGoals = Array.from(
     new Set(
-      targetFragment.inspectFields(definition.definition.nodes.Variable).map(targetFragment == null ? void 0 : targetFragment.resolve).filter((graph) => {
-        return (graph == null ? void 0 : graph.type) === definition.definition.variableType.Event && (graph == null ? void 0 : graph.mode) === definition.definition.eventMode.goal;
-      }).map((graph) => {
+      targetFragment.inspectFields(definition.definition.nodes.GoalEvent).map((link) => {
         var _a2;
-        return (_a2 = graph == null ? void 0 : graph.defaultValue) == null ? void 0 : _a2.goalId;
-      }).filter(Boolean).values()
+        return (_a2 = targetFragment == null ? void 0 : targetFragment.resolve(link)) == null ? void 0 : _a2.goalId;
+      }).values()
     )
-  );
+  ).filter(Boolean);
   const fonts = Array.from(
     new Set(
       targetFragment.inspectFields(definition.definition.nodes.Text).map((linkKey) => {
@@ -971,13 +976,9 @@ const getLayerCssVariable = (manager, inputValue) => {
 const useLayerCssVariable = (inputValue) => {
   const { manager } = react.useContext(FragmentContext);
   const isVariable = definition.isVariableLink(inputValue);
-  const [variableValue] = react$1.useGraph(isVariable ? manager : null, inputValue, {
-    selector: (graph) => utils.pick(graph, "defaultValue", "_id")
-  });
+  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
   return {
-    value: isVariable ? `var(--${variableValue == null ? void 0 : variableValue._id}, ${transformCssValue(
-      variableValue == null ? void 0 : variableValue.defaultValue
-    )})` : null
+    value: isVariable ? `var(--${layer == null ? void 0 : layer._id}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
   };
 };
 const useLayerValue = (layerKey, fieldKey, options) => {
@@ -1428,12 +1429,13 @@ const useLayerDisplay = (layerKey) => {
 };
 const useLayerPaint = (paintLinkKey) => {
   const [type] = useLayerValue(paintLinkKey, "type");
-  const [solid] = useLayerValue(paintLinkKey, "solid");
+  const [solid, , solidInfo] = useLayerValue(paintLinkKey, "solid");
   const [image] = useLayerValue(paintLinkKey, "image");
   const [linearGradientLink] = useLayerValue(paintLinkKey, "linearGradient");
   return {
     type,
     solid,
+    solidCssValue: solidInfo.cssVariableValue,
     image,
     linearGradientLink
   };
@@ -1473,7 +1475,7 @@ const useLayerBorder = (layerKey) => {
     };
   }
   if (borderPaint.type === definition.definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solid);
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
   }
   return { border: null };
 };
@@ -1684,36 +1686,6 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
   };
 };
-const useTextAttributes = (layerKey, options) => {
-  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const styles = useLayerStyles(layerKey);
-  const content = useTextContent(layerKey);
-  const classnames = useClassnames(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
-  return {
-    styles,
-    classnames,
-    content
-  };
-};
-const Text = ({
-  layerKey,
-  Tag = "div",
-  collectStyle,
-  ...restProps
-}) => {
-  const { classnames, content } = useTextAttributes(layerKey, { collectStyle });
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: classnames, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      dangerouslySetInnerHTML: { __html: content }
-    }
-  ) });
-};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1722,29 +1694,40 @@ const useLayerInteractions = (layerKey, options) => {
   const areaScope = scopes.find(
     (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.AreaScope
   );
-  const [interactions] = useLayerValue(
-    layerKey,
-    "interactions",
-    fragmentManager
+  const instanceScope = scopes.find(
+    (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
   );
-  const { readVariable } = useReadVariable();
+  const [interactionLinks] = useLayerValue(layerKey, "interactions");
+  const interactionOns = useLayersValue(interactionLinks, "on");
+  const interactionEvents = useLayersValue(interactionLinks, "event");
+  const interactions = (interactionLinks ?? []).map((linkKey, index) => {
+    var _a, _b;
+    return {
+      linkKey,
+      on: (_a = interactionOns == null ? void 0 : interactionOns.at(index)) == null ? void 0 : _a.at(0),
+      event: (_b = interactionEvents == null ? void 0 : interactionEvents.at(index)) == null ? void 0 : _b.at(0)
+    };
+  });
   const fireEvent = react.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) === definition.definition.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, {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const eventType = (_a = core.entityOfKey(eventLink)) == null ? void 0 : _a._type;
+      const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      if (eventType === definition.definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
+        if (!areaScope) return null;
+        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal) == null ? void 0 : _d.call(_c, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...utils.pick(areaScope, "variantId", "campaignId", "areaId")
         });
       }
-      if ((event == null ? void 0 : event.mode) === definition.definition.eventMode.tracker && eventValue) {
-        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.trackAdPixel) == null ? void 0 : _d.call(_c, eventValue);
-      }
-      if ((event == null ? void 0 : event.mode) === definition.definition.eventMode.callback && typeof eventValue === "function") {
-        eventValue();
+      if (eventType === definition.definition.nodes.MutateEvent) {
+        const target = eventValue == null ? void 0 : eventValue.target;
+        const targetLayer = getNormalizeLayer(target, fragmentManager);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_e = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _e.defaultValue);
+        if (definition.isVariableLink(target) && utils.isValue(value)) {
+          const targetId = (_f = core.entityOfKey(target)) == null ? void 0 : _f._id;
+          (_g = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _g.call(instanceScope, targetId, value);
+        }
       }
     },
     [globalManager, fragmentManager, areaScope]
@@ -1765,6 +1748,40 @@ const useLayerInteractions = (layerKey, options) => {
     };
   }, [interactions, fireEvent, pause]);
 };
+const useTextAttributes = (layerKey, options) => {
+  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
+  const { manager: fragmentManager } = react.useContext(FragmentContext);
+  const styles = useLayerStyles(layerKey);
+  const content = useTextContent(layerKey);
+  const classnames = useClassnames(layerKey, fragmentManager);
+  const { addLayerStyle } = useStyleSheet(fragmentManager);
+  const events = useLayerInteractions(layerKey, options);
+  if (collectStyle) {
+    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
+  }
+  return {
+    events,
+    styles,
+    classnames,
+    content
+  };
+};
+const Text = ({
+  layerKey,
+  Tag = "div",
+  collectStyle,
+  ...restProps
+}) => {
+  const { classnames, content, events } = useTextAttributes(layerKey, {
+    collectStyle
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  ) });
+};
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -2141,26 +2158,42 @@ const useInstanceProps = (instanceProps) => {
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = react$1.useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
+  const [localProps, setLocalProps] = react.useState(instanceProps.props ?? {});
   const mergedProps = react.useMemo(() => {
     let base = instanceLayerProps;
-    if (isTopInstance && utils.isObject(base) && utils.isObject(instanceProps == null ? void 0 : instanceProps.props)) {
+    if (isTopInstance && utils.isObject(base) && utils.isObject(localProps)) {
       base = {
         ...base,
-        ...instanceProps == null ? void 0 : instanceProps.props
+        ...localProps
       };
     }
     if (isTopInstance && fragmentManager) {
       definitionsData.forEach((definition2) => {
-        var _a;
         const defId = definition2._id;
-        base[defId] = ((_a = instanceProps == null ? void 0 : instanceProps.props) == null ? void 0 : _a[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
+        base[defId] = (localProps == null ? void 0 : localProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
       });
     }
     return utils.omit(base, "_type", "_id");
-  }, [isTopInstance, fragmentManager, instanceLayerProps, definitionsData]);
+  }, [
+    isTopInstance,
+    fragmentManager,
+    instanceLayerProps,
+    definitionsData,
+    localProps
+  ]);
+  react.useEffect(() => {
+    if (utils.isValue(instanceProps == null ? void 0 : instanceProps.props)) {
+      setLocalProps(instanceProps.props);
+    }
+  }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
     props: mergedProps,
-    cssProps: getCssVariables(mergedProps)
+    cssProps: getCssVariables(mergedProps),
+    onChangeProps: (variableId, value) => {
+      var _a;
+      setLocalProps((prev) => ({ ...prev, [variableId]: value }));
+      (_a = instanceProps == null ? void 0 : instanceProps.onChangeProps) == null ? void 0 : _a.call(instanceProps, variableId, value);
+    }
   };
 };
 const useInstance = (instanceProps) => {
@@ -2173,7 +2206,7 @@ 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 { props, cssProps, onChangeProps } = useInstanceProps(instanceProps);
   const classnames = useClassnames(
     instanceProps.layerKey,
     innerFragmentManager
@@ -2188,7 +2221,8 @@ const useInstance = (instanceProps) => {
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
-    globalManager: resultGlobalManager
+    globalManager: resultGlobalManager,
+    onChangeProps
   };
 };
 const InstanceInitial = ({
@@ -2211,7 +2245,8 @@ const InstanceInitial = ({
     classnames,
     innerManager,
     definitions,
-    globalManager
+    globalManager,
+    onChangeProps
   } = useInstance({
     ...instanceProps,
     pauseInteractions
@@ -2230,7 +2265,8 @@ const InstanceInitial = ({
         definitions,
         fragmentId,
         documentManager: innerManager,
-        layerKey: instanceProps.layerKey
+        layerKey: instanceProps.layerKey,
+        onChangeProps
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         InstanceContext$1.Provider,
@@ -2399,6 +2435,7 @@ exports.getAllParents = getAllParents;
 exports.getCssVariables = getCssVariables;
 exports.getHydratedData = getHydratedData;
 exports.getKey = getKey;
+exports.getNormalizeLayer = getNormalizeLayer;
 exports.getOverrider = getOverrider;
 exports.getOverriderByLayers = getOverriderByLayers;
 exports.getParent = getParent;
@@ -2457,6 +2494,7 @@ exports.useNormalizeLayer = useNormalizeLayer;
 exports.useOptionalSize = useOptionalSize;
 exports.useReadVariable = useReadVariable;
 exports.useReadVariables = useReadVariables;
+exports.useRenderTarget = useRenderTarget;
 exports.useTextAttributes = useTextAttributes;
 exports.useTextContent = useTextContent;
 exports.wrapTextInParagraphWithAttributes = wrapTextInParagraphWithAttributes;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './providers';
 export * from './nodes';
 export * from './utils';
+export * from './hooks/render';
 export * from './hooks/layer';
 export * from './hooks/layer-styles';
 export * from './hooks/global';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/dist/index.es.js

@@ -90,6 +90,13 @@ const getNormalizeLayer = (layerKey, manager, options) => {
 const useNormalizeLayer = (layerKey, manager, options) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
   return getNormalizeLayer(layerKey, resultManager, options);
 };
 const useNormalizeLayers = (layerKeys, manager, options) => {
@@ -149,12 +156,12 @@ const useReadVariable = (variableKey, customScopes) => {
     );
   };
   const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a;
-    const variableLayer = manager == null ? void 0 : manager.resolve(variableLink);
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
     if (!variableLayer) return null;
     if ((variableLayer == null ? void 0 : variableLayer.type) === definition.variableType.Array) {
       const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_a = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.variableType.Object)
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.variableType.Object)
         return variableLayer;
       const definitionDefaultValue = extractVariableDefaultValue(
         manager,
@@ -462,14 +469,12 @@ function makeSnapshot(globalManager, targetFragmentId) {
   ).filter(Boolean);
   const linkedGoals = Array.from(
     new Set(
-      targetFragment.inspectFields(definition.nodes.Variable).map(targetFragment == null ? void 0 : targetFragment.resolve).filter((graph) => {
-        return (graph == null ? void 0 : graph.type) === definition.variableType.Event && (graph == null ? void 0 : graph.mode) === definition.eventMode.goal;
-      }).map((graph) => {
+      targetFragment.inspectFields(definition.nodes.GoalEvent).map((link) => {
         var _a2;
-        return (_a2 = graph == null ? void 0 : graph.defaultValue) == null ? void 0 : _a2.goalId;
-      }).filter(Boolean).values()
+        return (_a2 = targetFragment == null ? void 0 : targetFragment.resolve(link)) == null ? void 0 : _a2.goalId;
+      }).values()
     )
-  );
+  ).filter(Boolean);
   const fonts = Array.from(
     new Set(
       targetFragment.inspectFields(definition.nodes.Text).map((linkKey) => {
@@ -969,13 +974,9 @@ const getLayerCssVariable = (manager, inputValue) => {
 const useLayerCssVariable = (inputValue) => {
   const { manager } = useContext(FragmentContext);
   const isVariable = isVariableLink$1(inputValue);
-  const [variableValue] = useGraph(isVariable ? manager : null, inputValue, {
-    selector: (graph) => pick(graph, "defaultValue", "_id")
-  });
+  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
   return {
-    value: isVariable ? `var(--${variableValue == null ? void 0 : variableValue._id}, ${transformCssValue(
-      variableValue == null ? void 0 : variableValue.defaultValue
-    )})` : null
+    value: isVariable ? `var(--${layer == null ? void 0 : layer._id}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
   };
 };
 const useLayerValue = (layerKey, fieldKey, options) => {
@@ -1426,12 +1427,13 @@ const useLayerDisplay = (layerKey) => {
 };
 const useLayerPaint = (paintLinkKey) => {
   const [type] = useLayerValue(paintLinkKey, "type");
-  const [solid] = useLayerValue(paintLinkKey, "solid");
+  const [solid, , solidInfo] = useLayerValue(paintLinkKey, "solid");
   const [image] = useLayerValue(paintLinkKey, "image");
   const [linearGradientLink] = useLayerValue(paintLinkKey, "linearGradient");
   return {
     type,
     solid,
+    solidCssValue: solidInfo.cssVariableValue,
     image,
     linearGradientLink
   };
@@ -1471,7 +1473,7 @@ const useLayerBorder = (layerKey) => {
     };
   }
   if (borderPaint.type === definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solid);
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
   }
   return { border: null };
 };
@@ -1682,36 +1684,6 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
   };
 };
-const useTextAttributes = (layerKey, options) => {
-  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
-  const { manager: fragmentManager } = useContext(FragmentContext);
-  const styles = useLayerStyles(layerKey);
-  const content = useTextContent(layerKey);
-  const classnames = useClassnames(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
-  return {
-    styles,
-    classnames,
-    content
-  };
-};
-const Text = ({
-  layerKey,
-  Tag = "div",
-  collectStyle,
-  ...restProps
-}) => {
-  const { classnames, content } = useTextAttributes(layerKey, { collectStyle });
-  return /* @__PURE__ */ jsx(Tag, { className: classnames, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      dangerouslySetInnerHTML: { __html: content }
-    }
-  ) });
-};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1720,29 +1692,40 @@ const useLayerInteractions = (layerKey, options) => {
   const areaScope = scopes.find(
     (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.AreaScope
   );
-  const [interactions] = useLayerValue(
-    layerKey,
-    "interactions",
-    fragmentManager
+  const instanceScope = scopes.find(
+    (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.InstanceScope
   );
-  const { readVariable } = useReadVariable();
+  const [interactionLinks] = useLayerValue(layerKey, "interactions");
+  const interactionOns = useLayersValue(interactionLinks, "on");
+  const interactionEvents = useLayersValue(interactionLinks, "event");
+  const interactions = (interactionLinks ?? []).map((linkKey, index) => {
+    var _a, _b;
+    return {
+      linkKey,
+      on: (_a = interactionOns == null ? void 0 : interactionOns.at(index)) == null ? void 0 : _a.at(0),
+      event: (_b = interactionEvents == null ? void 0 : interactionEvents.at(index)) == null ? void 0 : _b.at(0)
+    };
+  });
   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) === definition.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, {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const eventType = (_a = entityOfKey(eventLink)) == null ? void 0 : _a._type;
+      const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      if (eventType === definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
+        if (!areaScope) return null;
+        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal) == null ? void 0 : _d.call(_c, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...pick(areaScope, "variantId", "campaignId", "areaId")
         });
       }
-      if ((event == null ? void 0 : event.mode) === definition.eventMode.tracker && eventValue) {
-        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.trackAdPixel) == null ? void 0 : _d.call(_c, eventValue);
-      }
-      if ((event == null ? void 0 : event.mode) === definition.eventMode.callback && typeof eventValue === "function") {
-        eventValue();
+      if (eventType === definition.nodes.MutateEvent) {
+        const target = eventValue == null ? void 0 : eventValue.target;
+        const targetLayer = getNormalizeLayer(target, fragmentManager);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_e = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _e.defaultValue);
+        if (isVariableLink$1(target) && isValue(value)) {
+          const targetId = (_f = entityOfKey(target)) == null ? void 0 : _f._id;
+          (_g = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _g.call(instanceScope, targetId, value);
+        }
       }
     },
     [globalManager, fragmentManager, areaScope]
@@ -1763,6 +1746,40 @@ const useLayerInteractions = (layerKey, options) => {
     };
   }, [interactions, fireEvent, pause]);
 };
+const useTextAttributes = (layerKey, options) => {
+  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
+  const { manager: fragmentManager } = useContext(FragmentContext);
+  const styles = useLayerStyles(layerKey);
+  const content = useTextContent(layerKey);
+  const classnames = useClassnames(layerKey, fragmentManager);
+  const { addLayerStyle } = useStyleSheet(fragmentManager);
+  const events = useLayerInteractions(layerKey, options);
+  if (collectStyle) {
+    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
+  }
+  return {
+    events,
+    styles,
+    classnames,
+    content
+  };
+};
+const Text = ({
+  layerKey,
+  Tag = "div",
+  collectStyle,
+  ...restProps
+}) => {
+  const { classnames, content, events } = useTextAttributes(layerKey, {
+    collectStyle
+  });
+  return /* @__PURE__ */ jsx(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  ) });
+};
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
@@ -2139,26 +2156,42 @@ const useInstanceProps = (instanceProps) => {
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
+  const [localProps, setLocalProps] = useState(instanceProps.props ?? {});
   const mergedProps = useMemo(() => {
     let base = instanceLayerProps;
-    if (isTopInstance && isObject(base) && isObject(instanceProps == null ? void 0 : instanceProps.props)) {
+    if (isTopInstance && isObject(base) && isObject(localProps)) {
       base = {
         ...base,
-        ...instanceProps == null ? void 0 : instanceProps.props
+        ...localProps
       };
     }
     if (isTopInstance && fragmentManager) {
       definitionsData.forEach((definition2) => {
-        var _a;
         const defId = definition2._id;
-        base[defId] = ((_a = instanceProps == null ? void 0 : instanceProps.props) == null ? void 0 : _a[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
+        base[defId] = (localProps == null ? void 0 : localProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
       });
     }
     return omit(base, "_type", "_id");
-  }, [isTopInstance, fragmentManager, instanceLayerProps, definitionsData]);
+  }, [
+    isTopInstance,
+    fragmentManager,
+    instanceLayerProps,
+    definitionsData,
+    localProps
+  ]);
+  useEffect(() => {
+    if (isValue(instanceProps == null ? void 0 : instanceProps.props)) {
+      setLocalProps(instanceProps.props);
+    }
+  }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
     props: mergedProps,
-    cssProps: getCssVariables(mergedProps)
+    cssProps: getCssVariables(mergedProps),
+    onChangeProps: (variableId, value) => {
+      var _a;
+      setLocalProps((prev) => ({ ...prev, [variableId]: value }));
+      (_a = instanceProps == null ? void 0 : instanceProps.onChangeProps) == null ? void 0 : _a.call(instanceProps, variableId, value);
+    }
   };
 };
 const useInstance = (instanceProps) => {
@@ -2171,7 +2204,7 @@ 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 { props, cssProps, onChangeProps } = useInstanceProps(instanceProps);
   const classnames = useClassnames(
     instanceProps.layerKey,
     innerFragmentManager
@@ -2186,7 +2219,8 @@ const useInstance = (instanceProps) => {
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
-    globalManager: resultGlobalManager
+    globalManager: resultGlobalManager,
+    onChangeProps
   };
 };
 const InstanceInitial = ({
@@ -2209,7 +2243,8 @@ const InstanceInitial = ({
     classnames,
     innerManager,
     definitions,
-    globalManager
+    globalManager,
+    onChangeProps
   } = useInstance({
     ...instanceProps,
     pauseInteractions
@@ -2228,7 +2263,8 @@ const InstanceInitial = ({
         definitions,
         fragmentId,
         documentManager: innerManager,
-        layerKey: instanceProps.layerKey
+        layerKey: instanceProps.layerKey,
+        onChangeProps
       },
       children: /* @__PURE__ */ jsx(
         InstanceContext$1.Provider,
@@ -2398,6 +2434,7 @@ export {
   getCssVariables,
   getHydratedData,
   getKey,
+  getNormalizeLayer,
   getOverrider,
   getOverriderByLayers,
   getParent,
@@ -2456,6 +2493,7 @@ export {
   useOptionalSize,
   useReadVariable,
   useReadVariables,
+  useRenderTarget,
   useTextAttributes,
   useTextContent,
   wrapTextInParagraphWithAttributes

package/dist/nodes/Instance/Instance.d.ts

@@ -14,6 +14,7 @@ export interface InstanceProps extends ComponentPropsWithoutRef<"div"> {
     options?: InstanceOptions;
     globalManager?: unknown;
     Tag?: string | ElementType;
+    onChangeProps?: (variableId: string, value: unknown) => void;
 }
 export declare const Instance: (props: any) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/nodes/Instance/Instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Instance.d.ts","sourceRoot":"","sources":["../../../src/nodes/Instance/Instance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAgB,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAS5C,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,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC;IACpD,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,yDAoBpB,CAAC"}
+{"version":3,"file":"Instance.d.ts","sourceRoot":"","sources":["../../../src/nodes/Instance/Instance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAS5C,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,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC;IACpD,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;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D;AAsFD,eAAO,MAAM,QAAQ,yDAoBpB,CAAC"}

package/dist/nodes/Instance/hooks/useInstance.d.ts

@@ -15,6 +15,7 @@ export declare const useInstance: (instanceProps: UseInstanceOptions) => {
     innerManager: any;
     fragmentId: any;
     globalManager: import('@graph-state/core').GraphState<import('@graph-state/core').SystemFields, string> | null;
+    onChangeProps: (variableId: string, value: unknown) => void;
 };
 export {};
 //# sourceMappingURL=useInstance.d.ts.map

package/dist/nodes/Instance/hooks/useInstance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInstance.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstance.ts"],"names":[],"mappings":"AAUA,UAAU,kBAAmB,SAAQ,2BAA2B;CAAG;AAEnE,eAAO,MAAM,WAAW,kBAAmB,kBAAkB;;;;;;;;;;;;;;;CAyC5D,CAAC"}
+{"version":3,"file":"useInstance.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstance.ts"],"names":[],"mappings":"AAUA,UAAU,kBAAmB,SAAQ,2BAA2B;CAAG;AAEnE,eAAO,MAAM,WAAW,kBAAmB,kBAAkB;;;;;;;;;;;;;;;;CA0C5D,CAAC"}

package/dist/nodes/Instance/hooks/useInstanceProps.d.ts

@@ -1,6 +1,7 @@
-import { InstanceProps } from '../index';
+import { InstanceProps } from '../Instance';
 export declare const useInstanceProps: (instanceProps: InstanceProps) => {
     props: Omit<any, "_type" | "_id">;
     cssProps: {};
+    onChangeProps: (variableId: string, value: unknown) => void;
 };
 //# sourceMappingURL=useInstanceProps.d.ts.map

package/dist/nodes/Instance/hooks/useInstanceProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAiBzC,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;CAsE5D,CAAC"}
+{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAc1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;gCAyE7B,MAAM,SAAS,OAAO;CAKrD,CAAC"}

package/dist/nodes/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/nodes/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlE,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"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/nodes/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlE,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,CAkB9B,CAAC"}

package/dist/nodes/Text/hooks/useTextAttributes.d.ts

@@ -3,6 +3,11 @@ export interface UseTextAttributes {
     collectStyle?: boolean;
 }
 export declare const useTextAttributes: (layerKey: LinkKey, options?: UseTextAttributes) => {
+    events: {
+        onClick?: undefined;
+    } | {
+        onClick: () => void;
+    };
     styles: {};
     classnames: string | null;
     content: any;

package/dist/nodes/Text/hooks/useTextAttributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextAttributes.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextAttributes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;CAmB5B,CAAC"}
+{"version":3,"file":"useTextAttributes.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextAttributes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQ5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;;;;;;CAqB5B,CAAC"}

package/dist/utils/layer/makeSnapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeSnapshot.d.ts","sourceRoot":"","sources":["../../../src/utils/layer/makeSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,mBAAmB,CAAC;AAGxD,wBAAgB,YAAY,CAC1B,aAAa,EAAE,UAAU,EACzB,gBAAgB,EAAE,MAAM;;;;;;SA4EzB"}
+{"version":3,"file":"makeSnapshot.d.ts","sourceRoot":"","sources":["../../../src/utils/layer/makeSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,mBAAmB,CAAC;AAGxD,wBAAgB,YAAY,CAC1B,aAAa,EAAE,UAAU,EACzB,gBAAgB,EAAE,MAAM;;;;;;SAoEzB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
   "files": [
     "dist"
@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@graph-state/checkers": "^0.1.2",
-    "@graph-state/core": "^0.13.1",
-    "@graph-state/react": "^0.8.1",
+    "@graph-state/core": "^0.13.2",
+    "@graph-state/react": "^0.8.2",
     "react-use-measure": "^2.1.7",
     "@fragmentsx/definition": "0.2.0",
     "@fragmentsx/utils": "0.2.0"