@inkra/react 0.1.0 → 0.3.0

package/dist/node-graph/index.js

@@ -0,0 +1,304 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EdgeLabelRenderer, Handle, Panel, Position, ReactFlow, ReactFlowProvider, addEdge as addFlowEdge, applyEdgeChanges as applyFlowEdgeChanges, applyNodeChanges as applyFlowNodeChanges, getBezierPath, useReactFlow, useViewport, } from '@xyflow/react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr, } from '../internal/cache.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
+import { pencilStroke } from '../internal/stroke.js';
+const positionMap = {
+    top: Position.Top,
+    right: Position.Right,
+    bottom: Position.Bottom,
+    left: Position.Left,
+};
+const zoomInPaths = [
+    { d: 'M 12 5 L 12 19' },
+    { d: 'M 5 12 L 19 12' },
+];
+const zoomOutPaths = [{ d: 'M 5 12 L 19 12' }];
+const fitViewPaths = [
+    { d: 'M 9 5 L 5 5 L 5 9' },
+    { d: 'M 15 5 L 19 5 L 19 9' },
+    { d: 'M 5 15 L 5 19 L 9 19' },
+    { d: 'M 19 15 L 19 19 L 15 19' },
+];
+const edgeCanvasCache = new BoundedCache(96, 24 * 1024 * 1024);
+const edgeCanvasPadding = 12;
+const edgeCanvasMaxDimension = 1024;
+const edgeCanvasMaxPixels = 512 * 512;
+const edgeCanvasMinScale = 0.5;
+const edgeMaxSampleSegments = 1024;
+function readableLabel(value, fallback) {
+    return typeof value === 'string' || typeof value === 'number' ? String(value) : fallback;
+}
+const NodeGraphPort = forwardRef(function NodeGraphPort({ id, type, position = type === 'source' ? 'right' : 'left', label, connectable = true, className, style, ...props }, ref) {
+    const { zoom } = useViewport();
+    const portStyle = {
+        ...style,
+        '--inkra-node-graph-port-scale': 1 / Math.max(zoom, 0.01),
+    };
+    return _jsx(Handle, { ...props, ref: ref, id: id, type: type, position: positionMap[position], isConnectable: connectable, "aria-label": label, className: ['inkra-node-graph__port', className].filter(Boolean).join(' '), "data-port-position": position, style: portStyle, children: _jsxs("span", { "aria-hidden": "true", className: "inkra-node-graph__port-visual", children: [_jsx(PencilSurface, { as: "span", className: "inkra-node-graph__port-feedback", radius: 8, seed: `node-graph-port-${type}-${id}-feedback`, variant: "quiet" }), _jsx(PencilSurface, { as: "span", className: "inkra-node-graph__port-mark", radius: 8, seed: `node-graph-port-${type}-${id}`, variant: "outline" })] }) });
+});
+const NodeGraphNode = forwardRef(function NodeGraphNode({ selected = false, dragging = false, readOnly = false, label, description, ports = [], children, className, seed = 'node-graph-node', ...props }, ref) {
+    return _jsxs("div", { ...props, ref: ref, className: ['inkra-node-graph__node-shell', className].filter(Boolean).join(' '), "data-selected": selected || undefined, "data-dragging": dragging || undefined, "data-read-only": readOnly || undefined, children: [_jsxs(PencilSurface, { className: "inkra-node-graph__node-paper", variant: "paper", radius: 8, seed: seed, children: [selected && _jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-node-graph__node-selection", variant: "selection", seed: `${seed}-selection` }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-node-graph__node-focus", radius: 8, seed: `${seed}-focus`, variant: "outline" }), _jsxs("div", { className: "inkra-node-graph__node-content", children: [label != null && _jsx("div", { className: "inkra-node-graph__node-label", children: typeof label === 'string' ? _jsx(PencilText, { children: label }) : label }), description != null && _jsx("div", { className: "inkra-node-graph__node-description", children: description }), children != null && _jsx("div", { className: "inkra-node-graph__node-body", children: children })] })] }), ports.map(port => _jsx(NodeGraphPort, { ...port, connectable: !readOnly && port.connectable !== false }, `${port.type}-${port.id}`))] });
+});
+const DefaultNodeRenderer = memo(function DefaultNodeRenderer({ id, data, selected, dragging }) {
+    const originalData = data.__inkraData ?? data;
+    const custom = data.__inkraRenderNode?.({
+        id,
+        data: originalData,
+        selected,
+        dragging,
+        readOnly: Boolean(data.__inkraReadOnly),
+    });
+    if (custom != null)
+        return custom;
+    return _jsx(NodeGraphNode, { label: originalData.label, description: originalData.description, ports: originalData.ports, selected: selected, dragging: dragging, readOnly: Boolean(data.__inkraReadOnly), seed: `node-graph-${id}`, children: originalData.content });
+});
+function boundsEqual(previous, next) {
+    return previous != null
+        && Math.abs(previous.x - next.x) < 0.01
+        && Math.abs(previous.y - next.y) < 0.01
+        && Math.abs(previous.width - next.width) < 0.01
+        && Math.abs(previous.height - next.height) < 0.01;
+}
+function edgeCanvasBudget(bounds, requestedScale) {
+    const cssPixels = bounds.width * bounds.height;
+    if (!Number.isFinite(cssPixels) || cssPixels <= 0)
+        return null;
+    const scale = Math.min(requestedScale, edgeCanvasMaxDimension / bounds.width, edgeCanvasMaxDimension / bounds.height, Math.sqrt(edgeCanvasMaxPixels / cssPixels));
+    if (!Number.isFinite(scale) || scale < edgeCanvasMinScale)
+        return null;
+    const width = Math.max(1, Math.floor(bounds.width * scale));
+    const height = Math.max(1, Math.floor(bounds.height * scale));
+    if (width > edgeCanvasMaxDimension || height > edgeCanvasMaxDimension || width * height > edgeCanvasMaxPixels)
+        return null;
+    return { width, height, scaleX: width / bounds.width, scaleY: height / bounds.height };
+}
+function sampleSvgPath(path, bounds) {
+    const total = path.getTotalLength();
+    if (!Number.isFinite(total) || total <= 0)
+        return [];
+    const count = Math.min(edgeMaxSampleSegments, Math.max(2, Math.ceil(total / 1.4)));
+    return Array.from({ length: count + 1 }, (_, index) => {
+        const point = path.getPointAtLength(total * index / count);
+        return [point.x - bounds.x, point.y - bounds.y];
+    });
+}
+function PencilEdgeCanvas({ id, path, className, selected = false }) {
+    const pathRef = useRef(null);
+    const canvasRef = useRef(null);
+    const [bounds, setBounds] = useState(null);
+    const [ready, setReady] = useState(false);
+    const budget = useMemo(() => bounds ? edgeCanvasBudget(bounds, effectiveDpr(2)) : null, [bounds]);
+    const measure = useCallback(() => {
+        const element = pathRef.current;
+        if (!element)
+            return;
+        try {
+            const box = element.getBBox();
+            const next = {
+                x: box.x - edgeCanvasPadding,
+                y: box.y - edgeCanvasPadding,
+                width: Math.max(1, box.width + edgeCanvasPadding * 2),
+                height: Math.max(1, box.height + edgeCanvasPadding * 2),
+            };
+            setBounds(previous => boundsEqual(previous, next) ? previous : next);
+        }
+        catch {
+            setBounds(null);
+        }
+    }, []);
+    useLayoutEffect(() => {
+        measure();
+    }, [measure, path]);
+    useLayoutEffect(() => {
+        setReady(false);
+    }, [budget, path]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const pathElement = pathRef.current;
+        if (!canvas || !pathElement || !bounds || !budget)
+            return undefined;
+        let disposed = false;
+        let frame = 0;
+        let lastPaint = '';
+        const paint = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            try {
+                const points = sampleSvgPath(pathElement, bounds);
+                if (points.length < 2)
+                    throw new Error('NodeGraph edge has no drawable path');
+                const style = getComputedStyle(canvas);
+                const width = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+                const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+                const numericSeed = seedToNumber(`node-graph-edge-${id}`);
+                const key = JSON.stringify([
+                    PENCIL_RENDERER_VERSION, path, bounds, style.color, width, roughness, numericSeed, budget, selected,
+                ]);
+                if (key === lastPaint && canvasIsUsable(canvas))
+                    return;
+                let image = edgeCanvasCache.get(key);
+                if (image && !canvasIsUsable(image)) {
+                    edgeCanvasCache.delete(key);
+                    image = undefined;
+                }
+                if (!image) {
+                    image = document.createElement('canvas');
+                    image.width = budget.width;
+                    image.height = budget.height;
+                    const context = image.getContext('2d');
+                    if (!context)
+                        throw new Error('NodeGraph edge canvas unavailable');
+                    context.scale(budget.scaleX, budget.scaleY);
+                    pencilStroke(context, points, style.color, width * (selected ? 1.15 : 0.92), numericSeed, roughness, 3, false, {
+                        variation: 0.82,
+                        breaks: selected ? 0.16 : 0.25,
+                        grain: 0.7,
+                        gain: selected ? 2.5 : 2.1,
+                        step: 0.65,
+                        taperLength: 5,
+                        edgeGrain: true,
+                    });
+                    edgeCanvasCache.set(key, image, canvasByteCost(image));
+                }
+                const context = canvas.getContext('2d');
+                if (!context || context.isContextLost?.())
+                    throw new Error('NodeGraph edge canvas unavailable');
+                canvas.width = image.width;
+                canvas.height = image.height;
+                context.drawImage(image, 0, 0);
+                lastPaint = key;
+                setReady(true);
+            }
+            catch {
+                lastPaint = '';
+                canvas.width = 0;
+                canvas.height = 0;
+                setReady(false);
+            }
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(paint);
+        };
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = canvas; element; element = element.parentElement) {
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'data-theme', 'data-inkra-theme'] });
+        }
+        const scheme = matchMedia('(prefers-color-scheme: dark)');
+        scheme.addEventListener('change', schedule);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; schedule(); });
+        paint();
+        return () => {
+            disposed = true;
+            inheritedStyle.disconnect();
+            scheme.removeEventListener('change', schedule);
+            stopRecovery();
+            cancelAnimationFrame(frame);
+        };
+    }, [bounds, budget, id, path, selected]);
+    return _jsxs("g", { className: ['inkra-node-graph__edge-pencil', className].filter(Boolean).join(' '), "data-pencil-ready": ready && budget ? true : undefined, "data-selected": selected || undefined, children: [_jsx("path", { ref: pathRef, d: path, className: "inkra-node-graph__edge-measure", fill: "none" }), _jsx("path", { d: path, className: "inkra-node-graph__edge-fallback", fill: "none" }), bounds && budget && _jsx("foreignObject", { "aria-hidden": "true", className: "inkra-node-graph__edge-foreign-object", height: bounds.height, pointerEvents: "none", width: bounds.width, x: bounds.x, y: bounds.y, children: _jsx("canvas", { ref: canvasRef, className: "inkra-node-graph__edge-canvas", style: { height: bounds.height, width: bounds.width } }) })] });
+}
+const NodeGraphEdge = memo(function NodeGraphEdge({ id, path, labelX, labelY, selected, interactionWidth = 24, label, className, }) {
+    return _jsxs(_Fragment, { children: [interactionWidth > 0 && _jsx("path", { d: path, className: "inkra-node-graph__edge-hit", fill: "none", stroke: "transparent", strokeWidth: interactionWidth }), _jsx(PencilEdgeCanvas, { id: id, path: path, className: className, selected: selected }), label != null && Number.isFinite(labelX) && Number.isFinite(labelY) && _jsx(EdgeLabelRenderer, { children: _jsx(PencilSurface, { className: "inkra-node-graph__edge-label nodrag nopan", variant: "paper", radius: 6, seed: `edge-label-${id}`, style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` }, children: label }) })] });
+});
+function DefaultEdgeRenderer({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected = false, interactionWidth, data, }) {
+    const [path, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    });
+    const edge = data?.__inkraEdge;
+    const custom = edge && data?.__inkraRenderEdge?.({ id, edge, selected, path, labelX, labelY });
+    if (custom != null)
+        return _jsxs(_Fragment, { children: [_jsx("path", { d: path, className: "inkra-node-graph__edge-hit", fill: "none", stroke: "transparent", strokeWidth: interactionWidth ?? 24 }), custom] });
+    const label = edge == null ? undefined : data?.__inkraRenderEdgeLabel?.(edge) ?? edge.label;
+    return _jsx(NodeGraphEdge, { id: id, interactionWidth: interactionWidth, label: label, labelX: labelX, labelY: labelY, path: path, selected: selected });
+}
+const nodeTypes = { inkra: DefaultNodeRenderer };
+const edgeTypes = { inkra: DefaultEdgeRenderer };
+function NodeGraphConnectionLine({ fromX, fromY, toX, toY, fromPosition, toPosition }) {
+    const [path] = getBezierPath({
+        sourceX: fromX,
+        sourceY: fromY,
+        sourcePosition: fromPosition,
+        targetX: toX,
+        targetY: toY,
+        targetPosition: toPosition,
+    });
+    return _jsx(PencilEdgeCanvas, { id: "connection-preview", path: path, className: "inkra-node-graph__connection-line" });
+}
+function NodeGraphControls({ className, fitViewOptions, zoomInLabel = 'Zoom in', zoomOutLabel = 'Zoom out', fitViewLabel = 'Fit graph to view', ...props }) {
+    const flow = useReactFlow();
+    const actions = [
+        { label: zoomInLabel, paths: zoomInPaths, run: () => flow.zoomIn() },
+        { label: zoomOutLabel, paths: zoomOutPaths, run: () => flow.zoomOut() },
+        { label: fitViewLabel, paths: fitViewPaths, run: () => flow.fitView(fitViewOptions) },
+    ];
+    return _jsx("div", { ...props, className: ['inkra-node-graph__controls', 'nopan', className].filter(Boolean).join(' '), children: actions.map(action => _jsxs(PencilSurface, { as: "button", "aria-label": action.label, className: "inkra-node-graph__control", "data-tooltip": action.label, onClick: () => void action.run(), variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-node-graph__control-focus", radius: 6, seed: `node-graph-${action.label}-focus`, variant: "outline" }), _jsx(PencilIcon, { decorative: true, paths: action.paths, size: 22, sourceSize: 24, seed: `node-graph-${action.label}` })] }, action.label)) });
+}
+function SsrFallback({ nodes, emptyState, label, }) {
+    return _jsx("div", { className: "inkra-node-graph__ssr", role: "group", "aria-label": label, children: nodes.length === 0 ? _jsx("div", { className: "inkra-node-graph__empty", children: emptyState }) : _jsx("ul", { children: nodes.map(node => _jsx("li", { children: readableLabel(node.data.label, node.id) }, node.id)) }) });
+}
+function NodeGraphRootInner({ nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, renderNode, renderEdge, renderEdgeLabel, readOnly = false, emptyState = 'No nodes yet', controls = true, controlLabels, fitView = false, fitViewOptions, defaultViewport = { x: 0, y: 0, zoom: 1 }, viewport, onViewportChange, minZoom = 0.25, maxZoom = 2, panOnDrag = true, zoomOnScroll = true, zoomOnPinch = true, connectOnClick = true, onlyRenderVisibleElements = false, className, style, 'aria-label': ariaLabel = 'Node graph', ...props }, forwardedRef) {
+    const [mounted, setMounted] = useState(false);
+    const instanceRef = useRef(null);
+    useEffect(() => setMounted(true), []);
+    useImperativeHandle(forwardedRef, () => ({
+        fitView: options => instanceRef.current?.fitView(options) ?? Promise.resolve(false),
+        zoomIn: () => instanceRef.current?.zoomIn() ?? Promise.resolve(false),
+        zoomOut: () => instanceRef.current?.zoomOut() ?? Promise.resolve(false),
+        getViewport: () => instanceRef.current?.getViewport() ?? defaultViewport,
+    }), [defaultViewport]);
+    const internalNodes = useMemo(() => nodes.map(node => ({
+        ...node,
+        type: 'inkra',
+        ariaLabel: node.ariaLabel ?? readableLabel(node.data.label, node.id),
+        data: {
+            __inkraRenderNode: renderNode,
+            __inkraReadOnly: readOnly,
+            __inkraData: node.data,
+        },
+    })), [nodes, readOnly, renderNode]);
+    const internalEdges = useMemo(() => edges.map(edge => ({
+        ...edge,
+        type: 'inkra',
+        ariaLabel: edge.ariaLabel ?? `Edge from ${edge.source} to ${edge.target}`,
+        label: undefined,
+        data: {
+            ...edge.data,
+            __inkraEdge: edge,
+            __inkraRenderEdge: renderEdge,
+            __inkraRenderEdgeLabel: renderEdgeLabel,
+        },
+    })), [edges, renderEdge, renderEdgeLabel]);
+    const rootStyle = { minHeight: 320, ...style };
+    return _jsx("div", { ...props, "aria-label": ariaLabel, className: ['inkra-node-graph', className].filter(Boolean).join(' '), "data-empty": nodes.length === 0 || undefined, "data-read-only": readOnly || undefined, style: rootStyle, children: !mounted ? _jsx(SsrFallback, { nodes: nodes, emptyState: emptyState, label: ariaLabel }) : _jsxs(ReactFlowProvider, { children: [_jsx(ReactFlow, { "aria-label": ariaLabel, nodes: internalNodes, edges: internalEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onInit: instance => { instanceRef.current = instance; }, onNodesChange: changes => onNodesChange?.(changes), onEdgesChange: changes => onEdgesChange?.(changes), onConnect: readOnly ? undefined : onConnect, isValidConnection: isValidConnection, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, edgesReconnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, deleteKeyCode: readOnly ? null : ['Backspace', 'Delete'], fitView: fitView, fitViewOptions: fitViewOptions, defaultViewport: defaultViewport, viewport: viewport, onViewportChange: onViewportChange, minZoom: minZoom, maxZoom: maxZoom, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, connectOnClick: connectOnClick && !readOnly, connectionLineComponent: NodeGraphConnectionLine, onlyRenderVisibleElements: onlyRenderVisibleElements, noDragClassName: "nodrag", noPanClassName: "nopan", children: controls && _jsx(Panel, { position: "bottom-left", children: _jsx(NodeGraphControls, { fitViewLabel: controlLabels?.fitView, fitViewOptions: fitViewOptions, zoomInLabel: controlLabels?.zoomIn, zoomOutLabel: controlLabels?.zoomOut }) }) }), nodes.length === 0 && _jsx("div", { className: "inkra-node-graph__empty", role: "status", children: emptyState })] }) });
+}
+const NodeGraphRoot = forwardRef(NodeGraphRootInner);
+export function applyNodeGraphNodeChanges(changes, nodes) {
+    return applyFlowNodeChanges(changes, nodes);
+}
+export function applyNodeGraphEdgeChanges(changes, edges) {
+    return applyFlowEdgeChanges(changes, edges);
+}
+export function addNodeGraphEdge(connection, edges) {
+    return addFlowEdge(connection, edges);
+}
+export const NodeGraph = {
+    Root: NodeGraphRoot,
+    Node: NodeGraphNode,
+    Port: NodeGraphPort,
+    Edge: NodeGraphEdge,
+    Controls: NodeGraphControls,
+};

package/dist/number-ticker/index.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { NumberTickerCompact, NumberTickerCompactOptions, NumberTickerFormatOptions, NumberTickerLocale, NumberTickerValue } from './model.js';
+export interface NumberTickerRenderDetails {
+    animating: boolean;
+    formattedValue: string;
+}
+export interface NumberTickerDeltaDetails {
+    direction: 'increase' | 'decrease';
+    formattedDelta: string;
+}
+export interface NumberTickerProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'prefix'> {
+    value: NumberTickerValue;
+    locale?: NumberTickerLocale;
+    formatOptions?: NumberTickerFormatOptions;
+    compact?: NumberTickerCompact;
+    compactOptions?: NumberTickerCompactOptions;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    renderValue?: (value: NumberTickerValue, details: NumberTickerRenderDetails) => ReactNode;
+    getValueLabel?: (value: NumberTickerValue, formattedValue: string) => string;
+    animate?: boolean;
+    duration?: number;
+    easing?: (progress: number) => number;
+    showDelta?: boolean;
+    deltaDuration?: number;
+    deltaFormatOptions?: NumberTickerFormatOptions;
+    renderDelta?: (delta: NumberTickerValue, details: NumberTickerDeltaDetails) => ReactNode;
+}
+export declare const NumberTicker: import("react").ForwardRefExoticComponent<NumberTickerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, numberTickerUnits, } from './model.js';
+export type { NumberTickerCompact, NumberTickerCompactOptions, NumberTickerFormatOptions, NumberTickerLocale, NumberTickerUnit, NumberTickerValue } from './model.js';

package/dist/number-ticker/index.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { canAnimateTickerValue, createNumberFormatter, createTickerFormatter, easeOutCubic, formatDerivedTickerDelta, formatTickerValue, interpolateTickerValue, tickerValueChanged, subtractTickerValues, tickerValueKey, } from './model.js';
+import { ExactDecimal } from './precision.js';
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useBrowserLayoutEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return reduced;
+}
+function lettering(content, seed) {
+    return typeof content === 'string' ? _jsx(PencilText, { seed: seed, children: content }) : content;
+}
+function accessibleAffix(content) {
+    return typeof content === 'string' || typeof content === 'number' ? String(content) : '';
+}
+export const NumberTicker = forwardRef(function NumberTicker({ animate = true, className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const frameRef = useRef(null);
+    const deltaTimerRef = useRef(null);
+    const displayedRef = useRef(value);
+    const targetRef = useRef(value);
+    const [displayedValue, setDisplayedValue] = useState(value);
+    const [announcedValue, setAnnouncedValue] = useState(value);
+    const [animating, setAnimating] = useState(false);
+    const [delta, setDelta] = useState(null);
+    const reducedMotion = usePrefersReducedMotion();
+    const localeKey = Array.isArray(locale) ? locale.join('\u0000') : locale;
+    const formatOptionsKey = JSON.stringify(formatOptions ?? {});
+    const compactOptionsKey = tickerValueKey(compactOptions ?? {});
+    const deltaFormatOptionsKey = JSON.stringify(deltaFormatOptions ?? formatOptions ?? {});
+    const formatter = useMemo(() => createTickerFormatter(locale, formatOptions, compact, compactOptions), [localeKey, formatOptionsKey, compact, compactOptionsKey]);
+    const deltaFormatter = useMemo(() => createTickerFormatter(locale, deltaFormatOptions ?? formatOptions, compact, compactOptions), [localeKey, deltaFormatOptionsKey, compact, compactOptionsKey]);
+    const announcementFormatter = useMemo(() => createNumberFormatter(locale, compact ? { ...formatOptions, notation: 'standard' } : formatOptions), [localeKey, formatOptionsKey, compact]);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    useBrowserLayoutEffect(() => {
+        const previousTarget = targetRef.current;
+        targetRef.current = value;
+        if (showDelta && tickerValueChanged(previousTarget, value)) {
+            const nextDelta = subtractTickerValues(value, previousTarget);
+            setDelta(nextDelta);
+            if (deltaTimerRef.current !== null)
+                clearTimeout(deltaTimerRef.current);
+            if (deltaDuration > 0 && Number.isFinite(deltaDuration)) {
+                deltaTimerRef.current = setTimeout(() => {
+                    deltaTimerRef.current = null;
+                    setDelta(null);
+                }, deltaDuration);
+            }
+        }
+        else if (!showDelta) {
+            setDelta(null);
+        }
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        const reduceImmediately = reducedMotion
+            || (typeof window !== 'undefined'
+                && typeof window.matchMedia === 'function'
+                && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+        const from = displayedRef.current;
+        if (!animate || reduceImmediately || !canAnimateTickerValue(from, value, duration)) {
+            displayedRef.current = value;
+            setDisplayedValue(value);
+            setAnnouncedValue(value);
+            setAnimating(false);
+            return undefined;
+        }
+        let startTime = null;
+        setAnimating(true);
+        const tick = (time) => {
+            if (startTime === null)
+                startTime = time;
+            const progress = Math.min(1, Math.max(0, (time - startTime) / duration));
+            const next = interpolateTickerValue(from, value, easing(progress));
+            displayedRef.current = next;
+            setDisplayedValue(next);
+            if (progress < 1) {
+                frameRef.current = requestAnimationFrame(tick);
+            }
+            else {
+                frameRef.current = null;
+                displayedRef.current = value;
+                setDisplayedValue(value);
+                setAnnouncedValue(value);
+                setAnimating(false);
+            }
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+        };
+    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value]);
+    useEffect(() => () => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+        if (deltaTimerRef.current !== null)
+            clearTimeout(deltaTimerRef.current);
+    }, []);
+    const formattedValue = formatTickerValue(formatter, displayedValue);
+    const finalFormattedValue = formatTickerValue(formatter, value);
+    const announcedFormattedValue = formatTickerValue(announcementFormatter, announcedValue);
+    const defaultAccessibleLabel = [accessibleAffix(prefix), announcedFormattedValue, accessibleAffix(suffix)]
+        .filter(Boolean).join(' ');
+    const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
+    const valueContent = renderValue?.(displayedValue, { animating, formattedValue })
+        ?? (animating
+            ? _jsx("span", { className: "inkra-number-ticker__native-value", children: formattedValue })
+            : _jsx(PencilText, { seed: `number-ticker-${finalFormattedValue}`, children: finalFormattedValue }));
+    const deltaContent = delta === null ? null : (() => {
+        const formattedDelta = formatDerivedTickerDelta(deltaFormatter, delta);
+        const details = {
+            direction: new ExactDecimal(String(delta)).lt(0) ? 'decrease' : 'increase',
+            formattedDelta,
+        };
+        return renderDelta?.(delta, details) ?? _jsx(PencilText, { seed: `number-ticker-delta-${formattedDelta}`, children: formattedDelta });
+    })();
+    const classes = ['inkra-number-ticker', animating && 'inkra-number-ticker--animating', className]
+        .filter(Boolean).join(' ');
+    return _jsxs("span", { ...props, className: classes, ref: rootRef, "data-animating": animating || undefined, children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-number-ticker__visual", children: [prefix !== undefined && _jsx("span", { className: "inkra-number-ticker__prefix", children: lettering(prefix, 'number-ticker-prefix') }), _jsx("span", { className: "inkra-number-ticker__value", children: valueContent }), suffix !== undefined && _jsx("span", { className: "inkra-number-ticker__suffix", children: lettering(suffix, 'number-ticker-suffix') }), deltaContent !== null && _jsx("span", { className: "inkra-number-ticker__delta", "data-direction": new ExactDecimal(String(delta)).lt(0) ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
+});
+export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, numberTickerUnits, } from './model.js';

package/dist/number-ticker/model.d.ts

@@ -0,0 +1,41 @@
+import { tickerDecimal } from './precision.js';
+import type { NumberTickerValue } from './precision.js';
+export { subtractTickerValues, tickerValueKey } from './precision.js';
+export type { NumberTickerValue } from './precision.js';
+export type NumberTickerLocale = string | readonly string[];
+export type NumberTickerCompact = boolean | 'en' | 'zh';
+export interface NumberTickerFormatOptions extends Intl.NumberFormatOptions {
+    roundingMode?: 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven';
+}
+export interface NumberTickerUnit {
+    factor: NumberTickerValue;
+    label: string;
+    /** Absolute display magnitude required to enter this unit. */
+    threshold?: NumberTickerValue;
+}
+export interface NumberTickerCompactOptions {
+    units?: readonly NumberTickerUnit[];
+    minUnit?: string;
+    maxUnit?: string;
+    separator?: string;
+    promotionThreshold?: NumberTickerValue;
+    promoteAfterRounding?: boolean;
+    overflow?: 'unit' | 'scientific';
+}
+export declare const numberTickerUnits: Readonly<Record<'en' | 'zh', readonly NumberTickerUnit[]>>;
+type TickerFormatter = {
+    format(value: NumberTickerValue): string;
+    formatToParts(value: NumberTickerValue): Intl.NumberFormatPart[];
+    formatDecimal(value: ReturnType<typeof tickerDecimal>): Intl.NumberFormatPart[];
+};
+export declare function createNumberFormatter(locale?: NumberTickerLocale, options?: NumberTickerFormatOptions): Intl.NumberFormat;
+export declare function createTickerFormatter(locale?: NumberTickerLocale, options?: NumberTickerFormatOptions, compact?: NumberTickerCompact, compactOptions?: NumberTickerCompactOptions): TickerFormatter;
+export declare function formatTickerValue(formatter: TickerFormatter | Intl.NumberFormat, value: NumberTickerValue): string;
+export declare function formatTickerDelta(formatter: TickerFormatter | Intl.NumberFormat, delta: NumberTickerValue): string;
+export declare function formatDerivedTickerDelta(formatter: TickerFormatter, delta: NumberTickerValue): string;
+export declare function interpolateTickerValue(from: number, to: number, progress: number): number;
+export declare function interpolateTickerValue(from: bigint, to: bigint, progress: number): bigint;
+export declare function interpolateTickerValue(from: NumberTickerValue, to: NumberTickerValue, progress: number): NumberTickerValue;
+export declare function tickerValueChanged(previous: NumberTickerValue, next: NumberTickerValue): boolean;
+export declare function canAnimateTickerValue(from: NumberTickerValue, to: NumberTickerValue, duration: number): boolean;
+export declare function easeOutCubic(progress: number): number;