@mesgflow/ui-kit 0.6.0

package/types/mesgflow-ui-kit-date-picker.d.ts

@@ -0,0 +1,215 @@
+import * as _angular_core from '@angular/core';
+import { Locale } from 'date-fns';
+import { MfDatePickerLabels, ValueAccessorBase } from '@mesgflow/ui-kit/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+type DateRangePresetId = 'today' | 'last7' | 'last30' | 'thisMonth';
+/**
+ * Hazır tarih aralıkları — kurumsal panellerde tarih filtresinin %90'ı bunlar
+ * (bkz. eski `table-filter.model.ts` `dateRangeFor`, ISO metin üreten
+ * kardeşi — burada `Date` nesneleri üretiyor, ISO'ya çevirme çağıranın işi,
+ * bkz. `date-picker.model.ts` kullanan `table-filter.model.ts`'teki
+ * `dateToIso`). `date-picker`'ın kendi paketi TEK KAYNAK — Table bunu import
+ * eder, tersi değil.
+ */
+declare function dateRangeForPreset(preset: DateRangePresetId): DateRange;
+/**
+ * Bir ay ızgarası — 6 satır × 7 sütun, komşu ay günleri dahil (haftanın ilk
+ * günü `locale`'e göre — tr Pazartesi, en-US Pazar; `date-fns/locale`'in
+ * `weekStartsOn`'undan otomatik gelir, elle YAZILMAZ).
+ */
+declare function buildMonthMatrix(month: Date, locale: Locale): Date[][];
+declare function isCurrentMonth(day: Date, month: Date): boolean;
+declare function isSameDay(a: Date | null, b: Date | null): boolean;
+declare function isWithinRange(day: Date, start: Date | null, end: Date | null): boolean;
+declare function isDayDisabled(day: Date, min: Date | null, max: Date | null): boolean;
+declare function shiftMonth(month: Date, delta: number): Date;
+declare function shiftYear(month: Date, delta: number): Date;
+declare function formatDateInput(date: Date, locale: Locale): string;
+/** Kullanıcının yazdığı metni çözer; geçersizse `null` (çağıran son geçerli değere geri döner). Sonuç HER ZAMAN gün sınırına (`startOfDay`) normalize edilir. */
+declare function parseDateInput(text: string, locale: Locale): Date | null;
+
+/**
+ * `<mf-calendar [(month)]="visibleMonth" [selected]="value()" (dayPick)="onPick($event)" />`
+ *
+ * Takvim ızgarasının gövdesi — hem `DatePicker`/`DateRangePicker`'ın overlay
+ * paneli İÇİNDE hem inline (overlay'siz) kullanılabilir. `@angular/aria/grid`
+ * KULLANILMADI (bkz. plan): sağ ok ayın son gününden sonraki ayın ilk gününe
+ * ATLAMALI, `PageUp`/`PageDown` ±1 ay/±1 yıl yapmalı — grid pattern'i
+ * render edilmiş satır/sütun sınırlarıyla kapalı, bu ikisini karşılamıyor.
+ * Roving tabindex elle kuruldu (emsal: `table-pagination.ts`'in
+ * `afterRenderEffect` + `viewChild(ElementRef)` deseni).
+ *
+ * Üç görünüm (`view`) — gün ızgarası, ay ızgarası, yıl ızgarası — klasik
+ * drill-up/down: başlıktaki "Eylül 2026" ay/yıl görünümüne, oradaki yıl
+ * yıl ızgarasına götürür; seçim tersine iner.
+ */
+declare class Calendar {
+    readonly month: _angular_core.ModelSignal<Date>;
+    readonly mode: _angular_core.InputSignal<"single" | "range">;
+    readonly selected: _angular_core.InputSignal<Date | null>;
+    readonly rangeStart: _angular_core.InputSignal<Date | null>;
+    readonly rangeEnd: _angular_core.InputSignal<Date | null>;
+    /** Fare aralığın ikinci ucunun üzerinde gezinirken önizleme — `rangeEnd()` doluysa yok sayılır. */
+    readonly hoverEnd: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly locale: _angular_core.InputSignal<Locale | undefined>;
+    readonly labels: _angular_core.InputSignal<MfDatePickerLabels | undefined>;
+    /**
+     * `false` → başlık ok/ay-yıl drill-down kontrolleri GİZLENİR, sadece ay/yıl
+     * ETİKETİ (statik metin) kalır. `DateRangePicker`'ın İKİNCİ (takipçi)
+     * takvimi için — "ikinci ay = birincinin bir fazlası" değişmezini korumak
+     * amacıyla o takvim kendi başına gezilemez (bkz. date-range-picker.ts).
+     * Gün ızgarası yine TAM etkileşimli kalır — sadece ay/yıl DEĞİŞTİRME devre
+     * dışı.
+     */
+    readonly navigable: _angular_core.InputSignal<boolean>;
+    readonly dayPick: _angular_core.OutputEmitterRef<Date>;
+    readonly dayHover: _angular_core.OutputEmitterRef<Date | null>;
+    private readonly dateLocaleToken;
+    private readonly datePickerLabels;
+    protected readonly effectiveLocale: _angular_core.Signal<Locale>;
+    protected readonly effectiveLabels: _angular_core.Signal<MfDatePickerLabels>;
+    protected readonly view: _angular_core.WritableSignal<"day" | "month" | "year">;
+    protected readonly focusedDay: _angular_core.WritableSignal<Date>;
+    protected readonly yearPageStart: _angular_core.WritableSignal<number>;
+    protected readonly weeks: _angular_core.Signal<Date[][]>;
+    protected readonly monthGrid: _angular_core.Signal<Date[]>;
+    protected readonly yearGrid: _angular_core.Signal<number[]>;
+    protected readonly weekdayLabels: _angular_core.Signal<string[]>;
+    protected readonly monthYearLabel: _angular_core.Signal<string>;
+    private readonly gridEl;
+    private focusPending;
+    protected readonly shiftMonth: typeof shiftMonth;
+    protected readonly shiftYear: typeof shiftYear;
+    constructor();
+    protected dayKey(day: Date): string;
+    protected tabIndexFor(day: Date): number;
+    protected isDisabled(day: Date): boolean;
+    protected isSameDaySafe(day: Date): boolean;
+    protected dayClasses(day: Date): string;
+    protected cellClasses(active: boolean): string;
+    protected monthLabel(m: Date): string;
+    protected openMonthView(): void;
+    protected openYearView(): void;
+    protected shiftYearPage(delta: number): void;
+    protected pickMonth(m: Date): void;
+    protected pickYear(y: number): void;
+    protected pick(day: Date): void;
+    protected onDayMouseEnter(day: Date): void;
+    protected onGridKeydown(event: KeyboardEvent): void;
+    private moveFocus;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Calendar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Calendar, "mf-calendar", never, { "month": { "alias": "month"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "rangeStart": { "alias": "rangeStart"; "required": false; "isSignal": true; }; "rangeEnd": { "alias": "rangeEnd"; "required": false; "isSignal": true; }; "hoverEnd": { "alias": "hoverEnd"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "navigable": { "alias": "navigable"; "required": false; "isSignal": true; }; }, { "month": "monthChange"; "dayPick": "dayPick"; "dayHover": "dayHover"; }, never, never, true, never>;
+}
+
+/**
+ * `<mf-date-picker [(value)]="date" [min]="minDate()" />`
+ *
+ * Tetikleyici GERÇEK bir `<input mfInput>` — ikon+temizle butonu üstüne
+ * bindirilmiş (emsal: `search-input.html`, ayrı bir bordürlü kutuyla
+ * SARMALAMIYORUZ, `Input`'un kendi border/shadow/focus'u tek kaynak kalıyor,
+ * "çift kenarlık" görünümü olmasın diye). Yazarak giriş + takvimden seçim
+ * AYNI `value` model'ine yazıyor.
+ *
+ * Panel `select.html`'deki CDK overlay bloğunun birebir aynısı (şeffaf
+ * backdrop, `(backdropClick)`/`(detach)` → kapat, bottom-start + flip
+ * pozisyon). Panel kabuğu sabit formül: `rounded-lg bg-overlay p-3 shadow-2
+ * dark:border dark:border-border-subtle` (bkz. table-filter-menu.html).
+ */
+declare class DatePicker extends ValueAccessorBase<Date | null> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly locale: _angular_core.InputSignal<Locale | undefined>;
+    readonly labels: _angular_core.InputSignal<MfDatePickerLabels | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly dateLocaleToken;
+    private readonly datePickerLabels;
+    protected readonly effectiveLocale: _angular_core.Signal<Locale>;
+    protected readonly effectiveLabels: _angular_core.Signal<MfDatePickerLabels>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly draft: _angular_core.WritableSignal<string>;
+    protected readonly month: _angular_core.WritableSignal<Date>;
+    private readonly inputEl;
+    constructor();
+    writeValue(value: Date | null): void;
+    private setValue;
+    protected onInput(raw: string): void;
+    protected commitDraft(): void;
+    protected onDayPick(day: Date): void;
+    protected pickToday(): void;
+    protected clear(): void;
+    protected close(): void;
+    protected onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePicker, "mf-date-picker", ["mfDatePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * `<mf-date-range-picker [(value)]="range" />` — `value` şekli
+ * `{ start: Date | null; end: Date | null }` (bkz. `DateRange`).
+ *
+ * Tetikleyici tek kutu içinde İKİ metin input'u (başlangıç/bitiş) —
+ * `DatePicker`'ın aksine burada `mfInput`'un KENDİ border/shadow'unu
+ * KULLANMIYORUZ (iki input yan yana, "çift kenarlık" olmasın diye border/
+ * shadow/focus DIŞ kutuya taşındı, iç input'lar çıplak — tek gerekçeli
+ * istisna).
+ *
+ * Panelde solda ön ayar sütunu + sağda iki takvim (ikincisi
+ * `[navigable]="false"` — bkz. `calendar.ts`, "birincinin bir fazlası"
+ * değişmezini koruyor). Onay YALNIZCA "Uygula"da dışarı çıkar — takvimde
+ * gezinme/seçim kendi `draftRange` sinyalinde kalır, `value()` her tık ile
+ * DEĞİŞMEZ (emsal: `table-page-jump.ts` — her tuş vuruşunda backend'e istek
+ * atmama notu). "Temizle" bunun istisnası — anında commit eder.
+ */
+declare class DateRangePicker extends ValueAccessorBase<DateRange> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<DateRange>;
+    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly locale: _angular_core.InputSignal<Locale | undefined>;
+    readonly labels: _angular_core.InputSignal<MfDatePickerLabels | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    private readonly dateLocaleToken;
+    private readonly datePickerLabels;
+    protected readonly effectiveLocale: _angular_core.Signal<Locale>;
+    protected readonly effectiveLabels: _angular_core.Signal<MfDatePickerLabels>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly startDraft: _angular_core.WritableSignal<string>;
+    protected readonly endDraft: _angular_core.WritableSignal<string>;
+    protected readonly draftRange: _angular_core.WritableSignal<DateRange>;
+    protected readonly pickStage: _angular_core.WritableSignal<"start" | "end">;
+    protected readonly hoverEnd: _angular_core.WritableSignal<Date | null>;
+    protected readonly monthLeft: _angular_core.WritableSignal<Date>;
+    protected readonly monthRight: _angular_core.WritableSignal<Date>;
+    protected readonly presets: DateRangePresetId[];
+    private readonly startEl;
+    constructor();
+    writeValue(value: DateRange): void;
+    private setValue;
+    protected presetLabel(preset: DateRangePresetId): string;
+    protected applyPreset(preset: DateRangePresetId): void;
+    protected onStartInput(raw: string): void;
+    protected onEndInput(raw: string): void;
+    protected commitStartDraft(): void;
+    protected commitEndDraft(): void;
+    protected onDayHover(day: Date | null): void;
+    protected onDayPick(day: Date): void;
+    protected apply(): void;
+    protected clear(): void;
+    protected close(): void;
+    protected onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateRangePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateRangePicker, "mf-date-range-picker", ["mfDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { Calendar, DatePicker, DateRangePicker, buildMonthMatrix, dateRangeForPreset, formatDateInput, isCurrentMonth, isDayDisabled, isSameDay, isWithinRange, parseDateInput, shiftMonth, shiftYear };
+export type { DateRange, DateRangePresetId };

package/types/mesgflow-ui-kit-description-list.d.ts

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+
+interface DescriptionItem {
+    label: string;
+    value: string;
+}
+type DescriptionListOrientation = 'horizontal' | 'vertical';
+/**
+ * `<mf-description-list [items]="[{label: 'E-posta', value: 'a@b.com'}]" />`
+ * — salt-okunur alan/değer çiftleri için (ör. bir profil özeti). `horizontal`
+ * (varsayılan): etiket solda (1 sütun), değer sağda (2 sütun) — ayarlar
+ * panellerindeki tipik "satır" deseni. `vertical`: etiket değerin ÜSTÜNDE,
+ * yığılı — dar bir kart/kenar çubuğu içinde daha rahat.
+ */
+declare class DescriptionList {
+    readonly items: _angular_core.InputSignal<DescriptionItem[]>;
+    readonly orientation: _angular_core.InputSignal<DescriptionListOrientation>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DescriptionList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DescriptionList, "mf-description-list", ["mfDescriptionList"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DescriptionList };
+export type { DescriptionItem, DescriptionListOrientation };

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

@@ -0,0 +1,342 @@
+import * as _angular_core 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 { 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';
+interface DialogOptions<D> {
+    data?: D;
+    size?: DialogSize;
+    /** Varsayılan `'center'`. `'right'` için doğrudan `DialogService.openDrawer()` kullanılması tercih edilir. */
+    placement?: DialogPlacement;
+    /** Header'da tam ekran/geri al düğmesi gösterir — durumu `DialogSurface.maximized` taşır. Drawer'da (bkz. `Dialog.maximizeVisible`) etkisiz. */
+    maximizable?: boolean;
+    /** Header'dan (başlık alanından) sürüklenebilir olur — `@angular/cdk/drag-drop`. Drawer'da etkisiz (bkz. `Dialog.stateVariant`). */
+    draggable?: boolean;
+    /** Sağ-alt köşede serbest boyutlandırma tutamacı gösterir. Drawer'da etkisiz. */
+    resizable?: boolean;
+    /** `true` ise ESC/backdrop tıklaması kapatmaz (programatik `dialogRef.close()` yine çalışır). */
+    disableClose?: boolean;
+    ariaLabel?: string;
+    panelClass?: string | string[];
+}
+/** Onay butonu: `danger`→danger, `warning`→warning, diğerleri→primary; hepsi `filled` (bkz. confirm-dialog.ts `confirmTone`). */
+type ConfirmTone = 'danger' | 'warning' | 'info' | 'success' | 'neutral';
+interface ConfirmDialogData {
+    title: string;
+    content: string;
+    /** Varsayılan `'neutral'`. */
+    tone?: ConfirmTone;
+    /** `true` ise Vazgeç/Onayla çifti yerine tek bir "Tamam" düğmesi gösterilir (bilgilendirme modu). */
+    alert?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /**
+     * Verilirse onay düğmesi dialog'u KAPATMADAN önce bunu çalıştırır: düğme
+     * spinner'a döner, başarıda dialog kapanır, hata fırlatırsa dialog açık
+     * kalır ve genel bir hata mesajı gösterilir.
+     */
+    action?: () => Promise<unknown>;
+}
+
+/**
+ * Onay diyaloğunun içerik component'i — `DialogService.confirm()`/`confirmDelete()`/
+ * `alert()` (bkz. dialog.service.ts) bunu açıp `DialogRef<boolean>`'ı `Promise`'e
+ * çeviriyor. `Dialog`'un (dialog.ts) `[dialog-header]` kaçış kapısını kullanıyor —
+ * ton'a göre renkli ikon rozeti, generic `Dialog`'un kendi `[icon]` input'unun
+ * desteklemediği bir şey (o sadece nötr bir rozet çizer), bu yüzden kendi başlığını
+ * kendi çiziyor.
+ */
+declare class ConfirmDialog {
+    protected readonly data: ConfirmDialogData;
+    private readonly dialogRef;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfDialogLabels>;
+    protected readonly tone: _angular_core.Signal<ConfirmTone>;
+    protected readonly toneIcon: _angular_core.Signal<string>;
+    protected readonly toneBadgeClass: _angular_core.Signal<string>;
+    /** Her ton `filled` — warning da diğer tonlarla aynı `bg-X-fill` rol deseninde dolu blok kullanıyor (bkz. button.variants.ts), eski `outlined` istisnası kaldırıldı. */
+    protected readonly confirmTone: _angular_core.Signal<"danger" | "warning" | "info" | "success" | "neutral" | "help" | "primary" | null | undefined>;
+    protected readonly submitting: _angular_core.WritableSignal<boolean>;
+    protected readonly actionError: _angular_core.WritableSignal<string | null>;
+    protected onCancel(): void;
+    protected onConfirm(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfirmDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmDialog, "mf-confirm-dialog", never, {}, {}, never, never, true, never>;
+}
+
+interface DialogCustomSize {
+    width: number;
+    height: number;
+}
+/**
+ * Dialog başına TEK instance — `DialogService.open()` her açılışta yeni bir
+ * tane üretip `options`'tan doldurur, CDK `DialogConfig.providers` ile o
+ * dialog'un (içerik component'inin) injector'ına verir. `Dialog` (dialog.ts)
+ * kendi `@Component.providers`'ında `skipSelf` ile bunu arar — bulamazsa
+ * (ör. overlay olmadan tek başına render edilen statik bir önizleme/demo)
+ * kendi yerel instance'ını üretir, hiçbir şey patlamaz.
+ *
+ * Boyut/maximize/drag/resize/sheet durumunun TAMAMI burada yaşıyor — `Dialog`
+ * kendi `@Input()`'larıyla DEĞİL, bu sınıfı okuyarak render ediyor. Böylece
+ * `DialogService.open(SomeForm, { size:'lg', maximizable:true })` gibi bir
+ * çağrı, `SomeForm`'un template'inde 1+ seviye iç içe olan `<mf-dialog>`'a
+ * DI üzerinden ulaşabiliyor (`@Input()` ile mümkün olmazdı — DialogService
+ * `Dialog`'u değil, `SomeForm`'u örnekliyor).
+ */
+declare class DialogSurface {
+    readonly size: _angular_core.WritableSignal<DialogSize>;
+    readonly placement: _angular_core.WritableSignal<DialogPlacement>;
+    readonly maximizable: _angular_core.WritableSignal<boolean>;
+    readonly draggable: _angular_core.WritableSignal<boolean>;
+    readonly resizable: _angular_core.WritableSignal<boolean>;
+    readonly maximized: _angular_core.WritableSignal<boolean>;
+    /** Kullanıcı kenardan boyutlandırdıysa dolu; maximize/sheet'te yok sayılır. */
+    readonly customSize: _angular_core.WritableSignal<DialogCustomSize | null>;
+    /** < 640px — `DialogService` `BreakpointObserver` ile besler. */
+    readonly sheet: _angular_core.WritableSignal<boolean>;
+    /** Kapanış animasyonu oynarken `true` — bkz. `DialogService.open()` `closePredicate`. */
+    readonly closing: _angular_core.WritableSignal<boolean>;
+    toggleMaximize(): void;
+    private dirtyCheck;
+    /** Başarılı kayıt/programatik kapanışta `true` yapılır — bir sonraki kapanışta kirli-form uyarısı SORULMAZ. */
+    readonly bypassDirtyGuard: _angular_core.WritableSignal<boolean>;
+    /** İçerik component'i (tüketicinin kendi form component'i) kendi "kirli mi" sorusunu buraya kaydeder — `DialogSurface` formun kendi şemasını bilmez. */
+    registerDirty(check: () => boolean): void;
+    /** `DialogService.open()`'ın `closePredicate`'i ESC/backdrop/X kapanışında bunu okur. */
+    isDirty(): boolean;
+    /** Başarılı kayıttan hemen önce çağrılır — programatik `dialogRef.close()` kirli-form uyarısı sormasın diye. */
+    markClean(): void;
+}
+
+/**
+ * `<mf-dialog [title]="..." [subtitle]="..." [icon]="'group'" (close)="onCancel()">`
+ * — `DialogService.open()`'ın açtığı her içerik component'i (tüketicinin kendi
+ * form component'i, ör. `ConfirmDialog`) kendi kök elemanı olarak bunu kullanır. CDK Dialog'un
+ * kendisi (bkz. dialog.service.ts) hiçbir görsel çerçeve DAYATMIYOR (backdrop hariç) —
+ * panel görünümü (yuvarlak köşe/gölge/header/footer/kapatma düğmesi) TAMAMEN burada,
+ * tek yerde yaşıyor.
+ *
+ * Boyut/placement/maximize/drag/resize/sheet durumu kendi `@Input()`'ları DEĞİL,
+ * `DialogSurface` (DI ile enjekte edilir) — bkz. o dosyanın doc yorumu. `title`/
+ * `subtitle`/`icon`/`fillBody` ise İÇERİĞE ait olduğu için normal input —
+ * `[dialog-header]` slot'u tamamen özel bir başlık gerektiren durumlar için (bkz.
+ * ConfirmDialog) kaçış kapısı olarak kalıyor.
+ *
+ * `stateVariant()` sırası (sheet → maximized → drawer → normal) bilinçli: mobil
+ * sheet her zaman kazanır, ardından drag/resize/mobil-sheet'in yalnızca `normal`'da
+ * açık olması (bkz. `dragEnabled`/`resizeHandleVisible`) drawer'da bu ikisinin
+ * otomatik kapalı kalmasını BEDAVA sağlıyor — ayrı bir kontrol gerekmiyor.
+ */
+declare class Dialog {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Sadece `DialogSurface` DI ile enjekte edilmediğinde (ör. statik bir önizleme/demo) etkili — gerçek dialog'larda `DialogService.open({ size })` kullanılır. */
+    readonly size: _angular_core.InputSignal<DialogSize | undefined>;
+    /**
+     * `true` ise gövde kendi kaydırmasını KAPATIR (`overflow:hidden`) ve kalan
+     * yüksekliği içeriğe `flex-1` ile devreder — içeriğin KENDİ tek scroll alanını
+     * kurması beklenir (ör. uzun bir liste içeren bir form). "Tek kaydırma bölgesi"
+     * kuralının uygulama noktası: dialog gövdesi + içerik aynı anda kaymaz.
+     */
+    readonly fillBody: _angular_core.InputSignal<boolean>;
+    readonly close: _angular_core.OutputEmitterRef<void>;
+    protected readonly surface: DialogSurface;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfDialogLabels>;
+    private readonly elementRef;
+    private readonly cdkDrag;
+    private readonly scrollBody;
+    protected readonly scrolledFromTop: _angular_core.WritableSignal<boolean>;
+    protected readonly hasMoreBelow: _angular_core.WritableSignal<boolean>;
+    protected readonly stateVariant: _angular_core.Signal<"normal" | "maximized" | "sheet" | "drawer">;
+    protected readonly dragEnabled: _angular_core.Signal<boolean>;
+    protected readonly resizeHandleVisible: _angular_core.Signal<boolean>;
+    /** Drawer zaten tam yükseklik — büyütme düğmesinin anlamı yok, `surface.maximizable()` `true` olsa bile gizlenir. */
+    protected readonly maximizeVisible: _angular_core.Signal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly customWidth: _angular_core.Signal<number | undefined>;
+    protected readonly customHeight: _angular_core.Signal<number | undefined>;
+    /** Kenara/tam ekrana yaslı yüzeyler (drawer, mobil sheet, maximized): bölgeler KALICI
+     *  çizgiyle ayrılır — header/content/footer iskeleti her zaman aynı görünür. Ortada
+     *  yüzen klasik dialog (`normal`, ör. ConfirmDialog) bugünkü kaydırma-gölgesi davranışını
+     *  korur — kısa bir onay kutusu gereksiz çizgi kazanmaz. */
+    protected readonly framed: _angular_core.Signal<boolean>;
+    protected readonly headerBorder: _angular_core.Signal<boolean>;
+    protected readonly footerBorder: _angular_core.Signal<boolean>;
+    constructor();
+    protected updateScrollShadow(): void;
+    /**
+     * Ctrl/Cmd+Enter — tek yerde çözülür, her form bedava kazanır. Kaydet düğmesi
+     * footer slot'unda `<form>`'un DIŞINDA yaşıyor (`form="role-form"` attribute
+     * ilişkilendirmesiyle çalışıyor) — bu yüzden düğmeye tıklamayı taklit etmek
+     * yerine doğrudan `<form>` üzerinde `requestSubmit()` çağrılıyor; bu da native
+     * kısıt doğrulamasını çalıştırıp mevcut `(submit)` bağlamasını tetikler.
+     */
+    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: {}; }]>;
+}
+
+/**
+ * `<button mfDialogResizeHandle [ariaLabel]="...">` — `Dialog`'un (dialog.ts)
+ * sağ-alt köşesinde, `DialogSurface.customSize`'ı besleyen serbest boyutlandırma
+ * tutamacı. Fare/dokunma İLE klavye (ok tuşları) İKİSİ de destekleniyor —
+ * projects/ui-kit/README.md "a11y checklist" bölümü "sadece fareyle çalışan bir
+ * tutamaç"ı kabul etmiyor.
+ */
+declare class DialogResizeHandle {
+    private readonly surface;
+    private readonly host;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** `role="slider"` `aria-valuenow` zorunlu kılıyor (axe: `aria-required-attr`) — genişliği raporlar, özel boyut yoksa panelin ölçülen genişliğine, o da yoksa `MIN_WIDTH`'e düşer. */
+    protected readonly ariaValueNow: _angular_core.Signal<number>;
+    private pointerId;
+    private startX;
+    private startY;
+    private startWidth;
+    private startHeight;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private panelRect;
+    private applySize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogResizeHandle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogResizeHandle, "[mfDialogResizeHandle]", never, { "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Dialog açmanın tek, merkezi noktası — `@angular/cdk/dialog`'un `Dialog`
+ * servisi ÜZERİNE ince bir katman (focus-trap/ESC/backdrop-click/geri-scroll-
+ * 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
+ * `DialogSurface` (bkz. o dosya) üzerinden, `providers` ile o dialog'un injector'ına
+ * verilir — `Dialog` (dialog.ts) bunu DI'dan okuyarak render eder.
+ *
+ * **Tek kural**: kayıt oluştur/düzenle → `openDrawer()` (sağdan, `placement:'right'`);
+ * onayla/bilgilendir/sil → `confirm()`/`confirmDelete()`/`alert()` (merkezi, `size:'sm'`).
+ * Drawer ayrı bir primitif DEĞİL — `placement` sadece konum stratejisini ve
+ * `Dialog.stateVariant()`'ı değiştiren bir eksen, geri kalan her şey (CDK Dialog,
+ * closePredicate, kirli-form koruması, mobil sheet, kaydırma gölgesi) ortak.
+ *
+ * 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
+ * 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 —
+ * 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
+ * `confirmDiscard()` (kendi içindeki `ConfirmDialog`, ayrı/temiz bir `DialogSurface`
+ * ile) açılır; kullanıcı onaylarsa `surface.markClean()` + gerçek `close()`. İçerik
+ * component'i `constructor()`'da `surface.registerDirty(() => ...)` ile kendi
+ * "değişti mi" sorusunu kaydeder.
+ */
+declare class DialogService {
+    private readonly cdkDialog;
+    private readonly injector;
+    private readonly breakpointObserver;
+    private readonly labels;
+    /** `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>;
+    /**
+     * 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
+     * düğmesinin anlamı yok (bkz. `Dialog.maximizeVisible`).
+     *
+     * Varsayılan genişlik `md` (560px) — CRUD formları `size` GEÇMEZ, hepsi aynı
+     * 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>;
+    /** `Promise<boolean>` döner — `if (await dialog.confirm(...))` çağıran taraf için `.subscribe()` zincirinden daha sade. */
+    confirm(data: ConfirmDialogData): Promise<boolean>;
+    /**
+     * Kirli-form kapanış korumasının kendi onay diyaloğu — `confirmDiscard`'ın açtığı
+     * `ConfirmDialog`'un `DialogSurface`'i her zaman temiz (yeni instance), bu yüzden
+     * özyineleme sorunsuz. `closePredicate` içinden (ESC/backdrop/X) VE tüketicinin
+     * kendi route senkronizasyonundan (URL değişip panel PROAKTİF kapatılmadan
+     * önce) iki ayrı yoldan çağrılabildiği için `public`.
+     *
+     * `tone: 'warning'` — onay butonu artık DOLU warning (bkz.
+     * `button.variants.ts`/`confirm-dialog.ts`, eski `outlined` istisnası
+     * 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;
+    /** `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. */
+    alert(data: Omit<ConfirmDialogData, 'alert'>): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * Boyut ölçeği CSS `min()` ile viewport'a göre kendini sınırlıyor —
+ * `max-w-[560px]` gibi ayrı bir "hiçbir zaman viewport'tan taşma" class'ıyla
+ * `cn()`/tailwind-merge üzerinden birleştirilemezdi (ikisi aynı utility
+ * grubu — `max-width` — sonuncusu kazanır, ikisi birden UYGULANMAZ). Tek
+ * arbitrary value'da `min(N, 100vw-2rem)` ile ikisi birden garanti ediliyor.
+ *
+ * `state` (normal/maximized/sheet/drawer) boyut eksenine dik, tek-seçim bir eksen —
+ * `Dialog` (dialog.ts) `DialogSurface`'ten okuyup hesaplıyor, tüketici
+ * tarafından doğrudan set edilmiyor. `drawer` boyut ölçeğini (sm/md/lg/xl)
+ * `normal` ile PAYLAŞIR ama genişliği AYNI şekilde uygulamaz — aşağıdaki
+ * `compoundVariants`'a bak.
+ *
+ * **`drawer` neden `width` de alıyor, `max-width` yetmiyor mu**: sağa yaslı
+ * `GlobalPositionStrategy` (`dialog.service.ts`) overlay wrapper'a
+ * `align-items:flex-start` veriyor — bu, cross-axis stretch'i KAPATIYOR, yani
+ * `.cdk-overlay-pane` içeriğine göre daralıyor (shrink-to-fit). Böyle bir
+ * (genişliği belirsiz/auto) kapsayıcı içinde `mf-dialog`'un tabandaki
+ * `w-full`'u (`width:100%`) CSS Sizing L3'e göre `width:auto`'ya döner —
+ * yani panel `max-w-[min(N,...)]` TAVANINA hiç ulaşmadan, içeriğin doğal
+ * genişliğinde kalır. `normal` (ortada yüzen) dialog için bu doğru davranış
+ * (kısa bir onay kutusu tavana kadar zorla GENİŞLEMEMELİ), ama drawer için
+ * YANLIŞ — üç CRUD formu içerik uzunluğuna göre üç farklı genişlikte açılırdı
+ * (gerçek, gözlemlenen bir regresyon). Çözüm: `calc(100vw-2rem)` viewport'a
+ * göre DEFINITE bir uzunluk — parent'ın genişliği belirsiz olsa bile bu
+ * paradoksu atlıyor. `width` + `max-width` aynı ifadeyi taşıdığı için
+ * `max-width` drawer'da fiilen artık gereksiz ama zararsız kalıyor.
+ *
+ * **`maximized` neden kendi `max-w-none`'ını taşıyor**: `size` (sm/md/lg/xl)
+ * her zaman uygulanır, `state` ondan BAĞIMSIZ bir eksendir — `maximized` kendi
+ * `max-w-none`'ını taşımazsa, `size`'ın `max-w-[min(N,...)]`'i (aynı `max-width`
+ * grubu, ama `size` `state`'ten ÖNCE değerlendirildiği için `state` sonuncusu
+ * kazanmadıkça) tek başına kalır ve `w-screen`'i geçersiz kılar — gerçek,
+ * gözlemlenen bir regresyon: `maximizable:true, size:'lg'` bir dialog
+ * büyütüldüğünde yükseklik `h-[100dvh]`'e ulaşırken genişlik hâlâ `lg`'nin
+ * 720px tavanına sıkışıp kalıyordu ("kenarlar kısa, sadece boyu uzuyor").
+ */
+/**
+ * Panel yüzeyi `glassSurface` (bkz. `@mesgflow/ui-kit/core` — mikro
+ * glassmorphism, 2026-09 Deep Emerald geçişi): arkadaki içerik `backdrop-blur`
+ * destekleyen tarayıcılarda hafifçe görünür kalır, backdrop
+ * (`.mf-dialog-backdrop`, motion.css) ayrıca karartıyor. `maximized` durumu
+ * TAM VIEWPORT'u kapladığı için (arkasında blur'lanacak sayfa içeriği yok,
+ * sadece backdrop) camı KAPATIP düz `bg-surface`'e döner — hem maliyetsiz hem
+ * anlamsız bir blur'dan kaçınır.
+ */
+declare const dialogVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    state?: "normal" | "maximized" | "sheet" | "drawer" | 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 };

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

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * `<mf-divider />` (düz çizgi) veya `<mf-divider label="veya" />` (ortasında
+ * metin, ör. iki giriş yöntemini ayırmak için). `vertical` yönlendirmede
+ * `label` YOKSAYILIR — dikey bir çizginin ortasına metin sığdırmak pratik
+ * bir kullanım alanı değil.
+ *
+ * Etiketli halde iç çizgi parçaları `aria-hidden` — erişilebilir isim tek
+ * seferde, host'un `role="separator"` içeriğinden (görünür metinden) gelir,
+ * ayrı bir `aria-label` gerekmez.
+ */
+declare class Divider {
+    readonly orientation: _angular_core.InputSignal<DividerOrientation>;
+    readonly label: _angular_core.InputSignal<string>;
+    protected readonly hostClasses: _angular_core.Signal<"flex items-center gap-3" | "inline-block h-full w-px bg-border" | "block h-px w-full bg-border">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Divider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "mf-divider", ["mfDivider"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Divider };
+export type { DividerOrientation };