entangle-ui 0.9.0 → 0.10.0

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

@@ -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,8 @@ 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 { 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 +118,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 +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());
@@ -184,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;"}
+{"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,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,8 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
-import { cx } from '../../../utils/cx.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 +207,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

@@ -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;;"}
+{"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;;"}

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

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

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

package/dist/esm/components/editor/AssetBrowser/AssetBrowser.css.js

@@ -0,0 +1,46 @@
+import './../../../assets/src/components/editor/AssetBrowser/AssetBrowser.css.ts.vanilla-B2S4cEiY.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var body = 'AssetBrowser_body__15pxmeug';
+var breadcrumbsBar = 'AssetBrowser_breadcrumbsBar__15pxmeuf';
+var cellHeightVar = 'var(--cellHeightVar__15pxmeu1)';
+var cellLabel = 'AssetBrowser_cellLabel__15pxmeu12';
+var cellRecipe = createRuntimeFn({defaultClassName:'AssetBrowser_cellRecipe__15pxmeut',variantClassNames:{selected:{true:'AssetBrowser_cellRecipe_selected_true__15pxmeuu',false:'AssetBrowser_cellRecipe_selected_false__15pxmeuv'},dropTarget:{true:'AssetBrowser_cellRecipe_dropTarget_true__15pxmeuw',false:'AssetBrowser_cellRecipe_dropTarget_false__15pxmeux'},disabled:{true:'AssetBrowser_cellRecipe_disabled_true__15pxmeuy',false:'AssetBrowser_cellRecipe_disabled_false__15pxmeuz'}},defaultVariants:{selected:false,dropTarget:false,disabled:false},compoundVariants:[]});
+var cellWidthVar = 'var(--cellWidthVar__15pxmeu0)';
+var columnsVar = 'var(--columnsVar__15pxmeu4)';
+var contextMenuTrigger = 'AssetBrowser_contextMenuTrigger__15pxmeuj';
+var emptyText = 'AssetBrowser_emptyText__15pxmeu18';
+var emptyWrap = 'AssetBrowser_emptyWrap__15pxmeum';
+var gridFlow = 'AssetBrowser_gridFlow__15pxmeus';
+var gridGapVar = 'var(--gridGapVar__15pxmeu3)';
+var gridScroller = 'AssetBrowser_gridScroller__15pxmeup';
+var gridSizer = 'AssetBrowser_gridSizer__15pxmeuq';
+var gridWindow = 'AssetBrowser_gridWindow__15pxmeur';
+var importOverlay = 'AssetBrowser_importOverlay__15pxmeu15';
+var listScroller = 'AssetBrowser_listScroller__15pxmeu16';
+var loadingGrid = 'AssetBrowser_loadingGrid__15pxmeun';
+var main = 'AssetBrowser_main__15pxmeui';
+var marquee = 'AssetBrowser_marquee__15pxmeu14';
+var marqueeHVar = 'var(--marqueeHVar__15pxmeua)';
+var marqueeWVar = 'var(--marqueeWVar__15pxmeu9)';
+var marqueeXVar = 'var(--marqueeXVar__15pxmeu7)';
+var marqueeYVar = 'var(--marqueeYVar__15pxmeu8)';
+var nameCell = 'AssetBrowser_nameCell__15pxmeu17';
+var offsetYVar = 'var(--offsetYVar__15pxmeu6)';
+var renameField = 'AssetBrowser_renameField__15pxmeu13';
+var root = 'AssetBrowser_root__15pxmeub';
+var searchField = 'AssetBrowser_searchField__15pxmeue';
+var sidebar = 'AssetBrowser_sidebar__15pxmeuh';
+var skeletonCell = 'AssetBrowser_skeletonCell__15pxmeuo';
+var srOnly = 'AssetBrowser_srOnly__15pxmeu19';
+var statusBar = 'AssetBrowser_statusBar__15pxmeuk';
+var statusSpacer = 'AssetBrowser_statusSpacer__15pxmeul';
+var thumb = 'AssetBrowser_thumb__15pxmeu10';
+var thumbImage = 'AssetBrowser_thumbImage__15pxmeu11';
+var thumbSizeVar = 'var(--thumbSizeVar__15pxmeu2)';
+var toolbar = 'AssetBrowser_toolbar__15pxmeuc';
+var toolbarSpacer = 'AssetBrowser_toolbarSpacer__15pxmeud';
+var totalHeightVar = 'var(--totalHeightVar__15pxmeu5)';
+
+export { body, breadcrumbsBar, cellHeightVar, cellLabel, cellRecipe, cellWidthVar, columnsVar, contextMenuTrigger, emptyText, emptyWrap, gridFlow, gridGapVar, gridScroller, gridSizer, gridWindow, importOverlay, listScroller, loadingGrid, main, marquee, marqueeHVar, marqueeWVar, marqueeXVar, marqueeYVar, nameCell, offsetYVar, renameField, root, searchField, sidebar, skeletonCell, srOnly, statusBar, statusSpacer, thumb, thumbImage, thumbSizeVar, toolbar, toolbarSpacer, totalHeightVar };
+//# sourceMappingURL=AssetBrowser.css.js.map

package/dist/esm/components/editor/AssetBrowser/AssetBrowser.css.js.map

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

package/dist/esm/components/editor/AssetBrowser/AssetBrowser.js

@@ -0,0 +1,254 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useState, useMemo } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { body, root } from './AssetBrowser.css.js';
+import { AssetBrowserAnnouncementLive } from './AssetBrowserAnnouncementLive.js';
+import { AssetBrowserBreadcrumbs } from './AssetBrowserBreadcrumbs.js';
+import { AssetBrowserStoreContext, AssetBrowserChromeContext, AssetBrowserContext } from './AssetBrowserContext.js';
+import { resolveLabels } from './assetBrowserLabels.js';
+import { AssetBrowserSidebar } from './AssetBrowserSidebar.js';
+import { AssetBrowserStatusBar } from './AssetBrowserStatusBar.js';
+import { AssetBrowserStore } from './AssetBrowserStore.js';
+import { AssetBrowserSurface } from './AssetBrowserSurface.js';
+import { AssetBrowserToolbar } from './AssetBrowserToolbar.js';
+import { markSlot, getSlotKind } from './slots.js';
+import { useAssetBrowserHandle } from './useAssetBrowserHandle.js';
+import { useAssetBrowserViewState } from './useAssetBrowserViewState.js';
+import { useAssetDnd } from './useAssetDnd.js';
+import { useAssetMutationKeyboard } from './useAssetMutationKeyboard.js';
+import { useAssetMutations } from './useAssetMutations.js';
+import { useAssetNavigation } from './useAssetNavigation.js';
+import { useAssetSelectionController } from './useAssetSelectionController.js';
+
+const DEFAULT_MIME = 'application/x-entangle-asset';
+const ToolbarSlot = markSlot(() => null, 'toolbar');
+const SidebarSlot = markSlot(() => null, 'sidebar');
+/**
+ * Pull the optional `Toolbar` / `Sidebar` slot children out of `children`.
+ * Returns through an explicit type so the slots stay `ReactNode` at the call
+ * site (a `let x: ReactNode = null` assigned only inside the forEach callback
+ * would otherwise stay flow-narrowed to `null`).
+ */
+function extractSlots(children) {
+    let toolbarSlot = null;
+    let sidebarSlot = null;
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child))
+            return;
+        const kind = getSlotKind(child);
+        const slotChildren = child.props.children;
+        if (kind === 'toolbar')
+            toolbarSlot = slotChildren;
+        else if (kind === 'sidebar')
+            sidebarSlot = slotChildren;
+    });
+    return { toolbarSlot, sidebarSlot };
+}
+function AssetBrowserRoot(props) {
+    const { items, path = [], folderTree, currentFolderId, selectionMode = 'multiple', density = 'comfortable', showStatusBar = false, manualSearch = false, manualFilter = false, manualSort = false, filterableTypes: filterableTypesProp, loading = false, loadingItemCount = 12, emptyState, error, onErrorRetry, columns, marquee = true, history = false, renderThumbnail, renderItem, renderItemContextMenu, renderEmptyContextMenu, defaultItemActions = false, onItemRename, onItemsDelete, onCreateFolder, onItemsDuplicate, virtualized = 'auto', virtualizationThreshold = 200, overscanRows = 4, dragOutMimeType = DEFAULT_MIME, getDragData, onItemDragStart, onItemDragEnd, onItemsMove, onFilesImport, className, style, testId, children, ref, labels: labelsProp, 'aria-label': ariaLabel = 'Asset browser', 
+    // Controlled-state props — destructured so they don't leak onto the DOM
+    // root via `...rest`. Consumed by the view-state / selection / navigation
+    // hooks below.
+    view: viewProp, defaultView, onViewChange, thumbnailSize: thumbnailSizeProp, defaultThumbnailSize, onThumbnailSizeChange, search: searchProp, defaultSearch, onSearchChange, filters: filtersProp, defaultFilters, onFiltersChange, sort: sortProp, defaultSort, onSortChange, selection: selectionProp, defaultSelection, onSelectionChange, onItemOpen, onNavigate, ...rest } = props;
+    const rootRef = useRef(null);
+    // Lazy `useState` initializer (not `useMemo`) so the per-instance store
+    // identity is guaranteed stable for the component's lifetime — `useMemo` may
+    // legally drop its cache, which would orphan every slice subscription. Mirrors
+    // `useNavigationHistory`'s store-creation idiom.
+    const [store] = useState(() => new AssetBrowserStore());
+    const labels = useMemo(() => resolveLabels(labelsProp), [labelsProp]);
+    const { view, setView, thumbnailSize, setThumbnailSize, thumbnailSizePx, search, setSearch, filters, setFilters, sort, setSort, filterableTypes, displayed, marqueeEnabled, } = useAssetBrowserViewState({
+        items,
+        selectionMode,
+        marquee,
+        view: viewProp,
+        defaultView,
+        onViewChange,
+        thumbnailSize: thumbnailSizeProp,
+        defaultThumbnailSize,
+        onThumbnailSizeChange,
+        search: searchProp,
+        defaultSearch,
+        onSearchChange,
+        manualSearch,
+        filters: filtersProp,
+        defaultFilters,
+        onFiltersChange,
+        manualFilter,
+        sort: sortProp,
+        defaultSort,
+        onSortChange,
+        manualSort,
+        filterableTypesProp,
+    });
+    const { selectionSet, handlers } = useAssetSelectionController({
+        store,
+        displayed,
+        selectionMode,
+        selection: selectionProp,
+        defaultSelection,
+        onSelectionChange,
+    });
+    const { navigate, activateItem, goBack, goForward, canGoBack, canGoForward, handleRootKeyDown, } = useAssetNavigation({
+        history,
+        path,
+        currentFolderId,
+        onNavigate,
+        onItemOpen,
+    });
+    const dnd = useAssetDnd({
+        store,
+        mime: dragOutMimeType,
+        items,
+        selection: selectionSet,
+        currentFolderId,
+        getDragData,
+        onItemDragStart,
+        onItemDragEnd,
+        onItemsMove,
+        onFilesImport,
+    });
+    const mutations = useAssetMutations({
+        store,
+        displayed,
+        selection: selectionSet,
+        currentFolderId,
+        onItemRename,
+        onItemsDelete,
+        onCreateFolder,
+        onItemsDuplicate,
+    });
+    const mutationKeyboard = useAssetMutationKeyboard({
+        store,
+        mutations,
+        selection: selectionSet,
+    });
+    useAssetBrowserHandle({
+        ref,
+        rootRef,
+        store,
+        items,
+        displayed,
+        selectAll: handlers.selectAll,
+        clearSelection: handlers.clearSelection,
+        beginRename: mutations.beginRename,
+    });
+    // Render-props are forwarded through the item context as-is. They are called
+    // during render (by grid/list cells), so they can't be stabilized with a
+    // render-phase ref write (react-hooks/refs) or `useLatest` (its ref updates
+    // in an effect, one render late). Consumers that pass inline render-props and
+    // care about per-cell render cost should memoize them, mirroring `TreeView`.
+    const itemValue = useMemo(() => ({
+        displayedItems: displayed,
+        thumbnailSizePx,
+        density,
+        selectionMode,
+        marqueeEnabled,
+        handleItemClick: handlers.handleItemClick,
+        activateItem,
+        selectAll: handlers.selectAll,
+        clearSelection: handlers.clearSelection,
+        contextMenuSelect: handlers.contextMenuSelect,
+        selectByKeyboard: handlers.selectByKeyboard,
+        toggleSelectId: handlers.toggleSelectId,
+        setSelectionIds: handlers.setSelectionIds,
+        commitMarquee: handlers.commitMarquee,
+        path,
+        folderTree,
+        currentFolderId,
+        navigate,
+        renderThumbnail,
+        renderItem,
+        renderItemContextMenu,
+        renderEmptyContextMenu,
+        defaultItemActions,
+        mutations,
+        mutationKeyDown: mutationKeyboard.onKeyDown,
+        loading,
+        loadingItemCount,
+        emptyState,
+        error,
+        onErrorRetry,
+        columns,
+        dnd,
+        virtualized,
+        virtualizationThreshold,
+        overscanRows,
+        labels,
+    }), [
+        displayed,
+        thumbnailSizePx,
+        density,
+        selectionMode,
+        marqueeEnabled,
+        handlers,
+        activateItem,
+        path,
+        folderTree,
+        currentFolderId,
+        navigate,
+        renderThumbnail,
+        renderItem,
+        renderItemContextMenu,
+        renderEmptyContextMenu,
+        defaultItemActions,
+        mutations,
+        mutationKeyboard.onKeyDown,
+        loading,
+        loadingItemCount,
+        emptyState,
+        error,
+        onErrorRetry,
+        columns,
+        dnd,
+        virtualized,
+        virtualizationThreshold,
+        overscanRows,
+        labels,
+    ]);
+    const chromeValue = useMemo(() => ({
+        view,
+        setView,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        filterableTypes,
+        sort,
+        setSort,
+        history,
+        canGoBack,
+        canGoForward,
+        goBack,
+        goForward,
+        labels,
+    }), [
+        view,
+        setView,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        filterableTypes,
+        sort,
+        setSort,
+        history,
+        canGoBack,
+        canGoForward,
+        goBack,
+        goForward,
+        labels,
+    ]);
+    // Slot extraction.
+    const { toolbarSlot, sidebarSlot } = extractSlots(children);
+    return (jsx(AssetBrowserStoreContext.Provider, { value: store, children: jsx(AssetBrowserChromeContext.Provider, { value: chromeValue, children: jsx(AssetBrowserContext.Provider, { value: itemValue, children: jsxs("div", { ref: rootRef, className: cx(root, className), style: style, "data-testid": testId, role: "region", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleRootKeyDown, ...rest, children: [toolbarSlot ?? jsx(AssetBrowserToolbar, {}), jsx(AssetBrowserBreadcrumbs, {}), jsxs("div", { className: body, children: [sidebarSlot ?? jsx(AssetBrowserSidebar, {}), jsx(AssetBrowserSurface, { onDragOver: dnd.onSurfaceDragOver, onDragLeave: dnd.onSurfaceDragLeave, onDrop: dnd.onSurfaceDrop })] }), showStatusBar && (jsx(AssetBrowserStatusBar, { view: view, thumbnailSize: thumbnailSize, setThumbnailSize: setThumbnailSize })), jsx(AssetBrowserAnnouncementLive, {})] }) }) }) }));
+}
+AssetBrowserRoot.displayName = 'AssetBrowser';
+const AssetBrowser = /*#__PURE__*/ Object.assign(AssetBrowserRoot, {
+    Toolbar: ToolbarSlot,
+    Sidebar: SidebarSlot,
+});
+
+export { AssetBrowser };
+//# sourceMappingURL=AssetBrowser.js.map

package/dist/esm/components/editor/AssetBrowser/AssetBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowser.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowser.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA;AAMA;AACA;AAEA;;;;;AAKG;AACH;;;;AAOI;;AACA;AACA;;;;;AAGF;AACA;AACF;AAEA;AACE;;;;;AAuEA;;;;;AAKA;AAEA;AAEA;;;;AAmBE;;;AAGA;;;AAGA;;;;AAIA;;;;AAIA;;;;;AAKD;AAED;;;;AAIE;;;AAGD;AAED;;;;;;AAcC;;;AAIC;;AAEA;;;;;;;AAOD;;;;AAKC;;;;;;AAMD;;;;AAKC;AACD;AAED;;;;;;;;;AASC;;;;;;AAOD;AAEI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCD;;;;;;;;;;;;;;;;;;AAmBC;;;;;;;;;;;;AAYD;AAGH;;;;;;;;;;;;;;;;AAiBG;;;;;;;;;;;;;;;;AAiBA;;;AAMH;AA2CF;AAEA;AAEO;AACL;AACA;AACD;;"}