@mesgflow/ui-kit 0.6.0 → 0.8.0

package/types/mesgflow-ui-kit-dialog.d.ts

@@ -1,14 +1,23 @@
 import * as _angular_core from '@angular/core';
+import { Signal, ComponentRef, TemplateRef } from '@angular/core';
 import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
 import * as i1 from '@angular/cdk/drag-drop';
 import { DialogRef } from '@angular/cdk/dialog';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
 import { ComponentType } from '@angular/cdk/portal';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
 type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-/** `'center'` (varsayılan, klasik modal) ya da `'right'` (sağdan açılan drawer) — bkz. `DialogService.openDrawer()`. */
-type DialogPlacement = 'center' | 'right';
+/**
+ * `'center'` (varsayılan, klasik modal) ya da bir kenar çekmecesi. `start`/`end`
+ * MANTIKSAL (RTL'de çevrilir), `left`/`right` fiziksel; `top`/`bottom` tam
+ * genişlikte üst/alt panel. Bkz. `DialogService.openDrawer()` ve `<mf-drawer>`.
+ */
+type DialogPlacement = 'center' | 'start' | 'end' | 'left' | 'right' | 'top' | 'bottom';
+/** Çekmecenin FİZİKSEL kenarı — yerleşim + yazı yönünden türetilir. */
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 interface DialogOptions<D> {
     data?: D;
     size?: DialogSize;
@@ -20,6 +29,12 @@ interface DialogOptions<D> {
     draggable?: boolean;
     /** Sağ-alt köşede serbest boyutlandırma tutamacı gösterir. Drawer'da etkisiz. */
     resizable?: boolean;
+    /**
+     * < 640px'te panel alttan açılan bir sheet'e dönüşsün mü. Varsayılan `true`
+     * (orta ve yan paneller); `top`/`bottom` zaten tam genişlik olduğu için etkisiz.
+     * Mobilde de soldan açılması gereken bir gezinme çekmecesi için `false`.
+     */
+    sheetOnMobile?: boolean;
     /** `true` ise ESC/backdrop tıklaması kapatmaz (programatik `dialogRef.close()` yine çalışır). */
     disableClose?: boolean;
     ariaLabel?: string;
@@ -91,6 +106,8 @@ interface DialogCustomSize {
 declare class DialogSurface {
     readonly size: _angular_core.WritableSignal<DialogSize>;
     readonly placement: _angular_core.WritableSignal<DialogPlacement>;
+    /** Çekmecenin fiziksel kenarı (`center`'da `null`) — `DialogService` yön bilgisiyle çözer. */
+    readonly side: _angular_core.WritableSignal<DrawerSide | null>;
     readonly maximizable: _angular_core.WritableSignal<boolean>;
     readonly draggable: _angular_core.WritableSignal<boolean>;
     readonly resizable: _angular_core.WritableSignal<boolean>;
@@ -145,9 +162,20 @@ declare class Dialog {
      * kuralının uygulama noktası: dialog gövdesi + içerik aynı anda kaymaz.
      */
     readonly fillBody: _angular_core.InputSignal<boolean>;
+    /**
+     * `true` (varsayılan): kapat (X) düğmesi `close` olayını yayınladıktan SONRA
+     * dialog'u kendisi de kapatır (`MfDialogRef.close()` — idempotent, tüketicinin
+     * `(close)` handler'ında sonuçla yaptığı kapanış önce davranır ve kazanır).
+     * `false`: yalnızca `close` yayınlanır — kapanışı tamamen tüketici yönetir.
+     */
+    readonly autoClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly close: _angular_core.OutputEmitterRef<void>;
     protected readonly surface: DialogSurface;
     protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfDialogLabels>;
+    /** Görünür başlığın id'si — CDK konteynerinin `aria-labelledby`'ı buna bağlanır. */
+    protected readonly titleId: string;
+    private readonly mfRef;
+    private readonly cdkRef;
     private readonly elementRef;
     private readonly cdkDrag;
     private readonly scrollBody;
@@ -169,6 +197,8 @@ declare class Dialog {
     protected readonly headerBorder: _angular_core.Signal<boolean>;
     protected readonly footerBorder: _angular_core.Signal<boolean>;
     constructor();
+    /** Kapat (X): önce `close` olayı (tüketici sonuçla kapatabilsin), sonra — `autoClose` ise — ref'in kendisi. */
+    protected onDismiss(): void;
     protected updateScrollShadow(): void;
     /**
      * Ctrl/Cmd+Enter — tek yerde çözülür, her form bedava kazanır. Kaydet düğmesi
@@ -179,9 +209,72 @@ declare class Dialog {
      */
     protected requestSubmit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dialog, "mf-dialog", ["mfDialog"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fillBody": { "alias": "fillBody"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["[dialog-header]", "*", "[dialog-footer]"], true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dialog, "mf-dialog", ["mfDialog"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fillBody": { "alias": "fillBody"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["[dialog-header]", "*", "[dialog-footer]"], true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
 }
 
+/** `open` → (`close()` çağrıldı, çıkış animasyonu oynuyor) `closing` → (dispose edildi) `closed`. */
+type DialogState = 'open' | 'closing' | 'closed';
+/**
+ * `DialogService.open()`/`openDrawer()`'ın döndürdüğü, kite ait dialog referansı.
+ *
+ * CDK `DialogRef`'in günlük kullanılan yüzeyini (`close`, `closed`,
+ * `componentInstance`, `disableClose`, `backdropClick`, `keydownEvents` …)
+ * birebir DELEGE eder — yani eski `ref.closed.subscribe(...)` kodu aynen derlenir.
+ * Üstüne kitin kendi dünyasını ekler:
+ *
+ * - `afterClosed()` — `await` edilebilir sonuç (çıkış animasyonu BİTTİKTEN sonra çözülür).
+ * - `state` — `'open' | 'closing' | 'closed'` signal'i (şablonda/`computed`'ta okunur).
+ * - `surface` — boyut/maximize/kirli-form durumuna tipli erişim (`setSize`, `toggleMaximize`,
+ *   `registerDirty`, `markClean` kısayolları).
+ * - `cdk` — ham CDK referansı (kaçış kapısı; ör. `updatePosition()`).
+ *
+ * `close()` İDEMPOTENT'tir: çıkış animasyonu sürerken ya da kirli-form onayı
+ * açıkken gelen ek çağrılar yok sayılır (bkz. `dialog.service.ts` `closePredicate`).
+ *
+ * İçerik component'i içinde `injectDialogRef<Sonuç>()` ile alınır.
+ */
+declare class MfDialogRef<R = unknown, C = unknown> {
+    readonly cdk: DialogRef<R, C>;
+    readonly surface: DialogSurface;
+    readonly closed: Observable<R | undefined>;
+    readonly backdropClick: Observable<MouseEvent>;
+    readonly keydownEvents: Observable<KeyboardEvent>;
+    readonly outsidePointerEvents: Observable<MouseEvent>;
+    readonly overlayRef: OverlayRef;
+    readonly id: string;
+    private readonly isClosed;
+    private readonly result;
+    /** Dialog'un yaşam döngüsü — `closing` çıkış animasyonu boyunca. */
+    readonly state: Signal<DialogState>;
+    constructor(cdk: DialogRef<R, C>, surface: DialogSurface);
+    /** Açılan component örneği (şablonla açıldıysa ve kapandıktan sonra `null`). */
+    get componentInstance(): C | null;
+    get componentRef(): ComponentRef<C> | null;
+    /** `true` iken ESC/backdrop kapatmaz; programatik `close()` yine çalışır. */
+    get disableClose(): boolean | undefined;
+    set disableClose(value: boolean | undefined);
+    /** Dialog'u (çıkış animasyonu + kirli-form koruması üzerinden) kapatır. İdempotent. */
+    close(result?: R): void;
+    /** Kapanış tamamlandığında (animasyon dahil) sonuçla çözülür; ESC/backdrop'ta `undefined`. */
+    afterClosed(): Promise<R | undefined>;
+    /** Açıkken genişlik basamağını değiştirir (`sm`…`xl`, `full`). */
+    setSize(size: DialogSize): void;
+    toggleMaximize(): void;
+    /** Kirli-form sorusunu kaydeder — ESC/backdrop/X kapanışında `true` dönerse onay sorulur. */
+    registerDirty(check: () => boolean): void;
+    /** Başarılı kayıttan hemen önce — sonraki `close()` kirli-form onayı sormaz. */
+    markClean(): void;
+}
+/**
+ * `DIALOG_DATA`'nın kite ait adı — AYNI token nesnesi, CDK'dan ayrıca import
+ * etmeye gerek kalmasın diye. `inject(MF_DIALOG_DATA)` ≡ `injectDialogData()`.
+ */
+declare const MF_DIALOG_DATA: _angular_core.InjectionToken<any>;
+/** İçerik component'inde `DialogService.open(..., { data })` ile geçilen veriyi okur. */
+declare function injectDialogData<D>(): D;
+/** İçerik component'inde kendi dialog referansını alır — `ref.close(sonuç)`. */
+declare function injectDialogRef<R = unknown, C = unknown>(): MfDialogRef<R, C>;
+
 /**
  * `<button mfDialogResizeHandle [ariaLabel]="...">` — `Dialog`'un (dialog.ts)
  * sağ-alt köşesinde, `DialogSurface.customSize`'ı besleyen serbest boyutlandırma
@@ -216,9 +309,10 @@ declare class DialogResizeHandle {
  * engelleme davranışının TAMAMI CDK'dan geliyor, burada TEKRAR YAZILMADI — bkz.
  * projects/ui-kit/README.md "a11y checklist" bölümündeki "elle yazmak son çare" ilkesi).
  *
- * İçerik component'i (tüketicinin kendi form component'i, ör. `ConfirmDialog`) `@angular/cdk/dialog`'un
- * KENDİ `DIALOG_DATA`/`DialogRef` token'larını doğrudan `inject()` eder — ekstra bir
- * sarmalayıcı token'a gerek yok. Boyut/placement/maximize/drag/resize/sheet durumu
+ * `open()` kite ait `MfDialogRef` döndürür (CDK `DialogRef` yüzeyini delege eder +
+ * `afterClosed()`/`state`/`surface`). İçerik component'i `injectDialogRef()`/
+ * `injectDialogData()` (bkz. dialog-ref.ts) kullanır — CDK'nın kendi `DialogRef`/
+ * `DIALOG_DATA` token'larını inject etmek de çalışmaya devam eder. Boyut/placement/maximize/drag/resize/sheet durumu
  * `DialogSurface` (bkz. o dosya) üzerinden, `providers` ile o dialog'un injector'ına
  * verilir — `Dialog` (dialog.ts) bunu DI'dan okuyarak render eder.
  *
@@ -231,11 +325,13 @@ declare class DialogResizeHandle {
  * Kapanış animasyonu: CDK'nın `DialogRef.close()`'u `overlayRef.dispose()`'u SENKRON
  * çağırıyor, bir "kapanıyor" olayı/kancası yok. `closePredicate` bunun için bilinçli
  * bir kaçamak — `false` döndürmek kapanmayı iptal ediyor: ilk çağrıda `surface.closing`'i
- * `true` yapıp gerçek kapanmayı `EXIT_MS` geciktiriyoruz (panel bu sürede `Dialog`'un
+ * `true` yapıp gerçek kapanmayı `exitDurationMs()` kadar geciktiriyoruz (panel bu sürede `Dialog`'un
  * kendi reaktif `animate-dialog-out`/`animate-sheet-out`/`animate-drawer-out` class'ıyla
  * görsel olarak kapanır), ikinci çağrıda (zaten `closing()===true`) gerçek `dispose()`'a
  * izin veriyoruz. ESC/backdrop/programatik `dialogRef.close(...)` HEPSİ bu predicate'ten
- * geçtiği için davranış tekdüze. `prefers-reduced-motion` gecikmeyi tamamen atlıyor —
+ * geçtiği için davranış tekdüze. Animasyon sürerken gelen EK `close()` çağrıları
+ * yok sayılır (`disposeArmed` yalnızca zamanlayıcı tarafından kurulur) — X düğmesi +
+ * tüketicinin `(close)` handler'ı aynı anda kapatsa bile animasyon kesilmez. `prefers-reduced-motion` gecikmeyi tamamen atlıyor —
  * AMA kirli-form kontrolünden SONRA: koruma reduced-motion kullanıcılarında da çalışmalı.
  *
  * **Kirli form koruması**: `surface.isDirty()` `true` dönerse kapanış iptal edilip
@@ -249,9 +345,14 @@ declare class DialogService {
     private readonly injector;
     private readonly breakpointObserver;
     private readonly labels;
+    private readonly dir;
     /** `ref` başına `DialogSurface` — tüketicinin kendi URL senkronizasyon mantığı, kirli-form durumunu PROAKTİF sormak için kullanabilir (kendi `closePredicate`'inin async akışıyla yarışmamak için). */
     private readonly surfaces;
-    open<R = void, D = undefined, C = unknown>(component: ComponentType<C>, options?: DialogOptions<D>): DialogRef<R, C>;
+    /**
+     * Bir component'i ya da bir `TemplateRef'i açar (şablon yolu `<mf-drawer>` gibi
+     * bildirimsel sarmalayıcılar içindir — şablonun injector'ı da `DialogSurface'i görür).
+     */
+    open<R = void, D = undefined, C = unknown>(component: ComponentType<C> | TemplateRef<C>, options?: DialogOptions<D>): MfDialogRef<R, C>;
     /**
      * Kayıt oluştur/düzenle formlarının TEK açılış noktası — sağdan drawer.
      * `maximizable` bilerek zorla kapatılıyor: drawer zaten tam yükseklik, büyütme
@@ -261,7 +362,9 @@ declare class DialogService {
      * genişlikte açılmalı. İstisna: iki sütunlu bir form (sol dikey ray + sağ
      * panel gibi) `md` içine sığmazsa `xl` (960px) geçilebilir.
      */
-    openDrawer<R = void, D = undefined, C = unknown>(component: ComponentType<C>, options?: Omit<DialogOptions<D>, 'placement'>): DialogRef<R, C>;
+    openDrawer<R = void, D = undefined, C = unknown>(component: ComponentType<C>, options?: Omit<DialogOptions<D>, 'placement'> & {
+        placement?: Exclude<DialogPlacement, 'center'>;
+    }): MfDialogRef<R, C>;
     /** `Promise<boolean>` döner — `if (await dialog.confirm(...))` çağıran taraf için `.subscribe()` zincirinden daha sade. */
     confirm(data: ConfirmDialogData): Promise<boolean>;
     /**
@@ -276,8 +379,12 @@ declare class DialogService {
      * kaldırıldı).
      */
     confirmDiscard(): Promise<boolean>;
-    /** Tüketici bir ref'i kapatmadan ÖNCE kirli mi diye sormak istiyorsa — kendi `closePredicate`'inin async akışıyla yarışmamak için `DialogSurface`'e doğrudan erişim. */
-    getSurface(ref: DialogRef<any, any>): DialogSurface | undefined;
+    /**
+     * Tüketici bir ref'i kapatmadan ÖNCE kirli mi diye sormak istiyorsa — kendi `closePredicate`'inin
+     * async akışıyla yarışmamak için `DialogSurface`'e doğrudan erişim. `MfDialogRef` için
+     * `ref.surface` tercih edilir; ham CDK ref'i (ör. içerikte inject edilen) de kabul edilir.
+     */
+    getSurface(ref: DialogRef<any, any> | MfDialogRef<any, any>): DialogSurface | undefined;
     /** `confirm()`'in silme kısayolu — `tone:'danger'` + varsayılan "Sil" etiketi. */
     confirmDelete(data: Omit<ConfirmDialogData, 'tone'>): Promise<boolean>;
     /** Tek butonlu bilgilendirme modu — sonuç önemsiz olduğu için `Promise<void>` döner. */
@@ -335,8 +442,9 @@ declare class DialogService {
 declare const dialogVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
     state?: "normal" | "maximized" | "sheet" | "drawer" | null | undefined;
+    side?: "left" | "right" | "top" | "bottom" | "none" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DialogVariants = VariantProps<typeof dialogVariants>;
 
-export { ConfirmDialog, Dialog, DialogResizeHandle, DialogService, DialogSurface, dialogVariants };
-export type { ConfirmDialogData, ConfirmTone, DialogCustomSize, DialogOptions, DialogPlacement, DialogSize, DialogVariants };
+export { ConfirmDialog, Dialog, DialogResizeHandle, DialogService, DialogSurface, MF_DIALOG_DATA, MfDialogRef, dialogVariants, injectDialogData, injectDialogRef };
+export type { ConfirmDialogData, ConfirmTone, DialogCustomSize, DialogOptions, DialogPlacement, DialogSize, DialogState, DialogVariants, DrawerSide };

package/types/mesgflow-ui-kit-drawer.d.ts

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { DialogPlacement } from '@mesgflow/ui-kit/dialog';
+
+type DrawerPlacement = Exclude<DialogPlacement, 'center'>;
+/**
+ * `<mf-drawer [(open)]="filtersOpen" title="Filtreler" placement="end" size="sm">…</mf-drawer>`
+ *
+ * Bildirimsel çekmece (sheet) — `DialogService.openDrawer()`'ın şablon
+ * sürümü: içerik bir component yazmadan doğrudan şablonda durur, açık/kapalı
+ * durumu `open` modeliyle iki yönlü bağlanır.
+ *
+ * - `placement`: `start` / `end` (mantıksal, RTL'de çevrilir), `left` / `right`,
+ *   `top` / `bottom`. Her kenar kendi kayma animasyonuyla açılır.
+ * - Dialog altyapısının TÜM davranışı: odak tuzağı + geri dönüş, Escape,
+ *   backdrop tıklaması, çıkış animasyonu, kirli-form koruması, cam yüzey.
+ * - `<div drawer-footer>` slotu sabit altbilgiye gider (Kaydet/İptal).
+ * - `sheetOnMobile="false"`: mobilde de kenardan açılır (gezinme çekmeceleri).
+ */
+declare class Drawer {
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly placement: _angular_core.InputSignal<DrawerPlacement>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
+    /** `true` ise Escape/backdrop kapatmaz — yalnızca programatik `open.set(false)`. */
+    readonly disableClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly sheetOnMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Görünür başlık yoksa ekran okuyucu için ad. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Kapanış tamamlandığında (animasyon dahil). */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly dialog;
+    private readonly panel;
+    private ref;
+    constructor();
+    /** Programatik kapatma — `open.set(false)` ile eşdeğer. */
+    hide(): void;
+    private show;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "mf-drawer", ["mfDrawer"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "sheetOnMobile": { "alias": "sheetOnMobile"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[drawer-footer]"], true, never>;
+}
+
+export { Drawer };
+export type { DrawerPlacement };

package/types/mesgflow-ui-kit-field.d.ts

@@ -1,15 +1,17 @@
 import * as _angular_core from '@angular/core';
 
 /**
- * `<mf-field label="E-posta" [error]="emailError()">
- *    <input mfInput type="email" [id]="..." />
+ * `<mf-field label="E-posta" for="email" [error]="emailError()" hint="İş adresiniz">
+ *    <input mfInput id="email" type="email" />
  *  </mf-field>`
- * `for`/`id` eşleşmesi (a11y) ÇAĞIRAN ekranın sorumluluğunda — bu component
- * label'ı otomatik bir input'a bağlamıyor (projected content'in id'sini bilmiyor).
  *
- * `error`, `string | undefined` kabul eder (sadece `string` DEĞİL) — çağıran
- * genelde `shared/forms/http-error.ts`'teki `resolveFieldError()`'ı doğrudan
- * bağlar, o da hata yokken `undefined` döner (boş string'e zorlamaya gerek yok).
+ * `for` verildiğinde alan, içindeki `#for` kontrolünü OTOMATİK bağlar:
+ * - `aria-describedby` → ipucu/hata metninin id'si (kontrolün mevcut
+ *   describedby değerleri korunur, yalnızca kendi id'lerini ekler/çıkarır),
+ * - `aria-invalid="true"` → hata varken,
+ * - `aria-required="true"` → `required` iken.
+ * Hata metni `role="alert"` DEĞİL, `aria-live="polite"` — her tuş vuruşunda
+ * ekran okuyucuyu kesmesin. `error` `string | undefined` kabul eder.
  */
 declare class Field {
     readonly label: _angular_core.InputSignal<string>;
@@ -17,8 +19,15 @@ declare class Field {
     readonly hint: _angular_core.InputSignal<string>;
     readonly error: _angular_core.InputSignal<string | undefined>;
     readonly required: _angular_core.InputSignal<boolean>;
-    /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`) — projected içeriğin kendi tek scroll alanı olduğu durumlar için (ör. uzun bir liste içeren form, bkz. `Dialog.fillBody`). */
+    /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`). */
     readonly grow: _angular_core.InputSignal<boolean>;
+    private readonly host;
+    private readonly baseId;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    /** Şu an görünen açıklama metninin id'si (hata ipucunun yerine geçer). */
+    protected readonly describedId: _angular_core.Signal<string | null>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Field, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Field, "mf-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/types/mesgflow-ui-kit-file-upload.d.ts

@@ -0,0 +1,64 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { DropzoneRejection } from '@mesgflow/ui-kit/dropzone';
+
+type UploadStatus = 'queued' | 'uploading' | 'done' | 'error';
+interface UploadItem {
+    id: string;
+    file: File;
+    /** 0–100 */
+    progress: number;
+    status: UploadStatus;
+    error?: string;
+}
+/**
+ * Yükleme işlevi — ilerlemeyi `report(0..100)` ile bildirir, iptal için
+ * `signal`'i dinler; başarıda çözülür, hatada `Error` fırlatır.
+ */
+type Uploader = (file: File, report: (percent: number) => void, signal: AbortSignal) => Promise<void>;
+/** İnsan okunur boyut — birimler evrensel (B/KB/MB/GB), sayı biçimi yerele göre. */
+declare function formatBytes(bytes: number, locale?: string): string;
+/**
+ * `<mf-file-upload [uploader]="upload" [(items)]="files" accept="image/*" multiple />`
+ *
+ * Sürükle-bırak alanı + dosya listesi. `uploader` verilirse bileşen yüklemeyi
+ * KENDİSİ yürütür: eşzamanlı en çok `concurrency` dosya, dosya başına ilerleme
+ * çubuğu, iptal (AbortSignal), hatada "Yeniden dene". Verilmezse yalnızca
+ * listeyi tutar (tüketici `items`'ı kendisi günceller).
+ *
+ * Her satırın durumu `aria-live` ile duyurulur; ilerleme `role="progressbar"`.
+ */
+declare class FileUpload {
+    readonly items: _angular_core.ModelSignal<UploadItem[]>;
+    readonly uploader: _angular_core.InputSignal<Uploader | null>;
+    readonly accept: _angular_core.InputSignal<string>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly maxSizeBytes: _angular_core.InputSignal<number | null>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Aynı anda yüklenecek en çok dosya. */
+    readonly concurrency: _angular_core.InputSignal<number>;
+    readonly rejected: _angular_core.OutputEmitterRef<DropzoneRejection[]>;
+    readonly removed: _angular_core.OutputEmitterRef<UploadItem>;
+    /** Tüm kuyruk bittiğinde (başarılı + başarısız). */
+    readonly settled: _angular_core.OutputEmitterRef<UploadItem[]>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfFileUploadLabels>;
+    private readonly controllers;
+    protected readonly listLabel: _angular_core.Signal<string>;
+    constructor();
+    protected size(bytes: number): string;
+    protected iconFor(item: UploadItem): string;
+    protected statusText(item: UploadItem): string;
+    protected add(files: File[]): void;
+    protected retry(item: UploadItem): void;
+    protected remove(item: UploadItem): void;
+    /** Kuyruğu işletir — boş yuva kadar `queued` öğeyi başlatır. */
+    private pump;
+    private start;
+    private patch;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUpload, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUpload, "mf-file-upload", ["mfFileUpload"], { "items": { "alias": "items"; "required": false; "isSignal": true; }; "uploader": { "alias": "uploader"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSizeBytes": { "alias": "maxSizeBytes"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "concurrency": { "alias": "concurrency"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "rejected": "rejected"; "removed": "removed"; "settled": "settled"; }, never, never, true, never>;
+}
+
+export { FileUpload, formatBytes };
+export type { UploadItem, UploadStatus, Uploader };

package/types/mesgflow-ui-kit-hover-card.d.ts

@@ -1,7 +1,7 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
 import * as _angular_core from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { PopoverPlacement } from '@mesgflow/ui-kit/popover';
 
 /**
  * `<a href="/u/ayse" [mfHoverCardTrigger]="card">@ayse</a>
@@ -17,7 +17,7 @@ import { PopoverPlacement } from '@mesgflow/ui-kit/popover';
  */
 declare class HoverCard {
     readonly open: _angular_core.ModelSignal<boolean>;
-    readonly placement: _angular_core.InputSignal<PopoverPlacement>;
+    readonly placement: _angular_core.InputSignal<_mesgflow_ui_kit_core.MfPlacement>;
     /** Üzerine gelindikten sonra açılma gecikmesi (ms) — imleç geçip giderken kart fırlamasın. */
     readonly openDelay: _angular_core.InputSignal<number>;
     /** Ayrıldıktan sonra kapanma gecikmesi (ms) — tetikleyiciden karta geçiş boşluğu için. */

package/types/mesgflow-ui-kit-icons-lucide.d.ts

@@ -0,0 +1,27 @@
+import { EnvironmentProviders } from '@angular/core';
+import { MfIconSet } from '@mesgflow/ui-kit/icon';
+
+interface MfLucideOptions {
+    /** Çizgi kalınlığı — Lucide varsayılanı 2; kitin yoğun arayüzünde 1.75 daha rafine durur. */
+    strokeWidth?: number;
+    /** Ek/ezen ikonlar (ör. marka ikonları) — aynı ad Lucide'ınkini ezer. */
+    extra?: MfIconSet;
+}
+/**
+ * `providers: [provideMfLucideIcons()]` — kitin ve uygulamanın Material
+ * Symbols ADLARIYLA yazılmış ikonlarını (`<span mfIcon>close</span>`,
+ * `iconStart="add"`) Lucide çizgi ikonlarıyla karşılar:
+ *
+ * - Font indirilmez, FOUT'ta ham "close" metni görünmez.
+ * - Tutarlı 24px ızgara + ayarlanabilir çizgi kalınlığı (premium, ince çizgi dili).
+ * - Eşlenmeyen adlar Material Symbols fontuna düşer — geçiş kırıcı DEĞİL.
+ *
+ * Opsiyonel entry: import edilmezse pakete girmez (tree-shake).
+ */
+declare function provideMfLucideIcons(options?: MfLucideOptions): EnvironmentProviders;
+
+/** Material Symbols adlarıyla anahtarlanmış Lucide çizgi ikonları (170 ad). */
+declare const MF_LUCIDE_ICONS: MfIconSet;
+
+export { MF_LUCIDE_ICONS, provideMfLucideIcons };
+export type { MfLucideOptions };

package/types/mesgflow-ui-kit-inline-edit.d.ts

@@ -0,0 +1,42 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-inline-edit [(value)]="title" ariaLabel="Proje adı" [validate]="notEmpty" (save)="persist($event)" />`
+ *
+ * Yerinde düzenleme — metin gibi görünür, tıklayınca/Enter'a basınca giriş
+ * alanına döner. Enter kaydeder, Escape vazgeçer, odak dışarı çıkınca kaydeder
+ * (`saveOnBlur`). `validate` hata metni döndürürse kayıt engellenir ve hata
+ * `aria-describedby` ile duyurulur. `multiline` → textarea (Ctrl/⌘+Enter kaydeder).
+ */
+declare class InlineEdit {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly multiline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly saveOnBlur: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Hata metni döndürürse kayıt engellenir; `null` → geçerli. */
+    readonly validate: _angular_core.InputSignal<(value: string) => string | null>;
+    readonly save: _angular_core.OutputEmitterRef<string>;
+    readonly canceled: _angular_core.OutputEmitterRef<void>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfInlineEditLabels>;
+    protected readonly editing: _angular_core.WritableSignal<boolean>;
+    protected readonly draft: _angular_core.WritableSignal<string>;
+    protected readonly error: _angular_core.WritableSignal<string | null>;
+    protected readonly errorId: string;
+    private readonly field;
+    private readonly host;
+    protected readonly fieldClass: _angular_core.Signal<string>;
+    protected start(): void;
+    /** `restoreFocus`: Enter/düğme ile kayıtta odak metne döner; blur ile kayıtta (kullanıcı başka yere geçti) dönmez. */
+    commit(restoreFocus?: boolean): void;
+    cancel(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onBlur(): void;
+    private restoreFocus;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InlineEdit, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InlineEdit, "mf-inline-edit", ["mfInlineEdit"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "saveOnBlur": { "alias": "saveOnBlur"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "save": "save"; "canceled": "canceled"; }, never, never, true, never>;
+}
+
+export { InlineEdit };

package/types/mesgflow-ui-kit-input.d.ts

@@ -182,5 +182,67 @@ declare const inputVariants: (props?: ({
 type InputSize = VariantProps<typeof inputVariants>['size'];
 type InputHasError = VariantProps<typeof inputVariants>['hasError'];
 
-export { CharacterCount, Input, InputGroup, InputPrefix, InputSuffix, MF_FIELD_SIZING_SUPPORTED, inputVariants };
-export type { InputHasError, InputSize };
+/**
+ * Hazır desenler — `mfMask="phone-tr"` gibi adla verilir ya da doğrudan
+ * desen dizesi (`'(999) 999 99 99'`).
+ *
+ * Belirteçler: `9` rakam · `a` harf · `A` harf (büyük harfe çevrilir) ·
+ * `*` harf/rakam · `X` harf/rakam (büyük harfe çevrilir). Diğer her karakter
+ * sabittir ve otomatik eklenir.
+ */
+declare const MF_MASK_PRESETS: {
+    readonly 'phone-tr': "(999) 999 99 99";
+    readonly 'phone-us': "(999) 999-9999";
+    readonly card: "9999 9999 9999 9999";
+    readonly expiry: "99/99";
+    readonly cvc: "999";
+    readonly iban: "AA99 XXXX XXXX XXXX XXXX XXXX XX";
+    readonly 'iban-tr': "TR99 9999 9999 9999 9999 9999 99";
+    readonly date: "99.99.9999";
+    readonly 'date-iso': "9999-99-99";
+    readonly time: "99:99";
+    readonly 'tc-kimlik': "99999999999";
+};
+type MfMaskPreset = keyof typeof MF_MASK_PRESETS;
+interface MaskResult {
+    /** Biçimlenmiş metin (sabit karakterlerle). */
+    masked: string;
+    /** Yalnızca kullanıcı karakterleri. */
+    raw: string;
+    /** Tüm belirteçler doldu mu. */
+    complete: boolean;
+}
+/**
+ * Saf biçimlendirici — girdideki kabul edilebilir karakterleri sırayla desene
+ * yerleştirir. Sabitler yalnızca bir SONRAKİ belirteç için karakter varsa
+ * eklenir (sonda sarkan ") " oluşmaz). Desendeki sabitlerle aynı olan girdi
+ * karakterleri (kullanıcının yazdığı "(" gibi) atlanır.
+ */
+declare function applyMask(pattern: string, value: string): MaskResult;
+/**
+ * `<input mfInput mfMask="phone-tr" (maskRaw)="phone.set($event)" />`
+ *
+ * Yazarken biçimlendirir; imleç konumunu korur (ortadan silme/yapıştırma
+ * dahil). Biçimleme `input` olayının YAKALAMA fazında yapılır — Angular'ın
+ * `DefaultValueAccessor`'ı ve `(input)` bağlamaları zaten biçimlenmiş değeri
+ * görür (Reactive/Signal Forms ile uyumlu).
+ *
+ * - `maskRaw`: sabitsiz ham değer (API'ye gönderilecek olan).
+ * - `maskComplete`: desen tamamen dolduğunda `true`.
+ * - Rakam-yalnız desenlerde `inputmode="numeric"` (mobil sayısal klavye).
+ */
+declare class Mask {
+    readonly mfMask: _angular_core.InputSignal<"phone-tr" | "phone-us" | "card" | "expiry" | "cvc" | "iban" | "iban-tr" | "date" | "date-iso" | "time" | "tc-kimlik" | (string & Record<never, never>)>;
+    readonly maskRaw: _angular_core.OutputEmitterRef<string>;
+    readonly maskComplete: _angular_core.OutputEmitterRef<boolean>;
+    private readonly el;
+    protected readonly pattern: _angular_core.Signal<string>;
+    protected readonly inputMode: _angular_core.Signal<"numeric" | null>;
+    constructor();
+    private format;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Mask, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Mask, "input[mfMask]", ["mfMask"], { "mfMask": { "alias": "mfMask"; "required": true; "isSignal": true; }; }, { "maskRaw": "maskRaw"; "maskComplete": "maskComplete"; }, never, never, true, never>;
+}
+
+export { CharacterCount, Input, InputGroup, InputPrefix, InputSuffix, MF_FIELD_SIZING_SUPPORTED, MF_MASK_PRESETS, Mask, applyMask, inputVariants };
+export type { InputHasError, InputSize, MaskResult, MfMaskPreset };

package/types/mesgflow-ui-kit-lightbox.d.ts

@@ -0,0 +1,54 @@
+import * as _angular_core from '@angular/core';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { DialogRef } from '@angular/cdk/dialog';
+
+interface LightboxImage {
+    src: string;
+    alt: string;
+    caption?: string;
+    /** Küçük resim şeridi için (verilmezse `src`). */
+    thumb?: string;
+}
+/** Görüntüleyici paneli — `LightboxService.open()` açar. */
+declare class LightboxViewer {
+    protected readonly ref: DialogRef<any, any>;
+    private readonly data;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfLightboxLabels>;
+    protected readonly images: _angular_core.WritableSignal<readonly LightboxImage[]>;
+    protected readonly index: _angular_core.WritableSignal<number>;
+    protected readonly zoom: _angular_core.WritableSignal<boolean>;
+    protected readonly current: _angular_core.Signal<LightboxImage>;
+    protected readonly counter: _angular_core.Signal<string>;
+    protected step(delta: number): void;
+    protected go(i: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LightboxViewer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LightboxViewer, "mf-lightbox-viewer", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `inject(LightboxService).open(images, 2)` — tam ekran görsel görüntüleyici.
+ * CDK Dialog üstünde: odak tuzağı + geri dönüş, Escape, `aria-modal`, koyu
+ * cam arka plan. ←/→ gezinir, +/− yakınlaştırır, küçük resim şeridi.
+ */
+declare class LightboxService {
+    private readonly dialog;
+    private readonly labels;
+    open(images: readonly LightboxImage[], index?: number): DialogRef<unknown, LightboxViewer>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LightboxService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * `<img mfLightbox [mfLightboxGroup]="gallery" [mfLightboxIndex]="i" …>` —
+ * tıklanınca (ve Enter/Boşluk ile) grubu o görselden açar. Görsel
+ * odaklanabilir bir `button` rolü alır.
+ */
+declare class LightboxTrigger {
+    readonly mfLightboxGroup: _angular_core.InputSignal<readonly LightboxImage[]>;
+    readonly mfLightboxIndex: _angular_core.InputSignal<number>;
+    private readonly service;
+    open(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LightboxTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LightboxTrigger, "[mfLightbox]", never, { "mfLightboxGroup": { "alias": "mfLightboxGroup"; "required": true; "isSignal": true; }; "mfLightboxIndex": { "alias": "mfLightboxIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { LightboxService, LightboxTrigger, LightboxViewer };
+export type { LightboxImage };