mbeditor 0.12.9 → 0.13.1

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

@@ -6,6 +6,7 @@ var _React = React;
 var useState = _React.useState;
 var useEffect = _React.useEffect;
 var useRef = _React.useRef;
+var useMemo = _React.useMemo;
 
 var IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'avif'];
 
@@ -23,16 +24,13 @@ var EditorPanel = function EditorPanel(_ref) {
   var onContentChange = _ref.onContentChange;
   var markers = _ref.markers;
   var gitAvailable = _ref.gitAvailable === true;
-  var testAvailable = _ref.testAvailable === true;
   var onFormat = _ref.onFormat;
   var onSave = _ref.onSave;
-  var onRunTest = _ref.onRunTest;
   var onRunTestAtCursor = _ref.onRunTestAtCursor;
   var onShowHistory = _ref.onShowHistory;
   var treeData = _ref.treeData || [];
   var testResult = _ref.testResult;
   var testPanelFile = _ref.testPanelFile;
-  var testLoading = _ref.testLoading;
   var testInlineVisible = _ref.testInlineVisible;
   var editorPrefs = _ref.editorPrefs || {};
   var monacoReady = _ref.monacoReady !== false; // undefined means Monaco already loaded (legacy callers)
@@ -611,7 +609,7 @@ var EditorPanel = function EditorPanel(_ref) {
       var _histBranch = EditorStore.getState().gitBranch || '';
       if (_histBranch) {
         if (_reusingModel) {
-          HistoryService.resumeTracking(_histBranch, tab.path);
+          HistoryService.resumeTracking(_histBranch, tab.path, modelObj.getValue());
         } else {
           HistoryService.beginTracking(_histBranch, tab.path, tab.content || '');
         }
@@ -647,9 +645,8 @@ var EditorPanel = function EditorPanel(_ref) {
       autoClosingBrackets: editorPrefs.autoClosingBrackets || 'always',
       autoClosingQuotes: editorPrefs.autoClosingQuotes || 'always',
       autoIndent: editorPrefs.autoIndent || 'full',
-      // Monaco own format-on-paste is left off: it never ran the formatter
-      // here. attachEditorFeatures drives re-indent-on-paste from onDidPaste
-      // instead, gated on editorPrefs.indentOnPaste.
+      // Paste inserts what was copied, unchanged. See attachEditorFeatures for
+      // why re-indenting it was removed rather than repaired.
       formatOnPaste: false,
       formatOnType: editorPrefs.formatOnType === true, // off by default: on-type formatting adds per-keystroke latency on slow machines
       quickSuggestions: editorPrefs.quickSuggestions !== false,
@@ -1213,10 +1210,9 @@ var EditorPanel = function EditorPanel(_ref) {
         autoClosingBrackets: editorPrefs.autoClosingBrackets || 'always',
         autoClosingQuotes: editorPrefs.autoClosingQuotes || 'always',
         autoIndent: editorPrefs.autoIndent || 'full',
-        // Monaco own format-on-paste is left off: it never ran the formatter
-      // here. attachEditorFeatures drives re-indent-on-paste from onDidPaste
-      // instead, gated on editorPrefs.indentOnPaste.
-      formatOnPaste: false,
+        // Paste inserts what was copied, unchanged. See attachEditorFeatures
+        // for why re-indenting it was removed rather than repaired.
+        formatOnPaste: false,
         formatOnType: editorPrefs.formatOnType === true, // off by default: on-type formatting adds per-keystroke latency on slow machines
         quickSuggestions: editorPrefs.quickSuggestions !== false,
         wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'currentDocument',
@@ -1324,9 +1320,18 @@ var EditorPanel = function EditorPanel(_ref) {
       var column = tab.gotoCol || 1;
       var maxColumn = model.getLineMaxColumn(line);
       if (column > maxColumn) column = maxColumn;
+      // With both bounds the match itself is selected and the cursor ends up
+      // just past it — where you'd start typing. With only gotoCol the
+      // selection is empty, which is exactly setPosition.
+      var endColumn = Math.min(tab.gotoEndCol || column, maxColumn);
 
       editor.revealLineInCenter(line);
-      editor.setPosition({ lineNumber: line, column: column });
+      // setSelection(IRange) parks the cursor at the range's end, so no
+      // setPosition afterwards — that would collapse the selection again.
+      editor.setSelection({
+        startLineNumber: line, startColumn: column,
+        endLineNumber: line, endColumn: endColumn
+      });
       editor.focus();
 
       TabManager.saveTabViewState(tab.id, editor.saveViewState());
@@ -1334,7 +1339,7 @@ var EditorPanel = function EditorPanel(_ref) {
     }, 50);
 
     return function () { clearTimeout(timer); };
-  }, [tab.gotoLine, tab.gotoCol, tab.content, tab.loading]);
+  }, [tab.gotoLine, tab.gotoCol, tab.gotoEndCol, tab.content, tab.loading]);
 
   // Apply RuboCop markers
   useEffect(function () {
@@ -1495,8 +1500,19 @@ var EditorPanel = function EditorPanel(_ref) {
     gitLineRefreshRef.current = refresh;
 
     // Immediate path for writes mbeditor made itself.
+    //
+    // Only when *this* file is one of the ones that changed: saving some other
+    // file cannot move this file's diff against HEAD. Refreshing regardless
+    // meant every open pane ran a git diff on every save anywhere in the
+    // workspace, so the cost of a save scaled with how many editors were open.
+    // A broadcast that names no paths still refreshes — that is the "something
+    // happened, re-check everything" case (a commit, a branch switch), which
+    // genuinely can change this file's diff without touching it.
     var hasSocket = typeof WebSocketService !== 'undefined' && WebSocketService.onFilesChanged;
-    var onChanged = hasSocket ? function () { refresh(); } : null;
+    var onChanged = hasSocket ? function (payload) {
+      if (payload && payload.paths && payload.paths.indexOf(tab.path) === -1) return;
+      refresh();
+    } : null;
     if (onChanged) WebSocketService.onFilesChanged(onChanged);
 
     return function () {
@@ -1572,6 +1588,16 @@ var EditorPanel = function EditorPanel(_ref) {
   //
   // Decorations, not view zones: a hint belongs on the line, and a zone would
   // push the code around every time a file was opened.
+  //
+  // Redrawn whenever the text changes, not only when the file is opened. A
+  // decoration is a zero-width range pinned at the end of the `def` line, and
+  // Monaco keeps that position through an edit rather than re-deriving it — so
+  // replacing a method (a paste over the selection is the usual way) left the
+  // hint at a column that now falls in the middle of whatever text took its
+  // place, rendering as `def sho  GET /orders/:idw`. Nothing recomputed it,
+  // so saving did not clear it either; it survived until the file was
+  // reopened. The route data itself only depends on the route set, so an edit
+  // redraws from the cached response without asking the server again.
   useEffect(function () {
     var editor = monacoRef.current;
     if (!editor || !window.monaco) return;
@@ -1581,17 +1607,19 @@ var EditorPanel = function EditorPanel(_ref) {
       routeDecorationsRef.current = editor.deltaDecorations(routeDecorationsRef.current, []);
     };
 
-    if (!tab.path || !/^app\/controllers\/.+_controller\.rb$/.test(tab.path)) {
+    if (editorPrefs.routeHints === false ||
+        !tab.path || !/^app\/controllers\/.+_controller\.rb$/.test(tab.path)) {
       clear();
       return;
     }
 
     var cancelled = false;
-    FileService.getRoutes(tab.path).then(function (data) {
+    var redrawTimer = null;
+
+    var draw = function (actions) {
       if (cancelled) return;
-      var actions = (data && data.actions) || {};
       var model = editor.getModel();
-      if (!model) return;
+      if (!model || model.isDisposed()) return;
 
       var decorations = [];
       var text = model.getValue().split('\n');
@@ -1634,10 +1662,47 @@ var EditorPanel = function EditorPanel(_ref) {
       });
 
       routeDecorationsRef.current = editor.deltaDecorations(routeDecorationsRef.current, decorations);
+    };
+
+    var contentSub = null;
+    FileService.getRoutes(tab.path).then(function (data) {
+      if (cancelled) return;
+      var actions = (data && data.actions) || {};
+      draw(actions);
+
+      // Debounced: a redraw per keystroke would rebuild every decoration in
+      // the file for an edit that usually cannot have moved one.
+      var model = editor.getModel();
+      if (!model || !model.onDidChangeContent) return;
+      contentSub = model.onDidChangeContent(function () {
+        clearTimeout(redrawTimer);
+        redrawTimer = setTimeout(function () { draw(actions); }, 250);
+      });
     }).catch(function () { /* hints are additive; a failure just means none */ });
 
-    return function () { cancelled = true; clear(); };
-  }, [tab.path, tab.externalContentVersion, monacoReady]);
+    return function () {
+      cancelled = true;
+      clearTimeout(redrawTimer);
+      if (contentSub) contentSub.dispose();
+      clear();
+    };
+  }, [tab.path, tab.externalContentVersion, monacoReady, editorPrefs.routeHints]);
+
+  // Blame and test view zones are anchored to line numbers, so they only need
+  // rebuilding once an edit has settled. Both effects used to list tab.content
+  // directly, which tore down and re-created every zone in the file on every
+  // keystroke. This ticks 250 ms after the last change instead — the same
+  // treatment the route-hint redraw above already gets.
+  var _useStateZT = useState(0);
+  var _useStateZT2 = _slicedToArray(_useStateZT, 2);
+  var zoneTick = _useStateZT2[0];
+  var setZoneTick = _useStateZT2[1];
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      setZoneTick(function (n) { return n + 1; });
+    }, 250);
+    return function () { clearTimeout(timer); };
+  }, [tab.content]);
 
   // Render Blame block headers (author + summary) above contiguous commit regions.
   useEffect(function () {
@@ -1725,8 +1790,8 @@ var EditorPanel = function EditorPanel(_ref) {
       blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, []);
     }
 
-  // Include tab.content so blame re-renders once async file contents finish loading.
-  }, [blameData, isBlameVisible, tab.id, tab.content]);
+  // zoneTick, not tab.content: the zones follow the content, 250 ms behind it.
+  }, [blameData, isBlameVisible, tab.id, zoneTick]);
 
   // Check whether the current tab is the source file for the test that was run.
   // e.g. testPanelFile = "test/controllers/theme_controller_test.rb"
@@ -1744,66 +1809,6 @@ var EditorPanel = function EditorPanel(_ref) {
     return src === derived;
   };
 
-  var testFileCandidates = function(relativePath) {
-    if (!relativePath || !relativePath.endsWith('.rb')) return [];
-
-    var basename = relativePath.slice(0, -3);
-    var dirParts = relativePath.split('/');
-    var leafName = basename.split('/').pop();
-    var candidates = [];
-
-    if (dirParts[0] === 'app' && dirParts.length > 1) {
-      var subPath = dirParts.slice(1).join('/');
-      var subDir = subPath.indexOf('/') !== -1 ? subPath.slice(0, subPath.lastIndexOf('/')) : '';
-      candidates.push('test/' + (subDir ? subDir + '/' : '') + leafName + '_test.rb');
-      candidates.push('spec/' + (subDir ? subDir + '/' : '') + leafName + '_spec.rb');
-    }
-
-    if (dirParts[0] === 'lib') {
-      var libSubPath = dirParts.slice(1).join('/');
-      var libSubDir = libSubPath.indexOf('/') !== -1 ? libSubPath.slice(0, libSubPath.lastIndexOf('/')) : '';
-      candidates.push('test/lib/' + (libSubDir ? libSubDir + '/' : '') + leafName + '_test.rb');
-      candidates.push('test/' + (libSubDir ? libSubDir + '/' : '') + leafName + '_test.rb');
-      candidates.push('spec/lib/' + (libSubDir ? libSubDir + '/' : '') + leafName + '_spec.rb');
-    }
-
-    candidates.push('test/' + leafName + '_test.rb');
-    candidates.push('spec/' + leafName + '_spec.rb');
-
-    return candidates.filter(function(candidate, index, list) {
-      return list.indexOf(candidate) === index;
-    });
-  };
-
-  var treeHasPath = function(nodes, targetPath) {
-    if (!targetPath) return false;
-    var stack = (nodes || []).slice();
-
-    while (stack.length) {
-      var node = stack.pop();
-      if (!node) continue;
-      if (node.path === targetPath) return true;
-      if (node.children && node.children.length) {
-        stack.push.apply(stack, node.children);
-      }
-    }
-
-    return false;
-  };
-
-  var matchingTestFilePath = function(sourcePath) {
-    var normalized = (sourcePath || '').replace(/^\/+/, '');
-    if (!normalized || !normalized.endsWith('.rb')) return null;
-    if (/^(test|spec)\//.test(normalized) && /_(test|spec)\.rb$/.test(normalized)) return normalized;
-
-    var candidates = testFileCandidates(normalized);
-    for (var i = 0; i < candidates.length; i += 1) {
-      if (treeHasPath(treeData, candidates[i])) return candidates[i];
-    }
-
-    return null;
-  };
-
   // Map a test method name to the best-matching line in the source file.
   // Extracts keywords from the test name and scores each source line.
   var mapTestToSourceLine = function(testName, sourceContent) {
@@ -1840,9 +1845,17 @@ var EditorPanel = function EditorPanel(_ref) {
     var model = editor.getModel();
     var lineCount = model ? model.getLineCount() : 0;
 
-    var showHere = testPanelFile && tab.path && isSourceForTest(tab.path, testPanelFile);
+    // Which test file a result entry belongs to. A whole-suite run spans many
+    // of them and stamps each entry with its own `file`, so there is no single
+    // testPanelFile to gate on; a per-file run leaves `file` unset on the
+    // passing entries and testPanelFile is the answer for those.
+    var testFileFor = function (t) { return (t && t.file) || testPanelFile; };
+    var relevantTests = ((testResult && testResult.tests) || []).filter(function (t) {
+      var file = testFileFor(t);
+      return file && tab.path && isSourceForTest(tab.path, file);
+    });
 
-    if (!testResult || !testInlineVisible || !showHere) {
+    if (!testResult || !testInlineVisible || relevantTests.length === 0) {
       clearTestZones(editor);
       testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
       return;
@@ -1853,10 +1866,8 @@ var EditorPanel = function EditorPanel(_ref) {
       testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
 
       var normPath = function(p) { return p ? p.replace(/^\/+/, '') : ''; };
-      var viewingTestFile = normPath(tab.path) === normPath(testPanelFile);
 
-      var tests = testResult.tests || [];
-      var testsWithStatus = tests.filter(function (t) {
+      var testsWithStatus = relevantTests.filter(function (t) {
         return t.status === 'pass' || t.status === 'fail' || t.status === 'error';
       });
 
@@ -1865,6 +1876,9 @@ var EditorPanel = function EditorPanel(_ref) {
       // Determine line number for each test
       var sourceContent = tab.content || '';
       var mapped = testsWithStatus.map(function(t) {
+        // Per entry, not per panel: in a suite run this tab is the test file
+        // for some entries and the source counterpart for others.
+        var viewingTestFile = normPath(tab.path) === normPath(testFileFor(t));
         var line;
         if (viewingTestFile && t.line && t.line >= 1 && t.line <= lineCount) {
           line = t.line;
@@ -1923,8 +1937,9 @@ var EditorPanel = function EditorPanel(_ref) {
       testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
     }
 
-  // Include tab.content so zones re-render once async file content loads (same as blame).
-  }, [testResult, testInlineVisible, testPanelFile, tab.id, tab.path, tab.content]);
+  // zoneTick, not tab.content — see the blame effect. The effect still reads
+  // tab.content for mapTestToSourceLine; the tick only decides when it re-runs.
+  }, [testResult, testInlineVisible, testPanelFile, tab.id, tab.path, zoneTick]);
 
   var sourceTab = tab.isPreview ? findTabByPath(tab.previewFor) : null;
   var markdownContent = tab.isPreview ? sourceTab && sourceTab.content || tab.content || '' : tab.content || '';
@@ -2253,18 +2268,6 @@ var EditorPanel = function EditorPanel(_ref) {
         React.createElement('i', { className: 'fas fa-shoe-prints', style: { marginRight: editorPrefs.toolbarIconOnly ? 0 : '5px', flexShrink: 0 } }),
         !editorPrefs.toolbarIconOnly && React.createElement('span', { className: 'ide-toolbar-label' }, isBlameLoading ? 'Loading...' : 'Blame')
       ),
-      testAvailable && matchingTestFilePath(tab.path) && React.createElement(
-        'button',
-        {
-          className: 'ide-icon-btn',
-          onClick: function() { if (onRunTest) onRunTest(); },
-          disabled: testLoading,
-          'aria-busy': !!testLoading,
-          title: 'Run Tests'
-        },
-        !testLoading && React.createElement('i', { className: 'fas fa-flask', style: { marginRight: editorPrefs.toolbarIconOnly ? 0 : '5px', flexShrink: 0 } }),
-        !editorPrefs.toolbarIconOnly && !testLoading && React.createElement('span', { className: 'ide-toolbar-label' }, 'Test')
-      )
     ),
     conflictCount > 0 && React.createElement(
       'div', { className: 'mb-conflict-banner' },
@@ -2535,10 +2538,8 @@ window.EditorPanel = React.memo(EditorPanel, function(prev, next) {
     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

@@ -423,7 +423,12 @@ var FileTree = function FileTree(_ref) {
     return result;
   };
 
-  var flatItems = flattenVisible(items || [], 0, '');
+  // A per-level localeCompare sort of the whole visible tree, re-run on every
+  // render — including the ones caused by a git poll or a tab switch, neither
+  // of which can change the shape of the tree. Only these three inputs can.
+  var flatItems = useMemo(function () {
+    return flattenVisible(items || [], 0, '');
+  }, [items, expandedDirs, pendingCreate]);
   flatItemsRef.current = flatItems;
 
   var totalHeight = flatItems.length * ROW_HEIGHT;

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

@@ -516,4 +516,13 @@ var GitPanel = function GitPanel(_ref) {
   );
 };
 
-window.GitPanel = GitPanel;
+// Same convention as FileTreeMemo: compare the data props only. The handlers
+// are re-created on every MbeditorApp render but each one only calls a setState
+// or a service, so they are stable in effect. Without this the panel — commit
+// history, file lists, the Redmine card — re-rendered on every keystroke in the
+// editor, because MbeditorApp is subscribed to the whole store.
+window.GitPanel = React.memo(GitPanel, function (prev, next) {
+  return prev.gitInfo === next.gitInfo &&
+    prev.error === next.error &&
+    prev.redmineEnabled === next.redmineEnabled;
+});

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

@@ -7,12 +7,10 @@
 //
 // Errors from the same pass render here too, so a drop that both conflicts
 // and fails needs one dialog rather than two.
-var ImportConflictModal = function ImportConflictModal(_ref) {
-  var conflicts = _ref.conflicts || [];
-  var errors = _ref.errors || [];
-  var onResolve = _ref.onResolve;
-  var modalRef = React.useRef(null);
-
+// Focus containment for a modal: initial focus in, Tab cycles inside, Escape
+// dismisses, focus restored on unmount. Shared with ImportDialog — both are
+// overlays over an editor that will happily steal focus back otherwise.
+window.useModalFocusTrap = function useModalFocusTrap(modalRef, onDismiss) {
   React.useEffect(function () {
     var previouslyFocused = document.activeElement;
     var modal = modalRef.current;
@@ -25,7 +23,7 @@ var ImportConflictModal = function ImportConflictModal(_ref) {
       if (e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
-        onResolve('skip');
+        onDismiss();
         return;
       }
       if (e.key !== 'Tab' || !modal) return;
@@ -57,7 +55,16 @@ var ImportConflictModal = function ImportConflictModal(_ref) {
         previouslyFocused.focus();
       }
     };
-  }, [onResolve]);
+  }, [onDismiss]);
+};
+
+var ImportConflictModal = function ImportConflictModal(_ref) {
+  var conflicts = _ref.conflicts || [];
+  var errors = _ref.errors || [];
+  var onResolve = _ref.onResolve;
+  var modalRef = React.useRef(null);
+
+  window.useModalFocusTrap(modalRef, React.useCallback(function () { onResolve('skip'); }, [onResolve]));
 
   var button = function (label, mode, className) {
     return React.createElement(

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

@@ -0,0 +1,224 @@
+'use strict';
+
+// Upload dialog: the pointed-at half of the drag-and-drop import.
+//
+// Everything past "pick files" is the existing import pipeline — the same
+// entries shape, the same /import call, the same ImportConflictModal for
+// replace/keep-both/skip. The only thing this adds is *where* the files land,
+// which drag-and-drop answers by what you dropped onto and a file picker
+// cannot answer at all.
+//
+// Destination suggestions come from the file tree already in memory
+// (SearchService's index), so picking a folder that lives at
+// app/assets/javascripts/ux/component offers that prefix rather than dumping
+// `ux/component/` at the workspace root. The root stays on offer as the
+// "create the structure from scratch" option.
+var ImportDialog = function ImportDialog(_ref) {
+  var initialFolder = _ref.initialFolder || '';
+  var docs = _ref.docs || [];
+  var onCancel = _ref.onCancel;
+  var onImport = _ref.onImport;
+
+  var modalRef = React.useRef(null);
+  var filesInputRef = React.useRef(null);
+  var folderInputRef = React.useRef(null);
+
+  var _picked = React.useState(null);
+  var picked = _picked[0];
+  var setPicked = _picked[1];
+
+  var _dest = React.useState(initialFolder);
+  var dest = _dest[0];
+  var setDest = _dest[1];
+
+  window.useModalFocusTrap(modalRef, onCancel);
+
+  // webkitdirectory has no JSX/React prop, and React strips unknown lowercase
+  // attributes on <input>, so it is set on the DOM node directly.
+  React.useEffect(function () {
+    var el = folderInputRef.current;
+    if (!el) return;
+    el.setAttribute('webkitdirectory', '');
+    el.setAttribute('directory', '');
+  }, []);
+
+  var entries = (picked && picked.entries) || [];
+
+  var suggestions = React.useMemo(function () {
+    if (entries.length === 0) return [];
+    return FileImport.suggestDestinations(entries, docs);
+  }, [picked, docs]);
+
+  var existingFiles = React.useMemo(function () {
+    var set = new Set();
+    docs.forEach(function (d) { if (d.type === 'file') set.add(d.path); });
+    return set;
+  }, [docs]);
+
+  var onPick = function (e) {
+    var result = FileImport.entriesFromFileList(e.target.files);
+    e.target.value = ''; // so picking the same folder twice still fires change
+    if (result.entries.length === 0) return;
+    setPicked(result);
+  };
+
+  var normalisedDest = String(dest || '').trim().replace(/^\/+|\/+$/g, '');
+
+  var destOption = function (prefix, label, hint) {
+    var active = normalisedDest === prefix;
+    return React.createElement(
+      'button',
+      {
+        key: '$' + prefix,
+        type: 'button',
+        className: 'import-dest-option' + (active ? ' active' : ''),
+        onClick: function () { setDest(prefix); }
+      },
+      React.createElement('i', { className: (active ? 'fas fa-dot-circle' : 'far fa-circle') + ' import-dest-radio' }),
+      React.createElement('span', { className: 'import-dest-label' }, label),
+      hint && React.createElement('span', { className: 'import-dest-hint' }, hint)
+    );
+  };
+
+  var offered = {};
+  var options = [];
+  var offer = function (prefix, label, hint) {
+    if (offered['$' + prefix]) return;
+    offered['$' + prefix] = true;
+    options.push(destOption(prefix, label, hint));
+  };
+
+  // The folder this upload was started from is always first and always the
+  // active one. Offering it after the suggestions meant that once you had
+  // imported a folder anywhere, that same folder scored top of the suggestion
+  // list next time and sat at the head of the options — so the dialog read as
+  // "it remembered where I last put things". With nothing selected it was
+  // worse: the previous destination was the first option and the actually
+  // chosen one ("Workspace root") was last.
+  offer(initialFolder, initialFolder || 'Workspace root',
+    initialFolder ? 'selected folder' : 'create the folders from the root');
+  suggestions.forEach(function (s) {
+    var bits = [];
+    if (s.files) bits.push(s.files + ' matching file' + (s.files === 1 ? '' : 's'));
+    if (s.dirs) bits.push(s.dirs + ' matching folder' + (s.dirs === 1 ? '' : 's'));
+    offer(s.prefix, s.prefix, bits.join(', '));
+  });
+  offer('', 'Workspace root', 'create the folders from the root');
+
+  var targets = entries.map(function (e) {
+    return FileImport.joinPath(normalisedDest, e.relativePath);
+  });
+  var replacing = targets.filter(function (t) { return existingFiles.has(t); }).length;
+
+  return React.createElement(
+    'div',
+    { className: 'schema-modal-overlay', onClick: onCancel },
+    React.createElement(
+      'div',
+      {
+        ref: modalRef,
+        className: 'schema-modal import-dialog',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-label': 'Upload files',
+        tabIndex: -1,
+        onClick: function (e) { e.stopPropagation(); }
+      },
+      React.createElement(
+        'div', { className: 'schema-modal-header' },
+        React.createElement('div', { className: 'schema-modal-title' },
+          React.createElement('i', { className: 'fas fa-upload', style: { marginRight: '8px', opacity: 0.7 } }),
+          'Upload files'),
+        React.createElement(
+          'button',
+          { className: 'schema-modal-close', onClick: onCancel, title: 'Close' },
+          React.createElement('i', { className: 'fas fa-times' })
+        )
+      ),
+      React.createElement(
+        'div', { className: 'schema-modal-body' },
+
+        React.createElement(
+          'div', { className: 'import-pick-row' },
+          React.createElement(
+            'button',
+            { type: 'button', className: 'import-pick-btn',
+              onClick: function () { filesInputRef.current && filesInputRef.current.click(); } },
+            React.createElement('i', { className: 'far fa-file' }), ' Choose files…'
+          ),
+          React.createElement(
+            'button',
+            { type: 'button', className: 'import-pick-btn',
+              onClick: function () { folderInputRef.current && folderInputRef.current.click(); } },
+            React.createElement('i', { className: 'far fa-folder' }), ' Choose folder…'
+          ),
+          React.createElement('input', {
+            ref: filesInputRef, type: 'file', multiple: true,
+            style: { display: 'none' }, onChange: onPick
+          }),
+          React.createElement('input', {
+            ref: folderInputRef, type: 'file', multiple: true,
+            style: { display: 'none' }, onChange: onPick
+          })
+        ),
+
+        entries.length === 0 && React.createElement(
+          'div', { className: 'import-dialog-empty' },
+          'Pick files or a folder to upload. You can also drag them onto the explorer.'
+        ),
+
+        picked && picked.truncated && React.createElement(
+          'div', { className: 'import-dialog-warning' },
+          'Only the first ' + FileImport.MAX_ENTRIES + ' files will be uploaded.'
+        ),
+
+        entries.length > 0 && React.createElement(
+          React.Fragment, null,
+          React.createElement('div', { className: 'import-dialog-section-title' }, 'Destination'),
+          React.createElement('div', { className: 'import-dest-options' }, options),
+          React.createElement('input', {
+            className: 'import-dest-input',
+            type: 'text',
+            value: dest,
+            placeholder: 'workspace root',
+            spellCheck: false,
+            autoComplete: 'off',
+            'aria-label': 'Destination folder',
+            onChange: function (e) { setDest(e.target.value); }
+          }),
+
+          React.createElement('div', { className: 'import-dialog-section-title' },
+            entries.length + ' file' + (entries.length === 1 ? '' : 's') +
+            (replacing > 0 ? ' — ' + replacing + ' will replace an existing file' : '')),
+          React.createElement(
+            'ul', { className: 'import-conflict-list' },
+            targets.map(function (t, i) {
+              return React.createElement(
+                'li', { key: t + '#' + i, title: t },
+                t,
+                existingFiles.has(t) && React.createElement(
+                  'span', { className: 'import-target-replaces' }, 'replaces')
+              );
+            })
+          )
+        )
+      ),
+      React.createElement(
+        'div', { className: 'import-conflict-actions' },
+        React.createElement('button', { className: 'import-conflict-btn', onClick: onCancel }, 'Cancel'),
+        React.createElement(
+          'button',
+          {
+            className: 'import-conflict-btn import-conflict-btn-primary',
+            disabled: entries.length === 0,
+            onClick: function () { onImport(entries, normalisedDest, picked); }
+          },
+          entries.length === 0 ? 'Upload' : 'Upload ' + entries.length + ' file' + (entries.length === 1 ? '' : 's')
+        )
+      )
+    )
+  );
+};
+
+// Expose globally for sprockets require
+window.ImportDialog = ImportDialog;