@konce-pt/react 0.11.2 → 0.12.0

package/dist/clock/clock.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
-export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
     /** Godzina jako 'HH:mm' — zawsze 24h, niezależnie od `hourFormat`. */
     value?: string;
     onValueChange?: (value: string) => void;
@@ -8,10 +9,14 @@ export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onCha
 }
 /**
  * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
- * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM. Używana przez `KptDatepicker`
- * i `KptDateRange`.
+ * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
+ * przez `KptDatepicker` i `KptDateRange`.
+ *
+ * Klawiatura: segmenty godzin i minut to `role="spinbutton"` — `↑`/`↓` o jeden krok (minuty
+ * o `minuteStep`), `PageUp`/`PageDown` o pięć, `Home`/`End` do granic. Tak da się ustawić każdą
+ * minutę, także spoza znaczników tarczy co pięć.
  *
  * @example
  * <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
  */
-export declare function KptClock({ value, onValueChange, hourFormat, minuteStep, className, ...rest }: Readonly<KptClockProps>): import("react").JSX.Element;
+export declare function KptClock({ value, onValueChange, hourFormat, minuteStep, locale, dictionary, className, ...rest }: Readonly<KptClockProps>): import("react").JSX.Element;

package/dist/clock/clock.js

@@ -1,16 +1,25 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { from12h, handAngle, handIsInner, hourFromAngle, hourMarks, minuteFromAngle, minuteMarks, pad, parseTime, } from '@konce-pt/datetime';
+import { dayPeriodLabels, from12h, handAngle, handIsInner, hourFromAngle, hourMarks, minuteFromAngle, minuteMarks, pad, parseTime, stepClockTime, } from '@konce-pt/datetime';
 import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+/** Klawisze segmentu czasu → liczba kroków. */
+const SEGMENT_STEPS = { ArrowUp: 1, ArrowDown: -1, PageUp: 5, PageDown: -5 };
 /**
  * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
- * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM. Używana przez `KptDatepicker`
- * i `KptDateRange`.
+ * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
+ * przez `KptDatepicker` i `KptDateRange`.
+ *
+ * Klawiatura: segmenty godzin i minut to `role="spinbutton"` — `↑`/`↓` o jeden krok (minuty
+ * o `minuteStep`), `PageUp`/`PageDown` o pięć, `Home`/`End` do granic. Tak da się ustawić każdą
+ * minutę, także spoza znaczników tarczy co pięć.
  *
  * @example
  * <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
  */
-export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteStep = 1, className, ...rest }) {
+export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteStep = 1, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const faceRef = useRef(null);
     const [phase, setPhase] = useState('hours');
     // Wartość jest jedynym źródłem prawdy — stan tarczy wyliczamy z niej przy każdym renderze,
@@ -20,7 +29,28 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
     const minute = parsed?.m ?? 0;
     const ampm = hour < 12 ? 'AM' : 'PM';
     const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+    const periods = dayPeriodLabels(activeLocale);
+    const hourLabel = hourFormat === 12 ? String(hour12) : pad(hour);
+    // W 12h czytnik słyszy godzinę z porą dnia („9 PM”), nie samą liczbę 21.
+    const hourText = hourFormat === 12 ? `${hour12} ${ampm === 'AM' ? periods.am : periods.pm}` : hourLabel;
     const emit = (h, m) => onValueChange?.(`${pad(h)}:${pad(m)}`);
+    const onSegmentKey = (part, event) => {
+        let next;
+        if (event.key === 'Home') {
+            next = part === 'hours' ? { h: 0, m: minute } : { h: hour, m: 0 };
+        }
+        else if (event.key === 'End') {
+            next = part === 'hours' ? { h: 23, m: minute } : { h: hour, m: 60 - Math.max(1, minuteStep) };
+        }
+        else {
+            const delta = SEGMENT_STEPS[event.key];
+            if (delta === undefined)
+                return;
+            next = stepClockTime(hour, minute, part, delta, minuteStep);
+        }
+        event.preventDefault();
+        emit(next.h, next.m);
+    };
     const onDialPointer = (event) => {
         const face = faceRef.current;
         if (!face)
@@ -45,7 +75,7 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
         }
     };
     const marks = phase === 'hours' ? hourMarks(hour, hourFormat) : minuteMarks(minute);
-    return (_jsx("div", { className: cn('kpt-clock-host', className), ...rest, children: _jsxs("div", { className: "kpt-clock", children: [_jsxs("div", { className: "kpt-clock__time", children: [_jsx("button", { type: "button", className: cn('kpt-clock__seg', phase === 'hours' && 'is-active'), onClick: () => setPhase('hours'), children: hourFormat === 12 ? String(hour12) : pad(hour) }), _jsx("span", { className: "kpt-clock__colon", children: ":" }), _jsx("button", { type: "button", className: cn('kpt-clock__seg', phase === 'minutes' && 'is-active'), onClick: () => setPhase('minutes'), children: pad(minute) }), hourFormat === 12 ? (_jsxs("div", { className: "kpt-clock__ampm", children: [_jsx("button", { type: "button", className: cn(ampm === 'AM' && 'is-active'), onClick: () => emit(from12h(hour12, 'AM'), minute), children: "AM" }), _jsx("button", { type: "button", className: cn(ampm === 'PM' && 'is-active'), onClick: () => emit(from12h(hour12, 'PM'), minute), children: "PM" })] })) : null] }), _jsxs("div", { ref: faceRef, className: "kpt-clock__face", onPointerDown: onDialPointer, onPointerMove: onDialPointer, onPointerUp: () => phase === 'hours' && setPhase('minutes'), children: [_jsx("span", { className: "kpt-clock__center" }), _jsx("span", { className: cn('kpt-clock__hand', handIsInner(hour, hourFormat, phase) && 'kpt-clock__hand--inner'), style: { transform: `rotate(${handAngle(hour, minute, phase)}deg)` } }), marks.map((mark) => (_jsx("button", { type: "button", className: cn('kpt-clock__num', mark.inner && 'kpt-clock__num--inner', mark.selected && 'kpt-clock__num--selected'), style: { left: `${mark.x}%`, top: `${mark.y}%` }, onClick: () => {
+    return (_jsx("div", { className: cn('kpt-clock-host', className), ...rest, children: _jsxs("div", { className: "kpt-clock", children: [_jsxs("div", { className: "kpt-clock__time", children: [_jsx("span", { className: cn('kpt-clock__seg', phase === 'hours' && 'is-active'), role: "spinbutton", tabIndex: 0, "aria-label": t('clock.hours'), "aria-valuemin": 0, "aria-valuemax": 23, "aria-valuenow": hour, "aria-valuetext": hourText, onClick: () => setPhase('hours'), onFocus: () => setPhase('hours'), onKeyDown: (event) => onSegmentKey('hours', event), children: hourLabel }), _jsx("span", { className: "kpt-clock__colon", "aria-hidden": "true", children: ":" }), _jsx("span", { className: cn('kpt-clock__seg', phase === 'minutes' && 'is-active'), role: "spinbutton", tabIndex: 0, "aria-label": t('clock.minutes'), "aria-valuemin": 0, "aria-valuemax": 59, "aria-valuenow": minute, "aria-valuetext": pad(minute), onClick: () => setPhase('minutes'), onFocus: () => setPhase('minutes'), onKeyDown: (event) => onSegmentKey('minutes', event), children: pad(minute) }), hourFormat === 12 ? (_jsxs("div", { className: "kpt-clock__ampm", role: "group", children: [_jsx("button", { type: "button", className: cn(ampm === 'AM' && 'is-active'), "aria-pressed": ampm === 'AM', onClick: () => emit(from12h(hour12, 'AM'), minute), children: periods.am }), _jsx("button", { type: "button", className: cn(ampm === 'PM' && 'is-active'), "aria-pressed": ampm === 'PM', onClick: () => emit(from12h(hour12, 'PM'), minute), children: periods.pm })] })) : null] }), _jsxs("div", { ref: faceRef, className: "kpt-clock__face", role: "group", "aria-label": phase === 'hours' ? t('clock.hours') : t('clock.minutes'), onPointerDown: onDialPointer, onPointerMove: onDialPointer, onPointerUp: () => phase === 'hours' && setPhase('minutes'), children: [_jsx("span", { className: "kpt-clock__center" }), _jsx("span", { className: cn('kpt-clock__hand', handIsInner(hour, hourFormat, phase) && 'kpt-clock__hand--inner'), style: { transform: `rotate(${handAngle(hour, minute, phase)}deg)` } }), marks.map((mark) => (_jsx("button", { type: "button", className: cn('kpt-clock__num', mark.inner && 'kpt-clock__num--inner', mark.selected && 'kpt-clock__num--selected'), "aria-pressed": mark.selected, style: { left: `${mark.x}%`, top: `${mark.y}%` }, onClick: () => {
                                 if (phase === 'hours') {
                                     emit(mark.value, minute);
                                     setPhase('minutes');

package/dist/clock/llms.txt

@@ -46,5 +46,9 @@ The dial `--kpt-color-surface-raised`, the hand and the selection `--kpt-color-p
 the numbers `--kpt-color-on-surface`.
 
 ## Accessibility
-Every mark is a real `<button>`, so the dial can be used without a pointer; the hour and minute
-segments are buttons too and switch the stage.
+Every mark is a real `<button>` with `aria-pressed`, inside a group named "Hours"/"Minutes". The hour and
+minute segments are `role="spinbutton"`: Tab to them, `↑`/`↓` step by one (minutes by `minuteStep`),
+`PageUp`/`PageDown` by five, `Home`/`End` to the bounds — so every minute is reachable, not only the
+five-minute marks. Focusing a segment switches the stage. AM/PM labels come from `Intl` for the active
+language and the hour's `aria-valuetext` includes the period ("9 PM"). `locale`/`dictionary` override the
+language for this component.

package/dist/color-picker/color-picker.d.ts

@@ -20,6 +20,10 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
     /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
     ariaLabel?: string | null;
     disabled?: boolean;
+    /** Tylko do odczytu — kolor widać, nie da się go zmienić. */
+    readOnly?: boolean;
+    /** Pole wymagane — `aria-required` na polu kodu. */
+    required?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -33,4 +37,4 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
  * @example
  * <KptColorPicker value={color} onValueChange={setColor} />
  */
-export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, id, ariaLabel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;
+export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, id, ariaLabel, disabled, readOnly, required, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;

package/dist/color-picker/color-picker.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -16,7 +17,16 @@ const DEFAULT_NAMES = {
     '#111827': 'black',
     '#ffffff': 'white',
 };
-const HEX = /^#[0-9a-f]{6}$/i;
+/**
+ * Kod z pola tekstowego jako `#rrggbb` albo `null`. Przyjmuje zapis bez `#` i skrót `#rgb`
+ * (`#fff` → `#ffffff`). Bliźniak w porcie Angulara (`color-picker.component.ts`) — zmiana w obu.
+ */
+function parseHex(text) {
+    const raw = text.trim().replace(/^#/, '').toLowerCase();
+    if (/^[0-9a-f]{3}$/.test(raw))
+        return `#${[...raw].map((c) => c + c).join('')}`;
+    return /^[0-9a-f]{6}$/.test(raw) ? `#${raw}` : null;
+}
 /**
  * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
  *
@@ -26,12 +36,16 @@ const HEX = /^#[0-9a-f]{6}$/i;
  * @example
  * <KptColorPicker value={color} onValueChange={setColor} />
  */
-export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange, presets = DEFAULT_PRESETS, id, ariaLabel = null, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange, presets = DEFAULT_PRESETS, id, ariaLabel = null, disabled = false, readOnly = false, required = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-color-picker');
-    /** Tekst w polu hex, dopóki nie jest poprawnym kodem — wartość zmienia się dopiero na `#rrggbb`. */
+    /**
+     * Tekst w polu hex dokładnie tak, jak go wpisano, do wyjścia z pola. Wartość zmienia się, gdy tekst
+     * staje się poprawnym kodem, ale pole nie jest przepisywane w trakcie pisania (doklejenie `#`
+     * przenosiło kursor na koniec przy edycji w środku).
+     */
     const [hexDraft, setHexDraft] = useState(null);
-    const hexInvalid = hexDraft !== null && !HEX.test(hexDraft);
+    const hexInvalid = hexDraft !== null && hexDraft.trim() !== '' && parseHex(hexDraft) === null;
     const presetList = presets.map((preset) => {
         const item = typeof preset === 'string' ? { value: preset, label: '' } : preset;
         const named = DEFAULT_NAMES[item.value.toLowerCase()];
@@ -39,24 +53,29 @@ export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange,
     });
     const isActive = (color) => color.toLowerCase() === current.toLowerCase();
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
-    return (_jsx("div", { className: cn('kpt-color-picker-host', className), ...rest, children: _jsxs("div", { className: "kpt-color-picker", children: [_jsx("label", { className: "kpt-color-picker__swatch", style: { backgroundColor: current }, children: _jsx("input", { type: "color", value: current, disabled: disabled, "aria-label": t('colorPicker.picker'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }) }), _jsx("input", { type: "text", className: "kpt-color-picker__hex", id: field.id, "aria-label": field.labelledBy ? undefined : (ariaLabel ?? t('colorPicker.hex')), "aria-describedby": field.describedBy, value: hexDraft ?? current, disabled: disabled, maxLength: 7, "aria-invalid": (invalid && (touched ?? true)) || hexInvalid || undefined, onChange: (event) => {
-                        let text = event.target.value.trim();
-                        if (text && !text.startsWith('#'))
-                            text = `#${text}`;
-                        if (HEX.test(text)) {
+    return (_jsx("div", { className: cn('kpt-color-picker-host', className), ...rest, children: _jsxs("div", { className: "kpt-color-picker", children: [_jsx("label", { className: "kpt-color-picker__swatch", style: { backgroundColor: current }, children: _jsx("input", { type: "color", value: current, disabled: disabled, "aria-label": t('colorPicker.picker'), "aria-readonly": readOnly || undefined, onClick: (event) => {
+                            if (readOnly)
+                                event.preventDefault();
+                        }, onChange: (event) => {
+                            if (readOnly)
+                                return;
                             setHexDraft(null);
-                            setCurrent(text.toLowerCase());
-                        }
-                        else {
-                            setHexDraft(text);
-                        }
+                            setCurrent(event.target.value);
+                        }, onBlur: () => onTouch?.() }) }), _jsx("input", { type: "text", className: "kpt-color-picker__hex", id: field.id, "aria-label": field.labelledBy ? undefined : (ariaLabel ?? t('colorPicker.hex')), "aria-describedby": field.describedBy, value: hexDraft ?? current, disabled: disabled, readOnly: readOnly, "aria-required": required || undefined, maxLength: 7, "aria-invalid": (invalid && (touched ?? true)) || hexInvalid || undefined, onChange: (event) => {
+                        const text = event.target.value;
+                        setHexDraft(text);
+                        const hex = parseHex(text);
+                        if (hex)
+                            setCurrent(hex);
                     }, onBlur: () => {
-                        // Wyjście z pola z niepełnym kodem zostawia go widocznym i oznaczonym `aria-invalid`.
-                        if (hexDraft === '')
+                        // Poprawny albo pusty kod chowa szkic; niepełny zostaje widoczny z `aria-invalid`.
+                        if (hexDraft !== null && (hexDraft.trim() === '' || parseHex(hexDraft)))
                             setHexDraft(null);
                         onTouch?.();
-                    } }), _jsx("div", { className: "kpt-color-picker__presets", children: presetList.map((preset) => (_jsx("button", { type: "button", className: cn('kpt-color-picker__preset', isActive(preset.value) && 'is-active'), style: { backgroundColor: preset.value }, disabled: disabled, "aria-pressed": isActive(preset.value), onClick: () => {
+                    } }), _jsx("div", { className: "kpt-color-picker__presets", children: presetList.map((preset) => (_jsx("button", { type: "button", className: cn('kpt-color-picker__preset', isActive(preset.value) && 'is-active'), style: { backgroundColor: preset.value }, disabled: disabled || readOnly, "aria-pressed": isActive(preset.value), onClick: () => {
                             setHexDraft(null);
                             setCurrent(preset.value);
+                            // Wybór presetem to też dotknięcie pola — inaczej błąd walidacji nigdy by się nie pokazał.
+                            onTouch?.();
                         }, "aria-label": preset.label }, preset.value))) })] }) }));
 }

package/dist/color-picker/llms.txt

@@ -52,3 +52,6 @@ preset `--kpt-color-focus-ring`.
 ## Accessibility
 Every preset is a `<button>` labelled with its hex value; the hex field carries `aria-invalid` once
 the field is touched.
+
+## Read-only and required
+`readOnly` blocks the picker, the code field and the presets; `required` sets `aria-required` on the code field. Picking a preset or a colour counts as a touch. The code field takes `fff`, `#fff` and `#ffffff` and is not rewritten while typing, so the caret does not jump.

package/dist/confirm/confirm-container.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";

package/dist/confirm/confirm-store.js

@@ -1,4 +1,5 @@
 import { useSyncExternalStore } from 'react';
+import { isDevBuild } from "../internal/dev.js";
 /*
  * Magazyn potwierdzeń jako moduł-singleton — odpowiednik serwisu `providedIn: 'root'` z Angulara,
  * ten sam wzorzec co `kptToast`. Dzięki temu `await kptConfirm(...)` woła się także spoza drzewa
@@ -21,6 +22,11 @@ function emit() {
  * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
  */
 export function kptConfirm(options) {
+    // Kontener subskrybuje magazyn — bez subskrybentów nikt nie pokaże okna ani nie rozstrzygnie obietnicy.
+    if (isDevBuild() && listeners.size === 0) {
+        console.warn('kptConfirm: brak <KptConfirmContainer /> w aplikacji — okno się nie pokaże, ' +
+            'a obietnica nie rozstrzygnie się, dopóki kontener nie zostanie dodany.');
+    }
     return new Promise((resolve) => {
         current?.resolve(false);
         current = { id: ++seq, ...options, resolve };

package/dist/confirm/llms.txt

@@ -22,7 +22,8 @@ current request through `useSyncExternalStore` for anyone rendering their own co
 ## The promise always settles
 Escape and the × close the dialog through `onOpenChange`, which resolves `false` — an awaiting
 caller is never left hanging. A second `kptConfirm()` while one is open rejects the previous
-request for the same reason: one request at a time, and nothing is dropped silently.
+request for the same reason: one request at a time, and nothing is dropped silently. Without a
+mounted `<KptConfirmContainer />` nobody can show the dialog, so a dev build warns in the console.
 
 ## Examples
     <KptConfirmContainer />

package/dist/context-menu/context-menu.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { MenuRows } from "../menu/menu-rows.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
@@ -26,6 +27,9 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
     const [open, setOpen] = useState(false);
     const [point, setPoint] = useState({ x: 0, y: 0 });
     const panelRef = useRef(null);
+    const layerRef = useRef(null);
+    /** Licznik otwarć — każde PPM (także przy otwartym menu) dociska panel i ustawia fokus od nowa. */
+    const [openSeq, setOpenSeq] = useState(0);
     /** Element, który miał fokus przed otwarciem — tam fokus wraca po zamknięciu. */
     const returnTo = useRef(null);
     const onContextMenu = (event) => {
@@ -41,21 +45,27 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
             setPoint({ x: event.clientX, y: event.clientY });
         }
         setOpen(true);
+        setOpenSeq((n) => n + 1);
     };
-    // Po otwarciu: dociśnięcie do okna i fokus na pierwszej pozycji.
-    useEffect(() => {
+    // Po każdym otwarciu: warstwa w top layer, dociśnięcie do okna i fokus na pierwszej pozycji.
+    // Przed malowaniem (`useLayoutEffect`), żeby panel nie mignął w niedociśniętym miejscu. Docisk
+    // idzie wprost w styl elementu — stan `point` zostaje, więc React go nie nadpisze.
+    useLayoutEffect(() => {
         const panel = panelRef.current;
-        if (!open || !panel)
+        if (openSeq === 0 || !panel)
             return;
+        const layer = layerRef.current;
+        if (layer && typeof layer.showPopover === 'function' && !layer.matches(':popover-open'))
+            layer.showPopover();
         const r = panel.getBoundingClientRect();
         const maxX = window.innerWidth - r.width - EDGE;
         const maxY = window.innerHeight - r.height - EDGE;
-        if (point.x > maxX || point.y > maxY) {
-            setPoint({ x: Math.max(EDGE, Math.min(point.x, maxX)), y: Math.max(EDGE, Math.min(point.y, maxY)) });
-        }
+        if (r.left > maxX)
+            panel.style.left = `${Math.max(EDGE, maxX)}px`;
+        if (r.top > maxY)
+            panel.style.top = `${Math.max(EDGE, maxY)}px`;
         focusMenuEdge(panel, 'first');
-        // Celowo tylko `open`: dociśnięcie zmienia `point`, a ponowne uruchomienie przeniosłoby fokus.
-    }, [open]);
+    }, [openSeq]);
     const close = () => {
         setOpen(false);
         const target = returnTo.current;
@@ -63,6 +73,19 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
         if (target?.isConnected)
             target.focus();
     };
+    // Przewinięcie albo zmiana rozmiaru okna odrywa panel od miejsca kliknięcia — zamykamy go.
+    const closeOnMove = useEffectEvent(() => close());
+    useEffect(() => {
+        if (!open)
+            return;
+        const onMove = () => closeOnMove();
+        window.addEventListener('scroll', onMove, true);
+        window.addEventListener('resize', onMove);
+        return () => {
+            window.removeEventListener('scroll', onMove, true);
+            window.removeEventListener('resize', onMove);
+        };
+    }, [open]);
     const onPanelKeyDown = (event) => {
         if (panelRef.current && handleMenuKeydown(panelRef.current, event.nativeEvent) === 'close')
             close();
@@ -73,8 +96,8 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
         onSelect?.(item);
         close();
     };
-    return (_jsxs("div", { className: cn('kpt-context-menu-host', className), ...rest, children: [_jsx("div", { className: "kpt-context-menu__area", onContextMenu: onContextMenu, children: children }), open ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-context-menu__backdrop", onClick: close, onContextMenu: (event) => {
+    return (_jsxs("div", { className: cn('kpt-context-menu-host', className), ...rest, children: [_jsx("div", { className: "kpt-context-menu__area", onContextMenu: onContextMenu, children: children }), open ? (_jsxs("div", { ref: layerRef, className: "kpt-context-menu__layer", popover: "manual", children: [_jsx("div", { className: "kpt-context-menu__backdrop", onClick: close, onContextMenu: (event) => {
                             event.preventDefault();
                             close();
-                        } }), _jsx("div", { ref: panelRef, className: "kpt-context-menu__panel", role: "menu", style: { left: point.x, top: point.y }, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-context-menu", onPick: pick }) })] })) : null] }));
+                        } }), _jsx("div", { ref: panelRef, className: "kpt-context-menu__panel", role: "menu", tabIndex: -1, style: { left: point.x, top: point.y }, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-context-menu", onPick: pick }) })] })) : null] }));
 }

package/dist/context-menu/llms.txt

@@ -44,3 +44,6 @@ no right click, so still offer the same actions through a visible button with `K
 ## Accessibility
 The panel is `role="menu"` with `role="menuitem"` buttons at `tabindex="-1"` (one Tab stop). Keyboard — see
 "Keyboard" above.
+
+## Positioning
+The panel opens in the top layer (`popover="manual"`), so an ancestor with `transform`, `filter` or `backdrop-filter` (an animated card, a glass panel) no longer shifts it and `overflow: hidden` no longer clips it. Scrolling or resizing the window closes the menu.

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

@@ -11,7 +11,17 @@ export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     pageSize?: number;
     pageSizeOptions?: readonly number[];
     selectable?: 'none' | 'single' | 'multiple';
+    /** Trwa ładowanie — tabela dostaje `aria-busy`, a ciało pokazuje komunikat `dataTable.loading`. */
     loading?: boolean;
+    /** Nazwa dostępna tabeli, gdy nie ma widocznego podpisu (`caption`). */
+    ariaLabel?: string | null;
+    /** Widoczny podpis tabeli (`<caption>`) — zarazem jej nazwa dla czytnika. */
+    caption?: string | null;
+    /**
+     * Wiersze jako akcja: fokusowalne (Tab) i aktywowane Enterem/Spacją, które wołają `onRowClick`.
+     * Domyślnie włączone, gdy podano `onRowClick` — inaczej klik w wiersz działałby tylko myszą.
+     */
+    clickableRows?: boolean;
     emptyMessage?: string;
     /** Pole identyfikujące wiersz; bez niego wiersze porównujemy po referencji. */
     rowKey?: string | null;
@@ -40,6 +50,7 @@ export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     defaultHiddenFields?: readonly string[];
     onHiddenFieldsChange?: (fields: readonly string[]) => void;
     onRowClick?: (row: T) => void;
+    /** Tryb lazy: woła się na starcie (pierwsza strona) i po każdej zmianie sortowania/filtra/strony. */
     onLazyLoad?: (state: KptTableLazyState) => void;
     onCellEdit?: (event: KptCellEditEvent<T>) => void;
     /** Szablony komórek: pole → funkcja renderująca. */
@@ -51,4 +62,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, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, emptyMessage, rowKey, scrollHeight, virtualScroll, rowHeight, reorderable, 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, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, ariaLabel, caption, clickableRows, emptyMessage, rowKey, scrollHeight, virtualScroll, rowHeight, reorderable, 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;