flexdesk 0.9.1 → 0.10.0

package/package.json

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

package/src/tiling/desktops.js

@@ -47,6 +47,9 @@ function _makeDesktop(label, seed, panelDefaults = DEFAULT_PANEL_STATE) {
         // when it asked for nothing. Names are assigned by wm._canonicalize via
         // PANEL_TITLES.
         panels: { ...panelDefaults },
+        // C40. Both unset is a desktop exactly as it always was.
+        group: null,
+        fixed: false,
     };
 }
 
@@ -66,6 +69,9 @@ export class DesktopManager {
         this.panelDefaults = { ...DEFAULT_PANEL_STATE, ...(panelDefaults || {}) };
         this.desktops = [_makeDesktop('1', seed, this.panelDefaults)];
         this.activeIdx = 0;
+        // C40. group → the id of the member last on screen, which is where the
+        // group's chip goes back to.
+        this.lastInGroup = new Map();
     }
 
     active() { return this.desktops[this.activeIdx]; }
@@ -74,9 +80,62 @@ export class DesktopManager {
         if (idx < 0 || idx >= this.desktops.length) return false;
         if (idx === this.activeIdx) return false;
         this.activeIdx = idx;
+        const d = this.desktops[idx];
+        if (d.group) this.lastInGroup.set(d.group, d.id);
         return true;
     }
 
+    /**
+     * ══ C40. WHAT THE DESKTOP BAR DRAWS — ONE CHIP PER GROUP ═══════════════
+     *
+     * An embedder may give desktops a `group` and mark them `fixed`. Desktops
+     * that share a group are ONE stop for the user — one chip in the bar, one
+     * step of Ctrl+Left/Right — and the chip goes back to whichever member was
+     * last on screen; which member that is, is the embedder's business (Tables
+     * keeps one desktop per page under a "Workbench" group, and the rail picks
+     * among them). A `fixed` desktop is the embedder's own: the bar offers no
+     * rename and no delete for it, and no menu offers it as a "Move to"
+     * destination.
+     *
+     * With no group set anywhere this is one chip per desktop, in order — the
+     * bar every existing embedder has.
+     *
+     * @returns {Array<{ idx: number, label: string, group: string|null,
+     *   fixed: boolean, active: boolean, members: number[] }>} `idx` is the
+     *   desktop the chip switches to.
+     */
+    chips() {
+        const out = [];
+        const byGroup = new Map();
+        this.desktops.forEach((d, i) => {
+            if (!d.group) {
+                out.push({ idx: i, label: d.label, group: null, fixed: !!d.fixed,
+                           active: i === this.activeIdx, members: [i] });
+                return;
+            }
+            let chip = byGroup.get(d.group);
+            if (!chip) {
+                chip = { idx: i, label: d.group, group: d.group, fixed: true,
+                         active: false, members: [] };
+                byGroup.set(d.group, chip);
+                out.push(chip);
+            }
+            chip.members.push(i);
+            if (i === this.activeIdx) chip.active = true;
+        });
+        for (const chip of byGroup.values()) {
+            if (chip.active) { chip.idx = this.activeIdx; continue; }
+            const last = this.lastInGroup.get(chip.group);
+            const at = last ? this.desktops.findIndex((d) => d.id === last) : -1;
+            if (at >= 0 && this.desktops[at].group === chip.group) chip.idx = at;
+        }
+        return out;
+    }
+
+    /** C40. Whether any desktop belongs to a group — the bar's cue to stop
+     *  promising "Alt+N" on its chips, which then no longer count desktops. */
+    hasGroups() { return this.desktops.some((d) => !!d.group); }
+
     ensureCount(n) {
         while (this.desktops.length < n) {
             this.desktops.push(_makeDesktop(
@@ -85,8 +144,10 @@ export class DesktopManager {
     }
 
     addDesktop(label = null) {
-        const d = _makeDesktop(
-            label || String(this.desktops.length + 1), this.seed, this.panelDefaults);
+        // C40. Numbered among the desktops a user makes, so the first one added
+        // beside an embedder's grouped desktops is "1" rather than "13".
+        const n = this.desktops.filter((d) => !d.group).length + 1;
+        const d = _makeDesktop(label || String(n), this.seed, this.panelDefaults);
         this.desktops.push(d);
         return d;
     }
@@ -98,6 +159,10 @@ export class DesktopManager {
                 id: d.id, label: d.label,
                 tree: d.tree.serialize(),
                 panels: { ...d.panels },
+                // C40. Written only when set, so a blob without them is
+                // byte-for-byte the blob it always was.
+                ...(d.group ? { group: d.group } : {}),
+                ...(d.fixed ? { fixed: true } : {}),
                 // windows serialized at WM level since we don't own
                 // managed-window state in this module.
             })),
@@ -117,12 +182,16 @@ export class DesktopManager {
             // this merge order avoids. The default only fills a key the stored
             // blob predates.
             panels: { ...m.panelDefaults, ...(raw.panels || {}) },
+            group: raw.group || null,
+            fixed: !!raw.fixed,
         }));
         // Empty tree → seed with the taxonomy root so the desktop is usable.
         for (const d of m.desktops) {
             if (!d.tree.rootId) d.tree.setRoot(makeLeaf(seed()));
         }
         m.activeIdx = Math.min(Math.max(0, blob.activeIdx | 0), m.desktops.length - 1);
+        const active = m.desktops[m.activeIdx];
+        if (active.group) m.lastInGroup.set(active.group, active.id);
         return m;
     }
 }

package/src/tiling/shell.js

@@ -118,6 +118,13 @@ import { openForm } from '../ui/components/modal.js';
  *                                      whose new tab has nowhere useful to go
  *                                      passes `false`. `wm.newTab()` is there
  *                                      either way.
+ * @param {object}     [cfg.desktopBar] C40. `{ switchOnAdd?: boolean }` — the
+ *                                      bar's `+` also puts the new desktop on
+ *                                      screen. Default off: `+` only adds, as
+ *                                      it always has. Grouping and fixing
+ *                                      desktops is said on the desktops
+ *                                      themselves (`group`, `fixed` — see
+ *                                      `DesktopManager.chips`).
  * @param {object}     [cfg.chrome]     { topNav?, paletteButton?, desktops?,
  *                                        panelToggles?: { left?, right?, bottom? },
  *                                        zoom? }
@@ -147,6 +154,7 @@ export async function createShell({
     floatActiveTab = false,
     tabLayout = null,
     newTabButton = true,
+    desktopBar = {},
     chrome = {},
     // An embedder that moved its sections out of the top bar — into an icon
     // rail, say — passes the selector its own buttons match, and F1..F8 keep
@@ -217,7 +225,7 @@ export async function createShell({
     // key means absent chrome, not a crash.
     const paletteBtn = mountPaletteButton(chrome.paletteButton, palette);
     topNavEl = mountTopNav(chrome.topNav, taxonomy, wm);
-    desktopsEl = mountDesktopBar(chrome.desktops, wm);
+    desktopsEl = mountDesktopBar(chrome.desktops, wm, desktopBar || {});
     // C31. The content zoom. Painted with the rest of the chrome and, unlike the
     // rest, AWAITED before the first mount: its saved value is applied to `root`
     // as a CSS variable, and a shell that mounted first would paint every tile at
@@ -276,6 +284,12 @@ export async function createShell({
             // the same root must not inherit the old one's scale with no control on
             // screen to change it, so dispose puts the root back to 100%.
             try { zoom?.dispose(); } catch { /* ignore */ }
+            // C40. The bar's listeners close over THIS wm, and `mountDesktopBar`
+            // reuses an existing `#twm-desktops` — so a rebuilt shell would
+            // inherit them, and a `+` would add a desktop to the dead wm and
+            // persist it under the host the old shell was given. The element
+            // goes; the next shell paints its own.
+            try { desktopsEl?.remove(); } catch { /* ignore */ }
         },
     });
 }
@@ -390,7 +404,7 @@ function syncPanelToggles(map, wm) {
     }
 }
 
-function mountDesktopBar(hostEl, wm) {
+function mountDesktopBar(hostEl, wm, { switchOnAdd = false } = {}) {
     if (!hostEl) return null;
     let el = hostEl.querySelector('#twm-desktops');
     if (!el) {
@@ -403,15 +417,18 @@ function mountDesktopBar(hostEl, wm) {
         const btn = e.target.closest('[data-desktop]');
         if (!btn) return;
         const v = btn.dataset.desktop;
-        if (v === '+') { wm.addDesktop(); syncDesktopBar(el, wm); return; }
+        if (v === '+') { wm.addDesktop({ switchTo: switchOnAdd }); syncDesktopBar(el, wm); return; }
         wm.switchDesktop(Number(v));
     });
+    // C40. A fixed desktop, or a group's chip, is the embedder's: no rename,
+    // no delete. Asked of the button, which says which it is.
+    const isOwn = (btn) => btn.dataset.desktopFixed !== '1';
     // Double-click a desktop chip → inline rename. Faster than the context
     // menu's Rename… for the common case. Persists via wm._persist so the new
     // label survives a restart.
     el.addEventListener('dblclick', async (e) => {
         const btn = e.target.closest('[data-desktop]');
-        if (!btn || btn.dataset.desktop === '+') return;
+        if (!btn || btn.dataset.desktop === '+' || !isOwn(btn)) return;
         e.preventDefault();
         const idx = Number(btn.dataset.desktop);
         const d = wm.desktops.desktops[idx];
@@ -435,16 +452,19 @@ function mountDesktopBar(hostEl, wm) {
         const idx = Number(btn.dataset.desktop);
         const m = wm.desktops;
         const d = m.desktops[idx];
-        const canDelete = m.desktops.length > 1;
-        showContextMenu(e.clientX, e.clientY, [
-            { label: `Switch to ${d.label}`, icon: 'desktop_windows',
+        const own = isOwn(btn);
+        const canDelete = own && m.desktops.length > 1;
+        const name = btn.dataset.desktopLabel || d.label;
+        const items = [
+            { label: `Switch to ${name}`, icon: 'desktop_windows',
               action: 'switch', disabled: idx === m.activeIdx },
-            { label: 'Rename…',      icon: 'edit', action: 'rename' },
+            ...(own ? [{ label: 'Rename…', icon: 'edit', action: 'rename' }] : []),
             { separator: true },
             { label: 'New desktop',  icon: 'add',  action: 'add' },
-            { label: 'Delete desktop', icon: 'delete', action: 'delete',
-              danger: true, disabled: !canDelete },
-        ], async (action) => {
+            ...(own ? [{ label: 'Delete desktop', icon: 'delete', action: 'delete',
+                         danger: true, disabled: !canDelete }] : []),
+        ];
+        showContextMenu(e.clientX, e.clientY, items, async (action) => {
             if (action === 'switch') wm.switchDesktop(idx);
             else if (action === 'rename') {
                 const result = await openForm({
@@ -458,7 +478,7 @@ function mountDesktopBar(hostEl, wm) {
                 syncDesktopBar(el, wm);
                 wm._persist();
             }
-            else if (action === 'add')    { wm.addDesktop(); syncDesktopBar(el, wm); }
+            else if (action === 'add')    { wm.addDesktop({ switchTo: switchOnAdd }); syncDesktopBar(el, wm); }
             else if (action === 'delete') { wm.removeDesktop(idx); syncDesktopBar(el, wm); }
         });
     });
@@ -468,15 +488,40 @@ function mountDesktopBar(hostEl, wm) {
 function syncDesktopBar(el, wm) {
     if (!el) return;
     const m = wm.desktops;
-    el.innerHTML =
-        m.desktops.map((d, i) => `
+    // C40. Ungrouped, this is the markup it always was, byte for byte. Once a
+    // group exists the chips no longer count desktops, so the Alt+N promise
+    // goes, and a label is escaped because a group's comes from the embedder.
+    if (!m.hasGroups()) {
+        el.innerHTML =
+            m.desktops.map((d, i) => `
             <button class="twm-desk__btn${i === m.activeIdx ? ' twm-desk__btn--on' : ''}"
                     data-desktop="${i}"
                     title="Desktop ${d.label} (Alt+${i + 1}) · right-click to delete">
                 ${d.label}
             </button>`).join('')
-        + `<button class="twm-desk__btn twm-desk__btn--add"
+            + `<button class="twm-desk__btn twm-desk__btn--add"
                   data-desktop="+" title="Add desktop">+</button>`;
+        return;
+    }
+    el.innerHTML =
+        m.chips().map((c) => {
+            const label = _escapeHtml(c.label);
+            const title = c.fixed ? label : `${label} · double-click to rename · right-click for more`;
+            return `
+            <button class="twm-desk__btn${c.active ? ' twm-desk__btn--on' : ''}"
+                    data-desktop="${c.idx}"
+                    data-desktop-label="${label}"${c.fixed ? ' data-desktop-fixed="1"' : ''}
+                    title="${title}">
+                ${label}
+            </button>`;
+        }).join('')
+        + `<button class="twm-desk__btn twm-desk__btn--add"
+                  data-desktop="+" title="New desktop">+</button>`;
+}
+
+function _escapeHtml(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (ch) => (
+        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]));
 }
 
 
@@ -556,7 +601,8 @@ function _tileContextMenu(wm, leafId, x, y) {
     ];
     if (wm.desktops.desktops.length > 1 && !isPanel) {
         for (const [i, d] of wm.desktops.desktops.entries()) {
-            if (i === wm.desktops.activeIdx) continue;
+            // C40. Never onto a fixed desktop — `moveFocusedToDesktop` refuses.
+            if (i === wm.desktops.activeIdx || d.fixed) continue;
             items.push({ label: `Move to desktop ${d.label}`, icon: 'sweep',
                          action: `move:${i}` });
         }

package/src/tiling/wm.js

@@ -2789,6 +2789,8 @@ export class WindowManager {
         const rec = this._windowToLeaf.get(windowId);
         if (!rec) return;
         if (rec.desktopIdx === targetIdx) return;
+        // C40. A fixed desktop is the embedder's, and nothing is moved onto it.
+        if (this.desktops.desktops[targetIdx]?.fixed) return;
         this.desktops.ensureCount(targetIdx + 1);
         rec.desktopIdx = targetIdx;
         if (!rec.homeContainer && rec.homeLeafId) {
@@ -2957,10 +2959,12 @@ export class WindowManager {
             const items = [
                 { label: 'Back to tile', icon: 'close_fullscreen', action: 'back' },
             ];
-            if (this.desktops.desktops.length > 1) {
+            // C40. Never onto a fixed desktop — `moveWindowToDesktop` refuses.
+            const targets = [...this.desktops.desktops.entries()]
+                .filter(([i, d]) => i !== rec.desktopIdx && !d.fixed);
+            if (targets.length) {
                 items.push({ separator: true });
-                for (const [i, d] of this.desktops.desktops.entries()) {
-                    if (i === rec.desktopIdx) continue;
+                for (const [i, d] of targets) {
                     items.push({
                         label: `Move to desktop ${d.label}`, icon: 'sweep',
                         action: `move:${i}`,
@@ -3297,21 +3301,32 @@ export class WindowManager {
         this._notifyChange();
     }
 
-    addDesktop() {
+    /** Add a desktop. C40: `{ switchTo: true }` also puts it on screen, which
+     *  is what the bar's `+` does under `createShell({ desktopBar: {
+     *  switchOnAdd: true } })`. Answers the new desktop's index. */
+    addDesktop({ switchTo = false } = {}) {
         this.desktops.addDesktop();
+        const idx = this.desktops.desktops.length - 1;
+        if (switchTo) { this.switchDesktop(idx); return idx; }
         this._notifyChange();
         this._persist();
+        return idx;
     }
 
     /** Step to the previous (-1) or next (+1) existing desktop, wrapping
      *  around. No-op with a single desktop. Iterates only desktops that
-     *  already exist — use switchDesktop(idx) to create-on-demand. */
+     *  already exist — use switchDesktop(idx) to create-on-demand.
+     *
+     *  C40. It steps between the bar's CHIPS, so a group is one stop and
+     *  lands on its member last on screen. Ungrouped, a chip is a desktop
+     *  and this is the step it always was. */
     cycleDesktop(dir) {
-        const m = this.desktops;
-        const n = m.desktops.length;
+        const chips = this.desktops.chips();
+        const n = chips.length;
         if (n <= 1) return;
-        const next = (m.activeIdx + (dir < 0 ? -1 : 1) + n) % n;
-        this.switchDesktop(next);
+        const at = chips.findIndex((c) => c.active);
+        const next = chips[(at + (dir < 0 ? -1 : 1) + n) % n];
+        this.switchDesktop(next.idx);
     }
 
     /** Cycle the focused tile's main-panel tabs (Ctrl+Tab / Ctrl+Shift+Tab).
@@ -3350,6 +3365,8 @@ export class WindowManager {
         const m = this.desktops;
         if (m.desktops.length <= 1) return false;
         if (idx < 0 || idx >= m.desktops.length) return false;
+        // C40. A fixed desktop is the embedder's to keep.
+        if (m.desktops[idx].fixed) return false;
         m.desktops.splice(idx, 1);
         // THE SPLICE MOVES THE ACTIVE DESKTOP TOO, and the clamp below never
         // said so. Removing a desktop BELOW the one you are on shifts it down
@@ -3399,13 +3416,36 @@ export class WindowManager {
         // says "Move".
         const closeChrome = this.renderer?.leafChrome?.(focused.id)?.close;
         if (closeChrome === false || closeChrome?.disabled === true) return;
-        const payload = { kind: focused.content.kind, props: focused.content.props, title: focused.title };
+        // C40. A fixed desktop is the embedder's, and nothing is moved onto it.
+        if (this.desktops.desktops[idx]?.fixed) return;
         this.desktops.ensureCount(idx + 1);
         const target = this.desktops.desktops[idx];
-        // Place into the target tree's primary leaf.
+        // C40. THE PANE'S TABS JOIN THE TARGET'S PRIMARY LEAF, ALL OF THEM. It
+        // used to `setLeafContent` the ACTIVE tab over that leaf — which threw
+        // away every other tab of the pane being moved AND whatever the target
+        // was showing, so moving a pane onto a desktop you had worked in wiped
+        // that desktop's main pane. Only a target still holding nothing but the
+        // seed it was born with is replaced, because that is a blank page.
+        const tabs = (Array.isArray(focused.tabs) && focused.tabs.length)
+            ? focused.tabs
+            : [{ kind: focused.content.kind, props: focused.content.props, title: focused.title }];
+        const activeTab = Math.max(0, Math.min(tabs.length - 1, focused.activeTabIdx || 0));
         const targetTree = target.tree;
         const primary = targetTree.primaryLeafId();
-        if (primary) targetTree.setLeafContent(primary, { kind: payload.kind, props: payload.props }, payload.title);
+        if (primary) {
+            const dest = targetTree.get(primary);
+            const seedKind = this._rootLeaf()?.content?.kind;
+            const blank = (dest.tabs || []).length <= 1 && dest.content?.kind === seedKind;
+            let first = -1;
+            tabs.forEach((tab, i) => {
+                const content = { kind: tab.kind, props: tab.props || {} };
+                const title = tab.title || tab.kind || '';
+                if (i === 0 && blank) { targetTree.setLeafContent(primary, content, title); first = 0; return; }
+                const at = targetTree.appendLeafTab(primary, content, title);
+                if (first < 0) first = at;
+            });
+            if (first >= 0) targetTree.setActiveLeafTab(primary, first + activeTab);
+        }
         // Remove from current desktop.
         tree.close(focused.id);
         if (!tree.rootId) tree.setRoot(makeLeaf(this._rootLeaf()));