@konce-pt/react 0.8.0

package/dist/map/map-poi-card.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { foregroundVarOf, formatDistance, formatLatLng, groupWeek, isAlwaysOpen, isOpenAt, nextChange, normalizeUrl, prettyUrl, } from '@konce-pt/map';
+import { useId, 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";
+import { KptButton } from "../button/button.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptIconButton } from "../icon-button/icon-button.js";
+/**
+ * Karta miejsca do popupu mapy — dystans, zdjęcie, akcje, kategoria, rozwijane godziny
+ * otwarcia i wiersze kontaktowe z kopiowaniem.
+ *
+ * Komponent jest sterowany danymi: bierze `KptMapPoi`, a nie model domenowy aplikacji.
+ * Mapowanie `KptMapLocation.data` → `KptMapPoi` robi aplikacja, dzięki czemu karta nie wie,
+ * czy pokazuje ładowarkę, restaurację, czy punkt serwisowy.
+ *
+ * Sam popup trzeba przełączyć na `popupLayout="card"` — inaczej karta dostanie szerokość
+ * i padding przeznaczone dla treści tekstowej.
+ *
+ * @example
+ * <KptMap popupLayout="card" renderPopup={({ location, data, distance, close }) => (
+ *   <KptMapPoiCard poi={poiOf(location, data)} distance={distance} onClose={close} />
+ * )} />
+ */
+export function KptMapPoiCard({ poi, distance = null, category = null, primaryLabel = '', showShare = true, showFavourite = true, favourite, defaultFavourite = false, onFavouriteChange, closable = true, hoursExpanded, defaultHoursExpanded = false, onHoursExpandedChange, onPrimaryAction, onClose, onShare, locale: localeOverride, dictionary, className, ...rest }) {
+    const { t, locale } = useKptMessages({ locale: localeOverride, dictionary });
+    /** Identyfikator regionu godzin; kart na stronie bywa więcej niż jedna. */
+    const hoursId = useId();
+    const [isFavourite, setFavourite] = useControllableState({
+        value: favourite,
+        defaultValue: defaultFavourite,
+        onChange: onFavouriteChange,
+    });
+    const [expanded, setExpanded] = useControllableState({
+        value: hoursExpanded,
+        defaultValue: defaultHoursExpanded,
+        onChange: onHoursExpandedChange,
+    });
+    /** Rośnie przy każdym rozwinięciu godzin — karta bywa otwarta dłużej niż minutę. */
+    const [now, setNow] = useState(() => Date.now());
+    /** Klucz wiersza, którego wartość właśnie skopiowano — przełącza ikonę na „check". */
+    const [justCopied, setJustCopied] = useState(null);
+    const copyTimer = useRef(null);
+    /** Bez API schowka przycisk kopiowania w ogóle się nie renderuje. */
+    const canCopy = typeof navigator !== 'undefined' && !!navigator.clipboard;
+    const canShare = typeof navigator !== 'undefined' && 'share' in navigator;
+    const hasHours = (poi.hours?.length ?? 0) > 0;
+    const alwaysOpen = isAlwaysOpen(poi.hours);
+    const open = isOpenAt(poi.hours, new Date(now));
+    const hoursGroups = groupWeek(poi.hours, locale);
+    const statusLabel = alwaysOpen ? t('map.poi.alwaysOpen') : t(open ? 'map.poi.openNow' : 'map.poi.closedNow');
+    /** Dopisek „otwarcie o 11:00" — nie ma go dla 24/7 ani gdy zmiana jest dalej niż doba. */
+    const statusHint = (() => {
+        if (alwaysOpen || !hasHours)
+            return null;
+        const at = new Date(now);
+        const change = nextChange(poi.hours, at);
+        if (!change)
+            return null;
+        if (change.at.getTime() - at.getTime() > 24 * 60 * 60 * 1000)
+            return null;
+        const time = new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(change.at);
+        return t(change.open ? 'map.poi.opensAt' : 'map.poi.closesAt', { time });
+    })();
+    const rows = [];
+    if (poi.phone) {
+        rows.push({
+            kind: 'phone',
+            icon: 'phone',
+            text: poi.phone,
+            copyValue: poi.phone,
+            href: `tel:${poi.phone.replace(/\s+/g, '')}`,
+            external: false,
+            actionIcon: 'phone',
+            actionLabel: t('map.poi.call'),
+        });
+    }
+    if (poi.website) {
+        const url = normalizeUrl(poi.website);
+        rows.push({
+            kind: 'website',
+            icon: 'world',
+            text: prettyUrl(poi.website),
+            copyValue: url,
+            href: url,
+            external: true,
+            actionIcon: 'external-link',
+            actionLabel: t('map.poi.openWebsite'),
+        });
+    }
+    if (poi.email) {
+        rows.push({
+            kind: 'email',
+            icon: 'mail',
+            text: poi.email,
+            copyValue: poi.email,
+            href: `mailto:${poi.email}`,
+            external: false,
+            actionIcon: 'mail',
+            actionLabel: t('map.poi.sendEmail'),
+        });
+    }
+    if (poi.at) {
+        const text = formatLatLng(poi.at);
+        rows.push({ kind: 'coords', icon: 'crosshair', text, copyValue: text, href: null, external: false, actionIcon: '', actionLabel: '' });
+    }
+    const copy = async (row) => {
+        try {
+            await navigator.clipboard.writeText(row.copyValue);
+        }
+        catch {
+            // Odmowa zgody albo brak bezpiecznego kontekstu — nie ma czego zgłaszać użytkownikowi.
+            return;
+        }
+        setJustCopied(row.kind);
+        if (copyTimer.current)
+            clearTimeout(copyTimer.current);
+        copyTimer.current = setTimeout(() => setJustCopied(null), 2000);
+    };
+    /**
+     * Udostępnianie: natywny arkusz systemowy, gdy przeglądarka go ma, inaczej schowek.
+     * W obu przypadkach leci `onShare`, więc aplikacja może dołożyć własną telemetrię.
+     */
+    const share = async () => {
+        const url = poi.website ? normalizeUrl(poi.website) : undefined;
+        if (canShare) {
+            try {
+                await navigator.share({ title: poi.title, text: poi.address, url });
+            }
+            catch {
+                // Anulowanie arkusza przez użytkownika nie jest błędem.
+                return;
+            }
+        }
+        else if (canCopy) {
+            try {
+                await navigator.clipboard.writeText(url ?? poi.title);
+            }
+            catch {
+                return;
+            }
+        }
+        onShare?.(poi);
+    };
+    const distanceLabel = formatDistance(distance, locale);
+    return (_jsxs("div", { className: cn('kpt-map-poi', className), ...rest, children: [_jsxs("header", { className: "kpt-map-poi__head", children: [_jsx("p", { className: "kpt-map-poi__title", role: "heading", "aria-level": 3, children: poi.title }), closable ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-map-poi__close' }, variant: "text", size: "sm", "aria-label": t('common.close'), onClick: onClose, children: _jsx(KptIcon, { name: "x" }) })) : null] }), _jsxs("p", { className: "kpt-map-poi__meta", children: [distanceLabel ? _jsx("strong", { className: "kpt-map-poi__distance", children: distanceLabel }) : null, poi.address ? _jsx("span", { className: "kpt-map-poi__address", children: poi.address }) : null] }), _jsxs("div", { className: "kpt-map-poi__scroll", children: [_jsx("div", { className: "kpt-map-poi__media", children: poi.photo ? (_jsx("img", { className: "kpt-map-poi__photo", src: poi.photo, alt: poi.photoAlt ?? poi.title, loading: "lazy", decoding: "async" })) : (_jsx("div", { className: "kpt-map-poi__photo-empty", "aria-label": t('map.poi.noPhoto'), role: "img", children: _jsx(KptIcon, { name: "photo", size: "1.75rem" }) })) }), _jsxs("div", { className: "kpt-map-poi__actions", children: [primaryLabel ? (_jsx(KptButton, { hostProps: { className: 'kpt-map-poi__cta' }, size: "sm", fullWidth: true, onClick: () => onPrimaryAction?.(poi), children: primaryLabel })) : null, showShare ? (_jsx(KptIconButton, { variant: "outline", size: "sm", "aria-label": t('map.poi.share'), onClick: share, children: _jsx(KptIcon, { name: "share" }) })) : null, showFavourite ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-map-poi__fav', 'data-on': isFavourite ? '' : undefined }, variant: "outline", size: "sm", "aria-pressed": isFavourite, "aria-label": t(isFavourite ? 'map.poi.removeFavourite' : 'map.poi.addFavourite'), onClick: () => setFavourite(!isFavourite), children: _jsx(KptIcon, { name: "star" }) })) : null] }), category ? (_jsxs("p", { className: "kpt-map-poi__category", style: { '--_kpt-poi-color': foregroundVarOf(category.color) }, children: [category.icon ? _jsx(KptIcon, { className: "kpt-map-poi__category-icon", name: category.icon }) : null, category.label] })) : null, hasHours ? (_jsxs("div", { className: "kpt-map-poi__hours", children: [_jsxs("button", { className: "kpt-map-poi__hours-toggle", type: "button", "aria-expanded": expanded, "aria-controls": hoursId, onClick: () => {
+                                    // Odświeżamy zegar przy rozwinięciu — karta bywa otwarta dłużej niż minutę.
+                                    setNow(Date.now());
+                                    setExpanded(!expanded);
+                                }, children: [_jsx(KptIcon, { className: "kpt-map-poi__row-icon", name: "clock" }), _jsx("span", { className: "kpt-map-poi__status", "data-open": open || alwaysOpen, children: statusLabel }), statusHint ? _jsxs("span", { className: "kpt-map-poi__status-hint", children: ["\u00B7 ", statusHint] }) : null, _jsx(KptIcon, { className: "kpt-map-poi__chevron", name: "chevron-down" })] }), expanded ? (_jsx("dl", { className: "kpt-map-poi__week", id: hoursId, children: hoursGroups.map((group) => (_jsxs("div", { style: { display: 'contents' }, children: [_jsx("dt", { className: "kpt-map-poi__week-day", children: group.label }), _jsx("dd", { className: "kpt-map-poi__week-hours", children: group.closed ? (_jsx("span", { className: "kpt-map-poi__week-closed", children: t('map.poi.closedDay') })) : (group.ranges.map((range) => (_jsx("span", { className: "kpt-map-poi__week-range", children: range }, range)))) })] }, group.label))) })) : null] })) : null, rows.length || poi.facts?.length ? (_jsxs("ul", { className: "kpt-map-poi__rows", children: [rows.map((row) => (_jsxs("li", { className: "kpt-map-poi__row", children: [_jsx(KptIcon, { className: "kpt-map-poi__row-icon", name: row.icon }), row.href ? (_jsx("a", { className: "kpt-map-poi__row-value kpt-map-poi__row-link", href: row.href, target: row.external ? '_blank' : undefined, rel: row.external ? 'noopener' : undefined, children: row.text })) : (_jsx("span", { className: "kpt-map-poi__row-value", children: row.text })), _jsxs("span", { className: "kpt-map-poi__row-actions", children: [row.href ? (_jsx("a", { className: "kpt-map-poi__row-action", href: row.href, target: row.external ? '_blank' : undefined, rel: row.external ? 'noopener' : undefined, "aria-label": row.actionLabel, title: row.actionLabel, children: _jsx(KptIcon, { name: row.actionIcon }) })) : null, canCopy ? (_jsx("button", { className: "kpt-map-poi__row-action", type: "button", "aria-label": t('map.poi.copy'), title: t('map.poi.copy'), onClick: () => void copy(row), children: _jsx(KptIcon, { name: justCopied === row.kind ? 'check' : 'copy' }) })) : null] })] }, row.kind))), (poi.facts ?? []).map((fact) => (_jsxs("li", { className: "kpt-map-poi__row kpt-map-poi__row--fact", children: [fact.icon ? (_jsx(KptIcon, { className: "kpt-map-poi__row-icon", name: fact.icon })) : (_jsx("span", { className: "kpt-map-poi__row-icon", "aria-hidden": "true" })), _jsxs("span", { className: "kpt-map-poi__row-value", children: [_jsx("span", { className: "kpt-map-poi__fact-label", children: fact.label }), " ", fact.value] })] }, fact.label)))] })) : null, _jsx("p", { className: "kpt-map-poi__live", "aria-live": "polite", children: justCopied ? t('map.poi.copied') : '' })] })] }));
+}

package/dist/map/map-search.d.ts

@@ -0,0 +1,37 @@
+import type { KptMapBounds, KptMapSearchResult } from '@konce-pt/map';
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptMapGeocoderPort } from './ports.ts';
+export interface KptMapSearchProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSelect'>, KptI18nOverrides {
+    /** Geokoder tego pola. Bez metody `search()` pole renderuje się wyłączone. */
+    geocoder?: KptMapGeocoderPort | null;
+    /** Podpowiedź w pustym polu. Pusta oddaje głos słownikowi `map.search.placeholder`. */
+    placeholder?: string;
+    /** Od ilu znaków pytać geokoder. Krótsze frazy zwracają pół świata. */
+    minLength?: number;
+    /** Ile milisekund ciszy przed zapytaniem. */
+    debounce?: number;
+    /** Ile podpowiedzi najwyżej. */
+    limit?: number;
+    /** Zawężenie twarde do krajów (ISO 3166-1 alpha-2) — wyniki spoza nich nie wrócą. */
+    countryCodes?: readonly string[] | null;
+    /** Preferowany prostokąt wyników. Nie odcina reszty świata, tylko przesuwa ją niżej. */
+    viewbox?: KptMapBounds | null;
+    disabled?: boolean;
+    /** Wybrano miejsce — **zawsze ze współrzędnymi**. */
+    onSelect?: (result: KptMapSearchResult) => void;
+    /** Pole wyczyszczone — rodzic sprząta po sobie (np. chowa tymczasową pinezkę). */
+    onClear?: () => void;
+}
+/**
+ * Wyszukiwarka adresów: pole z podpowiedziami z geokodera. Wynik wyboru leci w `onSelect`,
+ * a co z nim zrobić — decyduje rodzic (`KptMap` przenosi na niego widok).
+ *
+ * Świadomie **nie** stoi na `KptAutocomplete`: tamten filtruje opcje po stronie klienta (wyniki
+ * geokodera, tolerancyjne na literówki, wypadałyby z listy), a jego wartością jest sam `string`
+ * — nie ma czym przewieźć współrzędnych.
+ *
+ * @example
+ * <KptMapSearch geocoder={geocoder} viewbox={bounds} onSelect={goTo} />
+ */
+export declare function KptMapSearch({ geocoder, placeholder, minLength, debounce, limit, countryCodes, viewbox, disabled, onSelect, onClear, locale: localeOverride, dictionary, className, ...rest }: Readonly<KptMapSearchProps>): import("react").JSX.Element;

package/dist/map/map-search.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Wyszukiwarka adresów: pole z podpowiedziami z geokodera. Wynik wyboru leci w `onSelect`,
+ * a co z nim zrobić — decyduje rodzic (`KptMap` przenosi na niego widok).
+ *
+ * Świadomie **nie** stoi na `KptAutocomplete`: tamten filtruje opcje po stronie klienta (wyniki
+ * geokodera, tolerancyjne na literówki, wypadałyby z listy), a jego wartością jest sam `string`
+ * — nie ma czym przewieźć współrzędnych.
+ *
+ * @example
+ * <KptMapSearch geocoder={geocoder} viewbox={bounds} onSelect={goTo} />
+ */
+export function KptMapSearch({ geocoder = null, placeholder = '', minLength = 3, debounce = 300, limit = 5, countryCodes = null, viewbox = null, disabled = false, onSelect, onClear, locale: localeOverride, dictionary, className, ...rest }) {
+    const { t, locale } = useKptMessages({ locale: localeOverride, dictionary });
+    const uid = useId();
+    /** Tekst widoczny w polu. Wybór podpowiedzi wpisuje tu jego etykietę. */
+    const [query, setQuery] = useState('');
+    /**
+     * Fraza do odpytania geokodera. Osobna od `query`, bo wybór podpowiedzi zmienia treść pola
+     * — a to nie może wywołać kolejnego zapytania o coś, co już znaleźliśmy.
+     */
+    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. */
+    const [searched, setSearched] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    /** Nie udało się ustalić miejsca wybranej podpowiedzi — komunikat zamiast cichej ciszy. */
+    const [unresolved, setUnresolved] = useState(false);
+    /** Przerywacz dociągania w locie — kolejny wybór i czyszczenie pola go używają. */
+    const pending = useRef(null);
+    const canSearch = !!geocoder?.search;
+    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);
+            return;
+        }
+        setLoading(true);
+        const controller = new AbortController();
+        const timer = setTimeout(() => {
+            geocoder
+                .search(needle, {
+                language: locale,
+                limit,
+                viewbox: viewbox ?? undefined,
+                countryCodes: countryCodes ?? undefined,
+                signal: controller.signal,
+            })
+                .then((found) => {
+                if (!controller.signal.aborted)
+                    applyResults(found);
+            })
+                // Nieudane zapytanie to pusta lista, a nie wywrotka pola.
+                .catch(() => {
+                if (!controller.signal.aborted)
+                    applyResults([]);
+            });
+        }, debounce);
+        return () => {
+            clearTimeout(timer);
+            controller.abort();
+        };
+    }, [term, geocoder, minLength, debounce, limit, viewbox, countryCodes, locale, applyResults]);
+    useEffect(() => () => pending.current?.abort(), []);
+    const status = (() => {
+        if (tooShort)
+            return t('map.search.minLength', { count: minLength });
+        if (busy)
+            return t('map.search.searching');
+        if (unresolved)
+            return t('map.search.noResults');
+        if (!searched)
+            return '';
+        return results.length === 0
+            ? t('map.search.noResults')
+            : t('map.search.found', { count: results.length });
+    })();
+    /**
+     * Wybór podpowiedzi. Dostawca, który podał współrzędne na liście, emituje natychmiast;
+     * podpowiedź bez `at` trzeba najpierw uzupełnić — jedno wywołanie `resolve()` na *wybór*,
+     * nigdy w trakcie pisania.
+     */
+    const pick = (suggestion) => {
+        // Etykieta wraca do pola, ale `term` zostaje — inaczej wybór odpaliłby kolejne zapytanie.
+        setQuery(suggestion.label);
+        setActiveIndex(-1);
+        setUnresolved(false);
+        pending.current?.abort();
+        pending.current = null;
+        if (suggestion.at) {
+            setOpen(false);
+            setResolving(false);
+            onSelect?.(suggestion);
+            return;
+        }
+        // Do listy trafiają tylko pozycje możliwe do obsłużenia, więc tu nie ma czego ratować.
+        if (!geocoder?.resolve)
+            return;
+        const controller = new AbortController();
+        pending.current = controller;
+        setResolving(true);
+        geocoder
+            .resolve(suggestion, { language: locale, signal: controller.signal })
+            .then((result) => applyResolved(result, controller))
+            // Nieudane dociągnięcie to komunikat, a nie wywrotka pola.
+            .catch(() => applyResolved(null, controller));
+    };
+    const applyResolved = (result, controller) => {
+        if (controller.signal.aborted)
+            return;
+        setResolving(false);
+        pending.current = null;
+        if (!result) {
+            // Etykieta zostaje w polu, żeby dało się poprawić frazę zamiast pisać ją od zera.
+            setUnresolved(true);
+            setOpen(true);
+            return;
+        }
+        setOpen(false);
+        onSelect?.(result);
+    };
+    const clear = () => {
+        pending.current?.abort();
+        pending.current = null;
+        setResolving(false);
+        setUnresolved(false);
+        setQuery('');
+        setTerm('');
+        setResults([]);
+        setSearched(false);
+        setActiveIndex(-1);
+        setOpen(false);
+        onClear?.();
+    };
+    const onKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setOpen(true);
+                setActiveIndex((index) => Math.min(index + 1, results.length - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((index) => Math.max(index - 1, 0));
+                break;
+            case 'Enter': {
+                const result = results[activeIndex];
+                if (result) {
+                    // Pole bywa w formularzu aplikacji — Enter nie ma go wysyłać.
+                    event.preventDefault();
+                    pick(result);
+                }
+                break;
+            }
+            case 'Escape':
+                // Pierwszy Esc zamyka listę, drugi czyści pole — jak w polu wyszukiwania przeglądarki.
+                if (open)
+                    setOpen(false);
+                else if (query)
+                    clear();
+                break;
+            default:
+                break;
+        }
+    };
+    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) => {
+                            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) => {
+                            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

@@ -0,0 +1,113 @@
+import type { KptClusterOptions, KptLatLng, KptMapBounds, KptMapCategory, KptMapCluster, KptMapCreateEvent, KptMapEngineFactory, KptMapGeolocationError, KptMapLocation, KptMapSearchResult, KptMapUserPosition, KptMapView } from '@konce-pt/map';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptMapGeocoderPort, KptMapGeolocationPort } from './ports.ts';
+/** Kontekst treści popupu — odpowiednik kontekstu szablonu `kptMapPopup` z portu Angulara. */
+export interface KptMapPopupContext<T> {
+    location: KptMapLocation<T>;
+    data: T | undefined;
+    category: KptMapCategory | undefined;
+    /** Odległość od `distanceFrom` (albo od użytkownika) w metrach; `null` bez punktu odniesienia. */
+    distance: number | null;
+    close: () => void;
+}
+/** Kontekst własnego formularza „dodaj lokalizację". */
+export interface KptMapCreateFormApi {
+    at: KptLatLng;
+    category: KptMapCategory;
+    close: () => void;
+    submit: (value: Record<string, unknown>) => void;
+}
+export interface KptMapProps<T = unknown> extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSelect'>, KptI18nOverrides {
+    locations: readonly KptMapLocation<T>[];
+    categories: readonly KptMapCategory[];
+    /** Kod kraju z presetów (`PL`, `DE`, `EU`…). Nieznany kod cofa się do Polski. */
+    country?: string;
+    /** Jawny widok startowy; nadpisuje `country`. */
+    view?: KptMapView | null;
+    /** Jawny zasięg startowy; nadpisuje `country` i `view`. */
+    bounds?: KptMapBounds | null;
+    /** Blokuje przesuwanie poza zasięg kraju (albo `bounds`, gdy podane). */
+    restrictToCountry?: boolean;
+    cluster?: boolean;
+    clusterOptions?: Partial<Omit<KptClusterOptions, 'zoom'>>;
+    /** `dominant` barwi grupę kolorem najliczniejszej kategorii. */
+    clusterColorBy?: 'dominant' | 'none';
+    /** Renderuje legendę pod mapą. */
+    legend?: boolean;
+    legendCounts?: boolean;
+    /** Identyfikatory ukrytych kategorii — kontrolowane albo niekontrolowane. */
+    hiddenCategories?: string[];
+    defaultHiddenCategories?: string[];
+    onHiddenCategoriesChange?: (hidden: string[]) => void;
+    showUserLocation?: boolean;
+    /** Przy każdej nowej pozycji centruje mapę na użytkowniku. */
+    followUser?: boolean;
+    /** Źródło pozycji użytkownika. Bez niego kontrolka „moje położenie" nie ma czego pokazać. */
+    geolocation?: KptMapGeolocationPort | null;
+    /** Włącza menu „Dodaj lokalizację" pod prawym przyciskiem myszy. */
+    allowCreate?: boolean;
+    /** Pokazuje wyszukiwarkę adresów. Wymaga geokodera **z metodą `search()`**. */
+    search?: boolean;
+    searchPlaceholder?: string;
+    searchOptions?: {
+        minLength?: number;
+        debounce?: number;
+        limit?: number;
+        countryCodes?: readonly string[];
+    };
+    /** Zoom dla wyniku bez własnego zasięgu (pojedynczy adres). */
+    searchZoom?: number;
+    /** Zostawia tymczasową pinezkę w znalezionym punkcie. */
+    searchMarker?: boolean;
+    /** Geokoder tej mapy — obsługuje i wyszukiwarkę, i podpowiedzi adresu w formularzu. */
+    geocoder?: KptMapGeocoderPort | null;
+    /** `card` oddaje popup w całości treści: bez paddingu, szerszy, z przewijaniem. */
+    popupLayout?: 'plain' | 'card';
+    /** Punkt odniesienia dystansu w popupie; `null` = pozycja użytkownika. */
+    distanceFrom?: KptLatLng | null;
+    height?: string;
+    /** Bez znaczenia dla silnika Google — kafle i atrybucję dostarcza tam Google. */
+    tileUrl?: string | null;
+    attribution?: string | null;
+    /**
+     * Fabryka silnika tej mapy. W Reakcie nie ma DI, więc to jedyna droga — i dobrze:
+     * dwie mapy o różnych silnikach mieszczą się na stronie bez żadnych opakowań.
+     * Czytana raz, przy inicjalizacji.
+     */
+    engine: KptMapEngineFactory;
+    /** Treść popupu. Bez niej popup pokazuje tytuł i nazwę kategorii. */
+    renderPopup?: (context: KptMapPopupContext<T>) => ReactNode;
+    /** Własny formularz „dodaj lokalizację"; jego obecność wyłącza formularz ze schemy. */
+    renderCreateForm?: (api: KptMapCreateFormApi) => ReactNode;
+    onLocationClick?: (location: KptMapLocation<T>) => void;
+    onClusterClick?: (cluster: KptMapCluster<T>) => void;
+    /** Komponent **nie dopisuje** nic do `locations` — źródłem prawdy jest aplikacja. */
+    onLocationCreate?: (event: KptMapCreateEvent) => void;
+    /** Wybrano podpowiedź wyszukiwarki; mapa już przeniosła widok. */
+    onSearchSelect?: (result: KptMapSearchResult) => void;
+    onViewChange?: (view: {
+        center: KptLatLng;
+        zoom: number;
+        bounds: KptMapBounds;
+    }) => void;
+    onUserPositionChange?: (position: KptMapUserPosition | null) => void;
+    onUserLocationError?: (error: KptMapGeolocationError) => void;
+}
+/**
+ * Mapa z konfigurowalnymi znacznikami: kategorie z kolorem i ikoną, grupowanie z licznikiem,
+ * popup szczegółów, legenda, wyszukiwarka adresów i dodawanie lokalizacji prawym przyciskiem.
+ *
+ * Silnik (Leaflet albo Google) przychodzi propem `engine` z `@konce-pt/map` — ta sama warstwa,
+ * na której stoi port Angulara. Leaflet ładuje się dynamicznym `import()`, więc aplikacja bez
+ * mapy go nie pobiera; wymaga też arkusza `leaflet/dist/leaflet.css`.
+ *
+ * @example
+ * <KptMap
+ *   engine={() => createLeafletEngine()}
+ *   locations={locations}
+ *   categories={categories}
+ *   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;