@konce-pt/angular 0.8.3 → 0.9.0

package/types/konce-pt-angular.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { EnvironmentProviders, Signal, InjectionToken, TemplateRef, OnDestroy } from '@angular/core';
+import { EnvironmentProviders, Signal, InjectionToken, TemplateRef, ModelSignal, WritableSignal, OnDestroy, ElementRef } from '@angular/core';
 import * as _angular_forms_signals from '@angular/forms/signals';
 import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
 import { ConnectedPosition } from '@angular/cdk/overlay';
@@ -9,36 +9,58 @@ import { KptIconInput, KptIconName } from '@konce-pt/icons';
 export { KptIconDef, KptIconInput, KptIconName, renderKptIconSvg } from '@konce-pt/icons';
 import { KptDateSelectionMode, KptCalendarView, KptDayCell, KptGridCell, KptClockMark, KptDateRangeValue, KptDateRangeMode, KptMonthPanel, KptRangeDayCell } from '@konce-pt/datetime';
 export { KptDateRangeValue } from '@konce-pt/datetime';
+import { KptMentionItem, KptMentionSegment } from '@konce-pt/mention';
+export { KPT_MENTION_LIMIT, KptMentionItem, KptMentionQuery, KptMentionSegment, applyMention, collectMentions, filterMentions, foldMentionText, mentionQuery, mentionToken, parseMentionText } from '@konce-pt/mention';
+import { KptBackdropEffect, KptBackdropAnchor, KptBackdropInk } from '@konce-pt/backdrop';
+export { KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF, KPT_SIGNAL_GRID_GAP, KPT_WAVE_AMPLITUDE, KPT_WAVE_BAND, KPT_WAVE_RESOLUTION, KPT_WAVE_ROTATION, KptBackdropAnchor, KptBackdropEffect, KptBackdropRenderOptions, KptBackdropRenderer, KptOklab, KptRgb, KptSignalGridCell, KptSignalGridFrame, KptSignalGridOptions, KptWaveOptions, KptWaveSettings, buildSignalGrid, createBackdropRenderer, mixOklch, readCssColor, resolveWave, shiftHue, signalGridAlpha, signalGridDensity, waveIntensity, waveRamp } from '@konce-pt/backdrop';
 import { KptColumnFilter, KptColumnSummary } from '@konce-pt/table';
 export { KptColumnFilter, KptColumnFilterType, KptColumnSummary, KptSummaryFn } from '@konce-pt/table';
 import * as _konce_pt_angular from '@konce-pt/angular';
 
-type KptButtonVariant = 'filled' | 'tonal' | 'outline' | 'text' | 'danger';
-type KptButtonSize = 'sm' | 'md' | 'lg';
+type KptButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outline' | 'text' | 'link' | 'danger' | 'success' | 'warning' | 'info';
+type KptButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * Przycisk Koncept UI. Renderuje natywny `<button>` (zachowana semantyka i submit
- * formularza). Wygląd sterowany tokenami `--kpt-button-*`.
+ * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
+ * albo `<a>`, gdy podasz `href`.
+ *
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić do slotu — oba sposoby dostają
+ * ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
- * <kpt-button variant="filled" (click)="save()">Zapisz</kpt-button>
- * <kpt-button variant="outline" size="sm" [disabled]="busy()">Anuluj</kpt-button>
+ * <kpt-button (click)="save()">Zapisz</kpt-button>
+ * <kpt-button icon="device-floppy" (click)="save()">Zapisz</kpt-button>
+ * <kpt-button iconEnd="chevron-right" variant="outline">Dalej</kpt-button>
+ * <kpt-button variant="link" href="/docs">Dokumentacja</kpt-button>
+ * <kpt-button variant="danger" [loading]="deleting()">Usuń</kpt-button>
  */
 declare class KptButton {
-    /** Wariant wizualny. */
     readonly variant: _angular_core.InputSignal<KptButtonVariant>;
-    /** Rozmiar. */
     readonly size: _angular_core.InputSignal<KptButtonSize>;
-    /** Typ natywnego przycisku (istotne w formularzach). */
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
-    /** Wyłączony. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Stan ładowania — pokazuje spinner i blokuje interakcję. */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Rozciągnięcie na całą szerokość kontenera. */
     readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nazwa ikony wiodącej z rejestru (`KptIconRegistry`). */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Nazwa ikony zamykającej — zwykle znacznik kierunku, nie akcja. */
+    readonly iconEnd: _angular_core.InputSignal<string | undefined>;
+    /** Klasa dokładana do ikony wiodącej; obok stałego haka `.kpt-button__icon`. */
+    readonly iconClass: _angular_core.InputSignal<string | undefined>;
+    readonly iconEndClass: _angular_core.InputSignal<string | undefined>;
+    /** Podany adres zamienia `<button>` na `<a>`. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    readonly target: _angular_core.InputSignal<string | undefined>;
+    readonly rel: _angular_core.InputSignal<string | undefined>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Spinner zajmuje miejsce ikony wiodącej, więc przy ładowaniu jej nie renderujemy. */
+    protected readonly showLeadingIcon: _angular_core.Signal<boolean>;
+    protected readonly leadingIconClass: _angular_core.Signal<string>;
+    protected readonly trailingIconClass: _angular_core.Signal<string>;
+    /** `target="_blank"` bez `rel` to wektor na `window.opener` — dokładamy domyślne. */
+    protected readonly effectiveRel: _angular_core.Signal<string | null>;
+    private iconClasses;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButton, "kpt-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButton, "kpt-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "iconClass": { "alias": "iconClass"; "required": false; "isSignal": true; }; "iconEndClass": { "alias": "iconEndClass"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -64,9 +86,15 @@ declare class KptIconButton {
      * wtedy czego ogłosić. `null` (domyślnie) nie wypisuje atrybutu w ogóle.
      */
     readonly ariaPressed: _angular_core.InputSignal<boolean | null>;
+    /**
+     * Stan rozwinięcia dla przycisku otwierającego panel (wybierak, menu). Z tego samego powodu
+     * co `ariaPressed` musi zjechać na wewnętrzny `<button>` — host nie ma roli przycisku, więc
+     * atrybut postawiony na nim nie znaczy dla czytnika nic. `null` (domyślnie) go nie wypisuje.
+     */
+    readonly ariaExpanded: _angular_core.InputSignal<boolean | null>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptIconButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptIconButton, "kpt-icon-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptIconButton, "kpt-icon-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Opcja wyboru dla kontrolek typu select / radio-group. */
@@ -74,13 +102,19 @@ interface KptOption<T = unknown> {
     label: string;
     value: T;
     disabled?: boolean;
+    /** Nazwa ikony z rejestru. Renderuje ją dziś wyłącznie `kpt-button-group`. */
+    icon?: string;
 }
 
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji. Signal Forms.
  *
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
+ *
  * @example
  * <kpt-button-group [(value)]="view" [options]="[{label:'Lista',value:'list'},{label:'Siatka',value:'grid'}]" />
+ * <kpt-button-group [(value)]="view" [options]="[{icon:'list',label:'Lista',value:'list'}]" iconOnly />
  * <kpt-button-group [formField]="f.period" [options]="periods" />
  */
 declare class KptButtonGroup<T = unknown> implements FormValueControl<T> {
@@ -90,10 +124,12 @@ declare class KptButtonGroup<T = unknown> implements FormValueControl<T> {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i `title`. */
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touch: _angular_core.OutputEmitterRef<void>;
     protected select(opt: KptOption<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptButtonGroup<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButtonGroup<any>, "kpt-button-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButtonGroup<any>, "kpt-button-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 /**
@@ -389,21 +425,30 @@ declare const KPT_I18N_CONFIG: InjectionToken<KptI18nConfig>;
 declare function provideKptI18n(config?: KptI18nConfig): EnvironmentProviders;
 
 type KptChipVariant = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+/** Wielkość liter etykiety. */
+type KptChipTextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 /**
  * Chip / tag — etykieta, opcjonalnie usuwalna.
  *
  * @example
  * <kpt-chip>Angular</kpt-chip>
  * <kpt-chip variant="success" removable (removed)="onRemove()">UI</kpt-chip>
+ * <kpt-chip textTransform="capitalize">nowość · zestaw startowy</kpt-chip>
  */
 declare class KptChip {
     readonly variant: _angular_core.InputSignal<KptChipVariant>;
+    /**
+     * Wielkość liter etykiety. `capitalize` podnosi pierwszą literę każdego słowa — także po
+     * dywizie („Agent-Ready"), bo CSS nie wie, gdzie kończy się wyraz złożony; przy takich
+     * napisach pewniejszy jest zapis wprost w treści.
+     */
+    readonly textTransform: _angular_core.InputSignal<KptChipTextTransform>;
     readonly removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly removed: _angular_core.OutputEmitterRef<void>;
     protected readonly i18n: KptI18n;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptChip, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptChip, "kpt-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptChip, "kpt-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "textTransform": { "alias": "textTransform"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
 }
 
 type KptAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -450,24 +495,66 @@ declare class KptSpinner {
 }
 
 type KptProgressVariant = 'primary' | 'success' | 'danger' | 'warning' | 'info';
+type KptProgressType = 'linear' | 'circular';
+type KptProgressSize = 'sm' | 'md' | 'lg';
+/** Postać etykiety wartości: procent, „ile z ilu" albo brak. */
+type KptProgressValueFormat = 'percent' | 'fraction' | 'none';
+/** Gdzie siada wiersz etykiety względem paska (tylko `type="linear"`). */
+type KptProgressLabelPosition = 'top' | 'bottom' | 'end';
 /**
- * Wskaźnik postępu — liniowy lub kołowy, określony (0–100) lub nieokreślony (`value` = null).
+ * Wskaźnik postępu — liniowy lub kołowy, określony (`min`–`max`) lub nieokreślony (`value` = null).
+ *
+ * Etykietę wartości włącza `showValue`; rzutowana treść zastępuje sformatowaną wartość,
+ * więc w środku koła można pokazać cokolwiek.
  *
  * @example
  * <kpt-progress [value]="60" />
- * <kpt-progress type="circular" [value]="75" variant="success" />
+ * <kpt-progress [value]="80" label="Ładowanie…" showValue />
+ * <kpt-progress [value]="152" [max]="160" showValue valueFormat="fraction" labelPosition="bottom" />
+ * <kpt-progress [value]="38" [bufferValue]="62" />
+ * <kpt-progress type="circular" [value]="75" variant="success" showValue />
  * <kpt-progress [value]="null" />  <!-- indeterminate -->
  */
 declare class KptProgress {
-    /** 0–100 lub null = nieokreślony. */
+    /** Wartość w skali `min`–`max` albo null = postęp nieokreślony. */
     readonly value: _angular_core.InputSignal<number | null>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
     readonly variant: _angular_core.InputSignal<KptProgressVariant>;
-    readonly type: _angular_core.InputSignal<"linear" | "circular">;
+    readonly type: _angular_core.InputSignal<KptProgressType>;
+    /** Grubość toru: `sm` 0.25rem, `md` 0.5rem, `lg` 0.75rem. */
+    readonly size: _angular_core.InputSignal<KptProgressSize>;
+    /** Średnica wariantu kołowego w pikselach. */
     readonly diameter: _angular_core.InputSignal<number>;
+    /** Postęp buforowania — drugi, przygaszony pasek pod głównym (tylko liniowy). */
+    readonly bufferValue: _angular_core.InputSignal<number | null>;
+    /** Włącza obszar etykiety wartości — razem z nim renderuje się rzutowana treść. */
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly valueFormat: _angular_core.InputSignal<KptProgressValueFormat>;
+    /** Tekst opisowy obok paska; służy też za `aria-label`. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly labelPosition: _angular_core.InputSignal<KptProgressLabelPosition>;
+    private readonly i18n;
     protected readonly circumference: number;
+    protected readonly indeterminate: _angular_core.Signal<boolean>;
+    /** Ułamek 0–1. Odporny na `max` ≤ `min` i na wartości spoza zakresu. */
+    protected readonly ratio: _angular_core.Signal<number>;
+    protected readonly percent: _angular_core.Signal<number>;
+    /** Bufor nigdy nie cofa się za pasek główny — inaczej wyglądałby jak błąd renderowania. */
+    protected readonly bufferRatio: _angular_core.Signal<number>;
     protected readonly offset: _angular_core.Signal<number>;
+    /** Tekst widoczny w etykiecie; pusty dla postępu nieokreślonego i `valueFormat="none"`. */
+    protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * Czytnik ekranu domyślnie odczytuje `aria-valuenow` jako procent, więc przy formacie „ile z ilu"
+     * podajemy mu ten sam napis, który widzi użytkownik.
+     */
+    protected readonly ariaValueText: _angular_core.Signal<string | null>;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    private toRatio;
+    private fractionText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptProgress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptProgress, "kpt-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptProgress, "kpt-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "bufferValue": { "alias": "bufferValue"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type KptSkeletonVariant = 'text' | 'circle' | 'rect';
@@ -972,11 +1059,30 @@ declare class KptRichText implements FormValueControl<string> {
     readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Stan nieprawidłowy pokazujemy dopiero po dotknięciu pola — jak natywne `:user-invalid`. */
     protected readonly showInvalid: _angular_core.Signal<boolean>;
+    /**
+     * Pozycje do podpowiedzi wzmianek. Pusta lista wyłącza mechanizm: `@` zostaje wtedy zwykłym
+     * znakiem, bo nie ma czego podpowiadać.
+     */
+    readonly mentions: _angular_core.InputSignal<readonly KptMentionItem<unknown>[]>;
+    /** Ile podpowiedzi naraz. */
+    readonly mentionLimit: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly touch: _angular_core.OutputEmitterRef<void>;
+    /** Wstawiona wzmianka — moment na powiadomienie osoby albo dopięcie powiązania. */
+    readonly mentioned: _angular_core.OutputEmitterRef<KptMentionItem<unknown>>;
     protected readonly i18n: KptI18n;
     protected readonly swatches: string[];
     private readonly editor;
     private savedRange;
+    protected readonly mentionOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly mentionMatches: _angular_core.WritableSignal<readonly KptMentionItem<unknown>[]>;
+    protected readonly mentionActive: _angular_core.WritableSignal<number>;
+    /** Zaczepienie listy w miejscu kursora — punkt, nie element, bo `@` nie ma własnego elementu. */
+    protected readonly mentionPoint: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    }>;
+    /** Węzeł tekstowy i zakres zapytania `@…`, który podmieni wybrana pozycja. */
+    private mentionRange;
     protected readonly colorOpen: _angular_core.WritableSignal<boolean>;
     protected readonly colorKind: _angular_core.WritableSignal<"foreColor" | "backColor" | "cellBg">;
     protected readonly sourceView: _angular_core.WritableSignal<boolean>;
@@ -1130,6 +1236,29 @@ declare class KptRichText implements FormValueControl<string> {
      * Brak schematu → dopisz `https://` (spójne z zachowaniem `normalizeUrl` w mapie); `#`/`/`
      * przechodzą bez zmian; schemat spoza `SAFE_URL_SCHEME` → `null` (link nie zostaje wstawiony).
      */
+    /**
+     * Sprawdza, czy kursor stoi w zapytaniu `@…`, i ustawia listę podpowiedzi.
+     *
+     * Zapytanie liczymy z **węzła tekstowego**, nie z całego HTML-a: w treści siedzą tagi, a `@`
+     * ma widzieć tylko to, co użytkownik naprawdę napisał w tym miejscu. Rozpoznanie zostawiamy
+     * `mentionQuery()` z `@konce-pt/mention` — te same reguły działają w obu portach i w zwykłym
+     * polu tekstowym.
+     */
+    private syncMention;
+    /** Punkt pod kursorem — lista podpowiedzi zaczepia się o niego, bo `@` nie ma swojego elementu. */
+    private caretPoint;
+    /** Klawiatura listy podpowiedzi; `true` = zdarzenie obsłużone i edytor go już nie zobaczy. */
+    private onMentionKeydown;
+    /**
+     * Wstawia wzmiankę w miejsce zapytania `@…`.
+     *
+     * Wzmianka jest elementem, nie samym tekstem: `data-mention` niesie identyfikator, który
+     * przeżyje zmianę nazwy, a `contenteditable="false"` trzyma ją w jednym kawałku — bez tego
+     * kursor wchodziłby w środek nazwiska i psuł zapis. Spacja po wzmiance daje gdzie postawić
+     * kursor: bez niej nie da się wyjść poza element, który nie jest edytowalny.
+     */
+    protected insertMention(item: KptMentionItem): void;
+    protected closeMention(): void;
     private sanitizeUrl;
     private sanitizeHtml;
     /** Tag spoza allowlisty rozwijamy do dzieci; atrybuty czyścimy po kolei. */
@@ -1138,7 +1267,7 @@ declare class KptRichText implements FormValueControl<string> {
     /** Deklaracje `style` z allowlisty; `null`, gdy nie zostaje nic. */
     private sanitizeStyleAttr;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptRichText, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptRichText, "kpt-rich-text", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxListLevel": { "alias": "maxListLevel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptRichText, "kpt-rich-text", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxListLevel": { "alias": "maxListLevel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "mentions": { "alias": "mentions"; "required": false; "isSignal": true; }; "mentionLimit": { "alias": "mentionLimit"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; "mentioned": "mentioned"; }, never, never, true, never>;
 }
 
 /** Wartość suwaka: pojedyncza liczba lub para `[min, max]` w trybie `range`. */
@@ -1739,6 +1868,154 @@ declare class KptShellNavToggle {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptShellNavToggle, "[kptShellNavToggle]", never, { "label": { "alias": "kptShellNavToggle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Dekoracyjna warstwa tła dla sekcji: komponent obejmuje treść i maluje pod nią animowany canvas.
+ * Sięga się po niego tam, gdzie płaska powierzchnia wygląda na niedokończoną, a wideo albo duży
+ * obraz kosztowałyby transfer i nie poszłyby za motywem.
+ *
+ * Komponent jest opakowaniem: canvas leży pod spodem, a treść z `ng-content` idzie warstwę wyżej
+ * i zachowuje się zwyczajnie. Rysowanie stoi, gdy nie ma czego oglądać — sekcja poza ekranem,
+ * karta w tle, `paused`, `speed` równe zeru albo ograniczony ruch w systemie; wtedy zostaje jedna
+ * statyczna klatka zamiast pustki, bo efekt jest częścią kompozycji, nie ozdobą.
+ *
+ * Dwa efekty: `signal-grid` (drobna siatka migoczących kwadratów, gęsta przy jednej krawędzi)
+ * i `wave` (jedna miękka wstęga światła z barwami przesuwającymi się wzdłuż niej). Każdy czyta
+ * własny zestaw wejść — pozostałe po prostu go nie dotyczą.
+ *
+ * Sam komponent to cykl życia; rysowanie i cała matematyka siedzą w `@konce-pt/backdrop`,
+ * wspólnym z portem Reacta.
+ *
+ * @example
+ * <kpt-backdrop effect="wave" [rotation]="18" [colors]="['#5b8af2', '#a86df2', '#f25b9e']">
+ *   <h1>Zbuduj aplikację od pierwszego promptu</h1>
+ *   <kpt-button>Zacznij</kpt-button>
+ * </kpt-backdrop>
+ */
+declare class KptBackdrop {
+    /** Rysowany efekt. */
+    readonly effect: _angular_core.InputSignal<KptBackdropEffect>;
+    /** Tło sekcji. Puste bierze `--kpt-color-surface`. */
+    readonly background: _angular_core.InputSignal<string>;
+    /** Tempo; 1 to spokojne tempo obu efektów, 0 zatrzymuje obraz. */
+    readonly speed: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Ziarno losowania — ta sama wartość daje ten sam układ kwadratów i ten sam przebieg wstęgi. */
+    readonly seed: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Zatrzymuje animację, zostawiając ostatnią klatkę. */
+    readonly paused: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Przenosi barwy wpisane na sztywno na powierzchnię bieżącego motywu: czerń dobrana do białego
+     * tła staje się bielą, gdy tło jest ciemne. Rusza wyłącznie jasność — odcień i nasycenie
+     * zostają, więc barwa marki nie zmienia się w inną barwę.
+     *
+     * Dotyczy `color`, `colors` i `background`, ale tylko wtedy, gdy podano je literałem. Wejście
+     * puste bierze token, a zapis z `var()` sam po token sięga — jedno i drugie już idzie za motywem
+     * i adaptacja odwróciłaby je drugi raz.
+     */
+    readonly adaptive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * `signal-grid`: kolor kwadratów — dowolny zapis CSS, także sięgający po tokeny, np.
+     * `color-mix(in oklab, #5b8af2, var(--kpt-color-surface) 30%)`. Taki zapis przelicza się przy
+     * zmianie motywu; literał zostaje literałem. Puste bierze `--kpt-color-primary`.
+     */
+    readonly color: _angular_core.InputSignal<string>;
+    /** `signal-grid`: przy której krawędzi siatka jest najgęstsza. */
+    readonly anchor: _angular_core.InputSignal<KptBackdropAnchor>;
+    /** `signal-grid`: bok kwadratu (px). */
+    readonly cell: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `signal-grid`: odstęp między kwadratami (px). */
+    readonly gap: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `signal-grid`: udział zapalonych komórek przy kotwicy, 0–1. */
+    readonly density: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `signal-grid`: jak szybko siatka gaśnie ku przeciwnej krawędzi. */
+    readonly falloff: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * `wave`: rampa barw, po której przesuwa się wstęga — każdy przystanek dowolnym zapisem CSS.
+     * Zamknięta w pętlę, więc ostatnia barwa wraca do pierwszej. Pusta bierze `--kpt-color-primary`
+     * i dwie barwy wyprowadzone z niego obrotem odcienia — paleta biblioteki jest neutralna, więc
+     * domyślna wstęga jest jednobarwna i przygaszona. Po kolory sięga się tu, nie do tokenów
+     * statusowych. Zapis może sięgać po tokeny i wtedy idzie za motywem. Przystanek, którego
+     * przeglądarka nie uznaje za kolor, wypada z rampy; gdy wypadną wszystkie, zostaje rampa
+     * domyślna.
+     */
+    readonly colors: _angular_core.InputSignal<readonly string[]>;
+    /** `wave`: kąt, pod jakim prąd przecina kadr (stopnie); 0 to poziomo w prawo. */
+    readonly rotation: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `wave`: szerokość wstęgi jako ułamek wysokości kadru. */
+    readonly band: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `wave`: jak mocno faluje linia środkowa. Zero zatrzymuje falowanie, nie barwy. */
+    readonly amplitude: _angular_core.InputSignalWithTransform<number, unknown>;
+    private readonly canvas;
+    private readonly host;
+    private context;
+    private renderer;
+    private width;
+    private height;
+    /**
+     * Czas animacji w sekundach. Rośnie o krok przemnożony przez `speed`, więc ruch suwaka
+     * prędkości przyspiesza obraz zamiast go przeskakiwać.
+     */
+    private clock;
+    private last;
+    private raf;
+    private onScreen;
+    private reduced;
+    private ready;
+    /** Kolor wiodący, z którym zbudowany jest bieżący renderer — punkt odniesienia dla zmiany motywu. */
+    private lead;
+    /** Ostatnio zgłoszony zestaw odrzuconych barw — żeby nie powtarzać tego samego ostrzeżenia. */
+    private reported;
+    /** Tło po adaptacji. Puste znaczy „nie ma czego podmieniać" i wtedy liczy się samo `background`. */
+    private readonly adapted;
+    /** Tło malowane na hoście: po adaptacji, jeśli jest, inaczej to, co podano. */
+    protected readonly surface: _angular_core.Signal<string | null>;
+    /**
+     * Ton i kolor treści dobrane do malowanego tła. Puste znaczy „sekcja nie ma własnego tła"
+     * i wtedy treść zostaje przy `--kpt-color-on-surface` ze stylu.
+     */
+    protected readonly ink: _angular_core.WritableSignal<KptBackdropInk>;
+    private resize?;
+    private intersect?;
+    private unwatchTheme?;
+    private motion?;
+    constructor();
+    /** Nowy przebieg efektu przy tym samym rozmiarze i tych samych wejściach. */
+    reseed(): void;
+    private readonly tick;
+    private paint;
+    private build;
+    /**
+     * Ostrzeżenie o przystankach rampy, których przeglądarka nie uznała za kolor.
+     *
+     * `build()` chodzi przy każdej zmianie wejść, więc ciągnięcie suwaka nad wadliwą rampą zasypałoby
+     * konsolę tym samym zdaniem — zgłaszamy dopiero zestaw inny niż poprzednio.
+     */
+    private reportInvalid;
+    private measure;
+    private sync;
+    private watchSize;
+    /** Sekcja poza ekranem i karta w tle to ten sam przypadek: nie ma czego oglądać. */
+    private watchVisibility;
+    private readonly onTabSwitch;
+    private watchMotion;
+    private readonly onMotionChange;
+    private watchTheme;
+    /**
+     * Zmiana motywu przestawia tokeny, a kolory renderera są już wyliczone — trzeba je odczytać
+     * na nowo. Nasłuch trafia też w zmiany niezwiązane z barwą (klasa nakładki na `<html>`, dowolne
+     * nadpisanie inline u przodka), więc renderer przebudowuje się dopiero wtedy, gdy odczyt
+     * naprawdę dał inny kolor.
+     */
+    /**
+     * Kolor wiodący liczony dokładnie tak, jak liczy go `build()` — inaczej strażnik porównywałby
+     * wartość sprzed adaptacji z zapamiętaną po adaptacji i przebudowywałby renderer bez przerwy.
+     */
+    private leadNow;
+    private readonly refreshColors;
+    private teardown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptBackdrop, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptBackdrop, "kpt-backdrop", never, { "effect": { "alias": "effect"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "seed": { "alias": "seed"; "required": false; "isSignal": true; }; "paused": { "alias": "paused"; "required": false; "isSignal": true; }; "adaptive": { "alias": "adaptive"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "cell": { "alias": "cell"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "falloff": { "alias": "falloff"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; "band": { "alias": "band"; "required": false; "isSignal": true; }; "amplitude": { "alias": "amplitude"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /** Tryb ekranu — logowanie, rejestracja, odzyskiwanie hasła. */
 type KptAuthMode = 'signIn' | 'signUp' | 'forgot';
 /**
@@ -2677,63 +2954,135 @@ declare class KptCarousel<T = unknown> {
 declare class KptDataView<T = unknown> {
     readonly items: _angular_core.InputSignal<readonly T[]>;
     readonly layout: _angular_core.ModelSignal<"list" | "grid">;
-    readonly pageSize: _angular_core.InputSignal<number>;
+    /** Rozmiar strony (dwukierunkowy — select paginatora go zmienia); 0 wyłącza stronicowanie. */
+    readonly pageSize: _angular_core.ModelSignal<number>;
+    /** Rozmiary do wyboru w paginatorze. Pusta lista = select z jedną, bieżącą wartością. */
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    /**
+     * Liczba kolumn siatki jako SUFIT, nie sztywna liczba; 0 = tyle, ile się zmieści.
+     * Dwukierunkowa, bo pasek gęstości w toolbarze ją zmienia.
+     */
+    readonly gridColumns: _angular_core.ModelSignal<number>;
+    /** Wartości w pasku gęstości. Mniej niż dwie = paska nie ma po co pokazywać. */
+    readonly gridColumnsOptions: _angular_core.InputSignal<readonly number[]>;
+    /** Najwęższa sensowna karta — poniżej tego siatka zdejmuje kolumnę, zamiast ściskać. */
+    readonly gridMinWidth: _angular_core.InputSignal<string>;
     readonly paginated: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly i18n: KptI18n;
     protected readonly itemTpl: _angular_core.Signal<TemplateRef<any>>;
     protected readonly pageIndex: _angular_core.ModelSignal<number>;
+    /** Pasek gęstości ma sens tylko w siatce i tylko wtedy, gdy jest w czym wybierać. */
+    protected readonly showColumns: _angular_core.Signal<boolean>;
+    /** Opcje selecta: własna lista albo — gdy pusta — sam bieżący rozmiar. */
+    protected readonly pagerSizeOptions: _angular_core.Signal<readonly number[]>;
+    /**
+     * Pager zostaje na ekranie także wtedy, gdy wszystko mieści się na jednej stronie, o ile jest
+     * w czym wybierać. Bez tego wybranie największego rozmiaru chowa select, którym użytkownik
+     * właśnie się posłużył — i nie ma jak wrócić do mniejszego.
+     */
     protected readonly showPager: _angular_core.Signal<boolean>;
     protected readonly pageItems: _angular_core.Signal<readonly T[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDataView<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDataView<any>, "kpt-data-view", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "pageIndex": "pageIndexChange"; }, ["itemTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDataView<any>, "kpt-data-view", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "gridColumns": { "alias": "gridColumns"; "required": false; "isSignal": true; }; "gridColumnsOptions": { "alias": "gridColumnsOptions"; "required": false; "isSignal": true; }; "gridMinWidth": { "alias": "gridMinWidth"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "pageSize": "pageSizeChange"; "gridColumns": "gridColumnsChange"; "pageIndex": "pageIndexChange"; }, ["itemTpl"], never, true, never>;
 }
 
+/** Strona listy — źródłowa (lewa) albo docelowa (prawa). */
+type KptPickListSide = 'source' | 'target';
 /**
  * PickList — transfer elementów między dwiema listami (źródło ↔ cel).
  * Szablon elementu przez projekcję `<ng-template let-item>`.
+ * Dwuklik przerzuca pojedynczy element na drugą stronę; z `dragdrop` dochodzi przeciąganie
+ * (porządkowanie wewnątrz panelu i przenoszenie na konkretną pozycję drugiego panelu).
  *
  * @example
- * <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Dostępne" targetHeader="Wybrane">
+ * <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Dostępne" targetHeader="Wybrane" dragdrop>
  *   <ng-template let-item>{{ item.name }}</ng-template>
  * </kpt-pick-list>
  */
 declare class KptPickList<T = unknown> {
-    readonly source: _angular_core.ModelSignal<T[]>;
-    readonly target: _angular_core.ModelSignal<T[]>;
+    readonly source: ModelSignal<T[]>;
+    readonly target: ModelSignal<T[]>;
     /** Nagłówek listy źródłowej; bez wartości używa i18n (`pickList.available`). */
     readonly sourceHeader: _angular_core.InputSignal<string | undefined>;
     /** Nagłówek listy docelowej; bez wartości używa i18n (`pickList.selected`). */
     readonly targetHeader: _angular_core.InputSignal<string | undefined>;
+    /** Umożliwia porządkowanie i przenoszenie elementów metodą przeciągnij-i-upuść. */
+    readonly dragdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly itemTpl: _angular_core.Signal<TemplateRef<any>>;
     protected readonly i18n: KptI18n;
     protected readonly effectiveSourceHeader: _angular_core.Signal<string>;
     protected readonly effectiveTargetHeader: _angular_core.Signal<string>;
-    protected readonly selSource: _angular_core.WritableSignal<Set<T>>;
-    protected readonly selTarget: _angular_core.WritableSignal<Set<T>>;
-    protected toggle(side: 'source' | 'target', item: T): void;
-    protected move(from: 'source' | 'target', all: boolean): void;
+    protected readonly selSource: WritableSignal<Set<T>>;
+    protected readonly selTarget: WritableSignal<Set<T>>;
+    /** Przeciągany element — strona i pozycja w jej tablicy. */
+    protected readonly drag: WritableSignal<{
+        side: KptPickListSide;
+        index: number;
+    } | null>;
+    /** Element pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    protected readonly over: WritableSignal<{
+        side: KptPickListSide;
+        index: number;
+    } | null>;
+    /** Panel, nad którego pustym obszarem jest kursor — upuszczenie tam dopina na koniec. */
+    protected readonly listOver: WritableSignal<KptPickListSide | null>;
+    protected listOf(side: KptPickListSide): T[];
+    protected selectionOf(side: KptPickListSide): Set<T>;
+    protected headerOf(side: KptPickListSide): string;
+    protected isDragging(side: KptPickListSide, index: number): boolean;
+    protected isOver(side: KptPickListSide, index: number): boolean;
+    private modelOf;
+    private selectionSignal;
+    private other;
+    protected toggle(side: KptPickListSide, item: T): void;
+    protected move(from: KptPickListSide, all: boolean): void;
+    /** Dwuklik: przenosi wyłącznie klikniętą pozycję, niezależnie od zaznaczenia. */
+    protected moveOne(from: KptPickListSide, item: T): void;
+    protected onDragStart(side: KptPickListSide, index: number, event: DragEvent): void;
+    protected onDragOver(side: KptPickListSide, index: number, event: DragEvent): void;
+    protected onDrop(side: KptPickListSide, index: number, event: DragEvent): void;
+    protected onListDragOver(side: KptPickListSide, event: DragEvent): void;
+    protected onListDrop(side: KptPickListSide, event: DragEvent): void;
+    protected clearDrag(): void;
+    /** Przenosi jeden element między panelami, wstawiając go pod wskazanym indeksem. */
+    private transfer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptPickList<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptPickList<any>, "kpt-pick-list", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "sourceHeader": { "alias": "sourceHeader"; "required": false; "isSignal": true; }; "targetHeader": { "alias": "targetHeader"; "required": false; "isSignal": true; }; }, { "source": "sourceChange"; "target": "targetChange"; }, ["itemTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptPickList<any>, "kpt-pick-list", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "sourceHeader": { "alias": "sourceHeader"; "required": false; "isSignal": true; }; "targetHeader": { "alias": "targetHeader"; "required": false; "isSignal": true; }; "dragdrop": { "alias": "dragdrop"; "required": false; "isSignal": true; }; }, { "source": "sourceChange"; "target": "targetChange"; }, ["itemTpl"], never, true, never>;
 }
 
 /**
  * OrderList — lista z ręcznym porządkowaniem elementów (w górę/dół).
  * Szablon elementu przez projekcję `<ng-template let-item>`.
+ * Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * @example
- * <kpt-order-list [(items)]="tasks" header="Kolejność">
+ * <kpt-order-list [(items)]="tasks" header="Kolejność" dragdrop>
  *   <ng-template let-item>{{ item.name }}</ng-template>
  * </kpt-order-list>
  */
 declare class KptOrderList<T = unknown> {
     readonly items: _angular_core.ModelSignal<T[]>;
     readonly header: _angular_core.InputSignal<string>;
+    /** Umożliwia przestawianie pozycji metodą przeciągnij-i-upuść. */
+    readonly dragdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly i18n: KptI18n;
     protected readonly itemTpl: _angular_core.Signal<TemplateRef<any>>;
     protected readonly selected: _angular_core.WritableSignal<number | null>;
+    /** Indeks przeciąganej pozycji; `null` gdy nic nie jest przeciągane. */
+    protected readonly dragIndex: _angular_core.WritableSignal<number | null>;
+    /** Indeks pozycji pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    protected readonly overIndex: _angular_core.WritableSignal<number | null>;
+    /** Kursor nad pustym obszarem listy — upuszczenie tam dopina na koniec. */
+    protected readonly listOver: _angular_core.WritableSignal<boolean>;
     protected moveSelected(dir: -1 | 1): void;
+    protected onDragStart(index: number, event: DragEvent): void;
+    protected onDragOver(index: number, event: DragEvent): void;
+    protected onDrop(index: number, event: DragEvent): void;
+    protected onListDragOver(event: DragEvent): void;
+    protected onListDrop(event: DragEvent): void;
+    protected clearDrag(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptOrderList<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptOrderList<any>, "kpt-order-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; }, ["itemTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptOrderList<any>, "kpt-order-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "dragdrop": { "alias": "dragdrop"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; }, ["itemTpl"], never, true, never>;
 }
 
 interface KptGalleriaItem {
@@ -2779,6 +3128,8 @@ declare class KptAlert {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptAlert, "kpt-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
 }
 
+/** Szerokość okna. `md` to wartość domyślna i zarazem jedyna, jaką okno miało wcześniej. */
+type KptDialogSize = 'sm' | 'md' | 'lg';
 /**
  * Okno modalne na natywnym `<dialog>` (focus trap, ESC, backdrop w standardzie).
  * Sterowane sygnałem `open` (dwukierunkowe). Stopkę wstaw z atrybutem `kptDialogFooter`.
@@ -2796,6 +3147,12 @@ declare class KptDialog {
     /** Otwarcie okna (dwukierunkowe). */
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly header: _angular_core.InputSignal<string>;
+    /**
+     * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem — zawsze przycięta do szerokości
+     * okna przeglądarki. `lg` jest dla treści, której nie da się sensownie zwęzić: kodu, tabeli,
+     * porównania dwóch kolumn.
+     */
+    readonly size: _angular_core.InputSignal<KptDialogSize>;
     /** Pozwala zamknąć klawiszem Esc / przyciskiem ×. */
     readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly i18n: KptI18n;
@@ -2816,7 +3173,7 @@ declare class KptDialog {
     private releaseOverlayContainer;
     protected onCancel(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDialog, "kpt-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kptDialogFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDialog, "kpt-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kptDialogFooter]"], true, never>;
 }
 
 interface KptToast {
@@ -2920,6 +3277,161 @@ declare class KptPopover {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptPopover, "kpt-popover", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, {}, never, ["[kptPopoverTrigger]", "*"], true, never>;
 }
 
+/** Z której strony triggera wychodzi karta. */
+type KptPeekPlacement = 'top' | 'bottom';
+/**
+ * Trigger karty podglądu. Kładzie się na tym, co ma być zaczepieniem — najczęściej na wzmiance
+ * w tekście, ale równie dobrze na awatarze, chipie czy zwykłym linku.
+ *
+ * Nasłuch siedzi tutaj, a nie na hoście `kpt-peek`: host obejmuje po otwarciu także panel,
+ * więc opóźnienia liczyłyby się od złego elementu.
+ */
+declare class KptPeekTrigger {
+    readonly element: ElementRef<HTMLElement>;
+    protected readonly peek: KptPeek;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptPeekTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptPeekTrigger, "[kptPeekTrigger]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Tym różni się od sąsiadów: `kptTooltip` niesie sam tekst i nie da się w nim kliknąć,
+ * a `kpt-popover` otwiera dopiero klik i zasłania stronę backdropem.
+ *
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * czas przejechać z triggera na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
+ * kartę od razu (klawiatura nie przejeżdża po elementach przypadkiem), a klik, Enter albo dotyk
+ * **przypina** ją: karta zostaje mimo zjazdu kursora, a fokus wchodzi do środka. To jedyna droga
+ * do treści karty tam, gdzie hovera nie ma w ogóle.
+ *
+ * Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
+ *
+ * @example
+ * <kpt-peek>
+ *   <a kptPeekTrigger href="/ludzie/anna">@Anna Kowalska</a>
+ *   <kpt-card>Profil, projekty, kontakt…</kpt-card>
+ * </kpt-peek>
+ */
+declare class KptPeek {
+    /** Z której strony wychodzi karta; przy braku miejsca CDK i tak ją odwróci. */
+    readonly placement: _angular_core.InputSignal<KptPeekPlacement>;
+    /** Zwłoka otwarcia po najechaniu (ms) — bez niej karty mrugają przy przejeżdżaniu przez tekst. */
+    readonly openDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Zwłoka zamknięcia po zjeździe kursora (ms) — tyle jest na przejazd z triggera na kartę. */
+    readonly closeDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Wyłączona karta nie otwiera się wcale; trigger zostaje zwykłym linkiem czy przyciskiem. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nazwa karty dla czytnika ekranu; bez niej bierze się tekst triggera. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Otwarcie i zamknięcie karty — na `opened` aplikacja może dociągnąć dane. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly panelId: string;
+    private readonly panel;
+    private readonly host;
+    private readonly open;
+    /** Przypięta karta zostaje po zjeździe kursora — przypina ją klik, Enter albo dotyk. */
+    private readonly pinnedState;
+    private timer?;
+    readonly isOpen: _angular_core.Signal<boolean>;
+    readonly pinned: _angular_core.Signal<boolean>;
+    protected readonly positions: _angular_core.Signal<ConnectedPosition[]>;
+    constructor();
+    /** Najazd kursora — na trigger albo na samą kartę. */
+    hoverIn(): void;
+    /** Zjazd kursora; przypiętej karty nie rusza, bo tę zamyka dopiero Escape albo klik obok. */
+    hoverOut(): void;
+    /** Fokus otwiera bez zwłoki — klawiatura nie przejeżdża po elementach przypadkiem. */
+    focusIn(): void;
+    /** Wyjście fokusu poza kartę i trigger zamyka ją także wtedy, gdy była przypięta. */
+    focusOut(): void;
+    /** Klik, Enter albo dotyk: karta zostaje i przyjmuje fokus. */
+    pin(): void;
+    /** Escape: zamyka i oddaje fokus tam, skąd karta wyszła. */
+    dismiss(): void;
+    close(): void;
+    /** Tekst triggera jako nazwa karty — `role="dialog"` bez nazwy nic czytnikowi nie mówi. */
+    protected triggerText(): string;
+    private show;
+    private schedule;
+    private stopTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptPeek, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptPeek, "kpt-peek", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["[kptPeekTrigger]", "*"], true, never>;
+}
+
+/**
+ * Wzmianka w tekście — `@ktoś` albo `@coś` jako element, na który da się najechać i zobaczyć
+ * kartę podglądu z resztą powiązań. Treść karty daje aplikacja przez projekcję: biblioteka
+ * nie wie, czym jest wzmiankowana rzecz, a osoba, zadanie i dokument wyglądają inaczej.
+ *
+ * Bez rzutowanej treści wzmianka zostaje samym napisem z podkreśleniem: nie ma czego pokazać,
+ * więc trigger nie udaje, że coś się pod nim kryje.
+ *
+ * Trigger jest `<button>`, a nie `<span>`: karta otwiera się też z klawiatury i dotyku
+ * (przypięcie), a to wymaga elementu, na który da się wejść Tabem. Z `href` staje się linkiem,
+ * bo wtedy klik prowadzi gdzieś naprawdę.
+ *
+ * @example
+ * <kpt-mention id="anna.k" label="Anna Kowalska">
+ *   <kpt-card>Profil, projekty, kontakt…</kpt-card>
+ * </kpt-mention>
+ */
+declare class KptMention {
+    /** Cała pozycja naraz. Pojedyncze inputy poniżej mają nad nią priorytet. */
+    readonly item: _angular_core.InputSignal<KptMentionItem<unknown> | null>;
+    /** Identyfikator zapisany w treści — nie zmienia się przy zmianie nazwy. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Nazwa do pokazania; bez niej bierze się ją z `item`, a w ostateczności z `id`. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Rodzaj (osoba, zadanie, dokument) — ląduje w `data-kind`, więc da się go ostylować. */
+    readonly kind: _angular_core.InputSignal<string>;
+    /** Znak przed nazwą. Pusty łańcuch zostawia samą nazwę. */
+    readonly prefix: _angular_core.InputSignal<string>;
+    /** Adres, pod który prowadzi klik. Bez niego wzmianka jest przyciskiem otwierającym kartę. */
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly placement: _angular_core.InputSignal<KptPeekPlacement>;
+    readonly openDelay: _angular_core.InputSignal<number>;
+    /** Wyłączona wzmianka nie otwiera karty — zostaje samym napisem. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly resolvedKind: _angular_core.Signal<string>;
+    protected readonly display: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptMention, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptMention, "kpt-mention", never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Akapit ze wzmiankami — tekst wchodzi jako zwykły napis, a `@wzmianki` wychodzą z niego jako
+ * elementy z kartą podglądu. Rozbiciem zajmuje się `parseMentionText()` z `@konce-pt/mention`
+ * (czysty TS z testami), więc oba porty czytają tę samą treść tak samo.
+ *
+ * Wzmianek nie renderujemy z HTML-a: treść zostaje tekstem, a wzmianka jest elementem, który
+ * biblioteka sama zbudowała. Aplikacja nie musi więc przepuszczać przez sanitizer czegoś,
+ * co i tak pochodzi od jej użytkowników.
+ *
+ * Kartę daje szablon w środku — kontekst dostaje pozycję jako `$implicit` oraz `id` i `label`,
+ * bo wzmianka do czegoś, czego nie ma już na liście, też musi się wyrenderować.
+ *
+ * @example
+ * <kpt-mentions [text]="note" [items]="people">
+ *   <ng-template let-item let-label="label">
+ *     <kpt-card>{{ item?.data?.role ?? label }}</kpt-card>
+ *   </ng-template>
+ * </kpt-mentions>
+ */
+declare class KptMentions<T = unknown> {
+    /** Treść z wzmiankami: `@id` albo `@[Nazwa ze spacją](id)`. */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Pozycje, po których rozwiązują się identyfikatory. Nieznane `id` zostaje etykietą. */
+    readonly items: _angular_core.InputSignal<readonly KptMentionItem<T>[]>;
+    /** Znak przed nazwą we wzmiance. */
+    readonly prefix: _angular_core.InputSignal<string>;
+    readonly placement: _angular_core.InputSignal<KptPeekPlacement>;
+    /** Szablon karty; bez niego wzmianki są samym napisem, bo nie ma czego pokazać. */
+    protected readonly cardTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly segments: _angular_core.Signal<KptMentionSegment<T>[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptMentions<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptMentions<any>, "kpt-mentions", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, {}, ["cardTpl"], never, true, never>;
+}
+
 /**
  * Pole z podpowiedziami (autocomplete) na CDK Overlay, Signal Forms. Wartość = wpisany tekst.
  * Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
@@ -3125,6 +3637,6 @@ declare class KptSpeedDial<T = unknown> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptSpeedDial<any>, "kpt-speed-dial", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, never, true, never>;
 }
 
-export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, provideKptIcons };
-export type { KptAlertVariant, KptAuthLayout, KptAuthMode, KptAuthProvider, KptAuthProviderLayout, KptAuthResetValue, KptAuthSignInValue, KptAuthSignUpValue, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptConfirmOptions, KptConfirmRequest, KptDatepickerMode, KptDatepickerView, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptInputType, KptMenuItem, KptMeterItem, KptOption, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
+export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBackdrop, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMention, KptMentions, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPeek, KptPeekTrigger, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, provideKptIcons };
+export type { KptAlertVariant, KptAuthLayout, KptAuthMode, KptAuthProvider, KptAuthProviderLayout, KptAuthResetValue, KptAuthSignInValue, KptAuthSignUpValue, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipTextTransform, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptConfirmOptions, KptConfirmRequest, KptDatepickerMode, KptDatepickerView, KptDialogSize, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptInputType, KptMenuItem, KptMeterItem, KptOption, KptPeekPlacement, KptProgressLabelPosition, KptProgressSize, KptProgressType, KptProgressValueFormat, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
 //# sourceMappingURL=konce-pt-angular.d.ts.map