@inkra/react 0.3.0 → 0.5.0

package/dist/tree-select/model.d.ts

@@ -21,11 +21,17 @@ export interface FilteredTreeSelectNodes {
     visibleIds: ReadonlySet<string>;
     expandedIds: ReadonlySet<string>;
 }
-export declare function normalizeTreeSelectNodes(nodes: readonly TreeSelectNode[]): readonly TreeSelectNode[];
-export declare function indexTreeSelectNodes(nodes: readonly TreeSelectNode[]): TreeSelectIndex;
-export declare function filterTreeSelectNodes(nodes: readonly TreeSelectNode[], query: string): FilteredTreeSelectNodes;
-export declare function updateTreeSelectSelection(nodes: readonly TreeSelectNode[], current: readonly string[], toggledId: string, selected: boolean, options: {
+interface TreeSelectSelectionOptions {
     multiple: boolean;
     branchSelection: TreeSelectBranchSelection;
     selectionPropagation: TreeSelectSelectionPropagation;
-}): string[];
+}
+export declare function normalizeTreeSelectNodes(nodes: readonly TreeSelectNode[]): readonly TreeSelectNode[];
+export declare function indexTreeSelectNodes(nodes: readonly TreeSelectNode[]): TreeSelectIndex;
+export declare function filterTreeSelectNodes(nodes: readonly TreeSelectNode[], query: string): FilteredTreeSelectNodes;
+/** Reuse the component's index instead of cloning every node on each search. */
+export declare function filterTreeSelectNodesFromIndex(index: TreeSelectIndex, query: string): FilteredTreeSelectNodes;
+export declare function updateTreeSelectSelection(nodes: readonly TreeSelectNode[], current: readonly string[], toggledId: string, selected: boolean, options: TreeSelectSelectionOptions): string[];
+/** Reuse the component's index for selection and aggregate each subtree once. */
+export declare function updateTreeSelectSelectionFromIndex(index: TreeSelectIndex, current: readonly string[], toggledId: string, selected: boolean, options: TreeSelectSelectionOptions): string[];
+export {};

package/dist/tree-select/model.js

@@ -1,17 +1,27 @@
-function normalizeCopy(nodes, seen) {
+export function normalizeTreeSelectNodes(nodes) {
     const result = [];
-    for (const node of nodes) {
+    const seen = new Set();
+    const stack = [{ nodes, position: 0, result }];
+    // Preserve preorder duplicate handling without using the JavaScript call stack.
+    while (stack.length) {
+        const frame = stack[stack.length - 1];
+        if (frame.position === frame.nodes.length) {
+            if (frame.parent && frame.result.length)
+                frame.parent.children = frame.result;
+            stack.pop();
+            continue;
+        }
+        const node = frame.nodes[frame.position++];
         if (!node.id || seen.has(node.id))
             continue;
         seen.add(node.id);
-        const children = normalizeCopy(node.children ?? [], seen);
-        result.push({ ...node, children: children.length ? children : undefined });
+        const copy = { ...node, children: undefined };
+        frame.result.push(copy);
+        if (node.children?.length)
+            stack.push({ nodes: node.children, position: 0, result: [], parent: copy });
     }
     return result;
 }
-export function normalizeTreeSelectNodes(nodes) {
-    return normalizeCopy(nodes, new Set());
-}
 export function indexTreeSelectNodes(nodes) {
     const normalized = normalizeTreeSelectNodes(nodes);
     const orderedIds = [];
@@ -19,116 +29,134 @@ export function indexTreeSelectNodes(nodes) {
     const parentById = new Map();
     const branchIds = new Set();
     const disabledIds = new Set();
-    const visit = (items, parentId) => {
-        for (const node of items) {
-            orderedIds.push(node.id);
-            byId.set(node.id, node);
-            parentById.set(node.id, parentId);
-            if (node.disabled)
-                disabledIds.add(node.id);
-            if (node.children?.length) {
-                branchIds.add(node.id);
-                visit(node.children, node.id);
+    const stack = normalized.map(node => ({ node, parentId: null })).reverse();
+    while (stack.length) {
+        const { node, parentId } = stack.pop();
+        orderedIds.push(node.id);
+        byId.set(node.id, node);
+        parentById.set(node.id, parentId);
+        if (node.disabled)
+            disabledIds.add(node.id);
+        if (node.children?.length) {
+            branchIds.add(node.id);
+            for (let position = node.children.length - 1; position >= 0; position--) {
+                stack.push({ node: node.children[position], parentId: node.id });
             }
         }
-    };
-    visit(normalized, null);
+    }
     return { nodes: normalized, orderedIds, byId, parentById, branchIds, disabledIds };
 }
 function addVisibleSubtree(node, visibleIds, expandedIds) {
-    visibleIds.add(node.id);
-    if (node.children?.length) {
-        expandedIds.add(node.id);
-        for (const child of node.children)
-            addVisibleSubtree(child, visibleIds, expandedIds);
+    const stack = [node];
+    while (stack.length) {
+        const current = stack.pop();
+        visibleIds.add(current.id);
+        if (current.children?.length) {
+            expandedIds?.add(current.id);
+            for (let position = current.children.length - 1; position >= 0; position--) {
+                stack.push(current.children[position]);
+            }
+        }
     }
 }
-export function filterTreeSelectNodes(nodes, query) {
-    const normalized = normalizeTreeSelectNodes(nodes);
+function filterNormalizedTreeSelectNodes(nodes, query) {
     const needle = query.trim().toLocaleLowerCase();
     const visibleIds = new Set();
     const expandedIds = new Set();
     if (!needle) {
-        for (const node of normalized)
-            addVisibleSubtree(node, visibleIds, new Set());
-        return { nodes: normalized, visibleIds, expandedIds };
+        for (const node of nodes)
+            addVisibleSubtree(node, visibleIds);
+        return { nodes, visibleIds, expandedIds };
     }
-    const visit = (node) => {
+    const result = [];
+    const stack = nodes.map(node => ({ node, destination: result })).reverse();
+    while (stack.length) {
+        const { node, destination, children } = stack.pop();
+        if (children) {
+            if (children.length) {
+                visibleIds.add(node.id);
+                expandedIds.add(node.id);
+                destination.push({ ...node, children });
+            }
+            continue;
+        }
         const haystack = `${node.label} ${node.keywords ?? ''}`.toLocaleLowerCase();
         if (haystack.includes(needle)) {
             addVisibleSubtree(node, visibleIds, expandedIds);
-            return node;
+            destination.push(node);
+        }
+        else if (node.children?.length) {
+            const matches = [];
+            stack.push({ node, destination, children: matches });
+            for (let position = node.children.length - 1; position >= 0; position--) {
+                stack.push({ node: node.children[position], destination: matches });
+            }
         }
-        const children = (node.children ?? []).map(visit).filter((child) => child !== null);
-        if (!children.length)
-            return null;
-        visibleIds.add(node.id);
-        expandedIds.add(node.id);
-        return { ...node, children };
-    };
-    return {
-        nodes: normalized.map(visit).filter((node) => node !== null),
-        visibleIds,
-        expandedIds,
-    };
+    }
+    return { nodes: result, visibleIds, expandedIds };
+}
+export function filterTreeSelectNodes(nodes, query) {
+    return filterNormalizedTreeSelectNodes(normalizeTreeSelectNodes(nodes), query);
+}
+/** Reuse the component's index instead of cloning every node on each search. */
+export function filterTreeSelectNodesFromIndex(index, query) {
+    return filterNormalizedTreeSelectNodes(index.nodes, query);
 }
 function isSelectable(index, id, branchSelection) {
     return index.byId.has(id)
         && !index.disabledIds.has(id)
         && (branchSelection === 'all' || !index.branchIds.has(id));
 }
-function descendants(index, id) {
-    const node = index.byId.get(id);
-    if (!node?.children?.length)
-        return [];
-    const result = [];
-    const visit = (items) => {
-        for (const child of items) {
-            result.push(child.id);
-            if (child.children?.length)
-                visit(child.children);
-        }
-    };
-    visit(node.children);
-    return result;
-}
 function orderedSelection(index, selected, previous) {
     const known = index.orderedIds.filter(id => selected.has(id));
-    const unknown = previous.filter((id, position) => !index.byId.has(id) && previous.indexOf(id) === position);
+    const unknown = [...new Set(previous)].filter(id => !index.byId.has(id));
     return [...known, ...unknown];
 }
 export function updateTreeSelectSelection(nodes, current, toggledId, selected, options) {
-    const index = indexTreeSelectNodes(nodes);
+    return updateTreeSelectSelectionFromIndex(indexTreeSelectNodes(nodes), current, toggledId, selected, options);
+}
+/** Reuse the component's index for selection and aggregate each subtree once. */
+export function updateTreeSelectSelectionFromIndex(index, current, toggledId, selected, options) {
     if (!isSelectable(index, toggledId, options.branchSelection))
         return [...current];
     if (!options.multiple)
         return selected ? [toggledId] : [];
     const next = new Set(current);
-    const affected = [toggledId];
-    if (options.selectionPropagation !== 'none' && index.branchIds.has(toggledId)) {
-        affected.push(...descendants(index, toggledId));
-    }
-    for (const id of affected) {
-        if (!isSelectable(index, id, options.branchSelection))
-            continue;
-        if (selected)
-            next.add(id);
-        else
-            next.delete(id);
+    const stack = [index.byId.get(toggledId)];
+    while (stack.length) {
+        const node = stack.pop();
+        if (isSelectable(index, node.id, options.branchSelection)) {
+            if (selected)
+                next.add(node.id);
+            else
+                next.delete(node.id);
+        }
+        if (options.selectionPropagation !== 'none' && node.children?.length) {
+            for (const child of node.children)
+                stack.push(child);
+        }
     }
     if (options.selectionPropagation === 'both' && options.branchSelection === 'all') {
-        const branches = index.orderedIds.filter(id => index.branchIds.has(id)).reverse();
-        for (const branchId of branches) {
-            if (index.disabledIds.has(branchId))
-                continue;
-            const selectableDescendants = descendants(index, branchId)
-                .filter(id => isSelectable(index, id, options.branchSelection));
-            if (!selectableDescendants.length)
-                continue;
-            if (selectableDescendants.every(id => next.has(id)))
-                next.add(branchId);
-            else
-                next.delete(branchId);
+        const summaries = new Map();
+        // Reverse preorder visits children before parents. Include descendants under
+        // disabled branches, but never count a disabled node itself as selectable.
+        for (let position = index.orderedIds.length - 1; position >= 0; position--) {
+            const id = index.orderedIds[position];
+            const summary = summaries.get(id) ?? { count: 0, unselected: 0 };
+            const enabled = !index.disabledIds.has(id);
+            if (enabled && summary.count > 0) {
+                if (summary.unselected === 0)
+                    next.add(id);
+                else
+                    next.delete(id);
+            }
+            const parentId = index.parentById.get(id);
+            if (parentId != null) {
+                const parent = summaries.get(parentId) ?? { count: 0, unselected: 0 };
+                parent.count += summary.count + (enabled ? 1 : 0);
+                parent.unselected += summary.unselected + (enabled && !next.has(id) ? 1 : 0);
+                summaries.set(parentId, parent);
+            }
         }
     }
     return orderedSelection(index, next, current);

package/dist/typewriter/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { splitTypewriterGraphemes, typewriterDelayAfter } from './model.js';
@@ -19,6 +19,14 @@ function usePrefersReducedMotion() {
 function safeDuration(value) {
     return Number.isFinite(value) ? Math.max(0, value) : 0;
 }
+const TypewriterGrapheme = memo(function TypewriterGrapheme({ grapheme, index, revealed: isRevealed }) {
+    if (grapheme === '\n')
+        return _jsx("br", {});
+    if (/^\s+$/u.test(grapheme)) {
+        return _jsx("span", { className: "inkra-typewriter__space", "data-revealed": isRevealed, children: grapheme });
+    }
+    return _jsx(PencilText, { className: "inkra-typewriter__grapheme", "data-revealed": isRevealed, seed: `typewriter-${index}-${grapheme}`, children: grapheme });
+});
 export const Typewriter = forwardRef(function Typewriter({ children, className, defaultPaused = false, locale, onComplete, onPausedChange, paused, punctuationDelay = 240, speed = 48, startDelay = 0, ...props }, forwardedRef) {
     const graphemes = useMemo(() => splitTypewriterGraphemes(children, locale), [children, locale]);
     const [internalPaused, setInternalPaused] = useState(defaultPaused);
@@ -88,14 +96,6 @@ export const Typewriter = forwardRef(function Typewriter({ children, className,
     }, [children, complete, graphemes, isPaused, punctuationDelay, reducedMotion, revealed, speed, startDelay]);
     const classes = ['inkra-typewriter', className].filter(Boolean).join(' ');
     const state = complete ? 'complete' : isPaused ? 'paused' : 'typing';
-    return _jsxs("span", { ...props, className: classes, "data-state": state, "data-revealed": revealed, "data-total": graphemes.length, children: [_jsx("span", { "aria-hidden": "true", className: "inkra-typewriter__visual", children: graphemes.map((grapheme, index) => {
-                    const isRevealed = index < revealed;
-                    if (grapheme === '\n')
-                        return _jsx("br", {}, `line-${index}`);
-                    if (/^\s+$/u.test(grapheme)) {
-                        return _jsx("span", { className: "inkra-typewriter__space", "data-revealed": isRevealed, children: grapheme }, `space-${index}`);
-                    }
-                    return _jsx(PencilText, { className: "inkra-typewriter__grapheme", "data-revealed": isRevealed, seed: `typewriter-${index}-${grapheme}`, children: grapheme }, `${index}-${grapheme}`);
-                }) }), _jsx("span", { className: "inkra-typewriter__accessible", children: children })] });
+    return _jsxs("span", { ...props, className: classes, "data-state": state, "data-revealed": revealed, "data-total": graphemes.length, children: [_jsx("span", { "aria-hidden": "true", className: "inkra-typewriter__visual", children: graphemes.map((grapheme, index) => _jsx(TypewriterGrapheme, { grapheme: grapheme, index: index, revealed: index < revealed }, `${index}-${grapheme}`)) }), _jsx("span", { className: "inkra-typewriter__accessible", children: children })] });
 });
 export { isTypewriterPunctuation, splitTypewriterGraphemes, typewriterDelayAfter, } from './model.js';

package/dist/upload/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useRef, useState, } from 'react';
+import { useInkraLocale } from '../i18n/index.js';
+import { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { Progress } from '../display/index.js';
 import { PencilIcon } from '../PencilIcon.js';
@@ -10,23 +11,23 @@ const uploadPaths = [
     { d: 'm17 8-5-5-5 5' },
     { d: 'M12 3v12' },
 ];
-const defaultLabels = {
-    browse: 'Choose files',
-    drop: 'or drop files here',
-    selected: 'Selected',
-    upload: 'Upload',
-    uploading: 'Uploading',
-    success: 'Uploaded',
-    error: 'Upload failed',
-    cancelled: 'Cancelled',
-    retry: 'Retry',
-    cancel: 'Cancel',
-    remove: 'Remove',
-    rejected: 'Files not added',
-    acceptError: 'This file type is not accepted.',
-    sizeError: maxSize => `File exceeds the ${formatBytes(maxSize)} limit.`,
-    countError: maxFiles => `Only ${maxFiles} file${maxFiles === 1 ? '' : 's'} may be selected.`,
-};
+const defaultLabels = (t) => ({
+    browse: t('upload.browse'),
+    drop: t('upload.drop'),
+    selected: t('common.selected'),
+    upload: t('upload.upload'),
+    uploading: t('upload.uploading'),
+    success: t('upload.success'),
+    error: t('upload.failed'),
+    cancelled: t('upload.cancelled'),
+    retry: t('common.retry'),
+    cancel: t('common.cancel'),
+    remove: t('common.remove'),
+    rejected: t('upload.rejected'),
+    acceptError: t('upload.acceptError'),
+    sizeError: maxSize => t('upload.sizeError', { size: formatBytes(maxSize) }),
+    countError: maxFiles => t(maxFiles === 1 ? 'upload.countErrorOne' : 'upload.countError', { count: maxFiles }),
+});
 function formatBytes(value) {
     if (value < 1024)
         return `${value} B`;
@@ -56,7 +57,11 @@ function asErrorMessage(error, fallback) {
 function statusLabel(status, labels) {
     return labels[status];
 }
-export const Upload = forwardRef(function Upload({ accept, autoUpload = true, capture, className, defaultFiles = [], disabled = false, files, inputProps, labels: labelOverrides, maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, multiple = true, onFilesChange, onReject, onUpload, validate, ...props }, ref) {
+const UploadRow = memo(function UploadRow({ item, labels, disabled, canUpload, startUpload, cancel, remove }) {
+    return _jsx("li", { className: "inkra-upload__item", "data-status": item.status, children: _jsxs(PencilSurface, { className: "inkra-upload__item-surface", variant: "paper", radius: 8, children: [_jsxs("div", { className: "inkra-upload__file", children: [_jsx(PencilText, { className: "inkra-upload__name", ellipsis: true, children: item.file.name }), _jsxs("span", { className: "inkra-upload__meta", children: [formatBytes(item.file.size), " \u00B7 ", statusLabel(item.status, labels)] }), item.status === 'uploading' && _jsx(Progress, { size: "sm", value: item.progress ?? 0, "aria-label": `${item.file.name}: ${Math.round(item.progress ?? 0)}%` }), item.error && _jsx("span", { className: "inkra-upload__error", children: item.error })] }), _jsxs("div", { className: "inkra-upload__actions", children: [item.status === 'uploading' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => cancel(item.id), children: labels.cancel }), canUpload && item.status === 'selected' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id), children: labels.upload }), canUpload && (item.status === 'error' || item.status === 'cancelled') && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id, 'retry'), children: labels.retry }), _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => remove(item.id), children: labels.remove })] })] }) });
+});
+export const Upload = forwardRef(function Upload({ accept, autoUpload = true, capture, className, defaultFiles = [], disabled = false, files, inputProps, labels: labelOverrides, maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, multiple = true, onFilesChange, onReject, onUpload, validate, 'aria-label': ariaLabel, ...props }, ref) {
+    const { t } = useInkraLocale();
     const instanceId = useId();
     const inputRef = useRef(null);
     const itemCounter = useRef(0);
@@ -71,7 +76,15 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
     const itemsRef = useRef(items);
     itemsRef.current = items;
     disabledRef.current = disabled;
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const localizedDefaults = useMemo(() => defaultLabels(t), [t]);
+    const labelValues = { ...localizedDefaults, ...labelOverrides };
+    // Snapshot scalar/function values so same-object label edits remain observable.
+    const labels = useMemo(() => labelValues, [
+        labelValues.browse, labelValues.drop, labelValues.selected, labelValues.upload,
+        labelValues.uploading, labelValues.success, labelValues.error, labelValues.cancelled,
+        labelValues.retry, labelValues.cancel, labelValues.remove, labelValues.rejected,
+        labelValues.acceptError, labelValues.sizeError, labelValues.countError,
+    ]);
     const commitRef = useRef(() => { });
     const commit = (next, details) => {
         if (!controlled) {
@@ -81,7 +94,7 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
         onFilesChange?.(next, details);
     };
     commitRef.current = commit;
-    const updateItem = (id, update, details) => {
+    const updateItem = useCallback((id, update, details) => {
         const current = itemsRef.current;
         const index = current.findIndex(item => item.id === id);
         if (index < 0)
@@ -89,8 +102,8 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
         const next = [...current];
         next[index] = update(current[index]);
         commitRef.current(next, { ...details, item: next[index] });
-    };
-    const startUpload = (id, reason = 'upload-start') => {
+    }, []);
+    const startUpload = useCallback((id, reason = 'upload-start') => {
         const item = itemsRef.current.find(candidate => candidate.id === id);
         if (!item || !onUpload || disabledRef.current)
             return;
@@ -123,7 +136,7 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
             controllers.current.delete(id);
             updateItem(id, current => ({ ...current, status: 'error', progress: undefined, error: asErrorMessage(error, labels.error) }), { reason: 'upload-error' });
         });
-    };
+    }, [onUpload, labels.error, updateItem]);
     const addFiles = (incoming) => {
         if (disabled || incoming.length === 0)
             return;
@@ -173,21 +186,21 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
                 });
             });
     };
-    const remove = (id) => {
-        if (disabled)
+    const remove = useCallback((id) => {
+        if (disabledRef.current)
             return;
         controllers.current.get(id)?.controller.abort();
         controllers.current.delete(id);
         const item = itemsRef.current.find(candidate => candidate.id === id);
         commitRef.current(itemsRef.current.filter(candidate => candidate.id !== id), { reason: 'remove', item });
-    };
-    const cancel = (id) => {
-        if (disabled)
+    }, []);
+    const cancel = useCallback((id) => {
+        if (disabledRef.current)
             return;
         controllers.current.get(id)?.controller.abort();
         controllers.current.delete(id);
         updateItem(id, item => ({ ...item, status: 'cancelled', progress: undefined, error: undefined }), { reason: 'cancel' });
-    };
+    }, [updateItem]);
     useEffect(() => {
         mounted.current = true;
         return () => {
@@ -205,6 +218,10 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
             }
         });
     }, [items]);
+    useEffect(() => {
+        if (disabled)
+            setDragActive(false);
+    }, [disabled]);
     const openPicker = () => {
         if (!disabled)
             inputRef.current?.click();
@@ -220,11 +237,11 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
         setDragActive(false);
         addFiles(Array.from(event.dataTransfer.files));
     };
-    return _jsxs("div", { ...props, ref: ref, className: ['inkra-upload', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, children: [_jsx("input", { ...inputProps, ref: inputRef, className: ['inkra-upload__input', inputProps?.className].filter(Boolean).join(' '), type: "file", accept: accept, capture: capture, multiple: multiple, disabled: disabled, onChange: event => {
+    return _jsxs("div", { ...props, "aria-label": ariaLabel, ref: ref, className: ['inkra-upload', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, children: [_jsx("input", { ...inputProps, "aria-hidden": "true", ref: inputRef, className: ['inkra-upload__input', inputProps?.className].filter(Boolean).join(' '), type: "file", accept: accept, capture: capture, multiple: multiple, disabled: disabled, tabIndex: -1, onChange: event => {
                     addFiles(Array.from(event.currentTarget.files ?? []));
                     event.currentTarget.value = '';
-                } }), _jsxs(PencilSurface, { as: "div", className: "inkra-upload__dropzone", "data-drag-active": dragActive || undefined, variant: dragActive ? 'selection' : 'outline', role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, onClick: openPicker, onKeyDown: handleKeyDown, onDragEnter: event => { event.preventDefault(); if (!disabled)
+                } }), _jsxs(PencilSurface, { as: "div", className: "inkra-upload__dropzone", "data-drag-active": dragActive || undefined, variant: dragActive ? 'selection' : 'outline', role: "button", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, onClick: openPicker, onKeyDown: handleKeyDown, onDragEnter: event => { event.preventDefault(); if (!disabled)
                     setDragActive(true); }, onDragOver: event => { event.preventDefault(); if (!disabled)
                     event.dataTransfer.dropEffect = 'copy'; }, onDragLeave: event => { if (!event.currentTarget.contains(event.relatedTarget))
-                    setDragActive(false); }, onDrop: handleDrop, children: [_jsx(PencilIcon, { className: "inkra-upload__icon", paths: uploadPaths, size: 32, sourceSize: 24 }), _jsxs("span", { className: "inkra-upload__prompt", children: [_jsx(PencilText, { children: labels.browse }), _jsx("span", { children: labels.drop })] }), accept && _jsx("span", { className: "inkra-upload__hint", children: accept })] }), rejections.length > 0 && _jsxs("div", { className: "inkra-upload__rejections", role: "alert", children: [_jsx("strong", { children: labels.rejected }), _jsx("ul", { children: rejections.map((rejection, index) => _jsxs("li", { children: [rejection.file.name, ": ", rejection.message] }, `${rejection.file.name}-${index}`)) })] }), items.length > 0 && _jsx("ul", { className: "inkra-upload__list", "aria-live": "polite", children: items.map(item => _jsx("li", { className: "inkra-upload__item", "data-status": item.status, children: _jsxs(PencilSurface, { className: "inkra-upload__item-surface", variant: "paper", radius: 8, children: [_jsxs("div", { className: "inkra-upload__file", children: [_jsx("span", { className: "inkra-upload__name", children: item.file.name }), _jsxs("span", { className: "inkra-upload__meta", children: [formatBytes(item.file.size), " \u00B7 ", statusLabel(item.status, labels)] }), item.status === 'uploading' && _jsx(Progress, { size: "sm", value: item.progress ?? 0, "aria-label": `${item.file.name}: ${Math.round(item.progress ?? 0)}%` }), item.error && _jsx("span", { className: "inkra-upload__error", children: item.error })] }), _jsxs("div", { className: "inkra-upload__actions", children: [item.status === 'uploading' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => cancel(item.id), children: labels.cancel }), onUpload && item.status === 'selected' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id), children: labels.upload }), onUpload && (item.status === 'error' || item.status === 'cancelled') && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id, 'retry'), children: labels.retry }), _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => remove(item.id), children: labels.remove })] })] }) }, item.id)) })] });
+                    setDragActive(false); }, onDrop: handleDrop, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-upload__focus-ring", seed: `${instanceId}-focus`, variant: "outline" }), _jsx(PencilIcon, { className: "inkra-upload__icon", paths: uploadPaths, size: 32, sourceSize: 24 }), _jsxs("span", { className: "inkra-upload__prompt", children: [_jsx(PencilText, { children: labels.browse }), _jsx("span", { children: labels.drop })] }), accept && _jsx("span", { className: "inkra-upload__hint", children: accept })] }), rejections.length > 0 && _jsxs("div", { className: "inkra-upload__rejections", role: "alert", children: [_jsx("strong", { children: labels.rejected }), _jsx("ul", { children: rejections.map((rejection, index) => _jsxs("li", { children: [rejection.file.name, ": ", rejection.message] }, `${rejection.file.name}-${index}`)) })] }), items.length > 0 && _jsx("ul", { className: "inkra-upload__list", "aria-live": "polite", children: items.map(item => _jsx(UploadRow, { item: item, labels: labels, disabled: disabled, canUpload: Boolean(onUpload), startUpload: startUpload, cancel: cancel, remove: remove }, item.id)) })] });
 });

package/dist/virtual-list/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { useInkraLocale } from '../i18n/index.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
@@ -12,7 +13,9 @@ function classes(...values) {
 function toEngineScrollOptions(options) {
     return options;
 }
-function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabel = 'No items', estimateSize, gap, getItemProps, getScrollElement, height, initialOffset = 0, itemKey, items, listLabel, listRole = 'list', measureItems = false, onKeyDown, overscan, paddingEnd, paddingStart, renderItem, role: roleProp, scrollMargin, ssrItemCount, style, tabIndex, ...props }, forwardedRef) {
+function VirtualListInner(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel, className, empty, emptyLabel = t('common.noItems'), estimateSize, gap, getItemProps, getScrollElement, height, initialOffset = 0, itemKey, items, listLabel, listRole = 'list', measureItems = false, onKeyDown, overscan, paddingEnd, paddingStart, renderItem, role: roleProp, scrollMargin, ssrItemCount, style, tabIndex, ...props } = inkraProps;
     const rootRef = useRef(null);
     const itemsRef = useRef(items);
     itemsRef.current = items;
@@ -26,12 +29,15 @@ function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabe
     const safePaddingEnd = normalizeVirtualListSpacing(paddingEnd);
     useEffect(() => setHydrated(true), []);
     const resolveScrollElement = useCallback(() => getScrollElement?.() ?? rootRef.current, [getScrollElement]);
-    const resolveItemKey = useCallback((index) => itemKey(itemsRef.current[index], index), [itemKey]);
+    const resolveItemKey = useCallback(
+    // The engine caches measurements by this callback, not by the items array
+    // or estimateSize callback. Invalidate it for immutable data/estimate updates.
+    (index) => itemKey(items[index], index), [items, itemKey, estimateSize]);
     const resolveEstimateSize = useCallback((index) => {
-        const item = itemsRef.current[index];
+        const item = items[index];
         const value = typeof estimateSize === 'function' ? estimateSize(item, index) : estimateSize;
         return normalizeVirtualListSize(value);
-    }, [estimateSize]);
+    }, [items, estimateSize]);
     const virtualizer = useVirtualizer({
         count: items.length,
         enabled: hydrated && items.length > 0,
@@ -90,10 +96,9 @@ function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabe
             virtualizer.scrollToIndex(items.length - 1, { align: 'end' });
         }
     }
-    const fallbackIndexes = getVirtualListSsrIndexes(items.length, ssrItemCount);
     const renderedRows = virtualized
         ? virtualRows.map(row => ({ index: row.index, key: row.key, start: row.start }))
-        : fallbackIndexes.map(index => ({ index, key: itemKey(items[index], index), start: null }));
+        : getVirtualListSsrIndexes(items.length, ssrItemCount).map(index => ({ index, key: itemKey(items[index], index), start: null }));
     const rootStyle = externalScroll ? style : { blockSize: height, ...style };
     const content = _jsxs(_Fragment, { children: [_jsx("ul", { "aria-label": listLabel, className: "inkra-virtual-list__items", role: listRole, style: virtualized ? { blockSize: `${virtualizer.getTotalSize()}px` } : undefined, children: renderedRows.map(row => {
                     const item = items[row.index];