@konce-pt/react 0.15.1 → 0.16.0

package/dist/charts/chart-tooltip.d.ts

@@ -10,12 +10,20 @@ export interface KptChartTooltipState {
     y: number;
     label: string;
     rows: KptChartTooltipRow[];
+    /** Kierunek ruchu do tego punktu: 1 w prawo, -1 w lewo, 0 bez kierunku - stąd wjeżdża etykieta. */
+    dir?: number;
+    /** Dymek już był na ekranie i jedzie dalej - etykieta animuje zmianę (pierwsze pokazanie stoi). */
+    live?: boolean;
 }
 export interface KptChartTooltipProps {
     state: KptChartTooltipState | null;
 }
 /**
- * Dymek wykresu - pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
- * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
+ * Dymek wykresu - pozycjonowany względem obszaru wykresu, niezależnie od skali SVG. Element
+ * wewnętrzny biblioteki, bliźniak `kpt-chart-tooltip` z portu Angulara (te same klasy i SCSS).
+ *
+ * Nie wychodzi poza obszar wykresu: przycięcie liczy się z faktycznej szerokości dymka. Przy
+ * chowaniu zostaje z ostatnią treścią i gaśnie (`--hidden`); cyfry wartości stoją na bębnach
+ * (`reelCells` z `@konce-pt/chart`), które przy kolejnym punkcie kręcą się do nowej liczby.
  */
 export declare function KptChartTooltip({ state }: Readonly<KptChartTooltipProps>): import("react").JSX.Element | null;

package/dist/charts/chart-tooltip.js

@@ -1,13 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { reelCells } from '@konce-pt/chart';
 import { cn } from "../internal/cn.js";
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 /**
- * Dymek wykresu - pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
- * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
+ * Dymek wykresu - pozycjonowany względem obszaru wykresu, niezależnie od skali SVG. Element
+ * wewnętrzny biblioteki, bliźniak `kpt-chart-tooltip` z portu Angulara (te same klasy i SCSS).
+ *
+ * Nie wychodzi poza obszar wykresu: przycięcie liczy się z faktycznej szerokości dymka. Przy
+ * chowaniu zostaje z ostatnią treścią i gaśnie (`--hidden`); cyfry wartości stoją na bębnach
+ * (`reelCells` z `@konce-pt/chart`), które przy kolejnym punkcie kręcą się do nowej liczby.
  */
 export function KptChartTooltip({ state }) {
-    if (!state)
+    // Ostatnia treść zostaje na czas wygaszania (wzorzec "poprzednia wartość w stanie", bez efektu).
+    const [shown, setShown] = useState(state);
+    if (state && state !== shown)
+        setShown(state);
+    const bubbleRef = useRef(null);
+    const labelRef = useRef(null);
+    const lastLabel = useRef('');
+    useLayoutEffect(() => {
+        const el = bubbleRef.current;
+        if (!shown || !el)
+            return;
+        // obszar wykresu (`.kpt-chart__canvas`, position: relative) - host dymka nie ma wymiarów
+        const box = el.offsetParent;
+        if (box) {
+            const width = box.clientWidth;
+            const half = el.offsetWidth / 2;
+            const x = (shown.x / 100) * width;
+            el.style.left = `${half * 2 >= width ? width / 2 : Math.min(width - half, Math.max(half, x))}px`;
+        }
+        // Nowa kategoria: etykieta wjeżdża z kierunku ruchu. Pierwsze pokazanie stoi. Nagłówek nigdy nie
+        // znika: start od 40% widoczności, a przy szybkim przejeździe trwający wjazd nie startuje od nowa
+        // (wtedy tylko podmienia się tekst) - inaczej przy każdej kategorii etykieta gasła.
+        const label = labelRef.current;
+        if (label && shown.label !== lastLabel.current) {
+            if (shown.live && lastLabel.current && typeof label.animate === 'function' && !label.getAnimations().length) {
+                const dir = shown.dir ?? 0;
+                label.animate({ opacity: [0.4, 1], filter: ['blur(1.5px)', 'blur(0px)'], translate: [`${dir * 6}px ${dir ? 0 : 4}px`, '0 0'] }, { duration: 220, easing: 'cubic-bezier(0.2, 0, 0, 1)' });
+            }
+            lastLabel.current = shown.label;
+        }
+    });
+    if (!shown)
         return null;
-    // Margines 6% trzyma dymek w granicach kontenera przy skrajnych punktach.
-    const left = Math.min(94, Math.max(6, state.x));
-    return (_jsx("div", { className: "kpt-chart-tooltip-host", children: _jsxs("div", { className: cn('kpt-chart__tooltip', state.y < 22 && 'kpt-chart__tooltip--flip'), style: { left: `${left}%`, top: `${state.y}%` }, role: "tooltip", children: [state.label ? _jsx("div", { className: "kpt-chart__tooltip-title", children: state.label }) : null, state.rows.map((row, index) => (_jsxs("div", { className: "kpt-chart__tooltip-row", children: [_jsx("span", { className: "kpt-chart__tooltip-dot", style: { backgroundColor: row.color } }), _jsx("span", { className: "kpt-chart__tooltip-name", children: row.name }), _jsx("span", { className: "kpt-chart__tooltip-val", children: row.value })] }, index)))] }) }));
+    return (_jsx("div", { className: "kpt-chart-tooltip-host", children: _jsxs("div", { ref: bubbleRef, className: cn('kpt-chart__tooltip', shown.y < 22 && 'kpt-chart__tooltip--flip', !state && 'kpt-chart__tooltip--hidden'), style: { top: `${shown.y}%` }, role: "tooltip", "aria-hidden": state ? undefined : true, children: [shown.label ? (_jsx("div", { className: "kpt-chart__tooltip-title", children: _jsx("span", { ref: labelRef, className: "kpt-chart__tooltip-label", children: shown.label }) })) : null, shown.rows.map((row, index) => (_jsxs("div", { className: "kpt-chart__tooltip-row", children: [_jsx("span", { className: "kpt-chart__tooltip-dot", style: { backgroundColor: row.color } }), _jsx("span", { className: "kpt-chart__tooltip-name", children: row.name }), _jsxs("span", { className: "kpt-chart__tooltip-val", children: [_jsx("span", { className: "kpt-chart__sr", children: row.value }), _jsx("span", { className: "kpt-chart__reels", "aria-hidden": "true", children: reelCells(row.value).map((cell) => cell.kind === 'digit' ? (_jsx("span", { className: "kpt-chart__reel", children: _jsx("span", { className: "kpt-chart__reel-strip", style: { ['--kpt-chart-digit']: cell.digit }, children: DIGITS.map((d) => (_jsx("span", { children: d }, d))) }) }, cell.key)) : (_jsx("span", { className: "kpt-chart__reel-text", children: cell.text }, cell.key))) })] })] }, index)))] }) }));
 }

package/dist/charts/chart.js

@@ -1,13 +1,39 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId, useState } from 'react';
-import { areaPath, bandScale, barLayout, chartAccessibleName, chartDataTable, extent, formatNumber, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, seriesColor, } from '@konce-pt/chart';
+import { useEffect, useId, useRef, useState } from 'react';
+import { KptChartMotion, areaPath, bandScale, barLayout, chartAccessibleName, chartDataTable, dataScale, deltaKind, domainScale, extent, formatNumber, holdDomain, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, seriesColor, significantDelta, } from '@konce-pt/chart';
 import { cn } from "../internal/cn.js";
+import { useKptMotion } from "../motion/motion-context.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptChartLegend } from "./chart-legend.js";
 import { KptChartTooltip } from "./chart-tooltip.js";
 const VERTICAL_INSETS = { top: 12, right: 16, bottom: 28, left: 46 };
 const HORIZONTAL_INSETS = { top: 12, right: 16, bottom: 28, left: 76 };
+/** Szerokość pasma smugi światła (jednostki viewBoxa) - połowa po każdej stronie czoła fali. */
+const SHEEN_HALF = 90;
+/** Zjechanie z wykresu: dymek czeka chwilę, zanim zgaśnie (powrót kursora go zatrzymuje). */
+const TIP_HIDE_DELAY = 60;
+const EMPTY_FRAME = { values: null, domain: null, ghost: null, sheen: null, tip: null };
+/** Indeks najbliższej pozycji (środka kategorii) do współrzędnej kursora. */
+function nearestIndex(positions, at) {
+    let best = 0;
+    positions.forEach((p, i) => {
+        if (Math.abs(p - at) < Math.abs((positions[best] ?? p) - at))
+            best = i;
+    });
+    return best;
+}
+/** Różnica ze znakiem (plus albo minus z myślnikiem ASCII). */
+function signed(delta) {
+    const text = formatNumber(Math.abs(Math.round(delta)));
+    return delta > 0 ? `+${text}` : `-${text}`;
+}
+/** Koniec słupka po stronie wartości (dla ujemnych - po drugiej stronie osi). */
+function barEnd(bar, vertical) {
+    if (vertical)
+        return bar.value >= 0 ? bar.rect.y : bar.rect.y + bar.rect.height;
+    return bar.value >= 0 ? bar.rect.x + bar.rect.width : bar.rect.x;
+}
 function styleFor(align) {
     if (align === 'center')
         return 'center';
@@ -32,7 +58,6 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
     const dataTable = chartDataTable(config, activeLocale);
     const [hidden, setHidden] = useState(new Set());
     const [highlighted, setHighlighted] = useState(null);
-    const [tooltip, setTooltip] = useState(null);
     /** Indeks kategorii pod kursorem - prowadnica crosshair w wykresie liniowym. */
     const [activeIndex, setActiveIndex] = useState(null);
     const anim = {
@@ -41,6 +66,70 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
         delay: config.animation?.delay ?? 0,
         stagger: config.animation?.stagger ?? 60,
     };
+    // -- Ruch sterowany z kodu (pętla klatek w `@konce-pt/chart`, wspólna z portem Angulara) --
+    const motionConfig = useKptMotion();
+    const [frame, setFrame] = useState(EMPTY_FRAME);
+    const [motion] = useState(() => new KptChartMotion((f) => setFrame(f)));
+    const [tipContent, setTipContent] = useState(null);
+    const [ripple, setRipple] = useState(null);
+    const prevConfig = useRef(null);
+    const lastTipIndex = useRef(null);
+    const hideTimer = useRef(undefined);
+    const rippleId = useRef(0);
+    /** Ruch wyłączają: config, globalny `KptMotionProvider enabled={false}` i systemowe "ogranicz ruch". */
+    const motionAllowed = () => {
+        if (!anim.enabled || motionConfig?.enabled === false)
+            return false;
+        return typeof matchMedia === 'undefined' || !matchMedia('(prefers-reduced-motion: reduce)').matches;
+    };
+    const tipMotion = () => motionAllowed() && config.tooltip?.motion !== false;
+    useEffect(() => () => motion.stop(), [motion]);
+    useEffect(() => () => clearTimeout(hideTimer.current), []);
+    // Nowe wartości w tym samym wykresie -> przejście; inny wykres -> zwykłe wejście z CSS.
+    useEffect(() => {
+        const prev = prevConfig.current;
+        prevConfig.current = config;
+        if (!prev || !sameChartShape(prev, config)) {
+            motion.reset();
+            return;
+        }
+        if (prev.series.every((s, i) => s.data.every((v, k) => v === config.series[i]?.data[k])))
+            return;
+        const allowed = (config.animation?.enabled ?? true) &&
+            motionConfig?.enabled !== false &&
+            (typeof matchMedia === 'undefined' || !matchMedia('(prefers-reduced-motion: reduce)').matches);
+        if (!allowed || config.animation?.update === false) {
+            motion.cancelData();
+            return;
+        }
+        const from = motion.current(prev.series.map((s) => s.data));
+        const to = config.series.map((s) => [...s.data]);
+        const withAxis = config.type === 'line' || config.type === 'bar';
+        const visible = (rows) => rows.filter((_, i) => !hidden.has(`ser:${config.series[i]?.name ?? ''}`));
+        const scales = withAxis
+            ? { start: dataScale(visible(from)), hold: dataScale([holdDomain(visible(from), visible(to))]), end: dataScale(visible(to)) }
+            : null;
+        motion.transition(from, to, { delta: withAxis && config.animation?.delta !== false, scales });
+    }, [config, hidden, motion, motionConfig]);
+    /** Config z wartościami z bieżącej klatki ruchu - z niego liczy się geometria. */
+    const view = frame.values
+        ? { ...config, series: config.series.map((s, i) => ({ ...s, data: frame.values?.[i] ?? s.data })) }
+        : config;
+    const tooltip = tipContent && frame.tip ? { x: (frame.tip.x / width) * 100, y: (frame.tip.y / height) * 100, ...tipContent } : null;
+    const ghostState = frame.ghost;
+    const sheenId = `${descId}-sheen`;
+    const horizontal = config.type === 'bar' && config.orientation === 'horizontal';
+    const sheen = (() => {
+        if (!frame.sheen)
+            return null;
+        const plot = plotArea(width, height, horizontal ? HORIZONTAL_INSETS : VERTICAL_INSETS);
+        const start = horizontal ? plot.y : plot.x;
+        const length = horizontal ? plot.height : plot.width;
+        const mid = start - SHEEN_HALF + (length + 2 * SHEEN_HALF) * frame.sheen.progress;
+        return horizontal
+            ? { x1: 0, x2: 0, y1: mid - SHEEN_HALF, y2: mid + SHEEN_HALF, opacity: frame.sheen.opacity }
+            : { x1: mid - SHEEN_HALF, x2: mid + SHEEN_HALF, y1: 0, y2: 0, opacity: frame.sheen.opacity };
+    })();
     const legendOpts = {
         display: config.legend?.display ?? true,
         position: config.legend?.position ?? 'bottom',
@@ -63,14 +152,45 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             hidden: hidden.has(`ser:${s.name}`),
         }));
     const dim = (key) => highlighted !== null && highlighted !== key;
-    const showTip = (tipX, tipY, name, label, value, color) => {
+    const row = (name, label, value, color) => {
+        const format = config.tooltip?.format;
+        return { name, value: format ? format({ series: name, label, value }) : formatNumber(value), color };
+    };
+    const openTip = (x, y, label, rows, index) => {
         if (config.tooltip?.enabled === false)
             return;
-        const format = config.tooltip?.format;
-        const text = format ? format({ series: name, label, value }) : formatNumber(value);
-        setTooltip({ x: (tipX / width) * 100, y: (tipY / height) * 100, label, rows: [{ name, value: text, color }] });
+        clearTimeout(hideTimer.current);
+        const first = tipContent === null;
+        const animate = tipMotion();
+        const dir = first || index === null || lastTipIndex.current === null ? 0 : Math.sign(index - lastTipIndex.current);
+        lastTipIndex.current = index;
+        setTipContent({ label, rows, dir, live: !first && animate });
+        motion.moveTip(x, y, first || !animate);
+    };
+    /** Wycinki i radar: dymek jednego elementu pod kursorem. */
+    const showTip = (tipX, tipY, name, label, value, color) => openTip(tipX, tipY, label, [row(name, label, value, color)], null);
+    const hideTip = () => {
+        clearTimeout(hideTimer.current);
+        hideTimer.current = setTimeout(() => {
+            setTipContent(null);
+            setActiveIndex(null);
+            setRipple(null);
+            lastTipIndex.current = null;
+            motion.hideTip();
+        }, TIP_HIDE_DELAY);
+    };
+    /** Ten sam punkt pod kursorem - dymek zostaje (i nie zgaśnie, jeśli właśnie miał). */
+    const keepTip = (idx) => {
+        if (tipContent === null || lastTipIndex.current !== idx)
+            return false;
+        clearTimeout(hideTimer.current);
+        return true;
+    };
+    /** Kursor w viewBoxie wykresu (SVG skaluje się do kontenera). */
+    const svgPoint = (event) => {
+        const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
+        return matrix ? new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse()) : null;
     };
-    const hideTip = () => setTooltip(null);
     const toggle = (key) => {
         const next = new Set(hidden);
         if (next.has(key))
@@ -81,19 +201,21 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
     };
     // -- Wykres liniowy --
     const lineVm = (() => {
-        if (config.type !== 'line')
+        if (view.type !== 'line')
             return null;
-        const active = config.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
+        const active = view.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
         const values = active.flatMap(({ s }) => s.data);
         const [mn, mx] = extent(values.length ? values : [0]);
-        const scale = niceScale(Math.min(0, mn), Math.max(0, mx), 5);
+        const scale = frame.domain
+            ? domainScale(frame.domain.target, frame.domain.min, frame.domain.max)
+            : niceScale(Math.min(0, mn), Math.max(0, mx), 5);
         const plot = plotArea(width, height, VERTICAL_INSETS);
         const yScale = linearScale(scale.min, scale.max, plot.y + plot.height, plot.y);
-        const count = config.labels.length;
+        const count = view.labels.length;
         const xAt = (i) => count > 1 ? plot.x + (i / (count - 1)) * plot.width : plot.x + plot.width / 2;
         const baseline = yScale(0);
-        const interpolation = config.interpolation ?? 'linear';
-        const showPoints = config.points ?? true;
+        const interpolation = view.interpolation ?? 'linear';
+        const showPoints = view.points ?? true;
         const grid = scale.ticks.map((t) => ({
             x1: plot.x,
             y1: yScale(t),
@@ -106,49 +228,89 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             text: formatNumber(t),
             anchor: 'end',
         }));
-        const catLabels = config.labels.map((label, i) => ({
+        const catLabels = view.labels.map((label, i) => ({
             x: xAt(i),
             y: plot.y + plot.height + 18,
             text: label,
             anchor: 'middle',
         }));
+        const series = active.map(({ s, i }) => ({
+            key: `ser:${s.name}`,
+            name: s.name,
+            color: seriesColor(s.color, i),
+            i,
+            points: s.data.map((v, idx) => ({ x: xAt(idx), y: yScale(v), value: v, label: view.labels[idx] ?? '' })),
+        }));
         const crosshairCat = config.crosshair && activeIndex !== null ? catLabels[activeIndex] : undefined;
+        // Prowadnica i pigułka jadą razem z dymkiem.
+        const crossX = crosshairCat ? (frame.tip?.x ?? crosshairCat.x) : 0;
         const pillWidth = crosshairCat ? Math.max(28, crosshairCat.text.length * 7 + 16) : 0;
-        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), crosshairCat ? (_jsx("line", { className: "kpt-chart__crosshair", x1: crosshairCat.x, y1: plot.y, x2: crosshairCat.x, y2: plot.y + plot.height })) : null, _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), crosshairCat ? (_jsxs("g", { className: "kpt-chart__cat-active", children: [_jsx("rect", { x: crosshairCat.x - pillWidth / 2, y: crosshairCat.y - 13, width: pillWidth, height: 18, rx: 9 }), _jsx("text", { x: crosshairCat.x, y: crosshairCat.y, textAnchor: "middle", children: crosshairCat.text })] })) : null, active.map(({ s, i }) => {
-                    const key = `ser:${s.name}`;
-                    const color = seriesColor(s.color, i);
-                    const points = s.data.map((v, idx) => ({
-                        x: xAt(idx),
-                        y: yScale(v),
-                        value: v,
-                        label: config.labels[idx] ?? '',
-                    }));
-                    return (_jsxs("g", { className: cn('kpt-chart__series', dim(key) && 'kpt-chart__series--dim'), children: [config.area ? (_jsx("path", { className: "kpt-chart__area", d: areaPath(points, baseline, interpolation), style: { fill: color } })) : null, _jsx("path", { className: "kpt-chart__line", d: linePath(points, interpolation), style: { stroke: color }, pathLength: 1 }), points.map((p, idx) => (_jsxs("g", { children: [showPoints ? (_jsx("circle", { className: cn('kpt-chart__point', activeIndex === idx && 'kpt-chart__point--active'), cx: p.x, cy: p.y, r: 4, style: { fill: color, ['--kpt-chart-i']: idx } })) : null, _jsx("circle", { className: "kpt-chart__hit", cx: p.x, cy: p.y, r: 12, onPointerEnter: () => {
-                                            setActiveIndex(idx);
-                                            showTip(p.x, p.y, s.name, p.label, p.value, color);
-                                        }, onPointerLeave: () => {
-                                            setActiveIndex(null);
-                                            hideTip();
-                                        } })] }, idx)))] }, key));
-                })] }));
+        /** Najbliższa kategoria w całym obszarze wykresu: wiersze wszystkich serii, dymek nad najwyższym punktem. */
+        const onMove = (event) => {
+            const p = svgPoint(event);
+            if (!p || !series.length)
+                return;
+            const idx = nearestIndex(catLabels.map((l) => l.x), p.x);
+            if (keepTip(idx))
+                return;
+            const hits = series.map((s) => ({ s, pt: s.points[idx] })).filter((e) => !!e.pt);
+            const top = hits.reduce((a, b) => (b.pt.y < a.pt.y ? b : a), hits[0]);
+            if (!top)
+                return;
+            const label = config.labels[idx] ?? '';
+            const moved = tipContent !== null && lastTipIndex.current !== null;
+            setActiveIndex(idx);
+            openTip(top.pt.x, top.pt.y, label, hits.map((e) => row(e.s.name, label, e.pt.value, e.s.color)), idx);
+            if (moved && tipMotion())
+                setRipple({ id: ++rippleId.current, x: top.pt.x, y: top.pt.y, color: top.s.color });
+        };
+        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), crosshairCat ? (_jsx("line", { className: "kpt-chart__crosshair", x1: crossX, y1: plot.y, x2: crossX, y2: plot.y + plot.height })) : null, _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), crosshairCat ? (_jsxs("g", { className: "kpt-chart__cat-active", children: [_jsx("rect", { x: crossX - pillWidth / 2, y: crosshairCat.y - 13, width: pillWidth, height: 18, rx: 9 }), _jsx("text", { x: crossX, y: crosshairCat.y, textAnchor: "middle", children: crosshairCat.text })] })) : null, ghostState
+                    ? series.map((s) => {
+                        const prev = ghostState.prev[s.i] ?? [];
+                        const next = ghostState.next[s.i] ?? [];
+                        const gpts = prev.map((v, idx) => ({ x: xAt(idx), y: yScale(v) }));
+                        return (_jsxs("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: [_jsx("path", { className: "kpt-chart__ghost-line", d: linePath(gpts, interpolation) }), gpts.map((p, idx) => (_jsx("line", { className: "kpt-chart__delta", "data-kind": deltaKind(prev[idx] ?? 0, next[idx] ?? 0), x1: p.x, x2: p.x, y1: p.y, y2: s.points[idx]?.y ?? p.y }, idx)))] }, `${ghostState.id}:${s.key}`));
+                    })
+                    : null, series.map((s) => (_jsxs("g", { className: cn('kpt-chart__series', dim(s.key) && 'kpt-chart__series--dim'), children: [view.area ? (_jsx("path", { className: "kpt-chart__area", d: areaPath(s.points, baseline, interpolation), style: { fill: s.color } })) : null, _jsx("path", { className: "kpt-chart__line", d: linePath(s.points, interpolation), style: { stroke: s.color }, pathLength: 1 }), showPoints
+                            ? s.points.map((p, idx) => (_jsx("circle", { className: cn('kpt-chart__point', activeIndex === idx && 'kpt-chart__point--active'), cx: p.x, cy: p.y, r: 4, style: { fill: s.color, ['--kpt-chart-i']: idx } }, idx)))
+                            : null] }, s.key))), sheen
+                    ? series.map((s) => (_jsx("path", { className: "kpt-chart__sheen-line", d: linePath(s.points, interpolation), stroke: `url(#${sheenId})`, style: { opacity: sheen.opacity }, "aria-hidden": "true" }, s.key)))
+                    : null, ghostState
+                    ? series.flatMap((s) => {
+                        const prev = ghostState.prev[s.i] ?? [];
+                        const next = ghostState.next[s.i] ?? [];
+                        return next.flatMap((v, idx) => {
+                            const before = prev[idx] ?? 0;
+                            if (!significantDelta(before, v))
+                                return [];
+                            const kind = deltaKind(before, v);
+                            const y = s.points[idx]?.y ?? 0;
+                            return [
+                                _jsx("text", { className: "kpt-chart__chip", "data-kind": kind, x: xAt(idx), y: kind === 'up' ? y - 12 : y + 20, textAnchor: "middle", style: { ['--kpt-chart-i']: idx }, "aria-hidden": "true", children: signed(v - before) }, `${ghostState.id}:${s.key}:${idx}`),
+                            ];
+                        });
+                    })
+                    : null, ripple ? (_jsx("circle", { className: "kpt-chart__ripple", cx: ripple.x, cy: ripple.y, r: 5, style: { stroke: ripple.color }, "aria-hidden": "true" }, ripple.id)) : null, _jsx("rect", { className: "kpt-chart__hover", x: plot.x - 12, y: plot.y - 12, width: plot.width + 24, height: plot.height + 24, onPointerMove: onMove, onPointerLeave: hideTip })] }));
     })();
     // -- Wykres słupkowy --
     const barVm = (() => {
-        if (config.type !== 'bar')
+        if (view.type !== 'bar')
             return null;
-        const orientation = config.orientation ?? 'vertical';
-        const active = config.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
-        const plot = plotArea(width, height, orientation === 'vertical' ? VERTICAL_INSETS : HORIZONTAL_INSETS);
-        const layout = barLayout(active.map(({ s }) => s.data), config.labels.length, plot, orientation, config.borderRadius ?? 4);
+        const orientation = view.orientation ?? 'vertical';
+        const vertical = orientation === 'vertical';
+        const active = view.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
+        const plot = plotArea(width, height, vertical ? VERTICAL_INSETS : HORIZONTAL_INSETS);
+        const radius = view.borderRadius ?? 4;
+        const layout = barLayout(active.map(({ s }) => s.data), view.labels.length, plot, orientation, radius, frame.domain ? domainScale(frame.domain.target, frame.domain.min, frame.domain.max) : undefined);
         const colors = active.map(({ s, i }) => seriesColor(s.color, i));
         const names = active.map(({ s }) => s.name);
-        const cat = orientation === 'vertical'
-            ? bandScale(config.labels.length, plot.x, plot.x + plot.width, 0.2)
-            : bandScale(config.labels.length, plot.y, plot.y + plot.height, 0.2);
-        const grid = orientation === 'vertical'
+        const cat = vertical
+            ? bandScale(view.labels.length, plot.x, plot.x + plot.width, 0.2)
+            : bandScale(view.labels.length, plot.y, plot.y + plot.height, 0.2);
+        const grid = vertical
             ? layout.ticks.map((t) => ({ x1: plot.x, y1: t.pos, x2: plot.x + plot.width, y2: t.pos }))
             : layout.ticks.map((t) => ({ x1: t.pos, y1: plot.y, x2: t.pos, y2: plot.y + plot.height }));
-        const valueLabels = orientation === 'vertical'
+        const valueLabels = vertical
             ? layout.ticks.map((t) => ({ x: plot.x - 8, y: t.pos + 3, text: formatNumber(t.value), anchor: 'end' }))
             : layout.ticks.map((t) => ({
                 x: t.pos,
@@ -156,22 +318,66 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                 text: formatNumber(t.value),
                 anchor: 'middle',
             }));
-        const catLabels = orientation === 'vertical'
-            ? config.labels.map((l, i) => ({ x: cat.center(i), y: plot.y + plot.height + 18, text: l, anchor: 'middle' }))
-            : config.labels.map((l, i) => ({ x: plot.x - 8, y: cat.center(i) + 3, text: l, anchor: 'end' }));
-        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), _jsx("g", { className: "kpt-chart__bars", "data-orientation": orientation, children: layout.bars.map((b, order) => {
-                        const key = `ser:${names[b.seriesIndex]}`;
-                        const color = colors[b.seriesIndex];
-                        const tipX = orientation === 'vertical' ? b.rect.x + b.rect.width / 2 : b.rect.x + b.rect.width;
-                        const tipY = orientation === 'vertical' ? b.rect.y : b.rect.y + b.rect.height / 2;
-                        return (_jsx("path", { className: cn('kpt-chart__bar', dim(key) && 'kpt-chart__series--dim'), d: b.path, style: { fill: color, ['--kpt-chart-i']: order }, onPointerEnter: () => showTip(tipX, tipY, names[b.seriesIndex], config.labels[b.categoryIndex] ?? '', b.value, color), onPointerLeave: hideTip }, `${key}#${order}`));
-                    }) })] }));
+        const catLabels = vertical
+            ? view.labels.map((l, i) => ({ x: cat.center(i), y: plot.y + plot.height + 18, text: l, anchor: 'middle' }))
+            : view.labels.map((l, i) => ({ x: plot.x - 8, y: cat.center(i) + 3, text: l, anchor: 'end' }));
+        const bars = layout.bars.map((b, order) => ({
+            b,
+            order,
+            key: `ser:${names[b.seriesIndex]}`,
+            color: colors[b.seriesIndex] ?? '',
+            name: names[b.seriesIndex] ?? '',
+            tipX: vertical ? b.rect.x + b.rect.width / 2 : b.rect.x + b.rect.width,
+            tipY: vertical ? b.rect.y : b.rect.y + b.rect.height / 2,
+        }));
+        // Słupki-duchy w tej samej skali i odcinki zmiany od końca ducha do końca bieżącego słupka.
+        const ghostBars = ghostState
+            ? (() => {
+                const prevRows = active.map(({ i }) => ghostState.prev[i] ?? []);
+                const nextRows = active.map(({ i }) => ghostState.next[i] ?? []);
+                return barLayout(prevRows, view.labels.length, plot, orientation, radius, layout.scale).bars.map((g, k) => {
+                    const cur = layout.bars[k] ?? g;
+                    const a = barEnd(g, vertical);
+                    const z = barEnd(cur, vertical);
+                    const lo = Math.min(a, z);
+                    const hi = Math.max(a, z);
+                    return {
+                        key: `${ghostState.id}:${k}`,
+                        path: g.path,
+                        kind: deltaKind(prevRows[g.seriesIndex]?.[g.categoryIndex] ?? 0, nextRows[g.seriesIndex]?.[g.categoryIndex] ?? 0),
+                        delta: vertical
+                            ? { x: cur.rect.x, y: lo, width: cur.rect.width, height: hi - lo }
+                            : { x: lo, y: cur.rect.y, width: hi - lo, height: cur.rect.height },
+                    };
+                });
+            })()
+            : [];
+        /** Najbliższa kategoria w całym obszarze wykresu: wiersze wszystkich serii tej kategorii. */
+        const onMove = (event) => {
+            const p = svgPoint(event);
+            if (!p)
+                return;
+            const idx = nearestIndex(catLabels.map((l) => (vertical ? l.x : l.y - 3)), vertical ? p.x : p.y);
+            if (keepTip(idx))
+                return;
+            const group = bars.filter((e) => e.b.categoryIndex === idx);
+            const center = catLabels[idx];
+            if (!group.length || !center)
+                return;
+            const label = config.labels[idx] ?? '';
+            const x = vertical ? center.x : Math.max(...group.map((e) => e.tipX));
+            const y = vertical ? Math.min(...group.map((e) => e.tipY)) : center.y - 3;
+            openTip(x, y, label, group.map((e) => row(e.name, label, e.b.value, e.color)), idx);
+        };
+        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), ghostBars.length ? (_jsx("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: ghostBars.map((g) => (_jsx("path", { className: "kpt-chart__ghost-bar", d: g.path }, g.key))) })) : null, _jsx("g", { className: "kpt-chart__bars", "data-orientation": orientation, children: bars.map((e) => (_jsx("path", { className: cn('kpt-chart__bar', dim(e.key) && 'kpt-chart__series--dim'), d: e.b.path, style: { fill: e.color, ['--kpt-chart-i']: e.order } }, `${e.key}#${e.order}`))) }), ghostBars.length ? (_jsx("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: ghostBars.map((g) => (_jsx("rect", { className: "kpt-chart__delta-bar", "data-kind": g.kind, rx: 2, ...g.delta }, g.key))) })) : null, sheen
+                    ? bars.map((e) => (_jsx("path", { className: "kpt-chart__sheen-bar", d: e.b.path, fill: `url(#${sheenId})`, style: { opacity: sheen.opacity * 0.7 }, "aria-hidden": "true" }, `${e.key}#${e.order}`)))
+                    : null, _jsx("rect", { className: "kpt-chart__hover", x: plot.x, y: plot.y, width: plot.width, height: plot.height, onPointerMove: onMove, onPointerLeave: hideTip })] }));
     })();
     // -- Pie / doughnut / polar area --
     const pieVm = (() => {
         if (!isPieLike)
             return null;
-        const first = config.series[0];
+        const first = view.series[0];
         if (!first)
             return null;
         const { cx, cy, radius } = radialArea(width, height, 8);
@@ -198,7 +404,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             return null;
         const { cx, cy, radius } = radialArea(width, height, 30);
         const grid = radarGrid(config.labels.length, cx, cy, radius, 4);
-        const active = config.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
+        const active = view.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
         let max = 1;
         for (const { s } of active)
             for (const v of s.data)
@@ -235,5 +441,5 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                         fontWeight: config.subtitle.font?.weight,
                         paddingTop: config.subtitle.padding?.top,
                         paddingBottom: config.subtitle.padding?.bottom,
-                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": accessibleName, "aria-describedby": config.description ? descId : undefined, preserveAspectRatio: "xMidYMid meet", children: [lineVm, barVm, radarVm, pieVm] }), config.description ? (_jsx("p", { className: "kpt-chart__sr", id: descId, children: config.description })) : null, _jsxs("table", { className: "kpt-chart__sr", children: [_jsxs("caption", { children: [t('chart.dataTable'), ": ", accessibleName] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: t('chart.category') }), dataTable.columns.map((col, i) => (_jsx("th", { scope: "col", children: col }, i)))] }) }), _jsx("tbody", { children: dataTable.rows.map((row, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), row.values.map((value, j) => (_jsx("td", { children: value }, j)))] }, i))) })] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
+                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": accessibleName, "aria-describedby": config.description ? descId : undefined, preserveAspectRatio: "xMidYMid meet", children: [sheen ? (_jsx("defs", { children: _jsxs("linearGradient", { id: sheenId, gradientUnits: "userSpaceOnUse", x1: sheen.x1, x2: sheen.x2, y1: sheen.y1, y2: sheen.y2, children: [_jsx("stop", { offset: "0", className: "kpt-chart__sheen-stop", stopOpacity: 0 }), _jsx("stop", { offset: "0.5", className: "kpt-chart__sheen-stop", stopOpacity: 0.95 }), _jsx("stop", { offset: "1", className: "kpt-chart__sheen-stop", stopOpacity: 0 })] }) })) : null, lineVm, barVm, radarVm, pieVm] }), config.description ? (_jsx("p", { className: "kpt-chart__sr", id: descId, children: config.description })) : null, _jsxs("table", { className: "kpt-chart__sr", children: [_jsxs("caption", { children: [t('chart.dataTable'), ": ", accessibleName] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: t('chart.category') }), dataTable.columns.map((col, i) => (_jsx("th", { scope: "col", children: col }, i)))] }) }), _jsx("tbody", { children: dataTable.rows.map((row, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), row.values.map((value, j) => (_jsx("td", { children: value }, j)))] }, i))) })] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
 }

package/dist/charts/llms.txt

@@ -27,13 +27,27 @@ Scales, paths, bar layout and arcs come from `@konce-pt/chart` - pure functions
 coverage, shared with the Angular port. The component only turns them into SVG elements; there is
 no DOM manipulation and no canvas.
 
-## Points have a bigger hit target than they look
-A 4px point is not something a pointer can reliably hit, so each one is paired with an invisible
-12px circle that carries the events. The visible point only reacts to the state.
+## Hover covers the whole plot
+Line and bar charts listen on an invisible surface over the plot: the pointer anywhere picks the nearest
+category, the tooltip lists every visible series there and travels from category to category without
+fading out in between. Slices and radar points react to the element itself. The bubble never leaves the
+chart - it is clamped by its real width.
+
+## Motion: data updates and the tooltip
+A new `config` with the same type, categories and series names is a data update: the values travel as a
+wave from left to right on springs, with a light sheen at the wave front. Line and bar charts keep the
+previous state for 1.7 s - a dashed ghost, up/down segments (`--kpt-chart-delta-up` / `--kpt-chart-delta-down`)
+and the difference above points that changed by 2% or more - and the value axis waits for the ghost to
+fade before zooming to the new data. The tooltip, the crosshair and the category pill travel between
+categories, the digits roll on reels and the category name slides in from the direction of travel.
+`animation.update: false`, `animation.delta: false` and `tooltip.motion: false` switch the parts off;
+`animation.enabled: false`, `<KptMotionProvider enabled={false}>` and the system "reduce motion" setting
+switch off all code-driven motion. The frame loop and its numbers live in `@konce-pt/chart`
+(`KptChartMotion`, `springStep`, `reelCells`), shared with the Angular port.
 
 ## Interaction is local state
-Hidden series, the highlighted one, the tooltip and the active category are `useState` - the config
-stays a plain object the caller owns, and nothing is written back into it.
+Hidden series, the highlighted one, the tooltip, the active category and the motion frame are
+`useState` - the config stays a plain object the caller owns, and nothing is written back into it.
 
 ## Examples
     <KptChart config={{ type: 'line', labels: ['Jan', 'Feb'], series: [{ name: 'Sales', data: [12, 19] }] }} />
@@ -49,7 +63,8 @@ stays a plain object the caller owns, and nothing is written back into it.
     />
 
 ## Tokens
-`--kpt-chart-{duration,stagger,delay}` for the animation; series colours come from
+`--kpt-chart-{duration,stagger,delay}` for the animation; `--kpt-chart-sheen`,
+`--kpt-chart-delta-up` and `--kpt-chart-delta-down` for the data update; series colours come from
 `KPT_CHART_PALETTE` or `series.color`.
 
 ## Accessibility

package/dist/internal/overlay.js

@@ -16,6 +16,25 @@ import { useKptOverlayContainer } from "./overlay-container.js";
 const overlayStack = [];
 /** Ta sama warstwa co `--kpt-z-overlay` w tokenach - panel ma być nad treścią aplikacji. */
 const Z_INDEX = 'var(--kpt-z-overlay, 1100)';
+/** Odstęp panelu od krawędzi okna (px) - jak `OVERLAY_VIEWPORT_MARGIN` w porcie Angulara. */
+const VIEWPORT_MARGIN = 8;
+/**
+ * Lewa krawędź panelu: wyrównanie z `align`, a gdy panel wyszedłby poza okno - druga krawędź
+ * wyzwalacza (dzwonek w prawym rogu paska otwiera się w lewo). Gdy nie mieści się żadna,
+ * panel jest dosuwany do okna z marginesem - jak `cdkConnectedOverlayPush` w porcie Angulara.
+ */
+function panelLeft(rect, panelWidth, align) {
+    const viewport = document.documentElement.clientWidth;
+    const fits = (left) => left >= VIEWPORT_MARGIN && left + panelWidth <= viewport - VIEWPORT_MARGIN;
+    const start = rect.left;
+    const end = rect.right - panelWidth;
+    const [preferred, other] = align === 'end' ? [end, start] : [start, end];
+    if (panelWidth === 0 || fits(preferred))
+        return preferred;
+    if (fits(other))
+        return other;
+    return Math.max(VIEWPORT_MARGIN, Math.min(preferred, viewport - panelWidth - VIEWPORT_MARGIN));
+}
 export function KptOverlay({ open, anchor, onClose, matchAnchorWidth = false, minAnchorWidth = false, offset = 4, align = 'start', withBackdrop = true, preferAbove = false, children, }) {
     const container = useKptOverlayContainer();
     const panelRef = useRef(null);
@@ -34,7 +53,7 @@ export function KptOverlay({ open, anchor, onClose, matchAnchorWidth = false, mi
         const flip = preferAbove ? fitsAbove : panelHeight > 0 && below < panelHeight + offset && rect.top > below;
         setPosition({
             top: flip ? rect.top - panelHeight - offset : rect.bottom + offset,
-            left: align === 'end' ? rect.right - panelWidth : rect.left,
+            left: panelLeft(rect, matchAnchorWidth ? rect.width : panelWidth, align),
             ...(matchAnchorWidth ? { width: rect.width } : {}),
             ...(minAnchorWidth ? { minWidth: rect.width } : {}),
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Open-source React 19 component library on the Koncept UI design system - the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,19 +65,19 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/backdrop": "0.15.1",
-    "@konce-pt/chart": "0.15.1",
-    "@konce-pt/icons": "0.15.1",
-    "@konce-pt/mention": "0.15.1",
-    "@konce-pt/i18n": "0.15.1",
-    "@konce-pt/roadmap": "0.15.1",
-    "@konce-pt/datetime": "0.15.1",
-    "@konce-pt/speech": "0.15.1",
-    "@konce-pt/motion": "0.15.1",
-    "@konce-pt/table": "0.15.1",
-    "@konce-pt/tokens": "0.15.1",
-    "@konce-pt/chat": "0.15.1",
-    "@konce-pt/map": "0.15.1"
+    "@konce-pt/chart": "0.16.0",
+    "@konce-pt/icons": "0.16.0",
+    "@konce-pt/chat": "0.16.0",
+    "@konce-pt/datetime": "0.16.0",
+    "@konce-pt/roadmap": "0.16.0",
+    "@konce-pt/speech": "0.16.0",
+    "@konce-pt/table": "0.16.0",
+    "@konce-pt/backdrop": "0.16.0",
+    "@konce-pt/map": "0.16.0",
+    "@konce-pt/motion": "0.16.0",
+    "@konce-pt/tokens": "0.16.0",
+    "@konce-pt/i18n": "0.16.0",
+    "@konce-pt/mention": "0.16.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",