@inkra/react 0.0.0-stage → 0.2.0

package/dist/node-graph/index.d.ts

@@ -0,0 +1,123 @@
+import type { Connection, Edge, EdgeChange, FitViewOptions, Node, NodeChange, OnConnect, Viewport } from '@xyflow/react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+export type NodeGraphPortPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface NodeGraphPortDefinition {
+    id: string;
+    type: 'source' | 'target';
+    position?: NodeGraphPortPosition;
+    label: string;
+    connectable?: boolean;
+}
+export interface NodeGraphNodeData extends Record<string, unknown> {
+    label?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    ports?: NodeGraphPortDefinition[];
+}
+export interface NodeGraphEdgeData extends Record<string, unknown> {
+    tone?: 'neutral' | 'accent';
+}
+export type NodeGraphNode<Data extends Record<string, unknown> = NodeGraphNodeData> = Node<Data>;
+export type NodeGraphEdge<Data extends Record<string, unknown> = NodeGraphEdgeData> = Edge<Data>;
+export type NodeGraphNodeChange<NodeType extends NodeGraphNode = NodeGraphNode> = NodeChange<NodeType>;
+export type NodeGraphEdgeChange<EdgeType extends NodeGraphEdge = NodeGraphEdge> = EdgeChange<EdgeType>;
+export type NodeGraphConnection = Connection;
+export type NodeGraphViewport = Viewport;
+export interface NodeGraphRenderNodeProps<Data extends Record<string, unknown> = NodeGraphNodeData> {
+    id: string;
+    data: Data;
+    selected: boolean;
+    dragging: boolean;
+    readOnly: boolean;
+}
+export interface NodeGraphRenderEdgeProps<EdgeType extends NodeGraphEdge = NodeGraphEdge> {
+    id: string;
+    edge: EdgeType;
+    selected: boolean;
+    path: string;
+    labelX: number;
+    labelY: number;
+}
+export interface NodeGraphRef {
+    fitView: (options?: FitViewOptions) => Promise<boolean>;
+    zoomIn: () => Promise<boolean>;
+    zoomOut: () => Promise<boolean>;
+    getViewport: () => NodeGraphViewport;
+}
+export interface NodeGraphControlLabels {
+    zoomIn: string;
+    zoomOut: string;
+    fitView: string;
+}
+export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNode, EdgeType extends NodeGraphEdge = NodeGraphEdge> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onError'> {
+    nodes: NodeType[];
+    edges: EdgeType[];
+    onNodesChange?: (changes: NodeGraphNodeChange<NodeType>[]) => void;
+    onEdgesChange?: (changes: NodeGraphEdgeChange<EdgeType>[]) => void;
+    onConnect?: OnConnect;
+    isValidConnection?: (connection: NodeGraphConnection | EdgeType) => boolean;
+    renderNode?: (props: NodeGraphRenderNodeProps<NodeType['data']>) => ReactNode;
+    renderEdge?: (props: NodeGraphRenderEdgeProps<EdgeType>) => ReactNode;
+    renderEdgeLabel?: (edge: EdgeType) => ReactNode;
+    readOnly?: boolean;
+    emptyState?: ReactNode;
+    controls?: boolean;
+    controlLabels?: Partial<NodeGraphControlLabels>;
+    fitView?: boolean;
+    fitViewOptions?: FitViewOptions<NodeType>;
+    defaultViewport?: NodeGraphViewport;
+    viewport?: NodeGraphViewport;
+    onViewportChange?: (viewport: NodeGraphViewport) => void;
+    minZoom?: number;
+    maxZoom?: number;
+    panOnDrag?: boolean;
+    zoomOnScroll?: boolean;
+    zoomOnPinch?: boolean;
+    connectOnClick?: boolean;
+    onlyRenderVisibleElements?: boolean;
+}
+export interface NodeGraphPortProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'> {
+    id: string;
+    type: 'source' | 'target';
+    position?: NodeGraphPortPosition;
+    label: string;
+    connectable?: boolean;
+}
+export interface NodeGraphNodeProps extends HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    dragging?: boolean;
+    readOnly?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    ports?: NodeGraphPortDefinition[];
+    children?: ReactNode;
+    seed?: string;
+}
+export interface NodeGraphEdgeProps {
+    id: string;
+    path: string;
+    labelX?: number;
+    labelY?: number;
+    selected?: boolean;
+    interactionWidth?: number;
+    label?: ReactNode;
+    className?: string;
+}
+export interface NodeGraphControlsProps extends HTMLAttributes<HTMLDivElement> {
+    fitViewOptions?: FitViewOptions;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    fitViewLabel?: string;
+}
+declare function NodeGraphControls({ className, fitViewOptions, zoomInLabel, zoomOutLabel, fitViewLabel, ...props }: NodeGraphControlsProps): import("react").JSX.Element;
+export declare function applyNodeGraphNodeChanges<NodeType extends NodeGraphNode>(changes: NodeGraphNodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
+export declare function applyNodeGraphEdgeChanges<EdgeType extends NodeGraphEdge>(changes: NodeGraphEdgeChange<EdgeType>[], edges: EdgeType[]): EdgeType[];
+export declare function addNodeGraphEdge<EdgeType extends NodeGraphEdge>(connection: NodeGraphConnection | EdgeType, edges: EdgeType[]): EdgeType[];
+export declare const NodeGraph: {
+    Root: <NodeType extends NodeGraphNode = NodeGraphNode<NodeGraphNodeData>, EdgeType extends NodeGraphEdge = NodeGraphEdge<NodeGraphEdgeData>>(props: NodeGraphRootProps<NodeType, EdgeType> & RefAttributes<NodeGraphRef>) => ReactElement | null;
+    Node: import("react").ForwardRefExoticComponent<NodeGraphNodeProps & RefAttributes<HTMLDivElement>>;
+    Port: import("react").ForwardRefExoticComponent<NodeGraphPortProps & RefAttributes<HTMLDivElement>>;
+    Edge: import("react").NamedExoticComponent<NodeGraphEdgeProps>;
+    Controls: typeof NodeGraphControls;
+};
+export {};

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,29 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { NumberTickerLocale } 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: number;
+    locale?: NumberTickerLocale;
+    formatOptions?: Intl.NumberFormatOptions;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    renderValue?: (value: number, details: NumberTickerRenderDetails) => ReactNode;
+    getValueLabel?: (value: number, formattedValue: string) => string;
+    animate?: boolean;
+    duration?: number;
+    easing?: (progress: number) => number;
+    showDelta?: boolean;
+    deltaDuration?: number;
+    deltaFormatOptions?: Intl.NumberFormatOptions;
+    renderDelta?: (delta: number, details: NumberTickerDeltaDetails) => ReactNode;
+}
+export declare const NumberTicker: import("react").ForwardRefExoticComponent<NumberTickerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, } from './model.js';
+export type { NumberTickerLocale } from './model.js';

package/dist/number-ticker/index.js

@@ -0,0 +1,132 @@
+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, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, tickerValueChanged, } from './model.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, 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 deltaFormatOptionsKey = JSON.stringify(deltaFormatOptions ?? formatOptions ?? {});
+    const formatter = useMemo(() => createNumberFormatter(locale, formatOptions), [localeKey, formatOptionsKey]);
+    const deltaFormatter = useMemo(() => createNumberFormatter(locale, deltaFormatOptions ?? formatOptions), [localeKey, deltaFormatOptionsKey]);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    useBrowserLayoutEffect(() => {
+        const previousTarget = targetRef.current;
+        targetRef.current = value;
+        if (showDelta && tickerValueChanged(previousTarget, value) && Number.isFinite(previousTarget) && Number.isFinite(value)) {
+            const nextDelta = 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(formatter, 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 = formatTickerDelta(deltaFormatter, delta);
+        const details = {
+            direction: delta < 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": delta < 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, } from './model.js';

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

@@ -0,0 +1,8 @@
+export type NumberTickerLocale = string | readonly string[];
+export declare function createNumberFormatter(locale?: NumberTickerLocale, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
+export declare function formatTickerValue(formatter: Intl.NumberFormat, value: number): string;
+export declare function formatTickerDelta(formatter: Intl.NumberFormat, delta: number): string;
+export declare function interpolateTickerValue(from: number, to: number, progress: number): number;
+export declare function tickerValueChanged(previous: number, next: number): boolean;
+export declare function canAnimateTickerValue(from: number, to: number, duration: number): boolean;
+export declare function easeOutCubic(progress: number): number;

package/dist/number-ticker/model.js

@@ -0,0 +1,34 @@
+export function createNumberFormatter(locale = 'en-US', options) {
+    return new Intl.NumberFormat(locale, options);
+}
+export function formatTickerValue(formatter, value) {
+    return formatter.format(value);
+}
+export function formatTickerDelta(formatter, delta) {
+    const sign = delta > 0 ? '+' : delta < 0 ? '\u2212' : '';
+    const magnitude = formatter.formatToParts(Math.abs(delta))
+        .filter(part => part.type !== 'plusSign' && part.type !== 'minusSign')
+        .map(part => part.value)
+        .join('');
+    return `${sign}${magnitude}`;
+}
+export function interpolateTickerValue(from, to, progress) {
+    if (!Number.isFinite(from) || !Number.isFinite(to))
+        return to;
+    const boundedProgress = Math.min(1, Math.max(0, progress));
+    return from + (to - from) * boundedProgress;
+}
+export function tickerValueChanged(previous, next) {
+    return !Object.is(previous, next);
+}
+export function canAnimateTickerValue(from, to, duration) {
+    return Number.isFinite(from)
+        && Number.isFinite(to)
+        && Number.isFinite(duration)
+        && duration > 0
+        && tickerValueChanged(from, to);
+}
+export function easeOutCubic(progress) {
+    const boundedProgress = Math.min(1, Math.max(0, progress));
+    return 1 - (1 - boundedProgress) ** 3;
+}