entangle-ui 0.9.0 → 0.10.0

package/dist/esm/components/controls/CurveEditor/useCurveInteraction.js

@@ -22,7 +22,9 @@ function useCurveInteraction(options) {
     const [selectionBox, setSelectionBox] = useState(null);
     const dragStateRef = useRef({ type: 'idle' });
     const curveBeforeDragRef = useRef(null);
-    const isDragging = dragStateRef.current.type !== 'idle';
+    // Ref drives synchronous reads inside the pointer handlers; the state mirror
+    // is the value exposed for rendering (kept in sync on drag start/end).
+    const [isDragging, setIsDragging] = useState(false);
     const getCanvasSize = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -93,6 +95,7 @@ function useCurveInteraction(options) {
                     startX: kf.x,
                     startY: kf.y,
                 };
+                setIsDragging(true);
                 canvas.setPointerCapture(e.pointerId);
             }
             return;
@@ -112,6 +115,7 @@ function useCurveInteraction(options) {
                 type: hit.type,
                 keyframeIndex: hit.keyframeIndex,
             };
+            setIsDragging(true);
             canvas.setPointerCapture(e.pointerId);
             return;
         }
@@ -120,10 +124,12 @@ function useCurveInteraction(options) {
             updateSelection(new Set());
         }
         dragStateRef.current = { type: 'boxSelect', startPx: px, startPy: py };
+        setIsDragging(true);
         canvas.setPointerCapture(e.pointerId);
     }, [
         disabled,
         readOnly,
+        lockTangents,
         canvasRef,
         curve,
         viewport,
@@ -210,7 +216,9 @@ function useCurveInteraction(options) {
             });
             return;
         }
-        if (drag.type === 'handleIn' || drag.type === 'handleOut') {
+        // The only remaining drag types here are 'handleIn' and 'handleOut'
+        // (idle, boxSelect and keyframe are handled and returned above).
+        {
             const kf = curve.keyframes[drag.keyframeIndex];
             if (!kf)
                 return;
@@ -243,12 +251,12 @@ function useCurveInteraction(options) {
         viewport,
         disabled,
         readOnly,
+        lockTangents,
         snapToGrid,
         lockEndpoints,
         clampY,
         minKeyframeDistance,
         precision,
-        gridSubdivisions,
         onChange,
         getCanvasSize,
         snapValue,
@@ -300,6 +308,7 @@ function useCurveInteraction(options) {
             curveBeforeDragRef.current = null;
         }
         dragStateRef.current = { type: 'idle' };
+        setIsDragging(false);
         canvas.releasePointerCapture(e.pointerId);
     }, [
         canvasRef,
@@ -374,6 +383,7 @@ function useCurveInteraction(options) {
     }, [
         disabled,
         readOnly,
+        lockTangents,
         canvasRef,
         curve,
         viewport,
@@ -387,53 +397,6 @@ function useCurveInteraction(options) {
         getCanvasSize,
         applyAutoTangents,
     ]);
-    // ─── Keyboard ───
-    const onKeyDown = useCallback((e) => {
-        if (disabled)
-            return;
-        switch (e.key) {
-            case 'Delete':
-            case 'Backspace': {
-                if (readOnly || !allowDelete)
-                    return;
-                e.preventDefault();
-                deleteSelectedFn();
-                break;
-            }
-            case 'a': {
-                if (e.ctrlKey || e.metaKey) {
-                    e.preventDefault();
-                    selectAllFn();
-                }
-                break;
-            }
-            case 'ArrowUp':
-            case 'ArrowDown':
-            case 'ArrowLeft':
-            case 'ArrowRight': {
-                if (readOnly || selectedIds.size === 0)
-                    return;
-                e.preventDefault();
-                nudgeSelected(e.key, e.shiftKey);
-                break;
-            }
-            case '1':
-            case '2':
-            case '3':
-            case '4':
-            case '5':
-            case '6': {
-                if (readOnly || lockTangents || selectedIds.size === 0)
-                    return;
-                e.preventDefault();
-                const modeIndex = parseInt(e.key) - 1;
-                const mode = TANGENT_CYCLE[modeIndex];
-                if (mode)
-                    setTangentModeFn(mode);
-                break;
-            }
-        }
-    }, [disabled, readOnly, lockTangents, allowDelete, selectedIds]);
     // ─── Actions ───
     const deleteSelectedFn = useCallback(() => {
         if (readOnly || !allowDelete)
@@ -553,6 +516,65 @@ function useCurveInteraction(options) {
         onChangeComplete,
         applyAutoTangents,
     ]);
+    // ─── Keyboard ───
+    // Declared after the action callbacks it dispatches so they are referenced
+    // (and depended on) by value rather than via a forward closure.
+    const onKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Delete':
+            case 'Backspace': {
+                if (readOnly || !allowDelete)
+                    return;
+                e.preventDefault();
+                deleteSelectedFn();
+                break;
+            }
+            case 'a': {
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    selectAllFn();
+                }
+                break;
+            }
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                if (readOnly || selectedIds.size === 0)
+                    return;
+                e.preventDefault();
+                nudgeSelected(e.key, e.shiftKey);
+                break;
+            }
+            case '1':
+            case '2':
+            case '3':
+            case '4':
+            case '5':
+            case '6': {
+                if (readOnly || lockTangents || selectedIds.size === 0)
+                    return;
+                e.preventDefault();
+                const modeIndex = parseInt(e.key) - 1;
+                const mode = TANGENT_CYCLE[modeIndex];
+                if (mode)
+                    setTangentModeFn(mode);
+                break;
+            }
+        }
+    }, [
+        disabled,
+        readOnly,
+        lockTangents,
+        allowDelete,
+        selectedIds,
+        deleteSelectedFn,
+        selectAllFn,
+        nudgeSelected,
+        setTangentModeFn,
+    ]);
     return {
         selectedIds,
         hoveredElement,

package/dist/esm/components/controls/CurveEditor/useCurveInteraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCurveInteraction.js","sources":["../../../../../../src/components/controls/CurveEditor/useCurveInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAkEA;;;;;;;;AASA;AAIE;;AAEF;AAEM;AAGJ;AAqBA;;;;AAYA;;AAIA;AACE;AACA;;AACA;AACA;AACF;AAEA;;;AAIE;;AAME;;AAEF;AAIF;;AAGM;AAA+B;;;;;AAM7B;;;;AAIJ;;;AAMJ;AAEI;;AACA;AACA;;AAEA;;AAGA;;AAEA;AAEA;;;;AAIE;;AAEE;;AAEE;;;AAEA;;;;;;;;;AASA;AACA;;;AAGA;;;;;AAKF;;;;AAKJ;AAEE;;;;;;;AAOE;AACA;;;;;;AAMF;;;;AAKF;AACE;;AAGF;AACA;AACF;;;;;;;;;AAUC;;AAIH;AAEI;AACA;;AAEA;;AAEA;AAEA;;AAEE;AACA;;AAGA;AACE;;AACK;;AAIL;;AACK;AACL;;;AAEA;;;;AAKJ;;;;AAKA;;AAEA;AACE;;AAEA;;AAEA;;AAIA;AACA;;;;AAKE;AACA;AACA;AACA;;AAGF;AACA;;AAGA;AACE;;;AAIF;AACE;AACA;;AAEE;;;AAGA;;;;;AAMF;;AAGF;AAIA;AACE;AACA;AACD;;;AAIH;;AAEE;;AAEA;AACA;AACE;AACA;;AAGF;AACA;;;;;;;;AAQA;;;;AAKA;AAKA;;;;AAOJ;;;;;;;;;;;;;;;;AAiBC;;AAIH;AAEI;AACA;;AAEA;AAEA;;;;AAII;AAEA;;AAEE;;;;;;AAKA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;;AAIE;AACA;;AAGA;;;;;;;AAUR;;AAGI;;AAGF;AACA;;;AAIF;AACF;;;;;;;;;AAUC;;AAIH;;;AAGI;AACA;;AAEA;;AAKA;AAEA;AACE;;;;AAGA;;;;;AAMA;AAIA;AACE;AACA;;;AAGF;;;;;AAMA;;;;AAKA;;;;AAIE;;AAGF;AACE;AACA;;;AAGA;;;AAIF;AACA;AACE;AACA;;;AAGF;AAEA;;;;AAIJ;;;;;;;;;;;;;;;AAgBC;;AAIH;AAEI;;AAEA;AACE;;;;;AAIE;;;;;;AAME;;;;AAIJ;AACA;AACA;;AAEE;;;;;;AAKF;AACA;AACA;AACA;AACA;;;;;;AAKE;AACA;;;;;AAIN;;AAKF;;;;AAII;AAAuC;;;;AAKrC;AAAqD;;AAEvD;AACF;;AAGA;;AAEA;;AAEA;AACA;AACF;;;;;;;;;;AAUC;AAED;;;AAKA;AAEA;;;;AAKM;AAAuC;AAEvC;;AAEI;AACA;;;;;;AAMN;AAEA;;AAEA;AACF;;;;;;;;AASC;;;;;;;;AAaG;AAAuC;AAEvC;;AAEA;;AAGE;AACE;;;AAEF;AACE;;;AAEF;;;AAGA;;;;;AAMA;;;AAIA;AACA;AACA;;AAEJ;AAEA;AACE;AACA;;;AAGF;AACF;;;;;;;;;;AAWC;;;;;;AAQD;;;;;;AAMC;AACD;AACA;AACA;;AAEJ;;"}
+{"version":3,"file":"useCurveInteraction.js","sources":["../../../../../../src/components/controls/CurveEditor/useCurveInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAqEA;;;;;;;;AASA;AAIE;;AAEF;AAEM;AAGJ;AAqBA;;;;AAYA;;;;AAMA;AACE;AACA;;AACA;AACA;AACF;AAEA;;;AAIE;;AAME;;AAEF;AAIF;;AAGM;AAA+B;;;;;AAM7B;;;;AAIJ;;;AAMJ;AAEI;;AACA;AACA;;AAEA;;AAGA;;AAEA;AAEA;;;;AAIE;;AAEE;;AAEE;;;AAEA;;;;;;;;;AASA;AACA;;;AAGA;;;;;;AAMF;;;;AAKJ;AAEE;;;;;;;AAOE;AACA;;;;;;;AAOF;;;;AAKF;AACE;;AAGF;;AAEA;AACF;;;;;;;;;;AAWC;;AAIH;AAEI;AACA;;AAEA;;AAEA;AAEA;;AAEE;AACA;;AAGA;AACE;;AACK;;AAIL;;AACK;AACL;;;AAEA;;;;AAKJ;;;;AAKA;;AAEA;AACE;;AAEA;;AAEA;;AAIA;AACA;;;;AAKE;AACA;AACA;AACA;;AAGF;AACA;;AAGA;AACE;;;AAIF;AACE;AACA;;AAEE;;;AAGA;;;;;AAMF;;AAGF;AAIA;AACE;AACA;AACD;;;;;;;AAQD;;AAEA;AACA;AACE;AACA;;AAGF;AACA;;;;;;;;AAQA;;;;AAKA;AAKA;;;;AAOJ;;;;;;;;;;;;;;;;AAiBC;;AAIH;AAEI;AACA;;AAEA;AAEA;;;;AAII;AAEA;;AAEE;;;;;;AAKA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;;AAIE;AACA;;AAGA;;;;;;;AAUR;;AAGI;;AAGF;AACA;;;;AAKF;AACF;;;;;;;;;AAUC;;AAIH;;;AAGI;AACA;;AAEA;;AAEA;AAEA;AACE;;;;AAGA;;;;;AAMA;AAIA;AACE;AACA;;;AAGF;;;;;AAMA;;;;AAKA;;;;AAIE;;AAGF;AACE;AACA;;;AAGA;;;AAIF;AACA;AACE;AACA;;;AAGF;AAEA;;;;AAIJ;;;;;;;;;;;;;;;;AAiBC;;AAIH;;;;AAII;AAAuC;;;;AAKrC;AAAqD;;AAEvD;AACF;;AAGA;;AAEA;;AAEA;AACA;AACF;;;;;;;;;;AAUC;AAED;;;AAKA;AAEA;;;;AAKM;AAAuC;AAEvC;;AAEI;AACA;;;;;;AAMN;AAEA;;AAEA;AACF;;;;;;;;AASC;;;;;;;;AAaG;AAAuC;AAEvC;;AAEA;;AAGE;AACE;;;AAEF;AACE;;;AAEF;;;AAGA;;;;;AAMA;;;AAIA;AACA;AACA;;AAEJ;AAEA;AACE;AACA;;;AAGF;AACF;;;;;;;;;;AAWC;;;;AAMH;AAEI;;AAEA;AACE;;;;;AAIE;;;;;;AAME;;;;AAIJ;AACA;AACA;;AAEE;;;;;;AAKF;AACA;AACA;AACA;AACA;;;;;;AAKE;AACA;;;;;AAIN;;;;;;;;;;AAWC;;;;;;AAQD;;;;;;AAMC;AACD;AACA;AACA;;AAEJ;;"}

package/dist/esm/components/controls/CurveEditor/useCurveRenderer.js

@@ -19,8 +19,11 @@ function useCurveRenderer(options) {
         const rect = canvas.getBoundingClientRect();
         const w = rect.width;
         const h = rect.height;
-        // Set canvas resolution for retina
+        // Set canvas resolution for retina. Writing the canvas backing-store size
+        // is a DOM side effect of drawing; the rule mistakes it for mutating the
+        // `options` argument because `canvas` is reached via options.canvasRef.
         if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+            // eslint-disable-next-line react-hooks/immutability
             canvas.width = w * dpr;
             canvas.height = h * dpr;
             ctx.scale(dpr, dpr);
@@ -87,7 +90,10 @@ function useCurveRenderer(options) {
         }
         ctx.globalAlpha = 1;
     }, [options]);
-    // Redraw on state changes
+    // Redraw on state changes. The draw callback mutates the canvas DOM element
+    // (backing-store size), which the rule reports as modifying `options`; that
+    // is a benign DOM side effect, not a props mutation.
+    // eslint-disable-next-line react-hooks/immutability
     useEffect(() => {
         if (options.isDragging) {
             // Use rAF for smooth updates during drag
@@ -96,7 +102,9 @@ function useCurveRenderer(options) {
                 rafRef.current = requestAnimationFrame(render);
             };
             rafRef.current = requestAnimationFrame(render);
-            return () => cancelAnimationFrame(rafRef.current);
+            return () => {
+                cancelAnimationFrame(rafRef.current);
+            };
         }
         draw();
         return undefined;

package/dist/esm/components/controls/CurveEditor/useCurveRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCurveRenderer.js","sources":["../../../../../../src/components/controls/CurveEditor/useCurveRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmDA;AAEM;AACJ;AAEA;AACE;AACA;;;AAGA;;AAEA;AAEA;AAEA;AACA;AACA;;AAGA;AACE;AACA;AACA;;;AAEA;;AAGF;;AAkBA;AACE;;;;AAMF;AACA;;;;;;AAOI;AACA;;;;AAID;;;;;;AAOC;AACA;;;AAGD;;;;;;;AAiBC;AACA;;;;;AAKD;;;AAIH;AACA;;AAGA;AACE;;;;;;AA6BA;;AAGF;AACF;;;AAIE;;;AAGI;AACA;AACF;AACA;;;AAIF;AACA;;AAEJ;AAEA;AACA;AAEA;AASE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAGA;AACA;;AACA;;AAGA;AACE;AACA;;AACA;;;;AAKJ;AAEA;AAWE;AAEA;AACE;AACA;;AACA;;;;AAGA;AACA;;AAGA;AAQA;AACA;AACA;;;;;;AAMA;;;AAIA;AAEA;AACA;;AAEA;;;AAUA;AAQA;AACA;AACA;;;;;;AAMA;;;AAIA;AAEE;AACF;AACA;;AAEA;;;AASJ;AAEA;AAYE;AAEA;AACE;AACA;;;AAEA;AAEA;;AAIA;;;AAIE;;;;;;;;;;AASA;;AAEA;;;AAIA;;AAEA;AACA;;;;AAGA;;AAEA;AACA;;;;AAIN;AAEA;AAKE;AACA;AACA;AACA;AAEA;AACA;;AAGA;AACA;AACA;;;AAGA;AACF;;"}
+{"version":3,"file":"useCurveRenderer.js","sources":["../../../../../../src/components/controls/CurveEditor/useCurveRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAsDA;AAEM;AACJ;AAEA;AACE;AACA;;;AAGA;;AAEA;AAEA;AAEA;AACA;AACA;;;;AAKA;;AAEE;AACA;AACA;;;AAEA;;AAGF;;AAkBA;AACE;;;;AAMF;AACA;;;;;;AAOI;AACA;;;;AAID;;;;;;AAOC;AACA;;;AAGD;;;;;;;AAiBC;AACA;;;;;AAKD;;;AAIH;AACA;;AAGA;AACE;;;;;;AA6BA;;AAGF;AACF;;;;;;AAOE;;;AAGI;AACA;AACF;AACA;AACA;AACE;AACF;;AAGF;AACA;;AAEJ;AAEA;AACA;AAEA;AASE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAGA;AACA;;AACA;;AAGA;AACE;AACA;;AACA;;;;AAKJ;AAEA;AAWE;AAEA;AACE;AACA;;AACA;;;;AAGA;AACA;;AAGA;AAQA;AACA;AACA;;;;;;AAMA;;;AAIA;AAEA;AACA;;AAEA;;;AAUA;AAQA;AACA;AACA;;;;;;AAMA;;;AAIA;AAEE;AACF;AACA;;AAEA;;;AASJ;AAEA;AAYE;AAEA;AACE;AACA;;;AAEA;AAEA;;AAIA;;;AAIE;;;;;;;;;;AASA;;AAEA;;;AAIA;;AAEA;AACA;;;;AAGA;;AAEA;AACA;;;;AAIN;AAEA;AAKE;AACA;AACA;AACA;AAEA;AACA;;AAGA;AACA;AACA;;;AAGA;AACF;;"}

package/dist/esm/components/controls/FileTree/FileTree.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/controls/FileTree/FileTree.css.ts.vanilla-YmktPvnr.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var containerStyle = 'FileTree_containerStyle__1b523un0';
+var iconStyle = createRuntimeFn({defaultClassName:'FileTree_iconStyle__1b523un1',variantClassNames:{size:{sm:'FileTree_iconStyle_size_sm__1b523un2',md:'FileTree_iconStyle_size_md__1b523un3',lg:'FileTree_iconStyle_size_lg__1b523un4'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelStyle = createRuntimeFn({defaultClassName:'FileTree_labelStyle__1b523un5',variantClassNames:{size:{sm:'FileTree_labelStyle_size_sm__1b523un6',md:'FileTree_labelStyle_size_md__1b523un7',lg:'FileTree_labelStyle_size_lg__1b523un8'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { containerStyle, iconStyle, labelStyle };
+//# sourceMappingURL=FileTree.css.js.map

package/dist/esm/components/controls/FileTree/FileTree.css.js.map

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

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

@@ -0,0 +1,246 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useCallback } from 'react';
+import { TreeView } from '../TreeView/TreeView.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 { CodeIcon } from '../../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 { FolderIcon } from '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import { ImageIcon } from '../../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 { PlayIcon } from '../../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 { ArchiveIcon } from '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import '../../Icons/ChevronRightIcon.js';
+import { FolderOpenIcon } from '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import { FileTextIcon } from '../../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 '../../../utils/devWarn.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { cx } from '../../../utils/cx.js';
+import { iconStyle, labelStyle, containerStyle } from './FileTree.css.js';
+import { getFileIconKind } from './fileTreeIcons.js';
+import { DEFAULT_FILE_TREE_LABELS } from './fileTreeLabels.js';
+import { useFileTreeDrop } from './useFileTreeDrop.js';
+
+const ICON_PX = { sm: 12, md: 14, lg: 16 };
+/** Renders a resolved {@link FileIconKind} into a themed icon element. */
+function fileIconForKind(kind, px) {
+    const color = kind === 'folder' || kind === 'folder-open' ? 'secondary' : 'muted';
+    switch (kind) {
+        case 'folder':
+            return jsx(FolderIcon, { size: px, color: color, decorative: true });
+        case 'folder-open':
+            return jsx(FolderOpenIcon, { size: px, color: color, decorative: true });
+        case 'image':
+            return jsx(ImageIcon, { size: px, color: color, decorative: true });
+        case 'media':
+            return jsx(PlayIcon, { size: px, color: color, decorative: true });
+        case 'code':
+            return jsx(CodeIcon, { size: px, color: color, decorative: true });
+        case 'archive':
+            return jsx(ArchiveIcon, { size: px, color: color, decorative: true });
+        case 'text':
+        case 'file':
+            return jsx(FileTextIcon, { size: px, color: color, decorative: true });
+    }
+}
+/** Maps a FileTreeNode subtree to TreeView's node shape. */
+function toTreeNode(node) {
+    return {
+        id: node.id,
+        label: node.name,
+        children: node.children?.map(toTreeNode),
+        disabled: node.disabled,
+        // Folders accept dropped files; files do not (the field finally gets used).
+        droppable: node.kind === 'folder',
+        data: node.data,
+    };
+}
+/**
+ * A file-system-flavored specialization of {@link TreeView}: it maps a
+ * file/folder model onto the tree, auto-assigns file-type icons (by extension)
+ * and open/closed folder glyphs, and adds drag-and-drop import of OS files onto
+ * a folder (or the root). Expansion, selection, keyboard navigation, and sizing
+ * are inherited from TreeView unchanged.
+ *
+ * @example
+ * ```tsx
+ * const nodes: FileTreeNode[] = [
+ *   { id: 'src', name: 'src', kind: 'folder', children: [
+ *     { id: 'btn', name: 'Button.tsx', kind: 'file' },
+ *     { id: 'logo', name: 'logo.svg', kind: 'file' },
+ *   ]},
+ * ];
+ *
+ * <FileTree
+ *   nodes={nodes}
+ *   defaultExpandedIds={['src']}
+ *   onImport={({ files, targetFolder }) =>
+ *     uploadInto(targetFolder?.id ?? 'root', files)
+ *   }
+ * />
+ * ```
+ */
+const FileTree = ({ nodes, expandedIds, defaultExpandedIds, onExpandedChange, selectedIds, defaultSelectedIds, selectionMode = 'single', onSelectionChange, size = 'md', indent, showChevrons, showGuideLines, expandOnClick = true, maxHeight, resolveIcon, renderNode, renderActions, emptyContent, onImport, onNodeClick, onNodeDoubleClick, onNodeContextMenu, labels: labelsProp, className, style, testId, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest }) => {
+    const containerRef = useRef(null);
+    const setContainerRef = useMergedRef(containerRef, ref);
+    const treeNodes = useMemo(() => nodes.map(toTreeNode), [nodes]);
+    // id → node and id → parent folder, used to resolve drop targets and to
+    // recover the original FileTreeNode inside render / event callbacks.
+    const { nodeById, parentFolderById } = useMemo(() => {
+        const byId = new Map();
+        const parentById = new Map();
+        const walk = (list, parent) => {
+            for (const node of list) {
+                byId.set(node.id, node);
+                parentById.set(node.id, parent);
+                if (node.children) {
+                    walk(node.children, node.kind === 'folder' ? node : parent);
+                }
+            }
+        };
+        walk(nodes, null);
+        return { nodeById: byId, parentFolderById: parentById };
+    }, [nodes]);
+    const dnd = useFileTreeDrop({ onImport, nodeById, parentFolderById });
+    const labels = useMemo(() => ({ ...DEFAULT_FILE_TREE_LABELS, ...labelsProp }), [labelsProp]);
+    const iconPx = ICON_PX[size];
+    const toFileState = useCallback((state, node) => ({
+        ...state,
+        isFolder: node.kind === 'folder',
+    }), []);
+    const renderTreeNode = useCallback((treeNode, state) => {
+        const node = nodeById.get(treeNode.id);
+        if (!node)
+            return null;
+        if (renderNode)
+            return renderNode(node, toFileState(state, node));
+        const overrideIcon = resolveIcon?.(node, { expanded: state.expanded });
+        const icon = overrideIcon ??
+            fileIconForKind(getFileIconKind(node, state.expanded), iconPx);
+        return (jsxs(Fragment, { children: [jsx("span", { className: iconStyle({ size }), children: icon }), jsx("span", { className: labelStyle({ size }), children: node.name })] }));
+    }, [nodeById, renderNode, resolveIcon, toFileState, iconPx, size]);
+    const renderTreeActions = useMemo(() => {
+        if (!renderActions)
+            return undefined;
+        return (treeNode, state) => {
+            const node = nodeById.get(treeNode.id);
+            if (!node)
+                return null;
+            return renderActions(node, toFileState(state, node));
+        };
+    }, [renderActions, nodeById, toFileState]);
+    const handleNodeClick = useMemo(() => {
+        if (!onNodeClick)
+            return undefined;
+        return (treeNode, event) => {
+            const node = nodeById.get(treeNode.id);
+            if (node)
+                onNodeClick(node, event);
+        };
+    }, [onNodeClick, nodeById]);
+    const handleNodeDoubleClick = useMemo(() => {
+        if (!onNodeDoubleClick)
+            return undefined;
+        return (treeNode, event) => {
+            const node = nodeById.get(treeNode.id);
+            if (node)
+                onNodeDoubleClick(node, event);
+        };
+    }, [onNodeDoubleClick, nodeById]);
+    const handleNodeContextMenu = useMemo(() => {
+        if (!onNodeContextMenu)
+            return undefined;
+        return (treeNode, event) => {
+            const node = nodeById.get(treeNode.id);
+            if (node)
+                onNodeContextMenu(node, event);
+        };
+    }, [onNodeContextMenu, nodeById]);
+    return (jsx("div", { ref: setContainerRef, className: cx(containerStyle, className), style: style, "data-testid": testId, "data-root-active": dnd.enabled && dnd.rootActive ? 'true' : undefined, ...rest, onDragOver: dnd.enabled ? dnd.onRootDragOver : undefined, onDragLeave: dnd.enabled ? dnd.onRootDragLeave : undefined, onDrop: dnd.enabled ? dnd.onRootDrop : undefined, children: jsx(TreeView, { nodes: treeNodes, expandedIds: expandedIds, defaultExpandedIds: defaultExpandedIds, onExpandedChange: onExpandedChange, selectedIds: selectedIds, defaultSelectedIds: defaultSelectedIds, selectionMode: selectionMode, onSelectionChange: onSelectionChange, size: size, indent: indent, showChevrons: showChevrons, showGuideLines: showGuideLines, expandOnClick: expandOnClick, maxHeight: maxHeight, renderNode: renderTreeNode, renderActions: renderTreeActions, emptyContent: emptyContent ?? labels.emptyLabel, "aria-label": ariaLabel ?? labels.treeLabel, "aria-labelledby": ariaLabelledby, dropTargetId: dnd.enabled ? dnd.dropTargetId : undefined, onNodeClick: handleNodeClick, onNodeDoubleClick: handleNodeDoubleClick, onNodeContextMenu: handleNodeContextMenu, onNodeDragOver: dnd.enabled ? dnd.onNodeDragOver : undefined, onNodeDrop: dnd.enabled ? dnd.onNodeDrop : undefined }) }));
+};
+FileTree.displayName = 'FileTree';
+
+export { FileTree };
+//# sourceMappingURL=FileTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.js","sources":["../../../../../../src/components/controls/FileTree/FileTree.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;AAEA;AACA;AACE;;AAGE;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;AACA;;;;;;;AAOI;;;AAGJ;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI;AAgCL;;AAGA;;;;AAKE;AACA;AACA;AACE;;;AAGE;AACE;;;AAGN;AACA;;AAEF;AAEA;;AAOA;;AAII;AACA;;;;AAQA;AAAW;AACX;;AAEA;;AAGE;AAEF;AAMF;AAIF;AACE;AAAoB;AACpB;;AAEE;AAAW;;AAEb;;AAGF;AACE;AAAkB;AAClB;;AAEE;AAAU;AACZ;AACF;AAEA;AACE;AAAwB;AACxB;;AAEE;AAAU;AACZ;AACF;AAEA;AACE;AAAwB;AACxB;;AAEE;AAAU;AACZ;AACF;;AA2CF;AAEA;;"}

package/dist/esm/components/controls/FileTree/fileTreeIcons.js

@@ -0,0 +1,129 @@
+/**
+ * Maps a lowercased file extension (no dot) to an icon bucket. Unknown
+ * extensions fall through to the generic `file` glyph.
+ */
+const KIND_BY_EXTENSION = {
+    // Images / raster + vector assets
+    png: 'image',
+    jpg: 'image',
+    jpeg: 'image',
+    gif: 'image',
+    webp: 'image',
+    avif: 'image',
+    bmp: 'image',
+    ico: 'image',
+    svg: 'image',
+    tif: 'image',
+    tiff: 'image',
+    psd: 'image',
+    // Media (audio + video share the play glyph)
+    mp3: 'media',
+    wav: 'media',
+    ogg: 'media',
+    flac: 'media',
+    aac: 'media',
+    m4a: 'media',
+    mp4: 'media',
+    mov: 'media',
+    avi: 'media',
+    mkv: 'media',
+    webm: 'media',
+    // Code / markup / config / data
+    js: 'code',
+    jsx: 'code',
+    ts: 'code',
+    tsx: 'code',
+    mjs: 'code',
+    cjs: 'code',
+    json: 'code',
+    json5: 'code',
+    html: 'code',
+    htm: 'code',
+    css: 'code',
+    scss: 'code',
+    sass: 'code',
+    less: 'code',
+    vue: 'code',
+    svelte: 'code',
+    astro: 'code',
+    py: 'code',
+    rb: 'code',
+    go: 'code',
+    rs: 'code',
+    java: 'code',
+    kt: 'code',
+    swift: 'code',
+    c: 'code',
+    h: 'code',
+    cpp: 'code',
+    cc: 'code',
+    hpp: 'code',
+    cs: 'code',
+    php: 'code',
+    sh: 'code',
+    bash: 'code',
+    zsh: 'code',
+    yml: 'code',
+    yaml: 'code',
+    toml: 'code',
+    xml: 'code',
+    sql: 'code',
+    graphql: 'code',
+    gql: 'code',
+    lua: 'code',
+    dart: 'code',
+    r: 'code',
+    // Archives
+    zip: 'archive',
+    rar: 'archive',
+    '7z': 'archive',
+    tar: 'archive',
+    gz: 'archive',
+    tgz: 'archive',
+    bz2: 'archive',
+    xz: 'archive',
+    // Text / documents
+    txt: 'text',
+    md: 'text',
+    mdx: 'text',
+    rtf: 'text',
+    pdf: 'text',
+    doc: 'text',
+    docx: 'text',
+    csv: 'text',
+    tsv: 'text',
+    log: 'text',
+};
+/**
+ * Extracts the lowercased extension (without the dot) from a file name, or
+ * `undefined` when there isn't one. Dotfiles such as `.env` / `.gitignore` are
+ * treated as having no extension (the leading dot is not a separator).
+ */
+function getFileExtension(name) {
+    const dot = name.lastIndexOf('.');
+    if (dot <= 0 || dot === name.length - 1)
+        return undefined;
+    return name.slice(dot + 1).toLowerCase();
+}
+/**
+ * Classifies an extension into an icon bucket. `undefined` / unknown → `file`.
+ */
+function classifyExtension(ext) {
+    if (ext === undefined)
+        return 'file';
+    return KIND_BY_EXTENSION[ext.toLowerCase()] ?? 'file';
+}
+/**
+ * Resolves the icon kind for a node. Folders return `folder-open` when
+ * `expanded`, else `folder`. Files use the explicit `ext` when provided, falling
+ * back to the extension parsed from `name`.
+ */
+function getFileIconKind(node, expanded = false) {
+    if (node.kind === 'folder')
+        return expanded ? 'folder-open' : 'folder';
+    const ext = node.ext ?? getFileExtension(node.name);
+    return classifyExtension(ext);
+}
+
+export { classifyExtension, getFileExtension, getFileIconKind };
+//# sourceMappingURL=fileTreeIcons.js.map

package/dist/esm/components/controls/FileTree/fileTreeIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileTreeIcons.js","sources":["../../../../../../src/components/controls/FileTree/fileTreeIcons.ts"],"sourcesContent":[null],"names":[],"mappings":"AAmBA;;;AAGG;AACH,MAAM,iBAAiB,GAA2C;;AAEhE,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,GAAG,EAAE,OAAO;;AAGZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,IAAI,EAAE,OAAO;;AAGb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,CAAC,EAAE,MAAM;;AAGT,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,EAAE,EAAE,SAAS;;AAGb,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,GAAG,EAAE,MAAM;CACZ;AAED;;;;AAIG;AACG,SAAU,gBAAgB,CAAC,IAAY,EAAA;IAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;IACjC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;AAAE,QAAA,OAAO,SAAS;IACzD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,WAAW,EAAE;AAC1C;AAEA;;AAEG;AACG,SAAU,iBAAiB,CAAC,GAAuB,EAAA;IACvD,IAAI,GAAG,KAAK,SAAS;AAAE,QAAA,OAAO,MAAM;IACpC,OAAO,iBAAiB,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,IAAI,MAAM;AACvD;AAEA;;;;AAIG;SACa,eAAe,CAC7B,IAAiD,EACjD,QAAQ,GAAG,KAAK,EAAA;AAEhB,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;QAAE,OAAO,QAAQ,GAAG,aAAa,GAAG,QAAQ;AACtE,IAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AACnD,IAAA,OAAO,iBAAiB,CAAC,GAAG,CAAC;AAC/B;;;;"}

package/dist/esm/components/controls/FileTree/fileTreeLabels.js

@@ -0,0 +1,8 @@
+/** English defaults for {@link FileTreeLabels}. Spread-and-tweak to localize. */
+const DEFAULT_FILE_TREE_LABELS = {
+    treeLabel: 'File tree',
+    emptyLabel: 'No files',
+};
+
+export { DEFAULT_FILE_TREE_LABELS };
+//# sourceMappingURL=fileTreeLabels.js.map

package/dist/esm/components/controls/FileTree/fileTreeLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileTreeLabels.js","sources":["../../../../../../src/components/controls/FileTree/fileTreeLabels.ts"],"sourcesContent":[null],"names":[],"mappings":"AAeA;AACO,MAAM,wBAAwB,GAAmB;AACtD,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,UAAU,EAAE,UAAU;;;;;"}