@konce-pt/react 0.11.1 → 0.12.0

package/dist/map/map-search.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
@@ -25,7 +26,6 @@ export function KptMapSearch({ geocoder = null, placeholder = '', minLength = 3,
      */
     const [term, setTerm] = useState('');
     const [results, setResults] = useState([]);
-    const [loading, setLoading] = useState(false);
     /** Trwa dociąganie współrzędnych wybranej podpowiedzi — inny moment niż czekanie na listę. */
     const [resolving, setResolving] = useState(false);
     /** Czy jakieś zapytanie już wróciło — bez tego „brak wyników" mignąłby przed pierwszym. */
@@ -37,40 +37,64 @@ export function KptMapSearch({ geocoder = null, placeholder = '', minLength = 3,
     /** Przerywacz dociągania w locie — kolejny wybór i czyszczenie pola go używają. */
     const pending = useRef(null);
     const canSearch = !!geocoder?.search;
+    /*
+     * Zapytanie do geokodera jako wartość: nowa tożsamość = nowe zapytanie. `viewbox` i `countryCodes`
+     * wchodzą jako klucze tekstowe — rodzic podaje je zwykle świeżą tablicą w każdym renderze, a to
+     * restartowałoby odliczanie przy każdym ruchu mapy i zapytanie nigdy by nie wyszło.
+     */
+    const needle = term.trim();
+    const viewboxKey = viewbox ? JSON.stringify(viewbox) : '';
+    const countryKey = countryCodes?.join(',') ?? '';
+    const request = useMemo(() => {
+        if (!geocoder?.search || needle.length < minLength)
+            return null;
+        return {
+            geocoder,
+            needle,
+            options: {
+                language: locale,
+                limit,
+                viewbox: viewboxKey ? JSON.parse(viewboxKey) : undefined,
+                countryCodes: countryKey ? countryKey.split(',') : undefined,
+            },
+        };
+    }, [geocoder, needle, minLength, locale, limit, viewboxKey, countryKey]);
+    /** Zapytanie, na które przyszła już odpowiedź (albo błąd). */
+    const [settled, setSettled] = useState(null);
+    const loading = request !== null && settled !== request;
+    // Fraza za krótka (albo brak geokodera) — lista i stan wracają do zera. W renderze, nie w efekcie,
+    // żeby nie mignęła jedna klatka starych wyników.
+    const [hadRequest, setHadRequest] = useState(request !== null);
+    if (hadRequest !== (request !== null)) {
+        setHadRequest(request !== null);
+        if (!request) {
+            setResults([]);
+            setSearched(false);
+            setActiveIndex(-1);
+        }
+    }
     const busy = loading || resolving;
     const tooShort = query.trim().length > 0 && query.trim().length < minLength;
     const hasPanel = open && (tooShort || busy || results.length > 0 || searched);
-    const applyResults = useCallback((found) => {
-        // Podpowiedź bez współrzędnych ma sens tylko wtedy, gdy port umie ją uzupełnić —
-        // pozycja, która nie ma dokąd polecieć, jest gorsza od jej braku.
-        setResults(geocoder?.resolve ? found : found.filter((suggestion) => suggestion.at));
-        setLoading(false);
-        setSearched(true);
-        setActiveIndex(-1);
-        setOpen(true);
-    }, [geocoder]);
     // Odpytanie geokodera po odczekaniu `debounce` od ostatniego znaku. Sprzątanie kasuje
     // zarówno niewystrzelony timer, jak i zapytanie w locie — adapter przerywa wtedy `fetch`.
     useEffect(() => {
-        const needle = term.trim();
-        if (!geocoder?.search || needle.length < minLength) {
-            setResults([]);
-            setLoading(false);
-            setSearched(false);
-            setActiveIndex(-1);
+        if (!request)
             return;
-        }
-        setLoading(true);
+        const { geocoder: port, needle: phrase, options } = request;
+        const applyResults = (found) => {
+            // Podpowiedź bez współrzędnych ma sens tylko wtedy, gdy port umie ją uzupełnić —
+            // pozycja, która nie ma dokąd polecieć, jest gorsza od jej braku.
+            setResults(port.resolve ? found : found.filter((suggestion) => suggestion.at));
+            setSettled(request);
+            setSearched(true);
+            setActiveIndex(-1);
+            setOpen(true);
+        };
         const controller = new AbortController();
         const timer = setTimeout(() => {
-            geocoder
-                .search(needle, {
-                language: locale,
-                limit,
-                viewbox: viewbox ?? undefined,
-                countryCodes: countryCodes ?? undefined,
-                signal: controller.signal,
-            })
+            port
+                .search(phrase, { ...options, signal: controller.signal })
                 .then((found) => {
                 if (!controller.signal.aborted)
                     applyResults(found);
@@ -85,7 +109,7 @@ export function KptMapSearch({ geocoder = null, placeholder = '', minLength = 3,
             clearTimeout(timer);
             controller.abort();
         };
-    }, [term, geocoder, minLength, debounce, limit, viewbox, countryCodes, locale, applyResults]);
+    }, [request, debounce]);
     useEffect(() => () => pending.current?.abort(), []);
     const status = (() => {
         if (tooShort)
@@ -189,12 +213,12 @@ export function KptMapSearch({ geocoder = null, placeholder = '', minLength = 3,
         }
     };
     const optionId = (index) => `${uid}-opt-${index}`;
-    return (_jsxs("div", { className: cn('kpt-map-search', className), ...rest, children: [_jsxs("div", { className: "kpt-map-search__field", children: [_jsx("span", { className: "kpt-map-search__icon", "aria-hidden": "true", children: _jsx(KptIcon, { name: "search" }) }), _jsx("input", { className: "kpt-map-search__input", type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: false, role: "combobox", "aria-autocomplete": "list", id: uid, value: query, placeholder: placeholder || t('map.search.placeholder'), disabled: disabled || !canSearch, "aria-label": t('map.search.label'), "aria-expanded": hasPanel, "aria-busy": busy || undefined, "aria-controls": hasPanel ? `${uid}-panel` : undefined, "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined, onChange: (event) => {
+    return (_jsxs("div", { className: cn('kpt-map-search', className), ...rest, children: [_jsxs("div", { className: "kpt-map-search__field", children: [_jsx("span", { className: "kpt-map-search__icon", "aria-hidden": "true", children: _jsx(KptIcon, { name: "search" }) }), _jsx("input", { className: "kpt-map-search__input", type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: false, role: "combobox", "aria-autocomplete": "list", id: uid, value: query, placeholder: placeholder || t('map.search.placeholder'), disabled: disabled || !canSearch, "aria-label": t('map.search.label'), "aria-expanded": hasPanel, "aria-busy": busy || undefined, "aria-controls": hasPanel && results.length && !tooShort && !busy ? `${uid}-list` : undefined, "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined, onChange: (event) => {
                             setQuery(event.target.value);
                             setTerm(event.target.value);
                             setOpen(true);
                             setUnresolved(false);
-                        }, onFocus: () => setOpen(true), onBlur: () => setOpen(false), onKeyDown: onKeyDown }), query ? (_jsx("button", { className: "kpt-map-search__clear", type: "button", "aria-label": t('map.search.clear'), title: t('map.search.clear'), onClick: clear, children: _jsx(KptIcon, { name: "x" }) })) : null] }), hasPanel ? (_jsx("div", { className: "kpt-map-search__panel", id: `${uid}-panel`, children: tooShort ? (_jsx("p", { className: "kpt-map-search__note", children: t('map.search.minLength', { count: minLength }) })) : busy ? (_jsx("p", { className: "kpt-map-search__note", children: t('map.search.searching') })) : results.length ? (_jsx("ul", { className: "kpt-map-search__list", role: "listbox", "aria-label": t('map.search.results'), children: results.map((result, index) => (_jsxs("li", { className: cn('kpt-map-search__option', index === activeIndex && 'is-active'), role: "option", id: optionId(index), "aria-selected": index === activeIndex, onMouseDown: (event) => {
+                        }, onFocus: () => setOpen(true), onBlur: () => setOpen(false), onKeyDown: onKeyDown }), query ? (_jsx("button", { className: "kpt-map-search__clear", type: "button", "aria-label": t('map.search.clear'), title: t('map.search.clear'), onClick: clear, children: _jsx(KptIcon, { name: "x" }) })) : null] }), hasPanel ? (_jsx("div", { className: "kpt-map-search__panel", id: `${uid}-panel`, children: tooShort ? (_jsx("p", { className: "kpt-map-search__note", children: t('map.search.minLength', { count: minLength }) })) : busy ? (_jsx("p", { className: "kpt-map-search__note", children: t('map.search.searching') })) : results.length ? (_jsx("ul", { className: "kpt-map-search__list", id: `${uid}-list`, role: "listbox", "aria-label": t('map.search.results'), children: results.map((result, index) => (_jsxs("li", { className: cn('kpt-map-search__option', index === activeIndex && 'is-active'), role: "option", id: optionId(index), "aria-selected": index === activeIndex, onMouseDown: (event) => {
                             event.preventDefault();
                             pick(result);
                         }, onMouseEnter: () => setActiveIndex(index), children: [_jsx("span", { className: "kpt-map-search__pin", "aria-hidden": "true", children: _jsx(KptIcon, { name: "map-pin" }) }), _jsx("span", { className: "kpt-map-search__label", children: result.label })] }, result.id))) })) : (_jsx("p", { className: "kpt-map-search__note", children: t('map.search.noResults') })) })) : null, _jsx("p", { className: "kpt-map-search__status", "aria-live": "polite", children: status })] }));

package/dist/map/map.d.ts

@@ -93,6 +93,11 @@ export interface KptMapProps<T = unknown> extends Omit<ComponentPropsWithRef<'di
     }) => void;
     onUserPositionChange?: (position: KptMapUserPosition | null) => void;
     onUserLocationError?: (error: KptMapGeolocationError) => void;
+    /**
+     * Silnika nie udało się uruchomić — brak paczki `leaflet`, odrzucony klucz Google. Błąd i tak
+     * trafia do konsoli; callback pozwala aplikacji pokazać własny komunikat zamiast szarego prostokąta.
+     */
+    onEngineError?: (error: unknown) => void;
 }
 /**
  * Mapa z konfigurowalnymi znacznikami: kategorie z kolorem i ikoną, grupowanie z licznikiem,
@@ -110,4 +115,4 @@ export interface KptMapProps<T = unknown> extends Omit<ComponentPropsWithRef<'di
  *   renderPopup={({ location, data }) => <strong>{location.title}</strong>}
  * />
  */
-export declare function KptMap<T = unknown>({ locations, categories, country, view, bounds, restrictToCountry, cluster, clusterOptions, clusterColorBy, legend, legendCounts, hiddenCategories, defaultHiddenCategories, onHiddenCategoriesChange, showUserLocation, followUser, geolocation, allowCreate, search, searchPlaceholder, searchOptions, searchZoom, searchMarker, geocoder, popupLayout, distanceFrom, height, tileUrl, attribution, engine, renderPopup, renderCreateForm, onLocationClick, onClusterClick, onLocationCreate, onSearchSelect, onViewChange, onUserPositionChange, onUserLocationError, locale: localeOverride, dictionary, className, style, ...rest }: Readonly<KptMapProps<T>>): import("react").JSX.Element;
+export declare function KptMap<T = unknown>({ locations, categories, country, view, bounds, restrictToCountry, cluster, clusterOptions, clusterColorBy, legend, legendCounts, hiddenCategories, defaultHiddenCategories, onHiddenCategoriesChange, showUserLocation, followUser, geolocation, allowCreate, search, searchPlaceholder, searchOptions, searchZoom, searchMarker, geocoder, popupLayout, distanceFrom, height, tileUrl, attribution, engine, renderPopup, renderCreateForm, onLocationClick, onClusterClick, onLocationCreate, onSearchSelect, onViewChange, onUserPositionChange, onUserLocationError, onEngineError, locale: localeOverride, dictionary, className, style, ...rest }: Readonly<KptMapProps<T>>): import("react").JSX.Element;

package/dist/map/map.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { KPT_MAP_DEFAULT_ATTRIBUTION, KPT_MAP_DEFAULT_TILE_URL, boundsOf, clusterLocations, countByCategory, haversine, isCluster, isSplittable, renderClusterHtml, renderMarkerHtml, renderUserMarkerHtml, resolveCountryView, } from '@konce-pt/map';
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { KPT_MAP_DEFAULT_ATTRIBUTION, KPT_MAP_DEFAULT_TILE_URL, clusterLocations, countByCategory, haversine, isCluster, isSplittable, renderClusterHtml, renderMarkerHtml, renderUserMarkerHtml, resolveCountryView, } from '@konce-pt/map';
+import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -42,7 +43,7 @@ const NO_ENGINE_ERROR = 'KptMap: brak silnika mapy. Podaj fabrykę przez prop `e
  *   renderPopup={({ location, data }) => <strong>{location.title}</strong>}
  * />
  */
-export function KptMap({ locations, categories, country = 'PL', view = null, bounds = null, restrictToCountry = false, cluster = true, clusterOptions, clusterColorBy = 'none', legend = true, legendCounts = true, hiddenCategories, defaultHiddenCategories = [], onHiddenCategoriesChange, showUserLocation = false, followUser = false, geolocation = null, allowCreate = false, search = false, searchPlaceholder = '', searchOptions, searchZoom = 16, searchMarker = true, geocoder = null, popupLayout = 'plain', distanceFrom = null, height = '480px', tileUrl = null, attribution = null, engine, renderPopup, renderCreateForm, onLocationClick, onClusterClick, onLocationCreate, onSearchSelect, onViewChange, onUserPositionChange, onUserLocationError, locale: localeOverride, dictionary, className, style, ...rest }) {
+export function KptMap({ locations, categories, country = 'PL', view = null, bounds = null, restrictToCountry = false, cluster = true, clusterOptions, clusterColorBy = 'none', legend = true, legendCounts = true, hiddenCategories, defaultHiddenCategories = [], onHiddenCategoriesChange, showUserLocation = false, followUser = false, geolocation = null, allowCreate = false, search = false, searchPlaceholder = '', searchOptions, searchZoom = 16, searchMarker = true, geocoder = null, popupLayout = 'plain', distanceFrom = null, height = '480px', tileUrl = null, attribution = null, engine, renderPopup, renderCreateForm, onLocationClick, onClusterClick, onLocationCreate, onSearchSelect, onViewChange, onUserPositionChange, onUserLocationError, onEngineError, locale: localeOverride, dictionary, className, style, ...rest }) {
     const { t } = useKptMessages({ locale: localeOverride, dictionary });
     const canvasRef = useRef(null);
     const popupRef = useRef(null);
@@ -53,8 +54,12 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
      * montaż musi więc poczekać, aż pierwszy skończy sprzątać.
      */
     const mountChain = useRef(Promise.resolve());
-    const [engineKind, setEngineKind] = useState(null);
-    const [ready, setReady] = useState(false);
+    /**
+     * Silnik po udanym `init()` — w stanie, nie tylko w refie, bo render czyta z niego pozycje
+     * nakładek (`project`). Ref zostaje dla handlerów zdarzeń, które żyją dłużej niż render.
+     */
+    const [liveEngine, setLiveEngine] = useState(null);
+    const ready = liveEngine !== null;
     /** Zoom trzymamy w stanie, bo od niego zależy wynik grupowania. */
     const [zoom, setZoom] = useState(6);
     /** Rośnie przy każdym ruchu mapy — wymusza przeliczenie pozycji nakładek. */
@@ -184,7 +189,11 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
      * a jego callbacki żyją dłużej niż render, w którym powstały.
      */
     const latest = useRef({ entries, allowCreate, popup, contextTarget, onLocationClick, onClusterClick, onViewChange });
-    latest.current = { entries, allowCreate, popup, contextTarget, onLocationClick, onClusterClick, onViewChange };
+    // Odświeżane po zatwierdzeniu renderu, nie w jego trakcie — przerwany render nie zostawi w refie danych,
+    // których nigdy nie było na ekranie.
+    useLayoutEffect(() => {
+        latest.current = { entries, allowCreate, popup, contextTarget, onLocationClick, onClusterClick, onViewChange };
+    });
     const emitViewChange = useCallback(() => {
         const map = engineRef.current;
         if (!map)
@@ -222,11 +231,14 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
      * „w locie", przed rozwiązaniem obietnicy, zostawiłoby oznaczony kontener i drugi montaż
      * kończyłby się błędem „Map container is already initialized".
      */
+    const reportEngineError = useEffectEvent((error) => {
+        console.error(error);
+        onEngineError?.(error);
+    });
     useEffect(() => {
         let disposed = false;
         const map = engine();
         engineRef.current = map;
-        setEngineKind(map.kind);
         const preset = resolveCountryView(country);
         const canvas = canvasRef.current;
         if (!canvas)
@@ -265,18 +277,24 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
             });
             map.on('markerclick', (id) => onMarkerClick(id));
             setZoom(map.getZoom());
-            setReady(true);
+            setLiveEngine(map);
             emitViewChange();
+        })
+            // Bez tego odrzucony `init()` to „Uncaught (in promise)” i mapa bez słowa wyjaśnienia.
+            .catch((error) => {
+            if (!disposed)
+                reportEngineError(error);
         });
         return () => {
             disposed = true;
             engineRef.current = null;
-            setReady(false);
+            setLiveEngine(null);
             // Zniszczenie dopinamy do łańcucha: dopiero po `init()`, bo inaczej `destroy()` trafiłby
             // w mapę, której jeszcze nie ma, a kontener zostałby oznaczony jako zajęty na zawsze.
             mountChain.current = mountChain.current.finally(() => map.destroy());
         };
         // Silnik i widok startowy czytamy raz — podmiana po starcie nie przeładowuje mapy.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- montaż raz na życie komponentu (patrz wyżej)
     }, []);
     // Bez tego Leaflet zostawia szare pola po każdej zmianie układu strony.
     useLayoutEffect(() => {
@@ -307,27 +325,37 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
             return;
         engineRef.current?.setUserPosition(userPosition, renderUserMarkerHtml({ label: t('map.myLocation'), iconSvgInner: getKptIcon('user') }));
     }, [ready, userPosition, t]);
+    /*
+     * Włączenie albo podmiana nasłuchu pozycji zeruje jego stan — liczone w renderze (wzorzec
+     * poprzedniej wartości), a nie w efekcie, który pokazałby jedną klatkę starej pozycji.
+     */
+    const watching = showUserLocation && !!geolocation;
+    const [watchSource, setWatchSource] = useState({ watching, geolocation });
+    if (watchSource.watching !== watching || watchSource.geolocation !== geolocation) {
+        setWatchSource({ watching, geolocation });
+        setUserPosition(null);
+        setLocationBlocked(false);
+    }
+    // Handlery nasłuchu widzą zawsze świeże `followUser` i callbacki, a ich zmiana nie restartuje nasłuchu.
+    const handlePosition = useEffectEvent((position) => {
+        setUserPosition(position);
+        onUserPositionChange?.(position);
+        if (position && followUser) {
+            const map = engineRef.current;
+            if (map)
+                map.setView(position.at, Math.max(map.getZoom(), 13));
+        }
+    });
+    const handleLocationError = useEffectEvent((error) => {
+        setUserPosition(null);
+        setLocationBlocked(true);
+        onUserLocationError?.(error);
+    });
     // Śledzenie pozycji użytkownika. Odmowa zgody wyłącza kontrolkę, ale nie wywraca komponentu.
     useEffect(() => {
-        if (!showUserLocation || !geolocation) {
-            setUserPosition(null);
+        if (!showUserLocation || !geolocation)
             return;
-        }
-        setLocationBlocked(false);
-        return geolocation.watch((position) => {
-            setUserPosition(position);
-            onUserPositionChange?.(position);
-            if (position && followUser) {
-                const map = engineRef.current;
-                if (map)
-                    map.setView(position.at, Math.max(map.getZoom(), 13));
-            }
-        }, (error) => {
-            setUserPosition(null);
-            setLocationBlocked(true);
-            onUserLocationError?.(error);
-        });
-        // `followUser` czytamy w callbacku, więc nie restartuje nasłuchu.
+        return geolocation.watch((position) => handlePosition(position), (error) => handleLocationError(error));
     }, [showUserLocation, geolocation]);
     const popupCategory = popup ? categoryById.get(popup.location.categoryId) : undefined;
     /**
@@ -343,16 +371,16 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
     /** Pozycje nakładek w pikselach kontenera; zależą od `viewportTick`, czyli od ruchu mapy. */
     const popupPosition = useMemo(() => {
         void viewportTick;
-        if (!popup || !engineRef.current || !ready)
+        if (!popup || !liveEngine)
             return null;
-        return engineRef.current.project(popup.location.at);
-    }, [viewportTick, popup, ready]);
+        return liveEngine.project(popup.location.at);
+    }, [viewportTick, popup, liveEngine]);
     const contextPosition = useMemo(() => {
         void viewportTick;
-        if (!contextTarget || !engineRef.current || !ready)
+        if (!contextTarget || !liveEngine)
             return null;
-        return engineRef.current.project(contextTarget.at);
-    }, [viewportTick, contextTarget, ready]);
+        return liveEngine.project(contextTarget.at);
+    }, [viewportTick, contextTarget, liveEngine]);
     /** Kategorie oferowane w menu „dodaj" — ukryte w legendzie odpadają. */
     const creatableCategories = useMemo(() => {
         const hiddenSet = new Set(hidden);
@@ -403,7 +431,7 @@ export function KptMap({ locations, categories, country = 'PL', view = null, bou
             map?.setView(result.at, searchZoom);
         onSearchSelect?.(result);
     };
-    return (_jsxs("div", { className: cn('kpt-map', className), "data-engine": engineKind ?? undefined, style: { ...style, '--kpt-map-height': height }, ...rest, children: [_jsxs("div", { className: "kpt-map__viewport", children: [_jsx("div", { ref: canvasRef, className: "kpt-map__canvas" }), _jsxs("div", { className: "kpt-map__controls", role: "group", "aria-label": t('map.legend'), children: [_jsx("button", { className: "kpt-map__control", type: "button", "aria-label": t('map.zoomIn'), title: t('map.zoomIn'), disabled: !ready, onClick: () => zoomBy(1), children: _jsx("span", { "aria-hidden": "true", children: "+" }) }), _jsx("button", { className: "kpt-map__control", type: "button", "aria-label": t('map.zoomOut'), title: t('map.zoomOut'), disabled: !ready, onClick: () => zoomBy(-1), children: _jsx("span", { "aria-hidden": "true", children: "\u2212" }) }), showUserLocation ? (_jsx("button", { className: "kpt-map__control kpt-map__control--locate", type: "button", "aria-label": locationBlocked ? t('map.locationDenied') : t('map.locateMe'), title: locationBlocked ? t('map.locationDenied') : t('map.locateMe'), disabled: !userPosition, onClick: centreOnUser, children: _jsx("span", { className: "kpt-map__crosshair", "aria-hidden": "true" }) })) : null] }), searchEnabled ? (_jsx("div", { className: "kpt-map__search", children: _jsx(KptMapSearch, { geocoder: geocoder, placeholder: searchPlaceholder, minLength: searchOptions?.minLength ?? 3, debounce: searchOptions?.debounce ?? 300, limit: searchOptions?.limit ?? 5, viewbox: searchViewbox, countryCodes: searchCountryCodes, onSelect: handleSearchSelect, onClear: () => setSearchPin(null) }) })) : null, allowCreate && contextTarget && contextPosition ? (_jsxs("div", { className: "kpt-map__context", role: "menu", "aria-label": t('map.addLocation'), style: { '--_kpt-map-x': `${contextPosition.x}px`, '--_kpt-map-y': `${contextPosition.y}px` }, children: [_jsx("p", { className: "kpt-map__context-title", children: t('map.chooseCategory') }), creatableCategories.length === 0 ? (_jsx("p", { className: "kpt-map__context-empty", children: t('map.empty') })) : (creatableCategories.map((category) => (_jsxs("button", { className: "kpt-map__context-item", type: "button", role: "menuitem", onClick: () => {
+    return (_jsxs("div", { className: cn('kpt-map', className), "data-engine": liveEngine?.kind, style: { ...style, '--kpt-map-height': height }, ...rest, children: [_jsxs("div", { className: "kpt-map__viewport", children: [_jsx("div", { ref: canvasRef, className: "kpt-map__canvas" }), _jsxs("div", { className: "kpt-map__controls", role: "group", "aria-label": t('map.legend'), children: [_jsx("button", { className: "kpt-map__control", type: "button", "aria-label": t('map.zoomIn'), title: t('map.zoomIn'), disabled: !ready, onClick: () => zoomBy(1), children: _jsx("span", { "aria-hidden": "true", children: "+" }) }), _jsx("button", { className: "kpt-map__control", type: "button", "aria-label": t('map.zoomOut'), title: t('map.zoomOut'), disabled: !ready, onClick: () => zoomBy(-1), children: _jsx("span", { "aria-hidden": "true", children: "\u2212" }) }), showUserLocation ? (_jsx("button", { className: "kpt-map__control kpt-map__control--locate", type: "button", "aria-label": locationBlocked ? t('map.locationDenied') : t('map.locateMe'), title: locationBlocked ? t('map.locationDenied') : t('map.locateMe'), disabled: !userPosition, onClick: centreOnUser, children: _jsx("span", { className: "kpt-map__crosshair", "aria-hidden": "true" }) })) : null] }), searchEnabled ? (_jsx("div", { className: "kpt-map__search", children: _jsx(KptMapSearch, { geocoder: geocoder, placeholder: searchPlaceholder, minLength: searchOptions?.minLength ?? 3, debounce: searchOptions?.debounce ?? 300, limit: searchOptions?.limit ?? 5, viewbox: searchViewbox, countryCodes: searchCountryCodes, onSelect: handleSearchSelect, onClear: () => setSearchPin(null) }) })) : null, allowCreate && contextTarget && contextPosition ? (_jsxs("div", { className: "kpt-map__context", role: "menu", "aria-label": t('map.addLocation'), style: { '--_kpt-map-x': `${contextPosition.x}px`, '--_kpt-map-y': `${contextPosition.y}px` }, children: [_jsx("p", { className: "kpt-map__context-title", children: t('map.chooseCategory') }), creatableCategories.length === 0 ? (_jsx("p", { className: "kpt-map__context-empty", children: t('map.empty') })) : (creatableCategories.map((category) => (_jsxs("button", { className: "kpt-map__context-item", type: "button", role: "menuitem", onClick: () => {
                                     setContextTarget(null);
                                     setCreateFor({ at: contextTarget.at, category });
                                     setCreateOpen(true);

package/dist/megamenu/llms.txt

@@ -64,3 +64,14 @@ along it, `ArrowDown` (or `Enter`/`Space`) opens the panel on the first link, `A
 In the panel `ArrowDown`/`ArrowUp`/`Home`/`End` walk through all links column by column,
 `ArrowLeft`/`ArrowRight` show the neighbouring item's panel, `Escape` or `Tab` close it and return
 focus to the top item.
+
+## Router
+Links are plain `<a href>`, so without a router a click reloads the page. `onNavigate` fires on a plain
+click (left button, no Ctrl/⌘/Shift, no `target="_blank"`) with `{ item, url, event }`: call
+`event.preventDefault()` and navigate with your router. Modified clicks stay native (a new tab, a new
+window). The library depends on no router.
+
+    <KptMegamenu items={items} onNavigate={({ event, url }) => { event.preventDefault(); navigate(url); }} />
+
+## When to use it
+The `menubar`/`menu` roles switch a screen reader into application mode: page navigation by headings and links stops, and arrow keys are expected. That fits an application menu (File, Edit, View) or a large product menu. For plain site navigation (a few links in a header) the WAI-ARIA APG recommends the disclosure pattern instead — a `<nav>` with buttons carrying `aria-expanded` and ordinary link lists — which you can build from `kpt-button` and lists. The menu does not render a third level: nested `items` of a submenu item are ignored.

package/dist/megamenu/megamenu.d.ts

@@ -1,8 +1,14 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type KptNavigateEvent } from '../shared/types.ts';
 import type { KptMenuItem } from '../menu/menu-item.ts';
 export interface KptMegamenuProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
     items?: readonly KptMenuItem<T>[];
     onSelect?: (item: KptMenuItem<T>) => void;
+    /**
+     * Zwykły klik w pozycję z `url`. Aplikacja z routerem woła `event.preventDefault()` i nawiguje
+     * sama — bez tego `<a href>` przeładowuje stronę.
+     */
+    onNavigate?: (event: KptNavigateEvent<KptMenuItem<T>>) => void;
     /** Nazwa belki dla czytników ekranu, np. „Menu główne”. */
     ariaLabel?: string;
 }
@@ -23,4 +29,4 @@ export interface KptMegamenuProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  * @example
  * <KptMegamenu items={items} onSelect={onSelect} />
  */
-export declare function KptMegamenu<T>({ items, onSelect, ariaLabel, className, ...rest }: Readonly<KptMegamenuProps<T>>): import("react").JSX.Element;
+export declare function KptMegamenu<T>({ items, onSelect, onNavigate, ariaLabel, className, ...rest }: Readonly<KptMegamenuProps<T>>): import("react").JSX.Element;

package/dist/megamenu/megamenu.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,6 +6,7 @@ import { KptOverlay } from "../internal/overlay.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
+import { kptIsPlainClick } from "../shared/types.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 /**
  * Mega-menu — pozioma belka z szerokim, wielokolumnowym panelem.
@@ -23,8 +25,9 @@ import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
  * @example
  * <KptMegamenu items={items} onSelect={onSelect} />
  */
-export function KptMegamenu({ items = [], onSelect, ariaLabel, className, ...rest }) {
-    const barRef = useRef(null);
+export function KptMegamenu({ items = [], onSelect, onNavigate, ariaLabel, className, ...rest }) {
+    /** Pasek jako kotwica panelu — w stanie, bo czyta go render. */
+    const [bar, setBar] = useState(null);
     const panelRef = useRef(null);
     const buttonsRef = useRef([]);
     const [openIndex, setOpenIndex] = useState(null);
@@ -122,18 +125,24 @@ export function KptMegamenu({ items = [], onSelect, ariaLabel, className, ...res
             focusTop(top);
         }
     };
-    return (_jsxs("div", { className: cn('kpt-megamenu-host', className), ...rest, children: [_jsx("div", { className: "kpt-megamenu", role: "menubar", "aria-orientation": "horizontal", "aria-label": ariaLabel || undefined, ref: barRef, children: items.map((item, index) => {
+    /** Zwykły klik w odnośnik → `onNavigate` (Ctrl/⌘/Shift, środkowy przycisk i `_blank` zostają natywne). */
+    const linkClick = (event, item) => {
+        if (item.url && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
+            onNavigate({ item, url: item.url, event: event.nativeEvent });
+        }
+    };
+    return (_jsxs("div", { className: cn('kpt-megamenu-host', className), ...rest, children: [_jsx("div", { className: "kpt-megamenu", role: "menubar", "aria-orientation": "horizontal", "aria-label": ariaLabel || undefined, ref: setBar, children: items.map((item, index) => {
                     const hasMenu = !!item.items?.length;
                     if (isLink(item)) {
                         return (_jsxs("a", { ref: (el) => {
                                 buttonsRef.current[index] = el;
-                            }, className: "kpt-megamenu__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] }, index));
+                            }, className: "kpt-megamenu__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: (event) => { linkClick(event, item); toggle(index, item); }, onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] }, index));
                     }
                     return (_jsxs("button", { ref: (el) => {
                             buttonsRef.current[index] = el;
                         }, type: "button", className: cn('kpt-megamenu__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? openIndex === index : undefined, "aria-controls": openIndex === index ? panelId : undefined, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), hasMenu ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-megamenu__caret" }) : null] }, index));
-                }) }), _jsx(KptOverlay, { open: openIndex !== null, anchor: barRef.current, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-megamenu__panel", role: "menu", id: panelId, "aria-label": openIndex === null ? undefined : items[openIndex]?.label, onKeyDown: onPanelKeyDown, children: columns.map((column, columnIndex) => {
+                }) }), _jsx(KptOverlay, { open: openIndex !== null, anchor: bar, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-megamenu__panel", role: "menu", tabIndex: -1, id: panelId, "aria-label": openIndex === null ? undefined : items[openIndex]?.label, onKeyDown: onPanelKeyDown, children: columns.map((column, columnIndex) => {
                         const titleId = `${panelId}-col-${columnIndex}`;
-                        return (_jsxs("div", { className: "kpt-megamenu__column", role: "group", "aria-labelledby": column.label ? titleId : undefined, children: [column.label ? (_jsx("div", { className: "kpt-megamenu__col-title", role: "presentation", id: titleId, children: column.label })) : null, (column.items ?? []).map((link, linkIndex) => isLink(link) ? (_jsxs("a", { className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, href: link.url, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)) : (_jsxs("button", { type: "button", className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, disabled: link.disabled, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)))] }, columnIndex));
+                        return (_jsxs("div", { className: "kpt-megamenu__column", role: "group", "aria-labelledby": column.label ? titleId : undefined, children: [column.label ? (_jsx("div", { className: "kpt-megamenu__col-title", role: "presentation", id: titleId, children: column.label })) : null, (column.items ?? []).map((link, linkIndex) => isLink(link) ? (_jsxs("a", { className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, href: link.url, onClick: (event) => { linkClick(event, link); pick(link); }, children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)) : (_jsxs("button", { type: "button", className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, disabled: link.disabled, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)))] }, columnIndex));
                     }) }) })] }));
 }

package/dist/menu/menu-rows.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KptAvatar } from "../avatar/avatar.js";
 import { KptBadge } from "../badge/badge.js";

package/dist/menu/menu.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -17,6 +18,12 @@ import { MenuRows } from "./menu-rows.js";
  */
 export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = false, onOpenChange, className, ...rest }) {
     const triggerRef = useRef(null);
+    /** Kotwica panelu — w stanie, bo czyta ją render; ref zostaje dla handlerów. */
+    const [anchor, setAnchor] = useState(null);
+    const setTrigger = useCallback((element) => {
+        triggerRef.current = element;
+        setAnchor(element);
+    }, []);
     const panelRef = useRef(null);
     /** Którą pozycję skupić po otwarciu — strzałka w górę na wyzwalaczu otwiera „od końca”. */
     const focusEdge = useRef('first');
@@ -83,8 +90,8 @@ export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = fal
         onSelect?.(item);
         closeAndRestoreFocus();
     };
-    return (_jsxs("span", { className: cn('kpt-menu-host', className), ...rest, children: [_jsx("span", { className: "kpt-menu__trigger", ref: triggerRef, onClick: () => {
+    return (_jsxs("span", { className: cn('kpt-menu-host', className), ...rest, children: [_jsx("span", { className: "kpt-menu__trigger", ref: setTrigger, onClick: () => {
                     focusEdge.current = 'first';
                     setOpen(!isOpen);
-                }, onKeyDown: onTriggerKeyDown, children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-menu__panel", role: "menu", onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-menu", onPick: pick }) }) })] }));
+                }, onKeyDown: onTriggerKeyDown, children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-menu__panel", role: "menu", tabIndex: -1, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-menu", onPick: pick }) }) })] }));
 }

package/dist/menubar/llms.txt

@@ -60,3 +60,14 @@ The bar is a single `Tab` stop (roving `tabindex`), following the WAI-ARIA menub
   its first row, `ArrowUp` on its last one.
 - In a dropdown: `ArrowDown`/`ArrowUp`/`Home`/`End` move between rows, `ArrowLeft`/`ArrowRight`
   open the neighbouring dropdown, `Escape` and `Tab` close it and return focus to the top item.
+
+## Router
+Links are plain `<a href>`, so without a router a click reloads the page. `onNavigate` fires on a plain
+click (left button, no Ctrl/⌘/Shift, no `target="_blank"`) with `{ item, url, event }`: call
+`event.preventDefault()` and navigate with your router. Modified clicks stay native (a new tab, a new
+window). The library depends on no router.
+
+    <KptMenubar items={items} onNavigate={({ event, url }) => { event.preventDefault(); navigate(url); }} />
+
+## When to use it
+The `menubar`/`menu` roles switch a screen reader into application mode: page navigation by headings and links stops, and arrow keys are expected. That fits an application menu (File, Edit, View) or a large product menu. For plain site navigation (a few links in a header) the WAI-ARIA APG recommends the disclosure pattern instead — a `<nav>` with buttons carrying `aria-expanded` and ordinary link lists — which you can build from `kpt-button` and lists. The menu does not render a third level: nested `items` of a submenu item are ignored.

package/dist/menubar/menubar.d.ts

@@ -1,8 +1,14 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type KptNavigateEvent } from '../shared/types.ts';
 import type { KptMenuItem } from '../menu/menu-item.ts';
 export interface KptMenubarProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
     items?: readonly KptMenuItem<T>[];
     onSelect?: (item: KptMenuItem<T>) => void;
+    /**
+     * Zwykły klik w pozycję z `url`. Aplikacja z routerem woła `event.preventDefault()` i nawiguje
+     * sama — bez tego `<a href>` przeładowuje stronę.
+     */
+    onNavigate?: (event: KptNavigateEvent<KptMenuItem<T>>) => void;
     /** Nazwa belki dla czytników ekranu, np. „Menu edytora”. */
     ariaLabel?: string;
 }
@@ -20,4 +26,4 @@ export interface KptMenubarProps<T> extends Omit<ComponentPropsWithRef<'div'>, '
  * @example
  * <KptMenubar items={items} onSelect={onSelect} />
  */
-export declare function KptMenubar<T>({ items, onSelect, ariaLabel, className, ...rest }: Readonly<KptMenubarProps<T>>): import("react").JSX.Element;
+export declare function KptMenubar<T>({ items, onSelect, onNavigate, ariaLabel, className, ...rest }: Readonly<KptMenubarProps<T>>): import("react").JSX.Element;

package/dist/menubar/menubar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,6 +6,7 @@ import { KptOverlay } from "../internal/overlay.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
+import { kptIsPlainClick } from "../shared/types.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 /**
  * Pozioma belka menu z rozwijanymi pod-menu. Pozycja bez `items` działa jak akcja lub link.
@@ -20,8 +22,10 @@ import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
  * @example
  * <KptMenubar items={items} onSelect={onSelect} />
  */
-export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest }) {
+export function KptMenubar({ items = [], onSelect, onNavigate, ariaLabel, className, ...rest }) {
     const [openIndex, setOpenIndex] = useState(null);
+    /** Przycisk otwartego pod-menu — w stanie, bo render podaje go nakładce jako kotwicę. */
+    const [anchorEl, setAnchorEl] = useState(null);
     // Ostatnio skupiona pozycja górna — ona jest przystankiem Tab belki.
     const [focusIndex, setFocusIndex] = useState(0);
     const buttonsRef = useRef([]);
@@ -59,6 +63,7 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             focusMenuEdge(panelRef.current, edge);
             return;
         }
+        setAnchorEl(buttonsRef.current[index] ?? null);
         setOpenIndex(hasMenu ? index : null);
         focusTop(index);
     };
@@ -67,6 +72,7 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             return;
         if (item.items?.length) {
             focusEdge.current = 'first';
+            setAnchorEl(buttonsRef.current[index] ?? null);
             setOpenIndex((current) => (current === index ? null : index));
         }
         else {
@@ -114,12 +120,18 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             focusTop(index);
         }
     };
+    /** Zwykły klik w odnośnik → `onNavigate` (Ctrl/⌘/Shift, środkowy przycisk i `_blank` zostają natywne). */
+    const linkClick = (event, item) => {
+        if (item.url && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
+            onNavigate({ item, url: item.url, event: event.nativeEvent });
+        }
+    };
     return (_jsx("div", { className: cn('kpt-menubar-host', className), ...rest, children: _jsx("div", { className: "kpt-menubar", role: "menubar", "aria-orientation": "horizontal", "aria-label": ariaLabel || undefined, children: items.map((item, index) => {
                 const hasMenu = !!item.items?.length;
                 return (_jsxs("div", { className: "kpt-menubar__group", role: "none", children: [isLink(item) ? (_jsxs("a", { ref: (el) => {
                                 buttonsRef.current[index] = el;
-                            }, className: "kpt-menubar__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: () => pick(item, index), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] })) : (_jsxs("button", { ref: (el) => {
+                            }, className: "kpt-menubar__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: (event) => { linkClick(event, item); pick(item, index); }, onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] })) : (_jsxs("button", { ref: (el) => {
                                 buttonsRef.current[index] = el;
-                            }, type: "button", className: cn('kpt-menubar__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? openIndex === index : undefined, "aria-controls": openIndex === index ? panelId(index) : undefined, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), hasMenu ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-menubar__caret" }) : null] })), _jsx(KptOverlay, { open: openIndex === index && hasMenu, anchor: buttonsRef.current[index] ?? null, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-menubar__dropdown", role: "menu", id: panelId(index), "aria-label": item.label, onKeyDown: (event) => onPanelKeyDown(event, index), children: (item.items ?? []).map((sub, subIndex) => sub.separator ? (_jsx("div", { className: "kpt-menubar__separator", role: "separator" }, subIndex)) : isLink(sub) ? (_jsxs("a", { className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, href: sub.url, onClick: () => pick(sub, index), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex)) : (_jsxs("button", { type: "button", className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, disabled: sub.disabled, onClick: () => pick(sub, index), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex))) }) })] }, index));
+                            }, type: "button", className: cn('kpt-menubar__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? openIndex === index : undefined, "aria-controls": openIndex === index ? panelId(index) : undefined, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), hasMenu ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-menubar__caret" }) : null] })), _jsx(KptOverlay, { open: openIndex === index && hasMenu, anchor: openIndex === index ? anchorEl : null, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-menubar__dropdown", role: "menu", tabIndex: -1, id: panelId(index), "aria-label": item.label, onKeyDown: (event) => onPanelKeyDown(event, index), children: (item.items ?? []).map((sub, subIndex) => sub.separator ? (_jsx("div", { className: "kpt-menubar__separator", role: "separator" }, subIndex)) : isLink(sub) ? (_jsxs("a", { className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, href: sub.url, onClick: (event) => { linkClick(event, sub); pick(sub, index); }, children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex)) : (_jsxs("button", { type: "button", className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, disabled: sub.disabled, onClick: () => pick(sub, index), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex))) }) })] }, index));
             }) }) }));
 }

package/dist/meter-group/meter-group.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";

package/dist/order-list/llms.txt

@@ -58,3 +58,6 @@ The list is named after `header` (`aria-label`) and the selected item carries `a
 Both buttons are labelled from the dictionary and go disabled while nothing is selected. Native
 HTML5 drag and drop has no keyboard equivalent — `Alt`+arrows and the buttons cover it, and
 `dragdrop` adds to them, it never replaces them.
+
+## Announcements
+Every reorder (buttons, Alt+↑/↓, drag and drop) is announced in a polite live region: `orderList.moved` with `{position}` and `{total}` — focus does not move, so a screen reader would not hear the new place otherwise.