@konce-pt/react 0.11.2 → 0.14.0

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

@@ -1,21 +1,25 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, } from 'react';
+import { KPT_CHAT_TYPING_THROTTLE_MS } from '@konce-pt/chat';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 import { KptIconButton } from "../icon-button/icon-button.js";
+import { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 /**
- * 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 function KptChatComposer({ value, defaultValue = '', onValueChange, placeholder = '', disabled = false, offline = false, allowAttachments = false, maxRows = 6, enterToSend = true, replyTo, defaultReplyTo = null, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }) {
+export function KptChatComposer({ value, defaultValue = '', onValueChange, placeholder = '', disabled = false, offline = false, allowAttachments = false, maxRows = 6, enterToSend = true, speech = false, speechLang, speechColor, replyTo, defaultReplyTo = null, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [text, setText] = useControllableState({
         value,
@@ -30,7 +34,13 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
     const [files, setFiles] = useState([]);
     const fieldRef = useRef(null);
     const pickerRef = useRef(null);
-    const canSend = !disabled && (text.trim().length > 0 || files.length > 0);
+    // Dyktowanie: tekst zatwierdzony wchodzi przez `onChange` pola - rośnie ono i zgłasza "piszę"
+    // jak przy klawiaturze. Bez `speech` kontroler nie tworzy sesji.
+    const mic = useKptSpeechRecognition({ enabled: speech, target: fieldRef, lang: speechLang, disabled });
+    /** Kiedy ostatnio zgłoszono "piszę" - dławienie `onTyping`. */
+    const lastTyping = useRef(0);
+    // W trakcie dyktowania słowa mogą być jeszcze tylko tymczasowe - wysyłka i tak je zatwierdzi.
+    const canSend = !disabled && (text.trim().length > 0 || files.length > 0 || mic.listening);
     const sendLabel = offline ? t('chat.queue') : t('chat.send');
     /**
      * Wysokość liczona od treści. Zerowanie przed odczytem `scrollHeight` jest konieczne:
@@ -48,7 +58,14 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
     const submit = () => {
         if (!canSend)
             return;
-        onSend?.({ text: text.trim(), files, replyTo: quote });
+        // Tekst tymczasowy dyktowania widać w polu, ale nie ma go w stanie - `flush()` zatwierdza go
+        // synchronicznie przez zdarzenie `input`, więc DOM ma go od razu, a stan dopiero po renderze.
+        // Dlatego treść do wysyłki czytamy z pola: wysyła się dokładnie to, co widać.
+        mic.flush();
+        const current = (fieldRef.current?.value ?? text).trim();
+        if (!current && !files.length)
+            return;
+        onSend?.({ text: current, files, replyTo: quote });
         setText('');
         setFiles([]);
         setQuote(null);
@@ -76,6 +93,11 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
                                 } }), _jsx(KptIconButton, { size: "sm", disabled: disabled, "aria-label": t('chat.attach'), onClick: () => pickerRef.current?.click(), children: _jsx(KptIcon, { name: "paperclip" }) })] })) : null, _jsx("textarea", { ref: fieldRef, className: "kpt-chat-composer__field", rows: 1, style: { '--_max-rows': maxRows }, value: text, disabled: disabled, placeholder: placeholder || t('chat.placeholder'), "aria-label": placeholder || t('chat.placeholder'), onChange: (event) => {
                             setText(event.currentTarget.value);
                             grow(event.currentTarget);
-                            onTyping?.();
-                        }, onKeyDown: onKeyDown }), _jsx(KptIconButton, { variant: "filled", disabled: !canSend, "aria-label": sendLabel, onClick: submit, children: _jsx(KptIcon, { name: offline ? 'clock' : 'send' }) })] })] }));
+                            // "Piszę" przy pierwszym znaku i potem najwyżej raz na KPT_CHAT_TYPING_THROTTLE_MS - nie przy każdym.
+                            const now = Date.now();
+                            if (now - lastTyping.current >= KPT_CHAT_TYPING_THROTTLE_MS) {
+                                lastTyping.current = now;
+                                onTyping?.();
+                            }
+                        }, onKeyDown: onKeyDown }), speech ? (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: disabled, hostProps: { className: 'kpt-chat-composer__speech' } })) : null, _jsx(KptIconButton, { variant: "filled", disabled: !canSend, "aria-label": sendLabel, onClick: submit, children: _jsx(KptIcon, { name: offline ? 'clock' : 'send' }) })] })] }));
 }

package/dist/chat-composer/llms.txt

@@ -1,12 +1,12 @@
 # KptChatComposer (@konce-pt/react/chat)
 
-The message field — auto-growing, with attachments and a quote strip.
+The message field - auto-growing, with attachments and a quote strip.
 Import: `import { KptChatComposer } from '@konce-pt/react/chat';`
 
 ## DOM
     <div class="kpt-chat-composer-host">
-      <div class="kpt-chat-composer__reply">…the quoted message…</div>
-      <ul class="kpt-chat-composer__files">…picked files…</ul>
+      <div class="kpt-chat-composer__reply">...the quoted message...</div>
+      <ul class="kpt-chat-composer__files">...picked files...</ul>
       <div class="kpt-chat-composer">
         <input type="file" class="kpt-chat-composer__picker" hidden />
         <!-- KptIconButton: attach -->
@@ -16,26 +16,26 @@ Import: `import { KptChatComposer } from '@konce-pt/react/chat';`
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the text
-- `replyTo` / `defaultReplyTo` / `onReplyToChange` — `KptChatReplyRef | null`
+- `value` / `defaultValue` / `onValueChange` - the text
+- `replyTo` / `defaultReplyTo` / `onReplyToChange` - `KptChatReplyRef | null`
 - `placeholder`, `disabled`, `offline`, `allowAttachments`
 - `maxRows`: number (default 6), `enterToSend`: boolean (default true)
-- `onSend(payload)` — `{ text, files, replyTo }`; the text is trimmed
-- `onTyping()` — every keystroke, for the "is typing" signal
+- `onSend(payload)` - `{ text, files, replyTo }`; the text is trimmed
+- `onTyping()` - every keystroke, for the "is typing" signal
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Enter sends, Shift+Enter breaks the line
-`enterToSend={false}` swaps the two. A keystroke arriving mid-composition (an IME) never sends —
+`enterToSend={false}` swaps the two. A keystroke arriving mid-composition (an IME) never sends -
 `isComposing` is checked, otherwise picking a candidate would fire the message.
 
 ## The height comes from the content
 The field grows with the text and then scrolls. The script sets `height` to `scrollHeight`, having
-zeroed it first — without that reset the field can only grow, because `scrollHeight` never drops
+zeroed it first - without that reset the field can only grow, because `scrollHeight` never drops
 below the height already set. The ceiling is CSS: `--_max-rows`.
 
 ## Offline does not lock the field
 The button changes its label to queueing and the payload still reaches `onSend`. What to do with a
-queue is the application's decision — the component has no transport to hold it back with.
+queue is the application's decision - the component has no transport to hold it back with.
 
 ## Examples
     <KptChatComposer allowAttachments onSend={send} />
@@ -51,6 +51,15 @@ The field `--kpt-color-surface-variant` + `--kpt-radius-lg`, the top edge `--kpt
 the quote strip `--kpt-color-primary`.
 
 ## Accessibility
-The textarea carries an `aria-label` equal to the placeholder — a field without a label is
+The textarea carries an `aria-label` equal to the placeholder - a field without a label is
 invisible to a screen reader. Both icon buttons are labelled from the dictionary. It is not a
 form control: no `touched`/`invalid` state, and the value disappears on send.
+
+## Dictation
+`speech`: boolean = false puts a microphone between the field and the send button (`KptSpeechButton`);
+`speechLang` sets the language and `speechColor` the listening colour (theme colour by default). Words appear in the field live. Enter or "Send" during dictation
+commits what is visible (`flush()`) and stops listening, so exactly the visible text is sent - the send
+button is enabled while listening even if only interim words exist. Final text comes through the
+field's `onChange`: the field grows and `onTyping` fires as with a keyboard.
+
+    <KptChatComposer speech onSend={({ text }) => askAgent(text)} />

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import { type KptEnterMotion } from '@konce-pt/motion';
 export type KptChatDockPosition = 'bottom-end' | 'bottom-start';
 export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     open?: boolean;
@@ -15,17 +16,23 @@ export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'ch
     width?: string;
     /**
      * Odsunięcie od rogu ekranu (dowolna długość CSS), wspólne dla obu osi.
-     * Domyślnie `--kpt-space-6`. Przydaje się, gdy w tym samym rogu stoi już inny widget —
+     * Domyślnie `--kpt-space-6`. Przydaje się, gdy w tym samym rogu stoi już inny widget -
      * `KptScrollTop` przykleja się dokładnie tam samo i bez tego oba się nakładają.
      */
     offset?: string;
     children?: ReactNode;
+    /**
+     * Ruch otwarcia: `spring` - okno wyrasta z przycisku (kapsuła rośnie w panel na sprężynie),
+     * `fade` - panel wjeżdża i 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;
 }
 /**
- * Pływający czat w rogu ekranu — FAB z licznikiem nieprzeczytanych i panel z rozmową.
+ * Pływający czat w rogu ekranu - FAB z licznikiem nieprzeczytanych i panel z rozmową.
  *
  * Zawartość panelu jest dzieckiem, więc dock nie wie nic o wiadomościach: wkłada się do niego
- * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` — dock go używa,
+ * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` - dock go używa,
  * nie zastępuje.
  *
  * Poniżej `--kpt-breakpoint-sm` panel wchodzi na pełny ekran: 22,5 rem szerokości na telefonie
@@ -37,4 +44,4 @@ export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'ch
  *   <KptChatComposer onSend={send} />
  * </KptChatDock>
  */
-export declare function KptChatDock({ open, defaultOpen, onOpenChange, position, unread, header, icon, width, offset, locale, dictionary, className, children, ...rest }: Readonly<KptChatDockProps>): import("react").JSX.Element;
+export declare function KptChatDock({ open, defaultOpen, onOpenChange, position, unread, header, icon, width, offset, enterMotion, locale, dictionary, className, children, ...rest }: Readonly<KptChatDockProps>): import("react").JSX.Element;

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

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

package/dist/chat-dock/llms.txt

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

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

@@ -1,5 +1,5 @@
 /*
- * @konce-pt/react/chat — rozmowa. Osobny subpath, bo dock i logika listy są ciężkie
+ * @konce-pt/react/chat - rozmowa. Osobny subpath, bo dock i logika listy są ciężkie
  * względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
  */
 export { KptChat } from "../chat/chat.js";

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

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptEnterMotion } from '@konce-pt/motion';
 import type { KptChatAttachment, KptChatAuthor, KptChatGroupPosition, KptChatMessage as KptChatMessageModel, KptChatReaction, KptChatReactionOption, KptChatReplyRef, KptChatStatus } from '@konce-pt/chat';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
-/** Wygląd bąbla. `system` nie rysuje bąbla w ogóle — to komunikat, nie wypowiedź. */
+/** Wygląd bąbla. `system` nie rysuje bąbla w ogóle - to komunikat, nie wypowiedź. */
 export type KptChatMessageVariant = 'neutral' | 'primary' | 'solid' | 'ghost' | 'system';
 export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     /** Cała wiadomość naraz. Pojedyncze propsy poniżej mają nad nią priorytet. */
@@ -29,15 +30,21 @@ export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>,
     reactionOptions?: readonly KptChatReactionOption[];
     onRetry?: () => void;
     onReply?: () => void;
-    /** Wybrana reakcja (emoji). Biblioteka niczego nie dopisuje do modelu — robi to aplikacja. */
+    /** Wybrana reakcja (emoji). Biblioteka niczego nie dopisuje do modelu - robi to aplikacja. */
     onReact?: (emoji: string) => void;
-    /** Kliknięcie w cytat — aplikacja może przewinąć listę do oryginału. */
+    /** Kliknięcie w cytat - aplikacja może przewinąć listę do oryginału. */
     onQuoted?: (quote: KptChatReplyRef) => void;
     /** Treść bąbla. Wygrywa z `text`, więc bąbel przyjmuje cokolwiek. */
     children?: ReactNode;
+    /**
+     * Ruch pojawiania się (reakcja, zmiana statusu): `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;
 }
 /**
- * Pojedyncza wiadomość czatu — bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
+ * Pojedyncza wiadomość czatu - bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
  * awatarem, cytatem, załącznikami i reakcjami.
  *
  * Działa na dwa sposoby: dostaje gotowy obiekt przez `message` (tak używa go `KptChat`)
@@ -50,4 +57,4 @@ export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>,
  * <KptChatMessage message={msg} align="end" position="last" />
  * <KptChatMessage align="end" status="failed" onRetry={resend}>Nie poszło</KptChatMessage>
  */
-export declare function KptChatMessage({ message, author, text, time, attachments, reactions, replyTo, status, align, variant, position, system, showAuthor, showAvatar, showMeta, tail, actions, reactionOptions, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }: Readonly<KptChatMessageProps>): import("react").JSX.Element;
+export declare function KptChatMessage({ message, author, text, time, attachments, reactions, replyTo, status, align, variant, position, system, showAuthor, showAvatar, showMeta, tail, actions, reactionOptions, enterMotion, ref, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }: Readonly<KptChatMessageProps>): import("react").JSX.Element;

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

@@ -1,11 +1,15 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { resolveEnterMotion } from '@konce-pt/motion';
 import { KPT_CHAT_REACTIONS, canRetry, toDate } from '@konce-pt/chat';
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptAvatar } from "../avatar/avatar.js";
 import { KptIcon } from "../icon/icon.js";
 import { KptIconButton } from "../icon-button/icon-button.js";
+import { useKptMotion } from "../motion/motion-context.js";
+import { composeRefs } from "../internal/compose-refs.js";
 /** Ikona statusu wysyłki. `read` używa tej samej ikony co `delivered`, różni je kolor. */
 const STATUS_ICONS = {
     sending: 'clock',
@@ -15,7 +19,7 @@ const STATUS_ICONS = {
     failed: 'alert-triangle',
 };
 /**
- * Pojedyncza wiadomość czatu — bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
+ * Pojedyncza wiadomość czatu - bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
  * awatarem, cytatem, załącznikami i reakcjami.
  *
  * Działa na dwa sposoby: dostaje gotowy obiekt przez `message` (tak używa go `KptChat`)
@@ -28,14 +32,21 @@ const STATUS_ICONS = {
  * <KptChatMessage message={msg} align="end" position="last" />
  * <KptChatMessage align="end" status="failed" onRetry={resend}>Nie poszło</KptChatMessage>
  */
-export function KptChatMessage({ message = null, author = null, text = null, time = null, attachments = null, reactions = null, replyTo = null, status = null, align = 'start', variant = null, position = 'single', system = false, showAuthor = false, showAvatar = false, showMeta = true, tail = true, actions = false, reactionOptions = KPT_CHAT_REACTIONS, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }) {
+export function KptChatMessage({ message = null, author = null, text = null, time = null, attachments = null, reactions = null, replyTo = null, status = null, align = 'start', variant = null, position = 'single', system = false, showAuthor = false, showAvatar = false, showMeta = true, tail = true, actions = false, reactionOptions = KPT_CHAT_REACTIONS, enterMotion, ref, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const rowRef = useRef(null);
     /** Czy wybierak reakcji jest otwarty. */
     const [pickerOpen, setPickerOpen] = useState(false);
+    const motion = resolveEnterMotion(enterMotion, useKptMotion());
+    const hostRef = useRef(null);
+    // Reakcje i status wskakują dopiero po pierwszym renderze - wczytana historia się nie rusza.
+    // Klasa idzie wprost na element: osobny stan dałby drugi przebieg renderu tylko po to.
+    useEffect(() => {
+        hostRef.current?.classList.add('is-live');
+    }, []);
     // Kliknięcie obok zamyka wybierak. Sam `onBlur` nie wystarcza: w Safari kliknięcie w przycisk
     // nie przenosi na niego fokusu, więc wybierak zostawałby otwarty na zawsze. Faza przechwytywania
-    // i `pointerdown` (nie `click`) — własne `onClick` opcji zdąży się wykonać przed zamknięciem.
+    // i `pointerdown` (nie `click`) - własne `onClick` opcji zdąży się wykonać przed zamknięciem.
     useEffect(() => {
         if (!pickerOpen)
             return;
@@ -75,7 +86,7 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
     const statusIcon = resolvedStatus ? STATUS_ICONS[resolvedStatus] : null;
     const retryable = canRetry(resolvedStatus);
     /*
-     * Etykieta dla czytnika ekranu. Bez niej z bąbla płynie sama treść — bez nadawcy,
+     * Etykieta dla czytnika ekranu. Bez niej z bąbla płynie sama treść - bez nadawcy,
      * godziny i informacji, że wiadomość się nie wysłała.
      */
     const ariaLabel = isSystem
@@ -84,9 +95,9 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
             .filter(Boolean)
             .join(', ');
     if (isSystem) {
-        return (_jsx("div", { className: cn('kpt-chat-message-host', className), role: "note", "aria-label": ariaLabel, ...rest, children: _jsx("p", { className: "kpt-chat-message__system", children: resolvedText }) }));
+        return (_jsx("div", { ref: composeRefs(hostRef, ref), className: cn('kpt-chat-message-host', className), role: "note", "aria-label": ariaLabel, "data-motion": motion, ...rest, children: _jsx("p", { className: "kpt-chat-message__system", children: resolvedText }) }));
     }
-    return (_jsx("div", { className: cn('kpt-chat-message-host', className), role: "article", "aria-label": ariaLabel, ...rest, children: _jsxs("div", { ref: rowRef, className: "kpt-chat-message__row", "data-align": align, children: [align === 'start' ? (_jsx("span", { className: "kpt-chat-message__avatar", "aria-hidden": "true", children: showAvatar ? (_jsx(KptAvatar, { size: "sm", src: resolvedAuthor?.avatar ?? null, name: resolvedAuthor?.name ?? '' })) : null })) : null, _jsxs("div", { className: "kpt-chat-message__stack", children: [showAuthor && resolvedAuthor ? (_jsx("span", { className: "kpt-chat-message__author", children: resolvedAuthor.name })) : null, _jsxs("div", { className: "kpt-chat-message__bubble", "data-variant": resolvedVariant, "data-align": align, "data-position": position, "data-status": resolvedStatus ?? undefined, "data-tail": hasTail ? '' : undefined, children: [resolvedReplyTo ? (_jsxs("button", { type: "button", className: "kpt-chat-message__quote", onClick: () => onQuoted?.(resolvedReplyTo), children: [_jsx("span", { className: "kpt-chat-message__quote-author", children: resolvedReplyTo.author }), _jsx("span", { className: "kpt-chat-message__quote-text", children: resolvedReplyTo.excerpt })] })) : null, resolvedText ? _jsx("p", { className: "kpt-chat-message__text", children: resolvedText }) : null, children, resolvedAttachments.length ? (_jsx("ul", { className: "kpt-chat-message__files", children: resolvedAttachments.map((file) => (_jsxs("li", { className: "kpt-chat-message__file", children: [file.thumbnail ? (_jsx("img", { className: "kpt-chat-message__file-thumb", src: file.thumbnail, alt: file.name })) : (_jsx(KptIcon, { name: "paperclip" })), _jsx("a", { className: "kpt-chat-message__file-name", href: file.url, download: file.url ? file.name : undefined, children: file.name }), file.size ? (_jsx("span", { className: "kpt-chat-message__file-size", children: fileSize(file.size) })) : null] }, file.id))) })) : null, showMeta ? (_jsxs("span", { className: "kpt-chat-message__meta", children: [timeLabel ? (_jsx("time", { className: "kpt-chat-message__time", dateTime: sentAt?.toISOString(), children: timeLabel })) : null, statusIcon ? (_jsx(KptIcon, { className: "kpt-chat-message__status", name: statusIcon })) : null] })) : null, resolvedReactions.length ? (_jsx("ul", { className: "kpt-chat-message__reactions", "data-align": align, children: resolvedReactions.map((reaction) => (_jsxs("li", { className: "kpt-chat-message__reaction", "data-reacted": reaction.reacted ? '' : undefined, children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx("span", { className: "kpt-chat-message__reaction-count", children: reaction.count })] }, reaction.emoji))) })) : null] })] }), _jsx("span", { className: "kpt-chat-message__actions", "data-open": pickerOpen ? '' : undefined, children: retryable ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-chat-message__retry' }, size: "sm", "aria-label": t('chat.retry'), onClick: () => onRetry?.(), children: _jsx(KptIcon, { name: "refresh" }) })) : actions ? (_jsxs(_Fragment, { children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.replyTo', { author: resolvedAuthor?.name ?? '' }), onClick: () => onReply?.(), children: _jsx(KptIcon, { name: "corner-up-left" }) }), _jsxs("span", { className: "kpt-chat-message__react", onKeyDown: (event) => {
+    return (_jsx("div", { ref: composeRefs(hostRef, ref), className: cn('kpt-chat-message-host', className), role: "article", "aria-label": ariaLabel, "data-motion": motion, ...rest, children: _jsxs("div", { ref: rowRef, className: "kpt-chat-message__row", "data-align": align, children: [align === 'start' ? (_jsx("span", { className: "kpt-chat-message__avatar", "aria-hidden": "true", children: showAvatar ? (_jsx(KptAvatar, { size: "sm", src: resolvedAuthor?.avatar ?? null, name: resolvedAuthor?.name ?? '' })) : null })) : null, _jsxs("div", { className: "kpt-chat-message__stack", children: [showAuthor && resolvedAuthor ? (_jsx("span", { className: "kpt-chat-message__author", children: resolvedAuthor.name })) : null, _jsxs("div", { className: "kpt-chat-message__bubble", "data-variant": resolvedVariant, "data-align": align, "data-position": position, "data-status": resolvedStatus ?? undefined, "data-tail": hasTail ? '' : undefined, children: [resolvedReplyTo ? (_jsxs("button", { type: "button", className: "kpt-chat-message__quote", onClick: () => onQuoted?.(resolvedReplyTo), children: [_jsx("span", { className: "kpt-chat-message__quote-author", children: resolvedReplyTo.author }), _jsx("span", { className: "kpt-chat-message__quote-text", children: resolvedReplyTo.excerpt })] })) : null, resolvedText ? _jsx("p", { className: "kpt-chat-message__text", children: resolvedText }) : null, children, resolvedAttachments.length ? (_jsx("ul", { className: "kpt-chat-message__files", children: resolvedAttachments.map((file) => (_jsxs("li", { className: "kpt-chat-message__file", children: [file.thumbnail ? (_jsx("img", { className: "kpt-chat-message__file-thumb", src: file.thumbnail, alt: file.name })) : (_jsx(KptIcon, { name: "paperclip" })), _jsx("a", { className: "kpt-chat-message__file-name", href: file.url, download: file.url ? file.name : undefined, children: file.name }), file.size ? (_jsx("span", { className: "kpt-chat-message__file-size", children: fileSize(file.size) })) : null] }, file.id))) })) : null, showMeta ? (_jsxs("span", { className: "kpt-chat-message__meta", children: [timeLabel ? (_jsx("time", { className: "kpt-chat-message__time", dateTime: sentAt?.toISOString(), children: timeLabel })) : null, statusIcon ? (_jsx(KptIcon, { className: "kpt-chat-message__status", name: statusIcon }, statusIcon)) : null] })) : null, resolvedReactions.length ? (_jsx("ul", { className: "kpt-chat-message__reactions", "data-align": align, children: resolvedReactions.map((reaction) => (_jsxs("li", { className: "kpt-chat-message__reaction", "data-reacted": reaction.reacted ? '' : undefined, children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx("span", { className: "kpt-chat-message__reaction-count", children: _jsx("span", { className: "kpt-chat-message__reaction-digit", children: reaction.count }, reaction.count) })] }, reaction.emoji))) })) : null] })] }), _jsx("span", { className: "kpt-chat-message__actions", "data-open": pickerOpen ? '' : undefined, children: retryable ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-chat-message__retry' }, size: "sm", "aria-label": t('chat.retry'), onClick: () => onRetry?.(), children: _jsx(KptIcon, { name: "refresh" }) })) : actions ? (_jsxs(_Fragment, { children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.replyTo', { author: resolvedAuthor?.name ?? '' }), onClick: () => onReply?.(), children: _jsx(KptIcon, { name: "corner-up-left" }) }), _jsxs("span", { className: "kpt-chat-message__react", onKeyDown: (event) => {
                                     if (event.key === 'Escape')
                                         setPickerOpen(false);
                                 }, onBlur: (event) => {
@@ -94,7 +105,7 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
                                     if (!event.currentTarget.contains(event.relatedTarget))
                                         setPickerOpen(false);
                                 }, children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.react'), "aria-expanded": pickerOpen, onClick: () => setPickerOpen((open) => !open), children: _jsx(KptIcon, { name: "mood-smile" }) }), pickerOpen ? (_jsx("span", { className: "kpt-chat-message__picker", role: "group", "aria-label": t('chat.react'), children: reactionOptions.map((option) => {
-                                            const label = t('chat.react' + option.kind[0].toUpperCase() + option.kind.slice(1));
+                                            const label = option.label ?? t('chat.react' + option.kind[0].toUpperCase() + option.kind.slice(1));
                                             const reacted = resolvedReactions.some((item) => item.emoji === option.emoji && item.reacted);
                                             return (_jsx("button", { type: "button", className: "kpt-chat-message__pick", "aria-label": label, title: label, "aria-pressed": reacted, onClick: () => {
                                                     onReact?.(option.emoji);
@@ -102,7 +113,7 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
                                                 }, children: _jsx("span", { "aria-hidden": "true", children: option.emoji }) }, option.kind));
                                         }) })) : null] })] })) : null })] }) }));
 }
-/** Rozmiar załącznika w kB/MB — surowe bajty nic nie mówią przy pliku obok nazwy. */
+/** Rozmiar załącznika w kB/MB - surowe bajty nic nie mówią przy pliku obok nazwy. */
 function fileSize(bytes) {
     if (bytes < 1024)
         return bytes + ' B';

package/dist/chat-message/llms.txt

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

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

@@ -8,13 +8,13 @@ export interface KptChatTypingProps extends Omit<ComponentPropsWithRef<'div'>, '
     label?: string;
 }
 /**
- * Wskaźnik pisania — trzy kropki i informacja, kto pisze.
+ * Wskaźnik pisania - trzy kropki i informacja, kto pisze.
  *
  * Pusta lista autorów nie renderuje niczego, więc można go trzymać w drzewie na stałe
  * i sterować wyłącznie danymi.
  *
  * Element jest `role="status"` z `aria-live="polite"`: czytnik ogłasza wejście i zniknięcie
- * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi —
+ * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi -
  * informację niesie etykieta.
  *
  * @example

package/dist/chat-typing/chat-typing.js

@@ -1,14 +1,15 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 /**
- * Wskaźnik pisania — trzy kropki i informacja, kto pisze.
+ * Wskaźnik pisania - trzy kropki i informacja, kto pisze.
  *
  * Pusta lista autorów nie renderuje niczego, więc można go trzymać w drzewie na stałe
  * i sterować wyłącznie danymi.
  *
  * Element jest `role="status"` z `aria-live="polite"`: czytnik ogłasza wejście i zniknięcie
- * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi —
+ * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi -
  * informację niesie etykieta.
  *
  * @example
@@ -19,7 +20,7 @@ export function KptChatTyping({ authors = [], label = '', locale, dictionary, cl
     if (authors.length === 0 && !label)
         return null;
     /*
-     * Jedna osoba jest wymieniona z imienia, przy większej liczbie liczy się głowy —
+     * Jedna osoba jest wymieniona z imienia, przy większej liczbie liczy się głowy -
      * lista nazwisk rozjeżdża wiersz i i tak nikt jej nie czyta.
      */
     const text = label ||