flexdesk 0.17.16 → 0.17.18

package/src/tiling/wm.js

@@ -344,6 +344,29 @@ export class WindowManager {
     //
     // MOVE verbs (float, dock, drag a tab, move to desktop) carry the one
     // instance somewhere else and are untouched.
+    //
+    // `single: 'desktop'` keeps the same promises per virtual desktop: a
+    // desktop is the tiles and panels the user arranged on it, so opening the
+    // kind looks only at the ACTIVE desktop — its tiles, their archived pages
+    // and the windows on it — and opens it there when that desktop has none.
+    // A window is on the desktop it was opened on or moved to (`desktopIdx`):
+    // a free-floating one is drawn over every desktop, but it is that one
+    // desktop's instance, so it never stands in for another desktop's. The
+    // move verbs refuse to carry the kind onto a desktop that already holds
+    // it (`desktopMoveRefusal`). Navigating inside a window looks on the
+    // window's own desktop (`openInWindow`). Removing a desktop brings its
+    // windows across, a window never being destroyed by a tile operation, so
+    // the active desktop can then hold the kind twice until the next reload
+    // keeps the first.
+
+    /** The key a tab's instance is unique under on desktop `desktopIdx`: its
+     *  instance key, scoped to that desktop for a `single: 'desktop'` kind;
+     *  null for a tab that is not single. */
+    _scopedKey(t, desktopIdx) {
+        const k = t ? this._instanceKey(t.kind, t.props) : null;
+        if (k == null || !this.taxonomy.isSinglePerDesktop(t.kind)) return k;
+        return `${desktopIdx}\u0000${k}`;
+    }
 
     /** The instance key of a tab spec, or null when its kind is not single. */
     _instanceKey(kind, props) {
@@ -356,27 +379,38 @@ export class WindowManager {
     }
 
     /** Where the one instance of a single kind is open, or null — also null
-     *  for a kind that is not single. One of:
+     *  for a kind that is not single. A `single: 'desktop'` kind is looked for
+     *  on the active desktop only. One of:
      *    `{ where: 'window',  windowId, idx, desktopIdx }`
      *    `{ where: 'tab',     desktopIdx, leafId, idx }`
      *    `{ where: 'archive', desktopIdx, leafId, page, idx }` — a tab of a
      *      top-nav page the tile has switched away from (`pageTabs`). */
     findInstance(kind, props = {}) {
+        const on = this.taxonomy.isSinglePerDesktop(kind) ? this.desktops.activeIdx : null;
+        return this._findInstance(kind, props, on);
+    }
+
+    /** `findInstance`, looking only at desktop `on` when it is a number, and
+     *  past the window `exceptWindowId`. */
+    _findInstance(kind, props, on, exceptWindowId = null) {
         const key = this._instanceKey(kind, props);
         if (key == null) return null;
         const same = (t) => !!t && this._instanceKey(t.kind, t.props) === key;
+        const desktops = [...this.desktops.desktops.entries()]
+            .filter(([desktopIdx]) => on == null || desktopIdx === on);
         for (const [windowId, rec] of this._windowToLeaf) {
+            if (windowId === exceptWindowId) continue;
+            if (on != null && rec.desktopIdx !== on) continue;
             const idx = _windowTabSpecs(rec).findIndex(same);
             if (idx >= 0) return { where: 'window', windowId, idx, desktopIdx: rec.desktopIdx };
         }
-        const desktops = this.desktops.desktops;
-        for (const [desktopIdx, d] of desktops.entries()) {
+        for (const [desktopIdx, d] of desktops) {
             for (const leaf of d.tree.leaves()) {
                 const idx = (leaf.tabs || []).findIndex(same);
                 if (idx >= 0) return { where: 'tab', desktopIdx, leafId: leaf.id, idx };
             }
         }
-        for (const [desktopIdx, d] of desktops.entries()) {
+        for (const [desktopIdx, d] of desktops) {
             for (const leaf of d.tree.leaves()) {
                 for (const [page, arc] of this._archivedPages(leaf)) {
                     const idx = arc.tabs.findIndex(same);
@@ -387,6 +421,31 @@ export class WindowManager {
         return null;
     }
 
+    /** Why moving a pane's or a window's tabs onto desktop `idx` is refused,
+     *  or null: that desktop already holds one of their `single: 'desktop'`
+     *  kinds (in a tile, an archived page or a window), and a desktop holds
+     *  such a kind once. `source` is `{ leafId }` (a tile of the active
+     *  desktop) or `{ windowId }`. The move verbs ask it, and their menu rows
+     *  are greyed with its sentence. */
+    desktopMoveRefusal(source, idx) {
+        let specs = [];
+        if (source?.windowId) {
+            const rec = this._windowToLeaf.get(source.windowId);
+            specs = rec ? _windowTabSpecs(rec) : [];
+        } else {
+            const leaf = this._tree().get(source?.leafId);
+            specs = leaf?.tabs?.length ? leaf.tabs : (leaf?.content ? [leaf.content] : []);
+        }
+        const d = this.desktops.desktops[idx];
+        if (!d) return null;
+        for (const t of specs) {
+            if (!t || !this.taxonomy.isSinglePerDesktop(t.kind)) continue;
+            if (!this._findInstance(t.kind, t.props, idx, source.windowId ?? null)) continue;
+            return `${this.taxonomy.kinds[t.kind]?.label || t.kind} is open on desktop ${d.label} already`;
+        }
+        return null;
+    }
+
     /** Reveal the instance of a single kind that is open: answers whether
      *  there was one. Every open path asks this first.
      *
@@ -400,7 +459,12 @@ export class WindowManager {
      *  open names no props at all — a top-nav button, `openInPrimary(kind)` —
      *  which asks to SEE the instance, not to empty it. */
     revealInstance(kind, props = {}) {
-        const loc = this.findInstance(kind, props);
+        return this._revealFound(this.findInstance(kind, props), kind, props);
+    }
+
+    /** Reveal the instance at `loc` (a `findInstance` result, or null) and
+     *  hand it `props`. Answers whether there was one to reveal. */
+    _revealFound(loc, kind, props) {
         if (!loc || !this._revealAt(loc)) return false;
         if (props && Object.keys(props).length) this._deliverProps(kind, props);
         return true;
@@ -516,7 +580,8 @@ export class WindowManager {
      *  soon as the tile leaves the page by a path other than `swapToPage`
      *  (`navigateActiveTab`). So a restored tab whose instance is live
      *  anywhere else is dropped from the tile and from the restored archive;
-     *  the instance stays where it is. */
+     *  the instance stays where it is. For a `single: 'desktop'` kind,
+     *  anywhere else on the tile's desktop. */
     _swapToPage(tree, leafId, target, currentTopNav, targetTopNav, opts) {
         const done = tree.swapToPage(leafId, target, currentTopNav, targetTopNav, opts);
         if (done) this._dropRestoredCopies(tree, leafId, targetTopNav, target);
@@ -527,11 +592,12 @@ export class WindowManager {
         const leaf = tree.get(leafId);
         const tabs = Array.isArray(leaf?.tabs) ? leaf.tabs : null;
         if (!tabs) return;
+        const desktopIdx = this.desktops.desktops.findIndex((d) => d.tree === tree);
         const elsewhere = this._liveInstanceKeys(tree, leafId);
         const keeper = () => {
             const seen = new Set();
             return (t) => {
-                const k = t ? this._instanceKey(t.kind, t.props) : null;
+                const k = this._scopedKey(t, desktopIdx);
                 if (k == null) return true;
                 if (elsewhere.has(k) || seen.has(k)) return false;
                 seen.add(k);
@@ -569,16 +635,23 @@ export class WindowManager {
         tree.setActiveLeafTab(leafId, Math.max(0, Math.min(tabs.length - 1, active)));
     }
 
-    /** The instance keys of every LIVE tab — windows, and every leaf of every
-     *  desktop but `leafId` of `tree`. Archived pages are not live. */
+    /** The scoped keys (`_scopedKey`, for `tree`'s desktop) of every LIVE
+     *  tab — windows, and every leaf of every desktop but `leafId` of `tree`;
+     *  a `single: 'desktop'` tab counts only when it is on `tree`'s desktop.
+     *  Archived pages are not live. */
     _liveInstanceKeys(tree, leafId) {
+        const here = this.desktops.desktops.findIndex((d) => d.tree === tree);
         const keys = new Set();
-        const add = (t) => {
-            const k = t ? this._instanceKey(t.kind, t.props) : null;
+        const adder = (onHere) => (t) => {
+            if (!onHere && t && this.taxonomy.isSinglePerDesktop(t.kind)) return;
+            const k = this._scopedKey(t, here);
             if (k != null) keys.add(k);
         };
-        for (const [, rec] of this._windowToLeaf) _windowTabSpecs(rec).forEach(add);
+        for (const [, rec] of this._windowToLeaf) {
+            _windowTabSpecs(rec).forEach(adder(rec.desktopIdx === here));
+        }
         for (const d of this.desktops.desktops) {
+            const add = adder(d.tree === tree);
             for (const leaf of d.tree.leaves()) {
                 if (d.tree === tree && leaf.id === leafId) continue;
                 (leaf.tabs || []).forEach(add);
@@ -618,14 +691,15 @@ export class WindowManager {
         return dropped;
     }
 
-    /** A restored layout keeps the FIRST instance of each single kind: later
-     *  live tabs are dropped (the tile shows the tab that took the dropped
-     *  one's place, or closes when it held nothing else), and so are later
-     *  archived ones. Answers whether anything was dropped. */
+    /** A restored layout keeps the FIRST instance of each single kind (of a
+     *  `single: 'desktop'` kind, on each desktop): later live tabs are
+     *  dropped (the tile shows the tab that took the dropped one's place, or
+     *  closes when it held nothing else), and so are later archived ones.
+     *  Answers whether anything was dropped. */
     _dropDuplicateSingles() {
         const seen = new Set();
-        return this._pruneRestoredTabs((t) => {
-            const k = t ? this._instanceKey(t.kind, t.props) : null;
+        return this._pruneRestoredTabs((t, desktopIdx) => {
+            const k = this._scopedKey(t, desktopIdx);
             if (k == null) return true;
             if (seen.has(k)) return false;
             seen.add(k);
@@ -633,19 +707,20 @@ export class WindowManager {
         });
     }
 
-    /** Drop every tab of the restored layout `keep(tab)` refuses, in the
-     *  tiles and in their archived pages; a tile left empty closes (seeding a
-     *  content tile if none is left). Returns whether anything went. */
+    /** Drop every tab of the restored layout `keep(tab, desktopIdx)` refuses,
+     *  in the tiles and in their archived pages; a tile left empty closes
+     *  (seeding a content tile if none is left). Returns whether anything
+     *  went. */
     _pruneRestoredTabs(keep) {
         let dropped = false;
-        for (const d of this.desktops.desktops) {
+        for (const [desktopIdx, d] of this.desktops.desktops.entries()) {
             const tree = d.tree;
             for (const leaf of tree.leaves()) {
                 const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
                 let active = leaf.activeTabIdx || 0;
                 let changed = false;
                 for (let i = 0; i < tabs.length;) {
-                    if (keep(tabs[i])) { i++; continue; }
+                    if (keep(tabs[i], desktopIdx)) { i++; continue; }
                     tabs.splice(i, 1);
                     if (i < active) active -= 1;
                     changed = true;
@@ -664,10 +739,10 @@ export class WindowManager {
                 }
             }
         }
-        for (const d of this.desktops.desktops) {
+        for (const [desktopIdx, d] of this.desktops.desktops.entries()) {
             for (const leaf of d.tree.leaves()) {
                 for (const [page, arc] of this._archivedPages(leaf)) {
-                    const kept = arc.tabs.filter(keep);
+                    const kept = arc.tabs.filter((t) => keep(t, desktopIdx));
                     if (kept.length === arc.tabs.length) continue;
                     dropped = true;
                     if (!kept.length) { delete leaf.pageTabs[page]; continue; }
@@ -1096,9 +1171,15 @@ export class WindowManager {
      *  and updates the window's title. */
     openInWindow(winId, kind, props = {}) {
         if (this._openWindowOnly(kind, props)) return;
-        if (this.revealInstance(kind, props)) return;
         const rec = this._windowToLeaf.get(winId);
         if (!rec) { this.openInPrimary(kind, props); return; }
+        // A window is on its own desktop, even a free-floating one drawn over
+        // every desktop: a `single: 'desktop'` kind navigated to in it is
+        // looked for on the window's desktop, not the one on screen.
+        const loc = this.taxonomy.isSinglePerDesktop(kind)
+            ? this._findInstance(kind, props, rec.desktopIdx)
+            : this.findInstance(kind, props);
+        if (this._revealFound(loc, kind, props)) return;
         try { rec.mountInfo?.destroy?.(); } catch {}
         // R8. THE BODY, NOT THE CONTENT ELEMENT. A floated pane's window holds
         // a tab strip above its body, and both are children of `contentEl` —
@@ -3149,6 +3230,11 @@ export class WindowManager {
         // The window's home follows the drop. Without this the dock is applied
         // to the tree of the desktop the window was PROMOTED from, and the tile
         // the user aimed at is on the one they are looking at.
+        // A free-floating window is drawn over every desktop, so a drop can
+        // carry it to another one: refused, as the move verbs are, when that
+        // desktop holds its `single: 'desktop'` kind already.
+        if (typeof desktopIdx === 'number' && desktopIdx !== record.desktopIdx
+            && this.desktopMoveRefusal({ windowId: winId }, desktopIdx)) return false;
         if (typeof desktopIdx === 'number') record.desktopIdx = desktopIdx;
 
         // THE DRAG ALREADY ANSWERED, so there is nothing to ask — the probe
@@ -3236,6 +3322,8 @@ export class WindowManager {
         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;
+        // A desktop holds a `single: 'desktop'` kind once.
+        if (this.desktopMoveRefusal({ windowId }, targetIdx)) return;
         this.desktops.ensureCount(targetIdx + 1);
         rec.desktopIdx = targetIdx;
         if (!rec.homeContainer && rec.homeLeafId) {
@@ -3411,9 +3499,11 @@ export class WindowManager {
             if (targets.length) {
                 items.push({ separator: true });
                 for (const [i, d] of targets) {
+                    const refusal = this.desktopMoveRefusal({ windowId: winId }, i);
                     items.push({
                         label: `Move to desktop ${d.label}`, icon: 'sweep',
-                        action: `move:${i}`,
+                        action: `move:${i}`, disabled: !!refusal,
+                        title: refusal || undefined,
                     });
                 }
             }
@@ -3988,7 +4078,9 @@ export class WindowManager {
      * ruling is that a tile operation may move a window and never destroy it,
      * and removing a desktop is the largest tile operation there is: they come
      * across to the desktop that ends up active, re-homed onto its ground by
-     * `_rehomeContainedWindows` on the render below.
+     * `_rehomeContainedWindows` on the render below. One holding a
+     * `single: 'desktop'` kind the active desktop already has makes it hold
+     * the kind twice, until a reload keeps the first.
      */
     removeDesktop(idx) {
         const m = this.desktops;
@@ -4066,6 +4158,9 @@ export class WindowManager {
         // 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;
+        // A desktop holds a `single: 'desktop'` kind once: a pane carrying one
+        // the target already has stays where it is.
+        if (this.desktopMoveRefusal({ leafId: focused.id }, idx)) 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/menu_bar.js

@@ -62,6 +62,15 @@
  * shortcut, context, action }`), so the palette and the bar list identical
  * verbs.
  *
+ * ── Two styles: a bar, or one hamburger button (STORY-0133) ───────────
+ * `style: 'bar'` (the default) draws a title per menu: File  Edit  Help.
+ * `style: 'hamburger'` draws ONE icon button (`icon`, 'menu' by default,
+ * named by `label`) whose menu lists the menus, each flying out its items:
+ * ☰ › File › Open…. It is the same model, so `commands()`, `setEnabled`,
+ * `setChecked` and `onAction` do not change; `open(menuId)` opens the
+ * hamburger with that menu flown out. `setStyle(style)` switches at run
+ * time (a setting, a narrow window), closing whatever is open.
+ *
  * ── Roles ─────────────────────────────────────────────────────────────
  * The WAI-ARIA menubar pattern: `role="menubar"` on the element you pass,
  * a `role="menuitem"` title per menu inside a `role="none"` wrapper, each
@@ -77,6 +86,9 @@
 const SEL_TITLE = '.twm-menubar__title';
 const SEL_ITEM = '.twm-menubar__item';
 const SEL_MENU = '.twm-menubar__menu';
+const STYLES = ['bar', 'hamburger'];
+/** The hamburger's own model ids. A menu's row in it is `${HAMBURGER}:${menu.id}`. */
+const HAMBURGER = 'twm-menubar:hamburger';
 
 /** @returns {MenuBar} */
 export function createMenuBar(el, opts) {
@@ -91,16 +103,22 @@ export class MenuBar {
      * @param {Function} [opts.onAction]  `(id, { item, checked }) => void`
      * @param {string}  [opts.label]      the bar's accessible name ('Menu')
      * @param {string}  [opts.emptyLabel] the disabled row an empty submenu shows ('Empty')
+     * @param {string}  [opts.style]      'bar' (a title per menu, the default) or 'hamburger' (one button)
+     * @param {string}  [opts.icon]       the hamburger's Material Symbols icon ('menu')
      */
-    constructor(el, { menus, onAction = null, label = 'Menu', emptyLabel = 'Empty' } = {}) {
+    constructor(el, { menus, onAction = null, label = 'Menu', emptyLabel = 'Empty', style = 'bar', icon = 'menu' } = {}) {
         if (!el || typeof el.appendChild !== 'function') {
             throw new TypeError('createMenuBar: `el` must be an element');
         }
         _validateMenus(menus);
+        _validateStyle(style);
         this.el = el;
         this.menus = menus;
         this._onAction = typeof onAction === 'function' ? onAction : null;
         this._emptyLabel = emptyLabel;
+        this._label = label;
+        this._icon = icon;
+        this._style = style;
         this._doc = el.ownerDocument;
         this._disabled = new Map();     // id -> boolean (override)
         this._checked = new Map();      // id -> boolean (override, check items)
@@ -112,26 +130,10 @@ export class MenuBar {
         this._returnTo = null;          // what had focus before the bar did
         this._altArmed = false;
 
-        el.innerHTML = '';
         el.classList.add('twm-menubar');
         el.setAttribute('role', 'menubar');
         el.setAttribute('aria-label', label);
-        this._titles = menus.map((m, i) => {
-            const entry = this._doc.createElement('div');
-            entry.className = 'twm-menubar__entry';
-            entry.setAttribute('role', 'none');
-            const btn = this._doc.createElement('button');
-            btn.type = 'button';
-            btn.className = 'twm-menubar__title';
-            btn.setAttribute('role', 'menuitem');
-            btn.setAttribute('aria-haspopup', 'menu');
-            btn.setAttribute('aria-expanded', 'false');
-            btn.tabIndex = i === 0 ? 0 : -1;
-            btn.textContent = m.label;
-            entry.appendChild(btn);
-            el.appendChild(entry);
-            return btn;
-        });
+        this._renderTitles();
 
         this._h = {
             mousedown: (e) => this._onMouseDown(e),
@@ -163,12 +165,35 @@ export class MenuBar {
     /** Whether a menu is open. */
     isOpen() { return this._openIdx >= 0; }
 
-    /** Open the menu with this id (focus on its title, or on its first item). */
+    /** Open the menu with this id (focus on its title, or on its first item).
+     *  A hamburger opens with that menu flown out (focus on its row, or on
+     *  the menu's first item). */
     open(menuId, { focusItem = false } = {}) {
         const i = this.menus.findIndex((m) => m.id === menuId);
         if (i < 0) return;
         this._enter();
-        this._open(i, focusItem ? 'first' : null);
+        if (this._style !== 'hamburger') { this._open(i, focusItem ? 'first' : null); return; }
+        this._open(0, null);
+        const row = this._itemsIn(this._stack[0].menu)
+            .find((b) => this._models.get(b)?.id === `${HAMBURGER}:${menuId}`);
+        if (!row) return;
+        row.focus({ preventScroll: true });
+        this._openSub(row, focusItem ? 'first' : null);
+    }
+
+    /** 'bar' or 'hamburger'. */
+    get style() { return this._style; }
+
+    /** Draw the menus as a bar or as one hamburger button. Whatever is open
+     *  closes; the model and every setEnabled / setChecked stay. */
+    setStyle(style) {
+        _validateStyle(style);
+        if (style === this._style) return;
+        const hadFocus = this.el.contains(this._doc.activeElement);
+        this._deactivate();
+        this._style = style;
+        this._renderTitles();
+        if (hadFocus) this._focusTitle(0);
     }
 
     /** Close every open menu. Focus stays in the bar if it was there. */
@@ -239,7 +264,7 @@ export class MenuBar {
         this._doc.removeEventListener('mousedown', this._h.docMousedown, true);
         this._doc.defaultView?.removeEventListener('blur', this._h.winBlur);
         this.el.innerHTML = '';
-        this.el.classList.remove('twm-menubar');
+        this.el.classList.remove('twm-menubar', 'twm-menubar--hamburger');
         this.el.removeAttribute('role');
         this.el.removeAttribute('aria-label');
     }
@@ -317,6 +342,50 @@ export class MenuBar {
         }
     }
 
+    // ── titles ────────────────────────────────────────────────────────
+
+    /** The titles for the current style. `_top` is what they open: the
+     *  menus themselves, or the hamburger's one menu that lists them. */
+    _renderTitles() {
+        const d = this._doc;
+        const burger = this._style === 'hamburger';
+        this.el.innerHTML = '';
+        this.el.classList.toggle('twm-menubar--hamburger', burger);
+        this._top = burger
+            ? [{ id: HAMBURGER, label: this._label, items: this.menus.map((m) => ({
+                id: `${HAMBURGER}:${m.id}`, label: m.label, submenu: m.items,
+            })) }]
+            : this.menus;
+        this._titles = this._top.map((m, i) => {
+            const entry = d.createElement('div');
+            entry.className = 'twm-menubar__entry';
+            entry.setAttribute('role', 'none');
+            const btn = d.createElement('button');
+            btn.type = 'button';
+            btn.className = 'twm-menubar__title';
+            btn.setAttribute('role', 'menuitem');
+            btn.setAttribute('aria-haspopup', 'menu');
+            btn.setAttribute('aria-expanded', 'false');
+            btn.tabIndex = i === 0 ? 0 : -1;
+            if (burger) {
+                btn.classList.add('twm-menubar__title--icon', 'twm-has-tooltip');
+                btn.setAttribute('aria-label', m.label);
+                btn.dataset.tooltip = m.label;
+                btn.dataset.tooltipPlacement = 'bottom';
+                const icon = d.createElement('span');
+                icon.className = 'material-symbols-outlined';
+                icon.setAttribute('aria-hidden', 'true');
+                icon.textContent = this._icon;
+                btn.appendChild(icon);
+            } else {
+                btn.textContent = m.label;
+            }
+            entry.appendChild(btn);
+            this.el.appendChild(entry);
+            return btn;
+        });
+    }
+
     // ── open / close ──────────────────────────────────────────────────
 
     _setRoving(i) {
@@ -359,7 +428,7 @@ export class MenuBar {
         // being removed never holds focus.
         this._focusTitle(i);
         this._closeAll();
-        const m = this.menus[i];
+        const m = this._top[i];
         const title = this._titles[i];
         const menu = this._buildMenu(m.items, m.label);
         title.parentElement.appendChild(menu);
@@ -596,6 +665,8 @@ export class MenuBar {
     _titleKey(key, i) {
         const n = this._titles.length;
         const open = this._openIdx >= 0;
+        // One title (a hamburger): there is no next or previous menu.
+        if (n === 1 && (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Home' || key === 'End')) return true;
         switch (key) {
             case 'ArrowRight': open ? this._open(i + 1, null) : this._focusTitle((i + 1) % n); return true;
             case 'ArrowLeft':  open ? this._open(i - 1, null) : this._focusTitle((i - 1 + n) % n); return true;
@@ -642,11 +713,11 @@ export class MenuBar {
             case 'End':  this._focusIn(menu, 'last'); return true;
             case 'ArrowRight':
                 if (item?.submenu != null && !this._isDisabled(item)) this._openSub(btn, 'first');
-                else this._open(this._openIdx + 1, 'first');
+                else if (this._titles.length > 1) this._open(this._openIdx + 1, 'first');
                 return true;
             case 'ArrowLeft':
                 if (level > 0) this._closeFrom(level);
-                else this._open(this._openIdx - 1, 'first');
+                else if (this._titles.length > 1) this._open(this._openIdx - 1, 'first');
                 return true;
             case 'Enter': case ' ':
                 this._activate(btn);
@@ -706,6 +777,12 @@ function _kind(item) {
     return 'menuitem';
 }
 
+function _validateStyle(style) {
+    if (!STYLES.includes(style)) {
+        throw new TypeError(`createMenuBar: \`style\` must be ${STYLES.map((s) => `'${s}'`).join(' or ')}`);
+    }
+}
+
 /** A bad model is a boot error, not a menu that silently lacks a row. */
 function _validateMenus(menus) {
     if (!Array.isArray(menus) || !menus.length) {

package/src/ui/components/notification_history.js

@@ -21,7 +21,11 @@
  *   alertsTab   the tab a click asks for, `bottompanel:show { tab }`; 'alerts'.
  *   onOpen      a click, instead of the bus event — for an embedder with no bus,
  *               or whose panel must be opened before a tab can be chosen.
+ *
+ * A right-click on an entry opens the context menu with "Copy message"
+ * (STORY-0131), the same as on its toast; the popover stays open meanwhile.
  */
+import { showNotificationMenu } from '../notification_center.js';
 
 export class NotificationHistory {
     constructor({ notificationCenter, eventBus, logger, mountPoint = null, alertLog = null,
@@ -209,10 +213,15 @@ export class NotificationHistory {
         };
         this._popoverCleanup = cleanup;
 
+        // The entries' context menu is outside the panel, and using it is not leaving it.
         const onDocDown = (ev) => {
+            if (ev.target.closest?.('.twm-context-menu')) return;
             if (!panel.contains(ev.target) && !this.triggerEl.contains(ev.target)) cleanup();
         };
-        const onKey = (ev) => { if (ev.key === 'Escape') cleanup(); };
+        // Escape closes the innermost layer: an open entry menu closes itself.
+        const onKey = (ev) => {
+            if (ev.key === 'Escape' && !document.querySelector('.twm-context-menu')) cleanup();
+        };
         const onResize = () => cleanup();
 
         document.addEventListener('mousedown', onDocDown, true);
@@ -261,6 +270,7 @@ export class NotificationHistory {
             body.className = 'twm-notification-history__item-body';
             body.textContent = entry.message || '';
             item.appendChild(body);
+            item.addEventListener('contextmenu', (event) => showNotificationMenu(event, entry, this.logger));
 
             fragment.appendChild(item);
         }