@almadar/std 7.4.7 → 7.4.8

package/behaviors/registry/organisms/std-realtime-chat.orb

@@ -174,62 +174,72 @@
                     "render-ui",
                     "main",
                     {
-                      "appName": "Realtime Chat",
+                      "type": "dashboard-layout",
+                      "navItems": [
+                        {
+                          "label": "Chat",
+                          "href": "/chat",
+                          "icon": "layout-list"
+                        },
+                        {
+                          "href": "/channels",
+                          "label": "Channels",
+                          "icon": "hash"
+                        },
+                        {
+                          "href": "/online",
+                          "label": "Online",
+                          "icon": "layout-list"
+                        }
+                      ],
                       "children": [
                         {
-                          "direction": "vertical",
                           "gap": "lg",
-                          "className": "max-w-5xl mx-auto w-full",
                           "children": [
                             {
                               "align": "center",
-                              "gap": "md",
+                              "direction": "horizontal",
+                              "justify": "between",
                               "children": [
                                 {
                                   "type": "stack",
-                                  "direction": "horizontal",
-                                  "align": "center",
                                   "children": [
                                     {
-                                      "name": "message-circle",
-                                      "type": "icon"
+                                      "type": "icon",
+                                      "name": "message-circle"
                                     },
                                     {
-                                      "content": "Chat",
+                                      "variant": "h2",
                                       "type": "typography",
-                                      "variant": "h2"
+                                      "content": "Chat"
                                     }
                                   ],
+                                  "direction": "horizontal",
+                                  "align": "center",
                                   "gap": "sm"
                                 },
                                 {
-                                  "direction": "horizontal",
-                                  "type": "stack",
                                   "gap": "sm",
+                                  "type": "stack",
                                   "children": [
                                     {
-                                      "action": "COMPOSE",
-                                      "label": "Compose",
-                                      "variant": "primary",
                                       "icon": "edit",
+                                      "variant": "primary",
+                                      "label": "Compose",
+                                      "action": "COMPOSE",
                                       "type": "button"
                                     }
-                                  ]
+                                  ],
+                                  "direction": "horizontal"
                                 }
                               ],
-                              "justify": "between",
-                              "direction": "horizontal",
-                              "type": "stack"
+                              "type": "stack",
+                              "gap": "md"
                             },
                             {
                               "type": "divider"
                             },
                             {
-                              "variant": "message",
-                              "gap": "sm",
-                              "senderField": "sender",
-                              "fields": [],
-                              "type": "data-list",
                               "columns": [
                                 {
                                   "name": "sender",
@@ -240,8 +250,8 @@
                                   "name": "content"
                                 },
                                 {
-                                  "variant": "caption",
                                   "name": "timestamp",
+                                  "variant": "caption",
                                   "format": "date"
                                 }
                               ],
@@ -252,30 +262,20 @@
                                   "variant": "ghost"
                                 }
                               ],
-                              "entity": "ChatMessage"
+                              "senderField": "sender",
+                              "entity": "ChatMessage",
+                              "fields": [],
+                              "gap": "sm",
+                              "variant": "message",
+                              "type": "data-list"
                             }
                           ],
-                          "type": "stack"
+                          "type": "stack",
+                          "className": "max-w-5xl mx-auto w-full",
+                          "direction": "vertical"
                         }
                       ],
-                      "type": "dashboard-layout",
-                      "navItems": [
-                        {
-                          "label": "Chat",
-                          "href": "/chat",
-                          "icon": "layout-list"
-                        },
-                        {
-                          "href": "/channels",
-                          "label": "Channels",
-                          "icon": "hash"
-                        },
-                        {
-                          "label": "Online",
-                          "icon": "layout-list",
-                          "href": "/online"
-                        }
-                      ]
+                      "appName": "Realtime Chat"
                     }
                   ]
                 ]
@@ -429,43 +429,43 @@
                     "render-ui",
                     "modal",
                     {
-                      "type": "stack",
+                      "direction": "vertical",
                       "gap": "md",
                       "children": [
                         {
                           "type": "stack",
-                          "gap": "sm",
                           "direction": "horizontal",
                           "children": [
                             {
-                              "type": "icon",
-                              "name": "edit"
+                              "name": "edit",
+                              "type": "icon"
                             },
                             {
-                              "type": "typography",
                               "content": "New ChatMessage",
-                              "variant": "h3"
+                              "variant": "h3",
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
+                          "type": "form-section",
+                          "mode": "create",
+                          "submitEvent": "SEND",
+                          "entity": "ChatMessage",
                           "cancelEvent": "CLOSE",
                           "fields": [
                             "sender",
                             "content",
                             "channel",
                             "timestamp"
-                          ],
-                          "entity": "ChatMessage",
-                          "mode": "create",
-                          "submitEvent": "SEND",
-                          "type": "form-section"
+                          ]
                         }
                       ],
-                      "direction": "vertical"
+                      "type": "stack"
                     }
                   ]
                 ]
@@ -672,11 +672,11 @@
                     "fetch",
                     "ChatMessage",
                     {
+                      "id": "@payload.id",
                       "emit": {
-                        "failure": "ChatMessageLoadFailed",
-                        "success": "ChatMessageLoaded"
-                      },
-                      "id": "@payload.id"
+                        "success": "ChatMessageLoaded",
+                        "failure": "ChatMessageLoadFailed"
+                      }
                     }
                   ],
                   [
@@ -684,12 +684,12 @@
                     "modal",
                     {
                       "direction": "vertical",
+                      "type": "stack",
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "horizontal",
-                          "align": "center",
                           "gap": "sm",
+                          "type": "stack",
                           "children": [
                             {
                               "type": "icon",
@@ -697,17 +697,17 @@
                             },
                             {
                               "content": "@entity.sender",
-                              "variant": "h3",
-                              "type": "typography"
+                              "type": "typography",
+                              "variant": "h3"
                             }
-                          ]
+                          ],
+                          "align": "center"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "direction": "horizontal",
-                          "type": "stack",
+                          "gap": "md",
                           "children": [
                             {
                               "type": "typography",
@@ -715,32 +715,33 @@
                               "content": "Sender"
                             },
                             {
-                              "variant": "body",
                               "type": "typography",
+                              "variant": "body",
                               "content": "@entity.sender"
                             }
                           ],
-                          "gap": "md"
+                          "direction": "horizontal",
+                          "type": "stack"
                         },
                         {
+                          "direction": "horizontal",
+                          "type": "stack",
+                          "gap": "md",
                           "children": [
                             {
-                              "variant": "caption",
                               "content": "Content",
+                              "variant": "caption",
                               "type": "typography"
                             },
                             {
-                              "variant": "body",
+                              "content": "@entity.content",
                               "type": "typography",
-                              "content": "@entity.content"
+                              "variant": "body"
                             }
-                          ],
-                          "type": "stack",
-                          "gap": "md",
-                          "direction": "horizontal"
+                          ]
                         },
                         {
-                          "gap": "md",
+                          "type": "stack",
                           "direction": "horizontal",
                           "children": [
                             {
@@ -749,12 +750,12 @@
                               "variant": "caption"
                             },
                             {
-                              "variant": "body",
+                              "type": "typography",
                               "content": "@entity.channel",
-                              "type": "typography"
+                              "variant": "body"
                             }
                           ],
-                          "type": "stack"
+                          "gap": "md"
                         },
                         {
                           "direction": "horizontal",
@@ -762,14 +763,14 @@
                           "type": "stack",
                           "children": [
                             {
-                              "content": "Timestamp",
                               "variant": "caption",
+                              "content": "Timestamp",
                               "type": "typography"
                             },
                             {
                               "type": "typography",
-                              "content": "@entity.timestamp",
-                              "variant": "body"
+                              "variant": "body",
+                              "content": "@entity.timestamp"
                             }
                           ]
                         },
@@ -777,7 +778,8 @@
                           "type": "divider"
                         },
                         {
-                          "direction": "horizontal",
+                          "type": "stack",
+                          "gap": "sm",
                           "children": [
                             {
                               "action": "CLOSE",
@@ -786,12 +788,10 @@
                               "variant": "ghost"
                             }
                           ],
-                          "gap": "sm",
-                          "type": "stack",
-                          "justify": "end"
+                          "justify": "end",
+                          "direction": "horizontal"
                         }
                       ],
-                      "type": "stack",
                       "gap": "md"
                     }
                   ]
@@ -1045,23 +1045,40 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "Realtime Chat",
+                      "navItems": [
+                        {
+                          "label": "Chat",
+                          "href": "/chat",
+                          "icon": "layout-list"
+                        },
+                        {
+                          "icon": "hash",
+                          "href": "/channels",
+                          "label": "Channels"
+                        },
+                        {
+                          "icon": "layout-list",
+                          "label": "Online",
+                          "href": "/online"
+                        }
+                      ],
                       "children": [
                         {
                           "type": "stack",
+                          "direction": "vertical",
+                          "className": "max-w-5xl mx-auto w-full",
+                          "gap": "lg",
                           "children": [
                             {
                               "align": "center",
+                              "justify": "between",
                               "direction": "horizontal",
                               "gap": "md",
-                              "type": "stack",
                               "children": [
                                 {
-                                  "gap": "sm",
-                                  "align": "center",
-                                  "type": "stack",
                                   "direction": "horizontal",
+                                  "type": "stack",
+                                  "align": "center",
                                   "children": [
                                     {
                                       "name": "hash",
@@ -1072,24 +1089,25 @@
                                       "type": "typography",
                                       "variant": "h2"
                                     }
-                                  ]
+                                  ],
+                                  "gap": "sm"
                                 },
                                 {
-                                  "direction": "horizontal",
-                                  "type": "stack",
                                   "children": [
                                     {
-                                      "label": "Create Channel",
                                       "type": "button",
                                       "variant": "primary",
                                       "action": "CREATE",
-                                      "icon": "plus"
+                                      "icon": "plus",
+                                      "label": "Create Channel"
                                     }
                                   ],
-                                  "gap": "sm"
+                                  "type": "stack",
+                                  "gap": "sm",
+                                  "direction": "horizontal"
                                 }
                               ],
-                              "justify": "between"
+                              "type": "stack"
                             },
                             {
                               "type": "divider"
@@ -1097,39 +1115,39 @@
                             {
                               "type": "data-list",
                               "entity": "Channel",
+                              "fields": [],
                               "itemActions": [
                                 {
+                                  "label": "View",
                                   "event": "VIEW",
-                                  "variant": "ghost",
-                                  "label": "View"
+                                  "variant": "ghost"
                                 },
                                 {
-                                  "variant": "ghost",
+                                  "label": "Edit",
                                   "event": "EDIT",
-                                  "label": "Edit"
+                                  "variant": "ghost"
                                 },
                                 {
-                                  "label": "Delete",
                                   "variant": "danger",
+                                  "label": "Delete",
                                   "event": "DELETE"
                                 }
                               ],
-                              "variant": "card",
                               "columns": [
                                 {
-                                  "name": "name",
+                                  "variant": "h3",
                                   "icon": "hash",
-                                  "variant": "h3"
+                                  "name": "name"
                                 },
                                 {
-                                  "name": "memberCount",
+                                  "label": "Members",
                                   "format": "number",
-                                  "variant": "badge",
-                                  "label": "Members"
+                                  "name": "memberCount",
+                                  "variant": "badge"
                                 },
                                 {
-                                  "variant": "body",
-                                  "name": "description"
+                                  "name": "description",
+                                  "variant": "body"
                                 },
                                 {
                                   "label": "Private",
@@ -1138,32 +1156,14 @@
                                   "variant": "body"
                                 }
                               ],
-                              "fields": [],
+                              "variant": "card",
                               "gap": "sm"
                             }
-                          ],
-                          "gap": "lg",
-                          "direction": "vertical",
-                          "className": "max-w-5xl mx-auto w-full"
+                          ]
                         }
                       ],
-                      "navItems": [
-                        {
-                          "icon": "layout-list",
-                          "href": "/chat",
-                          "label": "Chat"
-                        },
-                        {
-                          "href": "/channels",
-                          "icon": "hash",
-                          "label": "Channels"
-                        },
-                        {
-                          "label": "Online",
-                          "href": "/online",
-                          "icon": "layout-list"
-                        }
-                      ]
+                      "type": "dashboard-layout",
+                      "appName": "Realtime Chat"
                     }
                   ]
                 ]
@@ -1327,8 +1327,8 @@
                     "Channel",
                     {
                       "emit": {
-                        "success": "ChannelLoaded",
-                        "failure": "ChannelLoadFailed"
+                        "failure": "ChannelLoadFailed",
+                        "success": "ChannelLoaded"
                       }
                     }
                   ],
@@ -1337,12 +1337,16 @@
                     "modal",
                     {
                       "direction": "vertical",
+                      "gap": "md",
+                      "type": "stack",
                       "children": [
                         {
+                          "gap": "sm",
+                          "direction": "horizontal",
                           "children": [
                             {
-                              "name": "plus-circle",
-                              "type": "icon"
+                              "type": "icon",
+                              "name": "plus-circle"
                             },
                             {
                               "type": "typography",
@@ -1350,29 +1354,25 @@
                               "variant": "h3"
                             }
                           ],
-                          "gap": "sm",
-                          "type": "stack",
-                          "direction": "horizontal"
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "form-section",
-                          "submitEvent": "SAVE",
                           "mode": "create",
+                          "cancelEvent": "CLOSE",
+                          "submitEvent": "SAVE",
+                          "type": "form-section",
                           "fields": [
                             "name",
                             "description",
                             "memberCount",
                             "isPrivate"
                           ],
-                          "cancelEvent": "CLOSE",
                           "entity": "Channel"
                         }
-                      ],
-                      "gap": "md",
-                      "type": "stack"
+                      ]
                     }
                   ]
                 ]
@@ -1594,55 +1594,55 @@
                     "fetch",
                     "Channel",
                     {
-                      "id": "@payload.id",
                       "emit": {
                         "failure": "ChannelLoadFailed",
                         "success": "ChannelLoaded"
-                      }
+                      },
+                      "id": "@payload.id"
                     }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
-                      "direction": "vertical",
                       "type": "stack",
-                      "gap": "md",
                       "children": [
                         {
-                          "direction": "horizontal",
                           "gap": "sm",
                           "type": "stack",
                           "children": [
                             {
-                              "name": "edit",
-                              "type": "icon"
+                              "type": "icon",
+                              "name": "edit"
                             },
                             {
-                              "type": "typography",
+                              "content": "Edit Channel",
                               "variant": "h3",
-                              "content": "Edit Channel"
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "form-section",
-                          "entity": "Channel",
-                          "entityId": "@entity.id",
-                          "submitEvent": "SAVE",
-                          "mode": "edit",
                           "cancelEvent": "CLOSE",
+                          "entityId": "@entity.id",
                           "fields": [
                             "name",
                             "description",
                             "memberCount",
                             "isPrivate"
-                          ]
+                          ],
+                          "submitEvent": "SAVE",
+                          "type": "form-section",
+                          "mode": "edit",
+                          "entity": "Channel"
                         }
-                      ]
+                      ],
+                      "direction": "vertical",
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -1851,46 +1851,47 @@
                     "fetch",
                     "Channel",
                     {
+                      "id": "@payload.id",
                       "emit": {
-                        "success": "ChannelLoaded",
-                        "failure": "ChannelLoadFailed"
-                      },
-                      "id": "@payload.id"
+                        "failure": "ChannelLoadFailed",
+                        "success": "ChannelLoaded"
+                      }
                     }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
+                      "gap": "md",
+                      "direction": "vertical",
                       "children": [
                         {
+                          "gap": "sm",
+                          "align": "center",
+                          "direction": "horizontal",
                           "children": [
                             {
-                              "name": "eye",
-                              "type": "icon"
+                              "type": "icon",
+                              "name": "eye"
                             },
                             {
+                              "variant": "h3",
                               "content": "@entity.name",
-                              "type": "typography",
-                              "variant": "h3"
+                              "type": "typography"
                             }
                           ],
-                          "gap": "sm",
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "align": "center"
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "gap": "md",
-                          "type": "stack",
+                          "direction": "horizontal",
                           "children": [
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "content": "Name"
+                              "content": "Name",
+                              "type": "typography"
                             },
                             {
                               "type": "typography",
@@ -1898,33 +1899,34 @@
                               "variant": "body"
                             }
                           ],
-                          "direction": "horizontal"
+                          "type": "stack",
+                          "gap": "md"
                         },
                         {
+                          "gap": "md",
                           "direction": "horizontal",
+                          "type": "stack",
                           "children": [
                             {
-                              "content": "Description",
+                              "type": "typography",
                               "variant": "caption",
-                              "type": "typography"
+                              "content": "Description"
                             },
                             {
                               "variant": "body",
                               "type": "typography",
                               "content": "@entity.description"
                             }
-                          ],
-                          "gap": "md",
-                          "type": "stack"
+                          ]
                         },
                         {
-                          "direction": "horizontal",
                           "gap": "md",
+                          "type": "stack",
                           "children": [
                             {
+                              "type": "typography",
                               "content": "Member Count",
-                              "variant": "caption",
-                              "type": "typography"
+                              "variant": "caption"
                             },
                             {
                               "variant": "body",
@@ -1932,21 +1934,21 @@
                               "content": "@entity.memberCount"
                             }
                           ],
-                          "type": "stack"
+                          "direction": "horizontal"
                         },
                         {
-                          "gap": "md",
-                          "type": "stack",
                           "direction": "horizontal",
+                          "type": "stack",
+                          "gap": "md",
                           "children": [
                             {
+                              "type": "typography",
                               "variant": "caption",
-                              "content": "Is Private",
-                              "type": "typography"
+                              "content": "Is Private"
                             },
                             {
-                              "type": "typography",
                               "content": "@entity.isPrivate",
+                              "type": "typography",
                               "variant": "body"
                             }
                           ]
@@ -1955,30 +1957,28 @@
                           "type": "divider"
                         },
                         {
-                          "justify": "end",
                           "direction": "horizontal",
+                          "type": "stack",
+                          "justify": "end",
                           "children": [
                             {
-                              "action": "EDIT",
-                              "label": "Edit",
                               "variant": "primary",
+                              "action": "EDIT",
                               "type": "button",
+                              "label": "Edit",
                               "icon": "edit"
                             },
                             {
                               "label": "Close",
                               "variant": "ghost",
-                              "type": "button",
-                              "action": "CLOSE"
+                              "action": "CLOSE",
+                              "type": "button"
                             }
                           ],
-                          "type": "stack",
                           "gap": "sm"
                         }
                       ],
-                      "type": "stack",
-                      "direction": "vertical",
-                      "gap": "md"
+                      "type": "stack"
                     }
                   ]
                 ]
@@ -2193,68 +2193,68 @@
                     "fetch",
                     "Channel",
                     {
-                      "id": "@payload.id",
                       "emit": {
-                        "success": "ChannelLoaded",
-                        "failure": "ChannelLoadFailed"
-                      }
+                        "failure": "ChannelLoadFailed",
+                        "success": "ChannelLoaded"
+                      },
+                      "id": "@payload.id"
                     }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
-                      "gap": "md",
-                      "type": "stack",
                       "direction": "vertical",
+                      "type": "stack",
                       "children": [
                         {
-                          "align": "center",
-                          "gap": "sm",
-                          "type": "stack",
                           "direction": "horizontal",
+                          "type": "stack",
+                          "align": "center",
                           "children": [
                             {
-                              "type": "icon",
-                              "name": "alert-triangle"
+                              "name": "alert-triangle",
+                              "type": "icon"
                             },
                             {
                               "type": "typography",
                               "content": "Delete Channel",
                               "variant": "h3"
                             }
-                          ]
+                          ],
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "message": "This action cannot be undone.",
+                          "variant": "error",
                           "type": "alert",
-                          "variant": "error"
+                          "message": "This action cannot be undone."
                         },
                         {
-                          "justify": "end",
-                          "gap": "sm",
                           "type": "stack",
-                          "direction": "horizontal",
+                          "gap": "sm",
+                          "justify": "end",
                           "children": [
                             {
-                              "label": "Cancel",
-                              "action": "CANCEL",
                               "variant": "ghost",
-                              "type": "button"
+                              "type": "button",
+                              "label": "Cancel",
+                              "action": "CANCEL"
                             },
                             {
-                              "type": "button",
-                              "action": "CONFIRM_DELETE",
+                              "icon": "check",
                               "variant": "danger",
+                              "type": "button",
                               "label": "Delete",
-                              "icon": "check"
+                              "action": "CONFIRM_DELETE"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal"
                         }
-                      ]
+                      ],
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -2533,12 +2533,11 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
                       "appName": "Realtime Chat",
                       "navItems": [
                         {
-                          "href": "/chat",
                           "label": "Chat",
+                          "href": "/chat",
                           "icon": "layout-list"
                         },
                         {
@@ -2547,40 +2546,39 @@
                           "icon": "hash"
                         },
                         {
-                          "href": "/online",
                           "icon": "layout-list",
+                          "href": "/online",
                           "label": "Online"
                         }
                       ],
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
                               "gap": "lg",
+                              "direction": "vertical",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "href": "/",
-                                      "label": "Home"
+                                      "label": "Home",
+                                      "href": "/"
                                     },
                                     {
                                       "label": "Online Users"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
+                                  "gap": "md",
                                   "justify": "between",
                                   "children": [
                                     {
-                                      "type": "stack",
-                                      "direction": "horizontal",
                                       "children": [
                                         {
-                                          "type": "icon",
-                                          "name": "users"
+                                          "name": "users",
+                                          "type": "icon"
                                         },
                                         {
                                           "variant": "h2",
@@ -2588,37 +2586,39 @@
                                           "type": "typography"
                                         }
                                       ],
-                                      "gap": "md"
+                                      "type": "stack",
+                                      "gap": "md",
+                                      "direction": "horizontal"
                                     },
                                     {
-                                      "icon": "refresh-cw",
-                                      "action": "REFRESH",
-                                      "type": "button",
                                       "variant": "secondary",
-                                      "label": "Refresh"
+                                      "type": "button",
+                                      "label": "Refresh",
+                                      "action": "REFRESH",
+                                      "icon": "refresh-cw"
                                     }
                                   ],
-                                  "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md"
+                                  "type": "stack"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
+                                  "padding": "md",
                                   "children": [
                                     {
+                                      "type": "simple-grid",
+                                      "cols": 3.0,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "content": "Username",
                                                   "type": "typography",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "content": "Username"
                                                 },
                                                 {
                                                   "content": [
@@ -2629,26 +2629,28 @@
                                                     ],
                                                     "username"
                                                   ],
-                                                  "variant": "h3",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
                                               ],
+                                              "direction": "vertical",
                                               "type": "stack",
                                               "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "type": "stack",
                                               "children": [
                                                 {
-                                                  "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Status",
-                                                  "type": "typography"
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "content": [
@@ -2662,22 +2664,26 @@
                                                   "type": "typography",
                                                   "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "gap": "sm"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
+                                              "gap": "sm",
+                                              "type": "stack",
                                               "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "content": "LastActive",
+                                                  "variant": "caption",
                                                   "type": "typography",
-                                                  "variant": "caption"
+                                                  "content": "LastActive"
                                                 },
                                                 {
+                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2686,25 +2692,19 @@
                                                     ],
                                                     "lastActive"
                                                   ],
-                                                  "variant": "h3",
                                                   "type": "typography"
                                                 }
-                                              ],
-                                              "type": "stack",
-                                              "gap": "sm"
+                                              ]
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "variant": "caption",
                                                   "content": "Avatar",
+                                                  "variant": "caption",
                                                   "type": "typography"
                                                 },
                                                 {
@@ -2720,23 +2720,25 @@
                                                   ]
                                                 }
                                               ],
+                                              "gap": "sm",
                                               "direction": "vertical",
-                                              "gap": "sm"
+                                              "type": "stack"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
-                                      ],
-                                      "type": "simple-grid",
-                                      "cols": 3.0
+                                      ]
                                     }
                                   ],
-                                  "type": "box",
-                                  "padding": "md"
+                                  "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
+                                  "cols": 2.0,
+                                  "gap": "md",
+                                  "type": "grid",
                                   "children": [
                                     {
                                       "children": [
@@ -2752,34 +2754,32 @@
                                       "children": [
                                         {
                                           "type": "typography",
-                                          "content": "Graph View",
-                                          "variant": "caption"
+                                          "variant": "caption",
+                                          "content": "Graph View"
                                         }
                                       ],
                                       "type": "card"
                                     }
-                                  ],
-                                  "gap": "md",
-                                  "type": "grid",
-                                  "cols": 2.0
+                                  ]
                                 },
                                 {
+                                  "type": "line-chart",
                                   "data": [
                                     {
-                                      "value": 12.0,
-                                      "date": "Jan"
+                                      "date": "Jan",
+                                      "value": 12.0
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19.0
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
                                       "date": "Mar",
                                       "value": 15.0
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25.0
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
                                       "value": 22.0,
@@ -2789,8 +2789,7 @@
                                       "date": "Jun",
                                       "value": 30.0
                                     }
-                                  ],
-                                  "type": "line-chart"
+                                  ]
                                 },
                                 {
                                   "type": "chart-legend",
@@ -2800,18 +2799,31 @@
                                       "color": "primary"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
                                   ]
                                 },
                                 {
+                                  "type": "graph-view",
+                                  "edges": [
+                                    {
+                                      "to": "b",
+                                      "from": "a"
+                                    },
+                                    {
+                                      "from": "b",
+                                      "to": "c"
+                                    }
+                                  ],
+                                  "width": 400.0,
+                                  "height": 200.0,
                                   "nodes": [
                                     {
-                                      "y": 100.0,
                                       "id": "a",
                                       "x": 50.0,
-                                      "label": "Start"
+                                      "label": "Start",
+                                      "y": 100.0
                                     },
                                     {
                                       "x": 200.0,
@@ -2821,32 +2833,20 @@
                                     },
                                     {
                                       "id": "c",
-                                      "label": "End",
+                                      "y": 100.0,
                                       "x": 350.0,
-                                      "y": 100.0
-                                    }
-                                  ],
-                                  "width": 400.0,
-                                  "height": 200.0,
-                                  "type": "graph-view",
-                                  "edges": [
-                                    {
-                                      "to": "b",
-                                      "from": "a"
-                                    },
-                                    {
-                                      "from": "b",
-                                      "to": "c"
+                                      "label": "End"
                                     }
                                   ]
                                 }
                               ],
-                              "type": "stack",
-                              "direction": "vertical"
+                              "type": "stack"
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
                         }
-                      ]
+                      ],
+                      "type": "dashboard-layout"
                     }
                   ]
                 ]
@@ -2861,8 +2861,8 @@
                     "OnlineUser",
                     {
                       "emit": {
-                        "success": "OnlineUserLoaded",
-                        "failure": "OnlineUserLoadFailed"
+                        "failure": "OnlineUserLoadFailed",
+                        "success": "OnlineUserLoaded"
                       }
                     }
                   ],
@@ -2870,8 +2870,10 @@
                     "render-ui",
                     "main",
                     {
+                      "appName": "Realtime Chat",
                       "children": [
                         {
+                          "type": "scaled-diagram",
                           "children": [
                             {
                               "gap": "lg",
@@ -2890,12 +2892,13 @@
                                   ]
                                 },
                                 {
+                                  "type": "stack",
                                   "justify": "between",
                                   "children": [
                                     {
                                       "gap": "md",
-                                      "direction": "horizontal",
                                       "type": "stack",
+                                      "direction": "horizontal",
                                       "children": [
                                         {
                                           "type": "icon",
@@ -2909,16 +2912,15 @@
                                       ]
                                     },
                                     {
-                                      "action": "REFRESH",
-                                      "icon": "refresh-cw",
                                       "type": "button",
+                                      "icon": "refresh-cw",
+                                      "variant": "secondary",
                                       "label": "Refresh",
-                                      "variant": "secondary"
+                                      "action": "REFRESH"
                                     }
                                   ],
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "md"
+                                  "gap": "md",
+                                  "direction": "horizontal"
                                 },
                                 {
                                   "type": "divider"
@@ -2928,23 +2930,19 @@
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "cols": 3.0,
                                       "children": [
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
                                               "gap": "sm",
-                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "content": "Username",
                                                   "type": "typography",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "content": "Username"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
                                                   "content": [
                                                     "object/get",
@@ -2953,28 +2951,27 @@
                                                       "@entity"
                                                     ],
                                                     "username"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "direction": "vertical"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
+                                              "direction": "vertical",
                                               "type": "stack",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "content": "Status",
                                                   "variant": "caption",
+                                                  "content": "Status",
                                                   "type": "typography"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2982,12 +2979,15 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ]
+                                                  ],
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
                                               ],
-                                              "direction": "vertical"
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
@@ -2998,11 +2998,13 @@
                                               "type": "stack",
                                               "children": [
                                                 {
-                                                  "content": "LastActive",
+                                                  "variant": "caption",
                                                   "type": "typography",
-                                                  "variant": "caption"
+                                                  "content": "LastActive"
                                                 },
                                                 {
+                                                  "type": "typography",
+                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3010,9 +3012,7 @@
                                                       "@entity"
                                                     ],
                                                     "lastActive"
-                                                  ],
-                                                  "type": "typography",
-                                                  "variant": "h3"
+                                                  ]
                                                 }
                                               ]
                                             }
@@ -3021,16 +3021,13 @@
                                         {
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Avatar"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3039,15 +3036,20 @@
                                                     ],
                                                     "avatar"
                                                   ],
+                                                  "type": "typography",
                                                   "variant": "h3"
                                                 }
                                               ],
-                                              "direction": "vertical"
+                                              "direction": "vertical",
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
                                           ],
                                           "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "cols": 3.0,
+                                      "type": "simple-grid"
                                     }
                                   ]
                                 },
@@ -3055,41 +3057,41 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "cols": 2.0,
-                                  "type": "grid",
                                   "gap": "md",
                                   "children": [
                                     {
+                                      "type": "card",
                                       "children": [
                                         {
+                                          "content": "Chart View",
                                           "type": "typography",
-                                          "variant": "caption",
-                                          "content": "Chart View"
+                                          "variant": "caption"
                                         }
-                                      ],
-                                      "type": "card"
+                                      ]
                                     },
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
                                           "type": "typography",
                                           "variant": "caption",
                                           "content": "Graph View"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     }
-                                  ]
+                                  ],
+                                  "cols": 2.0,
+                                  "type": "grid"
                                 },
                                 {
                                   "data": [
                                     {
-                                      "date": "Jan",
-                                      "value": 12.0
+                                      "value": 12.0,
+                                      "date": "Jan"
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19.0
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
                                       "date": "Mar",
@@ -3100,12 +3102,12 @@
                                       "value": 25.0
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22.0
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
-                                      "date": "Jun",
-                                      "value": 30.0
+                                      "value": 30.0,
+                                      "date": "Jun"
                                     }
                                   ],
                                   "type": "line-chart"
@@ -3113,19 +3115,17 @@
                                 {
                                   "items": [
                                     {
-                                      "color": "primary",
-                                      "label": "Current"
+                                      "label": "Current",
+                                      "color": "primary"
                                     },
                                     {
-                                      "color": "muted",
-                                      "label": "Previous"
+                                      "label": "Previous",
+                                      "color": "muted"
                                     }
                                   ],
                                   "type": "chart-legend"
                                 },
                                 {
-                                  "type": "graph-view",
-                                  "height": 200.0,
                                   "edges": [
                                     {
                                       "from": "a",
@@ -3136,54 +3136,54 @@
                                       "to": "c"
                                     }
                                   ],
-                                  "width": 400.0,
                                   "nodes": [
                                     {
                                       "id": "a",
-                                      "x": 50.0,
                                       "label": "Start",
+                                      "x": 50.0,
                                       "y": 100.0
                                     },
                                     {
-                                      "label": "Process",
-                                      "x": 200.0,
                                       "y": 50.0,
-                                      "id": "b"
+                                      "id": "b",
+                                      "label": "Process",
+                                      "x": 200.0
                                     },
                                     {
-                                      "x": 350.0,
                                       "label": "End",
+                                      "y": 100.0,
                                       "id": "c",
-                                      "y": 100.0
+                                      "x": 350.0
                                     }
-                                  ]
+                                  ],
+                                  "height": 200.0,
+                                  "type": "graph-view",
+                                  "width": 400.0
                                 }
                               ],
                               "type": "stack"
                             }
-                          ],
-                          "type": "scaled-diagram"
+                          ]
                         }
                       ],
                       "type": "dashboard-layout",
                       "navItems": [
                         {
+                          "label": "Chat",
                           "icon": "layout-list",
-                          "href": "/chat",
-                          "label": "Chat"
+                          "href": "/chat"
                         },
                         {
-                          "icon": "hash",
                           "label": "Channels",
-                          "href": "/channels"
+                          "href": "/channels",
+                          "icon": "hash"
                         },
                         {
-                          "icon": "layout-list",
+                          "label": "Online",
                           "href": "/online",
-                          "label": "Online"
+                          "icon": "layout-list"
                         }
-                      ],
-                      "appName": "Realtime Chat"
+                      ]
                     }
                   ]
                 ]
@@ -3198,8 +3198,8 @@
                     "OnlineUser",
                     {
                       "emit": {
-                        "success": "OnlineUserLoaded",
-                        "failure": "OnlineUserLoadFailed"
+                        "failure": "OnlineUserLoadFailed",
+                        "success": "OnlineUserLoaded"
                       }
                     }
                   ],
@@ -3207,83 +3207,81 @@
                     "render-ui",
                     "main",
                     {
+                      "appName": "Realtime Chat",
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
                               "gap": "lg",
+                              "type": "stack",
                               "direction": "vertical",
                               "children": [
                                 {
+                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Online Users"
                                     }
-                                  ],
-                                  "type": "breadcrumb"
+                                  ]
                                 },
                                 {
                                   "type": "stack",
-                                  "direction": "horizontal",
                                   "gap": "md",
                                   "children": [
                                     {
                                       "gap": "md",
                                       "type": "stack",
+                                      "direction": "horizontal",
                                       "children": [
                                         {
-                                          "name": "users",
-                                          "type": "icon"
+                                          "type": "icon",
+                                          "name": "users"
                                         },
                                         {
-                                          "content": "Online Users",
                                           "variant": "h2",
+                                          "content": "Online Users",
                                           "type": "typography"
                                         }
-                                      ],
-                                      "direction": "horizontal"
+                                      ]
                                     },
                                     {
-                                      "label": "Refresh",
                                       "type": "button",
-                                      "action": "REFRESH",
                                       "icon": "refresh-cw",
-                                      "variant": "secondary"
+                                      "action": "REFRESH",
+                                      "variant": "secondary",
+                                      "label": "Refresh"
                                     }
                                   ],
-                                  "justify": "between"
+                                  "justify": "between",
+                                  "direction": "horizontal"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
+                                  "type": "box",
                                   "children": [
                                     {
+                                      "type": "simple-grid",
                                       "cols": 3.0,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
-                                              "gap": "sm",
+                                              "type": "stack",
                                               "children": [
                                                 {
                                                   "variant": "caption",
-                                                  "content": "Username",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "content": "Username"
                                                 },
                                                 {
                                                   "variant": "h3",
-                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3291,25 +3289,30 @@
                                                       "@entity"
                                                     ],
                                                     "username"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "type": "stack"
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "children": [
                                             {
                                               "gap": "sm",
                                               "direction": "vertical",
+                                              "type": "stack",
                                               "children": [
                                                 {
+                                                  "type": "typography",
                                                   "content": "Status",
-                                                  "variant": "caption",
-                                                  "type": "typography"
+                                                  "variant": "caption"
                                                 },
                                                 {
+                                                  "type": "typography",
                                                   "variant": "h3",
                                                   "content": [
                                                     "object/get",
@@ -3318,11 +3321,9 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ],
-                                                  "type": "typography"
+                                                  ]
                                                 }
-                                              ],
-                                              "type": "stack"
+                                              ]
                                             }
                                           ],
                                           "type": "card"
@@ -3331,14 +3332,14 @@
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "gap": "sm",
                                               "direction": "vertical",
+                                              "gap": "sm",
+                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "content": "LastActive",
                                                   "variant": "caption",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "content": "LastActive"
                                                 },
                                                 {
                                                   "type": "typography",
@@ -3357,18 +3358,18 @@
                                           ]
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
+                                                  "variant": "caption",
                                                   "content": "Avatar",
-                                                  "variant": "caption"
+                                                  "type": "typography"
                                                 },
                                                 {
                                                   "type": "typography",
+                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3376,17 +3377,16 @@
                                                       "@entity"
                                                     ],
                                                     "avatar"
-                                                  ],
-                                                  "variant": "h3"
+                                                  ]
                                                 }
                                               ],
-                                              "type": "stack"
+                                              "direction": "vertical",
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         }
-                                      ],
-                                      "type": "simple-grid"
+                                      ]
                                     }
                                   ]
                                 },
@@ -3394,46 +3394,46 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
-                                  "cols": 2.0,
                                   "gap": "md",
                                   "children": [
                                     {
+                                      "type": "card",
                                       "children": [
                                         {
-                                          "variant": "caption",
                                           "type": "typography",
-                                          "content": "Chart View"
+                                          "content": "Chart View",
+                                          "variant": "caption"
                                         }
-                                      ],
-                                      "type": "card"
+                                      ]
                                     },
                                     {
+                                      "type": "card",
                                       "children": [
                                         {
                                           "content": "Graph View",
                                           "variant": "caption",
                                           "type": "typography"
                                         }
-                                      ],
-                                      "type": "card"
+                                      ]
                                     }
-                                  ]
+                                  ],
+                                  "cols": 2.0,
+                                  "type": "grid"
                                 },
                                 {
                                   "type": "line-chart",
                                   "data": [
                                     {
-                                      "date": "Jan",
-                                      "value": 12.0
+                                      "value": 12.0,
+                                      "date": "Jan"
                                     },
                                     {
                                       "date": "Feb",
                                       "value": 19.0
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15.0
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
                                       "value": 25.0,
@@ -3444,65 +3444,66 @@
                                       "value": 22.0
                                     },
                                     {
-                                      "date": "Jun",
-                                      "value": 30.0
+                                      "value": 30.0,
+                                      "date": "Jun"
                                     }
                                   ]
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "color": "primary",
-                                      "label": "Current"
+                                      "label": "Current",
+                                      "color": "primary"
                                     },
                                     {
-                                      "color": "muted",
-                                      "label": "Previous"
+                                      "label": "Previous",
+                                      "color": "muted"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
                                   "nodes": [
                                     {
-                                      "x": 50.0,
+                                      "label": "Start",
                                       "id": "a",
-                                      "y": 100.0,
-                                      "label": "Start"
+                                      "x": 50.0,
+                                      "y": 100.0
                                     },
                                     {
-                                      "id": "b",
+                                      "y": 50.0,
                                       "label": "Process",
-                                      "x": 200.0,
-                                      "y": 50.0
+                                      "id": "b",
+                                      "x": 200.0
                                     },
                                     {
-                                      "y": 100.0,
-                                      "label": "End",
                                       "x": 350.0,
-                                      "id": "c"
+                                      "label": "End",
+                                      "id": "c",
+                                      "y": 100.0
                                     }
                                   ],
-                                  "width": 400.0,
-                                  "height": 200.0,
-                                  "type": "graph-view",
                                   "edges": [
                                     {
-                                      "to": "b",
-                                      "from": "a"
+                                      "from": "a",
+                                      "to": "b"
                                     },
                                     {
-                                      "from": "b",
-                                      "to": "c"
+                                      "to": "c",
+                                      "from": "b"
                                     }
-                                  ]
+                                  ],
+                                  "type": "graph-view",
+                                  "width": 400.0,
+                                  "height": 200.0
                                 }
                               ]
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
                         }
                       ],
-                      "appName": "Realtime Chat",
+                      "type": "dashboard-layout",
                       "navItems": [
                         {
                           "label": "Chat",
@@ -3510,17 +3511,16 @@
                           "icon": "layout-list"
                         },
                         {
-                          "icon": "hash",
+                          "label": "Channels",
                           "href": "/channels",
-                          "label": "Channels"
+                          "icon": "hash"
                         },
                         {
+                          "href": "/online",
                           "icon": "layout-list",
-                          "label": "Online",
-                          "href": "/online"
+                          "label": "Online"
                         }
-                      ],
-                      "type": "dashboard-layout"
+                      ]
                     }
                   ]
                 ]
@@ -3544,85 +3544,91 @@
                     "render-ui",
                     "main",
                     {
+                      "navItems": [
+                        {
+                          "href": "/chat",
+                          "label": "Chat",
+                          "icon": "layout-list"
+                        },
+                        {
+                          "label": "Channels",
+                          "href": "/channels",
+                          "icon": "hash"
+                        },
+                        {
+                          "icon": "layout-list",
+                          "label": "Online",
+                          "href": "/online"
+                        }
+                      ],
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
+                              "direction": "vertical",
                               "type": "stack",
                               "gap": "lg",
-                              "direction": "vertical",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "href": "/",
-                                      "label": "Home"
+                                      "label": "Home",
+                                      "href": "/"
                                     },
                                     {
                                       "label": "Online Users"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
+                                  "gap": "md",
+                                  "justify": "between",
+                                  "direction": "horizontal",
                                   "children": [
                                     {
-                                      "direction": "horizontal",
+                                      "gap": "md",
+                                      "type": "stack",
                                       "children": [
                                         {
-                                          "type": "icon",
-                                          "name": "users"
+                                          "name": "users",
+                                          "type": "icon"
                                         },
                                         {
+                                          "content": "Online Users",
                                           "variant": "h2",
-                                          "type": "typography",
-                                          "content": "Online Users"
+                                          "type": "typography"
                                         }
                                       ],
-                                      "gap": "md",
-                                      "type": "stack"
+                                      "direction": "horizontal"
                                     },
                                     {
-                                      "type": "button",
-                                      "action": "REFRESH",
                                       "label": "Refresh",
+                                      "type": "button",
+                                      "icon": "refresh-cw",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "action": "REFRESH"
                                     }
                                   ],
-                                  "type": "stack",
-                                  "justify": "between",
-                                  "direction": "horizontal",
-                                  "gap": "md"
+                                  "type": "stack"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
-                                  "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "cols": 3.0,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "gap": "sm",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Username"
                                                 },
                                                 {
-                                                  "variant": "h3",
-                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3630,18 +3636,24 @@
                                                       "@entity"
                                                     ],
                                                     "username"
-                                                  ]
+                                                  ],
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical",
+                                              "gap": "sm",
+                                              "type": "stack"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
                                               "type": "stack",
+                                              "direction": "vertical",
+                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "variant": "caption",
@@ -3649,6 +3661,8 @@
                                                   "content": "Status"
                                                 },
                                                 {
+                                                  "type": "typography",
+                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3656,21 +3670,20 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ],
-                                                  "type": "typography",
-                                                  "variant": "h3"
+                                                  ]
                                                 }
-                                              ],
-                                              "gap": "sm"
+                                              ]
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
                                               "type": "stack",
-                                              "gap": "sm",
                                               "direction": "vertical",
+                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "content": "LastActive",
@@ -3678,6 +3691,7 @@
                                                   "variant": "caption"
                                                 },
                                                 {
+                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3686,30 +3700,26 @@
                                                     ],
                                                     "lastActive"
                                                   ],
-                                                  "type": "typography",
-                                                  "variant": "h3"
+                                                  "type": "typography"
                                                 }
                                               ]
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
                                               "gap": "sm",
                                               "type": "stack",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
                                                   "variant": "caption",
-                                                  "type": "typography",
-                                                  "content": "Avatar"
+                                                  "content": "Avatar",
+                                                  "type": "typography"
                                                 },
                                                 {
-                                                  "variant": "h3",
                                                   "type": "typography",
+                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3719,13 +3729,19 @@
                                                     "avatar"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "type": "simple-grid",
+                                      "cols": 3.0
                                     }
-                                  ]
+                                  ],
+                                  "type": "box",
+                                  "padding": "md"
                                 },
                                 {
                                   "type": "divider"
@@ -3733,14 +3749,14 @@
                                 {
                                   "children": [
                                     {
+                                      "type": "card",
                                       "children": [
                                         {
                                           "type": "typography",
                                           "content": "Chart View",
                                           "variant": "caption"
                                         }
-                                      ],
-                                      "type": "card"
+                                      ]
                                     },
                                     {
                                       "type": "card",
@@ -3758,18 +3774,19 @@
                                   "gap": "md"
                                 },
                                 {
+                                  "type": "line-chart",
                                   "data": [
                                     {
-                                      "value": 12.0,
-                                      "date": "Jan"
+                                      "date": "Jan",
+                                      "value": 12.0
                                     },
                                     {
-                                      "value": 19.0,
-                                      "date": "Feb"
+                                      "date": "Feb",
+                                      "value": 19.0
                                     },
                                     {
-                                      "value": 15.0,
-                                      "date": "Mar"
+                                      "date": "Mar",
+                                      "value": 15.0
                                     },
                                     {
                                       "value": 25.0,
@@ -3783,8 +3800,7 @@
                                       "date": "Jun",
                                       "value": 30.0
                                     }
-                                  ],
-                                  "type": "line-chart"
+                                  ]
                                 },
                                 {
                                   "type": "chart-legend",
@@ -3802,62 +3818,46 @@
                                 {
                                   "nodes": [
                                     {
-                                      "y": 100.0,
                                       "label": "Start",
                                       "x": 50.0,
+                                      "y": 100.0,
                                       "id": "a"
                                     },
                                     {
-                                      "id": "b",
-                                      "label": "Process",
                                       "x": 200.0,
+                                      "label": "Process",
+                                      "id": "b",
                                       "y": 50.0
                                     },
                                     {
-                                      "id": "c",
-                                      "x": 350.0,
                                       "y": 100.0,
+                                      "x": 350.0,
+                                      "id": "c",
                                       "label": "End"
                                     }
                                   ],
+                                  "height": 200.0,
                                   "width": 400.0,
                                   "edges": [
                                     {
-                                      "to": "b",
-                                      "from": "a"
+                                      "from": "a",
+                                      "to": "b"
                                     },
                                     {
                                       "from": "b",
                                       "to": "c"
                                     }
                                   ],
-                                  "type": "graph-view",
-                                  "height": 200.0
+                                  "type": "graph-view"
                                 }
                               ]
                             }
-                          ]
-                        }
-                      ],
-                      "navItems": [
-                        {
-                          "icon": "layout-list",
-                          "href": "/chat",
-                          "label": "Chat"
-                        },
-                        {
-                          "icon": "hash",
-                          "href": "/channels",
-                          "label": "Channels"
-                        },
-                        {
-                          "href": "/online",
-                          "icon": "layout-list",
-                          "label": "Online"
+                          ],
+                          "type": "scaled-diagram"
                         }
                       ],
-                      "type": "dashboard-layout",
-                      "appName": "Realtime Chat"
+                      "appName": "Realtime Chat",
+                      "type": "dashboard-layout"
                     }
                   ]
                 ]
@@ -3881,22 +3881,21 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
                       "navItems": [
                         {
                           "label": "Chat",
-                          "icon": "layout-list",
-                          "href": "/chat"
+                          "href": "/chat",
+                          "icon": "layout-list"
                         },
                         {
+                          "icon": "hash",
                           "label": "Channels",
-                          "href": "/channels",
-                          "icon": "hash"
+                          "href": "/channels"
                         },
                         {
-                          "label": "Online",
                           "href": "/online",
-                          "icon": "layout-list"
+                          "icon": "layout-list",
+                          "label": "Online"
                         }
                       ],
                       "children": [
@@ -3904,16 +3903,16 @@
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "vertical",
+                              "type": "stack",
                               "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Online Users"
@@ -3921,33 +3920,33 @@
                                   ]
                                 },
                                 {
-                                  "type": "stack",
-                                  "justify": "between",
-                                  "gap": "md",
                                   "direction": "horizontal",
+                                  "gap": "md",
+                                  "justify": "between",
+                                  "type": "stack",
                                   "children": [
                                     {
-                                      "gap": "md",
-                                      "direction": "horizontal",
-                                      "type": "stack",
                                       "children": [
                                         {
                                           "type": "icon",
                                           "name": "users"
                                         },
                                         {
-                                          "content": "Online Users",
                                           "type": "typography",
+                                          "content": "Online Users",
                                           "variant": "h2"
                                         }
-                                      ]
+                                      ],
+                                      "type": "stack",
+                                      "direction": "horizontal",
+                                      "gap": "md"
                                     },
                                     {
-                                      "type": "button",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw",
                                       "label": "Refresh",
-                                      "action": "REFRESH"
+                                      "action": "REFRESH",
+                                      "type": "button",
+                                      "icon": "refresh-cw"
                                     }
                                   ]
                                 },
@@ -3955,20 +3954,19 @@
                                   "type": "divider"
                                 },
                                 {
+                                  "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
+                                      "cols": 3.0,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "children": [
                                                 {
+                                                  "content": "Username",
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Username"
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "content": [
@@ -3983,25 +3981,27 @@
                                                   "variant": "h3"
                                                 }
                                               ],
-                                              "gap": "sm",
-                                              "direction": "vertical"
+                                              "type": "stack",
+                                              "direction": "vertical",
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
                                               "type": "stack",
-                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "content": "Status",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "content": "Status"
                                                 },
                                                 {
                                                   "variant": "h3",
+                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -4009,29 +4009,26 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ],
-                                                  "type": "typography"
+                                                  ]
                                                 }
-                                              ]
+                                              ],
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "gap": "sm",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
                                                   "variant": "caption",
-                                                  "type": "typography",
-                                                  "content": "LastActive"
+                                                  "content": "LastActive",
+                                                  "type": "typography"
                                                 },
                                                 {
                                                   "variant": "h3",
-                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -4039,21 +4036,25 @@
                                                       "@entity"
                                                     ],
                                                     "lastActive"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
                                               ],
+                                              "direction": "vertical",
+                                              "gap": "sm",
                                               "type": "stack"
                                             }
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
+                                              "type": "stack",
+                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "variant": "caption",
                                                   "type": "typography",
+                                                  "variant": "caption",
                                                   "content": "Avatar"
                                                 },
                                                 {
@@ -4069,17 +4070,15 @@
                                                   ]
                                                 }
                                               ],
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm"
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
                                       ],
-                                      "cols": 3.0
+                                      "type": "simple-grid"
                                     }
                                   ],
-                                  "padding": "md",
                                   "type": "box"
                                 },
                                 {
@@ -4087,33 +4086,32 @@
                                 },
                                 {
                                   "type": "grid",
-                                  "gap": "md",
                                   "children": [
                                     {
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "content": "Chart View",
-                                          "variant": "caption"
+                                          "variant": "caption",
+                                          "type": "typography"
                                         }
                                       ],
                                       "type": "card"
                                     },
                                     {
+                                      "type": "card",
                                       "children": [
                                         {
-                                          "variant": "caption",
                                           "type": "typography",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "variant": "caption"
                                         }
-                                      ],
-                                      "type": "card"
+                                      ]
                                     }
                                   ],
-                                  "cols": 2.0
+                                  "cols": 2.0,
+                                  "gap": "md"
                                 },
                                 {
-                                  "type": "line-chart",
                                   "data": [
                                     {
                                       "value": 12.0,
@@ -4124,8 +4122,8 @@
                                       "date": "Feb"
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15.0
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
                                       "date": "Apr",
@@ -4139,61 +4137,63 @@
                                       "date": "Jun",
                                       "value": 30.0
                                     }
-                                  ]
+                                  ],
+                                  "type": "line-chart"
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "label": "Current",
-                                      "color": "primary"
+                                      "color": "primary",
+                                      "label": "Current"
                                     },
                                     {
                                       "color": "muted",
                                       "label": "Previous"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
                                   "width": 400.0,
                                   "nodes": [
                                     {
-                                      "label": "Start",
+                                      "y": 100.0,
                                       "id": "a",
-                                      "x": 50.0,
-                                      "y": 100.0
+                                      "label": "Start",
+                                      "x": 50.0
                                     },
                                     {
                                       "x": 200.0,
                                       "id": "b",
-                                      "y": 50.0,
-                                      "label": "Process"
+                                      "label": "Process",
+                                      "y": 50.0
                                     },
                                     {
-                                      "y": 100.0,
-                                      "label": "End",
                                       "x": 350.0,
-                                      "id": "c"
+                                      "id": "c",
+                                      "y": 100.0,
+                                      "label": "End"
                                     }
                                   ],
                                   "type": "graph-view",
-                                  "height": 200.0,
                                   "edges": [
                                     {
                                       "from": "a",
                                       "to": "b"
                                     },
                                     {
-                                      "to": "c",
-                                      "from": "b"
+                                      "from": "b",
+                                      "to": "c"
                                     }
-                                  ]
+                                  ],
+                                  "height": 200.0
                                 }
                               ]
                             }
                           ]
                         }
                       ],
+                      "type": "dashboard-layout",
                       "appName": "Realtime Chat"
                     }
                   ]