@paul-portfolio/react 0.4.3 → 0.5.0

package/dist/Sparkline.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from 'react';
+type SparklineProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The series to plot. Ignored when `series` is given. */
+    data?: number[];
+    /**
+     * Several series on one shared y-domain — for comparing trends at a glance.
+     * Takes precedence over `data`.
+     */
+    series?: number[][];
+    /** `line` (default) draws a stroke; `area` fills under it. Single series only. */
+    variant?: 'line' | 'area';
+    /** Accessible name for the chart. Required — the SVG itself is hidden. */
+    label: string;
+    /** viewBox width in coordinate units. Defaults to 160. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 40. */
+    height?: number;
+};
+/**
+ * A compact, axis-free trend line — the sparkline used across dashboards and
+ * KPI cards. Pure SVG from `chartGeometry`, so it renders identically to the
+ * Angular `PaulSparkline`. Exposes `role="img"` with a caller-supplied label
+ * since the drawing carries no text of its own.
+ *
+ * With `series`, every line is scaled against ONE domain spanning all of them —
+ * independently scaled sparklines look comparable and aren't. `area` applies to
+ * the single-series form only; stacked fills at this size are mud.
+ */
+export declare function Sparkline({ data, series, variant, label, width, height, className, ...props }: SparklineProps): import("react").JSX.Element;
+export {};

package/dist/Sparkline.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { linePath, areaPath, multiLinePoints } from './chartGeometry';
+/**
+ * A compact, axis-free trend line — the sparkline used across dashboards and
+ * KPI cards. Pure SVG from `chartGeometry`, so it renders identically to the
+ * Angular `PaulSparkline`. Exposes `role="img"` with a caller-supplied label
+ * since the drawing carries no text of its own.
+ *
+ * With `series`, every line is scaled against ONE domain spanning all of them —
+ * independently scaled sparklines look comparable and aren't. `area` applies to
+ * the single-series form only; stacked fills at this size are mud.
+ */
+export function Sparkline({ data, series, variant = 'line', label, width = 160, height = 40, className, ...props }) {
+    const box = { width, height, padding: 2 };
+    const multi = series?.filter((s) => s.length > 0) ?? [];
+    const single = data ?? [];
+    const hasData = multi.length > 0 || single.length > 0;
+    const lines = multi.length > 0 ? multiLinePoints(multi, box) : [];
+    return (_jsx("div", { role: "img", "aria-label": label, className: cx('paul-chart', 'paul-chart--sparkline', className), ...props, children: hasData ? (_jsx("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: multi.length > 0 ? (lines.map((points, i) => (_jsx("path", { className: "paul-chart__line", d: points.map((p, j) => `${j === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' '), fill: "none", stroke: `var(--paul-chart-${Math.min(i, 5) + 1})`, vectorEffect: "non-scaling-stroke" }, i)))) : (_jsxs(_Fragment, { children: [variant === 'area' && (_jsx("path", { className: "paul-chart__area", d: areaPath(single, box) })), _jsx("path", { className: "paul-chart__line", d: linePath(single, box), fill: "none", vectorEffect: "non-scaling-stroke" })] })) })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }));
+}

package/dist/Spotlight.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+type SpotlightProps = HTMLAttributes<HTMLDivElement> & {
+    /** Diameter of the glow, in pixels. */
+    size?: number;
+    /** Glow colour. Any CSS colour; defaults to a soft brand-blue wash. */
+    color?: string;
+    children: ReactNode;
+};
+/**
+ * An interactive background: a soft radial glow that follows the cursor across
+ * the surface. The glow is decorative and clipped to the container, and the
+ * content sits in its own layer on top, so the component stays content-agnostic.
+ * Under prefers-reduced-motion the glow is pinned to the centre and stops
+ * tracking the pointer — visible, but with no cursor-driven movement.
+ */
+export declare function Spotlight({ size, color, className, style, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+export {};

package/dist/Spotlight.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { cx } from './cx';
+import { usePrefersReducedMotion } from './usePrefersReducedMotion';
+/**
+ * An interactive background: a soft radial glow that follows the cursor across
+ * the surface. The glow is decorative and clipped to the container, and the
+ * content sits in its own layer on top, so the component stays content-agnostic.
+ * Under prefers-reduced-motion the glow is pinned to the centre and stops
+ * tracking the pointer — visible, but with no cursor-driven movement.
+ */
+export function Spotlight({ size = 350, color, className, style, children, ...rest }) {
+    const reduced = usePrefersReducedMotion();
+    const rootRef = useRef(null);
+    const baseStyle = {
+        ['--paul-spotlight-size']: `${size}px`,
+        ...(color ? { ['--paul-spotlight-color']: color } : {}),
+        ...style,
+    };
+    // Static, centred glow — visible, but never chases the pointer.
+    if (reduced) {
+        return (_jsxs("div", { className: cx('spotlight', className), "data-active": "true", style: baseStyle, ...rest, children: [_jsx("div", { "aria-hidden": "true", className: "spotlight__glow" }), _jsx("div", { className: "spotlight__content", children: children })] }));
+    }
+    const handleMove = (e) => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        el.style.setProperty('--paul-spotlight-x', `${e.clientX - rect.left}px`);
+        el.style.setProperty('--paul-spotlight-y', `${e.clientY - rect.top}px`);
+        el.dataset.active = 'true';
+    };
+    const handleLeave = () => {
+        const el = rootRef.current;
+        if (el)
+            delete el.dataset.active;
+    };
+    return (_jsxs("div", { ref: rootRef, className: cx('spotlight', className), style: baseStyle, onPointerMove: handleMove, onPointerLeave: handleLeave, ...rest, children: [_jsx("div", { "aria-hidden": "true", className: "spotlight__glow" }), _jsx("div", { className: "spotlight__content", children: children })] }));
+}

package/dist/StackedLineChart.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes } from 'react';
+export type LineSeries = {
+    label: string;
+    values: number[];
+};
+type StackedLineChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    series: LineSeries[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** `lines` (default) overlays one line per series; `stacked` fills part-to-whole bands. */
+    variant?: 'lines' | 'stacked';
+    /** viewBox width in coordinate units. Defaults to 200. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 120. */
+    height?: number;
+    /**
+     * Render the swatch legend. Defaults to true, and a legend is the only thing
+     * naming a series here — set this to false with two or more series and
+     * identity becomes colour-only, which fails the same readers the palette was
+     * ordered for. One series never gets a legend regardless: the accessible
+     * name already says what the line is.
+     */
+    showLegend?: boolean;
+};
+/**
+ * Several series over one shared x — either overlaid as lines, or stacked as
+ * part-to-whole bands. Pure SVG from `chartGeometry`, matching the Angular
+ * `PaulStackedLineChart`.
+ *
+ * Both variants take their y-domain from `chartGeometry`, which computes it
+ * once across every series. That is the whole point of the primitive: series
+ * rescaled to their own extents look comparable and aren't.
+ */
+export declare function StackedLineChart({ series, label, variant, width, height, showLegend, className, ...props }: StackedLineChartProps): import("react").JSX.Element;
+export {};

package/dist/StackedLineChart.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx';
+import { multiLinePoints, stackedSeries } from './chartGeometry';
+/**
+ * Series colour comes from the CATEGORICAL palette: series are identities, not
+ * magnitudes. Clamped at slot 6 rather than cycled — a seventh line reusing
+ * slot 1 would read as the first series, and two identical hues on one plot is
+ * worse than none. Past six, facet or roll the tail into "Other".
+ */
+const seriesColor = (i) => `var(--paul-chart-${Math.min(i, 5) + 1})`;
+const toPath = (points) => points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');
+/**
+ * Several series over one shared x — either overlaid as lines, or stacked as
+ * part-to-whole bands. Pure SVG from `chartGeometry`, matching the Angular
+ * `PaulStackedLineChart`.
+ *
+ * Both variants take their y-domain from `chartGeometry`, which computes it
+ * once across every series. That is the whole point of the primitive: series
+ * rescaled to their own extents look comparable and aren't.
+ */
+export function StackedLineChart({ series, label, variant = 'lines', width = 200, height = 120, showLegend = true, className, ...props }) {
+    const box = { width, height, padding: 2 };
+    const values = series.map((s) => s.values);
+    const hasData = values.some((v) => v.length > 0);
+    const lines = variant === 'lines' ? multiLinePoints(values, box) : [];
+    const bands = variant === 'stacked' ? stackedSeries(values, box) : [];
+    // The last value is what a trend line is read for, so it is what the
+    // accessible name carries — the drawing itself is hidden.
+    const summary = series
+        .map((s) => `${s.label} ${s.values.length > 0 ? s.values[s.values.length - 1] : 0}`)
+        .join(', ');
+    const name = hasData ? `${label}: ${summary}` : label;
+    // Two or more series ALWAYS get a legend; one never does.
+    const legend = showLegend && hasData && series.length >= 2;
+    return (_jsxs("div", { className: cx('paul-chart', 'paul-chart--lines', className), ...props, children: [_jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: hasData ? (_jsx("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: variant === 'stacked'
+                        ? bands.map((band) => (_jsx("path", { className: "paul-chart__band", d: band.path, fill: seriesColor(band.index) }, band.index)))
+                        : lines.map((points, i) => (_jsx("path", { className: "paul-chart__series-line", d: toPath(points), fill: "none", stroke: seriesColor(i), vectorEffect: "non-scaling-stroke" }, series[i]?.label ?? i))) })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }), legend && (_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/Ticker.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+type TickerProps = {
+    /** Accessible name for the strip. Scroll mode renders a labelled region. */
+    label: string;
+    /**
+     * `scroll` (default) is an accessible, real scroll container with an ambient
+     * auto-scroll — every item stays reachable. `marquee` is a decorative,
+     * aria-hidden CSS loop for pure flavour.
+     */
+    mode?: 'scroll' | 'marquee';
+    /** Which edge the strip sits on; picks the border side. */
+    edge?: 'top' | 'bottom';
+    /** Which way the ambient motion travels. */
+    direction?: 'left' | 'right';
+    /** Ambient auto-scroll speed for scroll mode, in px/sec. */
+    speed?: number;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * A horizontal ticker strip with two modes: an accessible, auto-scrolling
+ * container (`scroll`) and a decorative CSS marquee (`marquee`). Both loop
+ * seamlessly and both honour prefers-reduced-motion. Content is passed as
+ * children, so the strip stays content-agnostic.
+ */
+export declare function Ticker(props: TickerProps): import("react").JSX.Element;
+export {};

package/dist/Ticker.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cx } from './cx';
+import { usePrefersReducedMotion } from './usePrefersReducedMotion';
+/** How long a touch keeps the strip frozen before the ambient scroll resumes. */
+const TOUCH_RESUME_MS = 4000;
+/**
+ * A horizontal ticker strip with two modes: an accessible, auto-scrolling
+ * container (`scroll`) and a decorative CSS marquee (`marquee`). Both loop
+ * seamlessly and both honour prefers-reduced-motion. Content is passed as
+ * children, so the strip stays content-agnostic.
+ */
+export function Ticker(props) {
+    return props.mode === 'marquee' ? (_jsx(MarqueeTicker, { ...props })) : (_jsx(ScrollTicker, { ...props }));
+}
+function edgeClassFor(edge) {
+    return edge === 'top' ? 'ticker--top' : 'ticker--bottom';
+}
+/** Decorative marquee: aria-hidden, CSS-driven, content duplicated for the loop. */
+function MarqueeTicker({ edge = 'top', direction = 'left', className, children, }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-direction": direction, className: cx('ticker', 'ticker--marquee', edgeClassFor(edge), className), children: _jsxs("div", { className: "ticker__track", children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { className: "ticker__group", children: children })] }) }));
+}
+/** Accessible scroll container with an ambient JS auto-scroll loop. */
+function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, className, children, }) {
+    const reduced = usePrefersReducedMotion();
+    const scrollerRef = useRef(null);
+    const cloneRef = useRef(null);
+    const [paused, setPaused] = useState(false);
+    // Mirror `paused` into a ref so the animation-frame loop reads the latest
+    // value without the scroll effect re-subscribing on every toggle.
+    const pausedRef = useRef(false);
+    useEffect(() => {
+        pausedRef.current = paused;
+    }, [paused]);
+    // Fallback for browsers without `inert`.
+    //
+    // The clone carries `inert` in the markup, which drops its descendants from
+    // the tab order and the accessibility tree together, before first paint. This
+    // effect used to be the only mechanism, and it left a gap: an effect runs
+    // after the DOM exists, so between render and this call the duplicate held
+    // tabbable controls inside an aria-hidden container. Hiding something from
+    // assistive tech while leaving it reachable by keyboard is worse than not
+    // hiding it — the user lands on a control a screen reader insists is absent.
+    useEffect(() => {
+        if ('inert' in HTMLElement.prototype)
+            return;
+        const focusables = cloneRef.current?.querySelectorAll('a[href], button, input, select, textarea, [tabindex]');
+        focusables?.forEach((el) => {
+            el.tabIndex = -1;
+        });
+    });
+    // Ambient scroll: advance scrollLeft each frame and wrap by one copy width
+    // for a seamless loop. Pauses on hover/touch; user scrolling is left alone.
+    useEffect(() => {
+        if (reduced)
+            return;
+        const el = scrollerRef.current;
+        if (!el)
+            return;
+        const dir = direction === 'left' ? 1 : -1;
+        // Start the rightward strip one copy in, so it has somewhere to scroll back.
+        if (dir < 0)
+            el.scrollLeft = el.scrollWidth / 2;
+        let raf = 0;
+        let last = performance.now();
+        const step = (now) => {
+            const dt = now - last;
+            last = now;
+            const half = el.scrollWidth / 2;
+            if (!pausedRef.current && half > 0) {
+                let next = el.scrollLeft + (dir * speed * dt) / 1000;
+                if (next >= half)
+                    next -= half;
+                else if (next < 0)
+                    next += half;
+                el.scrollLeft = next;
+            }
+            raf = requestAnimationFrame(step);
+        };
+        raf = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(raf);
+    }, [reduced, direction, speed]);
+    const resumeTimer = useRef(null);
+    const freezeForTouch = () => {
+        setPaused(true);
+        if (resumeTimer.current)
+            clearTimeout(resumeTimer.current);
+        resumeTimer.current = setTimeout(() => setPaused(false), TOUCH_RESUME_MS);
+    };
+    const classes = cx('ticker', edgeClassFor(edge), className);
+    // Reduced motion: a plain, single-copy scrollable row. No clone, no loop.
+    if (reduced) {
+        return (_jsx("section", { "aria-label": label, className: classes, children: _jsx("div", { className: "ticker__group", children: children }) }));
+    }
+    return (_jsx("section", { ref: scrollerRef, "aria-label": label, "data-direction": direction, className: classes, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onTouchStart: freezeForTouch, children: _jsxs("div", { className: "ticker__track", "data-paused": paused || undefined, children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { ref: cloneRef, "aria-hidden": "true", inert: true, className: "ticker__group", children: children })] }) }));
+}

package/dist/TiltCard.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+type TiltCardProps = HTMLAttributes<HTMLDivElement> & {
+    /** Maximum rotation, in degrees, at the edges of the card. */
+    maxTilt?: number;
+    /** Show the cursor-tracking glare highlight. Defaults to true. */
+    glare?: boolean;
+    children: ReactNode;
+};
+/**
+ * A surface that tilts in 3D toward the pointer, with an optional glare that
+ * tracks the cursor. The effect is purely decorative — the content layer stays
+ * readable — and it is pointer-driven only, so keyboard users are never left
+ * without access. Under prefers-reduced-motion it renders as a flat card with
+ * no tilt or glare. Content-agnostic: pass any children (a Card, an image…).
+ */
+export declare function TiltCard({ maxTilt, glare, className, children, ...rest }: TiltCardProps): import("react").JSX.Element;
+export {};

package/dist/TiltCard.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cx } from './cx';
+import { usePrefersReducedMotion } from './usePrefersReducedMotion';
+/**
+ * A surface that tilts in 3D toward the pointer, with an optional glare that
+ * tracks the cursor. The effect is purely decorative — the content layer stays
+ * readable — and it is pointer-driven only, so keyboard users are never left
+ * without access. Under prefers-reduced-motion it renders as a flat card with
+ * no tilt or glare. Content-agnostic: pass any children (a Card, an image…).
+ */
+export function TiltCard({ maxTilt = 12, glare = true, className, children, ...rest }) {
+    const reduced = usePrefersReducedMotion();
+    const innerRef = useRef(null);
+    // No tilt, no glare, no pointer handlers — just a flat, static card.
+    if (reduced) {
+        return (_jsx("div", { className: cx('tilt-card', className), ...rest, children: _jsx("div", { className: "tilt-card__inner", children: children }) }));
+    }
+    const handleMove = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        const px = (e.clientX - rect.left) / rect.width; // 0 (left) … 1 (right)
+        const py = (e.clientY - rect.top) / rect.height; // 0 (top) … 1 (bottom)
+        const rotateY = (px - 0.5) * 2 * maxTilt;
+        const rotateX = -(py - 0.5) * 2 * maxTilt;
+        const inner = innerRef.current;
+        if (!inner)
+            return;
+        inner.style.setProperty('--paul-tilt-x', `${rotateX.toFixed(2)}deg`);
+        inner.style.setProperty('--paul-tilt-y', `${rotateY.toFixed(2)}deg`);
+        inner.style.setProperty('--paul-glare-x', `${(px * 100).toFixed(1)}%`);
+        inner.style.setProperty('--paul-glare-y', `${(py * 100).toFixed(1)}%`);
+        inner.dataset.active = 'true';
+    };
+    const handleLeave = () => {
+        const inner = innerRef.current;
+        if (!inner)
+            return;
+        inner.style.setProperty('--paul-tilt-x', '0deg');
+        inner.style.setProperty('--paul-tilt-y', '0deg');
+        delete inner.dataset.active;
+    };
+    return (_jsx("div", { className: cx('tilt-card', className), onPointerMove: handleMove, onPointerLeave: handleLeave, ...rest, children: _jsxs("div", { ref: innerRef, className: "tilt-card__inner", children: [glare && _jsx("div", { "aria-hidden": "true", className: "tilt-card__glare" }), children] }) }));
+}

package/dist/WordCloud.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes } from 'react';
+export type WordCloudDatum = {
+    text: string;
+    weight: number;
+};
+type WordCloudProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    terms: WordCloudDatum[];
+    /** Accessible name for the chart. Required. */
+    label: string;
+    /** Terms considered, heaviest first. Beyond this the tail is dropped. Defaults to 50. */
+    limit?: number;
+    /** Font size of the lightest term, in coordinate units. Defaults to 12. */
+    minFontSize?: number;
+    /** Font size of the heaviest term, in coordinate units. Defaults to 40. */
+    maxFontSize?: number;
+    /** viewBox width in coordinate units. Defaults to 400. */
+    width?: number;
+    /** viewBox height in coordinate units. Defaults to 240. */
+    height?: number;
+};
+/**
+ * A word cloud. Read this before you use it:
+ *
+ * Glyph AREA is not a comparable encoding. A long word reads as bigger than a
+ * short one at the same weight, so "internationalization" at weight 10 looks
+ * heavier than "go" at weight 30, and nobody can recover the numbers from the
+ * picture. `BarChart` shows the same data honestly. This component exists
+ * because a gallery wants one — when the numbers matter, reach for the bars.
+ *
+ * The aria-label carries the ranked term/weight list, which is the honest
+ * version of the same data, so a screen reader gets the better chart.
+ *
+ * Pure SVG from `chartGeometry`, matching the Angular `PaulWordCloud`. The
+ * layout has no randomness in it: the same input renders the same picture every
+ * time, so server and client agree and visual regression settles.
+ */
+export declare function WordCloud({ terms, label, limit, minFontSize, maxFontSize, width, height, className, ...props }: WordCloudProps): import("react").JSX.Element;
+export {};

package/dist/WordCloud.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx';
+import { wordCloudLayout } from './chartGeometry';
+/**
+ * A word cloud. Read this before you use it:
+ *
+ * Glyph AREA is not a comparable encoding. A long word reads as bigger than a
+ * short one at the same weight, so "internationalization" at weight 10 looks
+ * heavier than "go" at weight 30, and nobody can recover the numbers from the
+ * picture. `BarChart` shows the same data honestly. This component exists
+ * because a gallery wants one — when the numbers matter, reach for the bars.
+ *
+ * The aria-label carries the ranked term/weight list, which is the honest
+ * version of the same data, so a screen reader gets the better chart.
+ *
+ * Pure SVG from `chartGeometry`, matching the Angular `PaulWordCloud`. The
+ * layout has no randomness in it: the same input renders the same picture every
+ * time, so server and client agree and visual regression settles.
+ */
+export function WordCloud({ terms, label, limit = 50, minFontSize = 12, maxFontSize = 40, width = 400, height = 240, className, ...props }) {
+    const words = wordCloudLayout(terms, { width, height, padding: 4 }, { limit, minFontSize, maxFontSize });
+    // Ranked from the input rather than from the layout: a term the spiral had no
+    // room for still belongs in the accessible list. Same filter, sort and cap the
+    // geometry applies, so the two stay in step.
+    const ranked = [...terms]
+        .filter((t) => t.weight > 0)
+        .sort((a, b) => b.weight - a.weight)
+        .slice(0, limit);
+    const summary = ranked.map((t) => `${t.text} ${t.weight}`).join(', ');
+    const name = ranked.length > 0 ? `${label}: ${summary}` : label;
+    // Weight is already carried by font size. Ramping colour by weight too would
+    // encode the same number twice; the categorical slots just keep the words
+    // apart, cycling by rank.
+    const colorFor = (i) => `var(--paul-chart-${(i % 6) + 1})`;
+    return (_jsx("div", { className: cx('paul-chart', 'paul-chart--word-cloud', className), ...props, children: _jsx("div", { role: "img", "aria-label": name, className: "paul-chart__figure", children: words.length > 0 ? (_jsx("svg", { className: "paul-chart__svg", viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", focusable: "false", children: words.map((word) => (_jsx("text", { className: "paul-chart__word", x: word.x, y: word.y, fontSize: word.fontSize, fill: colorFor(word.index), textAnchor: "middle", dominantBaseline: "middle", children: word.text }, word.text))) })) : (_jsx("span", { className: "paul-chart__empty", "aria-hidden": "true", children: "No data" })) }) }));
+}