@inkra/react 0.2.0 → 0.4.3

package/dist/markdown/Deletion.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+export function Deletion({ children, className, ...props }) {
+    const ref = useRef(null);
+    const [lines, setLines] = useState([]);
+    useBrowserLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !document.createElement('canvas').getContext('2d'))
+            return;
+        let disposed = false;
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const box = node.getBoundingClientRect();
+            const scaleX = node.offsetWidth ? box.width / node.offsetWidth : 1;
+            const scaleY = node.offsetHeight ? box.height / node.offsetHeight : 1;
+            const fragments = [];
+            const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+            const range = document.createRange();
+            // Use native line fragments, not one line through the whole wrapped block.
+            for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+                if (!text.textContent?.trim() || text.parentElement?.closest('[aria-hidden="true"]'))
+                    continue;
+                range.selectNodeContents(text);
+                for (const rect of range.getClientRects()) {
+                    if (!rect.width || !rect.height)
+                        continue;
+                    const top = (rect.top - box.top + rect.height * 0.52) / (scaleY || 1) - 3;
+                    const left = (rect.left - box.left) / (scaleX || 1);
+                    const width = rect.width / (scaleX || 1);
+                    const line = fragments.find(item => Math.abs(item.top - top) < 3);
+                    if (line) {
+                        const end = Math.max(line.left + line.width, left + width);
+                        line.left = Math.min(line.left, left);
+                        line.width = end - line.left;
+                    }
+                    else
+                        fragments.push({ left, top, width });
+                }
+            }
+            const next = fragments.map(line => ({
+                left: Math.round(line.left * 2) / 2,
+                top: Math.round(line.top * 2) / 2,
+                width: Math.round(line.width * 2) / 2,
+            }));
+            setLines(previous => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+        };
+        const schedule = () => {
+            if (!disposed && !frame)
+                frame = requestAnimationFrame(measure);
+        };
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        observer?.observe(node);
+        document.fonts?.addEventListener('loadingdone', schedule);
+        document.fonts?.ready.then(schedule);
+        measure();
+        return () => {
+            disposed = true;
+            observer?.disconnect();
+            document.fonts?.removeEventListener('loadingdone', schedule);
+            cancelAnimationFrame(frame);
+        };
+    }, [children]);
+    return _jsxs("del", { ...props, className: ['inkra-markdown__deleted', className].filter(Boolean).join(' '), ref: ref, "data-pencil-strike-ready": lines.length > 0 || undefined, children: [children, lines.map((line, index) => _jsx(PencilLine, { className: "inkra-markdown__strike", seed: `markdown-strike-${index}`, weight: 0.7, roughness: 0.4, style: { left: line.left, top: line.top, width: line.width } }, index))] });
+}

package/dist/markdown/icons.d.ts

@@ -0,0 +1,14 @@
+export declare const codeIcons: {
+    copy: {
+        d: string;
+    }[];
+    check: {
+        d: string;
+    }[];
+    terminal: {
+        d: string;
+    }[];
+    code: {
+        d: string;
+    }[];
+};

package/dist/markdown/icons.js

@@ -0,0 +1,16 @@
+import { __iconData as copy } from 'lucide-react/dist/esm/icons/copy.mjs';
+import { __iconData as check } from 'lucide-react/dist/esm/icons/check.mjs';
+import { __iconData as terminal } from 'lucide-react/dist/esm/icons/terminal.mjs';
+import { __iconData as code } from 'lucide-react/dist/esm/icons/code-xml.mjs';
+function paths(data) {
+    return data.node.flatMap(([tag, attributes]) => {
+        if (tag === 'path')
+            return [{ d: attributes.d }];
+        if (tag !== 'rect')
+            return [];
+        const { x = 0, y = 0, width = 0, height = 0, rx = 0 } = Object.fromEntries(Object.entries(attributes).map(([key, value]) => [key, Number(value)]));
+        const r = Math.min(rx, width / 2, height / 2);
+        return [{ d: `M${x + r} ${y}H${x + width - r}Q${x + width} ${y} ${x + width} ${y + r}V${y + height - r}Q${x + width} ${y + height} ${x + width - r} ${y + height}H${x + r}Q${x} ${y + height} ${x} ${y + height - r}V${y + r}Q${x} ${y} ${x + r} ${y}Z` }];
+    });
+}
+export const codeIcons = { copy: paths(copy), check: paths(check), terminal: paths(terminal), code: paths(code) };

package/dist/markdown/index.d.ts

@@ -0,0 +1,17 @@
+import type { Components } from 'react-markdown';
+import { type ComponentPropsWithoutRef } from 'react';
+import { type MarkdownCodeLabels } from './CodeBlock.js';
+export interface MarkdownLabels extends Partial<MarkdownCodeLabels> {
+    code?: string;
+    table?: string;
+    taskChecked?: string;
+    taskUnchecked?: string;
+}
+export interface MarkdownProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children: string;
+    components?: Components;
+    headingLevelOffset?: number;
+    labels?: MarkdownLabels;
+    transformUrl?: (url: string, kind: 'link' | 'image') => string | null | undefined;
+}
+export declare const Markdown: import("react").ForwardRefExoticComponent<MarkdownProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/markdown/index.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useMemo, } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Table } from '../content/index.js';
+import { Checkbox } from '../selection/Checkbox.js';
+import { MarkdownCodeBlock } from './CodeBlock.js';
+import { Deletion } from './Deletion.js';
+const listContext = createContext('unordered');
+const codeContext = createContext('inline');
+const bulletPaths = [{ d: 'M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15' }];
+const markdownPlugins = [remarkGfm];
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function pencilChildren(children, seed) {
+    return Children.map(children, (child, index) => {
+        if (typeof child !== 'string' && typeof child !== 'number')
+            return child;
+        const value = String(child);
+        if (!/\S/.test(value))
+            return value;
+        const [, leading, text, trailing] = /^(\s*)([\s\S]*?)(\s*)$/.exec(value);
+        return _jsxs(_Fragment, { children: [leading, _jsx(PencilText, { seed: `${seed}-${index}`, children: text }), trailing] });
+    });
+}
+function taskContent(children) {
+    let checkbox;
+    const extract = (content) => Children.map(content, child => {
+        if (!isValidElement(child))
+            return child;
+        if (!checkbox && child.props.node?.tagName === 'input' && child.props.type === 'checkbox') {
+            checkbox = child;
+            return null;
+        }
+        if (!checkbox && child.props.node?.tagName === 'p')
+            return cloneElement(child, {}, extract(child.props.children));
+        return child;
+    });
+    const content = extract(children);
+    return { checkbox, content };
+}
+function textChildren(children) {
+    let value = '';
+    Children.forEach(children, child => {
+        if (typeof child === 'string' || typeof child === 'number')
+            value += String(child);
+    });
+    return value;
+}
+function codeBlockContent(children) {
+    if (isValidElement(children)) {
+        return {
+            className: children.props.className,
+            code: textChildren(children.props.children),
+        };
+    }
+    return { className: undefined, code: textChildren(children) };
+}
+function safeUrl(url, kind) {
+    const trimmed = url.trim();
+    if (!trimmed)
+        return null;
+    if (/^(?:[#/?]|\.\.?\/)/.test(trimmed))
+        return trimmed;
+    const scheme = /^([a-z][a-z\d+.-]*):/i.exec(trimmed.replace(/[\u0000-\u001f\u007f]/g, ''))?.[1]?.toLowerCase();
+    if (!scheme)
+        return trimmed;
+    if (scheme === 'http' || scheme === 'https')
+        return trimmed;
+    if (kind === 'link' && (scheme === 'mailto' || scheme === 'tel'))
+        return trimmed;
+    return null;
+}
+function headingTag(level, offset) {
+    return `h${Math.max(1, Math.min(6, level + offset))}`;
+}
+function MarkdownTaskCheckbox({ checked = false, className, label, ...props }) {
+    const selected = Boolean(checked);
+    return _jsx(Checkbox, { ...props, "aria-label": props['aria-label'] ?? label, checked: selected, className: classes('inkra-markdown__task-checkbox', className), disabled: true, label: _jsx("span", { "aria-hidden": "true" }), seed: `markdown-task-${selected ? 'checked' : 'unchecked'}` });
+}
+function createMarkdownComponents(headingLevelOffset, labels) {
+    const heading = (level) => {
+        const Heading = headingTag(level, headingLevelOffset);
+        return ({ node: _node, children, className, ...props }) => (_jsx(Heading, { ...props, className: classes('inkra-markdown__heading', className), children: pencilChildren(children, `markdown-heading-${level}`) }));
+    };
+    return {
+        h1: heading(1),
+        h2: heading(2),
+        h3: heading(3),
+        h4: heading(4),
+        h5: heading(5),
+        h6: heading(6),
+        p: ({ node: _node, children, className, ...props }) => (_jsx("p", { ...props, className: classes('inkra-markdown__paragraph', className), children: pencilChildren(children, 'markdown-paragraph') })),
+        strong: ({ node: _node, children, ...props }) => _jsx("strong", { ...props, children: pencilChildren(children, 'markdown-strong') }),
+        em: ({ node: _node, children, ...props }) => _jsx("em", { ...props, children: pencilChildren(children, 'markdown-emphasis') }),
+        del: ({ node: _node, children, ...props }) => _jsx(Deletion, { ...props, children: pencilChildren(children, 'markdown-deleted') }),
+        a: ({ node: _node, children, className, href, ...props }) => href ? (_jsxs("a", { ...props, className: classes('inkra-markdown__link', className), href: href, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__link-focus", radius: 3, seed: `markdown-link-focus-${href}`, variant: "outline" }), _jsx("span", { children: pencilChildren(children, 'markdown-link') }), _jsx(PencilLine, { className: "inkra-markdown__link-line", seed: `markdown-link-${href}` })] })) : _jsx("span", { className: classes('inkra-markdown__link-text', className), children: pencilChildren(children, 'markdown-link-text') }),
+        blockquote: ({ node: _node, children, className, ...props }) => (_jsxs("blockquote", { ...props, className: classes('inkra-markdown__quote', className), children: [_jsx(PencilLine, { className: "inkra-markdown__quote-line", orientation: "vertical", seed: "markdown-quote" }), _jsx("div", { children: children })] })),
+        hr: ({ node: _node, className, ...props }) => (_jsx("div", { ...props, className: classes('inkra-markdown__divider', className), role: "separator", children: _jsx(PencilLine, { seed: "markdown-divider" }) })),
+        pre: ({ node: _node, children, ...props }) => {
+            const block = codeBlockContent(children);
+            return _jsx(codeContext.Provider, { value: "block", children: _jsx(MarkdownCodeBlock, { ...props, "aria-label": labels.code, labels: labels, code: block.code, codeClassName: block.className }) });
+        },
+        code: ({ node: _node, children, className, ...props }) => {
+            const kind = useContext(codeContext);
+            const value = textChildren(children);
+            return _jsx("code", { ...props, className: classes('inkra-markdown__code', className), "data-inline": kind === 'inline' || undefined, children: kind === 'inline'
+                    ? _jsxs(_Fragment, { children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__code-wash", radius: 3, seed: `markdown-inline-code-wash-${value}`, variant: "wash" }), _jsx(PencilText, { className: "inkra-markdown__code-text", seed: `markdown-inline-code-${value}`, children: value })] })
+                    : children });
+        },
+        ul: ({ node: _node, children, className, ...props }) => (_jsx(listContext.Provider, { value: "unordered", children: _jsx("ul", { ...props, className: classes('inkra-markdown__list', 'inkra-markdown__list--unordered', className), children: children }) })),
+        ol: ({ node: _node, children, className, start, style, ...props }) => {
+            const first = typeof start === 'number' && Number.isFinite(start) ? Math.trunc(start) : 1;
+            let itemIndex = 0;
+            const numberedChildren = Children.map(children, child => {
+                if (!isValidElement(child))
+                    return child;
+                const marker = first + itemIndex;
+                itemIndex += 1;
+                return cloneElement(child, { 'data-inkra-ordered-index': marker });
+            });
+            const last = first + Math.max(0, itemIndex - 1);
+            const markerCharacters = Math.max(`${first}.`.length, `${last}.`.length);
+            const listStyle = {
+                ...style,
+                '--inkra-markdown-ordered-marker-width': `max(1.75rem, ${markerCharacters}ch)`,
+            };
+            return _jsx(listContext.Provider, { value: "ordered", children: _jsx("ol", { ...props, className: classes('inkra-markdown__list', 'inkra-markdown__list--ordered', className), start: first, style: listStyle, children: numberedChildren }) });
+        },
+        li: ({ node: _node, children, className, 'data-inkra-ordered-index': orderedIndex, ...props }) => {
+            const kind = useContext(listContext);
+            const task = className?.split(/\s+/).includes('task-list-item');
+            const extracted = task ? taskContent(children) : undefined;
+            return _jsxs("li", { ...props, className: classes('inkra-markdown__list-item', className), "data-inkra-list-kind": kind, children: [kind === 'unordered' && !task && _jsx(PencilIcon, { className: "inkra-markdown__bullet", paths: bulletPaths, size: 12, sourceSize: 24, strokeWidth: 1.2, intensity: 0.78 }), kind === 'ordered' && orderedIndex != null && _jsx(PencilText, { "aria-hidden": "true", className: "inkra-markdown__ordered-marker", seed: `markdown-order-${orderedIndex}`, children: `${orderedIndex}.` }), _jsx("div", { className: "inkra-markdown__list-content", children: extracted?.checkbox
+                            ? _jsxs("div", { className: "inkra-markdown__task-row", children: [extracted.checkbox, _jsx("div", { className: "inkra-markdown__task-content", children: pencilChildren(extracted.content, 'markdown-list-item') })] })
+                            : pencilChildren(children, 'markdown-list-item') })] });
+        },
+        input: ({ node: _node, checked, type, ...props }) => type === 'checkbox'
+            ? _jsx(MarkdownTaskCheckbox, { ...props, checked: checked, label: checked ? labels.taskChecked : labels.taskUnchecked })
+            : _jsx("input", { ...props, checked: checked, type: type }),
+        table: ({ node: _node, children, className, ...props }) => (_jsxs("div", { className: "inkra-markdown__table-frame", children: [_jsx(Table.Container, { "aria-label": labels.table, className: "inkra-markdown__table", role: "region", children: _jsx(Table.Root, { ...props, className: className, children: children }) }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__table-focus", radius: 6, seed: "markdown-table-focus", variant: "outline" })] })),
+        thead: ({ node: _node, ...props }) => _jsx(Table.Header, { ...props }),
+        tbody: ({ node: _node, ...props }) => _jsx(Table.Body, { ...props }),
+        tr: ({ node: _node, ...props }) => _jsx(Table.Row, { ...props }),
+        th: ({ node: _node, children, align, ...props }) => _jsx(Table.Head, { ...props, align: align, children: pencilChildren(children, 'markdown-table-heading') }),
+        td: ({ node: _node, children, align, ...props }) => _jsx(Table.Cell, { ...props, align: align, verticalAlign: "top", children: pencilChildren(children, 'markdown-table-cell') }),
+        img: ({ node: _node, className, alt = '', ...props }) => props.src ? (_jsx(PencilSurface, { as: "span", className: "inkra-markdown__image-frame", radius: 6, seed: `markdown-image-${props.src ?? ''}`, variant: "outline", children: _jsx("img", { ...props, alt: alt, className: classes('inkra-markdown__image', className), decoding: "async", loading: "lazy" }) })) : _jsx("span", { className: classes('inkra-markdown__image-alt', className), children: pencilChildren(alt, 'markdown-image-alt') }),
+    };
+}
+export const Markdown = forwardRef(function Markdown({ children, className, components, headingLevelOffset = 0, labels, transformUrl, ...props }, ref) {
+    const offset = Number.isFinite(headingLevelOffset) ? Math.trunc(headingLevelOffset) : 0;
+    const resolvedLabels = useMemo(() => ({
+        code: labels?.code ?? 'Code block',
+        plainText: labels?.plainText ?? 'Plain text',
+        copy: labels?.copy ?? 'Copy code',
+        copied: labels?.copied ?? 'Code copied',
+        copyFailed: labels?.copyFailed ?? 'Copy failed. Select the code to copy it manually.',
+        table: labels?.table ?? 'Markdown table',
+        taskChecked: labels?.taskChecked ?? 'Completed task',
+        taskUnchecked: labels?.taskUnchecked ?? 'Incomplete task',
+    }), [labels?.code, labels?.plainText, labels?.copy, labels?.copied, labels?.copyFailed, labels?.table, labels?.taskChecked, labels?.taskUnchecked]);
+    const builtIns = useMemo(() => createMarkdownComponents(offset, resolvedLabels), [offset, resolvedLabels]);
+    const resolvedComponents = useMemo(() => ({ ...builtIns, ...components }), [builtIns, components]);
+    const urlTransform = useCallback((url, key) => {
+        const kind = key === 'src' ? 'image' : 'link';
+        const transformed = transformUrl ? transformUrl(url, kind) : url;
+        return transformed == null ? null : safeUrl(transformed, kind);
+    }, [transformUrl]);
+    return _jsx("div", { ...props, ref: ref, className: classes('inkra-markdown', className), children: _jsx(ReactMarkdown, { components: resolvedComponents, remarkPlugins: markdownPlugins, skipHtml: true, urlTransform: urlTransform, children: children }) });
+});

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

@@ -50,7 +50,9 @@ export interface NodeGraphControlLabels {
     fitView: string;
 }
 export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNode, EdgeType extends NodeGraphEdge = NodeGraphEdge> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onError'> {
+    /** Immutable snapshots: replace the array and each changed node (including changed nested data). */
     nodes: NodeType[];
+    /** Immutable snapshots: replace the array and each changed edge (including changed nested data). */
     edges: EdgeType[];
     onNodesChange?: (changes: NodeGraphNodeChange<NodeType>[]) => void;
     onEdgesChange?: (changes: NodeGraphEdgeChange<EdgeType>[]) => void;

package/dist/node-graph/index.js

@@ -132,9 +132,6 @@ function PencilEdgeCanvas({ id, path, className, selected = false }) {
             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);
@@ -150,6 +147,9 @@ function PencilEdgeCanvas({ id, path, className, selected = false }) {
                     image = undefined;
                 }
                 if (!image) {
+                    const points = sampleSvgPath(pathElement, bounds);
+                    if (points.length < 2)
+                        throw new Error('NodeGraph edge has no drawable path');
                     image = document.createElement('canvas');
                     image.width = budget.width;
                     image.height = budget.height;
@@ -260,28 +260,52 @@ function NodeGraphRootInner({ nodes, edges, onNodesChange, onEdgesChange, onConn
         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]);
+    // Immutable node/edge updates should invalidate only the changed records. Weak
+    // keys release removed records and changing render configuration resets the cache.
+    const adaptNode = useMemo(() => {
+        const cache = new WeakMap();
+        return (node) => {
+            const cached = cache.get(node);
+            if (cached)
+                return cached;
+            const adapted = {
+                ...node,
+                type: 'inkra',
+                ariaLabel: node.ariaLabel ?? readableLabel(node.data.label, node.id),
+                data: {
+                    __inkraRenderNode: renderNode,
+                    __inkraReadOnly: readOnly,
+                    __inkraData: node.data,
+                },
+            };
+            cache.set(node, adapted);
+            return adapted;
+        };
+    }, [readOnly, renderNode]);
+    const adaptEdge = useMemo(() => {
+        const cache = new WeakMap();
+        return (edge) => {
+            const cached = cache.get(edge);
+            if (cached)
+                return cached;
+            const adapted = {
+                ...edge,
+                type: 'inkra',
+                ariaLabel: edge.ariaLabel ?? `Edge from ${edge.source} to ${edge.target}`,
+                label: undefined,
+                data: {
+                    ...edge.data,
+                    __inkraEdge: edge,
+                    __inkraRenderEdge: renderEdge,
+                    __inkraRenderEdgeLabel: renderEdgeLabel,
+                },
+            };
+            cache.set(edge, adapted);
+            return adapted;
+        };
+    }, [renderEdge, renderEdgeLabel]);
+    const internalNodes = useMemo(() => nodes.map(adaptNode), [nodes, adaptNode]);
+    const internalEdges = useMemo(() => edges.map(adaptEdge), [edges, adaptEdge]);
     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 })] }) });
 }

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

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import type { NumberTickerLocale } from './model.js';
+import type { NumberTickerCompact, NumberTickerCompactOptions, NumberTickerFormatOptions, NumberTickerLocale, NumberTickerValue } from './model.js';
 export interface NumberTickerRenderDetails {
     animating: boolean;
     formattedValue: string;
@@ -9,21 +9,23 @@ export interface NumberTickerDeltaDetails {
     formattedDelta: string;
 }
 export interface NumberTickerProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'prefix'> {
-    value: number;
+    value: NumberTickerValue;
     locale?: NumberTickerLocale;
-    formatOptions?: Intl.NumberFormatOptions;
+    formatOptions?: NumberTickerFormatOptions;
+    compact?: NumberTickerCompact;
+    compactOptions?: NumberTickerCompactOptions;
     prefix?: ReactNode;
     suffix?: ReactNode;
-    renderValue?: (value: number, details: NumberTickerRenderDetails) => ReactNode;
-    getValueLabel?: (value: number, formattedValue: string) => string;
+    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?: Intl.NumberFormatOptions;
-    renderDelta?: (delta: number, details: NumberTickerDeltaDetails) => ReactNode;
+    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, } from './model.js';
-export type { NumberTickerLocale } from './model.js';
+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

@@ -2,7 +2,8 @@ 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';
+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(() => {
@@ -22,7 +23,7 @@ function lettering(content, seed) {
 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) {
+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);
@@ -35,15 +36,17 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     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(() => createNumberFormatter(locale, formatOptions), [localeKey, formatOptionsKey]);
-    const deltaFormatter = useMemo(() => createNumberFormatter(locale, deltaFormatOptions ?? formatOptions), [localeKey, deltaFormatOptionsKey]);
+    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) && Number.isFinite(previousTarget) && Number.isFinite(value)) {
-            const nextDelta = value - previousTarget;
+        if (showDelta && tickerValueChanged(previousTarget, value)) {
+            const nextDelta = subtractTickerValues(value, previousTarget);
             setDelta(nextDelta);
             if (deltaTimerRef.current !== null)
                 clearTimeout(deltaTimerRef.current);
@@ -109,7 +112,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     }, []);
     const formattedValue = formatTickerValue(formatter, displayedValue);
     const finalFormattedValue = formatTickerValue(formatter, value);
-    const announcedFormattedValue = formatTickerValue(formatter, announcedValue);
+    const announcedFormattedValue = formatTickerValue(announcementFormatter, announcedValue);
     const defaultAccessibleLabel = [accessibleAffix(prefix), announcedFormattedValue, accessibleAffix(suffix)]
         .filter(Boolean).join(' ');
     const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
@@ -118,15 +121,15 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
             ? _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 formattedDelta = formatDerivedTickerDelta(deltaFormatter, delta);
         const details = {
-            direction: delta < 0 ? 'decrease' : 'increase',
+            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": delta < 0 ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
+    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, } from './model.js';
+export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, numberTickerUnits, } from './model.js';

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

@@ -1,8 +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 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 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 tickerValueChanged(previous: number, next: number): boolean;
-export declare function canAnimateTickerValue(from: number, to: number, duration: number): boolean;
+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;