@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,54 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+
+interface TimeValue {
+    hour: number;
+    minute: number;
+}
+declare function formatTime(v: TimeValue): string;
+/** `"9:5"`/`"09:05"`/vb. serbest biçimli metni ayrıştırır — saat 0-23, dakika 0-59 dışındaysa `null`. */
+declare function parseTime(text: string): TimeValue | null;
+
+/**
+ * `<mf-time-picker [(value)]="meetingTime" [minuteStep]="15" />` — `value`
+ * `{hour, minute} | null` (bkz. `TimeValue`). Tetikleyici `DatePicker`'ın
+ * AYNI deseni (`InputGroup` + yazarak giriş + `mf-popover` paneli), panel
+ * TAKVİM yerine iki kaydırılabilir SÜTUN (saat/dakika) — her biri `mf-scroll-area`
+ * (bu fazda eklenen kenar-solma maskeli kaydırma alanı, bkz. `scroll-area.ts`).
+ * Yazarak giriş VE sütundan tıklayarak seçim AYNI `value` model'ine yazıyor.
+ */
+declare class TimePicker extends ValueAccessorBase<TimeValue | null> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<TimeValue | null>;
+    /** Dakika sütunundaki adım — ör. `15` → 00/15/30/45. Varsayılan 5. */
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly clearLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly timePickerLabels;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected readonly effectiveClearLabel: _angular_core.Signal<string>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly draft: _angular_core.WritableSignal<string>;
+    protected readonly hours: number[];
+    protected readonly minutes: _angular_core.Signal<number[]>;
+    private readonly inputEl;
+    constructor();
+    writeValue(value: TimeValue | null): void;
+    private setValue;
+    protected onInput(raw: string): void;
+    protected commitDraft(): void;
+    protected pickHour(hour: number): void;
+    protected pickMinute(minute: number): void;
+    protected clear(): void;
+    protected close(): void;
+    protected onEscape(): void;
+    protected optionClasses(selected: boolean): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimePicker, "mf-time-picker", ["mfTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "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; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { TimePicker, formatTime, parseTime };
+export type { TimeValue };

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

@@ -0,0 +1,27 @@
+import * as i0 from '@angular/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+
+interface TimelineItem {
+    title: string;
+    description?: string;
+    timestamp?: string;
+    tone?: MfTone;
+}
+/**
+ * `<mf-timeline [items]="[{title: 'Sipariş alındı', timestamp: '10:02'}, ...]" />`
+ * — kronolojik bir olay günlüğü (ör. bir siparişin durum geçmişi). Her
+ * satır [nokta+çizgi] sütunu + [içerik] sütunu olan bir flex satır — çizgi
+ * `flex-1` ile SIBLING içerik sütununun yüksekliğine (varsayılan
+ * `align-items: stretch`) otomatik uzar, SON öğede hiç render EDİLMEZ
+ * (Stepper'ın `::after`+`last:` CSS'i yerine düz bir `@if` yeterli — burada
+ * "hangi satır son" bilgisi zaten `@for`'un `$last`'ından ÜCRETSİZ geliyor).
+ */
+declare class Timeline {
+    readonly items: i0.InputSignal<TimelineItem[]>;
+    protected dotClasses(tone: MfTone | undefined): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Timeline, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Timeline, "mf-timeline", ["mfTimeline"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Timeline };
+export type { TimelineItem };

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

@@ -0,0 +1,94 @@
+import * as _angular_core from '@angular/core';
+
+type ToastTone = 'success' | 'danger' | 'info' | 'warning';
+/** @deprecated `ToastTone` kullan — `'error'` değeri `'danger'`ya taşındı (bkz. plan Faz 1a). */
+type ToastType = ToastTone;
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastOptions {
+    description?: string;
+    /** ms. `0` → asla kendiliğinden kapanmaz (kullanıcı elle kapatana kadar kalır). Varsayılan 4500ms. */
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastItem {
+    id: number;
+    type: ToastTone;
+    title: string;
+    description?: string;
+    action?: ToastAction;
+    /** `true` — çıkış animasyonu (`animate-toast-out`) oynuyor, `EXIT_MS` sonra listeden gerçekten kaldırılır (bkz. `dismiss()`). */
+    leaving: boolean;
+}
+/**
+ * Uygulamanın tek, global toast kaynağı — signal-first, `providedIn: 'root'`.
+ * Görsel katman `ToastHost`'ta (`<mf-toast-host>`, kök seviyede bir kez
+ * render edilir) — burası SADECE state. Gömülebilir bir editör host
+ * uygulamanın kendi bildirim sistemine bağımlı OLAMAZ, bu yüzden bu servis
+ * bir ürün deposunun eski bildirim servisinden kite taşındı (2026-09-07) —
+ * artık kütüphanenin kendi parçası.
+ *
+ * `success`/`error`/`info`/`warning`'in ikinci parametresi HEM düz bir
+ * `description` string'i HEM `ToastOptions` kabul eder (geriye dönük
+ * uyumluluk — mevcut `toasts.success('Kaydedildi', 'Değişiklikler
+ * uygulandı.')` çağrıları DEĞİŞMEDEN çalışmaya devam eder).
+ */
+declare class ToastService {
+    readonly items: _angular_core.WritableSignal<ToastItem[]>;
+    /**
+     * `ToastHost` tarafından kuruluşta ayarlanır (bkz. `toast-host.ts`
+     * `[limit]` input'u) — aynı anda gösterilecek AZAMİ toast sayısı,
+     * aşılırsa EN ESKİ (henüz çıkış animasyonu oynamayan) toast'lar ANINDA
+     * (animasyonsuz) kaldırılır. `null` (varsayılan) → sınırsız.
+     */
+    readonly limit: _angular_core.WritableSignal<number | null>;
+    private nextId;
+    success(title: string, options?: string | ToastOptions): void;
+    error(title: string, options?: string | ToastOptions): void;
+    info(title: string, options?: string | ToastOptions): void;
+    warning(title: string, options?: string | ToastOptions): void;
+    /**
+     * İki aşamalı: önce `leaving:true` işaretler (panel `animate-toast-out`
+     * oynatır — bkz. `toast-host.html`), `EXIT_MS` sonra listeden gerçekten
+     * çıkarır. Zaten çıkış oynayan bir öğede tekrar çağrılırsa (ör. kullanıcı
+     * X'e hızlı hızlı tıklarsa) YOK SAYILIR — `list.map` idempotent.
+     */
+    dismiss(id: number): void;
+    /** Şu an gösterilen (henüz çıkış oynamayan) TÜM toast'ları kapatır — her biri kendi çıkış animasyonuyla, `dismiss()`'in aynısı, tek tek. */
+    dismissAll(): void;
+    private push;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * `<mf-toast-host position="bottom-right" [limit]="3" />` — host uygulamanın
+ * KÖK seviyesinde bir kez render edilir (auth ekranları dahil her yerde
+ * görünür olsun diye). `limit`, `ToastService.limit`'e bir kerelik (kuruluşta)
+ * yazılır — `ToastHost` görsel katman, sınır mantığı servis tarafında yaşar
+ * (bkz. `toast.service.ts`).
+ */
+declare class ToastHost {
+    protected readonly toasts: ToastService;
+    protected readonly iconFor: (type: ToastTone) => string;
+    protected readonly chipBgFor: (type: ToastTone) => string;
+    protected readonly cardClassFor: (item: ToastItem) => string;
+    /** Kapat butonunun `aria-label`'ı — toast'ın kendi başlığıyla birleştirilir. Verilmezse `MF_TOAST_LABELS`. */
+    readonly dismissLabel: _angular_core.InputSignal<string | undefined>;
+    readonly position: _angular_core.InputSignal<ToastPosition>;
+    /** Aynı anda gösterilecek azami toast sayısı — bkz. `ToastService.limit`. `null` (varsayılan) → sınırsız. */
+    readonly limit: _angular_core.InputSignal<number | null>;
+    private readonly toastLabels;
+    protected readonly effectiveDismissLabel: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
+    protected onAction(item: ToastItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastHost, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastHost, "mf-toast-host", never, { "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ToastHost, ToastService };
+export type { ToastAction, ToastItem, ToastOptions, ToastPosition, ToastTone, ToastType };

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

@@ -0,0 +1,110 @@
+import * as _angular_core from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Basılı durum `aria-pressed` üzerinden stillenir (tek kaynak — durum sınıfı ayrıca tutulmaz):
+ * nötr `surface-active` zemin + tam `fg` metin. Vurgu rengi BİLEREK yok — biçimlendirme çubuğu
+ * gibi yoğun kümelerde marka rengi gürültü olur (Radix/Linear aynı tercihi yapar).
+ */
+declare const toggleVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    appearance?: "ghost" | "outline" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleSize = NonNullable<VariantProps<typeof toggleVariants>['size']>;
+type ToggleAppearance = NonNullable<VariantProps<typeof toggleVariants>['appearance']>;
+
+/**
+ * `<button mfToggle [(pressed)]="bold" aria-label="Kalın"><span mfIcon>format_bold</span></button>`
+ *
+ * İki durumlu düğme — `aria-pressed` ile duyurulur (checkbox DEĞİL: eylem gibi görünen ama durum
+ * taşıyan düğme, WAI-ARIA "button" deseni). İkon-tek kullanımda `aria-label` zorunlu, `iconOnly`
+ * kare yapar. Birbirine bağlı düğmeler için `mf-toggle-group`.
+ */
+declare class Toggle {
+    readonly pressed: _angular_core.ModelSignal<boolean>;
+    readonly size: _angular_core.InputSignal<ToggleSize>;
+    readonly appearance: _angular_core.InputSignal<ToggleAppearance>;
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toggle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Toggle, "button[mfToggle]", ["mfToggle"], { "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; }, never, never, true, never>;
+}
+
+type ToggleGroupType = 'single' | 'multiple';
+/** Öğelerin gruba eriştiği sözleşme — dosya içi sınıf sırası döngüsü olmasın diye arayüz. */
+interface ToggleGroupContext {
+    readonly size: Signal<ToggleSize>;
+    readonly appearance: Signal<ToggleAppearance>;
+    readonly disabled: Signal<boolean>;
+    readonly tabStopValue: Signal<string | null>;
+    isPressed(value: string): boolean;
+    toggle(value: string): void;
+    onKeydown(event: KeyboardEvent, item: ToggleGroupItem): void;
+    onFocus(item: ToggleGroupItem): void;
+}
+/** `<button mfToggleGroupItem value="bold" aria-label="Kalın" iconOnly>…</button>` — bkz. `ToggleGroup`. */
+declare class ToggleGroupItem {
+    /**
+     * Zorunlu anlamda — ama `input.required` DEĞİL: grubun sekme durağı hesabı TÜM öğelerin
+     * değerini okur; `@for` içinde `[value]` bağlandığında bir öğenin host bağlaması, girdileri
+     * henüz atanmamış SONRAKİ öğeyi okuyup NG0950 fırlatıyordu (ThemeSwitcher testinde yakalandı).
+     */
+    readonly value: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly group: ToggleGroupContext;
+    readonly element: ElementRef<HTMLButtonElement>;
+    readonly isDisabled: Signal<boolean>;
+    protected readonly pressed: Signal<boolean>;
+    protected readonly classes: Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleGroupItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToggleGroupItem, "button[mfToggleGroupItem]", ["mfToggleGroupItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * `<mf-toggle-group type="multiple" [(value)]="marks" ariaLabel="Biçim">
+ *    <button mfToggleGroupItem value="bold" aria-label="Kalın" iconOnly>…</button>
+ *  </mf-toggle-group>`
+ *
+ * Birbirine bağlı iki durumlu düğmeler. `value` HER ZAMAN bir dizi (tek modda en fazla bir öğe) —
+ * iki mod için ayrı model tipi tutmamak için. `single`'da `allowEmpty=false` seçimi boşaltmayı
+ * engeller (hizalama gibi daima bir değeri olan kümeler).
+ *
+ * Klavye: grup TEK sekme durağıdır (dolaşan tabindex — basılı ilk öğe, yoksa ilk etkin öğe, son
+ * odaklanan hatırlanır); yatayda ←/→ (RTL'de görsel yöne göre ters), dikeyde ↑/↓, Home/End;
+ * devre dışı öğeler atlanır, sarma yapılır. Semantik `role="group"` + her öğede `aria-pressed`.
+ * `@angular/aria/toolbar` BİLEREK kullanılmadı: projekte edilen tüketici düğmeleriyle kayıt
+ * döngüsü, tıklama olmadan boş `valueChange` üretebiliyordu (bkz. `SegmentedControl` notu).
+ */
+declare class ToggleGroup implements ToggleGroupContext {
+    readonly type: _angular_core.InputSignal<ToggleGroupType>;
+    readonly value: _angular_core.ModelSignal<readonly string[]>;
+    readonly size: _angular_core.InputSignal<ToggleSize>;
+    readonly appearance: _angular_core.InputSignal<ToggleAppearance>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `single` modda basılı öğeye tekrar basmak seçimi boşaltabilir mi. */
+    readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly items;
+    private readonly host;
+    private readonly lastFocused;
+    private readonly enabledItems;
+    readonly tabStopValue: Signal<string>;
+    /**
+     * `outline`: bitişik şerit (Button Group ile aynı kenar birleştirme — iç köşeler kare, 1px
+     * kenarlık çakışır, odaklı öğe üste çıkar). `ghost`: aralıklı, zeminsiz.
+     */
+    protected readonly classes: Signal<string>;
+    isPressed(value: string): boolean;
+    toggle(value: string): void;
+    onFocus(item: ToggleGroupItem): void;
+    onKeydown(event: KeyboardEvent, item: ToggleGroupItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleGroup, "mf-toggle-group", ["mfToggleGroup"], { "type": { "alias": "type"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["items"], ["*"], true, never>;
+}
+
+export { Toggle, ToggleGroup, ToggleGroupItem, toggleVariants };
+export type { ToggleAppearance, ToggleGroupType, ToggleSize };

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

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@angular/aria/toolbar';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * `<mf-toolbar><button mfToolbarButton value="bold">B</button>...</mf-toolbar>`
+ *
+ * Genel amaçlı gruplu buton çubuğu — zengin metin editörü/tuval araç
+ * çubukları için düşünüldü. ARIA/klavye (roving tabindex, ok tuşu
+ * navigasyonu) `@angular/aria/toolbar`'ın `Toolbar` pattern'inden
+ * `hostDirectives` ile geliyor — `SegmentedControl`'ün AYNI pattern ailesini
+ * kullandığı ama SEÇİM DURUMU (tek/çoklu) tuttuğu yere karşılık, bu primitif
+ * seçim durumu TUTMAZ: tekil aksiyon düğmeleri için `mfToolbarButton`
+ * yeter, dışlayıcı bir alt-grup gerekiyorsa (ör. hizalama) tüketici kendi
+ * `<div ngToolbarWidgetGroup [multi]="false">` sarmalayıcısını ekler (bkz.
+ * `@angular/aria/toolbar`'ın kendi JSDoc örneği).
+ */
+declare class Toolbar {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Toolbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Toolbar, "mf-toolbar", ["mfToolbar"], {}, {}, never, ["*"], true, [{ directive: typeof i1.Toolbar; inputs: { "orientation": "orientation"; "disabled": "disabled"; "wrap": "wrap"; }; outputs: {}; }]>;
+}
+
+/**
+ * `<button mfToolbarButton value="bold" [pressed]="isBold()">B</button>` —
+ * `mf-toolbar` içine konur. `pressed`, bir `ngToolbarWidgetGroup` sarmalayıcısı
+ * OLMADAN da (ör. bağımsız bir toggle — kalın/italik gibi birbirinden bağımsız
+ * açma-kapama düğmeleri) tüketicinin kendi state'inden görsel "aktif" durumunu
+ * bildirmesi için var; bir grup içindeyse `widget.selected()` zaten aynı
+ * görevi görür, ikisi OR'lanıyor.
+ */
+declare class ToolbarButton {
+    private readonly widget;
+    readonly pressed: i0.InputSignal<boolean>;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ToolbarButton, "button[mfToolbarButton]", never, { "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.ToolbarWidget; inputs: { "value": "value"; "disabled": "disabled"; "id": "id"; }; outputs: {}; }]>;
+}
+
+/** `<mf-toolbar-separator />` — `mf-toolbar` içindeki buton gruplarını ayırmak için dikey çizgi. */
+declare class ToolbarSeparator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarSeparator, "mf-toolbar-separator", never, {}, {}, never, never, true, never>;
+}
+
+declare const toolbarButtonVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToolbarButtonActive = VariantProps<typeof toolbarButtonVariants>['active'];
+
+export { Toolbar, ToolbarButton, ToolbarSeparator, toolbarButtonVariants };
+export type { ToolbarButtonActive };

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

@@ -0,0 +1,55 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, TemplateRef } from '@angular/core';
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * `<button mfButton [mfTooltip]="'Filtreler'">` (düz metin) veya
+ * `<button mfButton [mfTooltipContent]="richTpl">` (bkz. aşağıdaki örnek —
+ * zengin/reaktif içerik) — hover/focus'ta CDK Overlay ile konumlanan bir
+ * balon gösterir. `mfTooltipContent` VERİLMİŞSE `mfTooltip` YOK SAYILIR.
+ *
+ * ```html
+ * <button mfButton [mfTooltipContent]="kbdHint">Kaydet</button>
+ * <ng-template #kbdHint>
+ *   Kaydet <kbd mfKbd>Ctrl</kbd>+<kbd mfKbd>S</kbd>
+ * </ng-template>
+ * ```
+ *
+ * Düz metin YOLU (ayrı bir Angular component/`ComponentPortal` kurmadan) ham
+ * bir DOM node'u ile çiziliyor — statik metin için fazla makine olurdu.
+ * Şablon YOLU `TemplatePortal` kullanır (gerçek Angular içeriği — binding/
+ * directive/başka bir bileşen barındırabilir), bunun için `ViewContainerRef`
+ * gerekiyor.
+ */
+declare class Tooltip implements OnDestroy {
+    /** Boş string verilirse (ve `mfTooltipContent` de yoksa) tooltip tamamen devre dışı kalır (ör. koşullu etiketler için). */
+    readonly mfTooltip: _angular_core.InputSignal<string>;
+    /** Verilmişse `mfTooltip`'in YERİNE geçer — bkz. sınıf üstündeki JSDoc örneği. */
+    readonly mfTooltipContent: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
+    private readonly overlay;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private overlayRef?;
+    private bubbleEl?;
+    private showHandle?;
+    protected scheduleShow(): void;
+    protected show(): void;
+    /**
+     * Public: `SearchInput` gibi, kendi state değişimiyle tooltip'i ANINDA
+     * kapatmak isteyen tüketiciler için (bkz. search-input.ts `expand()`) —
+     * BİLEREK senkron: tooltip hover/focus/Escape gibi yüksek frekanslı,
+     * anlık etkileşimlerle kapanıyor, `Popover`'ın gecikmeli-dispose deseni
+     * (bkz. `popover.ts` `EXIT_MS`) burada gereksiz karmaşıklık + testlerin
+     * beklediği "blur → anında kaldırılır" sözleşmesini bozardı (bkz.
+     * `tooltip.spec.ts`). Giriş animasyonu (`show()`teki `animate-overlay-in`)
+     * yeterli — önceden tooltip'in HİÇ animasyonu yoktu (gerçek bulgu).
+     */
+    hide(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tooltip, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tooltip, "[mfTooltip], [mfTooltipContent]", ["mfTooltip"], { "mfTooltip": { "alias": "mfTooltip"; "required": false; "isSignal": true; }; "mfTooltipContent": { "alias": "mfTooltipContent"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Tooltip };
+export type { TooltipPosition };

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

@@ -0,0 +1,66 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+type TourPlacement = 'bottom' | 'top' | 'start' | 'end';
+interface TourStep {
+    /**
+     * Vurgulanacak öğe: CSS seçicisi, öğe ya da `ElementRef`. Verilmezse adım ekran ortasında
+     * bir karşılama/kapanış kartı olarak gösterilir (spot ışığı deliksiz karartır).
+     */
+    target?: string | Element | ElementRef<Element>;
+    title: string;
+    content: string;
+    /** Kartın hedefe göre yeri — mantıksal (`start`/`end` RTL'de yer değiştirir). Sığmazsa karşı taraf. */
+    placement?: TourPlacement;
+}
+type TourResult = 'completed' | 'skipped';
+interface TourOptions {
+    /** Hedefin çevresindeki boşluk (px). */
+    padding?: number;
+    /** Her adım değişiminde (0 tabanlı indeks) — analitik ya da hedefin görünür olması için. */
+    stepChange?: (index: number, step: TourStep) => void;
+}
+interface SpotlightRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/** Bir tur çalışmasının durumu — servis ile spot ışığı ve kart bileşenleri bunu paylaşır. */
+declare class TourRun {
+    readonly steps: readonly TourStep[];
+    private readonly onNavigate;
+    private readonly onFinish;
+    readonly index: _angular_core.WritableSignal<number>;
+    /** Hedefin viewport'taki kutusu (padding dahil); hedefsiz adımda `null`. */
+    readonly rect: _angular_core.WritableSignal<SpotlightRect | null>;
+    readonly step: _angular_core.Signal<TourStep>;
+    readonly isFirst: _angular_core.Signal<boolean>;
+    readonly isLast: _angular_core.Signal<boolean>;
+    constructor(steps: readonly TourStep[], onNavigate: (index: number) => void, onFinish: (result: TourResult) => void);
+    next(): void;
+    back(): void;
+    skip(): void;
+}
+
+/**
+ * `const result = await tour.start([{ target: '#new-campaign', title: '…', content: '…' }, …]);`
+ *
+ * Ürün turu / coachmark — `help` tonu tam bunun için. İki overlay: tam ekran spot ışığı (karartır,
+ * tıklamaları yutar) ve hedefe bağlı adım kartı. Her adımda hedef görünür alana kaydırılır
+ * (azaltılmış harekette anında), kaydırma/yeniden boyutlandırmada delik ve kart birlikte izler.
+ * Bulunamayan hedef ortalanmış karta düşer (tur kırılmaz). Aynı anda tek tur; bitince odak
+ * turdan önceki öğeye döner. Sonuç: `'completed'` ya da `'skipped'` (Esc, ×).
+ */
+declare class TourService {
+    private readonly injector;
+    private readonly document;
+    private active;
+    get isActive(): boolean;
+    start(steps: readonly TourStep[], options?: TourOptions): Promise<TourResult>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TourService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+export { TourRun, TourService };
+export type { SpotlightRect, TourOptions, TourPlacement, TourResult, TourStep };

package/types/mesgflow-ui-kit-tree-select.d.ts

@@ -0,0 +1,65 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { ValueAccessorBase, MfSize } from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TreeNode } from '@mesgflow/ui-kit/tree';
+
+/**
+ * `<mf-tree-select [nodes]="regions" [(value)]="chosen" multi searchable />`
+ *
+ * Hiyerarşik seçenekler için Select — kategori, bölge, klasör. Tetikleyici Select ile AYNI
+ * görünüm (çoklu seçimde yongalar + "+N"); panel kitin `Tree`'si (WAI-ARIA tree: oklar, Home/End,
+ * yazarak ara, Enter/Space seçim — `@angular/aria/tree`'den).
+ *
+ * `searchable`: panelin başında aksan duyarsız arama — eşleşmeler ATALARIYLA tutulur ve dallar
+ * açılır (bkz. `filterTree`). Tek seçimde seçim paneli kapatır ve odağı tetikleyiciye döndürür;
+ * çoklu seçimde panel açık kalır. `value` her zaman dizi (Tree ile aynı sözleşme).
+ */
+declare class TreeSelect<T> extends ValueAccessorBase<T[]> implements ControlValueAccessor {
+    readonly nodes: _angular_core.InputSignal<TreeNode<T>[]>;
+    readonly value: _angular_core.ModelSignal<T[]>;
+    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<MfSize>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Tetikleyicinin (ve ağacın) erişilebilir adı — görünür bir etiket yoksa zorunlu. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly maxVisibleChips: _angular_core.InputSignal<number>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfTreeSelectLabels>;
+    private readonly trigger;
+    private readonly panel;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    private readonly formDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected readonly visibleNodes: _angular_core.Signal<TreeNode<T>[]>;
+    protected readonly searching: _angular_core.Signal<boolean>;
+    private readonly labelByValue;
+    protected readonly selectedLabels: _angular_core.Signal<string[]>;
+    protected readonly visibleChips: _angular_core.Signal<string[]>;
+    protected readonly overflowCount: _angular_core.Signal<number>;
+    protected readonly triggerClasses: _angular_core.Signal<string>;
+    constructor();
+    protected toggle(): void;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    protected onTreeValue(values: T[]): void;
+    protected close(restoreFocus: boolean): void;
+    writeValue(value: T[] | null): void;
+    setDisabledState(disabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeSelect<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeSelect<any>, "mf-tree-select", ["mfTreeSelect"], { "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Etiketi sorguyu içeren düğümleri, ATALARIYLA birlikte tutar (bağlam kaybolmasın — "Kadıköy"
+ * bulunduğunda "İstanbul › Kadıköy" yolu görünür). Eşleşen bir düğümün çocukları da kalır
+ * (bir kategoriyi aramak altındakileri de gösterir). Boş sorgu ağacı aynen döner.
+ */
+declare function filterTree<T>(nodes: readonly TreeNode<T>[], query: string): TreeNode<T>[];
+/** `value → label` eşlemesi (tetikleyici metni/yongaları için) — değer kimliğiyle (`===`). */
+declare function flattenTree<T>(nodes: readonly TreeNode<T>[]): Map<T, string>;
+
+export { TreeSelect, filterTree, flattenTree };

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

@@ -0,0 +1,44 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface TreeNode<T> {
+    id: string;
+    label: string;
+    value: T;
+    children?: TreeNode<T>[];
+    disabled?: boolean;
+}
+/**
+ * `<mf-tree [nodes]="layers" [(value)]="selectedIds" />` — katman/yapı
+ * paneli gibi iç içe, klavye gezintili ağaçlar için. ARIA/klavye (ok
+ * tuşları, typeahead, seviyeye göre girinti) `@angular/aria/tree`'nin
+ * `Tree`/`TreeItem`/`TreeItemGroup` pattern'inden geliyor — dokümantasyonun
+ * KENDİ önerdiği ÖZYİNELEMELİ (`ngTemplateOutlet` + kendi kendine referans
+ * veren `#treeNodes` template) render deseni birebir izlendi, çünkü veri
+ * derinliği (`TreeNode.children`) derleme zamanında bilinmiyor.
+ */
+declare class Tree<T> extends ValueAccessorBase<T[]> implements ControlValueAccessor {
+    readonly nodes: _angular_core.InputSignal<TreeNode<T>[]>;
+    readonly value: _angular_core.ModelSignal<T[]>;
+    readonly multi: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Tüm dalları açık başlatır (ör. arama sonuçları) — kullanıcı yine tek tek kapatabilir. */
+    readonly expandAll: _angular_core.InputSignal<boolean>;
+    constructor();
+    writeValue(value: T[]): void;
+    protected rowClasses(selected: boolean | undefined, disabled: boolean): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tree<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tree<any>, "mf-tree", ["mfTree"], { "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "expandAll": { "alias": "expandAll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare const treeRowVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TreeRowSelected = VariantProps<typeof treeRowVariants>['selected'];
+
+export { Tree, treeRowVariants };
+export type { TreeNode, TreeRowSelected };