@appaflytech/wappa-mcp 0.0.12 → 0.0.13

package/dist/base-components.js

@@ -21,6 +21,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "container-software",
         isMobile: false,
+        usage: "İçerik kapsayıcı: max-width ve padding vererek içeriği ekran ortasında sınırlar. Temel kullanım: size prop'u ile genişlik seçilir (fluid | extended | wide | medium | narrow); children olarak bölüm içeriği (row/column, stack vb.) konur; görsel ayar için className/style kullanılır. Veri bağlama: container'ın kendi metin prop'u yoktur, statik/yapısal bir wrapper'dır; veri bağlama children içindeki metin/görsel node'larında yapılır. Bir array-repeater veya query'ye bağlı child'ları içine alabilir. Tekrarlayıcı bağlamında (üst liste varsa) görünür alanı olmadığı için kendisi repeater ref almaz; satır verisi alt node'lara akar. Örn statik: { \"name\":\"container\", \"props\":{ \"size\":\"medium\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -80,6 +81,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "repeat",
         isMobile: true,
+        usage: "Dizi verisini tekrarlayan döngü bileşeni: tek bir şablon child'ı her veri satırı için klonlayarak liste render eder. Temel kullanım: props.repeater (array key) ile statik dizi verilebilir, AMA dinamik veri için refs.repeater kullanılır; children olarak TEK bir şablon alt-ağaç (örn. bir card/box) konur. TEKRARLAYICI KONTRATI (zorunlu): 1) Liste node'unda veri kaynağı: refs.repeater = { \"type\":\"query\", \"ref\":\"<queryId>\", \"mappings\":[{\"name\":\"title\",\"path\":\"Title\"},{\"name\":\"img\",\"path\":\"CoverUrl\"}] } (type \"raw\"|\"showcase\" de olabilir). 2) Children TEK şablon olmalı; render her satır için deep-clone eder. 3) Satır verisini gösteren HER alt node o alanı repeater ref ile bağlar: başlık için { \"refs\":{ \"value\":{ \"type\":\"repeater\", \"ref\":\"title\" } } }, görsel için { \"refs\":{ \"src\":{ \"type\":\"repeater\", \"ref\":\"img\" } } }. EN SIK HATA: sadece repeater array key / refs.repeater verip child'larda type:\"repeater\" ref'leri eklememek -> satırlar render olur ama veri görünmez. Child'lar MUTLAKA refs.<prop>={type:\"repeater\",ref:\"<alan>\"} kullanmalı.",
         definition: {
             props: [
                 {
@@ -118,6 +120,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "square",
         isMobile: false,
+        usage: "Temel kapsayıcı (View/div): düzen ve gruplama için en yalın wrapper. Temel kullanım: tek prop'ları className (tailwind) ve style (RN style objesi); children olarak herhangi bir alt node alır. Veri bağlama: box'un kendi içerik prop'u yoktur, statik/yapısal bir bileşendir; metin/görsel bağlama daima içindeki child node'larda yapılır (örn. bir text child'a refs.value = { \"type\":\"query\", ... } veya refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı içinde satır kartı olarak kullanıldığında box kendisi ref almaz; alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } ile satır verisine bağlanır. Örn: { \"name\":\"box\", \"props\":{ \"className\":\"p-4 rounded-lg\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -150,6 +153,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "crosshair",
         isMobile: false,
+        usage: "İçeriği yatay ve dikey ortalayan kapsayıcı. Temel kullanım: prop'ları className ve style; children olarak ortalanacak öğeler (genellikle tek bir blok) konur. Veri bağlama: center'ın kendi metin prop'u yoktur; statik/yapısal wrapper olduğu için veri bağlama içindeki text/image child node'larında yapılır (örn. text child'a refs.value = { \"type\":\"page\", \"ref\":\"title\" } veya refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı şablonu içindeyse alt node'lar repeater ref kullanır: refs.value = { \"type\":\"repeater\", \"ref\":\"<alan>\" }. Örn: { \"name\":\"center\", \"props\":{ \"className\":\"min-h-screen\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -182,6 +186,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "align-horizontal-left",
         isMobile: false,
+        usage: "Çocukları yatay sıralayan dizilim kapsayıcısı (flex-row). Temel kullanım: space prop'u ile öğeler arası boşluk (none | xs | sm | md | lg | xl | 2xl | 3xl | 4xl), reversed ile ters sıralama; children olarak yan yana dizilecek node'lar konur; className/style ile özelleştirilir. Veri bağlama: hstack'in kendi içerik prop'u yoktur, yapısal bir dizilim bileşenidir; veri bağlama içindeki child node'larda yapılır (örn. bir text child'a refs.value = { \"type\":\"query\", \"ref\":\"<queryId>\", \"mappings\":[...] }). Tekrarlayıcı satır şablonu olarak da kullanılır; bu durumda alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } ile bağlanır. Örn: { \"name\":\"hstack\", \"props\":{ \"space\":\"md\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -262,6 +267,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "align-vertical-top",
         isMobile: false,
+        usage: "Çocukları dikey sıralayan dizilim kapsayıcısı (flex-column). Temel kullanım: space prop'u ile öğeler arası dikey boşluk (none | xs | sm | md | lg | xl | 2xl | 3xl | 4xl), reversed ile ters sıralama; children olarak alt alta dizilecek node'lar konur; className/style ile özelleştirilir. Veri bağlama: vstack'in kendi içerik prop'u yoktur, yapısal bir dizilim bileşenidir; veri bağlama içindeki text/image child node'larında yapılır (örn. text child'a refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı satır şablonu olarak kullanıldığında alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } ile satır verisine bağlanır. Örn: { \"name\":\"vstack\", \"props\":{ \"space\":\"sm\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -342,6 +348,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "layout-grid",
         isMobile: false,
+        usage: "CSS Grid kapsayıcısı: numColumns ile ızgara düzeni oluşturur. Temel kullanım: numColumns prop'u ile sütun sayısı (örn. 2, 3, 4), gap ile hücre arası boşluk (0 | xs | sm | md | lg | xl); children olarak ızgara hücrelerine yerleşecek node'lar konur. Veri bağlama: grid'in kendi içerik prop'u yoktur; statik kart listesi için children doğrudan yazılır. Dinamik ızgara için grid'in İÇİNE bir array-repeater koyup tekrarlayıcı kontratını orada kurmak gerekir (grid sadece düzeni sağlar). Grid'in kendisi repeater değildir; veri bağlama çocuklarındaki text/image node'larda (type:query/field/repeater) yapılır. Örn: { \"name\":\"grid\", \"props\":{ \"numColumns\":3, \"gap\":\"md\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -411,6 +418,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "mouse-pointer",
         isMobile: true,
+        usage: "Tıklanabilir kapsayıcı: içine konan öğeleri basılabilir alana çevirir. Temel kullanım: onPress ve onLongPress handler (JS) prop'ları ile etkileşim tanımlanır; children olarak tıklanacak içerik (kart, text, icon) konur; className/style ile özelleştirilir. Veri bağlama: pressable'ın görünür metin prop'u yoktur; içerik bağlama child node'larda yapılır. Bir Link veya hedefe yönlendirme için ilgili ref tipleri kullanılabilir (örn. bir child'a refs.href = { \"type\":\"link\", \"ref\":\"<linkId>\" }). Tekrarlayıcı satır şablonunda her satır için tıklanabilir kart olarak kullanılır; alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } ile bağlanır. Örn: { \"name\":\"pressable\", \"props\":{ \"onPress\":\"...\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -453,6 +461,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "align-horizontal-left",
         isMobile: false,
+        usage: "Responsive yatay düzen satırı (HStack tabanlı): genellikle column'ları barındırır ve 12'lik grid sistemini sürer. Temel kullanım: breakpoint nesne prop'ları xl | lg | md | sm | xs ile her ekran için ayrı ayar verilir; her birinin alt prop'ları direction (row | column | row-reverse | column-reverse), align (start | center | end | stretch), justify (start | center | end | between | around | evenly), wrap (nowrap | wrap | wrap-reverse) ve gutter (sütun arası boşluk); children olarak column node'ları konur. Veri bağlama: row yapısal bir düzen bileşenidir, kendi içerik prop'u yoktur; veri bağlama column içindeki text/image node'larında yapılır (type:query/field/repeater). Örn: { \"name\":\"row\", \"props\":{ \"lg\":{ \"justify\":\"between\", \"gutter\":\"md\" } }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -1215,6 +1224,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "dashboard",
         isMobile: false,
+        usage: "Responsive 12'lik grid sütunu (Box): row içinde genişlik kaplar. Temel kullanım: breakpoint nesne prop'ları xl | lg | md | sm | xs ile her ekran için sütun ayarı verilir; her birinin alt prop'u size (1/12 ... 12/12 arası, value 1-12) ile genişlik belirlenir (varsa offset/order da bu nesnelerde tanımlanır); children olarak sütun içeriği konur. Veri bağlama: column yapısal bir kapsayıcıdır, kendi içerik prop'u yoktur; veri bağlama içindeki child text/image node'larında yapılır (örn. refs.value = { \"type\":\"query\", \"ref\":\"<queryId>\", \"mappings\":[...] } veya refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı şablonunda alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } kullanır. Örn: { \"name\":\"column\", \"props\":{ \"lg\":{ \"size\":6 }, \"xs\":{ \"size\":12 } }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -2012,6 +2022,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "dashboard",
         isMobile: false,
+        usage: "Responsive 12'lik grid sütunu (Box): row içinde genişlik kaplar. Temel kullanım: breakpoint nesne prop'ları xl | lg | md | sm | xs ile her ekran için sütun ayarı verilir; her birinin alt prop'u size (1/12 ... 12/12 arası, value 1-12) ile genişlik belirlenir (varsa offset/order da bu nesnelerde tanımlanır); children olarak sütun içeriği konur. Veri bağlama: column yapısal bir kapsayıcıdır, kendi içerik prop'u yoktur; veri bağlama içindeki child text/image node'larında yapılır (örn. refs.value = { \"type\":\"query\", \"ref\":\"<queryId>\", \"mappings\":[...] } veya refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı şablonunda alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } kullanır. Örn: { \"name\":\"column\", \"props\":{ \"lg\":{ \"size\":6 }, \"xs\":{ \"size\":12 } }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -2809,6 +2820,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "dashboard",
         isMobile: false,
+        usage: "Responsive 12'lik grid sütunu (Box): row içinde genişlik kaplar. Temel kullanım: breakpoint nesne prop'ları xl | lg | md | sm | xs ile her ekran için sütun ayarı verilir; her birinin alt prop'u size (1/12 ... 12/12 arası, value 1-12) ile genişlik belirlenir (varsa offset/order da bu nesnelerde tanımlanır); children olarak sütun içeriği konur. Veri bağlama: column yapısal bir kapsayıcıdır, kendi içerik prop'u yoktur; veri bağlama içindeki child text/image node'larında yapılır (örn. refs.value = { \"type\":\"query\", \"ref\":\"<queryId>\", \"mappings\":[...] } veya refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı şablonunda alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } kullanır. Örn: { \"name\":\"column\", \"props\":{ \"lg\":{ \"size\":6 }, \"xs\":{ \"size\":12 } }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -3606,6 +3618,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "dashboard",
         isMobile: false,
+        usage: "Responsive 12'lik grid sütunu (Box): row içinde genişlik kaplar. Temel kullanım: breakpoint nesne prop'ları xl | lg | md | sm | xs ile her ekran için sütun ayarı verilir; her birinin alt prop'u size (1/12 ... 12/12 arası, value 1-12) ile genişlik belirlenir (varsa offset/order da bu nesnelerde tanımlanır); children olarak sütun içeriği konur. Veri bağlama: column yapısal bir kapsayıcıdır, kendi içerik prop'u yoktur; veri bağlama içindeki child text/image node'larında yapılır (örn. refs.value = { \"type\":\"query\", \"ref\":\"<queryId>\", \"mappings\":[...] } veya refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" }). Tekrarlayıcı şablonunda alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } kullanır. Örn: { \"name\":\"column\", \"props\":{ \"lg\":{ \"size\":6 }, \"xs\":{ \"size\":12 } }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -4403,6 +4416,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "highlights",
         isMobile: false,
+        usage: "Sayfa bölümü (<section>), Container ile sarılı: başlıklı bir içerik bloğu oluşturur. Temel kullanım: title (başlık), description (kısa açıklama), anchor (bağlantı/link) prop'ları; Container ayarları grubunda size ile bölüm genişliği (fluid | extended | wide | medium | narrow); children olarak bölüm içeriği konur. Veri bağlama: title ve description refs ile bağlanabilir; uygun Reference tipleri type:\"page\" (örn refs.title = { \"type\":\"page\", \"ref\":\"title\" }), type:\"field\" (meta alanı), type:\"string\" (çok dilli metin) veya type:\"query\". anchor için refs.anchor = { \"type\":\"link\", \"ref\":\"<linkId>\" } kullanılır. Örn: { \"name\":\"section\", \"props\":{ \"size\":\"medium\" }, \"refs\":{ \"title\":{ \"type\":\"page\", \"ref\":\"title\" } }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -4506,6 +4520,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "document",
         isMobile: false,
+        usage: "Bağımsız içerik bölümü (<article>): blog yazıları, haberler gibi tek başına anlamlı içerik için kapsayıcı. Temel kullanım: id (HTML id, sayfa içi bağlantı/anchor için), className ve style prop'ları; children olarak başlık, görsel, gövde metni gibi node'lar konur. Veri bağlama: article'ın kendi içerik prop'u yoktur; veri bağlama içindeki child text/image node'larında yapılır; bir blog/haber detayında genellikle sayfanın meta verisine bağlanır (örn. text child'a refs.value = { \"type\":\"field\", \"ref\":\"<metaAlanı>\" } veya refs.value = { \"type\":\"page\", \"ref\":\"title\" }). Bir query satırının detay kartı olarak tekrarlayıcı içinde kullanılırsa alt node'lar refs.<prop> = { \"type\":\"repeater\", \"ref\":\"<alan>\" } ile bağlanır. Örn: { \"name\":\"article\", \"props\":{ \"id\":\"post-1\" }, \"children\":[ ... ] }.",
         definition: {
             props: [
                 {
@@ -4544,6 +4559,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "home",
         isMobile: false,
+        usage: "Sayfanın ana içerik alanını saran yapısal kapsayıcıdır (<main>), sayfa başına bir adet kullanılır.\nTemel kullanım: id ile sayfa içi anchor verilir; className (tailwind) ve style ile görünüm ayarlanır. Asıl içerik (header, section, listeler vb.) children olarak içine konur; kendisi bir veri prop'u taşımaz.\nVeri bağlama: main'in kendi props'unda bağlanacak metin/görsel alanı yoktur; veriyi alt node'lar (text, image, listeler) kendi refs'leriyle bağlar. Bir tekrarlayıcı (array-repeater/card-list) içinde main'i şablon olarak kullanırsan, alt node'lar satır alanlarını type:\"repeater\" ile çeker. Örn. içindeki bir başlık: { \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"PageTitle\" } } }.",
         definition: {
             props: [
                 {
@@ -4582,6 +4598,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "navigation",
         isMobile: false,
+        usage: "Navigasyon bölümü kapsayıcısıdır (<nav>); menü/link gruplarını barındırır.\nTemel kullanım: ariaLabel ile ekran okuyucu etiketi, id ile anchor, className/style ile görünüm verilir. Link/menü öğeleri children olarak eklenir.\nVeri bağlama: nav'ın doğrudan bir href/menu prop'u yoktur; menüyü genelde içine konan link node'ları taşır. Dinamik menü için içteki bir liste node'unda refs.navigation = { \"type\": \"navigation\", \"ref\": \"<menuId>\" } kullan, link href'i için child node'da refs.href = { \"type\": \"link\", \"ref\": \"<linkId>\" }. Menü öğeleri bir tekrarlayıcı ile üretiliyorsa alt link'ler etiket/href'i type:\"repeater\" ile bağlar: { \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"label\" }, \"href\": { \"type\": \"repeater\", \"ref\": \"url\" } } }.",
         definition: {
             props: [
                 {
@@ -4626,6 +4643,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "sidebar",
         isMobile: false,
+        usage: "Kenar/yan içerik bölümüdür (<aside>); sidebar, ek bilgi, ilgili linkler gibi tamamlayıcı içerik için kullanılır.\nTemel kullanım: id ile anchor, className (tailwind) ve style ile görünüm verilir. İçeriği children olarak eklenir; kendi veri prop'u yoktur.\nVeri bağlama: aside statik bir kapsayıcıdır; metin/görsel alt node'lar veriyi kendi refs'leriyle (type:\"query\", type:\"field\", type:\"showcase\") bağlar. Örn. içine konan ilgili-yazılar listesinde refs.repeater = { \"type\": \"query\", \"ref\": \"relatedPosts\", \"mappings\": [{ \"name\": \"title\", \"path\": \"Title\" }] } ve şablon child'da { \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"title\" } } }.",
         definition: {
             props: [
                 {
@@ -4664,6 +4682,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "header",
         isMobile: false,
+        usage: "Sayfa veya bölüm başlık alanıdır (<header>); logo, başlık, üst menü gibi giriş içerikleri için kullanılır.\nTemel kullanım: id ile anchor, className/style ile görünüm verilir. Başlık metni, logo ve nav öğeleri children olarak içine konur.\nVeri bağlama: header kendi başına veri taşımaz; içindeki text/image node'ları veriyi bağlar. Sayfa başlığını göstermek için içteki başlık node'unda refs.value = { \"type\": \"page\", \"ref\": \"title\" }, logo için refs.src = { \"type\": \"file\", \"ref\": \"<fileId>\" } ya da { \"type\": \"page\", \"ref\": \"image\" } kullan.",
         definition: {
             props: [
                 {
@@ -4702,6 +4721,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "footer",
         isMobile: false,
+        usage: "Sayfa veya bölüm alt alanıdır (<footer>); telif metni, alt menü ve ikincil linkler için kullanılır.\nTemel kullanım: id ile anchor, className/style ile görünüm verilir. İçeriği (metin, link grupları) children olarak eklenir.\nVeri bağlama: footer statik kapsayıcıdır; veriyi alt node'lar bağlar. Çok dilli telif metni için içteki text node'unda refs.value = { \"type\": \"string\", \"ref\": \"<stringId>\" }; alt menü için bir liste node'unda refs.navigation = { \"type\": \"navigation\", \"ref\": \"<menuId>\" } kullan. Tekrarlayan link listesinde child'lar etiket/href'i type:\"repeater\" ile çeker.",
         definition: {
             props: [
                 {
@@ -4740,6 +4760,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "list",
         isMobile: false,
+        usage: "Sırasız liste kapsayıcısıdır (<ul>); madde işaretli liste oluşturur, içine li öğeleri konur.\nTemel kullanım: listStyle (disc/circle/square/none) ile madde stilini, className/style ile görünümü ayarla. Children olarak li node'ları eklenir.\nVeri bağlama: ul statik bir liste işaretleyicisidir; tek başına bir veri kaynağı prop'u (refs.repeater) tanımlamaz, satırlar el ile eklenen li'lerdir. Dinamik/sorgu sürümlü liste için array-repeater veya card-list bileşenini tercih et; orada refs.repeater + child type:\"repeater\" kontratı geçerlidir. ul içindeki tek bir li metnini sabit veriden bağlamak için li'nin içindeki text node'unda refs.value = { \"type\": \"field\", \"ref\": \"<alan>\" } kullanılabilir.",
         definition: {
             props: [
                 {
@@ -4795,6 +4816,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "numbered-list",
         isMobile: false,
+        usage: "Sıralı (numaralı) liste kapsayıcısıdır (<ol>); içine li öğeleri konur.\nTemel kullanım: listStyle (decimal/lower-alpha/upper-alpha/lower-roman/upper-roman/none) ile numara biçimi, start ile başlangıç sayısı, reversed ile azalan sıra, className/style ile görünüm ayarlanır. Children olarak li node'ları eklenir.\nVeri bağlama: ol statik bir liste işaretleyicisidir; kendi başına refs.repeater veri kaynağı tanımlamaz. Dinamik/numaralı veri listesi için array-repeater/card-list bileşeni kullan (refs.repeater + child type:\"repeater\"). ol içindeki li metinleri sabit veriden bağlanacaksa li içi text node'unda refs.value = { \"type\": \"query\", \"ref\": \"<queryId>\" } gibi bir bağlama kullanılabilir.",
         definition: {
             props: [
                 {
@@ -4870,6 +4892,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "list-item",
         isMobile: false,
+        usage: "Liste öğesidir (<li>); ul veya ol içinde tek bir satır/maddeyi temsil eder.\nTemel kullanım: value (number) ile sıralı listede o öğeye atanacak sayıyı, className/style ile görünümü ayarla. Madde içeriği (text, link, image) children olarak eklenir.\nVeri bağlama: li'nin kendi value prop'u sabittir; gösterilecek metin/görsel li içindeki alt node'lar tarafından bağlanır (refs.value = { \"type\": \"field\", \"ref\": \"<alan>\" } veya { \"type\": \"string\", \"ref\": \"<stringId>\" }). li bir array-repeater'ın şablon child'ı olarak kullanılıyorsa, içindeki node'lar satır alanlarını type:\"repeater\" ile çeker: { \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"name\" } } }.",
         definition: {
             props: [
                 {
@@ -4908,6 +4931,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "detail-view",
         isMobile: true,
+        usage: "Sayfa tasarım alanıdır; dinamik içeriğin yerleştiği kök gösterim kabıdır (droppable:false, isMobile).\nTemel kullanım: title ile admin panelinde görünen gösterim başlığını, className/style ile görünümü ayarla. İçerik doğrudan buraya değil, içindeki droppable bileşenlere konur; preview admin'de title metnini gösterir.\nVeri bağlama: view bir veri kabıdır; başlık/etiket alt node'ları veriyi bağlar. Bu sayfanın entity meta alanını göstermek için içteki text node'unda refs.value = { \"type\": \"field\", \"ref\": \"<metaAlanAdı>\" }, sayfa meta'sı için refs.value = { \"type\": \"page\", \"ref\": \"title\" } kullan. Listeler için içine array-repeater/card-list ekleyip refs.repeater kontratını uygula.",
         definition: {
             props: [
                 {
@@ -4950,6 +4974,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "detail-view",
         isMobile: true,
+        usage: "React Native View kapsayıcısıdır (isMobile); mobil ekranlarda içerik gruplamak için temel yapı bloğudur, içine öğe eklenebilir.\nTemel kullanım: title ile admin başlığı, className (tailwind) ve style (RN style objesi, örn. { padding: 10 }) ile düzen/görünüm verilir. Alt öğeler children olarak eklenir; kendi veri prop'u yoktur.\nVeri bağlama: mobile-view statik/yapısal bir kapsayıcıdır; metin ve görseller alt node'lar tarafından bağlanır (type:\"query\", type:\"field\", type:\"showcase\"). Bir tekrarlayıcı (flat-list/section-list/card-list) içinde şablon olarak kullanılırsa, içindeki node'lar satır alanlarını type:\"repeater\" ile çeker: { \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"title\" }, \"src\": { \"type\": \"repeater\", \"ref\": \"img\" } } }.",
         definition: {
             props: [
                 {
@@ -4992,6 +5017,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "code",
         isMobile: true,
+        usage: "Görünmez mantık bileşenidir (element, render etmez); sayfa yaşam döngüsü olaylarında JavaScript çalıştırır.\nTemel kullanım: onMount (sayfa açılınca bir kez), onUnmount (kapanınca temizlik), onInterval (intervalMs ms'de bir; varsayılan 5000), onEffect (deps listesindeki bir dataBus ID değişince + açılışta bir kez) handler prop'larını yaz. deps virgülle ayrılmış data ID listesidir, örn. \"selectedCategory, userId\". Handler içinde data.get(\"id\")/data.set(\"id\", val) ile dataBus'a, form.getValue ile forma erişilir.\nVeri bağlama: script görsel veri prop'u taşımaz; veriyi imperatif olarak kendisi çeker (onMount/onEffect içinde API/sorgu çağrısı) ve data.set ile dataBus'a yazar. Diğer node'lar bu veriyi refs ile (örn. type:\"query\" veya bir text node'unda refs.value) okuyarak gösterir. Periyodik yenileme/websocket benzeri akış için onInterval veya onEffect+deps kullanılır.",
         definition: {
             props: [
                 {
@@ -5042,6 +5068,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "square-dashed",
         isMobile: true,
+        usage: "React Native SafeAreaView kapsayıcısıdır (isMobile); notch, status bar ve home indicator alanlarından kaçınarak içeriği güvenli bölgede tutar.\nTemel kullanım: edges (all | top | bottom | top,bottom) ile hangi kenarların korunacağını, className/style ile görünümü ayarla. Genelde mobil ekranın en dış kabı olarak kullanılır ve içine mobile-view, scroll-view, listeler children olarak konur.\nVeri bağlama: safe-area-view yapısal bir kapsayıcıdır, kendi veri prop'u yoktur; içeriği alt node'lar bağlar. Veri gösterimi gerektiğinde içine eklenen text/image veya bir tekrarlayıcı (flat-list/card-list) node'u refs.repeater = { \"type\": \"query\", \"ref\": \"<queryId>\", \"mappings\": [...] } ve şablon child'larda type:\"repeater\" ref'leri ile veriyi alt ağaca akıtır.",
         definition: {
             props: [
                 {
@@ -5098,6 +5125,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "mouse-scroll",
         isMobile: true,
+        usage: "Kaydırılabilir kapsayıcı (RN ScrollView); içeriği ekrana sığmadığında dikey/yatay scroll sağlar.\nTemel kullanım: yapısal bir wrapper'dır, asıl içerik children olarak verilir. horizontal=true ile yatay kaydırma, showsVerticalScrollIndicator/showsHorizontalScrollIndicator ile scroll çubuğu görünürlüğü, keyboardShouldPersistTaps (never/always/handled) ile klavye davranışı ayarlanır. Düzen className/style ile yapılır.\nVeri bağlama: ScrollView'in kendi prop'ları statik kalır; veri children içindeki alt node'lara bağlanır. ScrollView'i tek başına dinamik liste için kullanma — uzun veri listeleri için flat-list tercih et. İçindeki bir metin/görsel alt node'u sorgu/alan/satır verisine bağlanabilir, örn. bir alt heading: { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Title\" } } } ya da bir sorgu satırına { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }.",
         definition: {
             props: [
                 {
@@ -5165,6 +5193,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "text-cursor-input",
         isMobile: true,
+        usage: "Tek/çok satırlı metin girişi (RN TextInput); form alanları için kullanılır.\nTemel kullanım: element'tir, children almaz. label etiket, placeholder ipucu metni, type (text/password/email/number), variant (outline/underlined/rounded), size (sm/md/lg/xl), helperText/errorText yardımcı ve hata metni, multiline + numberOfLines çok satır, keyboardType, autoCapitalize, secureTextEntry parolayı gizler. componentId verirsen handler'da form.getValue(\"id\") ile değeri okunur.\nVeri bağlama: ön-dolu (varsayılan) değeri veya etiketleri refs ile bağlayabilirsin. Örn. placeholder/label'i sayfa alanına: { \"refs\": { \"placeholder\": { \"type\": \"field\", \"ref\": \"SearchHint\" } } }; çok dilli etiket için { \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"str_email\" } } }. Bir tekrarlayıcı satırı içindeyse alanlar { \"type\": \"repeater\", \"ref\": \"<alan>\" } ile bağlanır.",
         definition: {
             props: [
                 {
@@ -5337,6 +5366,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "list",
         isMobile: true,
+        usage: "Performanslı sanallaştırılmış liste (RN FlatList); dinamik tekrarlayan satırları verimli render eder. Uzun listeler için tercih edilen tekrarlayıcıdır.\nTemel kullanım: children TEK bir şablon alt-ağaçtır (örn. bir kart/satır) ve her veri öğesi için klonlanır. horizontal yatay liste, numColumns grid sütun sayısı, keyExtractor satır key alanı (örn. id), showsVerticalScrollIndicator scroll çubuğu. props.data alanına statik dizi key'i verebilirsin AMA veri bağlama için refs.repeater kullan.\nTEKRARLAYICI KONTRATI (zorunlu): (1) Liste node'u veriyi refs.repeater üzerinde bağlar: { \"refs\": { \"repeater\": { \"type\": \"query\", \"ref\": \"products\", \"mappings\": [ { \"name\": \"title\", \"path\": \"Title\" }, { \"name\": \"img\", \"path\": \"CoverUrl\" } ] } } } (query/raw/showcase olabilir). (2) children TEK şablondur. (3) Satır alanı gösteren HER alt node o alanı repeater ref ile bağlar: başlık node'u { \"refs\": { \"children\": { \"type\": \"repeater\", \"ref\": \"title\" } } }, görsel node'u { \"refs\": { \"src\": { \"type\": \"repeater\", \"ref\": \"img\" } } }. EN SIK HATA: sadece data/repeater vermek ama child'larda type:\"repeater\" ref'leri kurmamak → satırlar boş görünür. Child'lar MUTLAKA refs.<prop>={type:\"repeater\",ref:\"<alan>\"} kullanmalı.",
         definition: {
             props: [
                 {
@@ -5397,6 +5427,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: true,
+        usage: "Başlık bileşeni (H1–H6, xs–5xl boyut); vurgulu metin başlıkları için.\nTemel kullanım: element'tir, başlık metni children prop'una yazılır. nodeType (h1..h6) anlamsal etiketi, size (xs..5xl) görsel boyutu, bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children prop'unu dinamik metne bağla. Sayfanın kendi başlığı için { \"refs\": { \"children\": { \"type\": \"page\", \"ref\": \"title\" } } }; entity/meta alanı için { \"type\": \"field\", \"ref\": \"Name\" }; sorgudan tek değer için { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }; çok dilli için { \"type\": \"string\", \"ref\": \"str_x\" }. Bir tekrarlayıcı (flat-list vb.) satırı içindeyse: { \"refs\": { \"children\": { \"type\": \"repeater\", \"ref\": \"title\" } } }.",
         definition: {
             props: [
                 {
@@ -5551,6 +5582,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: false,
+        usage: "En büyük başlık (<h1>); sayfa başına 1 adet kullanılmalı (SEO/anlamsal).\nTemel kullanım: başlık metni children prop'una yazılır. bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children'ı sayfa başlığına bağlamak en yaygın senaryodur: { \"refs\": { \"children\": { \"type\": \"page\", \"ref\": \"title\" } } }. Ayrıca entity alanı { \"type\": \"field\", \"ref\": \"Title\" } veya sorgu { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] } ile bağlanabilir. Tekrarlayıcı satırı içindeyse { \"type\": \"repeater\", \"ref\": \"<alan>\" } kullan.",
         definition: {
             props: [
                 {
@@ -5631,6 +5663,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: false,
+        usage: "İkincil başlık (<h2>); bölüm başlıkları için.\nTemel kullanım: başlık metni children prop'una yazılır. bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children dinamik metne bağlanabilir. Örn. entity alanı: { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"SectionTitle\" } } }; çok dilli metin: { \"type\": \"string\", \"ref\": \"str_section\" }; sorgu sonucu: { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Tekrarlayıcı satırında: { \"type\": \"repeater\", \"ref\": \"<alan>\" }.",
         definition: {
             props: [
                 {
@@ -5711,6 +5744,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: false,
+        usage: "Üçüncül başlık (<h3>); alt bölüm başlıkları için.\nTemel kullanım: başlık metni children prop'una yazılır. bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children dinamik metne bağlanabilir. Örn. { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Subtitle\" } } } veya sorgu { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Bir flat-list/tekrarlayıcı satırı içindeyse: { \"refs\": { \"children\": { \"type\": \"repeater\", \"ref\": \"title\" } } }.",
         definition: {
             props: [
                 {
@@ -5791,6 +5825,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: false,
+        usage: "Dördüncül başlık (<h4>); küçük başlıklar için.\nTemel kullanım: başlık metni children prop'una yazılır. bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children dinamik metne bağlanabilir. Örn. entity alanı { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Label\" } } }, çok dilli { \"type\": \"string\", \"ref\": \"str_x\" } veya sorgu { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Tekrarlayıcı satırında: { \"type\": \"repeater\", \"ref\": \"<alan>\" }.",
         definition: {
             props: [
                 {
@@ -5871,6 +5906,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: false,
+        usage: "Beşincil başlık (<h5>); ince hiyerarşi başlıkları için.\nTemel kullanım: başlık metni children prop'una yazılır. bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children dinamik metne bağlanabilir. Örn. { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Caption\" } } } veya sorgu { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Tekrarlayıcı satırında: { \"refs\": { \"children\": { \"type\": \"repeater\", \"ref\": \"<alan>\" } } }.",
         definition: {
             props: [
                 {
@@ -5951,6 +5987,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "app-switcher",
         isMobile: false,
+        usage: "Altıncıl başlık (<h6>); en küçük/anlamsal alt başlık için.\nTemel kullanım: başlık metni children prop'una yazılır. bold kalın, isTruncated/numberOfLines taşan metni keser, align (left/center/right/justify) hizalar.\nVeri bağlama: children dinamik metne bağlanabilir. Örn. entity alanı { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Note\" } } }, çok dilli { \"type\": \"string\", \"ref\": \"str_x\" } veya sorgu { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Tekrarlayıcı satırında: { \"type\": \"repeater\", \"ref\": \"<alan>\" }.",
         definition: {
             props: [
                 {
@@ -6031,6 +6068,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "text-inline",
         isMobile: false,
+        usage: "İnline metin sarmalayıcı (<span>); paragraf içi vurgulama/biçimlendirme için.\nTemel kullanım: metin children prop'una yazılır (ayrıca alt node'lar da sarılabilir, droppable). bold kalın, italic italik, underline altı çizili, strikethrough üstü çizili biçimlendirme anahtarlarıdır.\nVeri bağlama: children'ı dinamik metne bağla. Örn. entity alanı { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Author\" } } }; çok dilli { \"type\": \"string\", \"ref\": \"str_x\" }; sorgudan tek değer { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Bir tekrarlayıcı satırı içindeyse { \"refs\": { \"children\": { \"type\": \"repeater\", \"ref\": \"<alan>\" } } } kullan.",
         definition: {
             props: [
                 {
@@ -6092,6 +6130,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "text-bold",
         isMobile: false,
+        usage: "Kalın / önemli metin (<strong>); anlamsal vurgu için inline wrapper.\nTemel kullanım: kendi metin prop'u yoktur; vurgulanacak içerik children olarak verilir (droppable). Genelde içine bir metin node'u (örn. span ya da düz metin) konur. Stil className/style ile özelleştirilir.\nVeri bağlama: strong'un kendi prop'ları statiktir; dinamik metin, içine konan alt metin node'unun children prop'una bağlanır. Örn. iç metin node'u: { \"refs\": { \"children\": { \"type\": \"field\", \"ref\": \"Price\" } } } veya { \"type\": \"query\", \"ref\": \"q1\", \"mappings\": [...] }. Tekrarlayıcı satırında iç node { \"type\": \"repeater\", \"ref\": \"<alan>\" } kullanır.",
         definition: {
             props: [
                 {
@@ -6124,6 +6163,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "text-italic",
         isMobile: false,
+        usage: "İtalik/vurgulu metin sarmalayıcısıdır (<em>); type:\"wrapper\", droppable.\nTemel kullanım: Görsel metni children olarak alt node’lara koyarsın (genelde bir text/code child). Stil için className ve style props. Kendi metin prop’u yoktur; vurgulanacak içerik child’dadır.\nVeri bağlama: Doğrudan bağlanan metin prop’u yoktur; dinamik metni içteki text child’ında bağla. Örn. child text: { refs: { children: { type: \"field\", ref: \"OzetMetin\" } } } ya da sorgu satırı içinde { refs: { children: { type: \"repeater\", ref: \"title\" } } }. className/style statik kalır.",
         definition: {
             props: [
                 {
@@ -6156,6 +6196,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "quotes",
         isMobile: false,
+        usage: "Uzun alıntı bloğudur (<blockquote>); type:\"wrapper\", droppable.\nTemel kullanım: Alıntı metnini children olarak alt node’lara (örn. text) koyarsın. cite props alıntının kaynak URL’sini tutar; className/style ile biçimlendirilir.\nVeri bağlama: cite prop’unu link/field/page ile bağlayabilirsin: { refs: { cite: { type: \"link\", ref: \"kaynakLink\" } } } veya { refs: { cite: { type: \"field\", ref: \"KaynakUrl\" } } }. Alıntı metnini içteki text child’ında bağla, örn. { refs: { children: { type: \"field\", ref: \"AlintiMetni\" } } }; tekrarlayıcı içinde child’da { type: \"repeater\", ref: \"alinti\" } kullan.",
         definition: {
             props: [
                 {
@@ -6194,6 +6235,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "code",
         isMobile: false,
+        usage: "Önceden biçimlendirilmiş metin bloğudur (<pre>), boşluk ve satır sonlarını korur; type:\"wrapper\", droppable.\nTemel kullanım: İçeriği children olarak alt node’lara (genelde bir code/text) koyarsın. className/style ile görünüm ayarlanır; kendi içerik prop’u yoktur.\nVeri bağlama: Doğrudan metin prop’u olmadığından dinamik içeriği içteki text/code child’ında bağla. Örn. child code: { refs: { children: { type: \"field\", ref: \"KodOrnegi\" } } } veya sorgu satırında { refs: { children: { type: \"repeater\", ref: \"snippet\" } } }.",
         definition: {
             props: [
                 {
@@ -6226,6 +6268,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "code-inline",
         isMobile: false,
+        usage: "Kod parçası bileşenidir (<code>); type:\"element\", droppable değil. block=true ise <pre><code> olarak render edilir.\nTemel kullanım: Kod metnini children (long-text) prop’una yazarsın. block (switch) inline/blok görünümü belirler; className/style ile biçimlendirilir.\nVeri bağlama: children prop’unu field/query/repeater ile bağla. Örn. statik sayfa alanı: { refs: { children: { type: \"field\", ref: \"ApiOrnek\" } } }; sorgudan: { refs: { children: { type: \"query\", ref: \"snippetQuery\", mappings: [{ name: \"code\", path: \"Body\" }] } } }; tekrarlayıcı satırında: { refs: { children: { type: \"repeater\", ref: \"code\" } } }.",
         definition: {
             props: [
                 {
@@ -6273,6 +6316,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "calendar",
         isMobile: false,
+        usage: "SEO dostu, makine okunabilir tarih/saat elementidir (<time>); type:\"element\", droppable değil.\nTemel kullanım: Görünen metni children (text) prop’una, makine okunabilir ISO 8601 değeri dateTime prop’una (örn. \"2024-01-15T10:30:00\") yazarsın. className/style ile biçimlendirilir.\nVeri bağlama: Hem children hem dateTime field/query/repeater ile bağlanabilir. Örn. { refs: { children: { type: \"field\", ref: \"YayinTarihiMetin\" }, dateTime: { type: \"field\", ref: \"YayinTarihiISO\" } } }. Sorgu listesi içinde satır başına: { refs: { children: { type: \"repeater\", ref: \"dateLabel\" }, dateTime: { type: \"repeater\", ref: \"dateIso\" } } }.",
         definition: {
             props: [
                 {
@@ -6320,6 +6364,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "table",
         isMobile: true,
+        usage: "Temel metin bileşenidir; type:\"element\", mobil uyumlu (isMobile: true).\nTemel kullanım: Metni children (long-text) prop’una yazarsın. size (2xs–6xl), bold, italic switch’leri, isTruncated ve numberOfLines (line-clamp) ile görünüm; className/style ile biçim ayarlanır.\nVeri bağlama: En sık children bağlanır; field/page/query/string/repeater uygundur. Örn. sayfa meta: { refs: { children: { type: \"page\", ref: \"title\" } } }; entity alanı: { refs: { children: { type: \"field\", ref: \"Aciklama\" } } }; çok dilli: { type: \"string\", ref: \"hosgeldin\" }. Bir tekrarlayıcı (array-repeater/card-list vb.) şablonu içinde satır verisini göstermek için MUTLAKA { refs: { children: { type: \"repeater\", ref: \"title\" } } } kullan (ref, listenin refs.repeater mappings adıdır).",
         definition: {
             props: [
                 {
@@ -6432,6 +6477,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "component",
         isMobile: false,
+        usage: "Ham HTML / rich-text editör çıktısını render eden alandır; type:\"element\", droppable değil.\nTemel kullanım: HTML içeriğini content (editor) prop’una koyarsın. className/style ile dış sarmalayıcı biçimlenir; child beklemez.\nVeri bağlama: content prop’unu field/query/string/raw ile bağla. Örn. CMS alanından: { refs: { content: { type: \"field\", ref: \"GovdeHtml\" } } }; sorgudan: { refs: { content: { type: \"query\", ref: \"makaleQuery\", mappings: [{ name: \"content\", path: \"BodyHtml\" }] } } }; tekrarlayıcı içinde: { refs: { content: { type: \"repeater\", ref: \"body\" } } }.",
         definition: {
             props: [
                 {
@@ -6472,7 +6518,8 @@ export const BASE_COMPONENTS = [
         type: "element",
         droppable: false,
         icon: "shapes",
-        isMobile: false,
+        isMobile: true,
+        usage: "Lucide ikon bileşenidir; type:\"element\", droppable değil.\nTemel kullanım: İkon adını as prop’una verirsin (örn. \"HomeIcon\", \"UserIcon\", \"SearchIcon\"). size (2xs–2xl) boyutu, className/style rengi ve düzeni belirler.\nVeri bağlama: as prop’u dinamik ikon adı için field/query/repeater ile bağlanabilir. Örn. { refs: { as: { type: \"field\", ref: \"IkonAdi\" } } }. Liste şablonu içinde satıra göre ikon: { refs: { as: { type: \"repeater\", ref: \"icon\" } } } (değer geçerli bir Lucide ikon adı olmalı). Sabit ikonlarda as’i props’ta statik bırak.",
         definition: {
             props: [
                 {
@@ -6550,6 +6597,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "image",
         isMobile: true,
+        usage: "Görsel bileşenidir; type:\"element\", mobil uyumlu (isMobile: true).\nTemel kullanım: Görsel kaynağını source (image) prop’una verirsin; erişilebilirlik/SEO için alt (text), boyut için size (2xs–2xl/full/none), resizeMode (cover/contain/stretch/center) ve rounded ile yuvarlaklık ayarlanır.\nVeri bağlama: source en sık bağlanan prop’tur; file/field/page/query/repeater uygundur. Örn. dosya: { refs: { source: { type: \"file\", ref: \"kapakDosya\" } } }; sayfa görseli: { type: \"page\", ref: \"image\" }; entity alanı: { refs: { source: { type: \"field\", ref: \"GorselUrl\" }, alt: { type: \"field\", ref: \"GorselAlt\" } } }. Bir tekrarlayıcı (card-list/carousel) şablonunda satır görseli için: { refs: { source: { type: \"repeater\", ref: \"img\" } } } (ref, listenin refs.repeater mappings adıyla eşleşir, örn. mappings:[{name:\"img\",path:\"CoverUrl\"}]).",
         definition: {
             props: [
                 {
@@ -6702,6 +6750,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "vid-play",
         isMobile: true,
+        usage: "Video oynatıcı bileşenidir; type:\"element\", mobil uyumlu (isMobile: true).\nTemel kullanım: Video kaynağını source (video) prop’una verirsin; autoPlay, muted, loop, controls switch’leri oynatma davranışını belirler; className/style ile boyutlandırılır.\nVeri bağlama: source dinamik video için file/field/query/repeater ile bağlanır. Örn. { refs: { source: { type: \"file\", ref: \"tanitimVideo\" } } } veya { refs: { source: { type: \"field\", ref: \"VideoUrl\" } } }. Liste şablonu içinde satır videosu: { refs: { source: { type: \"repeater\", ref: \"video\" } } }. autoPlay/muted/loop/controls genelde statik props’ta kalır.",
         definition: {
             props: [
                 {
@@ -6763,6 +6812,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "vid-full-screen-on",
         isMobile: false,
+        usage: "Harici içeriği gömen alandır (yalnızca web); type:\"element\", droppable değil.\nTemel kullanım: Gömülecek URL’yi children (long-text) prop’una, erişilebilirlik için title prop’una yazarsın. className/style ile boyutlandırılır.\nVeri bağlama: children (URL) ve title field/link/query/repeater ile bağlanabilir. Örn. { refs: { children: { type: \"field\", ref: \"GomuluUrl\" } } } veya link href’ten: { refs: { children: { type: \"link\", ref: \"haritaLink\" } } }. Tekrarlayıcı satırında: { refs: { children: { type: \"repeater\", ref: \"embedUrl\" } } }.",
         definition: {
             props: [
                 {
@@ -6809,6 +6859,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "archive",
         isMobile: true,
+        usage: "Buton bileşenidir (gömülü ButtonText ile); type:\"element\", mobil uyumlu (isMobile: true).\nTemel kullanım: Buton metnini children (text) prop’una yazarsın; link/yönlendirme için anchor (link) prop’u; görünüm için action (primary/secondary/positive/negative/default), variant (solid/outline/link), size (xs–xl), isDisabled. Etkileşim için onPress ve onLongPress handler’ları (JS).\nVeri bağlama: children metnini field/query/string/repeater, anchor’ı link/field ile bağla. Örn. { refs: { children: { type: \"string\", ref: \"detayGor\" }, anchor: { type: \"link\", ref: \"urunLink\" } } }. Bir liste şablonu içinde satır başına farklı hedef için: { refs: { children: { type: \"repeater\", ref: \"label\" }, anchor: { type: \"repeater\", ref: \"href\" } } } (ref’ler listenin refs.repeater mappings adlarıdır). onPress/onLongPress handler kodu olarak statik kalır.",
         definition: {
             props: [
                 {
@@ -6943,6 +6994,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "link",
         isMobile: false,
+        usage: "İçine öğe sarmalayan, tıklanınca bir hedefe giden bağlantı (droppable: children bekler).\nTemel kullanım: `props.source` bağlantı hedefi (link tipi), `props.isExternal` yeni sekmede açar, `props.className`/`props.style` görünüm. children olarak text, image, box gibi öğeler konur ve tıklanabilir alanı oluşturur.\nVeri bağlama: `source` prop'u href'i `refs.source = { type:\"link\", ref:\"<linkId>\" }` ile bir Link kaydına bağlanır; sayfa içi/dinamik gidiş için `{ type:\"page\", ref:\"path\" }` ya da `{ type:\"field\", ref:\"<metaAlanı>\" }` de uygundur. Bir tekrarlayıcı (card-list/array-repeater) içindeyse satır URL'sini `refs.source = { type:\"repeater\", ref:\"href\" }` ile o satırın alanına bağla.\nÖrnek: { \"refs\": { \"source\": { \"type\": \"link\", \"ref\": \"detay-link\" } }, \"props\": { \"isExternal\": true } }",
         definition: {
             props: [
                 {
@@ -6989,6 +7041,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "plus-circle",
         isMobile: false,
+        usage: "Sayfanın köşesinde sabit duran, ikon ve/veya etiketli yüzen eylem butonu (FabIcon + FabLabel).\nTemel kullanım: `props.label` etiket metni (boşsa sadece ikon), `props.iconName` Lucide ikon adı (örn. PlusIcon), `props.size` sm|md|lg, `props.placement` bottom left|bottom right|top left|top right, `props.isDisabled` devre dışı. Eylem için genelde `props.componentId` verilir ve handler'da context.ui.open(\"id\") ile tetiklenir. Children beklemez.\nVeri bağlama: `label` metni `refs.label = { type:\"field\", ref:\"<metaAlanı>\" }` veya çok dilli için `{ type:\"string\", ref:\"<stringId>\" }` ile bağlanabilir; sabit metin için `{ type:\"static\", label:\"Ekle\" }`.\nÖrnek: { \"props\": { \"iconName\": \"PlusIcon\", \"placement\": \"bottom right\", \"componentId\": \"yeni-kayit\" }, \"refs\": { \"label\": { \"type\": \"static\", \"label\": \"Yeni\" } } }",
         definition: {
             props: [
                 {
@@ -7084,6 +7137,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "issue",
         isMobile: false,
+        usage: "Başlık, alt başlık, açıklama, görsel ve link içeren tekil kart bileşeni.\nTemel kullanım: `props.title`, `props.subtitle`, `props.description`, `props.image` (görsel), `props.anchor` (link), `props.size` sm|md|lg, `props.variant` ghost|outline|filled|elevated. Children beklemez; içeriği prop'lar üzerinden verilir.\nVeri bağlama: tüm metin/görsel/link prop'ları refs ile bağlanabilir — `refs.title`/`refs.description` için `{ type:\"field\", ref:\"<metaAlanı>\" }` veya `{ type:\"query\", ref:\"<queryId>\", mappings:[...] }`, `refs.image` için `{ type:\"file\", ref:\"<fileId>\" }`, `refs.anchor` için `{ type:\"link\", ref:\"<linkId>\" }`. Tek bir kayıt göstermek için tek satırlık query mapping kullanılır.\nÖnemli: Bir card-list/array-repeater'ın şablon çocuğu olarak kullanıldığında her prop SATIR alanına bağlanır: `refs.title = { type:\"repeater\", ref:\"baslik\" }`, `refs.image = { type:\"repeater\", ref:\"gorsel\" }`, `refs.anchor = { type:\"repeater\", ref:\"link\" }`.\nÖrnek: { \"refs\": { \"title\": { \"type\": \"field\", \"ref\": \"Title\" }, \"image\": { \"type\": \"file\", \"ref\": \"CoverFileId\" } }, \"props\": { \"variant\": \"elevated\" } }",
         definition: {
             props: [
                 {
@@ -7187,6 +7241,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "issues",
         isMobile: false,
+        usage: "Grid düzeninde çoklu kart gösteren TEKRARLAYICI liste bileşeni; her satır için bir kart render eder.\nTemel kullanım: Statik mod için `props.cards` bir dizidir; her eleman { title, subtitle, description, image, anchor, size, variant } alanlarını taşır. Grid sütun genişliği responsive `xl`/lg/md... gruplarındaki `size` (1/12..12/12) ile ayarlanır.\nDinamik veri (TEKRARLAYICI KONTRATI):\n1) Veri kaynağını `refs.repeater` ile bağla: `refs.repeater = { type:\"query\", ref:\"<queryId>\", mappings:[{name:\"title\",path:\"Title\"},{name:\"img\",path:\"CoverUrl\"},{name:\"link\",path:\"Slug\"}] }` (raw/showcase de olabilir).\n2) children, her satır için klonlanacak TEK bir şablon kart alt-ağacıdır.\n3) Şablon kartın her görünür alanı satıra bağlanmalı: kartta `refs.title = { type:\"repeater\", ref:\"title\" }`, `refs.image = { type:\"repeater\", ref:\"img\" }`, `refs.anchor = { type:\"repeater\", ref:\"link\" }`.\nEN SIK HATA: sadece `props.cards`/`repeater` vermek ama `refs.repeater`'ı VE çocuklarda `type:\"repeater\"` ref'lerini kurmamak → kartlar çıkar ama veri boş görünür. Çocuklar MUTLAKA `refs.<prop> = { type:\"repeater\", ref:\"<alan>\" }` kullanmalı.\nÖrnek: { \"refs\": { \"repeater\": { \"type\": \"query\", \"ref\": \"urunler\", \"mappings\": [ { \"name\": \"title\", \"path\": \"Name\" }, { \"name\": \"img\", \"path\": \"Image\" } ] } }, \"children\": [ { \"name\": \"card\", \"refs\": { \"title\": { \"type\": \"repeater\", \"ref\": \"title\" }, \"image\": { \"type\": \"repeater\", \"ref\": \"img\" } } } ] }",
         definition: {
             props: [
                 {
@@ -8073,6 +8128,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "user-avatar-circle",
         isMobile: false,
+        usage: "Profil resmi bileşeni (Avatar + AvatarImage + AvatarFallbackText); görsel yoksa isimden baş harfleri gösterir.\nTemel kullanım: `props.source` profil görseli, `props.name` görsel yoksa baş harflerin alınacağı isim, `props.size` xs|sm|md|lg|xl|2xl, `props.showBadge` online rozetini (AvatarBadge) açar. Children beklemez.\nVeri bağlama: `source` görselini `refs.source = { type:\"file\", ref:\"<fileId>\" }`, `name` metnini `refs.name = { type:\"field\", ref:\"<metaAlanı>\" }` veya `{ type:\"query\", ref:\"<queryId>\", mappings:[...] }` ile bağla. Bir kullanıcı listesinin (array-repeater) satır şablonundaysa: `refs.source = { type:\"repeater\", ref:\"avatar\" }`, `refs.name = { type:\"repeater\", ref:\"adSoyad\" }`.\nÖrnek: { \"refs\": { \"source\": { \"type\": \"file\", \"ref\": \"UserPhotoId\" }, \"name\": { \"type\": \"field\", \"ref\": \"FullName\" } }, \"props\": { \"size\": \"lg\", \"showBadge\": true } }",
         definition: {
             props: [
                 {
@@ -8156,6 +8212,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "label",
         isMobile: true,
+        usage: "Kısa durum/etiket rozeti (Badge + BadgeText).\nTemel kullanım: `props.text` etiket metni, `props.action` durum rengi info|success|warning|error|muted, `props.variant` solid|outline, `props.size` sm|md|lg. Children beklemez.\nVeri bağlama: `text` metnini `refs.text = { type:\"field\", ref:\"<metaAlanı>\" }`, `{ type:\"query\", ref:\"<queryId>\", mappings:[...] }` veya çok dilli `{ type:\"string\", ref:\"<stringId>\" }` ile bağla. Durum rengini de dinamik yapmak için `refs.action = { type:\"field\", ref:\"StatusColor\" }` kullanılabilir. Bir tablo/liste satırındaysa: `refs.text = { type:\"repeater\", ref:\"durum\" }`.\nÖrnek: { \"refs\": { \"text\": { \"type\": \"field\", \"ref\": \"Status\" } }, \"props\": { \"action\": \"success\", \"variant\": \"solid\" } }",
         definition: {
             props: [
                 {
@@ -8258,6 +8315,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "subtract",
         isMobile: false,
+        usage: "Yatay veya dikey ayırıcı çizgi; yapısal/dekoratif bir öğe.\nTemel kullanım: `props.orientation` horizontal|vertical, görünüm için `props.className`/`props.style`. Children beklemez ve genelde veri bağlamaya ihtiyaç duymaz.\nVeri bağlama: nadiren gerekir; koşullu/dinamik bir değere ihtiyaç olursa `orientation` veya `className` `refs` ile (örn. `{ type:\"field\", ref:\"<metaAlanı>\" }`) bağlanabilir. Bir tekrarlayıcı içinde satırlar arası ayırıcı olarak şablon ağaca statik konabilir.\nÖrnek: { \"props\": { \"orientation\": \"horizontal\", \"className\": \"my-4\" } }",
         definition: {
             props: [
                 {
@@ -8305,6 +8363,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "table",
         isMobile: false,
+        usage: "Sütunlu tablo bileşeni (TableHeader, TableBody, TableRow, TableHead, TableData); satırları bir veri dizisinden üretir.\nTemel kullanım: `props.columns` bir dizidir; her sütun { header (başlık), key (veri nesnesinden değerin alınacağı anahtar) } taşır. `props.dataKey` satırların okunacağı array key adıdır. `props.showCaption` + `props.caption` alt açıklama (TableCaption) gösterir. Children beklemez; satır/hücre yapısını columns ve veri belirler.\nVeri bağlama: Veri kaynağını `refs.dataKey = { type:\"query\", ref:\"<queryId>\", mappings:[{name:\"ad\",path:\"Name\"},{name:\"fiyat\",path:\"Price\"}] }` (veya raw/showcase) ile bağla; ardından her sütunun `key` alanı bu mapping adlarıyla (ad, fiyat) eşleşmeli. Statik veri için `props.dataKey` context/sayfa dizisi olabilir.\nÖrnek: { \"refs\": { \"dataKey\": { \"type\": \"query\", \"ref\": \"siparisler\", \"mappings\": [ { \"name\": \"no\", \"path\": \"OrderNo\" }, { \"name\": \"tutar\", \"path\": \"Total\" } ] } }, \"props\": { \"columns\": [ { \"header\": \"Sipariş\", \"key\": \"no\" }, { \"header\": \"Tutar\", \"key\": \"tutar\" } ] } }",
         definition: {
             props: [
                 {
@@ -8371,6 +8430,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "loading",
         isMobile: true,
+        usage: "Veri yüklenirken gösterilen iskelet/placeholder animasyonu (Skeleton / SkeletonText).\nTemel kullanım: `props.variant` rounded|sharp|circular, `props.speed` animasyon süresi (saniye, varsayılan 2). Metin iskeleti için `props.isText` açılır ve `props.lines` ile SkeletonText satır sayısı belirlenir. Children beklemez; gerçek içerik gelene kadar yer tutucu olarak kullanılır.\nVeri bağlama: genelde statik bir yer tutucudur ve veri bağlamaz; satır sayısını dinamik yapmak gerekirse `refs.lines = { type:\"field\", ref:\"<metaAlanı>\" }` kullanılabilir. Yükleme durumuna göre gösterim sayfa/handler mantığıyla yönetilir.\nÖrnek: { \"props\": { \"isText\": true, \"lines\": 3, \"variant\": \"rounded\" } }",
         definition: {
             props: [
                 {
@@ -8440,6 +8500,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "refresh",
         isMobile: true,
+        usage: "Basit yükleniyor dönen göstergesi.\nTemel kullanım: `props.size` small|large, `props.color` renk için className token (örn. text-primary, text-error), `props.className`/`props.style`. Children beklemez ve veri bağlamaz.\nVeri bağlama: statik bir yükleme göstergesidir; normalde refs gerekmez. İstenirse `color`/`className` `refs` ile (`{ type:\"field\", ref:\"<metaAlanı>\" }`) dinamik yapılabilir; görünürlük yükleme durumuyla sayfa mantığında kontrol edilir.\nÖrnek: { \"props\": { \"size\": \"large\", \"color\": \"text-primary\" } }",
         definition: {
             props: [
                 {
@@ -8493,6 +8554,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "warning",
         isMobile: false,
+        usage: "Sayfa içi uyarı/bilgi mesajı kutusu (Alert + AlertIcon + AlertText).\nTemel kullanım: `props.text` mesaj metni, `props.action` durum tipi info|success|warning|error|muted, `props.variant` solid|outline, `props.showIcon` ikonu açar; AlertIcon grubundaki `props.iconName` ile özel Lucide ikon verilebilir (boşsa duruma göre varsayılan). Children beklemez.\nVeri bağlama: `text` metnini `refs.text = { type:\"field\", ref:\"<metaAlanı>\" }`, `{ type:\"query\", ref:\"<queryId>\", mappings:[...] }` veya çok dilli `{ type:\"string\", ref:\"<stringId>\" }` ile bağla. Durumu dinamikleştirmek için `refs.action = { type:\"field\", ref:\"AlertType\" }` kullanılabilir.\nÖrnek: { \"refs\": { \"text\": { \"type\": \"field\", \"ref\": \"WarningMessage\" } }, \"props\": { \"action\": \"warning\", \"showIcon\": true } }",
         definition: {
             props: [
                 {
@@ -8594,6 +8656,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "graph-bar",
         isMobile: true,
+        usage: "0-100 arası değer gösteren ilerleme çubuğu (Progress + ProgressFilledTrack).\nTemel kullanım: `props.value` ilerleme (0-100), `props.size` xs|sm|md|lg|xl, `props.fillColor` dolgu rengi, `props.trackColor` arka plan rengi, `props.showLabel` etiketi açar, `props.label` özel etiket metni (boşsa yüzde gösterilir). Children beklemez.\nVeri bağlama: `value` sayısını `refs.value = { type:\"field\", ref:\"<metaAlanı>\" }` veya `{ type:\"query\", ref:\"<queryId>\", mappings:[{name:\"oran\",path:\"Percent\"}] }` ile bağla; özel etiketi `refs.label = { type:\"field\", ref:\"<metaAlanı>\" }` ile dinamik yap. Bir liste satırındaysa: `refs.value = { type:\"repeater\", ref:\"yuzde\" }`.\nÖrnek: { \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"CompletionRate\" } }, \"props\": { \"size\": \"md\", \"showLabel\": true } }",
         definition: {
             props: [
                 {
@@ -8684,6 +8747,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "notification",
         isMobile: true,
+        usage: "Geçici bildirim mesajı gösterir (başlık + açıklama, durum tipi ve konum desteğiyle).\nTemel kullanım: props.title (ToastTitle) ve props.description (ToastDescription) metinleri; props.action ile durum tipi (info/success/warning/error/muted), props.variant (solid/outline), props.placement (top, top right, bottom left vb.), props.duration (ms; 0 = manuel kapatma). Genelde bir handler içinde context.ui ile tetiklenir; props.componentId benzersiz kimlik olarak verilir.\nVeri bağlama: title ve description dinamik gösterilebilir. type:\"field\" ile mevcut sayfanın meta alanına, type:\"query\" ile bir sorgu sonucuna (mappings ile), type:\"string\" ile çok dilli metne, type:\"static\" ile sabit değere bağlanır.\nÖrnek: { \"refs\": { \"title\": { \"type\": \"field\", \"ref\": \"UserName\" }, \"description\": { \"type\": \"static\", \"label\": \"Kayıt başarılı\" } } }\nNot: Toast bir tekrarlayıcı değildir; tek bir bildirim örneğini temsil eder.",
         definition: {
             props: [
                 {
@@ -8809,6 +8873,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "chevron-down",
         isMobile: false,
+        usage: "Açılır kapanır panellerin kapsayıcısıdır; içine yalnızca AccordionItem (accordion-item) node'ları konur.\nTemel kullanım: props.type ile açılma modu (single = tek panel açık, multiple = çoklu), props.variant (filled/unfilled), props.componentId. children olarak bir veya daha fazla accordion-item beklenir; doğrudan içerik koymayın.\nVeri bağlama: Accordion'un kendi prop'ları statiktir; veri bağlama alt AccordionItem'larda yapılır. Dinamik sayıda panel gerekiyorsa accordion yerine array-repeater gibi bir tekrarlayıcı kullanın. className/style type:\"field\" veya type:\"query\" ile koşullu bağlanabilir.\nÖrnek (statik): { \"name\": \"accordion\", \"props\": { \"type\": \"single\" }, \"children\": [ { \"name\": \"accordion-item\", \"props\": { \"title\": \"SSS 1\" } } ] }",
         definition: {
             props: [
                 {
@@ -8871,6 +8936,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "chevron-right",
         isMobile: false,
+        usage: "Accordion içindeki tek bir açılır panel; Accordion'un doğrudan çocuğu olmalıdır.\nTemel kullanım: props.title (AccordionTrigger başlığı), props.value (benzersiz value key; boşsa başlık kullanılır), props.isDisabled (devre dışı). Panelin gövde içeriği bu node'un children'ı olarak verilir (text, box, image vb.).\nVeri bağlama: title type:\"field\", type:\"query\" (mappings ile), type:\"string\" veya type:\"static\" ile bağlanabilir. Bir tekrarlayıcı (array-repeater) şablonu içindeyse title ve children içindeki alanlar satır verisine bağlanır: { \"refs\": { \"title\": { \"type\": \"repeater\", \"ref\": \"baslik\" } } } ve gövdedeki bir text için { \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"icerik\" } } }.\nÖrnek: { \"name\": \"accordion-item\", \"refs\": { \"title\": { \"type\": \"field\", \"ref\": \"Question\" } } }",
         definition: {
             props: [
                 {
@@ -8919,6 +8985,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "tab",
         isMobile: false,
+        usage: "Sekmeli içerik kapsayıcısıdır; içine yalnızca Tab Panel (tab-panel) node'ları konur.\nTemel kullanım: props.defaultValue (başlangıçta açık tab-panel'in value değeri), props.tabBarPosition (top/bottom), props.activeColor / props.inactiveColor (hex renk; örn. #007AFF), props.componentId. children olarak bir veya daha fazla tab-panel beklenir.\nVeri bağlama: Tabs'ın kendi prop'ları genelde statiktir. defaultValue type:\"field\" veya type:\"static\" ile bağlanabilir. Veri bağlama esas olarak alt tab-panel'lerin içeriğinde yapılır. Dinamik sekme listesi gerekiyorsa tabs yerine bir tekrarlayıcı tercih edin.\nÖrnek (statik): { \"name\": \"tabs\", \"props\": { \"defaultValue\": \"genel\", \"tabBarPosition\": \"top\" }, \"children\": [ { \"name\": \"tab-panel\", \"props\": { \"label\": \"Genel\", \"value\": \"genel\" } } ] }",
         definition: {
             props: [
                 {
@@ -8984,6 +9051,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "detail-view",
         isMobile: false,
+        usage: "Tabs içindeki tek bir sekme paneli; Tabs'ın doğrudan çocuğu olmalıdır.\nTemel kullanım: props.label (sekme başlığı), props.value (benzersiz value key; Tabs defaultValue ile eşleşir), props.componentId. Panel içeriği bu node'un children'ı olarak verilir (box, text, image, listeler vb.).\nVeri bağlama: label type:\"field\", type:\"string\" veya type:\"static\" ile bağlanabilir; içerik için children içindeki node'lar kendi refs'leri ile (type:\"query\", type:\"field\", type:\"showcase\") bağlanır. Bir tekrarlayıcı şablonu içindeyse label ve children alanları type:\"repeater\" ile satır verisine bağlanır.\nÖrnek: { \"name\": \"tab-panel\", \"props\": { \"value\": \"detay\" }, \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"tab_detay\" } } }",
         definition: {
             props: [
                 {
@@ -9027,6 +9095,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "popup",
         isMobile: true,
+        usage: "Üst üste açılan modal diyalog; başlık, gövde ve footer alanlarını içerir (ModalHeader/Body/Footer).\nTemel kullanım: props.title (ModalHeader metni), props.size (xs/sm/md/lg/full), props.showCloseButton, props.componentId (handler'da context.ui.open(\"id\") ile açmak için). Gövde içeriği children olarak verilir; footer butonları da children içinde yer alır.\nVeri bağlama: title type:\"field\", type:\"query\" (mappings ile), type:\"string\" veya type:\"static\" ile bağlanabilir; gövdedeki children kendi refs'leri ile veriye bağlanır.\nÖrnek: { \"name\": \"modal\", \"props\": { \"size\": \"md\", \"showCloseButton\": true }, \"refs\": { \"title\": { \"type\": \"field\", \"ref\": \"ProductName\" } }, \"children\": [ /* gövde node'ları */ ] }\nNot: Modal bir tekrarlayıcı değildir; tek diyalog örneğidir.",
         definition: {
             props: [
                 {
@@ -9101,6 +9170,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "side-panel-open",
         isMobile: false,
+        usage: "Ekranın bir kenarından açılan yan panel (DrawerHeader/Body içerir).\nTemel kullanım: props.title (DrawerHeader metni), props.placement (left/right/top/bottom), props.showCloseButton, props.componentId (handler'da context.ui.open(\"id\") ile açılır). Panel gövdesi children olarak verilir (menü, form, liste vb.).\nVeri bağlama: title type:\"field\", type:\"string\", type:\"static\" veya type:\"query\" ile bağlanabilir; gövdedeki children kendi refs'leri ile veriye bağlanır. Drawer içine menü koyuyorsanız navigasyon için ilgili node'da type:\"navigation\" kullanılabilir.\nÖrnek: { \"name\": \"drawer\", \"props\": { \"placement\": \"left\" }, \"refs\": { \"title\": { \"type\": \"string\", \"ref\": \"menu_baslik\" } } }",
         definition: {
             props: [
                 {
@@ -9170,6 +9240,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "overflow-menu-vertical",
         isMobile: false,
+        usage: "Alttan açılan eylem paneli; tıklanabilir eylem öğelerini (ActionsheetItem) listeler.\nTemel kullanım: props.snapPoints (yüzde, virgülle ayrılmış; örn. \"50,80\", boş = tam yükseklik), props.componentId. Öğeler props.items dizisiyle verilir; her öğe text (ActionsheetItemText), iconName (Lucide ikon adı, opsiyonel) ve isDisabled alanlarına sahiptir.\nVeri bağlama (tekrarlayıcı): Statik öğeler props.items ile verilebilir. Dinamik öğeler için refs.repeater bir sorguya bağlanır ve mappings ile öğe alanları (text, iconName) üretilir.\nÖrnek: { \"name\": \"actionsheet\", \"refs\": { \"repeater\": { \"type\": \"query\", \"ref\": \"q_eylemler\", \"mappings\": [ { \"name\": \"text\", \"path\": \"Label\" }, { \"name\": \"iconName\", \"path\": \"Icon\" } ] } } }\nNot: items dizi prop'u olduğundan, repeater bağlandığında her satır bir ActionsheetItem üretir; ayrıca child şablon kullanılırsa o child'larda text/iconName için type:\"repeater\" ref'leri verin.",
         definition: {
             props: [
                 {
@@ -9231,6 +9302,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "list",
         isMobile: false,
+        usage: "Bir tetikleyiciye bağlı açılır menü; tıklanabilir MenuItem öğelerini gösterir.\nTemel kullanım: props.placement (top/bottom/left/right), props.componentId. Öğeler props.items dizisiyle verilir; her öğe label (MenuItemLabel), key (benzersiz anahtar) ve iconName (opsiyonel ikon) alanlarına sahiptir.\nVeri bağlama (tekrarlayıcı): Statik öğeler props.items ile; dinamik öğeler için refs.repeater bir sorgu/vitrine bağlanır ve mappings ile label/key/iconName alanları üretilir. Menü bir navigasyon ağacını gösterecekse ilgili alan type:\"navigation\" ref:\"<menuId>\" ile de bağlanabilir.\nÖrnek: { \"name\": \"menu\", \"props\": { \"placement\": \"bottom\" }, \"refs\": { \"repeater\": { \"type\": \"query\", \"ref\": \"q_menu\", \"mappings\": [ { \"name\": \"label\", \"path\": \"Title\" }, { \"name\": \"key\", \"path\": \"Id\" } ] } } }",
         definition: {
             props: [
                 {
@@ -9308,6 +9380,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "chat",
         isMobile: false,
+        usage: "Bir öğeye bağlı açılır bilgi balonu (PopoverHeader + PopoverBody, opsiyonel ok).\nTemel kullanım: props.title (PopoverHeader), props.body (PopoverBody içeriği), props.placement (top/bottom/left/right), props.showArrow (PopoverArrow), props.componentId.\nVeri bağlama: title ve body type:\"field\", type:\"query\" (mappings ile), type:\"string\" veya type:\"static\" ile bağlanabilir.\nÖrnek: { \"name\": \"popover\", \"props\": { \"placement\": \"top\", \"showArrow\": true }, \"refs\": { \"title\": { \"type\": \"field\", \"ref\": \"InfoTitle\" }, \"body\": { \"type\": \"field\", \"ref\": \"InfoBody\" } } }\nNot: Popover tek bir balon örneğidir; tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -9382,6 +9455,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "warning",
         isMobile: true,
+        usage: "Kullanıcıdan onay isteyen uyarı diyaloğu (başlık, mesaj, onay/iptal butonları).\nTemel kullanım: props.title (AlertDialogHeader), props.body (AlertDialogBody mesajı), props.confirmText ve props.cancelText (buton metinleri), props.size (xs/sm/md/lg/full), props.componentId (handler'da context.ui.open(\"id\") ile açılır).\nVeri bağlama: title ve body type:\"field\", type:\"query\" (mappings ile), type:\"string\" veya type:\"static\" ile bağlanabilir; confirmText/cancelText de type:\"string\" ile çok dilli yapılabilir.\nÖrnek: { \"name\": \"alert-dialog\", \"props\": { \"confirmText\": \"Sil\", \"cancelText\": \"Vazgeç\" }, \"refs\": { \"body\": { \"type\": \"field\", \"ref\": \"DeleteMessage\" } } }\nNot: AlertDialog tek bir diyalog örneğidir; tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -9465,6 +9539,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "information",
         isMobile: true,
+        usage: "Bir öğenin üzerine gelince/dokununca kısa bilgi gösteren balon (TooltipText).\nTemel kullanım: props.text (TooltipText metni), props.placement (top/bottom/left/right), props.componentId.\nVeri bağlama: text type:\"field\", type:\"query\" (mappings ile), type:\"string\" veya type:\"static\" ile bağlanabilir.\nÖrnek: { \"name\": \"tooltip\", \"props\": { \"placement\": \"top\" }, \"refs\": { \"text\": { \"type\": \"static\", \"label\": \"Daha fazla bilgi\" } } }\nNot: Tooltip tek bir metin balonudur; tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -9529,6 +9604,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "form",
         isMobile: true,
+        usage: "Form öğelerini saran wrapper'dır; içine sürüklenen form öğesine (input, select, switch vb.) etiket, yardımcı metin ve hata metni ile durum bilgisi ekler.\n\nTemel kullanım: label (FormControlLabel), helperText (FormControlHelper), errorText (FormControlError) metinlerini; isDisabled, isRequired, isInvalid, isReadOnly durum prop'larını ve componentId'yi al. children olarak tek bir form öğesi (örn. input) beklenir; droppable'dır.\n\nVeri bağlama: label / helperText / errorText prop'ları refs ile bağlanabilir — type:\"field\" (meta alanı), type:\"string\" (çok dilli metin) veya type:\"query\" + mappings ile sorgu kolonuna. isInvalid/isRequired gibi durumlar da type:\"field\" ile bağlanabilir.\nÖrnek: { \"refs\": { \"label\": { \"type\": \"field\", \"ref\": \"FieldLabel\" }, \"errorText\": { \"type\": \"string\", \"ref\": \"err_required\" } } }\nBu component bir tekrarlayıcı değildir; tek bir form öğesini sarmalar.",
         definition: {
             props: [
                 {
@@ -9596,6 +9672,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "edit",
         isMobile: true,
+        usage: "Tek satırlık metin giriş alanı (FormControl + Input + InputField); kullanıcıdan metin/şifre/e-posta/sayı toplar.\n\nTemel kullanım: label, placeholder, type (text|password|email|number), variant (outline|underlined|rounded), size (sm|md|lg|xl), helperText, errorText ve componentId. Durum prop'ları: isDisabled, isRequired, isInvalid, isReadOnly. children almaz (element).\n\nVeri bağlama: placeholder, label, helperText, errorText metin prop'ları refs ile bağlanabilir; type:\"field\" (meta alanı), type:\"string\" (çok dilli) veya type:\"query\"+mappings uygundur. Bir tekrarlayıcı (flat-list/array-repeater) içindeki satır şablonunda ise prop'lar satır alanına bağlanır.\nÖrnek (statik bağlama): { \"refs\": { \"placeholder\": { \"type\": \"field\", \"ref\": \"EmailPlaceholder\" } } }\nÖrnek (tekrarlayıcı satırında): { \"refs\": { \"label\": { \"type\": \"repeater\", \"ref\": \"fieldLabel\" } } }\nGirilen değer componentId üzerinden form.getValue(\"id\") ile okunur.",
         definition: {
             props: [
                 {
@@ -9744,6 +9821,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "chevron-down",
         isMobile: true,
+        usage: "Açılır seçim listesi (FormControl + Select + SelectTrigger + SelectItem); kullanıcı tek bir seçenek seçer.\n\nTemel kullanım: label, placeholder, options (array; her öğe { label, value }), variant (outline|underlined|rounded), size (sm|md|lg|xl), helperText, componentId. Durum: isDisabled, isRequired, isInvalid, isReadOnly. children almaz; seçenekler options array prop'undan gelir.\n\nVeri bağlama: options prop'unu bir sorgu/vitrin sonucuyla doldurmak için refs.options kullan ve mappings ile { label, value } kolonlarını eşle — type:\"query\" | type:\"raw\" | type:\"showcase\" uygundur. label/placeholder metinleri type:\"field\" veya type:\"string\" ile bağlanabilir.\nÖrnek: { \"refs\": { \"options\": { \"type\": \"query\", \"ref\": \"cities\", \"mappings\": [ { \"name\": \"label\", \"path\": \"CityName\" }, { \"name\": \"value\", \"path\": \"CityId\" } ] } } }\nSeçilen değer componentId ile form.getValue(\"id\") üzerinden okunur.",
         definition: {
             props: [
                 {
@@ -9881,6 +9959,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "switcher",
         isMobile: true,
+        usage: "Açık/kapalı toggle anahtarı; boolean bir değeri kontrol eder.\n\nTemel kullanım: label (yanında gösterilecek etiket), size (sm|md|lg), isDisabled ve componentId. children almaz (element).\n\nVeri bağlama: label prop'u refs ile bağlanabilir — type:\"field\" (meta alanı), type:\"string\" (çok dilli metin) veya type:\"query\"+mappings. Bir tekrarlayıcı satırı içindeyse label/durum satır alanına type:\"repeater\" ile bağlanır.\nÖrnek: { \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"notifications_on\" } } }\nAnahtarın durumu componentId üzerinden form.getValue(\"id\") ile okunur; tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -9946,6 +10025,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "checkbox",
         isMobile: true,
+        usage: "Onay kutusu; tek bir kutu (CheckboxLabel) veya options ile çoklu seçim grubu (CheckboxGroup) oluşturur.\n\nTemel kullanım: label (tekil kutu etiketi), options (array; her öğe { label, value } — grup için), size (sm|md|lg), isDisabled ve componentId. Durum prop'ları: isRequired, isInvalid, isReadOnly. children almaz; grup seçenekleri options array'inden gelir.\n\nVeri bağlama: options prop'unu sorgudan doldurmak için refs.options + mappings ile { label, value } eşle — type:\"query\" | type:\"raw\" | type:\"showcase\". label metni type:\"field\" veya type:\"string\" ile bağlanabilir.\nÖrnek: { \"refs\": { \"options\": { \"type\": \"query\", \"ref\": \"tags\", \"mappings\": [ { \"name\": \"label\", \"path\": \"TagName\" }, { \"name\": \"value\", \"path\": \"TagId\" } ] } } }\nSeçili değerler componentId üzerinden form.getValue(\"id\") ile okunur.",
         definition: {
             props: [
                 {
@@ -10055,6 +10135,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "radio",
         isMobile: true,
+        usage: "Tek seçimli radyo grubu (RadioGroup + Radio + RadioLabel); birden çok seçenekten yalnızca biri seçilir.\n\nTemel kullanım: options (array; her öğe { label, value } — label RadioLabel olur), size (sm|md|lg), isDisabled ve componentId. Durum prop'ları: isRequired, isInvalid, isReadOnly. children almaz; seçenekler options array'inden render edilir.\n\nVeri bağlama: options prop'unu sorgu/vitrin sonucuyla doldurmak için refs.options + mappings kullan ({ label, value } kolonlarını eşle) — type:\"query\" | type:\"raw\" | type:\"showcase\".\nÖrnek: { \"refs\": { \"options\": { \"type\": \"query\", \"ref\": \"genders\", \"mappings\": [ { \"name\": \"label\", \"path\": \"Name\" }, { \"name\": \"value\", \"path\": \"Code\" } ] } } }\nSeçilen değer componentId ile form.getValue(\"id\") üzerinden okunur.",
         definition: {
             props: [
                 {
@@ -10155,6 +10236,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "edit",
         isMobile: true,
+        usage: "Çok satırlı metin giriş alanı (FormControl + Textarea + TextareaInput); uzun metinler için.\n\nTemel kullanım: label, placeholder, size (sm|md|lg|xl), numberOfLines (görünen satır sayısı), helperText, errorText ve componentId. Durum prop'ları: isDisabled, isRequired, isInvalid, isReadOnly. children almaz (element).\n\nVeri bağlama: placeholder, label, helperText, errorText metin prop'ları refs ile bağlanabilir — type:\"field\" (meta alanı), type:\"string\" (çok dilli) veya type:\"query\"+mappings. Tekrarlayıcı satırı içindeyse type:\"repeater\" ile satır alanına bağlanır.\nÖrnek: { \"refs\": { \"placeholder\": { \"type\": \"string\", \"ref\": \"comment_placeholder\" } } }\nGirilen değer componentId üzerinden form.getValue(\"id\") ile okunur.",
         definition: {
             props: [
                 {
@@ -10267,6 +10349,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "slider",
         isMobile: true,
+        usage: "Kaydırma çubuğu (Slider + SliderTrack + SliderFilledTrack + SliderThumb); sayısal bir değeri bir aralıkta seçtirir.\n\nTemel kullanım: value (başlangıç değeri), minValue, maxValue, step, size (sm|md|lg), orientation (horizontal|vertical), showLabel (değer etiketini göster), isDisabled ve componentId. Durum prop'ları: isRequired, isInvalid, isReadOnly. children almaz (element).\n\nVeri bağlama: value (ve sınırlar minValue/maxValue) refs ile bağlanabilir — type:\"field\" (meta alanı) veya type:\"query\"+mappings ile sayısal kolona. Tekrarlayıcı satırı içindeyse value satır alanına type:\"repeater\" ile bağlanır.\nÖrnek: { \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"Rating\" } } }\nSeçilen değer componentId üzerinden form.getValue(\"id\") ile okunur.",
         definition: {
             props: [
                 {
@@ -10394,6 +10477,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "calendar",
         isMobile: false,
+        usage: "Takvim bileşeni; tekli, çoklu veya aralık modunda tarih seçtirir.\n\nTemel kullanım: label (FormControlLabel), mode (single|multiple|range), helperText ve componentId. Durum prop'ları: isDisabled, isRequired, isInvalid, isReadOnly. children almaz (element).\n\nVeri bağlama: label ve helperText metin prop'ları refs ile bağlanabilir — type:\"field\", type:\"string\" veya type:\"query\"+mappings. isInvalid/isRequired gibi durumlar type:\"field\" ile bağlanabilir.\nÖrnek: { \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"pick_date\" } } }\nSeçilen tarih(ler) componentId üzerinden form.getValue(\"id\") ile okunur; tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -10479,6 +10563,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "time",
         isMobile: false,
+        usage: "Tarih ve/veya saat seçici; mode ile tarih, saat ya da her ikisini birden seçtirir.\n\nTemel kullanım: label (FormControlLabel), mode (date|time|datetime), helperText ve componentId. Durum prop'ları: isDisabled, isRequired, isInvalid, isReadOnly. children almaz (element).\n\nVeri bağlama: label ve helperText metin prop'ları refs ile bağlanabilir — type:\"field\" (meta alanı), type:\"string\" (çok dilli) veya type:\"query\"+mappings. isRequired/isInvalid durumları type:\"field\" ile bağlanabilir.\nÖrnek: { \"refs\": { \"helperText\": { \"type\": \"field\", \"ref\": \"AppointmentHint\" } } }\nSeçilen değer componentId üzerinden form.getValue(\"id\") ile okunur; tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -10564,6 +10649,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "keyboard",
         isMobile: true,
+        usage: "Klavye açıldığında içeriği yukarı kaydıran yapısal kapsayıcıdır (React Native); form ekranlarında input'ların klavye altında kalmasını önler.\n\nTemel kullanım: behavior (padding|height|position), keyboardVerticalOffset (dikey ofset, sayı), className/style ve componentId. droppable'dır; children olarak form öğeleri (input, textarea, button vb.) yerleştirilir.\n\nVeri bağlama: Yapısal bir wrapper olduğu için kendi prop'ları genelde statik kalır; veri bağlama içerideki children üzerinden yapılır (örn. içteki input'larda type:\"field\"/type:\"query\"). Bir tekrarlayıcı içindeyse children'ı satır şablonu olarak taşıyabilir.\nÖrnek (yapı): { \"props\": { \"behavior\": \"padding\", \"keyboardVerticalOffset\": 80 }, \"children\": [ /* input, textarea ... */ ] }",
         definition: {
             props: [
                 {
@@ -10620,6 +10706,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "phone",
         isMobile: true,
+        usage: "Sistem durum çubuğunu kontrol eden görünmez bir kontrolcüdür (React Native); ekranın üst durum çubuğunun stilini ve görünürlüğünü ayarlar.\n\nTemel kullanım: barStyle (default|light-content|dark-content), backgroundColor (metin; örn. \"#FFFFFF\"), hidden (gizle) ve translucent (Android yarı saydam) switch'leri. children almaz; görsel bir alan kaplamaz.\n\nVeri bağlama: backgroundColor ve barStyle prop'ları gerekirse refs ile bağlanabilir — type:\"field\" (sayfa/meta alanı) veya type:\"page\" ile sayfa temasına; çoğu durumda statik değerlerle kullanılır.\nÖrnek: { \"props\": { \"barStyle\": \"light-content\", \"backgroundColor\": \"#000000\", \"translucent\": true } }\nBu component bir tekrarlayıcı değildir.",
         definition: {
             props: [
                 {
@@ -10668,6 +10755,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "keyboard",
         isMobile: true,
+        usage: "Klavye açıkken TextInput üstünde sabit bir aksesuar barı gösterir (sadece iOS). Temel kullanım: nativeID prop'u, ilgili TextInput'un inputAccessoryViewID değeriyle birebir eşleşmeli; backgroundColor ile bar rengini, className/style ile düzeni ayarlarsın. Bara konacak butonlar/metinler children olarak verilir (örn. 'Bitti' butonu). Veri bağlama: Bu yapısal bir kapsayıcıdır; kendi prop'ları genelde statiktir. Asıl veri, içindeki children node'larda bağlanır; örn. bir text child'ı value'sunu sayfa alanına bağlar: \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"hintText\" } }. backgroundColor'ı dinamik istiyorsan refs ile query/field bağlanabilir.",
         definition: {
             props: [
                 {
@@ -10711,6 +10799,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "mouse-pointer",
         isMobile: true,
+        usage: "İçeriği tıklanabilir yapan, basınca opaklığı azalan bir kapsayıcıdır (RN). Temel kullanım: activeOpacity (0–1) basılı opaklığı, disabled devre dışı durumunu belirler; onPress / onLongPress handler prop'larına JS yazılır; gösterilecek içerik children olarak verilir. Veri bağlama: Kendisi yapısaldır, veri children üzerinden akar. Bir liste satırı içindeyse onPress içinde repeater alanı kullanılabilir ve child'lar değerlerini bağlar; örn. başlığı satıra bağlamak için içindeki text node: \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"title\" } }. disabled gibi prop'lar refs ile field/query'e bağlanabilir.",
         definition: {
             props: [
                 {
@@ -10763,6 +10852,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "mouse-pointer",
         isMobile: true,
+        usage: "Basınca alt katman rengi değişen tıklanabilir kapsayıcı (RN). Temel kullanım: underlayColor basılıyken görünen arka rengi, activeOpacity basılı opaklığı, disabled devre dışı durumunu ayarlar; onPress / onLongPress handler'larına JS yazılır; içerik children olarak verilir (TouchableHighlight tek bir child sarmalı sever). Veri bağlama: Yapısal bir saran component'tir; veri içindeki child node'larda bağlanır. Örn. iç metin: \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"label\" } }. Liste satırı içindeyse child'lar repeater ile bağlanır (\"type\": \"repeater\", \"ref\": \"...\"). underlayColor dinamik istenirse refs ile query/field bağlanabilir.",
         definition: {
             props: [
                 {
@@ -10820,6 +10910,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "mouse-pointer",
         isMobile: true,
+        usage: "Görsel geri bildirim vermeden dokunmayı yakalayan tıklanabilir alan (RN); tam ekran 'boşluğa dokun' ya da klavye kapatma gibi senaryolarda kullanılır. Temel kullanım: disabled devre dışı bırakır; onPress / onLongPress handler'larına JS yazılır; tek bir child sarmalanır. Veri bağlama: Kendisi yapısaldır; veri children üzerinden akar. İçindeki node'lar refs ile bağlanır, örn. metin için \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"caption\" } }; liste satırı içindeyse child'lar \"type\": \"repeater\" ref'leri kullanır.",
         definition: {
             props: [
                 {
@@ -10867,6 +10958,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "mouse-pointer",
         isMobile: true,
+        usage: "Android'de ripple (dalga) efekti veren tıklanabilir alan (RN). Temel kullanım: useForeground ripple'ın ön planda mı çizileceğini, disabled devre dışı durumunu belirler; onPress / onLongPress handler'larına JS yazılır; içerik children olarak verilir. Veri bağlama: Yapısal kapsayıcıdır; veri içindeki child node'larda bağlanır. Örn. iç metin: \"refs\": { \"value\": { \"type\": \"query\", \"ref\": \"btnLabelQuery\" } }. Liste satırı içindeyse child'lar değerlerini \"type\": \"repeater\" ref'leriyle bağlar.",
         definition: {
             props: [
                 {
@@ -10919,6 +11011,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "list",
         isMobile: true,
+        usage: "Başlıklı bölümler halinde gruplanmış veriyi gösteren liste (RN SectionList) — örn. alfabetik kişi listesi. Temel kullanım: sections prop'u { title, data[] } yapısındaki bölüm dizisini taşır, keyExtractor satır anahtar alanını, stickySectionHeadersEnabled yapışkan başlığı belirler. children TEK bir şablon satır alt-ağacıdır; render her data öğesi için klonlar. Veri bağlama (tekrarlayıcı kontratı): Veri kaynağını refs.repeater'a bağla: \"refs\": { \"repeater\": { \"type\": \"query\", \"ref\": \"contactsQuery\", \"mappings\": [ { \"name\": \"name\", \"path\": \"FullName\" }, { \"name\": \"avatar\", \"path\": \"PhotoUrl\" } ] } }. Statik alternatif: props.sections = [...]. Şablon satırdaki HER alt node alanını repeater ile bağlamalı: başlık için \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"name\" } }, görsel için \"refs\": { \"src\": { \"type\": \"repeater\", \"ref\": \"avatar\" } }. UYARI: sadece sections vermek yetmez; refs.repeater kurulmaz ve child'larda type:\"repeater\" ref'leri olmazsa satırlar çizilir ama veri görünmez.",
         definition: {
             props: [
                 {
@@ -10967,6 +11060,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "list",
         isMobile: true,
+        usage: "Çok büyük veri setleri için düşük seviye sanallaştırılmış liste (RN VirtualizedList) — sadece görünür satırları render eder. Temel kullanım: data prop'u kaynağı, keyExtractor satır anahtar alanını, horizontal yatay kaydırmayı, initialNumToRender ilk render edilecek satır sayısını belirler. children TEK bir şablon satır alt-ağacıdır; render her öğe için klonlar. Veri bağlama (tekrarlayıcı kontratı): Veri kaynağını refs.repeater'a bağla: \"refs\": { \"repeater\": { \"type\": \"query\", \"ref\": \"feedQuery\", \"mappings\": [ { \"name\": \"title\", \"path\": \"Title\" }, { \"name\": \"img\", \"path\": \"CoverUrl\" } ] } } (parametreli ise type:\"raw\" + parameters, vitrin ise type:\"showcase\"). Şablon satırdaki HER alt node o alanı repeater ile bağlamalı: \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"title\" } } ve \"refs\": { \"src\": { \"type\": \"repeater\", \"ref\": \"img\" } }. UYARI: refs.repeater + child'larda type:\"repeater\" ref'leri olmadan veri görünmez.",
         definition: {
             props: [
                 {
@@ -11019,6 +11113,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "refresh",
         isMobile: true,
+        usage: "Bir ScrollView / FlatList içinde aşağı çekerek yenileme (pull-to-refresh) göstergesi sağlar (RN); droppable değildir, kaydırılabilir bir listenin refreshControl'ü olarak kullanılır. Temel kullanım: refreshing yükleniyor durumunu (switch), tintColor iOS spinner rengini, title iOS başlığını, colors Android spinner renklerini (virgüllü), progressBackgroundColor Android arka rengini belirler. Veri bağlama: refreshing prop'u dinamik bir yükleniyor durumuna bağlanabilir; örn. sorgu meta'sından sayfalama/yüklenme durumu için \"refs\": { \"refreshing\": { \"type\": \"queryoptions\", \"ref\": \"listQuery\" } } ya da bir alan için \"refs\": { \"refreshing\": { \"type\": \"field\", \"ref\": \"isLoading\" } }. Yenileme mantığı genelde sarmalayan listenin handler'ında çağrılır.",
         definition: {
             props: [
                 {
@@ -11058,6 +11153,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "image",
         isMobile: true,
+        usage: "Yatay/dikey kaydırılabilen slayt (carousel) bileşeni — banner, ürün vitrini, galeri için. Temel kullanım: data prop'u slayt dizisi kaynağını, autoPlay otomatik oynatmayı, loop sonsuz döngüyü, pagingEnabled sayfa sayfa kaydırmayı, showDots nokta göstergesini ayarlar. children TEK bir şablon slayt alt-ağacıdır (örn. bir image + başlık kartı); render her veri öğesi için klonlar. Veri bağlama (tekrarlayıcı kontratı): Slayt kaynağını refs.repeater'a bağla: \"refs\": { \"repeater\": { \"type\": \"showcase\", \"ref\": \"bannerShowcase\", \"mappings\": [ { \"name\": \"img\", \"path\": \"ImageUrl\" }, { \"name\": \"title\", \"path\": \"Title\" }, { \"name\": \"link\", \"path\": \"Href\" } ] } } (query/raw da olabilir; statikse props.data = [...]). Şablon slayttaki HER alt node alanını repeater ile bağlamalı: görsel için \"refs\": { \"src\": { \"type\": \"repeater\", \"ref\": \"img\" } }, başlık için \"refs\": { \"value\": { \"type\": \"repeater\", \"ref\": \"title\" } }. UYARI: sadece data vermek yetmez; refs.repeater kurulmadan ve child'larda type:\"repeater\" ref'leri olmadan slaytlar boş görünür.",
         definition: {
             props: [
                 {
@@ -11115,6 +11211,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "side-panel-open",
         isMobile: true,
+        usage: "Alttan yukarı açılan modal panel. Temel kullanım: snapPoints açılma yüksekliklerini (virgüllü, örn. 25%,50%,90%), index başlangıç snap konumunu, enablePanDownToClose aşağı çekince kapanmayı, showBackdrop arka katmanı, showDragIndicator tutma çubuğunu belirler. Panel içeriği children olarak verilir. Açmak için: bottomsheet'e componentId ver, ayrı bir butonun handler'ında context.ui.open('componentId') çağır. Veri bağlama: Kendisi yapısaldır; veri içindeki child node'larda bağlanır (örn. metin \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"detailText\" } }, ya da içine bir liste koyup tekrarlayıcı kontratını uygula). Bir satırın detayını gösteren sheet ise child'lar repeater alanlarını kullanabilir.",
         definition: {
             props: [
                 {
@@ -11172,6 +11269,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "fade",
         isMobile: true,
+        usage: "İçeriğini RN/DOM ağacında bulunduğu yerden alıp başka bir noktaya (PortalHost) taşıyan kapsayıcıdır; üst üste binen modal, tooltip, toast gibi overlay'leri kök seviyede render etmek için kullanılır. Temel kullanım: hostName, içeriğin hangi PortalHost altına çizileceğini belirtir; taşınacak içerik children olarak verilir. Veri bağlama: Yapısal/saran bir component'tir, kendi prop'ları genelde statiktir; veri taşınan children içinde bağlanır. Örn. portal içindeki bir metin: \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"message\" } }; içine liste koyarsan o liste tekrarlayıcı kontratını (refs.repeater + child repeater ref'leri) kullanır.",
         definition: {
             props: [
                 {
@@ -11210,6 +11308,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "image",
         isMobile: true,
+        usage: "Arkaplanında bir görsel olan ve üstüne içerik konabilen kapsayıcı (RN ImageBackground). Temel kullanım: source arkaplan görselini, resizeMode görselin sığma biçimini (cover/contain/stretch/repeat/center) belirler; üstte gösterilecek içerik (başlık, butonlar) children olarak verilir; className/style ile boyut verilir. Veri bağlama: source prop'u dinamik bir görsele bağlanabilir; örn. sayfa görseli için \"refs\": { \"source\": { \"type\": \"page\", \"ref\": \"image\" } }, bir dosya için \"type\": \"file\", bir alan için \"type\": \"field\", ya da bir sorgu sonucundan \"type\": \"query\". Liste satırı içindeyse \"refs\": { \"source\": { \"type\": \"repeater\", \"ref\": \"img\" } }. Üstteki metin/buton children'ları da kendi refs'leriyle (field/query/repeater) bağlanabilir.",
         definition: {
             props: [
                 {
@@ -11274,6 +11373,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "globe",
         isMobile: true,
+        usage: "Gömülü web sayfası gösterir (react-native-webview); droppable değil, children almaz.\nTemel kullanım: props.source bir URL alır; alternatif olarak props.html ile ham HTML gömülür. javaScriptEnabled, domStorageEnabled, scalesPageToFit switch'leri ile davranış ayarlanır. style RN style objesi, className tailwind sınıfı.\nVeri bağlama: source ve html prop'ları refs ile dinamikleştirilebilir. type:\"field\" ile mevcut sayfanın meta alanına, type:\"query\" (mappings ile) ile sorgu sonucuna, type:\"link\" ile bir link href'ine, type:\"static\" ile sabit değere bağlanır. Bir liste şablonu içinde satır URL'sini göstermek için type:\"repeater\" kullanılır.\nÖrnek: \"refs\": { \"source\": { \"type\": \"field\", \"ref\": \"detayUrl\" } } veya satır içinde: \"refs\": { \"source\": { \"type\": \"repeater\", \"ref\": \"url\" } }",
         definition: {
             props: [
                 {
@@ -11335,6 +11435,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "play",
         isMobile: true,
+        usage: "Lottie animasyon oynatıcı (lottie-react-native); droppable değil, children almaz.\nTemel kullanım: props.source bir animasyon JSON URL'i veya JSON kaynağı alır; autoPlay ve loop switch'leri, speed (number) ile oynatma kontrol edilir. style/className ile boyut/yerleşim ayarlanır.\nVeri bağlama: source prop'u refs ile bağlanabilir. type:\"file\" ile yüklenmiş bir animasyon dosyasına, type:\"field\" ile meta alanına, type:\"static\" ile sabit URL'e, type:\"query\" (mappings) ile sorgudan gelen URL'e bağlanır. Bir liste şablonu içinde her satırın animasyonunu göstermek için type:\"repeater\".\nÖrnek: \"refs\": { \"source\": { \"type\": \"file\", \"ref\": \"animasyonId\" } } veya satır içinde: \"refs\": { \"source\": { \"type\": \"repeater\", \"ref\": \"lottieUrl\" } }",
         definition: {
             props: [
                 {
@@ -11387,6 +11488,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "calendar",
         isMobile: true,
+        usage: "Native tarih/saat seçici (react-native-date-picker); droppable değil, children almaz. Form alanıdır (FormControl: isDisabled, isRequired, isInvalid, isReadOnly).\nTemel kullanım: props.label etiket, props.placeholder ipucu metni, props.mode = date | time | datetime. minimumDate/maximumDate ile aralık sınırlanır; değer componentId ile handler'da okunur (form.getValue).\nVeri bağlama: label, placeholder, minimumDate, maximumDate prop'ları refs ile bağlanabilir. Çok dilli etiket için type:\"string\", meta alanından sınır için type:\"field\", sabit için type:\"static\". label'ı sorgudan beslemek için type:\"query\" (mappings).\nÖrnek: \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"dogumTarihiLabel\" }, \"minimumDate\": { \"type\": \"field\", \"ref\": \"minTarih\" } }",
         definition: {
             props: [
                 {
@@ -11489,6 +11591,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "edit",
         isMobile: true,
+        usage: "Tek kullanımlık şifre (OTP) giriş alanı; droppable değil, children almaz. Form alanıdır (FormControl: isDisabled, isRequired, isInvalid, isReadOnly).\nTemel kullanım: props.label etiket, props.numberOfDigits hane sayısı (number), autoFocus ve secureTextEntry switch'leri. Girilen kod componentId ile handler'da okunur.\nVeri bağlama: label prop'u refs ile bağlanabilir. Çok dilli etiket için type:\"string\", meta alanı için type:\"field\", sabit değer için type:\"static\".\nÖrnek: \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"otpLabel\" } }",
         definition: {
             props: [
                 {
@@ -11572,6 +11675,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "image",
         isMobile: true,
+        usage: "Galeri/kameradan görsel seçici (expo-image-picker); droppable değil, children almaz. Form alanıdır (FormControl: isDisabled, isRequired, isInvalid, isReadOnly).\nTemel kullanım: props.label etiket, props.multiple çoklu seçim, props.mediaTypes = Images | Videos | All, props.quality (0–1 number). Seçilen dosya(lar) componentId ile handler'da okunur (genellikle upload edilir).\nVeri bağlama: label prop'u refs ile bağlanabilir. Çok dilli etiket için type:\"string\", meta alanı için type:\"field\", sabit için type:\"static\".\nÖrnek: \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"fotografSecLabel\" } }",
         definition: {
             props: [
                 {
@@ -11669,6 +11773,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "document",
         isMobile: true,
+        usage: "Dosya seçici (expo-document-picker); droppable değil, children almaz. Form alanıdır (FormControl: isDisabled, isRequired, isInvalid, isReadOnly).\nTemel kullanım: props.label etiket, props.multiple çoklu seçim, props.type ile MIME filtresi (örn: application/pdf). Seçilen dosya(lar) componentId ile handler'da okunur.\nVeri bağlama: label prop'u refs ile bağlanabilir. Çok dilli etiket için type:\"string\", meta alanı için type:\"field\", sabit için type:\"static\".\nÖrnek: \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"dosyaSecLabel\" } }",
         definition: {
             props: [
                 {
@@ -11747,6 +11852,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "phone",
         isMobile: true,
+        usage: "Ülke kodlu telefon giriş alanı; droppable değil, children almaz. Form alanıdır (FormControl: isDisabled, isRequired, isInvalid, isReadOnly).\nTemel kullanım: props.label etiket, props.placeholder ipucu, props.defaultCode varsayılan ülke kodu (örn: TR), props.autoFormat switch. Girilen numara componentId ile handler'da okunur.\nVeri bağlama: label, placeholder, defaultCode prop'ları refs ile bağlanabilir. Çok dilli etiket için type:\"string\", kullanıcı/meta verisinden ön doldurma için type:\"field\", sabit için type:\"static\".\nÖrnek: \"refs\": { \"label\": { \"type\": \"string\", \"ref\": \"telefonLabel\" }, \"defaultCode\": { \"type\": \"field\", \"ref\": \"ulkeKodu\" } }",
         definition: {
             props: [
                 {
@@ -11830,6 +11936,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "tab",
         isMobile: true,
+        usage: "Native sekme görünümü (react-native-tab-view); droppable değil. Sekme içerikleri children olarak verilir.\nTemel kullanım: props.routes bir array'dir; her item { key, title, icon? } içerir ve sıra children sırasıyla eşleşir. props.initialIndex başlangıç sekmesi (number), swipeEnabled ve lazy switch'leri. children: her sekmenin içerik alt-ağacı.\nVeri bağlama: routes statik array olarak props.routes ile verilir; sekme başlıkları metin olduğundan dinamik liste için tipik kullanım değildir. Sekme içeriğindeki child node'lar kendi prop'larını ayrı ayrı refs ile (type:\"query\", type:\"field\", type:\"repeater\") bağlar.\nÖrnek: \"props\": { \"routes\": [ { \"key\": \"genel\", \"title\": \"Genel\" }, { \"key\": \"yorum\", \"title\": \"Yorumlar\" } ], \"initialIndex\": 0 }",
         definition: {
             props: [
                 {
@@ -11899,6 +12006,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "location",
         isMobile: true,
+        usage: "Native harita bileşeni (react-native-maps); wrapper'dır ve droppable=true — children olarak map-marker node'ları alır.\nTemel kullanım: props.latitude/longitude merkez koordinat, latitudeDelta/longitudeDelta zoom seviyesi (number), showsUserLocation ve showsMyLocationButton switch'leri, props.mapType = standard | satellite | hybrid | terrain. children: bir veya birden çok map-marker.\nVeri bağlama: latitude, longitude, latitudeDelta, longitudeDelta prop'ları refs ile bağlanabilir. Meta alanından merkez için type:\"field\", sorgudan için type:\"query\" (mappings), sabit için type:\"static\".\nDinamik işaretçiler için: children'a tek bir map-marker şablonu koyup map-view üzerinde refs.repeater = { type:\"query\", ref:\"<konumSorgu>\", mappings:[{name:\"lat\",path:\"Lat\"},{name:\"lng\",path:\"Lng\"},{name:\"baslik\",path:\"Ad\"}] } verilir; şablon marker her satır için klonlanır.\nÖrnek: \"refs\": { \"latitude\": { \"type\": \"field\", \"ref\": \"merkezLat\" }, \"longitude\": { \"type\": \"field\", \"ref\": \"merkezLng\" }, \"repeater\": { \"type\": \"query\", \"ref\": \"subeler\", \"mappings\": [ { \"name\": \"lat\", \"path\": \"Lat\" }, { \"name\": \"lng\", \"path\": \"Lng\" }, { \"name\": \"baslik\", \"path\": \"Ad\" } ] } }",
         definition: {
             props: [
                 {
@@ -11984,6 +12092,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "pin",
         isMobile: true,
+        usage: "Harita üzerinde işaretleyici (react-native-maps Marker); droppable değil, children almaz. Bir map-view'in child'ı olarak kullanılır.\nTemel kullanım: props.latitude/longitude konum (number), props.title başlık, props.description açıklama, props.pinColor pin rengi.\nVeri bağlama: latitude, longitude, title, description, pinColor prop'ları refs ile bağlanabilir. Tekil işaretçi için meta alanından type:\"field\" ya da sabit type:\"static\".\nDinamik işaretçiler için map-view'in repeater kontratının ŞABLON child'ı olarak kullanılır: her satır alanı type:\"repeater\" ile bağlanır — \"refs\": { \"latitude\": { \"type\": \"repeater\", \"ref\": \"lat\" }, \"longitude\": { \"type\": \"repeater\", \"ref\": \"lng\" }, \"title\": { \"type\": \"repeater\", \"ref\": \"baslik\" } }. Bu ref'ler her satırın değerine çözülür ve marker klonlanır.",
         definition: {
             props: [
                 {
@@ -12027,6 +12136,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "chart-bar",
         isMobile: true,
+        usage: "Çubuk grafik (react-native-gifted-charts); droppable değil, children almaz.\nTemel kullanım: props.data grafik verisidir; her item { value, label?, frontColor? } biçimindedir. barWidth ve spacing (number) ile yerleşim, props.frontColor varsayılan çubuk rengi, showGradient switch. Statik veri props.data array'i olarak verilebilir.\nVeri bağlama: data prop'u refs.data ile bir sorguya bağlanır ve mappings sorgu kolonlarını grafik alanlarına (value/label/frontColor) çevirir. type:\"query\" veya parametreli type:\"raw\", vitrin için type:\"showcase\" uygundur.\nÖrnek: \"refs\": { \"data\": { \"type\": \"query\", \"ref\": \"aylikSatis\", \"mappings\": [ { \"name\": \"value\", \"path\": \"Tutar\" }, { \"name\": \"label\", \"path\": \"Ay\" } ] } }. Not: grafik veriyi tek prop'tan okur, bu yüzden array-repeater kontratı (child type:\"repeater\") gerekmez.",
         definition: {
             props: [
                 {
@@ -12085,6 +12195,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "chart-line",
         isMobile: true,
+        usage: "Çizgi grafik (react-native-gifted-charts); droppable değil, children almaz.\nTemel kullanım: props.data grafik verisidir; her item { value, label?, dataPointText? } biçimindedir. curved (eğrili), areaChart (alan dolgusu), showVerticalLines (dikey ızgara) switch'leri, props.thickness (number) çizgi kalınlığı, props.color çizgi rengi.\nVeri bağlama: data prop'u refs.data ile bir sorguya bağlanır ve mappings kolonları grafik alanlarına (value/label/dataPointText) çevirir. type:\"query\" veya parametreli type:\"raw\", vitrin için type:\"showcase\" uygundur.\nÖrnek: \"refs\": { \"data\": { \"type\": \"query\", \"ref\": \"trafik\", \"mappings\": [ { \"name\": \"value\", \"path\": \"Ziyaret\" }, { \"name\": \"label\", \"path\": \"Gun\" } ] } }. Not: veri tek prop üzerinden okunur; child bazlı array-repeater kontratı gerekmez.",
         definition: {
             props: [
                 {
@@ -12148,6 +12259,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "chart-pie",
         isMobile: true,
+        usage: "Pasta/donut grafik çizer (react-native-gifted-charts). Temel kullanım: data array key olarak verilir; her item { value, color?, text? } biçimindedir. radius / innerRadius (donut için), donut ve showText switch'leri görünümü ayarlar; children almaz. Veri bağlama: data prop'u bir sorgu sonucuna refs ile bağlanır ve mappings her satırı { value, color?, text? } şekline çevirir. Örn: refs:{ data:{ type:\"query\", ref:\"satisDagilimi\", mappings:[{name:\"value\",path:\"Tutar\"},{name:\"text\",path:\"Kategori\"},{name:\"color\",path:\"Renk\"}] } }. field/showcase tipleri de uygundur; sabit grafik için props.data = [{value:40,color:\"#f00\",text:\"A\"}, ...].",
         definition: {
             props: [
                 {
@@ -12206,6 +12318,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "camera",
         isMobile: true,
+        usage: "Kamera önizleme bileşeni (expo-camera). Temel kullanım: facing (back/front), flashMode (off/on/auto/torch) ve zoom (0–1) prop'ları ile kontrol edilir; children almaz, componentId ile dataBus/handler üzerinden çekim yapılır. Veri bağlama: dinamik prop nadirdir ama facing/zoom gibi değerler bir alana bağlanabilir. Örn dinamik yön: refs:{ facing:{ type:\"field\", ref:\"varsayilanKamera\" } } veya refs:{ zoom:{ type:\"query\", ref:\"kameraAyar\", mappings:[{name:\"zoom\",path:\"ZoomDegeri\"}] } }. Çoğu durumda props ile statik kullanılır (facing:\"back\", flashMode:\"auto\").",
         definition: {
             props: [
                 {
@@ -12281,6 +12394,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "barcode",
         isMobile: true,
+        usage: "Barkod/QR okuyucu (expo-camera). Temel kullanım: barcodeTypes virgüllü liste olarak desteklenen tipleri belirler (örn \"qr,code128,ean13,upc_a,pdf417\"); children almaz, okunan değer componentId ile dataBus'a yazılır ve handler'da okunur. Veri bağlama: barcodeTypes bir alana/sorguya bağlanabilir. Örn: props:{ barcodeTypes:\"qr,ean13\" } veya dinamik: refs:{ barcodeTypes:{ type:\"field\", ref:\"izinliBarkodTipleri\" } }. Genellikle props ile statik kullanılır.",
         definition: {
             props: [
                 {
@@ -12319,6 +12433,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "link",
         isMobile: true,
+        usage: "Tıklanınca router.push(href) ile gezinen tıklanabilir kapsayıcıdır (wrapper). Temel kullanım: href hedefini, activeOpacity (basınca opaklık 0–1), disabled ve onPress (JS handler) prop'larını alır; children olarak tıklanabilir içerik (kart, satır, text+image) yerleştirilir. Veri bağlama: href bir Link'e bağlanır → refs:{ href:{ type:\"link\", ref:\"urunDetayLink\" } }; ayrıca page ile sayfa yoluna bağlanabilir refs:{ href:{ type:\"page\", ref:\"path\" } }. Bir tekrarlayıcı (card-list/flat-list) ŞABLONU içindeyse href satıra göre değişmelidir → refs:{ href:{ type:\"repeater\", ref:\"detayUrl\" } } (üst listenin refs.repeater.mappings içinde name:\"detayUrl\" tanımlı olmalı).",
         definition: {
             props: [
                 {
@@ -12375,6 +12490,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "drag-handle",
         isMobile: true,
+        usage: "Kaydırılabilir satır kapsayıcısı; sola/sağa kaydırınca eylem butonları gösterir (react-native-gesture-handler, wrapper). Temel kullanım: leftActions / rightActions JSON array prop'larıyla [{label, color, textColor, width}] butonlar tanımlanır; friction sürtünme çarpanını, onSwipeLeft/onSwipeRight JS handler'ları eylemleri belirler; children olarak satır içeriği konur. Veri bağlama: genellikle bir liste (flat-list/section-list) ŞABLONU içinde kullanılır; satır içeriğindeki text/image child'ları satır alanlarına refs:{ value:{ type:\"repeater\", ref:\"baslik\" } } ile bağlanır. leftActions/rightActions çoğunlukla props ile statiktir; dinamikse refs:{ rightActions:{ type:\"field\", ref:\"satirEylemleri\" } }.",
         definition: {
             props: [
                 {
@@ -12434,6 +12550,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "drag-handle",
         isMobile: true,
+        usage: "Sürükle-bırak ile yeniden sıralanan listedir (reanimated + gesture-handler). DİKKAT: bu bileşen kendi item'larını items JSON array prop'undan (her öğe { id, label, ... }, id ZORUNLU) render eder; itemHeight satır yüksekliği, onChange (JS) sıralama değişince tetiklenir, componentId yeni sırayı dataBus'a yazar. children'ı şablon olarak KULLANMAZ — repeater kontratı uygulanmaz. Veri bağlama: items'ı bir sorguya bağla ve mappings ile { id, label } üret → refs:{ items:{ type:\"query\", ref:\"gorevler\", mappings:[{name:\"id\",path:\"Id\"},{name:\"label\",path:\"Baslik\"}] } }. Sabit liste için props.items = [{id:\"1\",label:\"A\"},{id:\"2\",label:\"B\"}].",
         definition: {
             props: [
                 {
@@ -12487,6 +12604,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "checkbox",
         isMobile: true,
+        usage: "Çoklu seçim kutusu; modal picker ile arama ve birden çok seçim sağlar. Temel kullanım: label, options (options-editor), placeholder, maxSelect, searchable switch'i ve onChange (JS) prop'ları vardır; seçimi componentId (formBus key) ile forma yazar, children almaz. FormControl durumları isDisabled/isRequired/isInvalid/isReadOnly. Veri bağlama: seçenekleri statik options yerine sorgudan doldurmak için options'ı bağla → refs:{ options:{ type:\"query\", ref:\"sehirler\", mappings:[{name:\"label\",path:\"Ad\"},{name:\"value\",path:\"Kod\"}] } }. label ise field/string ile bağlanabilir: refs:{ label:{ type:\"field\", ref:\"formEtiketi\" } }.",
         definition: {
             props: [
                 {
@@ -12585,6 +12703,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "switcher",
         isMobile: true,
+        usage: "Segmentli seçim çubuğu; filtre veya görünüm geçişi için tek seçimli sekme grubu sunar. Temel kullanım: options (options-editor), activeColor / inactiveColor, scrollable switch'i ve onChange (JS) prop'ları; seçili değeri componentId (formBus key) ile forma/dataBus'a yazar, children almaz. Veri bağlama: segmentleri dinamik üretmek için options'ı bir sorguya bağla → refs:{ options:{ type:\"query\", ref:\"durumlar\", mappings:[{name:\"label\",path:\"Ad\"},{name:\"value\",path:\"Kod\"}] } }. Renk prop'ları genelde statik (activeColor:\"#2563eb\"), gerekirse field ile bağlanabilir.",
         definition: {
             props: [
                 {
@@ -12647,6 +12766,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "vid-play",
         isMobile: true,
+        usage: "Ses oynatıcı; isteğe bağlı kontrollerle çalar ve componentId (dataBus key) üzerinden programatik play/pause/stop kabul eder (expo-av). Temel kullanım: src (ses URL'i), autoPlay, loop, showControls switch'leri ve onEnd (JS) handler'ı; children almaz. Veri bağlama: src'yi sorgu/alan/dosyaya bağla. Örn sorgudan: refs:{ src:{ type:\"query\", ref:\"podcastBolum\", mappings:[{name:\"src\",path:\"SesUrl\"}] } }; dosya için refs:{ src:{ type:\"file\", ref:\"kayit123\" } } veya meta alanı refs:{ src:{ type:\"field\", ref:\"sesDosyasi\" } }. Bir liste şablonu içindeyse refs:{ src:{ type:\"repeater\", ref:\"ses\" } }.",
         definition: {
             props: [
                 {
@@ -12709,6 +12829,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "cloud-download",
         isMobile: true,
+        usage: "Görünmez veri sağlayıcıdır: declarative HTTP isteği yapıp sonucu dataBus'a yazar (sayfaya UI eklemez, children render etmez). Temel kullanım: url, method (GET/POST/...), headers ve body (JSON), resultPath (örn \"data.items\") ile yanıttan çekilecek yol; çıktı key prop'una, loadingKey/errorKey ayrı dataBus key'lerine yazılır; deps (virgüllü key) değişince yeniden çeker, pollInterval ms ile periyodik yeniler, disabled kapatır. Veri akışı: bu bileşen sonucu key altında dataBus'a koyar; ALT AĞAÇ bu veriyi göstermek için bir liste (flat-list/card-list) kullanır ve o listenin satırları repeater ref'leriyle alanlara bağlanır. url/headers/body genelde statik props'tur; dinamik url için refs:{ url:{ type:\"field\", ref:\"apiBase\" } } kullanılabilir. Not: sorgu sonuçlarını göstermek için doğrudan list+refs.repeater (type:\"query\") tercih edilir; data-fetch harici REST API'ler içindir.",
         definition: {
             props: [
                 {
@@ -12800,6 +12921,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "link",
         isMobile: true,
+        usage: "Görünmez gerçek zamanlı bağlantı sağlayıcıdır: WebSocket açar ve gelen mesajları dataBus'a yazar (UI/children render etmez). Temel kullanım: url (wss://...), enabled switch'i, reconnect ve reconnectDelay (ms) ile otomatik yeniden bağlanma; gelen mesajlar componentId (dataBus key) altına birikir; onMessage/onConnect/onDisconnect JS handler'larıyla işlenir. Veri akışı: bileşen veriyi componentId key'ine yazar; canlı listeyi göstermek için ALT AĞAÇTA bir tekrarlayıcı (flat-list/section-list) kullanılır ve satır child'ları refs:{ value:{ type:\"repeater\", ref:\"<alan>\" } } ile bağlanır (üst liste refs.repeater ile dataBus key'ine/sorguya bağlı). url genelde statik props; dinamikse refs:{ url:{ type:\"field\", ref:\"wsAdresi\" } }.",
         definition: {
             props: [
                 {
@@ -12854,6 +12976,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "notification",
         isMobile: true,
+        usage: "Görünmez olay dinleyicisidir: push/local bildirim olaylarını dinleyip dataBus'a yazar (expo-notifications, UI/children render etmez). Temel kullanım: componentId (dataBus key) altına bildirim olaylarını biriktirir; onReceive (uygulama açıkken gelen bildirim) ve onTap (bildirime dokunma) JS handler'larıyla tepki verilir. Veri akışı: olaylar componentId key'ine yazılır; bunları listelemek için ALT AĞAÇTA bir tekrarlayıcı (flat-list) kullanılır ve satır metni refs:{ value:{ type:\"repeater\", ref:\"baslik\" } } ile bağlanır. Bu bileşenin props'larında veri bağlama gerekmez; davranış handler'larda kurulur.",
         definition: {
             props: [
                 {
@@ -12883,6 +13006,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "link",
         isMobile: true,
+        usage: "Gelen deep link / universal link olaylarını dinleyip yakalanan URL'yi dataBus'a yazan görünmez bir dinleyici element'tir (children yok).\nTemel kullanım: props.componentId ile yazılacak dataBus anahtarını belirle (gelen link bu key'e kaydedilir), props.handleInitial (switch) uygulamayı linkle açan ilk URL'yi de okur, props.onLink (handler/JS) link geldiğinde çalışır. Yakalanan değer dataBus üzerinden diğer component'lere taşınır; refs ile bağlanan veri kaynağı değildir, kendisi veri ÜRETİR.\nVeri bağlama: Bu component'in kendi prop'larına refs ile bağlama tipik değildir; componentId statik bir anahtar (props.componentId = \"incomingLink\") olarak verilir. Üretilen link değerini kullanmak isteyen child/diğer node'lar dataBus key'i üzerinden okur (örn. bir raw query'nin parameters'ında bu key kullanılır).\nÖrnek: { \"props\": { \"componentId\": \"incomingLink\", \"handleInitial\": true } }",
         definition: {
             props: [
                 {
@@ -12912,6 +13036,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "warning",
         isMobile: true,
+        usage: "Çocuk node'larda oluşan render hatalarını yakalayıp uygulamanın çökmesini önleyen, hata anında fallback gösteren bir wrapper'dır (children alır ve sarar).\nTemel kullanım: children olarak korumak istediğin alt ağacı yerleştir. props.fallbackTitle ve props.fallbackMessage hata durumunda gösterilecek başlık ve mesajı belirler; props.componentId, className ve style ile kimliklendirip stillendir. droppable:true olduğundan içine serbestçe component eklenir.\nVeri bağlama: fallbackTitle / fallbackMessage prop'ları refs ile bağlanabilir; çok dilli metin için type:\"string\", sayfa/meta alanı için type:\"field\" ya da type:\"page\", sorgu sonucu için type:\"query\" kullan. children kendi refs'leriyle (query/field/repeater) bağımsız çalışır.\nÖrnek: { \"refs\": { \"fallbackMessage\": { \"type\": \"string\", \"ref\": \"errFallbackMsg\" } } }",
         definition: {
             props: [
                 {
@@ -12954,6 +13079,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "paint-brush",
         isMobile: true,
+        usage: "Kullanıcının hex renk seçmesini sağlayan form kontrolüdür (children yok); seçilen değeri form/dataBus'a yazar.\nTemel kullanım: props.label etiketi, props.value başlangıç hex değerini (örn. \"#FF0000\"), props.showAlpha (switch) alpha kanalını açar. FormControl durum prop'ları isDisabled, isRequired, isInvalid, isReadOnly ile davranışı kontrol et; props.componentId değeri form.getValue ile okumak için kullanılır.\nVeri bağlama: label ve value prop'ları refs ile bağlanabilir. label için çok dilli type:\"string\" ya da meta için type:\"field\"; başlangıç değerini bir kayıttan getirmek için value'yu type:\"query\" (mappings ile kolon) veya bir tekrarlayıcı içindeyse type:\"repeater\" ile bağla.\nÖrnek: { \"props\": { \"showAlpha\": true }, \"refs\": { \"value\": { \"type\": \"field\", \"ref\": \"brandColor\" } } }",
         definition: {
             props: [
                 {
@@ -13032,6 +13158,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "graph-bar",
         isMobile: true,
+        usage: "0–100 arası bir değeri dairesel ilerleme halkası olarak gösteren salt görsel element'tir (children yok).\nTemel kullanım: props.value (number, 0–100) doluluk oranı, props.size halka boyutu (px), props.strokeWidth çizgi kalınlığı, props.color dolu kısmın rengi, props.trackColor arka iz rengi, props.showLabel (switch) ortada yüzde metnini gösterir.\nVeri bağlama: Asıl bağlanacak prop value'dur. Bir sorgu sonucundaki sayıya bağlamak için type:\"query\" (mappings ile ilgili kolonu \"value\" adına eşle), sayfa/meta alanı için type:\"field\", statik değer için type:\"static\" kullan. color/trackColor da type:\"field\" ile temalanabilir. Bir liste/tekrarlayıcı satırı içinde her halka kendi değerini type:\"repeater\" ile alır.\nÖrnek: { \"refs\": { \"value\": { \"type\": \"query\", \"ref\": \"progressQ\", \"mappings\": [{ \"name\": \"value\", \"path\": \"Percent\" }] } } }",
         definition: {
             props: [
                 {
@@ -13099,6 +13226,7 @@ export const BASE_COMPONENTS = [
         droppable: false,
         icon: "crop",
         isMobile: true,
+        usage: "Verilen görseli kullanıcıya kırptıran etkileşimli element'tir (children yok); kırpılan sonucu form/dataBus'a yazar.\nTemel kullanım: props.source kırpılacak görsel kaynağı (image), props.aspectRatio en-boy oranı (örn. 1 = kare), props.cropShape dropdown ile \"rectangle\" veya \"circle\" kırpma şekli; props.componentId ile sonucu handler'da oku.\nVeri bağlama: Bağlanacak ana prop source'tur. Yüklenen bir dosyaya bağlamak için type:\"file\", sayfanın görseli için type:\"page\" ref:\"image\", bir kayıttan gelen görsel URL'si için type:\"query\" (mappings ile URL kolonunu \"source\"a eşle), meta alanı için type:\"field\" kullan. Tekrarlayıcı satırı içinde source'u type:\"repeater\" ile bağla.\nÖrnek: { \"props\": { \"aspectRatio\": 1, \"cropShape\": \"circle\" }, \"refs\": { \"source\": { \"type\": \"file\", \"ref\": \"uploadedAvatar\" } } }",
         definition: {
             props: [
                 {
@@ -13156,6 +13284,7 @@ export const BASE_COMPONENTS = [
         droppable: true,
         icon: "overflow-menu-vertical",
         isMobile: true,
+        usage: "Sardığı içeriğe uzun basıldığında native bir bağlam menüsü açan wrapper'dır (children sarar; uzun basış menüyü tetikler).\nTemel kullanım: children olarak menüyü tetikleyecek görünür içeriği koy. props.actions, her biri { title, systemIcon, destructive } alanlarına sahip bir array'dir (menü öğeleri); destructive:true öğeyi yıkıcı/kırmızı gösterir. props.componentId, className, style ile kimliklendir ve stillendir.\nVeri bağlama: actions statik bir dizi olarak (props.actions = [{ \"title\": \"Sil\", \"destructive\": true }]) verilebilir; öğe başlıkları çok dilli ise tek tek type:\"string\" ile bağlanabilir. Sardığı children kendi refs'leriyle (type:\"query\"/\"field\"/\"repeater\") veri gösterir; bu component'in kendisi bir tekrarlayıcı DEĞİLDİR, refs.repeater kullanmaz.\nÖrnek: { \"props\": { \"actions\": [{ \"title\": \"Paylaş\", \"systemIcon\": \"square.and.arrow.up\" }, { \"title\": \"Sil\", \"destructive\": true }] } }",
         definition: {
             props: [
                 {