@konce-pt/react 0.11.2 → 0.14.0

package/dist/rich-text/sanitize.d.ts

@@ -1,10 +1,19 @@
+/**
+ * Czyści HTML i mówi, czy coś usunął. `changed: false` znaczy, że treść była czysta - wtedy
+ * wołający nie musi nadpisywać wartości modelu (serializacja DOM potrafi zmienić zapis, np.
+ * cudzysłowy, bez zmiany treści, a taka różnica nie może brudzić formularza).
+ */
+export declare function sanitizeHtmlReport(html: string): {
+    html: string;
+    changed: boolean;
+};
 /**
  * Czyści HTML wchodzący do edytora. Dotyczy **każdego** zapisu do DOM edytora, nie tylko
  * wklejania: `value` z aplikacji też bywa niezaufane (baza, CMS, inny użytkownik).
  */
 export declare function sanitizeHtml(html: string): string;
 /**
- * Waliduje URL z narzędzia „link". Brak schematu → dopisujemy `https://`; `#` i `/` przechodzą
- * bez zmian; schemat spoza allowlisty → `null`, czyli link nie zostaje wstawiony.
+ * Waliduje URL z narzędzia "link". Brak schematu -> dopisujemy `https://`; `#` i `/` przechodzą
+ * bez zmian; schemat spoza allowlisty -> `null`, czyli link nie zostaje wstawiony.
  */
 export declare function sanitizeUrl(url: string): string | null;

package/dist/rich-text/sanitize.js

@@ -1,7 +1,6 @@
 /*
- * Sanityzacja treści edytora. Kod nie zna Reacta — operuje wyłącznie na DOM, więc gdyby port
- * Angulara kiedyś sięgnął po wspólny rdzeń, wystarczy przenieść ten plik do osobnej paczki
- * (jak `@konce-pt/datetime`).
+ * Sanityzacja treści edytora. Kod nie zna frameworka - operuje wyłącznie na DOM. Bliźniak
+ * w porcie Angulara: `rich-text/sanitize.ts` - zmiana w obu (docelowo wspólna paczka pure-TS).
  */
 /** Znaczniki dopuszczone w treści; pozostałe rozwijamy do dzieci, nie usuwając tekstu. */
 const ALLOWED_TAGS = new Set([
@@ -16,16 +15,30 @@ const ALLOWED_STYLES = new Set([
 /*
  * `data-mention` i `contenteditable` są tu dla wzmianek: identyfikator musi przeżyć zapis treści,
  * a `contenteditable="false"` trzyma wzmiankę jako jeden kawałek, w którego środku nie da się
- * pisać. Oba atrybuty są bierne — nie wykonują niczego i nie wskazują zasobów, więc wpuszczenie
- * ich nie otwiera nowej furtki.
+ * pisać. Oba atrybuty są bierne - nie wykonują niczego i nie wskazują zasobów, więc wpuszczenie
+ * ich nie otwiera nowej furtki. `class` przechodzi osobno, tylko z klasami samego edytora.
  */
 const ALLOWED_ATTRS = new Set([
-    'colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title',
+    'colspan', 'rowspan', 'span', 'width', 'target', 'rel', 'title', 'color',
     'data-mention', 'contenteditable',
 ]);
-// Schematy dopuszczone w `href` narzędzia „link"; blocklista byłaby obchodzalna.
+/**
+ * Klasy, które zostawia sam edytor (`kpt-rt-table`, `kpt-mention`). Obce klasy z wklejki - aplikacji,
+ * biblioteki (`kpt-dialog`, `kpt-visually-hidden`) czy Tailwinda - przejęłyby ich wygląd tam,
+ * gdzie aplikacja wyświetla treść.
+ */
+const EDITOR_CLASS = /^kpt-(rt-[a-z0-9-]+|mention)$/;
+// Schematy dopuszczone w `href` - ta sama allowlista dla narzędzia "link" i dla wklejonego HTML.
 const SAFE_URL_SCHEME = /^(https?:|mailto:|tel:)/i;
 const HAS_URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+/** Znaki sterujące, które przeglądarka pomija przy parsowaniu URL-a (`jav\tascript:`). */
+// eslint-disable-next-line no-control-regex -- celowo: właśnie te znaki trzeba wyciąć przed testem schematu
+const URL_CONTROL = /[\x00-\x1f]/g;
+/** Czy adres z treści może zostać: względny (bez schematu) albo ze schematu z allowlisty. */
+function isSafeHref(value) {
+    const compact = value.replace(URL_CONTROL, '').trim();
+    return !HAS_URL_SCHEME.test(compact) || SAFE_URL_SCHEME.test(compact);
+}
 /** Deklaracje `style` z allowlisty; `null`, gdy nie zostaje nic. */
 function sanitizeStyleAttr(value) {
     const kept = value
@@ -34,56 +47,91 @@ function sanitizeStyleAttr(value) {
         .filter((decl) => ALLOWED_STYLES.has(decl.split(':')[0]?.trim().toLowerCase() ?? ''));
     return kept.length ? kept.join('; ') : null;
 }
-function sanitizeAttribute(el, attr) {
+function sanitizeAttribute(el, attr, report) {
     const name = attr.name.toLowerCase();
-    if (name.startsWith('on')) {
+    const remove = () => {
         el.removeAttribute(attr.name);
-    }
-    else if (name === 'href' || name === 'src') {
-        // Znaki kontrolne usuwamy przed testem schematu — przeglądarka i tak je pomija przy
-        // parsowaniu URL-a, więc `jav\tascript:` obszedłby samo porównanie napisów.
-        // eslint-disable-next-line no-control-regex
-        if (/^\s*javascript:/i.test(attr.value.replace(/[\x00-\x1f]/g, '')))
-            el.removeAttribute(attr.name);
+        report.changed = true;
+    };
+    if (name === 'href') {
+        if (!isSafeHref(attr.value))
+            remove();
     }
     else if (name === 'style') {
         const kept = sanitizeStyleAttr(attr.value);
-        if (kept)
+        const declared = attr.value.split(';').filter((decl) => decl.trim()).length;
+        if (kept === null)
+            remove();
+        else if (kept.split('; ').length !== declared) {
+            // Zmiana tylko wtedy, gdy wypadła deklaracja - samo przeformatowanie zapisu się nie liczy.
             el.setAttribute('style', kept);
-        else
-            el.removeAttribute('style');
+            report.changed = true;
+        }
     }
-    else if (!ALLOWED_ATTRS.has(name) && name !== 'color') {
-        el.removeAttribute(attr.name);
+    else if (name === 'class') {
+        const tokens = attr.value.split(/\s+/).filter(Boolean);
+        const kept = tokens.filter((token) => EDITOR_CLASS.test(token));
+        if (kept.length === 0)
+            remove();
+        else if (kept.length !== tokens.length) {
+            el.setAttribute('class', kept.join(' '));
+            report.changed = true;
+        }
     }
+    else if (!ALLOWED_ATTRS.has(name)) {
+        // Także `on*` i `src` - żaden dopuszczony znacznik nie ładuje zasobów.
+        remove();
+    }
+}
+/** Link otwierany w nowej karcie dostaje `noopener noreferrer` - bez tego karta sięga do `opener`. */
+function secureTarget(el, report) {
+    if (el.tagName !== 'A' || !el.hasAttribute('target'))
+        return;
+    const rel = new Set((el.getAttribute('rel') ?? '').split(/\s+/).filter(Boolean));
+    if (rel.has('noopener') && rel.has('noreferrer'))
+        return;
+    rel.add('noopener');
+    rel.add('noreferrer');
+    el.setAttribute('rel', [...rel].join(' '));
+    report.changed = true;
 }
 /** Tag spoza allowlisty rozwijamy do dzieci; atrybuty czyścimy po kolei. */
-function sanitizeElement(el) {
+function sanitizeElement(el, report) {
     if (!ALLOWED_TAGS.has(el.tagName)) {
         el.replaceWith(...Array.from(el.childNodes));
+        report.changed = true;
         return;
     }
     for (const attr of Array.from(el.attributes))
-        sanitizeAttribute(el, attr);
+        sanitizeAttribute(el, attr, report);
+    secureTarget(el, report);
 }
 /**
- * Czyści HTML wchodzący do edytora. Dotyczy **każdego** zapisu do DOM edytora, nie tylko
- * wklejania: `value` z aplikacji też bywa niezaufane (baza, CMS, inny użytkownik).
+ * Czyści HTML i mówi, czy coś usunął. `changed: false` znaczy, że treść była czysta - wtedy
+ * wołający nie musi nadpisywać wartości modelu (serializacja DOM potrafi zmienić zapis, np.
+ * cudzysłowy, bez zmiany treści, a taka różnica nie może brudzić formularza).
  */
-export function sanitizeHtml(html) {
+export function sanitizeHtmlReport(html) {
     const template = document.createElement('template');
     template.innerHTML = html;
+    const report = { changed: false };
     for (const el of Array.from(template.content.querySelectorAll('*')))
-        sanitizeElement(el);
-    return template.innerHTML;
+        sanitizeElement(el, report);
+    return { html: template.innerHTML, changed: report.changed };
+}
+/**
+ * Czyści HTML wchodzący do edytora. Dotyczy **każdego** zapisu do DOM edytora, nie tylko
+ * wklejania: `value` z aplikacji też bywa niezaufane (baza, CMS, inny użytkownik).
+ */
+export function sanitizeHtml(html) {
+    return sanitizeHtmlReport(html).html;
 }
 /**
- * Waliduje URL z narzędzia „link". Brak schematu → dopisujemy `https://`; `#` i `/` przechodzą
- * bez zmian; schemat spoza allowlisty → `null`, czyli link nie zostaje wstawiony.
+ * Waliduje URL z narzędzia "link". Brak schematu -> dopisujemy `https://`; `#` i `/` przechodzą
+ * bez zmian; schemat spoza allowlisty -> `null`, czyli link nie zostaje wstawiony.
  */
 export function sanitizeUrl(url) {
-    // eslint-disable-next-line no-control-regex
-    const trimmed = url.trim().replace(/[\x00-\x1f]/g, '');
+    const trimmed = url.trim().replace(URL_CONTROL, '');
     if (!trimmed)
         return null;
     if (trimmed.startsWith('#') || trimmed.startsWith('/'))

package/dist/rich-text/tables.d.ts

@@ -14,7 +14,7 @@ export interface Bounds {
 }
 /** Klasa znacząca komórki objęte zaznaczeniem prostokątnym. */
 export declare const CELL_SELECTED = "kpt-rt-cell-sel";
-/** Macierz komórek: pozycja w siatce, a nie w DOM — scalona komórka zajmuje kilka pól. */
+/** Macierz komórek: pozycja w siatce, a nie w DOM - scalona komórka zajmuje kilka pól. */
 export declare function buildGrid(table: HTMLTableElement): {
     grid: HTMLTableCellElement[][];
     pos: GridPos;
@@ -23,7 +23,7 @@ export declare function buildGrid(table: HTMLTableElement): {
 export declare function cellsInRegion(grid: HTMLTableCellElement[][], b: Bounds): Set<HTMLTableCellElement>;
 /**
  * Prostokątne zaznaczenie od komórki-kotwicy do komórki pod kursorem. Granice rosną, aż region
- * w pełni obejmie scalone komórki na brzegach — inaczej scalanie działałoby na pół komórki.
+ * w pełni obejmie scalone komórki na brzegach - inaczej scalanie działałoby na pół komórki.
  */
 export declare function regionBetween(anchor: HTMLTableCellElement, focus: HTMLTableCellElement): Set<HTMLTableCellElement>;
 /** Równe szerokości kolumn po wstawieniu albo usunięciu kolumny. */
@@ -34,7 +34,7 @@ export declare function insertColumn(cell: HTMLTableCellElement, dir: 'left' | '
 export declare function deleteColumn(cell: HTMLTableCellElement): void;
 export declare function insertRow(cell: HTMLTableCellElement, dir: 'above' | 'below'): void;
 export declare function deleteRow(cell: HTMLTableCellElement): void;
-/** Podmienia znacznik komórki `td` ↔ `th`, zachowując atrybuty i treść. */
+/** Podmienia znacznik komórki `td` <-> `th`, zachowując atrybuty i treść. */
 export declare function swapCellTag(cell: HTMLTableCellElement, tag: 'td' | 'th'): void;
 export declare function toggleHeaderRow(cell: HTMLTableCellElement): void;
 export declare function toggleHeaderColumn(cell: HTMLTableCellElement): void;

package/dist/rich-text/tables.js

@@ -4,7 +4,7 @@
  */
 /** Klasa znacząca komórki objęte zaznaczeniem prostokątnym. */
 export const CELL_SELECTED = 'kpt-rt-cell-sel';
-/** Macierz komórek: pozycja w siatce, a nie w DOM — scalona komórka zajmuje kilka pól. */
+/** Macierz komórek: pozycja w siatce, a nie w DOM - scalona komórka zajmuje kilka pól. */
 export function buildGrid(table) {
     const grid = [];
     const pos = new Map();
@@ -65,7 +65,7 @@ function growBounds(grid, pos, b) {
 }
 /**
  * Prostokątne zaznaczenie od komórki-kotwicy do komórki pod kursorem. Granice rosną, aż region
- * w pełni obejmie scalone komórki na brzegach — inaczej scalanie działałoby na pół komórki.
+ * w pełni obejmie scalone komórki na brzegach - inaczej scalanie działałoby na pół komórki.
  */
 export function regionBetween(anchor, focus) {
     const table = anchor.closest('table');
@@ -153,7 +153,7 @@ export function deleteRow(cell) {
     }
     tr.remove();
 }
-/** Podmienia znacznik komórki `td` ↔ `th`, zachowując atrybuty i treść. */
+/** Podmienia znacznik komórki `td` <-> `th`, zachowując atrybuty i treść. */
 export function swapCellTag(cell, tag) {
     if (cell.tagName.toLowerCase() === tag)
         return;

package/dist/roadmap/llms.txt

@@ -9,40 +9,40 @@ A separate subpath, because the geometry, the styles and the data model are heav
 library core and not every app needs them.
 
 ## Props
-- `config`: `KptRoadmapConfig` (required) — the data and every option
-- `scrollHeight`: string | null — a fixed height, e.g. '420px'; enables the sticky header
-- `labelWidth`: string — the width of the label column (default '14rem')
-- `cellWidthPx`: number | null — the width of an axis column; without it the value depends on the zoom
-- `showToday`: boolean — the "today" marker (default true)
-- `virtual`: boolean — renders only the visible rows; worth it from roughly 100 rows up
-- `collapsedGroups` / `defaultCollapsedGroups` / `onCollapsedGroupsChange` — the ids of collapsed
+- `config`: `KptRoadmapConfig` (required) - the data and every option
+- `scrollHeight`: string | null - a fixed height, e.g. '420px'; enables the sticky header
+- `labelWidth`: string - the width of the label column (default '14rem')
+- `cellWidthPx`: number | null - the width of an axis column; without it the value depends on the zoom
+- `showToday`: boolean - the "today" marker (default true)
+- `virtual`: boolean - renders only the visible rows; worth it from roughly 100 rows up
+- `collapsedGroups` / `defaultCollapsedGroups` / `onCollapsedGroupsChange` - the ids of collapsed
   groups, controlled or uncontrolled
-- `onItemClick(item)`, `onRangeChange(range)` — the click on a bar and the computed axis range
+- `onItemClick(item)`, `onRangeChange(range)` - the click on a bar and the computed axis range
 - `className`, `ref` and every other `<div>` prop go to the host
-- `locale`, `dictionary` — the per-component i18n overrides
+- `locale`, `dictionary` - the per-component i18n overrides
 
 ## The config is the API
 `{ items, groups?, links?, zoom?, range?, locale?, today?, timeline?, rows?, dependencies?,
-interaction? }` — the same shape the Angular port takes, because both read it from
+interaction? }` - the same shape the Angular port takes, because both read it from
 `@konce-pt/roadmap`. An item is `{ id, label, start, end?, sublabel?, variant?, color?, progress?,
 groupId?, dependsOn?, milestone?, meta? }`; no `end` means a milestone diamond, and a bare string in
 `dependsOn` is an 'FS' dependency.
 
 ## The geometry lives in a package
 The calendar arithmetic, the timeline bands and cells, the row layout, lane packing and the
-dependency polylines come from `@konce-pt/roadmap` — pure functions with `node --test` coverage,
+dependency polylines come from `@konce-pt/roadmap` - pure functions with `node --test` coverage,
 shared with the Angular port. The component only turns them into DOM and SVG.
 
 ## Collapsing has two sources
 `group.collapsed` in the data and the `collapsedGroups` prop are kept apart, so an app that controls
 the state keeps control while a group collapsed declaratively still works. Expanding removes the
-group from both — otherwise `group.collapsed` would immediately collapse it again. The declarative
+group from both - otherwise `group.collapsed` would immediately collapse it again. The declarative
 set is recomputed during render whenever the `groups` array identity changes; an effect would do it
 one render too late, that is after the group flashed open.
 
 ## Measuring, not guessing
 The SVG dependency layer works in pixels, so the lane width and the scroll viewport are measured
-with a `ResizeObserver` in a layout effect. Before the first measurement no link is drawn — half a
+with a `ResizeObserver` in a layout effect. Before the first measurement no link is drawn - half a
 frame without arrows beats arrows in the wrong place.
 
 ## Examples
@@ -63,13 +63,13 @@ frame without arrows beats arrows in the wrong place.
   different lengths; inside a column the position is interpolated linearly.
 - An item extending past the axis range is cut off on the side where it is clipped.
 - Tooltips use `KptTooltip`, mostly with `onlyWhenTruncated`: a tooltip shows what cannot be seen.
-  Milestones and header cells carry one unconditionally — a diamond shows no text at all.
+  Milestones and header cells carry one unconditionally - a diamond shows no text at all.
 - Dependencies: 'FS' (the default), 'SS', 'FF', 'SF'; violated ones are drawn as a dashed line in
   the danger color.
 - Entries with an invalid date or a duplicate `id` are skipped, with a warning in a development build.
 
 ## i18n
-The `roadmap.*` keys: `empty`, `week`, `today`, `milestone`, `expandGroup`, `collapseGroup`.
+The `roadmap.*` keys: `empty`, `week`, `today`, `milestone`, `expandGroup`, `collapseGroup`, `progress` (`{percent}`).
 Month and weekday names come from `Intl` per `config.locale` or the locale from `KptI18nProvider`.
 
 ## Tokens
@@ -78,5 +78,11 @@ bars per variant `--kpt-color-{primary,success,danger,warning,info,muted}`.
 Sizes: `--kpt-roadmap-label-w`, `--kpt-roadmap-cell-w` (both can be overridden from outside).
 
 ## Accessibility
-Group toggles are real buttons with `aria-expanded`; bars and milestones are focusable and answer
-Enter and Space like a click. The background grid and the dependency layer are `aria-hidden`.
+Bars and milestones are `role="button"` with an accessible name built from the label, sublabel, date range
+and progress (`Design, 3-14 Mar 2026, 40% complete`) - the end is exclusive, so the last occupied day is
+announced. The whole bar grid is one Tab stop (roving tabindex): Left/Right move within a row, Up/Down go to
+the bar with the nearest start in the neighbouring row, Home/End jump to the row's edge, Ctrl+Home/End to the
+first/last bar; Enter and Space act like a click. With `virtual` on, moving to a row outside the window
+scrolls it in first. Disabled items get `aria-disabled`. A group toggle is named by the group label and
+carries `aria-expanded`; "Expand/Collapse group" is only its tooltip. The background grid and the dependency
+layer are `aria-hidden`.

package/dist/roadmap/roadmap.d.ts

@@ -8,15 +8,15 @@ export interface KptRoadmapProps<TItem = unknown, TGroup = unknown> extends Omit
     scrollHeight?: string | null;
     /** Szerokość kolumny etykiet. */
     labelWidth?: string;
-    /** Szerokość kolumny osi czasu; brak ⇒ wartość zależna od zoomu. */
+    /** Szerokość kolumny osi czasu; brak => wartość zależna od zoomu. */
     cellWidthPx?: number | null;
-    /** Znacznik „dziś". */
+    /** Znacznik "dziś". */
     showToday?: boolean;
     /** Renderowanie tylko widocznych wierszy. Warto włączyć od ~100 wierszy. */
     virtual?: boolean;
-    /** Zwinięte grupy — tryb kontrolowany. */
+    /** Zwinięte grupy - tryb kontrolowany. */
     collapsedGroups?: string[];
-    /** Zwinięte grupy na starcie — tryb niekontrolowany. */
+    /** Zwinięte grupy na starcie - tryb niekontrolowany. */
     defaultCollapsedGroups?: string[];
     onCollapsedGroupsChange?: (ids: string[]) => void;
     onItemClick?: (item: KptRoadmapItem<TItem>) => void;
@@ -24,11 +24,11 @@ export interface KptRoadmapProps<TItem = unknown, TGroup = unknown> extends Omit
     onRangeChange?: (range: KptTimeRange) => void;
 }
 /**
- * Roadmapa — wiersze zadań na poziomej osi czasu (widok typu Gantt).
+ * Roadmapa - wiersze zadań na poziomej osi czasu (widok typu Gantt).
  *
  * Układ opiera się na DOM i `position: sticky` (kolumna etykiet oraz nagłówek),
  * paski są pozycjonowane procentowo w torze, a zależności rysuje warstwa SVG
- * rozpięta nad torami. Cała geometria pochodzi z `@konce-pt/roadmap` — tej samej
+ * rozpięta nad torami. Cała geometria pochodzi z `@konce-pt/roadmap` - tej samej
  * paczki, z której korzysta port Angulara.
  *
  * @example

package/dist/roadmap/roadmap.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { buildRows, buildTimeline, linkGeometry, resolveLinks, resolveRange, sliceRows, } from '@konce-pt/roadmap';
+import { buildRows, buildTimeline, linkGeometry, resolveLinks, resolveRange, roadmapItemDates, roadmapNavTarget, sliceRows, } from '@konce-pt/roadmap';
 import { cn } from "../internal/cn.js";
 import { isDevBuild } from "../internal/dev.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -15,16 +16,16 @@ const CELL_WIDTH = {
     day: 44,
     hour: 46,
 };
-/** Wysokość paska w trybie „jeden item na wiersz" (px). */
+/** Wysokość paska w trybie "jeden item na wiersz" (px). */
 const BAR_HEIGHT = 22;
-/** Odstęp między pasami w trybie „pack" (px). */
+/** Odstęp między pasami w trybie "pack" (px). */
 const LANE_GAP = 4;
 /**
- * Roadmapa — wiersze zadań na poziomej osi czasu (widok typu Gantt).
+ * Roadmapa - wiersze zadań na poziomej osi czasu (widok typu Gantt).
  *
  * Układ opiera się na DOM i `position: sticky` (kolumna etykiet oraz nagłówek),
  * paski są pozycjonowane procentowo w torze, a zależności rysuje warstwa SVG
- * rozpięta nad torami. Cała geometria pochodzi z `@konce-pt/roadmap` — tej samej
+ * rozpięta nad torami. Cała geometria pochodzi z `@konce-pt/roadmap` - tej samej
  * paczki, z której korzysta port Angulara.
  *
  * @example
@@ -40,22 +41,22 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
     /**
      * Grupy zwinięte na starcie przez `group.collapsed`. Trzymamy je osobno od stanu aplikacji,
      * żeby sterowanie z zewnątrz pozostało w jej rękach, a zwinięcie zadeklarowane w danych
-     * nadal działało. Wyliczamy w trakcie renderu i resetujemy, gdy zmieni się lista grup —
+     * nadal działało. Wyliczamy w trakcie renderu i resetujemy, gdy zmieni się lista grup -
      * efekt zrobiłby to samo o jeden render za późno, czyli po mignięciu rozwiniętej grupy.
      */
     const [fromConfig, setFromConfig] = useState(() => declaredCollapsed(config.groups));
-    const groupsRef = useRef(config.groups);
-    if (groupsRef.current !== config.groups) {
-        groupsRef.current = config.groups;
+    const [prevGroups, setPrevGroups] = useState(config.groups);
+    if (prevGroups !== config.groups) {
+        setPrevGroups(config.groups);
         setFromConfig(declaredCollapsed(config.groups));
     }
-    /** Suma obu źródeł — stan faktycznie użyty do budowy wierszy. */
+    /** Suma obu źródeł - stan faktycznie użyty do budowy wierszy. */
     const collapsedIds = useMemo(() => new Set([...fromConfig, ...collapsed]), [fromConfig, collapsed]);
     const scrollRef = useRef(null);
     const laneRef = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
     const [viewportHeight, setViewportHeight] = useState(0);
-    /** Szerokość toru w px — potrzebna warstwie SVG, która pracuje w pikselach. */
+    /** Szerokość toru w px - potrzebna warstwie SVG, która pracuje w pikselach. */
     const [laneWidth, setLaneWidth] = useState(0);
     const zoom = config.zoom ?? 'week';
     const cellWidth = cellWidthPx ?? CELL_WIDTH[zoom];
@@ -68,13 +69,35 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
         weekPrefix: config.timeline?.weekPrefix ?? t('roadmap.week'),
     }), [range, zoom, config, locale, t]);
     const layout = useMemo(() => buildRows(config.items, config.groups, collapsedIds, config.rows), [config.items, config.groups, config.rows, collapsedIds]);
-    /** Wiersze faktycznie renderowane — całość albo okno wirtualizacji. */
+    const itemLocale = config.locale ?? config.timeline?.locale ?? locale;
+    /**
+     * Paski widoczne na osi, wiersz po wierszu - mapa dla nawigacji strzałkami. Liczona ze wszystkich
+     * wierszy, nie z okna wirtualizacji: strzałka w dół z ostatniego wyrenderowanego wiersza ma dokąd iść.
+     */
+    const navGrid = useMemo(() => layout.rows.map((row) => row.kind === 'group'
+        ? []
+        : row.items
+            .filter((item) => timeline.span(item.start, item.end).visible)
+            .map((item) => ({ id: item.id, start: item.start }))
+            .sort((a, b) => a.start - b.start)), [layout, timeline]);
+    /** Pasek, na którym ostatnio był fokus. */
+    const [activeId, setActiveId] = useState(null);
+    /**
+     * Jedyny przystanek Tab w siatce pasków (roving tabindex) - ostatnio aktywny pasek, a gdy zniknął
+     * (zwinięta grupa, inne dane), pierwszy. Bez tego roadmapa ze stu zadaniami to sto przystanków Tab.
+     */
+    const tabStopId = useMemo(() => {
+        if (activeId && navGrid.some((row) => row.some((item) => item.id === activeId)))
+            return activeId;
+        return navGrid.find((row) => row.length > 0)?.[0].id ?? null;
+    }, [navGrid, activeId]);
+    /** Wiersze faktycznie renderowane - całość albo okno wirtualizacji. */
     const visibleRows = useMemo(() => {
         if (!virtual || viewportHeight <= 0)
             return layout.rows;
         return sliceRows(layout, scrollTop, viewportHeight).rows;
     }, [virtual, viewportHeight, layout, scrollTop]);
-    // Zakres jest wielkością wyliczaną — informujemy o nim po każdym przeliczeniu.
+    // Zakres jest wielkością wyliczaną - informujemy o nim po każdym przeliczeniu.
     useEffect(() => {
         onRangeChange?.(range);
     }, [range, onRangeChange]);
@@ -103,13 +126,28 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
             console.warn('[kpt-roadmap] Pominięto elementy:', invalid.map((entry) => `${entry.id} (${entry.reason})`).join(', '));
         }
     }, [layout]);
-    /** Wysokość paska wraz z odstępem — wspólna dla widoku i geometrii zależności. */
+    /** Wysokość paska wraz z odstępem - wspólna dla widoku i geometrii zależności. */
     const laneStep = barHeight + LANE_GAP;
     /** Offset pionowy paska wewnątrz wiersza (px). */
     const barTop = useCallback((row, lane) => {
         const total = row.laneCount * barHeight + (row.laneCount - 1) * LANE_GAP;
         return Math.max(0, (row.height - total) / 2) + lane * laneStep;
     }, [barHeight, laneStep]);
+    /** Nazwa dostępna paska: "Etykieta, 3-14 mar 2026, ukończono 40%". */
+    const itemAriaLabel = useCallback((item) => {
+        const source = item.source;
+        const dates = roadmapItemDates(item.start, item.end, itemLocale, {
+            isMilestone: item.isMilestone,
+            withTime: zoom === 'hour',
+        });
+        const parts = [item.isMilestone ? `${t('roadmap.milestone')}: ${source.label}` : source.label, dates];
+        if (source.sublabel)
+            parts.splice(1, 0, source.sublabel);
+        if (source.progress != null && !item.isMilestone) {
+            parts.push(t('roadmap.progress', { percent: Math.round(source.progress * 100) }));
+        }
+        return parts.join(', ');
+    }, [itemLocale, zoom, t]);
     /** Paski danego wiersza gotowe do renderu. */
     const bars = useCallback((row) => {
         const result = [];
@@ -125,17 +163,18 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
                 top: barTop(row, item.lane),
                 height: barHeight,
                 label: source.label,
-                title: source.sublabel ? `${source.label} — ${source.sublabel}` : source.label,
+                title: source.sublabel ? `${source.label} - ${source.sublabel}` : source.label,
                 variant: source.variant ?? 'primary',
                 color: source.color,
                 progress: source.progress ?? null,
                 isMilestone: item.isMilestone,
                 clippedStart: geom.clippedStart,
                 clippedEnd: geom.clippedEnd,
+                ariaLabel: itemAriaLabel(item),
             });
         }
         return result;
-    }, [timeline, barTop, barHeight]);
+    }, [timeline, barTop, barHeight, itemAriaLabel]);
     /** Pasek zbiorczy wiersza grupy. */
     const summary = useCallback((row) => {
         const span = row.groupState?.span;
@@ -208,25 +247,63 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
             return;
         onItemClick?.(item.source);
     };
+    /** Przy wirtualizacji przewija tak, żeby wiersz z paskiem wszedł do okna i się wyrenderował. */
+    const revealRow = (scroll, id) => {
+        if (!virtual)
+            return;
+        const row = layout.rows.find((candidate) => candidate.items.some((item) => item.id === id));
+        if (!row)
+            return;
+        const header = scroll.querySelector('.kpt-roadmap__head')?.offsetHeight ?? 0;
+        const viewport = scroll.clientHeight - header;
+        let top = scroll.scrollTop;
+        if (row.top < top)
+            top = row.top;
+        else if (row.top + row.height > top + viewport)
+            top = row.top + row.height - viewport;
+        if (top === scroll.scrollTop)
+            return;
+        scroll.scrollTop = top;
+        setScrollTop(top);
+    };
+    /**
+     * Klawiatura na pasku: Enter/Spacja działają jak kliknięcie, strzałki przenoszą fokus po siatce
+     * (w poziomie po wierszu, w pionie między wierszami), Home/End na skraj wiersza, z Ctrl - roadmapy.
+     */
     const handleItemKeydown = (event, item) => {
-        if (event.key !== 'Enter' && event.key !== ' ')
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleItemClick(item);
+            return;
+        }
+        const target = roadmapNavTarget(navGrid, item.id, event.key, event.ctrlKey || event.metaKey);
+        if (!target)
             return;
         event.preventDefault();
-        handleItemClick(item);
+        setActiveId(target);
+        const scroll = event.currentTarget.closest('.kpt-roadmap__scroll');
+        if (!scroll)
+            return;
+        revealRow(scroll, target);
+        // Pasek z innego wiersza może jeszcze nie istnieć w DOM (wirtualizacja). Aktualizacja ze zdarzenia
+        // klawiatury jest zatwierdzana synchronicznie, więc w następnej klatce pasek już jest.
+        requestAnimationFrame(() => {
+            scroll.querySelector(`[data-kpt-item="${CSS.escape(target)}"]`)?.focus();
+        });
     };
     /**
      * Treść dymka dla kolumny etykiet. Pusta tam, gdzie dymek nie miałby czego
-     * uzupełnić — komponent pomija wtedy podpowiedź.
+     * uzupełnić - komponent pomija wtedy podpowiedź.
      */
     const labelTooltip = (row) => {
         // Wiersz grupy ma własny dymek, osadzony głębiej (na stosie etykiet).
         if (row.kind === 'group')
             return '';
-        // Tryb 'pack' mieści wiele zadań w jednym wierszu — nie ma jednej etykiety.
+        // Tryb 'pack' mieści wiele zadań w jednym wierszu - nie ma jednej etykiety.
         if (row.items.length !== 1)
             return '';
         const source = row.items[0].source;
-        return source.sublabel ? `${source.label} — ${source.sublabel}` : source.label;
+        return source.sublabel ? `${source.label} - ${source.sublabel}` : source.label;
     };
     const onScroll = (event) => {
         setScrollTop(event.currentTarget.scrollTop);
@@ -242,25 +319,25 @@ export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem',
                             const group = row.group;
                             const first = row.items[0];
                             const sum = row.kind === 'group' ? summary(row) : null;
-                            return (_jsxs("div", { className: cn('kpt-roadmap__row', row.kind === 'group' && 'kpt-roadmap__row--group'), style: { insetBlockStart: `${row.top}px`, blockSize: `${row.height}px` }, children: [_jsx(KptTooltip, { text: labelTooltip(row), onlyWhenTruncated: true, children: _jsx("div", { className: cn('kpt-roadmap__label', row.kind === 'group' && 'kpt-roadmap__label--group'), style: { paddingInlineStart: `${0.75 + row.depth * 1}rem` }, children: group ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kpt-roadmap__toggle", "aria-expanded": !isCollapsed(group), "aria-label": isCollapsed(group) ? t('roadmap.expandGroup') : t('roadmap.collapseGroup'), onClick: () => toggleGroup(group), children: _jsx("span", { className: cn('kpt-roadmap__toggle-icon', !isCollapsed(group) && 'kpt-roadmap__toggle-icon--open') }) }), _jsx(KptTooltip, { text: group.sublabel ? `${group.label} — ${group.sublabel}` : group.label, onlyWhenTruncated: true, children: _jsxs("span", { className: "kpt-roadmap__label-stack", children: [_jsx("span", { className: "kpt-roadmap__label-text kpt-roadmap__label-text--group", children: group.label }), group.sublabel && _jsx("span", { className: "kpt-roadmap__label-sub", children: group.sublabel })] }) }), row.groupState?.itemCount ? (_jsx("span", { className: "kpt-roadmap__label-count", children: row.groupState.itemCount })) : null] })) : (first && (_jsxs(_Fragment, { children: [_jsx("span", { className: "kpt-roadmap__label-text", children: first.source.label }), row.items.length === 1 && first.source.sublabel && (_jsx("span", { className: "kpt-roadmap__label-sub", children: first.source.sublabel }))] }))) }) }), _jsx("div", { className: "kpt-roadmap__lane", children: row.kind === 'group'
+                            return (_jsxs("div", { className: cn('kpt-roadmap__row', row.kind === 'group' && 'kpt-roadmap__row--group'), style: { insetBlockStart: `${row.top}px`, blockSize: `${row.height}px` }, children: [_jsx(KptTooltip, { text: labelTooltip(row), onlyWhenTruncated: true, children: _jsx("div", { className: cn('kpt-roadmap__label', row.kind === 'group' && 'kpt-roadmap__label--group'), style: { paddingInlineStart: `${0.75 + row.depth * 1}rem` }, children: group ? (_jsxs(_Fragment, { children: [_jsx(KptTooltip, { text: isCollapsed(group) ? t('roadmap.expandGroup') : t('roadmap.collapseGroup'), children: _jsx("button", { type: "button", className: "kpt-roadmap__toggle", "aria-expanded": !isCollapsed(group), "aria-label": group.label, onClick: () => toggleGroup(group), children: _jsx("span", { className: cn('kpt-roadmap__toggle-icon', !isCollapsed(group) && 'kpt-roadmap__toggle-icon--open') }) }) }), _jsx(KptTooltip, { text: group.sublabel ? `${group.label} - ${group.sublabel}` : group.label, onlyWhenTruncated: true, children: _jsxs("span", { className: "kpt-roadmap__label-stack", children: [_jsx("span", { className: "kpt-roadmap__label-text kpt-roadmap__label-text--group", children: group.label }), group.sublabel && _jsx("span", { className: "kpt-roadmap__label-sub", children: group.sublabel })] }) }), row.groupState?.itemCount ? (_jsx("span", { className: "kpt-roadmap__label-count", children: row.groupState.itemCount })) : null] })) : (first && (_jsxs(_Fragment, { children: [_jsx("span", { className: "kpt-roadmap__label-text", children: first.source.label }), row.items.length === 1 && first.source.sublabel && (_jsx("span", { className: "kpt-roadmap__label-sub", children: first.source.sublabel }))] }))) }) }), _jsx("div", { className: "kpt-roadmap__lane", children: row.kind === 'group'
                                             ? sum && (_jsx("div", { className: "kpt-roadmap__summary", "data-variant": sum.variant, style: {
                                                     insetInlineStart: `${sum.left}%`,
                                                     inlineSize: `${sum.width}%`,
                                                     backgroundColor: sum.color,
                                                 } }))
-                                            : bars(row).map((bar) => bar.isMilestone ? (_jsx(KptTooltip, { text: bar.title, children: _jsx("div", { className: "kpt-roadmap__milestone", "data-variant": bar.variant, "aria-label": `${t('roadmap.milestone')}: ${bar.label}`, style: {
+                                            : bars(row).map((bar) => bar.isMilestone ? (_jsx(KptTooltip, { text: bar.title, children: _jsx("div", { className: "kpt-roadmap__milestone", "data-variant": bar.variant, style: {
                                                         insetInlineStart: `${bar.left}%`,
                                                         insetBlockStart: `${bar.top}px`,
                                                         inlineSize: `${bar.height}px`,
                                                         blockSize: `${bar.height}px`,
                                                         backgroundColor: bar.color,
-                                                    }, tabIndex: 0, onClick: () => handleItemClick(bar.item), onKeyDown: (event) => handleItemKeydown(event, bar.item) }) }, bar.item.id)) : (_jsx(KptTooltip, { text: bar.title, onlyWhenTruncated: true, children: _jsxs("div", { className: cn('kpt-roadmap__bar', bar.clippedStart && 'kpt-roadmap__bar--clipped-start', bar.clippedEnd && 'kpt-roadmap__bar--clipped-end', bar.item.source.disabled && 'kpt-roadmap__bar--disabled'), "data-variant": bar.variant, style: {
+                                                    }, role: "button", "aria-label": bar.ariaLabel, "aria-disabled": bar.item.source.disabled || undefined, "data-kpt-item": bar.item.id, tabIndex: bar.item.id === tabStopId ? 0 : -1, onClick: () => handleItemClick(bar.item), onFocus: () => setActiveId(bar.item.id), onKeyDown: (event) => handleItemKeydown(event, bar.item) }) }, bar.item.id)) : (_jsx(KptTooltip, { text: bar.title, onlyWhenTruncated: true, children: _jsxs("div", { className: cn('kpt-roadmap__bar', bar.clippedStart && 'kpt-roadmap__bar--clipped-start', bar.clippedEnd && 'kpt-roadmap__bar--clipped-end', bar.item.source.disabled && 'kpt-roadmap__bar--disabled'), "data-variant": bar.variant, style: {
                                                         insetInlineStart: `${bar.left}%`,
                                                         inlineSize: `${bar.width}%`,
                                                         insetBlockStart: `${bar.top}px`,
                                                         blockSize: `${bar.height}px`,
                                                         backgroundColor: bar.color,
-                                                    }, tabIndex: 0, onClick: () => handleItemClick(bar.item), onKeyDown: (event) => handleItemKeydown(event, bar.item), children: [bar.progress !== null && (_jsx("span", { className: "kpt-roadmap__bar-progress", style: { inlineSize: `${bar.progress * 100}%` } })), _jsx("span", { className: "kpt-roadmap__bar-label", children: bar.label })] }) }, bar.item.id))) })] }, row.key));
+                                                    }, role: "button", "aria-label": bar.ariaLabel, "aria-disabled": bar.item.source.disabled || undefined, "data-kpt-item": bar.item.id, tabIndex: bar.item.id === tabStopId ? 0 : -1, onClick: () => handleItemClick(bar.item), onFocus: () => setActiveId(bar.item.id), onKeyDown: (event) => handleItemKeydown(event, bar.item), children: [bar.progress !== null && (_jsx("span", { className: "kpt-roadmap__bar-progress", style: { inlineSize: `${bar.progress * 100}%` } })), _jsx("span", { className: "kpt-roadmap__bar-label", children: bar.label })] }) }, bar.item.id))) })] }, row.key));
                         })] }))] }) }));
 }
 /** Identyfikatory grup zwiniętych deklaratywnie w danych. */

package/dist/roadmap-entry/public-api.js

@@ -1,7 +1,7 @@
 /*
- * @konce-pt/react/roadmap — oś czasu typu Gantt. Osobny subpath, bo geometria, style i dane
+ * @konce-pt/react/roadmap - oś czasu typu Gantt. Osobny subpath, bo geometria, style i dane
  * roadmapy są ciężkie względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
  */
 export { KptRoadmap } from "../roadmap/roadmap.js";
-// Rdzeń obliczeniowy (pure TS) — przydatny do własnych rozszerzeń, SSR i testów.
+// Rdzeń obliczeniowy (pure TS) - przydatny do własnych rozszerzeń, SSR i testów.
 export { buildTimeline, buildRows, normalizeItems, packLanes, sliceRows, spanOf, rollupProgress, resolveLinks, linkGeometry, roundedPolyline, arrowHead, autoRange, resolveRange, isoWeekNumber, isoWeekYear, isoWeekday, isoWeeksInYear, startOfIsoWeek, startOfDay, addDays, addHours, addMonths, addUnits, floorToUnit, ceilToUnit, countUnits, diffDays, daysInMonth, isSameDay, toTimestamp, } from '@konce-pt/roadmap';