mbeditor 0.4.4 → 0.5.0

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

@@ -62,7 +62,8 @@ var DEFAULT_EDITOR_PREFS = {
   fileTreeTypeahead: true,
   quickOpenShowFolders: false,
   tabDisplayMode: 'scroll',
-  persistFindState: true
+  persistFindState: true,
+  showDotFiles: false
 };
 
 var SidebarActionButton = function SidebarActionButton(_ref) {
@@ -218,6 +219,21 @@ var MbeditorApp = function MbeditorApp() {
   var searchWholeWordRef = useRef(false);
   var searchResultsContainerRef = useRef(null);
 
+  var _useStateRM = useState(false);
+  var _useStateRM2 = _slicedToArray(_useStateRM, 2);
+  var replaceMode = _useStateRM2[0];
+  var setReplaceMode = _useStateRM2[1];
+
+  var _useStateRQ = useState('');
+  var _useStateRQ2 = _slicedToArray(_useStateRQ, 2);
+  var replaceQuery = _useStateRQ2[0];
+  var setReplaceQuery = _useStateRQ2[1];
+
+  var _useStateRL = useState(false);
+  var _useStateRL2 = _slicedToArray(_useStateRL, 2);
+  var replaceLoading = _useStateRL2[0];
+  var setReplaceLoading = _useStateRL2[1];
+
   var _useState8 = useState("explorer");
 
   var _useState82 = _slicedToArray(_useState8, 2);
@@ -432,10 +448,16 @@ var MbeditorApp = function MbeditorApp() {
   var contextMenu = _useState232[0];
   var setContextMenu = _useState232[1];
 
+  var _useState24 = useState(140);
+  var _useState242 = _slicedToArray(_useState24, 2);
+  var openEditorsHeight = _useState242[0];
+  var setOpenEditorsHeight = _useState242[1];
+
   var resizeSessionRef = useRef(null);
   var resizeRafRef = useRef(null);
   var prevGitBranchRef = useRef(null);
   var isSwitchingBranchRef = useRef(false);
+  var stateRestoredRef = useRef(false);
 
   // ── Draft backup helpers ─────────────────────────────────────────────────
   var draftWriteTimerRef = useRef({});
@@ -467,10 +489,26 @@ var MbeditorApp = function MbeditorApp() {
   var draftRestoreOffer = _useState_dro2[0];
   var setDraftRestoreOffer = _useState_dro2[1];
 
+  var _useStateMR = useState(false);
+  var _useStateMR2 = _slicedToArray(_useStateMR, 2);
+  var monacoReady = _useStateMR2[0];
+  var setMonacoReady = _useStateMR2[1];
+
+  var _useStateZen = useState(false);
+  var _useStateZen2 = _slicedToArray(_useStateZen, 2);
+  var zenMode = _useStateZen2[0];
+  var setZenMode = _useStateZen2[1];
+
   var clamp = function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
   };
 
+  var filterDotFiles = function filterDotFiles(nodes) {
+    return nodes.filter(function(n) { return n.name[0] !== '.'; }).map(function(n) {
+      return n.children ? Object.assign({}, n, { children: filterDotFiles(n.children) }) : n;
+    });
+  };
+
   var normalizeRelativePath = function normalizeRelativePath(input) {
     return (input || "").replace(/\\/g, "/").trim().replace(/^\/+/, "").replace(/\/+$/, "").replace(/\/+/g, "/");
   };
@@ -654,6 +692,17 @@ var MbeditorApp = function MbeditorApp() {
     // Subscribe to EditorStore
     var unsubscribe = EditorStore.subscribe(setState);
 
+    // Resolve monacoReady when the __monacoReady promise settles.
+    // This lets EditorPanel defer monaco.editor.create() until Monaco is loaded
+    // while the rest of the UI (file tree, tabs, sidebar) renders immediately.
+    var _mrMounted = true;
+    if (window.__monacoReady && typeof window.__monacoReady.then === 'function') {
+      window.__monacoReady.then(function() { if (_mrMounted) setMonacoReady(true); });
+    } else {
+      // Fallback: Monaco was already loaded synchronously (e.g. tests / old path).
+      setMonacoReady(true);
+    }
+
     // Initial load
     Promise.all([FileService.getWorkspace()["catch"](function () {
       return null;
@@ -765,6 +814,10 @@ var MbeditorApp = function MbeditorApp() {
       if (typeof savedState.gitPanelWidth === 'number') {
         setGitPanelWidth(savedState.gitPanelWidth);
       }
+      if (typeof savedState.openEditorsHeight === 'number') {
+        setOpenEditorsHeight(savedState.openEditorsHeight);
+      }
+      stateRestoredRef.current = true;
 
       // Load pane state for current branch; fall back to legacy global state panes
       var branchStatePromise = branch
@@ -873,6 +926,7 @@ var MbeditorApp = function MbeditorApp() {
         e.preventDefault();
         toggleGitPanel();
       }
+      // Ctrl+Shift+Z is handled in capture phase below so Monaco cannot swallow it.
       if (e.key === 'Escape') {
         setContextMenu(null);
         setShowHelp(false);
@@ -886,6 +940,7 @@ var MbeditorApp = function MbeditorApp() {
       // Throttle via rAF — skip if a frame is already queued to avoid paint thrashing
       if (resizeRafRef.current) return;
       var clientX = e.clientX;
+      var clientY = e.clientY;
       resizeRafRef.current = requestAnimationFrame(function () {
         resizeRafRef.current = null;
         var s = resizeSessionRef.current;
@@ -919,6 +974,12 @@ var MbeditorApp = function MbeditorApp() {
           var nextWidth = rect.right - clientX;
           setGitPanelWidth(clamp(nextWidth, GIT_PANEL_MIN_WIDTH, 600));
         }
+
+        if (s.mode === 'openeditors') {
+          var delta = clientY - s.startY;
+          var nextHeight = Math.max(60, Math.min(400, s.startHeight + delta));
+          setOpenEditorsHeight(nextHeight);
+        }
       });
     };
 
@@ -935,10 +996,22 @@ var MbeditorApp = function MbeditorApp() {
       document.body.style.userSelect = '';
     };
 
+    // Capture-phase listener for Ctrl+Shift+Z so it fires before Monaco's
+    // own keybinding handler (which intercepts in the bubble phase).
+    var onZenCapture = function(e) {
+      if (e.ctrlKey && !e.metaKey && e.shiftKey && e.key.toLowerCase() === 'z') {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleZenMode();
+      }
+    };
+
     window.addEventListener('keydown', onKeyDown);
+    document.addEventListener('keydown', onZenCapture, true);
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
     return function () {
+      _mrMounted = false;
       unsubscribe();
       unsubBranch();
       if (resizeRafRef.current) {
@@ -946,6 +1019,7 @@ var MbeditorApp = function MbeditorApp() {
         resizeRafRef.current = null;
       }
       window.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keydown', onZenCapture, true);
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
       document.body.style.cursor = '';
@@ -1117,7 +1191,13 @@ var MbeditorApp = function MbeditorApp() {
       EditorStore.setStatus("Saving " + tab.name + "...", "info");
       FileService.saveFile(tab.path, tab.content).then(function () {
         EditorStore.setStatus("Saved", "success");
+        SearchService.invalidate();
         GitService.fetchStatus();
+        // Reset the AVI clean baseline so undo past this save point shows dirty correctly.
+        var _closeEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+        if (_closeEntry && _closeEntry.model && !_closeEntry.model.isDisposed()) {
+          _closeEntry.cleanVersionId = _closeEntry.model.getAlternativeVersionId();
+        }
         TabManager.closeTab(closingPaneId, tab.id);
       })["catch"](function (err) {
         EditorStore.setStatus("Save failed: " + err.message, "error");
@@ -1174,6 +1254,8 @@ var MbeditorApp = function MbeditorApp() {
 
   // Persist state when panes, focusedPaneId, or collapsedSections changes
   useEffect(function () {
+    // Don't overwrite server state with React defaults before the initial load completes.
+    if (!stateRestoredRef.current) return;
     // debounce explicitly using setTimeout to avoid spamming the backend
     var timeoutId = setTimeout(function () {
       var st = EditorStore.getState();
@@ -1205,12 +1287,12 @@ var MbeditorApp = function MbeditorApp() {
         FileService.saveBranchState(currentBranch, { panes: lightweightPanes, focusedPaneId: st.focusedPaneId })["catch"](function () {});
       }
       // Also persist to global state (prefs + panes as legacy fallback)
-      FileService.saveState({ panes: lightweightPanes, focusedPaneId: st.focusedPaneId, collapsedSections: collapsedSections, expandedDirs: expandedDirs, showGitPanel: showGitPanel, gitPanelWidth: gitPanelWidth, editorPrefs: editorPrefs, activeSidebarTab: activeSidebarTab, sidebarCollapsed: sidebarCollapsed });
+      FileService.saveState({ panes: lightweightPanes, focusedPaneId: st.focusedPaneId, collapsedSections: collapsedSections, expandedDirs: expandedDirs, showGitPanel: showGitPanel, gitPanelWidth: gitPanelWidth, editorPrefs: editorPrefs, activeSidebarTab: activeSidebarTab, sidebarCollapsed: sidebarCollapsed, openEditorsHeight: openEditorsHeight });
     }, 1000);
     return function () {
       return clearTimeout(timeoutId);
     };
-  }, [state.panes, state.focusedPaneId, collapsedSections, expandedDirs, showGitPanel, gitPanelWidth, editorPrefs, activeSidebarTab, sidebarCollapsed]);
+  }, [state.panes, state.focusedPaneId, collapsedSections, expandedDirs, showGitPanel, gitPanelWidth, editorPrefs, activeSidebarTab, sidebarCollapsed, openEditorsHeight]);
 
   useEffect(function() {
     document.documentElement.setAttribute('data-theme', editorPrefs.theme || 'vs-dark');
@@ -1366,14 +1448,20 @@ var MbeditorApp = function MbeditorApp() {
         return p;
       });
       EditorStore.setState({ panes: newPanes });
+      // Reset the AVI clean baseline so undo past this save point shows dirty correctly.
+      var _modelEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+      if (_modelEntry && _modelEntry.model && !_modelEntry.model.isDisposed()) {
+        _modelEntry.cleanVersionId = _modelEntry.model.getAlternativeVersionId();
+      }
       EditorStore.setStatus("Saved", "success");
       _clearDraft(tab.path);
-      
+      SearchService.invalidate();
+
       // Hot reload for Markdown: sync preview tab after save
       if (/\.(md|markdown)$/i.test(tab.path)) {
         TabManager.syncMarkdownPreview(tab.path, tab.content);
       }
-      
+
       GitService.fetchStatus();
     })["catch"](function (err) {
       EditorStore.setStatus("Save failed: " + err.message, "error");
@@ -1407,7 +1495,15 @@ var MbeditorApp = function MbeditorApp() {
         });
       });
       EditorStore.setState({ panes: newPanes });
+      // Reset AVI clean baselines for all saved files so undo past save shows dirty correctly.
+      dirtyTabs.forEach(function(tab) {
+        var _me = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+        if (_me && _me.model && !_me.model.isDisposed()) {
+          _me.cleanVersionId = _me.model.getAlternativeVersionId();
+        }
+      });
       EditorStore.setStatus("All files saved", "success");
+      SearchService.invalidate();
       GitService.fetchStatus();
     })["catch"](function (err) {
       EditorStore.setStatus("Failed to save some files", "error");
@@ -1511,38 +1607,51 @@ var MbeditorApp = function MbeditorApp() {
     };
     var parserName = formatMap[ext];
 
-    if (parserName && window.prettier && window.prettierPlugins) {
+    if (parserName) {
       setLoading(function (prev) {
         return _extends({}, prev, { format: true });
       });
       EditorStore.setStatus("Formatting with Prettier...", "info");
-      window.prettier.format(activeTab.content, {
-        parser: parserName,
-        plugins: Object.values(window.prettierPlugins),
-        printWidth: editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80,
-        tabWidth: editorPrefs.prettierTabWidth != null ? editorPrefs.prettierTabWidth : 2,
-        useTabs: !!editorPrefs.prettierUseTabs,
-        semi: editorPrefs.prettierSemi !== false,
-        singleQuote: !!editorPrefs.prettierSingleQuote,
-        trailingComma: editorPrefs.prettierTrailingComma || 'all',
-        bracketSpacing: editorPrefs.prettierBracketSpacing !== false
-      }).then(function (formatted) {
-        var newPanes = EditorStore.getState().panes.map(function (p) {
-          if (p.id === focusedPane.id) return _extends({}, p, { tabs: p.tabs.map(function (t) {
-              return t.id === activeTab.id ? _extends({}, t, { content: formatted, dirty: true, externalContentVersion: (t.externalContentVersion || 0) + 1 }) : t;
-            }) });
-          return p;
+      var doFormat = function doFormat() {
+        return window.prettier.format(activeTab.content, {
+          parser: parserName,
+          plugins: Object.values(window.prettierPlugins),
+          printWidth: editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80,
+          tabWidth: editorPrefs.prettierTabWidth != null ? editorPrefs.prettierTabWidth : 2,
+          useTabs: !!editorPrefs.prettierUseTabs,
+          semi: editorPrefs.prettierSemi !== false,
+          singleQuote: !!editorPrefs.prettierSingleQuote,
+          trailingComma: editorPrefs.prettierTrailingComma || 'all',
+          bracketSpacing: editorPrefs.prettierBracketSpacing !== false
+        }).then(function (formatted) {
+          var newPanes = EditorStore.getState().panes.map(function (p) {
+            if (p.id === focusedPane.id) return _extends({}, p, { tabs: p.tabs.map(function (t) {
+                return t.id === activeTab.id ? _extends({}, t, { content: formatted, dirty: true, externalContentVersion: (t.externalContentVersion || 0) + 1 }) : t;
+              }) });
+            return p;
+          });
+          EditorStore.setState({ panes: newPanes });
+          EditorStore.setStatus("Formatted (Unsaved)", "success");
+          GitService.fetchStatus();
+        })["catch"](function (err) {
+          EditorStore.setStatus("Prettier Formatter failed: " + err.message, "error");
+        })["finally"](function () {
+          setLoading(function (prev) {
+            return _extends({}, prev, { format: false });
+          });
         });
-        EditorStore.setState({ panes: newPanes });
-        EditorStore.setStatus("Formatted (Unsaved)", "success");
-        GitService.fetchStatus();
-      })["catch"](function (err) {
-        EditorStore.setStatus("Prettier Formatter failed: " + err.message, "error");
-      })["finally"](function () {
-        setLoading(function (prev) {
-          return _extends({}, prev, { format: false });
+      };
+      if (window.prettier && window.prettierPlugins) {
+        doFormat();
+      } else if (window.loadPrettierPlugins) {
+        window.loadPrettierPlugins().then(doFormat)["catch"](function (err) {
+          EditorStore.setStatus("Failed to load Prettier: " + err.message, "error");
+          setLoading(function (prev) { return _extends({}, prev, { format: false }); });
         });
-      });
+      } else {
+        EditorStore.setStatus("Prettier is not available.", "warning");
+        setLoading(function (prev) { return _extends({}, prev, { format: false }); });
+      }
       return;
     }
 
@@ -1741,6 +1850,59 @@ var MbeditorApp = function MbeditorApp() {
     _debouncedSearch(searchQuery);
   };
 
+  var handleReplaceAll = function handleReplaceAll() {
+    if (!searchQuery.trim()) {
+      EditorStore.setStatus("Enter a search query first", "error");
+      return;
+    }
+    var matchCount = (state.searchResults || []).length;
+    var confirmMsg = "Replace all occurrences of \"" + searchQuery + "\" with \"" + replaceQuery + "\"?";
+    if (matchCount > 0) {
+      confirmMsg += " (" + matchCount + (searchHasMore ? "+" : "") + " match" + (matchCount !== 1 ? "es" : "") + " across files)";
+    }
+    if (!window.confirm(confirmMsg)) return;
+
+    setReplaceLoading(true);
+    EditorStore.setStatus("Replacing…", "info");
+    SearchService.replaceInFiles(searchQuery, replaceQuery, {
+      regex: searchUseRegexRef.current,
+      matchCase: searchMatchCaseRef.current,
+      wholeWord: searchWholeWordRef.current
+    }).then(function(data) {
+      var count   = data.replaced_count || 0;
+      var files   = data.files_affected || [];
+      var errors  = data.errors || [];
+      var msg = "Replaced " + count + " occurrence" + (count !== 1 ? "s" : "") + " in " + files.length + " file" + (files.length !== 1 ? "s" : "");
+      if (errors.length) msg += " (" + errors.length + " error" + (errors.length !== 1 ? "s" : "") + ")";
+      EditorStore.setStatus(msg, errors.length ? "warning" : "success");
+
+      // Invalidate search cache so next search reflects the new content.
+      SearchService.invalidate();
+
+      // Update any open Monaco models whose content changed.
+      if (files.length && window.__mbeditorModels) {
+        files.forEach(function(relPath) {
+          var model = window.__mbeditorModels[relPath];
+          if (!model) return;
+          FileService.getFile(relPath).then(function(res) {
+            if (res && res.content != null && !model.isDisposed()) {
+              model.setValue(res.content);
+            }
+          }).catch(function() {});
+        });
+      }
+
+      // Refresh search results to reflect replacements.
+      if (searchQueryRef.current) {
+        _debouncedSearch(searchQueryRef.current);
+      }
+    }).catch(function(err) {
+      EditorStore.setStatus("Replace failed: " + (err.message || String(err)), "error");
+    }).finally(function() {
+      setReplaceLoading(false);
+    });
+  };
+
   // Load more results when the user scrolls near the bottom of the list.
   var handleSearchResultsScroll = function handleSearchResultsScroll(e) {
     var el = e.currentTarget;
@@ -1756,6 +1918,22 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
+  var toggleZenMode = function toggleZenMode() {
+    setZenMode(function (prev) {
+      var next = !prev;
+      // After React re-renders the new layout, call layout() on all visible Monaco editors
+      // so they fill the reclaimed space correctly.
+      setTimeout(function () {
+        if (window.monaco && window.monaco.editor) {
+          window.monaco.editor.getEditors().forEach(function(ed) {
+            if (typeof ed.layout === 'function') ed.layout();
+          });
+        }
+      }, 50);
+      return next;
+    });
+  };
+
   var startGitPanelResize = function startGitPanelResize(e) {
     e.preventDefault();
     resizeSessionRef.current = { mode: 'gitpanel' };
@@ -1874,6 +2052,15 @@ var MbeditorApp = function MbeditorApp() {
     document.body.style.userSelect = 'none';
   };
 
+  var startOpenEditorsResize = function startOpenEditorsResize(e) {
+    if (collapsedSections.openEditors) return;
+    e.preventDefault();
+    resizeSessionRef.current = { mode: 'openeditors', startY: e.clientY, startHeight: openEditorsHeight };
+    setActiveResizeMode('openeditors');
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  };
+
   var toggleSidebarCollapsed = function toggleSidebarCollapsed() {
     setSidebarCollapsed(function (prev) { return !prev; });
   };
@@ -2404,7 +2591,7 @@ var MbeditorApp = function MbeditorApp() {
       { className: "ide-body", id: "ide-body-container" },
       React.createElement(
         "div",
-        { className: "ide-sidebar" + (sidebarCollapsed ? " ide-sidebar-collapsed" : ""), style: { width: (sidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : sidebarWidth) + "px" } },
+        { className: "ide-sidebar" + (sidebarCollapsed ? " ide-sidebar-collapsed" : ""), style: { width: (sidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : sidebarWidth) + "px", display: zenMode ? 'none' : undefined } },
         sidebarCollapsed
           ? React.createElement(
               "div",
@@ -2474,7 +2661,7 @@ var MbeditorApp = function MbeditorApp() {
           { className: "ide-sidebar-content" },
           React.createElement(
             "div",
-            { className: "ide-sidebar-fixed" },
+            { className: "ide-sidebar-fixed", style: { '--open-editors-height': openEditorsHeight + 'px' } },
             state.panes.flatMap(function (p) {
               return p.tabs;
             }).length > 0 && React.createElement(
@@ -2584,6 +2771,10 @@ var MbeditorApp = function MbeditorApp() {
             )
           )
           ),
+          state.panes.flatMap(function (p) { return p.tabs; }).length > 0 && React.createElement(
+            "div",
+            { className: "open-editors-resize-handle", onMouseDown: startOpenEditorsResize }
+          ),
           React.createElement(
             "div",
             { className: "ide-sidebar-scrollable" },
@@ -2643,7 +2834,7 @@ var MbeditorApp = function MbeditorApp() {
               )
             },
             React.createElement(FileTree, {
-              items: treeData,
+              items: editorPrefs.showDotFiles ? treeData : filterDotFiles(treeData || []),
               onSelect: handleSoftOpenFile,
               activePath: editorPrefs.autoRevealInExplorer !== false ? (activeTab && activeTab.path) : null,
               selectedPaths: selectedPaths,
@@ -2712,6 +2903,16 @@ var MbeditorApp = function MbeditorApp() {
                 },
                 React.createElement("i", { className: "codicon codicon-regex" })
               ),
+              React.createElement(
+                "button",
+                {
+                  type: "button",
+                  className: "search-adornment-btn" + (replaceMode ? " active" : ""),
+                  onClick: function() { setReplaceMode(function(p) { return !p; }); },
+                  title: "Toggle Replace"
+                },
+                React.createElement("i", { className: "codicon codicon-replace" })
+              ),
               searchQuery && React.createElement(
                 "button",
                 {
@@ -2725,6 +2926,33 @@ var MbeditorApp = function MbeditorApp() {
               )
             )
           ),
+          replaceMode && React.createElement(
+            "div",
+            { className: "search-replace-row" },
+            React.createElement("input", {
+              className: "search-input search-replace-input",
+              placeholder: "Replace with…",
+              value: replaceQuery,
+              onChange: function(e) { setReplaceQuery(e.target.value); },
+              disabled: replaceLoading
+            }),
+            React.createElement(
+              "button",
+              {
+                type: "button",
+                className: "search-replace-all-btn",
+                onClick: handleReplaceAll,
+                disabled: !searchQuery.trim() || replaceLoading,
+                title: "Replace All"
+              },
+              replaceLoading
+                ? React.createElement("i", { className: "fas fa-spinner fa-spin" })
+                : React.createElement(React.Fragment, null,
+                    React.createElement("i", { className: "codicon codicon-replace-all" }),
+                    " Replace All"
+                  )
+            )
+          ),
           (function() {
             var allResults  = state.searchResults || [];
             var loadedCount = allResults.length;
@@ -2923,12 +3151,17 @@ var MbeditorApp = function MbeditorApp() {
                       'label', { className: 'ide-settings-row ide-settings-row-half' },
                       React.createElement('span', { className: 'ide-settings-label' }, 'Font size'),
                       React.createElement('input', {
+                        key: String(editorPrefs.fontSize || 13),
                         type: 'number', min: '8', max: '32', step: '1',
                         className: 'ide-settings-input',
-                        value: editorPrefs.fontSize || 13,
+                        defaultValue: editorPrefs.fontSize || 13,
                         onChange: function(e) {
                           var v = parseInt(e.target.value, 10);
                           if (v >= 8 && v <= 32) setEditorPrefs(function(p) { return Object.assign({}, p, { fontSize: v }); });
+                        },
+                        onBlur: function(e) {
+                          var v = parseInt(e.target.value, 10);
+                          if (isNaN(v) || v < 8 || v > 32) e.target.value = String(editorPrefs.fontSize || 13);
                         }
                       })
                     ),
@@ -2946,12 +3179,17 @@ var MbeditorApp = function MbeditorApp() {
                       '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', {
+                        key: String(editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0),
                         type: 'number', min: '0', max: '100', step: '1',
                         className: 'ide-settings-input',
-                        value: editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0,
+                        defaultValue: 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 }); });
+                        },
+                        onBlur: function(e) {
+                          var v = parseInt(e.target.value, 10);
+                          if (isNaN(v) || v < 0 || v > 100) e.target.value = String(editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0);
                         }
                       })
                     ),
@@ -2959,12 +3197,17 @@ var MbeditorApp = function MbeditorApp() {
                       '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', {
+                        key: String(editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0),
                         type: 'number', min: '-5', max: '20', step: '0.5',
                         className: 'ide-settings-input',
-                        value: editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0,
+                        defaultValue: 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 }); });
+                        },
+                        onBlur: function(e) {
+                          var v = parseFloat(e.target.value);
+                          if (isNaN(v) || v < -5 || v > 20) e.target.value = String(editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0);
                         }
                       })
                     ),
@@ -2975,12 +3218,17 @@ var MbeditorApp = function MbeditorApp() {
                       'label', { className: 'ide-settings-row ide-settings-row-half' },
                       React.createElement('span', { className: 'ide-settings-label' }, 'Tab size'),
                       React.createElement('input', {
+                        key: String(editorPrefs.tabSize || 4),
                         type: 'number', min: '1', max: '8', step: '1',
                         className: 'ide-settings-input',
-                        value: editorPrefs.tabSize || 4,
+                        defaultValue: editorPrefs.tabSize || 4,
                         onChange: function(e) {
                           var v = parseInt(e.target.value, 10);
                           if (v >= 1 && v <= 8) setEditorPrefs(function(p) { return Object.assign({}, p, { tabSize: v }); });
+                        },
+                        onBlur: function(e) {
+                          var v = parseInt(e.target.value, 10);
+                          if (isNaN(v) || v < 1 || v > 8) e.target.value = String(editorPrefs.tabSize || 4);
                         }
                       })
                     ),
@@ -3262,12 +3510,17 @@ var MbeditorApp = function MbeditorApp() {
                       'label', { className: 'ide-settings-row ide-settings-row-half' },
                       React.createElement('span', { className: 'ide-settings-label' }, 'Print width'),
                       React.createElement('input', {
+                        key: String(editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80),
                         type: 'number', min: '40', max: '200', step: '1',
                         className: 'ide-settings-input',
-                        value: editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80,
+                        defaultValue: editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80,
                         onChange: function(e) {
                           var v = parseInt(e.target.value, 10);
                           if (v >= 40 && v <= 200) setEditorPrefs(function(p) { return Object.assign({}, p, { prettierPrintWidth: v }); });
+                        },
+                        onBlur: function(e) {
+                          var v = parseInt(e.target.value, 10);
+                          if (isNaN(v) || v < 40 || v > 200) e.target.value = String(editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80);
                         }
                       })
                     ),
@@ -3337,6 +3590,16 @@ 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-check' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Show dotfiles'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.showDotFiles),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { showDotFiles: v }); }); }
+                      })
+                    ),
                     React.createElement(
                       'label', { className: 'ide-settings-row ide-settings-row-half' },
                       React.createElement('span', { className: 'ide-settings-label' }, 'Tab bar layout'),
@@ -3445,22 +3708,21 @@ var MbeditorApp = function MbeditorApp() {
                   testLoading: testLoading,
                   testInlineVisible: testInlineVisible,
                   editorPrefs: editorPrefs,
+                  monacoReady: monacoReady,
                   onFormat: function() { onFormatRef.current(); },
                   onSave: function() { handleSave(pane.id, pActiveTab); },
                   onRunTest: handleRunTest,
                   onShowHistory: function(path) { setHistoryPanelPath(path); },
                   onContentChange: function onContentChange(val) {
+                    // Dirty/clean state is now set in EditorPanel via AVI comparison.
+                    // onContentChange only needs to handle draft persistence.
                     var st = EditorStore.getState();
                     var cp = st.panes.find(function(p) { return p.id === pane.id; });
                     var ct = cp && cp.tabs.find(function(t) { return t.id === pActiveTab.id; });
-                    var cleanNorm = ((ct && ct.cleanContent) || '').replace(/\r\n/g, '\n');
-                    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);
+                    if (ct && ct.dirty) {
                       _scheduleDraftWrite(pActiveTab.path, val);
+                    } else {
+                      _clearDraft(pActiveTab.path);
                     }
                   }
                 });
@@ -3576,6 +3838,10 @@ var MbeditorApp = function MbeditorApp() {
                             React.createElement("td", null, React.createElement("kbd", null, "Ctrl+Shift+G")),
                             React.createElement("td", null, "Toggle git panel")
                           ),
+                          React.createElement("tr", null,
+                            React.createElement("td", null, React.createElement("kbd", null, "Ctrl+Shift+Z")),
+                            React.createElement("td", null, "Toggle zen / focus mode")
+                          ),
                           React.createElement("tr", null,
                             React.createElement("td", null, React.createElement("kbd", null, "Ctrl+Z\u00a0/\u00a0Ctrl+Y")),
                             React.createElement("td", null, "Undo / Redo")
@@ -3617,14 +3883,14 @@ var MbeditorApp = function MbeditorApp() {
       ),
 
       // Right-side Git panel (children of ide-body, alongside sidebar and ide-main)
-      showGitPanel && React.createElement("div", {
+      showGitPanel && !zenMode && React.createElement("div", {
         className: "panel-divider gitpanel-divider " + (activeResizeMode === 'gitpanel' ? 'active' : ''),
         onMouseDown: startGitPanelResize,
         role: "separator",
         "aria-orientation": "vertical",
         "aria-label": "Resize git panel"
       }),
-      showGitPanel && React.createElement(
+      showGitPanel && !zenMode && React.createElement(
         "div",
         { className: "ide-git-right-panel", style: { width: gitPanelWidth + "px" } },
         React.createElement(window.GitPanel || GitPanel, {
@@ -3701,6 +3967,16 @@ var MbeditorApp = function MbeditorApp() {
         },
         activeEOL
       ),
+      zenMode && React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-zen-btn",
+          title: "Zen mode active — click or press Ctrl+Shift+Z to exit",
+          onClick: toggleZenMode
+        },
+        "ZEN"
+      ),
       React.createElement(
         "div",
         { className: "statusbar-version" },