@appaflytech/zeyrek-ai-mcp 0.0.2 → 0.0.4

package/dist/knowledge/componentCatalog.js

@@ -1,3 +1,20 @@
+/**
+ * ORTAK tipli stil grubu notları. Gruplar TEK kaynaktan üretilir
+ * (zeyrek-frontend `style-groups/style-group-schemas.ts`); alan sözleşmesi de
+ * tek yerde durur ki bir alan eklendiğinde komponent başına metin güncellemek
+ * gerekmesin. Tipli gruplu her komponentin propNotes'u bu sabitleri kullanır.
+ *
+ * DEĞER MODELİ (K9): boyut alanları CSS METNİDİR ('18px', '1.2em', '50%');
+ * çı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.
+ */
+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).",
+    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)."
+};
 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.',
@@ -22,13 +39,16 @@ export const componentKnowledge = {
         summary: 'Etkileşimli veri ızgarası: satır seçimi, çift tık, hücre içi düzenleme, kolon filtreleme/sıralama — her etkileşim AYRI olay olarak akışa bağlanır.',
         behavior: [
             'Süzme/sıralama/sayfalama sunucu taraflıdır: filters/sortField/offset akışla uca gider, dönen satırlar rows prop’una setter ile yazılır.',
-            "isPaginated:true + akışta limit/offset parametreleri + pagination olayı üçlüsü birlikte kurulmalı; biri eksikse tablo tek sayfa kalır (platform_guide('page') Kural 1c)."
+            "isPaginated:true + akışta limit/offset parametreleri + pagination olayı üçlüsü birlikte kurulmalı; biri eksikse tablo tek sayfa kalır (platform_guide('page') Kural 1c).",
+            "SATIR BAZLI GÖRÜNÜM EZMESİ: bir satır kendi _columns DİZİSİNİ taşıyabilir — rows[i]._columns[<kolonun columns dizisindeki İNDEKSİ>] = { appearance:'error', isBold:true, options:[...] } kolon tanımıyla birleşir (column-view.ts resolveColumn → Table.svelte:1207 <TableCell {column}>). İndeks TANIM sırasıdır: buildViewColumns index'i isHidden kolonlar elenmeden ÖNCE atar, görünür sıra değil. Kullanıcı kolon menüsünden kolon gizlese bile indeksler kaymaz (hideColumns buildViewColumns'dan SONRA uygulanır). Ezilebilen alanlar appearance · options · isBold; CSV export'u da ezmeyi uygular. Aynı kalıp _actions[i] ile satır bazlı aksiyon ezmesinde de çalışır (rowActions). ŞEMA PROP'U DEĞİLDİR — component_get prop listesinde görünmez, satır verisinin içinde taşınır.",
+            "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: {
             rows: 'Satır dizisi; mount/filter/sort/pagination akışlarının setter adımıyla doldurulur.',
             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.",
+            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.",
+            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.'
         }
     },
@@ -36,13 +56,19 @@ export const componentKnowledge = {
         summary: 'Kendi filtre paneli/sıralaması/sayfalaması İÇİNDE olan tablo: tek mount akışı yazılır, komponent etkileşimde prop’larını güncelleyip mount’u yeniden tetikler.',
         behavior: [
             "Tek olay yayması tasarımdır: kullanıcı süzünce/sıralayınca filters/sortField/sortType/offset prop'larını node'a yazar ve mount'u yeniden tetikler — akış bu prop'ları uca parametre geçirir. Yani mount/filter/sort/pagination için AYRI akışlar kurmak gerekmez (table'da gerekir).",
-            'Zengin kolon biçimlendirme (renk haritası, prefix/suffix, tarih formatı, avatar) kolon şemasındadır; satır seçimi/çift tık YOKTUR — gerekiyorsa table kullan.',
+            'Zengin kolon biçimlendirme (renk haritası, prefix/suffix, tarih formatı, avatar) kolon şemasındadır — ama renk haritası STATİKTİR; satır seçimi/çift tık YOKTUR — gerekiyorsa table kullan.',
             "Liste→form geçişi satır AKSİYONUYLA kurulur: actions:[{ text, kind, icon, flow:{ type:'flow', ref:<flowId> } }]. doubleClick/select bağlamak 200 döner ama bağ ölüdür (gateway PAGE-008 keser).",
-            "Aksiyona tıklanınca komponent ÖNCE tıklanan satırı kendi selectedRow prop'una yazar, SONRA akışı çalıştırır (Table.svelte:72 setNode + onEmit) — akışta satır '<elementId>.selectedRow.<alan>' ile okunur. selectedRow katalogda hidden'dır; setter ile yazılmaz, komponent doldurur."
+            "Aksiyona tıklanınca komponent ÖNCE tıklanan satırı kendi selectedRow prop'una yazar, SONRA akışı çalıştırır (Table.svelte:72 setNode + onEmit) — akışta satır '<elementId>.selectedRow.<alan>' ile okunur. selectedRow katalogda hidden'dır; setter ile yazılmaz, komponent doldurur.",
+            "style prop'u 2026-08-27'de EKLENDİ: parçalar &__toolbar · &__title · &__head · &__th · &__body · &__row · &__td. table'ın aksine tek yazım kuralı vardır — hepsi designerCss'ten geçer, yani camelCase yazılır ve iç seçici alır. (Bu tarihten önce datatable stillendirilemiyordu; eski notlar 'style YOKTUR' diyorsa güncel değildir.)",
+            "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.",
             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."
+            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.",
+            tableStyle: "zebra | plain — satır zemini varyantı; CSS DEĞİL. Serbest CSS için ayrı `style` prop'u vardır (parça bazlı).",
+            style: "Parça bazlı CSS: &__toolbar · &__title · &__head · &__th · &__body · &__row · &__td. designerCss her bildirime !important ekler, yani komponentin kendi çerçeve/ayraç varsayılanlarını ezer — Figma tipi düz tablo bununla kurulur."
         }
     },
     form: {
@@ -55,18 +81,138 @@ export const componentKnowledge = {
             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.",
+        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.",
+            "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).",
+            "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)."
+        }
+    },
+    'box-section': {
+        summary: "box'ın başlık/altlık bölgesi. Şemaya elle EKLENMEZ: box'ın hasHeader/hasFooter anahtarları bu düğümü açar ve kapatır.",
+        behavior: [
+            'Yüzeysiz sarmalayıcıdır: kendi zemini/kenarlığı yoktur, yalnız bölge ayracını çizer (header altına, footer üstüne).',
+            "Palette GÖRÜNMEZ (isHide) ve SİLİNEMEZ (isDeletable:false) — kaldırmanın tek yolu box'ın ilgili anahtarını kapatmaktır.",
+            "role prop'u ('header' | 'footer') bölgenin kimliğidir ve gizlidir; elle değiştirmek yerleşimi bozar.",
+            "Ayraç rengi ve bölge dolgusu artık kutunun 'sectionStyle' grubundan yönetilir (bölge düğümünün kendi şemasından değil): headerDivider/footerDivider/dividerColor/sectionPadding."
+        ],
+        propNotes: { role: "'header' | 'footer' — gizli; box'ın bölge uzlaştırması yazar." }
+    },
+    divider: {
+        summary: 'Yatay ya da dikey ayraç çizgisi; ortasında isteğe bağlı etiket taşır. Olay YAYMAZ.',
+        behavior: [
+            "direction 'vertical' iken çizgi kapsayıcının YÜKSEKLİĞİNİ kullanır — yüksekliği olmayan bir akış kabında görünmez kalır.",
+            'label doluysa çizgi ikiye bölünür ve metin ortaya yerleşir; boşsa tek parça çizgidir.'
+        ],
+        propNotes: {
+            variant: "'solid' | 'dashed' | 'dotted'.",
+            color: "Beş semantik değer + 'custom' (customColor ile); boş bırakılırsa tema kenarlık rengi."
+        }
+    },
+    spacer: {
+        summary: 'Sabit ya da esnek boşluk. Çalışma anında GÖRÜNMEZ; yalnız editörde tarandı çizilir.',
+        behavior: [
+            "mode 'fixed' iken size kadar px yer kaplar; 'flex' iken kalan boşluğu doldurur (flex kapsayıcıda iki grubu uçlara itmenin yolu).",
+            'showInEditor kapatılırsa editörde de görünmez — sayfayı okurken boşluğun neden orada olduğu anlaşılmaz, açık bırakmak yeğdir.',
+            "Kendi 'size' prop'u px'tir; kapsayıcının flex 'size' prop'uyla (shrink/grow) ilgisi yoktur."
+        ],
+        propNotes: { mode: "'fixed' (size px) | 'flex' (kalanı doldurur)." }
+    },
+    popover: {
+        summary: 'Tetikleyici butondan açılan yüzen panel; İÇİNE komponent bırakılır (droppable).',
+        behavior: [
+            "trigger 'click' ya da 'hover' olabilir; editör kipinde tetikleme çalışmaz (tasarımcı içeriği düzenleyebilsin diye).",
+            "isOpen çift yönlüdür: açılış/kapanış olayları setter'dır (self.isOpen yazılır), dolayısıyla akış da isOpen'ı yazarak paneli açıp kapatabilir.",
+            'closeOnOutside kapatılırsa panel yalnız tetikleyiciyle ya da akışla kapanır.'
+        ],
+        propNotes: {
+            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."
+        }
+    },
+    phoneinput: {
+        summary: 'Ülke kodu seçicili telefon girişi; değeri her zaman E.164 biçiminde yazar (+905321234567).',
+        behavior: [
+            'Yazılan metin ülkeye göre süzülür ve hane sınırına kırpılır; DEĞER DEĞİŞMEDİYSE change YAYILMAZ — duvara çarpan tuşlar boş akış tetiklemez.',
+            "blur her odak kaybında yayılır (değer aynı olsa bile) ve setter DEĞİLDİR — 'alan bırakıldı' kancası olarak kullan.",
+            'defaultCountry yalnız BAŞLANGIÇ ülkesidir; kullanıcı seçiciyi değiştirince değer yeni ülkenin koduyla yeniden kurulur.'
+        ],
+        propNotes: { value: 'E.164 metni; boş girişte boş string.' }
+    },
+    filterbuilder: {
+        summary: 'İç içe and/or filtre kuralları kurar ve akışa HEM kural ağacını HEM hazır jexl ifadesini verir.',
+        behavior: [
+            "change olayının yükünde iki alan vardır: 'value' (ağaç) ve 'jexl' (aynı ağacın ifadesi). setter YALNIZ value'yi self'e yazar; jexl yalnız event.data'dadır — sorguya bağlanacak alan odur.",
+            'fields dizisi kullanıcıya sunulan alan sözlüğüdür; tipi (text/number/date/dropdown) operatör listesini belirler.',
+            'Her kural değişikliğinde change yayılır — sorguyu her tuşta yeniden koşturmak istemiyorsan akışta gecikme kur.'
+        ],
+        propNotes: {
+            fields: '[{ label, field, type, options }] — options yalnız dropdown tipinde, virgülle ayrılmış metin.',
+            value: 'Kural ağacı; gizlidir ve setter ile yazılır.'
+        }
+    },
+    comments: {
+        summary: '@bahsetmeli, iç içe yanıtlı yorum akışı; gönderilen her yorumu akışa devreder.',
+        behavior: [
+            'İYİMSER KATMAN: gönderilen yorum, beğeni ve silme ANINDA arayüze yansır ama HİÇBİRİ kalıcı değildir — uca yazmak akışın işidir.',
+            'Bekleyen katman yalnız rows İÇERİĞİ değiştiğinde temizlenir (referans değişimi yetmez). Akış kaydettikten sonra rows tazelenmezse bekleyen satır bir sonraki içerik değişiminde kaybolur.',
+            'people listesi @bahsetme önerilerini besler; submit yükündeki mentions bu listeye göre çözülmüş adlardır.',
+            'ownOnly açıkken düzenleme/silme yalnız currentUser’ın kendi yorumlarında görünür — yetki KONTROLÜ değil, arayüz filtresidir; asıl kontrol uçtadır.'
+        ],
+        propNotes: {
+            rows: '[{ id, author, text, createdAt, parentId, avatar, likeCount, likedByMe }] — parentId dolu olan satır yanıttır.',
+            currentUser: 'Yorum sahipliğini ve ownOnly filtresini belirleyen ad; boşsa düzenleme/silme gizlenir.',
+            people: '@bahsetme önerileri (virgülle ayrılmış).'
+        }
+    },
+    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).",
+            "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.",
+            "Yüzey neden prop: düğümün appearance kanalı sarmalayıcıyı (.ng-app__node-item) boyar, kutunun İÇİNİ değil — box'ta .ng-box'ın kendi background/border-radius'una hiçbir panelden ulaşılamıyor. surfaceStyle bu boşluğu kapatır.",
+            "Bölge (header/footer) düğümleri box ile ORTAKTIR: hasHeader/hasFooter aynı box-section düğümlerini açar. sectionStyle kuralları bu yüzden '&__header' gibi bir parçaya değil, gerçek '& .ng-box-section--header' seçicisine yazılır.",
+            "Renk/gölge alanı boş bırakılırsa tema token'ı geçerlidir (--ng-background-surface, --ng-radius-md, --ng-shadow-*) — kutu tema değişimini izler. Radius preset'leri de --ng-radius-sm/lg/pill kademeleridir. Sabit renk ya da sabit px yazmak bu bağı koparır."
+        ],
+        propNotes: {
+            surfaceStyle: STYLE_GROUP_NOTES.surfaceStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
+            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ça olarak yalnız '&__body' bildirilmiştir çünkü markup'ta gerçekten o eleman vardır."
+        }
+    },
     container: {
-        summary: "Genel kapsayıcı; children'ını ya FLEX akışıyla (yeni kapsayıcıların varsayılanı) ya da 12 kolonluk IZGARA ile dizer. Her sayfanın kökünde silinemeyen page_container bundandır ve o da aynı düzen prop'larını alır.",
+        summary: "Genel kapsayıcı (TİPLİ stil modeli: surfaceStyle · typographyStyle · hoverStyle · headerStyle); children'ını ya FLEX akışıyla (yeni kapsayıcıların varsayılanı) ya da 12 kolonluk IZGARA ile dizer. Her sayfanın kökünde silinemeyen page_container bundandır ve o da aynı düzen prop'larını alır.",
         behavior: [
-            "states.isWrapper:true iken salt düzen elemanıdır: title ve __header bloğu ÇİZİLMEZ — kart başlığı gerekiyorsa içine text komponenti koy (platform_guide('page') Bilinen sınırlar).",
+            "states.isWrapper:true iken salt düzen elemanıdır: title ve __header bloğu ÇİZİLMEZ, zemin/çerçeve taşımaz ve gövdesi dolgusuzdur — kart başlığı gerekiyorsa içine text komponenti koy (platform_guide('page') Bilinen sınırlar). Bu kip artık bileşenin kendi CSS'inde: tipli alanlar (surfaceStyle) sayfa köküne de zemin/çerçeve verebilir.",
+            "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.",
+            "ÜÇÜ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."
+            "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)."
         ],
         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.",
+            typographyStyle: STYLE_GROUP_NOTES.typographyStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
+            hoverStyle: STYLE_GROUP_NOTES.hoverStyle,
+            headerStyle: "{ titleColor, titleSize(CSS uzunluğu), titleWeight(400|500|600|700), divider(bool — false BAŞLIK ÇİZGİSİNİ KALDIRIR, yok saymaz), dividerColor, padding(CSS kutu değeri: '12px' | '8px 16px' | 'var(--ng-spacing-md)'; varsayılanı boşluk ölçeğinden 'var(--ng-spacing-sm) var(--ng-spacing-md)'), minHeight(CSS uzunluğu; bileşenin 41px tabanını kaldırmak için '0'), align(flex-start|center|flex-end), margin(CSS kutu değeri; bandı içeriden almak ya da altına boşluk bırakmak için) }. Alanların HEPSİ varsayılan taşır (titleColor var(--ng-text-primary), titleSize calc(var(--ng-font-size) * 1.4), titleWeight '600', dividerColor var(--ng-border-primary)) — düğüm kurulurken props'a yazılırlar, yani component_get'teki defaults başlığın gerçek görünümüdür. Boyut alanlarında METİN '0' gerçek seçimdir ve bileşenin tabanını kaldırır (sayı 0 'seçilmedi' sayılır). Başlık yalnız title doluyken VE düğüm sarmalayıcı değilken çizilir.",
             layout: "'flex' (katalog varsayılanı; akış) | 'grid' (12 kolonluk ızgara). Prop hiç yazılmamışsa renderer IZGARA çizer — varsayılan yalnız düğüm kurulurken materyalize olur. Aşağıdaki altı prop YALNIZ 'flex' iken etkilidir.",
             direction: "'row' (varsayılan) | 'column' → flex-direction. Hangi hizalamanın ana eksen olduğunu bu belirler.",
             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.",
@@ -106,7 +252,14 @@ export const componentKnowledge = {
     textinput: { summary: 'Tek satır metin girişi; value prop’u yazılabilir, change olayı { value } taşır.' },
     textarea: { summary: 'Çok satırlı metin girişi.' },
     texteditor: { summary: 'Zengin metin editörü; onChange değeri HTML string’dir. Olay adları istisnadır: onMount/onChange (on önekli).' },
-    numberinput: { summary: 'Sayı girişi; change olayı number taşır.' },
+    numberinput: {
+        summary: 'Sayı girişi; change olayı number taşır.',
+        propNotes: {
+            prefix: "Girdinin içinde SOLDA çizilen salt görsel ek (₺, $ gibi); value'ya karışmaz.",
+            suffix: "Girdinin içinde SAĞDA çizilen salt görsel ek (%, kg gibi); value'ya karışmaz.",
+            useThousandsSeparator: "Binlik ayracı YALNIZ ondalık (metin) modda çalışır — allowDemicalPoints kapalıyken native number girişi ayraç gösteremez, prop sessizce etkisizdir. Odakta ayraçlar soyulur, blur'da yeniden gruplanır; ayraç yerelden gelir (tr: 1.250,50 / en: 1,250.50)."
+        }
+    },
     incrementalinput: { summary: 'Otomatik kod üretici (önek + ayraç + sayaç); bir sonraki kodu runtime’da çeker.' },
     password: { summary: 'Parola girişi; textinput ile aynı olay sözleşmesi.' },
     checkbox: { summary: 'İki durumlu kutu; change/checked/unchecked olayları boolean taşır.' },
@@ -120,7 +273,12 @@ export const componentKnowledge = {
     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.' },
-    button: { summary: 'Tıklama kaynağı; click olayı veri taşımaz, bağlam gerekiyorsa ifadede komponent adlarıyla okunur.' },
+    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."
+        }
+    },
     'dropdown-button': { summary: 'Menülü buton; clickItem olayı tıklanan menü öğesini taşır.' },
     compound: { summary: 'İkincil metinli büyük buton (compound button); click yayar.' },
     'confirm-bar': { summary: 'Satır içi onay şeridi; click olayı tıklanan buton tanımını taşır.' },
@@ -157,10 +315,19 @@ export const componentKnowledge = {
         }
     },
     text: {
-        summary: 'Tek satırlık metin gösterimi; değer type:code prop’uyla ifadeye bağlanabilir.',
+        summary: 'Tek satırlık metin gösterimi; değer type:code prop’uyla ifadeye bağlanabilir. Görünümü TİPLİ stil gruplarındadır (typographyStyle · surfaceStyle), ham CSS değil.',
         behavior: [
-            "Yükseklik SABİTTİR: maxSize.h = 1 (katalog varsayılanı 8'dir ve olduğu gibi kopyalanırsa reddedilir; gateway 1'e çeker ve gatewayNormalized ile bildirir). Çok satırlı metin için textarea ya da html kullanın."
-        ]
+            "Yükseklik SABİTTİR: maxSize.h = 1 (katalog varsayılanı 8'dir ve olduğu gibi kopyalanırsa reddedilir; gateway 1'e çeker ve gatewayNormalized ile bildirir). Çok satırlı metin için textarea ya da html kullanın.",
+            "type HTML etiketi + ölçek seviyesidir (h1|h2|h3|label|p|small; a11y için doğru seviyeyi seç). Punto/kalınlık/renk/hiza kararı typographyStyle'dadır: fontSize seviyenin puntosunu ezer, boş bırakılırsa seviye ölçeği (tema --ng-font-size-*) geçerlidir.",
+            "EMEKLİ prop'lar: isBold, align, color, customColor şemada YOK — yazılırsa unknown-prop ile reddedilir. Karşılıkları: typographyStyle.fontWeight ('600'), textAlign, textColor (semantik renk için tema token'ı: var(--ng-status-success) gibi). Kayıtlı eski sayfalarda bu prop'lar render anında takma adla çözülür (resolvedStyle bunu gösterir), yeni yazımda kullanılmaz.",
+            "Hover grubu yok (metnin hover semantiği yok); surfaceStyle etiket/vurgulu paragraf içindir (zemin, köşe, çerçeve, gölge) ve contentOverflow alanı yoktur (taşma hedefi yok).",
+            "KATMAN SIRASI (K4): tema componentStyles → $preset TABANDIR; tipli grup alanları temayı alan alan EZER; düğümün serbest style'ı SON SÖZDÜR. Grubun karşılamadığı kararı style kanalına (custom properties) yaz."
+        ],
+        propNotes: {
+            surfaceStyle: STYLE_GROUP_NOTES.surfaceStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
+            typographyStyle: STYLE_GROUP_NOTES.typographyStyle + ' ' + STYLE_GROUP_NOTES.colorTokens,
+            style: STYLE_GROUP_NOTES.styleEscape
+        }
     },
     image: { summary: 'Görsel; click yayar, src ifadeyle beslenebilir.' },
     video: { summary: 'Video oynatıcı; play/pause/ended olayları yayar.' },
@@ -179,18 +346,125 @@ export const componentKnowledge = {
     },
     'form-validation-errors': { summary: 'Formun doğrulama hatalarını listeler; form.errorElementId buraya işaret eder.' },
     breadcrumb: { summary: 'Sayfa yolu; currentTitle setter ile kip etiketine (Yeni/Düzenle) çevrilir.' },
-    'page-header': { summary: 'Sayfa başlığı bandı; yalnız mount yayar.' },
-    header: { summary: 'Uygulama üst çubuğu (layout parçası); navigation dizisi iç içe Prop sarmalı ister.' },
-    sidebar: { summary: 'Yan menü (layout parçası).' },
+    'page-header': {
+        summary: 'Sayfa başlığı bandı; yalnız mount yayar.',
+        propNotes: {
+            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."
+        }
+    },
+    header: {
+        summary: "Uygulama üst çubuğu (layout parçası): logo, TEK SEVİYE bağlantı şeridi, kullanıcı bloğu; navigation dizisi iç içe Prop sarmalı ister. Aktif bağlantı vurgusu YALNIZ prop'la sürülür — sidebar/layout'un aksine adrese bakmaz.",
+        behavior: [
+            "Vurgu OTOMATİK DEĞİLDİR: komponent adres çubuğuna bakmaz, yalnız activeNavHref ile bağlantının adresini karşılaştırır. Prop boşken hiçbir bağlantı vurgulanmaz; sayfa değişince vurguyu açılış akışındaki setter yazar. (Otomatiği isteyen sidebar/layout ya da qm-header kullanır.)",
+            "Karşılaştırma ÇÖZÜLMÜŞ yol üzerindedir (iki taraf da getHref'ten geçer): activeNavHref'e satırın ham href'ini ('musteriler'), bağlantı nesnesini ya da tarayıcıdaki tam yolu yazabilirsin — üçü de aynı satırı bulur.",
+            "2026-08-27'den önce karşılaştırma HAM değerler üzerindeydi ve bağlantı seçicisiyle doldurulmuş (nesne) href hiçbir zaman tutmuyordu; artık iki taraf da getHref'ten geçiyor — ham metin, bağlantı nesnesi ve tam yol aynı bağlantıyı gösterir.",
+            "navigation öğesi children alt-prop'unu kabul eder ama Header.svelte alt menü ÇİZMEZ — dizi tek seviye basılır. İç içe menü gerekiyorsa sidebar/layout (activeHref + otomatik vurgu) ya da qm-header (yalnız otomatik vurgu) kullan."
+        ],
+        propNotes: {
+            activeNavHref: "Vurgulanacak bağlantının HAM href'i. Eşleşen öğeye 'active' sınıfı basılır; görsel fark yalnız arka plan tonudur (--ng-background-canvas) ve o ton hover'ın aynısıdır — kalınlık/renk değişmez (header.style.ts '&__navigations-item.active').",
+            navigation: "[{ title, href, icon }] — tek seviye. children yazılabilir ama render EDİLMEZ."
+        }
+    },
+    sidebar: {
+        summary: 'Yan menü (layout parçası): logo/başlık/alt başlık bandı + çok seviyeli navigations ağacı. Ağacı layout ile ORTAK renderer çizer (Navigations/NavigationsItem) — ikisinin menü davranışı birebir aynıdır.',
+        behavior: [
+            "AKTİF SATIR VURGUSU activeHref prop'uyla sürülür (2026-08-27'de eklendi): yazılan adres hangi satıra denk geliyorsa o satır vurgulanır. Prop BOŞ bırakılırsa menü tarayıcıdaki adrese uyan satırı kendi bulur — yani hiç ayar yapmadan da 'bulunduğun sayfa' vurgulanır. Akıştan setter ile yazılabilir.",
+            "Eşleşmenin iki tarafı da getHref'ten geçer: satırın ham href'ini ('musteriler'), bağlantı seçicisinin nesnesini ({type:'page', data, ref}) ya da tarayıcıdaki tam yolu yazmak AYNI satırı gösterir — header'ın ham eşitlik tuzağı burada yok.",
+            "Otomatik eşleşme kuralı: satırın yolu adresle TAM eşit olmalı, satırın istediği sorgu parametrelerinin hepsi adreste aynı değerle bulunmalı (sayfanın eklediği fazla parametreler yok sayılır); aynı yolu paylaşan satırlarda daha çok parametre eşleyen kazanır. Yalnız YAPRAK satırlar yarışır, gizli satırlar elenir. Adres mount'ta BİR KEZ okunur (bağlantılar tam sayfa yükler).",
+            "Vurgulanan satır 'nav-btn--active' sınıfı + aria-current='page' alır (accent zemin/metin, hover tonundan bilerek ayrı). ÜST DAL vurgulanmaz ve kendiliğinden AÇILMAZ — kapalı bir dal aktif satırı gizler.",
+            "Menü rengi/biçimi CSS ile hâlâ ezilemez: style'ın &__navigations, &__navigations-title, &__navigations-body, &__navigations-item, &__navigations-item-suffix parçaları ÖLÜDÜR — bu sınıflar hiçbir elemana basılmaz (Sidebar.svelte yalnız __header*/__content yazar, satırları Navigations kendi scoped .nav-btn sınıfıyla çizer). Vurgu bu yüzden komponentin kendi stilindedir (zeyrek-frontend docs/issues.md CQ-132).",
+            "Menü olay YAYMAZ (şemada yalnız mount), satır tıklaması akış tetiklemez — gezinme ham <a href> ile tam sayfa yükleyerek olur.",
+            "isExpandable:true olan öğe BUTON çizilir ve href'i YOK SAYILIR (yalnız açar/kapar); gezinen, href'i olup isExpandable olmayan yapraklardır. Ne href'i ne children'ı olan 0. seviye öğe tıklanamaz GRUP BAŞLIĞI olur.",
+            "isExpanded kullanıcı tıklayınca yalnız bellekteki öğe nesnesinde değişir — akışa yayılmaz, sayfa yenilenince şemadaki değere döner."
+        ],
+        propNotes: {
+            navigations: "Ağaç: { title, href, icon, isExpandable, isExpanded, children }. href hem düz metin hem bağlantı seçicisinin nesnesi ({ type:'page', data, ref }) olabilir; ikisini de getHref çözer (http/mailto/tel olduğu gibi geçer, aksi hâlde geçerli adresin ilk üç segmentinin altına bağlanır). Öğe bazlı isHidden bu şemada YOKTUR — layout'ta vardır.",
+            activeHref: "Vurgulanacak satırın adresi; boş bırakılırsa tarayıcıdaki adres karar verir. Satırın href'iyle aynı biçimde yazılabilir (ham metin, bağlantı nesnesi ya da tam yol). YENİ prop — component_get çıktısındaki prop listesinde görünmüyorsa platform kataloğu henüz senkronlanmamıştır (components.json CI'daki syncComponents adımıyla iner).",
+            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.' },
-    layout: { summary: 'Layout kök komponenti; logout olayı yayar, sayfalar slot’una yerleşir.' },
-    slot: { summary: 'Layout’ta sayfa içeriğinin yerleştiği delik — slot’suz layout’a bağlanan sayfa BOŞ görünür.' },
+    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."
+        ],
+        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."
+        }
+    },
+    navigations: {
+        summary: "Çok seviyeli gezinme menüsü. 2026-08-27'de araç kutusuna ALINDI (kendi schema.ts'i o gün yazıldı): artık bir kaba sürüklenip yan menü, üst şerit ya da alt sekme çubuğu olarak kullanılabilir — daha önce yalnız layout/sidebar'ın içinden çiziliyordu.",
+        behavior: [
+            'Ağacı layout ve sidebar ile ORTAK renderer çizer (Navigations/NavigationsItem) — üçünün menü davranışı birebir aynıdır; ayrıntı sidebar kaydında.',
+            "Öğe bazlı isHidden BU şemada VARDIR: canlıda elenir, Studio'nun düzenleyici kipinde görünmeye devam eder (Navigations.svelte: {#if isEditorMode || item.isHidden !== true}).",
+            "activeHref boşken menü tarayıcıdaki adrese uyan satırı kendi bulur; adres mount'ta BİR KEZ okunur (bağlantılar tam sayfa yükler).",
+            "style PROP'U ÖLÜDÜR: şema &__item ve &__item--active parçalarını sunuyor ama Navigations.svelte style diye bir prop KABUL ETMİYOR (yalnız navigations ve activeHref alır) ve satırları NavigationsItem kendi scoped .nav-btn sınıfıyla çizer. Panelden yazılan hiçbir şey uygulanmaz — sidebar'daki aynı kusurun ikizi (zeyrek-frontend docs/issues.md CQ-143 / CQ-132).",
+            'Menü olay YAYMAZ (şemada yalnız mount); gezinme ham <a href> ile tam sayfa yükleyerek olur.'
+        ],
+        propNotes: {
+            navigations: "Ağaç: { title, href, icon, isHidden, isExpandable, isExpanded, children }. href düz metin ya da bağlantı seçicisinin nesnesi ({ type:'page', data, ref }) olabilir; ikisini de getHref çözer.",
+            activeHref: 'Vurgulanacak satırın adresi; boş bırakılırsa tarayıcıdaki adres karar verir.',
+            isHidden: 'Komponentin tamamını gizler (ortak katman prop’u); öğe bazlı gizleme navigations[].isHidden’dır.',
+            style: 'ÖLÜ — hiçbir etkisi yok (bkz. davranış). Menü biçimini değiştirmek bugün mümkün değil.'
+        }
+    },
+    'layout-shell': {
+        summary: "Kompozisyon kabuğunun kökü: bölgeleri ve sayfa slot'unu içine dizersin. 2026-08-27'de eklendi, 2026-08-28'de EMEKLİYE AYRILMA kararı alındı — yeni layout'u container + slot ile kur (platform_guide('layout')). Kayıtlı kalır, mevcut layout'lar çalışmaya devam eder.",
+        behavior: [
+            "Gövdesi BLOK akışındadır ve çocukları 12 kolonluk IZGARA yerleştirir — hem runtime'da hem Studio tuvalinde. Gövde satır flex'i olsaydı renderer'ın çocuk sarmalayıcısı içerik genişliğine çökerdi (ölçüldü: runtime'da 1200px yerine 213px, tuvalde 0). Yani bölgelerin konumu dock prop'undan DEĞİL, blocks[]'ten gelir.",
+            "sidebarOpen CANLI DURUMDUR: prop'un kendisi durumdur, toggle onu doğrudan yazar (qm-sidebar'ın isCollapsed deseni). Bir Durum değişkenine bağlanabilir ya da change-property akışıyla çevrilebilir.",
+            "mobileBehavior yalnız yan panelin mobilde AÇIK BAŞLAYIP başlamayacağını belirler (resolveInitialSidebarOpen: drawer → kapalı, stack → açık). 2026-08-28'e kadar var olan 'stack ise gövdeyi column yap' CSS kuralı, gövde blok akışına geçtiği için KALDIRILDI — artık yerleşimi ızgara belirliyor.",
+            "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: {
+            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."
+        }
+    },
+    'layout-region': {
+        summary: "Yerleşimin serbest bölgesi: içine ne sürüklersen o olur. layout-shell ile birlikte 2026-08-27'de eklendi, 2026-08-28'de EMEKLİYE AYRILMA kararı alındı — yeni layout'ta yerine container kullan.",
+        behavior: [
+            "dock BÖLGENİN NEREDE DURDUĞUNU BELİRLEMEZ — biçimini ve yönünü belirler: left/right tam yükseklikte dikey kolon, top/bottom tam genişlikte yatay şerit, fill kenarlıklı/zeminli yüzey. Konum ve boyut, diğer her komponentteki gibi blocks[]'ten gelir.",
+            "Gövdesi container/shell ile aynı sebeple blok akışındadır; row yönündeki bir bölgede flex olsaydı içerik genişliğine çökerdi (üst şerit 8px kalırdı — ölçüldü).",
+            "Kenara yaslı bölge (dock !== 'fill') shell'in sidebarOpen'ını izler ve kapanır; fill ASLA gizlenmez — yoksa sayfa içeriği kaybolurdu. Shell dışında tek başına duran bölge her zaman açık kabul edilir.",
+            "appearance.hideOn, dockMobile'ı HER ZAMAN yener; dockMobile:'hidden' yalnız bölge-yerel kısayoldur."
+        ],
+        propNotes: {
+            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ığı.',
+            isCollapsed: 'Kapalı başlar; bir Durum değişkenine bağlanabilir.',
+            style: '&__body parçası uygulanır.'
+        }
+    },
+    slot: {
+        summary: 'Layout’ta sayfa içeriğinin yerleştiği delik — slot’suz layout’a bağlanan sayfa BOŞ görünür.',
+        behavior: [
+            "Layout'ta TEK slot olmalı. Enjeksiyon HER slot'a ayrı ayrı kopyalar (layout.functions.ts injectPageSchemaIntoSlots ağacı dolaşır ve type==='slot' gören her düğümün children'ına sayfa şemasının klonunu yazar; önizleme tarafında page.mappers.mapPageLayoutToPreview aynısını yapar): iki slot = sayfa iki kez çizilir, elementId'ler çakışır. Doğrulama: page_state.layoutSlots.",
+            "Slot'un yerleşimi ızgara bloğundan gelir ve satır yüksekliği AÇIK UÇLUDUR — runtime slot için grid-row'u `y / auto` yazar (render.functions.ts), yani sayfa içeriği ne kadar uzarsa slot o kadar uzar. Slot'a sabit yükseklik vermeye çalışmak anlamsızdır."
+        ]
+    },
     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.' },
     '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.' },
-    'qm-header': { summary: 'QM uygulama başlığı: global arama, bildirimler, hesap menüsü, mega menü.' },
+    'qm-header': {
+        summary: 'QM uygulama başlığı: global arama, bildirimler, hesap menüsü, çok seviyeli mega menü.',
+        behavior: [
+            "Aktif menü öğesini KOMPONENT KENDİ bulur: menüdeki href'leri getHref ile çözüp adres çubuğunun pathname + search'iyle karşılaştırır (shared/navigation-active.ts findActiveHref — sidebar/layout ile aynı kural). Bunu sürecek ya da ezecek bir prop YOKTUR: sidebar/layout'taki activeHref burada yok, yazmak unknown-prop verir.",
+            "Eşleşme kuralı: yol TAM eşit olmalı (önek eşleşmesi yok) ve href'in sorgu parametrelerinin HEPSİ adresteki sorguda aynı değerle bulunmalı; birden çok aday tutarsa EN ÇOK parametresi eşleşen kazanır — '/gorevler' ile '/gorevler?tip=acik' aynı sayfada böyle ayrışır.",
+            "Yalnız YAPRAK öğeler yarışır (children'ı olan dal atlanır), isHidden öğeler elenir. Kazanan yaprağın üstündeki akordeon dallar açılır; drawer kipindeki dal kendiliğinden açılmaz (findActiveTrail).",
+            '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ı.' },
     // — 2026-08-25 eşleme turu: ng-apps-ui kataloğunda olup burada kaydı olmayan 22 komponent.
@@ -222,11 +496,12 @@ export const componentKnowledge = {
         }
     },
     badge: {
-        summary: 'Sayaç/durum rozeti: maxCount üstü "99+" olur, 0 showZero verilmedikçe gizlenir, isDot ile salt nokta çizer. Olay YAYMAZ.',
+        summary: 'Sayaç/durum rozeti: maxCount üstü "99+" olur, 0 showZero verilmedikçe gizlenir, isDot ile salt nokta çizer.',
         behavior: [
             'value SAYIYSA sayaç kuralları işler (0 gizlenir, maxCount aşılırsa "99+"); sayıya çevrilemeyen metin ("Yeni", "Beta") olduğu gibi basılır — durum rozeti böyle kurulur.',
             'isDot:true iken value · icon · maxCount OKUNMAZ, yalnız renkli nokta çizilir; nokta tek başına anlam taşıyorsa dotLabel doldurulmalı (yoksa ekran okuyucuya aria-hidden geçilir).',
-            'isPulsing nabız animasyonu ekler ve prefers-reduced-motion açık kullanıcıda kendiliğinden durur.'
+            'isPulsing nabız animasyonu ekler ve prefers-reduced-motion açık kullanıcıda kendiliğinden durur.',
+            "click yalnız şemada bağlıysa yayılır (avatar/image deseni): bağlıyken rozet <button> olur, tıklanabilir görünür ve odak sırasına girer; bağlı değilken salt görsel <span>'dir."
         ],
         propNotes: {
             value: 'Sayı ya da metin; boş string rozeti tamamen gizler.',
@@ -269,10 +544,13 @@ export const componentKnowledge = {
             'seriesField + valueField birlikte verilirse satırlar "kategori+seri başına bir satır" sayılıp geniş biçime pivotlanır; series dizisi o zaman prop’tan değil veriden türetilir.',
             'aggregate/sort/topN/nullMode veriyi çizimden ÖNCE dönüştürür — aynı işi akışta yapmana gerek yok.',
             'isDrillDown:true iken veri noktasına tıklamak kırıntı seviyesi ekler; dataPointClick yükü kaynak satırın TAMAMINI (row) taşır, böylece alt seviye sorgusu tek olayla kurulur. Geri dönüş breadcrumbClick ile bildirilir ve yeniden sorgulamak akışın işidir.',
-            'isExportable "tablo olarak gör" + dışa aktarma araç çubuğunu açar; showRefresh refresh olayını yayan bir yenile düğmesi ekler.'
+            'isExportable "tablo olarak gör" + dışa aktarma araç çubuğunu açar; showRefresh refresh olayını yayan bir yenile düğmesi ekler.',
+            "PASTA/HALKA ETİKETİ (2026-08-27 düzeltmesi): dataLabels.show artık pie/donut'a da geçiyor. Öncesinde prop bu dala hiç ulaşmıyordu ve dilim etiketleri HİÇBİR ayarla kapatılamıyordu — çekme çizgileri legend'in üstüne bindiği için halka fiilen kullanılamıyordu. Temiz halka için dataLabels:{ show:false } yaz."
         ],
         propNotes: {
             rows: 'Satır dizisi; mount/filter akışlarının setter hedefi.',
+            legend: "{ show, position, orient, showValues }. position artık DÖRT yön: top | bottom | left | right (2026-08-27). Yana yaslanan legend her zaman dikey çizilir — yatay seçilse bile ezilir, çünkü yandaki yatay legend grafiğin üstüne biner. showValues YALNIZ pasta/halkada iş görür: seri adının yanına dilim değerini yazar.",
+            centerLabel: "{ show, text, subtext } — YALNIZ donut. text boş bırakılırsa dilim değerlerinin TOPLAMI yazılır (valueFormat uygulanır), yani 'ortadaki toplam' için ayrı bir setter gerekmez. Pastada delik olmadığı için görünmez ve panelde gizlidir.",
             categoryField: 'Kategori ekseni alan adı (varsayılan "label").',
             series: "[{ valueField, type?, axis?, color?, stack?, lowField/highField?, targetField? }] — yFields'ın yerini aldı.",
             stackMode: 'none | stacked | percent.',
@@ -281,7 +559,10 @@ export const componentKnowledge = {
     },
     checkboxgroup: {
         summary: 'Değeri DİZİ olan çoklu kutu grubu (multi-select’in liste hâlinde açılmış hâli).',
-        behavior: ['Zorunluluk/en az-en çok seçim kuralları formun validations’ından gelir (required · minItems · maxItems).'],
+        behavior: [
+            'Zorunluluk/en az-en çok seçim kuralları formun validations’ından gelir (required · minItems · maxItems).',
+            "focus/blur GRUP düzeyindedir: kutular arasında Tab'lamak ayrı olay üretmez, yalnız grubun dışına çıkılınca/girilince bir kez yayılır (otpinput deseniyle aynı)."
+        ],
         propNotes: {
             value: 'string[] — akıştan gelen dizide string olmayan öğeler elenir.',
             options: '[{ label, value }]; direction ile dikey/yatay dizilir.'
@@ -304,17 +585,42 @@ export const componentKnowledge = {
         summary: 'Sandbox’lı dış sayfa gömme. javascript:/data:/vbscript:/file: şemaları engellenir.',
         behavior: [
             "isSandboxed (varsayılan AÇIK) allow-scripts allow-forms allow-popups verir ama allow-same-origin VERMEZ — gömülü sayfa uygulamanın çerezine/depolamasına erişemez.",
-            'Yalnız mount yayar: çapraz kaynak içerikte load/error olayı üretilemez.'
+            "load/error native <iframe> DOM olaylarından gelir. load ÇAPRAZ KAYNAKTA da güvenilir tetiklenir (tarayıcı frame'i okuyamasa bile yükleme bitince ateşler) ve 'yükleniyor' örtüsünü kapatır. error ise pratikte neredeyse hiç tetiklenmez — engellenen (X-Frame-Options/CSP) ya da 404 çapraz-kaynak sayfalar tarayıcıda genelde sessiz bir load'a döner; ağ hatası yakalamak için güvenilmez."
         ]
     },
+    icon: {
+        summary: 'Tek glif çizer (TİPLİ stil modeli: yalnız hoverStyle): Material Symbols ya da Phosphor setinden ikon + boyut + semantik renk + isteğe bağlı arka plan çipi, köşe rozeti, döndürme/çevirme, spin animasyonu ve click/href etkileşimi.',
+        behavior: [
+            "İKON ADI iki biçim alır: Material Symbols snake_case adı ('shopping_cart', 'progress_activity', 'account_circle') ya da Phosphor 'ph-<ağırlık> ph-<ad>' çifti ('ph-bold ph-heart'; ağırlıklar: ph-light|ph-bold|ph-duotone|ph-fill|ph-thin|'ph-regular ph'). BİLİNMEYEN Material adı hata vermez, ligature çözülmediği için adın METNİ görünür — adı uydurma, bilinen bir addan emin ol.",
+            "RENK TEK KANALDIR: icon.color OKUNMAZ (yazma). Çip kapalıyken glif rengini color/customColor çifti verir; çip açıkken renk sahibi chipColor'dur — solid varyantta glif otomatik kontrast rengini, soft varyantta çip renginin kendisini alır ve panel glif renk satırlarını gizler.",
+            "SPIN ile döndürme/çevirme AYRIKTIR: isSpinning açıkken rotation/flipHorizontal/flipVertical uygulanmaz (ikisi aynı CSS transform'unu paylaşamaz); değerler silinmez, spin kapanınca geri döner.",
+            "ETKİLEŞİM: href doluysa kök gerçek <a> olur (isNewTabLink yeni sekmede açar) ve click olayı YİNE yayılır; href boş ama click olayı bağlıysa kök <button>tur; ikisi de yoksa salt görsel <div> kalır.",
+            "ERİŞİLEBİLİRLİK: ariaLabel doluysa okuyucular onu okur (salt görselde role=img). Boşsa salt görsel ikon okuyuculardan GİZLENİR; tıklanabilir/bağlantılı ikon ise adsız kalmasın diye ikon adından türetilen etiketi okur. Anlam taşıyan her ikona ariaLabel yaz.",
+            'BOYUT tema puntosunun katıdır: sm|md|lg|xl kademeleri --ng-font-size ile ölçeklenir (md varsayılan temada ~24px) ya da elle CSS değeri yazılır — çıplak sayı px sayılır. Elle değer tema yazı ölçeğini izlemez.'
+        ],
+        propNotes: {
+            icon: "{ name } — yalnız ad okunur; renk color/chipColor kanallarından gelir (picker'ın renk bölümü bu komponentte kapalıdır).",
+            size: "sm|md|lg|xl (tema puntosuna oransal) YA DA CSS uzunluğu ('40px', '2.5em'); çıplak sayı px sayılır.",
+            color: "primary|info|success|warning|error|custom — çip kapalıyken glifin rengi; custom seçilirse customColor okunur. Semantik değer temayı izler, custom izlemez.",
+            chipShape: "none|circle|rounded|square — none dışında glifin arkasına renkli kutu açılır ve renk yönetimi chipColor'a geçer.",
+            chipVariant: 'solid (tam renkli zemin + otomatik kontrast glif) | soft (soluk zemin + renkli glif).',
+            badgeValue: "Köşe rozetinin metni ('3', '99+'); boşsa rozet çizilmez. badgeDot açıkken okunmaz — sayısız nokta çizilir.",
+            rotation: "0|90|180|270 (derece, metin değer). flipHorizontal/flipVertical ile birleşir; isSpinning açıkken üçü de uygulanmaz.",
+            href: "Adres ya da sayfa yolu — dolu ise ikon gerçek bağlantıdır; click olayı da yayılmaya devam eder.",
+            hoverStyle: STYLE_GROUP_NOTES.hoverStyle + ' borderColor alanı bu komponentte YOKTUR (kökte kenarlık yok).',
+            style: STYLE_GROUP_NOTES.styleEscape + " Parçalar: '&__chip' (zemin kutusu — 'none' kipinde de vardır) · '&__glyph' (glifin sarmalı) · '&__badge' (rozet)."
+        }
+    },
     jsonviewer: {
-        summary: 'Bağlanan veriyi katlanabilir JSON ağacı olarak çizer (hata ayıklama/detay ekranı). Olay YAYMAZ.',
+        summary: 'Bağlanan veriyi katlanabilir JSON ağacı olarak çizer (hata ayıklama/detay ekranı).',
         behavior: [
             "data STRING gelir ve '{' ya da '[' ile başlarsa JSON olarak parse edilip ağaç çizilir — uçtan metin olarak dönen gövdeyi akışta ayrıca çözmeye gerek yok; parse edilemezse düz metin gibi gösterilir.",
             'Boş veri (null · undefined · "" · {} · []) ağaç yerine emptyText satırını çizer ve araç çubuğu gizlenir.',
             'expandDepth çalışma anında değişirse ağaç YENİDEN kurulur: elle açıp kapattıkların sıfırlanır, düğümler yeni derinliğe göre açılır.',
             'Araç çubuğu (showToolbar) tümünü aç / tümünü kapat / JSON kopyala düğmeleridir; her düğümün kendi kopyala düğmesi de vardır. Kopyalama panoya güvenli bağlam ister; izin yoksa sessizce hiçbir şey olmaz.',
-            '60 karakteri aşan string yaprakları önizlemede kırpılır ("…"); yaprağa tıklamak tam değeri açar.'
+            '60 karakteri aşan string yaprakları önizlemede kırpılır ("…"); yaprağa tıklamak tam değeri açar.',
+            "nodeClick HER satırda (yaprak ya da object/array) tıklanınca yayılır — aç/kapa oku ayrı davranır, satırın geneline tıklamak nodeClick'i tetikler.",
+            "copy iki kaynaktan gelir: araç çubuğundaki 'tümünü kopyala' path:'' + kind:'root' + value:normalize edilmiş TÜM veriyle yayılır; düğümün kendi kopyala düğmesi ise o düğümün path/kind/value'suyla yayılır."
         ],
         propNotes: {
             data: 'Nesne/dizi ya da JSON metni; döngüsel referanslar "[Circular]" yaprağına düşer.',
@@ -328,11 +634,16 @@ export const componentKnowledge = {
         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.'
-        ]
+        ],
+        guide: 'translation'
     },
     otpinput: {
         summary: 'Tek haneli kutulardan oluşan tek kullanımlık kod girişi (2–12 hane); yapıştırma kutulara dağılır.',
-        behavior: ['Bütün kutular dolduğunda change’e EK olarak complete olayı yayılır — doğrulama akışını buna bağla.'],
+        behavior: [
+            'Bütün kutular dolduğunda change’e EK olarak complete olayı yayılır — doğrulama akışını buna bağla.',
+            "resend yalnız resendSeconds>0 iken görünen düğmeden gelir ve geri sayım bitmeden tıklanamaz; tetiklenince kendi geri sayımını yeniden başlatır.",
+            "focus/blur GRUP düzeyindedir (checkboxgroup deseniyle aynı): kutular arasında Tab'lamak olay üretmez, yalnız gruba giriş/çıkışta bir kez yayılır."
+        ],
         propNotes: {
             value: 'Birleşik string; ortadaki kutu silinince sonraki haneler sola kayar.',
             digitCount: '2–12 arası kutu sayısı.',
@@ -355,7 +666,10 @@ export const componentKnowledge = {
         }
     },
     progress: {
-        summary: 'Çubuk ya da daire biçiminde ilerleme göstergesi; eşiğe göre renk değiştirir. Olay YAYMAZ.',
+        summary: 'Çubuk ya da daire biçiminde ilerleme göstergesi; eşiğe göre renk değiştirir.',
+        behavior: [
+            "complete yalnız yüzde 100'e İLK ULAŞTIĞINDA (kenar tetiklemesi) bir kez yayılır — her render'da değil; değer 100'ün altına inip yeniden çıkarsa tekrar yayılır. isIndeterminate:true iken hiç yayılmaz (belirsiz modda 'tamamlanma' tanımsızdır)."
+        ],
         propNotes: {
             value: '0..max arası; yüzde kırpılarak hesaplanır.',
             colorMap: '{ "0": "error", "50": "warning", "80": "success" } — yüzdeye eşit/altındaki EN BÜYÜK eşiğin rengi kazanır, yoksa color prop’u.'
@@ -363,7 +677,10 @@ export const componentKnowledge = {
     },
     rating: {
         summary: 'Yıldız (ya da seçilen ikon) ile puanlama girişi.',
-        behavior: ['Mevcut değere yeniden tıklamak puanı 0’a düşürür; allowHalf açıkken yıldızın sol yarısı yarım puan verir.'],
+        behavior: [
+            'Mevcut değere yeniden tıklamak puanı 0’a düşürür; allowHalf açıkken yıldızın sol yarısı yarım puan verir.',
+            "focus/blur yıldız GRUBUNUN tamamı için bir kez yayılır (tek bir role=\"slider\" kapsayıcıda dinlenir), yıldız başına değil."
+        ],
         propNotes: { value: '0..max arası sayı; akıştan gelen değer bu aralığa kırpılır.' }
     },
     result: {
@@ -372,7 +689,10 @@ export const componentKnowledge = {
     },
     slider: {
         summary: 'minValue–maxValue arasında sayısal kaydırıcı (tek değer; iki tutamaklı aralık YOKTUR).',
-        behavior: ['change sürüklerken sürekli, changed yalnız bırakıldığında yayılır — pahalı akışı changed’e bağla.'],
+        behavior: [
+            'change sürüklerken sürekli, changed yalnız bırakıldığında yayılır — pahalı akışı changed’e bağla.',
+            "focus/blur GRUP düzeyindedir (checkboxgroup/otpinput deseni): input'un kendisi değil dıştaki kapsayıcı dinler, tek giriş/çıkışta bir kez yayılır."
+        ],
         propNotes: {
             value: 'Sayı; akıştan gelen değer [minValue, maxValue] aralığına kırpılır (0 geçerli sınırdır).',
             showTicks: 'datalist ile çentik gösterir (yalnız ≤50 çentikte).'
@@ -398,6 +718,18 @@ export const componentKnowledge = {
             'Yan etiket (label) ve description YOKTUR — içerik iki segmentin kendi trueLabel/trueIcon ve falseLabel/falseIcon alanlarıdır.'
         ]
     },
+    'theme-toggle': {
+        summary: 'Uygulamayı açık/koyu temaya çeviren tek düğme; tercih tarayıcıda kalıcıdır. Olay YAYMAZ.',
+        behavior: [
+            "Tıklama görünen modun TERSİNE yazar (viewerMode store'u) — proje varsayılanı koyuysa ilk tıklama açığa alır, kapatıp açmaya değil.",
+            "Seçim localStorage'a yazılır (language-selector'ın dil anahtarıyla aynı kalıcılık deseni) ve sayfa yenilenmeden temaya bağlı bütün stiller güncellenir.",
+            "Studio kanvasında tıklama ÇALIŞMAZ: _editorMode:true iken tıklama hiçbir şey yapmaz — tasarımcı düğmeyi sürüklerken/önizlerken uygulamanın temasını kazayla değiştirmesin diye."
+        ],
+        propNotes: {
+            label: 'Boşsa yalnız ikon basılır; doluysa ikonun yanına metin de eklenir.',
+            isHidden: "Bu komponentin kataloğunda VAR — doğrudan şemaya yazılabilir (bkz. 'notification' propNotes'undaki karşıt örnek)."
+        }
+    },
     timeline: {
         summary: 'Durum renkli işaretçilerle tarihli olay listesi (audit-history’nin serbest veriyle çalışan genel hâli).',
         behavior: [
@@ -413,7 +745,10 @@ export const componentKnowledge = {
     },
     timepicker: {
         summary: 'Bağımsız saat seçici; değer tam olarak HH:mm biçimindedir.',
-        behavior: ['minTime/maxTime dışındaki seçenekler listeden ATILMAZ, pasifleştirilir; minutesStep seçenek adımını belirler.'],
+        behavior: [
+            'minTime/maxTime dışındaki seçenekler listeden ATILMAZ, pasifleştirilir; minutesStep seçenek adımını belirler.',
+            "focus/blur GRUP düzeyindedir: paylaşılan Select kendi focus'unu yayar ama blur'ü yok, o yüzden ikisi de kapsayıcı üstünden köklendi — checkboxgroup/otpinput/slider ile aynı desen."
+        ],
         propNotes: { value: "'HH:mm' — Time doğrulamaları ve formun saat karşılaştırmaları bu biçimi bekler." }
     },
     toast: {
@@ -430,6 +765,115 @@ export const componentKnowledge = {
             position: '9 çapa: top/bottom × left/center/right, center, top-full/bottom-full (tam genişlik bant).',
             actions: '[{ text, flow, keepOpen, showCountdown }] — en çok 2 düğme.'
         }
+    },
+    // — 2026-08-27 eşleme turu: components-new dalıyla gelen 6 yeni komponent.
+    // Kaynak: packages/ng-apps-ui/src/components/<ad>/{schema.ts,*.svelte,*-logic.ts} +
+    // zeyrek-frontend/docs/components/*.md. Bu kuşağın emit deseni ESKİSİNDEN FARKLIDIR:
+    // yük params ile DE gönderilir, akışta event.data.<anahtar> DOLU gelir — tekil sözleşmeler
+    // componentEvents.ts'te, bulgunun kaydı docs/20-komponent-bilgi-katmani.md §10'da.
+    detailview: {
+        summary: 'Tek kaydı etiket/değer ızgarası olarak basar; alan başına format (money/date/badge/link…) ve nokta ayraçlı iç içe alan yolu destekler. OLAY YAYMAZ.',
+        behavior: [
+            "Veri tek yönlü girer: record prop'u {{ }} ifadesiyle (sorgu çıktısı ya da tablonun selectedRow'u) ya da akıştaki setter ile beslenir; olay yolu yoktur — satır tıklaması gerekiyorsa tıklanabilir bir kapsayıcıya sar.",
+            "Boş nesne ({}) 'kayıt yok' sayılır ve emptyText basılır; geçerli kayıt olsa da fields boşsa yine boş durum çizilir. isLoading her dalı ezer ve alan başına iskelet gösterir.",
+            "fields[].field nokta ayraçlı iç içe yol alır (department.title, items.0.name); yol kopuksa hücre '-' basar, patlamaz.",
+            "format yalnız money/pertance/date/datetime'ı biçimler — 'number' ve 'text' ham String basar (84500 yerelleşmez). money her zaman TRY'dir; pertance (yazımı böyle) <1'i oran, >=1'i yüzde sayar; geçersiz tarih ham metne düşer.",
+            "locale boşken uygulama diline CANLI bağlıdır (dil değişince yeniden biçimler); size boş kaydedilir ve 'md' varsayılanı komponentin içinde çözülür.",
+            "columns çalışma anında 1-4 aralığına kırpılır; link formatı ham değeri hem href hem görünen metin yapar (şema doğrulaması yok — 'example.com' göreli URL olur)."
+        ],
+        propNotes: {
+            record: 'Gösterilecek TEK kayıt (nesne); akıştan beslenecekse setter hedefi budur. Boş nesne = boş durum.',
+            fields: "[{ label, field, format, icon }] — field boş satırlar elenir, label boşsa field kullanılır, icon ETİKETİN yanına çizilir.",
+            labelPosition: "top (varsayılan) | left — left'te etiket sütunu minmax(96px, %38) ile ayrılır.",
+            emptyText: "Kayıt ya da geçerli alan yokken basılır; boşsa '—'."
+        }
+    },
+    eventcalendar: {
+        summary: 'Ay/hafta/gün görünümlü etkinlik takvimi. VERİ ÇEKMEZ: satırlar rows prop’una akışla yazılır; taşıma/oluşturmanın kalıcılığı akışın işidir.',
+        behavior: [
+            "TÜM olayların yükü yalnız params ile gider ve self'e YAZILMAZ: akışta event.data.<anahtar> ile okunur (eski komponentlerin self deseninin tersi).",
+            "Veri prop'u bilinçli olarak rows'tur, events DEĞİL — Studio kanvası 'events' adlı prop'u düğümün olay bağlarıyla ezer.",
+            "startField'ı geçersiz/boş satır SESSİZCE atılır; end geçersizse start'a eşitlenir, ters aralık start'a kırpılır; id yoksa event-<index> üretilir.",
+            "Taşıma iyimserdir: eventMove sonrası komponent rows'u DEĞİŞTİRMEZ; akış yeni tarihi uca yazıp rows'u tazeleyince (id:start:end imzası değişince) iyimser katman sıfırlanır — kalıcılaştırılmayan taşıma, veri değiştiği anda geri döner (kanban ile aynı sözleşme).",
+            "monthChange gezinme okları/Bugün ile HER görünümde yayılır (ilk mount'ta yayılmaz) ve month 1-TABANLIDIR — veri tazeleme akışı buna bağlanır.",
+            "isCreatable:true iken ay hücresi tıklaması dateClick YERİNE eventCreate yayar (start=end=o gün, allDay:true); hafta/gün boş slot tıklaması 60 dakikalık saatli eventCreate üretir. isCreatable kapalıyken slot tıklaması hiçbir şey yapmaz.",
+            "Sürükleyerek taşıma yalnız isEditable ile: ay görünümünde gün kayar (saat korunur), hafta/gün kolonunda saat 30 dakikaya yuvarlanır; tüm-gün etkinlik saat KAZANMAZ. Yeniden boyutlandırma (resize) yoktur.",
+            "Süresi >=24 saat ya da 00:00→00:00 olan etkinlik 'tüm gün' sayılır ve saat ızgarası yerine üst şeride çizilir; çok günlü etkinlik ay görünümünde kapladığı HER güne ayrı çip düşer (sürekli bant yok).",
+            "defaultDate ve defaultView yalnız İLK kurulumda okunur — sonradan prop değişse de takvim kımıldamaz.",
+            "Hafta başlangıcı yerele bağlıdır (tr Pazartesi, en Pazar); startHour/endHour saat penceresini belirler, pencereye kısmen taşan blok en az 15 dakikalık yükseklikle çizilir."
+        ],
+        propNotes: {
+            rows: 'Etkinlik satırları; mount/monthChange akışlarının setter hedefi. Alan adları titleField/startField/endField/colorField/idField ile çözülür (nokta ayraçlı iç içe yol çalışır).',
+            colorField: "Geçerli CSS rengi olduğu gibi kullanılır, semantik durum adı tema değişkenine çözülür, tanınmayan değer accent'e düşer. 'info' beyaz temada görünmezdir — ham renk ver.",
+            maxVisibleEvents: 'Ay hücresinde görünen çip sayısı (varsayılan 3); fazlası +n olur.',
+            defaultDate: "Açılış ayı (yyyy-MM-dd; katalog varsayılanı örnek veriyle aynı ay olan '2026-08-01'). YALNIZ ilk kurulumda okunur.",
+            startHour: 'Hafta/gün görünümünün ilk saati (varsayılan 8); endHour en az startHour+1 olacak biçimde kırpılır (varsayılan 18).'
+        }
+    },
+    importwizard: {
+        summary: 'Üç adımlı CSV içe aktarma sihirbazı (dosya → kolon eşleme → önizleme); temiz ve hatalı satırları complete olayıyla akışa AYRI AYRI verir.',
+        behavior: [
+            "İçe aktarmayı komponent YAPMAZ: complete akışı satırları uca kendisi yazar (döngü/bulk adımı) — komponent yalnız ayrıştırır, eşler, doğrular. complete yükü hem self'e yazılır hem event.data ile gelir.",
+            "Kolon eşleme otomatiktir: TR harf katlamalı normalizasyon (ç→c, ı→i…) + önce field, sonra label tam eşleşmesi, sonra içerme; iki alan aynı kolonu isterse İKİSİ de eşlenmemiş kalır ve kullanıcı select ile elle düzeltir.",
+            "required alanları eşlenmeden önizlemeye geçilemez; required değeri boş satır rows'a girmez, errors'a düşer. maxRows aşımı satırı kırpmaz, hata kaydı üretir (0 = sınırsız).",
+            "Ayrıştırma yalnız UTF-8'dir (encoding seçeneği yok); BOM soyulur, tırnak/çift-tırnak kuralları ve tırnak içi ayraç/satır sonu desteklenir. delimiter 'auto' ilk satırdan tahmin eder; tamamen boş satırlar atılır, ilk kalan satır başlıktır.",
+            "Geri düğmesi durumu KORUR (parsed/mapping silinmez); ✕ düğmesi (cancel olayı) her şeyi sıfırlar.",
+            "Değerler her zaman STRING'dir — sayı/tarih dönüşümü akışta yapılır. total temiz satır + hata KAYDI sayısıdır: iki zorunlu alanı boş tek satır total'i iki artırır."
+        ],
+        propNotes: {
+            targetFields: '[{ label, field, required }] — hedef şema; field boş satırlar elenir, otomatik eşleme label/field üzerinden yürür.',
+            maxRows: '0 = sınırsız; aşan TEMİZ satırlar hata kaydına dönüşür.',
+            isLoading: "Gövdeyi soluklaştırır ama düğmeleri kilitlemez; complete akışı sürerken setter ile true yaz."
+        }
+    },
+    kanban: {
+        summary: 'Satırları durum kolonlarında sürüklenebilir kart olarak dizen pano; her taşıma cardMove olayıyla akışa bildirilir, kalıcılık akışın işidir.',
+        behavior: [
+            "cardMove/cardClick yükü BİLİNÇLİ olarak yalnız params ile gider (self'e yazılsa id/from/to çöp prop olur ve tetiklenen render iyimser katmanı aynı karede silerdi): akışta event.data.id / .row / .from / .to ile okunur.",
+            "Taşıma iyimserdir: komponent rows'u DEĞİŞTİRMEZ; cardMove akışı yeni kolonu uca yazıp rows'u tazeler — (id:kolon) imzası değişince iyimser katman sıfırlanır. Kalıcılaştırılmayan taşıma, veri değiştiği anda eski kolonuna döner.",
+            "Kolon eşleşmesi columns[].value ile TAM string eşitliğidir; eşleşmeyen satır ilk kolona değil 'atanmamış' kuyruğuna düşer (kesikli kenarlık; yalnız doluyken çizilir, başlığı unassignedText).",
+            "Kolon içi SIRALAMA yoktur: kartlar rows dizisinin sırasıyla çizilir, aynı kolona bırakma no-op'tur, sıra ne taşınır ne yayılır.",
+            "wipLimit yalnız GÖRSELDİR: aşımda kolon başlığı kırmızılaşır ama bırakma engellenmez; 0/boş = sınırsız.",
+            "Kart şablonu sabittir: başlığın ilk harfi (TR büyük harf) rozet + başlık + alt başlık — resim avatarı, etiket, tarih alanı yoktur. Renk karta sol şerit, kolona üst şerit olarak iner (ham CSS ya da semantik ad).",
+            "Sürükleme yerel HTML5 DnD'dir; klavyeyle taşıma yolu yoktur (Enter yalnız cardClick yayar). isLoading sürüklemeyi de kilitler."
+        ],
+        propNotes: {
+            rows: 'Kart satırları; alan adları columnField/titleField/subtitleField/idField/colorField ile çözülür (nokta ayraçlı iç içe yol çalışır).',
+            columns: '[{ label, value, color, wipLimit }] — value boş kolonlar elenir; value satır eşleşmesinin anahtarıdır.',
+            isDraggable: 'Varsayılan açık; kapatınca pano salt okunur olur.'
+        }
+    },
+    signature: {
+        summary: 'El yazısı imza alanı: çizim pointer ile alınır (fare/dokunma/kalem tek yol), değer PNG data-URL ya da ham SVG string olarak change olayıyla yazılır.',
+        behavior: [
+            "change her tamamlanan ÇİZGİDE (pointer bırakılınca) yayılır, hareket sırasında değil; value hem self.value'ya yazılır (setter) hem event.data.value ile gelir. Temizleme önce change('') sonra clear (veri taşımaz) yayar.",
+            "outputFormat 'png' (varsayılan) base64 data-URL üretir; 'svg' HAM SVG işaretlemesi döner (data-URL DEĞİL) — kaydederken/gömerken ayrımı gözet. PNG üretimi başarısız olursa sessizce SVG metnine düşer.",
+            "Mevcut value yeniden düzenlemeye YÜKLENMEZ: data:image… ya da <svg ile başlayan değer arka planda resim olarak gösterilir, ilk yeni çizgi onu tamamen değiştirir — ekleme/undo yoktur.",
+            "Yeniden boyutlanma çizimi silmez ama mürekkep sol üst köşeye çapalı kalır (ölçeklenmez); bir sonraki çizgi güncel boyutla dışa aktarır.",
+            "Zorunluluk formun validations'ıyla kurulur (şemada isRequired yoktur). Ekran rengi penColor || tema metni, dışa aktarım rengi penColor || #111111 — tema değişkeni dışa aktarıma taşınmaz.",
+            "isDisabled/isReadonly/isViewmode üçü de kilitler; kilitliyken Clear düğmesi hiç çizilmez."
+        ],
+        propNotes: {
+            value: "İmza string'i (PNG data-URL ya da SVG işaretlemesi); boş imza ''dir, null değil.",
+            outputFormat: "'png' | 'svg' — svg dışındaki her değer png sayılır.",
+            penWidth: "En az 1'e kırpılır; geçersiz değer 2'ye düşer."
+        }
+    },
+    stepper: {
+        summary: "Adımlı akış kabı: tabs gibi her adım kendi droppable görünümünü (children) taşır, ileri gidiş canProceed kapısıyla tutulur.",
+        behavior: [
+            "Kapı kuralı: canProceed yalnız false ya da 'false' iken engeller — undefined/''/çözülmemiş şablon dahil geri kalan her şey GEÇİRİR. Güvenilir bağ {{ form1.isValid === true }} biçimidir; çıplak {{ x.value }} ölçümde güvenilmez çıktı.",
+            "Adım tanımındaki canProceed bağı çalışma anında undefined çözülür (frontend CQ-117) — kapıyı ÜST DÜZEY canProceed prop'una bağla, adım tanımına statik değer dışında bir şey yazma.",
+            "stepChange {currentStep, previous} taşır ve currentStep self'e yazılır; validationFail YALNIZ İleri düğmesinden yayılır (engellenen başlık tıklaması sessiz kalır); finish son adımda kapı açıkken yayılır ve adımı DEĞİŞTİRMEZ.",
+            "Başlık tıklaması allowClickNavigation'a bağlıdır: none | backward (varsayılan; yalnız geri) | all. isLinear:true iken ileri sıçramak aradaki HER adımın optional olmasını ister.",
+            "Akıştan adım sürme: setter ile currentStep yaz — değer aralığa kırpılır. Hatalı/başarısız adım görseli yoktur; tek gösterge engellenmişken soluklaşan İleri düğmesidir.",
+            "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: {
+            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.'
+        }
     }
 };
 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.';