npm - entangle-ui - Versions diffs - 0.9.0 → 0.11.0 - Mend

entangle-ui 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1053) hide show

package/dist/esm/components/controls/TagInput/TagInput.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId, useState, useRef, useMemo, useCallback } from 'react';
-import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { FormLabel } from '../../form/FormLabel.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { cx } from '../../../utils/cx.js';
@@ -159,7 +159,9 @@ function TagInput({ value, defaultValue, onChange, placeholder, separators = DEF
         }
     }, []);
     const renderChip = (tag, index) => {
-        const remove = () => removeTagAt(index);
+        const remove = () => {
+            removeTagAt(index);
+        };
         if (renderTag) {
             const state = {
                 tag,

package/dist/esm/components/controls/TagInput/TagInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","sources":["../../../../../../src/components/controls/TagInput/TagInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBA;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACF;AAEA;;;;;;;;;;;;;;AAcG;;AAiCD;AACA;AACA;AACA;AAEA;;;;AAIE;AACD;;;AAKD;AACA;;;AAKA;AACA;AAEA;;AAOI;AACA;AACE;AAAoB;AACpB;;;AAGA;AACA;;;AAGA;AACA;;;;AAIA;AACE;AACA;;AAEF;AACE;AACA;;;AAGJ;AACF;AAIF;;AAGI;AAAW;;AAEX;;AAKJ;;;;;AAKE;AAIF;AAEI;;;;;;;AAME;;;;;AAGO;;;;;;AAOT;;AAEE;;AAEJ;AAIF;AAEI;;;;;;;;;;;;AAeA;AACE;;;AAEA;;;;;;;AAQN;;;;;;;AAOA;;;;;AAMM;;;AAMN;;;AAGI;;;;;;;;AAaF;AAqBF;AAEA;;;;;;;;;;AAiDU;AAeZ;AAEA;;"}
1	+ {"version":3,"file":"TagInput.js","sources":["src/components/controls/TagInput/TagInput.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useId, useMemo, useRef, useState } from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { FormLabel } from '@/components/form/FormLabel';\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { cx } from '@/utils/cx';\n\nimport {\n containerStyle,\n inputStyle,\n tagLabelStyle,\n tagRecipe,\n tagRemoveStyle,\n wrapperRecipe,\n} from './TagInput.css';\n\nimport type {\n TagInputProps,\n TagInputRenderTagState,\n TagInputSeparator,\n} from './TagInput.types';\n\nconst SEPARATOR_KEY: Record<TagInputSeparator, string> = {\n Enter: 'Enter',\n Comma: ',',\n Space: ' ',\n Tab: 'Tab',\n};\n\nconst DEFAULT_SEPARATORS: TagInputSeparator[] = ['Enter', 'Comma'];\n\nfunction defaultNormalize(value: string): string {\n return value.trim();\n}\n\n/*\n Multi-value input that captures a list of strings (\"tags\") rendered as\n * removable chips. Supports controlled and uncontrolled modes, validation,\n * configurable commit keys, and custom chip rendering.\n \n @example\n * ```tsx\n * <TagInput\n * label=\"Keywords\"\n * placeholder=\"Add a keyword...\"\n * defaultValue={['react', 'typescript']}\n * onChange={setTags}\n * />\n * ```\n /\nexport function TagInput({\n value,\n defaultValue,\n onChange,\n placeholder,\n separators = DEFAULT_SEPARATORS,\n addOnBlur = false,\n allowDuplicates = false,\n max,\n validate,\n normalize = defaultNormalize,\n onValidate,\n renderTag,\n size = 'md',\n variant = 'default',\n label,\n helperText,\n error = false,\n errorMessage,\n disabled = false,\n required = false,\n readOnly = false,\n name,\n inputAriaLabel,\n inputRef: inputRefProp,\n className,\n style,\n testId,\n id: idProp,\n ref,\n ...rest\n}: TagInputProps) {\n const autoId = useId();\n const fieldId = idProp ?? autoId;\n const labelId = `${fieldId}-label`;\n const helperId = `${fieldId}-helper`;\n\n const [tags, setTags] = useControlledState<string[]>({\n value,\n defaultValue,\n onChange,\n fallback: [],\n });\n\n const [draft, setDraft] = useState('');\n const [focused, setFocused] = useState(false);\n\n const innerInputRef = useRef<HTMLInputElement \| null>(null);\n const wrapperRef = useRef<HTMLDivElement \| null>(null);\n\n const setInputRef = useMergedRef(innerInputRef, inputRefProp);\n const setWrapperRef = useMergedRef(wrapperRef, ref);\n\n const atMax = typeof max === 'number' && tags.length >= max;\n const inputDisabled = disabled \|\| readOnly \|\| atMax;\n\n const separatorKeys = useMemo(\n () => new Set(separators.map(s => SEPARATOR_KEY[s])),\n [separators]\n );\n\n const tryAppend = useCallback(\n (current: string[], raw: string): string[] \| null => {\n const normalized = normalize(raw);\n if (normalized.length === 0) {\n if (raw.length > 0) onValidate?.(raw, 'empty');\n return null;\n }\n if (typeof max === 'number' && current.length >= max) {\n onValidate?.(raw, 'max');\n return null;\n }\n if (!allowDuplicates && current.includes(normalized)) {\n onValidate?.(raw, 'duplicate');\n return null;\n }\n if (validate) {\n const result = validate(normalized, current);\n if (result === false) {\n onValidate?.(raw, 'invalid');\n return null;\n }\n if (typeof result === 'string') {\n onValidate?.(raw, result);\n return null;\n }\n }\n return [...current, normalized];\n },\n [allowDuplicates, max, normalize, onValidate, validate]\n );\n\n const commitTag = useCallback(\n (raw: string): boolean => {\n const next = tryAppend(tags, raw);\n if (!next) return false;\n setTags(next);\n return true;\n },\n [setTags, tags, tryAppend]\n );\n\n const removeTagAt = useCallback(\n (index: number) => {\n if (index < 0 \|\| index >= tags.length) return;\n const next = tags.slice(0, index).concat(tags.slice(index + 1));\n setTags(next);\n },\n [setTags, tags]\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (inputDisabled) return;\n\n if (separatorKeys.has(event.key)) {\n // Tab as separator: only commit when there's a draft, otherwise let\n // the focus move out naturally.\n if (event.key === 'Tab' && draft.length === 0) return;\n if (draft.length > 0) {\n event.preventDefault();\n if (commitTag(draft)) setDraft('');\n } else if (event.key === 'Enter') {\n // Prevent submitting an enclosing form on empty Enter.\n event.preventDefault();\n }\n return;\n }\n\n if (event.key === 'Backspace' && draft.length === 0 && tags.length > 0) {\n event.preventDefault();\n removeTagAt(tags.length - 1);\n }\n },\n [commitTag, draft, inputDisabled, removeTagAt, separatorKeys, tags.length]\n );\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const next = event.target.value;\n // If the user typed/pasted a separator character (e.g. comma), commit\n // each piece. Newlines are split too so multi-line paste still works.\n const splitChars = Array.from(separatorKeys).filter(\n k => k !== 'Enter' && k !== 'Tab'\n );\n if (splitChars.length === 0 \|\| !splitChars.some(c => next.includes(c))) {\n setDraft(next);\n return;\n }\n\n const pattern = new RegExp(`[${splitChars.map(c => `\\\\${c}`).join('')}]`);\n const parts = next.split(pattern);\n const trailing = parts.pop() ?? '';\n let working = tags;\n for (const part of parts) {\n if (part.length === 0) continue;\n const appended = tryAppend(working, part);\n if (appended) working = appended;\n }\n if (working !== tags) setTags(working);\n setDraft(trailing);\n },\n [separatorKeys, setTags, tags, tryAppend]\n );\n\n const handleBlur = useCallback(() => {\n setFocused(false);\n if (addOnBlur && draft.length > 0) {\n if (commitTag(draft)) setDraft('');\n }\n }, [addOnBlur, commitTag, draft]);\n\n const handleWrapperMouseDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n // Forward clicks on empty padding to the input, but do not steal focus\n // from chip remove buttons.\n if (event.target === wrapperRef.current) {\n event.preventDefault();\n innerInputRef.current?.focus();\n }\n },\n []\n );\n\n const renderChip = (tag: string, index: number) => {\n const remove = () => {\n removeTagAt(index);\n };\n if (renderTag) {\n const state: TagInputRenderTagState = {\n tag,\n index,\n disabled,\n remove,\n };\n return (\n <React.Fragment key={`${tag}-${String(index)}`}>\n {renderTag(state)}\n </React.Fragment>\n );\n }\n\n return (\n <span\n key={`${tag}-${String(index)}`}\n className={tagRecipe({ size })}\n data-testid={testId ? `${testId}-tag-${String(index)}` : undefined}\n >\n <span className={tagLabelStyle}>{tag}</span>\n {!readOnly && (\n <button\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n aria-label={`Remove ${tag}`}\n className={tagRemoveStyle}\n onClick={remove}\n >\n <CloseIcon size=\"sm\" decorative />\n </button>\n )}\n </span>\n );\n };\n\n const showHelperText = error && errorMessage ? errorMessage : helperText;\n const formValue = tags.join(',');\n\n return (\n <div className={cx(containerStyle, className)} style={style}>\n {label && (\n <FormLabel\n id={labelId}\n htmlFor={fieldId}\n required={required}\n disabled={disabled}\n >\n {label}\n </FormLabel>\n )}\n\n {/\n The onMouseDown handler only forwards clicks on the wrapper padding to\n focus the inner native <input>, which is the actual accessible control\n (focusable, keyboard-driven). The wrapper is presentational, so no\n widget role belongs on it.\n /}\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={setWrapperRef}\n className={wrapperRecipe({\n size,\n variant,\n focused,\n error,\n disabled,\n })}\n onMouseDown={handleWrapperMouseDown}\n data-testid={testId}\n {...rest}\n >\n {tags.map((tag, index) => renderChip(tag, index))}\n\n {!readOnly && (\n <input\n ref={setInputRef}\n id={fieldId}\n type=\"text\"\n value={draft}\n placeholder={tags.length === 0 ? placeholder : undefined}\n disabled={inputDisabled}\n required={required && tags.length === 0}\n aria-label={inputAriaLabel}\n aria-labelledby={!inputAriaLabel && label ? labelId : undefined}\n aria-describedby={showHelperText ? helperId : undefined}\n aria-invalid={error \|\| undefined}\n className={inputStyle}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onFocus={() => {\n setFocused(true);\n }}\n onBlur={handleBlur}\n />\n )}\n </div>\n\n {name && <input type=\"hidden\" name={name} value={formValue} />}\n\n {showHelperText && (\n <FormHelperText id={helperId} error={error}>\n {showHelperText}\n </FormHelperText>\n )}\n </div>\n );\n}\n\nTagInput.displayName = 'TagInput';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACF;AAEA;;;;;;;;;;;;;;AAcG;;AAiCD;AACA;AACA;AACA;AAEA;;;;AAIE;AACD;;;AAKD;AACA;;;AAKA;AACA;AAEA;;AAOI;AACA;AACE;AAAoB;AACpB;;;AAGA;AACA;;;AAGA;AACA;;;;AAIA;AACE;AACA;;AAEF;AACE;AACA;;;AAGJ;AACF;AAIF;;AAGI;AAAW;;AAEX;;AAKJ;;;;;AAKE;AAIF;AAEI;;;;;;;AAME;;;;;AAGO;;;;;;AAOT;;AAEE;;AAEJ;AAIF;AAEI;;;;;;;;;;;;AAeA;AACE;;;AAEA;;;;;;;AAQN;;;;;;;AAOA;;;;;AAMM;;;AAMN;;;AAGE;;AAEE;;;;;;;;AAaF;AAqBF;AAEA;;;;;;;;;;AAwDU;AAeZ;AAEA;;"}

package/dist/esm/components/controls/TreeView/TreeNode.css.js CHANGED Viewed

@@ -1,15 +1,16 @@
-import './../../../assets/src/components/controls/TreeView/TreeNode.css.ts.vanilla-B_f8pUb8.css';
+import './../../../assets/src/components/controls/TreeView/TreeNode.css.ts.vanilla-DXPJRWZZ.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
-var actionsStyle = 'TreeNode_actionsStyle__8ws3nev';
-var chevronRecipe = createRuntimeFn({defaultClassName:'TreeNode_chevronRecipe__8ws3nef',variantClassNames:{size:{sm:'TreeNode_chevronRecipe_size_sm__8ws3neg',md:'TreeNode_chevronRecipe_size_md__8ws3neh',lg:'TreeNode_chevronRecipe_size_lg__8ws3nei'},expanded:{true:'TreeNode_chevronRecipe_expanded_true__8ws3nej',false:'TreeNode_chevronRecipe_expanded_false__8ws3nek'},visible:{true:'TreeNode_chevronRecipe_visible_true__8ws3nel',false:'TreeNode_chevronRecipe_visible_false__8ws3nem'}},defaultVariants:{size:'md',expanded:false,visible:true},compoundVariants:[]});
+var actionsStyle = 'TreeNode_actionsStyle__8ws3new';
+var chevronRecipe = createRuntimeFn({defaultClassName:'TreeNode_chevronRecipe__8ws3neg',variantClassNames:{size:{sm:'TreeNode_chevronRecipe_size_sm__8ws3neh',md:'TreeNode_chevronRecipe_size_md__8ws3nei',lg:'TreeNode_chevronRecipe_size_lg__8ws3nej'},expanded:{true:'TreeNode_chevronRecipe_expanded_true__8ws3nek',false:'TreeNode_chevronRecipe_expanded_false__8ws3nel'},visible:{true:'TreeNode_chevronRecipe_visible_true__8ws3nem',false:'TreeNode_chevronRecipe_visible_false__8ws3nen'}},defaultVariants:{size:'md',expanded:false,visible:true},compoundVariants:[]});
+var dropTargetStyle = 'TreeNode_dropTargetStyle__8ws3nef';
 var guideLineLeftVar = 'var(--guideLineLeftVar__8ws3ne1)';
-var guideLineStyle = 'TreeNode_guideLineStyle__8ws3ne10';
-var iconRecipe = createRuntimeFn({defaultClassName:'TreeNode_iconRecipe__8ws3nen',variantClassNames:{size:{sm:'TreeNode_iconRecipe_size_sm__8ws3neo',md:'TreeNode_iconRecipe_size_md__8ws3nep',lg:'TreeNode_iconRecipe_size_lg__8ws3neq'}},defaultVariants:{size:'md'},compoundVariants:[]});
-var labelRecipe = createRuntimeFn({defaultClassName:'TreeNode_labelRecipe__8ws3ner',variantClassNames:{size:{sm:'TreeNode_labelRecipe_size_sm__8ws3nes',md:'TreeNode_labelRecipe_size_md__8ws3net',lg:'TreeNode_labelRecipe_size_lg__8ws3neu'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var guideLineStyle = 'TreeNode_guideLineStyle__8ws3ne11';
+var iconRecipe = createRuntimeFn({defaultClassName:'TreeNode_iconRecipe__8ws3neo',variantClassNames:{size:{sm:'TreeNode_iconRecipe_size_sm__8ws3nep',md:'TreeNode_iconRecipe_size_md__8ws3neq',lg:'TreeNode_iconRecipe_size_lg__8ws3ner'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelRecipe = createRuntimeFn({defaultClassName:'TreeNode_labelRecipe__8ws3nes',variantClassNames:{size:{sm:'TreeNode_labelRecipe_size_sm__8ws3net',md:'TreeNode_labelRecipe_size_md__8ws3neu',lg:'TreeNode_labelRecipe_size_lg__8ws3nev'}},defaultVariants:{size:'md'},compoundVariants:[]});
 var paddingLeftVar = 'var(--paddingLeftVar__8ws3ne0)';
-var renameInputRecipe = createRuntimeFn({defaultClassName:'TreeNode_renameInputRecipe__8ws3new',variantClassNames:{size:{sm:'TreeNode_renameInputRecipe_size_sm__8ws3nex',md:'TreeNode_renameInputRecipe_size_md__8ws3ney',lg:'TreeNode_renameInputRecipe_size_lg__8ws3nez'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var renameInputRecipe = createRuntimeFn({defaultClassName:'TreeNode_renameInputRecipe__8ws3nex',variantClassNames:{size:{sm:'TreeNode_renameInputRecipe_size_sm__8ws3ney',md:'TreeNode_renameInputRecipe_size_md__8ws3nez',lg:'TreeNode_renameInputRecipe_size_lg__8ws3ne10'}},defaultVariants:{size:'md'},compoundVariants:[]});
 var rowRecipe = createRuntimeFn({defaultClassName:'TreeNode_rowRecipe__8ws3ne2',variantClassNames:{size:{sm:'TreeNode_rowRecipe_size_sm__8ws3ne3',md:'TreeNode_rowRecipe_size_md__8ws3ne4',lg:'TreeNode_rowRecipe_size_lg__8ws3ne5'},selected:{true:'TreeNode_rowRecipe_selected_true__8ws3ne6',false:'TreeNode_rowRecipe_selected_false__8ws3ne7'},focused:{true:'TreeNode_rowRecipe_focused_true__8ws3ne8',false:'TreeNode_rowRecipe_focused_false__8ws3ne9'},disabled:{true:'TreeNode_rowRecipe_disabled_true__8ws3nea',false:'TreeNode_rowRecipe_disabled_false__8ws3neb'}},defaultVariants:{size:'md',selected:false,focused:false,disabled:false},compoundVariants:[[{selected:true},'TreeNode_rowRecipe_compound_0__8ws3nec'],[{selected:false},'TreeNode_rowRecipe_compound_1__8ws3ned'],[{focused:true,selected:false},'TreeNode_rowRecipe_compound_2__8ws3nee']]});
-export { actionsStyle, chevronRecipe, guideLineLeftVar, guideLineStyle, iconRecipe, labelRecipe, paddingLeftVar, renameInputRecipe, rowRecipe };
+export { actionsStyle, chevronRecipe, dropTargetStyle, guideLineLeftVar, guideLineStyle, iconRecipe, labelRecipe, paddingLeftVar, renameInputRecipe, rowRecipe };
 //# sourceMappingURL=TreeNode.css.js.map

package/dist/esm/components/controls/TreeView/TreeNode.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeNode.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"TreeNode.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/esm/components/controls/TreeView/TreeNode.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useState, useRef, useCallback } from 'react';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -33,6 +33,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -88,7 +89,14 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
-import { guideLineStyle, guideLineLeftVar, chevronRecipe, iconRecipe, renameInputRecipe, labelRecipe, actionsStyle, paddingLeftVar, rowRecipe } from './TreeNode.css.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { cx } from '../../../utils/cx.js';
+import { guideLineStyle, guideLineLeftVar, chevronRecipe, iconRecipe, renameInputRecipe, labelRecipe, actionsStyle, paddingLeftVar, dropTargetStyle, rowRecipe } from './TreeNode.css.js';
 // --- Size configurations ---
 const sizeConfig = {
@@ -116,7 +124,7 @@ const sizeConfig = {
 };
 // --- Chevron icon SVG ---
 const ChevronSvg = ({ size }) => (jsx(ChevronRightIcon, { size: size, color: "currentColor", decorative: true }));
-const TreeNodeComponent = ({ node, depth, size, indent, isSelected, isExpanded, isFocused, isFirst, isLast, showChevrons, showGuideLines, renamable, nodeId, renderNode, renderActions, onToggleExpand, onClick, onDoubleClick, onContextMenu, onRename, }) => {
+const TreeNodeComponent = ({ node, depth, size, indent, isSelected, isExpanded, isFocused, isFirst, isLast, showChevrons, showGuideLines, renamable, nodeId, isDropTarget, renderNode, renderActions, onToggleExpand, onClick, onDoubleClick, onContextMenu, onRename, onDragOver, onDragLeave, onDrop, }) => {
     const [isRenaming, setIsRenaming] = useState(false);
     const [renameValue, setRenameValue] = useState(node.label);
     const renameInputRef = useRef(null);
@@ -160,6 +168,15 @@ const TreeNodeComponent = ({ node, depth, size, indent, isSelected, isExpanded,
     const handleContextMenu = useCallback((e) => {
         onContextMenu?.(node, e);
     }, [node, onContextMenu]);
+    const handleDragOver = useCallback((e) => {
+        onDragOver?.(node, e);
+    }, [node, onDragOver]);
+    const handleDragLeave = useCallback((e) => {
+        onDragLeave?.(node, e);
+    }, [node, onDragLeave]);
+    const handleDrop = useCallback((e) => {
+        onDrop?.(node, e);
+    }, [node, onDrop]);
     const confirmRename = useCallback(() => {
         if (renameValue.trim() && renameValue !== node.label) {
             onRename?.(node.id, renameValue.trim());
@@ -184,18 +201,36 @@ const TreeNodeComponent = ({ node, depth, size, indent, isSelected, isExpanded,
                 [guideLineLeftVar]: `${i * indent + config.defaultIndent / 2}px`,
             }) }, i)))
         : null;
-    return (jsxs("div", { id: `treenode-${nodeId}`, role: "treeitem", "aria-expanded": isLeaf ? undefined : isExpanded, "aria-selected": isSelected, "aria-disabled": node.disabled ?? undefined, "aria-level": depth + 1, className: rowRecipe({
+    return (
+    // Keyboard interaction is handled centrally by the parent role="tree"
+    // container via the aria-activedescendant pattern (it owns tabIndex and
+    // onKeyDown). Individual treeitems are not separately focusable, so their
+    // onClick is a pointer-only enhancement and they carry no key handler.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    jsxs("div", { id: `treenode-${nodeId}`, role: "treeitem", "aria-expanded": isLeaf ? undefined : isExpanded, "aria-selected": isSelected, "aria-disabled": node.disabled ?? undefined, "aria-level": depth + 1, "data-drop-target": isDropTarget ? 'true' : undefined, className: cx(rowRecipe({
             size,
             selected: isSelected,
             focused: isFocused,
             disabled: node.disabled ?? false,
-        }), style: assignInlineVars({
+        }), dropTargetStyle), style: assignInlineVars({
             [paddingLeftVar]: `${depth * indent}px`,
-        }), onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu, tabIndex: -1, children: [guideLines, showChevrons && (jsx("span", { className: chevronRecipe({
+        }), onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu, onDragOver: onDragOver ? handleDragOver : undefined, onDragLeave: onDragLeave ? handleDragLeave : undefined, onDrop: onDrop ? handleDrop : undefined, tabIndex: -1, children: [guideLines, showChevrons && (jsx("span", { className: chevronRecipe({
                     expanded: isExpanded,
                     size,
                     visible: !isLeaf,
-                }), onClick: handleChevronClick, "aria-hidden": "true", children: jsx(ChevronSvg, { size: config.chevronSize }) })), renderNode ? (renderNode(node, state)) : (jsxs(Fragment, { children: [node.icon && (jsx("span", { className: iconRecipe({ size }), children: node.icon })), isRenaming ? (jsx("input", { ref: renameInputRef, className: renameInputRecipe({ size }), value: renameValue, onChange: e => setRenameValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: confirmRename, "aria-label": `Rename ${node.label}`, onClick: e => e.stopPropagation() })) : (jsx("span", { className: labelRecipe({ size }), children: node.label }))] })), renderActions && (jsx("span", { className: actionsStyle, onClick: e => e.stopPropagation(), children: renderActions(node, state) }))] }));
+                }), onClick: handleChevronClick, "aria-hidden": "true", children: jsx(ChevronSvg, { size: config.chevronSize }) })), renderNode ? (renderNode(node, state)) : (jsxs(Fragment, { children: [node.icon && (jsx("span", { className: iconRecipe({ size }), children: node.icon })), isRenaming ? (jsx("input", { ref: renameInputRef, className: renameInputRecipe({ size }), value: renameValue, onChange: e => {
+                            setRenameValue(e.target.value);
+                        }, onKeyDown: handleRenameKeyDown, onBlur: confirmRename, "aria-label": `Rename ${node.label}`, onClick: e => {
+                            e.stopPropagation();
+                        } })) : (jsx("span", { className: labelRecipe({ size }), children: node.label }))] })), renderActions && (
+            // This span is a non-interactive container; its onClick only stops
+            // row-click propagation so that the genuinely interactive controls
+            // produced by renderActions handle their own activation. It has no
+            // activatable behavior of its own, so no role or key handler applies.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+            jsx("span", { className: actionsStyle, onClick: e => {
+                    e.stopPropagation();
+                }, children: renderActions(node, state) }))] }));
 };
 TreeNodeComponent.displayName = 'TreeNode';

package/dist/esm/components/controls/TreeView/TreeNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeNode.js","sources":["~~../../../../../../~~src/components/controls/TreeView/TreeNode.tsx"],"sourcesContent":[null],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA~~;AAEA;AAUE;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA~~;;;AAoDE~~;AACA;AAEA;AACA;AAEA;AACE;AACA;AACA;;;;;;AAOF;;;AAIM;;AAEJ;AAIF;AAEI;;AACA;;AAKJ;;;;;;AAOM;;AAEE;AACA;;;;AAKJ;;AAKJ;AAEI;AACF;AAIF;;;;;AAKA;AAEA;AACE;;AAEF;AAEA;AAEI;AACE;;AACK;AACL;;AAEJ;;AAKF;;AAOY;AACD~~;;AAKX;;AAUM~~;AACA;AACA;AACD;~~AAEC;;AAaI~~;;;AAGD;~~AAyCX~~;AAEA;;"}
1	+ {"version":3,"file":"TreeNode.js","sources":["src/components/controls/TreeView/TreeNode.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useState, useRef, useCallback } from 'react';\n\nimport { ChevronRightIcon } from '@/components/Icons';\nimport { cx } from '@/utils/cx';\n\nimport {\n rowRecipe,\n chevronRecipe,\n iconRecipe,\n labelRecipe,\n actionsStyle,\n renameInputRecipe,\n guideLineStyle,\n dropTargetStyle,\n paddingLeftVar,\n guideLineLeftVar,\n} from './TreeNode.css';\n\nimport type {\n TreeNodeData,\n TreeNodeState,\n TreeViewSize,\n} from './TreeView.types';\n\n// --- Size configurations ---\n\nconst sizeConfig: Record<\n TreeViewSize,\n {\n rowHeight: number;\n chevronSize: number;\n iconSize: number;\n fontSizeKey: 'xs' \| 'sm' \| 'md' \| 'lg';\n defaultIndent: number;\n }\n> = {\n sm: {\n rowHeight: 20,\n chevronSize: 10,\n iconSize: 12,\n fontSizeKey: 'md',\n defaultIndent: 12,\n },\n md: {\n rowHeight: 24,\n chevronSize: 12,\n iconSize: 14,\n fontSizeKey: 'md',\n defaultIndent: 16,\n },\n lg: {\n rowHeight: 32,\n chevronSize: 14,\n iconSize: 16,\n fontSizeKey: 'lg',\n defaultIndent: 20,\n },\n};\n\n// --- Chevron icon SVG ---\n\nconst ChevronSvg = ({ size }: { size: number }) => (\n <ChevronRightIcon size={size} color=\"currentColor\" decorative />\n);\n\n// --- TreeNode component ---\n\nexport interface TreeNodeComponentProps {\n node: TreeNodeData;\n depth: number;\n size: TreeViewSize;\n indent: number;\n isSelected: boolean;\n isExpanded: boolean;\n isFocused: boolean;\n isFirst: boolean;\n isLast: boolean;\n showChevrons: boolean;\n showGuideLines: boolean;\n renamable: boolean;\n nodeId: string;\n isDropTarget: boolean;\n renderNode?: (node: TreeNodeData, state: TreeNodeState) => React.ReactNode;\n renderActions?: (node: TreeNodeData, state: TreeNodeState) => React.ReactNode;\n onToggleExpand: (id: string) => void;\n onClick: (node: TreeNodeData, event: React.MouseEvent) => void;\n onDoubleClick?: (node: TreeNodeData, event: React.MouseEvent) => void;\n onContextMenu?: (node: TreeNodeData, event: React.MouseEvent) => void;\n onRename?: (nodeId: string, newLabel: string) => void;\n onDragOver?: (node: TreeNodeData, event: React.DragEvent) => void;\n onDragLeave?: (node: TreeNodeData, event: React.DragEvent) => void;\n onDrop?: (node: TreeNodeData, event: React.DragEvent) => void;\n}\n\nexport const TreeNodeComponent = ({\n node,\n depth,\n size,\n indent,\n isSelected,\n isExpanded,\n isFocused,\n isFirst,\n isLast,\n showChevrons,\n showGuideLines,\n renamable,\n nodeId,\n isDropTarget,\n renderNode,\n renderActions,\n onToggleExpand,\n onClick,\n onDoubleClick,\n onContextMenu,\n onRename,\n onDragOver,\n onDragLeave,\n onDrop,\n}: TreeNodeComponentProps) => {\n const [isRenaming, setIsRenaming] = useState(false);\n const [renameValue, setRenameValue] = useState(node.label);\n const renameInputRef = useRef<HTMLInputElement>(null);\n\n const isLeaf = !node.children \|\| node.children.length === 0;\n const config = sizeConfig[size];\n\n const state: TreeNodeState = {\n selected: isSelected,\n expanded: isExpanded,\n focused: isFocused,\n depth,\n isLeaf,\n isFirst,\n isLast,\n };\n\n const handleChevronClick = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!node.disabled && !isLeaf) {\n onToggleExpand(node.id);\n }\n },\n [node.id, node.disabled, isLeaf, onToggleExpand]\n );\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (node.disabled \|\| isRenaming) return;\n onClick(node, e);\n },\n [node, isRenaming, onClick]\n );\n\n const handleDoubleClick = useCallback(\n (e: React.MouseEvent) => {\n if (node.disabled) return;\n\n // Start rename if renamable\n if (renamable && node.renamable !== false) {\n setIsRenaming(true);\n setRenameValue(node.label);\n setTimeout(() => {\n renameInputRef.current?.focus();\n renameInputRef.current?.select();\n }, 0);\n return;\n }\n\n onDoubleClick?.(node, e);\n },\n [node, renamable, onDoubleClick]\n );\n\n const handleContextMenu = useCallback(\n (e: React.MouseEvent) => {\n onContextMenu?.(node, e);\n },\n [node, onContextMenu]\n );\n\n const handleDragOver = useCallback(\n (e: React.DragEvent) => {\n onDragOver?.(node, e);\n },\n [node, onDragOver]\n );\n\n const handleDragLeave = useCallback(\n (e: React.DragEvent) => {\n onDragLeave?.(node, e);\n },\n [node, onDragLeave]\n );\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n onDrop?.(node, e);\n },\n [node, onDrop]\n );\n\n const confirmRename = useCallback(() => {\n if (renameValue.trim() && renameValue !== node.label) {\n onRename?.(node.id, renameValue.trim());\n }\n setIsRenaming(false);\n }, [renameValue, node.id, node.label, onRename]);\n\n const cancelRename = useCallback(() => {\n setRenameValue(node.label);\n setIsRenaming(false);\n }, [node.label]);\n\n const handleRenameKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n confirmRename();\n } else if (e.key === 'Escape') {\n cancelRename();\n }\n },\n [confirmRename, cancelRename]\n );\n\n // Guide lines for each parent level\n const guideLines =\n showGuideLines && depth > 0\n ? Array.from({ length: depth }, (_, i) => (\n <span\n key={i}\n className={guideLineStyle}\n style={assignInlineVars({\n [guideLineLeftVar]: `${i * indent + config.defaultIndent / 2}px`,\n })}\n />\n ))\n : null;\n\n return (\n // Keyboard interaction is handled centrally by the parent role=\"tree\"\n // container via the aria-activedescendant pattern (it owns tabIndex and\n // onKeyDown). Individual treeitems are not separately focusable, so their\n // onClick is a pointer-only enhancement and they carry no key handler.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n <div\n id={`treenode-${nodeId}`}\n role=\"treeitem\"\n aria-expanded={isLeaf ? undefined : isExpanded}\n aria-selected={isSelected}\n aria-disabled={node.disabled ?? undefined}\n aria-level={depth + 1}\n data-drop-target={isDropTarget ? 'true' : undefined}\n className={cx(\n rowRecipe({\n size,\n selected: isSelected,\n focused: isFocused,\n disabled: node.disabled ?? false,\n }),\n dropTargetStyle\n )}\n style={assignInlineVars({\n [paddingLeftVar]: `${depth * indent}px`,\n })}\n onClick={handleClick}\n onDoubleClick={handleDoubleClick}\n onContextMenu={handleContextMenu}\n onDragOver={onDragOver ? handleDragOver : undefined}\n onDragLeave={onDragLeave ? handleDragLeave : undefined}\n onDrop={onDrop ? handleDrop : undefined}\n tabIndex={-1}\n >\n {guideLines}\n\n {/* Chevron /}\n {showChevrons && (\n <span\n className={chevronRecipe({\n expanded: isExpanded,\n size,\n visible: !isLeaf,\n })}\n onClick={handleChevronClick}\n aria-hidden=\"true\"\n >\n <ChevronSvg size={config.chevronSize} />\n </span>\n )}\n\n {/ Content /}\n {renderNode ? (\n renderNode(node, state)\n ) : (\n <>\n {node.icon && (\n <span className={iconRecipe({ size })}>{node.icon}</span>\n )}\n {isRenaming ? (\n <input\n ref={renameInputRef}\n className={renameInputRecipe({ size })}\n value={renameValue}\n onChange={e => {\n setRenameValue(e.target.value);\n }}\n onKeyDown={handleRenameKeyDown}\n onBlur={confirmRename}\n aria-label={`Rename ${node.label}`}\n onClick={e => {\n e.stopPropagation();\n }}\n />\n ) : (\n <span className={labelRecipe({ size })}>{node.label}</span>\n )}\n </>\n )}\n\n {/ Actions */}\n {renderActions && (\n // This span is a non-interactive container; its onClick only stops\n // row-click propagation so that the genuinely interactive controls\n // produced by renderActions handle their own activation. It has no\n // activatable behavior of its own, so no role or key handler applies.\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span\n className={actionsStyle}\n onClick={e => {\n e.stopPropagation();\n }}\n >\n {renderActions(node, state)}\n </span>\n )}\n </div>\n );\n};\n\nTreeNodeComponent.displayName = 'TreeNode';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AAEA;AAUE;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;AAiCO;;AA2BL;AACA;AAEA;AACA;AAEA;AACE;AACA;AACA;;;;;;AAOF;;;AAIM;;AAEJ;AAIF;AAEI;;AACA;;AAKJ;;;;;;AAOM;;AAEE;AACA;;;;AAKJ;;AAKJ;AAEI;AACF;AAIF;AAEI;AACF;AAIF;AAEI;AACF;AAIF;AAEI;AACF;AAIF;;;;;AAKA;AAEA;AACE;;AAEF;AAEA;AAEI;AACE;;AACK;AACL;;AAEJ;;AAKF;;AAOY;AACD;;;;;;;;;;AAsBH;AACA;AACA;AACD;AAID;AACD;AAeK;;;AAGD;AAsBK;AACF;;;;;;;;;;;AAgCd;AAEA;;"}

package/dist/esm/components/controls/TreeView/TreeView.js CHANGED Viewed

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { useRef, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { useTreeState } from './useTreeState.js';
-import { TreeNodeComponent } from './TreeNode.js';
+import React, { useRef, useCallback } from 'react';
 import { cx } from '../../../utils/cx.js';
+import { TreeNodeComponent } from './TreeNode.js';
 import { maxHeightVar, emptyStateStyle, treeContainerStyle } from './TreeView.css.js';
+import { useTreeState } from './useTreeState.js';
 /**
  * A hierarchical collapsible tree for displaying and managing nested data.
@@ -25,7 +25,7 @@ import { maxHeightVar, emptyStateStyle, treeContainerStyle } from './TreeView.cs
  * <TreeView nodes={nodes} onSelectionChange={setSelected} />
  * ```
  */
-const TreeView = ({ nodes, expandedIds, defaultExpandedIds, selectedIds, defaultSelectedIds, selectionMode = 'single', renamable = false, size = 'md', indent = 16, showChevrons = true, showGuideLines = false, expandOnSelect = false, maxHeight, renderNode, renderActions, emptyContent, onExpandedChange, onSelectionChange, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeRename, className, testId, ...rest }) => {
+const TreeView = ({ nodes, expandedIds, defaultExpandedIds, selectedIds, defaultSelectedIds, selectionMode = 'single', renamable = false, size = 'md', indent = 16, showChevrons = true, showGuideLines = false, expandOnSelect = false, expandOnClick = false, maxHeight, renderNode, renderActions, emptyContent, dropTargetId, onExpandedChange, onSelectionChange, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeRename, onNodeDragOver, onNodeDragLeave, onNodeDrop, className, testId, ...rest }) => {
     const treeRef = useRef(null);
     const { expandedSet, selectedSet, focusedId, visibleNodes, toggleExpand, select, setFocused, selectAll, } = useTreeState({
         nodes,
@@ -54,8 +54,20 @@ const TreeView = ({ nodes, expandedIds, defaultExpandedIds, selectedIds, default
                 select(node.id, 'replace');
             }
         }
+        // Toggle a parent node's expansion when its whole row is clicked. The
+        // chevron stops propagation, so it never double-toggles.
+        if (expandOnClick && node.children && node.children.length > 0) {
+            toggleExpand(node.id);
+        }
         onNodeClick?.(node, event);
-    }, [selectionMode, select, setFocused, onNodeClick]);
+    }, [
+        selectionMode,
+        select,
+        setFocused,
+        onNodeClick,
+        expandOnClick,
+        toggleExpand,
+    ]);
     // Keyboard navigation
     const handleKeyDown = useCallback((event) => {
         const currentIdx = focusedId
@@ -197,7 +209,7 @@ const TreeView = ({ nodes, expandedIds, defaultExpandedIds, selectedIds, default
     }
     return (jsx("div", { ref: treeRef, className: cx(treeContainerStyle, className), "data-testid": testId, role: "tree", "aria-label": "Tree", "aria-multiselectable": selectionMode === 'multiple' ? true : undefined, "aria-activedescendant": focusedId ? `treenode-${focusedId}` : undefined, tabIndex: 0, onKeyDown: handleKeyDown, style: containerInlineVars, ...rest, children: visibleNodes.map((flatNode, idx) => {
             const { node, depth } = flatNode;
-            return (jsx(TreeNodeComponent, { node: node, depth: depth, size: size, indent: indent, isSelected: selectedSet.has(node.id), isExpanded: expandedSet.has(node.id), isFocused: focusedId === node.id, isFirst: idx === 0, isLast: idx === visibleNodes.length - 1, showChevrons: showChevrons, showGuideLines: showGuideLines, renamable: renamable, nodeId: node.id, renderNode: renderNode, renderActions: renderActions, onToggleExpand: toggleExpand, onClick: handleNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onRename: onNodeRename }, node.id));
+            return (jsx(TreeNodeComponent, { node: node, depth: depth, size: size, indent: indent, isSelected: selectedSet.has(node.id), isExpanded: expandedSet.has(node.id), isFocused: focusedId === node.id, isFirst: idx === 0, isLast: idx === visibleNodes.length - 1, showChevrons: showChevrons, showGuideLines: showGuideLines, renamable: renamable, nodeId: node.id, isDropTarget: dropTargetId === node.id, renderNode: renderNode, renderActions: renderActions, onToggleExpand: toggleExpand, onClick: handleNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onRename: onNodeRename, onDragOver: onNodeDragOver, onDragLeave: onNodeDragLeave, onDrop: onNodeDrop }, node.id));
         }) }));
 };
 TreeView.displayName = 'TreeView';

package/dist/esm/components/controls/TreeView/TreeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeView.js","sources":["../../../../../../src/components/controls/TreeView/TreeView.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAcA;;;;;;;;;;;;;;;;;AAiBG;AACI;AA2BL;AAEA;;;;;;;;;;AAmBC;;;;;AAOG;AAEA;;AAEI;;AACK;AACL;;;AAEA;;;AAIJ;;;AAMJ;;AAGM;;AAEF;AAGA;;;AAGI;AACA;AACE;;AAEE;;;;;;;;;;AAUJ;AACA;AACE;;AAEE;;;;;;;;;;;AAWF;AAEA;AACE;;AACK;;AAEL;AACA;AACE;;AAEE;;;;;;;;;;AAUN;AAEA;AACE;;AACK;;AAEL;;;;;;;AAOJ;;AAEE;;;;;;;;AAQA;;;;;;AAMF;AACE;;;;;;;AAOA;AACE;;AACK;AACL;;;;;;;;AAQF;;;;;AAKR;;;;;;;;;AAUC;;AAIH;AACE;AACE;;;;;AAOJ;;;AAIM;;;AAKN;AACE;;AAeF;AAeM;;;AA6BR;AAEA;;"}
1	+ {"version":3,"file":"TreeView.js","sources":["src/components/controls/TreeView/TreeView.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useRef } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { TreeNodeComponent } from './TreeNode';\nimport {\n treeContainerStyle,\n emptyStateStyle,\n maxHeightVar,\n} from './TreeView.css';\nimport { useTreeState } from './useTreeState';\n\nimport type { TreeViewProps, TreeNodeData } from './TreeView.types';\n\n/*\n A hierarchical collapsible tree for displaying and managing nested data.\n \n Supports multi-selection, keyboard navigation, inline renaming,\n * and custom node rendering. The most iconic editor panel — scene hierarchy,\n * file browser, layer stack.\n \n @example\n * ```tsx\n * const nodes = [\n * { id: '1', label: 'Root', children: [\n * { id: '1.1', label: 'Child A' },\n * { id: '1.2', label: 'Child B' },\n * ]},\n * ];\n * <TreeView nodes={nodes} onSelectionChange={setSelected} />\n * ```\n */\nexport const TreeView = ({\n nodes,\n expandedIds,\n defaultExpandedIds,\n selectedIds,\n defaultSelectedIds,\n selectionMode = 'single',\n renamable = false,\n size = 'md',\n indent = 16,\n showChevrons = true,\n showGuideLines = false,\n expandOnSelect = false,\n expandOnClick = false,\n maxHeight,\n renderNode,\n renderActions,\n emptyContent,\n dropTargetId,\n onExpandedChange,\n onSelectionChange,\n onNodeClick,\n onNodeDoubleClick,\n onNodeContextMenu,\n onNodeRename,\n onNodeDragOver,\n onNodeDragLeave,\n onNodeDrop,\n className,\n testId,\n ...rest\n}: TreeViewProps) => {\n const treeRef = useRef<HTMLDivElement>(null);\n\n const {\n expandedSet,\n selectedSet,\n focusedId,\n visibleNodes,\n toggleExpand,\n select,\n setFocused,\n selectAll,\n } = useTreeState({\n nodes,\n expandedIds,\n defaultExpandedIds,\n selectedIds,\n defaultSelectedIds,\n selectionMode,\n expandOnSelect,\n onExpandedChange,\n onSelectionChange,\n });\n\n // Handle node click with selection logic\n const handleNodeClick = useCallback(\n (node: TreeNodeData, event: React.MouseEvent) => {\n if (node.disabled) return;\n\n setFocused(node.id);\n\n if (selectionMode !== 'none') {\n if (event.ctrlKey \|\| event.metaKey) {\n select(node.id, 'toggle');\n } else if (event.shiftKey) {\n select(node.id, 'range');\n } else {\n select(node.id, 'replace');\n }\n }\n\n // Toggle a parent node's expansion when its whole row is clicked. The\n // chevron stops propagation, so it never double-toggles.\n if (expandOnClick && node.children && node.children.length > 0) {\n toggleExpand(node.id);\n }\n\n onNodeClick?.(node, event);\n },\n [\n selectionMode,\n select,\n setFocused,\n onNodeClick,\n expandOnClick,\n toggleExpand,\n ]\n );\n\n // Keyboard navigation\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const currentIdx = focusedId\n ? visibleNodes.findIndex(vn => vn.node.id === focusedId)\n : -1;\n const currentNode =\n currentIdx >= 0 ? visibleNodes[currentIdx] : undefined;\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n const nextIdx = currentIdx + 1;\n if (nextIdx < visibleNodes.length) {\n const nextNode = visibleNodes[nextIdx];\n if (nextNode) {\n setFocused(nextNode.node.id);\n if (event.shiftKey && selectionMode === 'multiple') {\n select(nextNode.node.id, 'range');\n }\n }\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const prevIdx = currentIdx - 1;\n if (prevIdx >= 0) {\n const prevNode = visibleNodes[prevIdx];\n if (prevNode) {\n setFocused(prevNode.node.id);\n if (event.shiftKey && selectionMode === 'multiple') {\n select(prevNode.node.id, 'range');\n }\n }\n }\n break;\n }\n case 'ArrowRight': {\n event.preventDefault();\n if (currentNode) {\n const hasChildren =\n currentNode.node.children && currentNode.node.children.length > 0;\n if (hasChildren && !expandedSet.has(currentNode.node.id)) {\n toggleExpand(currentNode.node.id);\n } else if (hasChildren && expandedSet.has(currentNode.node.id)) {\n // Move to first child\n const nextIdx = currentIdx + 1;\n if (nextIdx < visibleNodes.length) {\n const nextNode = visibleNodes[nextIdx];\n if (nextNode) {\n setFocused(nextNode.node.id);\n }\n }\n }\n }\n break;\n }\n case 'ArrowLeft': {\n event.preventDefault();\n if (currentNode) {\n const hasChildren =\n currentNode.node.children && currentNode.node.children.length > 0;\n if (hasChildren && expandedSet.has(currentNode.node.id)) {\n toggleExpand(currentNode.node.id);\n } else if (currentNode.parentId) {\n // Move to parent\n setFocused(currentNode.parentId);\n }\n }\n break;\n }\n case 'Home': {\n event.preventDefault();\n const firstNode = visibleNodes[0];\n if (firstNode) {\n setFocused(firstNode.node.id);\n }\n break;\n }\n case 'End': {\n event.preventDefault();\n const lastNode = visibleNodes[visibleNodes.length - 1];\n if (lastNode) {\n setFocused(lastNode.node.id);\n }\n break;\n }\n case 'Enter': {\n event.preventDefault();\n if (focusedId && selectionMode !== 'none') {\n select(focusedId, 'replace');\n }\n break;\n }\n case ' ': {\n event.preventDefault();\n if (focusedId) {\n if (selectionMode === 'multiple') {\n select(focusedId, 'toggle');\n } else if (selectionMode === 'single') {\n select(focusedId, 'replace');\n }\n }\n break;\n }\n case 'a': {\n if (event.ctrlKey \|\| event.metaKey) {\n event.preventDefault();\n selectAll();\n }\n break;\n }\n }\n },\n [\n focusedId,\n visibleNodes,\n expandedSet,\n selectionMode,\n setFocused,\n select,\n toggleExpand,\n selectAll,\n ]\n );\n\n // Scroll focused node into view\n React.useEffect(() => {\n if (focusedId && treeRef.current) {\n const el = treeRef.current.querySelector(\n `#treenode-${CSS.escape(focusedId)}`\n );\n if (el && typeof el.scrollIntoView === 'function') {\n el.scrollIntoView({ block: 'nearest' });\n }\n }\n }, [focusedId]);\n\n const containerInlineVars = maxHeight\n ? assignInlineVars({\n [maxHeightVar]:\n typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n })\n : undefined;\n\n if (nodes.length === 0) {\n return (\n <div\n ref={treeRef}\n className={cx(treeContainerStyle, className)}\n data-testid={testId}\n role=\"tree\"\n aria-label=\"Empty tree\"\n style={containerInlineVars}\n {...rest}\n >\n <div className={emptyStateStyle}>{emptyContent ?? 'No items'}</div>\n </div>\n );\n }\n\n return (\n <div\n ref={treeRef}\n className={cx(treeContainerStyle, className)}\n data-testid={testId}\n role=\"tree\"\n aria-label=\"Tree\"\n aria-multiselectable={selectionMode === 'multiple' ? true : undefined}\n aria-activedescendant={focusedId ? `treenode-${focusedId}` : undefined}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n style={containerInlineVars}\n {...rest}\n >\n {visibleNodes.map((flatNode, idx) => {\n const { node, depth } = flatNode;\n return (\n <TreeNodeComponent\n key={node.id}\n node={node}\n depth={depth}\n size={size}\n indent={indent}\n isSelected={selectedSet.has(node.id)}\n isExpanded={expandedSet.has(node.id)}\n isFocused={focusedId === node.id}\n isFirst={idx === 0}\n isLast={idx === visibleNodes.length - 1}\n showChevrons={showChevrons}\n showGuideLines={showGuideLines}\n renamable={renamable}\n nodeId={node.id}\n isDropTarget={dropTargetId === node.id}\n renderNode={renderNode}\n renderActions={renderActions}\n onToggleExpand={toggleExpand}\n onClick={handleNodeClick}\n onDoubleClick={onNodeDoubleClick}\n onContextMenu={onNodeContextMenu}\n onRename={onNodeRename}\n onDragOver={onNodeDragOver}\n onDragLeave={onNodeDragLeave}\n onDrop={onNodeDrop}\n />\n );\n })}\n </div>\n );\n};\n\nTreeView.displayName = 'TreeView';\n"],"names":[],"mappings":";;;;;;;;;AAiBA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAgCL;AAEA;;;;;;;;;;AAmBC;;;;;AAOG;AAEA;;AAEI;;AACK;AACL;;;AAEA;;;;;AAMJ;AACE;;AAGF;AACF;;;;;;;AAQC;;AAIH;;AAGM;;AAEF;AAGA;;;AAGI;AACA;AACE;;AAEE;;;;;;;;;;AAUJ;AACA;AACE;;AAEE;;;;;;;;;;;AAWF;AAEA;AACE;;AACK;;AAEL;AACA;AACE;;AAEE;;;;;;;;;;AAUN;AAEA;AACE;;AACK;;AAEL;;;;;;;AAOJ;;AAEE;;;;;;;;AAQA;;;;;;AAMF;AACE;;;;;;;AAOA;AACE;;AACK;AACL;;;;;;;;AAQF;;;;;AAKR;;;;;;;;;AAUC;;AAIH;AACE;AACE;;;;;AAOJ;;;AAIM;;;AAKN;AACE;;AAeF;AAeM;AACA;;AAgCR;AAEA;;"}

package/dist/esm/components/controls/TreeView/useTreeState.js CHANGED Viewed

@@ -30,14 +30,10 @@ function collectAllIds(nodes) {
 function useTreeState({ nodes, expandedIds: controlledExpanded, defaultExpandedIds, selectedIds: controlledSelected, defaultSelectedIds, selectionMode, expandOnSelect = false, onExpandedChange, onSelectionChange, }) {
     // Internal expansion state
     const [internalExpanded, setInternalExpanded] = useState(() => new Set(defaultExpandedIds ?? []));
-    const expandedSet = controlledExpanded
-        ? new Set(controlledExpanded)
-        : internalExpanded;
+    const expandedSet = useMemo(() => (controlledExpanded ? new Set(controlledExpanded) : internalExpanded), [controlledExpanded, internalExpanded]);
     // Internal selection state
     const [internalSelected, setInternalSelected] = useState(() => new Set(defaultSelectedIds ?? []));
-    const selectedSet = controlledSelected
-        ? new Set(controlledSelected)
-        : internalSelected;
+    const selectedSet = useMemo(() => (controlledSelected ? new Set(controlledSelected) : internalSelected), [controlledSelected, internalSelected]);
     // Focused node
     const [focusedId, setFocused] = useState(null);
     // Flatten visible nodes

package/dist/esm/components/controls/TreeView/useTreeState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTreeState.js","sources":["~~../../../../../../~~src/components/controls/TreeView/useTreeState.ts"],"sourcesContent":[null],"names":[],"mappings":";;;~~AAkCA~~;;AAEG;AACH;;AAOE;;;;;;AAQA;AACF;AAEA;;AAEG;AACH;;AAEE;AACE;AACA;;;;AAIF;AACF;AAEM;;AAYJ;;~~AAIE;;;AAIF;;AAIE;;;;;;;AAaF~~;AAEI;AACA;AACE;;;AAEA;;AAEF;;;AAGA;;;;;;AAUA;AAEA;;;;;AAIE;;;AAEO;AACL;AACA;AACE;;;AAEA;;;;;AAIF;;;;;;;;;;;;;;AAYI;AACA;AACE;AACA;AACE;;;;;;;AAQZ;;;AAGA;;;;AAKE;AACA;AACA;;;;AAIJ;;;;;;;;;;AAWC;;AAIH;;;;AAGE;;;AAGA;;;;;;;;;;;;AAaJ;;"}
1	+ {"version":3,"file":"useTreeState.js","sources":["src/components/controls/TreeView/useTreeState.ts"],"sourcesContent":["'use client';\n\nimport { useState, useMemo, useCallback } from 'react';\n\nimport type { TreeNodeData, TreeSelectionMode } from './TreeView.types';\n\ninterface FlatNode {\n node: TreeNodeData;\n depth: number;\n parentId: string \| null;\n}\n\ninterface UseTreeStateOptions {\n nodes: TreeNodeData[];\n expandedIds?: string[];\n defaultExpandedIds?: string[];\n selectedIds?: string[];\n defaultSelectedIds?: string[];\n selectionMode: TreeSelectionMode;\n expandOnSelect?: boolean;\n onExpandedChange?: (expandedIds: string[]) => void;\n onSelectionChange?: (selectedIds: string[]) => void;\n}\n\nexport interface UseTreeStateReturn {\n expandedSet: Set<string>;\n selectedSet: Set<string>;\n focusedId: string \| null;\n visibleNodes: FlatNode[];\n toggleExpand: (id: string) => void;\n select: (id: string, mode: 'replace' \| 'toggle' \| 'range') => void;\n setFocused: (id: string \| null) => void;\n selectAll: () => void;\n}\n\n/*\n Flatten tree into a list of visible nodes, respecting expansion state.\n /\nfunction flattenTree(\n nodes: TreeNodeData[],\n expandedSet: Set<string>,\n depth: number = 0,\n parentId: string \| null = null\n): FlatNode[] {\n const result: FlatNode[] = [];\n for (const node of nodes) {\n result.push({ node, depth, parentId });\n if (node.children && node.children.length > 0 && expandedSet.has(node.id)) {\n result.push(\n ...flattenTree(node.children, expandedSet, depth + 1, node.id)\n );\n }\n }\n return result;\n}\n\n/\n Collect all node IDs from a tree for \"expand all\" or \"select all\".\n */\nfunction collectAllIds(nodes: TreeNodeData[]): string[] {\n const ids: string[] = [];\n for (const node of nodes) {\n ids.push(node.id);\n if (node.children) {\n ids.push(...collectAllIds(node.children));\n }\n }\n return ids;\n}\n\nexport function useTreeState({\n nodes,\n expandedIds: controlledExpanded,\n defaultExpandedIds,\n selectedIds: controlledSelected,\n defaultSelectedIds,\n selectionMode,\n expandOnSelect = false,\n onExpandedChange,\n onSelectionChange,\n}: UseTreeStateOptions): UseTreeStateReturn {\n // Internal expansion state\n const [internalExpanded, setInternalExpanded] = useState<Set<string>>(\n () => new Set(defaultExpandedIds ?? [])\n );\n const expandedSet = useMemo(\n () => (controlledExpanded ? new Set(controlledExpanded) : internalExpanded),\n [controlledExpanded, internalExpanded]\n );\n\n // Internal selection state\n const [internalSelected, setInternalSelected] = useState<Set<string>>(\n () => new Set(defaultSelectedIds ?? [])\n );\n const selectedSet = useMemo(\n () => (controlledSelected ? new Set(controlledSelected) : internalSelected),\n [controlledSelected, internalSelected]\n );\n\n // Focused node\n const [focusedId, setFocused] = useState<string \| null>(null);\n\n // Flatten visible nodes\n const visibleNodes = useMemo(\n () => flattenTree(nodes, expandedSet),\n [nodes, expandedSet]\n );\n\n // Toggle expansion\n const toggleExpand = useCallback(\n (id: string) => {\n const next = new Set(expandedSet);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n if (controlledExpanded === undefined) {\n setInternalExpanded(next);\n }\n onExpandedChange?.([...next]);\n },\n [expandedSet, controlledExpanded, onExpandedChange]\n );\n\n // Selection\n const select = useCallback(\n (id: string, mode: 'replace' \| 'toggle' \| 'range') => {\n if (selectionMode === 'none') return;\n\n let next: Set<string>;\n\n if (selectionMode === 'single') {\n next = new Set([id]);\n } else {\n // multiple mode\n if (mode === 'replace') {\n next = new Set([id]);\n } else if (mode === 'toggle') {\n next = new Set(selectedSet);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n } else {\n // range — select from last selected to this id\n const visibleIds = visibleNodes.map(vn => vn.node.id);\n const lastSelected = [...selectedSet].pop();\n if (!lastSelected) {\n next = new Set([id]);\n } else {\n const startIdx = visibleIds.indexOf(lastSelected);\n const endIdx = visibleIds.indexOf(id);\n if (startIdx === -1 \|\| endIdx === -1) {\n next = new Set([id]);\n } else {\n const from = Math.min(startIdx, endIdx);\n const to = Math.max(startIdx, endIdx);\n next = new Set(selectedSet);\n for (let i = from; i <= to; i++) {\n const nodeId = visibleIds[i];\n if (nodeId !== undefined) {\n next.add(nodeId);\n }\n }\n }\n }\n }\n }\n\n if (controlledSelected === undefined) {\n setInternalSelected(next);\n }\n onSelectionChange?.([...next]);\n\n // Expand on select\n if (expandOnSelect && !expandedSet.has(id)) {\n // Check if node has children\n const flat = flattenTree(nodes, new Set(collectAllIds(nodes)));\n const targetNode = flat.find(fn => fn.node.id === id);\n if (targetNode?.node.children && targetNode.node.children.length > 0) {\n toggleExpand(id);\n }\n }\n },\n [\n selectionMode,\n selectedSet,\n controlledSelected,\n onSelectionChange,\n expandOnSelect,\n expandedSet,\n nodes,\n visibleNodes,\n toggleExpand,\n ]\n );\n\n // Select all visible nodes\n const selectAll = useCallback(() => {\n if (selectionMode !== 'multiple') return;\n const allIds = new Set(visibleNodes.map(vn => vn.node.id));\n if (controlledSelected === undefined) {\n setInternalSelected(allIds);\n }\n onSelectionChange?.([...allIds]);\n }, [selectionMode, visibleNodes, controlledSelected, onSelectionChange]);\n\n return {\n expandedSet,\n selectedSet,\n focusedId,\n visibleNodes,\n toggleExpand,\n select,\n setFocused,\n selectAll,\n };\n}\n"],"names":[],"mappings":";;;AAmCA;;AAEG;AACH;;AAOE;;;;;;AAQA;AACF;AAEA;;AAEG;AACH;;AAEE;AACE;AACA;;;;AAIF;AACF;AAEM;;AAYJ;AAGA;;AAMA;AAGA;;;;;;AAeA;AAEI;AACA;AACE;;;AAEA;;AAEF;;;AAGA;;;;;;AAUA;AAEA;;;;;AAIE;;;AAEO;AACL;AACA;AACE;;;AAEA;;;;;AAIF;;;;;;;;;;;;;;AAYI;AACA;AACE;AACA;AACE;;;;;;;AAQZ;;;AAGA;;;;AAKE;AACA;AACA;;;;AAIJ;;;;;;;;;;AAWC;;AAIH;;;;AAGE;;;AAGA;;;;;;;;;;;;AAaJ;;"}

package/dist/esm/components/controls/VectorInput/VectorInput.js CHANGED Viewed

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { useState, useRef, useCallback } from 'react';
 import { NumberInput } from '../NumberInput/NumberInput.js';
 import '../../../utils/devWarn.js';
 import '../../../utils/mathExpression.js';
-import { FormLabel } from '../../form/FormLabel.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -38,6 +38,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import { LinkIcon } from '../../Icons/LinkIcon.js';
@@ -93,8 +94,14 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
-import { cx } from '../../../utils/cx.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
 import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
 import { axisInputStyle, axisColorVar, axisLabelRecipe, linkButtonRecipe, gapVar, vectorRowRecipe, vectorContainerStyle } from './VectorInput.css.js';
 // --- Label presets ---
@@ -206,7 +213,9 @@ const VectorInput = ({ value: controlledValue, defaultValue, dimension = 3, labe
                         const axisColor = getAxisColor(colorPreset, customAxisColors, i);
                         // Fallback to theme secondary text color when no axis color
                         const resolvedColor = axisColor ?? vars.colors.text.secondary;
-                        return (jsxs("div", { className: axisInputStyle, children: [jsx("div", { className: axisLabelRecipe({ size }), style: assignInlineVars({ [axisColorVar]: resolvedColor }), children: axisLabel }), jsx(NumberInput, { value: axisValue, onChange: (val) => handleAxisChange(i, val), onBlur: handleCommit, min: min, max: max, step: step, precisionStep: precisionStep, largeStep: largeStep, precision: precision, unit: unit, size: size, disabled: disabled, showStepButtons: false, "aria-label": `${axisLabel} axis` })] }, i));
+                        return (jsxs("div", { className: axisInputStyle, children: [jsx("div", { className: axisLabelRecipe({ size }), style: assignInlineVars({ [axisColorVar]: resolvedColor }), children: axisLabel }), jsx(NumberInput, { value: axisValue, onChange: (val) => {
+                                        handleAxisChange(i, val);
+                                    }, onBlur: handleCommit, min: min, max: max, step: step, precisionStep: precisionStep, largeStep: largeStep, precision: precision, unit: unit, size: size, disabled: disabled, showStepButtons: false, "aria-label": `${axisLabel} axis` })] }, i));
                     }), showLink && (jsx("button", { type: "button", className: linkButtonRecipe({ active: isLinked, size }), onClick: handleLinkToggle, disabled: disabled, "aria-pressed": isLinked, "aria-label": isLinked ? 'Unlink axes' : 'Link axes', title: isLinked ? 'Unlink axes' : 'Link axes', children: isLinked ? (jsx(LinkIcon, { size: iconSize, color: "currentColor", decorative: true })) : (jsx(UnlinkIcon, { size: iconSize, color: "currentColor", decorative: true })) }))] }), (error && errorMessage) || helperText ? (jsx(FormHelperText, { error: error && !!errorMessage, children: error && errorMessage ? errorMessage : helperText })) : null] }));
 };
 VectorInput.displayName = 'VectorInput';

package/dist/esm/components/controls/VectorInput/VectorInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VectorInput.js","sources":["~~../../../../../../~~src/components/controls/VectorInput/VectorInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA~~;AAEA;;;AAGE;;AAGF;AAEA;AACA;AAEA;AAKE;AACE;;AAEF;AACE;;AAEF;AACE;;;AAGF;AACF;AAEA;AAKE;AACE;;AAEF;;;;;AAKF;AAEA;;;;;;;;;;;;;;;;AAgBG;;;AAmCD;AAGA;;;AAIA;;AAGA;;AAGA;AACE;AACF;;AAGA;AACE;AACA;;;AAGA;;;;AAME;AACA;;;AAIE;;AAEE;;;;;AAMA;;;;;;;AAWJ;AAEA;;;AAGA;;;AAMJ;AACE;AACF;;;;AAOA;;;;;;;~~AA+CM~~;AA4BR;AAEA;;"}
1	+ {"version":3,"file":"VectorInput.js","sources":["src/components/controls/VectorInput/VectorInput.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useState, useCallback, useRef } from 'react';\n\nimport { NumberInput } from '@/components/controls/NumberInput';\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { FormLabel } from '@/components/form/FormLabel';\nimport { LinkIcon, UnlinkIcon } from '@/components/Icons';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n vectorContainerStyle,\n vectorRowRecipe,\n axisInputStyle,\n axisLabelRecipe,\n axisColorVar,\n linkButtonRecipe,\n gapVar,\n} from './VectorInput.css';\n\nimport type { VectorInputProps } from './VectorInput.types';\n\n// --- Label presets ---\n\nconst LABEL_PRESETS: Record<string, string[]> = {\n xyz: ['X', 'Y', 'Z', 'W'],\n rgba: ['R', 'G', 'B', 'A'],\n uvw: ['U', 'V', 'W'],\n};\n\n// --- Color presets ---\n\nconst SPATIAL_COLORS = ['#EF4444', '#22C55E', '#3B82F6', '#A855F7'];\nconst COLOR_COLORS = ['#EF4444', '#22C55E', '#3B82F6', '#FFFFFF'];\n\nfunction getAxisColor(\n colorPreset: string,\n axisColors: string[] \| undefined,\n axisIndex: number\n): string \| null {\n if (colorPreset === 'custom' && axisColors) {\n return axisColors[axisIndex] ?? null;\n }\n if (colorPreset === 'spatial') {\n return SPATIAL_COLORS[axisIndex] ?? null;\n }\n if (colorPreset === 'color') {\n return COLOR_COLORS[axisIndex] ?? null;\n }\n // 'none' — will be resolved via theme\n return null;\n}\n\nfunction getAxisLabels(\n labelPreset: string,\n axisLabels: string[] \| undefined,\n dimension: number\n): string[] {\n if (labelPreset === 'custom' && axisLabels) {\n return axisLabels;\n }\n const preset = LABEL_PRESETS[labelPreset];\n if (preset) {\n return preset.slice(0, dimension);\n }\n return Array.from({ length: dimension }, (_, i) => String(i));\n}\n\n/*\n A grouped numeric input for Vec2, Vec3, and Vec4 vectors.\n \n Used for position, rotation, scale, color channels, UV coordinates,\n * bounding box extents, and more. Composes NumberInput with per-axis labels,\n * optional color coding, and linked/unlinked proportional editing.\n \n @example\n * ```tsx\n * <VectorInput\n * label=\"Position\"\n * value={[0, 0, 0]}\n * onChange={(val) => setPosition(val)}\n * unit=\"px\"\n * />\n * ```\n /\nexport const VectorInput = ({\n value: controlledValue,\n defaultValue,\n dimension = 3,\n labelPreset = 'xyz',\n axisLabels: customAxisLabels,\n colorPreset = 'spatial',\n axisColors: customAxisColors,\n min,\n max,\n step,\n precisionStep,\n largeStep,\n precision,\n unit,\n size = 'md',\n label,\n helperText,\n error = false,\n errorMessage,\n disabled = false,\n showLink = false,\n defaultLinked = false,\n linked: controlledLinked,\n onLinkedChange,\n direction = 'row',\n gap = 2,\n onChange,\n onChangeComplete,\n className,\n testId,\n ...rest\n}: VectorInputProps) => {\n // Internal value state (uncontrolled mode)\n const [internalValue, setInternalValue] = useState<number[]>(\n () => defaultValue ?? Array.from({ length: dimension }, () => 0)\n );\n const currentValue = controlledValue ?? internalValue;\n\n // Internal linked state (uncontrolled mode)\n const [internalLinked, setInternalLinked] = useState(defaultLinked);\n const isLinked = controlledLinked ?? internalLinked;\n\n // Ref to track value before linked changes for proportional math\n const prevValueRef = useRef<number[]>(currentValue);\n\n // Keep prevValueRef up to date when value changes externally\n React.useEffect(() => {\n prevValueRef.current = currentValue;\n }, [currentValue]);\n\n // Handle link toggle\n const handleLinkToggle = useCallback(() => {\n const newLinked = !isLinked;\n if (controlledLinked === undefined) {\n setInternalLinked(newLinked);\n }\n onLinkedChange?.(newLinked);\n }, [isLinked, controlledLinked, onLinkedChange]);\n\n // Handle axis value change\n const handleAxisChange = useCallback(\n (axisIndex: number, newAxisValue: number) => {\n const prevVector = prevValueRef.current;\n let nextValue: number[];\n\n if (isLinked) {\n const oldAxisValue = prevVector[axisIndex] ?? 0;\n if (oldAxisValue !== 0) {\n // Proportional scaling\n const ratio = newAxisValue / oldAxisValue;\n nextValue = prevVector.map((v, i) =>\n i === axisIndex ? newAxisValue : v ratio\n );\n } else {\n // Additive delta when old value is 0\n const delta = newAxisValue - oldAxisValue;\n nextValue = prevVector.map((v, i) =>\n i === axisIndex ? newAxisValue : v + delta\n );\n }\n } else {\n nextValue = currentValue.map((v, i) =>\n i === axisIndex ? newAxisValue : v\n );\n }\n\n prevValueRef.current = nextValue;\n\n if (controlledValue === undefined) {\n setInternalValue(nextValue);\n }\n onChange?.(nextValue, axisIndex);\n },\n [isLinked, currentValue, controlledValue, onChange]\n );\n\n // Handle commit (blur/Enter on any NumberInput)\n const handleCommit = useCallback(() => {\n onChangeComplete?.(prevValueRef.current);\n }, [onChangeComplete]);\n\n // Resolve labels\n const labels = getAxisLabels(labelPreset, customAxisLabels, dimension);\n\n const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;\n\n return (\n <div\n className={cx(vectorContainerStyle, className)}\n data-testid={testId}\n role=\"group\"\n aria-label={label ?? 'Vector input'}\n {...rest}\n >\n {label && <FormLabel disabled={disabled}>{label}</FormLabel>}\n\n <div\n className={vectorRowRecipe({ direction })}\n style={assignInlineVars({ [gapVar]: `${gap}px` })}\n >\n {Array.from({ length: dimension }, (_, i) => {\n const axisLabel = labels[i] ?? String(i);\n const axisValue = currentValue[i] ?? 0;\n const axisColor = getAxisColor(colorPreset, customAxisColors, i);\n // Fallback to theme secondary text color when no axis color\n const resolvedColor = axisColor ?? vars.colors.text.secondary;\n\n return (\n <div key={i} className={axisInputStyle}>\n <div\n className={axisLabelRecipe({ size })}\n style={assignInlineVars({ [axisColorVar]: resolvedColor })}\n >\n {axisLabel}\n </div>\n <NumberInput\n value={axisValue}\n onChange={(val: number) => {\n handleAxisChange(i, val);\n }}\n onBlur={handleCommit}\n min={min}\n max={max}\n step={step}\n precisionStep={precisionStep}\n largeStep={largeStep}\n precision={precision}\n unit={unit}\n size={size}\n disabled={disabled}\n showStepButtons={false}\n aria-label={`${axisLabel} axis`}\n />\n </div>\n );\n })}\n\n {showLink && (\n <button\n type=\"button\"\n className={linkButtonRecipe({ active: isLinked, size })}\n onClick={handleLinkToggle}\n disabled={disabled}\n aria-pressed={isLinked}\n aria-label={isLinked ? 'Unlink axes' : 'Link axes'}\n title={isLinked ? 'Unlink axes' : 'Link axes'}\n >\n {isLinked ? (\n <LinkIcon size={iconSize} color=\"currentColor\" decorative />\n ) : (\n <UnlinkIcon size={iconSize} color=\"currentColor\" decorative />\n )}\n </button>\n )}\n </div>\n\n {(error && errorMessage) \|\| helperText ? (\n <FormHelperText error={error && !!errorMessage}>\n {error && errorMessage ? errorMessage : helperText}\n </FormHelperText>\n ) : null}\n </div>\n );\n};\n\nVectorInput.displayName = 'VectorInput';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;AAEA;;;AAGE;;AAGF;AAEA;AACA;AAEA;AAKE;AACE;;AAEF;AACE;;AAEF;AACE;;;AAGF;AACF;AAEA;AAKE;AACE;;AAEF;;;;;AAKF;AAEA;;;;;;;;;;;;;;;;AAgBG;;;AAmCD;AAGA;;;AAIA;;AAGA;;AAGA;AACE;AACF;;AAGA;AACE;AACA;;;AAGA;;;;AAME;AACA;;;AAIE;;AAEE;;;;;AAMA;;;;;;;AAWJ;AAEA;;;AAGA;;;AAMJ;AACE;AACF;;;;AAOA;;;;;;;AAgCgB;;AAiBV;AA4BR;AAEA;;"}

package/dist/esm/components/data/DataTable/DataTable.js CHANGED Viewed

@@ -1,15 +1,15 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { cx } from '../../../utils/cx.js';
-import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
-import { Checkbox } from '../../primitives/Checkbox/Checkbox.js';
-import '../../primitives/Checkbox/CheckboxGroup.js';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
 import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
 import { SortIcon } from '../../Icons/SortIcon.js';
+import { Checkbox } from '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { cx } from '../../../utils/cx.js';
 import { tableMinWidthVar, gridTemplateColumnsVar, scrollContainerStyle, innerWrapperStyle, bodyStyle, emptyStateStyle, virtualBodyStyle, totalHeightVar, rootRecipe, headerCellRecipe, headerStyle, skeletonRowStyle, skeletonCellStyle, skeletonBarStyle, cellRecipe, rowRecipe, headerCellInnerStyle, resizeHandleStyle, sortIndicatorRecipe } from './DataTable.css.js';
 const DENSITY_ROW_HEIGHT = {
@@ -241,6 +241,10 @@ function DataTableInner(props) {
     const shouldVirtualize = virtualized === true ||
         (virtualized === 'auto' && sortedRows.length > virtualizationThreshold);
     const rowHeightPx = estimatedRowHeight ?? DENSITY_ROW_HEIGHT[density];
+    // TanStack Virtual's useVirtualizer returns functions that cannot be safely
+    // memoized; the Compiler flags it as an incompatible library. Behavior is
+    // correct here because the virtualizer is read imperatively per render.
+    // eslint-disable-next-line react-hooks/incompatible-library
     const virtualizer = useVirtualizer({
         count: shouldVirtualize ? sortedRows.length : 0,
         getScrollElement: () => scrollContainerRef.current,
@@ -433,10 +437,14 @@ function DataTableInner(props) {
         const k = rowKeys[rowIdx] ?? `__row_${rowIdx}__`;
         const isSelected = selectedSet.has(k);
         const interactive = selectionMode === 'single' || onRowClick !== undefined;
-        const cells = (jsxs(Fragment, { children: [showSelectColumn && (jsx("div", { role: "gridcell", className: cellRecipe({ selectColumn: true, sticky: true }), onClickCapture: event => {
+        const cells = (jsxs(Fragment, { children: [showSelectColumn && (jsx("div", { role: "gridcell", tabIndex: -1, className: cellRecipe({ selectColumn: true, sticky: true }), onClickCapture: event => {
                         selectionShiftKeyRef.current = event.shiftKey;
                     }, onClick: event => {
                         event.stopPropagation();
+                    }, onKeyDown: event => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                            event.stopPropagation();
+                        }
                     }, children: jsx(Checkbox, { checked: isSelected, disabled: isRowSelectable ? !isRowSelectable(row, rowIdx) : false, onChange: () => {
                             toggleRowSelection(k, row, rowIdx, selectionShiftKeyRef.current);
                             selectionShiftKeyRef.current = false;
@@ -451,6 +459,15 @@ function DataTableInner(props) {
         const handleRowDoubleClick = () => {
             onRowActivate?.(row, rowIdx);
         };
+        const handleRowKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                if (selectionMode === 'single') {
+                    toggleRowSelection(k, row, rowIdx);
+                }
+                setActiveRowIndex(rowIdx);
+            }
+        };
         const rowContent = renderRow
             ? renderRow({ row, rowIndex: rowIdx, selected: isSelected }, cells)
             : cells;
@@ -463,7 +480,7 @@ function DataTableInner(props) {
         const rowStyle = options.virtualized && options.transformY !== undefined
             ? { transform: `translateY(${options.transformY}px)` }
             : undefined;
-        return (jsx("div", { role: "row", "aria-rowindex": rowIdx + 2, "aria-selected": selectionMode ? isSelected : undefined, "data-row-key": k, "data-row-index": rowIdx, "data-row-interactive": interactive ? 'true' : undefined, className: rowClassName, style: rowStyle, onClick: interactive ? handleRowClick : undefined, onDoubleClick: onRowActivate ? handleRowDoubleClick : undefined, children: rowContent }, k));
+        return (jsx("div", { role: "row", "aria-rowindex": rowIdx + 2, "aria-selected": selectionMode ? isSelected : undefined, "data-row-key": k, "data-row-index": rowIdx, "data-row-interactive": interactive ? 'true' : undefined, className: rowClassName, style: rowStyle, tabIndex: interactive ? -1 : undefined, onClick: interactive ? handleRowClick : undefined, onKeyDown: interactive ? handleRowKeyDown : undefined, onDoubleClick: onRowActivate ? handleRowDoubleClick : undefined, children: rowContent }, k));
     };
     const renderSkeletonRows = () => {
         const rowsToRender = Array.from({ length: loadingRowCount }, (_, i) => i);

package/dist/esm/components/data/DataTable/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","sources":["../../../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AA+CA;AACE;AACA;AACA;;AAGF;AACA;AAEA;;AAKoC;AAClC;AACA;AACF;AAEA;AAKE;;AACoC;;AAElC;AACF;AACF;AAEA;;AACe;AACb;AAAmC;AACnC;;;;AAEA;;;;AAGA;AACA;AACA;AACF;AAEA;;AAGwB;;AACC;AACvB;AACF;AAEA;;AAG2B;AACzB;AACF;AAOA;AAIE;;;AAGA;;AAEE;AACA;;AAEF;;AAEF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH;;AAuCE;;;AAGE;;AAED;AAED;AAEI;AACA;AACA;AACA;AACD;;;AAKH;AACA;AAEA;AACE;AAAgB;AAChB;AACA;AAAqC;AACrC;AACA;AAAa;;;AAGX;AACA;AACA;AACE;AACA;AACF;AACF;AACA;;AAGF;AAKA;AACE;AAAoB;AACpB;AAAsB;;;AAGpB;AAA+B;AACjC;AACA;;AAGF;AAEE;AACE;;AAEF;;AAGA;AACE;;AAEF;AAEF;;;;;;;;AAQU;;;AAGN;AACF;AAIF;AACA;AAEA;AAEI;;;;AAEA;AACE;;;;AAOF;;;;AAKE;AACE;AACA;AACA;;;;AAEA;;;AAGA;;AAEA;AACE;AAAoB;;AACf;;AAEP;AACF;;;AAIF;;AAEE;AACA;AAA0B;;AACrB;AACL;AACF;AACF;AAIF;;;;;;;;;;;AAUA;;;;;;AAMC;AAED;AAEA;;;;;AAQE;AACA;;AAED;AAED;AACA;AAEA;;;;AAII;;;AAGF;AACE;AACA;AACA;AACF;AACA;;AAGF;;AACwB;AACtB;AAEA;AACA;AAEI;;AAEE;;;AAUR;AAEA;AAOI;AACA;AACA;AACE;AACA;AACA;AACF;;AAEE;AACA;;AAEE;;AAC8B;AAC9B;AACF;AACF;AACA;AACA;AACF;AAIF;AAEI;;;;;;;;AAUJ;AAEI;;AACA;AACA;AACE;;AAEE;;AAEF;;AAEE;;AAEF;;;;AAIA;;AAEE;;AAEF;;AAEE;;AAEF;;AAEE;;;;;;AAKA;;;AAEA;;AAEE;;AAEF;;;;;;;;;AAOA;AACA;AACA;;;;;AAIF;;;AAGJ;;;;;;;;AASC;;;AAKC;;;AAIJ;AACE;AAEI;AACE;AACA;AACE;AACA;;AAER;AAOQ;;;AAGD;;;;AAWC;;AAKI;;;;;;;;AAqBF;AAEE;;AAEA;AACF;;AAMZ;AAEA;AAgBY;AACF;AAUV;;;AASY;;AAED;AAMD;AACA;AACE;AACA;AACE;;AAEE;AACA;AAGd;;;;;AAWA;AAOU;AACF;;AAGA;;AAYI;;AAWZ;;AAEE;AACE;;;AAGJ;;AAGE;AACF;;AAGE;;;;;;;AAQD;;;;AAOD;AAiBF;;;AAIE;;AAcF;AAEA;AACE;;;;AAIA;;;AAIF;;AAGE;AACA;AACD;AAED;AAkCc;AACD;;;AAIwB;AACvB;AACE;;AAED;AACH;AAWd;AAEA;AAEO;;"}
1	+ {"version":3,"file":"DataTable.js","sources":["src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\n\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons/ChevronDownIcon';\nimport { ChevronUpIcon } from '@/components/Icons/ChevronUpIcon';\nimport { SortIcon } from '@/components/Icons/SortIcon';\nimport { Checkbox } from '@/components/primitives/Checkbox';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cx } from '@/utils/cx';\n\nimport {\n bodyStyle,\n cellRecipe,\n emptyStateStyle,\n gridTemplateColumnsVar,\n headerCellInnerStyle,\n headerCellRecipe,\n headerStyle,\n innerWrapperStyle,\n resizeHandleStyle,\n rootRecipe,\n rowRecipe,\n scrollContainerStyle,\n skeletonBarStyle,\n skeletonCellStyle,\n skeletonRowStyle,\n sortIndicatorRecipe,\n tableMinWidthVar,\n totalHeightVar,\n virtualBodyStyle,\n} from './DataTable.css';\n\nimport type {\n DataTableColumn,\n DataTableDensity,\n DataTableProps,\n DataTableSelectionState,\n DataTableSortDirection,\n DataTableSortState,\n} from './DataTable.types';\n\nconst DENSITY_ROW_HEIGHT: Record<DataTableDensity, number> = {\n comfortable: 40,\n compact: 32,\n dense: 24,\n};\n\nconst VIRTUALIZATION_THRESHOLD_DEFAULT = 100;\nconst SELECT_COLUMN_WIDTH = 40;\n\nfunction getRowKey<R>(\n rowKey: keyof R \| ((row: R, rowIndex: number) => string),\n row: R,\n rowIndex: number\n): string {\n if (typeof rowKey === 'function') return rowKey(row, rowIndex);\n const value = row[rowKey];\n return typeof value === 'string' ? value : String(value);\n}\n\nfunction readCellValue<R>(\n column: DataTableColumn<R>,\n row: R,\n rowIndex: number\n): unknown {\n const accessor = column.accessor;\n if (typeof accessor === 'function') return accessor(row, rowIndex);\n if (typeof accessor === 'string')\n return (row as Record<string, unknown>)[accessor];\n return (row as Record<string, unknown>)[column.id];\n}\n\nfunction defaultCompare(a: unknown, b: unknown): number {\n if (a === b) return 0;\n if (a === null \|\| a === undefined) return 1;\n if (b === null \|\| b === undefined) return -1;\n if (typeof a === 'number' && typeof b === 'number') return a - b;\n if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();\n if (typeof a === 'boolean' && typeof b === 'boolean')\n return a === b ? 0 : a ? 1 : -1;\n const sa = typeof a === 'string' ? a : JSON.stringify(a);\n const sb = typeof b === 'string' ? b : JSON.stringify(b);\n return sa.localeCompare(sb);\n}\n\nfunction nextSortDirection(\n current: DataTableSortDirection\n): DataTableSortDirection {\n if (current === null) return 'asc';\n if (current === 'asc') return 'desc';\n return null;\n}\n\nfunction resolveDimension(\n value: number \| string \| undefined\n): string \| undefined {\n if (value === undefined) return undefined;\n return typeof value === 'number' ? `${value}px` : value;\n}\n\ninterface ColumnTrack {\n templateValue: string;\n minPx: number;\n}\n\nfunction getColumnTrack<R>(\n column: DataTableColumn<R>,\n override: number \| undefined\n): ColumnTrack {\n if (override !== undefined) {\n return { templateValue: `${override}px`, minPx: override };\n }\n if (column.width !== undefined) {\n const resolved = resolveDimension(column.width) ?? '1fr';\n const minPx = typeof column.width === 'number' ? column.width : 0;\n return { templateValue: resolved, minPx };\n }\n const minWidth = column.minWidth ?? 80;\n return { templateValue: `minmax(${minWidth}px, 1fr)`, minPx: minWidth };\n}\n\n/*\n Data-driven table with sortable columns, row selection, sticky header,\n * optional sticky first column, optional column resizing, and optional\n * row virtualization (auto-enabled above 100 rows).\n \n Uses a CSS grid layout under `role=\"grid\"` so columns line up across the\n * sticky header and individual virtualized rows without depending on real\n * `<table>` semantics.\n \n @example\n * ```tsx\n * <DataTable\n * rows={users}\n * rowKey=\"id\"\n * columns={[\n * { id: 'name', header: 'Name', accessor: 'name', sortable: true },\n * { id: 'role', header: 'Role', accessor: 'role' },\n * ]}\n * selectionMode=\"multiple\"\n * onSelectionChange={setSelected}\n * />\n * ```\n */\nfunction DataTableInner<R>(props: DataTableProps<R>): React.ReactElement {\n const {\n rows,\n columns,\n rowKey,\n density = 'comfortable',\n stickyHeader = true,\n sort,\n defaultSort,\n onSortChange,\n manualSort = false,\n selectionMode = false,\n selection,\n defaultSelection,\n onSelectionChange,\n isRowSelectable,\n onRowClick,\n onRowActivate,\n renderRow,\n emptyState,\n loading = false,\n loadingRowCount = 5,\n virtualized = 'auto',\n virtualizationThreshold = VIRTUALIZATION_THRESHOLD_DEFAULT,\n estimatedRowHeight,\n overscan = 8,\n height = 480,\n maxHeight,\n resizableColumns = false,\n onColumnResize,\n className,\n style,\n testId,\n ref,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...rest\n } = props;\n\n const [sortState, setSortState] = useControlledState<DataTableSortState>({\n value: sort ?? undefined,\n defaultValue: defaultSort ?? undefined,\n onChange: onSortChange,\n fallback: { columnId: null, direction: null },\n });\n\n const [selectionState, setSelectionState] =\n useControlledState<DataTableSelectionState>({\n value: selection,\n defaultValue: defaultSelection,\n onChange: onSelectionChange,\n fallback: [],\n });\n\n const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});\n const [activeRowIndex, setActiveRowIndex] = useState<number \| null>(null);\n\n const showSelectColumn = selectionMode === 'multiple';\n const selectedSet = useMemo(() => new Set(selectionState), [selectionState]);\n\n const sortedRows = useMemo(() => {\n if (manualSort) return rows;\n const { columnId, direction } = sortState;\n if (!columnId \|\| direction === null) return rows;\n const column = columns.find(c => c.id === columnId);\n if (!column) return rows;\n const indexed = rows.map((row, idx) => ({ row, idx }));\n indexed.sort((a, b) => {\n const valueA = readCellValue(column, a.row, a.idx);\n const valueB = readCellValue(column, b.row, b.idx);\n const cmp = column.sortComparator\n ? column.sortComparator(valueA, valueB, a.row, b.row)\n : defaultCompare(valueA, valueB);\n return direction === 'asc' ? cmp : -cmp;\n });\n return indexed.map(item => item.row);\n }, [rows, sortState, columns, manualSort]);\n\n const rowKeys = useMemo(\n () => sortedRows.map((row, idx) => getRowKey(rowKey, row, idx)),\n [sortedRows, rowKey]\n );\n\n const selectableIndexes = useMemo(() => {\n if (!selectionMode) return [];\n if (!isRowSelectable) return sortedRows.map((_, idx) => idx);\n const result: number[] = [];\n sortedRows.forEach((row, idx) => {\n if (isRowSelectable(row, idx)) result.push(idx);\n });\n return result;\n }, [sortedRows, isRowSelectable, selectionMode]);\n\n const allSelectableSelected =\n selectableIndexes.length > 0 &&\n selectableIndexes.every(idx => {\n const k = rowKeys[idx];\n return k !== undefined && selectedSet.has(k);\n });\n const someSelectableSelected =\n !allSelectableSelected &&\n selectableIndexes.some(idx => {\n const k = rowKeys[idx];\n return k !== undefined && selectedSet.has(k);\n });\n\n const handleSortClick = useCallback(\n (column: DataTableColumn<R>) => {\n if (!column.sortable) return;\n setSortState(prev => {\n if (prev.columnId === column.id) {\n const next = nextSortDirection(prev.direction);\n return next === null\n ? { columnId: null, direction: null }\n : { columnId: column.id, direction: next };\n }\n return { columnId: column.id, direction: 'asc' };\n });\n },\n [setSortState]\n );\n\n const selectionAnchorRef = useRef<number \| null>(null);\n const selectionShiftKeyRef = useRef(false);\n\n const toggleRowSelection = useCallback(\n (rowKeyValue: string, row: R, rowIdx: number, rangeMode = false) => {\n if (!selectionMode) return;\n if (isRowSelectable && !isRowSelectable(row, rowIdx)) return;\n if (selectionMode === 'single') {\n selectionAnchorRef.current = rowIdx;\n setSelectionState(prev =>\n prev[0] === rowKeyValue ? [] : [rowKeyValue]\n );\n return;\n }\n\n const anchor = selectionAnchorRef.current;\n if (rangeMode && anchor !== null && anchor !== rowIdx) {\n const [start, end] =\n anchor < rowIdx ? [anchor, rowIdx] : [rowIdx, anchor];\n const rangeKeys: string[] = [];\n for (let i = start; i <= end; i += 1) {\n const candidate = sortedRows[i];\n const candidateKey = rowKeys[i];\n if (candidate === undefined \|\| candidateKey === undefined) continue;\n if (isRowSelectable && !isRowSelectable(candidate, i)) continue;\n rangeKeys.push(candidateKey);\n }\n setSelectionState(prev => {\n const set = new Set(prev);\n const shouldDeselect = set.has(rowKeyValue);\n for (const key of rangeKeys) {\n if (shouldDeselect) set.delete(key);\n else set.add(key);\n }\n return Array.from(set);\n });\n return;\n }\n\n selectionAnchorRef.current = rowIdx;\n setSelectionState(prev => {\n const set = new Set(prev);\n if (set.has(rowKeyValue)) set.delete(rowKeyValue);\n else set.add(rowKeyValue);\n return Array.from(set);\n });\n },\n [selectionMode, isRowSelectable, setSelectionState, sortedRows, rowKeys]\n );\n\n const toggleSelectAll = useCallback(() => {\n if (selectionMode !== 'multiple') return;\n if (allSelectableSelected) {\n setSelectionState([]);\n return;\n }\n const next = selectableIndexes\n .map(idx => rowKeys[idx])\n .filter((k): k is string => typeof k === 'string');\n setSelectionState(next);\n }, [\n allSelectableSelected,\n selectableIndexes,\n rowKeys,\n selectionMode,\n setSelectionState,\n ]);\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n const shouldVirtualize =\n virtualized === true \|\|\n (virtualized === 'auto' && sortedRows.length > virtualizationThreshold);\n\n const rowHeightPx = estimatedRowHeight ?? DENSITY_ROW_HEIGHT[density];\n\n // TanStack Virtual's useVirtualizer returns functions that cannot be safely\n // memoized; the Compiler flags it as an incompatible library. Behavior is\n // correct here because the virtualizer is read imperatively per render.\n // eslint-disable-next-line react-hooks/incompatible-library\n const virtualizer = useVirtualizer({\n count: shouldVirtualize ? sortedRows.length : 0,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: () => rowHeightPx,\n overscan,\n });\n\n const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];\n const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;\n\n const tracks = useMemo(() => {\n const items: string[] = [];\n let minWidth = 0;\n if (showSelectColumn) {\n items.push(`${SELECT_COLUMN_WIDTH}px`);\n minWidth += SELECT_COLUMN_WIDTH;\n }\n columns.forEach(column => {\n const t = getColumnTrack(column, columnWidths[column.id]);\n items.push(t.templateValue);\n minWidth += t.minPx;\n });\n return { template: items.join(' '), minWidth };\n }, [columns, columnWidths, showSelectColumn]);\n\n const renderSortIndicator = (column: DataTableColumn<R>) => {\n if (!column.sortable) return null;\n const active =\n sortState.columnId === column.id && sortState.direction !== null;\n const direction = active ? sortState.direction : null;\n const Icon =\n direction === 'asc'\n ? ChevronUpIcon\n : direction === 'desc'\n ? ChevronDownIcon\n : SortIcon;\n return (\n <span\n className={sortIndicatorRecipe({ active: active \|\| undefined })}\n aria-hidden=\"true\"\n >\n <Icon size=\"sm\" />\n </span>\n );\n };\n\n const beginResize = useCallback(\n (\n columnId: string,\n startX: number,\n startWidth: number,\n column: DataTableColumn<R>\n ) => {\n const minWidth = column.minWidth ?? 40;\n const maxWidth = column.maxWidth ?? Infinity;\n const handleMove = (event: PointerEvent) => {\n const delta = event.clientX - startX;\n const next = Math.max(minWidth, Math.min(maxWidth, startWidth + delta));\n setColumnWidths(prev => ({ ...prev, [columnId]: next }));\n };\n const handleUp = () => {\n window.removeEventListener('pointermove', handleMove);\n window.removeEventListener('pointerup', handleUp);\n setColumnWidths(prev => {\n const finalWidth = prev[columnId];\n if (finalWidth !== undefined) onColumnResize?.(columnId, finalWidth);\n return prev;\n });\n };\n window.addEventListener('pointermove', handleMove);\n window.addEventListener('pointerup', handleUp);\n },\n [onColumnResize]\n );\n\n const focusRow = useCallback(\n (index: number) => {\n if (sortedRows.length === 0) return;\n const clamped = Math.max(0, Math.min(sortedRows.length - 1, index));\n setActiveRowIndex(clamped);\n if (shouldVirtualize) {\n virtualizer.scrollToIndex(clamped, { align: 'auto' });\n }\n },\n [sortedRows.length, shouldVirtualize, virtualizer]\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (sortedRows.length === 0) return;\n const current = activeRowIndex ?? -1;\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n focusRow(current + 1);\n return;\n case 'ArrowUp':\n event.preventDefault();\n focusRow(current - 1);\n return;\n case 'Home':\n event.preventDefault();\n focusRow(0);\n return;\n case 'End':\n event.preventDefault();\n focusRow(sortedRows.length - 1);\n return;\n case 'PageDown':\n event.preventDefault();\n focusRow(current + 10);\n return;\n case 'PageUp':\n event.preventDefault();\n focusRow(current - 10);\n return;\n case 'Enter': {\n if (current < 0) return;\n event.preventDefault();\n const row = sortedRows[current];\n if (row === undefined) return;\n const k = rowKeys[current];\n if (selectionMode === 'single' && k !== undefined) {\n toggleRowSelection(k, row, current);\n }\n onRowActivate?.(row, current);\n return;\n }\n case ' ': {\n if (current < 0) return;\n if (selectionMode !== 'multiple') return;\n event.preventDefault();\n const row = sortedRows[current];\n const k = rowKeys[current];\n if (row === undefined \|\| k === undefined) return;\n toggleRowSelection(k, row, current, event.shiftKey);\n return;\n }\n default:\n return;\n }\n },\n [\n activeRowIndex,\n focusRow,\n sortedRows,\n rowKeys,\n selectionMode,\n toggleRowSelection,\n onRowActivate,\n ]\n );\n\n useEffect(() => {\n if (activeRowIndex !== null && activeRowIndex >= sortedRows.length) {\n setActiveRowIndex(sortedRows.length === 0 ? null : sortedRows.length - 1);\n }\n }, [activeRowIndex, sortedRows.length]);\n\n const renderHeaderCell = (column: DataTableColumn<R>) => {\n const ariaSort: 'ascending' \| 'descending' \| 'none' \| undefined =\n column.sortable\n ? sortState.columnId === column.id && sortState.direction === 'asc'\n ? 'ascending'\n : sortState.columnId === column.id && sortState.direction === 'desc'\n ? 'descending'\n : 'none'\n : undefined;\n return (\n <div\n key={column.id}\n role=\"columnheader\"\n data-column-id={column.id}\n className={cx(\n headerCellRecipe({\n align: column.align ?? 'left',\n sortable: column.sortable ? true : undefined,\n sticky: column.sticky ? true : undefined,\n }),\n column.className\n )}\n aria-sort={ariaSort}\n aria-hidden={column.ariaHidden ? true : undefined}\n tabIndex={column.sortable ? 0 : undefined}\n onClick={\n column.sortable\n ? () => {\n handleSortClick(column);\n }\n : undefined\n }\n onKeyDown={\n column.sortable\n ? event => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleSortClick(column);\n }\n }\n : undefined\n }\n >\n <span className={headerCellInnerStyle}>\n <span>{column.header}</span>\n {renderSortIndicator(column)}\n </span>\n {resizableColumns && !column.disableResize && (\n <span\n className={resizeHandleStyle}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label={`Resize column ${column.id}`}\n onPointerDown={event => {\n event.preventDefault();\n event.stopPropagation();\n const startWidth =\n columnWidths[column.id] ??\n event.currentTarget.parentElement?.getBoundingClientRect()\n .width ??\n 100;\n beginResize(column.id, event.clientX, startWidth, column);\n }}\n />\n )}\n </div>\n );\n };\n\n const renderHeader = () => (\n <div\n role=\"row\"\n aria-rowindex={1}\n className={headerStyle({ sticky: stickyHeader \|\| undefined })}\n >\n {showSelectColumn && (\n <div\n role=\"columnheader\"\n className={headerCellRecipe({ selectColumn: true, sticky: true })}\n aria-label=\"Select all rows\"\n >\n <Checkbox\n checked={allSelectableSelected}\n indeterminate={someSelectableSelected}\n onChange={() => {\n toggleSelectAll();\n }}\n aria-label=\"Select all rows\"\n size=\"sm\"\n />\n </div>\n )}\n {columns.map(renderHeaderCell)}\n </div>\n );\n\n const renderCells = (row: R, rowIdx: number) =>\n columns.map(column => {\n const value = readCellValue(column, row, rowIdx);\n return (\n <div\n key={column.id}\n role=\"gridcell\"\n className={cx(\n cellRecipe({\n align: column.align ?? 'left',\n sticky: column.sticky ? true : undefined,\n }),\n column.className\n )}\n data-column-id={column.id}\n >\n {column.cell\n ? column.cell({ value, row, rowIndex: rowIdx, column })\n : value === null \|\| value === undefined\n ? ''\n : typeof value === 'string'\n ? value\n : typeof value === 'number' \|\| typeof value === 'boolean'\n ? String(value)\n : JSON.stringify(value)}\n </div>\n );\n });\n\n const renderRowElement = (\n row: R,\n rowIdx: number,\n options: { virtualized?: boolean; transformY?: number } = {}\n ) => {\n const k = rowKeys[rowIdx] ?? `__row_${rowIdx}__`;\n const isSelected = selectedSet.has(k);\n const interactive = selectionMode === 'single' \|\| onRowClick !== undefined;\n\n const cells = (\n <>\n {showSelectColumn && (\n <div\n role=\"gridcell\"\n tabIndex={-1}\n className={cellRecipe({ selectColumn: true, sticky: true })}\n onClickCapture={event => {\n selectionShiftKeyRef.current = event.shiftKey;\n }}\n onClick={event => {\n event.stopPropagation();\n }}\n onKeyDown={event => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.stopPropagation();\n }\n }}\n >\n <Checkbox\n checked={isSelected}\n disabled={isRowSelectable ? !isRowSelectable(row, rowIdx) : false}\n onChange={() => {\n toggleRowSelection(\n k,\n row,\n rowIdx,\n selectionShiftKeyRef.current\n );\n selectionShiftKeyRef.current = false;\n }}\n aria-label={`Select row ${rowIdx + 1}`}\n size=\"sm\"\n />\n </div>\n )}\n {renderCells(row, rowIdx)}\n </>\n );\n\n const handleRowClick = (event: React.MouseEvent<HTMLDivElement>) => {\n onRowClick?.(row, rowIdx, event);\n if (selectionMode === 'single') {\n toggleRowSelection(k, row, rowIdx);\n }\n setActiveRowIndex(rowIdx);\n };\n\n const handleRowDoubleClick = () => {\n onRowActivate?.(row, rowIdx);\n };\n\n const handleRowKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n if (selectionMode === 'single') {\n toggleRowSelection(k, row, rowIdx);\n }\n setActiveRowIndex(rowIdx);\n }\n };\n\n const rowContent = renderRow\n ? renderRow({ row, rowIndex: rowIdx, selected: isSelected }, cells)\n : cells;\n\n const rowClassName = rowRecipe({\n virtualized: options.virtualized ? true : undefined,\n interactive: interactive ? true : undefined,\n selected: isSelected ? true : undefined,\n active: activeRowIndex === rowIdx ? true : undefined,\n });\n\n const rowStyle: React.CSSProperties \| undefined =\n options.virtualized && options.transformY !== undefined\n ? { transform: `translateY(${options.transformY}px)` }\n : undefined;\n\n return (\n <div\n key={k}\n role=\"row\"\n aria-rowindex={rowIdx + 2}\n aria-selected={selectionMode ? isSelected : undefined}\n data-row-key={k}\n data-row-index={rowIdx}\n data-row-interactive={interactive ? 'true' : undefined}\n className={rowClassName}\n style={rowStyle}\n tabIndex={interactive ? -1 : undefined}\n onClick={interactive ? handleRowClick : undefined}\n onKeyDown={interactive ? handleRowKeyDown : undefined}\n onDoubleClick={onRowActivate ? handleRowDoubleClick : undefined}\n >\n {rowContent}\n </div>\n );\n };\n\n const renderSkeletonRows = () => {\n const rowsToRender = Array.from({ length: loadingRowCount }, (_, i) => i);\n const cellCount = columns.length + (showSelectColumn ? 1 : 0);\n return rowsToRender.map(idx => (\n <div\n key={`__skeleton_${idx}__`}\n className={skeletonRowStyle}\n aria-hidden=\"true\"\n >\n {Array.from({ length: cellCount }, (_, ci) => (\n <div key={ci} className={skeletonCellStyle}>\n <span className={skeletonBarStyle} />\n </div>\n ))}\n </div>\n ));\n };\n\n const containerStyle: React.CSSProperties = {\n height: resolveDimension(height),\n ...(maxHeight !== undefined\n ? { maxHeight: resolveDimension(maxHeight) }\n : {}),\n ...style,\n };\n\n const isEmpty = !loading && sortedRows.length === 0;\n const totalColumnsCount = columns.length + (showSelectColumn ? 1 : 0);\n\n const gridVars = assignInlineVars({\n [gridTemplateColumnsVar]: tracks.template,\n [tableMinWidthVar]: `${tracks.minWidth}px`,\n });\n\n return (\n <div\n ref={ref}\n role=\"grid\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-rowcount={sortedRows.length + 1}\n aria-colcount={totalColumnsCount}\n aria-multiselectable={selectionMode === 'multiple' ? true : undefined}\n data-testid={testId}\n data-density={density}\n tabIndex={0}\n className={cx(rootRecipe({ density }), className)}\n style={{ ...containerStyle, ...gridVars }}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n <div ref={scrollContainerRef} className={scrollContainerStyle}>\n <div className={innerWrapperStyle}>\n {renderHeader()}\n {loading ? (\n <div className={bodyStyle}>{renderSkeletonRows()}</div>\n ) : isEmpty ? (\n <div className={bodyStyle}>\n <div className={emptyStateStyle} role=\"row\">\n <div role=\"gridcell\" aria-colspan={totalColumnsCount}>\n {emptyState ?? 'No rows to display'}\n </div>\n </div>\n </div>\n ) : shouldVirtualize ? (\n <div\n className={virtualBodyStyle}\n style={assignInlineVars({\n [totalHeightVar]: `${totalSize}px`,\n })}\n >\n {virtualItems.map(item => {\n const row = sortedRows[item.index];\n if (row === undefined) return null;\n return renderRowElement(row, item.index, {\n virtualized: true,\n transformY: item.start,\n });\n })}\n </div>\n ) : (\n <div className={bodyStyle}>\n {sortedRows.map((row, rowIdx) => renderRowElement(row, rowIdx))}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n}\n\nDataTableInner.displayName = 'DataTable';\n\nexport const DataTable = DataTableInner as <R>(\n props: DataTableProps<R> & { ref?: React.Ref<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkDA;AACE;AACA;AACA;;AAGF;AACA;AAEA;;AAKoC;AAClC;AACA;AACF;AAEA;AAKE;;AACoC;;AAElC;AACF;AACF;AAEA;;AACe;AACb;AAAmC;AACnC;;;;AAEA;;;;AAGA;AACA;AACA;AACF;AAEA;;AAGwB;;AACC;AACvB;AACF;AAEA;;AAG2B;AACzB;AACF;AAOA;AAIE;;;AAGA;;AAEE;AACA;;AAEF;;AAEF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH;;AAuCE;;;AAGE;;AAED;AAED;AAEI;AACA;AACA;AACA;AACD;;;AAKH;AACA;AAEA;AACE;AAAgB;AAChB;AACA;AAAqC;AACrC;AACA;AAAa;;;AAGX;AACA;AACA;AACE;AACA;AACF;AACF;AACA;;AAGF;AAKA;AACE;AAAoB;AACpB;AAAsB;;;AAGpB;AAA+B;AACjC;AACA;;AAGF;AAEE;AACE;;AAEF;;AAGA;AACE;;AAEF;AAEF;;;;;;;;AAQU;;;AAGN;AACF;AAIF;AACA;AAEA;AAEI;;;;AAEA;AACE;;;;AAOF;;;;AAKE;AACE;AACA;AACA;;;;AAEA;;;AAGA;;AAEA;AACE;AAAoB;;AACf;;AAEP;AACF;;;AAIF;;AAEE;AACA;AAA0B;;AACrB;AACL;AACF;AACF;AAIF;;;;;;;;;;;AAUA;;;;;;AAMC;AAED;AAEA;;;;;;;;;AAYE;AACA;;AAED;AAED;AACA;AAEA;;;;AAII;;;AAGF;AACE;AACA;AACA;AACF;AACA;;AAGF;;AACwB;AACtB;AAEA;AACA;AAEI;;AAEE;;;AAUR;AAEA;AAOI;AACA;AACA;AACE;AACA;AACA;AACF;;AAEE;AACA;;AAEE;;AAC8B;AAC9B;AACF;AACF;AACA;AACA;AACF;AAIF;AAEI;;;;;;;;AAUJ;AAEI;;AACA;AACA;AACE;;AAEE;;AAEF;;AAEE;;AAEF;;;;AAIA;;AAEE;;AAEF;;AAEE;;AAEF;;AAEE;;;;;;AAKA;;;AAEA;;AAEE;;AAEF;;;;;;;;;AAOA;AACA;AACA;;;;;AAIF;;;AAGJ;;;;;;;;AASC;;;AAKC;;;AAIJ;AACE;AAEI;AACE;AACA;AACE;AACA;;AAER;AAOQ;;;AAGD;;;;AAWC;;AAKI;;;;;;;;AAqBF;AAEE;;AAEA;AACF;;AAMZ;AAEA;AAgBY;AACF;AAUV;;;AASY;;AAED;AAMD;AACA;AACE;AACA;AACE;;AAEE;AACA;AAGd;;;;;AAWA;AAQU;AACF;;AAGA;AAEE;;;AAGF;;AAYI;;AAWZ;;AAEE;AACE;;;AAGJ;;AAGE;AACF;AAEA;AACE;;AAEE;AACE;;;;AAIN;;AAGE;;;;;;;AAQD;;;;;AA0BH;;;AAIE;;AAcF;AAEA;AACE;;;;AAIA;;;AAIF;;AAGE;AACA;AACD;AAED;AAkCc;AACD;;;AAIwB;AACvB;AACE;;AAED;AACH;AAWd;AAEA;AAEO;;"}