flexdesk 0.16.0 → 0.17.0

package/src/tiling/kind_taxonomy.js

@@ -44,8 +44,28 @@
  *               embedder's business, not the shell's.
  *   labelOf?    `(props) => string` — display label for ONE instance.
  *               Defaults to `props.label`, then `props.id`.
+ *   panels?     `{ left?, right?, bottom? }` — which panels this kind
+ *               offers while it is the primary tile. Each side is `true`,
+ *               `false` or `{ reason }` (see panel_availability.js); a side
+ *               not named is offered. A kind that names no side inherits
+ *               that side from its top-nav kind, so declaring it on a page
+ *               covers every entity opened under it. Withheld panels are
+ *               not inserted and their toggles are disabled, showing
+ *               `reason`.
+ *
+ *   single?     `true`, or the name of a prop. The kind exists ONCE: content
+ *               that holds heavy app-wide state and must not be mounted
+ *               twice. With `true` there is one instance of the kind; with a
+ *               prop name there is one per value of that prop (`'id'`: one
+ *               tile per record). The window manager makes every open path
+ *               reveal the instance that exists, refuses the copy verbs with
+ *               a reason, and keeps the first of any duplicates a restored
+ *               layout holds. The root kind cannot be single: every new
+ *               pane, tab and desktop is seeded with it.
  */
 
+import { PANEL_OFFERED, PANEL_SIDES, readPanelOffer } from './panel_availability.js';
+
 /** Build a taxonomy from an embedder's kind map. Validated eagerly and
  *  frozen — a typo in a `topNav` pointer is a boot error, not a chrome
  *  surface that silently renders nothing six clicks later. */
@@ -68,6 +88,27 @@ export function createTaxonomy({ kinds, root } = {}) {
             throw new Error(
                 `createTaxonomy: '${kind}' is both a top-nav kind and owned by one`);
         }
+        if (def.panels !== undefined) {
+            if (!def.panels || typeof def.panels !== 'object' || Array.isArray(def.panels)) {
+                throw new TypeError(`createTaxonomy: '${kind}'.panels must be an object`);
+            }
+            for (const [side, offer] of Object.entries(def.panels)) {
+                if (!PANEL_SIDES.includes(side)) {
+                    throw new Error(`createTaxonomy: '${kind}'.panels names unknown side '${side}'`);
+                }
+                readPanelOffer(offer, `createTaxonomy: '${kind}'.panels.${side}`);
+            }
+        }
+        if (def.single != null && def.single !== false && def.single !== true
+            && !(typeof def.single === 'string' && def.single)) {
+            throw new TypeError(
+                `createTaxonomy: '${kind}'.single must be true or a prop name`);
+        }
+    }
+    if (kinds[root].single) {
+        throw new Error(
+            `createTaxonomy: the root kind '${root}' cannot be single — `
+            + 'every new pane, tab and desktop is seeded with it');
     }
     const _kinds = Object.freeze({ ...kinds });
 
@@ -143,6 +184,17 @@ export function createTaxonomy({ kinds, root } = {}) {
         return Array.isArray(s) ? s : [];
     };
 
+    /** Whether `kind` offers the panel on `side`: `{ available, reason }`.
+     *  The kind's own declaration for that side, else its top-nav kind's,
+     *  else offered. Unknown and absent kinds offer every panel. */
+    const panelOffer = (kind, side) => {
+        for (const k of [kind, _kinds[kind]?.topNav]) {
+            const offer = k ? _kinds[k]?.panels?.[side] : undefined;
+            if (offer !== undefined) return readPanelOffer(offer, `taxonomy '${k}'.panels.${side}`);
+        }
+        return PANEL_OFFERED;
+    };
+
     /** Top-nav entries in display order:
      *      { kind, label (short), longLabel, icon }
      *  `label` is the chip text; `longLabel` is what the palette shows. */
@@ -157,6 +209,28 @@ export function createTaxonomy({ kinds, root } = {}) {
                 icon:      m.icon,
             }));
 
+    /** Whether `kind` exists once (KindDef `single`). */
+    const isSingle = (kind) => {
+        const s = _kinds[kind]?.single;
+        return s === true || (typeof s === 'string' && s !== '');
+    };
+
+    /** The identity of one instance of a single kind: two tab specs with the
+     *  same key are the same instance. `null` for a kind that is not single,
+     *  which is how callers ask both questions at once. Keyed by the kind and,
+     *  for `single: '<prop>'`, that prop's value as a string. */
+    const instanceKey = (kind, props) => {
+        if (!isSingle(kind)) return null;
+        const by = _kinds[kind].single;
+        if (by === true) return String(kind);
+        const v = props?.[by];
+        return `${kind}\u0000${v == null ? '' : String(v)}`;
+    };
+
+    /** The sentence a refused copy verb shows for a single kind. */
+    const singleReason = (kind) =>
+        `${_kinds[kind]?.label || kind} is open once: use the one that is open`;
+
     return Object.freeze({
         root,
         kinds: _kinds,
@@ -167,6 +241,10 @@ export function createTaxonomy({ kinds, root } = {}) {
         parentOf,
         labelOf,
         sourcesFor,
+        panelOffer,
         topNavEntries,
+        isSingle,
+        instanceKey,
+        singleReason,
     });
 }

package/src/tiling/nav_panel.js

@@ -30,6 +30,30 @@
  * `activate()` runs on every selection, INCLUDING the first — a pane that
  * has to rebuild on each visit (a git status list, say) does its work there.
  * The filter query is remembered per mode.
+ *
+ * A mode may also carry `filter: false`: a pane with controls of its own.
+ * While it is the active mode the shared filter box is hidden and its pane's
+ * `filter()` is not called; the next mode with a filter shows its own saved
+ * text again.
+ *
+ * Options beyond `modes`:
+ *
+ *   showModeStrip  (true)   false renders no strip: the embedder switches
+ *                           modes through `select()` instead.
+ *   showFilter     (true)   false renders no filter box at all.
+ *   initialMode    (first)  the mode shown at mount; an unknown id falls back
+ *                           to the first mode.
+ *
+ * The handle:
+ *
+ *   select(modeId) -> Promise   the strip click's own path: mounts the mode
+ *                               on first use, runs its `activate()` and
+ *                               restores its filter; resolves once
+ *                               `activate()` has run. An unknown id is
+ *                               ignored (a resolved promise).
+ *   active()       -> modeId    the mode currently shown.
+ *   refresh()      -> Promise   re-runs the active mode's `activate()`.
+ *   destroy()
  */
 
 export function mountNavPanel(hostEl, {
@@ -37,39 +61,54 @@ export function mountNavPanel(hostEl, {
     wm = null,
     eventBus = null,
     filterPlaceholder = 'Filter…',
+    showModeStrip = true,
+    showFilter = true,
+    initialMode = null,
 } = {}) {
     if (!Array.isArray(modes) || modes.length === 0) {
         throw new Error('mountNavPanel: at least one mode is required');
     }
 
-    hostEl.classList.add('twm-nav');
-    hostEl.innerHTML = `
-        <div class="twm-nav__modes" data-role="modes"></div>
+    const stripHtml = showModeStrip
+        ? `
+        <div class="twm-nav__modes" data-role="modes"></div>`
+        : '';
+    const filterHtml = showFilter
+        ? `
         <div class="twm-sidebar-controls twm-nav__filter">
             <span class="material-symbols-outlined twm-sidebar-search-icon">search</span>
             <input class="twm-data-page__search twm-nav__filter-input"
                    type="search" placeholder="${_esc(filterPlaceholder)}"
                    autocomplete="off" />
-        </div>
+        </div>`
+        : '';
+    hostEl.classList.add('twm-nav');
+    hostEl.innerHTML = `${stripHtml}${filterHtml}
         <div class="twm-nav__body" data-role="body"></div>
     `;
     const modesEl = hostEl.querySelector('[data-role="modes"]');
     const bodyEl  = hostEl.querySelector('[data-role="body"]');
+    const filterBoxEl = hostEl.querySelector('.twm-nav__filter');
     const filterEl = hostEl.querySelector('.twm-nav__filter-input');
 
-    modesEl.innerHTML = modes.map((m) => `
+    if (modesEl) {
+        modesEl.innerHTML = modes.map((m) => `
         <button class="twm-nav__mode twm-has-tooltip" data-mode="${_esc(m.id)}"
                 data-tooltip="${_esc(m.label)}">
             <span class="material-symbols-outlined">${_esc(m.icon)}</span>
             <span>${_esc(m.label)}</span>
         </button>
     `).join('');
+    }
 
     const byId = new Map(modes.map((m) => [m.id, m]));
     const hosts = {};   // mode id -> pane host element
     const panes = {};   // mode id -> the object the mode's mount() returned
     const filterByMode = Object.fromEntries(modes.map((m) => [m.id, '']));
-    let mode = modes[0].id;
+    let mode = byId.has(initialMode) ? initialMode : modes[0].id;
+
+    /** Whether the shared filter box serves this mode. */
+    const hasFilter = (id) => !!filterEl && byId.get(id)?.filter !== false;
 
     const ensureHost = (id) => {
         if (hosts[id]) return hosts[id];
@@ -88,9 +127,15 @@ export function mountNavPanel(hostEl, {
         for (const m of modes) {
             ensureHost(m.id).style.display = (m.id === next) ? 'flex' : 'none';
         }
-        modesEl.querySelectorAll('[data-mode]').forEach((b) =>
+        modesEl?.querySelectorAll('[data-mode]').forEach((b) =>
             b.classList.toggle('twm-nav__mode--on', b.dataset.mode === next));
-        filterEl.value = filterByMode[next] || '';
+        if (filterEl) {
+            // Touch the box's style only when a mode without a filter is
+            // involved, so a panel whose modes all filter renders as it always has.
+            if (!hasFilter(next)) filterBoxEl.style.display = 'none';
+            else if (filterBoxEl.style.display) filterBoxEl.style.removeProperty('display');
+            filterEl.value = hasFilter(next) ? (filterByMode[next] || '') : '';
+        }
 
         const paneEl = ensureHost(next);
         if (!panes[next]) {
@@ -108,17 +153,19 @@ export function mountNavPanel(hostEl, {
     };
 
     const _applyFilter = () => {
+        if (!hasFilter(mode)) return;
         const q = filterByMode[mode] || '';
         try { panes[mode]?.filter?.(q); }
         catch (err) { console.warn('[nav] filter failed', mode, err); }
     };
 
-    filterEl.addEventListener('input', () => {
+    filterEl?.addEventListener('input', () => {
+        if (!hasFilter(mode)) return;
         filterByMode[mode] = filterEl.value;
         _applyFilter();
     });
 
-    modesEl.addEventListener('click', (e) => {
+    modesEl?.addEventListener('click', (e) => {
         const btn = e.target.closest('[data-mode]');
         if (btn) activate(btn.dataset.mode);
     });
@@ -126,6 +173,8 @@ export function mountNavPanel(hostEl, {
     activate(mode);
 
     return {
+        select: (modeId) => activate(modeId),
+        active: () => mode,
         refresh: () => activate(mode),
         destroy: () => {
             for (const p of Object.values(panes)) {

package/src/tiling/page_factory.js

@@ -111,20 +111,20 @@ export function createPageFactories({ eventBus = null, events = {}, refreshOn =
             console.error('[page] mount failed', err);
             hideLoading();
         }
-        const listeners = {};
+        // Keep the handles on() returned.
+        const subscriptions = [];
         if (typeof tab?.refresh === 'function' && eventBus?.on) {
             for (const [busEvent, reason] of Object.entries(refreshOn || {})) {
                 const fn = () => {
                     try { tab.refresh(reason); }
                     catch (err) { console.warn('[page] refresh failed', busEvent, err); }
                 };
-                listeners[busEvent] = fn;
-                eventBus.on(busEvent, fn);
+                subscriptions.push(eventBus.on(busEvent, fn));
             }
         }
         return () => {
-            for (const [n, fn] of Object.entries(listeners)) {
-                try { eventBus?.off?.(n, fn); } catch {}
+            for (const handle of subscriptions) {
+                try { handle?.dispose?.(); } catch {}
             }
             try { tab?.dispose?.(); tab?.unmount?.(); } catch {}
         };

package/src/tiling/panel_availability.js

@@ -0,0 +1,49 @@
+/**
+ * panel_availability.js — what "this panel is offered here" means, said once.
+ *
+ * A panel side (`left`, `right`, `bottom`) is either offered or withheld. Two
+ * places may say so, and both speak the same small language:
+ *
+ *   - a KindDef's `panels` (kind_taxonomy.js) — what a kind of content offers
+ *   - `wm.setPanelAvailability(side, offer)` — content overriding at runtime
+ *
+ * An OFFER is one of:
+ *
+ *   true              offered (the same as saying nothing)
+ *   false             withheld, with no reason to show
+ *   { reason }        withheld, and `reason` is what the toggle's tooltip says
+ *
+ * Read into `{ available, reason }`. Anything else is a boot error rather than
+ * a panel that silently stays put, for the same reason a bad `topNav` pointer
+ * is one (createTaxonomy).
+ *
+ * Internal: neither export is part of the package surface.
+ */
+
+export const PANEL_SIDES = Object.freeze(['left', 'right', 'bottom']);
+
+/** What every side is when nobody declared anything: offered, as panels always
+ *  were before availability existed. */
+export const PANEL_OFFERED = Object.freeze({ available: true, reason: null });
+
+/** Read one offer. `where` names the caller in the error. */
+export function readPanelOffer(offer, where) {
+    if (offer === true) return PANEL_OFFERED;
+    if (offer === false) return Object.freeze({ available: false, reason: null });
+    if (offer && typeof offer === 'object' && !Array.isArray(offer)) {
+        const { reason = null } = offer;
+        if (reason !== null && typeof reason !== 'string') {
+            throw new TypeError(`${where}: a panel's \`reason\` must be a string`);
+        }
+        return Object.freeze({ available: false, reason: reason || null });
+    }
+    throw new TypeError(`${where}: a panel offer is true, false or { reason }`);
+}
+
+/** Throw unless `side` is one of PANEL_SIDES. */
+export function assertPanelSide(side, where) {
+    if (!PANEL_SIDES.includes(side)) {
+        throw new TypeError(`${where}: unknown panel side '${side}' `
+            + `(expected ${PANEL_SIDES.join(', ')})`);
+    }
+}

package/src/tiling/shell.js

@@ -42,10 +42,11 @@
 import { WindowManager } from './wm.js';
 import { createContentRegistry } from './content_registry.js';
 import { createCommandPalette } from './command_palette.js';
-import { installKeymap } from './keymap.js';
+import { installKeymap, keymapShortcuts } from './keymap.js';
 import { openTileTabSwitcher } from './tile_tab_menu.js';
 import { mountZoomControl } from './zoom.js';
 import { showContextMenu } from '../ui/components/context_menu.js';
+import { createMenuBar } from '../ui/components/menu_bar.js';
 import { openForm } from '../ui/components/modal.js';
 
 /**
@@ -125,13 +126,36 @@ import { openForm } from '../ui/components/modal.js';
  *                                      desktops is said on the desktops
  *                                      themselves (`group`, `fixed` — see
  *                                      `DesktopManager.chips`).
+ * @param {object}     [cfg.menuBar]    STORY-0030. `{ menus, onAction?, label?,
+ *                                      emptyLabel?, palette? }` — the model of
+ *                                      the menu bar painted into
+ *                                      `chrome.menuBar` (see menu_bar.js). Its
+ *                                      enabled items are also the palette's
+ *                                      commands, after `palette.commands`'
+ *                                      own, unless `palette: false`. Each needs
+ *                                      the other: either alone is a boot error.
  * @param {object}     [cfg.chrome]     { topNav?, paletteButton?, desktops?,
  *                                        panelToggles?: { left?, right?, bottom? },
- *                                        zoom? }
+ *                                        zoom?, menuBar? }
  *                                      `zoom` is C31: the element the content
  *                                      zoom control is painted into — see
  *                                      zoom.js. Absent, there is no control and
- *                                      nothing is ever scaled.
+ *                                      nothing is ever scaled. `menuBar` is the
+ *                                      element that becomes the menu bar; it
+ *                                      needs `cfg.menuBar`.
+ * @param {object}     [cfg.keymap]     `{ bindings?: { [chord]: action | false | fn } }`
+ *                                      — the window manager's chords, changed:
+ *                                      `false` hands a chord back to the page
+ *                                      (unprevented), an action name such as
+ *                                      `'nav:0'` rebinds it, a function runs
+ *                                      instead. Chord ids and action names are
+ *                                      listed in keymap.js; an unknown one is
+ *                                      warned about once and ignored. The
+ *                                      palette's *Keyboard shortcuts* lists the
+ *                                      bindings in effect. Omitted, the default
+ *                                      keymap, `?` for help included. Anything
+ *                                      but an object whose only key is
+ *                                      `bindings` is a TypeError.
  * @returns {Promise<object>} the frozen shell
  */
 export async function createShell({
@@ -155,11 +179,13 @@ export async function createShell({
     tabLayout = null,
     newTabButton = true,
     desktopBar = {},
+    menuBar: menuBarCfg = null,
     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
     // working. Omitted, the default top-bar selector applies.
     navSelector = null,
+    keymap = null,
 } = {}) {
     // A bad shell is a BOOT error, not a runtime surprise. Same doctrine as
     // createHost / createTaxonomy.
@@ -168,6 +194,25 @@ export async function createShell({
     }
     if (!taxonomy) throw new Error('createShell: a taxonomy is required');
     if (!entities) throw new Error('createShell: an entity catalog is required');
+    if (chrome.menuBar && !menuBarCfg?.menus) {
+        throw new TypeError('createShell: `chrome.menuBar` needs `menuBar: { menus }`');
+    }
+    if (menuBarCfg && !chrome.menuBar) {
+        throw new TypeError('createShell: `menuBar` needs `chrome.menuBar`, the element it is painted into');
+    }
+    // `keymap` is checked here, not left to the keymap: a typo such as
+    // `{ binding: … }` would otherwise be dropped without a word, and the chord
+    // the embedder meant to take back would stay bound.
+    if (keymap != null) {
+        if (typeof keymap !== 'object' || Array.isArray(keymap)) {
+            throw new TypeError('createShell: `keymap` must be an object of { bindings }');
+        }
+        const extra = Object.keys(keymap).filter((k) => k !== 'bindings');
+        if (extra.length) {
+            throw new TypeError(`createShell: unknown \`keymap\` key(s) ${extra.map((k) => `"${k}"`).join(', ')}`
+                + ' — the only key is `bindings`');
+        }
+    }
 
     const log = logger ?? { info(){}, warn(){}, error(){}, debug(){} };
     const registry = createContentRegistry(content);   // throws on a non-function
@@ -213,13 +258,25 @@ export async function createShell({
         onChange: () => syncChrome(),
     });
 
+    // STORY-0030. The menu bar is built before the palette so that its model
+    // can be the palette's commands too: one list of verbs, two doors.
+    const menuBar = chrome.menuBar ? createMenuBar(chrome.menuBar, menuBarCfg) : null;
+    const ownCommands = paletteCfg.commands;
+    const commands = menuBar && menuBarCfg.palette !== false
+        ? () => [...(typeof ownCommands === 'function' ? ownCommands() || [] : []), ...menuBar.commands()]
+        : ownCommands;
+    const bindings = keymap?.bindings ?? null;
     const palette = createCommandPalette({
-        wm, api, taxonomy, catalog: entities, ...paletteCfg,
+        wm, api, taxonomy, catalog: entities,
+        // What *Keyboard shortcuts* lists is what the keys do in THIS shell.
+        shortcuts: keymapShortcuts(bindings),
+        ...paletteCfg, commands,
     });
     // `navSelector` lets an embedder that moved its sections out of the top
     // bar keep F1..F8 working. Omitted, the default top-bar selector applies —
-    // the behaviour every existing embedder has today.
-    const disposeKeymap = installKeymap({ wm, palette, navSelector });
+    // the behaviour every existing embedder has today. The keymap also binds
+    // `?` to help, so `dispose()` takes the help shortcut off with it.
+    const disposeKeymap = installKeymap({ wm, palette, navSelector, bindings, logger });
 
     // Chrome — painted into the ELEMENTS the embedder handed over. An absent
     // key means absent chrome, not a crash.
@@ -240,7 +297,8 @@ export async function createShell({
     toggles = bindPanelToggles(chrome.panelToggles, wm);
 
     // Belt-and-braces: anything else that mutates the WM fans out to chrome.
-    eventBus?.on?.('wm:changed', syncChrome);
+    // Keep the handle on() returned.
+    const chromeSubscription = eventBus?.on?.('wm:changed', syncChrome);
 
     await wm.load();          // ← FIRST MOUNT
     syncChrome();
@@ -262,6 +320,8 @@ export async function createShell({
             // `get`/`set` so an embedder can drive the zoom from its own settings
             // pane, or read it, without reaching into the control's DOM.
             zoom,
+            // STORY-0030. `setEnabled` / `setChecked` / `open` / `commands`.
+            menuBar,
         }),
         // A shell that can be built can be built TWICE — an embedder that
         // rebuilds on a context change (a different project, a different
@@ -269,7 +329,7 @@ export async function createShell({
         // outside `root` has to come off, or the second shell shares the page
         // with the first one's keyboard.
         dispose: () => {
-            try { eventBus?.off?.('wm:changed', syncChrome); } catch { /* ignore */ }
+            try { chromeSubscription?.dispose?.(); } catch { /* ignore */ }
             try { disposeKeymap?.(); } catch { /* ignore */ }
             try { palette?.close?.(); } catch { /* ignore */ }
             // Every content factory gets its `destroy()`. Clearing the root
@@ -290,6 +350,8 @@ export async function createShell({
             // persist it under the host the old shell was given. The element
             // goes; the next shell paints its own.
             try { desktopsEl?.remove(); } catch { /* ignore */ }
+            // Its listeners are on the document; a rebuilt shell paints its own.
+            try { menuBar?.dispose(); } catch { /* ignore */ }
         },
     });
 }
@@ -368,13 +430,19 @@ function mountPaletteButton(hostEl, palette) {
     return btn;
 }
 
+/** What each toggle said before a withheld panel made it say why, so the
+ *  embedder's own tooltip comes back when the panel is offered again. Held
+ *  here, keyed by the fresh node, never written back to the DOM. */
+const OWN_TOOLTIPS = new WeakMap();
+
 /**
  * Take ownership of the embedder's three panel-toggle buttons.
  *
  * cloneNode copies any state the embedder's own machinery left on a button
  * (.active/.pinned/.disabled, the disabled attr, aria-pressed). We strip it so
- * the WM is the sole, clean source of truth — `syncPanelToggles` manages only
- * `.panel-toggle-btn--on` from here on. The clone keeps the id, so an embedder
+ * the WM is the sole, clean source of truth — `syncPanelToggles` manages
+ * `.twm-panel-toggle-btn--on` and a withheld panel's `aria-disabled` and
+ * tooltip from here on. The clone keeps the id, so an embedder
  * that drives a toggle by `getElementById(...).click()` still works.
  *
  * @returns {{left?:Element, right?:Element, bottom?:Element}} the FRESH nodes
@@ -391,16 +459,44 @@ function bindPanelToggles(map, wm) {
         el.removeAttribute('aria-pressed');
         btn.replaceWith(el);
         el.addEventListener('click', () => wm.togglePanel(side));
+        OWN_TOOLTIPS.set(el, {
+            tooltip: el.getAttribute('data-tooltip'),
+            title: el.getAttribute('title'),
+        });
         fresh[side] = el;
     }
     return fresh;
 }
 
+/** Mirror the WM onto the toggles: `--on` while a panel shows, and, while the
+ *  primary content withholds one, `aria-disabled` and the reason as the
+ *  tooltip. `aria-disabled` rather than `disabled`: a disabled button gets no
+ *  pointer events in every engine, and the reason is only worth giving if the
+ *  pointer can find it. A click on it is answered by `togglePanel`, which
+ *  refuses a withheld panel. */
 function syncPanelToggles(map, wm) {
     for (const side of ['left', 'right', 'bottom']) {
         const btn = map?.[side];
         if (!btn) continue;
         btn.classList.toggle('twm-panel-toggle-btn--on', wm.isPanelOpen(side));
+        const { available, reason } = wm.getPanelAvailability(side);
+        const own = OWN_TOOLTIPS.get(btn) || {};
+        const restore = (attr, value) => (value == null
+            ? btn.removeAttribute(attr) : btn.setAttribute(attr, value));
+        if (available) {
+            btn.removeAttribute('aria-disabled');
+            restore('data-tooltip', own.tooltip);
+            restore('title', own.title);
+            continue;
+        }
+        btn.setAttribute('aria-disabled', 'true');
+        // The framework's tooltip reads `data-tooltip` on a `twm-has-tooltip`
+        // button and strips `title` from it; any other button shows `title`.
+        if (btn.classList.contains('twm-has-tooltip')) {
+            restore('data-tooltip', reason ?? own.tooltip);
+        } else {
+            restore('title', reason ?? own.title);
+        }
     }
 }
 
@@ -560,13 +656,18 @@ function _tileContextMenu(wm, leafId, x, y) {
     const isPanel = String(leaf.content?.kind || '').startsWith('panel:');
     tree.focus(leafId);
     wm.renderer._updateFocusClasses();
+    // A SINGLE KIND HAS NO COPIES. The two copy verbs are greyed, and say why;
+    // the move verbs below (float, move to desktop) carry the one instance.
+    const single = !!leaf.content && wm.isSingleKind(leaf.content.kind);
+    const singleTitle = single ? wm.taxonomy.singleReason(leaf.content.kind) : undefined;
 
     const items = [
         { label: 'Split horizontally', icon: 'splitscreen_vertical_add', action: 'split-h' },
         { label: 'Split vertically',   icon: 'splitscreen_add',          action: 'split-v' },
         { separator: true },
         { label: 'Open in new tab',    icon: 'tab',
-          action: 'open-tab',    disabled: isPanel || !leaf.content },
+          action: 'open-tab',    disabled: isPanel || !leaf.content || single,
+          title: singleTitle },
         // TWO DIFFERENT GLYPHS FOR TWO DIFFERENT DESTINATIONS. `web_asset` is a
         // window INSIDE the application — the same glyph `ManagedWindow` uses
         // for itself — and an embedder that can also send content to a real
@@ -575,7 +676,8 @@ function _tileContextMenu(wm, leafId, x, y) {
         // two commands are the same command, and then loses a window looking
         // for it on the other screen.
         { label: 'Open a copy in a window', icon: 'web_asset',
-          action: 'open-window', disabled: isPanel || !leaf.content },
+          action: 'open-window', disabled: isPanel || !leaf.content || single,
+          title: singleTitle },
         // C20, THE OTHER HALF — and it was missing while the `close` half
         // below carried a paragraph explaining why it could not be.
         //