@konce-pt/react 0.8.2 → 0.8.5

package/dist/pick-list/pick-list.js

@@ -7,16 +7,19 @@ import { KptIcon } from "../icon/icon.js";
 const EMPTY = [];
 /**
  * PickList — transfer elementów między dwiema listami. Klik zaznacza, przyciski pośrodku
- * przenoszą zaznaczone albo wszystko.
+ * przenoszą zaznaczone albo wszystko, 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
  * <KptPickList
  *   source={available} onSourceChange={setAvailable}
  *   target={selected} onTargetChange={setSelected}
+ *   dragdrop
  *   renderItem={(item) => item.name}
  * />
  */
-export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, target, defaultTarget = EMPTY, onTargetChange, sourceHeader, targetHeader, renderItem, locale, dictionary, className, ...rest }) {
+export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, target, defaultTarget = EMPTY, onTargetChange, sourceHeader, targetHeader, dragdrop = false, renderItem, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [left, setLeft] = useControllableState({
         value: source,
@@ -32,34 +35,137 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
     // po obu stronach się przesuwają, a referencja zostaje ta sama.
     const [selLeft, setSelLeft] = useState(new Set());
     const [selRight, setSelRight] = useState(new Set());
+    /** Przeciągany element — strona i pozycja w jej tablicy. */
+    const [drag, setDrag] = useState(null);
+    /** Element pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    const [over, setOver] = useState(null);
+    /** Panel, nad którego pustym obszarem jest kursor — upuszczenie tam dopina na koniec. */
+    const [listOver, setListOver] = useState(null);
+    const listOf = (side) => (side === 'source' ? left : right);
+    const setListOf = (side) => (side === 'source' ? setLeft : setRight);
+    const selectionOf = (side) => (side === 'source' ? selLeft : selRight);
+    const setSelectionOf = (side) => side === 'source' ? setSelLeft : setSelRight;
+    const other = (side) => (side === 'source' ? 'target' : 'source');
     const toggle = (side, item) => {
-        const [selection, setSelection] = side === 'source' ? [selLeft, setSelLeft] : [selRight, setSelRight];
-        const next = new Set(selection);
+        const next = new Set(selectionOf(side));
         if (next.has(item))
             next.delete(item);
         else
             next.add(item);
-        setSelection(next);
+        setSelectionOf(side)(next);
     };
     const move = (from, all) => {
-        const fromItems = from === 'source' ? left : right;
-        const toItems = from === 'source' ? right : left;
-        const setFrom = from === 'source' ? setLeft : setRight;
-        const setTo = from === 'source' ? setRight : setLeft;
-        const selection = from === 'source' ? selLeft : selRight;
-        const setSelection = from === 'source' ? setSelLeft : setSelRight;
+        const to = other(from);
+        const fromItems = listOf(from);
+        const selection = selectionOf(from);
         const moving = all ? fromItems : fromItems.filter((item) => selection.has(item));
         if (!moving.length)
             return;
-        setFrom(fromItems.filter((item) => !moving.includes(item)));
-        setTo([...toItems, ...moving]);
-        setSelection(new Set());
+        setListOf(from)(fromItems.filter((item) => !moving.includes(item)));
+        setListOf(to)([...listOf(to), ...moving]);
+        setSelectionOf(from)(new Set());
+    };
+    /** Przenosi jeden element między panelami, wstawiając go pod wskazanym indeksem. */
+    const transfer = (fromSide, fromIndex, toSide, toIndex) => {
+        const fromItems = [...listOf(fromSide)];
+        const [moved] = fromItems.splice(fromIndex, 1);
+        if (moved === undefined)
+            return;
+        const toItems = [...listOf(toSide)];
+        toItems.splice(toIndex, 0, moved);
+        setListOf(fromSide)(fromItems);
+        setListOf(toSide)(toItems);
+        // Element opuszcza panel — jego zaznaczenie po tamtej stronie przestaje cokolwiek znaczyć.
+        const selection = selectionOf(fromSide);
+        if (selection.has(moved)) {
+            const next = new Set(selection);
+            next.delete(moved);
+            setSelectionOf(fromSide)(next);
+        }
+    };
+    /** Dwuklik: przenosi wyłącznie klikniętą pozycję, niezależnie od zaznaczenia. */
+    const moveOne = (from, item) => {
+        const index = listOf(from).indexOf(item);
+        if (index === -1)
+            return;
+        const to = other(from);
+        transfer(from, index, to, listOf(to).length);
+    };
+    const clearDrag = () => {
+        setDrag(null);
+        setOver(null);
+        setListOver(null);
+    };
+    const onDragStart = (side, index, event) => {
+        if (!dragdrop)
+            return;
+        setDrag({ side, index });
+        event.dataTransfer.setData('text/plain', String(index));
+        event.dataTransfer.effectAllowed = 'move';
+    };
+    const onDragOver = (side, index, event) => {
+        if (drag === null)
+            return;
+        // Zatrzymujemy propagację, żeby `<ul>` nie uznał, że kursor jest nad pustym obszarem.
+        event.preventDefault();
+        event.stopPropagation();
+        setOver({ side, index });
+        setListOver(null);
+    };
+    const onDrop = (side, index, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const from = drag;
+        clearDrag();
+        if (from === null)
+            return;
+        if (from.side !== side) {
+            transfer(from.side, from.index, side, index);
+            return;
+        }
+        if (from.index === index)
+            return;
+        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // na który go upuszczono (ten sam wzór co przestawianie kolumn w KptDataTable).
+        const next = [...listOf(side)];
+        const [moved] = next.splice(from.index, 1);
+        if (moved === undefined)
+            return;
+        next.splice(index, 0, moved);
+        setListOf(side)(next);
+    };
+    const onListDragOver = (side, event) => {
+        if (drag === null)
+            return;
+        event.preventDefault();
+        setListOver(side);
+        setOver(null);
+    };
+    const onListDrop = (side, event) => {
+        event.preventDefault();
+        const from = drag;
+        clearDrag();
+        if (from === null)
+            return;
+        if (from.side !== side) {
+            transfer(from.side, from.index, side, listOf(side).length);
+            return;
+        }
+        const next = [...listOf(side)];
+        const [moved] = next.splice(from.index, 1);
+        if (moved === undefined)
+            return;
+        next.push(moved);
+        setListOf(side)(next);
     };
     const column = (side) => {
-        const items = side === 'source' ? left : right;
-        const selection = side === 'source' ? selLeft : selRight;
+        const items = listOf(side);
+        const selection = selectionOf(side);
         const header = side === 'source' ? (sourceHeader ?? t('pickList.available')) : (targetHeader ?? t('pickList.selected'));
-        return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: "kpt-pick-list__items", children: items.map((item, index) => (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected'), onClick: () => toggle(side, item), children: renderItem(item, index) }, index))) })] }));
+        return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: cn('kpt-pick-list__items', listOver === side && 'is-dragover'), onDragOver: (event) => onListDragOver(side, event), onDragLeave: () => setListOver(null), onDrop: (event) => onListDrop(side, event), children: items.map((item, index) => {
+                        const dragging = drag?.side === side && drag.index === index;
+                        return (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected', dragging && 'is-dragging', dragdrop && 'kpt-pick-list__item--draggable', over?.side === side && over.index === index && !dragging && 'kpt-pick-list__item--dragover'), draggable: dragdrop || undefined, onClick: () => toggle(side, item), onDoubleClick: () => moveOne(side, item), onDragStart: (event) => onDragStart(side, index, event), onDragOver: (event) => onDragOver(side, index, event), onDragLeave: () => setOver(null), onDrop: (event) => onDrop(side, index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index));
+                    }) })] }));
     };
     return (_jsx("div", { className: cn('kpt-pick-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-pick-list", children: [column('source'), _jsxs("div", { className: "kpt-pick-list__controls", children: [_jsxs("button", { type: "button", "aria-label": t('pickList.moveAllRight'), onClick: () => move('source', true), children: [_jsx(KptIcon, { name: "chevron-right" }), _jsx(KptIcon, { name: "chevron-right" })] }), _jsx("button", { type: "button", "aria-label": t('pickList.moveRight'), onClick: () => move('source', false), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("button", { type: "button", "aria-label": t('pickList.moveLeft'), onClick: () => move('target', false), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsxs("button", { type: "button", "aria-label": t('pickList.moveAllLeft'), onClick: () => move('target', true), children: [_jsx(KptIcon, { name: "chevron-left" }), _jsx(KptIcon, { name: "chevron-left" })] })] }), column('target')] }) }));
 }

package/dist/public-api.d.ts

@@ -36,8 +36,12 @@ export { KptAvatar } from './avatar/avatar.tsx';
 export type { KptAvatarProps, KptAvatarShape, KptAvatarSize } from './avatar/avatar.tsx';
 export { KptBadge } from './badge/badge.tsx';
 export type { KptBadgeProps, KptBadgeSize, KptBadgeVariant } from './badge/badge.tsx';
+export { KptBackdrop } from './backdrop/backdrop.tsx';
+export type { KptBackdropAnchor, KptBackdropEffect, KptBackdropProps } from './backdrop/backdrop.tsx';
+export type { KptBackdropRenderOptions, KptBackdropRenderer, KptOklab, KptRgb, KptSignalGridCell, KptSignalGridFrame, KptSignalGridOptions, KptWaveOptions, KptWaveSettings, } 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, buildSignalGrid, createBackdropRenderer, mixOklch, readCssColor, resolveWave, shiftHue, signalGridAlpha, signalGridDensity, waveIntensity, waveRamp, } from '@konce-pt/backdrop';
 export { KptChip } from './chip/chip.tsx';
-export type { KptChipProps, KptChipVariant } from './chip/chip.tsx';
+export type { KptChipProps, KptChipTextTransform, KptChipVariant } from './chip/chip.tsx';
 export { KptDialog, KptDialogFooter } from './dialog/dialog.tsx';
 export type { KptDialogProps } from './dialog/dialog.tsx';
 export { KptDrawer } from './drawer/drawer.tsx';
@@ -102,6 +106,14 @@ export { KptTooltip } from './tooltip/tooltip.tsx';
 export type { KptTooltipPosition, KptTooltipProps } from './tooltip/tooltip.tsx';
 export { KptPopover } from './popover/popover.tsx';
 export type { KptPopoverProps } from './popover/popover.tsx';
+export { KptPeek } from './peek/peek.tsx';
+export type { KptPeekPlacement, KptPeekProps } from './peek/peek.tsx';
+export { KptMention } from './mention/mention.tsx';
+export type { KptMentionProps } from './mention/mention.tsx';
+export { KptMentions } from './mention/mentions.tsx';
+export type { KptMentionsProps } from './mention/mentions.tsx';
+export type { KptMentionItem, KptMentionQuery, KptMentionSegment } from '@konce-pt/mention';
+export { KPT_MENTION_LIMIT, applyMention, collectMentions, filterMentions, foldMentionText, mentionQuery, mentionToken, parseMentionText, } from '@konce-pt/mention';
 export { KptOverlay } from './internal/overlay.tsx';
 export type { KptOverlayProps } from './internal/overlay.tsx';
 export { KptButtonGroup } from './button-group/button-group.tsx';

package/dist/public-api.js

@@ -27,6 +27,8 @@ export { KptIcon } from "./icon/icon.js";
 export { getKptIcon, hasKptIcon, registerKptIcons } from "./icon/icon-registry.js";
 export { KptAvatar } from "./avatar/avatar.js";
 export { KptBadge } from "./badge/badge.js";
+export { KptBackdrop } from "./backdrop/backdrop.js";
+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, buildSignalGrid, createBackdropRenderer, mixOklch, readCssColor, resolveWave, shiftHue, signalGridAlpha, signalGridDensity, waveIntensity, waveRamp, } from '@konce-pt/backdrop';
 export { KptChip } from "./chip/chip.js";
 // Komponenty — nakładki
 export { KptDialog, KptDialogFooter } from "./dialog/dialog.js";
@@ -60,6 +62,10 @@ export { KptBreadcrumb } from "./breadcrumb/breadcrumb.js";
 export { KptContextMenu } from "./context-menu/context-menu.js";
 export { KptTooltip } from "./tooltip/tooltip.js";
 export { KptPopover } from "./popover/popover.js";
+export { KptPeek } from "./peek/peek.js";
+export { KptMention } from "./mention/mention.js";
+export { KptMentions } from "./mention/mentions.js";
+export { KPT_MENTION_LIMIT, applyMention, collectMentions, filterMentions, foldMentionText, mentionQuery, mentionToken, parseMentionText, } from '@konce-pt/mention';
 export { KptOverlay } from "./internal/overlay.js";
 // Komponenty — formularze
 export { KptButtonGroup } from "./button-group/button-group.js";

package/dist/rich-text/llms.txt

@@ -9,8 +9,18 @@ Import: `import { KptRichText, type KptRichTool } from '@konce-pt/react';`
 - `toolbar`: `KptRichTool[] | KptRichTool[][]` — a flat list, or groups = sections separated by a
   divider. Leaving a tool or a group out disables it; the full toolbar in 5 sections by default.
 - `placeholder`, `maxListLevel` (6), `disabled`, `invalid`, `touched`, `onTouch()`
+- `mentions`: `readonly KptMentionItem[]`, `mentionLimit` (8), `onMention(item)` — suggestions
+  for `@`; an empty list turns the mechanism off, so `@` stays an ordinary character
 - `className`, `ref` and every other `<div>` prop go to the host
 
+## Mentions (`@`)
+With `mentions` set, typing `@` opens a suggestion list anchored at the caret: arrows move through
+it, Enter or Tab inserts, Escape closes. The query is read from the **text node** at the caret and
+recognised by `mentionQuery()` from `@konce-pt/mention` — the same rules as in the Angular port.
+An inserted mention is `<span class="kpt-mention" data-mention="id" contenteditable="false">@Name`
+plus a non-breaking space: the id survives saving, the flag keeps the mention in one piece and the
+space gives the caret a place to stand after it.
+
 ## Tools (KptRichTool)
 Clipboard: `copy`, `paste` (sanitized), `pasteText`. Style: `heading` (a panel: Normal + H1–H6).
 Format: `bold`, `italic`, `underline`, `strike`, `ul`, `ol`, `indent`, `outdent`.

package/dist/rich-text/rich-text.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type KptMentionItem } from '@konce-pt/mention';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export type KptRichTool = 'copy' | 'paste' | 'pasteText' | 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'indent' | 'outdent' | 'foreColor' | 'backColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'table' | 'clear' | 'html';
 /** Pasek: płaska lista narzędzi albo grupy — sekcje rozdzielone separatorem. */
@@ -16,6 +17,15 @@ export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
+    /**
+     * Pozycje do podpowiedzi wzmianek. Pusta lista wyłącza mechanizm: `@` zostaje wtedy zwykłym
+     * znakiem, bo nie ma czego podpowiadać.
+     */
+    mentions?: readonly KptMentionItem[];
+    /** Ile podpowiedzi naraz. */
+    mentionLimit?: number;
+    /** Wstawiona wzmianka — moment na powiadomienie osoby albo dopięcie powiązania. */
+    onMention?: (item: KptMentionItem) => void;
 }
 /**
  * Lekki edytor tekstu sformatowanego na `contenteditable`, z konfigurowalnym paskiem sekcji
@@ -25,4 +35,4 @@ export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'on
  * <KptRichText value={html} onValueChange={setHtml} />
  * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
  */
-export declare function KptRichText({ value, defaultValue, onValueChange, toolbar, placeholder, maxListLevel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptRichTextProps>): import("react").JSX.Element;
+export declare function KptRichText({ value, defaultValue, onValueChange, toolbar, placeholder, maxListLevel, disabled, invalid, touched, onTouch, mentions, mentionLimit, onMention, locale, dictionary, className, ...rest }: Readonly<KptRichTextProps>): import("react").JSX.Element;

package/dist/rich-text/rich-text.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
+import { KPT_MENTION_LIMIT, filterMentions, mentionQuery } from '@konce-pt/mention';
 import { useKptOverlayContainer } from "../internal/overlay-container.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -85,7 +86,7 @@ function legacyState(cmd) {
  * <KptRichText value={html} onValueChange={setHtml} />
  * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
  */
-export function KptRichText({ value, defaultValue = '', onValueChange, toolbar = DEFAULT_TOOLBAR, placeholder = '', maxListLevel = 6, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptRichText({ value, defaultValue = '', onValueChange, toolbar = DEFAULT_TOOLBAR, placeholder = '', maxListLevel = 6, disabled = false, invalid = false, touched, onTouch, mentions = [], mentionLimit = KPT_MENTION_LIMIT, onMention, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const container = useKptOverlayContainer();
     const editorRef = useRef(null);
@@ -105,6 +106,14 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     const [sourceView, setSourceView] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const [menuPoint, setMenuPoint] = useState({ x: 0, y: 0 });
+    // ── Wzmianki (`@`) ──
+    const [mentionOpen, setMentionOpen] = useState(false);
+    const [mentionMatches, setMentionMatches] = useState([]);
+    const [mentionActive, setMentionActive] = useState(0);
+    /** Zaczepienie listy w miejscu kursora — punkt, nie element, bo `@` nie ma własnego elementu. */
+    const [mentionPoint, setMentionPoint] = useState({ x: 0, y: 0 });
+    /** Węzeł tekstowy i zakres zapytania `@…`, który podmieni wybrana pozycja. */
+    const mentionRange = useRef(null);
     const [borderOpen, setBorderOpen] = useState(false);
     const [borderTarget, setBorderTarget] = useState('table');
     const [activeCmds, setActiveCmds] = useState(new Set());
@@ -175,13 +184,106 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         selCells.current = new Set();
         setSelCount(0);
     }, []);
+    /** Zamknięcie podpowiedzi — czyści też zapamiętany zakres zapytania. */
+    const closeMention = useCallback(() => {
+        mentionRange.current = null;
+        setMentionMatches([]);
+        setMentionOpen(false);
+    }, []);
+    /** Punkt pod kursorem — lista podpowiedzi zaczepia się o niego, bo `@` nie ma swojego elementu. */
+    const caretPoint = useCallback((node, offset) => {
+        const range = document.createRange();
+        range.setStart(node, Math.min(offset, node.length));
+        range.collapse(true);
+        const rect = range.getBoundingClientRect();
+        // Zwinięty zakres na początku wiersza potrafi dać zerowy prostokąt — wtedy bierzemy
+        // krawędź samego edytora, żeby lista nie wylądowała w rogu ekranu.
+        if (rect.width === 0 && rect.height === 0) {
+            const fallback = editorRef.current?.getBoundingClientRect();
+            return { x: fallback?.left ?? 0, y: fallback?.top ?? 0 };
+        }
+        return { x: rect.left, y: rect.bottom };
+    }, []);
+    /**
+     * 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.
+     */
+    const syncMention = useCallback(() => {
+        if (disabled || !mentions.length) {
+            closeMention();
+            return;
+        }
+        const selection = window.getSelection();
+        const node = selection?.anchorNode;
+        if (!selection?.isCollapsed || !(node instanceof Text) || !editorRef.current?.contains(node)) {
+            closeMention();
+            return;
+        }
+        const query = mentionQuery(node.data, selection.anchorOffset);
+        if (!query) {
+            closeMention();
+            return;
+        }
+        const matches = filterMentions(mentions, query.query, mentionLimit);
+        if (!matches.length) {
+            closeMention();
+            return;
+        }
+        mentionRange.current = { node, start: query.start, end: query.end };
+        setMentionMatches(matches);
+        setMentionActive(0);
+        setMentionPoint(caretPoint(node, query.end));
+        setMentionOpen(true);
+    }, [caretPoint, closeMention, disabled, mentionLimit, mentions]);
+    /**
+     * 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.
+     */
+    const insertMention = useCallback((item) => {
+        const target = mentionRange.current;
+        if (!target)
+            return;
+        const range = document.createRange();
+        range.setStart(target.node, target.start);
+        range.setEnd(target.node, Math.min(target.end, target.node.length));
+        range.deleteContents();
+        const element = document.createElement('span');
+        element.className = 'kpt-mention';
+        element.dataset['mention'] = item.id;
+        element.setAttribute('contenteditable', 'false');
+        element.textContent = '@' + item.label;
+        const space = document.createTextNode(' ');
+        range.insertNode(space);
+        range.insertNode(element);
+        const after = document.createRange();
+        after.setStartAfter(space);
+        after.collapse(true);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(after);
+        closeMention();
+        pushValue();
+        onMention?.(item);
+    }, [closeMention, onMention, pushValue]);
     // Stan narzędzi zależy od zaznaczenia, a to zmienia się także poza naszymi zdarzeniami
     // (myszą, klawiaturą, przez inne okno), więc nasłuchujemy `selectionchange` na dokumencie.
     useEffect(() => {
-        const onSelectionChange = () => refreshState();
+        const onSelectionChange = () => {
+            refreshState();
+            // Kursor może odjechać od `@` także bez pisania (klik, strzałki) — wtedy podpowiedzi
+            // muszą zniknąć, inaczej Enter wstawiłby wzmiankę w zupełnie innym miejscu.
+            syncMention();
+        };
         document.addEventListener('selectionchange', onSelectionChange);
         return () => document.removeEventListener('selectionchange', onSelectionChange);
-    }, [refreshState]);
+    }, [refreshState, syncMention]);
     // Przeciąganie krawędzi kolumny i zaznaczanie komórek biegną na całym dokumencie: kursor
     // wyjeżdża poza tabelę praktycznie zawsze.
     useEffect(() => {
@@ -344,8 +446,43 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
      * Tab: wcięcie w liście, przeskok komórki w tabeli. Poza nimi i na krawędziach zostawiamy Tab
      * natywny — inaczej edytor byłby pułapką klawiaturową (WCAG 2.1.2).
      */
+    /** Klawiatura listy podpowiedzi; `true` = zdarzenie obsłużone i edytor go już nie zobaczy. */
+    const onMentionKeyDown = (event) => {
+        const count = mentionMatches.length;
+        if (!count)
+            return false;
+        switch (event.key) {
+            case 'ArrowDown':
+                setMentionActive((index) => (index + 1) % count);
+                break;
+            case 'ArrowUp':
+                setMentionActive((index) => (index - 1 + count) % count);
+                break;
+            case 'Enter':
+            case 'Tab': {
+                const item = mentionMatches[mentionActive];
+                if (!item)
+                    return false;
+                insertMention(item);
+                break;
+            }
+            case 'Escape':
+                closeMention();
+                break;
+            default:
+                return false;
+        }
+        event.preventDefault();
+        return true;
+    };
     const onKeyDown = (event) => {
-        if (disabled || event.key !== 'Tab' || event.ctrlKey || event.altKey || event.metaKey)
+        if (disabled)
+            return;
+        // Podpowiedzi wzmianek przechwytują klawiaturę jako pierwsze: Tab i Enter znaczą w nich
+        // co innego niż w samym edytorze.
+        if (mentionOpen && onMentionKeyDown(event))
+            return;
+        if (event.key !== 'Tab' || event.ctrlKey || event.altKey || event.metaKey)
             return;
         if (shiftItems(editorRef.current, event.shiftKey ? 'outdent' : 'indent', maxListLevel)) {
             event.preventDefault();
@@ -570,7 +707,22 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                                         return (_jsx("button", { ref: setTableAnchor, type: "button", className: cn('kpt-rich-text__tool', tableOpen && 'is-active'), "aria-label": t('richText.table'), title: t('richText.table'), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
                                     }
                                     return toolButton(item);
-                                })] }, index))) }), sourceView ? (_jsx("textarea", { className: "kpt-rich-text__source", value: current, disabled: disabled, spellCheck: false, "aria-label": t('richText.htmlSource'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() })) : (_jsx("div", { ref: editorRef, className: "kpt-rich-text__editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "aria-invalid": showInvalid || undefined, role: "textbox", "aria-multiline": "true", onInput: pushValue, onKeyDown: onKeyDown, onPaste: onPaste, onContextMenu: onContextMenu, onMouseDown: onEditorMouseDown, onMouseMove: onEditorMouseMove, onBlur: () => onTouch?.() }))] }), _jsx(KptOverlay, { open: styleOpen, anchor: styleAnchor, onClose: () => setStyleOpen(false), offset: 4, children: _jsx("ul", { className: "kpt-rich-text__style-panel", role: "listbox", children: styleOptions.map((option) => (_jsx("li", { className: cn(`kpt-rich-text__style-opt kpt-rich-text__style-opt--${option.tag}`, currentBlock === option.tag && 'is-selected'), role: "option", "aria-selected": currentBlock === option.tag, onClick: () => {
+                                })] }, index))) }), sourceView ? (_jsx("textarea", { className: "kpt-rich-text__source", value: current, disabled: disabled, spellCheck: false, "aria-label": t('richText.htmlSource'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() })) : (_jsx("div", { ref: editorRef, className: "kpt-rich-text__editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "aria-invalid": showInvalid || undefined, role: "textbox", "aria-multiline": "true", onInput: () => {
+                            pushValue();
+                            syncMention();
+                        }, onKeyDown: onKeyDown, onPaste: onPaste, onContextMenu: onContextMenu, onMouseDown: onEditorMouseDown, onMouseMove: onEditorMouseMove, onBlur: () => onTouch?.() }))] }), mentionOpen && container
+                ? createPortal(_jsx("ul", { className: "kpt-rt-mentions", role: "listbox", "aria-label": t('richText.mentions'), style: {
+                        position: 'fixed',
+                        left: mentionPoint.x,
+                        top: mentionPoint.y,
+                        zIndex: 'var(--kpt-z-overlay, 1100)',
+                    }, children: mentionMatches.map((item, index) => (_jsxs("li", { className: "kpt-rt-mentions__item", role: "option", "aria-selected": index === mentionActive, "data-active": index === mentionActive ? '' : undefined, onMouseDown: (event) => {
+                            // `mousedown` zamiast `click`: kliknięcie nie może zabrać fokusu edytorowi,
+                            // bo razem z nim zniknąłby zakres, w który wstawiamy wzmiankę.
+                            event.preventDefault();
+                            insertMention(item);
+                        }, onMouseEnter: () => setMentionActive(index), children: [_jsx("span", { className: "kpt-rt-mentions__label", children: item.label }), item.kind ? _jsx("span", { className: "kpt-rt-mentions__kind", children: item.kind }) : null] }, item.id))) }), container)
+                : null, _jsx(KptOverlay, { open: styleOpen, anchor: styleAnchor, onClose: () => setStyleOpen(false), offset: 4, children: _jsx("ul", { className: "kpt-rich-text__style-panel", role: "listbox", children: styleOptions.map((option) => (_jsx("li", { className: cn(`kpt-rich-text__style-opt kpt-rich-text__style-opt--${option.tag}`, currentBlock === option.tag && 'is-selected'), role: "option", "aria-selected": currentBlock === option.tag, onClick: () => {
                             setStyleOpen(false);
                             focusEditor();
                             restoreSelection();

package/dist/rich-text/sanitize.js

@@ -13,7 +13,16 @@ const ALLOWED_STYLES = new Set([
     'color', 'background-color', 'text-align', 'font-weight', 'font-style', 'text-decoration',
     'width', 'height', 'border', 'border-color', 'border-width', 'border-style', 'vertical-align',
 ]);
-const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title']);
+/*
+ * `data-mention` i `contenteditable` są tu dla wzmianek: identyfikator musi przeżyć zapis treści,
+ * a `contenteditable="false"` trzyma wzmiankę jako jeden kawałek, w którego środku nie da się
+ * pisać. Oba atrybuty są bierne — nie wykonują niczego i nie wskazują zasobów, więc wpuszczenie
+ * ich nie otwiera nowej furtki.
+ */
+const ALLOWED_ATTRS = new Set([
+    'colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title',
+    'data-mention', 'contenteditable',
+]);
 // Schematy dopuszczone w `href` narzędzia „link"; blocklista byłaby obchodzalna.
 const SAFE_URL_SCHEME = /^(https?:|mailto:|tel:)/i;
 const HAS_URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;

package/dist/roadmap/roadmap.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { buildRows, buildTimeline, linkGeometry, resolveLinks, resolveRange, sliceRows, } from '@konce-pt/roadmap';
 import { cn } from "../internal/cn.js";
+import { isDevBuild } from "../internal/dev.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptTooltip } from "../tooltip/tooltip.js";
@@ -262,9 +263,6 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
                                                     }, tabIndex: 0, onClick: () => handleItemClick(bar.item), onKeyDown: (event) => handleItemKeydown(event, bar.item), children: [bar.progress !== null && (_jsx("span", { className: "kpt-roadmap__bar-progress", style: { inlineSize: `${bar.progress * 100}%` } })), _jsx("span", { className: "kpt-roadmap__bar-label", children: bar.label })] }) }, bar.item.id))) })] }, row.key));
                         })] }))] }) }));
 }
-function isDevBuild() {
-    return typeof process !== 'undefined' && process?.env?.['NODE_ENV'] !== 'production';
-}
 /** Identyfikatory grup zwiniętych deklaratywnie w danych. */
 function declaredCollapsed(groups) {
     return (groups ?? []).filter((group) => group.collapsed).map((group) => group.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.8.2",
+  "version": "0.8.5",
   "description": "Open-source React 19 component library on the Koncept UI design system — the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -42,6 +42,10 @@
       "types": "./dist/charts-entry/public-api.d.ts",
       "default": "./dist/charts-entry/public-api.js"
     },
+    "./chat": {
+      "types": "./dist/chat-entry/public-api.d.ts",
+      "default": "./dist/chat-entry/public-api.js"
+    },
     "./roadmap": {
       "types": "./dist/roadmap-entry/public-api.d.ts",
       "default": "./dist/roadmap-entry/public-api.js"
@@ -61,14 +65,17 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/datetime": "0.8.2",
-    "@konce-pt/chart": "0.8.2",
-    "@konce-pt/i18n": "0.8.2",
-    "@konce-pt/roadmap": "0.8.2",
-    "@konce-pt/tokens": "0.8.2",
-    "@konce-pt/table": "0.8.2",
-    "@konce-pt/icons": "0.8.2",
-    "@konce-pt/map": "0.8.2"
+    "@konce-pt/chart": "0.8.5",
+    "@konce-pt/backdrop": "0.8.5",
+    "@konce-pt/datetime": "0.8.5",
+    "@konce-pt/mention": "0.8.5",
+    "@konce-pt/chat": "0.8.5",
+    "@konce-pt/icons": "0.8.5",
+    "@konce-pt/roadmap": "0.8.5",
+    "@konce-pt/table": "0.8.5",
+    "@konce-pt/map": "0.8.5",
+    "@konce-pt/tokens": "0.8.5",
+    "@konce-pt/i18n": "0.8.5"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",