@konce-pt/react 0.8.3 → 0.9.0

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';

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

@@ -0,0 +1,53 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { KptChatAttachment, KptChatAuthor, KptChatGroupPosition, KptChatMessage as KptChatMessageModel, KptChatReaction, KptChatReactionOption, KptChatReplyRef, KptChatStatus } from '@konce-pt/chat';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/** Wygląd bąbla. `system` nie rysuje bąbla w ogóle — to komunikat, nie wypowiedź. */
+export type KptChatMessageVariant = 'neutral' | 'primary' | 'solid' | 'ghost' | 'system';
+export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    /** Cała wiadomość naraz. Pojedyncze propsy poniżej mają nad nią priorytet. */
+    message?: KptChatMessageModel | null;
+    author?: KptChatAuthor | null;
+    text?: string | null;
+    time?: Date | string | number | null;
+    attachments?: readonly KptChatAttachment[] | null;
+    reactions?: readonly KptChatReaction[] | null;
+    replyTo?: KptChatReplyRef | null;
+    status?: KptChatStatus | null;
+    /** Strona listy: `start` to cudza wiadomość, `end` własna. */
+    align?: 'start' | 'end';
+    /** Wariant kolorystyczny; bez niego wynika z `align` (własna = `primary`). */
+    variant?: KptChatMessageVariant | null;
+    position?: KptChatGroupPosition;
+    system?: boolean;
+    showAuthor?: boolean;
+    showAvatar?: boolean;
+    showMeta?: boolean;
+    tail?: boolean;
+    /** Akcje pod kursorem: odpowiedz i zareaguj. Domyślnie wyłączone. */
+    actions?: boolean;
+    /** Zestaw wybieraka reakcji. Domyślnie pięć wbudowanych; można go skrócić lub przestawić. */
+    reactionOptions?: readonly KptChatReactionOption[];
+    onRetry?: () => void;
+    onReply?: () => void;
+    /** Wybrana reakcja (emoji). Biblioteka niczego nie dopisuje do modelu — robi to aplikacja. */
+    onReact?: (emoji: string) => void;
+    /** Kliknięcie w cytat — aplikacja może przewinąć listę do oryginału. */
+    onQuoted?: (quote: KptChatReplyRef) => void;
+    /** Treść bąbla. Wygrywa z `text`, więc bąbel przyjmuje cokolwiek. */
+    children?: ReactNode;
+}
+/**
+ * Pojedyncza wiadomość czatu — bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
+ * awatarem, cytatem, załącznikami i reakcjami.
+ *
+ * Działa na dwa sposoby: dostaje gotowy obiekt przez `message` (tak używa go `KptChat`)
+ * albo pojedyncze propsy, gdy budujesz listę samodzielnie.
+ *
+ * Wygląd wewnątrz grupy steruje `position`: zapadnięty narożnik od strony nadawcy i ogonek
+ * tylko przy ostatnim bąblu. Wylicza to `buildChatRows()` z `@konce-pt/chat`.
+ *
+ * @example
+ * <KptChatMessage message={msg} align="end" position="last" />
+ * <KptChatMessage align="end" status="failed" onRetry={resend}>Nie poszło</KptChatMessage>
+ */
+export declare function KptChatMessage({ message, author, text, time, attachments, reactions, replyTo, status, align, variant, position, system, showAuthor, showAvatar, showMeta, tail, actions, reactionOptions, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }: Readonly<KptChatMessageProps>): import("react").JSX.Element;

package/dist/chat-message/chat-message.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { KPT_CHAT_REACTIONS, canRetry, toDate } from '@konce-pt/chat';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptAvatar } from "../avatar/avatar.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptIconButton } from "../icon-button/icon-button.js";
+/** Ikona statusu wysyłki. `read` używa tej samej ikony co `delivered`, różni je kolor. */
+const STATUS_ICONS = {
+    sending: 'clock',
+    sent: 'check',
+    delivered: 'checks',
+    read: 'checks',
+    failed: 'alert-triangle',
+};
+/**
+ * Pojedyncza wiadomość czatu — bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
+ * awatarem, cytatem, załącznikami i reakcjami.
+ *
+ * Działa na dwa sposoby: dostaje gotowy obiekt przez `message` (tak używa go `KptChat`)
+ * albo pojedyncze propsy, gdy budujesz listę samodzielnie.
+ *
+ * Wygląd wewnątrz grupy steruje `position`: zapadnięty narożnik od strony nadawcy i ogonek
+ * tylko przy ostatnim bąblu. Wylicza to `buildChatRows()` z `@konce-pt/chat`.
+ *
+ * @example
+ * <KptChatMessage message={msg} align="end" position="last" />
+ * <KptChatMessage align="end" status="failed" onRetry={resend}>Nie poszło</KptChatMessage>
+ */
+export function KptChatMessage({ message = null, author = null, text = null, time = null, attachments = null, reactions = null, replyTo = null, status = null, align = 'start', variant = null, position = 'single', system = false, showAuthor = false, showAvatar = false, showMeta = true, tail = true, actions = false, reactionOptions = KPT_CHAT_REACTIONS, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const rowRef = useRef(null);
+    /** Czy wybierak reakcji jest otwarty. */
+    const [pickerOpen, setPickerOpen] = useState(false);
+    // Kliknięcie obok zamyka wybierak. Sam `onBlur` nie wystarcza: w Safari kliknięcie w przycisk
+    // nie przenosi na niego fokusu, więc wybierak zostawałby otwarty na zawsze. Faza przechwytywania
+    // i `pointerdown` (nie `click`) — własne `onClick` opcji zdąży się wykonać przed zamknięciem.
+    useEffect(() => {
+        if (!pickerOpen)
+            return;
+        const close = (event) => {
+            if (!rowRef.current?.contains(event.target))
+                setPickerOpen(false);
+        };
+        document.addEventListener('pointerdown', close, true);
+        return () => document.removeEventListener('pointerdown', close, true);
+    }, [pickerOpen]);
+    const isSystem = system || (message?.system ?? false);
+    const resolvedAuthor = author ?? message?.author ?? null;
+    const resolvedText = text ?? message?.text ?? '';
+    const resolvedStatus = status ?? message?.status ?? null;
+    const resolvedReplyTo = replyTo ?? message?.replyTo ?? null;
+    const resolvedAttachments = attachments ?? message?.attachments ?? [];
+    const resolvedReactions = reactions ?? message?.reactions ?? [];
+    const rawTime = time ?? message?.sentAt ?? null;
+    const sentAt = rawTime === null ? null : toDate(rawTime);
+    const timeLabel = sentAt
+        ? new Intl.DateTimeFormat(activeLocale, { hour: '2-digit', minute: '2-digit' }).format(sentAt)
+        : '';
+    /*
+     * Wariant domyślny bierze się z wyrównania. Własna wiadomość dostaje pełny `solid`,
+     * bo motyw biblioteki jest monochromatyczny: pastelowy `primary-subtle` ma tę samą
+     * jasność co `muted`, więc własny i cudzy bąbel byłyby nie do odróżnienia. Kto woli
+     * ciszej, ustawia `variant="primary"` ręcznie.
+     */
+    const resolvedVariant = isSystem
+        ? 'system'
+        : (variant ?? (align === 'end' ? 'solid' : 'neutral'));
+    /* Ogonek tylko na końcu grupy i tylko tam, gdzie bąbel ma tło, z którego da się go wyciąć. */
+    const hasTail = tail &&
+        resolvedVariant !== 'ghost' &&
+        resolvedVariant !== 'system' &&
+        (position === 'last' || position === 'single');
+    const statusIcon = resolvedStatus ? STATUS_ICONS[resolvedStatus] : null;
+    const retryable = canRetry(resolvedStatus);
+    /*
+     * Etykieta dla czytnika ekranu. Bez niej z bąbla płynie sama treść — bez nadawcy,
+     * godziny i informacji, że wiadomość się nie wysłała.
+     */
+    const ariaLabel = isSystem
+        ? resolvedText
+        : [resolvedAuthor?.name, timeLabel, resolvedStatus ? t('chat.' + resolvedStatus) : '']
+            .filter(Boolean)
+            .join(', ');
+    if (isSystem) {
+        return (_jsx("div", { className: cn('kpt-chat-message-host', className), role: "note", "aria-label": ariaLabel, ...rest, children: _jsx("p", { className: "kpt-chat-message__system", children: resolvedText }) }));
+    }
+    return (_jsx("div", { className: cn('kpt-chat-message-host', className), role: "article", "aria-label": ariaLabel, ...rest, children: _jsxs("div", { ref: rowRef, className: "kpt-chat-message__row", "data-align": align, children: [align === 'start' ? (_jsx("span", { className: "kpt-chat-message__avatar", "aria-hidden": "true", children: showAvatar ? (_jsx(KptAvatar, { size: "sm", src: resolvedAuthor?.avatar ?? null, name: resolvedAuthor?.name ?? '' })) : null })) : null, _jsxs("div", { className: "kpt-chat-message__stack", children: [showAuthor && resolvedAuthor ? (_jsx("span", { className: "kpt-chat-message__author", children: resolvedAuthor.name })) : null, _jsxs("div", { className: "kpt-chat-message__bubble", "data-variant": resolvedVariant, "data-align": align, "data-position": position, "data-status": resolvedStatus ?? undefined, "data-tail": hasTail ? '' : undefined, children: [resolvedReplyTo ? (_jsxs("button", { type: "button", className: "kpt-chat-message__quote", onClick: () => onQuoted?.(resolvedReplyTo), children: [_jsx("span", { className: "kpt-chat-message__quote-author", children: resolvedReplyTo.author }), _jsx("span", { className: "kpt-chat-message__quote-text", children: resolvedReplyTo.excerpt })] })) : null, resolvedText ? _jsx("p", { className: "kpt-chat-message__text", children: resolvedText }) : null, children, resolvedAttachments.length ? (_jsx("ul", { className: "kpt-chat-message__files", children: resolvedAttachments.map((file) => (_jsxs("li", { className: "kpt-chat-message__file", children: [file.thumbnail ? (_jsx("img", { className: "kpt-chat-message__file-thumb", src: file.thumbnail, alt: file.name })) : (_jsx(KptIcon, { name: "paperclip" })), _jsx("a", { className: "kpt-chat-message__file-name", href: file.url, download: file.url ? file.name : undefined, children: file.name }), file.size ? (_jsx("span", { className: "kpt-chat-message__file-size", children: fileSize(file.size) })) : null] }, file.id))) })) : null, showMeta ? (_jsxs("span", { className: "kpt-chat-message__meta", children: [timeLabel ? (_jsx("time", { className: "kpt-chat-message__time", dateTime: sentAt?.toISOString(), children: timeLabel })) : null, statusIcon ? (_jsx(KptIcon, { className: "kpt-chat-message__status", name: statusIcon })) : null] })) : null, resolvedReactions.length ? (_jsx("ul", { className: "kpt-chat-message__reactions", "data-align": align, children: resolvedReactions.map((reaction) => (_jsxs("li", { className: "kpt-chat-message__reaction", "data-reacted": reaction.reacted ? '' : undefined, children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx("span", { className: "kpt-chat-message__reaction-count", children: reaction.count })] }, reaction.emoji))) })) : null] })] }), _jsx("span", { className: "kpt-chat-message__actions", "data-open": pickerOpen ? '' : undefined, children: retryable ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-chat-message__retry' }, size: "sm", "aria-label": t('chat.retry'), onClick: () => onRetry?.(), children: _jsx(KptIcon, { name: "refresh" }) })) : actions ? (_jsxs(_Fragment, { children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.replyTo', { author: resolvedAuthor?.name ?? '' }), onClick: () => onReply?.(), children: _jsx(KptIcon, { name: "corner-up-left" }) }), _jsxs("span", { className: "kpt-chat-message__react", onKeyDown: (event) => {
+                                    if (event.key === 'Escape')
+                                        setPickerOpen(false);
+                                }, onBlur: (event) => {
+                                    // Przechodzenie Tabem między opcjami wybieraka go nie zamyka.
+                                    if (!event.currentTarget.contains(event.relatedTarget))
+                                        setPickerOpen(false);
+                                }, children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.react'), "aria-expanded": pickerOpen, onClick: () => setPickerOpen((open) => !open), children: _jsx(KptIcon, { name: "mood-smile" }) }), pickerOpen ? (_jsx("span", { className: "kpt-chat-message__picker", role: "group", "aria-label": t('chat.react'), children: reactionOptions.map((option) => {
+                                            const label = t('chat.react' + option.kind[0].toUpperCase() + option.kind.slice(1));
+                                            const reacted = resolvedReactions.some((item) => item.emoji === option.emoji && item.reacted);
+                                            return (_jsx("button", { type: "button", className: "kpt-chat-message__pick", "aria-label": label, title: label, "aria-pressed": reacted, onClick: () => {
+                                                    onReact?.(option.emoji);
+                                                    setPickerOpen(false);
+                                                }, children: _jsx("span", { "aria-hidden": "true", children: option.emoji }) }, option.kind));
+                                        }) })) : null] })] })) : null })] }) }));
+}
+/** Rozmiar załącznika w kB/MB — surowe bajty nic nie mówią przy pliku obok nazwy. */
+function fileSize(bytes) {
+    if (bytes < 1024)
+        return bytes + ' B';
+    if (bytes < 1024 * 1024)
+        return Math.round(bytes / 1024) + ' kB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}

package/dist/chat-message/llms.txt

@@ -0,0 +1,73 @@
+# KptChatMessage (@konce-pt/react/chat)
+
+A single chat bubble: content, a clock, a send status, and optionally an avatar, a quote,
+attachments and reactions.
+Import: `import { KptChatMessage } from '@konce-pt/react/chat';`
+
+## DOM
+    <div class="kpt-chat-message-host" role="article" aria-label="Anna, 09:22, Read">
+      <div class="kpt-chat-message__row" data-align="start">
+        <span class="kpt-chat-message__avatar">…KptAvatar…</span>
+        <div class="kpt-chat-message__stack">
+          <span class="kpt-chat-message__author">Anna Kowalska</span>
+          <div class="kpt-chat-message__bubble"
+               data-variant="neutral" data-align="start" data-position="last" data-tail>
+            <button class="kpt-chat-message__quote">…</button>
+            <p class="kpt-chat-message__text">…</p>
+            <ul class="kpt-chat-message__files">…</ul>
+            <span class="kpt-chat-message__meta"><time>09:22</time>…</span>
+            <ul class="kpt-chat-message__reactions">…</ul>
+          </div>
+        </div>
+        <span class="kpt-chat-message__actions">…KptIconButton, .kpt-chat-message__picker…</span>
+      </div>
+    </div>
+
+## Props
+- `message`: `KptChatMessage` — the whole object; the single props below win over it
+- `author`, `text`, `time`, `status`, `attachments`, `reactions`, `replyTo`
+- `align`: `'start' | 'end'`; `variant`: `'neutral' | 'primary' | 'solid' | 'ghost' | 'system'`
+- `position`: `'single' | 'first' | 'middle' | 'last'`; `system`: boolean
+- `showAuthor`, `showAvatar`, `showMeta` (default true), `tail` (default true), `actions`
+- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) — the picker set
+- `onRetry`, `onReply`: `() => void`; `onReact`: `(emoji: string) => void`; `onQuoted`: `(quote) => void`
+- `children` — bubble content; it renders next to `text`, so the bubble takes anything
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The default variant follows the alignment
+Your own message gets the full `solid`, someone else's gets `neutral`. The theme is monochrome, so
+the difference between bubbles is lightness, not hue — `--kpt-color-primary-subtle` has exactly the
+lightness of `--kpt-color-muted`, which would make the two sides indistinguishable. For a quieter
+list set `variant="primary"` by hand.
+
+## Grouping is what the shape is made of
+`position` decides which corner collapses and which bubble wears the tail — inside a group the
+corner on the sender's side drops to `--kpt-radius-sm`. `KptChat` gets all of it from
+`buildChatRows()`; set it by hand only when you build the list yourself. The tail is skipped for
+`ghost` and `system`, which have no background to cut it out of.
+
+## An unsent message must be able to say so
+`status="failed"` outlines the bubble and puts a retry arrow **outside** it, in the action column
+on the outer side of the list. `KptChat` also keeps the meta row visible on such a bubble even in
+the middle of a group — the arrow with nothing to explain it would be a mystery.
+Statuses: `sending` (clock), `sent` (check), `delivered` (double check), `read` (the same icon in
+the accent colour) and `failed`.
+
+## Examples
+    <KptChatMessage message={msg} align="end" position="last" />
+    <KptChatMessage align="end" status="failed" onRetry={resend}>It did not go out</KptChatMessage>
+    <KptChatMessage system text="Anna joined the conversation" />
+
+## i18n
+`retry`, `react`, `replyTo` (`{author}`) and the status names from the `chat` namespace. The clock
+is formatted by `Intl` in the active locale.
+
+## Tokens
+`--kpt-color-muted` (incoming) / `--kpt-color-primary` + `--kpt-color-on-primary` (own),
+failed `--kpt-color-danger-subtle` + `--kpt-color-danger-border` — the failed rule also resets the
+text colour, or a white `solid` label would land on pale pink.
+
+## Accessibility
+The host is an `article` labelled with author, time and status — content alone would say nothing
+about who wrote it or whether it was sent. The status icon is `aria-hidden`; the meaning travels in
+the label. A system notice is a `note`, never an `article`.

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

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptChatAuthor } from '@konce-pt/chat';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptChatTypingProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    /** Osoby piszące w tej chwili. Pusta lista chowa wskaźnik. */
+    authors?: readonly KptChatAuthor[];
+    /** Własna etykieta zamiast tej ze słownika. */
+    label?: string;
+}
+/**
+ * Wskaźnik pisania — trzy kropki i informacja, kto pisze.
+ *
+ * Pusta lista autorów nie renderuje niczego, więc można go trzymać w drzewie na stałe
+ * i sterować wyłącznie danymi.
+ *
+ * Element jest `role="status"` z `aria-live="polite"`: czytnik ogłasza wejście i zniknięcie
+ * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi —
+ * informację niesie etykieta.
+ *
+ * @example
+ * <KptChatTyping authors={typing} />
+ */
+export declare function KptChatTyping({ authors, label, locale, dictionary, className, ...rest }: Readonly<KptChatTypingProps>): import("react").JSX.Element | null;