@konce-pt/react 0.18.0 → 0.18.2

package/dist/charts/chart.d.ts

@@ -3,9 +3,13 @@ import { type KptChartConfig } from '@konce-pt/chart';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     config: KptChartConfig;
-    /** Szerokość viewBoxa w jednostkach SVG; wykres skaluje się do kontenera. */
+    /**
+     * Szerokość projektowa. Wykres rysuje się w pikselach swojego kontenera (mierzy go
+     * `ResizeObserver`), więc `width`/`height` wyznaczają proporcję (wysokość = szerokość kontenera
+     * x height / width) i rozmiar pierwszej klatki, zanim pomiar dotrze (SSR).
+     */
     width?: number;
-    /** Wysokość viewBoxa w jednostkach SVG. */
+    /** Wysokość projektowa - patrz `width`. */
     height?: number;
 }
 /**
@@ -16,4 +20,4 @@ export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'child
  * @example
  * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
  */
-export declare function KptChart({ config, width, height, locale, dictionary, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;
+export declare function KptChart({ config, width: designWidth, height: designHeight, locale, dictionary, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;

package/dist/charts/chart.js

@@ -1,14 +1,33 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
-import { KptChartMotion, areaPath, axisBase, bandPath, bandScale, barLayout, chartScale, chartAccessibleName, chartDataTable, dataScale, deltaKind, domainScale, formatNumber, linePath, linearScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, scaleRows, seriesColor, significantDelta, stackSeries, } from '@konce-pt/chart';
+import { KptChartMotion, areaPath, axisBase, axisLabelIndices, bandPath, bandScale, barLayout, chartScale, chartAccessibleName, chartDataTable, chartMetrics, clampLabel, dataScale, deltaKind, domainScale, estimateLabelWidth, formatNumber, linePath, linearScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, scaleRows, seriesColor, significantDelta, stackSeries, } 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 };
+/**
+ * Etykiety osi poziomej: wszystkie, jeśli się mieszczą, inaczej równy podział 9/5/3/2
+ * (`axisLabelIndices`). Pełna nazwa każdej kategorii zostaje w pigułce prowadnicy i w dymku.
+ */
+function bottomLabels(labels, centers, y, width, m) {
+    const sizes = labels.map((l) => estimateLabelWidth(l, m.fontSize));
+    const shown = new Set(axisLabelIndices(centers, sizes));
+    return labels.map((text, i) => ({
+        at: centers[i] ?? 0,
+        x: clampLabel(centers[i] ?? 0, sizes[i] ?? 0, 0, width),
+        y,
+        text,
+        anchor: 'middle',
+        visible: shown.has(i),
+    }));
+}
+/** Etykiety osi pionowej (słupki poziome): ten sam podział, rozmiarem jest wysokość linii. */
+function sideLabels(labels, centers, x, m) {
+    const shown = new Set(axisLabelIndices(centers, centers.map(() => m.categoryLine), 2));
+    return labels.map((text, i) => ({ at: centers[i] ?? 0, x, y: (centers[i] ?? 0) + m.baselineShift, text, anchor: 'end', visible: shown.has(i) }));
+}
 /** 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). */
@@ -49,13 +68,46 @@ function styleFor(align) {
  * @example
  * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
  */
-export function KptChart({ config, width = 600, height = 360, locale, dictionary, className, style, ...rest }) {
+export function KptChart({ config, width: designWidth = 600, height: designHeight = 360, locale, dictionary, className, style, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const descId = `${useId()}-desc`;
     // Alternatywa tekstowa (WCAG 1.1.1): nazwa SVG (`ariaLabel` -> tytuł -> i18n) i dane w ukrytej
     // wizualnie tabeli - dymek na najechanie jest dostępny tylko myszą.
     const accessibleName = chartAccessibleName(config, t('chart.label'));
     const dataTable = chartDataTable(config, activeLocale);
+    // viewBox równy pikselom ekranu: długości rosną z kontenerem, a czcionka (11px) i grubość kresek
+    // zostają prawdziwymi pikselami. Stały viewBox skalował się w całości - na szerokim ekranie
+    // etykiety puchły i rozmywały się, w wąskiej kolumnie malały do nieczytelności.
+    const canvasRef = useRef(null);
+    const [measured, setMeasured] = useState(null);
+    // Rozmiar tekstu osi z CSS płótna (`--kpt-chart-font-size`, domyślnie `--kpt-font-size-sm`).
+    // Tekst w SVG go dziedziczy, a marginesy, odstęp etykiet od osi, pigułka prowadnicy
+    // i przerzedzanie etykiet liczą się z niego. 14 to wartość domyślnego tokenu.
+    const [fontPx, setFontPx] = useState(14);
+    useEffect(() => {
+        const el = canvasRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const readFont = () => {
+            const px = parseFloat(getComputedStyle(el).fontSize);
+            if (px > 0)
+                setFontPx(px);
+        };
+        readFont();
+        // Wysokość wynika z szerokości, a szerokości kontenera nie zmienia wysokość wykresu - bez pętli.
+        // Rozmiar tekstu czytany przy każdej zmianie szerokości - zmiana tokenu zwykle idzie w parze ze zmianą układu.
+        const observer = new ResizeObserver(([entry]) => {
+            const w = Math.round(entry?.contentRect.width ?? 0);
+            if (w > 0)
+                setMeasured(w);
+            readFont();
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const width = measured ?? designWidth;
+    const height = Math.round((width * designHeight) / designWidth);
+    const m = chartMetrics(fontPx);
     const [hidden, setHidden] = useState(new Set());
     const [highlighted, setHighlighted] = useState(null);
     /** Indeks kategorii pod kursorem - prowadnica crosshair w wykresie liniowym. */
@@ -125,7 +177,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
     const sheen = (() => {
         if (!frame.sheen)
             return null;
-        const plot = plotArea(width, height, horizontal ? HORIZONTAL_INSETS : VERTICAL_INSETS);
+        const plot = plotArea(width, height, horizontal ? m.horizontalInsets : m.verticalInsets);
         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;
@@ -213,7 +265,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             : chartScale(rows, { valueAxis: view.valueAxis, stacked: view.stacked });
         // Stos: punkty serii na narastającej sumie, pasmo od linii serii pod nią.
         const stack = view.stacked ? stackSeries(rows) : null;
-        const plot = plotArea(width, height, VERTICAL_INSETS);
+        const plot = plotArea(width, height, m.verticalInsets);
         const yScale = linearScale(scale.min, scale.max, plot.y + plot.height, plot.y);
         const count = view.labels.length;
         const xAt = (i) => count > 1 ? plot.x + (i / (count - 1)) * plot.width : plot.x + plot.width / 2;
@@ -229,17 +281,13 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             y2: yScale(t),
         }));
         const valueLabels = scale.ticks.map((t) => ({
-            x: plot.x - 8,
-            y: yScale(t) + 3,
+            x: plot.x - m.sideGap,
+            y: yScale(t) + m.baselineShift,
             text: formatNumber(t),
             anchor: 'end',
         }));
-        const catLabels = view.labels.map((label, i) => ({
-            x: xAt(i),
-            y: plot.y + plot.height + 18,
-            text: label,
-            anchor: 'middle',
-        }));
+        const catLabels = bottomLabels(view.labels, view.labels.map((_, i) => xAt(i)), plot.y + plot.height + m.labelOffset, width, m);
+        const catTicks = view.labels.map((_, i) => ({ x: xAt(i), y: plot.y + plot.height }));
         const series = active.map(({ s, i }, k) => ({
             key: `ser:${s.name}`,
             name: s.name,
@@ -257,14 +305,16 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             : [];
         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;
+        const crossX = crosshairCat ? (frame.tip?.x ?? crosshairCat.at) : 0;
+        const pillWidth = crosshairCat ? Math.max(m.pill.minWidth, estimateLabelWidth(crosshairCat.text, m.fontSize) + 2 * m.pill.padding) : 0;
+        // Pigułka przy skrajnej kategorii przesuwa się do środka zamiast wyjść poza viewBox.
+        const pillX = crosshairCat ? clampLabel(crossX, pillWidth, 0, width) : 0;
         /** 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);
+            const idx = nearestIndex(catLabels.map((l) => l.at), p.x);
             if (keepTip(idx))
                 return;
             const hits = series.map((s) => ({ s, pt: s.points[idx] })).filter((e) => !!e.pt);
@@ -278,7 +328,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             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
+        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.filter((l) => l.visible)].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), _jsx("g", { className: "kpt-chart__cat-ticks", "aria-hidden": "true", children: catTicks.map((tk, i) => (_jsx("circle", { className: cn('kpt-chart__cat-tick', activeIndex === i && 'kpt-chart__cat-tick--active'), r: 2, cx: tk.x, cy: tk.y }, i))) }), crosshairCat ? (_jsxs("g", { className: "kpt-chart__cat-active", children: [_jsx("rect", { x: pillX - pillWidth / 2, y: crosshairCat.y - m.pill.rise, width: pillWidth, height: m.pill.height, rx: m.pill.height / 2 }), _jsx("text", { x: pillX, 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] ?? [];
@@ -313,7 +363,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
         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 plot = plotArea(width, height, vertical ? m.verticalInsets : m.horizontalInsets);
         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, { stacked: view.stacked, valueAxis: view.valueAxis });
         const colors = active.map(({ s, i }) => seriesColor(s.color, i));
@@ -325,16 +375,17 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             ? 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 = vertical
-            ? layout.ticks.map((t) => ({ x: plot.x - 8, y: t.pos + 3, text: formatNumber(t.value), anchor: 'end' }))
+            ? layout.ticks.map((t) => ({ x: plot.x - m.sideGap, y: t.pos + m.baselineShift, text: formatNumber(t.value), anchor: 'end' }))
             : layout.ticks.map((t) => ({
                 x: t.pos,
-                y: plot.y + plot.height + 18,
+                y: plot.y + plot.height + m.labelOffset,
                 text: formatNumber(t.value),
                 anchor: 'middle',
             }));
+        const centers = view.labels.map((_, i) => cat.center(i));
         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' }));
+            ? bottomLabels(view.labels, centers, plot.y + plot.height + m.labelOffset, width, m)
+            : sideLabels(view.labels, centers, plot.x - m.sideGap, m);
         const bars = layout.bars.map((b, order) => ({
             b,
             order,
@@ -371,7 +422,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             const p = svgPoint(event);
             if (!p)
                 return;
-            const idx = nearestIndex(catLabels.map((l) => (vertical ? l.x : l.y - 3)), vertical ? p.x : p.y);
+            const idx = nearestIndex(catLabels.map((l) => l.at), vertical ? p.x : p.y);
             if (keepTip(idx))
                 return;
             const group = bars.filter((e) => e.b.categoryIndex === idx);
@@ -379,11 +430,11 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             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;
+            const x = vertical ? center.at : Math.max(...group.map((e) => e.tipX));
+            const y = vertical ? Math.min(...group.map((e) => e.tipY)) : center.at;
             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
+        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.filter((l) => l.visible)].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 })] }));
     })();
@@ -394,7 +445,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
         const first = view.series[0];
         if (!first)
             return null;
-        const { cx, cy, radius } = radialArea(width, height, 8);
+        const { cx, cy, radius } = radialArea(width, height, m.radialPadding.plain);
         const entries = config.labels
             .map((label, i) => ({ label, i, value: first.data[i] ?? 0, color: seriesColor(first.color, i) }))
             .filter((entry) => !hidden.has(`cat:${entry.i}`));
@@ -416,7 +467,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
     const radarVm = (() => {
         if (config.type !== 'radar')
             return null;
-        const { cx, cy, radius } = radialArea(width, height, 30);
+        const { cx, cy, radius } = radialArea(width, height, m.radialPadding.labelled);
         const grid = radarGrid(config.labels.length, cx, cy, radius, 4);
         const active = view.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
         let max = 1;
@@ -424,9 +475,9 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             for (const v of s.data)
                 max = Math.max(max, v);
         return (_jsxs(_Fragment, { children: [_jsxs("g", { className: "kpt-chart__grid", children: [grid.rings.map((ring, i) => (_jsx("path", { className: "kpt-chart__ring", d: ring }, i))), grid.axes.map((axis, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: cx, y1: cy, x2: axis.end.x, y2: axis.end.y }, i)))] }), _jsx("g", { className: "kpt-chart__axis", children: grid.axes.map((axis, i) => {
-                        const p = polarToCartesian(cx, cy, radius + 14, axis.angle);
+                        const p = polarToCartesian(cx, cy, radius + m.radarLabelGap, axis.angle);
                         const anchor = Math.abs(p.x - cx) < 1 ? 'middle' : p.x > cx ? 'start' : 'end';
-                        return (_jsx("text", { x: p.x, y: p.y + 3, textAnchor: anchor, children: config.labels[axis.labelIndex] ?? '' }, i));
+                        return (_jsx("text", { x: p.x, y: p.y + m.baselineShift, textAnchor: anchor, children: config.labels[axis.labelIndex] ?? '' }, i));
                     }) }), active.map(({ s, i }) => {
                     const key = `ser:${s.name}`;
                     const color = seriesColor(s.color, i);
@@ -455,5 +506,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: [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] })] }) }));
+                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", ref: canvasRef, 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

@@ -1,85 +1,102 @@
-# KptChart (@konce-pt/react/charts)
-
-An SVG chart driven by a single `config` object: line, bar, pie, doughnut, polarArea, radar.
-Import: `import { KptChart, type KptChartConfig } from '@konce-pt/react/charts';`
-
-A separate subpath, because the geometry and the chart styles are heavy next to the library core
-and not every app needs them.
-
-## Props
-- `config`: `KptChartConfig` (required)
-- `width`, `height` - the viewBox in SVG units (600 x 360); the chart scales to its container
-
-The whole drawing lives in that coordinate system, TYPOGRAPHY INCLUDED: the axis labels are set in
-`font-size: 11px`, but inside an SVG that means 11 user units, not 11 device pixels. Render a
-600-unit chart in a 300px column and the labels come out at roughly half size. `width`/`height` are
-therefore not just an aspect ratio - they are the text scale. In a narrow container shrink them
-proportionally (`width={300} height={180}`) instead of letting a 600-unit chart squeeze itself.
-- `className`, `ref` and every other `<div>` prop go to the host
-
-## The config is the API
-`{ type, labels, series, points?, area?, interpolation?, orientation?, borderRadius?, innerRadius?,
-valueAxis?, stacked?, crosshair?, tooltip?, legend?, title?, subtitle?, animation?, ariaLabel?, description? }` - the same shape the Angular port
-takes, because both read it from `@konce-pt/chart`.
-
-## Value axis and stacking (line, bar)
-- `valueAxis?: { zero?, min?, max? }` - the value axis starts at zero by default, so a bar and the area under a line
-  show the size directly. `zero: false` fits the axis to the data (a weight of 79-90 kg is no longer a flat line under
-  the ceiling); `min` / `max` pin an end of the axis exactly and win over `zero` - a value beyond a pinned end is
-  cut at the edge. Bars and areas grow from zero, or from the end of the axis nearer to it
-- `stacked?: boolean` - stacked series: bars on top of each other in one band per category (positive values up,
-  negative down; only the outer segment is rounded), lines as running totals with a band under each one (with
-  `area`). The axis covers the totals; the tooltip shows the values of the series, not the totals
-- The rules live in `@konce-pt/chart`: `axisScale`, `chartScale`, `stackSeries`, `bandPath` (tested)
-
-## The geometry lives in a package
-Scales, paths, bar layout and arcs come from `@konce-pt/chart` - pure functions with `node --test`
-coverage, shared with the Angular port. The component only turns them into SVG elements; there is
-no DOM manipulation and no canvas.
-
-## 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, 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] }] }} />
-
-    <KptChart
-      config={{
-        type: 'doughnut',
-        innerRadius: 0.62,
-        labels: ['Done', 'In progress'],
-        series: [{ name: 'Tasks', data: [42, 15] }],
-        legend: { position: 'right' },
-      }}
-    />
-
-## Tokens
-`--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
-The `<svg>` is `role="img"` with a name: `config.ariaLabel`, else the title text, else `chart.label`
-from i18n. `config.description` (one sentence with the takeaway) is tied to it through
-`aria-describedby`. The data itself sits in a visually hidden `<table>` (categories in rows, series in
-columns, numbers in the active language), so a screen reader can walk the values - the tooltip is
-pointer-only. The legend is a list of real buttons, so series can be toggled from the keyboard.
+# KptChart (@konce-pt/react/charts)
+
+An SVG chart driven by a single `config` object: line, bar, pie, doughnut, polarArea, radar.
+Import: `import { KptChart, type KptChartConfig } from '@konce-pt/react/charts';`
+
+A separate subpath, because the geometry and the chart styles are heavy next to the library core
+and not every app needs them.
+
+## Props
+- `config`: `KptChartConfig` (required)
+- `width`, `height` - the aspect ratio (default 600 x 360); the chart fills the width of its container
+
+The chart draws in the pixels of its container: a `ResizeObserver` measures the canvas width and the
+viewBox follows it, the height comes from the `width`/`height` ratio. Lengths grow and shrink with the
+container, while the text (axis labels, 14px by default) and the line weights stay real pixels - the
+same in a 300px column and on a 3000px screen. `width`/`height` are therefore only the aspect ratio and the
+size of the first frame before the measurement arrives (SSR); there is no need to scale them by hand.
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The config is the API
+`{ type, labels, series, points?, area?, interpolation?, orientation?, borderRadius?, innerRadius?,
+valueAxis?, stacked?, crosshair?, tooltip?, legend?, title?, subtitle?, animation?, ariaLabel?, description? }` - the same shape the Angular port
+takes, because both read it from `@konce-pt/chart`.
+
+## Value axis and stacking (line, bar)
+- `valueAxis?: { zero?, min?, max? }` - the value axis starts at zero by default, so a bar and the area under a line
+  show the size directly. `zero: false` fits the axis to the data (a weight of 79-90 kg is no longer a flat line under
+  the ceiling); `min` / `max` pin an end of the axis exactly and win over `zero` - a value beyond a pinned end is
+  cut at the edge. Bars and areas grow from zero, or from the end of the axis nearer to it
+- `stacked?: boolean` - stacked series: bars on top of each other in one band per category (positive values up,
+  negative down; only the outer segment is rounded), lines as running totals with a band under each one (with
+  `area`). The axis covers the totals; the tooltip shows the values of the series, not the totals
+- The rules live in `@konce-pt/chart`: `axisScale`, `chartScale`, `stackSeries`, `bandPath` (tested)
+
+## Category axis (line, bar)
+- When the category labels do not fit, the axis shows an even subset instead of overlapping text: all of
+  them if they fit, otherwise the densest split that fits - 9 labels (eighths of the axis), 5 (first, 1/4,
+  middle, 3/4, last), 3, and finally the two ends only. Horizontal bars apply the same rule to the rows
+- The choice is made in on-screen pixels (the chart measures its container), so a narrow column shows fewer
+  labels and a wide one more; the outer labels and the
+  crosshair pill are shifted inward so they never leave the chart
+- A line chart marks every category with a small dot on the axis; the active one grows on hover. The full
+  name of any category stays in the crosshair pill and the tooltip
+- The rules live in `@konce-pt/chart`: `axisLabelIndices`, `estimateLabelWidth`, `clampLabel` (tested)
+
+## The geometry lives in a package
+Scales, paths, bar layout and arcs come from `@konce-pt/chart` - pure functions with `node --test`
+coverage, shared with the Angular port. The component only turns them into SVG elements; there is
+no DOM manipulation and no canvas.
+
+## 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, 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] }] }} />
+
+    <KptChart
+      config={{
+        type: 'doughnut',
+        innerRadius: 0.62,
+        labels: ['Done', 'In progress'],
+        series: [{ name: 'Tasks', data: [42, 15] }],
+        legend: { position: 'right' },
+      }}
+    />
+
+## Tokens
+`--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`.
+
+Axis text size: `--kpt-chart-font-size` on the chart (default `--kpt-font-size-sm`, 14px - the size of the
+tooltip and the legend). The SVG text inherits it, and the component reads the computed value to derive
+everything that sits next to the text - the margins for the labels, the gap between a label and its axis,
+the crosshair pill, the label thinning (`chartMetrics` in `@konce-pt/chart`). Override it in CSS, the
+layout follows: `.revenue .kpt-chart-host { --kpt-chart-font-size: 12px; }`.
+
+## Accessibility
+The `<svg>` is `role="img"` with a name: `config.ariaLabel`, else the title text, else `chart.label`
+from i18n. `config.description` (one sentence with the takeaway) is tied to it through
+`aria-describedby`. The data itself sits in a visually hidden `<table>` (categories in rows, series in
+columns, numbers in the active language), so a screen reader can walk the values - the tooltip is
+pointer-only. The legend is a list of real buttons, so series can be toggled from the keyboard.

package/dist/charts-entry/public-api.d.ts

@@ -1,4 +1,4 @@
 export { KptChart } from '../charts/chart.tsx';
 export type { KptChartProps } from '../charts/chart.tsx';
-export type { KptChartConfig, KptChartSeries, KptChartType, KptLineInterpolation, KptBarOrientation, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptAlign, KptPointStyle, KptTitleOptions, KptTooltipOptions, KptTooltipContext, KptAnimationOptions, KptFont, KptPadding, } from '@konce-pt/chart';
+export type { KptChartConfig, KptChartSeries, KptChartType, KptLineInterpolation, KptBarOrientation, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptAlign, KptPointStyle, KptTitleOptions, KptTooltipOptions, KptTooltipContext, KptAnimationOptions, KptValueAxisOptions, KptFont, KptPadding, } from '@konce-pt/chart';
 export { KPT_CHART_PALETTE, seriesColor, linePath, areaPath, pieSlices, polarSlices, barLayout, radarGrid, radarPoints, niceScale, } from '@konce-pt/chart';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "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.18.0",
-    "@konce-pt/mention": "0.18.0",
-    "@konce-pt/chat": "0.18.0",
-    "@konce-pt/chart": "0.18.0",
-    "@konce-pt/speech": "0.18.0",
-    "@konce-pt/i18n": "0.18.0",
-    "@konce-pt/icons": "0.18.0",
-    "@konce-pt/motion": "0.18.0",
-    "@konce-pt/roadmap": "0.18.0",
-    "@konce-pt/datetime": "0.18.0",
-    "@konce-pt/table": "0.18.0",
-    "@konce-pt/tokens": "0.18.0",
-    "@konce-pt/map": "0.18.0"
+    "@konce-pt/backdrop": "0.18.2",
+    "@konce-pt/chat": "0.18.2",
+    "@konce-pt/datetime": "0.18.2",
+    "@konce-pt/mention": "0.18.2",
+    "@konce-pt/chart": "0.18.2",
+    "@konce-pt/motion": "0.18.2",
+    "@konce-pt/i18n": "0.18.2",
+    "@konce-pt/roadmap": "0.18.2",
+    "@konce-pt/icons": "0.18.2",
+    "@konce-pt/speech": "0.18.2",
+    "@konce-pt/table": "0.18.2",
+    "@konce-pt/map": "0.18.2",
+    "@konce-pt/tokens": "0.18.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",