@konce-pt/react 0.12.0 → 0.14.0

package/dist/data-table/export-csv.d.ts

@@ -1,7 +1,7 @@
 import type { KptColumn } from './data-table-types.ts';
 /**
- * Zrzuca wiersze do pliku CSV (separator `;`, końce wierszy CRLF, BOM — patrz `buildCsv`).
- * Tabela woła to samo z przycisku „Eksport CSV"; funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
- * — eksport z kodu aplikacji wywołuje się właśnie tak.
+ * Zrzuca wiersze do pliku CSV (separator `;`, końce wierszy CRLF, BOM - patrz `buildCsv`).
+ * Tabela woła to samo z przycisku "Eksport CSV"; funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
+ * - eksport z kodu aplikacji wywołuje się właśnie tak.
  */
 export declare function exportTableCsv(columns: readonly KptColumn[], rows: readonly Record<string, unknown>[], filename?: string): void;

package/dist/data-table/export-csv.js

@@ -1,8 +1,8 @@
 import { buildCsv } from '@konce-pt/table';
 /**
- * Zrzuca wiersze do pliku CSV (separator `;`, końce wierszy CRLF, BOM — patrz `buildCsv`).
- * Tabela woła to samo z przycisku „Eksport CSV"; funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
- * — eksport z kodu aplikacji wywołuje się właśnie tak.
+ * Zrzuca wiersze do pliku CSV (separator `;`, końce wierszy CRLF, BOM - patrz `buildCsv`).
+ * Tabela woła to samo z przycisku "Eksport CSV"; funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
+ * - eksport z kodu aplikacji wywołuje się właśnie tak.
  */
 export function exportTableCsv(columns, rows, filename = 'export.csv') {
     const blob = new Blob([buildCsv(columns, rows)], { type: 'text/csv;charset=utf-8;' });
@@ -11,7 +11,7 @@ export function exportTableCsv(columns, rows, filename = 'export.csv') {
     link.href = url;
     link.download = filename;
     link.click();
-    // Część przeglądarek zaczyna pobieranie asynchronicznie — natychmiastowe unieważnienie
+    // Część przeglądarek zaczyna pobieranie asynchronicznie - natychmiastowe unieważnienie
     // adresu potrafi je przerwać.
     setTimeout(() => URL.revokeObjectURL(url), 0);
 }

package/dist/data-table/llms.txt

@@ -1,94 +1,127 @@
-# KptDataTable (@konce-pt/react)
-
-The flagship data table: columns from configuration, sorting, a global filter and per-column
-filters, pagination, selection, frozen and reorderable columns, inline editing, a summary row,
-expandable rows, virtual scrolling and CSV export.
-Import: `import { KptDataTable, type KptColumn } from '@konce-pt/react';`
-
-## The column model (KptColumn)
-`{ field, header, sortable?, align?, width?, frozen?, filter?, edit?, summary? }`
-`frozen` columns (leading, adjacent) stick during horizontal scrolling. Their offsets come from `width`:
-`px`/`rem`/`em` are computed up front, other units (`%`, `ch`) and a missing width are measured from the
-rendered header.
-
-- `filter`: `KptColumnFilter` from `@konce-pt/table` — `text`, `number`, `select` (with `multiple`),
-  `numberRange`, `slider`, `dateRange`. Any column with a `filter` renders the filter row.
-- `edit`: `{ type: 'text' | 'number' | 'date' | 'select' | 'multiselect', options?, placeholder?, min?, max?, step? }`
-- `summary`: `{ fn: 'sum' | 'avg' | 'min' | 'max' | 'count' | ((rows) => unknown), format? }`
-
-## Props
-- `columns` (required), `data`
-- `filterable`, `filterRowPosition` (`'bottom'` default), `pageSize` (0 = no pagination),
-  `pageSizeOptions`, `selectable` (`'none' | 'single' | 'multiple'`), `loading`, `emptyMessage`,
-  `rowKey`, `scrollHeight`, `virtualScroll`, `rowHeight` (41), `reorderable`, `exportable`,
-  `exportFilename`, `lazy`, `totalRecords`, `expandable`, `multiExpand`, `summaryLabel`,
-  `summaryValues`
-- `ariaLabel` (the table's name without a visible caption), `caption` (a visible `<caption>`),
-  `clickableRows` (rows focusable and activated with Enter/Space; on by default when `onRowClick` is set)
-- Controllable state: `selection`, `expandedRows`, `hiddenFields` (each with `default*` and
-  `on*Change`)
-- Events: `onRowClick`, `onLazyLoad` (also once on start, for the first page), `onCellEdit`
-
-## Keyboard
-- A sortable header is a button: Tab to it, Enter/Space cycles asc → desc → none; `aria-sort` is on the `<th>`.
-- With `reorderable` the grip is a button: `←`/`→` move the column by one place; the new position is
-  announced and focus follows the grip.
-- An editable cell is reachable with Tab and opens with Enter; its name stays its value and
-  "Edit: {column}" is its description.
-- `selectable="single"` renders radios (one group per table).
-
-## Templates are render props
-- `cells`: `Record<field, (row, value) => ReactNode>` — the equivalent of `kptCell`
-- `cellEditors`: `Record<field, (context) => ReactNode>` — the equivalent of `kptCellEdit`;
-  the context carries `value`, `row`, `commit(value)`, `cancel()`
-- `renderRowDetail(row)` — the expanded row's content
-- `paginatorActions` — the slot to the left of the paginator (a column-toggle button, say)
-
-## The logic lives in a package
-Filter matching (the global filter and the text filter ignore case and diacritics: "lodz" finds
-"Łódź"), sorting (`Intl.Collator` for the active language, natural numbers, empty cells last),
-aggregations, the CSV file (`;`, CRLF, BOM) and cell-to-text come from `@konce-pt/table` — pure
-functions with `node --test` coverage, shared with the Angular port. What stays here is the state
-and the markup.
-
-## Export as a function, not a method
-Angular exposes `exportCsv()` on the component instance; React has no equivalent, so the same job is
-`exportTableCsv(columns, rows, filename)`, exported from the package. The `exportable` toolbar
-button calls exactly that, over the currently visible columns and the filtered, sorted rows.
-
-## Inline editing never commits on blur of the control
-Controls with a panel (`date`, `select`, `multiselect`) open immediately and commit when the panel
-closes; the rest commit when focus leaves **the whole editor**. `KptInputNumber` has focusable
-`+`/`-` buttons beside the field, so reacting to the control's own blur would close the editor on
-every arrow click. `cellEdit` fires only when the value actually changed (arrays are compared by
-content).
-
-## The summary covers the filtered set, not the page
-Aggregations run over every row after filtering — page 1 and all the rest — so paging does not move
-them while the search box does. With `lazy` the table only holds one page, so it computes nothing:
-`summaryValues` is then the only source.
-
-## Examples
-    <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
-
-    <KptDataTable
-      columns={cols}
-      data={rows}
-      rowKey="id"
-      cells={{ status: (row, value) => <span className="badge">{String(value)}</span> }}
-      onCellEdit={(event) => save(event.updatedRow)}
-    />
-
-## i18n
-The toolbar, the states and the filter labels come from the `dataTable` namespace (`search`,
-`exportCsv`, `loading`, `empty`, `total`, `selectAll`, `selectRow`, `expandRow`, `editCell`,
-`filter` / `filterMin` / `filterMax` with `{column}`, `all`, `min`, `max`, `dateRange`, `moveColumn`,
-`columnMoved`).
-
-## Tokens
-`--kpt-table-{bg,fg,border,radius,header-bg,header-fg,row-hover,row-selected,cell-padding}`,
-the expanded row `--kpt-table-detail-bg`, the summary row `--kpt-table-summary-bg`.
-
-## Not ported yet
-Grouped columns (absent in the Angular port too). A ready column-toggle UI is not part of either
-port — `hiddenFields` is the hook to build one on.
+# KptDataTable (@konce-pt/react)
+
+The flagship data table: columns from configuration, sorting, a global filter and per-column
+filters, pagination, selection, frozen and reorderable columns, inline editing, a summary row,
+expandable rows, virtual scrolling and CSV export.
+Import: `import { KptDataTable, type KptColumn } from '@konce-pt/react';`
+
+## The column model (KptColumn)
+`{ field, header, sortable?, align?, width?, frozen?, filter?, edit?, summary? }`
+`frozen` columns (leading, adjacent) stick during horizontal scrolling. Their offsets come from `width`:
+`px`/`rem`/`em` are computed up front, other units (`%`, `ch`) and a missing width are measured from the
+rendered header.
+
+- `filter`: `KptColumnFilter` from `@konce-pt/table` - `text`, `number`, `select` (with `multiple`),
+  `numberRange`, `slider`, `dateRange`. Any column with a `filter` renders the filter row.
+- `edit`: `{ type: 'text' | 'number' | 'date' | 'select' | 'multiselect', options?, placeholder?, min?, max?, step? }`
+- `summary`: `{ fn: 'sum' | 'avg' | 'min' | 'max' | 'count' | ((rows) => unknown), format? }`
+
+## Props
+- `columns` (required), `data`
+- `filterable`, `filterRowPosition` (`'bottom'` default), `pageSize` (0 = no pagination),
+  `pageSizeOptions`, `selectable` (`'none' | 'single' | 'multiple'`), `loading`, `emptyMessage`,
+  `rowKey`, `scrollHeight`, `virtualScroll` (rows **and** columns, see below), `columnWidth`
+  ('10rem'), `rowHeight` (41), `reorderable`, `frozenSystemColumns` (sticks the expand/select columns even
+  without `frozen` columns), `exportable`,
+  `exportFilename`, `lazy`, `totalRecords`, `expandable`, `multiExpand`, `summaryLabel`,
+  `summaryValues`
+- `ariaLabel` (the table's name without a visible caption), `caption` (a visible `<caption>`),
+  `clickableRows` (rows focusable and activated with Enter/Space; on by default when `onRowClick` is set)
+- Controllable state: `selection`, `expandedRows`, `hiddenFields` (each with `default*` and
+  `on*Change`)
+- Events: `onRowClick`, `onLazyLoad` (also once on start, for the first page), `onCellEdit`
+
+## Keyboard
+- A sortable header is a button: Tab to it, Enter/Space cycles asc -> desc -> none; `aria-sort` is on the `<th>`.
+- With `reorderable` the grip is a button: `ArrowLeft`/`ArrowRight` move the column by one place; the new position is
+  announced and focus follows the grip.
+- An editable cell is reachable with Tab and opens with Enter; its name stays its value and
+  "Edit: {column}" is its description.
+- `selectable="single"` renders radios (one group per table).
+
+## Templates are render props
+- `cells`: `Record<field, (row, value) => ReactNode>` - the equivalent of `kptCell`
+- `cellEditors`: `Record<field, (context) => ReactNode>` - the equivalent of `kptCellEdit`;
+  the context carries `value`, `row`, `commit(value)`, `cancel()`
+- `renderRowDetail(row)` - the expanded row's content
+- `paginatorActions` - the slot to the left of the paginator (a column-toggle button, say)
+
+## The logic lives in a package
+Filter matching (the global filter and the text filter ignore case and diacritics: "lodz" finds
+"Łódź"), sorting (`Intl.Collator` for the active language, natural numbers, empty cells last),
+aggregations, the CSV file (`;`, CRLF, BOM) and cell-to-text come from `@konce-pt/table` - pure
+functions with `node --test` coverage, shared with the Angular port. What stays here is the state
+and the markup.
+
+## Export as a function, not a method
+Angular exposes `exportCsv()` on the component instance; React has no equivalent, so the same job is
+`exportTableCsv(columns, rows, filename)`, exported from the package. The `exportable` toolbar
+button calls exactly that, over the currently visible columns and the filtered, sorted rows.
+
+## Inline editing never commits on blur of the control
+Controls with a panel (`date`, `select`, `multiselect`) open immediately and commit when the panel
+closes; the rest commit when focus leaves **the whole editor**. `KptInputNumber` has focusable
+`+`/`-` buttons beside the field, so reacting to the control's own blur would close the editor on
+every arrow click. `cellEdit` fires only when the value actually changed (arrays are compared by
+content).
+
+## The summary covers the filtered set, not the page
+Aggregations run over every row after filtering - page 1 and all the rest - so paging does not move
+them while the search box does. With `lazy` the table only holds one page, so it computes nothing:
+`summaryValues` is then the only source.
+
+## Large data sets (virtualScroll)
+Tested at 20,000 rows x 100 columns: a few hundred cells live in the DOM, scrolling, search, sorting and
+"select all" stay free of long tasks.
+
+    <KptDataTable columns={cols} data={rows} virtualScroll scrollHeight="480px"
+                  filterable selectable="multiple" rowKey="id" />
+
+- Rows: a fixed `rowHeight` (px). Columns: the table switches to `table-layout: fixed` with a `<colgroup>`;
+  a column width comes from `width` in `px`/`rem`/`em`, anything else (no width, `%`, `ch`) gets
+  `columnWidth`. Leading `frozen` columns are always rendered, the rest is windowed horizontally.
+- Scrolling is read once per animation frame and re-renders only when the row or column window
+  changes, not on every pixel.
+- `aria-rowcount`/`aria-colcount` on the table and `aria-rowindex`/`aria-colindex` on rows and cells
+  give assistive technology the real size, not the window.
+- Global search on sets above 2,000 rows waits ~150 ms for a pause in typing; the folded text of every
+  row is prepared in idle time after the data arrives, so the first keystroke does not pay for the set.
+  Rows are treated as immutable - replace a changed row object instead of mutating it in place.
+- A new search, column filter or sort scrolls back to the top.
+- Not available in this mode: pagination and expandable rows.
+- Selection uses `rowKey` (or the row reference) in a `Set` - selecting 20,000 rows is O(n).
+
+## Examples
+    <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
+
+    <KptDataTable
+      columns={cols}
+      data={rows}
+      rowKey="id"
+      cells={{ status: (row, value) => <span className="badge">{String(value)}</span> }}
+      onCellEdit={(event) => save(event.updatedRow)}
+    />
+
+## i18n
+The toolbar, the states and the filter labels come from the `dataTable` namespace (`search`,
+`exportCsv`, `loading`, `empty`, `total`, `selectAll`, `selectRow`, `expandRow`, `editCell`,
+`filter` / `filterMin` / `filterMax` with `{column}`, `all`, `min`, `max`, `dateRange`, `moveColumn`,
+`columnMoved`).
+
+## Tokens
+`--kpt-table-{bg,fg,border,radius,header-bg,header-fg,row-hover,row-selected,cell-padding}`,
+the expanded row `--kpt-table-detail-bg`, the summary row `--kpt-table-summary-bg`.
+
+## Not ported yet
+Grouped columns (absent in the Angular port too). A ready column-toggle UI is not part of either
+port - `hiddenFields` is the hook to build one on.
+
+## Filter by voice
+- `filterSpeech`: boolean = false (needs `filterable`) - a microphone in the global filter field. A click
+  clears the filter and one spoken phrase becomes the new filter, with the same debounce for large data
+  as typing. Hidden without browser support.
+- `filterSpeechLang`: string - BCP 47 tag; without it from `KptI18nProvider`.
+- `filterSpeechColor`: `'primary' | 'danger' | 'success' | 'warning' | 'info'` = `'primary'` - colour of "stop" and the wave while listening.
+The filter field now sits in `.kpt-data-table__search` (the box that positions the microphone).
+
+    <KptDataTable columns={columns} data={rows} filterable filterSpeech />

package/dist/data-view/data-view.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptLayoutMotion } from '@konce-pt/motion';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export type KptDataViewLayout = 'list' | 'grid';
 export interface KptDataViewProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
@@ -6,7 +7,7 @@ export interface KptDataViewProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     layout?: KptDataViewLayout;
     defaultLayout?: KptDataViewLayout;
     onLayoutChange?: (layout: KptDataViewLayout) => void;
-    /** Rozmiar strony; 0 wyłącza stronicowanie. Sterowalny — select paginatora go zmienia. */
+    /** Rozmiar strony; 0 wyłącza stronicowanie. Sterowalny - select paginatora go zmienia. */
     pageSize?: number;
     defaultPageSize?: number;
     onPageSizeChange?: (pageSize: number) => void;
@@ -18,16 +19,23 @@ export interface KptDataViewProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     onGridColumnsChange?: (columns: number) => void;
     /** Wartości w pasku gęstości. Mniej niż dwie = paska nie ma po co pokazywać. */
     gridColumnsOptions?: readonly number[];
-    /** Najwęższa sensowna karta — poniżej tego siatka zdejmuje kolumnę, zamiast ściskać. */
+    /** Najwęższa sensowna karta - poniżej tego siatka zdejmuje kolumnę, zamiast ściskać. */
     gridMinWidth?: string;
     paginated?: boolean;
-    /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
+    /**
+     * Ruch przy zmianie układu i gęstości z paska: `spring` - karty płyną na sprężynie,
+     * `arc` - unoszą się i lecą po łuku, `morph` - natywny morf przeglądarki (View Transitions),
+     * `none` - bez ruchu. Bez wartości bierze `layout` z `KptMotionProvider` (domyślnie
+     * `spring`); `<KptMotionProvider enabled={false}>` i systemowe "ogranicz ruch" wyłączają go zawsze.
+     */
+    layoutMotion?: KptLayoutMotion;
+    /** Szablon elementu - odpowiednik `<ng-template let-item>` z Angulara. */
     renderItem: (item: T, index: number) => ReactNode;
 }
 /**
- * DataView — lista elementów w układzie listy albo siatki, z opcjonalnym stronicowaniem.
+ * DataView - lista elementów w układzie listy albo siatki, z opcjonalnym stronicowaniem.
  *
  * @example
  * <KptDataView items={products} defaultPageSize={6} renderItem={(p) => <div>{p.name}</div>} />
  */
-export declare function KptDataView<T>({ items, layout, defaultLayout, onLayoutChange, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, gridColumns, defaultGridColumns, onGridColumnsChange, gridColumnsOptions, gridMinWidth, paginated, renderItem, locale, dictionary, className, ...rest }: Readonly<KptDataViewProps<T>>): import("react").JSX.Element;
+export declare function KptDataView<T>({ items, layout, defaultLayout, onLayoutChange, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, gridColumns, defaultGridColumns, onGridColumnsChange, gridColumnsOptions, gridMinWidth, paginated, layoutMotion, renderItem, locale, dictionary, className, ...rest }: Readonly<KptDataViewProps<T>>): import("react").JSX.Element;

package/dist/data-view/data-view.js

@@ -1,18 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { layoutMotionAllowed, morphLayout, playLayoutMotion, resolveLayoutMotion, snapshotLayout, stopLayoutMotion, } from '@konce-pt/motion';
 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 { KptPaginator } from "../paginator/paginator.js";
+import { useKptMotion } from "../motion/motion-context.js";
+/** Klasa elementu w locie (przycięcie treści, warstwa nad sąsiadami). */
+const MOVING = 'kpt-data-view__item--moving';
+/** Klasa View Transitions dla morfu - reguły `::view-transition-*` są we wspólnym CSS. */
+const MORPH_CLASS = 'kpt-data-view-morph';
 /**
- * DataView — lista elementów w układzie listy albo siatki, z opcjonalnym stronicowaniem.
+ * DataView - lista elementów w układzie listy albo siatki, z opcjonalnym stronicowaniem.
  *
  * @example
  * <KptDataView items={products} defaultPageSize={6} renderItem={(p) => <div>{p.name}</div>} />
  */
-export function KptDataView({ items = [], layout, defaultLayout = 'grid', onLayoutChange, pageSize, defaultPageSize = 0, onPageSizeChange, pageSizeOptions = [], gridColumns, defaultGridColumns = 0, onGridColumnsChange, gridColumnsOptions = [], gridMinWidth = '10rem', paginated = true, renderItem, locale, dictionary, className, ...rest }) {
+export function KptDataView({ items = [], layout, defaultLayout = 'grid', onLayoutChange, pageSize, defaultPageSize = 0, onPageSizeChange, pageSizeOptions = [], gridColumns, defaultGridColumns = 0, onGridColumnsChange, gridColumnsOptions = [], gridMinWidth = '10rem', paginated = true, layoutMotion, renderItem, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [currentLayout, setLayout] = useControllableState({
         value: layout,
@@ -30,14 +37,68 @@ export function KptDataView({ items = [], layout, defaultLayout = 'grid', onLayo
         onChange: onGridColumnsChange,
     });
     const [pageIndex, setPageIndex] = useState(0);
-    // Opcje selecta: własna lista albo — gdy pusta — sam bieżący rozmiar.
+    const motionConfig = useKptMotion();
+    const contentRef = useRef(null);
+    const pendingRef = useRef(null);
+    // `view-transition-name` musi być poprawnym identyfikatorem CSS - `useId` daje dwukropki.
+    const morphPrefix = `kpt-data-view-${useId().replaceAll(/[^a-zA-Z0-9-]/g, '')}`;
+    /**
+     * Zmiana z paska z ruchem. Stan sprzed zmiany mierzymy tu, zanim React zmieni DOM - dlatego
+     * animujemy tylko zmiany z paska, a układ ustawiony z zewnątrz przełącza się od razu.
+     */
+    const changeWithMotion = (apply, origin) => {
+        const motion = resolveLayoutMotion(layoutMotion, motionConfig);
+        const content = contentRef.current;
+        if (motion === 'none' || !content || !layoutMotionAllowed()) {
+            apply();
+            return;
+        }
+        const nodes = itemsOf(content);
+        if (motion === 'morph') {
+            morphLayout(nodes, morphPrefix, MORPH_CLASS, () => flushSync(apply));
+            return;
+        }
+        pendingRef.current = { snapshot: snapshotLayout(content, nodes, origin), motion };
+        stopLayoutMotion(content, MOVING);
+        apply();
+    };
+    // Nowy układ jest już w DOM - gramy loty od zapamiętanego stanu.
+    useLayoutEffect(() => {
+        const pending = pendingRef.current;
+        pendingRef.current = null;
+        const content = contentRef.current;
+        if (!pending || !content)
+            return;
+        playLayoutMotion(content, itemsOf(content), pending.snapshot, {
+            motion: pending.motion,
+            movingClass: MOVING,
+            innerOf: bodyOf,
+        });
+    }, [currentLayout, columns]);
+    // Opcje selecta: własna lista albo - gdy pusta - sam bieżący rozmiar.
     const pagerSizeOptions = pageSizeOptions.length ? pageSizeOptions : [size];
     // Pager zostaje na ekranie także wtedy, gdy wszystko mieści się na jednej stronie, o ile jest
     // w czym wybierać. Bez tego wybranie największego rozmiaru chowa select, którym użytkownik
-    // właśnie się posłużył — i nie ma jak wrócić do mniejszego.
+    // właśnie się posłużył - i nie ma jak wrócić do mniejszego.
     // Pasek gęstości ma sens tylko w siatce i tylko wtedy, gdy jest w czym wybierać.
     const showColumns = currentLayout === 'grid' && gridColumnsOptions.length > 1;
     const showPager = paginated && size > 0 && (items.length > size || pagerSizeOptions.length > 1);
     const pageItems = !paginated || size <= 0 ? items : items.slice(pageIndex * size, pageIndex * size + size);
-    return (_jsx("div", { className: cn('kpt-data-view-host', className), ...rest, children: _jsxs("div", { className: "kpt-data-view", children: [_jsxs("div", { className: "kpt-data-view__toolbar", children: [_jsx("div", { className: "kpt-data-view__count", children: t('dataView.count', { count: items.length }) }), _jsxs("div", { className: "kpt-data-view__controls", children: [showColumns ? (_jsx("div", { className: "kpt-data-view__columns", role: "group", "aria-label": t('dataView.columns'), children: gridColumnsOptions.map((n) => (_jsxs("button", { type: "button", className: cn(columns === n && 'is-active'), "aria-pressed": columns === n, onClick: () => setColumns(n), children: [_jsx(KptIcon, { name: "grid-dots" }), n] }, n))) })) : null, _jsxs("div", { className: "kpt-data-view__switch", children: [_jsx("button", { type: "button", className: cn(currentLayout === 'list' && 'is-active'), "aria-label": t('dataView.list'), "aria-pressed": currentLayout === 'list', onClick: () => setLayout('list'), children: _jsx(KptIcon, { name: "list" }) }), _jsx("button", { type: "button", className: cn(currentLayout === 'grid' && 'is-active'), "aria-label": t('dataView.grid'), "aria-pressed": currentLayout === 'grid', onClick: () => setLayout('grid'), children: _jsx(KptIcon, { name: "layout-grid" }) })] })] })] }), _jsx("div", { className: "kpt-data-view__content", "data-layout": currentLayout, "data-columns": columns ? '' : undefined, style: { '--_min': gridMinWidth, '--_cols': columns || undefined }, children: pageItems.length ? (pageItems.map((item, index) => (_jsx("div", { className: "kpt-data-view__item", children: renderItem(item, index) }, index)))) : (_jsx("div", { className: "kpt-data-view__empty", children: t('dataView.empty') })) }), showPager ? (_jsx(KptPaginator, { length: items.length, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: size, onPageSizeChange: setSize, pageSizeOptions: pagerSizeOptions })) : null] }) }));
+    return (_jsx("div", { className: cn('kpt-data-view-host', className), ...rest, children: _jsxs("div", { className: "kpt-data-view", children: [_jsxs("div", { className: "kpt-data-view__toolbar", children: [_jsx("div", { className: "kpt-data-view__count", children: t('dataView.count', { count: items.length }) }), _jsxs("div", { className: "kpt-data-view__controls", children: [showColumns ? (_jsx("div", { className: "kpt-data-view__columns", role: "group", "aria-label": t('dataView.columns'), children: gridColumnsOptions.map((n) => (_jsxs("button", { type: "button", className: cn(columns === n && 'is-active'), "aria-pressed": columns === n, onClick: (e) => {
+                                            if (n !== columns)
+                                                changeWithMotion(() => setColumns(n), e.currentTarget);
+                                        }, children: [_jsx(KptIcon, { name: "grid-dots" }), n] }, n))) })) : null, _jsxs("div", { className: "kpt-data-view__switch", children: [_jsx("button", { type: "button", className: cn(currentLayout === 'list' && 'is-active'), "aria-label": t('dataView.list'), "aria-pressed": currentLayout === 'list', onClick: (e) => {
+                                                if (currentLayout !== 'list')
+                                                    changeWithMotion(() => setLayout('list'), e.currentTarget);
+                                            }, children: _jsx(KptIcon, { name: "list" }) }), _jsx("button", { type: "button", className: cn(currentLayout === 'grid' && 'is-active'), "aria-label": t('dataView.grid'), "aria-pressed": currentLayout === 'grid', onClick: (e) => {
+                                                if (currentLayout !== 'grid')
+                                                    changeWithMotion(() => setLayout('grid'), e.currentTarget);
+                                            }, children: _jsx(KptIcon, { name: "layout-grid" }) })] })] })] }), _jsx("div", { ref: contentRef, className: "kpt-data-view__content", "data-layout": currentLayout, "data-columns": columns ? '' : undefined, style: { '--_min': gridMinWidth, '--_cols': columns || undefined }, children: pageItems.length ? (pageItems.map((item, index) => (_jsx("div", { className: "kpt-data-view__item", children: _jsx("div", { className: "kpt-data-view__body", children: renderItem(item, index) }) }, index)))) : (_jsx("div", { className: "kpt-data-view__empty", children: t('dataView.empty') })) }), showPager ? (_jsx(KptPaginator, { length: items.length, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: size, onPageSizeChange: setSize, pageSizeOptions: pagerSizeOptions })) : null] }) }));
+}
+function itemsOf(content) {
+    return Array.from(content.children).filter((el) => el.classList.contains('kpt-data-view__item'));
+}
+function bodyOf(item) {
+    const body = item.firstElementChild;
+    return body instanceof HTMLElement ? body : null;
 }

package/dist/data-view/llms.txt

@@ -8,10 +8,10 @@ Import: `import { KptDataView } from '@konce-pt/react';`
       <div class="kpt-data-view">
         <div class="kpt-data-view__toolbar">
           <div class="kpt-data-view__count">8 items</div>
-          <div class="kpt-data-view__switch">…list, grid…</div>
+          <div class="kpt-data-view__switch">...list, grid...</div>
         </div>
         <div class="kpt-data-view__content" data-layout="grid">
-          <div class="kpt-data-view__item">…</div>
+          <div class="kpt-data-view__item"><div class="kpt-data-view__body">...</div></div>
         </div>
         <!-- KptPaginator -->
       </div>
@@ -19,19 +19,20 @@ Import: `import { KptDataView } from '@konce-pt/react';`
 
 ## Props
 - `items`: `T[]`
-- `layout` / `defaultLayout` / `onLayoutChange` — `'list' | 'grid'` (default `'grid'`)
-- `pageSize` / `defaultPageSize` / `onPageSizeChange` — number; 0 turns pagination off
+- `layout` / `defaultLayout` / `onLayoutChange` - `'list' | 'grid'` (default `'grid'`)
+- `pageSize` / `defaultPageSize` / `onPageSizeChange` - number; 0 turns pagination off
 - `pageSizeOptions`: number[] (empty = the select offers the current size only)
-- `gridColumns` / `defaultGridColumns` / `onGridColumnsChange` — number; 0 = as many as fit
+- `gridColumns` / `defaultGridColumns` / `onGridColumnsChange` - number; 0 = as many as fit
 - `gridColumnsOptions`: number[] (fewer than two = no density bar)
-- `gridMinWidth`: string (default `10rem`) — the narrowest card worth rendering
+- `gridMinWidth`: string (default `10rem`) - the narrowest card worth rendering
 - `paginated`: boolean (default true)
-- `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
+- `layoutMotion`: `'spring' | 'arc' | 'morph' | 'none'` (default from `KptMotionProvider`, else `spring`) - see below
+- `renderItem(item, index)` - required; the equivalent of `<ng-template let-item>`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The layout is an attribute
-`data-layout` on the content switches the grid rules; the toolbar only flips it. Everything else —
-the item's markup — is the caller's, which is why there are no card props here.
+`data-layout` on the content switches the grid rules; the toolbar only flips it. Everything else -
+the item's markup - is the caller's, which is why there are no card props here.
 
 ## The column count is a ceiling
 The density bar shows up in the grid layout when `gridColumnsOptions` holds more than one value.
@@ -41,7 +42,7 @@ below `gridMinWidth`.
 
 ## The pager appears when it is needed
 Only when `paginated`, the page size is above 0, and either the items outgrow one page or
-`pageSizeOptions` holds more than one size — a paginator under a single page of results is noise,
+`pageSizeOptions` holds more than one size - a paginator under a single page of results is noise,
 but hiding it right after someone picks the largest size would strand them there.
 
 ## Examples
@@ -54,6 +55,24 @@ but hiding it right after someone picks the largest size would strand them there
 The count, the two switch buttons and the density group come from the `dataView` namespace
 (`count` with `{count}`, `list`, `grid`, `columns`, `empty`).
 
+## Layout motion
+`layoutMotion` animates a layout or density change made from the built-in bar:
+- `spring` - each card glides from its old place to the new one on a spring and resizes; the
+  content is counter-scaled, so it never stretches. A light cascade from the first item.
+- `arc` - cards lift (shadow, slight zoom), fly along an arc tilted toward the move and land
+  softly; the wave starts at the clicked button.
+- `morph` - the browser's own morph (View Transitions): frames morph, old and new content
+  cross-fade, clipped rather than stretched. Without browser support the change is instant. A view
+  transition covers the whole document and blocks clicks for ~0.6 s.
+- `none` - no motion.
+
+With no value it takes `layout` from `KptMotionProvider` (default `spring`); `enabled: false` there and
+the system "reduce motion" setting always win. A click in the middle of a flight starts the next
+one from where the cards are on screen. A layout set from outside (`layout`, `gridColumns`) switches instantly - the
+old state has to be measured before the DOM changes.
+
+    <KptDataView items={products} layoutMotion="morph" renderItem={renderCard} />
+
 ## Tokens
 The grid gap `--kpt-space-3`, the active switch `--kpt-color-primary`.
 

package/dist/date-range/date-range.d.ts

@@ -7,16 +7,16 @@ export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'o
     defaultValue?: KptDateRangeValue;
     onValueChange?: (value: KptDateRangeValue) => void;
     mode?: KptDateRangeMode;
-    /** Liczba miesięcy obok siebie (1–3). Ignorowana w trybie 'time'. */
+    /** Liczba miesięcy obok siebie (1-3). Ignorowana w trybie 'time'. */
     visibleMonths?: number;
     hourFormat?: 12 | 24;
     minuteStep?: number;
     placeholder?: string;
     /** Zapis dat: `'pl'` (domyślnie), `'iso'` albo `'locale'` (`Intl` dla aktywnego języka). */
     displayFormat?: KptDateDisplayFormat;
-    /** Pierwszy dzień tygodnia (1 = poniedziałek … 7 = niedziela); `null` = wg aktywnego języka. */
+    /** Pierwszy dzień tygodnia (1 = poniedziałek ... 7 = niedziela); `null` = wg aktywnego języka. */
     firstDayOfWeek?: KptFirstDayOfWeek | null;
-    /** Stan panelu — pozwala otworzyć go z zewnątrz i wiedzieć, kiedy wybór się skończył. */
+    /** Stan panelu - pozwala otworzyć go z zewnątrz i wiedzieć, kiedy wybór się skończył. */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     /** Najwcześniejsza dozwolona data 'RRRR-MM-DD' (włącznie). */
@@ -25,12 +25,12 @@ export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'o
     maxDate?: string | null;
     /** Nazwa dostępna pola, gdy nie opisuje go `<label for>`. */
     ariaLabel?: string | null;
-    /** Id pola (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    /** Id pola (nie hosta); bez niego generowane, w `KptFormField` - z wrappera. */
     id?: string;
     disabled?: boolean;
-    /** Tylko do odczytu — wartość widać, panel się nie otwiera (`aria-readonly`). */
+    /** Tylko do odczytu - wartość widać, panel się nie otwiera (`aria-readonly`). */
     readOnly?: boolean;
-    /** Pole wymagane — `aria-required`. */
+    /** Pole wymagane - `aria-required`. */
     required?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -41,10 +41,10 @@ export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'o
  * `visibleMonths` pokazuje kilka miesięcy obok siebie, a zakres podświetla się ciągłym pasmem
  * przez wszystkie panele.
  *
- * Klawiatura jak w `KptDatepicker`: `Enter`/`Spacja`/`↓` otwierają panel z fokusem na początku
- * zakresu (albo dziś), strzałki, `Home`/`End` i `PageUp`/`PageDown` (z `Shift` — rok) chodzą po
+ * Klawiatura jak w `KptDatepicker`: `Enter`/`Spacja`/`ArrowDown` otwierają panel z fokusem na początku
+ * zakresu (albo dziś), strzałki, `Home`/`End` i `PageUp`/`PageDown` (z `Shift` - rok) chodzą po
  * dniach przez wszystkie panele, `Tab` krąży w panelu, `Escape` i wybór końca oddają fokus polu.
- * Krańce i środek zakresu są w nazwie dnia („…, początek zakresu”), a wybór i przewinięcie miesiąca
+ * Krańce i środek zakresu są w nazwie dnia ("..., początek zakresu"), a wybór i przewinięcie miesiąca
  * ogłasza region `polite`. Pole to `role="combobox"` z `aria-haspopup="dialog"`, więc niesie
  * `aria-required`, `aria-readonly` i `aria-invalid`. Tydzień zaczyna się wg aktywnego języka.
  *