docs: highlight Frame events in diagram

Author: rigor789

content/assets/diagrams/Frame_Page_Lifecycle.drawio

@@ -1,9 +1,15 @@
 <mxfile host="65bd71144e">
     <diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">
-        <mxGraphModel dx="1630" dy="712" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+        <mxGraphModel dx="1432" dy="597" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
             <root>
                 <mxCell id="WIyWlLk6GJQsqaUBKTNV-0"/>
                 <mxCell id="WIyWlLk6GJQsqaUBKTNV-1" parent="WIyWlLk6GJQsqaUBKTNV-0"/>
+                <mxCell id="18" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;fillColor=#94A3B8;opacity=10;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+                    <mxGeometry x="-10" y="190" width="860" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="19" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;fillColor=#94A3B8;opacity=10;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+                    <mxGeometry x="-10" y="730" width="860" height="60" as="geometry"/>
+                </mxCell>
                 <mxCell id="16" value="" style="endArrow=none;html=1;rounded=0;dashed=1;strokeWidth=2;endSize=6;startSize=6;jumpSize=6;strokeColor=#60a5fa;fontFamily=Roboto Mono;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono;endFill=0;startArrow=oval;startFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" edge="1">
                     <mxGeometry width="50" height="50" relative="1" as="geometry">
                         <mxPoint y="760" as="sourcePoint"/>
@@ -226,7 +232,7 @@
                         <mxPoint x="710" y="220" as="targetPoint"/>
                     </mxGeometry>
                 </mxCell>
-                <mxCell id="13" value="" style="endArrow=block;html=1;rounded=0;dashed=1;strokeWidth=2;endSize=2;startSize=2;jumpSize=6;strokeColor=#60a5fa;fontFamily=Roboto Mono;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono;endFill=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" target="2" edge="1" source="MzYAZwuP3uAeil5Zmus0-50">
+                <mxCell id="13" value="" style="endArrow=block;html=1;rounded=0;dashed=1;strokeWidth=2;endSize=2;startSize=2;jumpSize=6;strokeColor=#60a5fa;fontFamily=Roboto Mono;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono;endFill=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="MzYAZwuP3uAeil5Zmus0-50" target="2" edge="1">
                     <mxGeometry width="50" height="50" relative="1" as="geometry">
                         <mxPoint x="620" y="759" as="sourcePoint"/>
                         <mxPoint x="750" y="759" as="targetPoint"/>