@inkra/react 0.1.0 → 0.2.0

package/dist/pan-zoom/index.d.ts

@@ -0,0 +1,71 @@
+import type { FitToViewMode, ZoomToElementOptions, ZoomToElementTarget } from 'react-zoom-pan-pinch';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export interface PanZoomTransform {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface PanZoomChangeDetails {
+    reason: 'gesture' | 'programmatic';
+}
+export interface PanZoomPoint {
+    x: number;
+    y: number;
+}
+export interface PanZoomAnimationOptions {
+    duration?: number;
+}
+export interface PanZoomFitOptions extends PanZoomAnimationOptions {
+    mode?: FitToViewMode;
+    minScale?: number;
+    maxScale?: number;
+}
+export interface PanZoomZoomToOptions extends PanZoomAnimationOptions {
+    anchor?: PanZoomPoint;
+}
+export type PanZoomZoomToElementOptions = ZoomToElementOptions;
+export interface PanZoomRef {
+    reset: (options?: PanZoomAnimationOptions) => Promise<void>;
+    fit: (options?: PanZoomFitOptions) => Promise<void>;
+    setTransform: (transform: PanZoomTransform, options?: PanZoomAnimationOptions) => Promise<void>;
+    zoomIn: (step?: number, options?: PanZoomAnimationOptions) => Promise<void>;
+    zoomOut: (step?: number, options?: PanZoomAnimationOptions) => Promise<void>;
+    zoomTo: (scale: number, options?: PanZoomZoomToOptions) => Promise<void>;
+    zoomToElement: (target: ZoomToElementTarget | ZoomToElementTarget[], options?: PanZoomZoomToElementOptions) => Promise<void>;
+    panBy: (deltaX: number, deltaY: number, options?: PanZoomAnimationOptions) => Promise<void>;
+    clientToContent: (clientX: number, clientY: number) => PanZoomPoint;
+    contentToClient: (x: number, y: number) => PanZoomPoint;
+    getTransform: () => PanZoomTransform;
+    getViewportElement: () => HTMLDivElement | null;
+    getContentElement: () => HTMLDivElement | null;
+}
+export type PanZoomWheelMode = 'modifier' | 'always' | 'disabled';
+export interface PanZoomProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
+    children: ReactNode;
+    value?: PanZoomTransform;
+    defaultValue?: PanZoomTransform;
+    onTransformChange?: (transform: PanZoomTransform, details: PanZoomChangeDetails) => void;
+    minScale?: number;
+    maxScale?: number;
+    wheel?: PanZoomWheelMode;
+    pinch?: boolean;
+    pan?: boolean;
+    keyboard?: boolean;
+    keyboardPanStep?: number;
+    keyboardZoomStep?: number;
+    doubleClickZoom?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    limitToBounds?: boolean;
+    centerZoomedOut?: boolean;
+    centerOnInit?: boolean;
+    fitOnInit?: boolean | FitToViewMode;
+    viewportClassName?: string;
+    contentClassName?: string;
+    viewportStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
+    viewportProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
+    contentProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
+    instructions?: string;
+}
+export declare const PanZoom: import("react").ForwardRefExoticComponent<PanZoomProps & import("react").RefAttributes<PanZoomRef>>;

package/dist/pan-zoom/index.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+const defaultTransform = { x: 0, y: 0, scale: 1 };
+const interactionExclusions = [
+    'button',
+    'a',
+    'input',
+    'select',
+    'textarea',
+];
+function clampScale(value, minScale, maxScale) {
+    return Math.min(maxScale, Math.max(minScale, value));
+}
+function normalizedTransform(value, minScale, maxScale) {
+    return {
+        x: Number.isFinite(value.x) ? value.x : 0,
+        y: Number.isFinite(value.y) ? value.y : 0,
+        scale: clampScale(Number.isFinite(value.scale) ? value.scale : 1, minScale, maxScale),
+    };
+}
+function transformsEqual(left, right) {
+    return left.x === right.x && left.y === right.y && left.scale === right.scale;
+}
+function prefersReducedMotion(element) {
+    return element?.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
+}
+function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTransformChange, minScale = 0.25, maxScale = 8, wheel = 'modifier', pinch = true, pan = true, keyboard = true, keyboardPanStep = 48, keyboardZoomStep = 0.25, doubleClickZoom = false, disabled = false, readOnly = false, limitToBounds = true, centerZoomedOut = true, centerOnInit = false, fitOnInit = false, className, viewportClassName, contentClassName, style, viewportStyle, contentStyle, viewportProps, contentProps, instructions, 'aria-label': ariaLabel = 'Pan and zoom content', ...props }, forwardedRef) {
+    const resolvedMinScale = Math.max(Number.isFinite(minScale) ? minScale : 0.25, 0.0001);
+    const resolvedMaxScale = Math.max(Number.isFinite(maxScale) ? maxScale : 8, resolvedMinScale);
+    const controlled = value !== undefined;
+    const initialTransform = normalizedTransform(value ?? defaultValue, resolvedMinScale, resolvedMaxScale);
+    const [uncontrolledTransform, setUncontrolledTransform] = useState(initialTransform);
+    const visibleTransform = normalizedTransform(value ?? uncontrolledTransform, resolvedMinScale, resolvedMaxScale);
+    const engineRef = useRef(null);
+    const instructionsId = useId();
+    const committedRef = useRef(initialTransform);
+    const programmaticRef = useRef(false);
+    const pointerBlocksPanRef = useRef(false);
+    const wheelTargetBlocksZoomRef = useRef(false);
+    const animationDuration = useCallback((duration, fallback) => {
+        if (duration !== undefined)
+            return duration;
+        return prefersReducedMotion(engineRef.current?.instance.wrapperComponent ?? null) ? 0 : fallback;
+    }, []);
+    const syncExternalTransform = useCallback((next, duration = 0) => {
+        const normalized = normalizedTransform(next, resolvedMinScale, resolvedMaxScale);
+        committedRef.current = normalized;
+        programmaticRef.current = true;
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        void engine.setTransform(normalized.x, normalized.y, normalized.scale, duration)
+            .finally(() => {
+            programmaticRef.current = false;
+        });
+    }, [resolvedMaxScale, resolvedMinScale]);
+    useEffect(() => {
+        if (!controlled || transformsEqual(visibleTransform, committedRef.current))
+            return;
+        syncExternalTransform(visibleTransform);
+    }, [controlled, syncExternalTransform, visibleTransform.x, visibleTransform.y, visibleTransform.scale]);
+    useEffect(() => {
+        const clamped = normalizedTransform(committedRef.current, resolvedMinScale, resolvedMaxScale);
+        if (!transformsEqual(clamped, committedRef.current))
+            syncExternalTransform(clamped);
+    }, [resolvedMaxScale, resolvedMinScale, syncExternalTransform]);
+    const runProgrammatic = useCallback(async (action) => {
+        const engine = engineRef.current;
+        if (!engine || disabled)
+            return;
+        programmaticRef.current = true;
+        try {
+            await action(engine);
+        }
+        finally {
+            programmaticRef.current = false;
+        }
+    }, [disabled]);
+    const reconcileControlled = useCallback(() => {
+        if (controlled && !transformsEqual(visibleTransform, committedRef.current)) {
+            syncExternalTransform(visibleTransform, animationDuration(undefined, 100));
+        }
+    }, [animationDuration, controlled, syncExternalTransform, visibleTransform.x, visibleTransform.y, visibleTransform.scale]);
+    useImperativeHandle(forwardedRef, () => ({
+        reset: options => runProgrammatic(engine => engine.resetTransform(animationDuration(options?.duration, 200))),
+        fit: options => runProgrammatic(engine => engine.fitToView({
+            mode: options?.mode,
+            minScale: options?.minScale,
+            maxScale: options?.maxScale,
+            animationTime: animationDuration(options?.duration, 200),
+        })),
+        setTransform: (transform, options) => runProgrammatic(engine => {
+            const next = normalizedTransform(transform, resolvedMinScale, resolvedMaxScale);
+            return engine.setTransform(next.x, next.y, next.scale, animationDuration(options?.duration, 200));
+        }),
+        zoomIn: (step = keyboardZoomStep, options) => runProgrammatic(engine => engine.zoomIn(step, animationDuration(options?.duration, 200))),
+        zoomOut: (step = keyboardZoomStep, options) => runProgrammatic(engine => engine.zoomOut(step, animationDuration(options?.duration, 200))),
+        zoomTo: (scale, options) => runProgrammatic((engine) => {
+            const nextScale = clampScale(scale, resolvedMinScale, resolvedMaxScale);
+            if (options?.anchor) {
+                return engine.zoomToPoint(nextScale, options.anchor.x, options.anchor.y, animationDuration(options.duration, 200));
+            }
+            return engine.centerView(nextScale, animationDuration(options?.duration, 200));
+        }),
+        zoomToElement: (target, options) => runProgrammatic(engine => engine.zoomToElement(target, {
+            ...options,
+            animationTime: animationDuration(options?.animationTime, 300),
+        })),
+        panBy: (deltaX, deltaY, options) => runProgrammatic(engine => engine.panBy(deltaX, deltaY, animationDuration(options?.duration, 160))),
+        clientToContent: (clientX, clientY) => engineRef.current?.clientToContent(clientX, clientY) ?? { x: clientX, y: clientY },
+        contentToClient: (x, y) => engineRef.current?.contentToClient(x, y) ?? { x, y },
+        getTransform: () => committedRef.current,
+        getViewportElement: () => engineRef.current?.instance.wrapperComponent ?? null,
+        getContentElement: () => engineRef.current?.instance.contentComponent ?? null,
+    }), [animationDuration, keyboardZoomStep, resolvedMaxScale, resolvedMinScale, runProgrammatic]);
+    const userInteractionDisabled = disabled || readOnly;
+    const wheelActivation = wheel === 'modifier'
+        ? (keys) => !wheelTargetBlocksZoomRef.current && (keys.includes('Control') || keys.includes('Meta'))
+        : () => !wheelTargetBlocksZoomRef.current;
+    const defaultInstructions = wheel === 'modifier'
+        ? 'Use Control or Command with the mouse wheel to zoom. Use arrow keys to pan, plus or minus to zoom, and 0 to reset.'
+        : 'Use arrow keys to pan, plus or minus to zoom, and 0 to reset.';
+    const wheelHint = instructions ?? defaultInstructions;
+    const mergedViewportLabel = viewportProps?.['aria-label'] ?? ariaLabel;
+    const describedBy = [viewportProps?.['aria-describedby'], keyboard && !disabled ? instructionsId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return _jsxs("div", { ...props, className: ['inkra-pan-zoom', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-gestures": !userInteractionDisabled && (pan || pinch) || undefined, "data-read-only": readOnly || undefined, "data-wheel": wheel, style: style, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-pan-zoom__surface", radius: 8, variant: "paper" }), _jsx("div", { className: "inkra-pan-zoom__clip", children: _jsx(TransformWrapper, { ref: engineRef, initialScale: initialTransform.scale, initialPositionX: initialTransform.x, initialPositionY: initialTransform.y, minScale: resolvedMinScale, maxScale: resolvedMaxScale, limitToBounds: limitToBounds, centerZoomedOut: centerZoomedOut, centerOnInit: centerOnInit, fitOnInit: fitOnInit, smooth: true, panning: {
+                        disabled: userInteractionDisabled || !pan,
+                        excluded: interactionExclusions,
+                        activationKeys: () => !pointerBlocksPanRef.current,
+                    }, pinch: { disabled: userInteractionDisabled || !pinch, excluded: interactionExclusions }, wheel: {
+                        disabled: userInteractionDisabled || wheel === 'disabled',
+                        activationKeys: wheelActivation,
+                        excluded: interactionExclusions,
+                    }, trackPadPanning: { disabled: true }, keyboard: {
+                        disabled: userInteractionDisabled || !keyboard,
+                        panStep: keyboardPanStep,
+                        zoomStep: keyboardZoomStep,
+                        animationTime: 100,
+                        excluded: interactionExclusions,
+                    }, doubleClick: { disabled: userInteractionDisabled || !doubleClickZoom, mode: 'zoomIn', excluded: interactionExclusions }, zoomAnimation: { disabled: false, animationTime: 200 }, velocityAnimation: { disabled: prefersReducedMotion(engineRef.current?.instance.wrapperComponent ?? null) }, onPanningStop: reconcileControlled, onPinchStop: reconcileControlled, onWheelStop: reconcileControlled, onZoomStop: reconcileControlled, onTransform: (_, state) => {
+                        const next = normalizedTransform({ x: state.positionX, y: state.positionY, scale: state.scale }, resolvedMinScale, resolvedMaxScale);
+                        committedRef.current = next;
+                        if (!controlled)
+                            setUncontrolledTransform(next);
+                        onTransformChange?.(next, { reason: programmaticRef.current ? 'programmatic' : 'gesture' });
+                    }, children: _jsx(TransformComponent, { wrapperClass: ['inkra-pan-zoom__viewport', viewportClassName].filter(Boolean).join(' '), contentClass: ['inkra-pan-zoom__content', contentClassName].filter(Boolean).join(' '), wrapperStyle: viewportStyle, contentStyle: contentStyle, wrapperProps: {
+                            ...viewportProps,
+                            role: viewportProps?.role ?? 'region',
+                            'aria-label': mergedViewportLabel,
+                            'aria-disabled': disabled || undefined,
+                            'aria-readonly': readOnly || undefined,
+                            'aria-describedby': describedBy,
+                            onPointerDownCapture: event => {
+                                pointerBlocksPanRef.current = Boolean(event.target.closest?.('[data-pan-zoom-no-drag]'));
+                                viewportProps?.onPointerDownCapture?.(event);
+                            },
+                            onPointerUpCapture: event => {
+                                pointerBlocksPanRef.current = false;
+                                viewportProps?.onPointerUpCapture?.(event);
+                            },
+                            onPointerCancelCapture: event => {
+                                pointerBlocksPanRef.current = false;
+                                viewportProps?.onPointerCancelCapture?.(event);
+                            },
+                            onWheelCapture: event => {
+                                wheelTargetBlocksZoomRef.current = Boolean(event.target.closest?.('[contenteditable], [data-pan-zoom-no-drag]'));
+                                viewportProps?.onWheelCapture?.(event);
+                            },
+                        }, contentProps: contentProps, children: children }) }) }), _jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-pan-zoom__focus-ring", radius: 8, seed: "pan-zoom-focus", variant: "outline" }), keyboard && !disabled && _jsx("span", { className: "inkra-pan-zoom__instructions visually-hidden", id: instructionsId, children: wheelHint })] });
+}
+export const PanZoom = forwardRef(PanZoomRoot);

package/dist/radar/index.d.ts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type RadarKey = string | number;
+export interface RadarAxis {
+    id: RadarKey;
+    label: ReactNode;
+    min?: number;
+    max?: number;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+}
+export interface RadarPoint {
+    axisId: RadarKey;
+    value?: number | null;
+    label?: ReactNode;
+}
+export interface RadarSeries {
+    id: RadarKey;
+    label: ReactNode;
+    data: readonly RadarPoint[];
+    color?: string;
+    pattern?: 'solid' | 'dash' | 'dot';
+    hidden?: boolean;
+}
+export interface RadarValueContext {
+    axis: RadarAxis;
+    series: RadarSeries;
+    point: RadarPoint;
+    value: number | null;
+    missing: boolean;
+}
+export interface RadarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    axes: readonly RadarAxis[];
+    series: readonly RadarSeries[];
+    label: ReactNode;
+    description?: ReactNode;
+    size?: number | string;
+    maxRadius?: number;
+    levels?: number;
+    showAxes?: boolean;
+    showLabels?: boolean;
+    showLegend?: boolean;
+    showValues?: boolean;
+    showTable?: boolean;
+    legendLabel?: ReactNode;
+    missingLabel?: string;
+    emptyMessage?: ReactNode;
+    selectedSeries?: RadarKey | null;
+    defaultSelectedSeries?: RadarKey | null;
+    onSelectedSeriesChange?: (id: RadarKey | null, series: RadarSeries | null) => void;
+    renderAxisLabel?: (axis: RadarAxis) => ReactNode;
+    renderValueLabel?: (context: RadarValueContext) => ReactNode;
+    getValueLabel?: (value: number, axis: RadarAxis) => string;
+}
+export declare const Radar: import("react").ForwardRefExoticComponent<RadarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/radar/index.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { scaleLinear } from 'd3-scale';
+import { curveLinearClosed, lineRadial } from 'd3-shape';
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Button } from '../Button.js';
+import { Table } from '../content/index.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { pencilStroke } from '../internal/stroke.js';
+import { drawPencilWash } from '../internal/wash.js';
+import { effectiveDpr } from '../internal/cache.js';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
+function RadarInk({ axisAngles, axes, levels, radius, center, seriesPoints, }) {
+    const canvasRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return undefined;
+        let disposed = false;
+        let lastPaint = '';
+        const paint = () => {
+            const width = canvas.clientWidth;
+            const height = canvas.clientHeight;
+            if (!width || !height) {
+                lastPaint = '';
+                delete canvas.dataset.ready;
+                setReady(false);
+                return;
+            }
+            try {
+                const dpr = effectiveDpr(2);
+                const context = canvas.getContext('2d');
+                if (!context || context.isContextLost?.()) {
+                    setReady(current => current ? false : current);
+                    return;
+                }
+                const style = getComputedStyle(canvas);
+                const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+                const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+                const washStrength = readRenderToken(style, '--inkra-wash-strength', pencilRenderDefaults.washStrength, 0, 1)
+                    * (0.18 / pencilRenderDefaults.washStrength);
+                const washSpacing = readRenderToken(style, '--inkra-wash-spacing', pencilRenderDefaults.washSpacing, 1, 6);
+                const washRoughness = readRenderToken(style, '--inkra-wash-roughness', pencilRenderDefaults.washRoughness, 0, 6);
+                const washAngle = readRenderToken(style, '--inkra-wash-angle', pencilRenderDefaults.washAngle, -85, 85);
+                const washInset = readRenderToken(style, '--inkra-wash-inset', 2, 0, 24);
+                const resolveColor = (token, fallback) => style.getPropertyValue(token).trim() || fallback;
+                const resolvePaint = (value, fallback) => {
+                    const probe = document.createElement('span');
+                    probe.style.color = value;
+                    probe.style.position = 'absolute';
+                    probe.style.inlineSize = '0';
+                    probe.style.blockSize = '0';
+                    canvas.parentElement?.appendChild(probe);
+                    const resolved = getComputedStyle(probe).color;
+                    probe.remove();
+                    return resolved && resolved !== 'rgba(0, 0, 0, 0)' ? resolved : fallback;
+                };
+                const borderColor = resolveColor('--inkra-border', '#99aa9b');
+                const paperColor = resolveColor('--inkra-paper', '#f4f0e3');
+                const resolvedSeriesColors = seriesPoints.map(entry => resolvePaint(entry.color, borderColor));
+                const key = JSON.stringify([width, height, dpr, borderColor, paperColor, strokeWidth, roughness, washStrength, washSpacing, washRoughness, washAngle, washInset, levels, radius, axisAngles, resolvedSeriesColors, seriesPoints.map(entry => [entry.item.id, entry.points.map(point => point.value)])]);
+                if (key === lastPaint && canvas.dataset.ready === 'true')
+                    return;
+                canvas.width = Math.ceil(width * dpr);
+                canvas.height = Math.ceil(height * dpr);
+                context.setTransform(dpr, 0, 0, dpr, 0, 0);
+                context.clearRect(0, 0, width, height);
+                const scaleX = width / 1000;
+                const scaleY = height / 1000;
+                const line = (points, color, weight, seed, closed = false) => {
+                    if (points.length < 2)
+                        return;
+                    const path = closed ? [...points, points[0]] : points;
+                    pencilStroke(context, path, color, weight, seedToNumber(seed), roughness, 2, closed, { variation: 0.82, breaks: 0.2, grain: 0.72, gain: 2.1, step: 0.7 });
+                };
+                const coordinate = (angle, r) => [(center + Math.sin(angle) * r) * scaleX, (center - Math.cos(angle) * r) * scaleY];
+                const gridColor = borderColor;
+                for (let level = 1; level <= levels; level += 1) {
+                    line(axisAngles.map(angle => coordinate(angle, radius * level / levels)), gridColor, strokeWidth * 0.55, `radar-grid-${level}`, true);
+                }
+                axes.forEach((_, index) => line([coordinate(0, 0), coordinate(axisAngles[index], radius)], gridColor, strokeWidth * 0.5, `radar-axis-${index}`));
+                seriesPoints.forEach(({ item, points, index }, seriesIndex) => {
+                    const resolvedColor = resolvedSeriesColors[seriesIndex];
+                    const valid = points.filter(point => point.value != null).map(point => coordinate(point.angle, point.radius));
+                    if (valid.length < 2)
+                        return;
+                    const minX = Math.min(...valid.map(point => point[0]));
+                    const maxX = Math.max(...valid.map(point => point[0]));
+                    const minY = Math.min(...valid.map(point => point[1]));
+                    const maxY = Math.max(...valid.map(point => point[1]));
+                    context.save();
+                    context.beginPath();
+                    valid.forEach(([x, y], pointIndex) => pointIndex ? context.lineTo(x, y) : context.moveTo(x, y));
+                    context.closePath();
+                    context.clip();
+                    drawPencilWash(context, { x: minX, y: minY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) }, resolvedColor, seedToNumber(`radar-wash-${String(item.id)}`), { strength: washStrength, spacing: washSpacing, roughness: washRoughness, inset: washInset, radius: 8, edgeReach: 4, angle: washAngle, dpr });
+                    context.restore();
+                    line(valid, resolvedColor, strokeWidth * (0.68 + (index === 0 ? 0.12 : 0)), `radar-series-${String(item.id)}`, true);
+                    points.forEach((point, pointIndex) => {
+                        if (point.value == null)
+                            return;
+                        const [x, y] = coordinate(point.angle, point.radius);
+                        const marker = index % 3 === 1
+                            ? [[x - 5, y - 5], [x + 5, y - 5], [x + 5, y + 5], [x - 5, y + 5], [x - 5, y - 5]]
+                            : index % 3 === 2
+                                ? [[x, y - 6], [x + 6, y + 5], [x - 6, y + 5], [x, y - 6]]
+                                : Array.from({ length: 25 }, (_, markerIndex) => { const angle = markerIndex / 24 * Math.PI * 2; return [x + Math.cos(angle) * 5, y + Math.sin(angle) * 5]; });
+                        pencilStroke(context, marker, resolvedColor, strokeWidth * 0.9, seedToNumber(`radar-marker-${String(item.id)}-${pointIndex}`), roughness, 2, true, { variation: 0.78, breaks: 0.24, grain: 0.7, gain: 2.1, step: 0.55 });
+                        void pointIndex;
+                    });
+                });
+                lastPaint = key;
+                canvas.dataset.ready = 'true';
+                if (!disposed)
+                    setReady(current => current ? current : true);
+            }
+            catch {
+                lastPaint = '';
+                delete canvas.dataset.ready;
+                setReady(false);
+                canvas.width = 1;
+                canvas.height = 1;
+                canvas.getContext('2d')?.clearRect(0, 0, 1, 1);
+            }
+        };
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(paint);
+        const inheritedStyle = new MutationObserver(paint);
+        for (let node = canvas; node; node = node.parentElement)
+            inheritedStyle.observe(node, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        const scheme = window.matchMedia('(prefers-color-scheme: dark)');
+        scheme.addEventListener('change', paint);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; delete canvas.dataset.ready; paint(); });
+        observer?.observe(canvas);
+        paint();
+        return () => { disposed = true; observer?.disconnect(); inheritedStyle.disconnect(); scheme.removeEventListener('change', paint); stopRecovery(); };
+    }, [axes, axisAngles, center, levels, radius, seriesPoints]);
+    return _jsx("canvas", { "aria-hidden": "true", className: "inkra-radar__ink", "data-ready": ready || undefined, ref: canvasRef });
+}
+const palette = ['#4b96aa', '#994f3f', '#629568', '#8d6b9c', '#c58b47'];
+function keyPart(value) { return JSON.stringify([typeof value, value]); }
+function sameKey(a, b) { return a != null && b != null && a === b; }
+function axisText(axis) { return axis.ariaLabel ?? (typeof axis.label === 'string' || typeof axis.label === 'number' ? String(axis.label) : String(axis.id)); }
+function cssSize(value, fallback) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? `${Math.max(220, value)}px` : fallback;
+    return value || fallback;
+}
+function finite(value) { return typeof value === 'number' && Number.isFinite(value); }
+function formatNumber(value, axis, getValueLabel) {
+    return axis.formatValue?.(value) ?? getValueLabel?.(value, axis) ?? String(value);
+}
+function textNode(value, seed) {
+    return typeof value === 'string' || typeof value === 'number' ? _jsx(PencilText, { seed: seed, children: String(value) }) : value;
+}
+function domainForAxis(axis, values) {
+    let min = finite(axis.min) ? axis.min : values.length ? Math.min(...values) : 0;
+    let max = finite(axis.max) ? axis.max : values.length ? Math.max(...values) : 1;
+    if (min > max)
+        [min, max] = [max, min];
+    if (min === max) {
+        const pad = Math.abs(min) * 0.5 || 1;
+        return [min - pad, max + pad];
+    }
+    return [min, max];
+}
+function paintStyle(color) {
+    return { '--inkra-accent': color, '--inkra-accent-soft': color, '--inkra-accent-strong': color };
+}
+export const Radar = forwardRef(function Radar({ axes, series, label, description, size = 'min(100%, 34rem)', maxRadius, levels = 4, showAxes = true, showLabels = true, showLegend = true, showValues = true, showTable = true, legendLabel = 'Series', missingLabel = 'Missing', emptyMessage = 'No radar data', selectedSeries, defaultSelectedSeries = null, onSelectedSeriesChange, renderAxisLabel, renderValueLabel, getValueLabel, className, style, ...props }, forwardedRef) {
+    const id = useId();
+    const labelId = `inkra-radar-${id}-label`;
+    const descriptionId = description == null ? undefined : `inkra-radar-${id}-description`;
+    const [internalSelected, setInternalSelected] = useState(defaultSelectedSeries);
+    const selected = selectedSeries === undefined ? internalSelected : selectedSeries ?? null;
+    const visibleSeries = series.filter(item => !item.hidden);
+    const domains = useMemo(() => new Map(axes.map(axis => {
+        const values = visibleSeries.flatMap(item => item.data.filter(point => point.axisId === axis.id && finite(point.value)).map(point => point.value));
+        return [keyPart(axis.id), domainForAxis(axis, values)];
+    })), [axes, visibleSeries]);
+    const side = 1000;
+    const radius = Math.max(120, Math.min(maxRadius ?? 390, 470));
+    const axisCount = axes.length;
+    const angles = axes.map((_, index) => (index * Math.PI * 2) / Math.max(1, axisCount));
+    const center = side / 2;
+    const valuePoints = (item) => axes.map((axis, index) => {
+        const point = item.data.find(candidate => candidate.axisId === axis.id) ?? { axisId: axis.id, value: null };
+        const domain = domains.get(keyPart(axis.id)) ?? [0, 1];
+        const value = finite(point.value) ? point.value : null;
+        const scale = scaleLinear().domain(domain).range([0, radius]).clamp(true);
+        return { angle: angles[index], radius: value == null ? 0 : scale(value), value, point, axis };
+    });
+    const line = useMemo(() => lineRadial().angle(point => point.angle).radius(point => point.radius).curve(curveLinearClosed), []);
+    const rootStyle = { ...style, '--inkra-radar-size': cssSize(size, 'min(100%, 34rem)'), '--inkra-radar-levels': Math.max(2, Math.min(8, Math.round(levels))) };
+    const selectSeries = (item) => {
+        const next = sameKey(selected, item.id) ? null : item.id;
+        if (selectedSeries === undefined)
+            setInternalSelected(next);
+        onSelectedSeriesChange?.(next, next == null ? null : item);
+    };
+    const renderValue = (context) => {
+        if (renderValueLabel)
+            return renderValueLabel(context);
+        return context.missing ? missingLabel : showValues ? formatNumber(context.value, context.axis, getValueLabel) : '•';
+    };
+    return _jsxs("div", { ...props, ref: forwardedRef, className: ['inkra-radar', className].filter(Boolean).join(' '), style: rootStyle, children: [_jsxs("div", { className: "inkra-radar__heading", children: [_jsx("div", { className: "inkra-radar__label", id: labelId, children: typeof label === 'string' ? _jsx(PencilText, { seed: `${id}-label`, children: label }) : label }), description == null ? null : _jsx("div", { className: "inkra-radar__description", id: descriptionId, children: textNode(description, `${id}-description`) })] }), axes.length < 3 || visibleSeries.length === 0 ? _jsx("div", { className: "inkra-radar__empty", children: textNode(emptyMessage, `${id}-empty`) }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: "inkra-radar__viewport", children: [_jsx(RadarInk, { axisAngles: angles, axes: showAxes ? axes : [], center: center, levels: Math.max(2, Math.min(8, Math.round(levels))), radius: radius, seriesPoints: visibleSeries.map((item, index) => ({ item, points: valuePoints(item), color: item.color ?? palette[index % palette.length], index })) }), _jsxs("svg", { "aria-hidden": "true", className: "inkra-radar__svg-fallback", viewBox: `0 0 ${side} ${side}`, focusable: "false", role: "presentation", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth: "1" }), visibleSeries.map(item => _jsx("path", { d: line(valuePoints(item)) ?? undefined, transform: `translate(${center} ${center})` }, keyPart(item.id)))] }), showLabels ? _jsx("div", { "aria-hidden": "true", className: "inkra-radar__labels", children: axes.map((axis, index) => {
+                                    const x = 50 + Math.sin(angles[index]) * 48;
+                                    const y = 50 - Math.cos(angles[index]) * 48;
+                                    return _jsx("span", { className: "inkra-radar__axis-label", style: { left: `${x}%`, top: `${y}%` }, children: renderAxisLabel ? renderAxisLabel(axis) : textNode(axis.label, `${id}-axis-${String(axis.id)}`) }, keyPart(axis.id));
+                                }) }) : null] }), _jsx("div", { "aria-describedby": descriptionId, "aria-labelledby": labelId, className: "inkra-radar__summary", role: "group", children: visibleSeries.map((item, index) => {
+                            const points = valuePoints(item);
+                            const color = item.color ?? palette[index % palette.length];
+                            return _jsxs("div", { className: "inkra-radar__series-summary", "data-series-id": item.id, children: [_jsxs(Button, { "aria-pressed": sameKey(selected, item.id), className: "inkra-radar__legend-button", onClick: () => selectSeries(item), size: "sm", variant: "ghost", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radar__legend-mark", radius: 4, seed: `radar-${keyPart(item.id)}`, style: paintStyle(color), variant: sameKey(selected, item.id) ? 'selection' : 'quiet' }), textNode(item.label, `${id}-summary-${String(item.id)}`)] }), _jsx("div", { className: "inkra-radar__values", children: points.map((point, pointIndex) => {
+                                            const context = { axis: point.axis, series: item, point: point.point, value: point.value, missing: point.value == null };
+                                            return _jsxs("span", { className: "inkra-radar__value", "data-missing": context.missing || undefined, children: [_jsx("strong", { children: textNode(point.axis.label, `${id}-value-axis-${String(point.axis.id)}`) }), " ", textNode(renderValue(context), `${id}-value-${String(item.id)}-${String(point.axis.id)}`)] }, pointIndex);
+                                        }) })] }, keyPart(item.id));
+                        }) }), showLegend ? _jsxs("div", { "aria-label": typeof legendLabel === 'string' ? legendLabel : undefined, className: "inkra-radar__legend", role: "group", children: [_jsx("span", { className: "inkra-radar__legend-title", children: textNode(legendLabel, `${id}-legend-title`) }), visibleSeries.map((item, index) => _jsxs(Button, { "aria-pressed": sameKey(selected, item.id), className: "inkra-radar__legend-button", onClick: () => selectSeries(item), size: "sm", variant: "ghost", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radar__legend-mark", radius: 4, seed: `radar-legend-${keyPart(item.id)}`, style: paintStyle(item.color ?? palette[index % palette.length]), variant: sameKey(selected, item.id) ? 'selection' : 'quiet' }), textNode(item.label, `${id}-legend-${String(item.id)}`)] }, keyPart(item.id)))] }) : null, showTable ? _jsx(Table.Container, { "aria-label": typeof label === 'string' ? label : undefined, "aria-describedby": descriptionId, children: _jsxs(Table.Root, { className: "inkra-radar__table", children: [_jsx(Table.Caption, { children: textNode('Radar data', `${id}-table-caption`) }), _jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Head, { children: textNode('Series', `${id}-table-series`) }), axes.map(axis => _jsx(Table.Head, { children: textNode(axis.label, `${id}-table-axis-${String(axis.id)}`) }, keyPart(axis.id)))] }) }), _jsx(Table.Body, { children: visibleSeries.map(item => _jsxs(Table.Row, { children: [_jsx(Table.Head, { scope: "row", children: textNode(item.label, `${id}-table-series-${String(item.id)}`) }), axes.map(axis => { const point = item.data.find(candidate => candidate.axisId === axis.id); const missing = !finite(point?.value); return _jsx(Table.Cell, { "data-missing": missing || undefined, children: textNode(missing ? missingLabel : formatNumber(point?.value, axis, getValueLabel), `${id}-table-value-${String(item.id)}-${String(axis.id)}`) }, keyPart(axis.id)); })] }, keyPart(item.id))) })] }) }) : null] })] });
+});

package/dist/range-slider/index.d.ts

@@ -0,0 +1,16 @@
+import type { SliderProps } from '../slider/index.js';
+/** A numeric range ordered as [minimum, maximum]. */
+export type RangeSliderValue = [number, number];
+export interface RangeSliderProps extends Omit<SliderProps, 'defaultValue' | 'minStepsBetweenThumbs' | 'onValueChange' | 'onValueCommit' | 'preserveThumbOrder' | 'thumbLabels' | 'value'> {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    onValueCommit?: (value: RangeSliderValue) => void;
+    /** Minimum numeric distance between endpoints. Rounded up to the next step and ignored when allowCross is true. */
+    minDistance?: number;
+    /** Allow a thumb to pass the other and exchange its low/high endpoint role. */
+    allowCross?: boolean;
+    /** Accessible names for the current low and high endpoints. */
+    thumbLabels?: readonly [string, string];
+}
+export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/range-slider/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Slider } from '../slider/index.js';
+const DEFAULT_LABELS = ['Minimum value', 'Maximum value'];
+function asRangeValue(value) {
+    return [value[0], value[1]];
+}
+function normalizeRangeValue(value) {
+    return value[0] <= value[1] ? value : [value[1], value[0]];
+}
+function getMinimumSteps(minDistance, step) {
+    if (!Number.isFinite(minDistance) || minDistance <= 0)
+        return 0;
+    if (!Number.isFinite(step) || step <= 0)
+        return 0;
+    return Math.ceil(minDistance / step);
+}
+export const RangeSlider = forwardRef(function RangeSlider({ allowCross = false, defaultValue, max = 100, min = 0, minDistance = 0, onValueChange, onValueCommit, step = 1, thumbLabels = DEFAULT_LABELS, value, ...props }, forwardedRef) {
+    const controlledValue = value === undefined ? undefined : normalizeRangeValue(value);
+    const uncontrolledDefault = value === undefined ? normalizeRangeValue(defaultValue ?? [min, max]) : undefined;
+    return _jsx(Slider, { ...props, defaultValue: uncontrolledDefault, max: max, min: min, minStepsBetweenThumbs: allowCross ? 0 : getMinimumSteps(minDistance, step), onValueChange: next => onValueChange?.(asRangeValue(next)), onValueCommit: next => onValueCommit?.(asRangeValue(next)), preserveThumbOrder: !allowCross, ref: forwardedRef, step: step, thumbLabels: thumbLabels, value: controlledValue });
+});

package/dist/rating/index.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingClearStrategy = boolean | 'reselect' | 'keyboard';
+export interface RatingSymbolState {
+    /** One-based symbol position. */
+    index: number;
+    /** Fraction displayed for this symbol, from 0 to 1. */
+    fraction: number;
+    filled: boolean;
+    previewing: boolean;
+}
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    step?: number;
+    clearable?: RatingClearStrategy;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: RatingSize;
+    dir?: 'ltr' | 'rtl';
+    symbol?: ReactNode;
+    renderSymbol?: (state: RatingSymbolState) => ReactNode;
+    getValueLabel?: (value: number, count: number) => string;
+}
+export declare function normalizeRatingValue(value: number | undefined, count: number, step: number): number;
+export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLDivElement>>;