flexdesk 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/tiling/shell.js

@@ -91,6 +91,10 @@ import { openForm } from '../ui/components/modal.js';
  *                                      its section that is already open, rather
  *                                      than rewriting it into a second copy of
  *                                      that list. Default off.
+ * @param {boolean}    [cfg.floatActiveTab] C34. Whether floating a tile takes
+ *                                      only the tab on screen, leaving its
+ *                                      siblings in the tile. Default off: the
+ *                                      whole pane floats, strip and all (R8).
  * @param {'top'|'bottom'} [cfg.tabLayout] C22. Where a multi-tab leaf draws its
  *                                      tabs. `'bottom'` is the framework's own
  *                                      spreadsheet strip under the tile body
@@ -128,6 +132,7 @@ export async function createShell({
     snapPromotion = false,
     promoteInPlace = false,
     backToOpenList = false,
+    floatActiveTab = false,
     tabLayout = null,
     chrome = {},
     // An embedder that moved its sections out of the top bar — into an icon
@@ -170,6 +175,7 @@ export async function createShell({
         snapPromotion,
         promoteInPlace,
         backToOpenList,
+        floatActiveTab,
         tabLayout,
         // `ctx` is the delivery vehicle for leaf-mounted chrome: tile_renderer
         // spreads it into every content factory, which is how the breadcrumb
@@ -528,7 +534,8 @@ function _tileContextMenu(wm, leafId, x, y) {
         // most of them — a menu disagreeing with its verb in the generous
         // direction is a dead control; in the mean direction it is a missing
         // feature, and this file has shipped one of each.
-        { label: 'Float this pane as a window', icon: 'web_asset',
+        { label: wm.floatActiveTab ? 'Float this tab as a window' : 'Float this pane as a window',
+          icon: 'web_asset',
           action: 'promote',
           disabled: isPanel || !leaf.content
                     || wm.renderer?.leafChrome?.(leafId)?.promote === false },

package/src/tiling/tile_renderer.js

@@ -561,7 +561,7 @@ export class TileRenderer {
                 <button class="twm-leaf__btn" data-action="split-v" title="Split vertically (Alt+V)">
                     <span class="material-symbols-outlined">splitscreen_add</span>
                 </button>
-                <button class="twm-leaf__btn" data-action="promote" title="Float this pane as a window (Alt+F)">
+                <button class="twm-leaf__btn" data-action="promote" title="Float this ${this.ctx.wm?.floatActiveTab ? 'tab' : 'pane'} as a window (Alt+F)">
                     <span class="material-symbols-outlined">web_asset</span>
                 </button>`}
             <button class="twm-leaf__btn" data-action="close" title="Close (Alt+W)">

package/src/tiling/wm.js

@@ -34,7 +34,8 @@ const PANEL_TITLES = {
 export class WindowManager {
     constructor({ rootEl, api, ctx, onChange, eventBus, host, taxonomy, events, content,
                   panelDefaults = null, snapPromotion = false,
-                  promoteInPlace = false, tabLayout = null, backToOpenList = false }) {
+                  promoteInPlace = false, tabLayout = null, backToOpenList = false,
+                  floatActiveTab = false }) {
         if (!taxonomy) throw new Error('WindowManager: a taxonomy is required');
         if (!content || typeof content.mount !== 'function') {
             throw new Error('WindowManager: a content registry is required '
@@ -57,6 +58,8 @@ export class WindowManager {
         this.ctx = ctx || {};
         this.eventBus = eventBus || null;
         this.onChange = onChange || (() => {});
+        // C34. Whether the tile's float gesture takes only the tab on screen.
+        this.floatActiveTab = !!floatActiveTab;
 
         // The leaf a fresh or emptied desktop starts with. Comes from the
         // taxonomy's root kind — NOT a hardcoded 'home'. An embedder with a
@@ -89,6 +92,20 @@ export class WindowManager {
          *  does, and an existing embedder upgrading must not find tabs closing
          *  where they used to navigate. */
         this.backToOpenList = !!backToOpenList;
+
+        // C34. BACK BELONGS TO WHAT YOU ARE LOOKING AT. A floating window is not a
+        // tile, so the tree's focus never moves to it, and Backspace pressed while
+        // reading a window used to walk the tile BEHIND it. The last pointerdown
+        // says which one the user is in: inside a window it names that window,
+        // anywhere else it clears. Capture phase, so content that stops the event
+        // cannot hide it.
+        this._backWindowId = null;
+        const doc = rootEl?.ownerDocument || globalThis.document;
+        doc?.addEventListener?.('pointerdown', (e) => {
+            const el = e.target?.closest?.('[data-window-id]');
+            this._backWindowId = el && this._windowToLeaf.has(el.getAttribute('data-window-id'))
+                ? el.getAttribute('data-window-id') : null;
+        }, true);
         this._snapCtl = null;
         this.desktops = new DesktopManager({
             seed: this._rootLeaf, panelDefaults: this.panelDefaults });
@@ -244,6 +261,8 @@ export class WindowManager {
      *  methods (openFromContext / openInLeaf / navigateActiveTab) —
      *  they all record history by default. */
     navigateBack() {
+        // C34. A window the user is reading gets the Back, not the tile under it.
+        if (this._navigateBackInWindow()) return;
         const tree = this._tree();
         // Prefer the FOCUSED leaf — that's where the user was just
         // interacting (Open click, breadcrumb step, etc.). Falls back
@@ -418,6 +437,72 @@ export class WindowManager {
         return true;
     }
 
+    /**
+     * C34. Back while a floating window is the thing being read. Returns true
+     * when it handled the press, false to let the tile path run.
+     *
+     * Only the window's ACTIVE tab is considered, in this order:
+     *   (1) with `backToOpenList`, a record closes onto an open list of its
+     *       section: first among the window's own tabs, then any tile of the
+     *       window's desktop, primary tile first. Closing the last tab closes
+     *       the window, which discards it (a plain close never docks back).
+     *   (2) otherwise it walks up IN the window, exactly as a tile does.
+     * A window whose content has nowhere to go still counts as handled: the
+     * press was aimed at it, and moving the tile behind it would be the bug.
+     */
+    _navigateBackInWindow() {
+        const winId = this._backWindowId;
+        const rec = winId ? this._windowToLeaf.get(winId) : null;
+        if (!rec) { this._backWindowId = null; return false; }
+        const tabs = Array.isArray(rec.tabs) && rec.tabs.length ? rec.tabs : [rec.original].filter(Boolean);
+        const activeIdx = Math.max(0, Math.min(tabs.length - 1, rec.activeTabIdx || 0));
+        const active = tabs[activeIdx];
+        if (!active) return true;
+        const section = this.backToOpenList && _isEntityTab(active)
+            ? this.taxonomy.topNavFor(active.kind) : null;
+        const isList = (t) => !!t && !_isEntityTab(t) && this.taxonomy.topNavFor(t.kind) === section;
+
+        if (section) {
+            // (1a) a list among the window's own tabs, nearest to the left first.
+            let own = -1;
+            for (let i = activeIdx - 1; i >= 0 && own < 0; i--) if (isList(tabs[i])) own = i;
+            for (let i = activeIdx + 1; i < tabs.length && own < 0; i++) if (isList(tabs[i])) own = i;
+            if (own >= 0 && Array.isArray(rec.tabs) && rec.tabs.length > 1) {
+                this._windowTabAction(winId, 'close', { idx: activeIdx });
+                this.showWindowTab(winId, own > activeIdx ? own - 1 : own);
+                return true;
+            }
+            // (1b) a list in a tile of the window's desktop.
+            const desk = this.desktops.desktops[rec.desktopIdx] || this.desktops.active();
+            const tree = desk.tree;
+            const leaves = tree.leaves?.() || [];
+            const primaryId = tree.primaryLeafId();
+            const ordered = [...leaves.filter((l) => l.id === primaryId), ...leaves.filter((l) => l.id !== primaryId)];
+            for (const leaf of ordered) {
+                const ltabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
+                const cur = Math.max(0, Math.min(ltabs.length - 1, leaf.activeTabIdx || 0));
+                const hit = isList(ltabs[cur]) ? cur : ltabs.findIndex(isList);
+                if (hit < 0) continue;
+                this._backWindowId = null;
+                if (Array.isArray(rec.tabs) && rec.tabs.length > 1) this._windowTabAction(winId, 'close', { idx: activeIdx });
+                else { try { rec.window.close({ force: true }); } catch { /* already gone */ } }
+                if (this.desktops.active().tree === tree) {
+                    tree.setActiveLeafTab(leaf.id, hit);
+                    tree.focus(leaf.id);
+                    this.renderer.render();
+                }
+                this._persist();
+                this._notifyChange('navigate-back-close');
+                return true;
+            }
+        }
+        // (2) walk up inside the window.
+        const up = this.taxonomy.parentOf?.(active.kind, active.props || {});
+        const parentKind = up ? up.kind : this.taxonomy.parentKindFor(active.kind);
+        if (parentKind) this.openInWindow(winId, parentKind, up ? (up.props || {}) : {});
+        return true;
+    }
+
     navigateActiveTab(leafId, kind, props = {}) {
         const tree = this._tree();
         const leaf = tree.get(leafId);
@@ -828,6 +913,14 @@ export class WindowManager {
         const tree = this._tree();
         const focused = tree.focused();
         if (!focused) return null;
+        // C34. An embedder whose tabs are separate records, not one pane's
+        // views, floats the record on screen and leaves its siblings in place.
+        // A window then holds one tab, so it draws no strip at all.
+        const tabs = Array.isArray(focused.tabs) ? focused.tabs : [];
+        if (this.floatActiveTab && tabs.length > 1) {
+            const idx = Math.max(0, Math.min(tabs.length - 1, focused.activeTabIdx || 0));
+            return this.floatTabAsWindow(focused.id, idx);
+        }
         return this.floatPane(focused.id);
     }