@konce-pt/react 0.12.0 → 0.15.0

package/dist/card/llms.txt

@@ -1,43 +1,43 @@
 # KptCard (@konce-pt/react)
 
-A card — a surface with elevation (`elevated`) or a border (`outlined`). The card renders its own
+A card - a surface with elevation (`elevated`) or a border (`outlined`). The card renders its own
 body; the header and the footer are lifted out of the children and placed outside that body,
 exactly where the Angular template puts them, so the DOM tree matches node for node.
 Import: `import { KptCard } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-card" data-variant="elevated">
-      <div class="kpt-card__header">…</div>
-      <div class="kpt-card__body">…</div>
-      <div kptcardfooter="">…</div>
+      <div class="kpt-card__header">...</div>
+      <div class="kpt-card__body">...</div>
+      <div kptcardfooter="">...</div>
     </div>
 
 ## Props
 - `variant`: 'elevated' | 'outlined' (default 'elevated')
-- `header`: string — optional header text; use `<KptCard.Header>` for richer content
-- `headingLevel`: 1–6 — makes `header` a heading of that level (`role="heading"` + `aria-level`)
-- `headingLevel`: 1–6 — makes `header` a heading of that level (`role="heading"` + `aria-level`)
-- `flush`: boolean — a body with no padding (for rich layouts that manage their own sections)
+- `header`: string - optional header text; use `<KptCard.Header>` for richer content
+- `headingLevel`: 1-6 - makes `header` a heading of that level (`role="heading"` + `aria-level`)
+- `headingLevel`: 1-6 - makes `header` a heading of that level (`role="heading"` + `aria-level`)
+- `flush`: boolean - a body with no padding (for rich layouts that manage their own sections)
 - `className`, `ref` and every other `<div>` prop go to the card root
 
 ## Sub-components
-- `KptCard.Header` — lifted above the body, `.kpt-card__header`
-- `KptCard.Footer` — lifted below the body; carries the `kptcardfooter` attribute the shared
+- `KptCard.Header` - lifted above the body, `.kpt-card__header`
+- `KptCard.Footer` - lifted below the body; carries the `kptcardfooter` attribute the shared
   SCSS targets (attribute names in CSS selectors are case-insensitive in HTML, so one rule
   serves both ports)
-- `KptCard.Media` — an `<img>` on the full width, clipped to the radius; set `aspect-ratio`/`height`
-- `KptCard.Lead` — the header row (avatar + titles), with padding
-- `KptCard.Title`, `KptCard.Subtitle` — title/subtitle typography
-- `KptCard.Section` — a padded section (a column with gaps)
-- `KptCard.Tags` — a row of chips; `KptCard.Meta` — an icon+text row (rating/location)
-- `KptCard.Actions` — a row of buttons (equal widths)
+- `KptCard.Media` - an `<img>` on the full width, clipped to the radius; set `aspect-ratio`/`height`
+- `KptCard.Lead` - the header row (avatar + titles), with padding
+- `KptCard.Title`, `KptCard.Subtitle` - title/subtitle typography
+- `KptCard.Section` - a padded section (a column with gaps)
+- `KptCard.Tags` - a row of chips; `KptCard.Meta` - an icon+text row (rating/location)
+- `KptCard.Actions` - a row of buttons (equal widths)
 
 There is no `KptCard.Body`: the body belongs to the card itself, and `flush` removes its padding.
 An overlapping avatar is a class you apply to your own element: `className="kpt-card__avatar"`.
 
 ## Examples
     <KptCard header="Settings" variant="outlined">
-      <p>Content…</p>
+      <p>Content...</p>
       <KptCard.Footer><KptButton>Save</KptButton></KptCard.Footer>
     </KptCard>
 
@@ -50,7 +50,7 @@ An overlapping avatar is a class you apply to your own element: `className="kpt-
         </div>
       </KptCard.Lead>
       <KptCard.Media src="/photo.jpg" style={{ aspectRatio: '4 / 3' }} />
-      <KptCard.Section>Description…</KptCard.Section>
+      <KptCard.Section>Description...</KptCard.Section>
       <KptCard.Footer><KptButton variant="text" size="sm">LIKE</KptButton></KptCard.Footer>
     </KptCard>
 
@@ -58,7 +58,7 @@ An overlapping avatar is a class you apply to your own element: `className="kpt-
 `--kpt-card-{bg,fg,border,radius,padding,shadow}`.
 
 ## Accessibility
-The card is a plain container with no role of its own. `header` is styled text by default — set
-`headingLevel` (1–6) to make it a heading (`role="heading"` + `aria-level`) when the card should
+The card is a plain container with no role of its own. `header` is styled text by default - set
+`headingLevel` (1-6) to make it a heading (`role="heading"` + `aria-level`) when the card should
 appear in the page outline; leave it off for tiles that would only clutter it. Give media images a
 meaningful `alt`, or `alt=""` when decorative.

package/dist/carousel/carousel.d.ts

@@ -5,20 +5,20 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     activeIndex?: number;
     defaultActiveIndex?: number;
     onActiveIndexChange?: (index: number) => void;
-    /** Szablon slajdu — odpowiednik `<ng-template let-item let-i="index">` z Angulara. */
+    /** Szablon slajdu - odpowiednik `<ng-template let-item let-i="index">` z Angulara. */
     renderSlide: (item: T, index: number) => ReactNode;
-    /** Nazwa regionu dla czytników ekranu, np. „Nowości”; domyślnie `carousel.label`. */
+    /** Nazwa regionu dla czytników ekranu, np. "Nowości"; domyślnie `carousel.label`. */
     label?: string;
 }
 /**
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
  *
  * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
- * zostaje zamontowany — przewijanie nie gubi stanu treści.
+ * zostaje zamontowany - przewijanie nie gubi stanu treści.
  *
- * Semantyka według wzorca WAI-ARIA „carousel” (bez autoodtwarzania): region z
- * `aria-roledescription="karuzela"`, każdy slajd to grupa „Slajd 2 z 4”, a slajdy poza widokiem są
- * `inert` — `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
+ * Semantyka według wzorca WAI-ARIA "carousel" (bez autoodtwarzania): region z
+ * `aria-roledescription="karuzela"`, każdy slajd to grupa "Slajd 2 z 4", a slajdy poza widokiem są
+ * `inert` - `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
  * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example

package/dist/carousel/carousel.js

@@ -8,11 +8,11 @@ import { KptIcon } from "../icon/icon.js";
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
  *
  * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
- * zostaje zamontowany — przewijanie nie gubi stanu treści.
+ * zostaje zamontowany - przewijanie nie gubi stanu treści.
  *
- * Semantyka według wzorca WAI-ARIA „carousel” (bez autoodtwarzania): region z
- * `aria-roledescription="karuzela"`, każdy slajd to grupa „Slajd 2 z 4”, a slajdy poza widokiem są
- * `inert` — `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
+ * Semantyka według wzorca WAI-ARIA "carousel" (bez autoodtwarzania): region z
+ * `aria-roledescription="karuzela"`, każdy slajd to grupa "Slajd 2 z 4", a slajdy poza widokiem są
+ * `inert` - `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
  * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example

package/dist/carousel/llms.txt

@@ -10,15 +10,15 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
           <div class="kpt-carousel__track" aria-live="polite"
                style="transform:translateX(calc(var(--_kpt-carousel-dir, 1) * -100%))">
             <div class="kpt-carousel__slide" role="group" aria-roledescription="slide"
-                 aria-label="Slide 1 of 3" inert aria-hidden="true">…</div>
+                 aria-label="Slide 1 of 3" inert aria-hidden="true">...</div>
             <div class="kpt-carousel__slide" role="group" aria-roledescription="slide"
-                 aria-label="Slide 2 of 3">…</div>…
+                 aria-label="Slide 2 of 3">...</div>...
           </div>
         </div>
-        <button class="kpt-carousel__nav kpt-carousel__nav--prev" aria-label="Previous">…</button>
-        <button class="kpt-carousel__nav kpt-carousel__nav--next" aria-label="Next">…</button>
+        <button class="kpt-carousel__nav kpt-carousel__nav--prev" aria-label="Previous">...</button>
+        <button class="kpt-carousel__nav kpt-carousel__nav--next" aria-label="Next">...</button>
         <div class="kpt-carousel__dots">
-          <button class="kpt-carousel__dot is-active" aria-current="true" aria-label="Slide 2"></button>…
+          <button class="kpt-carousel__dot is-active" aria-current="true" aria-label="Slide 2"></button>...
         </div>
       </div>
     </div>
@@ -26,8 +26,8 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
 ## Props
 - `items`: `T[]`
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange`
-- `renderSlide(item, index)` — required
-- `label`: string — the region name; empty = `carousel.label`
+- `renderSlide(item, index)` - required
+- `label`: string - the region name; empty = `carousel.label`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The render prop replaces the template
@@ -36,7 +36,7 @@ carousel owns the layout and the navigation, the caller owns what a slide looks
 guessed about the item's shape, so the component stays generic in `T`.
 
 ## One transform, every slide mounted
-The track slides with a single `translateX` of a multiple of 100%, so every slide stays mounted —
+The track slides with a single `translateX` of a multiple of 100%, so every slide stays mounted -
 paging does not lose state inside a slide (a form, a playing video, a scroll position).
 
 ## Examples
@@ -51,9 +51,9 @@ The active dot `--kpt-color-primary`; the arrows `--kpt-color-surface` (80% via
 
 ## Accessibility
 The WAI-ARIA carousel pattern without autoplay. The root is `role="region"` with
-`aria-roledescription` from `carousel.roleCarousel` (“carousel”) and a name from `label` or
+`aria-roledescription` from `carousel.roleCarousel` ("carousel") and a name from `label` or
 `carousel.label`. Each slide is `role="group"` with `aria-roledescription` from `carousel.roleSlide`
-and a name from `carousel.slideOf` (“Slide 2 of 4”); slides outside the view are `inert` and
+and a name from `carousel.slideOf` ("Slide 2 of 4"); slides outside the view are `inert` and
 `aria-hidden`, so Tab never lands on an invisible link. The track is `aria-live="polite"`, so the
 slide that comes in is announced. The arrows use `aria-disabled` at the ends instead of `disabled`,
 so they keep the focus; the active dot carries `aria-current`, and every dot has a 24 px target

package/dist/charts/chart-legend.d.ts

@@ -11,13 +11,13 @@ export interface KptChartLegendProps {
     align?: KptAlign;
     pointStyle?: KptPointStyle;
     title?: KptLegendTitle;
-    /** Kliknięcie elementu — przełącz widoczność serii albo wycinka. */
+    /** Kliknięcie elementu - przełącz widoczność serii albo wycinka. */
     onToggle?: (key: string) => void;
-    /** Wejście i wyjście kursora — podświetl serię albo wyczyść podświetlenie. */
+    /** Wejście i wyjście kursora - podświetl serię albo wyczyść podświetlenie. */
     onHighlight?: (key: string | null) => void;
 }
 /**
- * Legenda wykresu — klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
+ * Legenda wykresu - klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
  * punktu. Element wewnętrzny biblioteki, nie część publicznego API.
  */
 export declare function KptChartLegend({ items, position, align, pointStyle, title, onToggle, onHighlight, }: Readonly<KptChartLegendProps>): import("react").JSX.Element;

package/dist/charts/chart-legend.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Legenda wykresu — klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
+ * Legenda wykresu - klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
  * punktu. Element wewnętrzny biblioteki, nie część publicznego API.
  */
 export function KptChartLegend({ items = [], position = 'bottom', align = 'center', pointStyle = 'circle', title, onToggle, onHighlight, }) {

package/dist/charts/chart-tooltip.d.ts

@@ -4,9 +4,9 @@ export interface KptChartTooltipRow {
     color: string;
 }
 export interface KptChartTooltipState {
-    /** Pozycja pozioma w % szerokości kontenera (0–100). */
+    /** Pozycja pozioma w % szerokości kontenera (0-100). */
     x: number;
-    /** Pozycja pionowa w % wysokości kontenera (0–100). */
+    /** Pozycja pionowa w % wysokości kontenera (0-100). */
     y: number;
     label: string;
     rows: KptChartTooltipRow[];
@@ -15,7 +15,7 @@ export interface KptChartTooltipProps {
     state: KptChartTooltipState | null;
 }
 /**
- * Dymek wykresu — pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
+ * Dymek wykresu - pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
  * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
  */
 export declare function KptChartTooltip({ state }: Readonly<KptChartTooltipProps>): import("react").JSX.Element | null;

package/dist/charts/chart-tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Dymek wykresu — pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
+ * Dymek wykresu - pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
  * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
  */
 export function KptChartTooltip({ state }) {

package/dist/charts/chart.d.ts

@@ -10,7 +10,7 @@ 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

package/dist/charts/chart.js

@@ -17,7 +17,7 @@ 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
@@ -26,14 +26,14 @@ function styleFor(align) {
 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ą.
+    // 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,
@@ -79,7 +79,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             next.add(key);
         setHidden(next);
     };
-    // ── Wykres liniowy ──
+    // -- Wykres liniowy --
     const lineVm = (() => {
         if (config.type !== 'line')
             return null;
@@ -132,7 +132,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                                         } })] }, idx)))] }, key));
                 })] }));
     })();
-    // ── Wykres słupkowy ──
+    // -- Wykres słupkowy --
     const barVm = (() => {
         if (config.type !== 'bar')
             return null;
@@ -167,7 +167,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                         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;
@@ -192,7 +192,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                 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;

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?, ariaLabel?, description? }` — 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
@@ -56,5 +56,5 @@ stays a plain object the caller owns, and nothing is written back into it.
 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
+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

@@ -2,34 +2,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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);
@@ -37,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
@@ -81,11 +84,30 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
     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.
+    // 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));
-    // Dosunięcie liczone po ułożeniu, nie po malowaniu — inaczej widać skok listy.
+    /**
+     * 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;
@@ -94,7 +116,7 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         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.
+        // 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;
         firstIdRef.current = firstId;
@@ -108,14 +130,16 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         prevScrollHeight.current = element.scrollHeight;
         if (added <= 0)
             return;
-        // Pierwsze wejście zawsze ląduje na dole — rozmowę czyta się od końca.
+        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”.
+        // Tyle, ile naprawdę przyszło - paczka pięciu wiadomości to "5 nowych", nie "1".
         else
             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();
@@ -135,7 +159,7 @@ 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)
@@ -155,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) {
@@ -176,7 +200,7 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
     };
     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
+                        // 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);
@@ -185,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));
+                                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] })] }));
 }