mbeditor 0.5.3 → 0.7.1

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

@@ -157,6 +157,15 @@ var TabBar = function TabBar(_ref) {
             if (isSpecial) return;
             e.preventDefault();
             setTabContextMenu({ x: e.clientX, y: e.clientY, tab: tab });
+          },
+          onMouseDown: function (e) {
+            if (e.button === 1) e.preventDefault();
+          },
+          onAuxClick: function (e) {
+            if (e.button === 1) {
+              e.preventDefault();
+              onClose(tab.id);
+            }
           }
         },
         React.createElement('i', { className: 'tab-item-icon ' + (tab.isSettings ? 'fas fa-cog' : (window.getFileIcon ? window.getFileIcon(tab.name) : 'far fa-file-code')) }),

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

@@ -0,0 +1,48 @@
+var ConflictParser = (function () {
+  function hasConflicts(content) {
+    return /^<<<<<<< /m.test(content);
+  }
+
+  function parse(content) {
+    var blocks = [];
+    var lines = content.split('\n');
+    var state = null;
+    var headStart = -1, headEnd = -1, dividerLine = -1;
+    var headLines = [], incomingLines = [];
+    var marker = null;
+
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i];
+      if (/^<<<<<<< /.test(line) && state === null) {
+        state = 'head';
+        headStart = i;
+        headLines = [];
+        marker = line;
+      } else if (/^=======\s*$/.test(line) && state === 'head') {
+        state = 'incoming';
+        headEnd = i;
+        dividerLine = i;
+        incomingLines = [];
+      } else if (/^>>>>>>> /.test(line) && state === 'incoming') {
+        blocks.push({
+          startLine: headStart,
+          headEnd: headEnd,
+          dividerLine: dividerLine,
+          endLine: i,
+          headContent: headLines.join('\n'),
+          incomingContent: incomingLines.join('\n'),
+          marker: marker,
+          endMarker: line
+        });
+        state = null;
+      } else if (state === 'head') {
+        headLines.push(line);
+      } else if (state === 'incoming') {
+        incomingLines.push(line);
+      }
+    }
+    return blocks;
+  }
+
+  return { hasConflicts: hasConflicts, parse: parse };
+})();

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

@@ -51,6 +51,13 @@
 
   var globalsRegistered = false;
 
+  // JS global discovery: populated as definitions are found via hover/goto/auto-resolve.
+  // Persists for the page lifetime so each symbol is only declared once.
+  var discoveredJsGlobals = {};
+  var attemptedJsGlobals  = {}; // symbols already looked up (found OR not found)
+  var jsHoverCache = {};
+  var jsMembersCache = {};
+
   // Enumerate window for user-defined globals and return a TypeScript declaration string.
   // Sprockets exposes every top-level var/function as a window property before Monaco
   // initialises, so scanning at registration time captures all components and helpers.
@@ -60,7 +67,7 @@
   // this reliably separates them from user-assigned globals without a native-code test
   // (which only works for functions, not objects like `document` or `location`).
   function buildWindowGlobalsShim() {
-    var alreadyDeclared = { React: 1, ReactDOM: 1, PropTypes: 1, MaterialUI: 1, $: 1, jQuery: 1 };
+    var alreadyDeclared = { React: 1, ReactDOM: 1, PropTypes: 1, MaterialUI: 1, $: 1, jQuery: 1, JSX: 1 };
     var lines = [];
     try {
       var keys = Object.keys(window);
@@ -77,6 +84,64 @@
     return lines.join('\n');
   }
 
+  // Return true if sym is a user-assigned window property (not a browser built-in).
+  // Uses the same property-descriptor filter as buildWindowGlobalsShim: browser built-ins
+  // are either non-configurable or accessor properties (have a getter), so plain writable
+  // configurable data properties reliably identify user-assigned globals.
+  function isRuntimeWindowGlobal(sym) {
+    if (!sym || typeof window === 'undefined') return false;
+    try {
+      if (!Object.prototype.hasOwnProperty.call(window, sym)) return false;
+      var val;
+      try { val = window[sym]; } catch (e) { return false; }
+      if (val === null || val === undefined) return false;
+      var desc = Object.getOwnPropertyDescriptor(window, sym);
+      if (!desc) return false;
+      return desc.configurable === true && desc.writable === true && !desc.get;
+    } catch (e) { return false; }
+  }
+
+  // Globals already declared in the React mini-UMD — never add these to
+  // discovered-globals.d.ts or TypeScript will see a duplicate identifier.
+  var REACT_MINI_UMD_GLOBALS = { React: 1, ReactDOM: 1, PropTypes: 1, MaterialUI: 1, $: 1, jQuery: 1, JSX: 1 };
+
+  // Declare a discovered global in Monaco's extra libs so the TS2304 warning disappears.
+  // Calling addExtraLib with the same URI replaces the previous content in-place.
+  function addDiscoveredGlobal(name) {
+    if (discoveredJsGlobals[name]) return;
+    if (REACT_MINI_UMD_GLOBALS[name]) return; // already in the mini-UMD
+    discoveredJsGlobals[name] = true;
+    var mts = window.monaco && window.monaco.languages && window.monaco.languages.typescript;
+    if (!mts) return;
+    var decls = Object.keys(discoveredJsGlobals)
+      .map(function(k) { return 'declare var ' + k + ': any;'; }).join('\n');
+    mts.javascriptDefaults.addExtraLib(decls, 'inmemory://mbeditor/discovered-globals.d.ts');
+  }
+
+  // Navigate to the first workspace definition of a JS symbol.
+  // Returns a Promise<boolean> — true if a definition was found and opened.
+  function navigateToJsWord(editor, word) {
+    if (typeof FileService === 'undefined' || !FileService.getJsDefinition) return Promise.resolve(false);
+    var currentPath = editor.getModel && editor.getModel() && editor.getModel()._mbeditorPath;
+    return FileService.getJsDefinition(word)
+      .then(function(data) {
+        var results = data && data.results;
+        if (!results || !results.length) {
+          if (isRuntimeWindowGlobal(word)) addDiscoveredGlobal(word);
+          return false;
+        }
+        var r = results[0];
+        // Only declare as a global when the definition lives in a different file.
+        // Locally-defined functions/classes must not get a duplicate declare var.
+        if (r.file !== currentPath) addDiscoveredGlobal(word);
+        if (typeof TabManager !== 'undefined' && TabManager.openTab) {
+          TabManager.openTab(r.file, r.file.split('/').pop(), r.line);
+        }
+        return true;
+      })
+      .catch(function() { return false; });
+  }
+
   function leadingWhitespace(line) {
     var match = line.match(/^\s*/);
     return match ? match[0] : '';
@@ -231,6 +296,8 @@
     var emmetTabDisposable = null;
     var gotoMouseDisposable = null;
     var gotoActionDisposable = null;
+    var jsGotoMouseDisposable = null;
+    var jsGotoActionDisposable = null;
 
     // Emmet Tab expansion — active for markup and stylesheet languages
     var EMMET_MARKUP_LANGS = { html: true, xml: true, erb: true, 'html.erb': true, haml: true };
@@ -383,43 +450,39 @@
       });
     }
 
-    // Unused method dimming — grey out `def method_name` for methods with no
-    // call-sites anywhere in the workspace.
-    var unusedDecIds = [];
-    var unusedTimer = null;
-    var unusedSaveDisposable = null;
-
-    if (language === 'ruby' && typeof FileService !== 'undefined' && FileService.getUnusedMethods) {
-      function refreshUnused() {
-        var path = model._mbeditorPath;
-        if (!path) return;
-        FileService.getUnusedMethods(path).then(function(data) {
-          var unused = data && Array.isArray(data.unused) ? data.unused : [];
-          var newDecs = unused.map(function(m) {
-            var lineContent = model.getLineContent(m.line);
-            var defIdx = lineContent.indexOf('def ');
-            if (defIdx < 0) return null;
-            var nameCol = defIdx + 5; // 1-based column of method name
-            return {
-              range: new monaco.Range(m.line, nameCol, m.line, nameCol + m.name.length),
-              options: {
-                inlineClassName: 'mbeditor-unused-def',
-                stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
-                hoverMessage: { value: '**Unused method** — `' + m.name + '` is never called in this application.' }
-              }
-            };
-          }).filter(Boolean);
-          unusedDecIds = editor.deltaDecorations(unusedDecIds, newDecs);
-        }).catch(function() {});
-      }
-
-      // Initial check after a short delay (server cache may not be warm yet).
-      unusedTimer = setTimeout(refreshUnused, 3000);
+    if (language === 'javascript') {
+      // Ctrl/Cmd+click — look up workspace definition; fall back to Monaco's built-in.
+      jsGotoMouseDisposable = editor.onMouseDown(function(event) {
+        var ctrlOrCmd = event.event.ctrlKey || event.event.metaKey;
+        if (!ctrlOrCmd) return;
+        if (!event.target || event.target.type !== 6) return;
+        var position = event.target.position;
+        if (!position) return;
+        var wordInfo = model.getWordAtPosition(position);
+        if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return;
+        event.event.preventDefault();
+        navigateToJsWord(editor, wordInfo.word).then(function(found) {
+          if (!found) editor.trigger('', 'editor.action.revealDefinition', null);
+        });
+      });
 
-      // Re-check after each save event (model content stops changing).
-      unusedSaveDisposable = model.onDidChangeContent(function() {
-        clearTimeout(unusedTimer);
-        unusedTimer = setTimeout(refreshUnused, 5000);
+      // F12 — go to JS definition from keyboard
+      jsGotoActionDisposable = editor.addAction({
+        id: 'mbeditor.gotoJsDefinition',
+        label: 'Go to JS Definition',
+        keybindings: [window.monaco.KeyCode.F12],
+        precondition: 'editorLangId == javascript',
+        contextMenuGroupId: 'navigation',
+        contextMenuOrder: 1.5,
+        run: function(ed) {
+          var pos = ed.getPosition();
+          if (!pos) return;
+          var wordInfo = model.getWordAtPosition(pos);
+          if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return;
+          navigateToJsWord(ed, wordInfo.word).then(function(found) {
+            if (!found) ed.trigger('', 'editor.action.revealDefinition', null);
+          });
+        }
       });
     }
 
@@ -453,10 +516,9 @@
         if (emmetTabDisposable) emmetTabDisposable.dispose();
         if (gotoMouseDisposable) gotoMouseDisposable.dispose();
         if (gotoActionDisposable) gotoActionDisposable.dispose();
+        if (jsGotoMouseDisposable) jsGotoMouseDisposable.dispose();
+        if (jsGotoActionDisposable) jsGotoActionDisposable.dispose();
         contentDisposable.dispose();
-        if (unusedSaveDisposable) unusedSaveDisposable.dispose();
-        clearTimeout(unusedTimer);
-        if (unusedDecIds.length > 0) { editor.deltaDecorations(unusedDecIds, []); }
       }
     };
   }
@@ -485,6 +547,105 @@
       });
     }
 
+    // ── React mini-UMD type declarations ────────────────────────────────────
+    // A self-contained React + JSX type stub vendored locally so Monaco's
+    // TypeScript language service has enough information to:
+    //   • complete React hooks and lifecycle methods
+    //   • resolve JSX element types (no "Cannot find name" for <div /> etc.)
+    //   • navigate to component definitions on hover / Ctrl+Click
+    // This replaces the bare `declare var React: any` that previously gave
+    // Monaco no useful type information.
+    var REACT_MINI_UMD_DTS = [
+      '// React mini-UMD — mbeditor local type stub',
+      'declare namespace React {',
+      '  type Key = string | number;',
+      '  type ReactText = string | number;',
+      '  type ReactNode = ReactElement | ReactText | boolean | null | undefined | ReactNodeArray;',
+      '  interface ReactNodeArray extends Array<ReactNode> {}',
+      '  interface ReactElement<P = any> { type: any; props: P; key: Key | null; }',
+      '  interface RefObject<T> { readonly current: T | null; }',
+      '  type Ref<T> = RefObject<T> | ((instance: T | null) => void) | null;',
+      '  interface MutableRefObject<T> { current: T; }',
+      '  type FC<P = {}> = (props: P & { children?: ReactNode; key?: Key }) => ReactElement | null;',
+      '  type FunctionComponent<P = {}> = FC<P>;',
+      '  type ComponentType<P = {}> = FC<P>;',
+      '  type DependencyList = ReadonlyArray<any>;',
+      '  type EffectCallback = () => (void | (() => void | undefined));',
+      '  type SetStateAction<S> = S | ((prevState: S) => S);',
+      '  type Dispatch<A> = (value: A) => void;',
+      '  type Reducer<S, A> = (prevState: S, action: A) => S;',
+      '  interface Context<T> { Provider: FC<{ value: T; children?: ReactNode }>; Consumer: any; displayName?: string; }',
+      '  class Component<P = {}, S = {}> {',
+      '    constructor(props: Readonly<P>);',
+      '    props: Readonly<P>;',
+      '    state: Readonly<S>;',
+      '    setState(state: SetStateAction<S>, cb?: () => void): void;',
+      '    forceUpdate(cb?: () => void): void;',
+      '    render(): ReactNode;',
+      '    componentDidMount?(): void;',
+      '    componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): void;',
+      '    componentWillUnmount?(): void;',
+      '  }',
+      '  class PureComponent<P = {}, S = {}> extends Component<P, S> {}',
+      '  function createElement(type: any, props?: any, ...children: any[]): ReactElement;',
+      '  function cloneElement(element: ReactElement, props?: any, ...children: any[]): ReactElement;',
+      '  function isValidElement(object: any): object is ReactElement;',
+      '  function createContext<T>(defaultValue: T): Context<T>;',
+      '  function forwardRef<T, P = {}>(render: (props: P, ref: Ref<T>) => ReactElement | null): FC<P & { ref?: Ref<T> }>;',
+      '  function memo<P>(comp: FC<P>, compare?: (a: P, b: P) => boolean): FC<P>;',
+      '  function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;',
+      '  function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];',
+      '  function useEffect(effect: EffectCallback, deps?: DependencyList): void;',
+      '  function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;',
+      '  function useRef<T>(initialValue: T): MutableRefObject<T>;',
+      '  function useRef<T>(initialValue: T | null): RefObject<T>;',
+      '  function useRef<T = undefined>(): MutableRefObject<T | undefined>;',
+      '  function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;',
+      '  function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;',
+      '  function useContext<T>(context: Context<T>): T;',
+      '  function useReducer<S, A>(reducer: Reducer<S, A>, initialState: S): [S, Dispatch<A>];',
+      '  function useImperativeHandle<T>(ref: Ref<T>, init: () => T, deps?: DependencyList): void;',
+      '  function useDebugValue<T>(value: T, format?: (value: T) => any): void;',
+      '  function useId(): string;',
+      '  const Fragment: any;',
+      '  const StrictMode: any;',
+      '  const Suspense: FC<{ fallback?: ReactNode; children?: ReactNode }>;',
+      '  const Children: { map<T,C>(children: any, fn: (child: C, index: number) => T): T[]; forEach(children: any, fn: (child: any, index: number) => void): void; count(children: any): number; toArray(children: any): any[]; only(children: any): ReactElement; };',
+      '  const version: string;',
+      '}',
+      '',
+      '// Allow `var React = window.React;` in host-app files without TS2300.',
+      '// Using a namespace+var combo lets Monaco see the namespace members while',
+      '// still accepting the runtime assignment pattern common in Sprockets apps.',
+      'declare var React: typeof React;',
+      '',
+      '// ReactDOM global',
+      'declare var ReactDOM: {',
+      '  render(element: React.ReactElement, container: Element | null, cb?: () => void): any;',
+      '  unmountComponentAtNode(container: Element): boolean;',
+      '  createPortal(children: React.ReactNode, container: Element): React.ReactElement;',
+      '  findDOMNode(instance: any): Element | null;',
+      '};',
+      '',
+      '// JSX intrinsic elements — wildcard so any HTML tag is accepted.',
+      '// Without this, TypeScript reports TS2339 / TS7026 for every <div> etc.',
+      'declare namespace JSX {',
+      '  interface Element extends React.ReactElement<any> {}',
+      '  interface ElementClass { render(): React.ReactNode; }',
+      '  interface ElementAttributesProperty { props: {}; }',
+      '  interface ElementChildrenAttribute { children: {}; }',
+      '  type LibraryManagedAttributes<C, P> = P;',
+      '  interface IntrinsicElements { [elem: string]: any; }',
+      '}',
+      '',
+      '// Other common Sprockets globals',
+      'declare var PropTypes: any;',
+      'declare var MaterialUI: any;',
+      'declare var $: any;',
+      'declare var jQuery: any;',
+      'interface Window { [key: string]: any; }'
+    ].join('\n');
+
     // Declare globals that are injected at runtime so checkJs doesn't flag them
     // as undefined. The buildWindowGlobalsShim() function automatically detects
     // window globals from the host application. Common Sprockets globals
@@ -492,16 +653,8 @@
     // not auto-detected, add `/* global MyComponent */` at the top of the file.
     if (monaco.languages.typescript && monaco.languages.typescript.javascriptDefaults) {
       monaco.languages.typescript.javascriptDefaults.addExtraLib(
-        [
-          'declare var React: any;',
-          'declare var ReactDOM: any;',
-          'declare var PropTypes: any;',
-          'declare var MaterialUI: any;',
-          'declare var $: any;',
-          'declare var jQuery: any;',
-          'interface Window { [key: string]: any; }'
-        ].join('\n'),
-        'inmemory://mbeditor/sprockets-globals.d.ts'
+        REACT_MINI_UMD_DTS,
+        'inmemory://mbeditor/react-mini-umd.d.ts'
       );
 
       var dynamicShim = buildWindowGlobalsShim();
@@ -517,12 +670,17 @@
       // the marker set after the worker fires and re-apply with lower severity.
       //
       // Patch markers after the TypeScript worker fires:
+      // - JS files: downgrade TS2304 ("Cannot find name") to Warning — host-app
+      //   globals injected at runtime are invisible to the language service, so
+      //   hard errors are almost always false positives. Downgrading keeps the
+      //   signal without blocking genuine undefined-variable detection.
       // - Both: downgrade TS6133 ("declared but never read") from Error to Warning.
-      // Host-app globals are handled by the dynamic window shim and explicit
-      // addExtraLib declarations above — we do not suppress TS2304 globally so
-      // that genuinely undefined names are still flagged as errors.
-      var JS_SUPPRESS_CODES = {};
-      var JS_WARN_CODES    = { '6133': true };
+      // - JS/JSX: suppress TS2300 ("Duplicate identifier") — in Sprockets apps all
+      //   open files share a global script context in Monaco's TS worker, so a
+      //   component defined in file_a.jsx looks like a redeclaration when file_b.jsx
+      //   is also open. This is a structural false positive, not a real error.
+      var JS_SUPPRESS_CODES = { '2300': true, '2451': true };
+      var JS_WARN_CODES    = { '2304': true, '6133': true };
       var TS_WARN_CODES    = { '6133': true };
       var _severityPatchActive = false;
       monaco.editor.onDidChangeMarkers(function(uris) {
@@ -554,6 +712,37 @@
         } finally {
           _severityPatchActive = false;
         }
+
+        // Auto-resolve TS2304 ("Cannot find name 'X'") for JS files by
+        // looking up the symbol in the workspace. If found, addDiscoveredGlobal
+        // declares it via addExtraLib and Monaco re-validates, removing the warning.
+        if (typeof FileService !== 'undefined' && FileService.getJsDefinition) {
+          uris.forEach(function(uri) {
+            var model = monaco.editor.getModel(uri);
+            if (!model) return;
+            var markers = monaco.editor.getModelMarkers({ resource: uri, owner: 'javascript' });
+            markers.forEach(function(m) {
+              if (String(m.code) !== '2304') return;
+              // Extract symbol name from message: "Cannot find name 'ReactWindow'."
+              var match = m.message && m.message.match(/Cannot find name '([^']+)'/);
+              if (!match) return;
+              var sym = match[1];
+              if (attemptedJsGlobals[sym]) return;
+              attemptedJsGlobals[sym] = true;
+              var modelPath = model._mbeditorPath;
+              FileService.getJsDefinition(sym)
+                .then(function(data) {
+                  var results = data && data.results;
+                  if (results && results.length && results[0].file !== modelPath) {
+                    addDiscoveredGlobal(sym);
+                  } else if (!results || !results.length) {
+                    if (isRuntimeWindowGlobal(sym)) addDiscoveredGlobal(sym);
+                  }
+                })
+                .catch(function() {});
+            });
+          });
+        }
       });
     }
 
@@ -567,14 +756,6 @@
       });
     }
 
-    // CSS for greyed-out unused method names (applied via decoration inlineClassName).
-    if (!document.getElementById('mbeditor-unused-style')) {
-      var unusedStyle = document.createElement('style');
-      unusedStyle.id = 'mbeditor-unused-style';
-      unusedStyle.textContent = '.mbeditor-unused-def { opacity: 0.35; }';
-      document.head.appendChild(unusedStyle);
-    }
-
     monaco.languages.setLanguageConfiguration('ruby', {
       comments: { lineComment: '#', blockComment: ['=begin', '=end'] },
       brackets: [['(', ')'], ['{', '}'], ['[', ']']],
@@ -607,8 +788,15 @@
           // Single-line comments
           [/#.*$/, 'comment'],
 
-          // Heredoc start — capture the terminator word into state arg
-          [/<<[-~]?(['"]?)(\w+)\1/, { token: 'string.heredoc.delimiter', next: '@heredoc.$2' }],
+          // Heredoc start — capture the terminator word; route to specialized state by delimiter name
+          [/<<[-~]?(['"]?)(\w+)\1/, {
+            cases: {
+              '$2~(?i:SQL)':        { token: 'string.heredoc.delimiter', next: '@heredocSQL.$2' },
+              '$2~(?i:HTML?)':      { token: 'string.heredoc.delimiter', next: '@heredocHTML.$2' },
+              '$2~(?i:JS|JAVASCRIPT)': { token: 'string.heredoc.delimiter', next: '@heredocJS.$2' },
+              '@default':           { token: 'string.heredoc.delimiter', next: '@heredoc.$2' }
+            }
+          }],
 
           // def + method name (handles self. prefix and operator method names)
           [/(\bdef\b)(\s+)(self)(\.)([\w]+[!?=]?|[+\-*\/%<>=!\[\]&|^~]+)/,
@@ -661,8 +849,9 @@
           [/%[qQ]?\[/, { token: 'string.quoted.double', next: '@percentDqBracket' }],
           [/%[qQ]?\{/, { token: 'string.quoted.double', next: '@percentDqCurly' }],
 
-          // Regexp literals — simplified: /pat/imxo not preceded by a word boundary that looks like division
-          [/\/(?!\s)(?:[^\/\\\n]|\\.)+\/[imxo]*/, 'string.regexp'],
+          // Regexp literals: /pat/imxo
+          // Negative lookbehind (?<![.\w]) prevents matching division operators like a/b or obj.method/n
+          [/(?<![.\w])\/(?!\s)(?:[^\/\\\n]|\\.)+\/[imxo]*/, 'string.regexp'],
 
           // Control-flow and other keywords
           [/\b(if|unless|while|until|for|do|case|when|then|else|elsif|end|return|yield|begin|rescue|ensure|raise|break|next|retry|and|or|not|in|__LINE__|__FILE__|__ENCODING__|__method__|__callee__|__dir__|alias|undef|defined\?)\b/, 'keyword.control'],
@@ -733,6 +922,7 @@
           [/\s+/, '']
         ],
 
+        // Generic heredoc — all content is string.heredoc
         heredoc: [
           [/^(\w+)\s*$/, {
             cases: {
@@ -743,6 +933,69 @@
           [/.+/, 'string.heredoc']
         ],
 
+        // SQL heredoc — keyword/string/number/comment tokenization
+        heredocSQL: [
+          [/^(\w+)\s*$/, {
+            cases: {
+              '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
+              '@default': { token: '@rematch', next: '@heredocSQLLine' }
+            }
+          }],
+          [/.+/, { token: '@rematch', next: '@heredocSQLLine' }]
+        ],
+
+        heredocSQLLine: [
+          [/--.*$/, { token: 'comment.sql', next: '@pop' }],
+          [/'[^']*'/, 'string.sql'],
+          [/\b\d+(?:\.\d+)?\b/, 'number.sql'],
+          [/\b(?:SELECT|FROM|WHERE|INSERT|UPDATE|DELETE|JOIN|LEFT|RIGHT|INNER|OUTER|ON|GROUP|ORDER|BY|HAVING|LIMIT|OFFSET|CREATE|DROP|ALTER|TABLE|INDEX|INTO|VALUES|SET|AS|AND|OR|NOT|NULL|IS|IN|LIKE|BETWEEN|DISTINCT|COUNT|SUM|AVG|MIN|MAX)\b/i, 'keyword.sql'],
+          [/[^\s\w'"-]+/, 'string.heredoc'],
+          [/\w+/, 'string.heredoc'],
+          [/$/, { token: '', next: '@pop' }]
+        ],
+
+        // HTML heredoc — tag/attribute tokenization
+        heredocHTML: [
+          [/^(\w+)\s*$/, {
+            cases: {
+              '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
+              '@default': { token: '@rematch', next: '@heredocHTMLLine' }
+            }
+          }],
+          [/.+/, { token: '@rematch', next: '@heredocHTMLLine' }]
+        ],
+
+        heredocHTMLLine: [
+          [/<\/?[a-zA-Z][a-zA-Z0-9]*/, 'tag.html'],
+          [/[a-zA-Z_:][a-zA-Z0-9_:\-\.]*(?=\s*=)/, 'attribute.name.html'],
+          [/\/?>/, 'tag.html'],
+          [/[^<>]+/, 'string.heredoc'],
+          [/$/, { token: '', next: '@pop' }]
+        ],
+
+        // JS heredoc — keyword/string/number/comment tokenization
+        heredocJS: [
+          [/^(\w+)\s*$/, {
+            cases: {
+              '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
+              '@default': { token: '@rematch', next: '@heredocJSLine' }
+            }
+          }],
+          [/.+/, { token: '@rematch', next: '@heredocJSLine' }]
+        ],
+
+        heredocJSLine: [
+          [/\/\/.*$/, { token: 'comment', next: '@pop' }],
+          [/"(?:[^"\\]|\\.)*"/, 'string'],
+          [/'(?:[^'\\]|\\.)*'/, 'string'],
+          [/`(?:[^`\\]|\\.)*`/, 'string'],
+          [/\b\d+(?:\.\d+)?\b/, 'number'],
+          [/\b(?:var|let|const|function|return|if|else|for|while|do|switch|case|break|continue|new|delete|typeof|instanceof|in|of|class|extends|import|export|default|null|undefined|true|false|this|super|async|await|try|catch|finally|throw|void|yield)\b/, 'keyword'],
+          [/[^\s\w'"`;\/]+/, 'string.heredoc'],
+          [/\w+/, 'string.heredoc'],
+          [/$/, { token: '', next: '@pop' }]
+        ],
+
         // %w[] %W[] word arrays
         percentWordBracket: [
           [/\]/, { token: 'string', next: '@pop' }],
@@ -1076,6 +1329,106 @@
       }
     });
 
+    // JS/JSX hover provider: looks up workspace definitions for window globals.
+    // Fires for mixed-case identifiers and for any symbol already in discoveredJsGlobals.
+    var JS_HOVER_CACHE_TTL_MS = 60000;
+    monaco.languages.registerHoverProvider('javascript', {
+      provideHover: function(model, position, token) {
+        var wordInfo = model.getWordAtPosition(position);
+        if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return null;
+        var word = wordInfo.word;
+        if (!discoveredJsGlobals[word] && !/[A-Z]/.test(word)) return null;
+        if (typeof FileService === 'undefined' || !FileService.getJsDefinition) return null;
+
+        // Build a position-specific range for this hover instance.
+        // The range must NOT be cached because the same symbol can appear on
+        // different lines; a stale cached lineNumber would highlight the wrong place.
+        function makeHoverRange() {
+          return new monaco.Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
+        }
+
+        var cached = jsHoverCache[word];
+        if (cached && (Date.now() - cached.ts) < JS_HOVER_CACHE_TTL_MS) {
+          if (!cached.contents) return null;
+          return { range: makeHoverRange(), contents: cached.contents };
+        }
+
+        var controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+        if (controller && token && token.onCancellationRequested) {
+          token.onCancellationRequested(function() { controller.abort(); });
+        }
+        return FileService.getJsDefinition(word, controller ? { signal: controller.signal } : {})
+          .then(function(data) {
+            if (token && token.isCancellationRequested) return null;
+            var results = data && data.results;
+            if (!results || !results.length) {
+              if (isRuntimeWindowGlobal(word)) {
+                addDiscoveredGlobal(word);
+                var kind = typeof window[word];
+                var rtContents = [{ value: '**' + word + '** — runtime global (`' + kind + '`)' }];
+                jsHoverCache[word] = { ts: Date.now(), contents: rtContents };
+                return { range: makeHoverRange(), contents: rtContents };
+              }
+              jsHoverCache[word] = { ts: Date.now(), contents: null };
+              return null;
+            }
+            var r = results[0];
+            // Only declare as global when the definition is in a different file —
+            // locally-defined functions must not get a duplicate declare var.
+            if (r.file !== model._mbeditorPath) addDiscoveredGlobal(word);
+            var fileRef = r.file + ':' + r.line;
+            var contents = [
+              { value: '```javascript\n' + r.snippet + '\n```', isTrusted: true },
+              { value: '<span style="opacity:0.55;font-size:0.9em;">' + fileRef + '</span>', isTrusted: true, supportHtml: true }
+            ];
+            jsHoverCache[word] = { ts: Date.now(), contents: contents };
+            return { range: makeHoverRange(), contents: contents };
+          }).catch(function() { return null; });
+      }
+    });
+
+    // JS/JSX member completion provider: suggests properties/methods of workspace globals after '.'.
+    // Only looks up PascalCase/mixed-case identifiers or previously discovered globals.
+    var JS_MEMBERS_CACHE_TTL_MS = 60000;
+    monaco.languages.registerCompletionItemProvider('javascript', {
+      triggerCharacters: ['.'],
+      provideCompletionItems: function(model, position) {
+        var line = model.getLineContent(position.lineNumber);
+        var col  = position.column - 2; // index of character just before the '.'
+        var end  = col;
+        while (col >= 0 && /[a-zA-Z0-9_$]/.test(line[col])) col--;
+        var symbol = line.slice(col + 1, end + 1);
+        if (!symbol || symbol.length < 2) return { suggestions: [] };
+        if (!discoveredJsGlobals[symbol] && !/^[A-Z]/.test(symbol)) return { suggestions: [] };
+        if (typeof FileService === 'undefined' || !FileService.getJsMembers) return { suggestions: [] };
+
+        var cached = jsMembersCache[symbol];
+        if (cached && (Date.now() - cached.ts) < JS_MEMBERS_CACHE_TTL_MS) {
+          return { suggestions: cached.suggestions };
+        }
+
+        return FileService.getJsMembers(symbol)
+          .then(function(data) {
+            var members = (data && data.members) || [];
+            var suggestions = members.map(function(m) {
+              return {
+                label: m.name,
+                kind: monaco.languages.CompletionItemKind.Method,
+                detail: symbol,
+                documentation: m.snippet,
+                insertText: m.name,
+                range: {
+                  startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
+                  startColumn: position.column, endColumn: position.column
+                }
+              };
+            });
+            jsMembersCache[symbol] = { ts: Date.now(), suggestions: suggestions };
+            return { suggestions: suggestions };
+          }).catch(function() { return { suggestions: [] }; });
+      }
+    });
+
     // Vim-style fold-marker folding provider.
     // Recognises {{{ (open) and }}} (close) anywhere in a line, matching the
     // convention used by vim's `foldmethod=marker`. Registered for every