flexdesk 0.16.0 → 0.17.0

package/src/editor/monaco_editor_factory.js

@@ -5,7 +5,8 @@
  * Handles:
  *   - Creating full editors (multi-line, for CodeCells)
  *   - Creating single-line inline editors (for ParameterCell values, expression fields)
- *   - Theme registration (ecosim-dark, ecosim-light)
+ *   - Theme registration (built-in dark and light themes, names set by
+ *     setEditorThemeNames(); default flexdesk-dark, flexdesk-light)
  *   - Shared editor options
  *   - Instance lifecycle (dispose on cell removal)
  */
@@ -28,7 +29,7 @@ function safeDispose(editor) {
 
 // ─── Theme definitions ─────────────────────────────────────────────────────────
 
-const ECOSIM_DARK_THEME = {
+const DARK_THEME = {
     base: 'vs-dark',
     inherit: true,
     rules: [
@@ -74,7 +75,7 @@ const ECOSIM_DARK_THEME = {
     },
 };
 
-const ECOSIM_LIGHT_THEME = {
+const LIGHT_THEME = {
     base: 'vs',
     inherit: true,
     rules: [
@@ -108,13 +109,47 @@ const ECOSIM_LIGHT_THEME = {
     },
 };
 
-let _themesRegistered = false;
+/** The names the built-in themes are registered under when the embedder
+ *  names none. */
+export const DEFAULT_EDITOR_THEME_NAMES = Object.freeze({
+    dark: 'flexdesk-dark',
+    light: 'flexdesk-light',
+});
+
+let _themeNames = DEFAULT_EDITOR_THEME_NAMES;
+
+/**
+ * Name the built-in dark and light Monaco themes. Call before the first
+ * factory is created: a factory starts on the dark name, and init() registers
+ * the built-in themes under the names current at that moment. An embedder with
+ * its own theme defines it with `monaco.editor.defineTheme(name, …)` and passes
+ * that name to `factory.setTheme(name)` instead.
+ *
+ * @param {{ dark?: string, light?: string }} [names]
+ */
+export function setEditorThemeNames({ dark, light } = {}) {
+    _themeNames = Object.freeze({
+        dark: (typeof dark === 'string' && dark) ? dark : DEFAULT_EDITOR_THEME_NAMES.dark,
+        light: (typeof light === 'string' && light) ? light : DEFAULT_EDITOR_THEME_NAMES.light,
+    });
+}
+
+/** @returns {{ dark: string, light: string }} The built-in themes' names. */
+export function getEditorThemeNames() {
+    return _themeNames;
+}
+
+/** Monaco instance -> names already defined on it, so each name is defined once. */
+const _definedThemes = new WeakMap();
 
 function ensureThemes(monaco) {
-    if (_themesRegistered) return;
-    _themesRegistered = true;
-    monaco.editor.defineTheme('ecosim-dark',  ECOSIM_DARK_THEME);
-    monaco.editor.defineTheme('ecosim-light', ECOSIM_LIGHT_THEME);
+    let defined = _definedThemes.get(monaco);
+    if (!defined) { defined = new Set(); _definedThemes.set(monaco, defined); }
+    for (const [name, theme] of [[_themeNames.dark, DARK_THEME], [_themeNames.light, LIGHT_THEME]]) {
+        if (defined.has(name)) continue;
+        defined.add(name);
+        monaco.editor.defineTheme(name, theme);
+    }
 }
 
 // ─── Shared editor options ─────────────────────────────────────────────────────
@@ -122,7 +157,7 @@ function ensureThemes(monaco) {
 function baseOptions(overrides = {}) {
     return {
         language: _defaultLanguage,
-        theme: 'ecosim-dark',
+        theme: _themeNames.dark,
         fontFamily: 'Consolas, "Courier New", monospace',
         fontSize: 13,
         lineHeight: 19.5,
@@ -177,15 +212,23 @@ function singleLineOptions(overrides = {}) {
     });
 }
 
+/** A cap is a positive number of px, or `Infinity` for none. */
+function checkMaxHeight(px) {
+    if (typeof px !== 'number' || Number.isNaN(px) || px <= 0) {
+        throw new RangeError(`maxHeight must be a positive number of px or Infinity, got ${String(px)}`);
+    }
+    return px;
+}
+
 // ─── Factory ───────────────────────────────────────────────────────────────────
 
 /**
- * @typedef {{ editor: object, dispose: () => void, getValue: () => string, setValue: (v: string) => void, onDidChange: (cb: () => void) => object }} EditorHandle
+ * @typedef {{ editor: object, dispose: () => void, getValue: () => string, setValue: (v: string) => void, onDidChange: (cb: () => void) => object, setMaxHeight?: (px: number) => void }} EditorHandle
  */
 
 export class MonacoEditorFactory {
     #monaco = null;
-    #currentTheme = 'ecosim-dark';
+    #currentTheme = _themeNames.dark;
 
     constructor() {}
 
@@ -199,7 +242,8 @@ export class MonacoEditorFactory {
 
     /**
      * Set global theme for all editors.
-     * @param {'ecosim-dark'|'ecosim-light'} theme
+     * @param {string} theme  A theme name Monaco knows: one of
+     *   getEditorThemeNames(), or one the embedder defined itself.
      */
     setTheme(theme) {
         this.#currentTheme = theme;
@@ -207,17 +251,26 @@ export class MonacoEditorFactory {
     }
 
     /**
-     * Create a full multi-line editor (for CodeCell).
+     * Create a full multi-line editor.
+     *
+     * Unless `noAutoHeight` is set, the editor sizes `container` to its content,
+     * never below `setMinHeight()` (80px by default) and never above `maxHeight`.
+     * Past the cap, Monaco scrolls internally and handles the mouse wheel; below
+     * it, Monaco leaves the wheel alone, so it reaches whatever scrolls around
+     * the editor.
      *
      * @param {HTMLElement} container
      * @param {string} initialValue
-     * @param {{ language?: string, readOnly?: boolean, lineNumbers?: string } & object} [overrides]
+     * @param {{ language?: string, readOnly?: boolean, lineNumbers?: string, maxHeight?: number, noAutoHeight?: boolean } & object} [overrides]
+     *     `maxHeight`: the auto-height cap in px, `Infinity` (the default) for none.
+     *     `noAutoHeight`: leave the container's size to its layout; the wheel always scrolls the editor.
      * @returns {EditorHandle}
      */
     createEditor(container, initialValue = '', overrides = {}) {
         if (!this.#monaco) throw new Error('MonacoEditorFactory not initialized');
 
-        const { noAutoHeight, ...editorOverrides } = overrides;
+        const { noAutoHeight, maxHeight: maxHeightOption = Infinity, ...editorOverrides } = overrides;
+        let maxHeight = checkMaxHeight(maxHeightOption);
 
         const editor = this.#monaco.editor.create(container, {
             ...baseOptions({ theme: this.#currentTheme }),
@@ -225,17 +278,9 @@ export class MonacoEditorFactory {
             ...editorOverrides,
         });
 
-        // Auto-resize to content height.
-        // When the "limit code cell height" setting is active (data-code-max-height="true"
-        // on the editor container), cap at 400px so Monaco handles internal scrolling.
-        // Otherwise, grow to fit all content with no upper bound.
-        //
-        // Monaco's handleMouseWheel is toggled dynamically: disabled when the editor
-        // auto-sizes to fit content (so wheel events propagate to the notebook scroller),
-        // enabled only when content is capped and there is actual internal overflow.
-        //
-        // When noAutoHeight is true, skip auto-sizing entirely and let the container
-        // control dimensions (e.g. flex layout). Mouse wheel scrolling stays enabled.
+        // Monaco's handleMouseWheel is toggled with the height: off while the
+        // editor fits its content (the wheel scrolls the page around it), on only
+        // when the content overflows the cap and the editor has something to scroll.
         let minHeight = 80;
         let heightDisposable = null;
         let updateHeight = null;
@@ -243,29 +288,16 @@ export class MonacoEditorFactory {
             editor.updateOptions({ scrollbar: { handleMouseWheel: true } });
         } else {
             updateHeight = () => {
-                const maxHeightEnabled = container.closest('.notebook-editor-container')?.dataset.codeMaxHeight === 'true';
-                const maxH = maxHeightEnabled ? 400 : Infinity;
                 const rawContent = editor.getContentHeight();
-                const contentHeight = Math.min(maxH, Math.max(minHeight, rawContent));
+                const contentHeight = Math.min(maxHeight, Math.max(minHeight, rawContent));
                 container.style.height = `${contentHeight}px`;
                 editor.layout();
-
-                // Enable Monaco wheel handling only when content overflows the capped height
-                const needsInternalScroll = maxHeightEnabled && rawContent > maxH;
-                editor.updateOptions({ scrollbar: { handleMouseWheel: needsInternalScroll } });
+                editor.updateOptions({ scrollbar: { handleMouseWheel: rawContent > maxHeight } });
             };
             heightDisposable = editor.onDidContentSizeChange(updateHeight);
             updateHeight();
         }
 
-        // Re-evaluate height when the code-max-height setting changes on the ancestor
-        const editorContainer = container.closest('.notebook-editor-container');
-        let maxHeightObserver = null;
-        if (updateHeight && editorContainer) {
-            maxHeightObserver = new MutationObserver(() => updateHeight());
-            maxHeightObserver.observe(editorContainer, { attributes: true, attributeFilter: ['data-code-max-height'] });
-        }
-
         // Scroll the find widget into view when it becomes visible.
         // The editor auto-sizes to content (no internal scroll), so the notebook
         // container scrolls instead. The find widget sits at top:0 of the editor,
@@ -296,10 +328,14 @@ export class MonacoEditorFactory {
             focus: () => editor.focus(),
             layout: () => editor.layout(),
             setMinHeight: (h) => { minHeight = h; },
+            /** The auto-height cap in px, `Infinity` for none; applies at once. No effect with `noAutoHeight`. */
+            setMaxHeight: (px) => {
+                maxHeight = checkMaxHeight(px);
+                updateHeight?.();
+            },
             updateHeight,
             dispose: () => {
                 findWidgetObserver?.disconnect();
-                maxHeightObserver?.disconnect();
                 heightDisposable?.dispose();
                 safeDispose(editor);
             },
@@ -391,8 +427,12 @@ export class MonacoEditorFactory {
         const monaco = this.#monaco;
         const language = options.language || 'plaintext';
 
-        const originalModel = monaco.editor.createModel(originalContent, language);
-        const modifiedModel = monaco.editor.createModel(modifiedContent, language);
+        // The pair currently attached to the diff editor. setModels() replaces it, and
+        // dispose() frees whichever pair is attached at that moment — not the first one.
+        let models = {
+            original: monaco.editor.createModel(originalContent, language),
+            modified: monaco.editor.createModel(modifiedContent, language),
+        };
 
         const diffEditor = monaco.editor.createDiffEditor(container, {
             theme: this.#currentTheme,
@@ -408,28 +448,37 @@ export class MonacoEditorFactory {
             enableSplitViewResizing: true,
         });
 
-        diffEditor.setModel({ original: originalModel, modified: modifiedModel });
+        diffEditor.setModel(models);
 
         return {
             editor: diffEditor,
             setModels(original, modified, lang) {
-                originalModel.dispose();
-                modifiedModel.dispose();
-                const newOrig = monaco.editor.createModel(original, lang || language);
-                const newMod = monaco.editor.createModel(modified, lang || language);
-                diffEditor.setModel({ original: newOrig, modified: newMod });
+                const previous = models;
+                models = {
+                    original: monaco.editor.createModel(original, lang || language),
+                    modified: monaco.editor.createModel(modified, lang || language),
+                };
+                // Attach the new pair first: a model must not be disposed while the
+                // diff editor still holds it.
+                diffEditor.setModel(models);
+                safeDispose(previous.original);
+                safeDispose(previous.modified);
             },
             dispose() {
                 safeDispose(diffEditor);
-                safeDispose(originalModel);
-                safeDispose(modifiedModel);
+                safeDispose(models.original);
+                safeDispose(models.modified);
             },
         };
     }
 }
 
-/** Singleton instance, initialized lazily. */
-let _factoryInstance = null;
+/**
+ * The singleton, as a promise: concurrent callers share one load, and a FAILED
+ * load clears it so the next call can retry.
+ * @type {Promise<MonacoEditorFactory> | null}
+ */
+let _factoryPromise = null;
 
 // Where the app keeps Monaco. Set once, at boot.
 let _monacoBasePath = null;
@@ -439,11 +488,26 @@ export function setMonacoBasePath(basePath) {
     if (typeof basePath === 'string' && basePath) _monacoBasePath = basePath;
 }
 
-export async function getEditorFactory() {
-    if (!_factoryInstance) {
-        // Ensure Monaco is initialized — initMonaco is idempotent, safe to call from any entry point
-        initMonaco(_monacoBasePath);
-        _factoryInstance = await new MonacoEditorFactory().init();
+/**
+ * The shared editor factory, once Monaco has loaded.
+ *
+ * Uses a load already started by initMonaco(path), so a consumer that calls
+ * initMonaco() itself needs no setMonacoBasePath(). Otherwise it starts one
+ * from setMonacoBasePath()'s path.
+ *
+ * Rejects — rather than pending forever (BUG-0023) — with initMonaco()'s error
+ * when no path was set and no load was started, or when Monaco cannot be
+ * loaded. A later call asks initMonaco() again: after a loader.js failure that
+ * is a fresh attempt (fix the path first); after an AMD-level failure it is
+ * the same rejection, because that one is final for the page.
+ *
+ * @returns {Promise<MonacoEditorFactory>}
+ */
+export function getEditorFactory() {
+    if (!_factoryPromise) {
+        _factoryPromise = initMonaco(_monacoBasePath)
+            .then(() => new MonacoEditorFactory().init())
+            .catch((err) => { _factoryPromise = null; throw err; });
     }
-    return _factoryInstance;
+    return _factoryPromise;
 }

package/src/editor/monaco_loader.js

@@ -8,9 +8,34 @@
  */
 
 let _resolveMonaco;
-let _monacoReady = false;
 
-/** @type {Promise<typeof monaco>} */
+/**
+ * The attempt in flight, the one that succeeded, or one that failed for good.
+ *
+ * Whether a failure is retryable depends on how far the attempt got:
+ *
+ *   - vs/loader.js did not load (a 404, a wrong path): nothing is left behind,
+ *     so the attempt is cleared and the next initMonaco() starts over. The flag
+ *     this replaced was set BEFORE loader.js had loaded, so one 404 blocked
+ *     every retry for the life of the page (BUG-0023).
+ *   - Monaco's AMD loader reported an error (vs/editor/editor.main or one of
+ *     its dependencies failed): FINAL for the page. window.require is now
+ *     Monaco's loader, which records the failed module as complete-with-error
+ *     and hands every later require() of it the same error — it has no undef.
+ *     Retrying cannot help, so the rejected attempt is kept and every caller
+ *     gets that one error. Recovering takes a page reload.
+ * @type {Promise<typeof monaco> | null}
+ */
+let _attempt = null;
+
+/**
+ * Resolves with the `monaco` namespace once any initMonaco() call has loaded it.
+ *
+ * It never rejects, because a failed attempt is not final — a later
+ * initMonaco() may still succeed. To learn that an attempt FAILED, await
+ * initMonaco() (or getEditorFactory()), which rejects.
+ * @type {Promise<typeof monaco>}
+ */
 export const monacoReady = new Promise(resolve => { _resolveMonaco = resolve; });
 
 function injectLoaderScript(src) {
@@ -18,21 +43,67 @@ function injectLoaderScript(src) {
         const s = document.createElement('script');
         s.src = src;
         s.onload = resolve;
-        s.onerror = () => reject(new Error(`Failed to load Monaco loader: ${src}`));
+        s.onerror = () => {
+            // Take the dead tag out, so a retry is a fresh request and not a
+            // second tag beside the first.
+            s.remove?.();
+            reject(new Error(`Failed to load Monaco loader: ${src}`));
+        };
         document.head.appendChild(s);
     });
 }
 
 function injectMonacoCss(basePath) {
     const id = 'monaco-editor-css';
-    if (document.getElementById(id)) return;
+    const href = `${basePath}/vs/editor/editor.main.css`;
+    const existing = document.getElementById(id);
+    if (existing) {
+        // A retry with a corrected path must not keep the stylesheet of the bad one.
+        if (existing.getAttribute?.('href') !== href) existing.setAttribute?.('href', href);
+        return;
+    }
     const link = document.createElement('link');
     link.id = id;
     link.rel = 'stylesheet';
-    link.href = `${basePath}/vs/editor/editor.main.css`;
+    link.href = href;
     document.head.appendChild(link);
 }
 
+function requireEditorMain(basePath) {
+    return new Promise((resolve, reject) => {
+        window.require.config({
+            paths: { vs: `${basePath}/vs` },
+            'vs/nls': { availableLanguages: {} },
+        });
+        window.require(['vs/editor/editor.main'], () => {
+            if (window.monaco) resolve(window.monaco);
+            else reject(new Error(
+                `[twm/editor] vs/editor/editor.main loaded from ${basePath}/vs but did not `
+                + 'set window.monaco.'));
+        }, (err) => {
+            reject(new Error(
+                `[twm/editor] Failed to load Monaco from ${basePath}/vs: ${err?.message ?? err}. `
+                + 'Monaco\'s AMD loader caches this failure, so it is final for this page: '
+                + 'fix the path and reload.'));
+        });
+    });
+}
+
+async function loadMonaco(basePath) {
+    // Inject CSS and loader.js dynamically — kept out of the HTML to avoid global bleed
+    injectMonacoCss(basePath);
+    if (!window.require) {
+        const src = `${basePath}/vs/loader.js`;
+        await injectLoaderScript(src);
+        if (!window.require) {
+            throw new Error(
+                `[twm/editor] ${src} loaded but did not define window.require; `
+                + 'is it Monaco\'s vs/loader.js?');
+        }
+    }
+    return requireEditorMain(basePath);
+}
+
 /**
  * Call once when the notebook page initialises.
  * Where Monaco lives is the CONSUMER's business.
@@ -43,32 +114,36 @@ function injectMonacoCss(basePath) {
  *
  * Monaco is a PEER dependency — 14 MB this bundle deliberately does not contain.
  *
- * @param {string} basePath Path prefix for the vs/ directory. REQUIRED.
+ * Idempotent: while an attempt is in flight or has succeeded, every caller
+ * gets the same promise, whatever path it passes or whether it passes one —
+ * so getEditorFactory() piggybacks on a load the consumer started here.
+ *
+ * The returned promise REJECTS when no path is given and no attempt exists,
+ * when loader.js fails to load, or when Monaco's AMD loader reports an error.
+ * After a loader.js failure the next call tries again (with the path it is
+ * given). An AMD-level failure is final for the page: every later call gets
+ * the same rejection, and only a reload recovers (see `_attempt`).
+ *
+ * @param {string} [basePath] Path prefix for the vs/ directory. REQUIRED
+ *     unless an attempt is already in flight or has succeeded.
+ * @returns {Promise<typeof monaco>}
  */
-export async function initMonaco(basePath) {
+export function initMonaco(basePath) {
+    if (_attempt) return _attempt;
     if (!basePath) {
-        throw new Error(
+        return Promise.reject(new Error(
             '[twm/editor] initMonaco() needs the path to your copy of Monaco, e.g. '
             + "initMonaco('vendor/monaco'). Monaco is a peer dependency; the library "
-            + 'does not guess where you put it.');
+            + 'does not guess where you put it.'));
     }
-    if (_monacoReady) return monacoReady;
-    _monacoReady = true;
-
-    // Inject CSS and loader.js dynamically — kept out of the HTML to avoid global bleed
-    injectMonacoCss(basePath);
-    if (!window.require) {
-        await injectLoaderScript(`${basePath}/vs/loader.js`);
-    }
-
-    window.require.config({
-        paths: { vs: `${basePath}/vs` },
-        'vs/nls': { availableLanguages: {} },
-    });
-
-    window.require(['vs/editor/editor.main'], () => {
-        _resolveMonaco(window.monaco);
-    });
-
-    return monacoReady;
+    const attempt = loadMonaco(basePath).then(
+        (m) => { _resolveMonaco(m); return m; },
+        (err) => {
+            // Monaco's AMD loader is installed only once loader.js has run; a
+            // failure before that leaves nothing cached and can be retried.
+            if (!window.require && _attempt === attempt) _attempt = null;
+            throw err;
+        });
+    _attempt = attempt;
+    return attempt;
 }

package/src/editor/notebook_tab_bar.js

@@ -23,9 +23,29 @@
  */
 
 import { DragReorder } from '../ui/components/drag_reorder.js';
+import { revealInStrip, wheelStripSideways } from '../ui/utils/strip_scroll.js';
 
-/** Custom MIME type so tab bars recognise cross-pane drags. */
-const TAB_MIME = 'application/x-ecosim-tab';
+/** The MIME type a dragged editor tab carries when the embedder names none. */
+export const DEFAULT_TAB_DRAG_MIME = 'application/x-flexdesk-tab';
+
+/** Custom MIME type so tab bars and editor panes recognise cross-pane drags. */
+let _tabMime = DEFAULT_TAB_DRAG_MIME;
+
+/**
+ * Name the MIME type editor tabs carry while dragged. Every NotebookTabBar and
+ * EditorPane in the document reads it at drag time, so they always agree.
+ * Call at boot, before the first drag.
+ *
+ * @param {string} [mime=DEFAULT_TAB_DRAG_MIME]
+ */
+export function setTabDragMime(mime = DEFAULT_TAB_DRAG_MIME) {
+    _tabMime = (typeof mime === 'string' && mime) ? mime : DEFAULT_TAB_DRAG_MIME;
+}
+
+/** @returns {string} The MIME type editor tabs carry while dragged. */
+export function getTabDragMime() {
+    return _tabMime;
+}
 
 export class NotebookTabBar {
     /** @type {HTMLElement} */
@@ -75,7 +95,7 @@ export class NotebookTabBar {
             },
             onDragStart: (e, key, item) => {
                 // Carry the cross-pane MIME so other panes accept this tab.
-                try { e.dataTransfer.setData(TAB_MIME, key); } catch (_) {}
+                try { e.dataTransfer.setData(_tabMime, key); } catch (_) {}
                 // C33. …AND LET THE HOST ADD ITS OWN, which is the whole of
                 // what a second consumer of this strip needs from it.
                 //
@@ -87,7 +107,7 @@ export class NotebookTabBar {
                 // tabs — a different question from "is this an editor tab",
                 // asked of the same gesture.
                 //
-                // ADDITIVE BY CONSTRUCTION: `TAB_MIME` is set first and
+                // ADDITIVE BY CONSTRUCTION: the tab MIME is set first and
                 // unchanged, so `EditorPane`'s existing cross-pane drop cannot
                 // notice that anyone else is listening.
                 try { this.#callbacks.onDragStart?.(e, key, item); }
@@ -259,59 +279,25 @@ export class NotebookTabBar {
     /** @type {number} a pending retry, for a strip not yet laid out */
     #revealFrame = 0;
 
-    /** Bring the active tab fully into the strip — and ONLY the strip. Not
-     *  `scrollIntoView`, which scrolls every scrollable ancestor as well and
-     *  would drag the tile, the window or the page along with the tab. */
+    /** Bring the active tab fully into the strip (`revealInStrip`). */
     #revealActive(retry = false) {
         const el = this.#container;
         if (!el) return;
         const active = el.querySelector(':scope > .tab.active');
         if (!active) return;
-        if (!el.isConnected || el.clientWidth === 0) {
-            // Mounted but not laid out yet (the renderer updates a strip before
-            // it attaches it). Once, on the next frame — not a loop.
-            if (retry && !this.#revealFrame && typeof requestAnimationFrame === 'function') {
-                this.#revealFrame = requestAnimationFrame(() => {
-                    this.#revealFrame = 0;
-                    this.#revealActive(false);
-                });
-            }
-            return;
+        // Mounted but not laid out yet (the renderer updates a strip before it
+        // attaches it). Once, on the next frame — not a loop.
+        if (!revealInStrip(el, active) && retry && !this.#revealFrame
+            && typeof requestAnimationFrame === 'function') {
+            this.#revealFrame = requestAnimationFrame(() => {
+                this.#revealFrame = 0;
+                this.#revealActive(false);
+            });
         }
-        const box = el.getBoundingClientRect();
-        const tab = active.getBoundingClientRect();
-        // Client pixels to the strip's own: 1 unless something above it zooms.
-        const scale = (el.offsetWidth ? box.width / el.offsetWidth : 1) || 1;
-        const left = (tab.left - box.left) / scale + el.scrollLeft;
-        const right = left + tab.width / scale;
-        if (left < el.scrollLeft) el.scrollLeft = left;
-        else if (right > el.scrollLeft + el.clientWidth) el.scrollLeft = right - el.clientWidth;
     }
 
-    /**
-     * A VERTICAL WHEEL SCROLLS THE STRIP SIDEWAYS. Chromium and Firefox scroll
-     * an element that overflows only horizontally with Shift+wheel or a
-     * touchpad, and not with the plain wheel most people have — so with the
-     * scrollbar hidden, every tab past the edge was unreachable with a mouse.
-     *
-     * The wheel is taken from the page only while the strip can actually move
-     * that way: at either end it is left alone, so a wheel over a strip that
-     * has nothing more to show still scrolls whatever is behind it. A gesture
-     * that is already horizontal (a touchpad, Shift+wheel) and Ctrl+wheel (zoom)
-     * are the browser's, untouched.
-     */
-    #onWheel = (e) => {
-        const el = this.#container;
-        if (!el || e.ctrlKey || e.shiftKey) return;
-        if (Math.abs(e.deltaX) >= Math.abs(e.deltaY)) return;
-        const room = el.scrollWidth - el.clientWidth;
-        if (room <= 0) return;
-        const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? el.clientWidth : 1;
-        const next = Math.max(0, Math.min(room, el.scrollLeft + e.deltaY * unit));
-        if (Math.abs(next - el.scrollLeft) < 0.5) return;
-        e.preventDefault();
-        el.scrollLeft = next;
-    };
+    /** A vertical wheel scrolls the strip sideways (`wheelStripSideways`). */
+    #onWheel = (e) => wheelStripSideways(this.#container, e);
 
     // ═════════════════════════════════════════════════════════════════════════
     //  Drag and drop reordering (same-pane + cross-pane)
@@ -335,7 +321,7 @@ export class NotebookTabBar {
      *
      *  C33. A HOST MAY NAME A SECOND MIME, at mount, as
      *  `callbacks.externalTabMimes` — the tile renderer's tabs are not editor
-     *  tabs and do not carry `application/x-ecosim-tab`, so without this the
+     *  tabs and do not carry the editor tab MIME (getTabDragMime()), so without this the
      *  strip in tile B would refuse a tab dragged out of tile A's strip. Empty
      *  by default, so every existing consumer keeps exactly today's admission
      *  test.
@@ -353,7 +339,7 @@ export class NotebookTabBar {
             ? this.#callbacks.externalTabMimes : [];
         try {
             const types = e.dataTransfer.types;
-            return types.includes(TAB_MIME) || extra.some((m) => types.includes(m));
+            return types.includes(_tabMime) || extra.some((m) => types.includes(m));
         } catch { return false; }
     }
 
@@ -374,7 +360,7 @@ export class NotebookTabBar {
         if (this.#isExternalTabDrag(e)) {
             e.preventDefault();
             this.#container.classList.remove('notebook-tabs--drop-target');
-            const filePath = e.dataTransfer.getData(TAB_MIME) || e.dataTransfer.getData('text/plain');
+            const filePath = e.dataTransfer.getData(_tabMime) || e.dataTransfer.getData('text/plain');
             if (filePath) {
                 this.#callbacks.onDropFromOtherPane?.(filePath);
             }

package/src/editor/split_pane_container.js

@@ -114,17 +114,20 @@ export class SplitPaneContainer {
 
         if (!this.#pane1) return;
 
+        // ADD the class, never assign it: a pane is the caller's element
+        // (an EditorPane root is `.editor-pane`), and its own classes are
+        // what its stylesheet reaches it by.
         if (!this.#isSplit) {
             // Single pane: fills container
-            this.#pane1.className = 'split-pane';
+            this.#pane1.classList.add('split-pane');
             this.#pane1.style.flex = '1 1 0';
             this.#pane1.style.minWidth = '0';
             this.#container.appendChild(this.#pane1);
             this.#container.classList.remove('split-pane-container--split');
         } else {
             // Split view
-            this.#pane1.className = 'split-pane';
-            this.#pane2.className = 'split-pane';
+            this.#pane1.classList.add('split-pane');
+            this.#pane2.classList.add('split-pane');
             this.#pane1.style.minWidth = '0';
             this.#pane2.style.minWidth = '0';