entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,191 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useState, useRef, useMemo, useCallback } from 'react';
+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';
+import { inputStyle, wrapperRecipe, containerStyle, tagLabelStyle, tagRemoveStyle, tagRecipe } from './TagInput.css.js';
+
+const SEPARATOR_KEY = {
+    Enter: 'Enter',
+    Comma: ',',
+    Space: ' ',
+    Tab: 'Tab',
+};
+const DEFAULT_SEPARATORS = ['Enter', 'Comma'];
+function defaultNormalize(value) {
+    return value.trim();
+}
+/**
+ * Multi-value input that captures a list of strings ("tags") rendered as
+ * removable chips. Supports controlled and uncontrolled modes, validation,
+ * configurable commit keys, and custom chip rendering.
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   label="Keywords"
+ *   placeholder="Add a keyword..."
+ *   defaultValue={['react', 'typescript']}
+ *   onChange={setTags}
+ * />
+ * ```
+ */
+function TagInput({ value, defaultValue, onChange, placeholder, separators = DEFAULT_SEPARATORS, addOnBlur = false, allowDuplicates = false, max, validate, normalize = defaultNormalize, onValidate, renderTag, size = 'md', variant = 'default', label, helperText, error = false, errorMessage, disabled = false, required = false, readOnly = false, name, inputAriaLabel, inputRef: inputRefProp, className, style, testId, id: idProp, ref, ...rest }) {
+    const autoId = useId();
+    const fieldId = idProp ?? autoId;
+    const labelId = `${fieldId}-label`;
+    const helperId = `${fieldId}-helper`;
+    const [tags, setTags] = useControlledState({
+        value,
+        defaultValue,
+        onChange,
+        fallback: [],
+    });
+    const [draft, setDraft] = useState('');
+    const [focused, setFocused] = useState(false);
+    const innerInputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const setInputRef = useMergedRef(innerInputRef, inputRefProp);
+    const setWrapperRef = useMergedRef(wrapperRef, ref);
+    const atMax = typeof max === 'number' && tags.length >= max;
+    const inputDisabled = disabled || readOnly || atMax;
+    const separatorKeys = useMemo(() => new Set(separators.map(s => SEPARATOR_KEY[s])), [separators]);
+    const tryAppend = useCallback((current, raw) => {
+        const normalized = normalize(raw);
+        if (normalized.length === 0) {
+            if (raw.length > 0)
+                onValidate?.(raw, 'empty');
+            return null;
+        }
+        if (typeof max === 'number' && current.length >= max) {
+            onValidate?.(raw, 'max');
+            return null;
+        }
+        if (!allowDuplicates && current.includes(normalized)) {
+            onValidate?.(raw, 'duplicate');
+            return null;
+        }
+        if (validate) {
+            const result = validate(normalized, current);
+            if (result === false) {
+                onValidate?.(raw, 'invalid');
+                return null;
+            }
+            if (typeof result === 'string') {
+                onValidate?.(raw, result);
+                return null;
+            }
+        }
+        return [...current, normalized];
+    }, [allowDuplicates, max, normalize, onValidate, validate]);
+    const commitTag = useCallback((raw) => {
+        const next = tryAppend(tags, raw);
+        if (!next)
+            return false;
+        setTags(next);
+        return true;
+    }, [setTags, tags, tryAppend]);
+    const removeTagAt = useCallback((index) => {
+        if (index < 0 || index >= tags.length)
+            return;
+        const next = tags.slice(0, index).concat(tags.slice(index + 1));
+        setTags(next);
+    }, [setTags, tags]);
+    const handleKeyDown = useCallback((event) => {
+        if (inputDisabled)
+            return;
+        if (separatorKeys.has(event.key)) {
+            // Tab as separator: only commit when there's a draft, otherwise let
+            // the focus move out naturally.
+            if (event.key === 'Tab' && draft.length === 0)
+                return;
+            if (draft.length > 0) {
+                event.preventDefault();
+                if (commitTag(draft))
+                    setDraft('');
+            }
+            else if (event.key === 'Enter') {
+                // Prevent submitting an enclosing form on empty Enter.
+                event.preventDefault();
+            }
+            return;
+        }
+        if (event.key === 'Backspace' && draft.length === 0 && tags.length > 0) {
+            event.preventDefault();
+            removeTagAt(tags.length - 1);
+        }
+    }, [commitTag, draft, inputDisabled, removeTagAt, separatorKeys, tags.length]);
+    const handleChange = useCallback((event) => {
+        const next = event.target.value;
+        // If the user typed/pasted a separator character (e.g. comma), commit
+        // each piece. Newlines are split too so multi-line paste still works.
+        const splitChars = Array.from(separatorKeys).filter(k => k !== 'Enter' && k !== 'Tab');
+        if (splitChars.length === 0 || !splitChars.some(c => next.includes(c))) {
+            setDraft(next);
+            return;
+        }
+        const pattern = new RegExp(`[${splitChars.map(c => `\\${c}`).join('')}]`);
+        const parts = next.split(pattern);
+        const trailing = parts.pop() ?? '';
+        let working = tags;
+        for (const part of parts) {
+            if (part.length === 0)
+                continue;
+            const appended = tryAppend(working, part);
+            if (appended)
+                working = appended;
+        }
+        if (working !== tags)
+            setTags(working);
+        setDraft(trailing);
+    }, [separatorKeys, setTags, tags, tryAppend]);
+    const handleBlur = useCallback(() => {
+        setFocused(false);
+        if (addOnBlur && draft.length > 0) {
+            if (commitTag(draft))
+                setDraft('');
+        }
+    }, [addOnBlur, commitTag, draft]);
+    const handleWrapperMouseDown = useCallback((event) => {
+        // Forward clicks on empty padding to the input, but do not steal focus
+        // from chip remove buttons.
+        if (event.target === wrapperRef.current) {
+            event.preventDefault();
+            innerInputRef.current?.focus();
+        }
+    }, []);
+    const renderChip = (tag, index) => {
+        const remove = () => {
+            removeTagAt(index);
+        };
+        if (renderTag) {
+            const state = {
+                tag,
+                index,
+                disabled,
+                remove,
+            };
+            return (jsx(React.Fragment, { children: renderTag(state) }, `${tag}-${String(index)}`));
+        }
+        return (jsxs("span", { className: tagRecipe({ size }), "data-testid": testId ? `${testId}-tag-${String(index)}` : undefined, children: [jsx("span", { className: tagLabelStyle, children: tag }), !readOnly && (jsx("button", { type: "button", tabIndex: -1, disabled: disabled, "aria-label": `Remove ${tag}`, className: tagRemoveStyle, onClick: remove, children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }, `${tag}-${String(index)}`));
+    };
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const formValue = tags.join(',');
+    return (jsxs("div", { className: cx(containerStyle, className), style: style, children: [label && (jsx(FormLabel, { id: labelId, htmlFor: fieldId, required: required, disabled: disabled, children: label })), jsxs("div", { ref: setWrapperRef, className: wrapperRecipe({
+                    size,
+                    variant,
+                    focused,
+                    error,
+                    disabled,
+                }), onMouseDown: handleWrapperMouseDown, "data-testid": testId, ...rest, children: [tags.map((tag, index) => renderChip(tag, index)), !readOnly && (jsx("input", { ref: setInputRef, id: fieldId, type: "text", value: draft, placeholder: tags.length === 0 ? placeholder : undefined, disabled: inputDisabled, required: required && tags.length === 0, "aria-label": inputAriaLabel, "aria-labelledby": !inputAriaLabel && label ? labelId : undefined, "aria-describedby": showHelperText ? helperId : undefined, "aria-invalid": error || undefined, className: inputStyle, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: () => {
+                            setFocused(true);
+                        }, onBlur: handleBlur }))] }), name && jsx("input", { type: "hidden", name: name, value: formValue }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+}
+TagInput.displayName = 'TagInput';
+
+export { TagInput };
+//# sourceMappingURL=TagInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","sources":["../../../../../../src/components/controls/TagInput/TagInput.tsx"],"sourcesContent":[null],"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

@@ -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

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

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

@@ -1,8 +1,96 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { guideLineStyle, guideLineLeftVar, chevronRecipe, iconRecipe, renameInputRecipe, labelRecipe, actionsStyle, paddingLeftVar, rowRecipe } from './TreeNode.css.js';
+import { useState, useRef, useCallback } from 'react';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+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';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.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 = {
@@ -29,8 +117,8 @@ const sizeConfig = {
     },
 };
 // --- Chevron icon SVG ---
-const ChevronSvg = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: jsx("path", { d: "M4.5 2.5L8 6L4.5 9.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const TreeNodeComponent = ({ node, depth, size, indent, isSelected, isExpanded, isFocused, isFirst, isLast, showChevrons, showGuideLines, renamable, nodeId, renderNode, renderActions, onToggleExpand, onClick, onDoubleClick, onContextMenu, onRename, }) => {
+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, 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);
@@ -74,6 +162,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());
@@ -98,18 +195,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

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","sources":["../../../../../../src/components/controls/TreeView/TreeNode.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqBA;AAEA;AAUE;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;;;AA4DE;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;;"}
+{"version":3,"file":"TreeNode.js","sources":["../../../../../../src/components/controls/TreeView/TreeNode.tsx"],"sourcesContent":[null],"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

@@ -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

@@ -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;;"}
+{"version":3,"file":"TreeView.js","sources":["../../../../../../src/components/controls/TreeView/TreeView.tsx"],"sourcesContent":[null],"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

@@ -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

@@ -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;;"}
+{"version":3,"file":"useTreeState.js","sources":["../../../../../../src/components/controls/TreeView/useTreeState.ts"],"sourcesContent":[null],"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

@@ -1,14 +1,101 @@
 "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 { cx } from '../../../utils/cx.js';
+import { FormLabel } from '../../form/FormLabel.js';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+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';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import { UnlinkIcon } from '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.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 ---
@@ -43,9 +130,6 @@ function getAxisLabels(labelPreset, axisLabels, dimension) {
     }
     return Array.from({ length: dimension }, (_, i) => String(i));
 }
-// SVG icons for link/unlink
-const LinkIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M6.5 9.5L9.5 6.5M5.5 7.5L4.146 8.854a2 2 0 002.708 2.708L8.5 10.5M7.5 5.5l1.646-1.646a2 2 0 012.708 2.708L10.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const UnlinkIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M5.5 7.5L4.146 8.854a2 2 0 002.708 2.708L8.5 10.5M7.5 5.5l1.646-1.646a2 2 0 012.708 2.708L10.5 8.5M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 /**
  * A grouped numeric input for Vec2, Vec3, and Vec4 vectors.
  *
@@ -123,8 +207,10 @@ 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));
-                    }), 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 })) : (jsx(UnlinkIcon, { size: iconSize })) }))] }), (error && errorMessage) || helperText ? (jsx(FormHelperText, { error: error && !!errorMessage, children: error && errorMessage ? errorMessage : helperText })) : null] }));
+                        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

@@ -1 +1 @@
-{"version":3,"file":"VectorInput.js","sources":["../../../../../../src/components/controls/VectorInput/VectorInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAoBA;AAEA;;;AAGE;;AAGF;AAEA;AACA;AAEA;AAKE;AACE;;AAEF;AACE;;AAEF;AACE;;;AAGF;AACF;AAEA;AAKE;AACE;;AAEF;;;;;AAKF;AAEA;AACA;AAYA;AAYA;;;;;;;;;;;;;;;;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;;"}
+{"version":3,"file":"VectorInput.js","sources":["../../../../../../src/components/controls/VectorInput/VectorInput.tsx"],"sourcesContent":[null],"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;;"}