mbeditor 0.3.8 → 0.4.0

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

@@ -24,6 +24,8 @@ var DEFAULT_EDITOR_PREFS = {
   theme: 'vs-dark',
   fontSize: 13,
   fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
+  lineHeight: 0,
+  letterSpacing: 0,
   tabSize: 4,
   insertSpaces: false,
   wordWrap: 'off',
@@ -32,6 +34,20 @@ var DEFAULT_EDITOR_PREFS = {
   scrollBeyondLastLine: false,
   minimap: false,
   bracketPairColorization: true,
+  renderLineHighlight: 'none',
+  cursorStyle: 'line',
+  cursorBlinking: 'blink',
+  folding: true,
+  smoothScrolling: false,
+  mouseWheelZoom: false,
+  autoClosingBrackets: 'always',
+  autoClosingQuotes: 'always',
+  autoIndent: 'full',
+  formatOnPaste: true,
+  formatOnType: true,
+  quickSuggestions: true,
+  wordBasedSuggestions: 'matchingDocuments',
+  acceptSuggestionOnEnter: 'on',
   autoRevealInExplorer: true,
   toolbarIconOnly: false,
   rubocopLintEnabled: true,
@@ -44,7 +60,8 @@ var DEFAULT_EDITOR_PREFS = {
   prettierBracketSpacing: true,
   vimMode: false,
   fileTreeTypeahead: true,
-  quickOpenShowFolders: false
+  quickOpenShowFolders: false,
+  tabDisplayMode: 'scroll'
 };
 
 var SidebarActionButton = function SidebarActionButton(_ref) {
@@ -170,20 +187,17 @@ var MbeditorApp = function MbeditorApp() {
   var searchHasMore = _useState33h2[0];
   var setSearchHasMore = _useState33h2[1];
 
-  var _useState33i = useState(false);
-  var _useState33i2 = _slicedToArray(_useState33i, 2);
-  var searchLoadingMore = _useState33i2[0];
-  var setSearchLoadingMore = _useState33i2[1];
+  var _useState33tc = useState(0);
+  var _useState33tc2 = _slicedToArray(_useState33tc, 2);
+  var searchTotalCount = _useState33tc2[0];
+  var setSearchTotalCount = _useState33tc2[1];
 
-  var searchOffsetRef = useRef(0);        // tracks next offset to load
-  var searchQueryRef  = useRef('');       // tracks query that produced current results
-  var searchResultsContainerRef = useRef(null);
-  var searchVirtStartRef = useRef(0);     // first visible item index (for virtual list)
+  var searchHasMoreRef      = useRef(false);
+  var searchOffsetRef       = useRef(0);
+  var searchLoadingMoreRef  = useRef(false);
 
-  var _useState33j = useState(0);
-  var _useState33j2 = _slicedToArray(_useState33j, 2);
-  var searchVirtStart = _useState33j2[0];
-  var setSearchVirtStart = _useState33j2[1];
+  var searchQueryRef = useRef('');
+  var searchResultsContainerRef = useRef(null);
 
   var _useState8 = useState("explorer");
 
@@ -404,6 +418,36 @@ var MbeditorApp = function MbeditorApp() {
   var prevGitBranchRef = useRef(null);
   var isSwitchingBranchRef = useRef(false);
 
+  // ── Draft backup helpers ─────────────────────────────────────────────────
+  var draftWriteTimerRef = useRef({});
+  var serverOnlineRef = useRef(true);
+
+  var _draftKey = function _draftKey(path) {
+    var base = typeof window.mbeditorBasePath === 'function' ? window.mbeditorBasePath() : '';
+    return 'mbeditor_draft\x00' + base + '\x00' + path;
+  };
+  var _saveDraftNow = function _saveDraftNow(path, content) {
+    try { localStorage.setItem(_draftKey(path), JSON.stringify({ content: content, ts: Date.now() })); } catch (e) {}
+  };
+  var _clearDraft = function _clearDraft(path) {
+    try { localStorage.removeItem(_draftKey(path)); } catch (e) {}
+  };
+  var _loadDraft = function _loadDraft(path) {
+    try { return JSON.parse(localStorage.getItem(_draftKey(path))); } catch (e) { return null; }
+  };
+  var _scheduleDraftWrite = function _scheduleDraftWrite(path, content) {
+    if (draftWriteTimerRef.current[path]) clearTimeout(draftWriteTimerRef.current[path]);
+    draftWriteTimerRef.current[path] = setTimeout(function () {
+      delete draftWriteTimerRef.current[path];
+      _saveDraftNow(path, content);
+    }, 500);
+  };
+
+  var _useState_dro = useState(null);
+  var _useState_dro2 = _slicedToArray(_useState_dro, 2);
+  var draftRestoreOffer = _useState_dro2[0];
+  var setDraftRestoreOffer = _useState_dro2[1];
+
   var clamp = function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
   };
@@ -924,6 +968,28 @@ var MbeditorApp = function MbeditorApp() {
     return function () { clearTimeout(timeoutId); };
   }, []);
 
+  // On reconnect: scan open dirty tabs for newer localStorage drafts and offer restore.
+  useEffect(function () {
+    if (!serverOnline) {
+      serverOnlineRef.current = false;
+      return;
+    }
+    if (serverOnlineRef.current) return; // was already online — no transition
+    serverOnlineRef.current = true;
+    var st = EditorStore.getState();
+    var offers = [];
+    st.panes.forEach(function (pane) {
+      pane.tabs.forEach(function (tab) {
+        if (!tab.dirty || !tab.path || tab.path.startsWith('mbeditor://')) return;
+        var draft = _loadDraft(tab.path);
+        if (draft && draft.content !== tab.content) {
+          offers.push({ paneId: pane.id, tabId: tab.id, path: tab.path, name: tab.name, draftContent: draft.content });
+        }
+      });
+    });
+    if (offers.length > 0) setDraftRestoreOffer(offers);
+  }, [serverOnline]);
+
   // Auto-refresh the file tree every 10s to pick up external changes (new files, deletions, etc.)
   // Uses functional setTreeData to skip the re-render when nothing has changed.
   useEffect(function () {
@@ -1235,6 +1301,7 @@ var MbeditorApp = function MbeditorApp() {
       });
       EditorStore.setState({ panes: newPanes });
       EditorStore.setStatus("Saved", "success");
+      _clearDraft(tab.path);
       
       // Hot reload for Markdown: sync preview tab after save
       if (/\.(md|markdown)$/i.test(tab.path)) {
@@ -1289,16 +1356,21 @@ var MbeditorApp = function MbeditorApp() {
     var pane2 = EditorStore.getState().panes.find(function (p) {
       return p.id === 2;
     });
-    if (!pane2 || pane2.tabs.length === 0) {
-      dragSplitWidthRef.current = 50;
-      setPane1Width(50);
-    } else {
-      dragSplitWidthRef.current = pane1Width;
-    }
+    var alreadySplit = pane2 && pane2.tabs.length > 0;
+    // Only set the split ref; do NOT pre-split the view width here.
+    // Pane 2 appears as a drop zone only when the cursor actually hovers
+    // over the right-half editor content, keeping the tab bar intact.
+    dragSplitWidthRef.current = alreadySplit ? pane1Width : 50;
     setDraggedTab({ sourcePaneId: sourcePaneId, tabId: tabId });
   };
 
   var clearDragState = function clearDragState() {
+    // If pane 2 is still empty after the drag, restore pane 1 to full width.
+    var pane2 = EditorStore.getState().panes.find(function (p) { return p.id === 2; });
+    if (!pane2 || pane2.tabs.length === 0) {
+      setPane1Width(100);
+      dragSplitWidthRef.current = 50;
+    }
     setDraggedTab(null);
     setDragOverPaneId(null);
   };
@@ -1481,40 +1553,61 @@ var MbeditorApp = function MbeditorApp() {
   var onFormatRef = useRef(handleFormat);
   onFormatRef.current = handleFormat;
 
+  // Eagerly load all remaining pages sequentially in the background.
+  // Self-chains via .then() so only one request is in-flight at a time.
+  // Uses only refs so it's safe to call from async callbacks without
+  // worrying about stale closure state.
   var _debouncedSearch = useRef(window._.debounce(function (q) {
     if (!q.trim()) {
       searchRequestIdRef.current += 1;
       setSearchLoading(false);
-      setSearchHasMore(false);
+      setSearchHasMore(false); searchHasMoreRef.current = false;
+      setSearchTotalCount(0);
       searchOffsetRef.current = 0;
+      searchLoadingMoreRef.current = false;
       searchQueryRef.current = '';
       EditorStore.setState({ searchResults: [], searchHasMore: false });
       return;
     }
     var requestId = ++searchRequestIdRef.current;
     setSearchLoading(true);
-    setSearchHasMore(false);
+    setSearchHasMore(false); searchHasMoreRef.current = false;
+    setSearchTotalCount(0);
     searchOffsetRef.current = 0;
+    searchLoadingMoreRef.current = false;
     searchQueryRef.current = q;
-    setSearchVirtStart(0);
-    searchVirtStartRef.current = 0;
     EditorStore.setState({ searchResults: [], searchHasMore: false });
     EditorStore.setStatus("Searching project...", "info");
     SearchService.projectSearch(q, 0, SearchService.PAGE_SIZE).then(function (res) {
-      if (searchRequestIdRef.current === requestId) {
-        var hasMore = !!(res && res.hasMore);
-        setSearchHasMore(hasMore);
-        searchOffsetRef.current = SearchService.PAGE_SIZE;
-        var count = res && res.results ? res.results.length : 0;
-        EditorStore.setStatus("Found " + count + (hasMore ? '+' : '') + " result" + (count !== 1 ? "s" : ""), "success");
-      }
+      if (searchRequestIdRef.current !== requestId) return;
+      var hasMore = !!(res && res.hasMore);
+      setSearchHasMore(hasMore); searchHasMoreRef.current = hasMore;
+      searchOffsetRef.current = SearchService.PAGE_SIZE;
+      if (res && res.totalCount != null) setSearchTotalCount(res.totalCount);
+      var total = (res && res.totalCount != null) ? res.totalCount : (res && res.results ? res.results.length : 0);
+      EditorStore.setStatus("Found " + total + (hasMore ? '+' : '') + " result" + (total !== 1 ? "s" : ""), "success");
     }).finally(function () {
-      if (searchRequestIdRef.current === requestId) {
-        setSearchLoading(false);
-      }
+      if (searchRequestIdRef.current === requestId) setSearchLoading(false);
     });
   }, 400)).current;
 
+  var loadMoreSearchResults = function loadMoreSearchResults() {
+    var q = searchQueryRef.current;
+    if (!q || searchLoadingMoreRef.current || !searchHasMoreRef.current) return;
+    searchLoadingMoreRef.current = true;
+    var offset = searchOffsetRef.current;
+    SearchService.projectSearch(q, offset, SearchService.PAGE_SIZE).then(function(res) {
+      if (searchQueryRef.current !== q) { searchLoadingMoreRef.current = false; return; }
+      var hasMore = !!(res && res.hasMore);
+      searchHasMoreRef.current = hasMore;
+      setSearchHasMore(hasMore);
+      searchOffsetRef.current = offset + SearchService.PAGE_SIZE;
+      searchLoadingMoreRef.current = false;
+    }).catch(function() {
+      searchLoadingMoreRef.current = false;
+    });
+  };
+
   var handleSearchChange = function handleSearchChange(e) {
     var val = e.target.value;
     if (!val) { clearSearch(); return; }
@@ -1527,12 +1620,11 @@ var MbeditorApp = function MbeditorApp() {
     if (_debouncedSearch.cancel) _debouncedSearch.cancel();
     setSearchQuery("");
     setSearchLoading(false);
-    setSearchHasMore(false);
-    setSearchLoadingMore(false);
+    setSearchHasMore(false); searchHasMoreRef.current = false;
+    setSearchTotalCount(0);
     searchOffsetRef.current = 0;
+    searchLoadingMoreRef.current = false;
     searchQueryRef.current = '';
-    setSearchVirtStart(0);
-    searchVirtStartRef.current = 0;
     EditorStore.setState({ searchResults: [], searchHasMore: false });
   };
 
@@ -1541,35 +1633,11 @@ var MbeditorApp = function MbeditorApp() {
     _debouncedSearch(searchQuery);
   };
 
-  var loadMoreSearchResults = function loadMoreSearchResults() {
-    var q = searchQueryRef.current;
-    if (!q || searchLoadingMore || !searchHasMore) return;
-    var offset = searchOffsetRef.current;
-    setSearchLoadingMore(true);
-    SearchService.projectSearch(q, offset, SearchService.PAGE_SIZE).then(function (res) {
-      var hasMore = !!(res && res.hasMore);
-      setSearchHasMore(hasMore);
-      searchOffsetRef.current = offset + SearchService.PAGE_SIZE;
-    }).finally(function () {
-      setSearchLoadingMore(false);
-    });
-  };
-
-  // Scroll handler for the virtualized search results list.
-  var SEARCH_ITEM_H = 40;
-  var SEARCH_OVERSCAN = 8;
+  // Load more results when the user scrolls near the bottom of the list.
   var handleSearchResultsScroll = function handleSearchResultsScroll(e) {
     var el = e.currentTarget;
-    var newStart = Math.floor(el.scrollTop / SEARCH_ITEM_H);
-    if (Math.abs(newStart - searchVirtStartRef.current) >= 4) {
-      searchVirtStartRef.current = newStart;
-      setSearchVirtStart(newStart);
-    }
-    // Trigger load-more when within 200px of the bottom
-    if (!searchLoadingMore && searchHasMore) {
-      if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
-        loadMoreSearchResults();
-      }
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
+      loadMoreSearchResults();
     }
   };
 
@@ -2053,6 +2121,7 @@ var MbeditorApp = function MbeditorApp() {
       tabs: tabs,
       activeId: activeId,
       paneId: paneId,
+      tabDisplayMode: editorPrefs.tabDisplayMode || 'scroll',
       onSelect: function (id) {
         // Sync explorer selection with the newly active tab so there's only one highlight
         var tab = tabs.find(function(t) { return t.id === id; });
@@ -2523,88 +2592,58 @@ var MbeditorApp = function MbeditorApp() {
               React.createElement("i", { className: searchLoading ? "fas fa-spinner fa-spin" : "fas fa-search" })
             )
           ),
-          React.createElement(
-            "div",
-            {
-              className: "search-results",
-              ref: searchResultsContainerRef,
-              onScroll: handleSearchResultsScroll
-            },
-            (function() {
-              var allResults = state.searchResults || [];
-              var totalCount = allResults.length;
+          (function() {
+            var allResults  = state.searchResults || [];
+            var loadedCount = allResults.length;
+            var total       = searchTotalCount > 0 ? searchTotalCount : loadedCount;
+            var hasAny      = loadedCount > 0;
 
-              if (searchQuery && totalCount === 0 && !searchLoading) {
-                return React.createElement(
-                  "div", { className: "search-results-empty" }, "No results"
-                );
-              }
-
-              if (totalCount === 0) return null;
-
-              // Compute virtual window
-              var containerEl = searchResultsContainerRef.current;
-              var containerH = containerEl ? containerEl.clientHeight : 400;
-              var visibleCount = Math.ceil(containerH / SEARCH_ITEM_H) + SEARCH_OVERSCAN * 2;
-              var virtStart = Math.max(0, searchVirtStart - SEARCH_OVERSCAN);
-              var virtEnd   = Math.min(totalCount, virtStart + visibleCount);
-              var paddingTop    = virtStart * SEARCH_ITEM_H;
-              var paddingBottom = Math.max(0, (totalCount - virtEnd) * SEARCH_ITEM_H);
-
-              var visibleItems = allResults.slice(virtStart, virtEnd).map(function(res, idx) {
-                var absoluteIdx = virtStart + idx;
-                var fileName = res.file.split('/').pop();
-                return React.createElement(
-                  "div",
-                  {
-                    key: absoluteIdx,
-                    className: "search-result-item",
-                    onClick: function() { handleSelectFile(res.file, res.file.split('/').pop(), res.line); }
-                  },
-                  React.createElement("i", { className: (window.getFileIcon ? window.getFileIcon(fileName) : 'far fa-file-code') + " search-result-icon" }),
-                  React.createElement(
+            return React.createElement(
+              React.Fragment,
+              null,
+              searchQuery && !searchLoading && React.createElement(
+                "div",
+                { className: "search-results-header" },
+                hasAny
+                  ? (total + (searchHasMore ? '+' : '') + " result" + (total !== 1 ? "s" : ""))
+                  : "No results"
+              ),
+              hasAny && React.createElement(
+                "div",
+                {
+                  className: "search-results",
+                  ref: searchResultsContainerRef,
+                  onScroll: handleSearchResultsScroll
+                },
+                allResults.map(function(res, i) {
+                  var fileName = res.file.split('/').pop();
+                  return React.createElement(
                     "div",
-                    { className: "search-result-body" },
+                    {
+                      key: i,
+                      className: "search-result-item",
+                      onClick: (function(r) { return function() { handleSelectFile(r.file, r.file.split('/').pop(), r.line); }; })(res)
+                    },
+                    React.createElement("i", { className: (window.getFileIcon ? window.getFileIcon(fileName) : 'far fa-file-code') + " search-result-icon" }),
                     React.createElement(
-                      "div",
-                      { className: "search-result-file" },
-                      fileName,
+                      "div", { className: "search-result-body" },
                       React.createElement(
-                        "span",
-                        { className: "search-result-line-num" },
-                        " ", res.file, ":", res.line
-                      )
-                    ),
-                    React.createElement(
-                      "div",
-                      { className: "search-result-text" },
-                      res.text
+                        "div", { className: "search-result-file" },
+                        fileName,
+                        React.createElement("span", { className: "search-result-line-num" }, " ", res.file, ":", res.line)
+                      ),
+                      React.createElement("div", { className: "search-result-text" }, res.text)
                     )
-                  )
-                );
-              });
-
-              return React.createElement(
-                React.Fragment,
-                null,
-                React.createElement(
-                  "div",
-                  { className: "search-results-meta" },
-                  totalCount,
-                  " result" + (totalCount !== 1 ? "s" : ""),
-                  searchHasMore && React.createElement("span", { className: "search-results-capped" }, " — more available, scroll for next page")
-                ),
-                React.createElement("div", { style: { height: paddingTop + 'px', flexShrink: 0 } }),
-                visibleItems,
-                React.createElement("div", { style: { height: paddingBottom + 'px', flexShrink: 0 } }),
-                searchLoadingMore && React.createElement(
-                  "div",
-                  { className: "search-results-loading-more", 'aria-busy': 'true' },
-                  'Loading more…'
+                  );
+                }),
+                searchHasMore && React.createElement(
+                  "div", { className: "search-loading-more" },
+                  React.createElement("i", { className: "fas fa-spinner fa-spin" }),
+                  " Loading more\u2026"
                 )
-              );
-            })()
-          )
+              )
+            );
+          })()
         )
       )
     ),
@@ -2625,16 +2664,40 @@ var MbeditorApp = function MbeditorApp() {
             if (!draggedTab) return;
             e.preventDefault();
 
+            // If the cursor is over the tab bar, suppress the cross-pane split overlay
+            // so same-pane tab reordering within any tab bar is unaffected.
+            if (e.target && e.target.closest && e.target.closest('.tab-bar')) {
+              if (dragOverPaneId !== null) setDragOverPaneId(null);
+              e.dataTransfer.dropEffect = 'move';
+              return;
+            }
+
             var rect = e.currentTarget.getBoundingClientRect();
             var splitAtX = rect.left + rect.width * (dragSplitWidthRef.current / 100);
             var hoverPaneId = e.clientX >= splitAtX ? 2 : 1;
             var nextDropPane = hoverPaneId === draggedTab.sourcePaneId ? null : hoverPaneId;
 
-            e.dataTransfer.dropEffect = nextDropPane ? 'move' : 'none';
+            // When cursor first enters the right-half content area and pane 2 is empty,
+            // apply the 50% split width so the drop zone becomes visible.
+            if (nextDropPane === 2) {
+              var pane2Empty = EditorStore.getState().panes.find(function(p) { return p.id === 2; });
+              if (!pane2Empty || pane2Empty.tabs.length === 0) {
+                setPane1Width(50);
+              }
+            }
+
+            e.dataTransfer.dropEffect = 'move';
             if (dragOverPaneId !== nextDropPane) setDragOverPaneId(nextDropPane);
           },
           onDropCapture: function (e) {
             if (!draggedTab) return;
+
+            // If dropping onto a tab bar element, let the tab item's own onDrop
+            // bubble-phase handler manage the reorder — don't intercept here.
+            if (e.target && e.target.closest && e.target.closest('.tab-bar')) {
+              return;
+            }
+
             e.preventDefault();
 
             var rect = e.currentTarget.getBoundingClientRect();
@@ -2649,10 +2712,12 @@ var MbeditorApp = function MbeditorApp() {
           }
         },
         state.panes.map(function (pane, idx) {
-          if (pane.id === 2 && pane.tabs.length === 0 && !draggedTab) return null; // Show pane 2 while dragging to allow drop-to-split
+          // Show empty pane 2 as a drop zone only when the cursor is actively hovering
+          // over its half of the editor content (dragOverPaneId === 2).
+          if (pane.id === 2 && pane.tabs.length === 0 && dragOverPaneId !== 2) return null;
 
           // Dynamic width distribution
-          var isSplit = state.panes[1].tabs.length > 0 || !!draggedTab;
+          var isSplit = state.panes[1].tabs.length > 0 || dragOverPaneId === 2;
           var flexBasis = '100%';
           if (isSplit) flexBasis = pane.id === 1 ? pane1Width + "%" : 100 - pane1Width + "%";
 
@@ -2735,6 +2800,32 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { fontFamily: e.target.value }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Row height in pixels. 0 = auto (roughly font size × 1.5)' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Line height (0=auto)'),
+                      React.createElement('input', {
+                        type: 'number', min: '0', max: '100', step: '1',
+                        className: 'ide-settings-input',
+                        value: editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0,
+                        onChange: function(e) {
+                          var v = parseInt(e.target.value, 10);
+                          if (!isNaN(v) && v >= 0 && v <= 100) setEditorPrefs(function(p) { return Object.assign({}, p, { lineHeight: v }); });
+                        }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Extra space between characters in pixels. 0 = default' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Letter spacing (px)'),
+                      React.createElement('input', {
+                        type: 'number', min: '-5', max: '20', step: '0.5',
+                        className: 'ide-settings-input',
+                        value: editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0,
+                        onChange: function(e) {
+                          var v = parseFloat(e.target.value);
+                          if (!isNaN(v) && v >= -5 && v <= 20) setEditorPrefs(function(p) { return Object.assign({}, p, { letterSpacing: v }); });
+                        }
+                      })
+                    ),
 
                     /* ── Indentation (unified editor + Prettier) ── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Indentation'),
@@ -2844,6 +2935,184 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { vimMode: v }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'When to insert a matching closing bracket automatically' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto-close brackets'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.autoClosingBrackets || 'always',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoClosingBrackets: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'always' }, 'Always'),
+                        React.createElement('option', { value: 'languageDefined' }, 'Per language rules'),
+                        React.createElement('option', { value: 'beforeWhitespace' }, 'Only before whitespace'),
+                        React.createElement('option', { value: 'never' }, 'Never')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'When to insert a matching closing quote automatically' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto-close quotes'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.autoClosingQuotes || 'always',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoClosingQuotes: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'always' }, 'Always'),
+                        React.createElement('option', { value: 'languageDefined' }, 'Per language rules'),
+                        React.createElement('option', { value: 'beforeWhitespace' }, 'Only before whitespace'),
+                        React.createElement('option', { value: 'never' }, 'Never')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'What to highlight on the current editor line' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Line highlight'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.renderLineHighlight || 'none',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { renderLineHighlight: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'none' }, 'None'),
+                        React.createElement('option', { value: 'gutter' }, 'Line number only'),
+                        React.createElement('option', { value: 'line' }, 'Current line background'),
+                        React.createElement('option', { value: 'all' }, 'Line number + background')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Cursor style'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.cursorStyle || 'line',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { cursorStyle: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'line' }, 'Line (|)'),
+                        React.createElement('option', { value: 'block' }, 'Block (filled)'),
+                        React.createElement('option', { value: 'underline' }, 'Underline (_)'),
+                        React.createElement('option', { value: 'line-thin' }, 'Line thin'),
+                        React.createElement('option', { value: 'block-outline' }, 'Block outline'),
+                        React.createElement('option', { value: 'underline-thin' }, 'Underline thin')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Cursor blinking'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.cursorBlinking || 'blink',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { cursorBlinking: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'blink' }, 'Blink (on/off)'),
+                        React.createElement('option', { value: 'smooth' }, 'Smooth (fade)'),
+                        React.createElement('option', { value: 'phase' }, 'Phase (offset fade)'),
+                        React.createElement('option', { value: 'expand' }, 'Expand (grow/shrink)'),
+                        React.createElement('option', { value: 'solid' }, 'Solid (no blink)')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show collapse arrows next to foldable regions (functions, classes, blocks)' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Code folding'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.folding !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { folding: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Animate scrolling instead of jumping instantly' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Smooth scrolling'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.smoothScrolling),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { smoothScrolling: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Hold Ctrl (or Cmd) and scroll the mouse wheel to zoom the font size' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Ctrl+scroll to zoom'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.mouseWheelZoom),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { mouseWheelZoom: v }); }); }
+                      })
+                    ),
+
+                    /* ── Behaviour ───────────────────────────────── */
+                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Behaviour'),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'How aggressively the editor re-indents lines as you type' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto indent'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.autoIndent || 'full',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoIndent: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'none' }, 'None (disabled)'),
+                        React.createElement('option', { value: 'keep' }, 'Keep current level'),
+                        React.createElement('option', { value: 'brackets' }, 'Indent on { and ['),
+                        React.createElement('option', { value: 'advanced' }, 'Language indent rules'),
+                        React.createElement('option', { value: 'full' }, 'Full (language grammar)')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Whether pressing Enter accepts the highlighted autocomplete suggestion' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Accept suggestion on Enter'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.acceptSuggestionOnEnter || 'on',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { acceptSuggestionOnEnter: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'on' }, 'Always'),
+                        React.createElement('option', { value: 'smart' }, 'Only when navigated (↑↓)'),
+                        React.createElement('option', { value: 'off' }, 'Never (Tab only)')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Suggest completions based on words already present in open files' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Word-based suggestions'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { wordBasedSuggestions: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'off' }, 'Off'),
+                        React.createElement('option', { value: 'currentDocument' }, 'Current file only'),
+                        React.createElement('option', { value: 'matchingDocuments' }, 'Same language files'),
+                        React.createElement('option', { value: 'allDocuments' }, 'All open files')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Auto-format pasted code using the language formatter' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Format on paste'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.formatOnPaste !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { formatOnPaste: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Re-indent and auto-close blocks as you type (e.g. after pressing Enter inside {})' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Format on type'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.formatOnType !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { formatOnType: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show autocomplete suggestions while typing (not just on trigger characters like .)' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Quick suggestions'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.quickSuggestions !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { quickSuggestions: v }); }); }
+                      })
+                    ),
 
                     /* ── Formatting (Prettier) ───────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Formatting'),
@@ -2926,6 +3195,18 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { fileTreeTypeahead: v }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Tab bar layout'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.tabDisplayMode || 'scroll',
+                          onChange: function(e) { var v = e.target.value; setEditorPrefs(function(p) { return Object.assign({}, p, { tabDisplayMode: v }); }); }
+                        },
+                        React.createElement('option', { value: 'scroll' }, 'Scroll'),
+                        React.createElement('option', { value: 'wrap' }, 'Wrap (multi-row)')
+                      )
+                    ),
                     React.createElement(
                       'label', { className: 'ide-settings-row ide-settings-row-check' },
                       React.createElement('span', { className: 'ide-settings-label' }, 'Quick Open: show folders'),
@@ -3023,8 +3304,10 @@ var MbeditorApp = function MbeditorApp() {
                     var valNorm = val.replace(/\r\n/g, '\n');
                     if (valNorm === cleanNorm) {
                       TabManager.markClean(pane.id, pActiveTab.id, val);
+                      _clearDraft(pActiveTab.path);
                     } else {
                       TabManager.markDirty(pane.id, pActiveTab.id, val);
+                      _scheduleDraftWrite(pActiveTab.path, val);
                     }
                   }
                 });
@@ -3226,12 +3509,22 @@ var MbeditorApp = function MbeditorApp() {
           state.gitInfo.behind
         )
       ),
-      !serverOnline && React.createElement(
-        "div",
-        { className: "statusbar-offline" },
-        React.createElement("i", { className: "fas fa-exclamation-triangle" }),
-        " Server offline"
-      ),
+      !serverOnline && (function () {
+        var dirtyCount = state.panes.reduce(function (acc, p) {
+          return acc + p.tabs.filter(function (t) { return t.dirty; }).length;
+        }, 0);
+        return React.createElement(
+          "div",
+          {
+            className: "statusbar-offline",
+            title: dirtyCount > 0 ? dirtyCount + " unsaved file" + (dirtyCount !== 1 ? "s" : "") + " — changes are backed up locally" : "Server offline"
+          },
+          React.createElement("i", { className: "fas fa-exclamation-triangle" }),
+          dirtyCount > 0
+            ? " Offline \u2014 " + dirtyCount + " unsaved"
+            : " Server offline"
+        );
+      })(),
       activeFileCommit && React.createElement(
         "div",
         { className: "statusbar-file-commit", title: activeFileCommit.title + " — " + activeFileCommit.author },
@@ -3366,6 +3659,63 @@ var MbeditorApp = function MbeditorApp() {
       onSelectFolder: handleOpenFolderInExplorer,
       onClose: function () { return setQuickOpen(false); }
     }),
+    draftRestoreOffer && React.createElement(
+      "div",
+      {
+        className: "ide-draft-restore-overlay",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Restore unsaved drafts"
+      },
+      React.createElement(
+        "div",
+        { className: "ide-draft-restore-dialog" },
+        React.createElement("div", { className: "ide-draft-restore-title" },
+          React.createElement("i", { className: "fas fa-save", style: { marginRight: 8 } }),
+          "Unsaved drafts found"
+        ),
+        React.createElement("div", { className: "ide-draft-restore-body" },
+          draftRestoreOffer.length + " file" + (draftRestoreOffer.length !== 1 ? "s have" : " has") + " locally backed-up drafts from when the server was offline:"
+        ),
+        React.createElement(
+          "ul",
+          { className: "ide-draft-restore-list" },
+          draftRestoreOffer.map(function (o) {
+            return React.createElement("li", { key: o.path }, o.name || o.path);
+          })
+        ),
+        React.createElement(
+          "div",
+          { className: "ide-draft-restore-actions" },
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-draft-restore-btn ide-draft-restore-btn-primary",
+              onClick: function () {
+                draftRestoreOffer.forEach(function (offer) {
+                  TabManager.markDirty(offer.paneId, offer.tabId, offer.draftContent);
+                });
+                setDraftRestoreOffer(null);
+              }
+            },
+            "Restore all"
+          ),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-draft-restore-btn",
+              onClick: function () {
+                draftRestoreOffer.forEach(function (offer) { _clearDraft(offer.path); });
+                setDraftRestoreOffer(null);
+              }
+            },
+            "Discard drafts"
+          )
+        )
+      )
+    ),
     contextMenu && React.createElement(
       React.Fragment,
       null,