flexdesk 0.6.3 → 0.8.0

package/package.json

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

package/src/flow/outline/editor.js

@@ -27,7 +27,9 @@
  * ══ GESTURES ════════════════════════════════════════════════════════════
  *
  * A press SELECTS — it toggles classes and fills the settings panel, and
- * rebuilds no row, so the click lands on the node the press went down on.
+ * rebuilds no row, so the click lands on the node the press went down on. In
+ * a narrow editor, where the panel is stacked under the list, a press (like
+ * Enter, Go to it and `select()`) scrolls the panel on screen when it is off it.
  * "+" between rows (on hover AND on focus), the add rows and a row's menu
  * open the step picker and the step menu, both the kit's popovers. A step is
  * dragged by its grip with POINTER EVENTS and a ghost on `document.body`
@@ -528,7 +530,7 @@ export function createOutlineEditor(host, options = {}) {
         if (fs.length) row.appendChild(badge(fs));
         item.appendChild(row);
         item.setAttribute('aria-label', [map.startLabel(S), sum].filter(Boolean).join(', '));
-        row.addEventListener('click', () => select('flow', { focus: true }));
+        row.addEventListener('click', () => select('flow', { focus: true, picked: true }));
         if (filter) item.classList.add('twm-flow-outline__item--context');
         itemEls.set('flow', item);
         return item;
@@ -645,7 +647,7 @@ export function createOutlineEditor(host, options = {}) {
             row.appendChild(menu);
             row.addEventListener('contextmenu', (ev) => { ev.preventDefault(); select(item.id); openMenu(item.id, menu); });
         }
-        row.addEventListener('click', () => select(item.id, { focus: true }));
+        row.addEventListener('click', () => select(item.id, { focus: true, picked: true }));
         return { row, label: [name, type?.label !== name ? type?.label : null, summary].filter(Boolean).join(', ') };
     }
 
@@ -836,7 +838,13 @@ export function createOutlineEditor(host, options = {}) {
         }
     }
 
-    function select(id, { focus = false, silent = false } = {}) {
+    /**
+     * `picked`: the step was PICKED — a press on its row, Go to it, `select()`
+     * — so its settings are what the person looks at next, and they are
+     * brought on screen (`revealSettings`). ↑ ↓ ← → only move the selection
+     * through the list and leave the list where it is.
+     */
+    function select(id, { focus = false, silent = false, picked = false } = {}) {
         const next = id === null || id === undefined ? 'flow' : id;
         const changed = next !== selected;
         selected = next;
@@ -844,9 +852,33 @@ export function createOutlineEditor(host, options = {}) {
         if (changed) { showPanel(); drawAside(); }
         void silent;
         if (focus) itemEls.get(selected)?.focus({ preventScroll: false });
+        if (picked) revealSettings();
         if (changed) onSelect?.({ kind: selected === 'flow' ? 'flow' : 'step', id: selected === 'flow' ? null : selected });
     }
 
+    /**
+     * BRING THE SETTINGS ON SCREEN when the layout has put them off it — the
+     * one rule for Enter, a press on a row, Go to it and `select()`. Under
+     * 1000px the columns wrap and the body scrolls as one (the container query
+     * in the sheet), so the panel sits under the whole list: a step picked
+     * there filled a panel ~860px below with nothing scrolled, and the press
+     * looked like it did nothing. A panel wholly inside the body's visible box
+     * — always, side by side, where the panel IS the body's height — or one
+     * that covers it is left alone, so nothing moves, the page included;
+     * otherwise it is scrolled into view, 'nearest' (all of it when it fits,
+     * its top when it does not).
+     */
+    function revealSettings() {
+        if (destroyed) return;
+        const box = body.getBoundingClientRect();
+        if (!box.height) return; // not laid out: hidden, detached
+        const r = settingsHost.getBoundingClientRect();
+        const inside = r.top >= box.top - 1 && r.bottom <= box.bottom + 1;
+        const covers = r.top <= box.top + 1 && r.bottom >= box.bottom - 1;
+        if (inside || covers) return;
+        settingsHost.scrollIntoView?.({ block: 'nearest' });
+    }
+
     function focusSelected() {
         const li = itemEls.get(selected) ?? itemEls.get('flow');
         if (li) li.focus({ preventScroll: true });
@@ -1152,7 +1184,8 @@ export function createOutlineEditor(host, options = {}) {
     }
 
     function rename(id) {
-        select(id);
+        // The title is focused without scrolling, so it is brought on screen first.
+        select(id, { picked: true });
         const input = settingsHost.querySelector('[data-twm-flow-title]');
         if (input) { input.focus({ preventScroll: true }); input.select?.(); }
     }
@@ -1168,7 +1201,7 @@ export function createOutlineEditor(host, options = {}) {
     function goTo(f) {
         const id = f?.node_id && nodeOf(f.node_id) ? f.node_id : 'flow';
         if (reveal(id)) render();
-        select(id, { focus: true });
+        select(id, { focus: true, picked: true });
         if (f?.field) panel.focusField(f.field);
     }
 
@@ -1208,6 +1241,7 @@ export function createOutlineEditor(host, options = {}) {
             const f = settingsHost.querySelector('.twm-flow-panel__fields input, .twm-flow-panel__fields select, '
                 + '.twm-flow-panel__fields textarea, .twm-flow-panel__fields [contenteditable="true"], .twm-flow-panel__fields button')
                 || settingsHost.querySelector('[data-twm-flow-title]');
+            if (f) revealSettings();
             f?.focus({ preventScroll: false });
             return Boolean(f);
         },
@@ -1477,11 +1511,15 @@ export function createOutlineEditor(host, options = {}) {
             updateTools();
         },
         setStatus(text) { statusEl.textContent = text ?? ''; },
-        /** Select a step (unfolding the blocks around it, so it is on the screen), the flow, or nothing. */
+        /**
+         * Select a step (unfolding the blocks around it, so it is on the
+         * screen), the flow, or nothing — and, in a narrow editor whose panel
+         * is scrolled off, bring its settings on screen as a press does.
+         */
         select(id) {
             const want = id === null || id === undefined ? 'flow' : id;
             if (want !== 'flow' && reveal(want)) render();
-            select(want);
+            select(want, { picked: true });
         },
         focus() { focusSelected(); },
         undo() { if (editable() && history.undo()) emit('undo'); },

package/src/tiling/shell.js

@@ -95,13 +95,17 @@ import { openForm } from '../ui/components/modal.js';
  *                                      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
+ * @param {'top'|'bottom'|'header'} [cfg.tabLayout] C22. Where a multi-tab leaf
+ *                                      draws its
  *                                      tabs. `'bottom'` is the framework's own
  *                                      spreadsheet strip under the tile body
  *                                      and is the DEFAULT, so no existing
  *                                      embedder's panes rearrange on upgrade;
  *                                      `'top'` mounts the editor tab bar
- *                                      between the chrome and the body. The
+ *                                      between the chrome and the body;
+ *                                      `'header'` (C38) mounts it inside the
+ *                                      chrome in place of the title, on every
+ *                                      tile, with a `+` for a new tab. The
  *                                      renderer mirrors this onto `root` as
  *                                      `data-twm-tabs` and watches it, so an
  *                                      embedder whose settings pane holds only

package/src/tiling/tile_renderer.js

@@ -22,6 +22,34 @@
  *              tab strip, mounted BETWEEN the chrome and the body. The chrome
  *              is the pane's identity — its glyph, its title, its verbs — and
  *              the tabs are its contents, so the tabs go under it, not over.
+ *   `header` — C38. The same `NotebookTabBar`, mounted INSIDE the chrome in
+ *              place of the title, with a `+` after the last tab. One strip
+ *              instead of two, so a pane spends one row on chrome, not two.
+ *
+ * ── C38. THE TABS ARE THE TITLE ─────────────────────────────────────────
+ *
+ * *"Replace the title with one element with the tab — the title is always in
+ * the tabs and we always can create more tabs. This is a more compact layout."*
+ *
+ * Under `header` the strip is drawn for EVERY content leaf, one tab included,
+ * because it is now the only place the pane's name appears. The chrome's own
+ * title and glyph are hidden by a wrap class (`twm-leaf--tabs-in-header`), not
+ * removed: a panel leaf has no tabs to draw, keeps its title, and a switch
+ * back to another layout finds the title element where it left it.
+ *
+ * The active tab's label is the CONTENT's title when the factory returned one
+ * — the string the chrome title used to show — so nothing the title said is
+ * lost by moving it into the tab.
+ *
+ * `+` appends a tab holding the taxonomy root, which is what a split seeds the
+ * new pane with (`wm.newTab`). It is a button, so `CHROME_NO_FLOAT` already
+ * makes it inert to the pull and the double-click.
+ *
+ * The chrome stops being a drag source here (C33): a single-tab leaf now has a
+ * tab to grab, and a strip that names the tab is the reason C33 limited the
+ * chrome to the case where there was none. A drag that begins on a tab
+ * belongs to the strip, so the chrome's `dragstart` lets it pass untouched.
+ * The empty chrome around the tabs still takes the pull and the double-click.
  *
  * The tab bar is reused rather than reimplemented. It already has the
  * behaviours a top strip is expected to have — drag-to-reorder, a scrolling
@@ -153,9 +181,9 @@
 import { NotebookTabBar } from '../editor/notebook_tab_bar.js';
 
 const SPLITTER_PX = 4;
-/** The two tab layouts, and the framework's default. `bottom` is the default
+/** The three tab layouts, and the framework's default. `bottom` is the default
  *  because it is what every existing embedder already renders. */
-const TAB_LAYOUTS = ['bottom', 'top'];
+const TAB_LAYOUTS = ['bottom', 'top', 'header'];
 const DEFAULT_TAB_LAYOUT = 'bottom';
 
 /** Anything that is not one of the two layouts is the default rather than an
@@ -195,8 +223,9 @@ const TILE_LIFT_PX = 24;
  *
  *  A tile's chrome is a grip with controls sitting on it — the split, float
  *  and close buttons on the right, whatever the content contributed on the
- *  left, and (defensively; the strip is a sibling of the chrome today, not a
- *  child) a tab. Neither the downward pull nor the double-click may fire when
+ *  left, and a tab — the strip is a CHILD of the chrome under the `header`
+ *  layout (C38), and a sibling of it otherwise. Neither the downward pull nor
+ *  the double-click may fire when
  *  the press landed on one of those.
  *
  *  ONE CONSTANT, TWO LISTENERS, and that is the point of writing it down
@@ -204,7 +233,7 @@ const TILE_LIFT_PX = 24;
  *  about where the door is are worse than one door. A button added to this
  *  strip later must become inert under BOTH gestures at once, and it cannot
  *  do that if each of them carries its own copy of the rule. */
-const CHROME_NO_FLOAT = 'button, .twm-leaf__tab';
+const CHROME_NO_FLOAT = 'button, .twm-leaf__tab, .notebook-tabs .tab';
 
 /**
  * IS THIS GESTURE THE DOWNWARD PULL? Asked in TWO places that must not be
@@ -498,6 +527,11 @@ export class TileRenderer {
             // that can change while the content stays put has to be refreshed
             // here or it is frozen at whatever it was when the tile was built.
             _paintLeafIcon(entry.iconEl, leaf, entry.content, this.ctx);
+            // C38. …and under `header` the tabs ARE the title, so a renamed
+            // tab is a renamed title and has to be refreshed for the same
+            // reason. Only when a label changed: rebuilding the strip's tabs
+            // on every repaint would detach a tab mid-drag.
+            if (this.tabLayout === 'header') this._refreshHeaderLabels(leaf, entry);
             return entry.wrapEl;
         }
         // Build fresh.
@@ -589,9 +623,11 @@ export class TileRenderer {
         }
         // C22. CHROME FIRST IN BOTH LAYOUTS. The chrome is the pane's identity
         // and the tabs are what is inside it; a strip above the title would say
-        // the tabs own the pane rather than the other way round.
-        wrap.append(chrome, ...(this.tabLayout === 'top' ? [tabBar, body]
-                                                        : [body, tabBar]));
+        // the tabs own the pane rather than the other way round. C38's
+        // `header` puts the strip inside the chrome — `_placeTabBar` decides.
+        wrap.append(chrome, body, tabBar);
+        this._placeTabBar({ wrapEl: wrap, bodyEl: body, chromeEl: chrome,
+                            titleEl: title, tabBarEl: tabBar });
 
         wrap.addEventListener('mousedown', (e) => {
             if (e.target.closest('.twm-splitter')) return;
@@ -947,9 +983,12 @@ export class TileRenderer {
      *  attached element is a re-parent, not a rebuild — the body keeps its
      *  DOM, its listeners and its scroll. */
     _placeTabBar(entry) {
-        const { wrapEl, bodyEl, tabBarEl } = entry;
+        const { wrapEl, bodyEl, tabBarEl, chromeEl, titleEl } = entry;
         if (!wrapEl || !tabBarEl || !bodyEl) return;
-        if (this.tabLayout === 'top') wrapEl.insertBefore(tabBarEl, bodyEl);
+        // C38. Right after the title, so it takes the title's place and the
+        // content's actions and the structural buttons stay on the right.
+        if (this.tabLayout === 'header' && chromeEl && titleEl) titleEl.after(tabBarEl);
+        else if (this.tabLayout === 'top') wrapEl.insertBefore(tabBarEl, bodyEl);
         else wrapEl.appendChild(tabBarEl);
     }
 
@@ -975,16 +1014,48 @@ export class TileRenderer {
         const bar = entry.tabBarEl;
         if (!bar) return;
         const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
+        const header = this.tabLayout === 'header';
         bar.classList.toggle('twm-leaf__tabbar--top', this.tabLayout === 'top');
-        if (tabs.length <= 1) {
+        bar.classList.toggle('twm-leaf__tabbar--header', header);
+        // C38. One tab is enough under `header`: the strip is the title. A
+        // panel, or a leaf with no content, has no tab to name and keeps the
+        // chrome's title.
+        const isPanel = String(leaf.content?.kind || '').startsWith('panel:');
+        const inHeader = header && !isPanel && !!leaf.content && tabs.length >= 1;
+        entry.wrapEl?.classList.toggle('twm-leaf--tabs-in-header', inHeader);
+        if (!inHeader && tabs.length <= 1) {
             bar.classList.add('twm-leaf__tabbar--hidden');
             this._disposeTabStrip(entry);
             bar.innerHTML = '';
             return;
         }
         bar.classList.remove('twm-leaf__tabbar--hidden');
-        if (this.tabLayout === 'top') this._renderTopTabBar(leaf, entry, tabs);
-        else this._renderBottomTabBar(leaf, entry, tabs);
+        if (this.tabLayout === 'bottom') this._renderBottomTabBar(leaf, entry, tabs);
+        else this._renderTopTabBar(leaf, entry, tabs);
+    }
+
+    /** C38. The labels the `header` strip shows for `leaf`, in one string, so
+     *  a repaint can tell whether anything it draws has changed. */
+    _headerLabels(leaf, entry) {
+        const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
+        const activeIdx = Math.max(0, Math.min(tabs.length - 1, leaf.activeTabIdx || 0));
+        return tabs.map((t, i) => this._tabLabel(t, i === activeIdx, entry)).join('\n');
+    }
+
+    /** C38. A cached leaf is not re-mounted, so a tab renamed in the tree
+     *  (`TileTree.renameMatchingTabs`) reaches the strip only through here. */
+    _refreshHeaderLabels(leaf, entry) {
+        const labels = this._headerLabels(leaf, entry);
+        if (entry.headerLabels === labels) return;
+        this._renderTabBar(leaf, entry);
+    }
+
+    /** What a tab in the `top` or `header` strip is called. A tab with no
+     *  title of its own falls back, when it is the active one, to the title
+     *  its content gave at mount — the string the chrome title would have
+     *  shown, and under `header` the chrome title is hidden (C38). */
+    _tabLabel(t, active, entry) {
+        return t.title || (active && entry?.content?.title) || t.kind || '';
     }
 
     /**
@@ -1021,12 +1092,19 @@ export class TileRenderer {
         const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
         const isPanel = String(leaf.content?.kind || '').startsWith('panel:');
         const vetoed = this.leafChrome(leaf.id)?.promote === false;
-        const on = tabs.length === 1 && !isPanel && !vetoed;
+        // C38. Not under `header`: the one tab is drawn in the strip, and the
+        // strip is its drag source.
+        const on = tabs.length === 1 && !isPanel && !vetoed && this.tabLayout !== 'header';
         if (on) chrome.setAttribute('draggable', 'true');
         else chrome.removeAttribute('draggable');
         if (chrome.__twmTabDragBound) return;
         chrome.__twmTabDragBound = true;
         chrome.addEventListener('dragstart', (ev) => {
+            // C38. A drag that began in the strip — which the `header` layout
+            // puts INSIDE the chrome — is the strip's, and has bubbled here.
+            // Not refused (that would cancel the tab's own drag) and not
+            // re-begun as tab 0: left alone.
+            if (entry.tabBarEl?.contains(ev.target)) return;
             // A drag that began on a BUTTON is not a drag of the pane. Buttons
             // are not draggable on their own, but a draggable ancestor makes
             // them so — hence the same guard the two float gestures apply, from
@@ -1143,11 +1221,31 @@ export class TileRenderer {
                     { idx, x: ev.clientX, y: ev.clientY });
             }, true);
         }
+        // C38. The `+` after the last tab, `header` only. Outside the
+        // component's container so its `update()` never rewrites it, and
+        // built with the strip so `setTabLayout` (which empties the bar and
+        // disposes the strip) takes it away with the strip.
+        if (this.tabLayout === 'header' && !bar.querySelector('.twm-leaf__tab-new')) {
+            const add = document.createElement('button');
+            add.type = 'button';
+            add.className = 'twm-leaf__tab-new';
+            add.dataset.action = 'tab-new';
+            add.title = 'New tab';
+            add.setAttribute('aria-label', 'New tab');
+            add.innerHTML = '<span class="material-symbols-outlined">add</span>';
+            add.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.ctx.onLeafTabAction?.(leaf.id, 'new', {});
+            });
+            bar.appendChild(add);
+        }
         const activeIdx = Math.max(0, Math.min(tabs.length - 1, leaf.activeTabIdx || 0));
+        entry.headerLabels = this._headerLabels(leaf, entry);
         entry.tabStrip.update(
             tabs.map((t, i) => ({
                 filePath: _tabKey(i),
-                label: t.title || t.kind || '',
+                label: this._tabLabel(t, i === activeIdx, entry),
                 // The component's `fileType` picks a glyph out of a static map
                 // of FILE kinds. A tile's kinds are the embedder's, and the
                 // taxonomy already answers for them — see `_paintTopTabs`.
@@ -1159,7 +1257,7 @@ export class TileRenderer {
                 isDirty: !!t.dirty,
             })),
             _tabKey(activeIdx));
-        this._paintTopTabs(entry.tabStripHostEl, tabs);
+        this._paintTopTabs(entry.tabStripHostEl, tabs, activeIdx, entry);
     }
 
     /**
@@ -1179,13 +1277,13 @@ export class TileRenderer {
      * rendered last. The class names used here are the component's published
      * contract, stated in its header comment.
      */
-    _paintTopTabs(hostEl, tabs) {
+    _paintTopTabs(hostEl, tabs, activeIdx = -1, entry = null) {
         if (!hostEl) return;
         const els = hostEl.querySelectorAll('.tab');
         els.forEach((el, i) => {
             const spec = tabs[i];
             if (!spec) return;
-            el.title = spec.title || spec.kind || '';
+            el.title = this._tabLabel(spec, i === activeIdx, entry);
             const icon = spec.kind ? this.ctx?.taxonomy?.meta?.(spec.kind)?.icon : null;
             const glyph = el.querySelector('.tab-icon');
             if (glyph && icon) glyph.textContent = icon;

package/src/tiling/wm.js

@@ -177,6 +177,24 @@ export class WindowManager {
         this.renderer.setTabLayout(layout);
     }
 
+    /** C38. Open a new tab in a tile and show it. It holds the taxonomy root —
+     *  what a split seeds its new pane with, so "a new tab" and "a new pane"
+     *  start in the same place. Defaults to the focused tile. A panel tile
+     *  grows no tabs (`TileTree.appendLeafTab`); then this does nothing and
+     *  answers -1, else the new tab's index. */
+    newTab(leafId = null) {
+        const tree = this._tree();
+        const id = leafId ?? tree.focusedLeafId;
+        const seed = this._rootLeaf();
+        const idx = tree.appendLeafTab(id, seed.content, seed.title);
+        if (idx < 0) return -1;
+        tree.focus(id);
+        this.renderer.render();
+        this._persist();
+        this._notifyChange('tab-new');
+        return idx;
+    }
+
     /** Emit on bus + call onChange. Use this instead of the bare callback
      *  so other surfaces (palette, top-bar toggles, page shortcuts) can
      *  subscribe through the existing event system. */
@@ -3449,6 +3467,12 @@ export class WindowManager {
             this._notifyChange('twm-tab-close');
             return;
         }
+        if (action === 'new') {
+            // C38. The `header` strip's `+`. `newTab` renders, persists and
+            // notifies on its own.
+            this.newTab(leafId);
+            return;
+        }
         if (action === 'move') {
             tree.moveLeafTab(leafId, data.from, data.to);
             this.renderer.render();