@konce-pt/react 0.8.3 → 0.9.0

package/dist/button/llms.txt

@@ -1,35 +1,68 @@
 # KptButton (@konce-pt/react)
 
-The Koncept UI button. It renders a native `<button>` (semantics + form submit) inside a
-`.kpt-button-host` wrapper — two DOM levels, exactly like the Angular port, because the host
-carries its own styles. Import: `import { KptButton } from '@konce-pt/react';`
+The Koncept UI button. It renders a native `<button>` (semantics + form submit) — or an `<a>` when
+you pass `href` — inside a `.kpt-button-host` wrapper: two DOM levels, exactly like the Angular port,
+because the host carries its own styles. Import: `import { KptButton } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-button-host">
       <button class="kpt-button" type="button" data-variant="filled" data-size="md">
+        <span class="kpt-button__icon kpt-icon-host">…</span>
         <span class="kpt-button__content">…</span>
+        <span class="kpt-button__icon kpt-button__icon--end kpt-icon-host">…</span>
       </button>
     </span>
 
 ## Props
-- `variant`: 'filled' | 'tonal' | 'outline' | 'text' | 'danger' (default 'filled')
-- `size`: 'sm' | 'md' | 'lg' (default 'md')
+- `variant`: 'filled' | 'elevated' | 'tonal' | 'outline' | 'text' | 'link' | 'danger' | 'success' | 'warning' | 'info' (default 'filled')
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (default 'md')
 - `type`: 'button' | 'submit' | 'reset' (default 'button')
 - `disabled`: boolean
 - `loading`: boolean — a spinner + blocked interaction, sets `aria-busy`
 - `fullWidth`: boolean — the full width of the container
+- `icon` / `iconEnd`: string — a name from the icon registry
+- `iconClassName` / `iconEndClassName`: string — an extra class on that icon
+- `href`, `target`, `rel`: string — render an `<a>` instead of a `<button>`
 - `asChild`: boolean — render the single child instead of `<button>`, keeping every class
 - `hostProps`: props for the `.kpt-button-host` wrapper
-- `className`, `ref` and every other `<button>` prop go to the INNER `<button>`
+- `className`, `ref` and every other `<button>` prop go to the INNER element
 
 ## Events
 No events of its own — bind `onClick` and it lands on the native `<button>`.
 
+## Icons
+Two ways in, one result. `icon` and `iconEnd` take a name from the icon registry and the component
+renders it; anything put in `children` is laid out the same way. Both get the gap from
+`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) — the
+content box is a flex container, so an icon sits on the centre line rather than on the text baseline.
+
+`loading` replaces the leading icon with the spinner instead of standing next to it, and the
+spinner takes that icon's size, so the label does not jump when loading starts. The trailing icon
+stays put — it usually marks direction rather than the action.
+
+`iconClassName` / `iconEndClassName` add a class next to the permanent `.kpt-button__icon` hook, for
+the cases where one instance needs a different colour or a rotation.
+
+## Link and the `link` variant
+Two different things. `variant="link"` only changes the looks — underline, transparent background,
+no side padding, so it sits inside a sentence. `href` changes the element: the component renders
+`<a class="kpt-button">` instead of `<button>`, and the two combine freely (a filled button can be
+a link, a `link` variant can be a plain button). `asChild` wins over `href`: whoever substitutes
+their own element decides the tag.
+
+A disabled link loses its `href` rather than just gaining an attribute — otherwise it would stay
+clickable and reachable with the keyboard; it also gets `aria-disabled="true"` and `tabindex="-1"`.
+`target="_blank"` without an explicit `rel` gets `rel="noopener noreferrer"`.
+
 ## Examples
     <KptButton onClick={save}>Save</KptButton>
-    <KptButton variant="outline" size="sm">Cancel</KptButton>
+    <KptButton icon="device-floppy" onClick={save}>Save</KptButton>
+    <KptButton iconEnd="chevron-right" variant="outline">Next</KptButton>
+    <KptButton icon="printer" variant="text" size="sm">Print</KptButton>
+    <KptButton variant="success">Approve</KptButton>
+    <KptButton variant="link" href="/docs">Documentation</KptButton>
     <KptButton variant="danger" loading={deleting}>Delete</KptButton>
-    <form action={submitAction}><KptButton type="submit">Send</KptButton></form>
+    <KptButton variant="outline"><KptIcon name="printer" />Print</KptButton>
     <KptButton asChild><a href="/docs">Documentation</a></KptButton>
 
 ## asChild
@@ -39,10 +72,12 @@ element gets `disabled` when it is a native `<button>`, and `aria-disabled` othe
 element with no `:disabled` state therefore does not get the dimmed look.
 
 ## Tokens (styling)
-`--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`,
-`--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-tonal-{bg,fg,bg-hover}`,
-`--kpt-button-outline-{border,fg,bg-hover}`, `--kpt-button-text-{fg,bg-hover}`.
-The 'danger' variant uses `--kpt-color-danger` / `--kpt-color-on-danger`.
+`--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`, and one group per variant:
+`--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-elevated-{bg,fg,bg-hover}`,
+`--kpt-button-tonal-{bg,fg,bg-hover}`, `--kpt-button-outline-{border,fg,bg-hover}`,
+`--kpt-button-text-{fg,bg-hover}`, `--kpt-button-link-{fg,fg-hover}`,
+`--kpt-button-danger-{bg,fg,bg-hover}` and the same triplet for success, warning and info.
+The elevated variant also reaches for `--kpt-shadow-sm` and `--kpt-shadow-md`.
 
 ## The state layer (hover / active)
 Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 → 1), not by
@@ -53,4 +88,5 @@ along with the stylesheet.
 ## Accessibility
 - A native `<button>` — full keyboard and screen reader support.
 - `loading` sets `aria-busy="true"` and disables the button.
+- An `<a>` matches no `:disabled`, so the disabled look keys off `[aria-disabled='true']` as well.
 - The focus ring comes from `@konce-pt/styles` (`--kpt-color-focus-ring`).

package/dist/button-group/button-group.d.ts

@@ -10,6 +10,8 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     disabled?: boolean;
     /** Wywoływane po wyborze — moment, w którym kontrolka staje się dotknięta. */
     onTouch?: () => void;
+    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i `title`. */
+    iconOnly?: boolean;
     /** Propsy wrappera hosta (`.kpt-button-group-host`). */
     hostProps?: KptHostProps<'span'>;
 }
@@ -17,9 +19,13 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
  *
  * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
  *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
+ * <KptButtonGroup value={view} onValueChange={setView} iconOnly
+ *   options={[{ icon: 'list', label: 'Lista', value: 'list' }]} />
  */
-export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, onTouch, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;
+export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, onTouch, iconOnly, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;

package/dist/button-group/button-group.js

@@ -1,16 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
+import { KptIcon } from "../icon/icon.js";
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
  *
  * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
  *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
+ * <KptButtonGroup value={view} onValueChange={setView} iconOnly
+ *   options={[{ icon: 'list', label: 'Lista', value: 'list' }]} />
  */
-export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, onTouch, hostProps, className, ...rest }) {
+export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, onTouch, iconOnly = false, hostProps, className, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const [current, setCurrent] = useControllableState({
         value,
@@ -23,8 +28,8 @@ export function KptButtonGroup({ options = [], value, defaultValue, onValueChang
         setCurrent(option.value);
         onTouch?.();
     };
-    return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', className), role: "group", "data-size": size, ...rest, children: options.map((option) => {
+    return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', className), role: "group", "data-size": size, "data-icon-only": iconOnly ? '' : undefined, ...rest, children: options.map((option) => {
                 const active = option.value === current;
-                return (_jsx("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, onClick: () => select(option), children: option.label }, String(option.value)));
+                return (_jsxs("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, "aria-label": iconOnly ? option.label : undefined, title: iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }, String(option.value)));
             }) }) }));
 }

package/dist/button-group/llms.txt

@@ -6,20 +6,39 @@ Import: `import { KptButtonGroup } from '@konce-pt/react';`
 ## DOM
     <span class="kpt-button-group-host">
       <div class="kpt-button-group" role="group" data-size="md">
-        <button type="button" class="kpt-button-group__item is-active" aria-pressed="true">List</button>
-        <button type="button" class="kpt-button-group__item" aria-pressed="false">Grid</button>
+        <button type="button" class="kpt-button-group__item is-active" aria-pressed="true">
+          <span class="kpt-button-group__icon kpt-icon-host">…</span>
+          <span class="kpt-button-group__label">List</span>
+        </button>
+        <button type="button" class="kpt-button-group__item" aria-pressed="false">
+          <span class="kpt-button-group__label">Grid</span>
+        </button>
       </div>
     </span>
 
 ## Props
-- `options`: `KptOption<T>[]` — `{ label, value, disabled? }`
+- `options`: `KptOption<T>[]` — `{ label, value, disabled?, icon? }`
 - `value` / `defaultValue` / `onValueChange` — controlled or uncontrolled
 - `size`: 'sm' | 'md' | 'lg' (default 'md')
 - `disabled`: boolean — disables the whole group; a single option disables itself
+- `iconOnly`: boolean — hides the labels and leaves the icons alone
 - `onTouch()` — fires on a pick, the moment the control becomes touched
 - `hostProps` — props for the `.kpt-button-group-host` wrapper
 - `className`, `ref` and every other `<div>` prop go to `.kpt-button-group`
 
+## Icons
+An option carries its icon by name: `KptOption.icon` is a key from the icon registry, and the group
+renders it before the label. The item is a flex box, so the icon gets the `--kpt-button-gap` spacing
+and a size that follows `size` (1rem at `sm` up to 1.25rem at `lg`) — the same scale as `KptButton`,
+so a group standing next to a button matches it.
+
+`iconOnly` drops the label from the page but keeps it as the accessible name: the item gets both
+`aria-label` and `title`, so a screen reader still says "Grid" and a mouse user gets a tooltip.
+Each item also becomes a square, because a lone icon inside a 1rem side padding looks adrift.
+
+The icon takes its colour from `currentColor`, so the active item — filled with
+`--kpt-color-primary` — flips the icon to `--kpt-color-on-primary` with no extra rule.
+
 ## Values of any type
 The value is generic, so options can carry objects, not just strings. Keys come from
 `String(option.value)`, so distinct options need distinct string forms — for object values give
@@ -29,12 +48,18 @@ each one a stable id and map back to the object yourself.
     <KptButtonGroup value={view} onValueChange={setView}
       options={[{ label: 'List', value: 'list' }, { label: 'Grid', value: 'grid' }]} />
 
+    <KptButtonGroup value={view} onValueChange={setView}
+      options={[{ icon: 'list', label: 'List', value: 'list' }]} />
+
+    <KptButtonGroup value={align} onValueChange={setAlign} iconOnly options={alignOptions} />
+
     <KptButtonGroup size="sm" defaultValue="M" options={sizeOptions} />
 
 ## Tokens
 `--kpt-color-surface`, `--kpt-color-muted`, `--kpt-color-primary` (the active segment),
-`--kpt-color-border-strong`, `--kpt-radius-md`.
+`--kpt-color-border-strong`, `--kpt-radius-md`, `--kpt-button-gap`.
 
 ## Accessibility
 A `role="group"` of native buttons, each with `aria-pressed` — a screen reader announces which
-segment is on, and the keyboard walks them like any other buttons.
+segment is on, and the keyboard walks them like any other buttons. With `iconOnly` the name comes
+from `aria-label`, so the announcement does not degrade to a bare "button".

package/dist/chat/chat.d.ts

@@ -0,0 +1,53 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { KptChatAuthor, KptChatMessage as KptChatMessageModel, KptChatMessageRow, KptChatReactionOption, KptChatReplyRef } from '@konce-pt/chat';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/** Wybór reakcji na wiadomości — komponent mówi, w co kliknięto, dopisanie należy do aplikacji. */
+export interface KptChatReactEvent<T = unknown> {
+    message: KptChatMessageModel<T>;
+    emoji: string;
+}
+export interface KptChatProps<T = unknown> extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    /** Wiadomości w kolejności chronologicznej — komponent ich nie sortuje. */
+    messages?: readonly KptChatMessageModel<T>[];
+    /** `id` nadawcy uznawanego za „mnie": jego wiadomości idą na prawo i mają status. */
+    currentUser?: string;
+    /** Przerwa łamiąca grupę wiadomości jednego nadawcy. */
+    groupGapMs?: number;
+    /** `id` pierwszej nieprzeczytanej wiadomości — nad nią stanie dzielnik. */
+    unreadFrom?: string | null;
+    /** Brak połączenia: pasek u góry listy z liczbą wiadomości czekających na wysłanie. */
+    offline?: boolean;
+    /** Osoby piszące w tej chwili. */
+    typing?: readonly KptChatAuthor[];
+    /** Dosuwanie widoku do najnowszej wiadomości, dopóki użytkownik nie odjedzie w górę. */
+    autoScroll?: boolean;
+    /** Akcje bąbla pod kursorem: odpowiedz i zareaguj. */
+    actions?: boolean;
+    /** Zestaw wybieraka reakcji, przekazywany bąblom. Domyślnie pięć wbudowanych. */
+    reactionOptions?: readonly KptChatReactionOption[];
+    /** Własny komunikat pustej rozmowy. */
+    emptyLabel?: string;
+    onRetry?: (message: KptChatMessageModel<T>) => void;
+    onReply?: (message: KptChatMessageModel<T>) => void;
+    onReact?: (event: KptChatReactEvent<T>) => void;
+    onQuoted?: (quote: KptChatReplyRef) => void;
+    /** Przewinięcie na sam szczyt — moment na dociągnięcie starszych wiadomości. */
+    onLoadMore?: () => void;
+    /** Szablon treści bąbla — odpowiednik `<ng-template let-message>` z Angulara. */
+    renderMessage?: (message: KptChatMessageModel<T>, row: KptChatMessageRow<T>) => ReactNode;
+}
+/**
+ * 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 declare function KptChat<T = unknown>({ messages, currentUser, groupGapMs, unreadFrom, offline, typing, autoScroll, actions, reactionOptions, emptyLabel, onRetry, onReply, onReact, onQuoted, onLoadMore, renderMessage, locale, dictionary, className, ...rest }: Readonly<KptChatProps<T>>): import("react").JSX.Element;

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;