@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,185 @@
+import * as _mesgflow_ui_kit_command from '@mesgflow/ui-kit/command';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+
+/** `mf-command`'ın tek öğesi — `data` tüketicinin kendi yükü (rota, eylem kimliği vb.). */
+interface MfCommandItem<T = unknown> {
+    /** Benzersiz — `@for` track anahtarı ve DOM kimliği buradan türer. */
+    id: string;
+    label: string;
+    /** Aynı `group`'taki öğeler başlık altında toplanır; grup sırası = ilk görünme sırası. */
+    group?: string;
+    icon?: string;
+    /** Etiketin yanında sönük ikincil metin (ör. yol, açıklama). Aranır ama vurgulanmaz. */
+    hint?: string;
+    /** Etikette geçmeyen eş anlamlılar ("theme" → "Görünüm"). */
+    keywords?: readonly string[];
+    /** Görsel kısayol yongaları (`['Ctrl', 'S']`) — kısayolu DİNLEMEZ, yalnızca gösterir. */
+    shortcut?: readonly string[];
+    disabled?: boolean;
+    data?: T;
+}
+/** Etiketin görüntülenen parçaları — `match: true` olanlar vurgulanır. */
+interface MfCommandSegment {
+    text: string;
+    match: boolean;
+}
+interface MfCommandResult<T = unknown> {
+    item: MfCommandItem<T>;
+    score: number;
+    segments: MfCommandSegment[];
+}
+declare function foldText(text: string, locale?: string): string;
+/**
+ * Puan basamakları (yüksek → düşük): tam etiket 1000 · etiket başı 800 · kelime başı 600 ·
+ * etiket içi 400 · anahtar kelime / ipucu 200–300 · bulanık alt-dizi 100+. Aynı basamakta kısa
+ * etiket öne geçer (daha "tam" eşleşme). Etiketi eşleşmeyen öğenin segmentleri vurgusuzdur.
+ */
+declare function scoreCommand<T>(item: MfCommandItem<T>, foldedQuery: string, locale?: string): MfCommandResult<T> | null;
+/**
+ * Boş sorguda öğeler verildiği sırada döner; doluyken puana göre (eşitlikte verilen sıra —
+ * `Array.prototype.sort` kararlı) sıralanır ve ilk `limit` tutulur.
+ */
+declare function filterCommands<T>(items: readonly MfCommandItem<T>[], query: string, options?: {
+    limit?: number;
+    locale?: string;
+}): MfCommandResult<T>[];
+interface MfCommandGroup<T = unknown> {
+    label: string;
+    results: MfCommandResult<T>[];
+}
+/** Sonuçları `group`'a göre toplar — grup sırası, o gruptaki EN İYİ sonucun sırasıdır. */
+declare function groupCommands<T>(results: readonly MfCommandResult<T>[]): MfCommandGroup<T>[];
+
+/**
+ * `<mf-command [items]="commands" (run)="onRun($event)" />`
+ *
+ * Komut paleti gövdesi — arama kutusu + gruplu sonuç listesi. Tek başına (sayfa içi, ör. bir
+ * ayarlar arama alanı) kullanılabilir; ⌘K deneyimi için `CommandPaletteService.open()` bunu bir
+ * dialog içinde açar (bkz. `command-palette.service.ts`).
+ *
+ * ARIA 1.2 combobox deseni: odak HER ZAMAN input'ta kalır, etkin satır `aria-activedescendant`
+ * ile duyurulur (satırlar odaklanamaz — `mousedown` engellenir, aksi halde input odağı kaybederdi).
+ * Arama aksan/büyük-küçük harf duyarsız, alt-dizi (fuzzy) eşleşmeli ve eşleşen harfleri vurgular
+ * (bkz. `command-search.ts`). Esc: sorgu doluysa ÖNCE sorguyu temizler (Raycast/Linear davranışı),
+ * boşsa olayı yukarı bırakır — dialog'un kendi Esc kapanışı çalışır.
+ */
+declare class Command<T = unknown> {
+    readonly items: _angular_core.InputSignal<readonly MfCommandItem<T>[]>;
+    readonly query: _angular_core.ModelSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Dolu sorguda gösterilecek en fazla sonuç — boş sorguda tüm liste (tüketici sıralaması) gösterilir. */
+    readonly limit: _angular_core.InputSignal<number>;
+    /** Alt bilgi şeridi: ↑↓ / ↵ / Esc ipuçları (dialog içinde anlamlı; sayfa içi kullanımda genelde kapalı). */
+    readonly hints: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Açılışta input'a odaklan — dialog zaten ilk odaklanabilir öğeye odaklanır, sayfa içinde istenirse. */
+    readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly run: _angular_core.OutputEmitterRef<MfCommandItem<T>>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfCommandLabels>;
+    private readonly locale;
+    private readonly host;
+    private readonly inputRef;
+    private readonly idPrefix;
+    protected readonly listboxId: string;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    private readonly results;
+    protected readonly groups: _angular_core.Signal<_mesgflow_ui_kit_command.MfCommandGroup<T>[]>;
+    /** Görüntülenme sırasıyla düz liste — klavye gezinmesi bunun üzerinde yürür. */
+    private readonly flat;
+    /** Sonuç kümesi her değiştiğinde ilk etkin satıra sıfırlanır; kullanıcı gezinince elle güncellenir. */
+    protected readonly activeId: _angular_core.WritableSignal<string | null>;
+    protected readonly activeDomId: _angular_core.Signal<string | null>;
+    protected readonly liveText: _angular_core.Signal<string>;
+    constructor();
+    /** DOM kimliği sıra numarasından türer — `item.id` boşluk/`/` içerebilir, geçerli bir `id` olmayabilir. */
+    private readonly indexById;
+    protected optionId(itemId: string): string;
+    protected groupId(index: number): string;
+    protected onInput(value: string): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected setActive(result: MfCommandResult<T>): void;
+    protected select(result: MfCommandResult<T>): void;
+    /** Programatik odak — ör. sayfa içi kullanımda bir kısayolla aramaya atlamak için. */
+    focus(): void;
+    private enabled;
+    private move;
+    private edge;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Command<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Command<any>, "mf-command", ["mfCommand"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hints": { "alias": "hints"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "query": "queryChange"; "run": "run"; }, never, ["[mfCommandInputEnd]"], true, never>;
+}
+
+interface CommandPaletteData<T = unknown> {
+    items: readonly MfCommandItem<T>[];
+    placeholder?: string;
+    query?: string;
+    limit?: number;
+}
+/**
+ * `CommandPaletteService.open()`'ın dialog içeriği — `<mf-dialog>` KULLANMAZ: Dialog'un her zaman
+ * çizdiği başlık/kapat şeridi bir komut paletine uymuyor; yüzey `overlaySurface` reçetesinin cam
+ * olmayan, daha yüksek gölgeli hâli (palet içeriğin ÜSTÜNDE yüzen tek odak — Linear/Raycast).
+ * Dialog kabı kendi `aria-label`'ını servisten alır; odak/Esc/backdrop CDK'dan gelir.
+ */
+declare class CommandPalette<T = unknown> {
+    protected readonly data: CommandPaletteData<T>;
+    protected readonly ref: DialogRef<MfCommandItem<T>, CommandPalette<T>>;
+    /** `DialogService` çıkış animasyonu turu — `Dialog`'un aynı reaktif sınıfı (bkz. dialog.service.ts). */
+    private readonly surface;
+    protected readonly closing: _angular_core.Signal<boolean>;
+    protected readonly sheet: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandPalette<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandPalette<any>, "mf-command-palette", never, {}, {}, never, never, true, never>;
+}
+
+/** `Ctrl/⌘ + <hotkey>` mi? Düzenlenebilir bir metin alanındayken (`contenteditable`) kısayol yutulmaz. */
+declare function isCommandHotkey(event: KeyboardEvent, hotkey?: string): boolean;
+/**
+ * `<button mfButton [mfCommandPaletteTrigger]="commands" (commandRun)="go($event)">Ara</button>`
+ *
+ * Tıklamada VE global `Ctrl/⌘+K` kısayolunda paleti açar; seçilen öğeyi `commandRun` ile verir.
+ * `aria-keyshortcuts` kısayolu yardımcı teknolojiye duyurur. Kısayol dinleyicisi belgeye bağlı —
+ * sayfada TEK tetikleyici `hotkey` taşımalı (diğerleri `[hotkeyDisabled]="true"`).
+ */
+declare class CommandPaletteTrigger<T = unknown> {
+    readonly items: _angular_core.InputSignal<readonly MfCommandItem<T>[]>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly hotkey: _angular_core.InputSignal<string>;
+    readonly hotkeyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly commandRun: _angular_core.OutputEmitterRef<MfCommandItem<T>>;
+    private readonly palette;
+    protected readonly keyshortcuts: _angular_core.Signal<string | null>;
+    protected onDocumentKeydown(event: KeyboardEvent): void;
+    open(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandPaletteTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CommandPaletteTrigger<any>, "[mfCommandPaletteTrigger]", ["mfCommandPaletteTrigger"], { "items": { "alias": "mfCommandPaletteTrigger"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "hotkeyDisabled": { "alias": "hotkeyDisabled"; "required": false; "isSignal": true; }; }, { "commandRun": "commandRun"; }, never, never, true, never>;
+}
+
+type CommandPaletteOptions = Omit<CommandPaletteData, 'items'>;
+/**
+ * ⌘K paletinin tek açılış noktası — `DialogService` üzerine ince katman (odak tuzağı, Esc,
+ * backdrop, odak iadesi, çıkış animasyonu, mobil sheet HEPSİ oradan):
+ *
+ * ```ts
+ * const item = await palette.open(commands);
+ * if (item) void router.navigateByUrl(item.data.url);
+ * ```
+ *
+ * Aynı anda tek palet: açıkken yeniden `open()` yeni bir dialog yığmaz, açık olanın sonucunu
+ * bekleyen aynı `Promise`'i döner (kısayola iki kez basmak iki palet açmasın).
+ */
+declare class CommandPaletteService {
+    private readonly dialog;
+    private readonly labels;
+    private active;
+    get isOpen(): boolean;
+    open<T>(items: readonly MfCommandItem<T>[], options?: CommandPaletteOptions): Promise<MfCommandItem<T> | undefined>;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandPaletteService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+export { Command, CommandPalette, CommandPaletteService, CommandPaletteTrigger, filterCommands, foldText, groupCommands, isCommandHotkey, scoreCommand };
+export type { CommandPaletteData, CommandPaletteOptions, MfCommandGroup, MfCommandItem, MfCommandResult, MfCommandSegment };

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

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, TemplateRef } from '@angular/core';
+
+/**
+ * `<div [mfContextMenu]="menuTpl" #ctx="mfContextMenu">Sağ tıkla</div>
+ *  <ng-template #menuTpl>
+ *    <mf-menu (itemSelected)="onSelect($event); ctx.close()">
+ *      <button mfMenuItem value="edit">Düzenle</button>
+ *      <button mfMenuItem value="delete">Sil</button>
+ *    </mf-menu>
+ *  </ng-template>`
+ *
+ * Sağ tıkla İMLEÇ KONUMUNDA bir menü açar — native tarayıcı bağlam menüsü
+ * `event.preventDefault()` ile bastırılır. Kitteki ilk "gerçek DOM elemanına
+ * değil bir NOKTAYA sabitlenen" overlay (bkz. `Tooltip`'in aynı
+ * `flexibleConnectedTo` + elle `Overlay.create()` deseni) — `mf-popover`
+ * KULLANILMADI çünkü `Popover.origin` bir `CdkOverlayOrigin` (gerçek bir
+ * DOM elemanı) şart koşuyor, imleç noktası değil; CDK'nın
+ * `flexibleConnectedTo` stratejisi bir `{x, y}` noktasını da DOĞRUDAN kabul
+ * ediyor, ayrı bir "görünmez sanal anchor elemanı" hilesi GEREKMİYOR.
+ *
+ * Menü seçimi/kapanışı çağıranın kendi sorumluluğunda — `mfMenuTrigger`
+ * deseniyle AYNI ilke (bkz. `menu-trigger.ts`): `itemSelected`'te
+ * `ctx.close()`'u KENDİ elle çağırırsın.
+ */
+declare class ContextMenu implements OnDestroy {
+    readonly mfContextMenu: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private overlayRef?;
+    protected onContextMenu(event: MouseEvent): void;
+    /** Public — menü içeriğinden (bkz. sınıf üstündeki JSDoc örneği) elle kapatmak için. */
+    close(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContextMenu, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ContextMenu, "[mfContextMenu]", ["mfContextMenu"], { "mfContextMenu": { "alias": "mfContextMenu"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ContextMenu };

package/types/mesgflow-ui-kit-copy-button.d.ts

@@ -0,0 +1,47 @@
+import * as _angular_core from '@angular/core';
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+
+/**
+ * Metni panoya yazar. `navigator.clipboard` yoksa ya da reddedilirse (güvenli olmayan bağlam,
+ * izin) gizli bir `<textarea>` + `execCommand('copy')` yedeğine düşer — eski ama HTTP'de de
+ * çalışan tek yol. Başarısızsa `false`.
+ */
+declare function copyToClipboard(text: string, doc?: Document): Promise<boolean>;
+/**
+ * `<button mfButton [mfCopy]="token" #c="mfCopy">{{ c.copied() ? '✓' : 'Kopyala' }}</button>`
+ *
+ * Herhangi bir düğmeyi kopyala düğmesine çevirir — görünüm tamamen tüketicide; hazır görünüm
+ * için `<mf-copy-button>`. `copied()` başarıdan sonra 2 sn `true` kalır (ikon/etiket değişimi
+ * için), `failed()` başarısızlıkta. Metin tıklama ANINDA okunur (dinamik değerler güncel olur).
+ */
+declare class Copy {
+    readonly value: _angular_core.InputSignal<string>;
+    readonly copySuccess: _angular_core.OutputEmitterRef<string>;
+    readonly copyError: _angular_core.OutputEmitterRef<void>;
+    readonly copied: _angular_core.WritableSignal<boolean>;
+    readonly failed: _angular_core.WritableSignal<boolean>;
+    private readonly document;
+    private timer;
+    constructor();
+    copy(): Promise<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Copy, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Copy, "[mfCopy]", ["mfCopy"], { "value": { "alias": "mfCopy"; "required": true; "isSignal": true; }; }, { "copySuccess": "copySuccess"; "copyError": "copyError"; }, never, never, true, never>;
+}
+
+/**
+ * `<mf-copy-button [value]="apiKey" />` — ikon düğmesi: tıklanınca ikon ✓'ye döner (2 sn),
+ * başarısızsa ⚠; sonuç `aria-live` ile duyurulur. Düğmenin erişilebilir adı SABİT ("Copy" ya da
+ * `label`) — ekran okuyucu durum değişimini canlı bölgeden duyar, ad oynamaz.
+ */
+declare class CopyButton {
+    readonly value: _angular_core.InputSignal<string>;
+    /** Düğmenin adı + ipucu. Verilmezse `MfLabels.copy.copy`. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfCopyLabels>;
+    protected readonly effectiveLabel: _angular_core.Signal<string>;
+    protected iconClass(copied: boolean, failed: boolean): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CopyButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CopyButton, "mf-copy-button", ["mfCopyButton"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Copy, CopyButton, copyToClipboard };