@appaflytech/zeyrek-ai-mcp 0.0.4 → 0.0.6

package/dist/knowledge/componentCatalog.js

@@ -8,13 +8,46 @@
  * çıplak sayı px sayılır. `radius` TEK alandır: preset anahtarı (none|sm|md|
  * lg|pill) YA DA doğrudan CSS uzunluğu ('18px') yazılabilir.
  */
+/**
+ * KOLON TİPİ SÖZLÜĞÜ — her tip için "neyi bekler / neyi çizer" (G-29).
+ * Katalog tipleri yalnız ADIYLA listeliyordu; 09-05 koşusunda altı avatar yüklenip satırlara
+ * bağlandığı hâlde `image` kolonu eklenmedi, çünkü kolonun dosya alanı mı yoksa URL mi beklediği
+ * hiçbir yerde yazmıyordu. Kaynak: `packages/ng-apps-ui/src/components/table/components/renderers/*`
+ * ve `column-format.functions.ts`.
+ */
+export const TABLE_COLUMN_TYPE_NOTE = "KOLON TİPİ SÖZLÜĞÜ (bekler → çizer). " +
+    "text/long-text: metin → düz metin (long-text hücreye sığdırıp kırpar). " +
+    "number/time: sayı ya da metin → olduğu gibi. " +
+    "money: sayı → TRY para biçimi, ayıraçlar dile göre (tr '₺1.250,00', en '₺1,250.00'). " +
+    "pertance: SAYI → yüzde metni; 0..1 arası değer ORAN sayılıp 100'le çarpılır, 1'den büyük değer zaten yüzdedir (tam 1 = %100). Çubuk ÇİZMEZ — çubuk için progress. " +
+    "progress: ham sayı → hücrede oransal çubuk (value/max, max varsayılanı 100); progressVariant/progressLabel/progressColor/thresholds ile ayarlanır. " +
+    "date/datetime: ISO metni ya da Date → dile göre biçimli tarih (locale prop'undan). " +
+    "switch: boolean → yeşil onay / kırmızı çarpı ikonu (metin değil). " +
+    "image: entity'nin FILE alanının nesnesi (uçtan geldiği gibi) YA DA mutlak URL metni → satır yüksekliğine sığdırılmış görsel (object-fit contain, köşe yuvarlatma). Kolon url'yi kendisi çözer: metin olduğu gibi kullanılır, nesnede `type:'file'` ise `data`/`value`, değilse `absolute_path` okunur — table-source bir uç FILE alanını `{ id, absolute_path, value, type:'ref', … }` olarak döndürür ve mapping'de alanı OLDUĞU GİBİ taşımak yeter (ölçüldü 2026-09-05: altı avatar `image` kolonunda çizildi). Yüklenemezse hücrede hata metni çıkar; datatable'ın image kolonu daha katıdır (düz URL kabul etmez). " +
+    "file: dosya alanı ya da url metni → dosya adı + ikon, yeni sekmede açılan bağlantı. " +
+    "url: metin → tıklanabilir bağlantı (ikonlu, http ise yeni sekme). link: metin → tıklanmayan düz bağlantı görünümü. " +
+    "email: metin → düz metin. " +
+    "dropdown: option value'su → kolonun options listesinden LABEL, appearance renginde rozet. multiselect: value dizisi → eşleşen label'lar rozet olarak. " +
+    "tag: metin → appearance renginde TEK rozet; renk kolonun appearance prop'undan gelir (satır bazında rows[i]._columns[<indeks>].appearance ile ezilir), serbest hex ALMAZ. " +
+    "tags: [{ value, color }] dizisi ya da metin dizisi → çok rozet, renk SATIR VERİSİNDEN (serbest hex burada geçer), sığmayanlar +N ile toplanır. " +
+    "action: veri kolonu DEĞİL — aksiyon sütunu ayrı çizilir; kolon tanımında seçilirse ham değer metin olarak görünür.";
 export const STYLE_GROUP_NOTES = {
-    surfaceStyle: "{ background, radius, borderTop, borderRight, borderBottom, borderLeft, shadow, contentOverflow(visible|hidden|auto) }. radius: tema kademesi ('var(--ng-radius-md)'; sm/lg 'Border radius'un oranı, md temanın kendisi), tek uzunluk ('18px') YA DA dört köşe ('90px 14px 14px 14px' — sol-üst, sağ-üst, sağ-alt, sol-alt). KENARLIK YÖN BAŞINADIR: her yön kendi CSS kısayolunu taşır ('1px solid var(--ng-border-primary)'), 'none' o kenarı kapatır; eski borderWidth/borderStyle/borderColor üçlüsü EMEKLİ (yalnız hiçbir yön yazılmamışsa okunur). shadow: çok katmanlı `box-shadow` metni ('0px 2px 5px 0px rgba(0,0,0,.2), inset 8px 5px 7px 0px #000'), tema token'ı ('var(--ng-shadow-md)') ya da eski preset anahtarı (none|sm|md|lg).",
+    surfaceStyle: "{ background, radius, borderTop, borderRight, borderBottom, borderLeft, shadow, contentOverflow(visible|hidden|auto), opacity(0–100 yüzde; 100/boş yazılmaz) }. radius: tema kademesi ('var(--ng-radius-md)'; sm/lg 'Border radius'un oranı, md temanın kendisi), tek uzunluk ('18px') YA DA dört köşe ('90px 14px 14px 14px' — sol-üst, sağ-üst, sağ-alt, sol-alt). KENARLIK YÖN BAŞINADIR: her yön kendi CSS kısayolunu taşır ('1px solid var(--ng-border-primary)'), 'none' o kenarı kapatır; eski borderWidth/borderStyle/borderColor üçlüsü EMEKLİ (yalnız hiçbir yön yazılmamışsa okunur). shadow: çok katmanlı `box-shadow` metni ('0px 2px 5px 0px rgba(0,0,0,.2), inset 8px 5px 7px 0px #000'), tema token'ı ('var(--ng-shadow-md)') ya da eski preset anahtarı (none|sm|md|lg).",
     typographyStyle: "{ textColor, fontFamily('var(--ng-font)' tema gövde | 'var(--ng-font-heading)' tema başlık | 'monospace' — token tema fontunu izler; serbest Google fontu yazma, tema yüklemez ve sessizce düşer), fontSize(CSS uzunluğu: '15px'|'1.1em'; çıplak sayı px sayılır), fontWeight(400|500|600|700), fontStyle(normal|italic), textDecoration(none|underline|line-through), lineHeight(TEK alan, üç yazım: oran '1.4' | yüzde '140%' | uzunluk '24px'; eski kayıtlardaki çıplak 140 yüzde sayılır), letterSpacing(CSS uzunluğu, negatif meşru: '-0.4px'), textAlign(left|center|right|justify) }. Komponentin içeriğine miras kalır.",
     hoverStyle: "{ background, borderColor, shadow(none|sm|md|lg), lift(CSS uzunluğu: '2px'), transitionMs }. Hiçbir alan dolu değilse hover bloğu ve geçiş HİÇ yazılmaz.",
     colorTokens: "RENK ALANLARI (background, textColor, borderColor, hover.background/borderColor) hex kadar tema token'ı da alır: 'var(--ng-accent-primary)', 'var(--ng-status-error)', 'var(--ng-background-inverse)'. Token yazılan alan tema değişince izler, hex yazılan kopar; tasarım sistemi renklerinde ÖNCE token'ı tercih et (studio panelinde aynı seçim tema chip'iyle yapılır).",
     styleEscape: "Kaçış kapısı ve SON SÖZ: tipli grupların/builder'ın karşılamadığı her CSS kararı buraya yazılır (custom properties alanının veri kanalı budur). Önce tipli grupları dene; grup alanı yoksa style'a yaz. Efektif sonucu görmek için page_runtime_get(resolveStyles:true)."
 };
+/**
+ * Kendi derleyicisi olmayan KAP bileşenlerinin yüzey notu (2026-09-04): grup
+ * bileşen kodunda okunmaz, render katmanı onu düğüm kutusuna yazar; taşma da
+ * kutunun kendisine gider. Eski appearance Surface bloğunun (background:'warning',
+ * borderWidth…) yerini alır; kayıtlı appearance değerleri çizilmeye devam eder
+ * ama Studio'da artık düzenlenmez — yeni karar surfaceStyle'a yazılır.
+ */
+export const LOCALE_FOLLOWS_APP_NOTE = "Boş bırak — komponent o zaman UYGULAMA dilini izler ve language-selector ile dil değişince gün/ay adları ve saat biçimi anında güncellenir. Doldurulursa o dile SABİTLENİR (bilinçli sabitleme için). Tasarımcı listesi tr/en gösterir ama uygulama dili yolu her ISO 639-1 kodunu kabul eder; sözlüğü olmayan dilde METİN İngilizceye düşer, sayı/tarih BİÇİMİ o dilin kendi kuralını kullanır.";
+const NODE_SURFACE_NOTE = STYLE_GROUP_NOTES.surfaceStyle + ' ' + STYLE_GROUP_NOTES.colorTokens +
+    " Bu bileşen grubu KENDİ OKUMAZ: render katmanı yüzeyi düğüm kutusuna (.ng-app__node-item) yazar, contentOverflow kutunun kendisine iner. Eski appearance Surface alanları (background/borderWidth/radius/shadow/opacity/overflow) EMEKLİ — yeni karar buraya yazılır.";
 export const componentKnowledge = {
     html: {
         summary: 'Kaçış kapısı: hazır komponentler yetmediğinde ham HTML + Mustache şablonu + scoped CSS + satır içi script + flow köprüsüyle her gereksinimi kapatır.',
@@ -29,6 +62,7 @@ export const componentKnowledge = {
             "Şema olayı yalnız mount'tur; aksiyonlar set_event ile DEĞİL kendi flow prop'uyla bağlanır (type:'flow', ref:<flowId>)."
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             content: "Ham HTML ya da Mustache şablonu. type:'code' + {{ }} ifadesiyle dinamik de beslenebilir.",
             context: 'Mustache değişken sözlüğü (nesne). Setter ile yazmak içeriği yeniden render eder.',
             style: "emotion css() bloğu: iç seçiciler ve &:hover çalışır, üretilen sınıf komponente scope'ludur.",
@@ -44,10 +78,12 @@ export const componentKnowledge = {
             "Koşullu/satır bazlı renk table'da _columns ile kurulur ve style prop'unu KAYBETTİRMEZ — datatable'ın colorMap'i statiktir. Hem CSS hem satıra göre renk isteyen tablo table'dır; renk için datatable'a mecbur değilsin."
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             rows: 'Satır dizisi; mount/filter/sort/pagination akışlarının setter adımıyla doldurulur.',
+            appearance: "YÜKSEKLİK/GENİŞLİK ELLE HESAPLANMAZ (ölçüldü 2026-09-05, f11-repro). heightType:'auto' tablo içeriği kadar uzar — satır sayısı × satır yüksekliği hesabı gerekmez. heightType:'fixed' gövdeyi KAYDIRIR (grid-container overflow:auto), satır kaybolmaz; kare'de görünmeyen satır kırpılmış değil kaydırılmıştır. KOLONLAR KARTI TAŞIRMAZ: genişlik toplamı kabı aşarsa tablo kendi içinde YATAY kaydırır ve sağ kenara taşma göstergesi koyar; kabın scrollWidth'i değişmez. Toplam kaptan KÜÇÜKSE kolonlar orantılı büyütülüp kap tam doldurulur (stretchColumns) — bu yüzden 'kolonu daraltayım da sığsın' yamalarına gerek yok. Tek gerçek tuzak yerleşim tarafındadır: FLEX ebeveynde blocks[].size yok sayılır, ölçü appearance'tan gelir; IZGARA ebeveynde tersi (gateway PAGE-019 ile uyarır).",
             totalRows: "Toplam kayıt: Number(Steps.<adım>?.headers?.[\"total-count\"] ?? 0) guard'lı ifadesiyle yazılır.",
             rowSelection: "none | single | multi — seçim self.selectedRow / self.selectedRows prop'larından okunur.",
-            columns: "Kolon tanımları; mapping anahtarları kolonların name'iyle birebir eşleşmeli. RENK: tag kolonu appearance ile 5 token alır (primary · info · success · warning · error) ve satır bazında _columns ezmesiyle değişir; serbest hex gerekiyorsa tags kolonunu kullan ve satır verisine [{ value, color:'#da1e28' }] yaz. Sayı/tarih biçimlendirmesi (prefix/suffix/precision/thousands/dateFormat/imageShape) table'da YOK — o datatable'ın kolon şemasındadır.",
+            columns: TABLE_COLUMN_TYPE_NOTE + " Kolon tanımları; mapping anahtarları kolonların name'iyle birebir eşleşmeli. RENK: tag kolonu appearance ile 5 token alır (primary · info · success · warning · error) ve satır bazında _columns ezmesiyle değişir; serbest hex gerekiyorsa tags kolonunu kullan ve satır verisine [{ value, color:'#da1e28' }] yaz. Sayı/tarih biçimlendirmesi (prefix/suffix/precision/thousands/dateFormat/imageShape) table'da YOK — o datatable'ın kolon şemasındadır. ORANSAL ÇUBUK: type:'progress' hücrede çubuk çizer ve HAM SAYI bekler (yüzdeyi kendisi hesaplar): value/max. max varsayılanı 100, yani 0..100 arası yüzde alanını doğrudan bağlayabilirsin; sayı 25/40 gibi bir orandan geliyorsa max'ı paydaya ver. Ayarlar: progressVariant(bar|circle) · progressLabel(none|percent|fraction|value) · progressColor(primary|info|success|warning|error|custom) + customProgressColor · thresholds[{from(%), color}] — eşik listesi doluysa çubuğun DOLULUK YÜZDESİNE göre son eşiğin rengi kazanır, yani tek kolon 80'in altında yeşil üstünde kırmızı olur. Sayıya çevrilemeyen değer 0'dır, hücre boş çubuk çizer.",
             style: "İKİ AYRI YAZIM KURALI: style.root emotion css() bloğudur (camelCase çalışır, iç seçici yazılabilir); style.thead|th|tr|td ise satır içi style attribute'una basılır (column-view.ts toStyleString anahtarı olduğu gibi yazar) — bu dördünde KEBAB-CASE zorunludur, fontSize sessizce düşer, font-size çalışır.",
             isEditable: 'Hücre içi düzenleme; değişen satır rowChange olayında self.rows üzerinde güncellenir.'
         }
@@ -63,7 +99,9 @@ export const componentKnowledge = {
             "Satır bazlı görünüm ezmesi (_columns / _actions) da YOKTUR — o table'a özgüdür. Renklendirme burada yalnız kolonun colorMap/autoColor sözlüğüyle, yani satırdan bağımsız kurulur."
         ],
         propNotes: {
-            columns: "Kolon tipleri: text · number · date · datetime · time · switch · tag · email · url · link · image · file · progress. PROGRESS (2026-08-27) hücrenin içine çubuk ya da halka çizer: progressVariant bar|circle · max (varsayılan 100) · progressLabel none|percent|fraction|value · progressColor + customProgressColor · thresholds [{from,color}] (yüzdeyi geçmeyen en yüksek eşik kazanır) · captionField BAŞKA bir satır alanının metnini çubuğun ÜSTÜNE yazar, yani ad ve çubuk tek hücrede durur. Sıralama/dışa aktarım ham sayıyı görür, çizimi değil.",
+            surfaceStyle: NODE_SURFACE_NOTE,
+            columns: "Kolon tipleri: text · number · date · datetime · time · switch · tag · email · url · link · image · file · progress. Her tipin ne beklediği/ne çizdiği table'ın kolon sözlüğüyle AYNIDIR (component_get('table') → knowledge.propNotes.columns), İKİ İSTİSNA dışında: burada image/file düz URL kabul etmez (aşağıdaki image notu) ve renk satır bazında değil colorMap ile kurulur. PROGRESS (2026-08-27) hücrenin içine çubuk ya da halka çizer: progressVariant bar|circle · max (varsayılan 100) · progressLabel none|percent|fraction|value · progressColor + customProgressColor · thresholds [{from,color}] (yüzdeyi geçmeyen en yüksek eşik kazanır) · captionField BAŞKA bir satır alanının metnini çubuğun ÜSTÜNE yazar, yani ad ve çubuk tek hücrede durur. Sıralama/dışa aktarım ham sayıyı görür, çizimi değil.",
+            image: "IMAGE/FILE kolonu düz URL string'i KABUL ETMEZ: hücre `{ absolute_path, display_name }` (ya da `fileName`) alanlarını taşıyan bir DOSYA NESNESİ (veya nesne dizisi) bekler — `DisplayCellView.svelte:10` `file.absolute_path ?? ''` okur, düz string verilince kaynak boş kalır ve hücre SESSİZCE boş çizilir (09-04 Y-21). Satır verisi bir metin kolonunda URL taşıyorsa kolonu 'url'/'link' yap ya da veriyi { absolute_path: '<url>', display_name: '<ad>' } biçimine çevir; entity'nin FILE alanı zaten bu şekli döner.",
             actions: "Satır aksiyonları. kind sözlüğü BUTON'unkinden farklıdır: error · information · solid · transparent · dark · danger · warning (butonda success/error/info/primary/warning). Yanlış sözlükten değer invalid-enum-value verir.",
             selectedRow: "Salt okunur: satır aksiyonu tıklanınca komponentin kendisi doldurur; akış ifadesinde '<elementId>.selectedRow' ile okunur.",
             colorMap: "Kolon içi değer→renk sözlüğü: [{ value:'Active', color:'#16a34a' }]. STATİKTİR — hücrenin kendi değerine bakar, satırın başka alanına göre hesaplanamaz. Satıra göre koşullu renk gerekiyorsa ya table + _columns ezmesi kullan ya da satır verisinde rengi taşı ({ label, color }) — render sırası: veri objesindeki color → colorMap[etiket] → autoColor.",
@@ -74,27 +112,32 @@ export const componentKnowledge = {
     form: {
         summary: "Alanları saran kapsayıcı; submit olayı yayar ve doğrulama hatalarını errorElementId'deki form-validation-errors komponentinde toplar.",
         behavior: [
-            "Düzen prop'ları (layout/direction/gap/horizontalAlign…) YOKTUR — onlar container'a aittir. Form çocukları ızgara koordinatıyla (blocks[].position + size.w) dizilir; 'layout' yazmak unknown-prop ile reddedilir.",
-            "Alan doğrulaması komponentin kendi validations dizisindedir: [{ type: 'required'|'email'|'max-length'…, message, value, isActive }] — dördü de zorunlu, eski 'maxLength' yazımı kaydedilir ama runtime doğrulayıcı onu TANIMAZ ve sessizce hiçbir şey doğrulamaz."
+            "Düzen prop grubunun TAMAMINI taşır (2026-09-01): layout ('flex' | 'grid') + direction/horizontalAlign/verticalAlign/size/gap/wrap, varsayılanları container ile aynı (flex · row · left · top · shrink · medium · wrap açık). 'Form'a layout yazılmaz' eski bilgidir. layout prop'u hiç yazılmamış eski form kayıtları ızgara koordinatıyla (blocks[].position + size.w) dizilmeye devam eder. Platform kataloğu component_get'te hâlâ eski şemayı gösteriyorsa kayıt yenilenmemiştir (ARC-024).",
+            "Alan doğrulaması komponentin kendi validations dizisindedir: [{ type: 'required'|'email'|'max-length'…, message, value, isActive }] — dördü de zorunlu, eski 'maxLength' yazımı kaydedilir ama runtime doğrulayıcı onu TANIMAZ ve sessizce hiçbir şey doğrulamaz.",
+            "message bir ÇEVİRİ ANAHTARI olabilir: 't:' önekiyle yazılan mesaj (ör. 't:form.required') uygulamanın çeviri sözlüğünden çözülür — hem alanın kendi hata metninde hem form-validation-errors listesinde. Öneksiz mesaj yazarın kendi cümlesidir ve iki nokta içerse bile aynen gösterilir. Çözüm form MOUNT olurken bir kez yapılır: ekranda hata dururken dil değiştirilirse metin sayfa yenilenene kadar eski dilde kalır."
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             errorElementId: "Sayfadaki form-validation-errors komponentinin elementId'si — bağlanmazsa alan doğrulama mesajları görünmez."
         }
     },
     box: {
-        summary: "Evrensel bırakma kutusu: container'dan farkı MUTLAK 12 kolon canvas modunun OLMAMASI (yalnız akış), kutu modelinin border-box olması ve isteğe bağlı başlık/altlık bölgeleridir.",
+        summary: "Evrensel bırakma kutusu: container'dan farkı kutu modelinin border-box olması ve isteğe bağlı başlık/altlık bölgeleridir; yerleşim değer kümesi 2026-09-02'den beri container'ınkiyle aynıdır.",
         behavior: [
-            "layout iki değer alır: 'flex' (akış) ve 'cssgrid' (GERÇEK display:grid). 'cssgrid', container'ın 'grid'inden AYRI bir değerdir — container'ınki mutlak koordinatlı canvas'tır, buradaki gerçek CSS grid akışıdır.",
+            "layout iki değer alır: 'flex' (akış) ve 'grid' — ve 'grid' container'ınkiyle AYNI ŞEYDİR: mutlak koordinatlı 12 kolon canvas (kullanıcı kararı 2026-09-02, tek grid kavramı). Şemadaki eski 'cssgrid' değeri (akan GERÇEK display:grid) seçenek olmaktan çıktı: yeni yazımda geçmez (invalid-enum-value), yalnız o değerle KAYITLI eski düğümler çizilmeye devam eder (screen-builder/grid-layout.ts isCssGridLayout yalnız 'cssgrid'e bakar).",
             "Yerleşim prop'ları bileşende OKUNMAZ: çocuk sarmalayıcısının stilini runtime'da RenderComponent, canvas'ta Draggable uygular (container ile aynı sözleşme).",
             "GÖVDE İÇİN DÜĞÜM YOKTUR: kutunun kendi bırakma alanına inen her şey gövdedir. hasHeader/hasFooter ise ayrı 'box-section' DÜĞÜMLERİ açar; bölge kapatılınca içindeki çocuklar SİLİNMEZ, gövdeye taşınır.",
-            "cssgrid modunda çocuğun blocks[].size.w'si 'grid-column: span N'e çevrilir; gridTemplate doluysa gridColumns yok sayılır (şablon geçersizse kolon sayısına düşülür).",
+            "gridColumns/gridTemplate/gridRowGap ARTIK YALNIZ eski 'cssgrid' düğümlerinde okunur: o modda çocuğun blocks[].size.w'si 'grid-column: span N'e çevrilir ve gridTemplate doluysa gridColumns yok sayılır (şablon geçersizse kolon sayısına düşülür). layout:'grid' seçilen yeni kutuda bu üç prop ÖLÜDÜR — kolon payı yine blocks[].size.w'den gelir.",
             "Yüzeyi TİPLİ GRUPLARDAN yönetilir: surfaceStyle (zemin, köşe, yön yön kenarlık, çok katmanlı gölge, gövde taşması), typographyStyle (içeriğe miras), hoverStyle ve box'a özgü sectionStyle (başlık/altlık bölgelerinin ayracı, ayraç rengi, bölge dolgusu). Bölgeler kutunun içinde bir eleman DEĞİL, gövdeye yerleşen ayrı 'box-section' düğümleridir; bu yüzden sectionStyle onları gerçek sınıflarından ('.ng-box-section--header/--footer') hedefler. style'ın tek parçası '&__body'dir — eski '&__header'/'&__footer' parçaları hiçbir elemana denk gelmediği için kaldırıldı."
         ],
         propNotes: {
-            layout: "'flex' | 'cssgrid'. Diğer yerleşim prop'ları flex'te, gridColumns/gridTemplate/gridRowGap ise cssgrid'de okunur.",
-            gridTemplate: 'Serbest grid-template-columns metni; beyaz listeden geçmeyen değer sessizce yok sayılır ve gridColumns geçerli olur.',
-            isBorder: 'Çerçeveyi açar; kutu border-box olduğu için ölçü kaymaz.',
-            style: "Parçalar: '&__header' · '&__body' · '&__footer' — ancak yalnız '&__body' gerçek bir elemana denk gelir (CQ-157)."
+            layout: "'flex' | 'grid' (2026-09-02'ye kadar ikinci değer 'cssgrid' idi). Diğer altı yerleşim prop'u yalnız 'flex' iken okunur; 'grid' container'ın mutlak 12 kolon canvas'ıdır ve çocuk ölçüsü blocks[].size'dan gelir.",
+            gridTemplate: "Serbest grid-template-columns metni; beyaz listeden geçmeyen değer sessizce yok sayılır ve gridColumns geçerli olur. YALNIZ eski 'cssgrid' düğümlerinde etkilidir.",
+            surfaceStyle: STYLE_GROUP_NOTES.surfaceStyle + ' ' + STYLE_GROUP_NOTES.colorTokens + " EMEKLİ isBorder prop'unun yerini bu grup aldı (2026-08-31 tipli stil göçü): çerçeve artık yön başına borderTop/Right/Bottom/Left ile açılır, isBorder yazmak unknown-prop verir.",
+            typographyStyle: STYLE_GROUP_NOTES.typographyStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
+            hoverStyle: STYLE_GROUP_NOTES.hoverStyle,
+            sectionStyle: "{ headerDivider, footerDivider, dividerColor, sectionPadding(CSS uzunluğu: '12px') }. Ayraç anahtarı false ise bileşenin kendi ayracı KALDIRILIR (yok sayılmaz).",
+            style: STYLE_GROUP_NOTES.styleEscape + " Parçalar: '&__header' · '&__body' · '&__footer' — ancak yalnız '&__body' gerçek bir elemana denk gelir (CQ-157)."
         }
     },
     'box-section': {
@@ -135,6 +178,7 @@ export const componentKnowledge = {
             'closeOnOutside kapatılırsa panel yalnız tetikleyiciyle ya da akışla kapanır.'
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             position: 'Panelin tetikleyiciye göre yönü; yer yoksa kaydırılır.',
             isOpen: "Açık/kapalı durumu; open/close olaylarıyla geri yazılır."
         }
@@ -177,7 +221,7 @@ export const componentKnowledge = {
     aibox: {
         summary: "box'ın akış/bölge işlevini taşıyan kutu; farkı STİL YÖNETİMİNDE: yüzey, tipografi, hover ve bölge görünümü tipli prop gruplarıdır (surfaceStyle · typographyStyle · hoverStyle · sectionStyle), ham CSS değil.",
         behavior: [
-            "Yerleşim prop'ları (layout/direction/gap/gridColumns...) box ile BİREBİR aynıdır ve bileşende okunmaz — çocuk sarmalayıcısını RenderComponent/Draggable giydirir. layout:'cssgrid' gerçek display:grid akışıdır (container'ın mutlak 12 kolon 'grid'i DEĞİL).",
+            "Yerleşim prop'ları (layout/direction/gap/gridColumns...) box ile BİREBİR aynıdır ve bileşende okunmaz — çocuk sarmalayıcısını RenderComponent/Draggable giydirir. layout değerleri de box ile aynı: 'flex' | 'grid' (2026-09-02'de 'cssgrid' seçenek olmaktan çıktı; o değerle kayıtlı düğümler gerçek display:grid akışıyla çizilmeye devam eder).",
             "KATMAN SIRASI (K4): tema componentStyles → $preset TABANDIR (varsayılan verir); tipli grup alanları temayı alan alan EZER (tasarımcının/AI'ın açık seçimi kazanır); düğümün serbest style'ı her şeyin üstünde SON SÖZDÜR.",
             "TEMA PRESET'İ: bir tema preset'ini düğüme bağlamak için style.$preset: '<ad>' yaz (adlar project_get → theme.presets; componentStyles[type] referanssız, tipin her örneğine uygulanır). Bir alanı 'temaya bırakmak' = o alanı HİÇ yazmamak (null/boş) — studio'daki 'Temaya dön' tam olarak bunu yapar; tema değerini gruba kopyalamak bağı koparır.",
             "STİL YAZMA SIRASI: önce tipli gruplar (alan varsa oraya), grubun karşılamadığı karar style kanalına (custom properties). Tipli alan dururken aynı özelliği style'a yazmak paneli yanıltır — style kazanır ama panel alanı 'etkisiz' görünür.",
@@ -189,6 +233,7 @@ export const componentKnowledge = {
             surfaceStyle: STYLE_GROUP_NOTES.surfaceStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
             typographyStyle: STYLE_GROUP_NOTES.typographyStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
             hoverStyle: STYLE_GROUP_NOTES.hoverStyle,
+            gapCustom: 'Sayısal px boşluğu (0-200); doluysa gap preset\'ini EZER. Eski kanal — yeni şemada gap alanının kendisi ham CSS değeri kabul eder (allowCustom).',
             sectionStyle: "{ headerDivider, footerDivider, dividerColor, sectionPadding(CSS uzunluğu: '12px') }. Ayraç anahtarı false ise bileşenin kendi ayracı KALDIRILIR (yok sayılmaz).",
             style: STYLE_GROUP_NOTES.styleEscape + " Parça olarak yalnız '&__body' bildirilmiştir çünkü markup'ta gerçekten o eleman vardır."
         }
@@ -200,13 +245,13 @@ export const componentKnowledge = {
             "KATMAN SIRASI (K4): tema componentStyles → $preset TABANDIR; tipli grup alanları temayı alan alan EZER; düğümün serbest style'ı SON SÖZDÜR. Yüzey/tipografi/hover/başlık kararlarını style'a ham CSS olarak yazma — alanı varsa gruba yaz.",
             "page_container'ın isLoading prop'u sayfa açılış akışının yükleniyor bayrağıdır.",
             "layout:'flex' çocukları akışa alır (RenderComponent düzeni .ng-app__node-children sarmalına yazar): sıra blocks[].position'dan gelir (önce y, sonra x) ama y BOŞLUKLARI yok sayılır — flex'te dikey konum yalnız sıradır, ızgara koordinatı değil.",
-            "Flex çocuğun GENİŞLİĞİ yine 12 kolonluk blocks[].size.w'dur (row'da flex-basis w/12, column'da width w/12) — içerik genişliği DEĞİL. Yani ızgara↔flex geçişi kayıpsızdır ve genişlik şemadan kurulabilir.",
-            "Flex kapsayıcının yüksekliği içeriğinden gelir; verticalAlign'ın dağıtacak boşluğu olması için appearance.heightType:'fixed' + size.h vermek gerekir. İstisna: states.isWrapper:true olan page_container zaten min-height:80vh ile sayfa boyu durur, onda dikey hizalama boşluksuz da çalışır.",
+            "Flex çocuğun GENİŞLİĞİ appearance.widthType'tan gelir (2026-09-01): 'fill' kabın tüm genişliği (satırda flex:1 1 100%), 'fixed' + widthString sabit CSS ölçüsü ('240px'/'50%'/calc), 'auto' içerik kadar. widthType HİÇ yazılmamışsa eski 12 kolonluk blocks[].size.w payı geçerlidir (row'da flex-basis w/12, column'da width w/12) — ızgara↔flex geçişi bu fallback sayesinde kayıpsızdır. Şemayı sen kuruyorsan widthType'ı AÇIKÇA yaz; string yalnız 'fixed' modda okunur (PAGE-017/018 uyarıları).",
+            "Flex kapsayıcının yüksekliği içeriğinden gelir; verticalAlign'ın dağıtacak boşluğu olması için appearance.heightType:'fixed' vermek gerekir — ölçü heightString'den (serbest CSS uzunluğu, ör. '30vh'), o yoksa size.h×10px'ten. heightString yalnız heightType:'fixed' iken okunur. İstisna: states.isWrapper:true olan page_container zaten min-height:80vh ile sayfa boyu durur, onda dikey hizalama boşluksuz da çalışır.",
             "ÜÇÜNCÜ YÜKSEKLİK: appearance.heightType:'fill' (2026-08-28) — yükseklik ne içerikten ne satır sayısından gelir, EBEVEYNİN BIRAKTIĞI yerden gelir: ızgara çocuğunda height:100% + align-self:stretch, flex sütununda flex:1 1 auto + min-height:0, flex satırında align-self:stretch + height:100%. Kaydırılabilir bir fill düğümü büyümek yerine içinde kaydırır. KÖK düğümde ekranı doldurur (100vh) — yerleşim kabuğu bununla kurulur.",
             "layout:'grid' iken diğer altı prop okunmaz — Studio panelinde de gizlenir. Katalogda tanımlı oldukları için doğrulama duvarı susar: ızgara kapsayıcıya direction yazmak sessizce hiçbir şey yapmaz (gateway PAGE-015 ile uyarır).",
             "Katalog varsayılanı 2026-08-25'te grid → FLEX oldu ama varsayılan düğüm KURULURKEN props'a yazılır (Studio bırakma yolu definition.defaults'u kopyalar), renderer'da geriye dönük bir etkisi YOKTUR: layout prop'u hiç olmayan düğüm — bütün eski kayıtlar — ızgara çizilmeye devam eder. Yani şemayı sen kuruyorsan varsayılana güvenme, layout'u açıkça yaz.",
             "YERLEŞİM (layout) KURARKEN DE TERCİH EDİLEN KAPTIR: layout views'ü sıradan bir komponent ağacıdır ve kökü container'dır — Studio'nun yeni layout iskeleti (getDefaultLayout) tam olarak bunu kurar: states.isWrapper:true + appearance.heightType:'fill' + block x0/w12 kök (sayfanın page_container'ının yerleşim ikizi: çerçevesiz, başlıksız, ekranı dolduran), içinde yan menü kabı (w2, fill) + içerik sütunu (w10, fill, direction:'column') → üst şerit + slot (fill). layout-shell/layout-region ikilisi emekliye ayrıldı (platform_guide('layout')).",
-            "MOBİL TUZAĞI — flex çocukları telefonda ALT ALTA DÜŞMEZ: runtime'ın mobil kuralı yalnız ızgara özelliklerini ezer (RenderComponent.svelte, @media max-width:767px → grid-row/grid-column/height), flex çocuğu genişliğini getFlexChildStyle'ın flex-basis'inden alır ve flex-wrap:nowrap altında satır bozulmaz. 375px'te ölçüldü: aynı span'lerle ızgara kabın çocukları 375/375px alt alta, flex kabınkiler 49/310px yan yana. Telefonda yığılması gereken satır için layout:'grid' kullan, ya da wrap:true ile taşmayı aç (zeyrek-frontend docs/issues.md ARC-031)."
+            "MOBİL TUZAĞI — flex çocukları telefonda ALT ALTA DÜŞMEZ: runtime'ın mobil kuralı yalnız ızgara özelliklerini ezer (RenderComponent.svelte, @media max-width:767px → grid-row/grid-column/height), flex çocuğu genişliğini getFlexChildStyle'ın flex-basis'inden alır ve flex-wrap:nowrap altında satır bozulmaz. 375px'te ölçüldü: aynı span'lerle ızgara kabın çocukları 375/375px alt alta, flex kabınkiler 49/310px yan yana. Telefonda yığılması gereken satır için layout:'grid' kullan; wrap artık varsayılan açık (2026-09-01) ama sarma yalnız sığmayan çocuğu alta atar, ızgara yığılmasının yerini tutmaz (zeyrek-frontend docs/issues.md ARC-031)."
         ],
         propNotes: {
             surfaceStyle: STYLE_GROUP_NOTES.surfaceStyle + ' ' + STYLE_GROUP_NOTES.colorTokens + " Kapsayıcının TABANI tema token'larıdır (--ng-background-surface zemin, 1px --ng-border-primary çerçeve, --ng-rounded köşe); alan boş bırakılırsa tema izlenir. contentOverflow gövdeye ('&__body') yazılır.",
@@ -218,25 +263,28 @@ export const componentKnowledge = {
             horizontalAlign: "left | center | right | stretch. row'da ANA eksen (justify-content), column'da ÇAPRAZ eksen (align-items). stretch: ana eksende space-between, çapraz eksende tam doldurma.",
             verticalAlign: "top | middle | bottom | stretch. row'da ÇAPRAZ eksen, column'da ANA eksen — horizontalAlign ile rollerini değiştirirler.",
             size: "'shrink' (çocuklar flex: 0 1 auto, varsayılan) | 'grow' (flex: 1 1 auto — çocuklar boşluğu paylaşır).",
-            gap: "none | small | medium (varsayılan) | large → 0 / 8 / 16 / 32px. Çocuk genişlik formülünden payı düşülür, böylece w toplamı 12 olan satır tam kapanır.",
-            wrap: "flex-wrap: wrap. Kapalıyken (varsayılan) satıra sığmayan çocuklar sıkışır, alt satıra inmez.",
-            title: "isWrapper:false kapta başlık çizer; page_container'da ise tarayıcı sekmesinin adını yazar (browserTitle).",
+            gap: "none | small | medium (varsayılan) | large → tema değişkenleri: 0 / var(--ng-spacing-sm) / --ng-spacing-md / --ng-spacing-lg (varsayılan temada 8/16/32px). Alan allowCustom'dır: '18px' ya da 'var(--ng-spacing-xl)' gibi ham CSS değeri de geçer. Çocuk genişlik formülünden payı düşülür, böylece w toplamı 12 olan satır tam kapanır.",
+            wrap: "flex-wrap: wrap. Varsayılan AÇIK (2026-09-01'de flipledi): w:12 çocuklar alt satıra sararak dikey akar. Kapatırsan satıra sığmayan çocuklar sıkışır, alta inmez.",
+            title: "Varsayılanı boştur. isWrapper:false kapta yalnız açıkça doluysa başlık çizer; page_container'da ise dolu değer tarayıcı sekmesinin adını yazar (browserTitle).",
             isLoading: 'Gövdeyi 100px’e kısar ve spinner gösterir; sayfa açılış akışında bayrak olarak kullanılır.'
         }
     },
     repeater: {
         summary: 'Kart listesi: rows dizisindeki her satır için children şablonunu yineler; satır bağlamı item/Row olarak çocuklara iner.',
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             rows: 'Yinelenen veri; çocuk komponent ifadelerinde satıra item / Row ile erişilir.',
-            selectedIndex: 'change olayında seçilen kartın sırası.'
+            selectedIndex: "change olayının YÜKÜDÜR, şema prop'u DEĞİL (component_get prop listesinde görünmez; şemadaki gizli alan selectedItem'dır). RenderComponent tıklanan kartın sırasını bu adla yayar, akışta self.selectedIndex ile okunur."
         }
     },
     modal: {
         summary: 'Ortalanmış katman; şemanın KÖKÜNDE page_container’ın kardeşi olarak durur, içeriği (kendi formu ve submit akışı dahil) children’ına eklenir.',
-        behavior: ["open/close olayları akışa bağlanabilir; açma/kapama isHidden ile değil kendi open state'iyle yürür (setter ile isOpen yaz)."]
+        behavior: ["open/close olayları akışa bağlanabilir; açma/kapama isHidden ile değil kendi open state'iyle yürür (setter ile isOpen yaz)."],
+        propNotes: { surfaceStyle: NODE_SURFACE_NOTE }
     },
     drawer: {
-        summary: 'Yandan açılan katman; modal ile aynı kurallar: şema kökünde yaşar, kendi children ve akışlarını taşır.'
+        summary: 'Yandan açılan katman; modal ile aynı kurallar: şema kökünde yaşar, kendi children ve akışlarını taşır.',
+        propNotes: { surfaceStyle: NODE_SURFACE_NOTE }
     },
     dropdown: {
         summary: 'Tek seçim listesi; options statik verilebilir ya da mount/search akışıyla uzaktan doldurulur.',
@@ -265,18 +313,20 @@ export const componentKnowledge = {
     checkbox: { summary: 'İki durumlu kutu; change/checked/unchecked olayları boolean taşır.' },
     switch: { summary: 'Anahtar; checkbox ile aynı sözleşme, görsel fark.' },
     radio: { summary: 'Tek seçim düğme grubu; change seçilen değeri taşır.' },
-    datepicker: { summary: 'Tarih seçici; change yükü { value, HH, mm }.' },
-    datetimepicker: { summary: 'Tarih+saat seçici; değer event.data’da değil self.value’dadır.' },
-    daterangepicker: { summary: 'Tarih aralığı; change yükü { valueFrom, valueTo, HH, mm }.' },
-    datetimerangepicker: { summary: 'Tarih+saat aralığı; daterangepicker ile aynı yük.' },
+    datepicker: { summary: 'Tarih seçici; change yükü { value, HH, mm }.', propNotes: { locale: LOCALE_FOLLOWS_APP_NOTE } },
+    datetimepicker: { summary: 'Tarih+saat seçici; değer event.data’da değil self.value’dadır.', propNotes: { locale: LOCALE_FOLLOWS_APP_NOTE } },
+    daterangepicker: { summary: 'Tarih aralığı; change yükü { valueFrom, valueTo, HH, mm }.', propNotes: { locale: LOCALE_FOLLOWS_APP_NOTE } },
+    datetimerangepicker: { summary: 'Tarih+saat aralığı; daterangepicker ile aynı yük.', propNotes: { locale: LOCALE_FOLLOWS_APP_NOTE } },
     fileUpload: { summary: 'Sürükle-bırak dosya yükleme (dropzone); seçim self.value’dan okunur.' },
     fileInput: { summary: 'Dosya seç girişi; change yükü { value: [{ type, value }], fileName }.' },
     filebutton: { summary: 'Buton görünümlü dosya seçici; fileInput ile aynı yük.' },
-    'file-viewer': { summary: 'Dosya önizleyici (pdf/görsel); file prop’una drive dosyası bağlanır.' },
+    'file-viewer': { summary: 'Dosya önizleyici (pdf/görsel); file prop’una drive dosyası bağlanır.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
     button: {
         summary: 'Tıklama kaynağı; click olayı veri taşımaz, bağlam gerekiyorsa ifadede komponent adlarıyla okunur.',
         propNotes: {
-            kind: "success | error | info | primary | warning. `datatable.actions[].kind` FARKLI bir sözlük kullanır (error · information · solid · transparent · dark · danger · warning) — buradan bir değer (örn. 'transparent') butona yazılırsa invalid-enum-value verir."
+            kind: "primary | info | success | warning | error | custom — 'custom' seçilirse renk customColor'dan gelir. `datatable.actions[].kind` FARKLI bir sözlük kullanır (error · information · solid · transparent · dark · danger · warning) — buradan bir değer (örn. 'transparent') butona yazılırsa invalid-enum-value verir.",
+            customColor: "Yalnız kind:'custom' iken okunur; hex ya da tema token'ı ('var(--ng-accent-primary)').",
+            badgeValue: "Butonun köşe rozetinin metni ('3', '99+'); boşsa rozet çizilmez. Rengi badgeColor'dan gelir (primary|info|success|warning|error, varsayılan 'error')."
         }
     },
     'dropdown-button': { summary: 'Menülü buton; clickItem olayı tıklanan menü öğesini taşır.' },
@@ -290,8 +340,8 @@ export const componentKnowledge = {
         ]
     },
     'qm-card': { summary: 'QM gösterge kartı; click yayar.' },
-    tabs: { summary: 'Sekmeler; tab olayı seçilen sekme anahtarını taşır, her view children sırasıyla eşleşir.' },
-    'collapsible-container': { summary: 'Aç/kapa kapsayıcı; collapsed/expanded olayları yayar.' },
+    tabs: { summary: 'Sekmeler; tab olayı seçilen sekme anahtarını taşır, her view children sırasıyla eşleşir.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
+    'collapsible-container': { summary: 'Aç/kapa kapsayıcı; collapsed/expanded olayları yayar.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
     'tree-view': {
         summary: 'Hiyerarşik liste: data ağacını çizer, satır tıklamasını click olayıyla akışa verir, satır başına aksiyon menüsü ve isteğe bağlı istemci-tarafı arama taşır.',
         behavior: [
@@ -336,12 +386,14 @@ export const componentKnowledge = {
     notification: {
         summary: 'Sayfa içi geri bildirim kutusu; akışlarda alert adımı yerine bu komponent kullanılır.',
         behavior: [
-            "isHidden bu komponentin KATALOĞUNDA YOKTUR: şemaya props.isHidden yazmak unknown-prop ile reddedilir (altın örnekte bir dönem yanlış duruyordu). Runtime'da gizleme çalışır — RenderComponent her komponentte props.isHidden'a bakar — ama prop'u oraya SETTER yazar, şema değil.",
+            "isHidden 2026-08-26'dan beri bu komponentin ŞEMASINDA VARDIR (daha önce yoktu ve bu katalog bir dönem 'unknown-prop verir' diyordu): props.isHidden'ı doğrudan şemaya yazabilirsin, başlangıçta gizli bildirim için container'a sarmak GEREKMEZ.",
             "appearance.isHidden bir çözüm DEĞİLDİR: kaydedilir ama runtime hiçbir yerde okumaz (renderer yalnız props.isHidden'a bakar).",
-            'Başlangıçta gizli bir bildirim istiyorsanız komponenti şemada bırakın ve içeriğini/görünürlüğünü akıştaki setter ile yönetin; timeout verilirse kendini kapatır.'
+            "Kendini KAPATIRKEN props.isHidden'a yazar: hem timeout dolduğunda hem kapatma düğmesinde 'toggled' emit'i { isHidden: true } taşır (Notification.svelte handleEvent). Şema events sözlüğünde bu ad YOKTUR — akışa bağlanacak bir olay değil, prop'a geri yazma yoludur.",
+            'Başlangıçta gizli bir bildirim: şemaya props.isHidden:true yaz, açılışı akıştaki setter ile yap; timeout verilirse kendini kapatır.'
         ],
         propNotes: {
-            kind: 'information | error | success | warning (buton kind sözlüğünden farklıdır: orada info/primary vardır)'
+            kind: 'information | error | success | warning (buton kind sözlüğünden farklıdır: orada info/primary vardır)',
+            isHidden: 'Şemada tanımlıdır; statik true ile gizli başlatılır, akıştaki setter ile açılıp kapanır. Komponent kendi kapanışında da bu prop\'a yazar.'
         }
     },
     'form-validation-errors': { summary: 'Formun doğrulama hatalarını listeler; form.errorElementId buraya işaret eder.' },
@@ -352,7 +404,7 @@ export const componentKnowledge = {
             pageTitle: "Bant başlığı; page_container.title ile karıştırılmamalı. `description` diye bir prop YOKTUR (unknown-prop verir).",
             links: 'Sağ tarafta çizilen aksiyon/bağlantı listesi.',
             breadcrumbStyle: 'Kırıntı izinin görünüm biçimi.',
-            isHidden: "Bu komponentin kataloğunda VAR (bazı komponentlerde yok — bkz. 'notification'); doğrudan şemaya yazılabilir."
+            isHidden: "Doğrudan şemaya yazılabilir. 2026-09-08 ölçümü: 101 kayıttan 99'u isHidden tanımlıyor, tanımlamayan yalnız 'slot' ve 'widget-area'."
         }
     },
     header: {
@@ -386,16 +438,19 @@ export const componentKnowledge = {
             style: "Yalnız &__header, &__header-logo, &__header-title, &__header-subtle ve &__content gerçekten uygulanır; &__navigations* parçaları ölüdür (bkz. davranış)."
         }
     },
-    'auth-layout': { summary: 'Giriş ekranı kabuğu: logo kolonu + form slotu; primaryClick/secondaryClick olayları yayar.' },
+    'auth-layout': { summary: 'Giriş ekranı kabuğu: logo kolonu + form slotu; primaryClick/secondaryClick olayları yayar.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
     layout: {
         summary: 'Layout kök komponenti: logo/başlık, kullanıcı menüsü, kırıntı yolu ve menü ağacı bir arada; sayfalar slot’una yerleşir, logout olayı yayar.',
         behavior: [
             "Menü ağacını sidebar ile AYNI renderer çizer (Navigations/NavigationsItem): activeHref prop'u, adresten otomatik eşleşme, isExpandable/isExpanded ve grup başlığı kuralları birebir aynıdır — ayrıntı sidebar kaydında.",
             "Öğe bazlı isHidden BU şemada tanımlıdır (sidebar'ınkinde yoktur): true olan öğe canlıda elenir, Studio'nun düzenleyici kipinde görünmeye devam eder.",
-            "TEK PARÇA (monolit) kabuktur: logo, başlık, menü, kırıntı yolu ve kullanıcı menüsü sabittir — yalnız DOLDURULUR, yeniden düzenlenemez. Serbest kompozisyon için container + slot kullan (platform_guide('layout')); mevcut monolitler çalışmaya devam eder ve Studio'da 'Break apart' ile parçalarına ayrılabilir."
+            "TEK PARÇA (monolit) kabuktur: logo, başlık, menü, kırıntı yolu ve kullanıcı menüsü sabittir — yalnız DOLDURULUR, yeniden düzenlenemez. Serbest kompozisyon için container + slot kullan (platform_guide('layout')); mevcut monolitler çalışmaya devam eder ve Studio'da 'Break apart' ile parçalarına ayrılabilir.",
+            "İÇERİK ALANI BİR KAPTIR (2026-09-03): container ile aynı yedi yerleşim prop'unu taşır (layout/direction/horizontalAlign/verticalAlign/size/gap/wrap, katalog varsayılanı layout:'flex'); slot ve içine bırakılan başka çocuklar bu akışla dizilir. Studio'nun yeni kabuk iskeleti (getDefaultLayout) düğüme layout:'flex' + verticalAlign:'stretch' + gap:'none' yazar. Prop hiç yazılmamış eski kayıtlar ızgara çizilmeye devam eder — container'daki kuralın aynısı."
         ],
         propNotes: {
-            activeHref: "Vurgulanacak menü satırının adresi; boşken adres çubuğu karar verir (sidebar ile aynı davranış). YENİ prop — platform kataloğuna CI senkronuyla iner."
+            surfaceStyle: NODE_SURFACE_NOTE,
+            activeHref: "Vurgulanacak menü satırının adresi; boşken adres çubuğu karar verir (sidebar ile aynı davranış). YENİ prop — platform kataloğuna CI senkronuyla iner.",
+            layout: "'flex' (katalog varsayılanı; akış) | 'grid' (12 kolonluk ızgara). Prop hiç yazılmamışsa renderer IZGARA çizer. Diğer altı yerleşim prop'u yalnız 'flex' iken etkilidir; anlamları container kaydındakiyle birebir aynı."
         }
     },
     navigations: {
@@ -423,6 +478,7 @@ export const componentKnowledge = {
             "isViewportFilling / isShellRoot yetenekleri ve states.isShell bayrağı BACKEND'DE SAKLANMAZ (components tablosunda sütun yok, States kaydında isShell yok — zeyrek-frontend docs/issues.md BE-002). Davranışı tip adına düşen yedek listeler taşır; şema yazarken bu bayraklara güvenme."
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             sidebarOpen: 'Yan panelin açık olup olmadığı; canlı durumdur, bağlanabilir.',
             mobileBehavior: "'drawer' (varsayılan; mobilde kapalı başlar) | 'stack' (mobilde açık başlar).",
             style: "&__body ve &__overlay parçaları uygulanır."
@@ -437,6 +493,7 @@ export const componentKnowledge = {
             "appearance.hideOn, dockMobile'ı HER ZAMAN yener; dockMobile:'hidden' yalnız bölge-yerel kısayoldur."
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             dock: "left | right | top | bottom | fill — biçim/yön, konum değil.",
             dockMobile: "inherit (varsayılan; masaüstünü izler) | left | right | top | bottom | drawer (içeriğin üstüne biner) | hidden.",
             isCollapsible: 'Bölgenin kapanabilir olup olmadığı.',
@@ -452,10 +509,17 @@ export const componentKnowledge = {
         ]
     },
     view: { summary: 'Tabs/switcher altındaki görünüm kapsayıcısı; children gruplamaya yarar.' },
-    'widget-area': { summary: 'Widget’ların yerleştirildiği alan.' },
+    'widget-area': {
+        summary: 'Widget’ların yerleştirildiği alan: widget şemasının KÖK düğümü (widgetType: container).',
+        behavior: [
+            'Kök bir KAPTIR ve container ile aynı yerleşim proplarını taşır (layout, direction, horizontalAlign, verticalAlign, size, gap, wrap); varsayılan layout FLEX’tir — yeni widget’ın alanı 12 kolonlu grid’e değil flex akışına düşer.',
+            'layout: grid seçildiğinde flex alanları (direction/hizalama/size/gap/wrap) panelde gizlenir; kanvas mutlak 12 kolon ızgarasına döner.',
+            'isLoading davranış prop’udur (stil değil): açıkken alan içeriği yerine Loader çizilir.'
+        ]
+    },
     'audit-basic': { summary: 'Kayıt meta kutusu (oluşturan/güncelleyen); meta prop’u tek setter ile beslenir.' },
     'audit-history': { summary: 'Kayıt geçmişi listesi.' },
-    'document-editor': { summary: 'Office şablon doldurma/görüntüleme editörü; file prop’una drive dosyası bağlanır.' },
+    'document-editor': { summary: 'Office şablon doldurma/görüntüleme editörü; file prop’una drive dosyası bağlanır.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
     'qm-header': {
         summary: 'QM uygulama başlığı: global arama, bildirimler, hesap menüsü, çok seviyeli mega menü.',
         behavior: [
@@ -465,8 +529,8 @@ export const componentKnowledge = {
             'Sonuç: menü href’i sayfanın gerçek yoluna çözülüyorsa vurgu ek ayar istemeden çalışır; çözülmüyorsa vurguyu elle açmanın yolu yoktur.'
         ]
     },
-    'qm-sidebar': { summary: 'QM yan menüsü.' },
-    'qm-content': { summary: 'QM içerik kapsayıcısı.' },
+    'qm-sidebar': { summary: 'QM yan menüsü.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
+    'qm-content': { summary: 'QM içerik kapsayıcısı.', propNotes: { surfaceStyle: NODE_SURFACE_NOTE } },
     // — 2026-08-25 eşleme turu: ng-apps-ui kataloğunda olup burada kaydı olmayan 22 komponent.
     // Kaynak: packages/ng-apps-ui/src/components/<ad>/{schema.ts,*.svelte,*-logic.ts} +
     // zeyrek-frontend/docs/components/*.md davranış sözleşmeleri.
@@ -633,7 +697,9 @@ export const componentKnowledge = {
         summary: 'Son kullanıcının sayfa dilini değiştirdiği açılır liste; projenin aktif dillerini kendi ana dil adlarıyla listeler.',
         behavior: [
             "change olayında runtime machine.setLanguage(value) çağırır: seçim localStorage'a (zeyrek:{appSlug}:lang) yazılır ve çeviri bağlı bütün prop'lar SAYFA YENİLENMEDEN yeniden çözülür.",
-            'Projede dil tanımlı değilse liste boş çizilir — önce proje dillerini (Translations paneli) kur.'
+            'Projede dil tanımlı değilse liste boş çizilir — önce proje dillerini (Translations paneli) kur.',
+            "Dil kümesi KAPALI DEĞİLDİR: projeye eklenen her ISO 639-1 kodu listede çıkar (project_update languages). Komponent kütüphanesinin kendi arayüz metni (sayfalama, filtre operatörleri, boş durumlar) yalnız tr/en sözlüğü taşır ve sözlüğü olmayan dilde İNGİLİZCEYE düşer — sayfa içeriği ve sayı/tarih biçimi ise seçilen dilin kendisini kullanır. Yani 'de' seçili bir uygulamada tablo sayfalaması İngilizce, sayılar Almanca ayraçla çıkar; bu bilinçlidir.",
+            "Sekme başlığı (page.browserTitleKey) bu değişimi İZLEMEZ: açılıştaki dilde kalır, sayfa yeniden yüklenince düzelir (platform_guide('translation'))."
         ],
         guide: 'translation'
     },
@@ -870,12 +936,100 @@ export const componentKnowledge = {
             "Form validations sistemiyle entegrasyonu YOKTUR (kapı yalnız çözülen ifade değeridir); Studio kanvasında adımlar arası geçiş Element Tree üzerindendir."
         ],
         propNotes: {
+            surfaceStyle: NODE_SURFACE_NOTE,
             steps: "[{ title, description, icon, optional, canProceed }] — tabs'ın views deseni; her adım children'da kendi kapsayıcısını taşır.",
             canProceed: "Aktif adımın kapısı; ifadeye bağlanır. Yalnız false/'false' engeller.",
             currentStep: '0 tabanlı aktif adım; setter hedefi, aralık dışı değer kırpılır.'
         }
     }
 };
+/**
+ * APPEARANCE JETON KÜMELERİ — tek kaynak (S-2 · P1-2).
+ *
+ * Ajan `gap` jetonlarına (`none`/`small`/`medium`) benzeterek `paddingType:'large'` yazdı;
+ * platform 200 döndü ve değeri sessizce `none`a ÇEVİRDİ — kart sıfır iç boşlukla çizildi.
+ * Bu, 2026-09-06 koşusunun 32 sessiz düşme satırından tek gerçek olanıydı.
+ *
+ * `component_get` yanıtında alan adı `appearanceValues`'tur, `appearanceTokens` DEĞİL: gizli-veri
+ * maskeleyicisinin `secretKeyPattern`'i "token" geçen her anahtarı `***` yapıyor ve küme sessizce
+ * kayboluyordu (ölçüldü 2026-09-06, gerçek uçta).
+ *
+ * Kümeler tahmin değil: `zeyrek-backend` `DesignComponent.cs` enum'larının `[Description]`
+ * değerleridir (`ComponentPaddingType` · `ComponentMarginType` · `ComponentWidthType` ·
+ * `ComponentHeightType` · `ComponentAlignType`) — platformun kabul ettiği kümenin tek tanımı
+ * orasıdır ve backend artık tanımadığı jetonu 400 ile reddeder.
+ */
+export const APPEARANCE_TOKEN_SETS = {
+    paddingType: {
+        values: ['none', 'normal', 'custom'],
+        note: "'custom' verildiğinde ölçü paddingValue (tek sayı) ya da paddingValues ({top,right,bottom,left}) alanından gelir. 'large'/'small' gibi jeton YOKTUR."
+    },
+    marginType: {
+        values: ['none', 'normal', 'custom'],
+        note: "'custom' verildiğinde ölçü marginValue ya da marginValues alanından gelir."
+    },
+    widthType: {
+        values: ['cover', 'contain', 'auto', 'fixed', 'fill'],
+        note: "'fixed' widthString'i (serbest CSS uzunluğu) okur; başka modda widthString yok sayılır (PAGE-017/018)."
+    },
+    heightType: {
+        values: ['fixed', 'auto', 'fill'],
+        note: "'fixed' heightString'i okur, yoksa size.h×10px kullanır; 'fill' yüksekliği ebeveynin bıraktığı yerden alır."
+    },
+    alignType: {
+        values: ['left', 'center', 'right'],
+        note: "widthType 'auto'/'contain' iken yatay hizalamayı belirler; 'fill' modda etkisizdir."
+    }
+};
+/**
+ * STATES BAYRAKLARI — "true iken ne olur" (S-9 · P1-5).
+ *
+ * Katalogda `isWrapper` saf bir yerleşim bayrağı gibi duruyordu; 2026-09-06 koşusunda giriş
+ * kartı bütün ekranı kapladı ve sebebi ancak deneyerek bulundu. Notlar runtime çizim
+ * kaynağından okundu: `zeyrek-frontend` `packages/ng-apps-ui/src/shared/render/render.functions.ts`
+ * (kutu stili) ve `packages/ng-apps-screen-builder/src/layering.functions.ts` (katmanlama).
+ *
+ * `states` bir PROP DEĞİL düğüm alanıdır: `replace_prop` yazamaz, kurulu bir düğümde
+ * `resize_component` micro-op'unun `states` alanıyla değişir.
+ */
+export const STATE_FLAG_NOTES = {
+    isWrapper: "Kap salt düzen elemanı olur: height:100% + MIN-HEIGHT:80vh + overflow-y:inherit yazılır ve iç dolgu sıfırlanır — sayfanın altına yüzlerce piksel ölü boşluk ekleyebilir (ölçüldü 2026-09-05: dokuz düğüm ~1600px; 2026-09-06: giriş kartı bütün ekranı kapladı). style ile ezilemez. Ayrıca title ve __header bloğu ÇİZİLMEZ, zemin/çerçeve taşımaz. Sayfa kökü (page_container) ve yerleşim sarmalayıcıları dışında gerekmiyorsa false bırakın.",
+    isScrollable: 'Kutu büyümek yerine İÇİNDE kaydırır: overflow-y:auto + yükseklik (fill ise 100%, değilse heightString ya da size.h×10px). heightType:auto olan sıradan düğümde yükseklik auto kalır ve kaydırma etkisizdir. Yerleşim kökünde padding:0 + height:100% verir.',
+    isSticky: 'Düğüm position:sticky + left:0 olur ve kaydırırken yerinde kalır; z-index başlık tiplerinde 1000, diğerlerinde 1000-y — sticky, float eden komşuyu KASTEN yener. İç dolgu sıfırlanır ve piksel ince ayarı transform ile korunur.',
+    isDroppable: 'Düğüm çocuk kabul eder ve iç dolgusunu padding kutusundan alır (aksi hâlde dolgu hiç yazılmaz). Çocuk sahibi olduğu için appearance.aspectRatio bu düğümde YOK SAYILIR — oran yalnız kendi içeriğini taşıyan yaprakta çizilir.',
+    isFloating: 'Izgara çocuğuna z-index verir (appearance.zIndex tabanlı) ve düğüm kardeşlerinin ÜSTÜNE biner; grid izi korunduğu için kardeşlerin yerleşimi değişmez. Sıradan düğümlerin z-index\'i yoktur, DOM sırasıyla yığılırlar.',
+    isQuickStack: "Yalnız Studio ekran kurucusunun hızlı-yığın aracını işaretler (quick-stack.functions.ts); RUNTIME ÇİZİMİ BU BAYRAĞI HİÇ OKUMAZ — yayınlanan sayfada görsel etkisi yoktur."
+};
+/**
+ * ADRESLENEBİLİR İÇ ROLLER (S-6 · G-1 · P1-3).
+ *
+ * `page_screenshot actions` hedefi `data-element-id` ile çözer ve o öznitelik şimdiye kadar
+ * yalnız düğümün KÖKÜNDE yazılıyordu: 2026-09-06 koşusunda `target:'tbl_vacancy'` tablonun
+ * köküne tıkladı, sayfalayıcıya değil. Sayfalama uçta doğrulandı ama TIKLAMA hiç sınanmadı ve
+ * boşluk `platform_gap_report` ile `G-1` olarak bildirildi.
+ *
+ * Runtime artık iç kontrollere `<elementId>__<rol>` kimliği yazıyor; kaynak
+ * `zeyrek-frontend` `packages/ng-apps-ui/src/shared/internal-element-id.ts` (`internalRolesFor`)
+ * ve liste burada birebir aynadır. Kolon rolleri kolonun SLUG'ından türer, başlığından değil —
+ * başlık çeviriye bağlıdır.
+ */
+export const INTERNAL_ROLES_BY_TYPE = {
+    table: [
+        'pager-prev',
+        'pager-next',
+        'pager-page (sayfa numarası kutusu)',
+        'pager-limit (sayfa boyu seçimi)',
+        'pager-refresh',
+        "sort-<kolon slug'ı>",
+        'colmenu',
+        'row-<0 tabanlı sıra; sayfa değişince yeniden numaralanır>'
+    ]
+};
+/** Hedefteki `__` ayracından sonrası bir iç roldür; gateway bulunamayan hedefte listeyi basar. */
+export const INTERNAL_ROLE_SEPARATOR = '__';
+export function knownInternalRoles() {
+    return [...new Set(Object.values(INTERNAL_ROLES_BY_TYPE).flat())];
+}
 export const knowledgeNote = 'knowledge alanı elle doğrulanmış davranış bilgisidir; kayıt yoksa davranış sözlüğe henüz işlenmemiştir — prop/olay semantiği tahmin etmeyin, gerekirse NgApps.UI kaynağına bakın.';
 export function knowledgeFor(slug) {
     return slug ? componentKnowledge[slug] : undefined;

package/dist/knowledge/coverage.js

@@ -20,6 +20,49 @@ export function formBindingWarnings(ops) {
         .filter(elementId => !boundForms.has(elementId))
         .map(elementId => `FORM-001: '${elementId}' formuna 'submit' olayı bağlanmadı — form kendi başına kayıt YAPMAZ, gönderimi bir flow yürütür. flow_create ile submit akışını kurup set_event { target: '${elementId}', event: 'submit', eventValue: <flow id> } ile bağlayın (örnek: ngapps://examples/page-form-upsert). Bağlamayı sonraki patch'e bıraktıysanız bu uyarıyı yok sayın.`);
 }
+/**
+ * FORM-003 — formun `submit` olayı bağlı ama form içindeki butonun `click` olayı bağlı değil.
+ * ÖLÇÜLDÜ 2026-09-05 (Corecruiter koşusu, `S-18`): `ngapps://examples/page-sign-in` örneği akışı
+ * forma bağlıyor ve içine düz bir `button` koyuyor; runtime o butonu `<button type="button">`
+ * çiziyor, yani HTML form submit'i HİÇ doğmuyor. Butona tıklamak da alanda Enter da uca istek
+ * göndermedi, hata da çıkmadı — teşhis yalnız gerçek tıklamayla mümkün oldu. Örneğin kendi notu
+ * "kimlik middleware'i kuran her projede bu sayfa ZORUNLUDUR" dediği için tuzak, örneği izleyerek
+ * kurulan her uygulamanın giriş kapısında duruyor.
+ */
+export function formSubmitButtonWarnings(ops) {
+    const operations = asObjects(ops);
+    const boundClicks = new Set(operations
+        .filter(op => op.op === 'set_event' && String(op.event ?? '') === 'click')
+        .map(op => String(op.target ?? '')));
+    const submitForms = new Set(operations
+        .filter(op => op.op === 'set_event' && String(op.event ?? '') === 'submit')
+        .map(op => String(op.target ?? '')));
+    const submitsNatively = (node) => {
+        const prop = (node.props ?? {}).type;
+        return String(prop?.data ?? prop ?? '') === 'submit';
+    };
+    const buttonsIn = (node) => {
+        const found = [];
+        for (const child of asObjects(node.children)) {
+            if (String(child.type ?? '') === 'button' && !submitsNatively(child))
+                found.push(String(child.elementId ?? '?'));
+            found.push(...buttonsIn(child));
+        }
+        return found;
+    };
+    return operations
+        .filter(op => op.op === 'add_component' && FORM_TYPES.has(String(op.component?.type ?? '')))
+        .flatMap(op => {
+        const component = (op.component ?? {});
+        const elementId = String(component.elementId ?? '?');
+        if (!submitForms.has(elementId))
+            return [];
+        const loose = buttonsIn(component).filter(buttonId => !boundClicks.has(buttonId));
+        if (loose.length === 0)
+            return [];
+        return [`FORM-003 (uyarı): '${elementId}' formunun 'submit' olayı bağlı ama içindeki buton(lar) ne props.type:'submit' taşıyor ne de 'click' olayı bağlı: ${loose.join(', ')}. Buton varsayılan olarak type="button" çizilir ve HTML form submit'i HİÇ doğmaz — tıklamak da Enter da uca istek göndermez, hata da çıkmaz (ölçüldü 2026-09-05). İki çözümden biri: butona props.type = 'submit' verin, ya da aynı akışı butonun click olayına da bağlayın (set_event { target: '${loose[0]}', event: 'click', eventValue: <aynı flow id> }).`];
+    });
+}
 /**
  * FORM-002 — akıştaki yazma ucu (post/put/patch) hiç `source:'body'` parametresi taşımıyor:
  * istek gider, gövde boş olduğu için kayıt ya boş yazılır ya doğrulamadan döner. Form alanları uca

package/dist/knowledge/flowGuards.js

@@ -0,0 +1,30 @@
+/**
+ * FLOW-011'in guard tanıması: lint `Steps.x.headers && Steps.x.headers["total-count"]` formunu
+ * guard'sız sanıp uyarıyordu ve aynı ifade için İKİ bulgu üretiyordu — regex her geçişi bağımsız
+ * saydığı, guard formu da kalıbı iki kez içerdiği için (İK koşusu E-6).
+ */
+function stepRef(name) {
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return `Steps\\s*(?:\\.\\s*${escaped}|\\[\\s*['"]${escaped}['"]\\s*\\])`;
+}
+const anyHeadersAccess = /Steps\s*(?:\.\s*([A-Za-z_$][\w$]*)|\[\s*['"]([^'"]+)['"]\s*\])\s*\??\.\s*headers\b/g;
+export function headersAccessNames(expression) {
+    const names = new Set();
+    let match;
+    anyHeadersAccess.lastIndex = 0;
+    while ((match = anyHeadersAccess.exec(expression)) !== null) {
+        names.add(match[1] ?? match[2] ?? '');
+    }
+    return [...names].filter(name => name !== '');
+}
+export function isHeadersAccessGuarded(expression, name) {
+    const ref = stepRef(name);
+    const unguardedRead = new RegExp(`${ref}\\s*\\.\\s*headers\\s*(?:\\.|\\[)`, 'g');
+    const guardedRead = new RegExp(`${ref}\\s*(?:\\?\\.\\s*headers|\\.\\s*headers\\s*\\?\\.)`, 'g');
+    const precondition = new RegExp(`${ref}\\s*(?:\\.\\s*headers\\s*)?&&`);
+    if (precondition.test(expression))
+        return true;
+    const unguarded = expression.match(unguardedRead)?.length ?? 0;
+    const guarded = expression.match(guardedRead)?.length ?? 0;
+    return unguarded === 0 && guarded > 0;
+}