@konce-pt/react 0.8.2 → 0.8.5

package/dist/chat/chat.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { KPT_CHAT_GROUP_GAP_MS, KPT_CHAT_REACTIONS, buildChatRows, chatDayIndicator, pendingCount } from '@konce-pt/chat';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptChatMessage } from "../chat-message/chat-message.js";
+import { KptChatTyping } from "../chat-typing/chat-typing.js";
+/** Odległość od dołu (px), przy której listę uznajemy jeszcze za przypiętą. */
+const PIN_THRESHOLD = 48;
+/**
+ * Wiersze, które nie mogą znaleźć się pod pływającą pigułką dnia: separatory i komunikaty
+ * systemowe, czyli wszystko wyśrodkowane, co czyta się jak jej bliźniak. Bąble są poza listą —
+ * pigułka nad wypowiedzią to normalny obrazek czatu.
+ */
+const BLOCKING_ROWS = '.kpt-chat__date, .kpt-chat__unread, .kpt-chat-message__system';
+/**
+ * Lista rozmowy — grupuje wiadomości, wstawia separatory dni i dzielnik nieprzeczytanych,
+ * trzyma widok przy dole i pokazuje pasek offline z liczbą wiadomości czekających na wysłanie.
+ *
+ * Sama logika wierszy mieszka w `@konce-pt/chat` (`buildChatRows`), więc port Angulara liczy ją
+ * tak samo. Komponent nie ma nic wspólnego z transportem: wiadomości dostaje, a `onRetry`
+ * i `onLoadMore` tylko zgłasza — ponowieniem wysyłki i dociąganiem historii zajmuje się aplikacja.
+ *
+ * Kompozytor (`KptChatComposer`) jest osobnym komponentem i stoi obok listy — dzięki temu
+ * czat bez pola wpisywania (podgląd, archiwum) nie wozi go ze sobą.
+ *
+ * @example
+ * <KptChat messages={messages} currentUser="me" typing={typing} onRetry={resend} />
+ */
+export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT_GROUP_GAP_MS, unreadFrom = null, offline = false, typing = [], autoScroll = true, actions = false, reactionOptions = KPT_CHAT_REACTIONS, emptyLabel = '', onRetry, onReply, onReact, onQuoted, onLoadMore, renderMessage, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const viewportRef = useRef(null);
+    const dayRef = useRef(null);
+    /** Czy widok stoi przy dole listy. Odjazd w górę wyłącza dosuwanie. */
+    const [pinned, setPinned] = useState(true);
+    /** Ile wiadomości przyszło, odkąd użytkownik odjechał w górę. */
+    const [newCount, setNewCount] = useState(0);
+    /** Tekst pływającej pigułki dnia — zostaje po zgaszeniu, żeby jej pas nie zmieniał wysokości. */
+    const [dayLabel, setDayLabel] = useState('');
+    /** Czy pigułka dnia jest widoczna. */
+    const [dayVisible, setDayVisible] = useState(false);
+    const lastCount = useRef(0);
+    const wasAtTop = useRef(false);
+    const rows = buildChatRows(messages, { currentUserId: currentUser, gapMs: groupGapMs, unreadFrom });
+    const pending = pendingCount(messages);
+    /**
+     * Ustawia tekst pływającej pigułki dnia — co ma na niej być, liczy `chatDayIndicator`
+     * z `@konce-pt/chat`, tutaj zostaje czytanie prostokątów i przepisanie etykiety.
+     *
+     * Wszystkie pomiary idą przed zapisem stanu, więc przeglądarka przelicza układ raz
+     * na klatkę zamiast przy każdym wierszu.
+     */
+    const syncDay = useCallback(() => {
+        const element = viewportRef.current;
+        const pill = dayRef.current;
+        if (!element || !pill)
+            return;
+        const separators = Array.from(element.querySelectorAll('.kpt-chat__date'));
+        const blockers = Array.from(element.querySelectorAll(BLOCKING_ROWS));
+        const box = (node) => {
+            const rect = node.getBoundingClientRect();
+            return { top: rect.top, bottom: rect.bottom };
+        };
+        const active = chatDayIndicator(separators.map(box), blockers.map(box), box(pill));
+        setDayVisible(active >= 0);
+        if (active < 0)
+            return;
+        // Etykieta zostaje po zgaszeniu pigułki: pusta zmieniałaby jej wysokość, a skrypt mierzy
+        // ten pas także wtedy, gdy pigułki nie widać.
+        setDayLabel(separators[active]?.textContent?.trim() ?? '');
+    }, []);
+    const scrollToBottom = (behavior) => {
+        const element = viewportRef.current;
+        if (!element)
+            return;
+        const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+        element.scrollTo({ top: element.scrollHeight, behavior: behavior ?? (reduced ? 'auto' : 'smooth') });
+    };
+    // Dosunięcie liczone po ułożeniu, nie po malowaniu — inaczej widać skok listy.
+    useLayoutEffect(() => {
+        if (!viewportRef.current)
+            return;
+        const count = messages.length;
+        const grew = count > lastCount.current;
+        const first = lastCount.current === 0;
+        lastCount.current = count;
+        if (!grew)
+            return;
+        // Pierwsze wejście zawsze ląduje na dole — rozmowę czyta się od końca.
+        if (first || (autoScroll && pinned))
+            scrollToBottom(first ? 'auto' : undefined);
+        else
+            setNewCount((value) => value + 1);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [messages]);
+    // Po każdej zmianie listy wiersze stoją gdzie indziej — pigułkę trzeba przeliczyć, inaczej
+    // pokazywałaby dzień sprzed dojścia nowej wiadomości.
+    useEffect(() => {
+        syncDay();
+    }, [messages, offline, activeLocale, syncDay]);
+    // To samo po zmianie szerokości: zawinięty tekst przesuwa wiersze spod pigułki.
+    useEffect(() => {
+        const element = viewportRef.current;
+        if (!element || !globalThis.ResizeObserver)
+            return;
+        const observer = new ResizeObserver(() => syncDay());
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [syncDay]);
+    const onScroll = (element) => {
+        const distance = element.scrollHeight - element.scrollTop - element.clientHeight;
+        const atBottom = distance < PIN_THRESHOLD;
+        setPinned(atBottom);
+        if (atBottom)
+            setNewCount(0);
+        // `onLoadMore` tylko na wejściu w strefę szczytu — przy każdym zdarzeniu scroll
+        // aplikacja dostawałaby dziesiątki żądań na jedno przewinięcie.
+        const atTop = element.scrollTop < PIN_THRESHOLD;
+        if (atTop && !wasAtTop.current)
+            onLoadMore?.();
+        wasAtTop.current = atTop;
+        syncDay();
+    };
+    const jumpToLatest = () => {
+        setPinned(true);
+        setNewCount(0);
+        scrollToBottom();
+    };
+    /**
+     * Etykieta separatora dnia. Rdzeń zwraca rodzaj, słownik daje „dziś"/„wczoraj",
+     * a nazwę dnia i pełną datę — `Intl`, żeby nie trzymać w słowniku kalendarza.
+     */
+    const dateText = (label) => {
+        switch (label.kind) {
+            case 'today':
+                return t('chat.today');
+            case 'yesterday':
+                return t('chat.yesterday');
+            case 'weekday':
+                return new Intl.DateTimeFormat(activeLocale, { weekday: 'long' }).format(label.date);
+            default:
+                return new Intl.DateTimeFormat(activeLocale, {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                }).format(label.date);
+        }
+    };
+    return (_jsxs("div", { className: cn('kpt-chat-host', className), ...rest, children: [offline ? (_jsxs("p", { className: "kpt-chat__offline", role: "status", children: [_jsx(KptIcon, { name: "alert-triangle" }), _jsx("span", { children: t('chat.offline') }), pending ? (_jsx("span", { className: "kpt-chat__offline-count", children: t('chat.pending', { count: pending }) })) : null] })) : null, _jsxs("div", { className: "kpt-chat__body", children: [_jsxs("div", { ref: viewportRef, className: "kpt-chat__viewport", role: "log", "aria-live": "polite", "aria-relevant": "additions", onScroll: (event) => onScroll(event.currentTarget), children: [rows.length === 0 ? (_jsx("p", { className: "kpt-chat__empty", children: emptyLabel || t('chat.empty') })) : null, rows.map((row) => {
+                                if (row.kind === 'date') {
+                                    const label = dateText(row.label);
+                                    return (_jsx("p", { className: "kpt-chat__date", role: "separator", "aria-label": label, children: label }, row.key));
+                                }
+                                if (row.kind === 'unread') {
+                                    return (_jsx("p", { className: "kpt-chat__unread", role: "separator", "aria-label": t('chat.newMessages', { count: row.count }), children: _jsx("span", { children: t('chat.unread') }) }, row.key));
+                                }
+                                return (_jsx(KptChatMessage, { message: row.message, text: renderMessage ? '' : null, align: row.own ? 'end' : 'start', position: row.position, showAuthor: row.showAuthor, showAvatar: row.showAvatar, showMeta: row.showMeta, actions: actions, reactionOptions: reactionOptions, locale: locale, dictionary: dictionary, onRetry: () => onRetry?.(row.message), onReply: () => onReply?.(row.message), onReact: (emoji) => onReact?.({ message: row.message, emoji }), onQuoted: (quote) => onQuoted?.(quote), children: renderMessage ? renderMessage(row.message, row) : null }, row.key));
+                            }), typing.length ? _jsx(KptChatTyping, { authors: typing, locale: locale, dictionary: dictionary }) : null] }), _jsx("p", { ref: dayRef, className: "kpt-chat__day", "aria-hidden": "true", "data-hidden": dayVisible ? undefined : '', children: dayLabel }), newCount ? (_jsxs("button", { type: "button", className: "kpt-chat__jump", onClick: jumpToLatest, children: [_jsx(KptIcon, { name: "arrow-down" }), t('chat.newMessages', { count: newCount })] })) : null] })] }));
+}

package/dist/chat/llms.txt

@@ -0,0 +1,78 @@
+# KptChat (@konce-pt/react/chat)
+
+A conversation list: grouped messages, day separators, an unread divider, the view pinned to the
+newest message and an offline strip counting what still has to go out.
+Import: `import { KptChat } from '@konce-pt/react/chat';`
+
+## DOM
+    <div class="kpt-chat-host">
+      <p class="kpt-chat__offline" role="status">…</p>
+      <div class="kpt-chat__body">
+        <div class="kpt-chat__viewport" role="log" aria-live="polite">
+          <p class="kpt-chat__date" role="separator">Today</p>
+          <div class="kpt-chat-message-host">…</div>
+          <p class="kpt-chat__unread" role="separator">…</p>
+          <div class="kpt-chat-typing-host">…</div>
+        </div>
+        <p class="kpt-chat__day" aria-hidden="true">Today</p>
+        <button class="kpt-chat__jump">3 new messages</button>
+      </div>
+    </div>
+
+## Props
+- `messages`: `KptChatMessage<T>[]` — **in chronological order**; the component does not sort
+- `currentUser`: string — the author id treated as "me"
+- `groupGapMs`: number (default `KPT_CHAT_GROUP_GAP_MS`, 5 min)
+- `unreadFrom`: string | null — the id of the first unread message
+- `offline`: boolean, `typing`: `KptChatAuthor[]`, `autoScroll`: boolean (default true)
+- `actions`: boolean — reply and react buttons on hover; `emptyLabel`: string
+- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) — passed to the bubbles
+- `onRetry` / `onReply` — `(message) => void`; `onReact` — `(event: KptChatReactEvent) => void`
+  (`{ message, emoji }`); `onQuoted` — `(quote) => void`
+- `onLoadMore` — fired once when the viewport reaches the top, not on every scroll event
+- `renderMessage(message, row)` — the equivalent of `<ng-template let-message>`; it replaces the
+  bubble's text, and the bubble, its grouping and its meta row stay in place
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The composer is a sibling, not a slot
+A read-only conversation (an archive, a preview) should not have to carry a text field it never
+shows, so `KptChatComposer` is placed next to the list rather than inside it. The parent is what
+gives the list its height — `.kpt-chat-host` is a column flexbox with `min-height: 0`.
+
+## Transport stays in the application
+The component takes messages and only reports. Retrying a send is a status change the application
+makes; `mergeStatus()` from `@konce-pt/chat` is there for out-of-order acks.
+
+## Bubble actions: reply and react
+`actions` puts two buttons beside the bubble. The arrow emits `onReply` with the message —
+`replyRefFrom()` from `@konce-pt/chat` turns it into the `replyTo` the composer's quote bar wants.
+The smiley opens a picker of five reactions (`KPT_CHAT_REACTIONS`) and emits `onReact` with the
+chosen emoji; `toggleReaction(message.reactions, emoji)` is the arithmetic that puts it in the
+model. The library writes nothing itself.
+
+## One day pill, not a stack of them
+The separators in the list travel with the content; which day the view is standing in is told by one
+pill floating over the list (`.kpt-chat__day`, `aria-hidden`). On every scroll (and after every
+re-render and resize) the component measures the separators, the unread divider and the system
+notices, hands the rectangles to `chatDayIndicator()` from `@konce-pt/chat` and swaps the pill's
+text; a centred label driving into the pill's band puts the pill out, never the content.
+
+## Examples
+    <KptChat messages={messages} currentUser="me" typing={typing} onRetry={resend} />
+    <KptChat messages={messages} currentUser="me" offline unreadFrom="m-42" onLoadMore={loadOlder} />
+    <KptChat messages={messages} currentUser="me" renderMessage={(m) => <KptCard>{m.data.title}</KptCard>} />
+
+## i18n
+`today`, `yesterday`, `unread`, `newMessages` (`{count}`), `empty`, `offline`, `pending`
+(`{count}`) from the `chat` namespace. Weekday names and full dates come from `Intl`, not the
+dictionary.
+
+## Tokens
+The offline strip `--kpt-color-warning-subtle`, the day separator pill `--kpt-color-surface-raised`
++ `--kpt-elevation-1`, the jump
+pill `--kpt-color-primary-border` + `--kpt-elevation-2`.
+
+## Accessibility
+`role="log"` with `aria-live="polite"` announces a new message without cutting off what is being
+read. Separators are `role="separator"` with a label. Auto-scroll uses `behavior: 'auto'` under
+`prefers-reduced-motion`.

package/dist/chat-composer/chat-composer.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { KptChatReplyRef } from '@konce-pt/chat';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/** Ładunek wysyłki. Kompozytor niczego nie wysyła — pakuje dane i oddaje aplikacji. */
+export interface KptChatComposerSubmit {
+    text: string;
+    files: readonly File[];
+    replyTo: KptChatReplyRef | null;
+}
+export interface KptChatComposerProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSubmit'>, KptI18nOverrides {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Podpowiedź w pustym polu; bez niej etykieta ze słownika. */
+    placeholder?: string;
+    disabled?: boolean;
+    /** Brak połączenia — przycisk mówi o kolejkowaniu, nie o wysyłce. */
+    offline?: boolean;
+    allowAttachments?: boolean;
+    /** Ile wierszy pole może urosnąć, zanim zacznie się przewijać. */
+    maxRows?: number;
+    enterToSend?: boolean;
+    /** Wiadomość, na którą odpowiadamy. Po wysłaniu czyści się razem z treścią. */
+    replyTo?: KptChatReplyRef | null;
+    defaultReplyTo?: KptChatReplyRef | null;
+    onReplyToChange?: (replyTo: KptChatReplyRef | null) => void;
+    onSend?: (payload: KptChatComposerSubmit) => void;
+    /** Uderzenie w klawiaturę — sygnał „piszę" dla drugiej strony. */
+    onTyping?: () => void;
+}
+/**
+ * Pole pisania wiadomości — autorosnące, z załącznikami i paskiem cytatu.
+ *
+ * `Enter` wysyła, `Shift+Enter` łamie linię (`enterToSend={false}` odwraca układ).
+ * Przy `offline` przycisk zmienia etykietę na kolejkowanie — wiadomość dalej da się napisać
+ * i oddać aplikacji, bo to ona decyduje, co zrobić z kolejką.
+ *
+ * @example
+ * <KptChatComposer allowAttachments onSend={(payload) => send(payload)} />
+ */
+export declare function KptChatComposer({ value, defaultValue, onValueChange, placeholder, disabled, offline, allowAttachments, maxRows, enterToSend, replyTo, defaultReplyTo, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }: Readonly<KptChatComposerProps>): import("react").JSX.Element;

package/dist/chat-composer/chat-composer.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptIconButton } from "../icon-button/icon-button.js";
+/**
+ * Pole pisania wiadomości — autorosnące, z załącznikami i paskiem cytatu.
+ *
+ * `Enter` wysyła, `Shift+Enter` łamie linię (`enterToSend={false}` odwraca układ).
+ * Przy `offline` przycisk zmienia etykietę na kolejkowanie — wiadomość dalej da się napisać
+ * i oddać aplikacji, bo to ona decyduje, co zrobić z kolejką.
+ *
+ * @example
+ * <KptChatComposer allowAttachments onSend={(payload) => send(payload)} />
+ */
+export function KptChatComposer({ value, defaultValue = '', onValueChange, placeholder = '', disabled = false, offline = false, allowAttachments = false, maxRows = 6, enterToSend = true, replyTo, defaultReplyTo = null, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [text, setText] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const [quote, setQuote] = useControllableState({
+        value: replyTo,
+        defaultValue: defaultReplyTo,
+        onChange: onReplyToChange,
+    });
+    const [files, setFiles] = useState([]);
+    const fieldRef = useRef(null);
+    const pickerRef = useRef(null);
+    const canSend = !disabled && (text.trim().length > 0 || files.length > 0);
+    const sendLabel = offline ? t('chat.queue') : t('chat.send');
+    /**
+     * Wysokość liczona od treści. Zerowanie przed odczytem `scrollHeight` jest konieczne:
+     * bez niego pole potrafi tylko rosnąć, bo `scrollHeight` nigdy nie zejdzie poniżej
+     * ustawionej wcześniej wysokości. Górny limit trzyma CSS (`--_max-rows`).
+     */
+    const grow = (element) => {
+        element.style.height = 'auto';
+        // `scrollHeight` liczy treść z paddingiem, ale BEZ ramki, a pole jest `border-box`.
+        // Sama wysokość ze `scrollHeight` zostawia je o grubość ramki za niskie, więc puste
+        // pole na jeden wiersz dostaje pasek przewijania i nigdy się go nie pozbywa.
+        const borders = element.offsetHeight - element.clientHeight;
+        element.style.height = element.scrollHeight + borders + 'px';
+    };
+    const submit = () => {
+        if (!canSend)
+            return;
+        onSend?.({ text: text.trim(), files, replyTo: quote });
+        setText('');
+        setFiles([]);
+        setQuote(null);
+        const field = fieldRef.current;
+        if (field) {
+            field.value = '';
+            grow(field);
+        }
+    };
+    const onKeyDown = (event) => {
+        if (event.key !== 'Enter')
+            return;
+        const wantsSend = enterToSend ? !event.shiftKey : event.shiftKey;
+        if (!wantsSend || event.nativeEvent.isComposing)
+            return;
+        event.preventDefault();
+        submit();
+    };
+    return (_jsxs("div", { className: cn('kpt-chat-composer-host', className), ...rest, children: [quote ? (_jsxs("div", { className: "kpt-chat-composer__reply", children: [_jsxs("span", { className: "kpt-chat-composer__reply-body", children: [_jsx("span", { className: "kpt-chat-composer__reply-author", children: t('chat.replyTo', { author: quote.author }) }), _jsx("span", { className: "kpt-chat-composer__reply-text", children: quote.excerpt })] }), _jsx(KptIconButton, { size: "sm", "aria-label": t('chat.cancelReply'), onClick: () => setQuote(null), children: _jsx(KptIcon, { name: "x" }) })] })) : null, files.length ? (_jsx("ul", { className: "kpt-chat-composer__files", children: files.map((file) => (_jsxs("li", { className: "kpt-chat-composer__file", children: [_jsx(KptIcon, { name: "paperclip" }), _jsx("span", { className: "kpt-chat-composer__file-name", children: file.name }), _jsx(KptIconButton, { size: "sm", "aria-label": t('chat.removeAttachment'), onClick: () => setFiles((current) => current.filter((item) => item !== file)), children: _jsx(KptIcon, { name: "x" }) })] }, file.name + file.size + file.lastModified))) })) : null, _jsxs("div", { className: "kpt-chat-composer", children: [allowAttachments ? (_jsxs(_Fragment, { children: [_jsx("input", { ref: pickerRef, type: "file", className: "kpt-chat-composer__picker", multiple: true, onChange: (event) => {
+                                    const picked = Array.from(event.currentTarget.files ?? []);
+                                    if (picked.length)
+                                        setFiles((current) => [...current, ...picked]);
+                                    // Bez wyzerowania ten sam plik wybrany drugi raz nie wywoła `change`.
+                                    event.currentTarget.value = '';
+                                } }), _jsx(KptIconButton, { size: "sm", disabled: disabled, "aria-label": t('chat.attach'), onClick: () => pickerRef.current?.click(), children: _jsx(KptIcon, { name: "paperclip" }) })] })) : null, _jsx("textarea", { ref: fieldRef, className: "kpt-chat-composer__field", rows: 1, style: { '--_max-rows': maxRows }, value: text, disabled: disabled, placeholder: placeholder || t('chat.placeholder'), "aria-label": placeholder || t('chat.placeholder'), onChange: (event) => {
+                            setText(event.currentTarget.value);
+                            grow(event.currentTarget);
+                            onTyping?.();
+                        }, onKeyDown: onKeyDown }), _jsx(KptIconButton, { variant: "filled", disabled: !canSend, "aria-label": sendLabel, onClick: submit, children: _jsx(KptIcon, { name: offline ? 'clock' : 'send' }) })] })] }));
+}

package/dist/chat-composer/llms.txt

@@ -0,0 +1,56 @@
+# KptChatComposer (@konce-pt/react/chat)
+
+The message field — auto-growing, with attachments and a quote strip.
+Import: `import { KptChatComposer } from '@konce-pt/react/chat';`
+
+## DOM
+    <div class="kpt-chat-composer-host">
+      <div class="kpt-chat-composer__reply">…the quoted message…</div>
+      <ul class="kpt-chat-composer__files">…picked files…</ul>
+      <div class="kpt-chat-composer">
+        <input type="file" class="kpt-chat-composer__picker" hidden />
+        <!-- KptIconButton: attach -->
+        <textarea class="kpt-chat-composer__field" rows="1"></textarea>
+        <!-- KptIconButton: send -->
+      </div>
+    </div>
+
+## Props
+- `value` / `defaultValue` / `onValueChange` — the text
+- `replyTo` / `defaultReplyTo` / `onReplyToChange` — `KptChatReplyRef | null`
+- `placeholder`, `disabled`, `offline`, `allowAttachments`
+- `maxRows`: number (default 6), `enterToSend`: boolean (default true)
+- `onSend(payload)` — `{ text, files, replyTo }`; the text is trimmed
+- `onTyping()` — every keystroke, for the "is typing" signal
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## Enter sends, Shift+Enter breaks the line
+`enterToSend={false}` swaps the two. A keystroke arriving mid-composition (an IME) never sends —
+`isComposing` is checked, otherwise picking a candidate would fire the message.
+
+## The height comes from the content
+The field grows with the text and then scrolls. The script sets `height` to `scrollHeight`, having
+zeroed it first — without that reset the field can only grow, because `scrollHeight` never drops
+below the height already set. The ceiling is CSS: `--_max-rows`.
+
+## Offline does not lock the field
+The button changes its label to queueing and the payload still reaches `onSend`. What to do with a
+queue is the application's decision — the component has no transport to hold it back with.
+
+## Examples
+    <KptChatComposer allowAttachments onSend={send} />
+    <KptChatComposer value={draft} onValueChange={setDraft} offline={!online} onSend={queue} />
+    <KptChatComposer replyTo={quote} onReplyToChange={setQuote} enterToSend={false} onSend={send} />
+
+## i18n
+`placeholder`, `send`, `queue`, `attach`, `removeAttachment`, `replyTo` (`{author}`),
+`cancelReply` from the `chat` namespace.
+
+## Tokens
+The field `--kpt-color-surface-variant` + `--kpt-radius-lg`, the top edge `--kpt-color-border`,
+the quote strip `--kpt-color-primary`.
+
+## Accessibility
+The textarea carries an `aria-label` equal to the placeholder — a field without a label is
+invisible to a screen reader. Both icon buttons are labelled from the dictionary. It is not a
+form control: no `touched`/`invalid` state, and the value disappears on send.

package/dist/chat-dock/chat-dock.d.ts

@@ -0,0 +1,40 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export type KptChatDockPosition = 'bottom-end' | 'bottom-start';
+export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    position?: KptChatDockPosition;
+    /** Licznik na plakietce FAB-a. Zero chowa plakietkę. */
+    unread?: number;
+    header?: string;
+    /** Ikona zamkniętego FAB-a; otwarty zawsze pokazuje krzyżyk. */
+    icon?: string;
+    /** Szerokość panelu na ekranach powyżej `--kpt-breakpoint-sm`. */
+    width?: string;
+    /**
+     * Odsunięcie od rogu ekranu (dowolna długość CSS), wspólne dla obu osi.
+     * Domyślnie `--kpt-space-6`. Przydaje się, gdy w tym samym rogu stoi już inny widget —
+     * `KptScrollTop` przykleja się dokładnie tam samo i bez tego oba się nakładają.
+     */
+    offset?: string;
+    children?: ReactNode;
+}
+/**
+ * Pływający czat w rogu ekranu — FAB z licznikiem nieprzeczytanych i panel z rozmową.
+ *
+ * Zawartość panelu jest dzieckiem, więc dock nie wie nic o wiadomościach: wkłada się do niego
+ * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` — dock go używa,
+ * nie zastępuje.
+ *
+ * Poniżej `--kpt-breakpoint-sm` panel wchodzi na pełny ekran: 22,5 rem szerokości na telefonie
+ * to nie panel, tylko szpara.
+ *
+ * @example
+ * <KptChatDock unread={3} header="Wsparcie">
+ *   <KptChat messages={messages} currentUser="me" />
+ *   <KptChatComposer onSend={send} />
+ * </KptChatDock>
+ */
+export declare function KptChatDock({ open, defaultOpen, onOpenChange, position, unread, header, icon, width, offset, locale, dictionary, className, children, ...rest }: Readonly<KptChatDockProps>): import("react").JSX.Element;

package/dist/chat-dock/chat-dock.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptBadge } from "../badge/badge.js";
+import { KptFab } from "../fab/fab.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptIconButton } from "../icon-button/icon-button.js";
+/**
+ * Pływający czat w rogu ekranu — FAB z licznikiem nieprzeczytanych i panel z rozmową.
+ *
+ * Zawartość panelu jest dzieckiem, więc dock nie wie nic o wiadomościach: wkłada się do niego
+ * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` — dock go używa,
+ * nie zastępuje.
+ *
+ * Poniżej `--kpt-breakpoint-sm` panel wchodzi na pełny ekran: 22,5 rem szerokości na telefonie
+ * to nie panel, tylko szpara.
+ *
+ * @example
+ * <KptChatDock unread={3} header="Wsparcie">
+ *   <KptChat messages={messages} currentUser="me" />
+ *   <KptChatComposer onSend={send} />
+ * </KptChatDock>
+ */
+export function KptChatDock({ open, defaultOpen = false, onOpenChange, position = 'bottom-end', unread = 0, header = '', icon = 'message-circle', width = '22.5rem', offset = '', locale, dictionary, className, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    /*
+     * Fokus ląduje na polu pisania, jeśli w panelu jest — po to się czat otwiera.
+     * Bez pola bierze pierwszy element interaktywny, a w ostateczności sam panel.
+     */
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const element = panelRef.current;
+        if (!element)
+            return;
+        const frame = requestAnimationFrame(() => {
+            const target = element.querySelector('textarea:not([disabled])') ??
+                element.querySelector('input:not([disabled]), button:not([disabled])') ??
+                element;
+            target.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen]);
+    const close = () => {
+        if (!isOpen)
+            return;
+        setOpen(false);
+        // Fokus wraca na FAB — po zamknięciu panelu nie może zostać na elemencie,
+        // który przed chwilą zniknął z drzewa dostępności.
+        triggerRef.current?.querySelector('button')?.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape')
+            close();
+    };
+    const fab = (_jsx(KptFab, { "aria-label": isOpen ? t('chat.close') : t('chat.open'), onClick: () => setOpen(!isOpen), children: _jsx(KptIcon, { name: isOpen ? 'x' : icon }) }));
+    return (_jsxs("div", { className: cn('kpt-chat-dock-host', className), onKeyDown: onKeyDown, ...rest, children: [_jsxs("div", { ref: panelRef, className: cn('kpt-chat-dock__panel', isOpen && 'is-open'), "data-position": position, role: "dialog", tabIndex: -1, style: { '--_width': width, ...(offset ? { '--_offset': offset } : {}) }, "aria-label": header || t('chat.open'), "aria-hidden": isOpen ? undefined : true, inert: !isOpen, children: [_jsxs("header", { className: "kpt-chat-dock__header", children: [_jsx("span", { className: "kpt-chat-dock__title", children: header }), _jsx(KptIconButton, { size: "sm", "aria-label": t('chat.close'), onClick: close, children: _jsx(KptIcon, { name: "x" }) })] }), _jsx("div", { className: "kpt-chat-dock__content", children: children })] }), _jsx("span", { ref: triggerRef, className: "kpt-chat-dock__trigger", "data-position": position, style: offset ? { '--_offset': offset } : undefined, children: unread > 0 ? (_jsx(KptBadge, { value: unread, variant: "danger", size: "sm", overlay: true, "aria-label": t('chat.unreadBadge', { count: unread }), children: fab })) : (fab) })] }));
+}

package/dist/chat-dock/llms.txt

@@ -0,0 +1,71 @@
+# KptChatDock (@konce-pt/react/chat)
+
+A floating chat in the corner of the screen — a FAB with an unread badge plus a panel holding the
+conversation.
+Import: `import { KptChatDock } from '@konce-pt/react/chat';`
+
+## DOM
+    <div class="kpt-chat-dock-host">
+      <div class="kpt-chat-dock__panel is-open" role="dialog" data-position="bottom-end">
+        <header class="kpt-chat-dock__header">
+          <span class="kpt-chat-dock__title">Support</span>
+          <!-- KptIconButton: close -->
+        </header>
+        <div class="kpt-chat-dock__content">…children…</div>
+      </div>
+      <span class="kpt-chat-dock__trigger" data-position="bottom-end">
+        <!-- KptBadge overlay → KptFab -->
+      </span>
+    </div>
+
+## Props
+- `open` / `defaultOpen` / `onOpenChange` — works controlled and uncontrolled
+- `position`: `'bottom-end' | 'bottom-start'` (logical, so RTL flips the corner on its own)
+- `unread`: number — 0 hides the badge; `header`: string
+- `icon`: string (default `message-circle`) — the closed FAB; open always shows a cross
+- `width`: string (default `22.5rem`) — above `--kpt-breakpoint-sm`
+- `offset`: string — distance from the corner, both axes (default `--kpt-space-6`)
+- `children` — the panel content
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The FAB is KptFab, not a copy of it
+The dock composes the existing components — `KptFab`, `KptBadge`, `KptIconButton` — so a change to
+the FAB reaches the chat as well. The content is `children`, which means the dock knows nothing
+about messages: put `KptChat` and `KptChatComposer` inside, or anything else.
+
+## Sharing the corner with KptScrollTop
+`KptScrollTop` pins itself to the same spot with the same `--kpt-z-overlay`, and it would swallow the
+chat FAB whole — only the unread badge would stick out. The stylesheet resolves it by itself: when a
+`bottom-end` dock is on the page, the scroll-top button steps **aside**, not up, because the
+conversation panel stands above the FAB. It applies to `bottom-end` only and measures from the
+default offset, so an application that sets `offset` positions the scroll-top button itself.
+
+## The host lays out nothing
+`.kpt-chat-dock-host` is `display: contents`, and both the FAB and the panel are `position: fixed`.
+Dropped in the middle of an application's layout the dock takes no space in the flow.
+
+## Closed is not removed
+The panel stays in the DOM with `visibility: hidden` and a delayed transition — a transition
+cannot animate out of `display: none`. It also carries `inert` and `aria-hidden` while closed, so
+a hidden panel never catches the tab order.
+
+## Examples
+    <KptChatDock unread={3} header="Support">
+      <KptChat messages={messages} currentUser="me" />
+      <KptChatComposer onSend={send} />
+    </KptChatDock>
+
+    <KptChatDock open={open} onOpenChange={setOpen} position="bottom-start" width="26rem">…</KptChatDock>
+
+## i18n
+`open`, `close`, `unreadBadge` (`{count}`) from the `chat` namespace.
+
+## Tokens
+The panel `--kpt-radius-lg` + `--kpt-elevation-3`, the corner offsets `--kpt-space-6`,
+the stack `--kpt-z-overlay`.
+
+## Accessibility
+Opening moves focus to the composer inside the panel — that is what the chat is opened for; with no
+field it takes the first interactive element. `Escape` closes and returns focus to the FAB, because
+focus must not stay on an element that just left the accessibility tree. Below 640px the panel goes
+full-screen.

package/dist/chat-entry/public-api.d.ts

@@ -0,0 +1,12 @@
+export { KptChat } from '../chat/chat.tsx';
+export type { KptChatProps, KptChatReactEvent } from '../chat/chat.tsx';
+export { KptChatMessage } from '../chat-message/chat-message.tsx';
+export type { KptChatMessageProps, KptChatMessageVariant } from '../chat-message/chat-message.tsx';
+export { KptChatTyping } from '../chat-typing/chat-typing.tsx';
+export type { KptChatTypingProps } from '../chat-typing/chat-typing.tsx';
+export { KptChatComposer } from '../chat-composer/chat-composer.tsx';
+export type { KptChatComposerProps, KptChatComposerSubmit } from '../chat-composer/chat-composer.tsx';
+export { KptChatDock } from '../chat-dock/chat-dock.tsx';
+export type { KptChatDockProps, KptChatDockPosition } from '../chat-dock/chat-dock.tsx';
+export type { KptChatAttachment, KptChatAuthor, KptChatDateLabel, KptChatDateRow, KptChatGroupOptions, KptChatGroupPosition, KptChatMessage as KptChatMessageModel, KptChatMessageRow, KptChatReaction, KptChatReactionKind, KptChatReactionOption, KptChatReplyRef, KptChatRow, KptChatStatus, KptChatUnreadRow, } from '@konce-pt/chat';
+export { KPT_CHAT_GROUP_GAP_MS, KPT_CHAT_REACTIONS, buildChatRows, canRetry, chatDayIndicator, dateLabel, diffInDays, isSameDay, mergeStatus, pendingCount, replyRefFrom, startOfDay, statusRank, toDate, toggleReaction, } from '@konce-pt/chat';

package/dist/chat-entry/public-api.js

@@ -0,0 +1,10 @@
+/*
+ * @konce-pt/react/chat — rozmowa. Osobny subpath, bo dock i logika listy są ciężkie
+ * względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
+ */
+export { KptChat } from "../chat/chat.js";
+export { KptChatMessage } from "../chat-message/chat-message.js";
+export { KptChatTyping } from "../chat-typing/chat-typing.js";
+export { KptChatComposer } from "../chat-composer/chat-composer.js";
+export { KptChatDock } from "../chat-dock/chat-dock.js";
+export { KPT_CHAT_GROUP_GAP_MS, KPT_CHAT_REACTIONS, buildChatRows, canRetry, chatDayIndicator, dateLabel, diffInDays, isSameDay, mergeStatus, pendingCount, replyRefFrom, startOfDay, statusRank, toDate, toggleReaction, } from '@konce-pt/chat';