flexdesk 0.4.5 → 0.4.7

package/package.json

@@ -1,81 +1,81 @@
-{
-    "name": "flexdesk",
-    "version": "0.4.5",
-    "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+ssh://git@github.com/nor-os/FlexDesk.git"
-    },
-    "homepage": "https://github.com/nor-os/FlexDesk",
-    "bugs": {
-        "url": "https://github.com/nor-os/FlexDesk/issues"
-    },
-    "type": "module",
-    "sideEffects": [
-        "*.css"
-    ],
-    "files": [
-        "dist",
-        "src",
-        "css",
-        "README.md",
-        "LICENSE",
-        "THIRD_PARTY_LICENSES.md"
-    ],
-    "exports": {
-        "./core": {
-            "import": "./dist/core.js",
-            "development": "./core.js"
-        },
-        "./host": {
-            "import": "./dist/host.js",
-            "development": "./host.js"
-        },
-        "./wm": {
-            "import": "./dist/wm.js",
-            "development": "./wm.js"
-        },
-        "./widgets": {
-            "import": "./dist/widgets.js",
-            "development": "./widgets.js"
-        },
-        "./css": "./dist/flexdesk.css",
-        "./css/tokens": "./css/tokens.css",
-        "./charts": {
-            "import": "./dist/charts.js",
-            "development": "./charts.js"
-        },
-        "./tiles": {
-            "import": "./dist/tiles.js",
-            "development": "./tiles.js"
-        },
-        "./editor": {
-            "import": "./dist/editor.js",
-            "development": "./editor.js"
-        }
-    },
-    "scripts": {
-        "build": "node build.mjs",
-        "check": "node build.mjs --check",
-        "test": "node tests/run.mjs"
-    },
-    "devDependencies": {
-        "esbuild": "^0.28.1"
-    },
-    "peerDependenciesMeta": {
-        "plotly.js": {
-            "optional": true
-        },
-        "monaco-editor": {
-            "optional": true
-        }
-    },
-    "keywords": [
-        "tiling",
-        "window-manager",
-        "datatable",
-        "command-palette",
-        "ui"
-    ]
-}
+{
+    "name": "flexdesk",
+    "version": "0.4.7",
+    "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@github.com/nor-os/FlexDesk.git"
+    },
+    "homepage": "https://github.com/nor-os/FlexDesk",
+    "bugs": {
+        "url": "https://github.com/nor-os/FlexDesk/issues"
+    },
+    "type": "module",
+    "sideEffects": [
+        "*.css"
+    ],
+    "files": [
+        "dist",
+        "src",
+        "css",
+        "README.md",
+        "LICENSE",
+        "THIRD_PARTY_LICENSES.md"
+    ],
+    "exports": {
+        "./core": {
+            "import": "./dist/core.js",
+            "development": "./core.js"
+        },
+        "./host": {
+            "import": "./dist/host.js",
+            "development": "./host.js"
+        },
+        "./wm": {
+            "import": "./dist/wm.js",
+            "development": "./wm.js"
+        },
+        "./widgets": {
+            "import": "./dist/widgets.js",
+            "development": "./widgets.js"
+        },
+        "./css": "./dist/flexdesk.css",
+        "./css/tokens": "./css/tokens.css",
+        "./charts": {
+            "import": "./dist/charts.js",
+            "development": "./charts.js"
+        },
+        "./tiles": {
+            "import": "./dist/tiles.js",
+            "development": "./tiles.js"
+        },
+        "./editor": {
+            "import": "./dist/editor.js",
+            "development": "./editor.js"
+        }
+    },
+    "scripts": {
+        "build": "node build.mjs",
+        "check": "node build.mjs --check",
+        "test": "node tests/run.mjs"
+    },
+    "devDependencies": {
+        "esbuild": "^0.28.1"
+    },
+    "peerDependenciesMeta": {
+        "plotly.js": {
+            "optional": true
+        },
+        "monaco-editor": {
+            "optional": true
+        }
+    },
+    "keywords": [
+        "tiling",
+        "window-manager",
+        "datatable",
+        "command-palette",
+        "ui"
+    ]
+}

package/src/editor/notebook_tab_bar.js

@@ -61,6 +61,8 @@ export class NotebookTabBar {
         this.#container.className = 'tabs notebook-tabs';
         this.#boundHideContextMenu = () => this.#hideContextMenu();
         this.#installStripDnDHandlers();
+        // NOT PASSIVE: it has to be able to take the wheel from the page.
+        this.#container.addEventListener('wheel', this.#onWheel, { passive: false });
         this.#dragReorder = new DragReorder({
             container: this.#container,
             itemSelector: '.tab',
@@ -118,6 +120,9 @@ export class NotebookTabBar {
     dispose() {
         this.#hideContextMenu();
         this.#removeStripDnDHandlers();
+        this.#container?.removeEventListener('wheel', this.#onWheel);
+        if (this.#revealFrame) cancelAnimationFrame(this.#revealFrame);
+        this.#revealFrame = 0;
         this.#dragReorder?.destroy();
         this.#dragReorder = null;
         this.#container = null;
@@ -161,6 +166,11 @@ export class NotebookTabBar {
     #render() {
         if (!this.#container) return;
 
+        // THE STRIP KEEPS ITS SCROLL ACROSS A REBUILD. Emptying it shrinks its
+        // scroll width to nothing, which clamps `scrollLeft` to 0 — so every
+        // render (a tab activated, a title changed) threw a strip scrolled to
+        // its tenth tab back to its first.
+        const keepLeft = this.#container.scrollLeft;
         this.#container.innerHTML = '';
 
         for (const tab of this.#tabs) {
@@ -222,8 +232,87 @@ export class NotebookTabBar {
         }
         // Make the freshly-rendered tabs draggable-to-reorder.
         this.#dragReorder?.attach();
+
+        this.#container.scrollLeft = keepLeft;
+        // A tab that has just BECOME active — opened, switched to, moved here
+        // from another pane — is scrolled into the strip. Only then: a render
+        // for any other reason (a title, a dirty dot) leaves the strip where the
+        // reader put it, rather than yanking it back to the active tab.
+        const revealKey = `${this.#activeTab}\u0000${this.#tabs.length}`;
+        if (revealKey !== this.#revealedKey) {
+            this.#revealedKey = revealKey;
+            this.#revealActive(true);
+        }
     }
 
+    // ═════════════════════════════════════════════════════════════════════════
+    //  Scrolling (1.5) — the strip scrolls rather than wrapping or shrinking its
+    //  tabs, and hides its scrollbar (a bar in a 26px strip eats a third of every
+    //  label). So it owes a mouse user every other way in: a plain wheel, the
+    //  active tab brought into view, and — in `DragReorder._autoScrollEdge` —
+    //  the edges scrolling while a tab is dragged toward them.
+    // ═════════════════════════════════════════════════════════════════════════
+
+    /** @type {string|null} the active tab + count last scrolled into view */
+    #revealedKey = null;
+
+    /** @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. */
+    #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;
+        }
+        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;
+    };
+
     // ═════════════════════════════════════════════════════════════════════════
     //  Drag and drop reordering (same-pane + cross-pane)
     // ═════════════════════════════════════════════════════════════════════════

package/src/tiling/tile_breadcrumb.js

@@ -206,6 +206,27 @@ function _segments(kind, props, taxonomy, rootCrumb, rootLabel, navigate, trail)
     return segs;
 }
 
+/**
+ * C37. THE SAME STRIP FOR A CONTENT'S OWN LEVELS — the markup every tile
+ * breadcrumb draws, with segments the caller routes itself.
+ *
+ * `mountTileBreadcrumb` names where the TILE is, and every one of its segments
+ * climbs through the window manager. A page with levels that are not tabs (a
+ * section's list, one record opened in its place) has a trail the taxonomy
+ * cannot know and segments the WM cannot route; it draws them here, in the same
+ * markup and so the same look, and pairs it with a `navigateBack()` from its
+ * mount so Backspace climbs the same levels (`wm.navigateBack`, step 0).
+ *
+ * `segments` is `[{label, icon?, onClick?}]`; the last one — and any with no
+ * `onClick` — is drawn as the current one, as text. Redraws `container` in full.
+ *
+ * @param {HTMLElement} container
+ * @param {Array<{label: string, icon?: string, onClick?: Function}>} segments
+ */
+export function renderBreadcrumb(container, segments) {
+    _renderInto(container, segments);
+}
+
 function _renderInto(container, segments) {
     container.innerHTML = '';
     if (!segments?.length) return;

package/src/tiling/tile_renderer.js

@@ -839,6 +839,17 @@ export class TileRenderer {
         return (leaf && leaf.kind === 'leaf') ? this._leafKindKey(leaf) : null;
     }
 
+    /**
+     * C37. WHAT A LEAF'S CONTENT FACTORY RETURNED for the tab on screen, or
+     * `null` — so the window manager can ask the content a question about
+     * itself (`wm.navigateBack`: *"have you a level of your own to go up?"*)
+     * without reaching into the cache. Read-only; a leaf that has not been
+     * rendered yet has none.
+     */
+    contentOf(leafId) {
+        return this._leafCache.get(leafId)?.content ?? null;
+    }
+
     /**
      * C34. ACCEPT A PROPS WRITE THE CONTENT MADE ABOUT ITSELF, WITHOUT
      * REBUILDING THE TILE THAT MADE IT.