@mesgflow/ui-kit 0.6.0 → 0.7.0

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 };

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

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+interface ListboxOption<V> {
+    label: string;
+    value: V;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * `<mf-listbox [options]="plans" [(value)]="chosen" ariaLabel="Plan" />`
+ *
+ * Her zaman görünür seçim listesi (açılır olmayan Select) — ayar panelleri,
+ * filtre kenar çubukları, iki sütunlu seçiciler. `@angular/aria/listbox`:
+ * ↑/↓, Home/End, typeahead, Shift+ok ile aralık (çoklu), `aria-activedescendant`.
+ *
+ * `value` her zaman bir DİZİ (aria listbox sözleşmesi); tekli modda tek öğeli.
+ */
+declare class Listbox<V> {
+    readonly options: _angular_core.InputSignal<ListboxOption<V>[]>;
+    readonly value: _angular_core.ModelSignal<V[]>;
+    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Listbox<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Listbox<any>, "mf-listbox", ["mfListbox"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { Listbox };
+export type { ListboxOption };

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

@@ -0,0 +1,59 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+interface MentionItem {
+    label: string;
+    value: string;
+    description?: string;
+}
+/** İmlecin öğeye göre piksel konumu — gizli bir "ayna" div ile ölçülür. */
+declare function caretCoordinates(el: HTMLTextAreaElement | HTMLInputElement, position: number): {
+    top: number;
+    left: number;
+    height: number;
+};
+/** Öneri paneli — `mfMention` direktifi açar. */
+declare class MentionPanel {
+    readonly items: _angular_core.InputSignal<MentionItem[]>;
+    readonly active: _angular_core.InputSignal<number>;
+    readonly listId: _angular_core.InputSignal<string>;
+    readonly pick: _angular_core.OutputEmitterRef<MentionItem>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfMentionLabels>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MentionPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MentionPanel, "mf-mention-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "listId": { "alias": "listId"; "required": false; "isSignal": true; }; }, { "pick": "pick"; }, never, never, true, never>;
+}
+/**
+ * `<textarea mfInput [mfMention]="people" (mentionAdd)="notify($event)"></textarea>`
+ *
+ * `@` (ya da `trigger`) yazınca imlecin hemen altında filtrelenmiş öneriler
+ * açar; ↑/↓ gezinir, Enter/Tab seçer, Escape kapatır. Seçim `@Ad ` olarak
+ * metne eklenir ve `mentionAdd` yayar. Erişilebilirlik: `aria-autocomplete`,
+ * `aria-controls` ve vurgulanan öneri için `aria-activedescendant` (odak
+ * metin alanında kalır).
+ */
+declare class Mention {
+    readonly mfMention: _angular_core.InputSignal<MentionItem[]>;
+    readonly trigger: _angular_core.InputSignal<string>;
+    readonly mentionAdd: _angular_core.OutputEmitterRef<MentionItem>;
+    protected readonly listId: string;
+    private readonly el;
+    private readonly overlay;
+    private ref;
+    private panel;
+    private readonly query;
+    private queryStart;
+    protected readonly active: _angular_core.WritableSignal<number>;
+    protected readonly isOpen: _angular_core.Signal<boolean>;
+    protected readonly filtered: _angular_core.Signal<MentionItem[]>;
+    constructor();
+    protected onInput(): void;
+    protected onKeydown(e: Event): void;
+    close(): void;
+    private insert;
+    private render;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Mention, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Mention, "textarea[mfMention], input[mfMention]", ["mfMention"], { "mfMention": { "alias": "mfMention"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, { "mentionAdd": "mentionAdd"; }, never, never, true, never>;
+}
+
+export { Mention, MentionPanel, caretCoordinates };
+export type { MentionItem };

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

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/aria/menu';
+import { Menu as Menu$1 } from '@angular/aria/menu';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 
 /**
  * `<mf-menu #menu="ngMenu" (itemSelected)="onSelect($event)"><button mfMenuItem value="a">A</button></mf-menu>`
@@ -49,5 +51,42 @@ declare const menuItemVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];
 
-export { Menu, MenuItem, MenuTrigger, menuItemVariants };
-export type { MenuItemActive };
+interface MenubarAction<V = string> {
+    label: string;
+    value: V;
+    icon?: string;
+    /** Görsel kısayol ipucu (ör. `Ctrl+S`) — kısayolu KAYDETMEZ, yalnızca gösterir. */
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    /** Bu öğeden SONRA ayırıcı çizgi. */
+    separatorAfter?: boolean;
+}
+interface MenubarMenu<V = string> {
+    label: string;
+    items: MenubarAction<V>[];
+}
+/**
+ * `<mf-menubar [menus]="menus" (itemSelect)="run($event)" ariaLabel="Editör" />`
+ *
+ * Masaüstü uygulama tarzı kalıcı menü çubuğu (Dosya · Düzen · Görünüm) —
+ * WAI-ARIA APG "Menubar": `@angular/aria/menu`'nün `ngMenuBar`/`ngMenu`
+ * desenleri. Klavye: ←/→ üst menüler arası (açık menü eşlik eder), ↓/Enter
+ * açar, ↑/↓ öğeler, typeahead, Escape kapatır ve odağı çubuğa döndürür.
+ *
+ * Alt menüler CDK bağlı overlay'lerinde; çubuğa ilk odak/hover'da bir kez
+ * render edilir (`rendered`), görünürlüğü `ngMenu`'nün `data-visible`'ı yönetir.
+ */
+declare class Menubar<V = string> {
+    readonly menus: i0.InputSignal<MenubarMenu<V>[]>;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly itemSelect: i0.OutputEmitterRef<V>;
+    protected readonly rendered: i0.WritableSignal<boolean>;
+    protected readonly submenus: i0.Signal<readonly Menu$1<V>[]>;
+    protected readonly positions: _angular_cdk_overlay.ConnectedPosition[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<Menubar<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Menubar<any>, "mf-menubar", ["mfMenubar"], { "menus": { "alias": "menus"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, never, never, true, never>;
+}
+
+export { Menu, MenuItem, MenuTrigger, Menubar, menuItemVariants };
+export type { MenuItemActive, MenubarAction, MenubarMenu };

package/types/mesgflow-ui-kit-nav-menu.d.ts

@@ -0,0 +1,58 @@
+import * as _angular_core from '@angular/core';
+
+interface NavMenuLink {
+    label: string;
+    href: string;
+    description?: string;
+    icon?: string;
+}
+interface NavMenuItem {
+    label: string;
+    /** Alt panel yoksa doğrudan bağlantı. */
+    href?: string;
+    links?: NavMenuLink[];
+    /** Panelin yan tarafındaki vurgulu kart (yeni özellik, duyuru). */
+    featured?: NavMenuLink;
+}
+/**
+ * `<mf-nav-menu [items]="nav" ariaLabel="Ana gezinme" (linkClick)="go($event)" />`
+ *
+ * Pazarlama/site başlığı gezinmesi — WAI-ARIA APG "Disclosure Navigation
+ * Menu" (bilerek `role="menu"` DEĞİL: site gezinmesi bağlantılardır, menü
+ * uygulama komutlarıdır). Üst düğmeler `aria-expanded` + `aria-controls`;
+ * paneller ızgara bağlantılar + isteğe bağlı vurgulu kart.
+ *
+ * - Fare: üzerine gelince kısa gecikmeyle açılır, ayrılınca kapanır.
+ * - Klavye: Enter/Boşluk aç/kapa, Escape kapatır ve odağı düğmeye döndürür,
+ *   odak gezinmeden çıkınca panel kapanır.
+ * - `linkClick`: yönlendirici kullanan uygulamalar için (orta tık/yeni sekme
+ *   için `href` korunur; `event.preventDefault()` tüketicidedir).
+ */
+declare class NavMenu {
+    readonly items: _angular_core.InputSignal<NavMenuItem[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** ms — fare ile açılma gecikmesi. */
+    readonly hoverDelay: _angular_core.InputSignal<number>;
+    readonly linkClick: _angular_core.OutputEmitterRef<{
+        link: NavMenuLink;
+        event: MouseEvent;
+    }>;
+    protected readonly baseId: string;
+    protected readonly open: _angular_core.WritableSignal<number | null>;
+    private readonly host;
+    private timer?;
+    protected readonly anyOpen: _angular_core.Signal<boolean>;
+    constructor();
+    protected panelWidth(item: NavMenuItem): string;
+    protected toggle(i: number): void;
+    protected hoverOpen(i: number): void;
+    protected hoverClose(): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected closeAndFocus(): void;
+    protected onLink(event: MouseEvent, link: NavMenuLink): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavMenu, "mf-nav-menu", ["mfNavMenu"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
+}
+
+export { NavMenu };
+export type { NavMenuItem, NavMenuLink };

package/types/mesgflow-ui-kit-notification-center.d.ts

@@ -0,0 +1,41 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+interface NotificationItem {
+    id: string;
+    title: string;
+    body?: string;
+    /** Görünen zaman metni ("2 dk önce") — biçimleme tüketicide. */
+    time: string;
+    read?: boolean;
+    /** Avatar için ad; yoksa `icon` gösterilir. */
+    actor?: string;
+    icon?: string;
+    tone?: MfTone;
+}
+/**
+ * `<mf-notification-center [(notifications)]="inbox" (itemClick)="open($event)" (viewAll)="go()" />`
+ *
+ * Başlıktaki zil + açılır gelen kutusu: okunmamış sayacı (99+), "tümünü
+ * okundu işaretle", okunmamış/okunmuş sekmesi, boş durum. Bir öğeye tıklamak
+ * onu okundu yapar ve `itemClick` yayar. Tetikleyicinin erişilebilir adı
+ * okunmamış sayısını içerir; liste `role="list"`.
+ */
+declare class NotificationCenter {
+    readonly notifications: _angular_core.ModelSignal<NotificationItem[]>;
+    readonly itemClick: _angular_core.OutputEmitterRef<NotificationItem>;
+    readonly viewAll: _angular_core.OutputEmitterRef<void>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfNotificationCenterLabels>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly unread: _angular_core.Signal<number>;
+    protected readonly triggerLabel: _angular_core.Signal<string>;
+    protected toneBg(n: NotificationItem): string;
+    markAllRead(): void;
+    protected select(n: NotificationItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationCenter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NotificationCenter, "mf-notification-center", ["mfNotificationCenter"], { "notifications": { "alias": "notifications"; "required": false; "isSignal": true; }; }, { "notifications": "notificationsChange"; "itemClick": "itemClick"; "viewAll": "viewAll"; }, never, never, true, never>;
+}
+
+export { NotificationCenter };
+export type { NotificationItem };

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

@@ -29,6 +29,8 @@ declare class NumberInput implements ControlValueAccessor {
     readonly unit: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly hasError: _angular_core.InputSignal<boolean>;
+    /** İç `<input>`'un id'si — harici bir `<label for>` / `mf-field for` ile ilişkilendirmek için. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     private onChange;
     private onTouched;
@@ -49,7 +51,7 @@ declare class NumberInput implements ControlValueAccessor {
     protected onUnitPointerMove(event: PointerEvent): void;
     protected onUnitPointerUp(event: PointerEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInput, "mf-number-input", ["mfNumberInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInput, "mf-number-input", ["mfNumberInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { NumberInput };

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

@@ -15,6 +15,8 @@ declare class PasswordInput extends ValueAccessorBase<string> implements Control
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly hasError: _angular_core.InputSignal<boolean>;
+    /** İç `<input>`'un id'si — harici bir `<label for>` / `mf-field for` ile ilişkilendirmek için. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly fullWidth: _angular_core.InputSignal<boolean>;
     readonly showLabel: _angular_core.InputSignal<string | undefined>;
@@ -27,7 +29,7 @@ declare class PasswordInput extends ValueAccessorBase<string> implements Control
     protected toggle(): void;
     protected onInput(raw: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PasswordInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PasswordInput, "mf-password-input", ["mfPasswordInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PasswordInput, "mf-password-input", ["mfPasswordInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { PasswordInput };