@konce-pt/react 0.16.1 → 0.18.0

package/README.md

@@ -77,14 +77,14 @@ import '@konce-pt/grid';              // optional - only if you use the layout c
 bundle, which is why both ports render identically. The Angular package injects those styles at
 runtime; React has no other source for them, so this import is not optional.
 
-Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
+Dark theme: set `<html data-theme="dark">`. It is not switched automatically - toggle the attribute yourself, e.g. from `matchMedia('(prefers-color-scheme: dark)')`.
 
 **Next.js App Router / Server Components:** every interactive component module starts with
 `'use client'`, so you can import components directly into a server component - no wrapper file.
 
 > **No CDK here.** Components with a floating panel (`KptSelect`, `KptPopover`, `KptMenu`,
-> `KptAutocomplete`, `KptDatepicker`...) portal into `document.body` through the internal
-> `KptOverlay`, so `@angular/cdk/overlay-prebuilt.css` is **not** needed - positioning lives in the
+> `KptAutocomplete`, `KptDatepicker`...) portal into `document.body` through `KptOverlay`
+> (also exported for your own floating panels), so `@angular/cdk/overlay-prebuilt.css` is **not** needed - positioning lives in the
 > component, the look in `@konce-pt/styles/components`. Inside an open `KptDialog` those panels
 > portal into the `<dialog>` instead, because `showModal()` moves it to the browser top layer.
 
@@ -120,6 +120,7 @@ export function Login() {
           onValueChange={setEmail}
           onTouch={() => setTouched((t) => ({ ...t, email: true }))}
           invalid={Boolean(emailError)}
+          touched={touched.email}
         />
       </KptFormField>
 
@@ -131,6 +132,7 @@ export function Login() {
           onValueChange={setPassword}
           onTouch={() => setTouched((t) => ({ ...t, password: true }))}
           invalid={Boolean(passwordError)}
+          touched={touched.password}
         />
       </KptFormField>
 
@@ -141,7 +143,8 @@ export function Login() {
 ```
 
 `KptFormField` generates the control id and publishes it through context, so `label[for]` and
-`input[id]` match with no configuration. Drop `value`/`onValueChange` and the field becomes
+`input[id]` match with no configuration. `touched` gates the invalid state (`aria-invalid`, red border)
+until the field is blurred; leave it out and `invalid` shows right away. Drop `value`/`onValueChange` and the field becomes
 uncontrolled - the value lives in the DOM, and a native `<form action={...}>` or React Hook Form's
 `register()` picks it up as-is.
 
@@ -166,13 +169,13 @@ Data table with sorting, filtering, pagination and a custom cell:
 
 | Category | Components |
 | --- | --- |
-| **Forms** | `KptInput`, `KptTextarea`, `KptSelect`, `KptAutocomplete`, `KptCheckbox`, `KptSwitch`, `KptSwitchGroup`, `KptRadioGroup`, `KptSlider`, `KptRating`, `KptDatepicker`, `KptDateRange`, `KptClock`, `KptColorPicker`, `KptFileUpload`, `KptInputNumber`, `KptPassword`, `KptInputOtp`, `KptChipsInput`, `KptInputMask`, `KptListbox`, `KptKnob`, `KptRichText`, `KptFormField` |
+| **Forms** | `KptInput`, `KptTextarea`, `KptSelect`, `KptAutocomplete`, `KptCheckbox`, `KptSwitch`, `KptSwitchGroup`, `KptRadioGroup`, `KptSlider`, `KptRating`, `KptDatepicker`, `KptDateRange`, `KptClock`, `KptColorPicker`, `KptFileUpload`, `KptInputNumber`, `KptPassword`, `KptInputOtp`, `KptChipsInput`, `KptInputMask`, `KptListbox`, `KptKnob`, `KptRichText`, `KptFormField`, `KptSpeechButton` + `KptSpeechWave` (dictation) |
 | **Buttons & actions** | `KptButton`, `KptIconButton`, `KptButtonGroup`, `KptFab`, `KptSplitButton`, `KptSpeedDial` |
-| **Layout** | `KptAppShell`, `KptToolbar`, `KptSidenav`, `KptCard` (+ `Header`, `Footer`, `Media`, `Title`...), `KptDivider`, `KptPanel`, `KptFieldset`, `KptSplitter`, `KptScrollTop` |
+| **Layout** | `KptAppShell`, `KptToolbar`, `KptSidenav`, `KptCard` (+ `Header`, `Footer`, `Media`, `Title`...), `KptDivider`, `KptPanel`, `KptFieldset`, `KptSplitter`, `KptScrollTop`, `KptBackdrop` |
 | **Navigation** | `KptTabs`, `KptAccordion`, `KptBreadcrumb`, `KptStepper`, `KptMenu`, `KptMenubar`, `KptMegamenu`, `KptContextMenu` |
 | **Data** | `KptDataTable`, `KptPaginator`, `KptTree`, `KptTimeline`, `KptCarousel`, `KptDataView`, `KptPickList`, `KptOrderList`, `KptGalleria`, `KptMeterGroup` |
-| **Feedback & overlay** | `KptAlert`, `KptDialog`, `kptToast` + `KptToastContainer`, `KptTooltip`, `KptPopover`, `KptDrawer`, `KptBottomSheet`, `kptConfirm`, `KptBadge`, `KptChip`, `KptAvatar`, `KptAvatarGroup`, `KptSpinner`, `KptProgress`, `KptSkeleton`, `KptEmpty`, `KptImage`, `KptAuth` |
-| **Subpaths** | `@konce-pt/react/charts` (`KptChart`), `/chat` (`KptChat`, `KptChatMessage`, `KptChatTyping`, `KptChatComposer`, `KptChatDock`), `/roadmap` (`KptRoadmap`), `/grid` (`KptGrid`, `KptCol`, `KptFlex`), `/map` (`KptMap` + legend, POI card, search), `/icons` (full Tabler set) |
+| **Feedback & overlay** | `KptAlert`, `KptDialog`, `kptToast` + `KptToastContainer`, `KptTooltip`, `KptPopover`, `KptPeek`, `KptDrawer`, `KptBottomSheet`, `kptConfirm`, `KptBadge`, `KptChip`, `KptAvatar`, `KptAvatarGroup`, `KptIcon`, `KptSpinner`, `KptLoader`, `KptUpdate`, `KptProgress`, `KptSkeleton`, `KptEmpty`, `KptImage`, `KptAuth`, `KptMention`, `KptMentions` |
+| **Subpaths** | `@konce-pt/react/charts` (`KptChart`), `/chat` (`KptChat`, `KptChatMessage`, `KptChatTyping`, `KptChatComposer`, `KptChatDock`), `/roadmap` (`KptRoadmap`), `/grid` (`KptGrid`, `KptCol`, `KptFlex`), `/map` (`KptMap` + `KptMapLegend`, `KptMapPoiCard`, `KptMapSearch`, `KptMapCreateDialog`, `KptMapHoursField`, `KptMapImageField`), `/icons` (full Tabler set) |
 
 The heavy pieces (charts, chat, roadmap, maps, the full icon set) live in subpaths on purpose, so the core
 entry point stays small. Every component ships an `llms.txt` API sheet next to its source.
@@ -199,7 +202,7 @@ classes - that is what the SCSS reads.
 
 ## Icons
 
-**84 icons are built in and need no configuration** - what the components themselves draw plus the
+**98 icons are built in and need no configuration** - what the components themselves draw plus the
 staples of an application shell (`sun`, `moon`, `bell`, `settings`, `users`, `logout`,
 `layout-dashboard`, `home`, `activity`, `chart-bar`, `brand-github` ...). A typical admin panel needs
 nothing else.
@@ -286,12 +289,12 @@ export function App() {
 // <KptMotionProvider enabled={false}> - no motion at all (visual tests, kiosk)
 ```
 
-| Key | Values | Components (per-component input) |
+| Key | Values | Components (per-component prop) |
 | --- | --- | --- |
 | `enabled` | `true` \| `false` | All. `false` also zeroes CSS durations (`data-kpt-motion="off"`, `--kpt-motion-scale: 0` on `<html>`); loading indicators slow down instead of stopping |
 | `layout` | `spring` \| `arc` \| `morph` \| `none` | DataView, PickList, OrderList (`layoutMotion`) |
 | `collapse` | `spring` \| `fade` \| `none` | Accordion, Fieldset, Panel, Tree (`collapseMotion`) |
-| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); Password meter, ChipsInput and Select chips |
+| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); Password meter, ChipsInput and Select chips, Stepper panels, the Image preview, the Galleria slide |
 | `toggle` | `spring` \| `fade` \| `none` | Checkbox, RadioGroup, Switch (`toggleMotion`); Rating stars, ButtonGroup selection |
 
 Precedence: `enabled: false` always wins, then the component's own prop, then the provider value,
@@ -307,7 +310,7 @@ are available for your own views in [`@konce-pt/motion`](https://www.npmjs.com/p
 
 ## Documentation
 
-- **Playground** - live demos with copyable code: [ui.konce.pt/react](https://ui.konce.pt/react).
+- **Playground** - live demos with copyable code: [ui.konce.pt/react](https://ui.konce.pt/react/).
 - **`llms.txt`** - LLM-friendly API sheets per component, shipped inside the package; the
   package-wide sheet lives at [ui.konce.pt/llms/react/llms.txt](https://ui.konce.pt/llms/react/llms.txt)
   (PL mirror: [llms-pl.txt](https://ui.konce.pt/llms/react/llms-pl.txt)).
@@ -371,20 +374,21 @@ import '@konce-pt/grid';              // opcjonalnie - klasy układu
 własnego bundla - stąd identyczny wygląd obu portów. Angular wstrzykuje te style w runtime, React
 nie ma dla nich innego źródła, więc ten import nie jest opcjonalny.
 
-Motyw ciemny: `<html data-theme="dark">` (albo `prefers-color-scheme`). Nadpisania `--kpt-color-*`
+Motyw ciemny: `<html data-theme="dark">` - nie włącza się sam, atrybut przełączasz samodzielnie
+(np. z `matchMedia('(prefers-color-scheme: dark)')`). Nadpisania `--kpt-color-*`
 w arkuszu importowanym **po** `@konce-pt/styles`.
 
 **Next.js App Router / Server Components:** każdy moduł interaktywnego komponentu zaczyna się od
 `'use client'`, więc komponenty importujesz wprost do komponentu serwerowego - bez pliku-opakowania.
 
 > **CDK nie jest tu potrzebny.** Komponenty z panelem (`KptSelect`, `KptPopover`, `KptMenu`,
-> `KptAutocomplete`, `KptDatepicker`...) renderują go przez wewnętrzny `KptOverlay` do portalu na
-> `document.body`, więc `@angular/cdk/overlay-prebuilt.css` nie jest wymagany. W otwartym
+> `KptAutocomplete`, `KptDatepicker`...) renderują go przez `KptOverlay` (eksportowany także dla
+> własnych paneli) do portalu na `document.body`, więc `@angular/cdk/overlay-prebuilt.css` nie jest wymagany. W otwartym
 > `KptDialog` panel trafia do `<dialog>`, bo `showModal()` przenosi go do górnej warstwy przeglądarki.
 
 ### Ikony
 
-**84 ikony są wbudowane i nie wymagają konfiguracji** - to, co rysują same komponenty, plus staple
+**98 ikon jest wbudowanych i nie wymaga konfiguracji** - to, co rysują same komponenty, plus staple
 powłoki aplikacji (`sun`, `moon`, `bell`, `settings`, `users`, `logout`, `layout-dashboard`,
 `home`, `activity`, `chart-bar`, `brand-github`...). Typowy panel administracyjny nie potrzebuje nic
 więcej.
@@ -441,12 +445,12 @@ nakładki w portalach też go słuchają.
 <KptMotionProvider enabled={false}>...</KptMotionProvider>   {/* bez ruchu (testy wizualne, kiosk) */}
 ```
 
-| Klucz | Wartości | Komponenty (input per komponent) |
+| Klucz | Wartości | Komponenty (prop per komponent) |
 | --- | --- | --- |
 | `enabled` | `true` \| `false` | Wszystkie. `false` zeruje też czasy w CSS (`data-kpt-motion="off"`, `--kpt-motion-scale: 0` na `<html>`); wskaźniki ładowania zwalniają zamiast stanąć |
 | `layout` | `spring` \| `arc` \| `morph` \| `none` | DataView, PickList, OrderList (`layoutMotion`) |
 | `collapse` | `spring` \| `fade` \| `none` | Accordion, Fieldset, Panel, Tree (`collapseMotion`) |
-| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); miernik hasła, chipy ChipsInput i Select |
+| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); miernik hasła, chipy ChipsInput i Select, panele Steppera, podgląd Image, slajd Galleria |
 | `toggle` | `spring` \| `fade` \| `none` | Checkbox, RadioGroup, Switch (`toggleMotion`); gwiazdki Rating, wybór ButtonGroup |
 
 Pierwszeństwo: `enabled: false` wygrywa zawsze, potem prop samego komponentu, potem wartość z providera,
@@ -463,7 +467,7 @@ Każdy komponent ma obok źródła plik `llms.txt` z opisem API.
 
 ### Dokumentacja
 
-Playground z demami: [ui.konce.pt/react](https://ui.konce.pt/react). Opisy API dla modeli:
+Playground z demami: [ui.konce.pt/react](https://ui.konce.pt/react/). Opisy API dla modeli:
 [`llms.txt`](https://ui.konce.pt/llms/react/llms.txt) (EN) i
 [`llms-pl.txt`](https://ui.konce.pt/llms/react/llms-pl.txt) (PL). Repozytorium:
 [gitlab.com/konce-pt/koncept-ui](https://gitlab.com/konce-pt/koncept-ui).

package/dist/carousel/carousel.d.ts

@@ -9,6 +9,12 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     renderSlide: (item: T, index: number) => ReactNode;
     /** Nazwa regionu dla czytników ekranu, np. "Nowości"; domyślnie `carousel.label`. */
     label?: string;
+    /**
+     * Zawijanie strzałek: za ostatnim slajdem "dalej" wraca do pierwszego, przed pierwszym "wstecz" -
+     * do ostatniego. `false` - strzałki stają na końcach (np. kroki, które mają początek i koniec).
+     * Domyślnie `true`.
+     */
+    loop?: boolean;
 }
 /**
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
@@ -19,9 +25,11 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  * 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.
+ * na torze). Domyślnie strzałki zawijają: za ostatnim slajdem "dalej" wraca do pierwszego, przed
+ * pierwszym "wstecz" - do ostatniego. Z `loop={false}` strzałki stają na końcach i dostają
+ * `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example
  * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
  */
-export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;
+export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, label, loop, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;

package/dist/carousel/carousel.js

@@ -13,12 +13,14 @@ import { KptIcon } from "../icon/icon.js";
  * 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.
+ * na torze). Domyślnie strzałki zawijają: za ostatnim slajdem "dalej" wraca do pierwszego, przed
+ * pierwszym "wstecz" - do ostatniego. Z `loop={false}` strzałki stają na końcach i dostają
+ * `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example
  * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
  */
-export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }) {
+export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, loop = true, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [requested, setActive] = useControllableState({
         value: activeIndex,
@@ -28,7 +30,21 @@ export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, o
     // Indeks przycięty do listy: po skróceniu `items` (filtr) widok nie zostaje pusty.
     const active = Math.min(Math.max(requested, 0), Math.max(items.length - 1, 0));
     const goTo = (index) => setActive(Math.min(Math.max(index, 0), items.length - 1));
-    const atStart = active <= 0;
-    const atEnd = active >= items.length - 1;
-    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", role: "region", "aria-roledescription": t('carousel.roleCarousel'), "aria-label": label || t('carousel.label'), children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", "aria-live": "polite", style: { transform: `translateX(calc(var(--_kpt-carousel-dir, 1) * -${active * 100}%))` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", role: "group", "aria-roledescription": t('carousel.roleSlide'), "aria-label": t('carousel.slideOf', { index: index + 1, total: items.length }), inert: index !== active, "aria-hidden": index === active ? undefined : true, children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", "aria-disabled": atStart || undefined, "aria-label": t('common.previous'), onClick: () => goTo(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", "aria-disabled": atEnd || undefined, "aria-label": t('common.next'), onClick: () => goTo(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
+    // Zawijanie ma sens od dwóch slajdów - przy jednym strzałki zostają wyłączone.
+    const wraps = loop && items.length > 1;
+    // Krok o jeden slajd; poza końcem - zawinięcie albo zatrzymanie, zależnie od `loop`.
+    const step = (delta) => {
+        const count = items.length;
+        if (count === 0)
+            return;
+        const target = active + delta;
+        if (target >= 0 && target < count)
+            setActive(target);
+        else if (wraps)
+            setActive((target + count) % count);
+    };
+    // Koniec, na którym strzałka staje - tylko bez zawijania.
+    const atStart = !wraps && active <= 0;
+    const atEnd = !wraps && active >= items.length - 1;
+    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", role: "region", "aria-roledescription": t('carousel.roleCarousel'), "aria-label": label || t('carousel.label'), children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", "aria-live": "polite", style: { transform: `translateX(calc(var(--_kpt-carousel-dir, 1) * -${active * 100}%))` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", role: "group", "aria-roledescription": t('carousel.roleSlide'), "aria-label": t('carousel.slideOf', { index: index + 1, total: items.length }), inert: index !== active, "aria-hidden": index === active ? undefined : true, children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", "aria-disabled": atStart || undefined, "aria-label": t('common.previous'), onClick: () => step(-1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", "aria-disabled": atEnd || undefined, "aria-label": t('common.next'), onClick: () => step(1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
 }

package/dist/carousel/llms.txt

@@ -28,6 +28,7 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange`
 - `renderSlide(item, index)` - required
 - `label`: string - the region name; empty = `carousel.label`
+- `loop`: boolean (default true) - the arrows wrap from the last slide to the first and back
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The render prop replaces the template
@@ -49,13 +50,18 @@ The arrows use `common.previous` / `common.next`, the dots `carousel.slide` (`{i
 ## Tokens
 The active dot `--kpt-color-primary`; the arrows `--kpt-color-surface` (80% via `color-mix`, solid on hover) with `--kpt-elevation-2`; the slide transition `--kpt-motion-duration-base`.
 
+## Looping
+By default the arrows wrap: "next" on the last slide goes to the first one and "previous" on the first
+goes to the last; the track rewinds across the slides in between. `loop={false}` stops the arrows at the
+ends instead - for steps that have a beginning and an end (onboarding). There is no autoplay either way.
+
 ## 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
 `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
 `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`,
+slide that comes in is announced. With `loop` off 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
 (WCAG 2.5.8) with an 8 px visible dot. The transition is off under `prefers-reduced-motion`; in RTL
 the track and the chevrons follow the reading direction (`:dir(rtl)`).

package/dist/charts/chart.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
-import { KptChartMotion, areaPath, bandScale, barLayout, chartAccessibleName, chartDataTable, dataScale, deltaKind, domainScale, extent, formatNumber, holdDomain, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, seriesColor, significantDelta, } from '@konce-pt/chart';
+import { KptChartMotion, areaPath, axisBase, bandPath, bandScale, barLayout, chartScale, chartAccessibleName, chartDataTable, dataScale, deltaKind, domainScale, formatNumber, linePath, linearScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, scaleRows, seriesColor, significantDelta, stackSeries, } from '@konce-pt/chart';
 import { cn } from "../internal/cn.js";
 import { useKptMotion } from "../motion/motion-context.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -106,8 +106,11 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
         const to = config.series.map((s) => [...s.data]);
         const withAxis = config.type === 'line' || config.type === 'bar';
         const visible = (rows) => rows.filter((_, i) => !hidden.has(`ser:${config.series[i]?.name ?? ''}`));
+        const axis = { valueAxis: config.valueAxis, stacked: config.stacked };
+        // Skala trzymana na czas ducha obejmuje oba stany - z wierszy już złożonych w stos.
+        const held = [...scaleRows(visible(from), config.stacked), ...scaleRows(visible(to), config.stacked)];
         const scales = withAxis
-            ? { start: dataScale(visible(from)), hold: dataScale([holdDomain(visible(from), visible(to))]), end: dataScale(visible(to)) }
+            ? { start: dataScale(visible(from), axis), hold: chartScale(held, { valueAxis: config.valueAxis }), end: dataScale(visible(to), axis) }
             : null;
         motion.transition(from, to, { delta: withAxis && config.animation?.delta !== false, scales });
     }, [config, hidden, motion, motionConfig]);
@@ -204,16 +207,19 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
         if (view.type !== 'line')
             return null;
         const active = view.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
-        const values = active.flatMap(({ s }) => s.data);
-        const [mn, mx] = extent(values.length ? values : [0]);
+        const rows = active.map(({ s }) => s.data);
         const scale = frame.domain
             ? domainScale(frame.domain.target, frame.domain.min, frame.domain.max)
-            : niceScale(Math.min(0, mn), Math.max(0, mx), 5);
+            : chartScale(rows, { valueAxis: view.valueAxis, stacked: view.stacked });
+        // Stos: punkty serii na narastającej sumie, pasmo od linii serii pod nią.
+        const stack = view.stacked ? stackSeries(rows) : null;
         const plot = plotArea(width, height, VERTICAL_INSETS);
         const yScale = linearScale(scale.min, scale.max, plot.y + plot.height, plot.y);
         const count = view.labels.length;
         const xAt = (i) => count > 1 ? plot.x + (i / (count - 1)) * plot.width : plot.x + plot.width / 2;
-        const baseline = yScale(0);
+        // Punkt nie wychodzi poza oś - przypięte `valueAxis.min`/`max` mogą uciąć wartość.
+        const yAt = (v) => yScale(Math.min(scale.max, Math.max(scale.min, v)));
+        const baseline = yScale(axisBase(scale));
         const interpolation = view.interpolation ?? 'linear';
         const showPoints = view.points ?? true;
         const grid = scale.ticks.map((t) => ({
@@ -234,13 +240,21 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             text: label,
             anchor: 'middle',
         }));
-        const series = active.map(({ s, i }) => ({
+        const series = active.map(({ s, i }, k) => ({
             key: `ser:${s.name}`,
             name: s.name,
             color: seriesColor(s.color, i),
             i,
-            points: s.data.map((v, idx) => ({ x: xAt(idx), y: yScale(v), value: v, label: view.labels[idx] ?? '' })),
+            points: s.data.map((v, idx) => ({ x: xAt(idx), y: yAt(stack?.top[k]?.[idx] ?? v), value: v, label: view.labels[idx] ?? '' })),
+            floor: stack ? s.data.map((_, idx) => ({ x: xAt(idx), y: yAt(stack.base[k]?.[idx] ?? 0) })) : null,
         }));
+        // Duch w stosie stoi na sumach poprzedniego stanu, tak jak bieżące punkty.
+        const ghostRows = ghostState
+            ? (() => {
+                const prev = active.map(({ i }) => ghostState.prev[i] ?? []);
+                return view.stacked ? stackSeries(prev).top : prev;
+            })()
+            : [];
         const crosshairCat = config.crosshair && activeIndex !== null ? catLabels[activeIndex] : undefined;
         // Prowadnica i pigułka jadą razem z dymkiem.
         const crossX = crosshairCat ? (frame.tip?.x ?? crosshairCat.x) : 0;
@@ -268,10 +282,10 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                     ? series.map((s) => {
                         const prev = ghostState.prev[s.i] ?? [];
                         const next = ghostState.next[s.i] ?? [];
-                        const gpts = prev.map((v, idx) => ({ x: xAt(idx), y: yScale(v) }));
+                        const gpts = (ghostRows[series.indexOf(s)] ?? prev).map((v, idx) => ({ x: xAt(idx), y: yAt(v) }));
                         return (_jsxs("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: [_jsx("path", { className: "kpt-chart__ghost-line", d: linePath(gpts, interpolation) }), gpts.map((p, idx) => (_jsx("line", { className: "kpt-chart__delta", "data-kind": deltaKind(prev[idx] ?? 0, next[idx] ?? 0), x1: p.x, x2: p.x, y1: p.y, y2: s.points[idx]?.y ?? p.y }, idx)))] }, `${ghostState.id}:${s.key}`));
                     })
-                    : null, series.map((s) => (_jsxs("g", { className: cn('kpt-chart__series', dim(s.key) && 'kpt-chart__series--dim'), children: [view.area ? (_jsx("path", { className: "kpt-chart__area", d: areaPath(s.points, baseline, interpolation), style: { fill: s.color } })) : null, _jsx("path", { className: "kpt-chart__line", d: linePath(s.points, interpolation), style: { stroke: s.color }, pathLength: 1 }), showPoints
+                    : null, series.map((s) => (_jsxs("g", { className: cn('kpt-chart__series', dim(s.key) && 'kpt-chart__series--dim'), children: [view.area ? (_jsx("path", { className: "kpt-chart__area", d: s.floor ? bandPath(s.points, s.floor, interpolation) : areaPath(s.points, baseline, interpolation), style: { fill: s.color } })) : null, _jsx("path", { className: "kpt-chart__line", d: linePath(s.points, interpolation), style: { stroke: s.color }, pathLength: 1 }), showPoints
                             ? s.points.map((p, idx) => (_jsx("circle", { className: cn('kpt-chart__point', activeIndex === idx && 'kpt-chart__point--active'), cx: p.x, cy: p.y, r: 4, style: { fill: s.color, ['--kpt-chart-i']: idx } }, idx)))
                             : null] }, s.key))), sheen
                     ? series.map((s) => (_jsx("path", { className: "kpt-chart__sheen-line", d: linePath(s.points, interpolation), stroke: `url(#${sheenId})`, style: { opacity: sheen.opacity }, "aria-hidden": "true" }, s.key)))
@@ -301,7 +315,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
         const active = view.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
         const plot = plotArea(width, height, vertical ? VERTICAL_INSETS : HORIZONTAL_INSETS);
         const radius = view.borderRadius ?? 4;
-        const layout = barLayout(active.map(({ s }) => s.data), view.labels.length, plot, orientation, radius, frame.domain ? domainScale(frame.domain.target, frame.domain.min, frame.domain.max) : undefined);
+        const layout = barLayout(active.map(({ s }) => s.data), view.labels.length, plot, orientation, radius, frame.domain ? domainScale(frame.domain.target, frame.domain.min, frame.domain.max) : undefined, { stacked: view.stacked, valueAxis: view.valueAxis });
         const colors = active.map(({ s, i }) => seriesColor(s.color, i));
         const names = active.map(({ s }) => s.name);
         const cat = vertical
@@ -335,7 +349,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             ? (() => {
                 const prevRows = active.map(({ i }) => ghostState.prev[i] ?? []);
                 const nextRows = active.map(({ i }) => ghostState.next[i] ?? []);
-                return barLayout(prevRows, view.labels.length, plot, orientation, radius, layout.scale).bars.map((g, k) => {
+                return barLayout(prevRows, view.labels.length, plot, orientation, radius, layout.scale, { stacked: view.stacked }).bars.map((g, k) => {
                     const cur = layout.bars[k] ?? g;
                     const a = barEnd(g, vertical);
                     const z = barEnd(cur, vertical);

package/dist/charts/llms.txt

@@ -19,9 +19,19 @@ proportionally (`width={300} height={180}`) instead of letting a 600-unit chart
 
 ## 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
+valueAxis?, stacked?, crosshair?, tooltip?, legend?, title?, subtitle?, animation?, ariaLabel?, description? }` - the same shape the Angular port
 takes, because both read it from `@konce-pt/chart`.
 
+## Value axis and stacking (line, bar)
+- `valueAxis?: { zero?, min?, max? }` - the value axis starts at zero by default, so a bar and the area under a line
+  show the size directly. `zero: false` fits the axis to the data (a weight of 79-90 kg is no longer a flat line under
+  the ceiling); `min` / `max` pin an end of the axis exactly and win over `zero` - a value beyond a pinned end is
+  cut at the edge. Bars and areas grow from zero, or from the end of the axis nearer to it
+- `stacked?: boolean` - stacked series: bars on top of each other in one band per category (positive values up,
+  negative down; only the outer segment is rounded), lines as running totals with a band under each one (with
+  `area`). The axis covers the totals; the tooltip shows the values of the series, not the totals
+- The rules live in `@konce-pt/chart`: `axisScale`, `chartScale`, `stackSeries`, `bandPath` (tested)
+
 ## The geometry lives in a package
 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

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

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptColumnGroup } from '@konce-pt/table';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 import { type KptSpeechColor } from '../speech/speech-button.tsx';
 import type { KptCellEditEvent, KptCellEditRenderers, KptCellRenderers, KptColumn, KptTableLazyState } from './data-table-types.ts';
@@ -45,6 +46,12 @@ export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     /** Szerokość kolumny bez liczalnego `width` w trybie `virtualScroll` (`px`/`rem`/`em`). */
     columnWidth?: string;
     rowHeight?: number;
+    /**
+     * Nagłówki grupowane: wiersz nad etykietami, w którym sąsiednie kolumny grupy dzielą komórkę
+     * (`[{ header: 'Makroskładniki', fields: ['carbs', 'protein', 'fat'] }]`). Liczony z kolumn
+     * widocznych, w bieżącej kolejności - ukryta albo przestawiona kolumna wypada z grupy sama.
+     */
+    columnGroups?: readonly KptColumnGroup[];
     reorderable?: boolean;
     /**
      * Przykleja kolumny systemowe (rozwijanie, zaznaczanie) do lewej krawędzi także bez kolumn `frozen`.
@@ -83,4 +90,4 @@ export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     /** Treść po lewej stronie paginatora (odpowiednik slotu `[kptPaginatorActions]`). */
     paginatorActions?: ReactNode;
 }
-export declare function KptDataTable<T = Record<string, unknown>>({ columns, data, filterable, filterSpeech, filterSpeechLang, filterSpeechColor, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, ariaLabel, caption, clickableRows, emptyMessage, rowKey, scrollHeight, virtualScroll, columnWidth, rowHeight, reorderable, frozenSystemColumns, exportable, exportFilename, lazy, totalRecords, expandable, multiExpand, summaryLabel, summaryValues, selection, defaultSelection, onSelectionChange, expandedRows, defaultExpandedRows, onExpandedRowsChange, hiddenFields, defaultHiddenFields, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }: Readonly<KptDataTableProps<T>>): import("react").JSX.Element;
+export declare function KptDataTable<T = Record<string, unknown>>({ columns, data, filterable, filterSpeech, filterSpeechLang, filterSpeechColor, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, ariaLabel, caption, clickableRows, emptyMessage, rowKey, scrollHeight, virtualScroll, columnWidth, rowHeight, reorderable, columnGroups, frozenSystemColumns, exportable, exportFilename, lazy, totalRecords, expandable, multiExpand, summaryLabel, summaryValues, selection, defaultSelection, onSelectionChange, expandedRows, defaultExpandedRows, onExpandedRowsChange, hiddenFields, defaultHiddenFields, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }: Readonly<KptDataTableProps<T>>): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { aggregate, columnOffsets, createGlobalFilter, cssLengthToPx, isEmptyFilterValue, matchesColumnFilter, sortRows, toText, virtualColumnRange, virtualRange, } from '@konce-pt/table';
+import { aggregate, columnOffsets, createGlobalFilter, cssLengthToPx, groupHeaderCells, isEmptyFilterValue, matchesColumnFilter, sortRows, toText, virtualColumnRange, virtualRange, } from '@konce-pt/table';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -82,7 +82,7 @@ const EMPTY_FIELDS = [];
 function getValue(row, field) {
     return row[field];
 }
-export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterSpeech = false, filterSpeechLang, filterSpeechColor, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, ariaLabel = null, caption = null, clickableRows, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, columnWidth = '10rem', rowHeight = 41, reorderable = false, frozenSystemColumns = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
+export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterSpeech = false, filterSpeechLang, filterSpeechColor, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, ariaLabel = null, caption = null, clickableRows, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, columnWidth = '10rem', rowHeight = 41, reorderable = false, columnGroups, frozenSystemColumns = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const uid = useId();
     const rowsClickable = clickableRows ?? onRowClick !== undefined;
@@ -149,6 +149,8 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const [viewport, setViewport] = useState({ height: 400, width: 1200 });
     const scrollFrame = useRef(0);
     const [theadOffset, setTheadOffset] = useState(0);
+    /** Offset sticky trzeciego wiersza nagłówka (grupy + etykiety + filtry). */
+    const [theadOffset2, setTheadOffset2] = useState(0);
     const scrollRef = useRef(null);
     const theadRef = useRef(null);
     const editorHostRef = useRef(null);
@@ -234,14 +236,17 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
             return;
         requestLazyLoad({ pageIndex, pageSize: pageSizeState, sortField, sortDir, filter: filterText, columnFilters });
     }, [lazy, pageIndex, pageSizeState, sortField, sortDir, filterText, columnFilters]);
-    // Offset sticky drugiego wiersza nagłówka = wysokość pierwszego.
+    // Offsety sticky drugiego i trzeciego wiersza nagłówka = wysokość jednego i dwóch pierwszych.
     useLayoutEffect(() => {
-        const first = theadRef.current?.rows?.[0];
+        const rows = theadRef.current?.rows;
         // Dokładna wysokość, nie `offsetHeight`: ten zaokrągla (46,5 -> 47) i przy skali ekranu innej
         // niż 100% między wierszami nagłówka zostawała szpara, przez którą prześwitywały wiersze.
-        if (first)
-            setTheadOffset(first.getBoundingClientRect().height);
-    }, [filterRowPosition, hasColumnFilters, visibleColumns]);
+        const h1 = rows?.[0]?.getBoundingClientRect().height ?? 0;
+        const h2 = rows?.[1]?.getBoundingClientRect().height ?? 0;
+        if (rows?.[0])
+            setTheadOffset(h1);
+        setTheadOffset2(h1 + h2);
+    }, [filterRowPosition, hasColumnFilters, visibleColumns, columnGroups]);
     // Rozmiar viewportu dla wirtualizacji - także po zmianie rozmiaru kontenera bez przewinięcia.
     useLayoutEffect(() => {
         const el = scrollRef.current;
@@ -400,8 +405,22 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const tableWidth = virtualScroll
         ? scrollable.pinnedWidth + scrollable.offsets[scrollable.offsets.length - 1]
         : undefined;
-    /** Liczba wierszy nagłówka (etykiety + ewentualnie filtry) - przesunięcie `aria-rowindex`. */
-    const headerRowCount = hasColumnFilters ? 2 : 1;
+    /**
+     * Wiersz grup nad etykietami: komórki nad pozycjami `slots`. Komórka przykleja się do lewej, gdy
+     * wszystkie jej kolumny są zamrożone - inaczej przewija się z nimi. Pusta lista = bez wiersza.
+     */
+    const groupCells = columnGroups?.length
+        ? groupHeaderCells(slots.map((s) => s.meta?.col.field ?? null), columnGroups).map((cell) => {
+            const metas = slots.slice(cell.start, cell.start + cell.span).map((s) => s.meta);
+            const spacer = metas.some((m) => m === null);
+            const frozen = !spacer && metas.every((m) => m?.frozen);
+            return { ...cell, key: slots[cell.start]?.key ?? String(cell.start), spacer, frozen, left: frozen ? (metas[0]?.left ?? undefined) : undefined };
+        })
+        : [];
+    /** Wiersz grup jest pierwszym wierszem nagłówka - przesuwa `aria-rowindex` pozostałych. */
+    const groupRows = groupCells.length ? 1 : 0;
+    /** Liczba wierszy nagłówka (grupy, etykiety, ewentualnie filtry) - przesunięcie `aria-rowindex`. */
+    const headerRowCount = groupRows + (hasColumnFilters ? 2 : 1);
     /** `aria-colindex` komórki kolumny (od 1, z kolumnami systemowymi) - tylko w trybie wirtualnym. */
     const colIndex = (meta) => virtualScroll ? leadingCells + meta.index + 1 : undefined;
     // -- Przestawianie kolumn --
@@ -671,7 +690,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                 return null;
         }
     };
-    const filterRowIndex = filterRowPosition === 'top' ? 1 : 2;
+    const filterRowIndex = groupRows + (filterRowPosition === 'top' ? 1 : 2);
     const filterRow = (_jsxs("tr", { className: "kpt-data-table__filter-row", "aria-rowindex": virtualScroll ? filterRowIndex : undefined, children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable !== 'none' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, slots.map((slot) => slot.meta ? (_jsx("th", { style: { width: virtualScroll ? undefined : slot.meta.col.width, left: slot.meta.left }, "data-align": slot.meta.align, "aria-colindex": colIndex(slot.meta), className: cn(slot.meta.frozen && 'kpt-data-table__cell--frozen'), children: filterCell(slot.meta.col) }, slot.key)) : (hspacer(slot)))] }));
     const editor = (row, col) => {
         const custom = cellEditors?.[col.field];
@@ -743,7 +762,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                                     startEdit(row, col, event);
                             }, children: editing ? (_jsx("div", { ref: editorHostRef, className: "kpt-data-table__editor", onClick: (event) => event.stopPropagation(), onBlur: onEditorFocusOut, children: editor(row, col) })) : cells?.[col.field] ? (cells[col.field](row, getValue(row, col.field))) : getValue(row, col.field) }, slot.key));
                     })] }), hasRowDetail && isExpanded(row) && !virtualScroll ? (_jsx("tr", { className: "kpt-data-table__detail-row", children: _jsx("td", { className: "kpt-data-table__detail", colSpan: colspan, children: renderRowDetail?.(row) }) })) : null] }, rowKey ? String(getValue(row, rowKey)) : index));
-    return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsxs("div", { className: "kpt-data-table__search", "data-speech": filterSpeechState, children: [_jsx("input", { ref: filterRef, className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), "aria-label": t('dataTable.search'), value: filterInput, onChange: (event) => onFilterInput(event.target.value) }), filterSpeech ? (_jsx(KptSpeechButton, { listeningColor: filterSpeechColor, speech: filterMic, size: "sm", unsupported: "hide", hostProps: { className: 'kpt-data-table__speech' } })) : null] })) : null, exportable ? (_jsx(KptButton, { variant: "outline", size: "sm", onClick: () => exportTableCsv(visibleColumns, (lazy ? data : sorted), exportFilename), children: t('dataTable.exportCsv') })) : null] })) : null, _jsx("div", { ref: scrollRef, className: "kpt-data-table__scroll", style: { maxHeight: scrollHeight ?? undefined }, onScroll: onScroll, children: _jsxs("table", { className: cn('kpt-data-table__table', hasFrozen && 'kpt-data-table__table--frozen', virtualScroll && 'kpt-data-table__table--virtual'), style: { width: tableWidth }, "aria-label": ariaLabel ?? undefined, "aria-busy": loading || undefined, "aria-rowcount": virtualScroll ? headerRowCount + sorted.length + (hasSummary ? 1 : 0) : undefined, "aria-colcount": virtualScroll ? leadingCells + visibleColumns.length : undefined, children: [caption ? _jsx("caption", { className: "kpt-data-table__caption", children: _jsx("span", { className: "kpt-data-table__caption-text", children: caption }) }) : null, virtualScroll ? (_jsxs("colgroup", { children: [hasRowDetail ? _jsx("col", { className: "kpt-data-table__col-expander" }) : null, selectable !== 'none' ? _jsx("col", { className: "kpt-data-table__col-checkbox" }) : null, slots.map((slot) => (_jsx("col", { style: { width: slot.width } }, slot.key)))] })) : null, _jsxs("thead", { ref: theadRef, children: [hasColumnFilters && filterRowPosition === 'top' ? filterRow : null, _jsxs("tr", { "aria-rowindex": virtualScroll ? (hasColumnFilters && filterRowPosition === 'top' ? 2 : 1) : undefined, children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable === 'multiple' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: pageAllSelected, ref: (el) => {
+    return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ['--kpt-thead-offset-2']: `${theadOffset2}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsxs("div", { className: "kpt-data-table__search", "data-speech": filterSpeechState, children: [_jsx("input", { ref: filterRef, className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), "aria-label": t('dataTable.search'), value: filterInput, onChange: (event) => onFilterInput(event.target.value) }), filterSpeech ? (_jsx(KptSpeechButton, { listeningColor: filterSpeechColor, speech: filterMic, size: "sm", unsupported: "hide", hostProps: { className: 'kpt-data-table__speech' } })) : null] })) : null, exportable ? (_jsx(KptButton, { variant: "outline", size: "sm", onClick: () => exportTableCsv(visibleColumns, (lazy ? data : sorted), exportFilename), children: t('dataTable.exportCsv') })) : null] })) : null, _jsx("div", { ref: scrollRef, className: "kpt-data-table__scroll", style: { maxHeight: scrollHeight ?? undefined }, onScroll: onScroll, children: _jsxs("table", { className: cn('kpt-data-table__table', hasFrozen && 'kpt-data-table__table--frozen', virtualScroll && 'kpt-data-table__table--virtual'), style: { width: tableWidth }, "aria-label": ariaLabel ?? undefined, "aria-busy": loading || undefined, "aria-rowcount": virtualScroll ? headerRowCount + sorted.length + (hasSummary ? 1 : 0) : undefined, "aria-colcount": virtualScroll ? leadingCells + visibleColumns.length : undefined, children: [caption ? _jsx("caption", { className: "kpt-data-table__caption", children: _jsx("span", { className: "kpt-data-table__caption-text", children: caption }) }) : null, virtualScroll ? (_jsxs("colgroup", { children: [hasRowDetail ? _jsx("col", { className: "kpt-data-table__col-expander" }) : null, selectable !== 'none' ? _jsx("col", { className: "kpt-data-table__col-checkbox" }) : null, slots.map((slot) => (_jsx("col", { style: { width: slot.width } }, slot.key)))] })) : null, _jsxs("thead", { ref: theadRef, children: [groupCells.length ? (_jsxs("tr", { className: "kpt-data-table__group-row", "aria-rowindex": virtualScroll ? 1 : undefined, children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable !== 'none' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, groupCells.map((cell) => cell.spacer ? (_jsx("td", { className: "kpt-data-table__hspacer", colSpan: cell.span, "aria-hidden": "true" }, cell.key)) : (_jsx("th", { className: cn('kpt-data-table__group', !cell.header && 'kpt-data-table__group--empty', cell.frozen && 'kpt-data-table__cell--frozen'), style: { left: cell.left }, colSpan: cell.span > 1 ? cell.span : undefined, scope: cell.header ? 'colgroup' : undefined, children: cell.header }, cell.key)))] })) : null, hasColumnFilters && filterRowPosition === 'top' ? filterRow : null, _jsxs("tr", { "aria-rowindex": virtualScroll ? groupRows + (hasColumnFilters && filterRowPosition === 'top' ? 2 : 1) : undefined, children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable === 'multiple' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: pageAllSelected, ref: (el) => {
                                                     if (el)
                                                         el.indeterminate = pageSomeSelected;
                                                 }, "aria-label": t('dataTable.selectAll'), onChange: toggleAllOnPage }) })) : selectable === 'single' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, slots.map((slot) => {

package/dist/data-table/llms.txt

@@ -18,6 +18,11 @@ rendered header.
 
 ## Props
 - `columns` (required), `data`
+- `columnGroups`: KptColumnGroup[] - grouped headers: a row above the column labels where adjacent columns of a
+  group share one cell (`[{ header: 'Macros', fields: ['carbs', 'protein', 'fat'] }]`, `scope="colgroup"`). It is
+  computed from the visible columns in their current order: a hidden column drops out, a group split by reordering
+  gets two cells with the same text, a column without a group gets an empty cell. A cell sticks to the left only
+  when all its columns are `frozen`. With column filters the header has three rows and all of them stay sticky
 - `filterable`, `filterRowPosition` (`'bottom'` default), `pageSize` (0 = no pagination),
   `pageSizeOptions`, `selectable` (`'none' | 'single' | 'multiple'`), `loading`, `emptyMessage`,
   `rowKey`, `scrollHeight`, `virtualScroll` (rows **and** columns, see below), `columnWidth`
@@ -113,7 +118,7 @@ The toolbar, the states and the filter labels come from the `dataTable` namespac
 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
+A ready column-toggle UI is not part of either
 port - `hiddenFields` is the hook to build one on.
 
 ## Filter by voice

package/dist/dialog/dialog.js

@@ -50,9 +50,16 @@ export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismis
      * `close` przychodzi z każdej drogi. Przy `dismissible=false` zamknąć wolno tylko z kodu:
      * Chromium z CloseWatcherem pozwala anulować `cancel` jedynie po aktywacji użytkownika, więc drugi
      * Escape z rzędu zamyka okno mimo `preventDefault` - wtedy otwieramy je z powrotem.
+     *
+     * Zdarzenie `close` jest asynchroniczne, więc może dojść, gdy okno jest już znowu otwarte: pod
+     * `StrictMode` efekt montuje się dwa razy (`showModal` -> sprzątanie `close` -> `showModal`)
+     * i dialog zamontowany od razu z `open` dostawał `onOpenChange(false)` od własnego sprzątania.
+     * Otwarty element znaczy, że to zamknięcie jest nieaktualne.
      */
     const onClose = () => {
         const el = dialogRef.current;
+        if (el?.open)
+            return;
         if (!dismissible && open && el && !el.open) {
             el.showModal();
             return;

package/dist/galleria/galleria.d.ts

@@ -21,6 +21,12 @@ export interface KptGalleriaProps extends Omit<ComponentPropsWithRef<'div'>, 'on
  * aktywną. Miniatura ma nazwę z `alt` obrazu i `aria-current` na aktywnej, a zmiana obrazu jest
  * ogłaszana uprzejmie ("Obraz 2 z 4: ...") - dopiero po działaniu użytkownika, nie przy starcie.
  *
+ * Ruch: nowe zdjęcie wjeżdża w kierunku zmiany na sprężynie, a poprzednie cofa się wolniej
+ * i przygasa (paralaksa); rodzaj z `enter` w `KptMotionProvider`, przy "ogranicz ruch" - przenikanie.
+ * Pasek miniatur nie ma paska przewijania: przewija się przeciąganiem (mysz, pióro, palec)
+ * albo strzałkami paska, krawędzie gasną tam, gdzie jest coś dalej, a aktywna miniatura
+ * zawsze wraca do widoku.
+ *
  * @example
  * <KptGalleria items={photos} activeIndex={index} onActiveIndexChange={setIndex} />
  */