@paul-portfolio/react 0.4.3 → 0.5.0

package/dist/BarChart.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from 'react';
+type BarChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** One bar per value. */
+    data: number[];
+    /** Optional category labels, used to build the accessible summary. */
+    labels?: string[];
+    /** Bar direction. Defaults to vertical. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Per-bar fill colors. Falls back to the token palette when omitted. */
+    colors?: string[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    width?: number;
+    height?: number;
+};
+/**
+ * A categorical bar chart, vertical or horizontal. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulBarChart`. Colour is never the
+ * only signal — the values are summarised in the `role="img"` label.
+ */
+export declare function BarChart({ data, labels, orientation, colors, label, width, height, className, ...props }: BarChartProps): import("react").JSX.Element;
+export {};

package/dist/BarChart.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+import { barRects, barRectsHorizontal } from './chartGeometry';
+function summarise(data, labels) {
+    return data
+        .map((v, i) => (labels?.[i] ? `${labels[i]} ${v}` : `${v}`))
+        .join(', ');
+}
+/**
+ * A categorical bar chart, vertical or horizontal. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulBarChart`. Colour is never the
+ * only signal — the values are summarised in the `role="img"` label.
+ */
+export function BarChart({ data, labels, orientation = 'vertical', colors, label, width = 160, height = 100, className, ...props }) {
+    const horizontal = orientation === 'horizontal';
+    const box = { width, height, padding: 2 };
+    const rects = horizontal ? barRectsHorizontal(data, box) : barRects(data, box);
+    const name = data.length > 0 ? `${label}: ${summarise(data, labels)}` : label;
+    const fillFor = (i) => colors?.[i] ?? `var(--paul-chart-${(i % 6) + 1})`;
+    return (_jsx("div", { role: "img", "aria-label": name, className: cx('paul-chart', 'paul-chart--bar', className), ...props, children: _jsx("svg", { className: cx('paul-chart__svg', horizontal && 'paul-chart__svg--horizontal'), viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: rects.map((r, i) => (_jsx("rect", { className: "paul-chart__bar", x: r.x, y: r.y, width: r.width, height: r.height, rx: 2, fill: fillFor(i) }, i))) }) }));
+}

package/dist/DonutChart.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes } from 'react';
+export type DonutDatum = {
+    label: string;
+    value: number;
+    /** Slice colour. Falls back to the token palette when omitted. */
+    color?: string;
+};
+type DonutChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    data: DonutDatum[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** Show the swatch + value legend beside the ring. Defaults to true. */
+    legend?: boolean;
+    /** Outer diameter, in coordinate units. Defaults to 120. */
+    size?: number;
+    /** Ring thickness, in coordinate units. Defaults to 28. */
+    thickness?: number;
+};
+/**
+ * A donut (ring) chart with an optional legend — the shape behind fleet-health
+ * and revenue-mix breakdowns. Pure SVG from `chartGeometry`, matching the
+ * Angular `PaulDonutChart`. The ring is `role="img"`; the legend sits outside
+ * it so its rows stay in the accessibility tree.
+ */
+export declare function DonutChart({ data, label, legend, size, thickness, className, ...props }: DonutChartProps): import("react").JSX.Element;
+export {};

package/dist/DonutChart.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { donutSegments } from './chartGeometry';
+/**
+ * A donut (ring) chart with an optional legend — the shape behind fleet-health
+ * and revenue-mix breakdowns. Pure SVG from `chartGeometry`, matching the
+ * Angular `PaulDonutChart`. The ring is `role="img"`; the legend sits outside
+ * it so its rows stay in the accessibility tree.
+ */
+export function DonutChart({ data, label, legend = true, size = 120, thickness = 28, className, ...props }) {
+    const values = data.map((d) => d.value);
+    const segments = donutSegments(values, { size, thickness });
+    const summary = data.map((d) => `${d.label} ${d.value}`).join(', ');
+    const name = data.length > 0 ? `${label}: ${summary}` : label;
+    const colorFor = (i) => data[i]?.color ?? `var(--paul-chart-${(i % 6) + 1})`;
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--donut', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: _jsx("svg", { className: "paul-chart__svg", viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", focusable: "false", children: segments
+                        .filter((seg) => seg.percent > 0)
+                        .map((seg) => (_jsx("path", { className: "paul-chart__slice", d: seg.path, fill: colorFor(seg.index) }, seg.index))) }) }), legend && data.length > 0 && (_jsx("ul", { className: "paul-chart__legend", children: data.map((d, i) => (_jsxs("li", { className: "paul-chart__legend-item", children: [_jsx("span", { className: "paul-chart__swatch", "aria-hidden": "true", style: { backgroundColor: colorFor(i) } }), _jsx("span", { className: "paul-chart__legend-label", children: d.label }), _jsx("span", { className: "paul-chart__legend-value", children: d.value })] }, d.label))) }))] }));
+}

package/dist/FunnelChart.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes } from 'react';
+export type FunnelDatum = {
+    label: string;
+    value: number;
+};
+type FunnelChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    data: FunnelDatum[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** Show the per-stage drop-off beside each row. Defaults to true. */
+    showDropOff?: boolean;
+    /** viewBox width in coordinate units. Defaults to 200. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 140. */
+    height?: number;
+};
+/**
+ * Stage-to-stage conversion, drawn as narrowing bands. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulFunnelChart`.
+ *
+ * The drop-off is what a funnel is read for, so it is rendered as text rather
+ * than left to the taper — the widths carry the shape, the labels carry the
+ * number.
+ */
+export declare function FunnelChart({ data, label, showDropOff, width, height, className, ...props }: FunnelChartProps): import("react").JSX.Element;
+export {};

package/dist/FunnelChart.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { funnelStages } from './chartGeometry';
+/** Stage colour comes from the SEQUENTIAL ramp: funnel stages are ordered. */
+const stageColor = (i, total) => {
+    const step = total <= 1 ? 3 : Math.round(1 + (i / (total - 1)) * 3);
+    return `var(--paul-chart-seq-${step + 1})`;
+};
+/**
+ * Stage-to-stage conversion, drawn as narrowing bands. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulFunnelChart`.
+ *
+ * The drop-off is what a funnel is read for, so it is rendered as text rather
+ * than left to the taper — the widths carry the shape, the labels carry the
+ * number.
+ */
+export function FunnelChart({ data, label, showDropOff = true, width = 200, height = 140, className, ...props }) {
+    const stages = funnelStages(data.map((d) => d.value), { width, height, padding: 2 });
+    const summary = data
+        .map((d, i) => `${d.label} ${d.value} (${stages[i]?.percent ?? 0}%)`)
+        .join(', ');
+    const name = data.length > 0 ? `${label}: ${summary}` : label;
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--funnel', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: data.length > 0 ? (_jsx("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: stages.map((stage) => (_jsx("path", { className: "paul-chart__stage", d: stage.path, fill: stageColor(stage.index, stages.length) }, stage.index))) })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }), data.length > 0 && (_jsx("ol", { className: "paul-chart__legend", children: data.map((d, i) => (_jsxs("li", { className: "paul-chart__legend-item", children: [_jsx("span", { className: "paul-chart__swatch", "aria-hidden": "true", style: { backgroundColor: stageColor(i, data.length) } }), _jsx("span", { className: "paul-chart__legend-label", children: d.label }), _jsx("span", { className: "paul-chart__legend-value", children: d.value }), showDropOff && i > 0 && (_jsxs("span", { className: "paul-chart__delta", children: ["\u2212", stages[i]?.dropOff ?? 0, "%"] }))] }, d.label))) }))] }));
+}

package/dist/GaugeChart.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from 'react';
+export type GaugeTone = 'default' | 'good' | 'warning' | 'critical';
+type GaugeChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The reading. Clamped into [min, max] for the arc; shown verbatim as text. */
+    value: number;
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** Bottom of the range. Defaults to 0. */
+    min?: number;
+    /** Top of the range. Defaults to 100. */
+    max?: number;
+    /** Suffix beside the hero number, e.g. "%" or "GB". */
+    unit?: string;
+    /** Outer diameter, in coordinate units. Defaults to 120. */
+    size?: number;
+    /** Arc thickness, in coordinate units. Defaults to 20. */
+    thickness?: number;
+    /** Total sweep in degrees. Defaults to 270 — a dial, not a full ring. */
+    sweep?: number;
+    /** Status colour for the fill. Defaults to the neutral series colour. */
+    tone?: GaugeTone;
+};
+/**
+ * One ratio against a limit, drawn as a radial dial. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulGaugeChart`.
+ *
+ * The number is the point, so it is a hero figure inside the arc rather than a
+ * label hanging off it — the arc gives the reading a position in its range, the
+ * text gives it precision. Text wears the text tokens and never the series
+ * colour; the track is recessive and the fill carries the tone. No legend: a
+ * single value has nothing to key.
+ *
+ * When `tone` is anything but `default` the tone name is rendered as text next
+ * to the value, because status must never be carried by colour alone.
+ */
+export declare function GaugeChart({ value, label, min, max, unit, size, thickness, sweep, tone, className, ...props }: GaugeChartProps): import("react").JSX.Element;
+export {};

package/dist/GaugeChart.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { gaugeArc } from './chartGeometry';
+/**
+ * Status is never colour alone: a tone other than `default` also renders its
+ * name as visible text beside the value, so the reading survives greyscale,
+ * a colour-vision deficiency, and a printout.
+ */
+const TONE_LABEL = {
+    default: '',
+    good: 'Good',
+    warning: 'Warning',
+    critical: 'Critical',
+};
+/** Tones borrow the SEMANTIC status colours, not the categorical series ramp. */
+const TONE_COLOR = {
+    default: 'var(--paul-chart-1)',
+    good: 'var(--paul-color-success-600)',
+    warning: 'var(--paul-color-warning-600)',
+    critical: 'var(--paul-color-error-600)',
+};
+/**
+ * One ratio against a limit, drawn as a radial dial. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulGaugeChart`.
+ *
+ * The number is the point, so it is a hero figure inside the arc rather than a
+ * label hanging off it — the arc gives the reading a position in its range, the
+ * text gives it precision. Text wears the text tokens and never the series
+ * colour; the track is recessive and the fill carries the tone. No legend: a
+ * single value has nothing to key.
+ *
+ * When `tone` is anything but `default` the tone name is rendered as text next
+ * to the value, because status must never be carried by colour alone.
+ */
+export function GaugeChart({ value, label, min = 0, max = 100, unit, size = 120, thickness = 20, sweep = 270, tone = 'default', className, ...props }) {
+    const geo = gaugeArc(value, { size, thickness, min, max, sweep });
+    const toneLabel = TONE_LABEL[tone];
+    // Name the whole range, not just its top: a gauge running 20–60 that says
+    // "of 60" invites the reader to compute 41.5/60 when the arc means
+    // (41.5-20)/(60-20). Only mention `min` when it isn't the assumed zero.
+    const range = min === 0 ? `${max}` : `${min} to ${max}`;
+    const name = `${label}: ${value} of ${range} (${geo.percent}%)${toneLabel ? `, ${toneLabel}` : ''}`;
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--gauge', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: _jsxs("svg", { className: "paul-chart__svg", viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", focusable: "false", children: [_jsx("path", { className: "paul-chart__gauge-track", d: geo.track }), geo.fill !== '' && (_jsx("path", { className: "paul-chart__gauge-fill", d: geo.fill, fill: TONE_COLOR[tone] }))] }) }), _jsxs("div", { className: "paul-chart__readout", children: [_jsxs("p", { className: "paul-chart__value", children: [value, unit && _jsx("span", { className: "paul-chart__unit", children: unit })] }), toneLabel && _jsx("p", { className: "paul-chart__tone", children: toneLabel }), _jsxs("p", { className: "paul-chart__caption", children: ["of ", range] })] })] }));
+}

package/dist/GradientBackground.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+type GradientBackgroundProps = HTMLAttributes<HTMLDivElement> & {
+    /** Gradient stops, in order. Defaults to the design-token brand palette. */
+    colors?: string[];
+    /** Gradient angle in degrees. */
+    angle?: number;
+    /** Ambient flow speed. */
+    speed?: 'slow' | 'normal' | 'fast';
+    /** Run the ambient flow animation. Defaults to true. */
+    animate?: boolean;
+    children?: ReactNode;
+};
+/**
+ * A decorative surface painted with a flowing multi-stop gradient. Content is
+ * passed as children and renders on top, so the strip stays content-agnostic.
+ * The ambient flow is pure CSS and is gated behind prefers-reduced-motion, so
+ * it goes static for users who ask for reduced motion — no JS needed. When
+ * `colors` is omitted it falls back to the token brand palette.
+ */
+export declare function GradientBackground({ colors, angle, speed, animate, className, style, children, ...rest }: GradientBackgroundProps): import("react").JSX.Element;
+export {};

package/dist/GradientBackground.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+const DURATION = {
+    slow: '18s',
+    normal: '12s',
+    fast: '6s',
+};
+/**
+ * A decorative surface painted with a flowing multi-stop gradient. Content is
+ * passed as children and renders on top, so the strip stays content-agnostic.
+ * The ambient flow is pure CSS and is gated behind prefers-reduced-motion, so
+ * it goes static for users who ask for reduced motion — no JS needed. When
+ * `colors` is omitted it falls back to the token brand palette.
+ */
+export function GradientBackground({ colors, angle = 120, speed = 'normal', animate = true, className, style, children, ...rest }) {
+    const gradientStyle = {
+        ...(colors && colors.length > 0
+            ? { ['--paul-gradient-image']: `linear-gradient(${angle}deg, ${colors.join(', ')})` }
+            : {}),
+        ['--paul-gradient-duration']: DURATION[speed],
+        ...style,
+    };
+    return (_jsx("div", { className: cx('gradient-bg', className), "data-animate": animate ? 'true' : undefined, style: gradientStyle, ...rest, children: children }));
+}

package/dist/HeatmapChart.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from 'react';
+export type HeatmapRow = {
+    /** Rendered down the left gutter. */
+    label: string;
+    /** One value per column. */
+    values: number[];
+};
+type HeatmapChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * One entry per row, each carrying its own label.
+     *
+     * A row and its label travel together on purpose: as separate `matrix` and
+     * `rowLabels` arrays a length mismatch is representable, and it degrades
+     * quietly — the label for the missing row just vanishes and every other row
+     * still looks right.
+     */
+    rows: HeatmapRow[];
+    /** One label per column, rendered across the top gutter. */
+    colLabels: string[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /**
+     * Print each cell's value inside the cell. Defaults to true.
+     *
+     * Direct labelling is only honest on a small grid — past roughly 8×8 the text
+     * is smaller than the cell can carry and the numbers turn into texture. Turn
+     * it off for large cohorts and let the ramp plus the scale legend do the work.
+     */
+    showValues?: boolean;
+    /** viewBox width in coordinate units. Defaults to 220. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 140. */
+    height?: number;
+};
+/**
+ * A cohort-retention grid: one cell per matrix value, shaded by magnitude. Pure
+ * SVG from `chartGeometry`, matching the Angular `PaulHeatmapChart`.
+ *
+ * The scale legend is not optional. A sequential ramp with no key tells a reader
+ * that one cell is bigger than another but never by how much, so the five steps
+ * are rendered with the matrix min and max as end labels. The `role="img"`
+ * summary names every row and its values, so the grid is readable with the
+ * colour thrown away entirely.
+ */
+export declare function HeatmapChart({ rows, colLabels, label, showValues, width, height, className, ...props }: HeatmapChartProps): import("react").JSX.Element;
+export {};

package/dist/HeatmapChart.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { heatmapCells } from './chartGeometry';
+/** Gutter reserved for the row labels, in coordinate units. */
+const ROW_GUTTER = 40;
+/** Gutter reserved for the column labels, in coordinate units. */
+const COL_GUTTER = 14;
+/**
+ * Cell colour comes from the SEQUENTIAL ramp: a heatmap encodes MAGNITUDE, so
+ * intensity maps onto one hue light-to-dark. The categorical --paul-chart-N
+ * palette would encode the value as identity, which is a different claim.
+ */
+const cellColor = (intensity) => `var(--paul-chart-seq-${Math.round(intensity * 4) + 1})`;
+/** The top two ramp steps are dark enough that ink-on-cell has to flip. */
+const valueColor = (intensity) => Math.round(intensity * 4) + 1 >= 4 ? 'var(--paul-color-surface)' : 'var(--paul-color-foreground)';
+/**
+ * A cohort-retention grid: one cell per matrix value, shaded by magnitude. Pure
+ * SVG from `chartGeometry`, matching the Angular `PaulHeatmapChart`.
+ *
+ * The scale legend is not optional. A sequential ramp with no key tells a reader
+ * that one cell is bigger than another but never by how much, so the five steps
+ * are rendered with the matrix min and max as end labels. The `role="img"`
+ * summary names every row and its values, so the grid is readable with the
+ * colour thrown away entirely.
+ */
+export function HeatmapChart({ rows, colLabels, label, showValues = true, width = 220, height = 140, className, ...props }) {
+    const matrix = rows.map((row) => row.values);
+    const cells = heatmapCells(matrix, {
+        width: width - ROW_GUTTER,
+        height: height - COL_GUTTER,
+    });
+    const values = matrix.flat();
+    const min = values.length > 0 ? Math.min(...values) : 0;
+    const max = values.length > 0 ? Math.max(...values) : 0;
+    const summary = rows.map((row) => `${row.label} ${row.values.join(', ')}`).join('; ');
+    const name = cells.length > 0 ? `${label}: ${summary}` : label;
+    // Column and row label positions ride on the cells themselves, so the text
+    // never drifts out of alignment with the grid it annotates.
+    const firstInCol = (c) => cells.find((cell) => cell.col === c);
+    const firstInRow = (r) => cells.find((cell) => cell.row === r);
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--heatmap', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: cells.length > 0 ? (_jsxs("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", focusable: "false", children: [colLabels.map((text, c) => {
+                            const cell = firstInCol(c);
+                            if (!cell)
+                                return null;
+                            return (_jsx("text", { className: "paul-chart__col-label", x: ROW_GUTTER + cell.x + cell.width / 2, y: COL_GUTTER - 5, textAnchor: "middle", children: text }, `col-${text}`));
+                        }), rows.map((row, r) => {
+                            const cell = firstInRow(r);
+                            if (!cell)
+                                return null;
+                            return (_jsx("text", { className: "paul-chart__row-label", x: ROW_GUTTER - 5, y: COL_GUTTER + cell.y + cell.height / 2, textAnchor: "end", dominantBaseline: "middle", children: row.label }, `row-${row.label}`));
+                        }), _jsxs("g", { transform: `translate(${ROW_GUTTER} ${COL_GUTTER})`, children: [cells.map((cell) => (_jsx("rect", { className: "paul-chart__cell", x: cell.x, y: cell.y, width: cell.width, height: cell.height, fill: cellColor(cell.intensity) }, `${cell.row}-${cell.col}`))), showValues &&
+                                    cells.map((cell) => (_jsx("text", { className: "paul-chart__cell-value", x: cell.x + cell.width / 2, y: cell.y + cell.height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: valueColor(cell.intensity), children: cell.value }, `v-${cell.row}-${cell.col}`)))] })] })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }), cells.length > 0 && (_jsxs("div", { className: "paul-chart__scale", children: [_jsx("span", { className: "paul-chart__scale-end", children: min }), [0, 1, 2, 3, 4].map((step) => (_jsx("span", { className: "paul-chart__scale-step", "aria-hidden": "true", style: { backgroundColor: `var(--paul-chart-seq-${step + 1})` } }, step))), _jsx("span", { className: "paul-chart__scale-end", children: max })] }))] }));
+}

package/dist/ParetoChart.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes } from 'react';
+export type ParetoDatum = {
+    label: string;
+    value: number;
+};
+type ParetoChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    data: ParetoDatum[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** Cumulative percent to draw the reference line at. Defaults to 80. */
+    threshold?: number;
+    /** viewBox width in coordinate units. Defaults to 200. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 140. */
+    height?: number;
+};
+/**
+ * Sorted bars plus a cumulative line, on ONE y-axis.
+ *
+ * The textbook Pareto puts raw counts on the left axis and cumulative percent
+ * on the right. Two y-scales on one plot invent a relationship the data doesn't
+ * have — where the line appears to cross the bars is a function of how the two
+ * scales were aligned, and that alignment is arbitrary. So there is one axis
+ * here: the bars are percent-of-total and the line is cumulative percent, both
+ * on 0–100, and the crossing point means something. Nothing is labelled with a
+ * raw count as if it had a scale of its own.
+ *
+ * One series, one colour. Ramping the bars by value would encode magnitude
+ * twice — the height already says it, and the categories are nominal.
+ *
+ * Pure SVG from `chartGeometry`, matching the Angular `PaulParetoChart`.
+ */
+export declare function ParetoChart({ data, label, threshold, width, height, className, ...props }: ParetoChartProps): import("react").JSX.Element;
+export {};

package/dist/ParetoChart.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { paretoLayout } from './chartGeometry';
+/** Height reserved under the plot for the category labels. */
+const LABEL_BAND = 16;
+const PADDING = 2;
+/**
+ * Sorted bars plus a cumulative line, on ONE y-axis.
+ *
+ * The textbook Pareto puts raw counts on the left axis and cumulative percent
+ * on the right. Two y-scales on one plot invent a relationship the data doesn't
+ * have — where the line appears to cross the bars is a function of how the two
+ * scales were aligned, and that alignment is arbitrary. So there is one axis
+ * here: the bars are percent-of-total and the line is cumulative percent, both
+ * on 0–100, and the crossing point means something. Nothing is labelled with a
+ * raw count as if it had a scale of its own.
+ *
+ * One series, one colour. Ramping the bars by value would encode magnitude
+ * twice — the height already says it, and the categories are nominal.
+ *
+ * Pure SVG from `chartGeometry`, matching the Angular `PaulParetoChart`.
+ */
+export function ParetoChart({ data, label, threshold = 80, width = 200, height = 140, className, ...props }) {
+    // `paretoLayout` filters out non-positive values and sorts descending, so the
+    // incoming order is NOT the bar order. Pair labels to values and put them
+    // through the identical filter + sort, or every bar gets the wrong name.
+    // `Array.prototype.sort` is stable, so ties keep their original order in both.
+    const ranked = data.filter((d) => d.value > 0).sort((a, b) => b.value - a.value);
+    const plotHeight = Math.max(0, height - LABEL_BAND);
+    const box = { width, height: plotHeight, padding: PADDING };
+    // The geometry takes the threshold too, so the cut it reports and the rule
+    // drawn below are the same number by construction.
+    const { bars, cumulative, percents, cutIndex: cut } = paretoLayout(data.map((d) => d.value), box, { threshold });
+    // Same mapping the geometry uses for the cumulative points, so the reference
+    // line and the line it references are on one scale by construction.
+    const inner = { bottom: plotHeight - PADDING, height: Math.max(0, plotHeight - PADDING * 2) };
+    const thresholdY = Math.round((inner.bottom - threshold * (inner.height / 100)) * 1000) / 1000;
+    const summary = ranked.map((d, i) => `${d.label} ${percents[i] ?? 0}%`).join(', ');
+    const crossing = cut >= 0
+        ? `${threshold}% of the total is reached by the first ${cut + 1} of ${ranked.length}.`
+        : `The cumulative total never reaches ${threshold}%.`;
+    const name = ranked.length > 0 ? `${label}: ${summary}. ${crossing}` : label;
+    return (_jsx("div", { className: cx('paul-chart', 'paul-chart--pareto', className), ...props, children: _jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: ranked.length > 0 ? (_jsxs("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", focusable: "false", children: [bars.map((bar, i) => (_jsx("rect", { className: "paul-chart__bar", x: bar.x, y: bar.y, width: bar.width, height: bar.height, rx: 1, fill: "var(--paul-chart-1)" }, ranked[i]?.label ?? i))), _jsx("line", { className: "paul-chart__threshold", x1: PADDING, x2: width - PADDING, y1: thresholdY, y2: thresholdY, stroke: "var(--paul-color-border)", strokeDasharray: "4 3" }), _jsx("polyline", { className: "paul-chart__cumulative", points: cumulative.map((p) => `${p.x},${p.y}`).join(' '), fill: "none", stroke: "var(--paul-chart-4)", strokeWidth: 2 }), cut >= 0 && cumulative[cut] && (_jsx("circle", { className: "paul-chart__cut", cx: cumulative[cut].x, cy: cumulative[cut].y, r: 3, fill: "var(--paul-chart-4)" })), bars.map((bar, i) => (_jsx("text", { className: "paul-chart__category", x: bar.x + bar.width / 2, y: height - 5, textAnchor: "middle", children: ranked[i]?.label ?? '' }, `label-${ranked[i]?.label ?? i}`)))] })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }) }));
+}

package/dist/RadarChart.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes } from 'react';
+export type RadarSeries = {
+    label: string;
+    /** One value per axis, in axis order. Missing entries read as 0. */
+    values: number[];
+};
+type RadarChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    data: RadarSeries[];
+    /** Axis names, in order. The polygon has one vertex per entry. */
+    axes: string[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** Shared ceiling for every series. Defaults to the max across all series. */
+    max?: number;
+    /** Width and height of the square viewBox, in coordinate units. Defaults to 160. */
+    size?: number;
+    /** Show the series legend. Only consulted when there are ≥2 series. Defaults to true. */
+    showLegend?: boolean;
+};
+/**
+ * Several measures compared on one frame — the shape behind skill profiles and
+ * capability scorecards. Pure SVG from `chartGeometry`, matching the Angular
+ * `PaulRadarChart`.
+ *
+ * Two rules make the picture honest. Every series is scaled against ONE ceiling
+ * (`max`, defaulting to the max across all series), so the polygons are
+ * comparable rather than each filling the frame; and only the first three
+ * series are drawn — anything past that is dropped, because overlapping
+ * translucent polygons stop resolving into distinct shapes.
+ *
+ * The frame — spokes and rings — is recessive ink, never a series colour, so
+ * the data reads on top of it instead of competing with it.
+ */
+export declare function RadarChart({ data, axes, label, max, size, showLegend, className, ...props }: RadarChartProps): import("react").JSX.Element;
+export {};

package/dist/RadarChart.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { radarAxes, radarPolygon } from './chartGeometry';
+/** At most three series — a fourth overlapping polygon stops being readable. */
+const MAX_SERIES = 3;
+function warnTruncated(count, label) {
+    // Declared locally rather than pulling @types/node into a browser package.
+    if (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'production')
+        return;
+    // eslint-disable-next-line no-console
+    console.warn(`RadarChart ("${label}"): ${count} series given, ${MAX_SERIES} drawn. ` +
+        'Overlapping polygons stop being readable past three — facet into small ' +
+        'multiples, or fold the tail into one series, rather than relying on this cap.');
+}
+/** Series colour comes from the CATEGORICAL palette: series are identities. */
+const seriesColor = (i) => `var(--paul-chart-${i + 1})`;
+/**
+ * Several measures compared on one frame — the shape behind skill profiles and
+ * capability scorecards. Pure SVG from `chartGeometry`, matching the Angular
+ * `PaulRadarChart`.
+ *
+ * Two rules make the picture honest. Every series is scaled against ONE ceiling
+ * (`max`, defaulting to the max across all series), so the polygons are
+ * comparable rather than each filling the frame; and only the first three
+ * series are drawn — anything past that is dropped, because overlapping
+ * translucent polygons stop resolving into distinct shapes.
+ *
+ * The frame — spokes and rings — is recessive ink, never a series colour, so
+ * the data reads on top of it instead of competing with it.
+ */
+export function RadarChart({ data, axes, label, max, size = 160, showLegend = true, className, ...props }) {
+    const series = data.slice(0, MAX_SERIES);
+    if (data.length > MAX_SERIES)
+        warnTruncated(data.length, label);
+    const box = { width: size, height: size, padding: 18 };
+    const empty = series.length === 0 || axes.length === 0;
+    const geo = radarAxes(Math.max(axes.length, 1), box);
+    /** Pad or trim each series to the axis count so the polygon always closes. */
+    const valuesFor = (s) => axes.map((_, i) => s.values[i] ?? 0);
+    const ceiling = max ?? Math.max(0, ...series.flatMap((s) => valuesFor(s)));
+    const polygons = series.map((s, i) => ({
+        label: s.label,
+        color: seriesColor(i),
+        points: radarPolygon(valuesFor(s), box, ceiling)
+            .map((p) => `${p.x},${p.y}`)
+            .join(' '),
+    }));
+    const summary = series
+        .map((s) => `${s.label} ${axes.map((a, i) => `${a} ${s.values[i] ?? 0}`).join(', ')}`)
+        .join('; ');
+    const name = empty ? label : `${label}: ${summary}`;
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--radar', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: !empty ? (_jsxs("svg", { className: "paul-chart__svg", viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", focusable: "false", children: [geo.rings.map((r) => (_jsx("circle", { className: "paul-chart__ring", cx: geo.cx, cy: geo.cy, r: r }, r))), geo.axes.map((axis) => (_jsx("line", { className: "paul-chart__axis", x1: geo.cx, y1: geo.cy, x2: axis.x, y2: axis.y }, axis.index))), polygons.map((poly) => (_jsx("polygon", { className: "paul-chart__radar-area", points: poly.points, fill: poly.color, stroke: poly.color }, poly.label))), geo.axes.map((axis) => (_jsx("text", { className: "paul-chart__axis-label", 
+                            // Nudged past the spoke end so the name clears the outer ring.
+                            x: axis.x + (axis.x - geo.cx) * 0.12, y: axis.y + (axis.y - geo.cy) * 0.12, textAnchor: axis.x > geo.cx + 1 ? 'start' : axis.x < geo.cx - 1 ? 'end' : 'middle', dominantBaseline: "middle", children: axes[axis.index] }, axis.index)))] })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }), showLegend && series.length >= 2 && (_jsx("ul", { className: "paul-chart__legend", children: series.map((s, i) => (_jsxs("li", { className: "paul-chart__legend-item", children: [_jsx("span", { className: "paul-chart__swatch", "aria-hidden": "true", style: { backgroundColor: seriesColor(i) } }), _jsx("span", { className: "paul-chart__legend-label", children: s.label })] }, s.label))) }))] }));
+}

package/dist/ScatterPlot.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from 'react';
+import { type ScatterDomain } from './chartGeometry';
+export type ScatterSeries = {
+    label: string;
+    points: {
+        x: number;
+        y: number;
+    }[];
+};
+type ScatterPlotProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    series: ScatterSeries[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /**
+     * Fixes the scale. Pass it when several plots have to be read against each
+     * other — without it every plot rescales to its own extent and two charts
+     * side by side stop being comparable.
+     */
+    domain?: ScatterDomain;
+    /** viewBox width in coordinate units. Defaults to 200. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 140. */
+    height?: number;
+    /** Mark radius in coordinate units. Defaults to 4 — an 8px target. */
+    radius?: number;
+};
+/**
+ * Two measures against each other, one mark per observation. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulScatterPlot`.
+ *
+ * Every mark carries a surface-coloured ring (in CSS, not inline) so points
+ * that land on top of each other still read as two points rather than one blob.
+ * The whole plot is one `role="img"`; a per-point accessibility tree would be
+ * noise, so the summary counts observations per series instead.
+ */
+export declare function ScatterPlot({ series, label, domain, width, height, radius, className, ...props }: ScatterPlotProps): import("react").JSX.Element;
+export {};

package/dist/ScatterPlot.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { scatterPoints } from './chartGeometry';
+/** Series colour comes from the CATEGORICAL palette: series are identities. */
+const seriesColor = (i) => `var(--paul-chart-${(i % 6) + 1})`;
+/**
+ * Two measures against each other, one mark per observation. Pure SVG from
+ * `chartGeometry`, matching the Angular `PaulScatterPlot`.
+ *
+ * Every mark carries a surface-coloured ring (in CSS, not inline) so points
+ * that land on top of each other still read as two points rather than one blob.
+ * The whole plot is one `role="img"`; a per-point accessibility tree would be
+ * noise, so the summary counts observations per series instead.
+ */
+export function ScatterPlot({ series, label, domain, width = 200, height = 140, radius = 4, className, ...props }) {
+    // Inset by the radius so marks on the extremes sit inside the box.
+    const box = { width, height, padding: radius };
+    const total = series.reduce((n, s) => n + s.points.length, 0);
+    const summary = series.map((s) => `${s.label} ${s.points.length} points`).join(', ');
+    const name = total > 0 ? `${label}: ${summary}` : label;
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--scatter', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: total > 0 ? (_jsx("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", focusable: "false", children: series.map((s, i) => (_jsx("g", { className: "paul-chart__series", children: scatterPoints(s.points, box, domain).map((point) => (_jsx("circle", { className: "paul-chart__mark", cx: point.x, cy: point.y, r: radius, fill: seriesColor(i) }, point.index))) }, s.label))) })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }), series.length > 1 && total > 0 && (_jsx("ul", { className: "paul-chart__legend", children: series.map((s, i) => (_jsxs("li", { className: "paul-chart__legend-item", children: [_jsx("span", { className: "paul-chart__swatch", "aria-hidden": "true", style: { backgroundColor: seriesColor(i) } }), _jsx("span", { className: "paul-chart__legend-label", children: s.label })] }, s.label))) }))] }));
+}