@konce-pt/react 0.11.2 → 0.14.0

package/dist/charts/chart.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type KptChartConfig } from '@konce-pt/chart';
-export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     config: KptChartConfig;
     /** Szerokość viewBoxa w jednostkach SVG; wykres skaluje się do kontenera. */
     width?: number;
@@ -9,10 +10,10 @@ export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'child
 }
 /**
  * Wykres SVG sterowany jednym obiektem `config`: line, bar, pie, doughnut, polarArea, radar.
- * Cała geometria pochodzi z `@konce-pt/chart` — paczki bez frameworka, wspólnej z portem
+ * Cała geometria pochodzi z `@konce-pt/chart` - paczki bez frameworka, wspólnej z portem
  * Angulara; komponent renderuje wyłącznie SVG, bez manipulacji DOM.
  *
  * @example
  * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
  */
-export declare function KptChart({ config, width, height, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;
+export declare function KptChart({ config, width, height, locale, dictionary, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;

package/dist/charts/chart.js

@@ -1,7 +1,9 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { areaPath, bandScale, barLayout, extent, formatNumber, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, seriesColor, } from '@konce-pt/chart';
+import { useId, useState } from 'react';
+import { areaPath, bandScale, barLayout, chartAccessibleName, chartDataTable, extent, formatNumber, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, seriesColor, } from '@konce-pt/chart';
 import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptChartLegend } from "./chart-legend.js";
 import { KptChartTooltip } from "./chart-tooltip.js";
 const VERTICAL_INSETS = { top: 12, right: 16, bottom: 28, left: 46 };
@@ -15,17 +17,23 @@ function styleFor(align) {
 }
 /**
  * Wykres SVG sterowany jednym obiektem `config`: line, bar, pie, doughnut, polarArea, radar.
- * Cała geometria pochodzi z `@konce-pt/chart` — paczki bez frameworka, wspólnej z portem
+ * Cała geometria pochodzi z `@konce-pt/chart` - paczki bez frameworka, wspólnej z portem
  * Angulara; komponent renderuje wyłącznie SVG, bez manipulacji DOM.
  *
  * @example
  * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
  */
-export function KptChart({ config, width = 600, height = 360, className, style, ...rest }) {
+export function KptChart({ config, width = 600, height = 360, locale, dictionary, className, style, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const descId = `${useId()}-desc`;
+    // Alternatywa tekstowa (WCAG 1.1.1): nazwa SVG (`ariaLabel` -> tytuł -> i18n) i dane w ukrytej
+    // wizualnie tabeli - dymek na najechanie jest dostępny tylko myszą.
+    const accessibleName = chartAccessibleName(config, t('chart.label'));
+    const dataTable = chartDataTable(config, activeLocale);
     const [hidden, setHidden] = useState(new Set());
     const [highlighted, setHighlighted] = useState(null);
     const [tooltip, setTooltip] = useState(null);
-    /** Indeks kategorii pod kursorem — prowadnica crosshair w wykresie liniowym. */
+    /** Indeks kategorii pod kursorem - prowadnica crosshair w wykresie liniowym. */
     const [activeIndex, setActiveIndex] = useState(null);
     const anim = {
         enabled: config.animation?.enabled ?? true,
@@ -71,7 +79,7 @@ export function KptChart({ config, width = 600, height = 360, className, style,
             next.add(key);
         setHidden(next);
     };
-    // ── Wykres liniowy ──
+    // -- Wykres liniowy --
     const lineVm = (() => {
         if (config.type !== 'line')
             return null;
@@ -124,7 +132,7 @@ export function KptChart({ config, width = 600, height = 360, className, style,
                                         } })] }, idx)))] }, key));
                 })] }));
     })();
-    // ── Wykres słupkowy ──
+    // -- Wykres słupkowy --
     const barVm = (() => {
         if (config.type !== 'bar')
             return null;
@@ -159,7 +167,7 @@ export function KptChart({ config, width = 600, height = 360, className, style,
                         return (_jsx("path", { className: cn('kpt-chart__bar', dim(key) && 'kpt-chart__series--dim'), d: b.path, style: { fill: color, ['--kpt-chart-i']: order }, onPointerEnter: () => showTip(tipX, tipY, names[b.seriesIndex], config.labels[b.categoryIndex] ?? '', b.value, color), onPointerLeave: hideTip }, `${key}#${order}`));
                     }) })] }));
     })();
-    // ── Pie / doughnut / polar area ──
+    // -- Pie / doughnut / polar area --
     const pieVm = (() => {
         if (!isPieLike)
             return null;
@@ -184,7 +192,7 @@ export function KptChart({ config, width = 600, height = 360, className, style,
                 return (_jsx("path", { className: cn('kpt-chart__slice', dim(key) && 'kpt-chart__series--dim'), d: slice.path, style: { fill: entry.color, ['--kpt-chart-i']: k }, onPointerEnter: () => showTip(tip.x, tip.y, entry.label, '', entry.value, entry.color), onPointerLeave: hideTip }, key));
             }) }));
     })();
-    // ── Radar ──
+    // -- Radar --
     const radarVm = (() => {
         if (config.type !== 'radar')
             return null;
@@ -227,5 +235,5 @@ export function KptChart({ config, width = 600, height = 360, className, style,
                         fontWeight: config.subtitle.font?.weight,
                         paddingTop: config.subtitle.padding?.top,
                         paddingBottom: config.subtitle.padding?.bottom,
-                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", preserveAspectRatio: "xMidYMid meet", children: [lineVm, barVm, radarVm, pieVm] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
+                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": accessibleName, "aria-describedby": config.description ? descId : undefined, preserveAspectRatio: "xMidYMid meet", children: [lineVm, barVm, radarVm, pieVm] }), config.description ? (_jsx("p", { className: "kpt-chart__sr", id: descId, children: config.description })) : null, _jsxs("table", { className: "kpt-chart__sr", children: [_jsxs("caption", { children: [t('chart.dataTable'), ": ", accessibleName] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: t('chart.category') }), dataTable.columns.map((col, i) => (_jsx("th", { scope: "col", children: col }, i)))] }) }), _jsx("tbody", { children: dataTable.rows.map((row, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), row.values.map((value, j) => (_jsx("td", { children: value }, j)))] }, i))) })] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
 }

package/dist/charts/llms.txt

@@ -8,22 +8,22 @@ and not every app needs them.
 
 ## Props
 - `config`: `KptChartConfig` (required)
-- `width`, `height` — the viewBox in SVG units (600 × 360); the chart scales to its container
+- `width`, `height` - the viewBox in SVG units (600 x 360); the chart scales to its container
 
 The whole drawing lives in that coordinate system, TYPOGRAPHY INCLUDED: the axis labels are set in
 `font-size: 11px`, but inside an SVG that means 11 user units, not 11 device pixels. Render a
 600-unit chart in a 300px column and the labels come out at roughly half size. `width`/`height` are
-therefore not just an aspect ratio — they are the text scale. In a narrow container shrink them
+therefore not just an aspect ratio - they are the text scale. In a narrow container shrink them
 proportionally (`width={300} height={180}`) instead of letting a 600-unit chart squeeze itself.
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The config is the API
 `{ type, labels, series, points?, area?, interpolation?, orientation?, borderRadius?, innerRadius?,
-crosshair?, tooltip?, legend?, title?, subtitle?, animation? }` — the same shape the Angular port
+crosshair?, tooltip?, legend?, title?, subtitle?, animation?, ariaLabel?, description? }` - the same shape the Angular port
 takes, because both read it from `@konce-pt/chart`.
 
 ## The geometry lives in a package
-Scales, paths, bar layout and arcs come from `@konce-pt/chart` — pure functions with `node --test`
+Scales, paths, bar layout and arcs come from `@konce-pt/chart` - pure functions with `node --test`
 coverage, shared with the Angular port. The component only turns them into SVG elements; there is
 no DOM manipulation and no canvas.
 
@@ -32,7 +32,7 @@ A 4px point is not something a pointer can reliably hit, so each one is paired w
 12px circle that carries the events. The visible point only reacts to the state.
 
 ## Interaction is local state
-Hidden series, the highlighted one, the tooltip and the active category are `useState` — the config
+Hidden series, the highlighted one, the tooltip and the active category are `useState` - the config
 stays a plain object the caller owns, and nothing is written back into it.
 
 ## Examples
@@ -53,5 +53,8 @@ stays a plain object the caller owns, and nothing is written back into it.
 `KPT_CHART_PALETTE` or `series.color`.
 
 ## Accessibility
-The `<svg>` carries `role="img"`; the legend is a list of real buttons, so series can be toggled
-from the keyboard.
+The `<svg>` is `role="img"` with a name: `config.ariaLabel`, else the title text, else `chart.label`
+from i18n. `config.description` (one sentence with the takeaway) is tied to it through
+`aria-describedby`. The data itself sits in a visually hidden `<table>` (categories in rows, series in
+columns, numbers in the active language), so a screen reader can walk the values - the tooltip is
+pointer-only. The legend is a list of real buttons, so series can be toggled from the keyboard.

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

@@ -1,7 +1,7 @@
 /*
- * @konce-pt/react/charts — wykresy SVG. Osobny subpath, bo geometria i style wykresów są
+ * @konce-pt/react/charts - wykresy SVG. Osobny subpath, bo geometria i style wykresów są
  * ciężkie względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
  */
 export { KptChart } from "../charts/chart.js";
-// Rdzeń obliczeniowy — przydatny do własnych rozszerzeń i renderowania po stronie serwera.
+// Rdzeń obliczeniowy - przydatny do własnych rozszerzeń i renderowania po stronie serwera.
 export { KPT_CHART_PALETTE, seriesColor, linePath, areaPath, pieSlices, polarSlices, barLayout, radarGrid, radarPoints, niceScale, } from '@konce-pt/chart';

package/dist/chat/chat.d.ts

@@ -1,19 +1,26 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptEnterMotion } from '@konce-pt/motion';
 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. */
+/** 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. */
+    /** 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. */
+    /**
+     * Ruch pojawiania się (nowe wiadomości, reakcje, status): `spring` - wyrasta z miejsca, z którego przychodzi, na sprężynie;
+     * `fade` - tylko się przenika; `none` - bez ruchu. Bez wartości bierze `enter` z `KptMotionProvider`
+     * (domyślnie `spring`); `enabled={false}` i systemowe "ogranicz ruch" wyłączają go zawsze.
+     */
+    enterMotion?: KptEnterMotion;
+    /** `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. */
+    /** `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;
@@ -31,23 +38,23 @@ export interface KptChatProps<T = unknown> extends Omit<ComponentPropsWithRef<'d
     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. */
+    /** 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. */
+    /** 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,
+ * 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.
+ * 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
+ * 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;
+export declare function KptChat<T = unknown>({ messages, currentUser, groupGapMs, unreadFrom, offline, typing, autoScroll, actions, reactionOptions, emptyLabel, enterMotion, onRetry, onReply, onReact, onQuoted, onLoadMore, renderMessage, locale, dictionary, className, ...rest }: Readonly<KptChatProps<T>>): import("react").JSX.Element;

package/dist/chat/chat.js

@@ -1,34 +1,37 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from 'react';
 import { KPT_CHAT_GROUP_GAP_MS, KPT_CHAT_REACTIONS, buildChatRows, chatDayIndicator, pendingCount } from '@konce-pt/chat';
+import { playEnterMotion, resolveEnterMotion } from '@konce-pt/motion';
 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";
+import { useKptMotion } from "../motion/motion-context.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ą —
+ * 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,
+ * 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.
+ * 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
+ * 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 }) {
+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 = '', enterMotion, 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);
@@ -36,16 +39,17 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
     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. */
+    /** 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 motion = resolveEnterMotion(enterMotion, useKptMotion());
     const pending = pendingCount(messages);
     /**
-     * Ustawia tekst pływającej pigułki dnia — co ma na niej być, liczy `chatDayIndicator`
+     * 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
@@ -77,24 +81,65 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         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.
+    const firstIdRef = useRef(null);
+    const prevScrollHeight = useRef(0);
+    const dayFrame = useRef(0);
+    // Wartości czytane w efekcie listy, ale nieuruchamiające go - przez zdarzenia efektu.
+    const autoScrollOnNew = useEffectEvent(() => autoScroll);
+    const pinnedNow = useEffectEvent(() => pinned);
+    const bumpNewCount = useEffectEvent((added) => setNewCount((value) => value + added));
+    /**
+     * Wejście wiadomości doklejonych na dole: własna wyrasta od pola pisania, cudza wchodzi od strony
+     * nadawcy. Pierwsze wejście i starsze doczytane na górze się nie ruszają - to nie są nowości.
+     */
+    const playEntered = useEffectEvent((viewport, added) => {
+        if (motion === 'none')
+            return;
+        const hosts = viewport.querySelectorAll(':scope > .kpt-chat-message-host');
+        const messageRows = rows.filter((row) => row.kind === 'message');
+        const count = Math.min(added, 5, hosts.length);
+        for (let k = 0; k < count; k++) {
+            const index = hosts.length - count + k;
+            const row = messageRows[index];
+            const host = hosts[index];
+            if (!row || !host || row.kind !== 'message')
+                continue;
+            playEnterMotion(host, motion, row.own ? 'below' : 'start', k * 40);
+        }
+    });
+    // Dosunięcie liczone po ułożeniu, nie po malowaniu - inaczej widać skok listy.
     useLayoutEffect(() => {
         if (!viewportRef.current)
             return;
+        const element = viewportRef.current;
         const count = messages.length;
-        const grew = count > lastCount.current;
+        const added = count - lastCount.current;
         const first = lastCount.current === 0;
+        const firstId = messages[0]?.id ?? null;
+        // Starsze wiadomości doklejone na górze (`onLoadMore`) - nie są nowe, a widok ma zostać w miejscu.
+        const prepended = !first && added > 0 && firstId !== firstIdRef.current;
         lastCount.current = count;
-        if (!grew)
+        firstIdRef.current = firstId;
+        if (prepended) {
+            // Przeglądarki z `overflow-anchor` kotwiczą same; Safari go nie ma i bez tego lista skacze.
+            if (!globalThis.CSS?.supports('overflow-anchor', 'auto'))
+                element.scrollTop += element.scrollHeight - prevScrollHeight.current;
+            prevScrollHeight.current = element.scrollHeight;
             return;
-        // Pierwsze wejście zawsze ląduje na dole — rozmowę czyta się od końca.
-        if (first || (autoScroll && pinned))
+        }
+        prevScrollHeight.current = element.scrollHeight;
+        if (added <= 0)
+            return;
+        if (!first)
+            playEntered(element, added);
+        // Pierwsze wejście zawsze ląduje na dole - rozmowę czyta się od końca.
+        if (first || (autoScrollOnNew() && pinnedNow()))
             scrollToBottom(first ? 'auto' : undefined);
+        // Tyle, ile naprawdę przyszło - paczka pięciu wiadomości to "5 nowych", nie "1".
         else
-            setNewCount((value) => value + 1);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+            bumpNewCount(added);
     }, [messages]);
-    // Po każdej zmianie listy wiersze stoją gdzie indziej — pigułkę trzeba przeliczyć, inaczej
+    // 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();
@@ -114,13 +159,19 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         setPinned(atBottom);
         if (atBottom)
             setNewCount(0);
-        // `onLoadMore` tylko na wejściu w strefę szczytu — przy każdym zdarzeniu scroll
+        // `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();
+        // Pomiary pigułki raz na klatkę, nie przy każdym zdarzeniu `scroll` (wymuszony układ).
+        if (dayFrame.current)
+            return;
+        dayFrame.current = requestAnimationFrame(() => {
+            dayFrame.current = 0;
+            syncDay();
+        });
     };
     const jumpToLatest = () => {
         setPinned(true);
@@ -128,8 +179,8 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         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.
+     * 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) {
@@ -147,7 +198,10 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
                 }).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) => {
+    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", 
+                        // Przewijana historia musi być osiągalna z klawiatury także bez fokusowalnych bąbli.
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- przewijany region musi być osiągalny z klawiatury (WCAG 2.1.1) - role="log" nie jest interaktywna, przewijanie tak
+                        tabIndex: 0, "aria-label": t('chat.history'), 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));
@@ -155,6 +209,6 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
                                 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] })] }));
+                                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, enterMotion: motion, 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("div", { "aria-live": "off", children: _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

@@ -6,13 +6,13 @@ Import: `import { KptChat } from '@konce-pt/react/chat';`
 
 ## DOM
     <div class="kpt-chat-host">
-      <p class="kpt-chat__offline" role="status">…</p>
+      <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 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>
@@ -20,31 +20,32 @@ Import: `import { KptChat } from '@konce-pt/react/chat';`
     </div>
 
 ## Props
-- `messages`: `KptChatMessage<T>[]` — **in chronological order**; the component does not sort
-- `currentUser`: string — the author id treated as "me"
+- `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
+- `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
+- `actions`: boolean - reply and react buttons on hover; `emptyLabel`: string
+- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) - passed to the bubbles
+- `enterMotion`: `'spring' | 'fade' | 'none'` (default from `KptMotionProvider`, else `spring`) - see "Motion"
+- `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`.
+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 —
+`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
@@ -57,6 +58,20 @@ re-render and resize) the component measures the separators, the unread divider
 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.
 
+## Motion
+`enterMotion` (`spring | fade | none`) on the chat, the bubble and the dock:
+- a new message at the bottom - your own grows from the composer side, someone else's comes in from
+  the sender's side, sharpening out of a blur; the first load and older messages loaded at the top
+  (`loadMore`) do not move - they are not news;
+- a new reaction pops in, a changed count rolls in like a drum, a new status icon turns into place
+  (only after the bubble's first render, so loaded history stays still);
+- the dock: `spring` grows the window out of the button (a capsule the size of the FAB opens into
+  the panel), `fade` slides and fades it as before.
+
+With no value it takes `enter` from `KptMotionProvider` (default `spring`); `enabled: false` and the system
+"reduce motion" setting always win. The typing dots are a state indicator - with motion off they
+pulse slower instead of stopping.
+
 ## Examples
     <KptChat messages={messages} currentUser="me" typing={typing} onRetry={resend} />
     <KptChat messages={messages} currentUser="me" offline unreadFrom="m-42" onLoadMore={loadOlder} />
@@ -76,3 +91,12 @@ pill `--kpt-color-primary-border` + `--kpt-elevation-2`.
 `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`.
+
+## Keyboard, counters and history
+The scrolling history (`role="log"`) is a Tab stop named "Conversation history" (`chat.history`), so the
+keyboard can scroll it even when no bubble holds a focusable element. The "new messages" button counts
+the messages that actually arrived (a batch of five gives "5"). The typing indicator sits inside the log
+but with `aria-live="off"`, so "X is typing..." is not announced like a message. Older messages loaded at
+the top keep the view on the same message, also in Safari (no `overflow-anchor`). The composer reports
+typing on the first keystroke and then at most every 3 s (`KPT_CHAT_TYPING_THROTTLE_MS`). A custom
+reaction option may carry `label` - its accessible name.

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

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithRef } from 'react';
-import type { KptChatReplyRef } from '@konce-pt/chat';
+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. */
+import { type KptSpeechColor } from '../speech/speech-button.tsx';
+/** Ładunek wysyłki. Kompozytor niczego nie wysyła - pakuje dane i oddaje aplikacji. */
 export interface KptChatComposerSubmit {
     text: string;
     files: readonly File[];
@@ -14,28 +15,40 @@ export interface KptChatComposerProps extends Omit<ComponentPropsWithRef<'div'>,
     /** 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. */
+    /** 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;
+    /**
+     * Mikrofon do dyktowania (Web Speech API) między polem a przyciskiem wysyłki. Bez wsparcia
+     * przeglądarki się nie pokazuje. Wysyłka w trakcie dyktowania zatwierdza to, co widać w polu.
+     */
+    speech?: boolean;
+    /** Język dyktowania (BCP 47); bez niego z `KptI18nProvider`. */
+    speechLang?: string;
+    /** Kolor "stop" i fali w trakcie nasłuchu; domyślnie kolor motywu. */
+    speechColor?: KptSpeechColor;
     /** 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. */
+    /**
+     * Sygnał "piszę" dla drugiej strony: przy pierwszym znaku, a w trakcie pisania najwyżej raz na
+     * `KPT_CHAT_TYPING_THROTTLE_MS` (3 s) - nie przy każdym znaku.
+     */
     onTyping?: () => void;
 }
 /**
- * Pole pisania wiadomości — autorosnące, z załącznikami i paskiem cytatu.
+ * 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ć
+ * 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;
+export declare function KptChatComposer({ value, defaultValue, onValueChange, placeholder, disabled, offline, allowAttachments, maxRows, enterToSend, speech, speechLang, speechColor, replyTo, defaultReplyTo, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }: Readonly<KptChatComposerProps>): import("react").JSX.Element;