@inkra/react 0.3.0 → 0.5.0

package/dist/markdown/index.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
+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 { t } = useInkraLocale();
+    const offset = Number.isFinite(headingLevelOffset) ? Math.trunc(headingLevelOffset) : 0;
+    const resolvedLabels = useMemo(() => ({
+        code: labels?.code ?? t('markdown.code'),
+        plainText: labels?.plainText ?? t('markdown.plain'),
+        copy: labels?.copy ?? t('markdown.copy'),
+        copied: labels?.copied ?? t('markdown.copied'),
+        copyFailed: labels?.copyFailed ?? t('markdown.copyFailed'),
+        table: labels?.table ?? t('markdown.table'),
+        taskChecked: labels?.taskChecked ?? t('markdown.checked'),
+        taskUnchecked: labels?.taskUnchecked ?? t('markdown.unchecked'),
+    }), [t, 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;
@@ -109,7 +111,7 @@ export interface NodeGraphControlsProps extends HTMLAttributes<HTMLDivElement> {
     zoomOutLabel?: string;
     fitViewLabel?: string;
 }
-declare function NodeGraphControls({ className, fitViewOptions, zoomInLabel, zoomOutLabel, fitViewLabel, ...props }: NodeGraphControlsProps): import("react").JSX.Element;
+declare function NodeGraphControls(inkraProps: 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[];

package/dist/node-graph/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 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';
@@ -132,9 +133,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 +148,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;
@@ -238,7 +239,9 @@ function NodeGraphConnectionLine({ fromX, fromY, toX, toY, fromPosition, toPosit
     });
     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 }) {
+function NodeGraphControls(inkraProps) {
+    const { t } = useInkraLocale();
+    const { className, fitViewOptions, zoomInLabel = t('common.zoomIn'), zoomOutLabel = t('common.zoomOut'), fitViewLabel = t('graph.fit'), ...props } = inkraProps;
     const flow = useReactFlow();
     const actions = [
         { label: zoomInLabel, paths: zoomInPaths, run: () => flow.zoomIn() },
@@ -250,7 +253,9 @@ function NodeGraphControls({ className, fitViewOptions, zoomInLabel = 'Zoom in',
 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) {
+function NodeGraphRootInner(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, renderNode, renderEdge, renderEdgeLabel, readOnly = false, emptyState = t('graph.empty'), 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 = t('graph.label'), ...props } = inkraProps;
     const [mounted, setMounted] = useState(false);
     const instanceRef = useRef(null);
     useEffect(() => setMounted(true), []);
@@ -260,30 +265,60 @@ 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 })] }) });
+    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, ariaLabelConfig: {
+                        'node.a11yDescription.default': t('graph.nodeInstructions'),
+                        'node.a11yDescription.keyboardDisabled': t('graph.nodeMoveInstructions'),
+                        'node.a11yDescription.ariaLiveMessage': ({ x, y }) => t('graph.nodeMoved', { x, y }),
+                        'edge.a11yDescription.default': t('graph.edgeInstructions'),
+                        'handle.ariaLabel': t('graph.handle'),
+                    }, 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) {

package/dist/number-ticker/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
@@ -23,7 +24,9 @@ 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, compact = false, compactOptions, 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: localeProp, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+    const { locale: inheritedLocale } = useInkraLocale();
+    const locale = localeProp ?? inheritedLocale;
     const rootRef = useRef(null);
     const frameRef = useRef(null);
     const deltaTimerRef = useRef(null);

package/dist/number-ticker/precision.js

@@ -46,6 +46,14 @@ function roundedDecimal(value, options) {
             : options.minimumFractionDigits ?? 0;
     return { value: rounded, decimals };
 }
+let exactDecimalStringsSupported;
+function supportsExactDecimalStrings() {
+    if (exactDecimalStringsSupported === undefined) {
+        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
+        exactDecimalStringsSupported = probe.format('9007199254740993') === '9007199254740993';
+    }
+    return exactDecimalStringsSupported;
+}
 // Intl accepts exact decimal strings in modern engines, but some engines still
 // turn strings beyond Number.MAX_VALUE into Infinity. BigInt bypasses that path.
 export function formatExactParts(formatter, value) {
@@ -60,8 +68,7 @@ export function formatExactParts(formatter, value) {
         return formatter.formatToParts(BigInt(decimal.toFixed(0)));
     if (decimal.e < 308) {
         const exactFormat = formatter.formatToParts;
-        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
-        if (probe.format('9007199254740993') !== '9007199254740993') {
+        if (!supportsExactDecimalStrings()) {
             throw new RangeError('NumberTicker decimal strings require exact Intl.NumberFormat string support');
         }
         return exactFormat.call(formatter, decimal.toString());

package/dist/overflow-list/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { DropdownMenu } from '../dropdown-menu/index.js';
@@ -27,10 +28,9 @@ function assignRef(ref, value) {
     else if (ref)
         ref.current = value;
 }
-function defaultOverflowLabel(count) {
-    return `More items (${count})`;
-}
-function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel = defaultOverflowLabel, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel: overflowLabelProp, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+    const { t } = useInkraLocale();
+    const overflowLabel = overflowLabelProp ?? ((count) => t('overflow.more', { count }));
     const generatedId = useId();
     const rootRef = useRef(null);
     const triggerRef = useRef(null);
@@ -157,6 +157,9 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
         widthCache.current.clear();
         setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true });
     }, [allKeys, layout.signature, signature]);
+    // Keep observer targets in sync when a resize reveals or hides items without
+    // changing whether an overflow trigger is needed. Memoized visibleEntries
+    // leaves the observer intact during unrelated parent updates.
     useEffect(() => {
         const root = rootRef.current;
         if (!root)
@@ -177,7 +180,7 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
                 frameRef.current = null;
             }
         };
-    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature]);
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature, visibleEntries]);
     useEffect(() => {
         const fonts = typeof document === 'undefined' ? undefined : document.fonts;
         if (!fonts?.addEventListener)
@@ -198,7 +201,7 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
     useEffect(() => {
         if (effectiveLayout.measuring)
             return;
-        const changeKey = `${signature}:${visibleEntries.map(entry => entry.key).join('|')}`;
+        const changeKey = JSON.stringify([signature, visibleEntries.map(entry => entry.key)]);
         if (lastChangeRef.current === changeKey)
             return;
         lastChangeRef.current = changeKey;

package/dist/overlay/Overlay.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { forwardRef, useId } from 'react';
 import { __iconData as closeIcon } from 'lucide-react/dist/esm/icons/x.mjs';
@@ -43,7 +44,9 @@ export const OverlayClose = forwardRef(function OverlayClose(props, ref) {
     return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
 });
 const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-export const OverlayCloseButton = forwardRef(function OverlayCloseButton({ label = 'Close', className, onFocus, ...props }, ref) {
+export const OverlayCloseButton = forwardRef(function OverlayCloseButton(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { label = t('common.close'), className, onFocus, ...props } = inkraProps;
     return _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { ...props, ref: ref, type: "button", size: "icon", variant: "ghost", className: classes('inkra-overlay__close-button', className), "aria-label": label, onFocus: event => {
                                 onFocus?.(event);
                                 const dialog = event.currentTarget.closest('[role="dialog"]');
@@ -52,7 +55,9 @@ export const OverlayCloseButton = forwardRef(function OverlayCloseButton({ label
                                     event.preventDefault();
                             }, children: _jsx(PencilIcon, { paths: closePaths, size: 30, sourceSize: 24, decorative: true }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { side: "bottom", align: "end", children: label }) })] }) });
 });
-export const OverlayHeader = forwardRef(function OverlayHeader({ children, className, divided = true, showClose = true, closeLabel = 'Close', action, ...props }, ref) {
+export const OverlayHeader = forwardRef(function OverlayHeader(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { children, className, divided = true, showClose = true, closeLabel = t('common.close'), action, ...props } = inkraProps;
     const id = useId();
     return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__header', className), "data-divided": divided || undefined, children: [_jsx("div", { className: "inkra-overlay__heading", children: children }), (action || showClose) && _jsxs("div", { className: "inkra-overlay__header-actions", children: [action, showClose && _jsx(OverlayCloseButton, { label: closeLabel })] }), divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-header-${id}` })] });
 });
@@ -63,7 +68,7 @@ export const OverlayFooter = forwardRef(function OverlayFooter({ children, class
     const id = useId();
     return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__footer', className), "data-divided": divided || undefined, "data-align": align, children: [divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-footer-${id}` }), children] });
 });
-export const Overlay = Object.freeze({
+export const Overlay = /* @__PURE__ */ Object.freeze({
     Root: OverlayRoot,
     Trigger: OverlayTrigger,
     Portal: OverlayPortal,

package/dist/overlay/Popover.js

@@ -18,10 +18,10 @@ export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwarde
 export function PopoverPortal({ children, ...props }) {
     return mapPortalChildren(children, child => _jsx(PopoverPrimitive.Portal, { ...props, children: child }));
 }
-export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, collisionPadding = 12, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
     props = usePortalThemeProps(props);
-    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
+    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), collisionPadding: collisionPadding, ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
 });
 export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {
     const id = useId();
@@ -34,7 +34,7 @@ export const PopoverDescription = forwardRef(function PopoverDescription({ child
 export const PopoverClose = forwardRef(function PopoverClose(props, ref) {
     return _jsx(PopoverPrimitive.Close, { ...props, ref: ref });
 });
-export const Popover = Object.freeze({
+export const Popover = /* @__PURE__ */ Object.freeze({
     Root: PopoverRoot,
     Anchor: PopoverAnchor,
     Trigger: PopoverTrigger,

package/dist/overlay/themeBridge.js

@@ -45,6 +45,14 @@ function readThemeSnapshot(node, forcedColors = isForcedColorsActive()) {
         style,
     };
 }
+function sameThemeSnapshot(left, right) {
+    if (left.theme !== right.theme || left.inkraTheme !== right.inkraTheme
+        || left.direction !== right.direction || left.language !== right.language)
+        return false;
+    const entries = Object.entries(left.style);
+    return entries.length === Object.keys(right.style).length
+        && entries.every(([property, value]) => right.style[property] === value);
+}
 export function PortalThemeProvider({ children }) {
     const parentDepth = useContext(PortalLayerDepthContext);
     const depth = parentDepth + 1;
@@ -52,12 +60,16 @@ export function PortalThemeProvider({ children }) {
     const [snapshot, setSnapshot] = useState(emptySnapshot);
     const captureTrigger = useCallback((node) => {
         setTrigger(node);
-        setSnapshot(readThemeSnapshot(node));
+        const next = readThemeSnapshot(node);
+        setSnapshot(current => sameThemeSnapshot(current, next) ? current : next);
     }, []);
     useEffect(() => {
         if (!trigger || typeof MutationObserver === 'undefined')
             return undefined;
-        const refresh = () => setSnapshot(readThemeSnapshot(trigger));
+        const refresh = () => {
+            const next = readThemeSnapshot(trigger);
+            setSnapshot(current => sameThemeSnapshot(current, next) ? current : next);
+        };
         const observer = new MutationObserver(refresh);
         for (let target = trigger; target; target = target.parentElement) {
             observer.observe(target, {

package/dist/pagination/index.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export interface PaginationLabels {
     nav: string;
     first: string;
@@ -16,6 +16,15 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     siblingCount?: number;
     boundaryCount?: number;
     showFirstLast?: boolean;
+    showPreviousNext?: boolean;
+    hideOnSinglePage?: boolean;
+    simple?: boolean;
+    /** Non-interactive content inside each numbered page button. */
+    renderPage?: (page: number, state: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** Non-interactive current/total content in simple mode. */
+    renderSummary?: (page: number, totalPages: number) => ReactNode;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     labels?: Partial<PaginationLabels>;

package/dist/pagination/index.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useEffect, useState } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { clampPage, getPaginationEntries, normalizeTotal } from './model.js';
-const defaultLabels = {
-    nav: 'Pagination', first: 'First page', previous: 'Previous page', next: 'Next page', last: 'Last page',
-    page: page => `Page ${page}`, ellipsis: 'More pages',
-};
-export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, disabled = false, size = 'md', labels, className, ...props }, ref) {
+const defaultLabels = (t) => ({
+    nav: t('pagination.nav'), first: t('pagination.first'), previous: t('common.previousPage'), next: t('common.nextPage'), last: t('pagination.last'),
+    page: page => t('pagination.page', { page }), ellipsis: t('pagination.more'),
+});
+export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, showPreviousNext = true, hideOnSinglePage = false, simple = false, renderPage, renderSummary, disabled = false, size = 'md', labels, className, ...props }, ref) {
+    const { t } = useInkraLocale();
     const total = normalizeTotal(totalPages);
     const [internalPage, setInternalPage] = useState(() => clampPage(defaultPage, total));
     const current = clampPage(page ?? internalPage, total);
-    const text = { ...defaultLabels, ...labels };
+    const text = { ...defaultLabels(t), ...labels };
     useEffect(() => {
         if (page === undefined)
             setInternalPage(value => clampPage(value, total));
@@ -35,7 +37,9 @@ export const Pagination = forwardRef(function Pagination({ totalPages, page, def
             paths.push({ d: 'M19 6v12' });
         return _jsx("li", { children: _jsx(Button, { variant: "ghost", size: size === 'md' ? 'icon' : `icon-${size}`, "aria-label": text[kind], title: text[kind], disabled: disabled || unavailable, onClick: () => select(target), children: _jsx(PencilIcon, { className: "inkra-pagination__arrow", paths: paths, size: 20, sourceSize: 24 }) }) }, kind);
     };
-    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), arrow('previous', current - 1, current <= 1), getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
-                    ? _jsx("li", { children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), _jsx(PencilText, { children: String(entry) })] }) }, entry)
-                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
+    if (hideOnSinglePage && total <= 1)
+        return null;
+    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, "data-simple": simple || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), showPreviousNext && arrow('previous', current - 1, current <= 1), simple ? _jsx("li", { className: "inkra-pagination__summary", "aria-live": "polite", "aria-atomic": "true", children: renderSummary ? renderSummary(current, total) : _jsx(PencilText, { children: `${current} / ${total}` }) }) : getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
+                    ? _jsx("li", { className: "inkra-pagination__page-item", children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), renderPage ? renderPage(entry, { isCurrent: entry === current }) : _jsx(PencilText, { children: String(entry) })] }) }, entry)
+                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), showPreviousNext && arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
 });

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

@@ -48,6 +48,8 @@ export interface PanZoomProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     minScale?: number;
     maxScale?: number;
     wheel?: PanZoomWheelMode;
+    /** Scale increment per wheel delta unit. Must be finite and positive. */
+    wheelStep?: number;
     pinch?: boolean;
     pan?: boolean;
     keyboard?: boolean;