mbeditor 0.5.6 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: acc982f027b14cfd3ad12a911b327edef848a353f11fc64df7b2c5e194557a45
-  data.tar.gz: 768bf200ae935e14b4974249e41b27c26d2b2d105207a03a2399727f3b951912
+  metadata.gz: 3cecf19b27261ccaf639f6023af904a53a1084eba7b0f9d6104839fa2acfabea
+  data.tar.gz: 8a09361f3b23aa30d02a99362346be3f8ca8305db7d4c75cfa21362bbfe21ceb
 SHA512:
-  metadata.gz: 43a3c2adfdaf54835bca24a81d2dfbfd668b85be02ea62113ce3bb038baafbe2f717e0651cdb9e9c40657548ef3ceb3e4ee94dbf5633baf6e267a4b92fefeabf
-  data.tar.gz: 26fd951cc646560d6bdb2b0db9a02ef8f0f821e76232bfceea2c40dfcdb99d1768a8f2ddb5cc0efb037862899485845ecffe28274a5bcb9ff04e17f7fe049024
+  metadata.gz: 5a52538cb6ab034375dd94f3add4a9d8041b7993de09526a7319ee790189c0516f9636517662455ee03ddfb3f7795d99419ad9259ea92ac95fe766199e7a347f
+  data.tar.gz: e952248bbde28aa3021fc31099c9e763e424b7075aad41ceec7081faf4a761a31b1e704bfd5d5c9d780d4dbb3be4623eb5b6fb7c6036ebe5ebbfba1dcd9ffce4

data/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.0] - 2026-05-11
+
+### Added
+- **Virtual scrolling in FileTree** — only visible rows are rendered, dramatically improving performance with large file trees.
+- **Multi-resource Rails panel** — the sidebar Rails panel now shows related files for up to 10 open Rails resources simultaneously, grouped by resource name with a dirty-file dot indicator.
+- **Vim `:split` / `:vsplit` commands** — split the current file into the other pane using standard Vim command-line syntax.
+- **Format changed-line highlighting** — after running Format Document, changed lines are highlighted with a green background for 3 seconds.
+- **Sidebar panel titles** — "Explorer", "Search", and "Rails" labels now appear at the top of each sidebar panel.
+- **Dirty-file indicators in Rails panel** — a small dot appears next to related files with unsaved changes.
+
+### Changed
+- Rails activity bar icon updated from text "R" to a Font Awesome gem icon.
+- Monaco model cache size raised from 15 to 25 (`MAX_MODELS`).
+- `wordBasedSuggestions` default changed to `'currentDocument'`; `linkedEditing` now respects user preferences.
+- Git file comparison uses a lightweight signature function instead of `JSON.stringify`.
+- Window-globals detection improved: symbols found on `window` at runtime are declared as globals to suppress TS2304 errors.
+
+### Removed
+- JSON auto-pretty-print on file open (files now display raw content).
+
 ## [0.5.1] - 2026-04-30
 
 ### Added

data/app/assets/javascripts/mbeditor/components/EditorPanel.js

@@ -524,17 +524,7 @@ var EditorPanel = function EditorPanel(_ref) {
       // Evict the LRU model if the cache is at capacity before creating a new one.
       TabManager.evictLruModel();
 
-      // Pretty-print JSON content before initial load
-      var contentForModel = tab.content;
-      if (language === 'json' && contentForModel) {
-        try {
-          contentForModel = JSON.stringify(JSON.parse(contentForModel), null, 2);
-        } catch (_) {
-          // invalid JSON — use raw content; Monaco will show error markers
-        }
-      }
-
-      modelObj = window.monaco.editor.createModel(contentForModel, language);
+      modelObj = window.monaco.editor.createModel(tab.content, language);
       window.__mbeditorModels[tab.path] = { model: modelObj, aviBase: null, aviMax: null, lastAccessed: Date.now(), cleanVersionId: null };
       _modelEntry = window.__mbeditorModels[tab.path];
     }
@@ -571,9 +561,9 @@ var EditorPanel = function EditorPanel(_ref) {
       formatOnPaste: editorPrefs.formatOnPaste !== false,
       formatOnType: editorPrefs.formatOnType !== false,
       quickSuggestions: editorPrefs.quickSuggestions !== false,
-      wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
+      wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'currentDocument',
       acceptSuggestionOnEnter: editorPrefs.acceptSuggestionOnEnter || 'on',
-      linkedEditing: true,
+      linkedEditing: !!(editorPrefs.linkedEditing),
       fixedOverflowWidgets: true,
       hover: { above: false }
     });
@@ -713,7 +703,12 @@ var EditorPanel = function EditorPanel(_ref) {
       } else if (currentAvi > aviMaxRef.current) {
         aviMaxRef.current = currentAvi;
       }
-      EditorStore.setState({ canUndo: currentAvi > aviBaseRef.current, canRedo: currentAvi < aviMaxRef.current });
+      var newCanUndo = currentAvi > aviBaseRef.current;
+      var newCanRedo = currentAvi < aviMaxRef.current;
+      var _st = EditorStore.getState();
+      if (_st.canUndo !== newCanUndo || _st.canRedo !== newCanRedo) {
+        EditorStore.setState({ canUndo: newCanUndo, canRedo: newCanRedo });
+      }
 
       var val = editor.getValue();
 
@@ -819,18 +814,7 @@ var EditorPanel = function EditorPanel(_ref) {
       var _initEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
       if (_initEntry) _initEntry.cleanVersionId = null;
 
-      // Pretty-print JSON content before initial load
-      var contentToSet = tab.content;
-      var modelLang = model.getLanguageId();
-      if (modelLang === 'json' && contentToSet) {
-        try {
-          contentToSet = JSON.stringify(JSON.parse(contentToSet), null, 2);
-        } catch (_) {
-          // invalid JSON — use raw content; Monaco will show error markers
-        }
-      }
-
-      editor.setValue(contentToSet);
+      editor.setValue(tab.content);
       // Reset the AVI baseline: setValue clears the undo stack so anything before
       // this point is no longer reachable. Also clear the canUndo/canRedo display.
       var newBase = model.getAlternativeVersionId();
@@ -935,7 +919,8 @@ var EditorPanel = function EditorPanel(_ref) {
         formatOnPaste: editorPrefs.formatOnPaste !== false,
         formatOnType: editorPrefs.formatOnType !== false,
         quickSuggestions: editorPrefs.quickSuggestions !== false,
-        wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
+        wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'currentDocument',
+        linkedEditing: !!(editorPrefs.linkedEditing),
         acceptSuggestionOnEnter: editorPrefs.acceptSuggestionOnEnter || 'on'
       });
     }
@@ -970,6 +955,20 @@ var EditorPanel = function EditorPanel(_ref) {
         });
         MonacoVim.VimMode.Vim.map('<C-p>', ':mbeditorquickopen<CR>', 'normal');
         MonacoVim.VimMode.Vim.map('<C-p>', ':mbeditorquickopen<CR>', 'visual');
+        // :split / :vsplit — open the current file in the other pane and focus it.
+        // Both map to the same behaviour since the editor always has exactly two panes.
+        var openInOtherPane = function() {
+          var model = monacoRef.current && monacoRef.current.getModel();
+          var filePath = model && model._mbeditorPath;
+          if (!filePath || typeof TabManager === 'undefined') return;
+          var otherPaneId = paneId === 1 ? 2 : 1;
+          // forcePaneId (4th arg) bypasses the "redirect empty pane 2 → pane 1" guard.
+          TabManager.openTab(filePath, filePath.split('/').pop(), null, otherPaneId);
+          TabManager.focusPane(otherPaneId);
+          window.dispatchEvent(new CustomEvent('mbeditor:focusPane', { detail: { paneId: otherPaneId } }));
+        };
+        MonacoVim.VimMode.Vim.defineEx('split', 'sp', openInOtherPane);
+        MonacoVim.VimMode.Vim.defineEx('vsplit', 'vs', openInOtherPane);
         vimModeObjRef.current = vimInstance;
       });
     } else {
@@ -987,6 +986,18 @@ var EditorPanel = function EditorPanel(_ref) {
     };
   }, [editorPrefs.vimMode]);
 
+  // Focus this pane's Monaco editor when MbeditorApp dispatches mbeditor:focusPane
+  // (used by the vim Ctrl+W panel-switching handler to move keyboard focus).
+  useEffect(function() {
+    function onFocusPane(e) {
+      if (e.detail && e.detail.paneId === paneId && monacoRef.current) {
+        monacoRef.current.focus();
+      }
+    }
+    window.addEventListener('mbeditor:focusPane', onFocusPane);
+    return function() { window.removeEventListener('mbeditor:focusPane', onFocusPane); };
+  }, [paneId]);
+
   // Jump to line if specified
   useEffect(function () {
     if (tab.gotoLine && monacoRef.current) {
@@ -1831,4 +1842,18 @@ var EditorPanel = function EditorPanel(_ref) {
   );
 };
 
-window.EditorPanel = EditorPanel;
+// treeData and all function props (onSave, onFormat, etc.) are intentionally
+// excluded — their references change every parent render but don't affect editor output.
+window.EditorPanel = React.memo(EditorPanel, function(prev, next) {
+  return prev.tab === next.tab &&
+    prev.paneId === next.paneId &&
+    (prev.markers === next.markers || (prev.markers.length === 0 && next.markers.length === 0)) &&
+    prev.gitAvailable === next.gitAvailable &&
+    prev.testAvailable === next.testAvailable &&
+    prev.testResult === next.testResult &&
+    prev.testPanelFile === next.testPanelFile &&
+    prev.testLoading === next.testLoading &&
+    prev.testInlineVisible === next.testInlineVisible &&
+    prev.editorPrefs === next.editorPrefs &&
+    prev.monacoReady === next.monacoReady;
+});

data/app/assets/javascripts/mbeditor/components/FileTree.js

@@ -69,12 +69,40 @@ var FileTree = function FileTree(_ref) {
   // signal is where they last clicked.
   var sidebarActiveRef = useRef(false);
 
+  // Virtual scroll state
+  var ROW_HEIGHT = 22;
+  var BUFFER = 5;
+  var flatItemsRef = useRef([]);
+  var scrollParentRef = useRef(null);
+
+  var _scrollState = useState(0);
+  var scrollTop = _scrollState[0];
+  var setScrollTop = _scrollState[1];
+
+  var _heightState = useState(400);
+  var containerHeight = _heightState[0];
+  var setContainerHeight = _heightState[1];
+
+  // Scroll item at idx into view via the parent scroll container
+  var scrollToItem = function scrollToItem(idx) {
+    var parent = scrollParentRef.current;
+    if (!parent || !containerRef.current) return;
+    var parentTop = parent.getBoundingClientRect().top;
+    var treeTop = containerRef.current.getBoundingClientRect().top;
+    var treeOffset = parent.scrollTop + (treeTop - parentTop);
+    var itemAbsTop = treeOffset + idx * ROW_HEIGHT;
+    var itemAbsBottom = itemAbsTop + ROW_HEIGHT;
+    if (itemAbsTop < parent.scrollTop || itemAbsBottom > parent.scrollTop + parent.clientHeight) {
+      parent.scrollTop = Math.max(0, itemAbsTop - Math.floor((parent.clientHeight - ROW_HEIGHT) / 2));
+    }
+  };
+
   // Scroll the highlighted node into view when anchorPath changes (e.g. Find in Explorer)
   useEffect(function () {
-    if (!anchorPath || !containerRef.current) return;
+    if (!anchorPath) return;
     var timer = setTimeout(function () {
-      var el = containerRef.current && containerRef.current.querySelector('.tree-item.selected');
-      if (el) el.scrollIntoView({ block: 'center' });
+      var idx = flatItemsRef.current.findIndex(function(item) { return item.kind === 'node' && item.node.path === anchorPath; });
+      if (idx >= 0) scrollToItem(idx);
     }, 60);
     return function () { clearTimeout(timer); };
   }, [anchorPath]);
@@ -97,15 +125,8 @@ var FileTree = function FileTree(_ref) {
 
     // After the DOM updates, scroll the active item into view only if not already visible
     var timer = setTimeout(function () {
-      if (!containerRef.current) return;
-      var el = containerRef.current.querySelector('.tree-item.active');
-      if (el) {
-        var elRect = el.getBoundingClientRect();
-        var containerRect = containerRef.current.getBoundingClientRect();
-        if (elRect.top < containerRect.top || elRect.bottom > containerRect.bottom) {
-          el.scrollIntoView({ block: 'nearest' });
-        }
-      }
+      var idx = flatItemsRef.current.findIndex(function(item) { return item.kind === 'node' && item.node.path === activePath; });
+      if (idx >= 0) scrollToItem(idx);
     }, 80);
     return function () { clearTimeout(timer); };
   }, [activePath]);
@@ -134,6 +155,8 @@ var FileTree = function FileTree(_ref) {
     if (pendingCreate) {
       setInlineValue('');
       committedRef.current = false;
+      var createIdx = flatItemsRef.current.findIndex(function(item) { return item.kind === 'create'; });
+      if (createIdx >= 0) scrollToItem(createIdx);
       setTimeout(function () {
         if (inlineRef.current) inlineRef.current.focus();
       }, 0);
@@ -146,6 +169,35 @@ var FileTree = function FileTree(_ref) {
     return function() { clearTimeout(hoverTimerRef.current); };
   }, []);
 
+  // Track the parent scroll container (.ide-sidebar-scrollable) for virtual scroll.
+  // The file-tree-root itself does not scroll — the parent does.
+  useEffect(function() {
+    if (!containerRef.current) return;
+    var parent = containerRef.current.closest('.ide-sidebar-scrollable');
+    if (!parent) return;
+    scrollParentRef.current = parent;
+
+    var update = function() {
+      if (!containerRef.current || !parent) return;
+      var parentRect = parent.getBoundingClientRect();
+      var treeRect = containerRef.current.getBoundingClientRect();
+      var treeOffset = parent.scrollTop + (treeRect.top - parentRect.top);
+      setScrollTop(Math.max(0, parent.scrollTop - treeOffset));
+      setContainerHeight(parent.clientHeight);
+    };
+
+    parent.addEventListener('scroll', update, { passive: true });
+    var obs = new ResizeObserver(update);
+    obs.observe(parent);
+    obs.observe(containerRef.current);
+    update();
+
+    return function() {
+      parent.removeEventListener('scroll', update);
+      obs.disconnect();
+    };
+  }, []);
+
   var toggleFolder = function toggleFolder(path, e) {
     e.stopPropagation();
     var next = !(expandedDirs && expandedDirs[path]);
@@ -186,22 +238,10 @@ var FileTree = function FileTree(_ref) {
   };
 
   // Returns all visible paths in depth-first render order (for shift+click range select)
-  var computeVisiblePaths = function computeVisiblePaths(nodes) {
-    var paths = [];
-    var visit = function visit(list) {
-      var sorted = [].concat(_toConsumableArray(list)).sort(function (a, b) {
-        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
-        return a.name.localeCompare(b.name);
-      });
-      sorted.forEach(function (node) {
-        paths.push(node.path);
-        if (node.type === 'folder' && expandedDirs && expandedDirs[node.path] && node.children) {
-          visit(node.children);
-        }
-      });
-    };
-    visit(nodes);
-    return paths;
+  var computeVisiblePaths = function computeVisiblePaths(_nodes) {
+    return flatItemsRef.current
+      .filter(function(item) { return item.kind === 'node'; })
+      .map(function(item) { return item.node.path; });
   };
 
   // Global type-ahead: tracks the last mousedown to know if the user is "in the explorer",
@@ -232,17 +272,14 @@ var FileTree = function FileTree(_ref) {
       }, 600);
 
       var prefix = typeaheadBufferRef.current;
-      var allItems = containerRef.current.querySelectorAll('.tree-item');
-      for (var i = 0; i < allItems.length; i++) {
-        var nameEl = allItems[i].querySelector('.tree-item-name');
-        if (nameEl && nameEl.textContent.trim().toLowerCase().indexOf(prefix) === 0) {
-          allItems[i].scrollIntoView({ block: 'nearest' });
-          // Visually select the matched item so the user sees the highlight change.
-          var nodePath = allItems[i].getAttribute('data-path');
-          var nodeName = allItems[i].getAttribute('data-name');
-          var nodeType = allItems[i].getAttribute('data-type');
-          if (nodePath && onNodeSelectRef.current) {
-            onNodeSelectRef.current({ path: nodePath, name: nodeName || nodePath.split('/').pop(), type: nodeType || 'file' });
+      var flat = flatItemsRef.current;
+      for (var i = 0; i < flat.length; i++) {
+        var fItem = flat[i];
+        if (fItem.kind !== 'node') continue;
+        if (fItem.node.name.toLowerCase().indexOf(prefix) === 0) {
+          scrollToItem(i);
+          if (onNodeSelectRef.current) {
+            onNodeSelectRef.current({ path: fItem.node.path, name: fItem.node.name, type: fItem.node.type });
           }
           break;
         }
@@ -348,60 +385,93 @@ var FileTree = function FileTree(_ref) {
     );
   };
 
-  var renderTree = function renderTree(nodes, folderPath) {
-    var sortedNodes = [].concat(_toConsumableArray(nodes)).sort(function (a, b) {
-      if (a.type !== b.type) return a.type === "folder" ? -1 : 1;
+  // Flatten the visible tree into a linear array for virtual scrolling.
+  var flattenVisible = function flattenVisible(nodes, depth, parentPath) {
+    var result = [];
+    var sorted = [].concat(_toConsumableArray(nodes)).sort(function(a, b) {
+      if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
       return a.name.localeCompare(b.name);
     });
+    sorted.forEach(function(node) {
+      result.push({ kind: 'node', node: node, depth: depth });
+      if (node.type === 'folder' && expandedDirs && expandedDirs[node.path] && node.children) {
+        var children = flattenVisible(node.children, depth + 1, node.path);
+        for (var ci = 0; ci < children.length; ci++) result.push(children[ci]);
+      }
+    });
+    if (pendingCreate && pendingCreate.parentPath === parentPath) {
+      result.push({ kind: 'create', depth: depth });
+    }
+    return result;
+  };
+
+  var flatItems = flattenVisible(items || [], 0, '');
+  flatItemsRef.current = flatItems;
+
+  var totalHeight = flatItems.length * ROW_HEIGHT;
+  var startIdx = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - BUFFER);
+  var endIdx = Math.min(flatItems.length - 1, Math.ceil((scrollTop + containerHeight) / ROW_HEIGHT) + BUFFER);
 
-    var rows = sortedNodes.map(function (node) {
-      var isFolder = node.type === "folder";
-      var isExpanded = !!(expandedDirs && expandedDirs[node.path]);
-      var isRenamingThisNode = !!(pendingRename && pendingRename.path === node.path);
-      var isOpenFile = activePath === node.path;
-      var isSelected = !!(selectedPaths && selectedPaths.has(node.path));
-      var isDragOver = isFolder && dragOverFolder === node.path;
-      var status = getGitStatus(node.path);
-      var statusMeta = getTreeStatusMeta(status);
-      var isModified = statusMeta && (statusMeta.cssKey === "M" || statusMeta.cssKey === "A");
-
-      var classNames = 'tree-item' +
-        (isOpenFile ? ' active' : '') +
-        (isSelected ? ' selected' : '') +
-        (isModified ? ' modified' : '') +
-        (isDragOver ? ' drag-over' : '');
+  var renderRow = function renderRow(item, idx) {
+    var indentPx = 8 + item.depth * 12;
 
+    if (item.kind === 'create') {
       return React.createElement(
         'div',
-        { key: node.path, className: 'file-tree' },
-        isRenamingThisNode ? renderInlineRenameRow(node) : React.createElement(
+        { key: '__inline-create__', style: { position: 'absolute', top: idx * ROW_HEIGHT, left: 0, right: 0 } },
+        React.createElement('div', { style: { paddingLeft: indentPx } }, renderInlineRow())
+      );
+    }
+
+    var node = item.node;
+    var isFolder = node.type === 'folder';
+    var isExpanded = !!(expandedDirs && expandedDirs[node.path]);
+    var isRenamingThisNode = !!(pendingRename && pendingRename.path === node.path);
+    var isOpenFile = activePath === node.path;
+    var isSelected = !!(selectedPaths && selectedPaths.has(node.path));
+    var isDragOver = isFolder && dragOverFolder === node.path;
+    var status = getGitStatus(node.path);
+    var statusMeta = getTreeStatusMeta(status);
+    var isModified = statusMeta && (statusMeta.cssKey === 'M' || statusMeta.cssKey === 'A');
+
+    var classNames = 'tree-item' +
+      (isOpenFile ? ' active' : '') +
+      (isSelected ? ' selected' : '') +
+      (isModified ? ' modified' : '') +
+      (isDragOver ? ' drag-over' : '');
+
+    return React.createElement(
+      'div',
+      { key: node.path, style: { position: 'absolute', top: idx * ROW_HEIGHT, left: 0, right: 0 } },
+      isRenamingThisNode
+        ? React.createElement('div', { style: { paddingLeft: indentPx } }, renderInlineRenameRow(node))
+        : React.createElement(
           'div',
           {
             className: classNames,
+            style: { paddingLeft: indentPx },
             'data-path': node.path,
             'data-name': node.name,
             'data-type': node.type,
             draggable: true,
-            onDragStart: function (e) {
-              // If the dragged node is part of a multi-selection, drag all selected; otherwise just this node
+            onDragStart: function(e) {
               var srcPaths = (selectedPaths && selectedPaths.has(node.path) && selectedPaths.size > 1)
                 ? Array.from(selectedPaths)
                 : [node.path];
               e.dataTransfer.setData('text/plain', JSON.stringify(srcPaths));
               e.dataTransfer.effectAllowed = 'move';
             },
-            onDragOver: function (e) {
+            onDragOver: function(e) {
               if (!isFolder) return;
               e.preventDefault();
               e.stopPropagation();
               e.dataTransfer.dropEffect = 'move';
               if (dragOverFolder !== node.path) setDragOverFolder(node.path);
             },
-            onDragLeave: function (e) {
-              // Only clear if we're leaving the folder item itself, not entering a child
+            onDragLeave: function() {
               if (dragOverFolder === node.path) setDragOverFolder(null);
             },
-            onDrop: function (e) {
+            onDrop: function(e) {
               e.preventDefault();
               e.stopPropagation();
               setDragOverFolder(null);
@@ -411,66 +481,51 @@ var FileTree = function FileTree(_ref) {
                 if (onMove && srcPaths && srcPaths.length > 0) onMove(srcPaths, node.path);
               } catch (err) {}
             },
-            onDragEnd: function () { setDragOverFolder(null); },
-            onClick: function (e) {
+            onDragEnd: function() { setDragOverFolder(null); },
+            onClick: function(e) {
               if (e.ctrlKey || e.metaKey) {
-                // Ctrl/Cmd+click: toggle this node in/out of selection
                 if (onMultiSelect) {
                   var newPaths = new Set(selectedPaths || []);
-                  if (newPaths.has(node.path)) {
-                    newPaths.delete(node.path);
-                  } else {
-                    newPaths.add(node.path);
-                  }
+                  if (newPaths.has(node.path)) { newPaths.delete(node.path); } else { newPaths.add(node.path); }
                   onMultiSelect(newPaths);
                 }
-                // Don't open file on ctrl-click
               } else if (e.shiftKey && anchorPath) {
-                // Shift+click: range-select from anchor to this node
                 if (onMultiSelect) {
                   var visiblePaths = computeVisiblePaths(items);
-                  var anchorIdx = visiblePaths.indexOf(anchorPath);
-                  var currentIdx = visiblePaths.indexOf(node.path);
-                  if (anchorIdx >= 0 && currentIdx >= 0) {
-                    var start = Math.min(anchorIdx, currentIdx);
-                    var end = Math.max(anchorIdx, currentIdx);
+                  var anchorIdx2 = visiblePaths.indexOf(anchorPath);
+                  var currentIdx2 = visiblePaths.indexOf(node.path);
+                  if (anchorIdx2 >= 0 && currentIdx2 >= 0) {
+                    var start = Math.min(anchorIdx2, currentIdx2);
+                    var end = Math.max(anchorIdx2, currentIdx2);
                     onMultiSelect(new Set(visiblePaths.slice(start, end + 1)));
                   } else {
                     selectNode(node);
                   }
                 }
               } else {
-                // Normal single click
                 selectNode(node);
-                if (isFolder) {
-                  toggleFolder(node.path, e);
-                } else {
-                  onSelect(node.path, node.name);
-                }
+                if (isFolder) { toggleFolder(node.path, e); } else { onSelect(node.path, node.name); }
                 if (containerRef.current) containerRef.current.focus();
               }
             },
-            onDoubleClick: function (e) {
-              if (!isFolder && onFileDoubleClick) {
-                e.stopPropagation();
-                onFileDoubleClick(node.path, node.name);
-              }
+            onDoubleClick: function(e) {
+              if (!isFolder && onFileDoubleClick) { e.stopPropagation(); onFileDoubleClick(node.path, node.name); }
             },
-            onMouseEnter: function () {
+            onMouseEnter: function() {
               if (isFolder) return;
               clearTimeout(hoverTimerRef.current);
-              hoverTimerRef.current = setTimeout(function () {
+              hoverTimerRef.current = setTimeout(function() {
                 hoverPathRef.current = node.path;
                 FileService.prefetch(node.path);
               }, 200);
             },
-            onMouseLeave: function () {
+            onMouseLeave: function() {
               if (isFolder) return;
               clearTimeout(hoverTimerRef.current);
               FileService.cancelPrefetch(hoverPathRef.current);
               hoverPathRef.current = null;
             },
-            onContextMenu: function (e) {
+            onContextMenu: function(e) {
               e.preventDefault();
               e.stopPropagation();
               selectNode(node);
@@ -478,9 +533,10 @@ var FileTree = function FileTree(_ref) {
             }
           },
           React.createElement(
-            'div',
-            { className: 'tree-item-icon' },
-            isFolder ? React.createElement('i', { className: 'fas fa-folder' + (isExpanded ? "-open" : "") + ' tree-folder-icon' }) : React.createElement('i', { className: window.getFileIcon(node.name) + ' tree-file-icon' })
+            'div', { className: 'tree-item-icon' },
+            isFolder
+              ? React.createElement('i', { className: 'fas fa-folder' + (isExpanded ? '-open' : '') + ' tree-folder-icon' })
+              : React.createElement('i', { className: window.getFileIcon(node.name) + ' tree-file-icon' })
           ),
           React.createElement(
             'div',
@@ -492,27 +548,23 @@ var FileTree = function FileTree(_ref) {
             { className: 'git-status-badge git-' + statusMeta.cssKey, title: statusMeta.title },
             statusMeta.badge
           )
-        ),
-        isFolder && isExpanded && node.children && React.createElement(
-          'div',
-          { style: { paddingLeft: "12px" } },
-          renderTree(node.children, node.path)
         )
-      );
-    });
-
-    // Inject inline create row at the end of this directory's list
-    if (pendingCreate && pendingCreate.parentPath === folderPath) {
-      rows.push(renderInlineRow());
-    }
-
-    return rows;
+    );
   };
 
+  var visibleRows = [];
+  for (var vi = startIdx; vi <= endIdx; vi++) {
+    visibleRows.push(renderRow(flatItems[vi], vi));
+  }
+
   return React.createElement(
     'div',
-    { className: 'file-tree-root', ref: containerRef, tabIndex: 0, style: { outline: 'none' } },
-    renderTree(items, '')
+    { className: 'file-tree file-tree-root', ref: containerRef, tabIndex: 0, style: { outline: 'none', padding: 0 } },
+    React.createElement(
+      'div',
+      { style: { height: totalHeight, position: 'relative' } },
+      visibleRows
+    )
   );
 };
 
@@ -527,7 +579,7 @@ var FileTreeMemo = React.memo(FileTree, function(prev, next) {
     prev.activePath === next.activePath &&
     prev.selectedPaths === next.selectedPaths &&
     prev.anchorPath === next.anchorPath &&
-    JSON.stringify(prev.gitFiles) === JSON.stringify(next.gitFiles) &&
+    prev.gitFiles === next.gitFiles &&
     prev.expandedDirs === next.expandedDirs &&
     prev.pendingCreate === next.pendingCreate &&
     prev.pendingRename === next.pendingRename;