flexdesk 0.17.13 → 0.17.15

package/src/tiling/tile_tree.js

@@ -21,6 +21,25 @@
 let _idCounter = 1;
 function _newId(prefix) { return `${prefix}-${_idCounter++}`; }
 
+/** An object that is not an array: what a saved node, tab or map is. */
+function _isRecord(v) {
+    return v !== null && typeof v === 'object' && !Array.isArray(v);
+}
+
+/** Throw a `TypeError` saying what the saved layout was expected to hold at
+ *  `path` and what it held instead. The value is shown short: a layout can be
+ *  large, and the line is read in a console. */
+function _expect(ok, path, want, got) {
+    if (ok) return;
+    let shown;
+    if (got === undefined) shown = 'nothing';
+    else {
+        try { shown = JSON.stringify(got); } catch { shown = String(got); }
+        if (shown.length > 40) shown = `${shown.slice(0, 37)}...`;
+    }
+    throw new TypeError(`${path}: expected ${want}, found ${shown}`);
+}
+
 function _isPanel(leaf) {
     return String(leaf?.content?.kind || '').startsWith('panel:');
 }
@@ -939,11 +958,42 @@ export class TileTree {
         };
     }
 
-    static deserialize(blob) {
+    /** Rebuild a tree from what `serialize()` wrote. A blob with no root is an
+     *  empty tree, as it always was. Anything else is read STRICTLY: a node that
+     *  `serialize()` could not have written throws a `TypeError` naming where
+     *  (`at` is the path of the blob, for the message only) and what it wanted,
+     *  rather than building half a tree or failing later, inside the renderer,
+     *  with `node.sizes.reduce is not a function`. The caller decides what a
+     *  tree that cannot be read means; see `WindowManager.load`. */
+    static deserialize(blob, at = 'tree') {
         const t = new TileTree();
         if (!blob || !blob.root) return t;
-        const build = (raw) => {
+        // A tab, and the legacy `content` a leaf mirrors its active tab into, are
+        // the same shape: what `makeLeaf` and `_syncActiveTab` read. Its `title` and
+        // `props` are NOT checked. A title is only drawn, and is whatever a content
+        // factory returned (a number, say); props are the app's, and a factory that
+        // cannot use them is told so by the registry's mount-error tile, not by a
+        // layout thrown away.
+        const checkTab = (tab, path) => {
+            _expect(_isRecord(tab) && typeof tab.kind === 'string', path, 'a tab, { kind, props, title }', tab);
+        };
+        const build = (raw, path) => {
+            _expect(_isRecord(raw), path, 'a node, an object', raw);
+            _expect(raw.kind === 'leaf' || raw.kind === 'split', `${path}.kind`, '"leaf" or "split"', raw.kind);
             if (raw.kind === 'leaf') {
+                if (raw.content != null) checkTab(raw.content, `${path}.content`);
+                _expect(raw.tabs == null || Array.isArray(raw.tabs), `${path}.tabs`, 'an array of tabs', raw.tabs);
+                (raw.tabs || []).forEach((tab, i) => checkTab(tab, `${path}.tabs[${i}]`));
+                _expect(raw.activeTabIdx == null || Number.isFinite(raw.activeTabIdx),
+                    `${path}.activeTabIdx`, 'a number', raw.activeTabIdx);
+                _expect(raw.pageTabs == null || _isRecord(raw.pageTabs), `${path}.pageTabs`, 'an object', raw.pageTabs);
+                for (const [page, arc] of Object.entries(raw.pageTabs || {})) {
+                    const where = `${path}.pageTabs[${JSON.stringify(page)}]`;
+                    _expect(_isRecord(arc) && Array.isArray(arc.tabs), where, '{ tabs, activeTabIdx }', arc);
+                    arc.tabs.forEach((tab, i) => checkTab(tab, `${where}.tabs[${i}]`));
+                    _expect(arc.activeTabIdx == null || Number.isFinite(arc.activeTabIdx),
+                        `${where}.activeTabIdx`, 'a number', arc.activeTabIdx);
+                }
                 // Forward-compat with the pre-tabs layout: an old
                 // serialized leaf carries `content` but no `tabs`.
                 // makeLeaf will derive a single-tab list from `content`.
@@ -961,7 +1011,6 @@ export class TileTree {
                 if (raw.pageTabs && typeof raw.pageTabs === 'object') {
                     leaf.pageTabs = {};
                     for (const [k, v] of Object.entries(raw.pageTabs)) {
-                        if (!v || !Array.isArray(v.tabs)) continue;
                         leaf.pageTabs[k] = {
                             tabs: v.tabs.map((t) => ({
                                 kind:  t.kind,
@@ -974,7 +1023,16 @@ export class TileTree {
                 }
                 return leaf;
             }
-            const children = raw.children.map(build);
+            // `sizes` run parallel to `children`: the renderer, `setSplitSizes`,
+            // `swapSiblings` and the panel canonicalizer all index one by the
+            // other, and none of them looks at a length first.
+            _expect(raw.dir === 'h' || raw.dir === 'v', `${path}.dir`, '"h" or "v"', raw.dir);
+            _expect(Array.isArray(raw.children) && raw.children.length > 0,
+                `${path}.children`, 'a non-empty array of nodes', raw.children);
+            _expect(Array.isArray(raw.sizes) && raw.sizes.length === raw.children.length
+                    && raw.sizes.every((n) => Number.isFinite(n) && n >= 0),
+                `${path}.sizes`, `${raw.children.length} non-negative numbers, one per child`, raw.sizes);
+            const children = raw.children.map((c, i) => build(c, `${path}.children[${i}]`));
             const split = makeSplit({
                 dir: raw.dir, children: children.map((c) => c.id),
                 sizes: raw.sizes,
@@ -982,7 +1040,7 @@ export class TileTree {
             children.forEach((c) => t._register(c));
             return split;
         };
-        const root = build(blob.root);
+        const root = build(blob.root, `${at}.root`);
         t.setRoot(root);
         return t;
     }

package/src/tiling/wm.js

@@ -18,7 +18,7 @@
  *   wm.switchDesktop(idx) / wm.addDesktop() / wm.moveFocusedToDesktop(idx)
  */
 
-import { DesktopManager, saveDesktops, loadDesktops } from './desktops.js';
+import { DesktopManager, saveDesktops, loadDesktops, DESKTOPS_KEY } from './desktops.js';
 import { TileRenderer } from './tile_renderer.js';
 import { makeLeaf } from './tile_tree.js';
 import { PLACEHOLDER_KIND } from './content_registry.js';
@@ -38,7 +38,7 @@ const PANEL_TITLES = {
 
 export class WindowManager {
     constructor({ rootEl, api, ctx, onChange, eventBus, host, taxonomy, events, content,
-                  panelDefaults = null, snapPromotion = false,
+                  logger = null, panelDefaults = null, snapPromotion = false,
                   promoteInPlace = false, tabLayout = null, backToOpenList = false,
                   floatActiveTab = false, newTabButton = true }) {
         if (!taxonomy) throw new Error('WindowManager: a taxonomy is required');
@@ -62,6 +62,9 @@ export class WindowManager {
         this.events = events || {};
         this.ctx = ctx || {};
         this.eventBus = eventBus || null;
+        // Where load() reports a saved layout it could not read; else `console`,
+        // as the keymap does.
+        this.logger = logger || null;
         this.onChange = onChange || (() => {});
         // Panel availability. Runtime overrides (`setPanelAvailability`) win
         // over the primary kind's declaration (`KindDef.panels`); the last
@@ -250,10 +253,41 @@ export class WindowManager {
     // ── Persistence ─────────────────────────────────────────────────
     async load() {
         const blob = await loadDesktops(this.host?.state);
-        if (blob) {
-            this.desktops = DesktopManager.deserialize(blob, {
-                seed: this._rootLeaf, panelDefaults: this.panelDefaults });
-            this.renderer.tree = this.desktops.active().tree;
+        // A SAVED LAYOUT THAT CANNOT BE READ IS NO LAYOUT. The state is a file that
+        // can be truncated or edited into valid JSON of the wrong shape, and a boot
+        // that dies on it dies on every start until someone deletes the file by
+        // hand. `deserialize` reads the blob strictly and throws before anything the
+        // WM holds has been touched, so recovering is doing nothing: `this.desktops`
+        // and the renderer are as they were, and the rest of this method runs as it
+        // does for a host with nothing saved. The catch stops there on purpose. The
+        // canonicalize and the render below only ever see a layout that WAS read, so
+        // a throw from them is a bug that has to reach the embedder, not a bad file
+        // to be answered by discarding what the user saved.
+        //
+        // The bad blob is LEFT in the store. Deleting it here would destroy the only
+        // copy of whatever the user was trying to restore; the next `_persist` (any
+        // layout change) overwrites it, and until then each boot warns again, which
+        // is the reminder.
+        if (blob != null) {
+            let restored = null;
+            try {
+                restored = DesktopManager.deserialize(blob, {
+                    seed: this._rootLeaf, panelDefaults: this.panelDefaults });
+            } catch (err) {
+                // ONE string, as the keymap's warning is. The embedder's logger is
+                // usually a LoggingService, whose `scoped()` loggers read two leading
+                // strings as (subcategory, message) and keep only the second, and
+                // whose own warn(message, metadata) keeps the first string and files
+                // the rest as metadata: spread over several arguments, the key would
+                // be the whole recorded message and the cause would be gone. The
+                // console prints one string the same as several.
+                (this.logger ?? console).warn?.(`[wm] bad layout for state key ${DESKTOPS_KEY} `
+                    + `(opening the default layout): ${err?.message ?? err}`);
+            }
+            if (restored) {
+                this.desktops = restored;
+                this.renderer.tree = this.desktops.active().tree;
+            }
         }
         // Normalize: managed windows don't survive a reload, so any
         // window-placeholder leaves restore their original content.
@@ -3941,10 +3975,26 @@ export class WindowManager {
         return true;
     }
 
+    /**
+     * Move the focused tile, with every tab it holds, to desktop `idx` (from 0).
+     * A refused move returns `undefined` and changes nothing; the callers (the
+     * keymap's `toDesktop:N`, the tile menu's *Move to desktop*) read no result.
+     *
+     * The tile menu (`shell.js`, `_tileContextMenu`) never offers a panel, a
+     * fixed desktop or the desktop you are on, and this method refuses all
+     * three itself, because the menu is one door and Alt+Shift+N is another.
+     * A fixed desktop it always refused; a panel and the desktop you are on it
+     * did not, and the move to the desktop you are on destroys the tile: source
+     * and target are one tree, so the tabs are appended to its primary tile and
+     * then the focused tile is closed. A stray Shift on Alt+N reaches that.
+     */
     moveFocusedToDesktop(idx) {
         const tree = this._tree();
         const focused = tree.focused();
         if (!focused || !focused.content) return;
+        // A panel is chrome, not content (the menu's `isPanel`). Moved, it would
+        // replace the target desktop's home ground.
+        if (String(focused.content.kind || '').startsWith('panel:')) return;
         // C20. IT DESTROYS A LEAF, SO IT ANSWERS TO THE SAME VETO `closeFocused`
         // does. A move is not a close from the pane's point of view, but it is
         // exactly a close from the PAGE's: this was the fourth door out of a
@@ -3954,6 +4004,9 @@ export class WindowManager {
         if (closeChrome === false || closeChrome?.disabled === true) return;
         // C40. A fixed desktop is the embedder's, and nothing is moved onto it.
         if (this.desktops.desktops[idx]?.fixed) return;
+        // Already there. Without this, `tree.close` below removes the tile from
+        // the same tree its tabs were just appended to, and it is gone.
+        if (idx === this.desktops.activeIdx) return;
         this.desktops.ensureCount(idx + 1);
         const target = this.desktops.desktops[idx];
         // C40. THE PANE'S TABS JOIN THE TARGET'S PRIMARY LEAF, ALL OF THEM. It

package/src/ui/components/modal.js

@@ -56,8 +56,12 @@
  * Rows — an entry of the form `{ row: [field, field, ...] }` puts its fields
  * side by side (a min and a max, say). Each is an ordinary field: its own
  * label, hint, error, `setVisible`, value and submitted key — the row is
- * layout only and has no name. The row stacks its fields when the form is
- * narrower than 360px (a container query on `.twm-modal__form`).
+ * layout only and has no name. Its inputs are equally wide (up to each
+ * control's own padding): the space left after the labels is shared equally.
+ * A form whose widest row has three or more fields opens wider (about 230px
+ * per field; at least 640px, otherwise at most 90% of the window).
+ * The row stacks its fields when the form is narrower than 360px (a
+ * container query on `.twm-modal__form`).
  *
  * Picker — a value the user LOOKS UP rather than types (an id chosen in a
  * search dialog, say). The row shows a read-only box and a search button;
@@ -913,6 +917,11 @@ function _estimateWidth(fields) {
     // Forms with a textarea, a colour list, a section divider or a row of
     // fields get the wider layout so multi-line content + grouped fields
     // breathe; otherwise 480 px is enough for label + single-line input pairs.
+    // A row of three or more fields needs more than 640 px for inputs of a
+    // usable width (BUG-0050): ~230 px per field (its label and input) past the
+    // label column, clamped to 90% of the window.
+    const widest = Math.max(0, ...fields.filter((f) => Array.isArray(f?.row)).map((f) => _formFields(f.row).length));
+    if (widest >= 3) return Math.max(640, Math.min(170 + widest * 230, Math.floor(window.innerWidth * 0.9)));
     const wide = fields.some((f) => f && (f.type === 'textarea' || f.type === 'colorList' || f.section || Array.isArray(f.row)));
     return wide ? 640 : 480;
 }

package/src/ui/components/tree_view.js

@@ -128,28 +128,39 @@ export function createTreeNode(options) {
     `;
     setText(node, '.twm-tree-node__label', label);
 
-    // Add action buttons if specified
-    if (actions) {
-        const actionsEl = node.querySelector('.twm-tree-node__actions');
-        Object.entries(actions).forEach(([actionId, actionConfig]) => {
-            const btn = document.createElement('button');
-            btn.className = 'twm-tree-node__action-btn';
-            btn.dataset.action = actionId;
-            btn.title = actionConfig.title || actionId;
-            btn.innerHTML = `<span class="material-symbols-outlined">${actionConfig.icon}</span>`;
-            if (actionConfig.onClick) {
-                btn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    actionConfig.onClick(id, e);
-                });
-            }
-            actionsEl.appendChild(btn);
-        });
-    }
+    if (actions) appendActionButtons(node.querySelector('.twm-tree-node__actions'), id, actions);
 
     return node;
 }
 
+/**
+ * Fill a node's or an item's actions slot: one `.twm-tree-node__action-btn`
+ * per entry. A click on an entry with `onClick` runs `onClick(id, event)` and
+ * goes no further, so it neither selects the item nor toggles the node; nor
+ * does a double-click, so it never reaches TreeView's onItemDoubleClick.
+ * @param {HTMLElement} actionsEl
+ * @param {string} id - The node's or item's id
+ * @param {Object<string, { icon: string, title?: string, onClick?: Function }>} actions
+ */
+function appendActionButtons(actionsEl, id, actions) {
+    Object.entries(actions).forEach(([actionId, actionConfig]) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'twm-tree-node__action-btn';
+        btn.dataset.action = actionId;
+        btn.title = actionConfig.title || actionId;
+        btn.innerHTML = `<span class="material-symbols-outlined">${actionConfig.icon}</span>`;
+        if (actionConfig.onClick) {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                actionConfig.onClick(id, e);
+            });
+            btn.addEventListener('dblclick', (e) => e.stopPropagation());
+        }
+        actionsEl.appendChild(btn);
+    });
+}
+
 /**
  * Create a tree item (leaf node)
  * @param {Object} options - Item options
@@ -164,6 +175,10 @@ export function createTreeNode(options) {
  * @param {Object} [options.badge] - Optional badge config
  * @param {string} [options.badge.text] - Badge text (if empty, renders as status dot)
  * @param {string} [options.badge.variant] - 'muted'|'pass'|'fail'|'error'
+ * @param {Object} [options.actions] - Row actions, as createTreeNode takes them
+ *   ({ id: { icon, title, onClick(id, event) } }): buttons in one line at the
+ *   row's end (`.twm-tree-item__actions`), shown on hover, on focus within and
+ *   on the selected item
  * @returns {HTMLElement} - Item element
  */
 export function createTreeItem(options) {
@@ -177,6 +192,7 @@ export function createTreeItem(options) {
         subtitle = null,
         data = null,
         badge = null,
+        actions = null,
     } = options;
 
     const item = document.createElement('div');
@@ -220,6 +236,13 @@ export function createTreeItem(options) {
     if (subtitle) setText(item, '.twm-tree-item__subtitle', subtitle);
     if (badge?.text) setText(item, '.twm-tree-item__badge', badge.text);
 
+    if (actions) {
+        const actionsEl = document.createElement('span');
+        actionsEl.className = 'twm-tree-item__actions';
+        appendActionButtons(actionsEl, id, actions);
+        item.appendChild(actionsEl);
+    }
+
     return item;
 }