flexdesk 0.17.18 → 0.18.0

package/src/git/index.js

@@ -0,0 +1,9 @@
+/**
+ * src/git — the modules behind @flexdesk/git.
+ */
+
+export * from './line_diff.js';
+export * from './diff_viewer.js';
+export * from './diff_window.js';
+export * from './git_graph.js';
+export * from './git_panel.js';

package/src/git/line_diff.js

@@ -0,0 +1,202 @@
+/**
+ * line_diff.js — what changed between two texts, as lines to draw.
+ *
+ * Two ways in, one shape out:
+ *
+ *   computeLineDiff(before, after)   the two texts themselves, compared here
+ *   parseUnifiedDiff(text)           what `git diff` printed, read here
+ *
+ * Both answer an array of DiffLine:
+ *
+ *   { kind: 'context' | 'add' | 'del', oldLine, newLine, text }
+ *   { kind: 'gap', oldLine: null, newLine: null, text: '', hidden }   unchanged lines left out
+ *   { kind: 'hunk' | 'meta' | 'file', oldLine: null, newLine: null, text }
+ *
+ * `oldLine` and `newLine` are 1-based, and null on the side a line is not on.
+ * There is no DOM here and nothing about what the text is: a consumer that
+ * compares only part of a file says where that part starts (`beforeStart`,
+ * `afterStart`) and the numbers are the file's.
+ */
+
+/** Past this many differing lines a side, computeLineDiff answers null rather than compare. */
+export const LINE_DIFF_LIMIT = 1500;
+
+/**
+ * A text as its lines. CRLF and LF are the same line end, and a final line end
+ * does not make a last empty line.
+ * @param {string|null|undefined} text
+ * @returns {string[]}
+ */
+export function splitLines(text) {
+    const s = String(text ?? '');
+    if (s === '') return [];
+    const lines = s.split(/\r?\n/);
+    if (lines[lines.length - 1] === '') lines.pop();
+    return lines;
+}
+
+/** The edit script of two line arrays, by longest common subsequence: deletions before additions. */
+function editScript(a, b) {
+    const n = a.length;
+    const m = b.length;
+    const lcs = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+    for (let i = n - 1; i >= 0; i--) {
+        for (let j = m - 1; j >= 0; j--) {
+            lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const ops = [];
+    let i = 0;
+    let j = 0;
+    while (i < n || j < m) {
+        if (i < n && j < m && a[i] === b[j]) { ops.push(['context', i, j]); i++; j++; }
+        else if (i < n && (j >= m || lcs[i + 1][j] >= lcs[i][j + 1])) { ops.push(['del', i, -1]); i++; }
+        else { ops.push(['add', -1, j]); j++; }
+    }
+    return ops;
+}
+
+/**
+ * Compare two texts line by line.
+ *
+ * Unchanged lines at the start and the end are set aside first, so `maxLines`
+ * limits the part that actually differs: a long file with a small edit is
+ * compared, however long it is.
+ *
+ * @param {string|null|undefined} before
+ * @param {string|null|undefined} after
+ * @param {Object} [options]
+ * @param {number} [options.context=3] - Unchanged lines kept around each change; `Infinity` keeps them all.
+ * @param {number} [options.maxLines=LINE_DIFF_LIMIT]
+ * @param {number} [options.beforeStart=1] - The line number of `before`'s first line.
+ * @param {number} [options.afterStart=1] - The line number of `after`'s first line.
+ * @returns {Array<Object>|null} DiffLines; `[]` when the texts have the same lines, `null` when too long to compare.
+ */
+export function computeLineDiff(before, after, {
+    context = 3,
+    maxLines = LINE_DIFF_LIMIT,
+    beforeStart = 1,
+    afterStart = 1,
+} = {}) {
+    const a = splitLines(before);
+    const b = splitLines(after);
+
+    let head = 0;
+    while (head < a.length && head < b.length && a[head] === b[head]) head++;
+    let tail = 0;
+    while (tail < a.length - head && tail < b.length - head
+        && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++;
+
+    const midA = a.slice(head, a.length - tail);
+    const midB = b.slice(head, b.length - tail);
+    if (midA.length === 0 && midB.length === 0) return [];
+    if (midA.length > maxLines || midB.length > maxLines) return null;
+
+    const ops = [];
+    for (let k = 0; k < head; k++) ops.push(['context', k, k]);
+    for (const [kind, i, j] of editScript(midA, midB)) {
+        ops.push([kind, i < 0 ? -1 : i + head, j < 0 ? -1 : j + head]);
+    }
+    for (let k = tail; k > 0; k--) ops.push(['context', a.length - k, b.length - k]);
+
+    // A line is kept when a change is within `context` lines of it, either way.
+    const keep = new Uint8Array(ops.length);
+    let reach = -1;
+    for (let k = 0; k < ops.length; k++) {
+        if (ops[k][0] !== 'context') reach = k + context;
+        if (k <= reach) keep[k] = 1;
+    }
+    reach = ops.length;
+    for (let k = ops.length - 1; k >= 0; k--) {
+        if (ops[k][0] !== 'context') reach = k - context;
+        if (k >= reach) keep[k] = 1;
+    }
+
+    const out = [];
+    let skipped = 0;
+    ops.forEach(([kind, i, j], k) => {
+        if (!keep[k]) { skipped++; return; }
+        if (skipped > 0 && out.length > 0) {
+            out.push({ kind: 'gap', oldLine: null, newLine: null, text: '', hidden: skipped });
+        }
+        skipped = 0;
+        out.push({
+            kind,
+            oldLine: i < 0 ? null : beforeStart + i,
+            newLine: j < 0 ? null : afterStart + j,
+            text: j < 0 ? a[i] : b[j],
+        });
+    });
+    return out;
+}
+
+const HUNK_RE = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/;
+
+/**
+ * Read a unified diff into DiffLines: `diff --git`, `index`, `---` and `+++`
+ * headers are left out, a `@@` line is a `hunk`, and `\ No newline at end of
+ * file`, `Binary files … differ` and `rename from …`/`rename to …` are `meta`,
+ * so that a rename with no change in it is still something to read. A diff of several files has a
+ * `file` line before each file's hunks; a diff of one file has none.
+ * @param {string|null|undefined} text
+ * @returns {Array<Object>}
+ */
+export function parseUnifiedDiff(text) {
+    const lines = String(text ?? '').split(/\r?\n/);
+    const fileHeaders = lines.filter((l) => l.startsWith('diff --git ')).length;
+    const out = [];
+    const header = (kind, line) => out.push({ kind, oldLine: null, newLine: null, text: line });
+    let oldNo = 0;
+    let newNo = 0;
+    let oldLeft = 0;
+    let newLeft = 0;
+    for (const line of lines) {
+        if (oldLeft > 0 || newLeft > 0) {
+            const sign = line[0];
+            const body = line.slice(1);
+            if (sign === '-') {
+                out.push({ kind: 'del', oldLine: oldNo++, newLine: null, text: body });
+                oldLeft--;
+            } else if (sign === '+') {
+                out.push({ kind: 'add', oldLine: null, newLine: newNo++, text: body });
+                newLeft--;
+            } else if (sign === '\\') {
+                header('meta', line);
+            } else {
+                // A context line; a tool that strips trailing blanks leaves it empty.
+                out.push({ kind: 'context', oldLine: oldNo++, newLine: newNo++, text: body });
+                oldLeft--;
+                newLeft--;
+            }
+            continue;
+        }
+        const hunk = HUNK_RE.exec(line);
+        if (hunk) {
+            oldNo = Number(hunk[1]);
+            newNo = Number(hunk[3]);
+            oldLeft = hunk[2] === undefined ? 1 : Number(hunk[2]);
+            newLeft = hunk[4] === undefined ? 1 : Number(hunk[4]);
+            header('hunk', line);
+        } else if (line.startsWith('\\') || /^Binary files .* differ$/.test(line) || /^rename (from|to) /.test(line)) {
+            header('meta', line);
+        } else if (line.startsWith('diff --git ') && fileHeaders > 1) {
+            header('file', / b\/(.*)$/.exec(line)?.[1] ?? line.slice('diff --git '.length));
+        }
+    }
+    return out;
+}
+
+/**
+ * How many lines a diff adds and removes, for a one-glance summary.
+ * @param {Array<Object>} lines - DiffLines.
+ * @returns {{ added: number, removed: number }}
+ */
+export function diffStats(lines) {
+    let added = 0;
+    let removed = 0;
+    for (const l of lines) {
+        if (l.kind === 'add') added++;
+        else if (l.kind === 'del') removed++;
+    }
+    return { added, removed };
+}

package/src/tiles/tile_base.js

@@ -10,6 +10,7 @@ import { openRawTracesWindow } from '../charts/plot_popout_window.js';
 import { formatVariableLabel } from './config_schema.js';
 import { ActionDropdown } from '../ui/components/action_dropdown.js';
 import { modalHost } from '../ui/components/modal.js';
+import { fireEvent } from '../ui/utils/fire_event.js';
 // The host is INJECTED, not fetched from a global.
 //
 // This imported `appHost()` from ui/js/ecoagent/app_host.js — a tile reaching into
@@ -771,7 +772,7 @@ export class TileBase {
         });
 
         // Also dispatch DOM event for alternative handling
-        this.element?.dispatchEvent(new CustomEvent('tile:config-request', {
+        if (this.element) fireEvent(this.element, 'tile:config-request', {
             bubbles: true,
             detail: {
                 tileId: this.id,
@@ -779,7 +780,7 @@ export class TileBase {
                 config: this.config,
                 schema: this.getConfigSchema()
             }
-        }));
+        });
     }
 
     /**
@@ -791,13 +792,13 @@ export class TileBase {
         const removeBtn = this.element?.querySelector('.tile-remove-btn');
 
         // Only dispatch DOM event - let the dashboard handle confirmation
-        this.element?.dispatchEvent(new CustomEvent('tile:remove-request', {
+        if (this.element) fireEvent(this.element, 'tile:remove-request', {
             bubbles: true,
             detail: {
                 tileId: this.id,
                 anchorElement: removeBtn
             }
-        }));
+        });
     }
 
     /**

package/src/tiling/desktops.js

@@ -217,11 +217,11 @@ export class DesktopManager {
      * nothing, and an app can put almost anything in a title.
      *
      * And strict is not hostile to an old blob. A key the loader has always given
-     * a default may be absent: a desktop's `id`, `label` and `panels`, the keys
-     * later releases added (`panelShares`, `group`, `fixed`), and a leaf's `tabs`
-     * and `pageTabs`. What `serialize()` has always written and the loader cannot
-     * do without (`desktops`, a desktop's `tree`, a split's `dir`, `children` and
-     * `sizes`) may not.
+     * a default may be absent: a desktop's `id`, `label`, `tree` and `panels`, the
+     * keys later releases added (`panelShares`, `group`, `fixed`), and a leaf's
+     * `tabs` and `pageTabs`. What `serialize()` has always written and the loader
+     * cannot do without (`desktops`, a split's `dir`, `children` and `sizes`) may
+     * not.
      */
     static deserialize(blob, { seed, panelDefaults = null } = {}) {
         const m = new DesktopManager({ seed, panelDefaults });
@@ -231,9 +231,11 @@ export class DesktopManager {
         m.desktops = blob.desktops.map((raw, i) => {
             const at = `desktops[${i}]`;
             _expect(_isRecord(raw), at, 'a desktop, an object', raw);
-            // `null` is a desktop with nothing on it (serialize() writes that);
-            // a desktop with no `tree` key at all is not one serialize() writes.
-            _expect(raw.tree === null || (_isRecord(raw.tree) && _isRecord(raw.tree.root)),
+            // `null` (serialize() writes that) and no `tree` key at all (a host
+            // that composes the blob writes that) are a desktop with nothing on
+            // it, which is seeded below. Refusing one would set its siblings
+            // aside with it, and the next save would overwrite them.
+            _expect(raw.tree == null || (_isRecord(raw.tree) && _isRecord(raw.tree.root)),
                 `${at}.tree`, '{ root }, or null for an empty desktop', raw.tree);
             _expect(raw.panels == null || _isRecord(raw.panels), `${at}.panels`, 'an object', raw.panels);
             // The VALUES of `panels` and `panelShares` are not checked: the loader

package/src/tiling/keymap.js

@@ -126,7 +126,8 @@ export function keyboardShortcutsTopic(shortcuts = KEYMAP_SHORTCUTS) {
 // is to be left unprevented (an F-key with no Nth top-nav button, Esc). `label`
 // is the shortcuts table's words; an action without one is not listed.
 
-const DEFAULT_NAV_SELECTOR = '.twm-global-top-bar .twm-bar-center.twm-top-nav .twm-top-nav__btn';
+const DEFAULT_NAV_SELECTOR = '.twm-global-top-bar .twm-bar-center.twm-top-nav .twm-top-nav__btn, '
+    + '.twm-fl-bar .twm-fl-item[data-kind]';
 const DIRS = ['left', 'right', 'up', 'down'];
 const _where = (d) => (d === 'up' || d === 'down' ? d : `on the ${d}`);
 
@@ -173,10 +174,10 @@ function _action(name) {
     if (m[1] === 'nav') {
         return {
             label: `Jump to top-nav page ${n + 1}`,
-            // The selector is a CONFIG option, not a constant. An embedder that
-            // moves its sections out of the top bar — into an icon rail, say —
-            // would otherwise find F1..F8 silently doing nothing. Passing
-            // `navSelector` is how such an embedder keeps the keys.
+            // The default finds the top bar's buttons and the page rail's. An
+            // embedder that draws its page buttons in markup of its own would
+            // otherwise find F1..F8 silently doing nothing. Passing `navSelector`
+            // is how such an embedder keeps the keys.
             run: ({ navSelector }) => {
                 const btns = document.querySelectorAll(navSelector || DEFAULT_NAV_SELECTOR);
                 if (n >= btns.length) return false;

package/src/tiling/kind_taxonomy.js

@@ -30,6 +30,9 @@
  *               after the root. Omit on the top-nav kind itself.
  *   isTopNav    True iff this kind owns a slot in the top-nav strip.
  *   order       Sort key for top-nav display (lower = leftward).
+ *   railPin     `'bottom'`: on a page rail (`chrome.rail`), this top-nav kind
+ *               stands apart at the bottom, after every kind that is not
+ *               pinned, whatever its `order`. The top strip ignores it.
  *   appGlobal   True iff the kind is not scoped to the root entity (a
  *               preferences page, say). Its breadcrumb omits the root.
  *   sources     Entity-source ids the tile hamburger lists when a tile
@@ -104,6 +107,14 @@ export function createTaxonomy({ kinds, root } = {}) {
             throw new Error(
                 `createTaxonomy: '${kind}' is both a top-nav kind and owned by one`);
         }
+        if (def.railPin !== undefined) {
+            if (def.railPin !== 'bottom') {
+                throw new TypeError(`createTaxonomy: '${kind}'.railPin must be 'bottom'`);
+            }
+            if (!def.isTopNav) {
+                throw new Error(`createTaxonomy: '${kind}' has a railPin but is not a top-nav kind`);
+            }
+        }
         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`);
@@ -232,8 +243,9 @@ export function createTaxonomy({ kinds, root } = {}) {
     };
 
     /** Top-nav entries in display order:
-     *      { kind, label (short), longLabel, icon }
-     *  `label` is the chip text; `longLabel` is what the palette shows. */
+     *      { kind, label (short), longLabel, icon, railPin }
+     *  `label` is the chip text; `longLabel` is what the palette shows;
+     *  `railPin` is the KindDef's, or null. */
     const topNavEntries = () =>
         Object.entries(_kinds)
             .filter(([, m]) => m.isTopNav)
@@ -243,6 +255,7 @@ export function createTaxonomy({ kinds, root } = {}) {
                 label:     m.shortLabel || m.label,
                 longLabel: m.label,
                 icon:      m.icon,
+                railPin:   m.railPin ?? null,
             }));
 
     /** Whether `kind` exists once (KindDef `single`). */

package/src/tiling/shell.js

@@ -138,9 +138,13 @@ import { openForm } from '../ui/components/modal.js';
  *                                      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?,
+ * @param {object}     [cfg.chrome]     { topNav?, rail?, paletteButton?, desktops?,
  *                                        panelToggles?: { left?, right?, bottom? },
  *                                        zoom?, menuBar? }
+ *                                      `rail` is the element that becomes the
+ *                                      vertical page rail (see `mountPageRail`),
+ *                                      instead of `topNav`: giving both is a boot
+ *                                      error, since F1..F12 press one row of pages.
  *                                      `zoom` is C31: the element the content
  *                                      zoom control is painted into — see
  *                                      zoom.js. Absent, there is no control and
@@ -185,9 +189,9 @@ export async function createShell({
     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.
+    // An embedder that draws its page buttons in markup of its own passes the
+    // selector they match, and F1..F8 keep working. Omitted, the default finds
+    // `chrome.topNav`'s buttons and `chrome.rail`'s.
     navSelector = null,
     keymap = null,
 } = {}) {
@@ -198,6 +202,9 @@ 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.topNav && chrome.rail) {
+        throw new TypeError('createShell: `chrome.topNav` and `chrome.rail` both paint the pages; give one');
+    }
     if (chrome.menuBar && !menuBarCfg?.menus) {
         throw new TypeError('createShell: `chrome.menuBar` needs `menuBar: { menus }`');
     }
@@ -223,6 +230,7 @@ export async function createShell({
 
     let wm = null;
     let topNavEl = null;
+    let rail = null;
     let desktopsEl = null;
     let toggles = null;
 
@@ -231,6 +239,7 @@ export async function createShell({
         syncPanelToggles(toggles, wm);
         syncDesktopBar(desktopsEl, wm);
         syncTopNav(topNavEl, wm);
+        rail?.sync();
     };
 
     wm = new WindowManager({
@@ -277,16 +286,18 @@ export async function createShell({
         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. The keymap also binds
-    // `?` to help, so `dispose()` takes the help shortcut off with it.
+    // `navSelector` lets an embedder with page buttons of its own keep F1..F8
+    // working. Omitted, the default finds `chrome.topNav`'s and `chrome.rail`'s.
+    // 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.
     const paletteBtn = mountPaletteButton(chrome.paletteButton, palette);
-    topNavEl = mountTopNav(chrome.topNav, taxonomy, wm);
+    const topNav = mountTopNav(chrome.topNav, taxonomy, wm);
+    topNavEl = topNav?.el ?? null;
+    rail = chrome.rail ? mountPageRail(chrome.rail, { wm }) : null;
     desktopsEl = mountDesktopBar(chrome.desktops, wm, desktopBar || {});
     // C31. The content zoom. Painted with the rest of the chrome and, unlike the
     // rest, AWAITED before the first mount: its saved value is applied to `root`
@@ -320,6 +331,7 @@ export async function createShell({
         chrome: Object.freeze({
             paletteButtonEl: paletteBtn,
             topNavEl,
+            railEl: rail?.el ?? null,
             desktopsEl,
             panelToggles: toggles,
             // `get`/`set` so an embedder can drive the zoom from its own settings
@@ -355,6 +367,10 @@ 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 */ }
+            // The rail's and the top nav's elements are the embedder's and outlive
+            // this shell; their buttons and listeners close over THIS wm, so they go.
+            try { rail?.dispose(); } catch { /* ignore */ }
+            try { topNav?.dispose(); } catch { /* ignore */ }
             // Its listeners are on the document; a rebuilt shell paints its own.
             try { menuBar?.dispose(); } catch { /* ignore */ }
         },
@@ -385,27 +401,118 @@ function mountTopNav(hostEl, taxonomy, wm) {
         `;
         hostEl.appendChild(btn);
     }
-    hostEl.addEventListener('click', (e) => {
+    const onClick = (e) => {
         const btn = e.target.closest('[data-kind]');
         if (!btn) return;
         wm.openInPrimary(btn.dataset.kind);
-    });
-    return hostEl;
+    };
+    hostEl.addEventListener('click', onClick);
+    return {
+        el: hostEl,
+        dispose: () => {
+            hostEl.removeEventListener('click', onClick);
+            hostEl.replaceChildren();
+        },
+    };
 }
 
-function syncTopNav(hostEl, wm) {
-    if (!hostEl) return;
+/** The page the primary tile is on. topNavFor maps an entity kind onto its owning
+ *  top-nav category. Falls back to the primary kind so unknown kinds at least try
+ *  to match a button. */
+function activePageKind(wm) {
     const tree = wm.desktops.active().tree;
     const primaryId = tree.primaryLeafId();
     const primaryKind = primaryId ? tree.get(primaryId)?.content?.kind : null;
-    // topNavFor maps an entity kind onto its owning top-nav category. Falls
-    // back to the primary kind so unknown kinds at least try to match a button.
-    const topNavKind = wm.taxonomy.topNavFor(primaryKind) || primaryKind;
+    return wm.taxonomy.topNavFor(primaryKind) || primaryKind;
+}
+
+function syncTopNav(hostEl, wm) {
+    if (!hostEl) return;
+    const topNavKind = activePageKind(wm);
     hostEl.querySelectorAll('[data-kind]').forEach((b) => {
         b.classList.toggle('twm-top-nav__btn--on', b.dataset.kind === topNavKind);
     });
 }
 
+/**
+ * The vertical page rail: one icon button per top-nav kind, painted into the
+ * element it is given, in `order`, with the kinds whose KindDef says
+ * `railPin: 'bottom'` after the rest and held at the bottom of the bar. A button
+ * opens its kind in the primary tile. The active one is `.twm-fl-item--on` and
+ * `aria-current="page"`.
+ *
+ * `createShell` calls this for `chrome.rail`, and keeps it in step. An embedder
+ * that builds its own WindowManager calls it itself and calls `sync()` when the
+ * window manager changes.
+ *
+ * Its tooltips carry no placement: `TooltipService` places anything inside
+ * `.twm-fl-bar` on the right, and flips it at the window's edge.
+ *
+ * @param {Element} hostEl
+ * @param {object}  cfg
+ * @param {object}  cfg.wm            the window manager; its taxonomy names the pages
+ * @param {(wm: object) => (string|null)} [cfg.activeKind]  which page to light, or
+ *                                    null for none. Default: the primary tile's
+ *                                    page, by `taxonomy.topNavFor`.
+ * @param {(btn: HTMLButtonElement, entry: object) => void} [cfg.decorate]  called
+ *                                    once per button, with its `topNavEntries()`
+ *                                    entry, to add a class or change its tooltip.
+ * @returns {{ el: Element, sync: () => void, dispose: () => void }}
+ */
+export function mountPageRail(hostEl, { wm, activeKind = activePageKind, decorate = null } = {}) {
+    if (!hostEl || typeof hostEl.appendChild !== 'function') {
+        throw new TypeError('mountPageRail: `hostEl` must be an element');
+    }
+    if (!wm) throw new TypeError('mountPageRail: `wm` is required');
+    hostEl.classList.add('twm-fl-bar');
+    if (!hostEl.hasAttribute('aria-label')) hostEl.setAttribute('aria-label', 'Pages');
+
+    const entries = wm.taxonomy.topNavEntries();
+    const buttons = [
+        ...entries.filter((k) => k.railPin !== 'bottom'),
+        ...entries.filter((k) => k.railPin === 'bottom'),
+    ].map((k) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'twm-fl-item twm-has-tooltip';
+        btn.classList.toggle('twm-fl-item--bottom', k.railPin === 'bottom');
+        btn.dataset.kind = k.kind;
+        btn.dataset.tooltip = k.longLabel;
+        btn.setAttribute('aria-label', k.longLabel);
+        const glyph = document.createElement('span');
+        glyph.className = 'material-symbols-outlined';
+        glyph.setAttribute('aria-hidden', 'true');
+        glyph.textContent = k.icon;
+        btn.appendChild(glyph);
+        decorate?.(btn, k);
+        return btn;
+    });
+    hostEl.replaceChildren(...buttons);
+
+    const onClick = (e) => {
+        const btn = e.target.closest('[data-kind]');
+        if (btn) wm.openInPrimary(btn.dataset.kind);
+    };
+    hostEl.addEventListener('click', onClick);
+
+    return Object.freeze({
+        el: hostEl,
+        sync: () => {
+            const active = activeKind(wm);
+            for (const btn of buttons) {
+                const on = btn.dataset.kind === active;
+                btn.classList.toggle('twm-fl-item--on', on);
+                if (on) btn.setAttribute('aria-current', 'page');
+                else btn.removeAttribute('aria-current');
+            }
+        },
+        dispose: () => {
+            hostEl.removeEventListener('click', onClick);
+            hostEl.replaceChildren();
+        },
+    });
+}
+
 /**
  * The palette button, REBOUND rather than reused.
  *

package/src/tiling/tile_renderer.js

@@ -817,8 +817,7 @@ export class TileRenderer {
         //
         // No `e.button` test, unlike the pull: `dblclick` is dispatched for the
         // primary button only. No `preventDefault`, and NO NEW CSS: the strip
-        // is already `user-select: none` (`css/overrides.css:1001`, mirrored
-        // into the generated `css/flexdesk.css:4743`), so a double-click here
+        // is already `user-select: none` (`css/flexdesk.css`), so a double-click here
         // cannot word-select the title on its way to floating the pane.
         chrome.addEventListener('dblclick', (e) => {
             if (e.target.closest(CHROME_NO_FLOAT)) return;
@@ -1783,7 +1782,7 @@ export class TileRenderer {
     /** The rectangle a release would fill.
      *
      *  IT IS THE WINDOW DROP'S OWN PREVIEW ELEMENT — same two classes, same
-     *  stylesheet rules (`css/base.css`, `.twm-snap-preview`) — so a tab drop
+     *  stylesheet rules (`css/flexdesk.css`, `.twm-snap-preview`) — so a tab drop
      *  and a window drop cannot come to disagree about what a drop looks like.
      *  `--viewport` is what makes `position: fixed` apply, and that is required
      *  rather than cosmetic: the rectangle came from `getBoundingClientRect` on