@paul-portfolio/react 0.4.4 → 0.5.1

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode } from "react";
 type TickerProps = {
     /** Accessible name for the strip. Scroll mode renders a labelled region. */
     label: string;
@@ -7,11 +7,11 @@ type TickerProps = {
      * auto-scroll — every item stays reachable. `marquee` is a decorative,
      * aria-hidden CSS loop for pure flavour.
      */
-    mode?: 'scroll' | 'marquee';
+    mode?: "scroll" | "marquee";
     /** Which edge the strip sits on; picks the border side. */
-    edge?: 'top' | 'bottom';
+    edge?: "top" | "bottom";
     /** Which way the ambient motion travels. */
-    direction?: 'left' | 'right';
+    direction?: "left" | "right";
     /** Ambient auto-scroll speed for scroll mode, in px/sec. */
     speed?: number;
     className?: string;

package/dist/Ticker.js

@@ -1,26 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { cx } from './cx';
-/**
- * Tracks prefers-reduced-motion. Defaults to false so the server and the first
- * client render agree (SSR-stable), then updates once mounted.
- */
-function usePrefersReducedMotion() {
-    const [reduced, setReduced] = useState(false);
-    useEffect(() => {
-        if (typeof window === 'undefined' ||
-            typeof window.matchMedia !== 'function') {
-            return;
-        }
-        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
-        // Microtask defer keeps the effect from setting state synchronously.
-        queueMicrotask(() => setReduced(query.matches));
-        const onChange = (e) => setReduced(e.matches);
-        query.addEventListener('change', onChange);
-        return () => query.removeEventListener('change', onChange);
-    }, []);
-    return reduced;
-}
+import { useEffect, useLayoutEffect, 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;
 /**
@@ -30,17 +11,17 @@ const TOUCH_RESUME_MS = 4000;
  * children, so the strip stays content-agnostic.
  */
 export function Ticker(props) {
-    return props.mode === 'marquee' ? (_jsx(MarqueeTicker, { ...props })) : (_jsx(ScrollTicker, { ...props }));
+    return props.mode === "marquee" ? (_jsx(MarqueeTicker, { ...props })) : (_jsx(ScrollTicker, { ...props }));
 }
 function edgeClassFor(edge) {
-    return edge === 'top' ? 'ticker--top' : 'ticker--bottom';
+    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 })] }) }));
+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, }) {
+function ScrollTicker({ label, edge = "top", direction = "left", speed = 40, className, children, }) {
     const reduced = usePrefersReducedMotion();
     const scrollerRef = useRef(null);
     const cloneRef = useRef(null);
@@ -51,11 +32,25 @@ function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, cla
     useEffect(() => {
         pausedRef.current = paused;
     }, [paused]);
-    // The clone fills the trailing half of the loop and stays clickable for
-    // pointer users, so drop its focusables out of the tab order by hand. Paired
-    // with aria-hidden, screen readers and axe never see the duplicate.
-    useEffect(() => {
-        const focusables = cloneRef.current?.querySelectorAll('a[href], button, input, select, textarea, [tabindex]');
+    // Take the clone out of the tab order, but leave it clickable.
+    //
+    // The clone used to carry `inert`, which was the right instinct aimed one
+    // notch too broadly: `inert` removes a subtree from the accessibility tree
+    // AND from the pointer. Since the loop wraps at half the scroll width,
+    // roughly half of what is on screen at any moment is the clone, so half the
+    // strip silently ignored clicks.
+    //
+    // What is actually wanted is narrower: hidden from assistive tech
+    // (`aria-hidden` on the element), not tabbable (`tabIndex = -1` here), and
+    // still interactive with a pointer. Both copies render the same children, so
+    // clicking either runs the same handler and the reader cannot tell which one
+    // they hit — which is the point.
+    //
+    // A layout effect rather than a passive one: it runs before the browser
+    // paints, so there is no frame in which the duplicate holds tabbable controls
+    // inside an aria-hidden container, which axe rates serious.
+    useLayoutEffect(() => {
+        const focusables = cloneRef.current?.querySelectorAll("a[href], button, input, select, textarea, [tabindex]");
         focusables?.forEach((el) => {
             el.tabIndex = -1;
         });
@@ -68,7 +63,7 @@ function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, cla
         const el = scrollerRef.current;
         if (!el)
             return;
-        const dir = direction === 'left' ? 1 : -1;
+        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;
@@ -98,7 +93,7 @@ function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, cla
             clearTimeout(resumeTimer.current);
         resumeTimer.current = setTimeout(() => setPaused(false), TOUCH_RESUME_MS);
     };
-    const classes = cx('ticker', edgeClassFor(edge), className);
+    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 }) }));

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" })) }) }));
+}