@appaflytech/zeyrek-ai-mcp 0.0.30 → 0.0.32

package/dist/resources/examples/layout-app-shell.json

@@ -1,363 +1,841 @@
 {
   "_meta": {
     "synthetic": true,
-    "note": "Uygulama kabuğu: yan menü + üst şerit + sayfa slot'u. Studio'nun yeni layout iskeletiyle (getDefaultLayout) birebir aynı ağaç: sarmalayıcı container kök + heightType:'fill'. layout-shell/layout-region DEĞİL, sıradan container'lar. layout_create'in views alanına olduğu gibi verilebilir.",
+    "note": "VARSAYILAN uygulama kabuğu (2026-09-29): Studio'da 'New layout' ile açılan iskeletin (getDefaultLayout) birebir aynısı — sol menü (navigations/sidebar) + üst şerit (breadcrumb · komut paleti araması · yardım · bildirim) + ortada boş içerik alanı ve tek slot. Yeni bir layout kurarken önce BUNU kullan; menü öğelerini, başlığı ve ikonları uygulamaya göre değiştir, gerekmeyen parçayı sil. layout_create'in views alanına olduğu gibi verilebilir. Kullanıcı açıkça başka bir kabuk isterse özelleştir.",
     "pairsWith": "page-detail-profile (slot'a girecek sayfa iskeleti), page-sign-in (layout'suz ekran)",
-    "sourceRef": "platform_guide('layout') Kural 5a/5b; zeyrek-frontend apps/studio/src/features/layout/layout.functions.ts (getDefaultLayout), packages/ng-apps-screen-builder/src/flex-layout.ts (getFlexChildStyle), packages/ng-apps-ui/src/shared/render/render.functions.ts"
+    "sourceRef": "platform_guide('layout') Kural 5/5a; zeyrek-frontend apps/studio/src/features/layout/layout.functions.ts (getDefaultLayout, DEFAULT_SHELL_MENU)"
   },
   "_rules": {
     "viewsNotSchema": "Layout'ta şema alanının adı 'views'tir (LAY-001). Kurulu layout'ta hedefli değişiklik layout_schema_patch micro-op'larıyla yazılır; tam ağaç layout_update ile.",
     "singleSlot": "TEK slot. Sayfa şeması HER slot'a ayrı ayrı kopyalanır — iki slot sayfayı iki kez çizer ve elementId'leri tekrarlar (LAY-002 / LAY-006).",
     "propValueField": "Statik prop'un değeri 'data' alanındadır ({ type:'static', ref:null, data }); 'ref' referans tipleri (flow/file) içindir. Ham değer yazarsanız gateway sarmalar ve normalizasyon notu döner.",
     "slotRowIsOpenEnded": "Slot'un grid satırı açık uçludur (runtime 'y / auto' yazar): sayfa uzadıkça slot uzar. Slot'a sabit yükseklik vermeye çalışma.",
-    "positionComesFromBlocks": "Konum ve boyut blocks[]'ten gelir. layout-region'daki dock prop'u konum DEĞİL biçim belirler; bu örnekte region hiç kullanılmıyor.",
-    "gridStacksFlexDoesNot": "Bu örnek layout:'flex' — fill'in 'kalanı doldur' anlamı flex'te tanımlıdır (sütunda flex:1 1 auto, satırda align-self:stretch). Bedeli MOBİL: runtime'ın mobil kuralı yalnız ızgara özelliklerini ezer, flex satırı telefonda yan yana kalır (375px'te ölçüldü: 49/310px). Telefonda alt alta düşmesi gereken kabuk için kökü layout:'grid' kur; o zaman yükseklik yine blocks satırlarından gelir.",
-    "fixedPxWidthIsFlexOnly": "Bu örnek flex olduğu için yan menüye appearance.widthType:'fixed' + appearance.widthString:'240px' verilebilir (serbest CSS uzunluğu; string yalnız 'fixed' modda okunur). Öteki modlar: 'fill' kabın tüm genişliği, 'auto' içerik kadar; widthType hiç verilmezse genişlik kolon payıdır (12'de 2 ≈ 1440px tasarım genişliğinde 240px). Izgara kabında widthString okunmaz. Üç modun bir arada örneği: ngapps://examples/page-flex-sections.",
-    "navigationsStyleIsDead": "navigations'ın style prop'u hiçbir şey yapmaz (Navigations.svelte style prop'u kabul etmiyor) — menü satırı biçimlendirmeye çalışma.",
+    "gridStacksFlexDoesNot": "Bu kabuk flex'tir. Mobilde (≤768px) sol menü kendi çekmecesine ve hamburger düğmesine döner (bağımsız navigations'ta mobileBehavior:'drawer' varsayılandır); üst şerit ve içerik tam genişliğe yayılır.",
     "verifyWithRuntime": "Layout'un kendi serve URL'i yok: gerçek çıktıyı layout'a bağlı bir sayfada page_runtime_get ile, slot kurgusunu page_state.layoutSlots ile doğrula.",
-    "wrapperRoot": "Kök, sayfanın page_container'ının yerleşim ikizidir: states.isWrapper:true (çerçevesiz, başlıksız, saydam) + blocks x0/w12. Sarmalayıcı olmayan bir kök kenarlıklı beyaz bir kart olarak çizilir.",
-    "fillHeight": "Yükseklik heightType:'fill' ile ifade edilir: kök ekranı doldurur (100vh), yan menü ve içerik sütunu kökün bıraktığını, slot da üst şeritten artanı alır. size.h yalnız kaba bir kılavuzdur — 'fixed' + tahmini h ile yükseklik kurmaya çalışma."
+    "wrapperRoot": "Kök, sayfanın page_container'ının yerleşim ikizidir: states.isWrapper:true (çerçevesiz, başlıksız, saydam) + heightType:'fill' + blocks x0/w12. Sarmalayıcı olmayan bir kök kenarlıklı beyaz bir kart olarak çizilir.",
+    "fillHeight": "Yükseklik heightType:'fill' ile ifade edilir: kök ekranı doldurur (100vh), menü ve ana sütun kökün bıraktığını, içerik alanı üst şeritten (64px) artanı, slot da içerik alanını alır. size.h yalnız kaba bir kılavuzdur.",
+    "menuIsAContainer": "Sol menü navigations bileşenidir ve bir KAPTIR: ana sütun (shell_main) kökün değil menünün ÇOCUĞUDUR, menü onu kendi yanına çizer. Ana sütunu köke kardeş koyarsan satıra sığmaz ve menünün altına sarar.",
+    "oneMenuThreeViews": "Menü, kırıntı yolu (layout:'breadcrumb') ve arama (layout:'command') AYNI navigations ağacını taşır: kırıntı aktif sayfanın yolunu, komut paleti sonuçları bu ağaçtan çıkarır. Menüyü değiştirirken üçünü birlikte güncelle.",
+    "writeLayoutPropsExplicitly": "layout_create katalog varsayılanlarını düğüme YAZMAZ: layout prop'u olmayan container ızgara çizer. Bu yüzden her container'da layout:'flex' + direction/hizalama/gap/wrap açıkça yazılı. Kapatılan bayrak (ana sütun ve üst şeritte wrap:false, crumbSiblings:false) da açıkça yazılır. Ana sütun (column) wrap:true olursa editör kanvasında içerik alanı üst şeridin yanına ikinci sütuna sarar.",
+    "placeholderMenu": "Örnek menü öğeleri adressizdir (yeni uygulamada bağlanacak sayfa yok). Her öğeye href olarak sayfa slug'ı ya da { page: '<id>' } ver; title/icon uygulamanın diline göre değişir. Renkler tema token'ıdır (koyu temada da okunur) — sabit hex yazma."
   },
   "layoutCreate": {
     "name": "Uygulama kabuğu",
     "views": [
       {
-        "elementId": "shell_root",
-        "name": "shell_root",
         "type": "container",
-        "kind": "component",
+        "elementId": "shell_root",
+        "states": {
+          "isDroppable": true,
+          "isWrapper": true
+        },
+        "appearance": {
+          "heightType": "fill",
+          "marginType": "none",
+          "paddingType": "none"
+        },
         "props": {
           "title": {
             "type": "static",
-            "ref": null,
             "data": ""
           },
           "layout": {
             "type": "static",
-            "ref": null,
             "data": "flex"
           },
+          "size": {
+            "type": "static",
+            "data": "shrink"
+          },
           "direction": {
             "type": "static",
-            "ref": null,
             "data": "row"
           },
-          "gap": {
+          "horizontalAlign": {
             "type": "static",
-            "ref": null,
-            "data": "none"
+            "data": "left"
           },
           "verticalAlign": {
             "type": "static",
-            "ref": null,
             "data": "stretch"
+          },
+          "gap": {
+            "type": "static",
+            "data": "none"
+          },
+          "wrap": {
+            "type": "static",
+            "data": true
           }
         },
-        "states": {
-          "isDroppable": true,
-          "isWrapper": true
-        },
-        "appearance": {
-          "heightType": "fill",
-          "marginType": "none",
-          "paddingType": "none"
-        },
         "blocks": [
           {
             "breakpoint": 1024,
-            "position": {
-              "x": 0,
-              "y": 0
-            },
             "size": {
               "w": 12,
               "h": 80
+            },
+            "position": {
+              "x": 0,
+              "y": 0
             }
           }
         ],
-        "events": [],
-        "validations": [],
-        "stateBindings": [],
         "children": [
           {
-            "elementId": "shell_sidebar",
-            "name": "shell_sidebar",
-            "type": "container",
-            "kind": "component",
-            "props": {
-              "title": {
-                "type": "static",
-                "ref": null,
-                "data": ""
-              },
-              "layout": {
-                "type": "static",
-                "ref": null,
-                "data": "flex"
-              },
-              "direction": {
-                "type": "static",
-                "ref": null,
-                "data": "column"
-              },
-              "gap": {
-                "type": "static",
-                "ref": null,
-                "data": "none"
-              }
-            },
+            "type": "navigations",
+            "elementId": "shell_menu",
             "states": {
               "isDroppable": true
             },
             "appearance": {
               "heightType": "fill",
+              "widthType": "fill",
               "marginType": "none",
               "paddingType": "none"
             },
-            "blocks": [
-              {
-                "breakpoint": 1024,
-                "position": {
-                  "x": 0,
-                  "y": 0
-                },
-                "size": {
-                  "w": 2,
-                  "h": 80
+            "props": {
+              "layout": {
+                "type": "static",
+                "data": "sidebar"
+              },
+              "title": {
+                "type": "static",
+                "data": "Uygulamam"
+              },
+              "subTitle": {
+                "type": "static",
+                "data": ""
+              },
+              "icon": {
+                "type": "static",
+                "data": {
+                  "name": "menu_book"
                 }
-              }
-            ],
-            "events": [],
-            "validations": [],
-            "stateBindings": [],
-            "children": [
-              {
-                "elementId": "shell_menu",
-                "name": "shell_menu",
-                "type": "navigations",
-                "kind": "component",
-                "props": {
-                  "navigations": {
-                    "type": "static",
-                    "ref": null,
-                    "data": [
+              },
+              "navigations": {
+                "type": "static",
+                "data": [
+                  {
+                    "title": "Özet",
+                    "icon": {
+                      "name": "dashboard"
+                    }
+                  },
+                  {
+                    "title": "Görevlerim",
+                    "icon": {
+                      "name": "task_alt"
+                    }
+                  },
+                  {
+                    "title": "SİSTEM",
+                    "children": [
                       {
-                        "href": "",
-                        "title": "SATIŞ",
+                        "title": "Ayarlar",
+                        "icon": {
+                          "name": "settings"
+                        },
+                        "isExpandable": true,
                         "children": [
                           {
-                            "href": "panel",
-                            "title": "Panel",
-                            "icon": {
-                              "name": "home"
-                            }
+                            "title": "Kullanıcılar"
                           },
                           {
-                            "href": "sirketler",
-                            "title": "Şirketler",
-                            "icon": {
-                              "name": "domain"
-                            }
+                            "title": "Roller"
                           }
                         ]
                       }
                     ]
                   }
-                },
-                "states": {},
-                "appearance": {
-                  "heightType": "auto",
-                  "marginType": "none",
-                  "paddingType": "none"
-                },
-                "blocks": [
-                  {
-                    "breakpoint": 1024,
-                    "position": {
-                      "x": 0,
-                      "y": 0
-                    },
-                    "size": {
-                      "w": 12,
-                      "h": 40
-                    }
-                  }
-                ],
-                "events": [],
-                "validations": [],
-                "stateBindings": [],
-                "children": []
-              }
-            ]
-          },
-          {
-            "elementId": "shell_main",
-            "name": "shell_main",
-            "type": "container",
-            "kind": "component",
-            "props": {
-              "title": {
+                ]
+              },
+              "size": {
                 "type": "static",
-                "ref": null,
-                "data": ""
+                "data": "sm"
               },
-              "layout": {
+              "indent": {
                 "type": "static",
-                "ref": null,
-                "data": "flex"
+                "data": 32
               },
-              "direction": {
+              "radius": {
                 "type": "static",
-                "ref": null,
-                "data": "column"
+                "data": 6
               },
-              "gap": {
+              "iconSize": {
                 "type": "static",
-                "ref": null,
-                "data": "none"
+                "data": 18
+              },
+              "groupLabel": {
+                "type": "static",
+                "data": "caps"
+              },
+              "inlineDepth": {
+                "type": "static",
+                "data": 3
+              },
+              "nestedStyle": {
+                "type": "static",
+                "data": "subheader"
+              },
+              "iconContainer": {
+                "type": "static",
+                "data": "branch"
+              },
+              "childIcons": {
+                "type": "static",
+                "data": true
+              },
+              "showSearch": {
+                "type": "static",
+                "data": true
+              },
+              "collapsible": {
+                "type": "static",
+                "data": true
+              },
+              "searchPlaceholder": {
+                "type": "static",
+                "data": "Menüde ara"
+              },
+              "textColor": {
+                "type": "static",
+                "data": "var(--ng-text-primary)"
+              },
+              "mutedColor": {
+                "type": "static",
+                "data": "var(--ng-text-secondary)"
+              },
+              "iconColor": {
+                "type": "static",
+                "data": "var(--ng-text-primary)"
               }
             },
-            "states": {
-              "isDroppable": true
-            },
-            "appearance": {
-              "heightType": "fill",
-              "marginType": "none",
-              "paddingType": "none"
-            },
             "blocks": [
               {
                 "breakpoint": 1024,
-                "position": {
-                  "x": 2,
-                  "y": 0
-                },
                 "size": {
-                  "w": 10,
+                  "w": 12,
                   "h": 80
+                },
+                "position": {
+                  "x": 0,
+                  "y": 0
                 }
               }
             ],
-            "events": [],
-            "validations": [],
-            "stateBindings": [],
             "children": [
               {
-                "elementId": "shell_topbar",
-                "name": "shell_topbar",
                 "type": "container",
-                "kind": "component",
+                "elementId": "shell_main",
+                "states": {
+                  "isDroppable": true
+                },
+                "appearance": {
+                  "heightType": "fill",
+                  "widthType": "fill",
+                  "marginType": "none",
+                  "paddingType": "none"
+                },
                 "props": {
                   "title": {
                     "type": "static",
-                    "ref": null,
                     "data": ""
                   },
                   "layout": {
                     "type": "static",
-                    "ref": null,
                     "data": "flex"
                   },
+                  "size": {
+                    "type": "static",
+                    "data": "shrink"
+                  },
                   "direction": {
                     "type": "static",
-                    "ref": null,
-                    "data": "row"
+                    "data": "column"
+                  },
+                  "horizontalAlign": {
+                    "type": "static",
+                    "data": "center"
                   },
                   "verticalAlign": {
                     "type": "static",
-                    "ref": null,
-                    "data": "middle"
+                    "data": "top"
+                  },
+                  "gap": {
+                    "type": "static",
+                    "data": "none"
+                  },
+                  "wrap": {
+                    "type": "static",
+                    "data": false
+                  },
+                  "surfaceStyle": {
+                    "type": "static",
+                    "data": {
+                      "shadow": "none",
+                      "radius": "0px",
+                      "borderTop": "none",
+                      "borderRight": "none",
+                      "borderBottom": "none",
+                      "borderLeft": "none",
+                      "background": "var(--ng-background-surface-alt)",
+                      "contentOverflow": "hidden"
+                    }
                   }
                 },
-                "states": {
-                  "isDroppable": true,
-                  "isSticky": true
-                },
-                "appearance": {
-                  "heightType": "auto",
-                  "marginType": "none",
-                  "paddingType": "none"
-                },
                 "blocks": [
                   {
                     "breakpoint": 1024,
+                    "size": {
+                      "w": 12,
+                      "h": 80
+                    },
                     "position": {
                       "x": 0,
                       "y": 0
-                    },
-                    "size": {
-                      "w": 12,
-                      "h": 6
                     }
                   }
                 ],
-                "events": [],
-                "validations": [],
-                "stateBindings": [],
                 "children": [
                   {
-                    "elementId": "shell_breadcrumb",
-                    "name": "shell_breadcrumb",
-                    "type": "breadcrumb",
-                    "kind": "component",
-                    "props": {},
-                    "states": {},
+                    "type": "container",
+                    "elementId": "shell_topbar",
+                    "states": {
+                      "isDroppable": true
+                    },
                     "appearance": {
-                      "heightType": "auto",
+                      "heightType": "fixed",
+                      "heightString": "64px",
+                      "widthType": "fill",
                       "marginType": "none",
-                      "paddingType": "none"
+                      "paddingType": "custom",
+                      "paddingValues": {
+                        "top": 0,
+                        "right": 32,
+                        "bottom": 0,
+                        "left": 32
+                      }
+                    },
+                    "props": {
+                      "title": {
+                        "type": "static",
+                        "data": ""
+                      },
+                      "layout": {
+                        "type": "static",
+                        "data": "flex"
+                      },
+                      "size": {
+                        "type": "static",
+                        "data": "shrink"
+                      },
+                      "direction": {
+                        "type": "static",
+                        "data": "row"
+                      },
+                      "horizontalAlign": {
+                        "type": "static",
+                        "data": "stretch"
+                      },
+                      "verticalAlign": {
+                        "type": "static",
+                        "data": "middle"
+                      },
+                      "gap": {
+                        "type": "static",
+                        "data": "small"
+                      },
+                      "wrap": {
+                        "type": "static",
+                        "data": false
+                      },
+                      "surfaceStyle": {
+                        "type": "static",
+                        "data": {
+                          "shadow": "none",
+                          "radius": "0px",
+                          "borderTop": "none",
+                          "borderRight": "none",
+                          "borderBottom": "1px solid var(--ng-border-primary)",
+                          "borderLeft": "none",
+                          "background": "var(--ng-background-surface)"
+                        }
+                      }
                     },
                     "blocks": [
                       {
                         "breakpoint": 1024,
+                        "size": {
+                          "w": 12,
+                          "h": 6
+                        },
                         "position": {
                           "x": 0,
                           "y": 0
+                        }
+                      }
+                    ],
+                    "children": [
+                      {
+                        "type": "navigations",
+                        "elementId": "shell_crumbs",
+                        "states": {
+                          "isDroppable": false
+                        },
+                        "appearance": {
+                          "heightType": "fixed",
+                          "heightString": "30px",
+                          "widthType": "fill",
+                          "marginType": "none",
+                          "paddingType": "none"
+                        },
+                        "props": {
+                          "layout": {
+                            "type": "static",
+                            "data": "breadcrumb"
+                          },
+                          "navigations": {
+                            "type": "static",
+                            "data": [
+                              {
+                                "title": "Özet",
+                                "icon": {
+                                  "name": "dashboard"
+                                }
+                              },
+                              {
+                                "title": "Görevlerim",
+                                "icon": {
+                                  "name": "task_alt"
+                                }
+                              },
+                              {
+                                "title": "SİSTEM",
+                                "children": [
+                                  {
+                                    "title": "Ayarlar",
+                                    "icon": {
+                                      "name": "settings"
+                                    },
+                                    "isExpandable": true,
+                                    "children": [
+                                      {
+                                        "title": "Kullanıcılar"
+                                      },
+                                      {
+                                        "title": "Roller"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "crumbHome": {
+                            "type": "static",
+                            "data": true
+                          },
+                          "crumbMax": {
+                            "type": "static",
+                            "data": 3
+                          },
+                          "crumbSiblings": {
+                            "type": "static",
+                            "data": false
+                          }
+                        },
+                        "blocks": [
+                          {
+                            "breakpoint": 1024,
+                            "size": {
+                              "w": 6,
+                              "h": 4
+                            },
+                            "position": {
+                              "x": 0,
+                              "y": 0
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        "type": "navigations",
+                        "elementId": "shell_search",
+                        "states": {
+                          "isDroppable": false
+                        },
+                        "appearance": {
+                          "heightType": "fixed",
+                          "heightString": "36px",
+                          "widthType": "fixed",
+                          "widthString": "393px",
+                          "marginType": "custom",
+                          "marginValue": 0,
+                          "marginValues": {
+                            "top": 0,
+                            "right": 16,
+                            "bottom": 0,
+                            "left": 0
+                          },
+                          "paddingType": "none"
+                        },
+                        "props": {
+                          "layout": {
+                            "type": "static",
+                            "data": "command"
+                          },
+                          "navigations": {
+                            "type": "static",
+                            "data": [
+                              {
+                                "title": "Özet",
+                                "icon": {
+                                  "name": "dashboard"
+                                }
+                              },
+                              {
+                                "title": "Görevlerim",
+                                "icon": {
+                                  "name": "task_alt"
+                                }
+                              },
+                              {
+                                "title": "SİSTEM",
+                                "children": [
+                                  {
+                                    "title": "Ayarlar",
+                                    "icon": {
+                                      "name": "settings"
+                                    },
+                                    "isExpandable": true,
+                                    "children": [
+                                      {
+                                        "title": "Kullanıcılar"
+                                      },
+                                      {
+                                        "title": "Roller"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "searchPlaceholder": {
+                            "type": "static",
+                            "data": "Sayfa ara…"
+                          }
+                        },
+                        "blocks": [
+                          {
+                            "breakpoint": 1024,
+                            "size": {
+                              "w": 4,
+                              "h": 4
+                            },
+                            "position": {
+                              "x": 0,
+                              "y": 4
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        "type": "icon",
+                        "elementId": "shell_help",
+                        "states": {
+                          "isDroppable": false
                         },
+                        "appearance": {
+                          "heightType": "auto",
+                          "widthType": "fixed",
+                          "widthString": "32px",
+                          "tooltip": "Yardım",
+                          "marginType": "none",
+                          "paddingType": "none"
+                        },
+                        "props": {
+                          "icon": {
+                            "type": "static",
+                            "data": {
+                              "name": "help"
+                            }
+                          },
+                          "color": {
+                            "type": "static",
+                            "data": "custom"
+                          },
+                          "customColor": {
+                            "type": "static",
+                            "data": "var(--ng-text-secondary)"
+                          },
+                          "ariaLabel": {
+                            "type": "static",
+                            "data": "Yardım"
+                          }
+                        },
+                        "blocks": [
+                          {
+                            "breakpoint": 1024,
+                            "size": {
+                              "w": 1,
+                              "h": 2
+                            },
+                            "position": {
+                              "x": 0,
+                              "y": 8
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        "type": "icon",
+                        "elementId": "shell_bell",
+                        "states": {
+                          "isDroppable": false
+                        },
+                        "appearance": {
+                          "heightType": "auto",
+                          "widthType": "fixed",
+                          "widthString": "32px",
+                          "tooltip": "Bildirimler",
+                          "marginType": "none",
+                          "paddingType": "none"
+                        },
+                        "props": {
+                          "icon": {
+                            "type": "static",
+                            "data": {
+                              "name": "notifications"
+                            }
+                          },
+                          "color": {
+                            "type": "static",
+                            "data": "custom"
+                          },
+                          "customColor": {
+                            "type": "static",
+                            "data": "var(--ng-text-secondary)"
+                          },
+                          "ariaLabel": {
+                            "type": "static",
+                            "data": "Bildirimler"
+                          }
+                        },
+                        "blocks": [
+                          {
+                            "breakpoint": 1024,
+                            "size": {
+                              "w": 1,
+                              "h": 2
+                            },
+                            "position": {
+                              "x": 0,
+                              "y": 10
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "container",
+                    "elementId": "shell_content",
+                    "states": {
+                      "isDroppable": true,
+                      "isScrollable": true,
+                      "isWrapper": true
+                    },
+                    "appearance": {
+                      "heightType": "fill",
+                      "widthType": "fill",
+                      "marginType": "none",
+                      "paddingType": "custom",
+                      "paddingValues": {
+                        "top": 28,
+                        "right": 32,
+                        "bottom": 32,
+                        "left": 32
+                      }
+                    },
+                    "props": {
+                      "title": {
+                        "type": "static",
+                        "data": ""
+                      },
+                      "layout": {
+                        "type": "static",
+                        "data": "flex"
+                      },
+                      "size": {
+                        "type": "static",
+                        "data": "shrink"
+                      },
+                      "direction": {
+                        "type": "static",
+                        "data": "column"
+                      },
+                      "horizontalAlign": {
+                        "type": "static",
+                        "data": "left"
+                      },
+                      "verticalAlign": {
+                        "type": "static",
+                        "data": "top"
+                      },
+                      "gap": {
+                        "type": "static",
+                        "data": "none"
+                      },
+                      "wrap": {
+                        "type": "static",
+                        "data": false
+                      },
+                      "surfaceStyle": {
+                        "type": "static",
+                        "data": {
+                          "shadow": "none",
+                          "radius": "0px",
+                          "borderTop": "none",
+                          "borderRight": "none",
+                          "borderBottom": "none",
+                          "borderLeft": "none",
+                          "background": "transparent"
+                        }
+                      }
+                    },
+                    "blocks": [
+                      {
+                        "breakpoint": 1024,
                         "size": {
                           "w": 12,
-                          "h": 3
+                          "h": 74
+                        },
+                        "position": {
+                          "x": 0,
+                          "y": 6
                         }
                       }
                     ],
-                    "events": [],
-                    "validations": [],
-                    "stateBindings": [],
-                    "children": []
+                    "children": [
+                      {
+                        "type": "container",
+                        "elementId": "shell_page",
+                        "states": {
+                          "isDroppable": true,
+                          "isScrollable": true
+                        },
+                        "appearance": {
+                          "heightType": "fill",
+                          "widthType": "fill",
+                          "marginType": "custom",
+                          "marginValue": 0,
+                          "marginValues": {
+                            "top": 0,
+                            "right": 0,
+                            "bottom": 0,
+                            "left": 0
+                          },
+                          "paddingType": "custom",
+                          "paddingValue": 0,
+                          "paddingValues": {
+                            "top": 0,
+                            "right": 0,
+                            "bottom": 0,
+                            "left": 0
+                          }
+                        },
+                        "props": {
+                          "title": {
+                            "type": "static",
+                            "data": ""
+                          },
+                          "layout": {
+                            "type": "static",
+                            "data": "flex"
+                          },
+                          "size": {
+                            "type": "static",
+                            "data": "shrink"
+                          },
+                          "direction": {
+                            "type": "static",
+                            "data": "row"
+                          },
+                          "horizontalAlign": {
+                            "type": "static",
+                            "data": "center"
+                          },
+                          "verticalAlign": {
+                            "type": "static",
+                            "data": "stretch"
+                          },
+                          "gap": {
+                            "type": "static",
+                            "data": "medium"
+                          },
+                          "wrap": {
+                            "type": "static",
+                            "data": true
+                          },
+                          "style": {
+                            "type": "static",
+                            "data": {
+                              "maxWidth": "1600px",
+                              "margin": "0px auto",
+                              "border": "none",
+                              "background": "transparent"
+                            }
+                          }
+                        },
+                        "blocks": [
+                          {
+                            "breakpoint": 1024,
+                            "size": {
+                              "w": 12,
+                              "h": 74
+                            },
+                            "position": {
+                              "x": 0,
+                              "y": 0
+                            }
+                          }
+                        ],
+                        "children": [
+                          {
+                            "type": "slot",
+                            "elementId": "shell_slot",
+                            "states": {
+                              "isDroppable": false,
+                              "isScrollable": false
+                            },
+                            "appearance": {
+                              "heightType": "fill",
+                              "widthType": "fill",
+                              "marginType": "none",
+                              "paddingType": "none"
+                            },
+                            "props": {},
+                            "blocks": [
+                              {
+                                "breakpoint": 1024,
+                                "size": {
+                                  "w": 12,
+                                  "h": 74
+                                },
+                                "position": {
+                                  "x": 0,
+                                  "y": 0
+                                }
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
                   }
                 ]
-              },
-              {
-                "elementId": "shell_slot",
-                "name": "shell_slot",
-                "type": "slot",
-                "kind": "component",
-                "props": {},
-                "states": {
-                  "isScrollable": false
-                },
-                "appearance": {
-                  "heightType": "fill",
-                  "marginType": "none",
-                  "paddingType": "none"
-                },
-                "blocks": [
-                  {
-                    "breakpoint": 1024,
-                    "position": {
-                      "x": 0,
-                      "y": 6
-                    },
-                    "size": {
-                      "w": 12,
-                      "h": 74
-                    }
-                  }
-                ],
-                "events": [],
-                "validations": [],
-                "stateBindings": [],
-                "children": []
               }
             ]
           }