@appaflytech/zeyrek-ai-mcp 0.0.6 → 0.0.7

package/dist/platform/responses.js

@@ -1,5 +1,6 @@
 import { logError, logStep } from '../observability/trace.js';
 import { PlatformApiError } from './errors.js';
+import { PolicyBlockError } from '../knowledge/policy.js';
 import { maskSecrets } from './secrets.js';
 export function prune(value) {
     if (Array.isArray(value))
@@ -126,12 +127,15 @@ function asStructured(payload) {
         return payload;
     return { data: payload };
 }
-export function toolResult(payload, config) {
+export function toolResult(payload, config, expectFailure) {
     const pruned = prune(payload);
     const { payload: safe, masked, tokenRefs } = maskSecrets(pruned);
     const runtimeErrors = runtimeErrorSummary(safe);
     if (runtimeErrors.length > 0) {
-        logStep('akış hatası ✕', `${runtimeErrors.length} adım hata ile bitti — platform HTTP 200 döndürdüğü için çağrı başarılı görünüyordu`, runtimeErrors);
+        // Kasıtlı negatif test (expectFailure:true) bir kusur değil bir KANIT: çağıran beklediğini
+        // söylediyse SONUÇ satırı 'başarılı' yazılır ve ölçüm aracının plansız hata oranını şişirmez
+        // (pages.ts'teki page_screenshot expectFailure deseniyle aynı; artık her handle()'lı tool'da geçerli).
+        logStep('akış hatası ✕', `${runtimeErrors.length} adım hata ile bitti — platform HTTP 200 döndürdüğü için çağrı başarılı görünüyordu${expectFailure === true ? ' (expectFailure:true — kasıtlı negatif test)' : ''}`, runtimeErrors);
     }
     if (masked.length > 0) {
         logStep('maskeleme', `${masked.length} gizli alan yanıttan çıkarıldı — değer *** ile değiştirildi, yolu gatewayMasked'de`, masked);
@@ -144,6 +148,7 @@ export function toolResult(payload, config) {
     const enriched = {
         ...structured,
         ...(runtimeErrors.length > 0 ? { runtimeErrors } : {}),
+        ...(runtimeErrors.length > 0 && expectFailure === true ? { expectedFailure: true } : {}),
         ...(masked.length > 0 ? { gatewayMasked: masked } : {}),
         ...(Object.keys(tokenRefs).length > 0 ? { tokenRefs, tokenRefNote: "Maskelenen JWT'ler gateway içinde tutuldu; bu referansları page_screenshot / page_runtime_get 'asUser' alanına verebilirsiniz (15 dk geçerli). Jetonun kendisi yanıta ve günlüğe hiç girmez." } : {}),
         ...(truncated ? { truncated: true, truncationNote: 'Liste, yanıt boyutu sınırı nedeniyle kırpıldı; sayfalama ya da daha dar filtre kullanın.' } : {})
@@ -155,7 +160,8 @@ export function toolResult(payload, config) {
 }
 export function toolError(error) {
     logError(error);
-    const message = error instanceof PlatformApiError
+    // Politika durdurması bilinçli bir karardır, "beklenmeyen" değil (33/S-5).
+    const message = error instanceof PlatformApiError || error instanceof PolicyBlockError
         ? error.message
         : error instanceof Error
             ? `Beklenmeyen gateway hatası: ${error.message}`
@@ -168,7 +174,13 @@ export function toolError(error) {
 export function handle(config, run) {
     return async (args) => {
         try {
-            return toolResult(await run(args), config);
+            // Tool'un kendi input şeması `expectFailure: z.boolean().optional()` taşıyorsa (ör.
+            // microservice_execute, automation_preview) burada otomatik okunur ve toolResult'a geçirilir
+            // — kasıtlı negatif testler (yanlış parola, yetkisiz erişim, iş kuralı ihlali) ölçüm
+            // aracının plansız hata oranını şişirmez. Şemasında bu alan olmayan tool'larda args'ta
+            // anahtar hiç bulunmaz, davranış değişmez.
+            const expectFailure = args?.expectFailure === true;
+            return toolResult(await run(args), config, expectFailure);
         }
         catch (error) {
             return toolError(error);

package/dist/platform/screenshot.js

@@ -1,6 +1,13 @@
 import { PlatformApiError } from './errors.js';
 import { INTERNAL_ROLE_SEPARATOR, knownInternalRoles } from '../knowledge/componentCatalog.js';
 import { logStep } from '../observability/trace.js';
+/**
+ * Ziyaretçinin tema tercihinin yaşadığı localStorage anahtarı — `theme-toggle` bunu yazar,
+ * `Theme` okur ve projenin kendi modunun önüne geçirir
+ * (`zeyrek-frontend/packages/ng-apps-ui/src/shared/theme/stores.ts`). Anahtar uygulama başına
+ * DEĞİL tarayıcı başına tektir.
+ */
+const VIEWER_MODE_STORAGE_KEY = 'zeyrek-viewer-theme-mode';
 /**
  * G-24 — gateway sayfayı kurabiliyor, okuyabiliyor ve çizdirebiliyordu ama üzerinde OLAY
  * TETİKLEYEMİYORDU: "filtre değişince veri yenileniyor" iddiası yalnız şema okumasıyla
@@ -505,7 +512,7 @@ export class StudioScreenshotter {
             });
             context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: 1 });
         }
-        logStep('tarayıcı →', `GET ${request.url} · viewport ${request.viewport.width}x${request.viewport.height}${request.fullPage ? ' · fullPage' : ''}${request.token ? '' : ' · gateway jetonu YOK'}${(request.cookies ?? []).length > 0 ? ` · caller çerezleri: ${(request.cookies ?? []).map(cookie => cookie.name).join(', ')}` : ''}${request.token || (request.cookies ?? []).length > 0 ? '' : ' · ANONİM (çerez YOK)'}`);
+        logStep('tarayıcı →', `GET ${request.url} · viewport ${request.viewport.width}x${request.viewport.height}${request.fullPage ? ' · fullPage' : ''}${request.token ? '' : ' · gateway jetonu YOK'}${(request.cookies ?? []).length > 0 ? ` · caller çerezleri: ${(request.cookies ?? []).map(cookie => cookie.name).join(', ')}` : ''}${request.token || (request.cookies ?? []).length > 0 ? '' : ' · ANONİM (çerez YOK)'}${request.colorScheme ? ` · tema ${request.colorScheme}` : ''}`);
         try {
             const cookies = new Map();
             if (request.token)
@@ -515,6 +522,16 @@ export class StudioScreenshotter {
             if (cookies.size > 0) {
                 await context.addCookies([...cookies].map(([name, value]) => ({ name, value, url: request.cookieUrl, httpOnly: false })));
             }
+            // Tema tercihi çerezde değil localStorage'da yaşar ve tema store'u değerini modül İLK
+            // değerlendirildiğinde okur: sayfa açıldıktan sonra yazmak bir sonraki yüklemeye kadar
+            // etkisizdir. Bu yüzden tercih, sayfanın script'lerinden önce koşan bağlam script'iyle
+            // ekilir. Yeteneği olmayan bağlamda çağrı SESSİZCE açık temada kare almaz, hata verir.
+            if (request.colorScheme) {
+                if (!context.addInitScript) {
+                    throw new PlatformApiError(`colorScheme='${request.colorScheme}' uygulanamadı: tarayıcı bağlamı addInitScript desteklemiyor. Tema tercihi sayfa açılmadan ekilmek zorunda; desteksiz bağlamda kare projenin varsayılan modunda çıkardı ve bu sessizce yanlış olurdu.`);
+                }
+                await context.addInitScript(`try { localStorage.setItem(${JSON.stringify(VIEWER_MODE_STORAGE_KEY)}, ${JSON.stringify(request.colorScheme)}) } catch (error) { /* localStorage kapalıysa proje varsayılanı çizilir */ }`);
+            }
             const page = await context.newPage();
             // Soğuk Vite derlemesinde sayfanın kendi veri isteği 15 sn'yi aşabiliyor; delayMs bu
             // bütçeyi de uzatır (09-02 E-2). Yanıt hazırlık döngüsünü BLOKLAMAZ: runtime dışına

package/dist/resources/examples/flow-call-function.json

@@ -0,0 +1,66 @@
+{
+  "_meta": {
+    "synthetic": true,
+    "note": "Bir butonun click olayına bağlanan akış: 'function' adımı kullanıcı fonksiyonunu çağırır (fiyat komponent prop'undan, adet sabit), sonraki setter sonucu Steps.<adımAdı>.data'dan okuyup metne yazar. Canlı kanıt: 2026-09-08/09 fonksiyon-demo sayfası (kabul senaryosu 2 → 30). Şekil backend StepManagementSchema + ng-apps-flow tasks/function/function.ts okunarak kuruldu.",
+    "harvestedFrom": "kod + canlı doğrulama: zeyrek-frontend packages/ng-apps-flow/src/tasks/function, zeyrek-backend Contexts/Studio/Flows/StepArgument (UiFunctionId/UiFunctionName) (2026-09-09)"
+  },
+  "_rules": {
+    "functionId": "args.functionId ZORUNLU ve uygulamada var olmalı — backend 422 UiFunctionNotFound, gateway FLOW-024 (block). Id'yi function_list'ten alın. Runtime fonksiyonu ÖNCE id ile çözer (K9); functionName gösterim ve yedektir.",
+    "parameters": "parameters[].name bildirimdeki parametre adıyla eşleşir; value şekli microservice adımıyla aynı (static · property · storage · state · variable · code · page · item). Eksik zorunlu parametre adımı 'Functions.<ad>: \"<param>\" is required' ile düşürür; tanınmayan ad sessizce düşer — FLOW-024 ikisini de uyarır.",
+    "output": "Çıktı Steps.<adım ADI>.data (stepId değil — machine.setStorage(task.name, …)); hata Steps.<ad>.error.message (nesne). Setter'ın storage okuması mapping.source: 'hesapla.data' ile yapılır (setter.ts:161 mapping.source doluysa value.ref okunmaz).",
+    "branchName": "Dal adı 'always' (motor anahtarı, FLOW-004). Son adımın dalı nextStepId: null ile biter; 'end' adımı koyma (FLOW-023).",
+    "binding": "Akışı olaya bağlamak ayrı adımdır: page_schema_patch set_event { target: 'btn_hesapla', event: 'click', eventValue: '<flow id>' }.",
+    "async": "isAsync=true fonksiyon bu adımdan güvenle çağrılır (Promise beklenir); {{ }} bağlamasında ise '[object Promise]' olur."
+  },
+  "flowCreateArgs": {
+    "host": "page",
+    "hostId": "<page id>",
+    "name": "btn_hesapla - click",
+    "slug": "btn-hesapla-click",
+    "steps": [
+      {
+        "stepId": "start",
+        "name": "start",
+        "type": "start",
+        "kind": "normal",
+        "args": {},
+        "branches": [ { "name": "always", "nextStepId": "hesapla" } ]
+      },
+      {
+        "stepId": "hesapla",
+        "name": "hesapla",
+        "type": "function",
+        "kind": "normal",
+        "args": {
+          "functionId": "<function_list id — toplamHesapla>",
+          "functionName": "toplamHesapla",
+          "parameters": [
+            { "name": "fiyat", "value": { "type": "property", "ref": { "source": "component", "element": "num_fiyat", "property": "value" } } },
+            { "name": "adet", "value": { "type": "static", "ref": 3 } }
+          ]
+        },
+        "branches": [ { "name": "always", "nextStepId": "yaz" } ]
+      },
+      {
+        "stepId": "yaz",
+        "name": "yaz",
+        "type": "setter",
+        "kind": "normal",
+        "args": {
+          "iteratees": [
+            {
+              "type": "change",
+              "element": "txt_sonuc",
+              "property": "content",
+              "source": "component",
+              "mapping": { "source": "hesapla.data", "mappings": {} },
+              "value": { "type": "storage", "ref": "" }
+            }
+          ]
+        },
+        "branches": [ { "name": "always", "nextStepId": null } ]
+      }
+    ]
+  },
+  "bindEvent": { "op": "set_event", "target": "btn_hesapla", "event": "click", "eventValue": "<flow id>" }
+}

package/dist/resources/examples/function-total.json

@@ -0,0 +1,70 @@
+{
+  "_meta": {
+    "synthetic": true,
+    "note": "toplamHesapla(fiyat, adet = 1) = fiyat * adet — aynı gövde İKİ KAYNAKTA: source:'studio' (uygulama kapsamlı, tarayıcı: {{ }} bağlaması ve UI flow 'code'/'function' adımı) ve source:'workflow' (sunucu: workflow/middleware/automation ifadesinde çıplak ad). Kod ve parametre biçimi aynıdır, fark nerede çalıştığıdır. Canlı kanıt: 2026-09-10 fonksiyon-demo sayfası ({{ Functions.toplamHesapla(10, 3) }} → 30) ve workflow_preview code adımı (return toplamHesapla(10, 3) → 30).",
+    "harvestedFrom": "kod + canlı doğrulama: zeyrek-backend Contexts/Studio/GlobalFunctions, zeyrek-frontend packages/ng-apps-flow/src/functions (2026-09-10)"
+  },
+  "_rules": {
+    "body": "Gövde DÜZ deyimlerdir, iki kaynakta aynı: 'return fiyat * adet;'. function (…) { } sarmalı ya da arrow yazılmaz. return serbesttir; dönüşsüz gövde undefined döner. Platform kaydetmeden sözdizimini ayrıştırır (422 GlobalFunctionBodyInvalid).",
+    "parameters": "Bildirim SIRALIDIR ve çağrı KONUMSALDIR (K5): toplamHesapla(10, 3) → fiyat=10, adet=3. defaultValue argüman undefined kalınca uygulanır; required kontrolü ondan SONRA çalışır ve 'toplamHesapla: \"fiyat\" is required' (studio'da 'Functions.toplamHesapla: …') fırlatır. type yalnız Studio imzası içindir, çalışma zamanı tip denetlemez.",
+    "scope": "Yalnız source:'studio'. application: her sayfada (tarayıcı). page: yalnız o sayfanın tarayıcı bağlamında, pageId zorunlu. Ad uygulama içinde kapsamlar arası benzersizdir (K3); workflow adı tenant içinde benzersizdir. Aynı ad iki kaynakta yan yana olabilir.",
+    "isAsync": "Yalnız studio'da anlamlı; false bırakın: true olsaydı {{ }} bağlaması '[object Promise]' çizerdi. await gerekmeyen gövdede isAsync:true FN-004 uyarısı alır. workflow kaynağında true FN-004 block (motor senkron).",
+    "naming": "Ad JS tanımlayıcısı; ayrılmış sözcük olamaz. studio'da 'Functions' yasak (FN-001, block); workflow'da motor global adları (system, input, Now, crypto…) yasak (FN-001, block). Uygulama fonksiyonunda sayfaya özgü ad (komponent adı, state.page), workflow fonksiyonunda adım adı kullanmayın — çağrıldığı yerde yoksa 'X is not defined'.",
+    "source": "workflow: SUNUCU, tenant geneli, applicationId/scope/pageId VERİLMEZ, isAsync olamaz, çıplak adla çağrılır. studio: TARAYICI, applicationId + scope zorunlu (application: her sayfada; page: yalnız o sayfa, pageId zorunlu), Functions.<ad>() ile çağrılır. Kaynak sonradan değişmez; sunucu ifadesinde Functions.<ad>( → WF-030 block."
+  },
+  "functionCreateArgs": {
+    "source": "studio",
+    "applicationId": "<application id>",
+    "scope": "application",
+    "name": "toplamHesapla",
+    "description": "fiyat × adet; adet verilmezse 1 sayılır",
+    "isAsync": false,
+    "parameters": [
+      {
+        "name": "fiyat",
+        "type": "number",
+        "required": true,
+        "description": "Birim fiyat"
+      },
+      {
+        "name": "adet",
+        "type": "number",
+        "defaultValue": 1,
+        "description": "Adet; verilmezse 1"
+      }
+    ],
+    "body": "return fiyat * adet;"
+  },
+  "workflowFunctionCreateArgs": {
+    "source": "workflow",
+    "name": "toplamHesapla",
+    "description": "fiyat × adet; adet verilmezse 1 sayılır",
+    "parameters": [
+      {
+        "name": "fiyat",
+        "type": "number",
+        "required": true,
+        "description": "Birim fiyat"
+      },
+      {
+        "name": "adet",
+        "type": "number",
+        "defaultValue": 1,
+        "description": "Adet; verilmezse 1"
+      }
+    ],
+    "body": "return fiyat * adet;"
+  },
+  "usage": {
+    "propBinding": {
+      "op": "set_binding",
+      "target": "txt_toplam",
+      "prop": "content",
+      "expression": "{{ Functions.toplamHesapla(10, 3) }}"
+    },
+    "uiFlowCodeStep": "const toplam = Functions.toplamHesapla(num_fiyat.value, num_adet.value);\nstate.page.sonuc = toplam;",
+    "uiFlowFunctionStep": "ngapps://examples/flow-call-function",
+    "workflowCodeStep": "return { toplam: toplamHesapla(10, 3) };",
+    "automationCondition": "toplamHesapla(row.fiyat, row.adet) > 1000"
+  }
+}

package/dist/resources/examples/microfunction-node-sum.json

@@ -0,0 +1,56 @@
+{
+  "_meta": {
+    "synthetic": false,
+    "note": "test-project/development ortamında gerçek uçta doğrulandı (2026-09-11): publish:true ile kayıt 'publishing' döndü ve 'published' oldu (publishedReference zf-test-project-development-...), microfunction_invoke {a:1,b:2} → ok:true output {total:3, environment:'development'}, aynı akışa bağlı microservice_execute → 200 {total:3}. Kurallar: inline kaynakta entrypoint GÖNDERİLMEZ (sabit function.handler); timeoutSeconds ve memoryMb non-nullable int'tir, eksik gönderilirse platform 422 döner; adım rule.microfunctionId YALNIZ published kaydı gösterebilir (WF-MF-001)."
+  },
+  "microfunction": {
+    "name": "toplam",
+    "description": "İki sayıyı toplar ve hangi ortamda koştuğunu döner.",
+    "language": "node",
+    "provider": "built-in",
+    "sourceKind": "inline",
+    "code": "exports.handler = async (args, context) => {\n  return { total: (args.a ?? 0) + (args.b ?? 0), environment: context.environment }\n}\n",
+    "parameterDtoId": "<girdi DTO id: { a: number, b: number }>",
+    "parameterBehavior": "object",
+    "returnDtoId": "<çıktı DTO id: { total: number, environment: string }>",
+    "returnBehavior": "object",
+    "timeoutSeconds": 30,
+    "memoryMb": 256,
+    "publish": true
+  },
+  "workflowStep": {
+    "id": "<GUID-3>",
+    "name": "toplam",
+    "type": "microfunction",
+    "description": "Girdideki iki sayıyı microfunction'da toplar.",
+    "rule": {
+      "microfunctionId": "<yukarıdaki kaydın id'si; status published olmalı>",
+      "expression": "({ a: input.a, b: input.b })"
+    },
+    "branches": [
+      {
+        "id": "<GUID-4>",
+        "name": "success",
+        "type": "success",
+        "nextStepId": "<response adımının id'si>"
+      },
+      {
+        "id": "<GUID-5>",
+        "name": "fail",
+        "type": "fail",
+        "nextStepId": null
+      }
+    ]
+  },
+  "responseStep": {
+    "id": "<GUID-6>",
+    "name": "Respond",
+    "type": "response",
+    "description": "Toplamı çağırana döner.",
+    "rule": {
+      "dataTransferObjectId": "<çıktı DTO id>",
+      "expression": "({ total: Steps.toplam.data.total })"
+    },
+    "branches": []
+  }
+}

package/dist/resources/examples/page-dynamic-form.json

@@ -25,7 +25,7 @@
       "page_container (container, isWrapper:true — tema değişkenleri ve ortalanmış sütun BURADA)",
       "├─ t_title (text, h1)",
       "├─ t_desc  (text, p)",
-      "├─ q_form (form, isWrapper:false, hideBorders+hidePadding)",
+      "├─ q_form (form, isWrapper:false, style: border none + padding 0)",
       "│  └─ q_list (repeater, isWrapper:false, rows:[], autoRowSize:true, verticalSpacing:14)",
       "│     └─ q_card (container, isWrapper:false)            ← ŞABLONUN KÖKÜ",
       "│        ├─ q_head (text)      y:0   content: {{ item.no + '. ' + item.text + (item.required ? ' *' : '') }}",

package/dist/resources/examples/page-sign-in.json

@@ -64,7 +64,7 @@
       "parent": "auth_layout",
       "component": {
         "elementId": "sign_in_form", "kind": "component", "type": "form", "name": "sign_in_form",
-        "props": { "title": { "type": "static", "data": "Giriş" }, "hideBorders": { "type": "static", "data": true } },
+        "props": { "title": { "type": "static", "data": "Giriş" }, "style": { "type": "static", "data": { "border": { "type": "static", "data": "none" } } } },
         "states": { "isSticky": false, "isDroppable": true, "isScrollable": false, "isWrapper": true },
         "blocks": [{ "breakpoint": 1024, "size": { "h": 24, "w": 12 }, "position": { "x": 0, "y": 4 } }],
         "children": [], "events": [], "validations": [], "stateBindings": []

package/dist/resources/guides/component.md

@@ -96,7 +96,7 @@ Her şema düğümünde iki sözlük vardır; ikisi de ortak render katmanında
 |---|---|
 | `isDroppable` | İçine komponent alır (container/form/repeater true) |
 | `isScrollable` | İçeriği kendi alanında kaydırır (sabit yükseklikte `overflow-y: auto`) |
-| `isWrapper` | Sayfanın/layout'un/widget'ın ANA kabı — salt düzen elemanı: `height:100%` + **`min-height:80vh`**, kap başlığı ÇİZİLMEZ. **Yalnız sayfa boyu kaplaması gereken tek kap için kullan:** iç içe kutuya verirsen 720px'lik pencerede o kutu 36px içerikle bile 576px çizilir (ölçüldü, `platform_guide('page')` Kural 1f). Çerçeve/başlık gizlemek için wrapper değil `style` / `hideBorders` kullan. Kurulmuş bir düğümün bayrağını `resize_component` micro-op'unun `states` alanı değiştirir — düğümü yeniden kurmak gerekmez |
+| `isWrapper` | Sayfanın/layout'un/widget'ın ANA kabı — salt düzen elemanı: `height:100%` + **`min-height:80vh`**, kap başlığı ÇİZİLMEZ. **Yalnız sayfa boyu kaplaması gereken tek kap için kullan:** iç içe kutuya verirsen 720px'lik pencerede o kutu 36px içerikle bile 576px çizilir (ölçüldü, `platform_guide('page')` Kural 1f). Çerçeve/başlık gizlemek için wrapper değil `style` (`border:'none'`) kullan. Kurulmuş bir düğümün bayrağını `resize_component` micro-op'unun `states` alanı değiştirir — düğümü yeniden kurmak gerekmez |
 | `isSticky` | Kaydırmada yerinde kalır (header/sidebar; z-index'i otomatik) |
 | `isFloating` | Düğümü akıştan çıkarıp yüzdürür (katman davranışı; nadir) |
 | `isQuickStack` | Studio'nun Quick Stack iskelet hücresi işareti — editörde kesikli çerçeve çizer, **runtime'da hiçbir etkisi yoktur**. MCP'den iskelet kurarken yazmak serbesttir ama gerekmez |
@@ -163,6 +163,18 @@ düz URL string'i değil **dosya nesnesi** ister: `{ absolute_path, display_name
 `{ absolute_path: '<url>', display_name: '<ad>' }` biçimine çevir. Komponentin kendi sözleşmesi
 için `component_get` `propNotes`.
 
+## Tasarımcı toolbar'ı: `designer.toolbar` (studio'ya özel, kataloğa girmez)
+
+Studio kanvasında seçili komponentin yanında çıkan bant, komponentin **kendi 2–4 prop'unu**
+tek tıkla değiştirir (`textinput`: Disabled · Readonly · Size). Liste komponentin kendi
+`schema.ts`'inde `designer.toolbar` olarak durur; kontrol prop tipinden türer (switch → toggle,
+≤ 4 seçenekli radio/dropdown/switcher → kısa metin grubu, fazlası açılır liste, number → sayı
+alanı). Kural üretimde denetlenir: en fazla 4 ad, ad şemada var, tip izinli, `designer.hide`
+ve `layout` grubundaki adlar giremez. **MCP tarafında karşılığı yoktur:** `designer` bloğu
+`components.json`'a ve `component_get` yanıtına girmez; toolbar'daki her prop zaten sıradan
+bir prop'tur, `set_prop` ile aynı şekilde yazılır. Bu bilgi yalnız "studio'da neden o
+düğmeler var" sorusuna cevaptır.
+
 ## Komponent seçimi
 
 "Hangi işe hangi komponent" tablosu ve `table` / `datatable` karşılaştırması: