@appaflytech/zeyrek-ai-mcp 0.0.21 → 0.0.23

package/dist/platform/capture/readiness.js

@@ -0,0 +1,103 @@
+/**
+ * Kare ne zaman hazır? (G-30 → B-6, 2026-09-07)
+ *
+ * `delayMs` TAHMİNDİ; 09-05'te runtime koşan akış sayacını yayınlamaya başladı (`@ng-apps/flow`
+ * → flow-runtime-errors.ts) ve bekleme "running sıfır, completed > 0" olunca bitiyordu. Bu şart
+ * mount akışı OLMAYAN sayfada (giriş ekranı) hiç sağlanmaz; akış tetiklemeyen `set` eylemi de
+ * `completed`'ı artırmaz. 09-06·2 koşusunda üç eylemli giriş denemesi bu yüzden 47 sn sürdü;
+ * sentetik ölçümde sayfa 0.3 sn'de hazırken aynı çağrı 48 sn'ydi — süre sayfanın değil, bu
+ * döngünün. Hazırlık artık TEK anlık görüntüden okunur: akış sayacı + Studio'nun yükleme
+ * iskeleti (`ViewDetail.svelte` → `.view-detail > .bx--skeleton__placeholder`) + runtime
+ * düğümleri (`[data-element-id]`) + hata/bulunamadı hâli + adres. Karar `decideReadiness`'ta.
+ *
+ * Yüklenmemiş kare ASLA dönmez: bütçe dolduğunda sayfa hâlâ hazır değilse çağrı hatayla düşer
+ * (`captureUnready: true` teşhis kipi dışında). Bozuk sayfayı görmek istiyorsan hata mesajı
+ * neyin görüldüğünü zaten söyler.
+ */
+export const readinessScript = `(function () { /* readinessSnapshot */
+  var activity = window.__ngAppsFlowActivity;
+  return {
+    activity: activity && typeof activity.running === 'number' && typeof activity.completed === 'number' ? { running: activity.running, completed: activity.completed } : null,
+    runtimeNodes: document.querySelectorAll('[data-element-id]').length,
+    skeleton: !!document.querySelector('.view-detail > .bx--skeleton__placeholder'),
+    viewDetail: !!document.querySelector('.view-detail'),
+    errorState: !!document.querySelector('.view-detail__error, .view-detail .error-page'),
+    readyState: String(document.readyState),
+    href: String(location.href)
+  };
+})()`;
+/** Okunan değer gerçekten sayaç mı; değilse sayfa sayaç yayınlamıyordur (eski runtime). */
+export function isFlowActivity(activity) {
+    if (!activity || typeof activity !== 'object')
+        return false;
+    const { running, completed } = activity;
+    return typeof running === 'number' && typeof completed === 'number';
+}
+/** Tarayıcıdan dönen değer anlık görüntü mü; yönlendirme sırasında evaluate düşer ve undefined kalır. */
+export function parseReadiness(raw) {
+    if (!raw || typeof raw !== 'object')
+        return undefined;
+    const value = raw;
+    if (typeof value.runtimeNodes !== 'number' || typeof value.href !== 'string')
+        return undefined;
+    return {
+        activity: isFlowActivity(value.activity) ? { running: value.activity.running, completed: value.activity.completed } : null,
+        runtimeNodes: value.runtimeNodes,
+        skeleton: value.skeleton === true,
+        viewDetail: value.viewDetail === true,
+        errorState: value.errorState === true,
+        readyState: String(value.readyState ?? ''),
+        href: value.href
+    };
+}
+/** `/dev` ve `/view` aynı sayfadır (Studio `hooks.ts` reroute); yönlendirme kararı yalnız yoldan verilir. */
+export function runtimePath(url) {
+    try {
+        return new URL(url).pathname.replace(/^\/dev\//, '/view/').replace(/\/+$/, '');
+    }
+    catch {
+        return url;
+    }
+}
+/** "Hiç akış koşmadı" kararı için DOM'un kaç yoklama değişmemesi gerekir (~600 ms = eski settleMs). */
+const quietPolls = 5;
+/** Sayaç yayınlanmayan runtime'da tek kanıt DOM durulmasıdır; daha uzun beklenir (~1 sn). */
+const legacyQuietPolls = 8;
+/** Runtime dışına yönlendirme: hedef sayfanın kendi JS'i çizmeyi bitirsin (~1.5 sn). */
+const redirectQuietPolls = 12;
+/**
+ * Tek anlık görüntüden "kare alınabilir" kararı; iki uçta da yanlış beklememek için tek yerde.
+ * `quiet` görüntünün kaç yoklamadır değişmediğidir, `completedBefore` bu beklemenin başındaki
+ * bitmiş akış sayısı (sayfa değiştiyse çağıran sıfırlar). İskelet görünüyorsa hiçbir karar yok.
+ */
+export function decideReadiness(snapshot, quiet, completedBefore, baselineUrl) {
+    if (snapshot.skeleton)
+        return undefined;
+    const { activity } = snapshot;
+    const idle = activity !== null && activity.running === 0;
+    if (idle && activity.completed > completedBefore && snapshot.runtimeNodes > 0)
+        return 'ready';
+    if (idle && snapshot.runtimeNodes > 0 && quiet >= quietPolls)
+        return 'ready-no-flows';
+    if (activity === null && snapshot.runtimeNodes > 0 && quiet >= legacyQuietPolls)
+        return 'ready-no-counter';
+    if (idle && snapshot.errorState && quiet >= quietPolls)
+        return 'error';
+    if (!snapshot.viewDetail && snapshot.readyState === 'complete' && baselineUrl !== undefined && runtimePath(snapshot.href) !== runtimePath(baselineUrl) && quiet >= redirectQuietPolls)
+        return 'redirected';
+    return undefined;
+}
+/** Hata mesajı için: bütçe dolduğunda sayfada NE görüldü. */
+export function describeUnready(readiness, apiNote) {
+    const snapshot = readiness.snapshot;
+    const suffix = apiNote === undefined ? '' : ` · ${apiNote}`;
+    if (!snapshot)
+        return `tarayıcı sayfayı hiç değerlendiremedi (sürekli yönlendirme ya da bağlam düştü)${suffix}`;
+    if (snapshot.skeleton)
+        return `sayfa hâlâ yükleme iskeletinde${suffix}`;
+    if (snapshot.activity && snapshot.activity.running > 0)
+        return `${snapshot.activity.running} akış hâlâ koşuyor (${snapshot.activity.completed} bitti)${suffix}`;
+    if (snapshot.runtimeNodes === 0)
+        return `runtime hiç render olmadı — data-element-id taşıyan düğüm yok${snapshot.viewDetail ? '' : ', .view-detail kabı da yok'}${suffix}`;
+    return `sayfa durulmadı (${snapshot.runtimeNodes} düğüm, sayaç ${snapshot.activity ? `${snapshot.activity.running} koşan / ${snapshot.activity.completed} biten` : 'yok'})${suffix}`;
+}

package/dist/platform/capture/summary.js

@@ -0,0 +1,77 @@
+/**
+ * NE GÖRÜNÜYOR — resimsiz (S-5). Aynı sayfa yüklemesinden çıkan üçüncü çıktı: her KÖK runtime
+ * düğümünün görünürlüğü, metni, satır sayısı, açık sekmesi, değeri ve hata metinleri.
+ *
+ * Kök düğüm = kimliğinde `__` OLMAYAN düğüm; iç roller (`tbl__row-3`) satır sayısına dönüşür,
+ * listeye girmez. Tavan 300 düğüm, metin 80 karakter (K3) — özet bir kareyi değiştirmeli, onun
+ * kadar pahalı olmamalı. Tip `data-component-type`'tan gelir (frontend f-02); runtime basmıyorsa
+ * alan YAZILMAZ ve `typed: false` döner — `layoutReportUnavailable` ile aynı dürüstlük kuralı.
+ */
+export function domSummaryScript(viewportHeight) {
+    return `(function () { /* domSummary */
+  var MAX = 300;
+  var CUT = 80;
+  // Görünür alanın GERÇEK boyu: fullPage ve clip yolları viewport'u içerik boyuna büyütür ve
+  // o anda window.innerHeight = içerik yüksekliği olur — her düğüm "ekran içinde" görünürdü ve
+  // "kart katlanmanın altında mı" sorusu HER ZAMAN 'visible' cevabı alırdı (B-10).
+  var VH = ${Math.max(Math.round(viewportHeight), 1)};
+  var clean = function (value) { return String(value || '').replace(/\\s+/g, ' ').trim(); };
+  // Mobil sekme çubuğu '__tabs' bir KÖK satırdır (öğeleri '__tabs__item-<slug>' iç roldür, K14);
+  // web runtime bu kimliği hiç basmaz.
+  var ROOT_SELECTOR = '[data-element-id]:not([data-element-id*="__"]), [data-element-id="__tabs"]';
+  var isRoot = function (element) { var id = String(element.getAttribute('data-element-id') || ''); return id.indexOf('__') < 0 || id === '__tabs'; };
+  var all = Array.prototype.slice.call(document.querySelectorAll('[data-element-id]'));
+  var roots = all.filter(isRoot);
+  var typed = false;
+  var nodes = roots.slice(0, MAX).map(function (node) {
+    var id = node.getAttribute('data-element-id');
+    var type = node.getAttribute('data-component-type');
+    if (type) typed = true;
+    // Bir olgu, ONU TAŞIYAN düğüme yazılır: en yakın kök ata bu düğüm değilse o olgu
+    // çocuğundur ve orada zaten listelenecektir (B-8). Aksi hâlde aynı değer üç satırda çıkar.
+    var owned = function (element) { return !!element && element.closest(ROOT_SELECTOR) === node; };
+    var rect = node.getBoundingClientRect();
+    var visible = typeof node.checkVisibility === 'function'
+      ? !!node.checkVisibility({ checkVisibilityCSS: true, checkOpacity: true })
+      : (rect.width > 0 && rect.height > 0);
+    var inViewport = rect.bottom > 0 && rect.right > 0 && rect.top < VH && rect.left < (window.innerWidth || 0);
+    // Kap düğümün innerText'i ÇOCUKLARININ metnidir; metin yalnız YAPRAK köklerde yazılır.
+    var nested = Array.prototype.slice.call(node.querySelectorAll('[data-element-id]'))
+      .some(isRoot);
+    var text = nested ? '' : clean(node.innerText);
+    if (text.length > CUT) text = text.slice(0, CUT) + '…';
+    var rows = document.querySelectorAll('[data-element-id^="' + id + '__row-"]').length;
+    var tab = node.querySelector('[role="tab"][aria-selected="true"]');
+    var field = node.querySelector('input, select, textarea');
+    var chosen = node.querySelector('.selected-item');
+    var holder = field || chosen;
+    var value = !owned(holder) ? '' : (field ? (field.type === 'password' ? '***' : clean(field.value)) : clean(chosen.textContent));
+    var media = node.querySelector('img, svg, canvas, video, iframe');
+    // İç içe <li> hem grubu hem alt mesajları sayıyordu: tek grup + 2 alt hata 3 görünüyordu (B-7).
+    var errorItems = Array.prototype.slice.call(node.querySelectorAll('.form-validation-errors li:not(:has(li))'))
+      .filter(owned).map(function (item) { return clean(item.textContent); });
+    // aria-invalid hem köke hem input'a yazılabiliyor (Password.svelte); yalnız ALANLAR sayılır.
+    var invalid = Array.prototype.slice.call(node.querySelectorAll('input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]')).filter(owned).length;
+    var summary = { elementId: id, visible: !!visible, inViewport: !!inViewport };
+    if (type) summary.type = type;
+    if (text) summary.text = text;
+    if (rows > 0) summary.rows = rows;
+    if (owned(tab)) summary.activeTab = clean(tab.textContent);
+    if (value) summary.value = value;
+    if (visible && !text && !media && !nested) summary.empty = true;
+    if (errorItems.length > 0) summary.errors = errorItems;
+    else if (invalid > 0) summary.errors = ['aria-invalid: ' + invalid];
+    return summary;
+  });
+  var messages = [];
+  Array.prototype.slice.call(document.querySelectorAll('.ng-toast')).forEach(function (toast) {
+    var name = String(toast.className || '');
+    var kind = name.indexOf('ng-toast--error') >= 0 ? 'toast/error' : (name.indexOf('ng-toast--success') >= 0 ? 'toast/success' : 'toast');
+    messages.push({ kind: kind, text: clean(toast.innerText).slice(0, 160) });
+  });
+  Array.prototype.slice.call(document.querySelectorAll('.view-detail__error, .error-page')).forEach(function (node) {
+    messages.push({ kind: 'error', text: clean(node.innerText).slice(0, 160) });
+  });
+  return { nodes: nodes, messages: messages, truncated: roots.length > MAX, typed: typed };
+})()`;
+}

package/dist/platform/capture/target.js

@@ -0,0 +1,5 @@
+import { studioMobileTarget } from './targets/studio-mobile.js';
+import { studioWebTarget } from './targets/studio-web.js';
+export function captureTargetFor(name) {
+    return name === 'studio-mobile' ? studioMobileTarget : studioWebTarget;
+}

package/dist/platform/capture/targets/studio-mobile.js

@@ -0,0 +1,15 @@
+/**
+ * Mobil uygulama: `@ng-apps/ui-native` `NativeRuntime`, Studio'da react-native-web ile çizilir
+ * (plans/mobil-uygulama-expo F5). Ağaçta `<form>` yoktur — `submit` runtime'ın yayımladığı köprüyle
+ * form düğümünün `submit` olayını makineye iletir (`web-runtime-host.tsx` `__ngAppsSubmitForm`).
+ * Sekme çubuğu `__tabs`, öğeleri `__tabs__item-<sayfa slug'ı>` kimliğini taşır (K14). Açılır
+ * listenin tetikleyicisi `role="combobox"`, seçenekleri `role="option"` + `data-value` taşır ve liste
+ * `Modal` katmanında açılır (`ng-apps-ui-native` `dropdown`).
+ */
+export const studioMobileTarget = Object.freeze({
+    name: 'studio-mobile',
+    submitBridge: '__ngAppsSubmitForm',
+    optionSelector: '[role="option"][data-value], [role="treeitem"][data-value]',
+    optionsOutsideNode: true,
+    platformNote: 'Mobil uygulama: kare Studio\'daki react-native-web çizimidir (/dev|/view) — cihazdaki native çizimle yapısal olarak (düğüm, sıra, ölçü modu, renk) aynı, piksel olarak değil.'
+});

package/dist/platform/capture/targets/studio-web.js

@@ -0,0 +1,5 @@
+/** Web uygulaması: Svelte runtime. Seçenekler `ng-select` ağacı, form gerçek `<form>`. */
+export const studioWebTarget = Object.freeze({
+    name: 'studio-web',
+    optionSelector: '[role="treeitem"][data-value]'
+});

package/dist/platform/domSummary.js

@@ -7,7 +7,7 @@
  * (card) · GİZLİ" 200 karakterdir.
  *
  * Katman saftır: tarayıcıdan gelen anlık görüntüyü doğrular ve biçimler. Toplama işi
- * `screenshot.ts` `domSummaryScript`'te, sunum `pages.ts`'te.
+ * `capture/summary.ts` `domSummaryScript`'te, sunum `pages.ts`'te.
  */
 function text(value) {
     return typeof value === 'string' && value.length > 0 ? value : undefined;

package/dist/resources/examples/mobile-app-shell-drawer.json

@@ -0,0 +1,209 @@
+{
+  "_meta": {
+    "synthetic": true,
+    "note": "Mobil uygulama kabuğu — ÇEKMECE: app-bar (leading 'menu' + menuTarget) + slot + drawer widget'ı. Çekmece ayar değil bileşendir; içindeki düğmeler sıradan redirect akışlarıyla sayfa açar. mobile_app_create drawer:true ile bu kabuğu kurar.",
+    "pairsWith": "mobile-app-shell-stack, mobile-app-shell-tab",
+    "sourceRef": "platform_guide('mobile') §Gezinme; plans/mobil-uygulama-expo/05-mobil-ayarlar-ve-gezinme.md §2.5, §8"
+  },
+  "_rules": {
+    "flexOnly": "Mobil çizer yalnız flex'tir: blocks boş, sıra dizi indeksi, ölçü appearance ile (MOB-001). Kökte layout prop'u YOK — mobil container şeması onu düşürür.",
+    "singleSlot": "TEK slot; sayfa şeması slot'a yerleşir (LAY-002 / LAY-006 web'dekiyle aynı).",
+    "appBarTitle": "app-bar.title boşsa sayfa adı yazılır; leading 'auto' yığında geri düğmesi, kökte (menuTarget varsa) menü düğmesi çizer.",
+    "catalog": "app-bar, slot ve drawer mobil kataloğun Dalga 1 bileşenleridir. component_list mobil uygulamada bunları döndürmüyorsa katalog henüz yazılmamıştır ve layout_create 422 unknown-type alır (MOB-003).",
+    "verify": "Kabuğu layout'a bağlı bir sayfada page_screenshot ile doğrula (mobilde varsayılan device: 'phone').",
+    "menuTarget": "app-bar.menuTarget çekmecenin elementId'sidir (nav_drawer); iç rol app_bar__menu düğmesidir — page_screenshot actions:[{ action:'click', target:'app_bar__menu' }] çekmeceyi açar.",
+    "drawerFlows": "Menü düğmelerine akış ayrı adımda bağlanır: flow_create (host: 'layout', adım redirect { path: '<sayfa slug'ı>' }) → layout_schema_patch set_event { target: 'menu_gorevler', event: 'click' }.",
+    "drawerNode": "Çekmece mobil kataloğun `drawer` bileşenidir (kind 'component', çocuk alır): layout'a doğrudan yazılır, prop'ları katalogdakilerdir (`position`, `size`, `title`, `isDismissDisabled`); kapalı doğar, `app-bar` menüsü `isOpen: true` yazarak açar. Katalogda olmayan prop (ör. `width`, `overlay`) ya da seçenek dışı değer (düğmede `variant: 'ghost'` — geçerli olanlar `solid`/`text`/`outline`) layout_create'i 422 ile düşürür."
+  },
+  "mobileAppCreate": {
+    "slug": "saha-menu",
+    "name": "Saha",
+    "drawer": true,
+    "pages": [
+      {
+        "pageSlug": "gorevler",
+        "pageName": "Görevler"
+      },
+      {
+        "pageSlug": "profil",
+        "pageName": "Profil"
+      }
+    ]
+  },
+  "layoutCreate": {
+    "name": "Mobil kabuk",
+    "views": [
+      {
+        "elementId": "shell_root",
+        "name": "shell_root",
+        "type": "container",
+        "kind": "component",
+        "props": {
+          "title": {
+            "type": "static",
+            "ref": null,
+            "data": ""
+          },
+          "direction": {
+            "type": "static",
+            "ref": null,
+            "data": "column"
+          },
+          "gap": {
+            "type": "static",
+            "ref": null,
+            "data": "none"
+          },
+          "size": {
+            "type": "static",
+            "ref": null,
+            "data": "grow"
+          },
+          "wrap": {
+            "type": "static",
+            "ref": null,
+            "data": false
+          }
+        },
+        "states": {
+          "isDroppable": true,
+          "isWrapper": true
+        },
+        "appearance": {
+          "heightType": "fill",
+          "widthType": "fill"
+        },
+        "blocks": [],
+        "events": [],
+        "validations": [],
+        "stateBindings": [],
+        "children": [
+          {
+            "elementId": "app_bar",
+            "name": "app_bar",
+            "type": "app-bar",
+            "kind": "component",
+            "props": {
+              "title": {
+                "type": "static",
+                "ref": null,
+                "data": ""
+              },
+              "leading": {
+                "type": "static",
+                "ref": null,
+                "data": "menu"
+              },
+              "menuTarget": {
+                "type": "static",
+                "ref": null,
+                "data": "nav_drawer"
+              }
+            },
+            "appearance": {
+              "widthType": "fill"
+            },
+            "blocks": [],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": []
+          },
+          {
+            "elementId": "page_slot",
+            "name": "page_slot",
+            "type": "slot",
+            "kind": "component",
+            "props": {},
+            "appearance": {
+              "widthType": "fill",
+              "heightType": "fill"
+            },
+            "blocks": [],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": []
+          },
+          {
+            "elementId": "nav_drawer",
+            "name": "nav_drawer",
+            "type": "drawer",
+            "kind": "component",
+            "props": {
+              "position": {
+                "type": "static",
+                "ref": null,
+                "data": "left"
+              },
+              "size": {
+                "type": "static",
+                "ref": null,
+                "data": "default"
+              }
+            },
+            "appearance": {},
+            "blocks": [],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": [
+              {
+                "elementId": "menu_gorevler",
+                "name": "menu_gorevler",
+                "type": "button",
+                "kind": "component",
+                "props": {
+                  "text": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "Görevler"
+                  },
+                  "variant": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "text"
+                  }
+                },
+                "appearance": {
+                  "widthType": "fill"
+                },
+                "blocks": [],
+                "events": [],
+                "validations": [],
+                "stateBindings": [],
+                "children": []
+              },
+              {
+                "elementId": "menu_profil",
+                "name": "menu_profil",
+                "type": "button",
+                "kind": "component",
+                "props": {
+                  "text": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "Profil"
+                  },
+                  "variant": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "text"
+                  }
+                },
+                "appearance": {
+                  "widthType": "fill"
+                },
+                "blocks": [],
+                "events": [],
+                "validations": [],
+                "stateBindings": [],
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/dist/resources/examples/mobile-app-shell-stack.json

@@ -0,0 +1,123 @@
+{
+  "_meta": {
+    "synthetic": true,
+    "note": "Mobil uygulama kabuğu — YIĞIN (varsayılan gezinme): app-bar + tek slot. Sekme ayarı yok; redirect sayfayı yığına iter, app-bar geri düğmesi ve cihaz geri tuşu döner. layout_create'in views alanına olduğu gibi verilebilir; mobile_app_create tabs ve drawer verilmeyince bu kabuğu kurar.",
+    "pairsWith": "mobile-app-shell-tab (sekmeli), mobile-app-shell-drawer (çekmeceli), mobile-list-detail-form (üç sayfa)",
+    "sourceRef": "platform_guide('mobile') §Gezinme; plans/mobil-uygulama-expo/05-mobil-ayarlar-ve-gezinme.md §2.5-2.6"
+  },
+  "_rules": {
+    "flexOnly": "Mobil çizer yalnız flex'tir: blocks boş, sıra dizi indeksi, ölçü appearance ile (MOB-001). Kökte layout prop'u YOK — mobil container şeması onu düşürür.",
+    "singleSlot": "TEK slot; sayfa şeması slot'a yerleşir (LAY-002 / LAY-006 web'dekiyle aynı).",
+    "appBarTitle": "app-bar.title boşsa sayfa adı yazılır; leading 'auto' yığında geri düğmesi, kökte (menuTarget varsa) menü düğmesi çizer.",
+    "catalog": "app-bar, slot ve drawer mobil kataloğun Dalga 1 bileşenleridir. component_list mobil uygulamada bunları döndürmüyorsa katalog henüz yazılmamıştır ve layout_create 422 unknown-type alır (MOB-003).",
+    "verify": "Kabuğu layout'a bağlı bir sayfada page_screenshot ile doğrula (mobilde varsayılan device: 'phone')."
+  },
+  "mobileAppCreate": {
+    "slug": "saha",
+    "name": "Saha",
+    "pages": [
+      {
+        "pageSlug": "gorevler",
+        "pageName": "Görevler"
+      },
+      {
+        "pageSlug": "detay",
+        "pageName": "Görev detayı"
+      }
+    ]
+  },
+  "layoutCreate": {
+    "name": "Mobil kabuk",
+    "views": [
+      {
+        "elementId": "shell_root",
+        "name": "shell_root",
+        "type": "container",
+        "kind": "component",
+        "props": {
+          "title": {
+            "type": "static",
+            "ref": null,
+            "data": ""
+          },
+          "direction": {
+            "type": "static",
+            "ref": null,
+            "data": "column"
+          },
+          "gap": {
+            "type": "static",
+            "ref": null,
+            "data": "none"
+          },
+          "size": {
+            "type": "static",
+            "ref": null,
+            "data": "grow"
+          },
+          "wrap": {
+            "type": "static",
+            "ref": null,
+            "data": false
+          }
+        },
+        "states": {
+          "isDroppable": true,
+          "isWrapper": true
+        },
+        "appearance": {
+          "heightType": "fill",
+          "widthType": "fill"
+        },
+        "blocks": [],
+        "events": [],
+        "validations": [],
+        "stateBindings": [],
+        "children": [
+          {
+            "elementId": "app_bar",
+            "name": "app_bar",
+            "type": "app-bar",
+            "kind": "component",
+            "props": {
+              "title": {
+                "type": "static",
+                "ref": null,
+                "data": ""
+              },
+              "leading": {
+                "type": "static",
+                "ref": null,
+                "data": "auto"
+              }
+            },
+            "appearance": {
+              "widthType": "fill"
+            },
+            "blocks": [],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": []
+          },
+          {
+            "elementId": "page_slot",
+            "name": "page_slot",
+            "type": "slot",
+            "kind": "component",
+            "props": {},
+            "appearance": {
+              "widthType": "fill",
+              "heightType": "fill"
+            },
+            "blocks": [],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": []
+          }
+        ]
+      }
+    ]
+  }
+}