mbeditor 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45f561cf7e36141944025bc54ce679c4492a7c7315902532e350eab44b138361
-  data.tar.gz: 7612a0802d9c8e65d0539b621362b0adc3f09866bf131b14b707efafcd35e752
+  metadata.gz: 706d2307424a25e3a1b19683326d62de74d98568f755971d6eeb592ad5bae1a4
+  data.tar.gz: 8cfb289f2cc0fd18eb2e8c55ae3a2f766712d68231e695b2e02a1e7778207c2d
 SHA512:
-  metadata.gz: c896888e924acc1d11e38a0efcdf6f7caec6013eb02426e4d4a0ee847accb3eb5872e5a40e1d4ca7551892352d9fce72ae4667a9585c8265ec7ffc7927e85341
-  data.tar.gz: d8cbae4ecfd6b3ec04fd5fde655a52cd176830ff38d02c89bd76e7b09372be63b0f227261ec3dcfda2cd79edbe9811a0a2bfddff58a51b2c5d1d36ac199fc3c5
+  metadata.gz: 8b691b32511249206e9af0e7ceeb6b26f9cf5bf63cd4b035e8b7fa9411ba05480b4c8795cdcf7a20ffefd536803a61e79c84edb7874fad7d7308aa4dca622b2f
+  data.tar.gz: 41c25d7ad6113629fd50267ceff4e9f07490627f9fc2a8eba2fc2804743e8ba7e3c3c6bedc30c4a225e6a177c3354b1282a88df874086bf2e969bced2d20ea65

data/README.md

@@ -47,7 +47,7 @@ mount Mbeditor::Engine, at: "/mbeditor"
 Use a single initializer to set the engine options you need:
 
 ```ruby
-MBEditor.configure do |config|
+Mbeditor.configure do |config|
   config.allowed_environments = [:development]
   # config.workspace_root = Rails.root
   config.excluded_paths = %w[.git tmp log node_modules .bundle coverage vendor/bundle]
@@ -70,6 +70,17 @@ Available options:
 - `redmine_url` sets the Redmine base URL. Required when `redmine_enabled` is `true`.
 - `redmine_api_key` sets the Redmine API key. Required when `redmine_enabled` is `true`.
 
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+P` | Quick-open file by name |
+| `Ctrl+S` | Save the active file |
+| `Ctrl+Shift+S` | Save all dirty files |
+| `Alt+Shift+F` | Format the active file |
+| `Ctrl+Shift+G` | Toggle the git panel |
+| `Ctrl+Z` / `Ctrl+Y` | Undo / Redo (Monaco built-in) |
+
 ## Host Requirements (Optional)
 The gem keeps host/tooling responsibilities in the host app:
 - `rubocop` and `rubocop-rails` gems (optional, required for Ruby lint/format endpoints)
@@ -99,6 +110,10 @@ The gem includes syntax highlighting for common Rails and React development file
 
 These language modules are packaged locally with the gem for true offline operation. No network fallback is needed—all highlighting works without internet connectivity.
 
+## Asset Pipeline
+
+Mbeditor requires **Sprockets** (`sprockets-rails >= 3.4`). Host apps using **Propshaft** as their asset pipeline are not supported — the engine depends on Sprockets directives to load its JavaScript and CSS assets.
+
 ## Development
 
 A minimal dummy Rails app is included for local development and testing:

data/app/assets/javascripts/mbeditor/application.js

@@ -1,4 +1,5 @@
 //= require mbeditor/editor_store
+//= require mbeditor/file_icon
 //= require mbeditor/file_service
 //= require mbeditor/git_service
 //= require mbeditor/search_service

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

@@ -83,10 +83,12 @@ var DiffViewer = function DiffViewer(_ref) {
 
   function getLanguageForPath(filePath) {
     if (!filePath) return 'plaintext';
+    var fileName = filePath.split('/').pop().toLowerCase();
+    if (fileName === 'gemfile' || fileName === 'gemfile.lock' || fileName === 'rakefile') return 'ruby';
     var ext = filePath.split('.').pop().toLowerCase();
     var map = {
       'rb': 'ruby', 'js': 'javascript', 'jsx': 'javascript',
-      'ts': 'javascript', 'tsx': 'javascript',
+      'ts': 'typescript', 'tsx': 'typescript',
       'json': 'json', 'yml': 'yaml', 'yaml': 'yaml',
       'css': 'css', 'scss': 'scss', 'html': 'html',
       'xml': 'xml', 'md': 'markdown', 'sh': 'shell'

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

@@ -15,9 +15,12 @@ var EditorPanel = function EditorPanel(_ref) {
   var onContentChange = _ref.onContentChange;
   var markers = _ref.markers;
   var gitAvailable = _ref.gitAvailable === true;
+  var onFormat = _ref.onFormat;
+  var editorPrefs = _ref.editorPrefs || {};
 
   var editorRef = useRef(null);
   var monacoRef = useRef(null);
+  var latestContentRef = useRef('');
 
   var _useState = useState('');
   var _useState2 = _slicedToArray(_useState, 2);
@@ -42,6 +45,9 @@ var EditorPanel = function EditorPanel(_ref) {
   var blameDecorationsRef = useRef([]);
   var blameZoneIdsRef = useRef([]);
 
+  var onFormatRef = useRef(onFormat);
+  onFormatRef.current = onFormat;
+
   var clearBlameZones = function clearBlameZones(editor) {
     if (!editor) return;
     if (blameZoneIdsRef.current.length === 0) return;
@@ -75,16 +81,23 @@ var EditorPanel = function EditorPanel(_ref) {
       window.MbeditorEditorPlugins.registerGlobalExtensions(window.monaco);
     }
 
-    var parts = tab.path.split('.');
+    var fileName = tab.path.split('/').pop() || '';
+    var parts = fileName.split('.');
     var extension = parts.length > 1 ? parts.pop().toLowerCase() : '';
     var language = 'plaintext';
-    switch (extension) {
-      case 'rb':case 'ruby':case 'gemspec':case 'rakefile':
+    switch (fileName.toLowerCase()) {
+      case 'gemfile':
+      case 'gemfile.lock':
+      case 'rakefile':
         language = 'ruby';break;
+      default:
+        switch (extension) {
+      case 'rb':case 'ruby':case 'gemspec':
+          language = 'ruby';break;
       case 'js':case 'jsx':
         language = 'javascript';break;
       case 'ts':case 'tsx':
-        language = 'javascript';break;
+        language = 'typescript';break;
       case 'css':case 'scss':case 'sass':
         language = 'css';break;
       case 'html':case 'erb':
@@ -101,6 +114,7 @@ var EditorPanel = function EditorPanel(_ref) {
         language = 'shell';break;
       case 'png':case 'jpg':case 'jpeg':case 'gif':case 'svg':case 'ico':case 'webp':case 'bmp':case 'avif':
         language = 'image';break;
+        }
     }
 
     if (language === 'image') return;
@@ -108,15 +122,15 @@ var EditorPanel = function EditorPanel(_ref) {
     var editor = window.monaco.editor.create(editorRef.current, {
       value: tab.content,
       language: language,
-      theme: 'vs-dark',
+      theme: editorPrefs.theme || 'vs-dark',
       automaticLayout: true,
       minimap: { enabled: false },
       renderLineHighlight: 'none',
       bracketPairColorization: { enabled: true },
-      fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
-      fontSize: 13,
-      tabSize: 4,
-      insertSpaces: true,
+      fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
+      fontSize: editorPrefs.fontSize || 13,
+      tabSize: editorPrefs.tabSize || 4,
+      insertSpaces: typeof editorPrefs.insertSpaces === 'boolean' ? editorPrefs.insertSpaces : false,
       wordWrap: 'on',
       linkedEditing: true, // Enables Auto-Rename Tag natively!
       fixedOverflowWidgets: true,
@@ -135,7 +149,20 @@ var EditorPanel = function EditorPanel(_ref) {
     monacoRef.current = editor;
     window.__mbeditorActiveEditor = editor;
 
+    // Stash the workspace-relative path on the model so code-action providers
+    // can identify which file they are operating on without needing React state.
     var modelObj = editor.getModel();
+    if (modelObj) modelObj._mbeditorPath = tab.path;
+
+    var formatActionDisposable = editor.addAction({
+      id: 'mbeditor.formatDocument',
+      label: 'Format Document',
+      contextMenuGroupId: '1_modification',
+      contextMenuOrder: 1.5,
+      run: function() {
+        if (onFormatRef.current) onFormatRef.current();
+      }
+    });
 
     var editorPluginDisposable = null;
     if (window.MbeditorEditorPlugins && window.MbeditorEditorPlugins.attachEditorFeatures) {
@@ -145,7 +172,7 @@ var EditorPanel = function EditorPanel(_ref) {
     // Change listener
     var contentDisposable = modelObj.onDidChangeContent(function (e) {
       var val = editor.getValue();
-      var currentContent = monacoRef.current._latestContent || '';
+      var currentContent = latestContentRef.current;
 
       // Normalize before comparing to prevent false positive dirty edits
       var vNorm = val.replace(/\r\n/g, '\n');
@@ -163,6 +190,7 @@ var EditorPanel = function EditorPanel(_ref) {
         window.__mbeditorActiveEditor = null;
       }
       if (editorPluginDisposable) editorPluginDisposable.dispose();
+      formatActionDisposable.dispose();
       contentDisposable.dispose();
       editor.dispose();
     };
@@ -171,7 +199,7 @@ var EditorPanel = function EditorPanel(_ref) {
   // Listen for external content changes (e.g. after Format/Save/Load)
   useEffect(function () {
     var editor = monacoRef.current;
-    if (editor) editor._latestContent = tab.content; // update ref for closure
+    if (editor) latestContentRef.current = tab.content; // keep ref in sync for closure
 
     if (editor && editor.getValue() !== tab.content) {
       if (typeof tab.content !== 'string') return;
@@ -199,6 +227,21 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [tab.content]);
 
+  // Apply editorPrefs changes to a running editor without remounting
+  useEffect(function () {
+    if (!window.monaco) return;
+    var theme = editorPrefs.theme || 'vs-dark';
+    window.monaco.editor.setTheme(theme);
+    if (monacoRef.current) {
+      monacoRef.current.updateOptions({
+        fontSize: editorPrefs.fontSize || 13,
+        fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
+        tabSize: editorPrefs.tabSize || 4,
+        insertSpaces: typeof editorPrefs.insertSpaces === 'boolean' ? editorPrefs.insertSpaces : false
+      });
+    }
+  }, [editorPrefs]);
+
   // Jump to line if specified
   useEffect(function () {
     if (tab.gotoLine && monacoRef.current) {
@@ -222,8 +265,13 @@ 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;
           return {
-            severity: m.severity === 'error' ? window.monaco.MarkerSeverity.Error : window.monaco.MarkerSeverity.Warning,
+            severity: sev,
+            source: 'rubocop',
+            code: m.copName || '',
             message: m.message,
             startLineNumber: m.startLine,
             startColumn: m.startCol,
@@ -232,6 +280,11 @@ var EditorPanel = function EditorPanel(_ref) {
           };
         });
         window.monaco.editor.setModelMarkers(model, 'rubocop', monacoMarkers);
+        // Track which cops are autocorrectable so the quick-fix provider can
+        // skip lightbulbs for cops that can never be machine-fixed.
+        model._mbeditorCorrectableCops = new Set(
+          markers.filter(function(m) { return m.correctable && m.copName; }).map(function(m) { return m.copName; })
+        );
       }
     }
   }, [markers, tab.id]);
@@ -385,7 +438,7 @@ var EditorPanel = function EditorPanel(_ref) {
   }, [markdownContent, isMarkdown]);
 
   if (tab.isDiff) {
-    var isDiffDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || true;
+    var isDiffDark = (editorPrefs.theme || 'vs-dark') !== 'vs' && (editorPrefs.theme || 'vs-dark') !== 'hc-light';
     return React.createElement(window.DiffViewer || DiffViewer, {
       path: tab.repoPath || tab.path,
       original: tab.diffOriginal || "",

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

@@ -109,23 +109,6 @@ var FileTree = function FileTree(_ref) {
     return { badge: key || '?', cssKey: key || 'Q', title: titleMap[key] || 'Status' };
   };
 
-  window.getFileIcon = function (name) {
-    var ext = name.split('.').pop().toLowerCase();
-    var lName = name.toLowerCase();
-    if (lName === 'gemfile' || ext === 'gemspec' || ext === 'lock') return 'fas fa-gem ruby-icon';
-    if (ext === 'rb' || ext === 'rake' || lName === 'rakefile') return 'far fa-gem ruby-icon';
-    if (ext === 'jsx' || name.endsWith('.js.jsx')) return 'fas fa-atom react-icon';
-    if (ext === 'js' || ext === 'mjs' || ext === 'cjs') return 'fa-brands fa-js js-icon';
-    if (ext === 'html') return 'fa-brands fa-html5 html-icon';
-    if (ext === 'erb') return 'fa-brands fa-html5 erb-icon';
-    if (ext === 'css' || ext === 'scss' || ext === 'sass') return 'fa-brands fa-css3-alt css-icon';
-    if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'avif'].includes(ext)) return 'far fa-file-image image-icon';
-    if (ext === 'json') return 'fas fa-code json-icon';
-    if (ext === 'md' || ext === 'txt') return 'fas fa-file-alt md-icon';
-    if (ext === 'yml' || ext === 'yaml') return 'fas fa-cogs yml-icon';
-    return 'far fa-file-code';
-  };
-
   var handleInlineKeyDown = function handleInlineKeyDown(e) {
     var isRename = !!pendingRename;
     if (e.key === 'Enter') {

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

@@ -1,6 +1,7 @@
 var GitPanel = function GitPanel(_ref) {
   var gitInfo = _ref.gitInfo;
   var error = _ref.error;
+  var redmineEnabled = _ref.redmineEnabled;
   var onOpenFile = _ref.onOpenFile;
   var onOpenDiff = _ref.onOpenDiff;
   var onOpenAllChanges = _ref.onOpenAllChanges;
@@ -8,6 +9,7 @@ var GitPanel = function GitPanel(_ref) {
   var onClose = _ref.onClose;
 
   var useState = React.useState;
+  var useEffect = React.useEffect;
 
   var _s1 = useState(true);  var localExpanded  = _s1[0]; var setLocalExpanded  = _s1[1];
   var _s2 = useState(true);  var branchExpanded = _s2[0]; var setBranchExpanded = _s2[1];
@@ -16,6 +18,13 @@ var GitPanel = function GitPanel(_ref) {
   var _s4 = useState({});    var expandedCommits = _s4[0]; var setExpandedCommits = _s4[1];
   // { [hash]: { loading, files: [{status,path}], error } }
   var _s5 = useState({});    var commitFiles = _s5[0]; var setCommitFiles = _s5[1];
+  var _s6 = useState(false); var refreshing = _s6[0]; var setRefreshing = _s6[1];
+
+  // ── Redmine state ───────────────────────────────────────────────────────────
+  var _sr1 = useState(null);   var redmineIssue   = _sr1[0]; var setRedmineIssue   = _sr1[1];
+  var _sr2 = useState(null);   var redmineError   = _sr2[0]; var setRedmineError   = _sr2[1];
+  var _sr3 = useState(false);  var redmineLoading = _sr3[0]; var setRedmineLoading = _sr3[1];
+  var _sr4 = useState(true);   var redmineExpanded = _sr4[0]; var setRedmineExpanded = _sr4[1];
 
   var workingTree     = gitInfo && gitInfo.workingTree     || [];
   var unpushedFiles   = gitInfo && gitInfo.unpushedFiles   || [];
@@ -31,6 +40,39 @@ var GitPanel = function GitPanel(_ref) {
     return Object.assign({}, c, { isLocal: !!localHashes[c.hash] });
   });
 
+  // Extract the first Redmine ticket ID (#123) from recent branch commit messages
+  var redmineTicketId = null;
+  if (redmineEnabled) {
+    for (var ci = 0; ci < branchCommits.length; ci++) {
+      var titleMatch = branchCommits[ci] && branchCommits[ci].title && branchCommits[ci].title.match(/#(\d+)/);
+      if (titleMatch) { redmineTicketId = titleMatch[1]; break; }
+    }
+  }
+
+  // Fetch Redmine issue whenever the ticket ID changes
+  useEffect(function () {
+    if (!redmineEnabled) return;
+    if (!redmineTicketId) {
+      setRedmineIssue(null);
+      setRedmineError(null);
+      return;
+    }
+    setRedmineLoading(true);
+    setRedmineIssue(null);
+    setRedmineError(null);
+    var basePath = (window.MBEDITOR_BASE_PATH || '/mbeditor').replace(/\/$/, '');
+    axios.get(basePath + '/redmine/issue/' + redmineTicketId)
+      .then(function (res) {
+        setRedmineIssue(res.data);
+        setRedmineLoading(false);
+      })
+      .catch(function (err) {
+        var msg = (err.response && err.response.data && err.response.data.error) || err.message || 'Failed to load Redmine issue.';
+        setRedmineError(msg);
+        setRedmineLoading(false);
+      });
+  }, [redmineEnabled, redmineTicketId]);
+
   var statusMeta = function statusMeta(rawStatus) {
     var raw = (rawStatus || '').trim();
     if (raw === '??') return { badge: 'NEW', cssKey: 'A', description: 'Untracked' };
@@ -46,36 +88,7 @@ var GitPanel = function GitPanel(_ref) {
   };
 
   var fileIcon = function fileIcon(filename) {
-    var ext = (filename || '').split('.').pop().toLowerCase();
-    var iconMap = {
-      'rb':      { cls: 'fas fa-gem',      color: '#cc342d' },
-      'gemspec': { cls: 'fas fa-gem',      color: '#cc342d' },
-      'js':      { cls: 'fab fa-js',       color: '#f0db4f' },
-      'ts':      { cls: 'fas fa-code',     color: '#3178c6' },
-      'jsx':     { cls: 'fab fa-js',       color: '#61dafb' },
-      'tsx':     { cls: 'fas fa-code',     color: '#61dafb' },
-      'html':    { cls: 'fab fa-html5',    color: '#e34f26' },
-      'htm':     { cls: 'fab fa-html5',    color: '#e34f26' },
-      'erb':     { cls: 'fab fa-html5',    color: '#cc342d' },
-      'css':     { cls: 'fab fa-css3-alt', color: '#1572b6' },
-      'scss':    { cls: 'fab fa-sass',     color: '#cc6699' },
-      'sass':    { cls: 'fab fa-sass',     color: '#cc6699' },
-      'md':      { cls: 'fab fa-markdown', color: '#7f8b97' },
-      'json':    { cls: 'fas fa-code',     color: '#ffe082' },
-      'yml':     { cls: 'fas fa-cog',      color: '#888' },
-      'yaml':    { cls: 'fas fa-cog',      color: '#888' },
-      'png':     { cls: 'fas fa-image',    color: '#aaa' },
-      'jpg':     { cls: 'fas fa-image',    color: '#aaa' },
-      'jpeg':    { cls: 'fas fa-image',    color: '#aaa' },
-      'gif':     { cls: 'fas fa-image',    color: '#aaa' },
-      'svg':     { cls: 'fas fa-image',    color: '#aaa' },
-      'txt':     { cls: 'fas fa-file-alt', color: '#888' },
-      'sh':      { cls: 'fas fa-terminal', color: '#89d185' },
-      'lock':    { cls: 'fas fa-lock',     color: '#888' },
-      'pdf':     { cls: 'fas fa-file-pdf', color: '#f48771' },
-    };
-    var icon = iconMap[ext] || { cls: 'fas fa-file-code', color: '#7f8b97' };
-    return React.createElement('i', { className: icon.cls + ' git-file-type-icon', style: { color: icon.color } });
+    return React.createElement('i', { className: (window.getFileIcon ? window.getFileIcon(filename) : 'far fa-file-code') + ' git-file-type-icon' });
   };
 
   // Renders a file row used in Local Changes and Changes in Branch sections
@@ -148,6 +161,23 @@ var GitPanel = function GitPanel(_ref) {
     }
   };
 
+  var handleRefresh = function handleRefresh() {
+    if (!onRefresh || refreshing) return;
+
+    var result;
+    try {
+      setRefreshing(true);
+      result = onRefresh();
+    } catch (err) {
+      setRefreshing(false);
+      throw err;
+    }
+
+    return Promise.resolve(result).finally(function () {
+      setRefreshing(false);
+    });
+  };
+
   var renderCommit = function renderCommit(commit, idx) {
     var isFirst = idx === 0;
     var isLast = idx === branchCommits.length - 1;
@@ -305,8 +335,8 @@ var GitPanel = function GitPanel(_ref) {
         { className: 'ide-git-panel-actions' },
         onRefresh && React.createElement(
           'button',
-          { className: 'git-header-btn', onClick: onRefresh, title: 'Refresh' },
-          React.createElement('i', { className: 'fas fa-sync-alt' })
+          { className: 'git-header-btn', onClick: handleRefresh, title: 'Refresh', disabled: refreshing, 'aria-busy': refreshing },
+          React.createElement('i', { className: 'fas fa-sync-alt' + (refreshing ? ' fa-spin' : '') })
         ),
         onClose && React.createElement(
           'button',
@@ -318,6 +348,59 @@ var GitPanel = function GitPanel(_ref) {
 
     error && React.createElement('div', { className: 'git-error' }, error),
 
+    // ── Redmine Issue Section ───────────────────────────────────────────────
+    redmineEnabled && React.createElement(
+      'div',
+      { className: 'git-section ' + (redmineExpanded ? 'expanded' : '') + ' git-section--redmine' },
+      React.createElement(
+        'div',
+        { className: 'git-section-title' },
+        React.createElement(
+          'div',
+          { className: 'git-section-title-main hoverable', onClick: function () { setRedmineExpanded(!redmineExpanded); } },
+          React.createElement(
+            'span',
+            { className: 'git-redmine-section-label' },
+            React.createElement('i', { className: 'fas ' + (redmineExpanded ? 'fa-chevron-down' : 'fa-chevron-right'), style: { width: '14px', fontSize: '10px' } }),
+            '\u2002Redmine',
+            redmineTicketId && React.createElement('span', { className: 'git-section-count', style: { marginLeft: '4px' } }, '#' + redmineTicketId)
+          ),
+          redmineIssue && React.createElement('span', { className: 'redmine-badge redmine-badge--section' }, redmineIssue.status)
+        )
+      ),
+      redmineExpanded && React.createElement(
+        'div',
+        { className: 'git-redmine-content' },
+        redmineLoading
+          ? React.createElement('div', { className: 'git-empty' },
+              React.createElement('i', { className: 'fas fa-spinner fa-spin', style: { marginRight: '6px' } }),
+              'Loading issue\u2026'
+            )
+          : !redmineTicketId
+            ? React.createElement('div', { className: 'git-empty' }, 'No matching ticket found in branch commits.')
+            : redmineError
+              ? React.createElement('div', { className: 'git-redmine-error' },
+                  React.createElement('i', { className: 'fas fa-exclamation-circle', style: { marginRight: '6px', color: '#f48771' } }),
+                  redmineError
+                )
+              : redmineIssue
+                ? React.createElement(
+                      'div',
+                      { className: 'git-redmine-issue' },
+                      React.createElement('div', { className: 'git-redmine-title' }, redmineIssue.title),
+                      redmineIssue.description
+                        ? React.createElement('div', { className: 'git-redmine-desc' }, redmineIssue.description)
+                        : null,
+                      React.createElement(
+                        'div',
+                        { className: 'git-redmine-footer' },
+                        redmineIssue.author || ''
+                      )
+                  )
+                : null
+        )
+    ),
+
     // ── Section 1: Local Changes ────────────────────────────────────────────
     React.createElement(
       'div',