mbeditor 0.11.0 → 0.12.1

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

@@ -13,6 +13,10 @@ var _hamlLangRegistered = false;
 var _erbLangRegistered = false;
 var _jsErbLangRegistered = false;
 
+// Backend marker severity -> monaco.MarkerSeverity. Literals rather than a
+// reference to window.monaco, which does not exist when this file is parsed.
+var MARKER_SEVERITY = { hint: 1, info: 2, warning: 4, error: 8 };
+
 var EditorPanel = function EditorPanel(_ref) {
   var tab = _ref.tab;
   var paneId = _ref.paneId;
@@ -41,6 +45,22 @@ var EditorPanel = function EditorPanel(_ref) {
   var conflictBlocksRef = React.useRef([]);
   var aviBaseRef = useRef(0);
   var aviMaxRef = useRef(0);
+  // True while this file participates in collaborative editing (a live Yjs room).
+  // When set, the persistent-undo machinery (HistoryService + Phase-2 model swap)
+  // is suspended and undo is routed through the room's local Yjs UndoManager.
+  var collabActiveRef = useRef(false);
+
+  // Collaboration becomes available when a peer joins, which can be at any point
+  // in the session. This flips with that transition and is a dependency of the
+  // editor-creation effect below, so an already-open tab rebuilds and joins the
+  // room then — reusing the persistent model, exactly like reopening.
+  var _collabReadyState = useState(function () {
+    return typeof CollaborationService !== 'undefined' &&
+      typeof CollaborationService.isAvailable === 'function' &&
+      CollaborationService.isAvailable();
+  });
+  var collabReady = _collabReadyState[0];
+  var setCollabReady = _collabReadyState[1];
 
   var _conflictState = React.useState(0);
   var conflictCount = _conflictState[0];
@@ -189,6 +209,18 @@ var EditorPanel = function EditorPanel(_ref) {
     return null;
   };
 
+  // Watch for collaboration becoming available after the editor already mounted.
+  // Event-driven, not polled: a peer can join at any point in the session, so a
+  // bounded poll would either miss a late arrival or burn a timer per open tab
+  // forever. CollaborationService fires only on a real transition.
+  useEffect(function () {
+    if (typeof CollaborationService === 'undefined' ||
+        typeof CollaborationService.onAvailabilityChange !== 'function') return;
+    return CollaborationService.onAvailabilityChange(function (available) {
+      setCollabReady(available);
+    });
+  }, []);
+
   useEffect(function () {
     if (tab.isPreview) return;
     if (!monacoReady || !editorRef.current || !window.monaco) return;
@@ -560,7 +592,17 @@ var EditorPanel = function EditorPanel(_ref) {
       _modelEntry = window.__mbeditorModels[tab.path];
     }
 
-    if (typeof HistoryService !== 'undefined') {
+    // Collaboration: open the per-file Yjs room when cable is available and this
+    // is a real, editable file. When active, persistent-undo (HistoryService) and
+    // the Phase-2 background model-swap replay are suspended for this file — the
+    // model swap would detach a live binding and corrupt the shared document.
+    var _collabActive = typeof CollaborationService !== 'undefined' &&
+      !tab.truncated && !tab.fileNotFound &&
+      CollaborationService.isEnabledFor(tab.path) &&
+      CollaborationService.ensureRoom(tab.path);
+    collabActiveRef.current = _collabActive;
+
+    if (!_collabActive && typeof HistoryService !== 'undefined') {
       var _histBranch = EditorStore.getState().gitBranch || '';
       if (_histBranch) {
         if (_reusingModel) {
@@ -668,6 +710,30 @@ var EditorPanel = function EditorPanel(_ref) {
     // can identify which file they are operating on without needing React state.
     if (modelObj) modelObj._mbeditorPath = tab.path;
 
+    if (_collabActive) {
+      // Attach this editor to the file's Yjs room. onSeeded rebaselines the
+      // clean-state once the binding has set the model, so seeding / late-join
+      // does not spuriously mark the tab dirty.
+      CollaborationService.bindEditor(tab.path, editor, modelObj, {
+        onSeeded: function () {
+          var m = editor.getModel();
+          if (!m) return;
+          var v = m.getValue();
+          var avi = m.getAlternativeVersionId();
+          aviBaseRef.current = avi;
+          aviMaxRef.current = avi;
+          var _e = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+          if (_e) _e.cleanVersionId = avi;
+          latestContentRef.current = v;
+          lastAppliedExternalVersionRef.current = Math.max(
+            lastAppliedExternalVersionRef.current, tab.externalContentVersion || 0
+          );
+          EditorStore.setState({ canUndo: false, canRedo: false });
+          TabManager.markClean(paneId, tab.id, v);
+        }
+      });
+    }
+
     // Run only the test under the cursor. Registered as an editor action so it
     // gets a context-menu entry and a keybinding without another toolbar button;
     // the flask button stays whole-file.
@@ -683,15 +749,11 @@ var EditorPanel = function EditorPanel(_ref) {
       }
     });
 
-    var formatActionDisposable = editor.addAction({
-      id: 'mbeditor.formatDocument',
-      label: 'Format Document',
-      contextMenuGroupId: '1_modification',
-      contextMenuOrder: 1.5,
-      run: function() {
-        if (onFormatRef.current) onFormatRef.current();
-      }
-    });
+    // No custom "Format Document" action: Ruby now has a real formatting
+    // provider, so Monaco contributes that context-menu entry itself, and a
+    // second one of our own showed up as a duplicate. Languages with no
+    // provider keep reaching formatting through the toolbar button.
+    var formatActionDisposable = null;
 
     // Ctrl/Cmd+P → quick-open. Bound at the Monaco level (not just the window
     // listener) so the editor intercepts the key while it has focus; otherwise
@@ -701,6 +763,16 @@ var EditorPanel = function EditorPanel(_ref) {
       EditorStore.setState({ isQuickOpenVisible: true });
     });
 
+    // PageUp/PageDown cycle between the current cursor position and where the
+    // cursor was before the last jump (go-to-definition, search result, etc.),
+    // replacing the default page-scroll behaviour.
+    editor.addCommand(window.monaco.KeyCode.PageUp, function() {
+      TabManager.toggleJumpOrigin();
+    });
+    editor.addCommand(window.monaco.KeyCode.PageDown, function() {
+      TabManager.toggleJumpOrigin();
+    });
+
     var editorPluginDisposable = null;
     if (window.MbeditorEditorPlugins && window.MbeditorEditorPlugins.attachEditorFeatures) {
       editorPluginDisposable = window.MbeditorEditorPlugins.attachEditorFeatures(editor, language);
@@ -767,7 +839,7 @@ var EditorPanel = function EditorPanel(_ref) {
     // a listener left on the old model would silently stop tracking edits.
     var _attachContentListener = function (model) {
       return model.onDidChangeContent(function (e) {
-        if (typeof HistoryService !== 'undefined') {
+        if (!_collabActive && typeof HistoryService !== 'undefined') {
           HistoryService.recordOps(tab.path, e.changes);
         }
         var currentAvi = model.getAlternativeVersionId();
@@ -818,7 +890,7 @@ var EditorPanel = function EditorPanel(_ref) {
     // Phase 2: background undo-history replay.
     // Only run for newly-created models (reused models already have their undo stack).
     var _phase2CleanupFn = null;
-    if (!_reusingModel && typeof HistoryService !== 'undefined') {
+    if (!_collabActive && !_reusingModel && typeof HistoryService !== 'undefined') {
       var _phase2Branch  = EditorStore.getState().gitBranch || '';
       var _phase2Path    = tab.path;
       var _phase2Content = tab.content || '';
@@ -980,18 +1052,19 @@ var EditorPanel = function EditorPanel(_ref) {
         window.__mbeditorActiveEditor = null;
       }
       if (editorPluginDisposable) editorPluginDisposable.dispose();
-      formatActionDisposable.dispose();
+      if (formatActionDisposable) formatActionDisposable.dispose();
       runTestAtCursorDisposable.dispose();
       columnSelectDisposable.dispose();
       contentDisposable.dispose();
       EditorStore.setState({ canUndo: false, canRedo: false });
       if (_phase2CleanupFn) _phase2CleanupFn();
+      if (_collabActive) CollaborationService.unbindEditor(tab.path);
       // Detach the model before disposing the editor so the model (and its undo
       // history) survives for when the user returns to this tab.
       editor.setModel(null);
       editor.dispose();
     };
-  }, [tab.id, tab.isPreview, monacoReady]); // re-run on tab switch or when Monaco becomes ready
+  }, [tab.id, tab.isPreview, monacoReady, collabReady]); // re-run on tab switch, when Monaco becomes ready, or when collaboration becomes available
 
   // Listen for external content changes (e.g. after Format/Load)
   // Only applies when externalContentVersion advances — prevents stale typing-originated
@@ -1003,6 +1076,14 @@ var EditorPanel = function EditorPanel(_ref) {
     var extVersion = tab.externalContentVersion || 0;
     if (extVersion <= lastAppliedExternalVersionRef.current) return;
 
+    // For a collaboration late-join the shared document is authoritative; applying
+    // the disk content would clobber it. Mark this version consumed and skip.
+    if (collabActiveRef.current && typeof CollaborationService !== 'undefined' &&
+        CollaborationService.consumesDiskLoad(tab.path)) {
+      lastAppliedExternalVersionRef.current = extVersion;
+      return;
+    }
+
     lastAppliedExternalVersionRef.current = extVersion;
     latestContentRef.current = tab.content; // keep ref in sync for onDidChangeContent closure
 
@@ -1232,16 +1313,25 @@ var EditorPanel = function EditorPanel(_ref) {
       var model = monacoRef.current.getModel();
       if (model) {
         var monacoMarkers = markers.map(function (m) {
-          var sev = m.severity === 'error'
-            ? window.monaco.MarkerSeverity.Error
-            : window.monaco.MarkerSeverity.Warning;
+          // Backend severities map 1:1 onto MarkerSeverity. Grading them
+          // properly is what stops RuboCop's convention offenses — the bulk of
+          // any lint run — from rendering as a wall of yellow warnings.
+          var sev = MARKER_SEVERITY[m.severity];
           return {
-            severity: sev,
+            severity: sev != null ? sev : window.monaco.MarkerSeverity.Warning,
             // RuboCop-sourced markers keep the 'rubocop' source so the quick-fix
         // code action provider offers a lightbulb; other sources (e.g. Prism
         // syntax errors from ruby-lsp) correctly get none.
         source: m.source || 'rubocop',
-            code: m.copName || '',
+            // An object code renders the cop name as a link to its docs page.
+            // Readers must cope with both shapes — see codeValue() in
+            // editor_plugins.js.
+            code: m.codeHref
+              ? { value: m.copName || '', target: window.monaco.Uri.parse(m.codeHref) }
+              : (m.copName || ''),
+            // Fades the range instead of squiggling it: dead code reads as
+            // absent rather than as a problem.
+            tags: m.unnecessary ? [window.monaco.MarkerTag.Unnecessary] : undefined,
             message: m.message,
             startLineNumber: m.startLine,
             startColumn: m.startCol,
@@ -1255,6 +1345,17 @@ var EditorPanel = function EditorPanel(_ref) {
         model._mbeditorCorrectableCops = new Set(
           markers.filter(function(m) { return m.correctable && m.copName; }).map(function(m) { return m.copName; })
         );
+        // ruby-lsp ships the complete edits for each fix inside the diagnostic,
+        // so the code-action provider can apply one without any request at all.
+        // They ride a side map rather than the marker because setModelMarkers
+        // normalises marker objects and drops unknown properties.
+        var fixes = {};
+        markers.forEach(function (m) {
+          if (m.fixes && m.fixes.length) {
+            fixes[MbeditorEditorPlugins.markerFixKey(m)] = m.fixes;
+          }
+        });
+        model._mbeditorFixes = fixes;
       }
     }
   }, [markers, tab.id]);

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

@@ -28,6 +28,7 @@ var FileTree = function FileTree(_ref) {
   var onNodeSelect = _ref.onNodeSelect;     // fn(node) — single select (also clears multi)
   var onMultiSelect = _ref.onMultiSelect;   // fn(Set<string>) — multi-select update
   var onMove = _ref.onMove;                 // fn(srcPaths[], destFolderPath) — DnD move
+  var onImportFiles = _ref.onImportFiles; // fn(entries[], destFolderPath, meta) — external file drop
   var gitFiles = _ref.gitFiles;
   var expandedDirs = _ref.expandedDirs;
   var onExpandedDirsChange = _ref.onExpandedDirsChange;
@@ -53,6 +54,14 @@ var FileTree = function FileTree(_ref) {
   var dragOverFolder = _useStateDnD2[0];
   var setDragOverFolder = _useStateDnD2[1];
 
+  // Target of an in-flight *external* drag: a folder path, '' for the tree
+  // root, or null when no external drag is over the tree. Kept separate from
+  // dragOverFolder so the two drop kinds highlight differently.
+  var _useStateExt = useState(null);
+  var _useStateExt2 = _slicedToArray(_useStateExt, 2);
+  var externalDragOver = _useStateExt2[0];
+  var setExternalDragOver = _useStateExt2[1];
+
   var inlineRef = useRef(null);
   var committedRef = useRef(false);
   var containerRef = useRef(null);
@@ -421,6 +430,71 @@ var FileTree = function FileTree(_ref) {
   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);
 
+  // collectEntries must be kicked off synchronously inside the drop handler —
+  // see the note in file_import.js.
+  var startExternalImport = function(dataTransfer, targetFolderPath) {
+    if (!onImportFiles) return;
+    FileImport.collectEntries(dataTransfer).then(function(res) {
+      if (res.entries.length > 0) onImportFiles(res.entries, targetFolderPath, res);
+    });
+  };
+
+  var isRowTarget = function(e) {
+    return !!(e.target && e.target.closest && e.target.closest('.tree-item'));
+  };
+
+  // The root drop zone is the whole scrollable panel, not just .file-tree-root.
+  // That element is only as tall as its rows, so on a short tree everything
+  // below the last row looks like the explorer but belongs to the scroll
+  // parent — dropping there did nothing, which is the "can't drop into the
+  // root area" report.
+  //
+  // Attached natively rather than through React because the panel is rendered
+  // by MbeditorApp, not here. React 17 delegates from its own root, which is
+  // an ancestor of this element, so these fire before any row handler and the
+  // isRowTarget guard — not stopPropagation — is what keeps rows in charge.
+  var externalImportRef = useRef(startExternalImport);
+  externalImportRef.current = startExternalImport;
+
+  useEffect(function() {
+    if (!containerRef.current) return;
+    var panel = containerRef.current.closest('.ide-sidebar-scrollable');
+    if (!panel) return;
+
+    var HIGHLIGHT = 'drag-over-external-root';
+    var accepts = function(e) {
+      return FileImport.hasExternalFiles(e.dataTransfer) && !isRowTarget(e);
+    };
+    var over = function(e) {
+      if (!accepts(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+      panel.classList.add(HIGHLIGHT);
+    };
+    var leave = function(e) {
+      if (e.relatedTarget && panel.contains(e.relatedTarget)) return;
+      panel.classList.remove(HIGHLIGHT);
+    };
+    var drop = function(e) {
+      panel.classList.remove(HIGHLIGHT);
+      if (!accepts(e)) return;
+      e.preventDefault();
+      externalImportRef.current(e.dataTransfer, '');
+    };
+
+    panel.addEventListener('dragenter', over);
+    panel.addEventListener('dragover', over);
+    panel.addEventListener('dragleave', leave);
+    panel.addEventListener('drop', drop);
+    return function() {
+      panel.classList.remove(HIGHLIGHT);
+      panel.removeEventListener('dragenter', over);
+      panel.removeEventListener('dragover', over);
+      panel.removeEventListener('dragleave', leave);
+      panel.removeEventListener('drop', drop);
+    };
+  }, []);
+
   var renderRow = function renderRow(item, idx) {
     var indentPx = 8 + item.depth * 12;
 
@@ -439,6 +513,7 @@ var FileTree = function FileTree(_ref) {
     var isOpenFile = activePath === node.path;
     var isSelected = !!(selectedPaths && selectedPaths.has(node.path));
     var isDragOver = isFolder && dragOverFolder === node.path;
+    var isDragOverExternal = isFolder && externalDragOver === node.path;
     var status = getGitStatus(node.path);
     var statusMeta = getTreeStatusMeta(status);
     var isModified = statusMeta && (statusMeta.cssKey === 'M' || statusMeta.cssKey === 'A');
@@ -447,7 +522,8 @@ var FileTree = function FileTree(_ref) {
       (isOpenFile ? ' active' : '') +
       (isSelected ? ' selected' : '') +
       (isModified ? ' modified' : '') +
-      (isDragOver ? ' drag-over' : '');
+      (isDragOver ? ' drag-over' : '') +
+      (isDragOverExternal ? ' drag-over-external' : '');
 
     return React.createElement(
       'div',
@@ -470,27 +546,60 @@ var FileTree = function FileTree(_ref) {
               e.dataTransfer.setData('text/plain', JSON.stringify(srcPaths));
               e.dataTransfer.effectAllowed = 'move';
             },
-            onDragOver: function(e) {
+            // An element only counts as a drop target if it cancels dragenter
+            // as well as dragover. Chrome is happy with dragover alone, but
+            // Firefox and Safari are not — without this the highlight appears
+            // (dragover still runs) while the browser refuses the drop, so
+            // nothing happens on release.
+            onDragEnter: function(e) {
               if (!isFolder) return;
               e.preventDefault();
               e.stopPropagation();
-              e.dataTransfer.dropEffect = 'move';
-              if (dragOverFolder !== node.path) setDragOverFolder(node.path);
             },
-            onDragLeave: function() {
+            onDragOver: function(e) {
+              var external = FileImport.hasExternalFiles(e.dataTransfer);
+              if (!isFolder) {
+                // Cancel the browser's default external-file action (usually
+                // navigating away to open the file) without accepting it.
+                if (external) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  e.dataTransfer.dropEffect = 'none';
+                }
+                return;
+              }
+              e.preventDefault();
+              e.stopPropagation();
+              e.dataTransfer.dropEffect = external ? 'copy' : 'move';
+              if (external) {
+                if (externalDragOver !== node.path) setExternalDragOver(node.path);
+                if (dragOverFolder !== null) setDragOverFolder(null);
+              } else if (dragOverFolder !== node.path) {
+                if (externalDragOver !== null) setExternalDragOver(null);
+                setDragOverFolder(node.path);
+              }
+            },
+            onDragLeave: function(e) {
+              if (e.currentTarget.contains(e.relatedTarget)) return;
               if (dragOverFolder === node.path) setDragOverFolder(null);
+              if (externalDragOver === node.path) setExternalDragOver(null);
             },
             onDrop: function(e) {
               e.preventDefault();
               e.stopPropagation();
               setDragOverFolder(null);
+              setExternalDragOver(null);
               if (!isFolder) return;
+              if (FileImport.hasExternalFiles(e.dataTransfer)) {
+                startExternalImport(e.dataTransfer, node.path);
+                return;
+              }
               try {
                 var srcPaths = JSON.parse(e.dataTransfer.getData('text/plain'));
                 if (onMove && srcPaths && srcPaths.length > 0) onMove(srcPaths, node.path);
               } catch (err) {}
             },
-            onDragEnd: function() { setDragOverFolder(null); },
+            onDragEnd: function() { setDragOverFolder(null); setExternalDragOver(null); },
             onClick: function(e) {
               if (e.ctrlKey || e.metaKey) {
                 if (onMultiSelect) {
@@ -568,7 +677,17 @@ var FileTree = function FileTree(_ref) {
 
   return React.createElement(
     'div',
-    { className: 'file-tree file-tree-root', ref: containerRef, tabIndex: 0, style: { outline: 'none', padding: 0 } },
+    {
+      className: 'file-tree file-tree-root',
+      ref: containerRef,
+      tabIndex: 0,
+      // No root drag handlers here. This element is only as tall as its rows,
+      // so it can't cover the empty space users actually aim at; the whole
+      // scrollable panel handles the root drop instead (see the effect above).
+      // A copy here too would import twice — the panel's native listener and
+      // this React one would both fire for a single drop.
+      style: { outline: 'none', padding: 0 }
+    },
     React.createElement(
       'div',
       { style: { height: totalHeight, position: 'relative' } },
@@ -595,4 +714,4 @@ var FileTreeMemo = React.memo(FileTree, function(prev, next) {
 });
 
 // Expose globally for sprockets require
-window.FileTree = FileTreeMemo;
+window.FileTree = FileTreeMemo;

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

@@ -47,6 +47,9 @@ var GitPanel = function GitPanel(_ref) {
   unpushedCommits.forEach(function (c) { if (c && c.hash) localHashes[c.hash] = true; });
 
   var branchBaseRef    = gitInfo && gitInfo.branchBaseRef;
+  // The exact baseline unpushedFiles was computed against — a merge-base sha,
+  // or the upstream when this branch is itself a base branch.
+  var branchBaseSha    = gitInfo && gitInfo.branchBaseSha;
   var rawBranchCommits = gitInfo && gitInfo.branchCommits || [];
   var branchCommits = rawBranchCommits.map(function (c) {
     return Object.assign({}, c, { isLocal: !!localHashes[c.hash] });
@@ -469,13 +472,19 @@ var GitPanel = function GitPanel(_ref) {
           ? React.createElement('div', { className: 'git-hint' }, 'Compared to ', React.createElement('code', null, branchBaseRef))
           : upstreamBranch
             ? React.createElement('div', { className: 'git-hint' }, 'All files changed vs ', React.createElement('code', null, upstreamBranch))
-            : React.createElement('div', { className: 'git-hint' }, 'No upstream branch tracked.'),
+            : React.createElement('div', { className: 'git-hint git-hint-warn' },
+                'No base branch found to compare against — fetch develop, or set base_branch_candidates.'),
         React.createElement(
           'div',
           { className: 'git-list' },
           unpushedFiles.length === 0
-            ? React.createElement('div', { className: 'git-empty' }, 'No changes vs upstream.')
-            : unpushedFiles.map(function (item) { return renderFileRow(item, upstreamBranch, 'HEAD', true); })
+            ? React.createElement('div', { className: 'git-empty' },
+                branchBaseRef ? 'No changes vs ' + branchBaseRef + '.' : 'No changes vs upstream.')
+            // branchBaseSha, not upstreamBranch: the row must diff against the
+            // same baseline the list was built from, or a file listed as
+            // changed vs develop opens a diff of the branch against itself and
+            // shows nothing.
+            : unpushedFiles.map(function (item) { return renderFileRow(item, branchBaseSha || upstreamBranch, 'HEAD', true); })
         )
       )
     ),

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

@@ -0,0 +1,127 @@
+'use strict';
+
+// Shown when an external import lands on paths that already exist. Offers
+// batch-level resolutions only — per-file toggles were left out deliberately
+// so the three-way choice stays legible. Escape and click-outside both mean
+// skip, which is the non-destructive option.
+//
+// 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);
+
+  React.useEffect(function () {
+    var previouslyFocused = document.activeElement;
+    var modal = modalRef.current;
+    var focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    var initialFocusable = modal && modal.querySelector(focusableSelector);
+    if (initialFocusable) initialFocusable.focus();
+    else if (modal) modal.focus();
+
+    var onKey = function (e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onResolve('skip');
+        return;
+      }
+      if (e.key !== 'Tab' || !modal) return;
+
+      var focusable = modal.querySelectorAll(focusableSelector);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        modal.focus();
+        return;
+      }
+
+      var first = focusable[0];
+      var last = focusable[focusable.length - 1];
+      if (!modal.contains(document.activeElement)) {
+        e.preventDefault();
+        first.focus();
+      } else if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', onKey, true);
+    return function () {
+      document.removeEventListener('keydown', onKey, true);
+      if (previouslyFocused && previouslyFocused.focus && document.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [onResolve]);
+
+  var button = function (label, mode, className) {
+    return React.createElement(
+      'button',
+      { className: className, onClick: function () { onResolve(mode); } },
+      label
+    );
+  };
+
+  return React.createElement(
+    'div',
+    {
+      className: 'schema-modal-overlay',
+      onClick: function () { onResolve('skip'); }
+    },
+    React.createElement(
+      'div',
+      {
+        ref: modalRef,
+        className: 'schema-modal import-conflict-modal',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-label': 'Resolve import conflicts',
+        tabIndex: -1,
+        onClick: function (e) { e.stopPropagation(); }
+      },
+      React.createElement(
+        'div', { className: 'schema-modal-header' },
+        React.createElement(
+          'div', { className: 'schema-modal-title' },
+          conflicts.length + ' file' + (conflicts.length === 1 ? '' : 's') + ' already exist' +
+            (conflicts.length === 1 ? 's' : '')
+        )
+      ),
+      React.createElement(
+        'div', { className: 'schema-modal-body' },
+        React.createElement(
+          'ul', { className: 'import-conflict-list' },
+          conflicts.map(function (c) {
+            return React.createElement('li', { key: c.path, title: c.path }, c.path);
+          })
+        ),
+        errors.length > 0 && React.createElement(
+          'div', { className: 'import-conflict-errors' },
+          React.createElement('div', { className: 'import-conflict-errors-title' },
+            errors.length + ' file' + (errors.length === 1 ? '' : 's') + ' could not be imported'),
+          React.createElement(
+            'ul', { className: 'import-conflict-list' },
+            errors.map(function (e) {
+              return React.createElement('li', { key: e.path, title: e.path },
+                e.path + ' — ' + e.error);
+            })
+          )
+        )
+      ),
+      React.createElement(
+        'div', { className: 'import-conflict-actions' },
+        button('Skip', 'skip', 'import-conflict-btn'),
+        button('Keep both', 'rename', 'import-conflict-btn'),
+        button('Overwrite all', 'overwrite', 'import-conflict-btn import-conflict-btn-danger')
+      )
+    )
+  );
+};
+
+// Expose globally for sprockets require
+window.ImportConflictModal = ImportConflictModal;