archaeopteryx 3.2.1 → 3.4.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.2.1
+// v 3.4.0
 // 2026-09-10
 //
 // Archaeopteryx.js is a software tool for the visualization and
@@ -103,7 +103,7 @@ function (root, d3, forester, phyloXml) {
     // IIFE's own function name -- a plain object says what it is.)
     let archaeopteryx = {};
 
-    const VERSION = '3.2.1';
+    const VERSION = '3.4.0';
     const WEBSITE = 'https://cmzmasek.github.io/archaeopteryx-js/';
     const DESKTOP_WEBSITE = 'https://cmzmasek.github.io/archaeopteryx/';
     const SOURCE_WEBSITE = 'https://github.com/cmzmasek/archaeopteryx-js';
@@ -251,6 +251,7 @@ function (root, d3, forester, phyloXml) {
     const LABEL_SIZE_CALC_FACTOR = 0.5;
     const LEGEND_LABEL_COLOR = 'legendLabelColor';
     const LEGEND_NODE_SHAPE = 'legendNodeShape';
+    const LEGEND_DOMAINS = 'legendDomains';
     const NH_EXPORT_FORMAT = 'Newick';
     const NEXUS_EXPORT_FORMAT = 'Nexus';
     const NODE_SIZE_MAX = 9;
@@ -283,10 +284,15 @@ function (root, d3, forester, phyloXml) {
     const TOP_AND_BOTTOM_BORDER_HEIGHT = 10;
     const TRANSITION_DURATION_DEFAULT = 750;
     // Above this many nodes the first draw is deferred by one frame behind a
-    // "working" card, so the page shows it is busy instead of appearing frozen.
-    // Below it everything stays synchronous exactly as before -- the deferral
-    // buys nothing on a tree that draws in a few hundred milliseconds.
-    const BIG_TREE_NODES = 2000;
+    // "working" card, so the page shows it is busy instead of appearing frozen,
+    // and later redraws coalesce instead of running synchronously. Below it
+    // everything stays synchronous exactly as before -- the deferral buys
+    // nothing on a tree that draws in a few hundred milliseconds.
+    //
+    // Raised from 2000 to 3000 on 2026-09-11: a redraw of the 18,512-node tree
+    // went from ~4.2 s to ~1.9 s that day, so the size at which a draw is slow
+    // enough to need announcing moved up with it.
+    const BIG_TREE_NODES = 3000;
     const WARNING = 'ArchaeopteryxJS: WARNING';
     const MESSAGE = 'ArchaeopteryxJS: ';
     const ERROR = 'ArchaeopteryxJS: ERROR: ';
@@ -347,6 +353,15 @@ function (root, d3, forester, phyloXml) {
     const DOWNLOAD_BUTTON = 'dl_b';
     const DYNAHIDE_CB = 'dynahide_cb';
     const MSA_CB = 'msa_cb';
+    const DOMAINS_CB = 'domains_cb';
+    const DOMAIN_CONTROLS = 'domain_controls';
+    const DOMAIN_WIDTH_DEC = 'domain_width_dec';
+    const DOMAIN_WIDTH_INC = 'domain_width_inc';
+    const DOMAIN_EVALUE_DEC = 'domain_evalue_dec';
+    const DOMAIN_EVALUE_INC = 'domain_evalue_inc';
+    const DOMAIN_EVALUE_READOUT = 'domain_evalue';
+    const DOMAIN_LABELS_SELECT = 'domain_labels';
+    const DOMAIN_GLOW_CB = 'domain_glow_cb';
     const TIME_AXIS_CB = 'timeaxis_cb';
     const TIME_GRID_CB = 'timegrid_cb';
     const MSA_SCROLL_ID = 'aptxmsascroll';
@@ -356,6 +371,10 @@ function (root, d3, forester, phyloXml) {
     const INTERNAL_LABEL_CB = 'intl_cb';
     const LABEL_COLOR_SELECT_MENU = 'lcs_menu';
     const MIDPOINT_ROOT_BUTTON = 'midpointr_b';
+    const UNCOLLAPSE_ALL_BUTTON = 'uncollapse_all_b';
+    const TREE_PREV_BUTTON = 'tree_prev_b';
+    const TREE_NEXT_BUTTON = 'tree_next_b';
+    const TREE_SELECT = 'tree_select';
     // The desktop Archaeopteryx logo (forester/archaeopteryx_icon_assets/
     // archaeopteryx-anime.svg), inlined so the library stays a single file.
     // Gradient ids are prefixed: they were generic enough to collide with an
@@ -397,8 +416,6 @@ function (root, d3, forester, phyloXml) {
     const SEARCH_MODE_SELECT_1 = 'sms1';
     const SEARCH_VALUE2_0 = 'sv2_0';
     const SEARCH_VALUE2_1 = 'sv2_1';
-    const SEARCH_DATALIST_0 = 'sdl0';
-    const SEARCH_DATALIST_1 = 'sdl1';
     const SEARCH_AUTOCOMPLETE_CAP = 2000;
     const SEARCH_COMBINE_SELECT = 'scmb';
     const SEARCH_COMBINE_ROW = 'scmb_row';
@@ -485,6 +502,12 @@ function (root, d3, forester, phyloXml) {
     let _floatGroup = null;
     let _floatStrips = {};                // class -> {top, height} in tree coordinates
     let _treeData = null;
+    let _trees = [];              // every tree of the launch (one, or all a file held); _treeData is _trees[_treeIndex]
+    let _treeIndex = 0;
+    let _launchConfig = null;     // the config as launch() received it, for showTree()
+    let _viewOps = {order: null, root: null};   // the tree operations a shared view replays: ladderize direction, midpoint rooting
+    let _lastViewEncoded;                        // the view last reported to onViewChange; undefined = not settled yet
+    let _viewNotifyPending = false;
     let _treeFn = null;
     let _vis = null;        // the automatic visualizations: candidates, scales, choices
     let _w = null;
@@ -507,6 +530,28 @@ function (root, d3, forester, phyloXml) {
     let _msaScroller = null;              // the fixed HTML range input, created lazily
     let _msaNav = null;                   // the bar around it: paging, jump-to-column, readout
     let _msaGeom = null;                  // window geometry of the last draw, for the hover readout
+    // ------ protein domain architectures (the desktop's domain display) ------
+    const DOMAIN_TRACK_START_GAP = 20;    // px from the aligned label column to the backbone's start
+    const DOMAIN_TRACK_END_GAP = 10;      // px kept free past the widest track
+    const DOMAIN_RADIAL_GAP = 4;          // px from the label ring / the tip's label to the backbone, radial layouts
+    const DOMAIN_WIDTH_MIN = 20;          // the track width stops growing / shrinking at these
+    const DOMAIN_WIDTH_MAX = 2000;
+    const DOMAIN_WIDTH_GROW = 1.2;        // one d+ press
+    const DOMAIN_WIDTH_SHRINK = 0.8;      // one d- press
+    const DOMAIN_WIDTH_VIEWPORT_FRACTION = 0.25;   // the initial track width
+    const DOMAIN_RADIAL_WIDTH_FRACTION = 0.2;      // ... capped at this share of the radius in radial layouts
+    const DOMAIN_SCALE_HEADROOM = 0.9;    // drawn length over reserved length
+    const DOMAIN_BOX_MIN_H = 6;
+    const DOMAIN_BOX_MAX_H = 16;
+    const DOMAIN_BACKBONE_COLOR = 'rgb(100,100,100)';   // the same in both themes and in exports
+    const DOMAIN_SHADOW_COLOR = 'rgb(8,18,21)';
+    const DOMAIN_SHADOWS = [[0.4, 0.7, 40], [0.9, 1.5, 28], [1.6, 2.5, 17]];   // dx, dy, alpha of 255, in drawing order
+    const DOMAIN_GLOWS = [[3.2, 20], [1.6, 34]];                              // grown by, alpha of 255
+    const DOMAIN_LEGEND_INSET = 10;       // px from the bottom-right corner, the legend's home
+    const DOMAIN_LEGEND_ROW_MAX_PX = 240; // a legend row is clipped to this
+    const DOMAIN_LABEL_MODES = ['none', 'domains', 'legend'];
+    let _domain = null;                   // {width, palette, next, legendFrac}, set per launch
+    let _domainReserve = 0;               // horizontal px reserved for the tracks, set with _w
     // ------ time axis (the desktop's geologic / calendar overlays) ------
     const TIME_GEO_RESERVE = 52;          // two ICS band rows + the Ma ruler
     const TIME_CAL_RESERVE = 26;          // the calendar year ruler
@@ -554,13 +599,32 @@ function (root, d3, forester, phyloXml) {
     let _zoomed_x_or_y = false;
     let _node_mouseover_div;
 
-    function branchLengthScaling(nodes, width) {
+    // The displayed tree's own root: the single child of _root, which is the
+    // parsed tree's invisible wrapper (the <phylogeny> element, or the node
+    // above a Newick root) or, in a subtree view, the fake node holding the
+    // clade. Null if _root is not such a wrapper.
+    function topNode() {
+        return (_root && _root.children && _root.children.length === 1) ? _root.children[0] : null;
+    }
 
-        if (_root.parent) {
-            _root.parent.distToRoot = 0;
-        }
+    function branchLengthScaling(nodes, width) {
+        // Distances start at the displayed tree's root. When the whole tree
+        // is shown and the file gives that root a branch length, the branch
+        // is drawn to scale (Christian, 2026-09-13; it used to be replaced by
+        // half the average branch length). A subtree's root starts at 0
+        // whatever its branch was: the branch above it is not on screen, and
+        // its parent's distance is from another layout -- that stale sum
+        // used to draw a root branch as long as the clade's distance from
+        // the original root.
+        let top = topNode();
         forester.preOrderTraversalAll(_root, function (n) {
-            n.distToRoot = (n.parent ? n.parent.distToRoot : 0) + bl(n);
+            if (n === _root) {
+                n.distToRoot = 0;
+            } else if (n === top) {
+                n.distToRoot = _in_subtree ? 0 : bl(n);
+            } else {
+                n.distToRoot = n.parent.distToRoot + bl(n);
+            }
         });
         let distsToRoot = nodes.map(function (n) {
             return n.distToRoot;
@@ -575,13 +639,31 @@ function (root, d3, forester, phyloXml) {
         return yScale;
 
         function bl(node) {
-            if (!node.branch_length || node.branch_length < 0) {
-                return 0;
-            } else if (!node.parent || !node.parent.parent) {
-                return _basicTreeProperties.averageBranchLength * 0.5;
-            }
-            return node.branch_length;
+            return (!node.branch_length || node.branch_length < 0) ? 0 : node.branch_length;
+        }
+    }
+
+    // The root stub (Christian, 2026-09-13): a short branch into the
+    // displayed tree's root, drawn by putting the wrapper node ROOT_STUB_PX
+    // to the left of it so their link has that length. Shown in the
+    // rectangular layouts for a rooted tree -- a phyloXML rooted="false" or
+    // a Nexus [&U] tree shows none -- and in every subtree view, whose root
+    // is a clade's, whatever the tree says. When the whole tree is a
+    // phylogram and the file gives the root a length, that branch is drawn
+    // to scale instead. The radial layouts never draw a stub: the wrapper
+    // sits on the root.
+    const ROOT_STUB_PX = 12;
+
+    function placeRootStub() {
+        let top = topNode();
+        if (!top) {
+            return;
         }
+        if (_state.phylogram && !_in_subtree && top.y > _root.y) {
+            return;   // a real root branch, to scale
+        }
+        let rooted = _in_subtree || (_treeData && _treeData.rooted !== false);
+        _root.y = (radialDisplay() || !rooted) ? top.y : top.y - ROOT_STUB_PX;
     }
 
     // Current zoom scale (k) from the zoom behavior's stored transform.
@@ -613,6 +695,14 @@ function (root, d3, forester, phyloXml) {
     const OVERVIEW_HEIGHT = 111;
     const OVERVIEW_MARGIN = 12;
     const OVERVIEW_PAD = 5;
+    // Smallest the "you are here" rectangle is allowed to get, in overview
+    // pixels. Zoom vertically into a 13,000-tip tree and the visible slice is
+    // a fraction of one percent of it: the rectangle is then accurate,
+    // sub-pixel and useless. Below this it stops being a measurement and
+    // becomes a marker -- it still says WHERE you are, it just stops claiming
+    // to say exactly how much you can see. The inner frame is 132 x 101, so
+    // this is small enough never to mislead about position.
+    const OVERVIEW_VIEWPORT_MIN = 7;
 
     let _overviewGroup = null;   // the whole overview, appended above the tree
     let _overviewContent = null; // the scaled miniature inside it
@@ -913,17 +1003,93 @@ function (root, d3, forester, phyloXml) {
     // Rebuild the miniature. Called when the tree itself changes: the branch
     // paths are copied straight from what was just rendered, so the overview
     // matches the real display in either layout without redoing any geometry.
+    // The links of the CURRENT layout. The overview is built from these --
+    // from the MODEL -- never by reading back what was drawn.
+    //
+    // Reading the drawn tree is what broke it: update() animates the links
+    // with a transition, and the overview was rebuilt from inside update(),
+    // so every attribute it read was the frame BEFORE the one being drawn.
+    // Logging from inside the function showed all 215 links degenerate on
+    // EVERY rebuild, in every display mode -- the tree had not been drawn
+    // yet. The desktop has never had this bug because its miniature is
+    // likewise computed from the model.
+    let _overviewLinks = null;
+
+    // The tree's extent for the overview, in un-zoomed tree coordinates:
+    // branches as the layout placed them, plus the space the layout reserved
+    // for external labels.
+    //
+    // ONE extent, used for BOTH the miniature's placement and the "is the
+    // overview needed at all" test. That is the property that matters, and
+    // getting it wrong is what made the first attempt at this worse than the
+    // bug: the miniature was fitted to the branches while the visibility test
+    // measured branches PLUS labels, so the "you are here" rectangle was
+    // drawn against a different extent than the picture under it. The two may
+    // live in different spaces -- the desktop deliberately keeps the
+    // rectangle in frame space -- but they must derive from one extent.
+    //
+    // Labels count, by Christian's decision and as the desktop does it: the
+    // question is whether what the user can SEE fits, and a cut-off label is
+    // not visible.
+    function overviewExtent() {
+        if (_state.circularDisplay || _state.unrootedDisplay) {
+            // maxRad already reaches the outer label ring -- fitCircular()
+            // fits the display to exactly this.
+            let r = _state.circularDisplay
+                ? (_radial ? _radial.maxRad : null)
+                : (_unroot ? _unroot.maxRad : null);
+            if (!r || r <= 0) {
+                return null;
+            }
+            return {x: -r, y: -r, width: 2 * r, height: 2 * r};
+        }
+        if (!_overviewLinks || _overviewLinks.length === 0) {
+            return null;
+        }
+        // elbow() writes 'M source.y,source.x V target.x H target.y', so the
+        // horizontal axis is .y and the vertical axis is .x.
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        for (let i = 0, len = _overviewLinks.length; i !== len; ++i) {
+            let l = _overviewLinks[i];
+            let sx = l.source.y, tx = l.target.y;
+            let sy = l.source.x, ty = l.target.x;
+            if (sx < minX) { minX = sx; }
+            if (tx < minX) { minX = tx; }
+            if (sx > maxX) { maxX = sx; }
+            if (tx > maxX) { maxX = tx; }
+            if (sy < minY) { minY = sy; }
+            if (ty < minY) { minY = ty; }
+            if (sy > maxY) { maxY = sy; }
+            if (ty > maxY) { maxY = ty; }
+        }
+        if (!isFinite(minX) || !isFinite(minY) || maxX <= minX) {
+            return null;
+        }
+        // The label reservation the layout was sized against, MINUS the root
+        // offset. calcMaxTreeLengthForDisplay() bundles both: the space kept
+        // to the LEFT of the root and the space kept to the RIGHT for
+        // external labels. Only the label half belongs on this edge.
+        //
+        // Including the root offset made the box exactly rootOffset too wide,
+        // and since centerNode() shifts the view left by that same amount to
+        // seat the root, the right edge of the box always fell just outside
+        // the viewport: measured box=[0,13 1497x755] against
+        // view=[-254,-10 1497x800] with rootOffset=254, so "does it fit" said
+        // no by precisely 254px and the overview appeared after every Fit.
+        maxX += calcMaxTreeLengthForDisplay() - _settings.rootOffset + _domainReserve;
+        if (scaleBarShown()) {
+            maxY += SCALE_BAR_RESERVE;   // the bar sits under the last row
+        }
+        let h = maxY - minY;
+        return {x: minX, y: minY, width: maxX - minX, height: h > 0 ? h : 1};
+    }
+
     function rebuildOverview() {
         if (!_overviewGroup) {
             return;
         }
         let size = svgSize();
-        let box = null;
-        try {
-            box = _svgGroup.node().getBBox(); // in un-zoomed tree coordinates
-        } catch {
-            box = null;
-        }
+        let box = overviewExtent();   // from the MODEL: see overviewExtent()
         if (!size || !box || box.width <= 0 || box.height <= 0) {
             _overviewGroup.style('display', 'none');
             _overviewMap = null;
@@ -942,15 +1108,32 @@ function (root, d3, forester, phyloXml) {
         _overviewContent.attr('transform', 'translate(' + _overviewMap.tx + ',' + _overviewMap.ty + ') scale(' + scale + ')');
 
         let paths = [];
-        _svgGroup.selectAll('path.link').each(function () {
-            let d = this.getAttribute('d');
-            if (d) {
-                paths.push(d);
+        if (_overviewLinks) {
+            for (let i = 0, len = _overviewLinks.length; i !== len; ++i) {
+                let d = elbow(_overviewLinks[i]);   // the SAME routine the tree is drawn with
+                if (d) {
+                    paths.push(d);
+                }
             }
-        });
-        let sel = _overviewContent.selectAll('path').data(paths);
+        }
+        // ONE path for the whole miniature, not one per link. Every elbow()
+        // string starts with an absolute moveto, so concatenating them yields
+        // a single path of many subpaths that renders identically -- they
+        // already share one stroke, width and vector-effect, so nothing
+        // per-link was being expressed by separate elements.
+        //
+        // It is worth doing because the alternative keeps a SECOND copy of
+        // every link in the document: 18,512 extra elements on the big demo
+        // tree, rewritten on every redraw. Measured on that tree, same data:
+        // writing 18,512 paths 222 ms, writing the one concatenated path
+        // 9 ms. Verified equivalent before adopting -- node ordering, the
+        // index of the first node group, and the datum order of the inserted
+        // paths all match, and the union bounding box is unchanged.
+        let sel = _overviewContent.selectAll('path.aptx-overview-links')
+            .data(paths.length > 0 ? [paths.join(' ')] : []);
         sel.exit().remove();
         sel.enter().append('path')
+            .attr('class', 'aptx-overview-links')
             .merge(sel)
             .attr('d', function (d) {
                 return d;
@@ -968,7 +1151,7 @@ function (root, d3, forester, phyloXml) {
         // collapsed clade has no drawn position.
         let hits = [];
         if (_root) {
-            forester.preOrderTraversal(_root, function (n) {
+            forEachDisplayed(function (n) {
                 let c = getFoundColor(n);
                 if (c) {
                     hits.push({node: n, color: c});
@@ -1023,10 +1206,32 @@ function (root, d3, forester, phyloXml) {
         let y0 = Math.max(OVERVIEW_PAD, _overviewMap.ty + (visY * _overviewMap.scale));
         let x1 = Math.min(OVERVIEW_WIDTH - OVERVIEW_PAD, _overviewMap.tx + ((visX + visW) * _overviewMap.scale));
         let y1 = Math.min(OVERVIEW_HEIGHT - OVERVIEW_PAD, _overviewMap.ty + ((visY + visH) * _overviewMap.scale));
+        // Keep the rectangle visible when the visible slice is tiny. Grown
+        // about its own centre, so the marker stays over the part of the tree
+        // you are actually looking at, then pushed back inside the frame if
+        // that growth would take it out.
+        let floorSpan = function (a, b, lo, hi) {
+            if ((b - a) >= OVERVIEW_VIEWPORT_MIN || (hi - lo) <= OVERVIEW_VIEWPORT_MIN) {
+                return [a, b];
+            }
+            let mid = (a + b) / 2;
+            let start = mid - (OVERVIEW_VIEWPORT_MIN / 2);
+            let end = start + OVERVIEW_VIEWPORT_MIN;
+            if (start < lo) {
+                start = lo;
+                end = lo + OVERVIEW_VIEWPORT_MIN;
+            } else if (end > hi) {
+                end = hi;
+                start = hi - OVERVIEW_VIEWPORT_MIN;
+            }
+            return [start, end];
+        };
+        let xs = floorSpan(x0, x1, OVERVIEW_PAD, OVERVIEW_WIDTH - OVERVIEW_PAD);
+        let ys = floorSpan(y0, y1, OVERVIEW_PAD, OVERVIEW_HEIGHT - OVERVIEW_PAD);
         _overviewViewport
-            .attr('x', x0).attr('y', y0)
-            .attr('width', Math.max(0, x1 - x0))
-            .attr('height', Math.max(0, y1 - y0));
+            .attr('x', xs[0]).attr('y', ys[0])
+            .attr('width', Math.max(0, xs[1] - xs[0]))
+            .attr('height', Math.max(0, ys[1] - ys[0]));
     }
 
     function zoom(event) {
@@ -1263,6 +1468,9 @@ function (root, d3, forester, phyloXml) {
             if (item.danger) {
                 b.className = 'aptx-menu-danger';
             }
+            if (item.disabled) {
+                b.disabled = true;   // offered but not applicable here, as the desktop greys it
+            }
             b.addEventListener('click', function (e) {
                 e.stopPropagation();
                 removeNodeMenu();
@@ -1311,6 +1519,79 @@ function (root, d3, forester, phyloXml) {
         document.addEventListener('keydown', onKey);
     }
 
+    // One set of listeners on the tree group instead of five on every node.
+    //
+    // These used to be attached in the node enter: click and contextmenu on
+    // each g.node, and mouseover/mousemove/mouseout on each
+    // circle.nodeCircleOptions. On an 18,512-node tree that is 92,560
+    // registrations on the first draw, and it measured 300-450 ms of one.
+    // Mouse events bubble, so one listener per type on the group does the same
+    // work -- find which node the event came from, and hand the handler its
+    // datum. The handlers never used `this`, which is what makes this a
+    // straight substitution rather than a rewrite.
+    //
+    // Note it is mouseover/mouseout, NOT mouseenter/mouseleave: only the
+    // former pair bubbles, so only the former pair can be delegated.
+    function attachNodeEventDelegation(group) {
+
+        // d3 stores a node's datum on the element as __data__, which is all
+        // selection.datum() reads. Going straight to it avoids allocating a
+        // selection on every mousemove.
+        function datumOf(el) {
+            return el ? el.__data__ : null;
+        }
+
+        // The hover target stays the invisible 5px circle rather than the whole
+        // node, or the tooltip would follow the labels too.
+        function hoverDatum(event) {
+            let t = event.target;
+            if (!t || !t.classList || !t.classList.contains('nodeCircleOptions')) {
+                return null;
+            }
+            return datumOf(t.parentNode);
+        }
+
+        // Click and the context menu take the whole node group, so the node's
+        // LABEL works as a target too -- a much easier thing to aim at than a
+        // 5px circle.
+        function nodeDatum(event) {
+            let t = event.target;
+            return datumOf(t && t.closest ? t.closest('g.node') : null);
+        }
+
+        group
+            .on('click', function (event) {
+                let d = nodeDatum(event);
+                if (d && _treeFn.clickEvent) {
+                    _treeFn.clickEvent(event, d);
+                }
+            })
+            .on('contextmenu', function (event) {
+                let d = nodeDatum(event);
+                if (d && _treeFn.clickEvent) {
+                    event.preventDefault(); // ours instead of the browser's menu
+                    _treeFn.clickEvent(event, d);
+                }
+            })
+            .on('mouseover', function (event) {
+                let d = hoverDatum(event);
+                if (d) {
+                    mouseover(event, d);
+                }
+            })
+            .on('mousemove', function (event) {
+                let d = hoverDatum(event);
+                if (d) {
+                    mousemove(event, d);
+                }
+            })
+            .on('mouseout', function (event) {
+                if (hoverDatum(event)) {
+                    mouseout();
+                }
+            });
+    }
+
     function mouseout() {
         hideHoverGlow();
         // Fade only. Emptying the tooltip here collapsed it to nothing but its
@@ -1330,9 +1611,16 @@ function (root, d3, forester, phyloXml) {
     // the next launch).
     //
     // The candidates come from forester.visualizationCandidates: the tree is
-    // the only input. Each candidate carries its scales, built once per
-    // launch from the COMPLETE tree -- so a value keeps its colour inside a
-    // subtree view even when the subtree does not contain it.
+    // the only input, and candidacy is decided on the TREE -- at launch, and
+    // again only after a permanent edit (a deletion). A VIEW -- the subtree
+    // the user switched into -- never changes what is offered or chosen; it
+    // only re-summarizes each candidate over the tips on screen (legend rows
+    // and counts, the "no value" row, a numeric field's band and gradient
+    // range) through forester.visualizationSummary. Colour and shape
+    // identities live in the memory maps below and so survive every view.
+    // Until 2026-09-12 the classifier was re-run per view and its refusals
+    // applied to the chosen field, which dropped the colouring in 61% of the
+    // corpus's clades and did not bring it back on return.
     // The tree as displayed right now: the subtree the user switched into,
     // otherwise the (possibly edited) full tree.
     function displayedRoot() {
@@ -1379,7 +1667,8 @@ function (root, d3, forester, phyloXml) {
         if (!_settings.enableVisualizations) {
             return;
         }
-        computeVisualizationCandidates(_treeData);
+        installCandidates(forester.visualizationCandidates(_treeData));
+        summarizeView(_treeData);
         // The embedder may name the visualization to open with (the
         // initialVisualization setting, matched case-insensitively against
         // the Color-menu label or the internal id). A name this tree cannot
@@ -1406,14 +1695,20 @@ function (root, d3, forester, phyloXml) {
             _vis.autoColorId = requested.id;
             _vis.colorId = requested.id;
             _state.showVisualizations = true;
-        } else if (_vis.candidates.length > 0 && !_vis.candidates[0].wide) {
-            // Auto-apply the best candidate: the classifier returns them best
-            // first, so a tree opens already coloured by its most informative
-            // field instead of grey with a menu to discover. A wide field
-            // (21+ values, legend capped) is offered but never imposed.
-            _vis.autoColorId = _vis.candidates[0].id;
-            _vis.colorId = _vis.autoColorId;
-            _state.showVisualizations = true;
+        } else {
+            // Auto-apply the best candidate that is not WIDE: the classifier
+            // returns them best first, so a tree opens already coloured by
+            // its most informative field instead of grey with a menu to
+            // discover. A wide field (21+ values, legend capped) is offered
+            // but never imposed -- and it does not block what sits below it
+            // either: a tree carrying a wide field and an In-Group opens by
+            // the In-Group, not uncoloured.
+            let first = forester.openingVisualization(_vis.candidates);
+            if (first) {
+                _vis.autoColorId = first.id;
+                _vis.colorId = _vis.autoColorId;
+                _state.showVisualizations = true;
+            }
         }
     }
 
@@ -1743,49 +2038,83 @@ function (root, d3, forester, phyloXml) {
         buildCategoryScale(vis);
     }
 
-    function computeVisualizationCandidates(viewRoot) {
-        _vis.candidates = [];
+    // The tree's candidates become THE candidates: the menu, the tiers, the
+    // ids the memory maps are keyed by. Their scales come from summarizeView.
+    function installCandidates(list) {
+        _vis.candidates = list;
         _vis.byId = {};
-        forester.visualizationCandidates(viewRoot).forEach(function (c) {
-            if (c.numeric) {
-                // ramps are POSITION in the view's range, not identity: a
-                // subtree spanning six years gets a full-width gradient
-                let nums = c.values.map(Number);
-                let mean = nums.reduce(function (a, b) {
-                    return a + b;
-                }, 0) / nums.length;
-                c.rangeScale = d3.scaleLinear()
-                    .range(VIS_COLOR_RAMP)
-                    .domain([nums[0], mean, nums[nums.length - 1]]);
-            }
-            function memoryKey(v) {
-                return visMemoryKey(c, v);
-            }
-            // a switchable candidate needs both scales standing by
-            if (c.colorMode === 'category' || c.switchable) {
-                buildCategoryScale(c);
-            }
-            if (c.shape) {
-                let mem = _vis.shapeMemory[c.id] || (_vis.shapeMemory[c.id] = {});
-                let next = _vis.shapeNext[c.id] || 0;
-                c.values.forEach(function (v) {
-                    let k = memoryKey(v);
-                    if (!(k in mem)) {
-                        mem[k] = VIS_SHAPES[next++ % VIS_SHAPES.length];
-                    }
-                });
-                _vis.shapeNext[c.id] = next;
-                c.shapeScale = d3.scaleOrdinal()
-                    .domain(c.values)
-                    .range(c.values.map(function (v) {
-                        return mem[memoryKey(v)];
-                    }));
-            }
-            _vis.candidates.push(c);
+        list.forEach(function (c) {
             _vis.byId[c.id] = c;
         });
     }
 
+    // Re-summarizes every candidate over the tips under `root` and rebuilds
+    // its scales from that: the whole tree at launch and after an edit, the
+    // displayed subtree on every view change.
+    function summarizeView(root) {
+        // the tips on screen: the view's, minus what collapsed clades hide
+        let tips = [];
+        (function walk(n) {
+            if (!n.children) {
+                tips.push(n);
+            } else if (!isCollapsed(n)) {
+                for (let i = 0; i < n.children.length; ++i) {
+                    walk(n.children[i]);
+                }
+            }
+        })(root);
+        _vis.candidates.forEach(function (c) {
+            let s = forester.visualizationSummary(c, tips);
+            c.values = s.values;
+            c.counts = s.counts;
+            c.coverage = s.coverage;
+            c.total = s.total;
+            if (c.numeric) {
+                c.colorMode = s.colorMode;
+                c.switchable = s.switchable;
+            }
+            buildScales(c);
+        });
+    }
+
+    function buildScales(c) {
+        c.rangeScale = null;
+        if (c.numeric && c.values.length > 0) {
+            // ramps are POSITION in the view's range, not identity: a
+            // subtree spanning six years gets a full-width gradient
+            let nums = c.values.map(Number);
+            let mean = nums.reduce(function (a, b) {
+                return a + b;
+            }, 0) / nums.length;
+            c.rangeScale = d3.scaleLinear()
+                .range(VIS_COLOR_RAMP)
+                .domain([nums[0], mean, nums[nums.length - 1]]);
+        }
+        function memoryKey(v) {
+            return visMemoryKey(c, v);
+        }
+        // a switchable candidate needs both scales standing by
+        if (c.colorMode === 'category' || c.switchable) {
+            buildCategoryScale(c);
+        }
+        if (c.shape) {
+            let mem = _vis.shapeMemory[c.id] || (_vis.shapeMemory[c.id] = {});
+            let next = _vis.shapeNext[c.id] || 0;
+            c.values.forEach(function (v) {
+                let k = memoryKey(v);
+                if (!(k in mem)) {
+                    mem[k] = VIS_SHAPES[next++ % VIS_SHAPES.length];
+                }
+            });
+            _vis.shapeNext[c.id] = next;
+            c.shapeScale = d3.scaleOrdinal()
+                .domain(c.values)
+                .range(c.values.map(function (v) {
+                    return mem[memoryKey(v)];
+                }));
+        }
+    }
+
     function currentColorVis() {
         return ((_vis && _vis.colorId) ? _vis.byId[_vis.colorId] : null) || null;
     }
@@ -1797,7 +2126,10 @@ function (root, d3, forester, phyloXml) {
     // A candidate's colour mode, honouring the legend's [colors] / [gradient]
     // switch, and the scale that mode wants.
     function colorModeOf(vis) {
-        return _vis.colorModeById[vis.id] || vis.colorMode;
+        // the legend's [colors]/[gradient] choice holds only while the field
+        // is switchable in THIS view (as on the desktop): above 20 distinct
+        // values it is a gradient, whatever was chosen inside a smaller clade
+        return (vis.switchable && _vis.colorModeById[vis.id]) || vis.colorMode;
     }
 
     // Legend row order: numbers list in numeric order by default, words by
@@ -1847,9 +2179,10 @@ function (root, d3, forester, phyloXml) {
     // a titled, bordered panel; value rows with counts; a [by count] / [A-Z]
     // sort toggle in the title row (count-first is the desktop's default);
     // and for numeric ranges a horizontal gradient bar with the min and max
-    // beneath it. Unlike the desktop there is no "+N more" cap machinery:
-    // the classifier already refuses fields above 20 values, so a legend
-    // can never overflow.
+    // beneath it. A long legend shows its 20 most frequent rows and a
+    // [+N more] chip, like the desktop's. Rows, counts and the "no value"
+    // row describe the tips on SCREEN (the view's summary); the colours are
+    // launch-lifetime identities from the memory maps.
     //
     // The cards live in the tree's own svg, so they ride along into the PNG
     // and SVG exports, and their colours are the four theme colours the
@@ -1915,7 +2248,9 @@ function (root, d3, forester, phyloXml) {
         const titleFont = '600 ' + (FS + 1) + 'px ' + FONT_DEFAULTS;
         const ink = _state.labelColorDefault;
         const frame = _state.branchColorDefault;
-        const isRange = kind === 'color' && colorModeOf(vis) === 'range';
+        // a field with no value in this view has no range to draw: the card
+        // is then just its "no value" row
+        const isRange = kind === 'color' && colorModeOf(vis) === 'range' && vis.values.length > 0;
 
         const LEGEND_MAX_ROWS = 20;
         let rows = [];
@@ -2283,6 +2618,28 @@ function (root, d3, forester, phyloXml) {
         });
     }
 
+    // Animate when there is something to animate; otherwise set the values
+    // straight onto the selection.
+    //
+    // d3 builds a schedule for every element a transition touches, whether or
+    // not that transition will animate anything -- and a duration of 0 animates
+    // nothing. Nearly every redraw here asks for 0: all 39 call sites that pass
+    // a duration pass 0, and only the 15 that omit the argument animate. So the
+    // common path was paying for machinery it never used. On the 18,512-node
+    // tree, ONE `transition.select('path')` measured ~190-235 ms against ~15 ms
+    // for the same select on a plain selection -- and the node update does six
+    // such selects, plus the node and link roots.
+    //
+    // interrupt() first: a transition still running from an earlier redraw would
+    // otherwise finish afterwards and overwrite what we just set. The transition
+    // this replaces cancelled that animation implicitly, by taking over the same
+    // schedule; a plain selection has to say so.
+    function animateOrSet(selection, duration) {
+        return duration > 0
+            ? selection.transition().duration(duration)
+            : selection.interrupt();
+    }
+
     function update(source, transitionDuration, doNotRecalculateWidth) {
 
         if (!source) {
@@ -2300,6 +2657,8 @@ function (root, d3, forester, phyloXml) {
             // the alignment track reserves its window on the right, so the
             // tree and labels compress to make room rather than overlapping
             _msaReserve = 0;
+            // and the domain tracks reserve their column past the labels
+            _domainReserve = domainReserve();
             if (msaShown()) {
                 let fullPx = _basicTreeProperties.maxMolSeqLength * MSA_COL_WIDTH;
                 // budgeted from the VIEWPORT: sizing it from the zoomed layout
@@ -2310,11 +2669,11 @@ function (root, d3, forester, phyloXml) {
                 let band = Math.max(MSA_MIN_BAND_PX, Math.round(vw * MSA_MAX_VIEWPORT_FRACTION));
                 // a wide alignment must not squeeze the tree itself away: the
                 // band yields until the tree keeps its minimum share
-                let maxBand = _displayWidth - calcMaxTreeLengthForDisplay() - MSA_TRACK_GAP - MSA_MIN_TREE_PX;
+                let maxBand = _displayWidth - calcMaxTreeLengthForDisplay() - _domainReserve - MSA_TRACK_GAP - MSA_MIN_TREE_PX;
                 band = Math.max(MSA_MIN_BAND_PX, Math.min(band, maxBand));
                 _msaReserve = MSA_TRACK_GAP + Math.min(fullPx, band);
             }
-            _w = _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve;
+            _w = _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve - _domainReserve;
             if (_w < 1) {
                 _w = 1;
             }
@@ -2328,17 +2687,24 @@ function (root, d3, forester, phyloXml) {
             - bottomOverlayReserve());
         _treeFn = _treeFn.size([_clusterH, _w]);
 
+        // A collapsed clade is a leaf that asks for more than one row: the
+        // separation between neighbouring leaves is the mean of their
+        // weights, a plain tip weighing 1 and a collapsed clade 2r - 1 so
+        // that it spans r rows (collapsedRows).
+        let leafWeight = function (hn) {
+            return isCollapsed(hn.data) ? (2 * collapsedRows(hn.data)) - 1 : 1;
+        };
         _treeFn = _treeFn.separation(function separation(a, b) {
-            return a.parent === b.parent ? 1 : 1;
+            return (leafWeight(a) + leafWeight(b)) / 2;
         });
 
-        let uncollsed_nodes = forester.calcSumOfExternalDescendants(_root);
         // d3 v7: d3.cluster() lays out a d3.hierarchy rather than mutating our
         // own nodes in place (as d3 v3's d3.layout.cluster().nodes() did). Run
         // the layout on a hierarchy, then copy the computed x/y/depth back onto
-        // the forester nodes so the rest of the renderer is unchanged.
+        // the forester nodes so the rest of the renderer is unchanged. A
+        // collapsed node ends the hierarchy: what it hides is not laid out.
         let hierarchy = d3.hierarchy(_root, function (d) {
-            return d.children;
+            return isCollapsed(d) ? null : d.children;
         });
         _treeFn(hierarchy);
         hierarchy.each(function (hn) {
@@ -2349,6 +2715,48 @@ function (root, d3, forester, phyloXml) {
         let nodes = hierarchy.descendants().map(function (hn) {
             return hn.data;
         }).reverse();
+        let leaves = hierarchy.leaves();
+        let uncollsed_nodes = leaves.length;   // the rows on screen: tips and collapsed clades
+        {
+            // px per row unit: the leaves span the cluster height in
+            // separation units (a collapsed clade counts for its rows)
+            let units = 0;
+            for (let i = 1; i < leaves.length; ++i) {
+                units += (leafWeight(leaves[i - 1]) + leafWeight(leaves[i])) / 2;
+            }
+            _rowUnit = units > 0 ? (leaves[leaves.length - 1].x - leaves[0].x) / units : _clusterH;
+        }
+        _cladogramUnit = hierarchy.height > 0 ? _w / hierarchy.height : _w;
+
+        // The wrapper is laid out as a level of its own, so a cladogram spent
+        // one depth unit on the invisible branch above the root. Pull the
+        // root back to 0 and stretch the rest to the full width; the stub is
+        // placed afterwards (placeRootStub), and a phylogram overrides these
+        // positions anyway.
+        {
+            let top = topNode();
+            if (top && top.y > 0 && _w > top.y) {
+                let unit = top.y;
+                let stretch = _w / (_w - unit);
+                forEachDisplayed(function (n) {
+                    if (n !== _root) {
+                        n.y = (n.y - unit) * stretch;
+                    }
+                });
+                _root.y = 0;
+                _cladogramUnit = unit * stretch;
+            }
+            // a collapsed clade is laid out on the tip column like any leaf;
+            // in a cladogram its apex steps back one level so the wedge ends
+            // where the tips would (a phylogram places it by distance)
+            if (!_state.phylogram) {
+                forEachDisplayed(function (n) {
+                    if (isCollapsed(n)) {
+                        n.y -= _cladogramUnit;
+                    }
+                });
+            }
+        }
 
         // The dim gate: only while a hit is actually DRAWN, so the tree never
         // washes out with nothing emphasised (a 0-hit search, or every hit
@@ -2365,11 +2773,13 @@ function (root, d3, forester, phyloXml) {
         let links = hierarchy.links().map(function (link) {
             return {source: link.source.data, target: link.target.data};
         });
+        _overviewLinks = links;   // the overview is built from these, not from the DOM
         let gap = _state.nodeLabelGap;
 
         if (_state.phylogram === true) {
             _yScale = branchLengthScaling(forester.getAllExternalNodes(_root), _w);
         }
+        placeRootStub();
 
         if (_state.circularDisplay) {
             let maxY = 0;
@@ -2393,17 +2803,26 @@ function (root, d3, forester, phyloXml) {
             // branchLengthScaling just wrote) and are one constant step per
             // level in cladogram mode; the radial budget matches circular's.
             let budget = Math.min(_displayWidth, _displayHeight) * 0.42;
+            // The fan is laid out from the displayed tree's OWN root, never
+            // from the wrapper above it: an unrooted display draws no root
+            // branch at all, not the file's real one and not the stub
+            // (Christian, 2026-09-13). Laid out from the wrapper, the root
+            // hung one cladogram step -- or its own branch length -- off the
+            // centre on a spoke leading in from nowhere.
+            let top = topNode() || _root;
             let lengthOf;
+            let pxPerUnit = 0;   // the phylogram's scale, for the scale bar
             if (_state.phylogram) {
                 let maxDist = 0;
-                forester.preOrderTraversal(_root, function (n) {
-                    if (!n.children && n.distToRoot > maxDist) {
-                        maxDist = n.distToRoot;
+                forester.preOrderTraversal(top, function (n) {
+                    if (!n.children && n.distToRoot - top.distToRoot > maxDist) {
+                        maxDist = n.distToRoot - top.distToRoot;
                     }
                 });
                 let factor = maxDist > 0 ? budget / maxDist : 1;
+                pxPerUnit = maxDist > 0 ? factor : 0;
                 lengthOf = function (n) {
-                    return Math.max(0, n.distToRoot - (n.parent ? n.parent.distToRoot : 0)) * factor;
+                    return Math.max(0, n.distToRoot - n.parent.distToRoot) * factor;
                 };
             } else {
                 let maxDepth = 0;
@@ -2412,12 +2831,20 @@ function (root, d3, forester, phyloXml) {
                         maxDepth = nodes[i].depth;
                     }
                 }
-                let step = budget / Math.max(1, maxDepth);
+                // depths count from the wrapper, so the tree's own levels are one fewer
+                let step = budget / Math.max(1, maxDepth - (top === _root ? 0 : 1));
                 lengthOf = function () {
                     return step;
                 };
             }
-            _unroot = forester.equalAngleLayout(_root, UNROOTED_START_ANGLE + _radialRotation, lengthOf);
+            _unroot = forester.equalAngleLayout(top, UNROOTED_START_ANGLE + _radialRotation, lengthOf);
+            _unroot.pxPerUnit = pxPerUnit;
+            if (top !== _root) {
+                // the wrapper sits on the root, so their link has no length
+                _root.ux = top.ux;
+                _root.uy = top.uy;
+                _root.uangle = top.uangle;
+            }
         } else {
             _radial = null;
             _unroot = null;
@@ -2438,6 +2865,7 @@ function (root, d3, forester, phyloXml) {
                 });
             }
         }
+        syncDynahideIndicator(_state.dynahide && !_state.unrootedDisplay && _dynahide_factor >= 2);
 
         updateButtonEnabledState();
 
@@ -2446,21 +2874,14 @@ function (root, d3, forester, phyloXml) {
                 return d.id || (d.id = ++_i);
             });
 
+        // No listeners here: click, contextmenu and the hover trio are
+        // delegated once to the tree group -- see attachNodeEventDelegation().
         let nodeEnter = node.enter().append('g')
             .attr('class', 'node')
             .attr('transform', function () {
                 return 'translate(' + source.y0 + ',' + source.x0 + ')';
             })
-            .style('cursor', 'default')
-            .on('click', _treeFn.clickEvent)
-            // Right-click opens the same menu. The left-click target is an
-            // invisible 5px circle on the node itself, which is hard to hit; this
-            // handler sits on the whole node group, so the node's LABEL works as
-            // the target too -- a much easier thing to aim at.
-            .on('contextmenu', function (event, d) {
-                event.preventDefault(); // ours instead of the browser's menu
-                _treeFn.clickEvent.call(this, event, d);
-            });
+            .style('cursor', 'default');
 
 
         // Only the three elements EVERY node needs are created here. The other
@@ -2483,11 +2904,6 @@ function (root, d3, forester, phyloXml) {
             .attr('r', 0);
 
         nodeEnter.append('circle')
-            .on("mouseover", mouseover)
-            .on("mousemove", function (event, d) {
-                mousemove(event, d);
-            })
-            .on("mouseout", mouseout)
             .style('cursor', 'pointer')
             .style('opacity', '0')
             .attr('class', 'nodeCircleOptions')
@@ -2509,6 +2925,7 @@ function (root, d3, forester, phyloXml) {
         // d3 v4+ no longer folds entered nodes into the update selection, so
         // merge them before the shared styling/positioning below.
         node = nodeEnter.merge(node);
+        drawCollapsedClades(node);
 
         // Create the optional children only where they will show something,
         // and drop them where they will not. Must run BEFORE node.transition()
@@ -2708,20 +3125,29 @@ function (root, d3, forester, phyloXml) {
             });
         }
 
-        node.select('circle.nodeCircle')
-            .attr('r', function (d) {
-                if (((_state.showVisualizations && !_state.showNodeEvents) && (makeNodeFillColor(d) === _state.backgroundColorDefault))) {
-                    return 0;
-                }
-                return makeNodeSize(d);
-            })
-            .style('stroke', function (d) {
-                return makeNodeStrokeColor(d);
-            })
-            .style('stroke-width', _state.branchWidthDefault)
-            .style('fill', function (d) {
-                return (_state.showVisualizations || _state.showNodeEvents || isNodeFound(d) || isNodeSelected(d)) ? makeNodeFillColor(d) : _state.backgroundColorDefault;
-            });
+        // One pass, and the fill colour computed once.
+        //
+        // This was four chained .attr/.style calls, so d3 walked all 18.5k
+        // circles four times; and makeNodeFillColor() was called TWICE per
+        // node -- once to decide whether the dot collapses to r=0, once for
+        // the fill itself -- which is not a cheap accessor: it checks the
+        // search hits, the node events, the visualization colour and the
+        // node's own style.
+        //
+        // The union of the two conditions that need the colour is just the
+        // fill condition, since (showVisualizations && !showNodeEvents)
+        // implies showVisualizations. So it is computed once when needed and
+        // reused, and left null when neither branch wants it.
+        node.select('circle.nodeCircle').each(function (d) {
+            let fill = (_state.showVisualizations || _state.showNodeEvents
+                || isNodeFound(d) || isNodeSelected(d)) ? makeNodeFillColor(d) : null;
+            let r = ((_state.showVisualizations && !_state.showNodeEvents)
+                && (fill === _state.backgroundColorDefault)) ? 0 : makeNodeSize(d);
+            this.setAttribute('r', r);
+            this.style.stroke = makeNodeStrokeColor(d);
+            this.style.strokeWidth = _state.branchWidthDefault;
+            this.style.fill = (fill === null) ? _state.backgroundColorDefault : fill;
+        });
 
 
         // Dim Non-Matches: one opacity on the node GROUP dims its labels, dot,
@@ -2732,16 +3158,24 @@ function (root, d3, forester, phyloXml) {
             return (_dimNonMatches && !getFoundColor(d)) ? DIM_NON_MATCH_OPACITY : null;
         });
 
-        let nodeUpdate = node.transition()
-            .duration(transitionDuration)
+        let nodeUpdate = animateOrSet(node, transitionDuration)
             .attr('transform', function (d) {
                 return nodeTransform(d);
             });
 
-        nodeUpdate.select('text')
+        // The same rule for a node's CHILD elements: derive from the transition
+        // when animating, else select straight off the node and interrupt any
+        // animation still on that child.
+        function nodeChild(selector) {
+            return transitionDuration > 0
+                ? nodeUpdate.select(selector)
+                : node.select(selector).interrupt();
+        }
+
+        nodeChild('text')
             .style('fill-opacity', 1);
 
-        nodeUpdate.select('text.extlabel')
+        nodeChild('text.extlabel')
             .text(function (d) {
                 return d._extLabelText;   // computed in syncOptionalNodeChildren
             });
@@ -2750,17 +3184,17 @@ function (root, d3, forester, phyloXml) {
         // has already removed these elements when the switch is off, and a
         // .select() that finds nothing still walks every node to find out.
         if (_state.showBranchLengthValues) {
-            nodeUpdate.select('text.bllabel').text(makeBranchLengthLabel);
+            nodeChild('text.bllabel').text(makeBranchLengthLabel);
         }
         if (_state.showConfidenceValues) {
-            nodeUpdate.select('text.conflabel').text(makeConfidenceValuesLabel);
+            nodeChild('text.conflabel').text(makeConfidenceValuesLabel);
         }
         if (_state.showBranchEvents) {
-            nodeUpdate.select('text.brancheventlabel').text(makeBranchEventsLabel);
+            nodeChild('text.brancheventlabel').text(makeBranchEventsLabel);
         }
 
         let drawShapes = _state.showVisualizations || stylesActive();
-        nodeUpdate.select('path')
+        nodeChild('path')
             .style('stroke', drawShapes ? makeNodeStrokeColor : null)
             .style('stroke-width', _state.branchWidthDefault)
             .style('fill', drawShapes ? makeNodeFillColor : null)
@@ -2772,9 +3206,9 @@ function (root, d3, forester, phyloXml) {
         // and a full 18k-node walk even when drawShapes made it a no-op. One
         // filtered selection with one transition does the same thing.
         if (!drawShapes) {
-            node.filter(function (d) {
+            animateOrSet(node.filter(function (d) {
                 return d.children && makeNodeVisShape(d) === null;
-            }).select('path').transition().duration(transitionDuration)
+            }).select('path'), transitionDuration)
                 .attr('d', 'M0,0');
         }
 
@@ -2798,7 +3232,26 @@ function (root, d3, forester, phyloXml) {
                 return d.target.id;
             });
 
-        let linkEnter = link.enter().insert('path', 'g')
+        // The reference node for the insert below, resolved ONCE.
+        //
+        // d3's insert(name, before) takes `before` as a SELECTOR STRING and
+        // then runs parent.querySelector(before) for EVERY element it
+        // inserts. With 18.5k links going into a group that already holds
+        // 18.5k node <g>s, that is 18.5k full-subtree queries and it
+        // dominated the first draw: measured 1,883 ms against 66 ms for the
+        // same inserts with the lookup hoisted -- 28x, and about a third of
+        // the time to open the biggest demo tree.
+        //
+        // Passing a function instead makes d3 use its return value as-is. The
+        // result is identical: every link still lands before the first node
+        // group, in the same order, so links stay painted behind nodes. It
+        // must be re-resolved each update because the node join above may
+        // have just created or removed those groups.
+        let linkBefore = _svgGroup.node().querySelector('g');
+
+        let linkEnter = link.enter().insert('path', function () {
+            return linkBefore;
+        })
             .attr('class', 'link')
             .attr('fill', 'none')
             .attr('stroke-width', makeBranchWidth)
@@ -2819,8 +3272,7 @@ function (root, d3, forester, phyloXml) {
 
         link.attr('stroke-width', makeBranchWidth);
 
-        link.transition()
-            .duration(transitionDuration)
+        animateOrSet(link, transitionDuration)
             .attr('stroke', makeBranchColor)
             .attr('d', elbow);
 
@@ -2897,10 +3349,14 @@ function (root, d3, forester, phyloXml) {
         }
 
         hideHoverGlow(); // the hovered node may have moved; the next mouseover re-shows it
+        drawScaleBar();
+        drawDomainArchitectures();
+        drawDomainLegend();
         drawMsaTrack();
         drawTimeOverlays();
         rebuildOverview(); // measured AFTER the overlays, so the bbox is this frame's
         updateSearchHitNavigation();
+        noteViewChange();
     }
 
     // A node is drawn as a shape only when there is a reason to show one: it
@@ -2934,11 +3390,15 @@ function (root, d3, forester, phyloXml) {
         let styled = _state.nodeSizeDefault > 0 && node.parent && !node.hasVis
             && styleOf !== null && !!styleOf.nodeColor;
 
-        // a zero-length branch off the root would otherwise be invisible
-        let zeroLengthRootChild = _state.phylogram && node.parent && !node.parent.parent
-            && (!node.branch_length || node.branch_length <= 0);
-
-        return (visualized || styled || zeroLengthRootChild) ? _state.nodeSizeDefault : 0;
+        // The root is no exception. A 2.x rule gave "a zero-length branch
+        // off the root" a circle so it would not vanish -- but the tree is
+        // laid out from the invisible wrapper above the root, so the node it
+        // matched was the root itself, and only in a phylogram with nothing
+        // coloured: a circle that appeared and disappeared with the display
+        // type and meant nothing. Dropped 2026-09-13; the root is now marked
+        // by its stub (placeRootStub), and wears a circle only for the
+        // reasons any node does.
+        return (visualized || styled) ? _state.nodeSizeDefault : 0;
     };
 
     let makeBranchWidth = function (link) {
@@ -3090,7 +3550,10 @@ function (root, d3, forester, phyloXml) {
         if (value === null) {
             return null;
         }
-        return colorModeOf(vis) === 'range' ? vis.rangeScale(Number(value)) : vis.categoryScale(value);
+        if (colorModeOf(vis) === 'range') {
+            return vis.rangeScale ? vis.rangeScale(Number(value)) : null;
+        }
+        return vis.categoryScale(value);
     }
 
     let makeVisNodeFillColor = function (node) {
@@ -3134,7 +3597,7 @@ function (root, d3, forester, phyloXml) {
                 if (isNodeFound(n)) {
                     hits.push(n);
                 }
-                if (n.children) {
+                if (n.children && !isCollapsed(n)) {   // a hit inside a collapsed clade has no position to step to
                     for (let i = 0; i < n.children.length; ++i) {
                         walk(n.children[i]);
                     }
@@ -3211,7 +3674,7 @@ function (root, d3, forester, phyloXml) {
         if (_vis && _vis.labelRef && !phynode.children && phynode.properties) {
             for (let i = 0; i < phynode.properties.length; ++i) {
                 let p = phynode.properties[i];
-                if (p.ref === _vis.labelRef && p.applies_to === 'node' && p.value) {
+                if (p.ref === _vis.labelRef && forester.isNodeScopedProperty(p) && p.value) {
                     return String(p.value);
                 }
             }
@@ -3293,25 +3756,38 @@ function (root, d3, forester, phyloXml) {
         let wantEvent = _state.showBranchEvents === true;
         let wantDot = _state.showSupportDots === true;
 
-        // whole-class removals first: one pass, no per-node callback
+        // Whole-class removals first: ONE query over the tree group, not one
+        // per node. `node.selectAll(...)` runs querySelectorAll on every one of
+        // the 18,512 node groups, and five of those is 92,560 queries made
+        // largely to discover there is nothing to remove -- measured at 82-92 ms
+        // per redraw on the big tree, against 40-50 ms for the whole per-node
+        // loop below it. Each of these classes is created only in this function,
+        // on a g.node inside _svgGroup, so one query over the group finds
+        // exactly the same elements. (The overview's miniature is out of reach
+        // either way: it hangs off _baseSvg, not _svgGroup.)
+        let dropAll = function (selector) {
+            if (_svgGroup) {
+                _svgGroup.selectAll(selector).remove();
+            }
+        };
         if (!wantBl) {
-            node.selectAll('text.bllabel').remove();
+            dropAll('text.bllabel');
         }
         if (!wantConf) {
-            node.selectAll('text.conflabel').remove();
+            dropAll('text.conflabel');
         }
         if (!wantEvent) {
-            node.selectAll('text.brancheventlabel').remove();
+            dropAll('text.brancheventlabel');
         }
         if (!wantDot) {
-            node.selectAll('circle.suppdot').remove();
+            dropAll('circle.suppdot');
         }
 
         // No search running means no halo anywhere -- one pass instead of
         // 18,512 set lookups plus 18,512 DOM queries.
         let anyFound = anySearchHits();
         if (!anyFound) {
-            node.selectAll('circle.foundHalo').remove();
+            dropAll('circle.foundHalo');
         }
 
         // Raw DOM inside the loop, not d3 selections: this runs once per node
@@ -3389,6 +3865,9 @@ function (root, d3, forester, phyloXml) {
     }
 
     let makeNodeLabel = function (phynode) {
+        if (isCollapsed(phynode)) {
+            return '';   // a collapsed clade carries its own label (drawCollapsedClades)
+        }
         if (!_state.showExternalLabels && !(phynode.children)) {
             return null;
         }
@@ -3471,7 +3950,7 @@ function (root, d3, forester, phyloXml) {
                     if (value.selected === true && value.propertyRef) {
                         let prop_text = '';
                         for (let pm = 0; pm < props_length; ++pm) {
-                            if (phynode.properties[pm].ref === value.propertyRef && phynode.properties[pm].datatype === 'xsd:string' && phynode.properties[pm].applies_to === 'node') {
+                            if (phynode.properties[pm].ref === value.propertyRef && phynode.properties[pm].datatype === 'xsd:string' && forester.isNodeScopedProperty(phynode.properties[pm])) {
                                 if (prop_text.length > 0) {
                                     prop_text += ', '
                                 }
@@ -3962,6 +4441,10 @@ function (root, d3, forester, phyloXml) {
     const STATE_KEYS = [
         'layout',
         'showMsa',
+        'showDomainArchitectures',
+        'domainLabels',
+        'domainGlow',
+        'domainEvalueExponent',
         'showTimeAxis',
         'timeAxisGrid',
         'showSupportDots',
@@ -3986,9 +4469,11 @@ function (root, d3, forester, phyloXml) {
         'ladderizeTree',
         'nhExportWriteConfidences',
         'nodeLabels',
+        'onViewChange',
         'pngExportScale',
         'rootOffset',
         'supportDotMinimum',
+        'view',
         'zoomToFitUponWindowResize'
     ];
 
@@ -4081,12 +4566,8 @@ function (root, d3, forester, phyloXml) {
         // explicitly is derived from what the loaded tree actually contains
         // (an explicit caller option always wins). Field presence comes from
         // the same per-tree discovery that drives the search Field menu.
-        let presentFields = new Set();
-        if (_treeData) {
-            forester.availableSearchFields(_treeData).forEach(function (f) {
-                presentFields.add(f.key);
-            });
-        }
+        let presentFields = new Set(_treeData ? forester.availableSearchFields(_treeData) : []);
+        let F = forester.searchFields;
 
         // Branch lengths are worth drawing to scale only when MOST of the
         // branches that CARRY THE SCALE have one. Two corrections to the
@@ -4185,6 +4666,39 @@ function (root, d3, forester, phyloXml) {
             _state.showMsa = _basicTreeProperties.alignedMolSeqs === true
                 && _basicTreeProperties.maxMolSeqLength > 0;
         }
+        // A tree with protein domain architectures on its tips draws them
+        // from the start (the desktop switches its toggle on at load), again
+        // unless the caller decided. The track width is set at the first
+        // draw from the viewport; threshold, label mode and glow come from
+        // the config or the desktop's defaults.
+        if (_state.showDomainArchitectures === undefined) {
+            _state.showDomainArchitectures = _basicTreeProperties.domainArchitectures === true;
+        }
+        if (_state.domainLabels === undefined) {
+            _state.domainLabels = 'domains';
+        } else if (DOMAIN_LABEL_MODES.indexOf(_state.domainLabels) < 0) {
+            throw new Error(ERROR + '"domainLabels" must be "none", "domains" or "legend"');
+        }
+        if (_state.domainGlow === undefined) {
+            _state.domainGlow = false;
+        }
+        if (_state.domainEvalueExponent === undefined) {
+            _state.domainEvalueExponent = forester.DOMAIN_EVALUE_EXPONENT_DEFAULT;
+        } else if (!Number.isInteger(_state.domainEvalueExponent)
+            || _state.domainEvalueExponent < forester.DOMAIN_EVALUE_EXPONENT_MIN
+            || _state.domainEvalueExponent > forester.DOMAIN_EVALUE_EXPONENT_MAX) {
+            throw new Error(ERROR + '"domainEvalueExponent" must be an integer from '
+                + forester.DOMAIN_EVALUE_EXPONENT_MIN + ' to ' + forester.DOMAIN_EVALUE_EXPONENT_MAX);
+        }
+        _domain = {width: null, radialWidth: null, palette: null, next: 0, legendFrac: null};
+        if (_basicTreeProperties.domainArchitectures) {
+            // malformed domains are skipped, never fatal -- said once, here
+            let ignored = forester.domainArchitectureStats(_treeData).ignored;
+            if (ignored > 0) {
+                console.warn(MESSAGE + ignored + ' protein domain' + (ignored === 1 ? '' : 's')
+                    + ' with a missing or impossible from / to / E-value ignored');
+            }
+        }
         // Likewise a dated tree draws its time axis from the start --
         // geologic ICS bands or calendar years, decided from the <date>
         // elements by forester.timeAxisInfo -- again unless the caller set
@@ -4209,18 +4723,18 @@ function (root, d3, forester, phyloXml) {
         // Which taxonomy fields to label with is decided from the tree, not
         // configured: show the scientific name and code when present, and fall
         // back to the common name only when there is no scientific name.
-        _state.showTaxonomyCode = presentFields.has('TC');
-        _state.showTaxonomyScientificName = presentFields.has('TS');
-        _state.showTaxonomyCommonName = presentFields.has('TN') && !presentFields.has('TS');
+        _state.showTaxonomyCode = presentFields.has(F.taxonomyCode);
+        _state.showTaxonomyScientificName = presentFields.has(F.taxonomyScientificName);
+        _state.showTaxonomyCommonName = presentFields.has(F.taxonomyCommonName) && !presentFields.has(F.taxonomyScientificName);
         _state.showTaxonomyRank = false;
         _state.showTaxonomySynonyms = false;
         // Likewise ONE good sequence identifier rather than all of them, in
         // order of preference: sequence name, gene name, symbol, accession.
-        _state.showSequenceName = presentFields.has('SN');
-        _state.showSequenceGeneSymbol = presentFields.has('GN') && !presentFields.has('SN');
-        _state.showSequenceSymbol = presentFields.has('SS') && !presentFields.has('SN') && !presentFields.has('GN');
-        _state.showSequenceAccession = presentFields.has('SA') && !presentFields.has('SN')
-            && !presentFields.has('GN') && !presentFields.has('SS');
+        _state.showSequenceName = presentFields.has(F.sequenceName);
+        _state.showSequenceGeneSymbol = presentFields.has(F.geneName) && !presentFields.has(F.sequenceName);
+        _state.showSequenceSymbol = presentFields.has(F.sequenceSymbol) && !presentFields.has(F.sequenceName) && !presentFields.has(F.geneName);
+        _state.showSequenceAccession = presentFields.has(F.sequenceAccession) && !presentFields.has(F.sequenceName)
+            && !presentFields.has(F.geneName) && !presentFields.has(F.sequenceSymbol);
 
         // Which of the three groups start CHECKED is then decided from the
         // label text itself (forester.suggestLabelFields): a field whose text
@@ -4243,7 +4757,7 @@ function (root, d3, forester, phyloXml) {
                     if (labelRef && n.properties) {
                         for (let pi = 0; pi < n.properties.length; ++pi) {
                             let p = n.properties[pi];
-                            if (p.ref === labelRef && p.applies_to === 'node' && p.value) {
+                            if (p.ref === labelRef && forester.isNodeScopedProperty(p) && p.value) {
                                 return String(p.value);
                             }
                         }
@@ -4418,6 +4932,16 @@ function (root, d3, forester, phyloXml) {
             throw new Error(ERROR + 'internalNumericLabels must be "auto", "confidence" or "label"');
         }
         // custom label-field checkboxes (was launch()'s sixth positional arg)
+        if (_settings.view === undefined || _settings.view === null) {
+            _settings.view = null;
+        } else if (typeof _settings.view !== 'object') {
+            throw new Error(ERROR + '"view" must be a view state object (getViewState / decodeViewState) or null');
+        }
+        if (_settings.onViewChange === undefined || _settings.onViewChange === null) {
+            _settings.onViewChange = null;
+        } else if (typeof _settings.onViewChange !== 'function') {
+            throw new Error(ERROR + '"onViewChange" must be a function (state, encoded) or null');
+        }
         if (_settings.nodeLabels === undefined) {
             _settings.nodeLabels = null;
         } else if (_settings.nodeLabels !== null && typeof _settings.nodeLabels !== 'object') {
@@ -4510,6 +5034,7 @@ function (root, d3, forester, phyloXml) {
         populateSearchMenus();
 
         _svgGroup = _baseSvg.append('g');
+        attachNodeEventDelegation(_svgGroup);
         // the floating strips paint over the tree and under the overview
         _floatGroup = _baseSvg.append('g').attr('class', 'aptx-float')
             .style('pointer-events', 'none');
@@ -4519,6 +5044,12 @@ function (root, d3, forester, phyloXml) {
         if (_settings.ladderizeTree) {
             ladderizeSubtree(_root, true);   // one pass: a definite arrangement
         }
+        _viewOps = {order: null, root: null};
+        if (_settings.view) {
+            // the shared view, its searches found before the first draw
+            applyViewState(_settings.view, true);
+            runSearches();
+        }
         if (_state.searchAinitialValue) {
             search0();
         }
@@ -4532,6 +5063,7 @@ function (root, d3, forester, phyloXml) {
 
         search0();
         search1();
+        settleViewNotification();
     }
 
     function bindDoc(type, fn, opts) {
@@ -4549,6 +5081,24 @@ function (root, d3, forester, phyloXml) {
             // resolves once the tree is drawn: at once for a small tree,
             // after the deferred first draw for a big one
             ready: _readyPromise,
+            // the trees of the launch -- one, or every tree the file held:
+            // how many, which is shown, and showing another (a fresh
+            // viewer for it; the handle returned is the one to keep)
+            getTreeCount: function () {
+                return _trees.length;
+            },
+            getTreeIndex: function () {
+                return _treeIndex;
+            },
+            showTree: showTree,
+            // the view -- layout, display, labels, colours, searches, the
+            // clade and the collapsed clades, sizes -- as a plain object,
+            // and opening one (see also archaeopteryx.encodeViewState /
+            // decodeViewState and the config's view / onViewChange)
+            getViewState: getViewState,
+            applyViewState: function (state) {
+                applyViewState(state, false);
+            },
             destroy: destroyViewer
         };
     }
@@ -4581,6 +5131,13 @@ function (root, d3, forester, phyloXml) {
             _node_mouseover_div.remove(); // the body-level tooltip div (d3 selection)
             _node_mouseover_div = null;
         }
+        // A redraw still waiting for its frame belongs to the viewer being torn
+        // down. Left set, its callback would read the NEXT viewer's pending
+        // update, null it, then find its own sequence number stale and return
+        // -- having already discarded work that was not its own. I could not
+        // construct that ordering from the UI, and one line means nobody has to
+        // reason about it again.
+        _pendingUpdate = null;
         clearInterval(_intervalId); // a zoom button held down at destroy time
         d3.select(window).on('resize.archaeopteryx', null);
         _docListeners.forEach(function (l) {
@@ -4594,10 +5151,16 @@ function (root, d3, forester, phyloXml) {
         _root = null;
         _root_const = null;
         _treeData = null;
+        _trees = [];
+        _treeIndex = 0;
+        _launchConfig = null;
+        _lastViewEncoded = undefined;
+        _viewOps = {order: null, root: null};
         _basicTreeProperties = null;
         _baseSvg = null;
         _svgGroup = null;
         _overviewGroup = null;
+        _overviewLinks = null;
         _overviewContent = null;
         _overviewViewport = null;
         _overviewMap = null;
@@ -4648,9 +5211,39 @@ function (root, d3, forester, phyloXml) {
         if (phylo === undefined || phylo === null) {
             throw new Error(ERROR + 'input tree is undefined or null');
         }
-        if ((!phylo.children) || (phylo.children.length < 1)) {
-            throw new Error(ERROR + 'input tree is empty or illegally formatted');
+        // One tree, or a list of them (every tree a file holds -- parseTrees):
+        // the list is kept, the first is shown, and the panel's picker and the
+        // handle's showTree() move between them.
+        let trees = Array.isArray(phylo) ? phylo.slice() : [phylo];
+        if (trees.length === 0) {
+            throw new Error(ERROR + 'input tree list is empty');
         }
+        trees.forEach(function (t, i) {
+            if (!t || (!t.children) || (t.children.length < 1)) {
+                throw new Error(ERROR + (trees.length > 1 ? 'input tree ' + (i + 1) + ' of ' + trees.length : 'input tree')
+                    + ' is empty or illegally formatted');
+            }
+        });
+        // the two view keys are checked up here with the other arguments,
+        // before anything is touched (and where Node can test it)
+        if (config && config.view !== undefined && config.view !== null && typeof config.view !== 'object') {
+            throw new Error(ERROR + '"view" must be a view state object (getViewState / decodeViewState) or null');
+        }
+        if (config && config.onViewChange !== undefined && config.onViewChange !== null && typeof config.onViewChange !== 'function') {
+            throw new Error(ERROR + '"onViewChange" must be a function (state, encoded) or null');
+        }
+        // a view names the tree it was made on; a fresh launch reports no
+        // view until one changes (settleViewNotification)
+        _lastViewEncoded = undefined;
+        let view = config && config.view;
+        let start = (view && Number.isInteger(view.tree) && view.tree > 0 && view.tree < trees.length) ? view.tree : 0;
+        return launchInto(container, trees, start, config);
+    };
+
+    // The launch proper, for one tree of the list: launch() validates and
+    // starts at the first, showTree() re-enters here for another.
+    function launchInto(container, trees, index, config) {
+        let phylo = trees[index];
         let cfg = readConfig(config);
         requireForester();
         requireD3();
@@ -4658,7 +5251,11 @@ function (root, d3, forester, phyloXml) {
 
         let previousContainer = _container; // for the different-container teardown below
         _treeData = phylo;
+        _trees = trees;
+        _treeIndex = index;
+        _launchConfig = config;
         _container = containerEl;
+        assignViewIds(phylo);
         _zoomListener = d3.zoom()
             .scaleExtent([0.1, 10])
             .filter(function (event) {
@@ -4724,7 +5321,13 @@ function (root, d3, forester, phyloXml) {
             _baseSvg = d3.select(containerEl).append('svg')
                 .attr('width', _displayWidth)
                 .attr('height', _displayHeight)
-                .call(_zoomListener);
+                .call(_zoomListener)
+                // d3.zoom binds its own double-click-to-zoom, which scales the
+                // picture -- fonts and all -- and so behaves like the wheel
+                // zoom this program deliberately replaced with a re-layout.
+                // It is also easy to hit by accident: a double click that
+                // misses a node is a miss, not a request to magnify the tree.
+                .on('dblclick.zoom', null);
 
             if (_settings.enableDynamicSizing) {
                 d3.select(window)
@@ -4793,10 +5396,24 @@ function (root, d3, forester, phyloXml) {
         }
 
         return makeViewerHandle();
+    }
 
-        //////////////////////////////////////////////////////////////////////
-
-    };
+    // Shows another tree of the launched list in the same container under
+    // the same config. The tree opens fresh -- its own presets, a clean
+    // view -- the way a new tab does on the desktop. The panel's picker and
+    // previous / next buttons come here, as does the handle's showTree().
+    function showTree(index) {
+        if (!_container) {
+            throw new Error(ERROR + 'showTree(): nothing is launched');
+        }
+        if (!Number.isInteger(index) || index < 0 || index >= _trees.length) {
+            throw new Error(ERROR + 'showTree(): the index must be 0 to ' + (_trees.length - 1) + ', got ' + index);
+        }
+        if (index === _treeIndex) {
+            return makeViewerHandle();
+        }
+        return launchInto(_container, _trees, index, _launchConfig);
+    }
 
     archaeopteryx.parsePhyloXML = function (data) {
         requirePhyloXml();
@@ -4853,8 +5470,9 @@ function (root, d3, forester, phyloXml) {
         return forester.parseAuspiceJson(data);
     };
 
-    // A Nexus file can hold several trees; the FIRST one is displayed (any
-    // alignment from the file's characters matrix rides along on its tips).
+    // A Nexus file can hold several trees; this returns the FIRST one
+    // (parseTrees returns them all; any alignment from the file's characters
+    // matrix rides along on the tips).
     archaeopteryx.parseNexus = function (data, mode, legacyMode) {
         requireForester();
         let m = (typeof mode === 'boolean' || mode === undefined) ? legacyMode : mode;
@@ -4868,6 +5486,9 @@ function (root, d3, forester, phyloXml) {
     function calcMaxExtLabel() {
         _maxLabelLength = _state.nodeLabelGap;
         forester.preOrderTraversal(_root, function (d) {
+            if (isCollapsed(d)) {
+                _maxLabelLength = Math.max(collapsedLabel(d).length, _maxLabelLength);
+            }
             if (!d.children) {
                 let l = makeNodeLabel(d);
                 if (l) {
@@ -4989,7 +5610,7 @@ function (root, d3, forester, phyloXml) {
                         let properties_text = '';
                         let prev_property_ref = null;
                         for (let pl = 0; pl < l; ++pl) {
-                            if (sorted_properties[pl].applies_to === 'node') {
+                            if (forester.isNodeScopedProperty(sorted_properties[pl])) {
                                 if (sorted_properties[pl].ref === prev_property_ref) {
                                     properties_text = addSepSame(properties_text);
                                 } else {
@@ -5202,6 +5823,9 @@ function (root, d3, forester, phyloXml) {
             }
 
             function switchToSubtree(node) {
+                if (node.collapsed) {
+                    node.collapsed = false;   // a subtree view shows what the clade holds
+                }
                 if (node.parent) {
                     if (!(node.children)) {
                         if (node.parent.parent) {
@@ -5222,7 +5846,7 @@ function (root, d3, forester, phyloXml) {
                         fakeNode.y0 = 0;
                         _root = fakeNode;
                         _basicTreeProperties = forester.collectBasicTreeProperties(_root);
-                        refreshVisualizations();
+                        refreshVisualizations(false);
                         search0();
                         search1();
                         zoomToFit();
@@ -5278,6 +5902,14 @@ function (root, d3, forester, phyloXml) {
                 // "Switch to ..." matches the desktop's wording for this action.
                 items.push({separator: true});
                 items.push({label: 'Switch to Subtree', action: function () { switchToSubtree(d); }});
+                // the desktop's two collapse entries, with its enabling rules:
+                // the toggle for an internal node that is not the root and not
+                // in the unrooted layout; the subtree uncollapse only when
+                // something below is collapsed
+                items.push({label: 'Collapse/Uncollapse', disabled: !(collapseAllowed() && d.children),
+                    action: function () { collapseToggle(d); }});
+                items.push({label: 'Uncollapse Subtree', disabled: !hasCollapsedIn(d),
+                    action: function () { uncollapse(d); }});
             }
             if (d.parent && d.children) {
                 // redrawn with no transition: animating a swap sends the two
@@ -5335,7 +5967,7 @@ function (root, d3, forester, phyloXml) {
                         forester.deleteSubtree(tree, d);
                         _treeData = tree;
                         _basicTreeProperties = forester.collectBasicTreeProperties(_treeData);
-                        refreshVisualizations();
+                        refreshVisualizations(true);
                         search0();
                         search1();
                         zoomToFit();
@@ -5350,27 +5982,39 @@ function (root, d3, forester, phyloXml) {
     }
 
 
-    // After a permanent tree edit (subtree deletion), the candidates are
-    // re-derived from what is left; the user's choices survive when their
-    // fields do. Plain subtree NAVIGATION does not come through here -- a
-    // subtree keeps its parent tree's visualizations, so colours stay
-    // stable diving in and out.
-    // The view changed -- into or out of a subtree, or the tree was edited.
-    // Candidates, menus and legends are recomputed for what is displayed; the
-    // user's choices survive when their fields do (otherwise the menu goes
-    // back to default and the tree to plain ink -- honest, not a silent
-    // switch); colour/shape identities persist via the memory maps; and no
-    // checkbox moves, because a view change is not a user choice.
-    function refreshVisualizations() {
+    // The view changed (into or out of a subtree), or the tree was EDITED.
+    //
+    // A view never changes what is offered or chosen: the menu stands, the
+    // colour and shape stand, and only the summaries move -- legend rows and
+    // counts, the "no value" row, a numeric band -- to describe the tips on
+    // screen. Diving into a one-value clade coloured by Genus shows a
+    // one-row legend, not a grey tree.
+    //
+    // An edit re-derives the candidates from what is left, because it is a
+    // different tree now. The chosen fields are kept as long as they still
+    // carry a value on any remaining tip (visualizationCandidatesKeeping):
+    // the refusal rules decide what is OFFERED, never what is already
+    // chosen. Only a field with no value left anywhere falls back to default.
+    // No checkbox moves either way, because a view change is not a user choice.
+    function refreshVisualizations(edited) {
+        if (edited && _domain) {
+            _domain.palette = null;   // the tree changed: the domain names are dealt their colours again
+        }
         if (!_vis) {
             return;
         }
-        let colorId = _vis.colorId;
-        let shapeId = _vis.shapeId;
-        computeVisualizationCandidates(displayedRoot());
-        _vis.colorId = (colorId && _vis.byId[colorId]) ? colorId : null;
-        _vis.shapeId = (shapeId && _vis.byId[shapeId] && _vis.byId[shapeId].shape) ? shapeId : null;
-        populateVisualizationMenus();
+        if (edited) {
+            let colorId = _vis.colorId;
+            let shapeId = _vis.shapeId;
+            installCandidates(forester.visualizationCandidatesKeeping(_treeData,
+                [currentColorVis(), currentShapeVis()]));
+            _vis.colorId = (colorId && _vis.byId[colorId]) ? colorId : null;
+            _vis.shapeId = (shapeId && _vis.byId[shapeId] && _vis.byId[shapeId].shape) ? shapeId : null;
+        }
+        summarizeView(displayedRoot());
+        if (edited) {
+            populateVisualizationMenus();
+        }
         removeColorLegend(LEGEND_LABEL_COLOR);
         removeShapeLegend(LEGEND_NODE_SHAPE);
     }
@@ -5394,7 +6038,7 @@ function (root, d3, forester, phyloXml) {
         // part of the real spans (an anchor ratio taken from anything else
         // once flung the whole tree off-screen after three X+ presses).
         return {
-            horizontal: Math.max(1, _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve),
+            horizontal: Math.max(1, _displayWidth - calcMaxTreeLengthForDisplay() - _msaReserve - _domainReserve),
             vertical: Math.max(40, _displayHeight - (2 * TOP_AND_BOTTOM_BORDER_HEIGHT) - bottomOverlayReserve())
         };
     }
@@ -5626,7 +6270,7 @@ function (root, d3, forester, phyloXml) {
             updateMsaScrollbar(0, 1, 0);
             return;
         }
-        let tips = forester.getAllExternalNodes(_root).filter(function (d) {
+        let tips = displayedTips().filter(function (d) {
             return d.x !== undefined;
         }).sort(function (p, q) {
             return p.x - q.x;
@@ -6126,102 +6770,1658 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
-    // Search B starts hidden to keep the panel compact; one click (or a
-    // configured initial value) reveals it, and it stays revealed.
-    function revealSearchB() {
-        let wrap = byId(SEARCH_B_WRAP);
-        if (wrap) {
-            wrap.style.display = '';
-        }
-        let tgl = byId(SEARCH_B_TOGGLE);
-        if (tgl) {
-            tgl.style.display = 'none';
-        }
-        let f = byId(SEARCH_FIELD_1);
-        if (f) {
-            f.focus();
-        }
-    }
+    // ===================== Collapsed clades =====================
+    // Collapsing is DISPLAY state on the node (d.collapsed) and nothing
+    // else: forester never sees it, the writers never see it, and the data
+    // tree keeps every tip. The layout treats a collapsed node as a leaf and
+    // the viewer draws it as a wedge -- apex at the node, its two edges
+    // reaching the clade's nearest and farthest tips so its depth stays
+    // readable, filled in the clade's dominant Color-by colour, its height
+    // growing gently with the tip count -- named by the node's own name,
+    // else by the one Color-by value nearly all its tips share, else by the
+    // tips' common name prefix, always with the tip count, and with
+    // "[found/total]" while a search hits inside it (the desktop's touch).
+    // The CONTROLS are the desktop's exactly (Christian, 2026-09-13): the
+    // node menu's "Collapse/Uncollapse" and "Uncollapse Subtree", the
+    // uncollapse-all button in the tool row with the desktop's glyph, no
+    // collapsing in the unrooted layout, never the root. Every walk of the
+    // DISPLAYED tree goes through forEachDisplayed; a hidden tip keeps its
+    // stale position and must never be drawn from.
+    let _rowUnit = 0;           // px per row in the last rectangular layout
 
-    // ===================== Time axis =====================
-    // The desktop's time overlays, drawn beneath a rectangular PHYLOGRAM of
-    // a dated tree: the two-band ICS geologic axis with a "Ma before
-    // present" ruler (or a calendar-year ruler), HPD age bars on dated
-    // internal nodes and sepia fossil-range (FAD/LAD) bars on dated tips.
-    // The tree layout itself never changes -- time is an overlay anchored to
-    // the tree's own branch scale, so the bands line up with the branches
-    // even on a fossil-only tree whose youngest tip is far from the present.
+    function collapseAllowed() {
+        return !_state.unrootedDisplay;
+    }
 
-    function timeAxisShown() {
-        return _state.showTimeAxis === true && !radialDisplay()
-            && _state.phylogram === true
-            && _timeInfo !== null && _timeInfo.type !== null
-            && _basicTreeProperties.branchLengths === true;
+    function isCollapsed(d) {
+        return d.collapsed === true && !!d.children && collapseAllowed();
     }
 
-    function timeAxisBottomReserve() {
-        if (!timeAxisShown()) {
-            return 0;
+    // visits the displayed tree: a collapsed node, not what it hides
+    function forEachDisplayed(fn) {
+        if (!_root) {
+            return;
         }
-        return _timeInfo.type === 'geologic' ? TIME_GEO_RESERVE : TIME_CAL_RESERVE;
+        (function walk(n) {
+            fn(n);
+            if (n.children && !isCollapsed(n)) {
+                for (let i = 0; i < n.children.length; ++i) {
+                    walk(n.children[i]);
+                }
+            }
+        })(_root);
     }
 
-    // The MSA footer sits under the alignment band (right) and the time axis
-    // under the tree (left) -- horizontally disjoint, so the two reserves
-    // share the same strip rather than stacking.
-    function bottomOverlayReserve() {
-        // The navigation bar is fixed at the viewport bottom, so the track's
-        // own bottom rows (conservation, consensus, ruler) must end above it
-        // or the bar covers them -- the old bare slider did exactly that.
-        return Math.max(msaShown() ? MSA_BOTTOM_RESERVE + MSA_NAV_RESERVE : 0, timeAxisBottomReserve());
+    function displayedTips() {
+        let out = [];
+        forEachDisplayed(function (n) {
+            if (!n.children) {
+                out.push(n);
+            }
+        });
+        return out;
     }
 
-    function hexToRgbTriple(hex) {
-        let h = hex.charAt(0) === '#' ? hex.substring(1) : hex;
-        return [parseInt(h.substring(0, 2), 16), parseInt(h.substring(2, 4), 16),
-            parseInt(h.substring(4, 6), 16)];
+    function displayedLeafCount() {
+        let count = 0;
+        forEachDisplayed(function (n) {
+            if (!n.children || isCollapsed(n)) {
+                count++;
+            }
+        });
+        return count;
     }
 
-    function drawTimeOverlays() {
-        if (!_svgGroup) {
-            return;
-        }
-        _svgGroup.selectAll('g.aptx-time').remove();
-        if (_floatGroup) {
-            _floatGroup.selectAll('g.aptx-time-axis').remove();
-            delete _floatStrips['aptx-time-axis'];
-        }
-        _svgGroup.selectAll('g.aptx-timegrid').remove();
-        if (!timeAxisShown() || !_root || !_yScale) {
+    function hasCollapsedIn(node) {
+        let found = false;
+        forester.preOrderTraversal(node, function (n) {
+            if (n.collapsed === true && n.children) {
+                found = true;
+            }
+        });
+        return found;
+    }
+
+    function collapseToggle(d) {
+        if (!collapseAllowed() || !d.children || !d.parent || !d.parent.parent) {
             return;
         }
-        // recomputed per draw, so a subtree view calibrates to ITS oldest node
-        let info = forester.timeAxisInfo(_root);
-        if (!info.type) {
-            return;
+        d.collapsed = !d.collapsed;
+        calcMaxExtLabel();
+        scheduleUpdate(null, 0);
+    }
+
+    function uncollapse(node) {
+        forester.preOrderTraversal(node, function (n) {
+            n.collapsed = false;
+        });
+        calcMaxExtLabel();
+        scheduleUpdate(null, 0);
+    }
+
+    function uncollapseAll() {
+        if (_root) {
+            uncollapse(_root);
         }
-        let corr = Math.abs(_yScale(1) - _yScale(0));
-        if (!isFinite(corr) || corr <= 0) {
-            return;
+    }
+
+    function clearCollapsedFlags(node) {
+        forester.preOrderTraversal(node, function (n) {
+            n.collapsed = false;
+        });
+    }
+
+    // How tall a collapsed clade draws, in rows: 1 for a pair, growing with
+    // the logarithm of the tip count, capped so a huge clade does not eat
+    // the screen. The cluster layout's separation turns it into space.
+    function collapsedRows(d) {
+        let tips = forester.getAllExternalNodes(d).length;
+        return Math.max(1, Math.min(2.5, 1 + (Math.log2(Math.max(2, tips)) / 4)));
+    }
+
+    // The clade's name: the node's own; else the one Color-by value at least
+    // 95% of its tips share (a clade named "Bovine" while you look at
+    // hosts); else the tips' common name prefix, trailing separators
+    // dropped; else nothing.
+    function collapsedName(d) {
+        if (d.name && String(d.name).trim().length > 0) {
+            return String(d.name).trim();
         }
-        // Anchor the age->x mapping at the DEEPEST DATED TIP rather than the
-        // root: the root and its direct children carry a synthetic half-
-        // average branch length (see bl()), which would shift every band.
-        let anchor = null;
-        let maxTipX = 0;
-        forester.preOrderTraversal(_root, function (n) {
-            if (n.children) {
-                return;
-            }
-            if (n.y > maxTipX) {
-                maxTipX = n.y;
-            }
-            if (n.date && typeof n.date.value === 'number') {
-                if (!anchor || n.distToRoot > anchor.distToRoot) {
-                    anchor = n;
+        let tips = forester.getAllExternalNodes(d);
+        let vis = currentColorVis();
+        if (vis && tips.length > 0) {
+            let counts = Object.create(null);
+            tips.forEach(function (t) {
+                let v = forester.visualizationNodeValue(t, vis);
+                if (v !== null && v !== undefined) {
+                    counts[v] = (counts[v] || 0) + 1;
                 }
+            });
+            let best = null;
+            Object.keys(counts).forEach(function (v) {
+                if (best === null || counts[v] > counts[best]) {
+                    best = v;
+                }
+            });
+            if (best !== null && counts[best] >= 0.95 * tips.length) {
+                return best;
             }
-        });
+        }
+        let prefix = forester.commonNamePrefix(d, forester.nodeLabelProperty(_treeData));
+        prefix = prefix ? prefix.replace(/[\s_\-.:|/]+$/, '') : '';
+        return prefix.length >= 2 ? prefix : '';
+    }
+
+    function collapsedFoundCounts(d) {
+        let found = 0;
+        let total = 0;
+        forester.preOrderTraversal(d, function (n) {
+            if (!n.children) {
+                total++;
+                if (isNodeFound(n)) {
+                    found++;
+                }
+            }
+        });
+        return {found: found, total: total};
+    }
+
+    function collapsedLabel(d) {
+        let name = collapsedName(d);
+        let total = forester.getAllExternalNodes(d).length;
+        let text = (name ? name + ' · ' : '') + total + (total === 1 ? ' tip' : ' tips');
+        let hits = collapsedFoundCounts(d);
+        if (hits.found > 0) {
+            text += ' [' + hits.found + '/' + hits.total + ']';
+        }
+        return text;
+    }
+
+    // The colour most of the clade's tips wear under the current Color-by;
+    // the branch colour when nothing is coloured.
+    function collapsedColor(d) {
+        let vis = currentColorVis();
+        if (!vis || !_state.showVisualizations) {
+            return _state.branchColorDefault;
+        }
+        let counts = Object.create(null);
+        let best = null;
+        forester.getAllExternalNodes(d).forEach(function (t) {
+            let c = makeLabelColor(t);
+            if (c === _state.labelColorDefault) {
+                return;   // an uncoloured tip casts no vote
+            }
+            counts[c] = (counts[c] || 0) + 1;
+            if (best === null || counts[c] > counts[best]) {
+                best = c;
+            }
+        });
+        return best || _state.branchColorDefault;
+    }
+
+    // The wedge's base: the desktop's triangle (paintCollapsedNode with its
+    // default "collapsed with average height") stands on a VERTICAL base at
+    // the clade's average tip distance, so the shape is symmetric about the
+    // node's row and its depth still reads. A cladogram, where every leaf
+    // sits on the tip column, gives it one depth step.
+    function collapsedBase(d) {
+        if (_state.phylogram && _yScale) {
+            let sum = 0;
+            let n = 0;
+            forester.preOrderTraversal(d, function (t) {
+                if (!t.children && typeof t.distToRoot === 'number') {
+                    sum += t.distToRoot;
+                    ++n;
+                }
+            });
+            if (n > 0) {
+                return Math.max(d.y + 2, _yScale(sum / n));
+            }
+        }
+        return d.y + _cladogramUnit;
+    }
+
+    let _cladogramUnit = 0;   // one depth step of the last cladogram layout, px
+
+    // Draws every collapsed clade in the current node selection: a wedge
+    // path and a label as children of the node's own group, so they move
+    // with it, take its clicks and menu, and ride into exports.
+    function drawCollapsedClades(node) {
+        let wedge = node.selectAll('path.aptx-collapsed').data(function (d) {
+            return isCollapsed(d) ? [d] : [];
+        });
+        wedge.exit().remove();
+        wedge = wedge.enter().append('path').attr('class', 'aptx-collapsed').merge(wedge);
+        let label = node.selectAll('text.aptx-collapsed-label').data(function (d) {
+            return isCollapsed(d) ? [d] : [];
+        });
+        label.exit().remove();
+        label = label.enter().append('text').attr('class', 'aptx-collapsed-label').merge(label);
+
+        let fs = _state.externalNodeFontSize;
+        wedge.each(function (d) {
+            let color = collapsedColor(d);
+            let hits = collapsedFoundCounts(d);
+            let foundColor = hits.found > 0 ? getFoundColor(forester.getAllExternalNodes(d).filter(isNodeFound)[0]) : null;
+            let h = Math.max(6, collapsedRows(d) * _rowUnit * 0.82);
+            let base = collapsedBase(d);
+            let path;
+            if (radialDisplay()) {
+                // in the rotated frame: +x along the spoke from the node (the
+                // group's origin, already at the node's radius), the base
+                // across it -- a distance, never an absolute radius, or the
+                // wedge lands a whole radius further out than its label
+                let dr = radialRadius(base) - radialRadius(d.y);
+                path = 'M0,0 L' + dr + ',' + (-h / 2) + ' L' + dr + ',' + (h / 2) + ' Z';
+            } else {
+                let dx = base - d.y;
+                path = 'M0,0 L' + dx + ',' + (-h / 2) + ' L' + dx + ',' + (h / 2) + ' Z';
+            }
+            d3.select(this)
+                .attr('d', path)
+                .attr('transform', radialDisplay() ? 'rotate(' + labelAngleDeg(d) + ')' : null)
+                .style('fill', (hits.found > 0 && hits.found === hits.total) ? foundColor : color)
+                .style('fill-opacity', (hits.found > 0 && hits.found === hits.total) ? 0.45 : 0.22)
+                .style('stroke', foundColor || color)
+                .style('stroke-width', foundColor ? 1.5 : 1)
+                .style('stroke-opacity', 0.9)
+                .style('stroke-linejoin', 'round');
+        });
+        label.each(function (d) {
+            let base = collapsedBase(d);
+            let hits = collapsedFoundCounts(d);
+            let allFound = hits.found > 0 && hits.found === hits.total;
+            let ink = allFound ? getFoundColor(forester.getAllExternalNodes(d).filter(isNodeFound)[0]) : _state.labelColorDefault;
+            let t = d3.select(this)
+                .text(collapsedLabel(d))
+                .style('font', (allFound ? '600 ' : '') + fs + 'px ' + FONT_DEFAULTS)
+                .style('fill', ink)
+                .style('pointer-events', 'none');
+            if (radialDisplay()) {
+                let r = radialRadius(base) - radialRadius(d.y) + _state.nodeLabelGap;
+                let flip = labelFlip(d);
+                t.attr('transform', 'rotate(' + labelAngleDeg(d) + ') translate(' + r + ',0)' + (flip ? ' rotate(180)' : ''))
+                    .attr('text-anchor', flip ? 'end' : 'start')
+                    .attr('x', 0).attr('dy', '0.32em');
+            } else {
+                t.attr('transform', null)
+                    .attr('text-anchor', 'start')
+                    .attr('x', base - d.y + _state.nodeLabelGap)
+                    .attr('dy', (0.3 * fs) + 'px');
+            }
+        });
+    }
+
+    // ===================== Shareable views =====================
+    // A view is what a person made of a tree with the panel: the layout and
+    // display type, what is labelled, the colours, the searches, the clade
+    // they switched to, the ones they collapsed, the sizes. It is a plain
+    // object (getViewState), a short "key=value&..." string (encodeViewState
+    // / decodeViewState) that a page keeps in its URL hash, and a launch
+    // config key (view) that opens a tree straight into it; onViewChange
+    // tells the page whenever it changes. A node is named by its viewId, the
+    // launch-time preorder index, which ladderizing and re-rooting leave
+    // alone. NOT in a view: zoom and pan (a view opens fitted), the legend's
+    // position, the node selection.
+
+    const VIEW_SHOW_FLAGS = [
+        ['name', NODE_NAME_CB, 'showNodeName'],
+        ['taxonomy', TAXONOMY_CB, 'showTaxonomy'],
+        ['sequence', SEQUENCE_CB, 'showSequence'],
+        ['confidence', CONFIDENCE_VALUES_CB, 'showConfidenceValues'],
+        ['branchLength', BRANCH_LENGTH_VALUES_CB, 'showBranchLengthValues'],
+        ['external', EXTERNAL_LABEL_CB, 'showExternalLabels'],
+        ['internal', INTERNAL_LABEL_CB, 'showInternalLabels'],
+        ['nodeEvents', NODE_EVENTS_CB, 'showNodeEvents'],
+        ['branchEvents', BRANCH_EVENTS_CB, 'showBranchEvents'],
+        ['supportDots', SUPPORT_DOTS_CB, 'showSupportDots'],
+        ['shortNames', SHORTEN_NODE_NAME_CB, 'shortenNodeNames'],
+        ['autoHide', DYNAHIDE_CB, 'dynahide'],
+        ['visualizations', VIS_CB, 'showVisualizations'],
+        ['visualStyles', VISUAL_STYLES_CB, 'useVisualStyles']
+    ];
+    const RADIAL_ROTATION_STEP = Math.PI / 32;   // one press of the rotate buttons
+
+    // Launch-time preorder ids, given once per tree object: a tree shown
+    // again keeps them, so a shared view still names the same nodes.
+    function assignViewIds(phy) {
+        if (phy.viewId !== undefined) {
+            return;
+        }
+        let i = 0;
+        forester.preOrderTraversalAll(phy, function (n) {
+            n.viewId = i++;
+        });
+    }
+
+    function nodeByViewId(id) {
+        let found = null;
+        forester.preOrderTraversalAll(_root_const, function (n) {
+            if (found === null && n.viewId === id) {
+                found = n;
+            }
+        });
+        return found;
+    }
+
+    // The config's custom label checkboxes (nodeLabels) that are offered
+    function customLabelEntries() {
+        let out = [];
+        if (_nodeLabels) {
+            Object.keys(_nodeLabels).forEach(function (key) {
+                let v = _nodeLabels[key];
+                if (v && v.label && v.showButton === true && v.propertyRef && v.description) {
+                    out.push({key: key, entry: v});
+                }
+            });
+        }
+        return out;
+    }
+
+    function searchStateOf(idx) {
+        let spec = currentSearchSpec(idx);
+        let value = (spec.value === null || spec.value === undefined) ? '' : String(spec.value);
+        if (value.trim().length === 0) {
+            return null;
+        }
+        let q = {field: spec.field.label, mode: spec.mode, value: value};
+        if (spec.mode === 'range' && spec.value2) {
+            q.value2 = String(spec.value2);
+        }
+        return q;
+    }
+
+    function getViewState() {
+        let s = {};
+        if (_treeIndex > 0) {
+            s.tree = _treeIndex;
+        }
+        s.layout = _state.unrootedDisplay ? 'unrooted' : (_state.circularDisplay ? 'circular' : 'rectangular');
+        s.display = _state.phylogram ? (_state.alignPhylogram ? 'aligned' : 'phylogram') : 'cladogram';
+        if (_viewOps.root) {
+            s.root = _viewOps.root;
+        }
+        if (_viewOps.order) {
+            s.order = _viewOps.order;
+        }
+        if (_in_subtree && _root && _root.children && _root.children[0] && _root.children[0].viewId !== undefined) {
+            s.subtree = _root.children[0].viewId;
+        }
+        let collapsed = [];
+        forester.preOrderTraversalAll(_root_const, function (n) {
+            if (n.collapsed && n.viewId !== undefined) {
+                collapsed.push(n.viewId);
+            }
+        });
+        if (collapsed.length > 0) {
+            s.collapsed = collapsed;
+        }
+        s.colorBy = (_vis && _vis.colorId) || 'none';
+        if (_vis && _vis.shapeId) {
+            s.shapeBy = _vis.shapeId;
+        }
+        s.show = VIEW_SHOW_FLAGS.filter(function (f) {
+            return _state[f[2]] === true;
+        }).map(function (f) {
+            return f[0];
+        });
+        customLabelEntries().forEach(function (c) {
+            if (c.entry.selected === true) {
+                s.show.push('custom:' + c.key);
+            }
+        });
+        s.font = _state.externalNodeFontSize;
+        s.node = _state.nodeSizeDefault;
+        s.branch = _state.branchWidthDefault;
+        let rotation = Math.round(_radialRotation / RADIAL_ROTATION_STEP);
+        if (rotation !== 0) {
+            s.rotation = rotation;
+        }
+        if (_radialLabelsHorizontal) {
+            s.horizontalLabels = true;
+        }
+        if (_basicTreeProperties.alignedMolSeqs === true && _basicTreeProperties.maxMolSeqLength > 0) {
+            s.msa = _state.showMsa === true;
+        }
+        if (_basicTreeProperties.domainArchitectures === true) {
+            s.domains = _state.showDomainArchitectures === true;
+            s.domainLabels = _state.domainLabels;
+            s.domainGlow = _state.domainGlow === true;
+            s.domainEvalue = _state.domainEvalueExponent;
+        }
+        if (_timeInfo && _timeInfo.type) {
+            s.timeAxis = _state.showTimeAxis === true;
+            s.timeGrid = _state.timeAxisGrid === true;
+        }
+        let a = searchStateOf(0);
+        let b = searchStateOf(1);
+        if (a) {
+            s.searchA = a;
+        }
+        if (b) {
+            s.searchB = b;
+        }
+        if (a && b) {
+            let combine = getValue(SEARCH_COMBINE_SELECT);
+            if (combine === 'and' || combine === 'or') {
+                s.combine = combine;
+            }
+        }
+        if (_state.searchIsCaseSensitive === true) {
+            s.matchCase = true;
+        }
+        if (_state.searchNegateResult === true) {
+            s.inverse = true;
+        }
+        return s;
+    }
+
+    // Opens a view: the tree operations first (midpoint rooting, the
+    // ladderize direction), then the clade and the collapsed clades by node
+    // id, then everything the panel shows. A key the view leaves out keeps
+    // its current value, except the two searches, which an empty view
+    // clears (a view with no search has none). `initial` is the launch --
+    // initialize() draws afterwards; otherwise the tree is redrawn and
+    // fitted. Anything not understood, a hand-edited hash or a view of some
+    // other tree, is skipped rather than guessed at.
+    function applyViewState(s, initial) {
+        if (!s || typeof s !== 'object') {
+            return;
+        }
+        if (!initial && Number.isInteger(s.tree) && s.tree !== _treeIndex && s.tree >= 0 && s.tree < _trees.length) {
+            let cfg = Object.assign({}, _launchConfig || {});
+            cfg.view = s;
+            launchInto(_container, _trees, s.tree, cfg);
+            return;
+        }
+        if (s.root === 'midpoint' && _viewOps.root !== 'midpoint'
+            && (_treeData.rerootable === undefined || _treeData.rerootable === true)) {
+            forester.midpointRoot(_root_const);
+            _viewOps.root = 'midpoint';
+        }
+        if (s.order === 'asc' || s.order === 'desc') {
+            ladderizeSubtree(_root_const, s.order === 'asc', false);
+            _viewOps.order = s.order;
+            if (!_treeFn.visData) {
+                _treeFn.visData = {};
+            }
+            _treeFn.visData.ladderize = s.order !== 'asc';   // the next press goes the other way
+        }
+        _root = _root_const;
+        _in_subtree = false;
+        clearCollapsedFlags(_root_const);
+        if (Number.isInteger(s.subtree)) {
+            let node = nodeByViewId(s.subtree);
+            if (node && node.children && node.parent && node.parent.parent) {
+                _in_subtree = true;
+                _root = {children: [node], x: 0, x0: 0, y: 0, y0: 0};
+            }
+        }
+        if (Array.isArray(s.collapsed) && s.collapsed.length > 0) {
+            let ids = new Set(s.collapsed);
+            forester.preOrderTraversalAll(_root_const, function (n) {
+                if (n.children && n.parent && n.parent.parent && ids.has(n.viewId)) {
+                    n.collapsed = true;
+                }
+            });
+        }
+        _basicTreeProperties = forester.collectBasicTreeProperties(_root);
+
+        if (s.layout === 'rectangular' || s.layout === 'circular' || s.layout === 'unrooted') {
+            _state.circularDisplay = s.layout === 'circular';
+            _state.unrootedDisplay = s.layout === 'unrooted';
+        }
+        if (s.display === 'phylogram' || s.display === 'aligned' || s.display === 'cladogram') {
+            let measured = _basicTreeProperties.branchLengths === true;
+            _state.phylogram = measured && s.display !== 'cladogram';
+            _state.alignPhylogram = measured && s.display === 'aligned' && !_state.unrootedDisplay;
+        }
+        if (Array.isArray(s.show)) {
+            let on = new Set(s.show);
+            VIEW_SHOW_FLAGS.forEach(function (f) {
+                _state[f[2]] = on.has(f[0]);
+            });
+            customLabelEntries().forEach(function (c) {
+                c.entry.selected = on.has('custom:' + c.key);
+            });
+        }
+        if (isFinite(s.font)) {
+            setFontSizes(Number(s.font));
+        }
+        if (isFinite(s.node)) {
+            _state.nodeSizeDefault = Math.min(NODE_SIZE_MAX, Math.max(NODE_SIZE_MIN, Number(s.node)));
+        }
+        if (isFinite(s.branch)) {
+            _state.branchWidthDefault = Math.min(BRANCH_WIDTH_MAX, Math.max(BRANCH_WIDTH_MIN, Number(s.branch)));
+        }
+        if (Number.isInteger(s.rotation)) {
+            _radialRotation = (s.rotation * RADIAL_ROTATION_STEP) % (2 * Math.PI);
+        }
+        if (typeof s.horizontalLabels === 'boolean') {
+            _radialLabelsHorizontal = s.horizontalLabels;
+        }
+        if (typeof s.msa === 'boolean') {
+            _state.showMsa = s.msa;
+        }
+        if (typeof s.domains === 'boolean') {
+            _state.showDomainArchitectures = s.domains;
+        }
+        if (s.domainLabels === 'none' || s.domainLabels === 'domains' || s.domainLabels === 'legend') {
+            _state.domainLabels = s.domainLabels;
+        }
+        if (typeof s.domainGlow === 'boolean') {
+            _state.domainGlow = s.domainGlow;
+        }
+        if (Number.isInteger(s.domainEvalue) && s.domainEvalue >= forester.DOMAIN_EVALUE_EXPONENT_MIN
+            && s.domainEvalue <= forester.DOMAIN_EVALUE_EXPONENT_MAX && s.domainEvalue !== _state.domainEvalueExponent) {
+            _state.domainEvalueExponent = s.domainEvalue;
+            if (_domain) {
+                _domain.palette = null;   // the drawn set changed: the palette is dealt again
+            }
+        }
+        if (typeof s.timeAxis === 'boolean') {
+            _state.showTimeAxis = s.timeAxis;
+        }
+        if (typeof s.timeGrid === 'boolean') {
+            _state.timeAxisGrid = s.timeGrid;
+        }
+        if (!radialDisplay()) {
+            _radialLabelsHorizontal = false;
+        } else if (_state.showDomainArchitectures && _basicTreeProperties.domainArchitectures) {
+            _radialLabelsHorizontal = false;   // the domain boxes ride the spokes, so the labels must too
+        }
+        if (_vis) {
+            if (s.colorBy === 'none') {
+                _vis.colorId = null;
+            } else if (s.colorBy && _vis.byId[s.colorBy]) {
+                _vis.colorId = s.colorBy;
+                _state.showVisualizations = true;
+            }
+            if (s.shapeBy === 'none') {
+                _vis.shapeId = null;
+            } else if (s.shapeBy && _vis.byId[s.shapeBy] && _vis.byId[s.shapeBy].shape) {
+                _vis.shapeId = s.shapeBy;
+                _state.showVisualizations = true;
+            }
+        }
+        _state.searchIsCaseSensitive = s.matchCase === true;
+        _state.searchNegateResult = s.inverse === true;
+        applySearchState(0, s.searchA);
+        applySearchState(1, s.searchB);
+        setValue(SEARCH_COMBINE_SELECT,
+            (s.searchA && s.searchB && (s.combine === 'and' || s.combine === 'or')) ? s.combine : 'independent');
+
+        refreshVisualizations(false);
+        resetVis();
+        syncViewControls();
+        if (!initial) {
+            runSearches();
+            zoomToFit();
+        }
+    }
+
+    // One search box from its view state: the field by its label, the mode
+    // when the field offers it, the value(s); nothing given clears the box.
+    function applySearchState(idx, q) {
+        let fieldSel = byId(idx === 0 ? SEARCH_FIELD_SELECT_0 : SEARCH_FIELD_SELECT_1);
+        let modeSel = byId(idx === 0 ? SEARCH_MODE_SELECT_0 : SEARCH_MODE_SELECT_1);
+        if (!fieldSel || !modeSel) {
+            return;
+        }
+        let want = (q && typeof q === 'object') ? q : {};
+        let fi = want.field ? _searchFields.findIndex(function (f) {
+            return f.label === want.field;
+        }) : -1;
+        fieldSel.value = String(fi >= 0 ? fi : 0);
+        populateSearchModeMenu(idx);
+        if (want.mode && Array.from(modeSel.options).some(function (o) { return o.value === want.mode; })) {
+            modeSel.value = want.mode;
+        }
+        setValue(idx === 0 ? SEARCH_FIELD_0 : SEARCH_FIELD_1, want.value ? String(want.value) : '');
+        setValue(idx === 0 ? SEARCH_VALUE2_0 : SEARCH_VALUE2_1, want.value2 ? String(want.value2) : '');
+        updateSearchValue2Visibility(idx);
+        updateSearchAutocomplete(idx);
+        if (idx === 1 && want.value) {
+            showSearchB();
+        }
+    }
+
+    // The panel's controls from the state, after applyViewState
+    function syncViewControls() {
+        setDisplayTypeButtons();
+        syncZoomRowButtons();
+        VIEW_SHOW_FLAGS.forEach(function (f) {
+            setCheckboxValue(f[1], _state[f[2]] === true);
+        });
+        customLabelEntries().forEach(function (c) {
+            if (c.entry.cb_id) {
+                setCheckboxValue(c.entry.cb_id, c.entry.selected === true);
+            }
+        });
+        setCheckboxValue(MSA_CB, _state.showMsa === true);
+        setCheckboxValue(TIME_AXIS_CB, _state.showTimeAxis === true);
+        setCheckboxValue(TIME_GRID_CB, _state.timeAxisGrid === true);
+        setCheckboxValue(DOMAIN_GLOW_CB, _state.domainGlow === true);
+        setValue(DOMAIN_LABELS_SELECT, _state.domainLabels);
+        syncDomainControls();
+        setSliderValue(FONT_SIZE_SLIDER, _state.externalNodeFontSize);
+        setSliderValue(NODE_SIZE_SLIDER, _state.nodeSizeDefault);
+        setSliderValue(BRANCH_WIDTH_SLIDER, _state.branchWidthDefault);
+        setSelectMenuValue(LABEL_COLOR_SELECT_MENU, (_vis && _vis.colorId) || DEFAULT);
+        setSelectMenuValue(NODE_SHAPE_SELECT_MENU, (_vis && _vis.shapeId) || DEFAULT);
+        setCheckboxValue(SEARCH_OPTIONS_CASE_SENSITIVE_CB, _state.searchIsCaseSensitive === true);
+        setCheckboxValue(SEARCH_OPTIONS_NEGATE_RES_CB, _state.searchNegateResult === true);
+        syncLadderizeGlyph();
+    }
+
+    // The ladderize glyph shows the direction the NEXT press will use.
+    function syncLadderizeGlyph() {
+        let orderBtn = byId(LADDERIZE_BUTTON);
+        if (orderBtn) {
+            let next = !(_treeFn && _treeFn.visData && _treeFn.visData.ladderize === false);
+            orderBtn.innerHTML = makeGlyph(next ? 'ladderize_asc' : 'ladderize_desc');
+        }
+    }
+
+    // onViewChange: once per settled redraw, only when the view actually
+    // changed. The launch's own view is recorded and not reported -- the
+    // page put the tree up and knows what it asked for -- but a relaunch
+    // that changed it (the tree picker) is reported like any change.
+    function noteViewChange() {
+        if (_initializing || !_settings || typeof _settings.onViewChange !== 'function' || _viewNotifyPending) {
+            return;
+        }
+        _viewNotifyPending = true;
+        let seq = _launchSeq;
+        setTimeout(function () {
+            _viewNotifyPending = false;
+            if (seq !== _launchSeq || !_root || !_container) {
+                return;
+            }
+            reportView(false);
+        }, 0);
+    }
+
+    function settleViewNotification() {
+        if (_settings && typeof _settings.onViewChange === 'function') {
+            reportView(_lastViewEncoded === undefined);
+        }
+    }
+
+    function reportView(silent) {
+        let state = getViewState();
+        let encoded = archaeopteryx.encodeViewState(state);
+        if (encoded === _lastViewEncoded) {
+            return;
+        }
+        _lastViewEncoded = encoded;
+        if (silent) {
+            return;
+        }
+        try {
+            _settings.onViewChange(state, encoded);
+        } catch (e) {
+            console.error(ERROR + 'onViewChange threw: ' + (e && e.message ? e.message : e));
+        }
+    }
+
+    // The string form: "key=value&key=value", the values URL-encoded but
+    // with ':' and ',' kept readable (refs and lists) and spaces as '+'.
+    // Lists are comma-joined, booleans 1 / 0, the two searches flattened
+    // to a / af / am / a2 and b / bf / bm / b2. Made for a URL hash, where
+    // none of these characters needs escaping.
+    const VIEW_TEXT_KEYS = ['layout', 'display', 'order', 'root', 'colorBy', 'shapeBy', 'domainLabels', 'combine'];
+    const VIEW_INT_KEYS = ['tree', 'subtree', 'rotation', 'domainEvalue'];
+    const VIEW_NUMBER_KEYS = ['font', 'node', 'branch'];
+    const VIEW_BOOL_KEYS = ['horizontalLabels', 'msa', 'domains', 'domainGlow', 'timeAxis', 'timeGrid', 'matchCase', 'inverse'];
+    const VIEW_SEARCH_KEYS = [['searchA', 'a'], ['searchB', 'b']];
+
+    function encodeViewValue(v) {
+        return encodeURIComponent(String(v)).replace(/%3A/gi, ':').replace(/%2C/gi, ',').replace(/%20/g, '+');
+    }
+
+    function decodeViewValue(v) {
+        try {
+            return decodeURIComponent(String(v).replace(/\+/g, '%20'));
+        } catch {
+            return '';
+        }
+    }
+
+    archaeopteryx.encodeViewState = function (state) {
+        if (!state || typeof state !== 'object') {
+            return '';
+        }
+        let parts = [];
+        let put = function (k, v) {
+            if (v !== undefined && v !== null && v !== '') {
+                parts.push(k + '=' + encodeViewValue(v));
+            }
+        };
+        VIEW_INT_KEYS.concat(VIEW_TEXT_KEYS, VIEW_NUMBER_KEYS).forEach(function (k) {
+            put(k, state[k]);
+        });
+        if (Array.isArray(state.show)) {
+            parts.push('show=' + state.show.map(encodeViewValue).join(','));   // an empty list is a fact: nothing shown
+        }
+        if (Array.isArray(state.collapsed) && state.collapsed.length > 0) {
+            put('collapsed', state.collapsed.join(','));
+        }
+        VIEW_BOOL_KEYS.forEach(function (k) {
+            if (typeof state[k] === 'boolean') {
+                put(k, state[k] ? 1 : 0);
+            }
+        });
+        VIEW_SEARCH_KEYS.forEach(function (sk) {
+            let q = state[sk[0]];
+            if (q && typeof q === 'object' && q.value) {
+                put(sk[1], q.value);
+                put(sk[1] + 'f', q.field);
+                put(sk[1] + 'm', q.mode);
+                put(sk[1] + '2', q.value2);
+            }
+        });
+        return parts.join('&');
+    };
+
+    archaeopteryx.decodeViewState = function (text) {
+        if (text === undefined || text === null) {
+            return null;
+        }
+        let s = String(text).replace(/^#/, '');
+        if (s.length === 0) {
+            return null;
+        }
+        let raw = {};
+        s.split('&').forEach(function (pair) {
+            let eq = pair.indexOf('=');
+            if (eq > 0) {
+                raw[decodeViewValue(pair.substring(0, eq))] = decodeViewValue(pair.substring(eq + 1));
+            }
+        });
+        let state = {};
+        VIEW_TEXT_KEYS.forEach(function (k) {
+            if (raw[k] !== undefined && raw[k] !== '') {
+                state[k] = raw[k];
+            }
+        });
+        VIEW_INT_KEYS.forEach(function (k) {
+            if (raw[k] !== undefined && /^-?\d+$/.test(raw[k])) {
+                state[k] = parseInt(raw[k], 10);
+            }
+        });
+        VIEW_NUMBER_KEYS.forEach(function (k) {
+            let n = parseFloat(raw[k]);
+            if (isFinite(n)) {
+                state[k] = n;
+            }
+        });
+        VIEW_BOOL_KEYS.forEach(function (k) {
+            if (raw[k] === '1' || raw[k] === '0') {
+                state[k] = raw[k] === '1';
+            }
+        });
+        if (raw.show !== undefined) {
+            state.show = raw.show.split(',').filter(function (x) {
+                return x.length > 0;
+            });
+        }
+        if (raw.collapsed !== undefined) {
+            state.collapsed = raw.collapsed.split(',').filter(function (x) {
+                return /^\d+$/.test(x);
+            }).map(function (x) {
+                return parseInt(x, 10);
+            });
+        }
+        VIEW_SEARCH_KEYS.forEach(function (sk) {
+            let p = sk[1];
+            if (raw[p]) {
+                let q = {value: raw[p]};
+                if (raw[p + 'f']) {
+                    q.field = raw[p + 'f'];
+                }
+                if (raw[p + 'm']) {
+                    q.mode = raw[p + 'm'];
+                }
+                if (raw[p + '2']) {
+                    q.value2 = raw[p + '2'];
+                }
+                state[sk[0]] = q;
+            }
+        });
+        return Object.keys(state).length > 0 ? state : null;
+    };
+
+    // ===================== Keyboard shortcuts =====================
+    // Ctrl on Windows and Linux, Cmd on macOS (Christian, 2026-09-13: "Ctrl/Cmd
+    // combos are better"). The letters follow the desktop where it has the
+    // action (its Alt+O order, Alt+U uncollapse all, Alt+E expand, Cmd+0 fit,
+    // Cmd+G / Cmd+Shift+G next / previous hit); the layout, display type
+    // and time-axis keys are ours. Combos the browser reserves (new tab,
+    // close, tab switching, and on macOS the screenshot keys) are avoided,
+    // and the few browser functions that are overridden (page zoom, find
+    // next) matter little on a page that is one tree. No key for rooting,
+    // by decision. Plain keys stay as they were: Esc / Home reset, O moves
+    // the overview, PageUp / PageDown size the font. Inside a text box only
+    // the combos that cannot interfere with typing fire.
+
+    const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || '');
+    const SHORTCUTS_DIALOG = 'aptx_shortcuts';
+
+    // key: what e.key reads (letters lower-case); shift: whether Shift is
+    // held; typing: the combo also fires from inside a text box
+    const SHORTCUTS = [
+        {key: '0', label: '0', what: 'Fit the tree to the window', run: function () { zoomToFit(); }, typing: true},
+        {key: '=', label: '+', aliases: ['+'], what: 'Zoom in', run: function () { zoomInY(); if (!radialDisplay()) { zoomInX(); } }, typing: true},
+        {key: '-', label: '−', aliases: ['_'], what: 'Zoom out', run: function () { zoomOutY(); if (!radialDisplay()) { zoomOutX(); } }, typing: true},
+        {key: 'arrowup', label: '↑', shift: true, what: 'Zoom in vertically', run: function () { zoomInY(); }},
+        {key: 'arrowdown', label: '↓', shift: true, what: 'Zoom out vertically', run: function () { zoomOutY(); }},
+        {key: 'arrowright', label: '→', shift: true, what: 'Zoom in horizontally (circular: rotate)', run: function () { zoomInX(); }},
+        {key: 'arrowleft', label: '←', shift: true, what: 'Zoom out horizontally (circular: rotate back)', run: function () { zoomOutX(); }},
+        {key: 'e', label: 'E', shift: true, what: 'Expand vertically until the labels fit', run: function () { zoomToExpandY(); }},
+        {key: 'l', label: 'L', shift: true, what: 'Next layout: rectangular, circular, unrooted', run: cycleLayout},
+        {key: 'd', label: 'D', shift: true, what: 'Next display type: phylogram, aligned, cladogram', run: cycleDisplayType},
+        {key: 'x', label: 'X', shift: true, what: 'Time axis on / off', run: toggleTimeAxis},
+        {key: 'o', label: 'O', shift: true, what: 'Ladderize (order the tree)', run: function () { ladderizeButtonPressed(); }},
+        {key: 'u', label: 'U', shift: true, what: 'Uncollapse every clade', run: function () { uncollapseAll(); }},
+        {key: 'f', label: 'F', what: 'Go to the search box', run: focusSearch, typing: true},
+        {key: 'g', label: 'G', what: 'Next search hit', run: function () { stepToFoundNode(1); }, typing: true},
+        {key: 'g', label: 'G', shift: true, what: 'Previous search hit', run: function () { stepToFoundNode(-1); }, typing: true},
+        {key: ',', label: '<', aliases: ['<'], shift: true, what: 'Previous tree of the file', run: function () { stepTree(-1); }},
+        {key: '.', label: '>', aliases: ['>'], shift: true, what: 'Next tree of the file', run: function () { stepTree(1); }},
+        {key: '/', label: '/', aliases: ['?'], what: 'This list', run: showShortcutsDialog, typing: true}
+    ];
+
+    function shortcutMatches(sc, e) {
+        let k = (e.key || '').toLowerCase();
+        if (k !== sc.key && !(sc.aliases && sc.aliases.indexOf(e.key) >= 0)) {
+            return false;
+        }
+        return !!sc.shift === !!e.shiftKey;
+    }
+
+    // The one document-level handler for the combos: keydown, so the
+    // browser's own action is stopped before it runs.
+    function shortcutKeyDown(e) {
+        let mod = IS_MAC ? (e.metaKey && !e.ctrlKey) : (e.ctrlKey && !e.metaKey);
+        if (!mod || e.altKey || !_root) {
+            return;
+        }
+        let typing = isTypingTarget(e.target);
+        for (let i = 0; i < SHORTCUTS.length; ++i) {
+            let sc = SHORTCUTS[i];
+            if (shortcutMatches(sc, e)) {
+                if (typing && !sc.typing) {
+                    return;
+                }
+                e.preventDefault();
+                sc.run();
+                return;
+            }
+        }
+    }
+
+    function cycleLayout() {
+        let next = _state.unrootedDisplay ? 'rectangular' : (_state.circularDisplay ? 'unrooted' : 'circular');
+        setCheckboxValue(LAYOUT_RECT_BUTTON, next === 'rectangular');
+        setCheckboxValue(LAYOUT_CIRC_BUTTON, next === 'circular');
+        setCheckboxValue(LAYOUT_UNROOTED_BUTTON, next === 'unrooted');
+        layoutButtonClicked();
+    }
+
+    // Phylogram, aligned phylogram, cladogram -- skipping what the tree or
+    // the layout rules out (no branch lengths: cladogram only; unrooted has
+    // no aligned phylogram).
+    function cycleDisplayType() {
+        let measured = _basicTreeProperties && _basicTreeProperties.branchLengths === true;
+        if (!measured) {
+            toCladegram();
+            return;
+        }
+        if (_state.phylogram && !_state.alignPhylogram) {
+            if (_state.unrootedDisplay) {
+                toCladegram();
+            } else {
+                toAlignedPhylogram();
+            }
+        } else if (_state.phylogram) {
+            toCladegram();
+        } else {
+            toPhylogram();
+        }
+    }
+
+    // The Time Axis checkbox's toggle; when the distance / time tree switch
+    // arrives it takes over this key.
+    function toggleTimeAxis() {
+        let cb = byId(TIME_AXIS_CB);
+        if (!cb || cb.disabled) {
+            return;
+        }
+        cb.checked = !cb.checked;
+        timeAxisCbClicked();
+    }
+
+    function focusSearch() {
+        let f = byId(SEARCH_FIELD_0);
+        if (f) {
+            f.focus();
+            f.select();
+        }
+    }
+
+    function stepTree(delta) {
+        let i = _treeIndex + delta;
+        if (i >= 0 && i < _trees.length) {
+            showTree(i);
+        }
+    }
+
+    function shortcutLabel(sc) {
+        let parts = [];
+        if (IS_MAC) {
+            parts.push('⌘');
+            if (sc.shift) {
+                parts.push('⇧');
+            }
+        } else {
+            parts.push('Ctrl');
+            if (sc.shift) {
+                parts.push('Shift');
+            }
+        }
+        parts.push(sc.label);
+        return parts;
+    }
+
+    function keyChips(parts) {
+        let holder = document.createElement('span');
+        holder.className = 'aptx-keys';
+        parts.forEach(function (p) {
+            let kbd = document.createElement('kbd');
+            kbd.className = 'aptx-kbd';
+            kbd.textContent = p;
+            holder.appendChild(kbd);
+        });
+        return holder;
+    }
+
+    // The cheat sheet: every combo above, then the plain keys.
+    function showShortcutsDialog() {
+        let shell = makeDialogShell(SHORTCUTS_DIALOG, 'Keyboard shortcuts', 400);
+        shell.body.classList.add('aptx-shortcuts');
+        let rows = SHORTCUTS.map(function (sc) {
+            return [shortcutLabel(sc), sc.what];
+        }).concat([
+            [['Esc'], 'Back to the whole tree, the launch view'],
+            [['O'], 'Move the overview to the next corner'],
+            [['PageUp'], 'Larger font'],
+            [['PageDown'], 'Smaller font']
+        ]);
+        rows.forEach(function (row) {
+            let line = document.createElement('div');
+            line.className = 'aptx-dialog-line';
+            let key = document.createElement('span');
+            key.className = 'aptx-dialog-key';
+            key.appendChild(keyChips(row[0]));
+            let val = document.createElement('span');
+            val.className = 'aptx-dialog-val';
+            val.textContent = row[1];
+            line.appendChild(key);
+            line.appendChild(val);
+            shell.body.appendChild(line);
+        });
+        let note = document.createElement('p');
+        note.className = 'aptx-shortcuts-note';
+        note.textContent = 'The mouse wheel zooms; with Shift it zooms vertically only, with Shift+Alt horizontally, with Ctrl+Shift it sizes the font.';
+        shell.body.appendChild(note);
+        shell.dialog.showModal();
+    }
+
+    // ===================== Protein domain architectures =====================
+    // The desktop's domain display, ported from its RenderableDomainArchitecture
+    // and TreePanel (the spec is section D1 of the repo's TODO.md). Each tip's
+    // architecture is a grey backbone of L residues with a rounded box per
+    // domain the E-value threshold admits: in one aligned column past the
+    // labels in the rectangular layout, riding the tip's spoke in the radial
+    // ones. One scale for the whole tree -- f px per residue, from the track
+    // width and the longest architecture -- so lengths compare across tips.
+    // Which domains, where, which colour and which legend rows are forester's
+    // (tested against the desktop's numbers); this is the SVG, the legend
+    // card and the controls. The boxes take no pointer events: nothing to
+    // hover or click, as on the desktop.
+
+    function domainsShown() {
+        return _state.showDomainArchitectures === true
+            && _basicTreeProperties.domainArchitectures === true
+            && _basicTreeProperties.maxDomainArchitectureLength > 0
+            && _state.showExternalLabels
+            // in a radial layout the boxes ride the spokes, so only radial
+            // labels go with them
+            && (!radialDisplay() || !_radialLabelsHorizontal);
+    }
+
+    // The track width W of the rectangular layouts: a quarter of the
+    // viewport at first use (the layout's width, if smaller). The radial
+    // layouts keep a width of their own, starting at the smaller of W and a
+    // fifth of the radius, so a long architecture does not run off the
+    // circle at first sight. d+ / d- scale whichever width the current
+    // layout uses by 1.2 / 0.8 and stop at 2000 / 20. (The desktop instead
+    // caps the drawn width at that fifth of the radius on every redraw,
+    // which leaves its buttons stepping a number the cap then discards --
+    // Christian: "all buttons should work as expected".)
+    function domainRectangularWidth() {
+        if (!_domain.width) {
+            let vp = svgSize();
+            let vw = Math.min(_displayWidth, (vp && vp.w) ? vp.w : _displayWidth);
+            _domain.width = Math.max(DOMAIN_WIDTH_MIN, Math.round(vw * DOMAIN_WIDTH_VIEWPORT_FRACTION));
+        }
+        return _domain.width;
+    }
+
+    function domainTrackWidth() {
+        if (!radialDisplay()) {
+            return domainRectangularWidth();
+        }
+        if (!_domain.radialWidth) {
+            let r = _state.circularDisplay ? (_radial ? _radial.maxRad : 0) : (_unroot ? _unroot.maxRad : 0);
+            if (!(r > 0)) {
+                return domainRectangularWidth();   // no radius yet (before the first radial draw)
+            }
+            _domain.radialWidth = Math.max(DOMAIN_WIDTH_MIN, Math.min(domainRectangularWidth(), DOMAIN_RADIAL_WIDTH_FRACTION * r));
+        }
+        return _domain.radialWidth;
+    }
+
+    function setDomainTrackWidth(w) {
+        if (radialDisplay()) {
+            _domain.radialWidth = w;
+        } else {
+            _domain.width = w;
+        }
+    }
+
+    function domainEffectiveWidth() {
+        return domainTrackWidth();
+    }
+
+    // px per residue, one factor for every architecture on the tree; Lmax
+    // counts every domain whatever its E-value, so the threshold never
+    // rescales the tracks
+    function domainScale() {
+        return (domainEffectiveWidth() / _basicTreeProperties.maxDomainArchitectureLength) * DOMAIN_SCALE_HEADROOM;
+    }
+
+    // The room the longest tip label takes: the same estimate the layout is
+    // sized against (there are no font metrics in the model).
+    function domainLabelSpace() {
+        return (_maxLabelLength * _state.externalNodeFontSize * LABEL_SIZE_CALC_FACTOR) + LABEL_SIZE_CALC_ADDITION;
+    }
+
+    // The rectangular layout reserves the tracks' column so the tree and
+    // labels compress to make room, as the alignment track does; the radial
+    // layouts fit the tracks into the ring instead (fitRadialExtent).
+    function domainReserve() {
+        if (!domainsShown() || radialDisplay()) {
+            return 0;
+        }
+        return DOMAIN_TRACK_START_GAP + domainTrackWidth() + DOMAIN_TRACK_END_GAP;
+    }
+
+    function domainRadialExtent() {
+        if (!domainsShown() || !radialDisplay()) {
+            return 0;
+        }
+        return DOMAIN_RADIAL_GAP + domainEffectiveWidth() + DOMAIN_TRACK_END_GAP;
+    }
+
+    // Colours: the names the threshold admits over the WHOLE tree, sorted by
+    // code unit, take the palette in order. Dealt at load, after an edit and
+    // whenever the threshold changes (the drawn set changes then, so colours
+    // can shift); a name met later takes the next unused colour and keeps
+    // it. Never derived from the name's characters -- that let SH2 and SH3
+    // collide on the desktop.
+    function domainPalette() {
+        if (!_domain.palette) {
+            let names = forester.domainSummary(forester.getTreeRoot(_treeData), _state.domainEvalueExponent).names;
+            _domain.palette = Object.create(null);
+            names.forEach(function (name, i) {
+                _domain.palette[name] = i;
+            });
+            _domain.next = names.length;
+        }
+        return _domain.palette;
+    }
+
+    function domainColor(name) {
+        if (!name) {
+            return forester.DOMAIN_UNNAMED_COLOR;
+        }
+        let palette = domainPalette();
+        if (palette[name] === undefined) {
+            palette[name] = _domain.next++;
+        }
+        return forester.domainQualitativeColor(palette[name]);
+    }
+
+    function domainBoxHeight(pitch) {
+        return Math.max(DOMAIN_BOX_MIN_H, Math.min(DOMAIN_BOX_MAX_H, Math.round(pitch)));
+    }
+
+    function drawDomainArchitectures() {
+        if (!_svgGroup) {
+            return;
+        }
+        _svgGroup.selectAll('g.aptx-domains').remove();
+        if (!domainsShown() || !_root) {
+            return;
+        }
+        let tips = displayedTips().filter(function (d) {
+            return _state.unrootedDisplay ? (d.ux !== undefined) : (d.x !== undefined);
+        });
+        let f = domainScale();
+        if (tips.length === 0 || !(f > 0) || !isFinite(f)) {
+            return;
+        }
+        let g = _svgGroup.append('g').attr('class', 'aptx-domains').style('pointer-events', 'none');
+        // one vertical gradient per base colour, lighter at the top; the
+        // defs ride into the SVG / PDF / PNG exports with the boxes
+        let defs = g.append('defs');
+        let made = Object.create(null);
+        function gradientFor(base) {
+            let id = 'aptx-dom-' + base.substring(1);
+            if (!made[id]) {
+                made[id] = true;
+                let grad = defs.append('linearGradient').attr('id', id)
+                    .attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 1);
+                grad.append('stop').attr('offset', '0%').attr('stop-color', forester.domainLighten(base, 0.12));
+                grad.append('stop').attr('offset', '100%').attr('stop-color', forester.domainDarken(base, 0.10));
+            }
+            return 'url(#' + id + ')';
+        }
+        let labelSpace = domainLabelSpace();
+        if (_state.circularDisplay) {
+            // every bar starts on one ring past the labels and rides its
+            // tip's spoke outward
+            let r0 = _radial.maxRad + labelSpace + DOMAIN_RADIAL_GAP;
+            let h = domainBoxHeight((r0 * 2 * Math.PI) / tips.length);
+            tips.forEach(function (d) {
+                let t = g.append('g').attr('transform', 'rotate(' + labelAngleDeg(d) + ')');
+                drawOneArchitecture(t, forester.domainArchitectureOf(d), r0, -h / 2, h, f, false, gradientFor);
+            });
+        } else if (_state.unrootedDisplay) {
+            // no common ring: each bar starts past its own tip's label
+            let h = domainBoxHeight((Math.PI * 2 * _unroot.maxRad) / tips.length);
+            let start = labelSpace + DOMAIN_RADIAL_GAP;
+            tips.forEach(function (d) {
+                let t = g.append('g').attr('transform', 'translate(' + d.ux + ',' + d.uy + ') rotate(' + labelAngleDeg(d) + ')');
+                drawOneArchitecture(t, forester.domainArchitectureOf(d), start, -h / 2, h, f, false, gradientFor);
+            });
+        } else {
+            // one aligned column: past the deepest tip and the longest label.
+            // The box height follows the tip pitch (half of it), 6 to 16 px.
+            tips.sort(function (p, q) {
+                return p.x - q.x;
+            });
+            let n = tips.length;
+            let pitch = n > 1 ? (tips[n - 1].x - tips[0].x) / (n - 1) : _state.externalNodeFontSize;
+            let h = domainBoxHeight(pitch / 2);
+            let start = _w + _state.nodeLabelGap + labelSpace + DOMAIN_TRACK_START_GAP;
+            let labelsOn = _state.domainLabels === 'domains';
+            tips.forEach(function (d) {
+                drawOneArchitecture(g, forester.domainArchitectureOf(d), start, d.x - (h / 2), h, f, labelsOn, gradientFor);
+            });
+        }
+    }
+
+    function domainRect(g, x, y, w, h, r) {
+        return g.append('rect')
+            .attr('x', x).attr('y', y).attr('width', w).attr('height', h)
+            .attr('rx', r).attr('ry', r);
+    }
+
+    // One architecture, in the desktop's order: the backbone, then per
+    // admitted domain its stepped drop shadow, the optional glow, the
+    // gradient body with its border, and -- rectangular only -- the name,
+    // when it fits the box.
+    function drawOneArchitecture(g, da, start, y1, h, f, labelsOn, gradientFor) {
+        if (!da) {
+            return;
+        }
+        let geo = forester.domainBoxes(da, start, f, _state.domainEvalueExponent);
+        g.append('rect')
+            .attr('x', geo.backbone.x).attr('y', y1 + (h / 2) - 0.5)
+            .attr('width', geo.backbone.w).attr('height', 1)
+            .style('fill', DOMAIN_BACKBONE_COLOR);
+        let fs = Math.min(_state.externalNodeFontSize, h - 2);
+        let font = fs + 'px ' + FONT_DEFAULTS;
+        geo.boxes.forEach(function (b) {
+            let base = domainColor(b.name);
+            let r = Math.min(2, Math.min(b.w, h) / 2);
+            DOMAIN_SHADOWS.forEach(function (s) {
+                domainRect(g, b.x + s[0], y1 + s[1], b.w, h, r)
+                    .style('fill', DOMAIN_SHADOW_COLOR)
+                    .style('fill-opacity', s[2] / 255);
+            });
+            if (_state.domainGlow) {
+                DOMAIN_GLOWS.forEach(function (gl) {
+                    let o = gl[0];
+                    domainRect(g, b.x - o, y1 - o, b.w + (2 * o), h + (2 * o), r + o)
+                        .style('fill', base)
+                        .style('fill-opacity', gl[1] / 255);
+                });
+            }
+            domainRect(g, b.x, y1, b.w, h, r)
+                .style('fill', gradientFor(base))
+                .style('stroke', forester.domainDarken(base, 0.24))
+                .style('stroke-width', 1);
+            if (labelsOn && b.name && fs > 4 && legendTextWidth(b.name, font) <= b.w - 4) {
+                g.append('text')
+                    .attr('x', b.x + (b.w / 2)).attr('y', y1 + (h / 2))
+                    .attr('dy', '0.35em')
+                    .attr('text-anchor', 'middle')
+                    .style('font', font)
+                    .style('fill', forester.domainLabelInk(base))
+                    .text(b.name);
+            }
+        });
+    }
+
+    function clipTextToWidth(text, font, maxPx) {
+        if (legendTextWidth(text, font) <= maxPx) {
+            return text;
+        }
+        let s = text;
+        while (s.length > 1 && legendTextWidth(s + '…', font) > maxPx) {
+            s = s.substring(0, s.length - 1);
+        }
+        return s + '…';
+    }
+
+    // The domain legend, in "Legend" mode only: the names drawn in the view,
+    // in first-appearance order, each with its box count; a flat swatch per
+    // row. Its home is the bottom-right corner; a drag keeps its place as a
+    // fraction of the view, a double-click sends it home. Its own card, so
+    // it neither follows nor crowds the Color-by legend.
+    function drawDomainLegend() {
+        if (!_baseSvg) {
+            return;
+        }
+        _baseSvg.selectAll('g.' + LEGEND_DOMAINS).remove();
+        if (!_root || !domainsShown() || _state.domainLabels !== 'legend') {
+            return;
+        }
+        // rows in the order the tips are on screen -- top to bottom, or
+        // clockwise -- not the data's order, which a ladderized display
+        // does not follow
+        let tips = displayedTips().filter(function (d) {
+            return d.x !== undefined;
+        }).sort(function (p, q) {
+            return p.x - q.x;
+        });
+        let summary = forester.domainSummary(tips, _state.domainEvalueExponent);
+        let size = svgSize();
+        if (summary.legend.length === 0 || !size) {
+            return;
+        }
+        const FS = Math.max(11, _state.externalNodeFontSize || 11);
+        const PAD = 9;
+        const ROW = FS + 6;
+        const SWATCH = 10;
+        const GAP = 6;
+        const rowFont = FS + 'px ' + FONT_DEFAULTS;
+        const titleFont = '600 ' + (FS + 1) + 'px ' + FONT_DEFAULTS;
+        const ink = _state.labelColorDefault;
+        const frame = _state.branchColorDefault;
+        let title = 'Protein domains (E ≤ 1e' + _state.domainEvalueExponent + ')';
+        let rows = summary.legend.map(function (r) {
+            return {
+                text: clipTextToWidth(r.name + ' (' + r.count + ')', rowFont, DOMAIN_LEGEND_ROW_MAX_PX),
+                color: domainColor(r.name)
+            };
+        });
+        let width = legendTextWidth(title, titleFont);
+        rows.forEach(function (r) {
+            width = Math.max(width, SWATCH + GAP + legendTextWidth(r.text, rowFont));
+        });
+        width += 2 * PAD;
+        let height = PAD + ROW + (rows.length * ROW) + PAD - 2;
+        let x, y;
+        if (_domain.legendFrac) {
+            x = _domain.legendFrac.fx * size.w;
+            y = _domain.legendFrac.fy * size.h;
+        } else {
+            x = size.w - width - DOMAIN_LEGEND_INSET;
+            y = size.h - height - DOMAIN_LEGEND_INSET;
+        }
+        x = Math.max(0, Math.min(size.w - 20, x));
+        y = Math.max(0, Math.min(size.h - 20, y));
+
+        let g = _baseSvg.append('g').attr('class', LEGEND_DOMAINS)
+            .style('cursor', 'move')
+            .call(d3.drag()
+                .on('start', function (event) {
+                    if (event.sourceEvent) {
+                        event.sourceEvent.stopPropagation();   // not a pan of the tree
+                    }
+                })
+                .on('drag', function (event) {
+                    x += event.dx;
+                    y += event.dy;
+                    _domain.legendFrac = {fx: x / size.w, fy: y / size.h};
+                    drawDomainLegend();
+                }))
+            .on('dblclick', function (event) {
+                event.stopPropagation();
+                _domain.legendFrac = null;
+                drawDomainLegend();
+            });
+        g.append('title').text('drag to move; double-click to send it back to the corner');
+        g.append('rect')
+            .attr('x', x).attr('y', y)
+            .attr('width', width).attr('height', height)
+            .attr('rx', 5)
+            .style('fill', _state.backgroundColorDefault)
+            .style('fill-opacity', 0.92)
+            .style('stroke', frame)
+            .style('stroke-opacity', 0.5);
+        let baseline = y + PAD + FS;
+        g.append('text')
+            .attr('x', x + PAD).attr('y', baseline)
+            .style('font', titleFont)
+            .style('fill', ink)
+            .text(title);
+        rows.forEach(function (r) {
+            baseline += ROW;
+            g.append('rect')
+                .attr('x', x + PAD).attr('y', baseline - SWATCH + 1)
+                .attr('width', SWATCH).attr('height', SWATCH)
+                .attr('rx', 2)
+                .style('fill', r.color);
+            g.append('text')
+                .attr('x', x + PAD + SWATCH + GAP).attr('y', baseline)
+                .style('font', rowFont)
+                .style('fill', ink)
+                .text(r.text);
+        });
+    }
+
+    // The controls follow the toggle: hidden without it, and while shown
+    // the readout, the select, the glow box and the four step buttons say
+    // where things stand (a button at its limit is disabled, not a no-op).
+    function syncDomainControls() {
+        let fs = byId(DOMAIN_CONTROLS);
+        if (!fs) {
+            return;
+        }
+        let on = _state.showDomainArchitectures === true && _basicTreeProperties.domainArchitectures === true;
+        setCheckboxValue(DOMAINS_CB, _state.showDomainArchitectures === true);
+        fs.style.display = on ? '' : 'none';
+        if (!on) {
+            return;
+        }
+        let readout = byId(DOMAIN_EVALUE_READOUT);
+        if (readout) {
+            readout.textContent = forester.domainEvalueLabel(_state.domainEvalueExponent);
+        }
+        let w = domainTrackWidth();
+        (w > DOMAIN_WIDTH_MIN ? enableButton : disableButton)(byId(DOMAIN_WIDTH_DEC));
+        (w < DOMAIN_WIDTH_MAX ? enableButton : disableButton)(byId(DOMAIN_WIDTH_INC));
+        (_state.domainEvalueExponent > forester.DOMAIN_EVALUE_EXPONENT_MIN ? enableButton : disableButton)(byId(DOMAIN_EVALUE_DEC));
+        (_state.domainEvalueExponent < forester.DOMAIN_EVALUE_EXPONENT_MAX ? enableButton : disableButton)(byId(DOMAIN_EVALUE_INC));
+        setValue(DOMAIN_LABELS_SELECT, _state.domainLabels);
+        setCheckboxValue(DOMAIN_GLOW_CB, _state.domainGlow === true);
+    }
+
+    function domainsCbClicked() {
+        _state.showDomainArchitectures = getCheckboxValue(DOMAINS_CB);
+        if (_state.showDomainArchitectures && radialDisplay()) {
+            _radialLabelsHorizontal = false;   // the boxes ride the spokes, so the labels must too
+            syncZoomRowButtons();
+        }
+        syncDomainControls();
+        scheduleUpdate(null, 0);
+    }
+
+    // d+ / d-: the width grows by 1.2 while under 2000, shrinks by 0.8 while
+    // over 20 (so one press can carry it past a limit; the next is refused)
+    function domainWidthStep(grow) {
+        let w = domainTrackWidth();
+        if (grow ? w >= DOMAIN_WIDTH_MAX : w <= DOMAIN_WIDTH_MIN) {
+            return;
+        }
+        setDomainTrackWidth(w * (grow ? DOMAIN_WIDTH_GROW : DOMAIN_WIDTH_SHRINK));
+        syncDomainControls();
+        // a radial layout has no column to reserve, but the fit must take the
+        // new track length into account, so it is refitted
+        if (radialDisplay()) {
+            scheduleUpdate(null, 0, true);
+            afterUpdate(zoomToFit);
+        } else {
+            scheduleUpdate(null, 0);
+        }
+    }
+
+    function domainEvalueStep(delta) {
+        let e = _state.domainEvalueExponent + delta;
+        if (e < forester.DOMAIN_EVALUE_EXPONENT_MIN || e > forester.DOMAIN_EVALUE_EXPONENT_MAX) {
+            return;
+        }
+        _state.domainEvalueExponent = e;
+        _domain.palette = null;   // the drawn set changed: the palette is dealt again
+        syncDomainControls();
+        scheduleUpdate(null, 0, true);
+    }
+
+    function domainLabelsChanged() {
+        _state.domainLabels = getValue(DOMAIN_LABELS_SELECT);
+        scheduleUpdate(null, 0, true);
+    }
+
+    function domainGlowCbClicked() {
+        _state.domainGlow = getCheckboxValue(DOMAIN_GLOW_CB);
+        scheduleUpdate(null, 0, true);
+    }
+
+    // A step button that repeats while held: one step on press, then after
+    // a pause one every 90 ms until release (the desktop's auto-repeat on
+    // d- / d+). A keyboard press steps once.
+    function onHoldRepeat(id, step) {
+        let delay = null;
+        let repeat = null;
+        onHold(id, function () {
+            step();
+            delay = setTimeout(function () {
+                repeat = setInterval(step, 90);
+            }, 400);
+        }, function () {
+            if (delay) {
+                clearTimeout(delay);
+                delay = null;
+            }
+            if (repeat) {
+                clearInterval(repeat);
+                repeat = null;
+            }
+        });
+    }
+
+    // Search B starts hidden to keep the panel compact; one click (or a
+    // configured initial value) reveals it, and it stays revealed.
+    // Search B is folded away until wanted: the '+ Search B' link (which
+    // focuses it) or a view that carries a second search.
+    function showSearchB() {
+        let wrap = byId(SEARCH_B_WRAP);
+        if (wrap) {
+            wrap.style.display = '';
+        }
+        let tgl = byId(SEARCH_B_TOGGLE);
+        if (tgl) {
+            tgl.style.display = 'none';
+        }
+    }
+
+    function revealSearchB() {
+        showSearchB();
+        let f = byId(SEARCH_FIELD_1);
+        if (f) {
+            f.focus();
+        }
+    }
+
+    // ===================== Time axis =====================
+    // The desktop's time overlays, drawn beneath a rectangular PHYLOGRAM of
+    // a dated tree: the two-band ICS geologic axis with a "Ma before
+    // present" ruler (or a calendar-year ruler), HPD age bars on dated
+    // internal nodes and sepia fossil-range (FAD/LAD) bars on dated tips.
+    // The tree layout itself never changes -- time is an overlay anchored to
+    // the tree's own branch scale, so the bands line up with the branches
+    // even on a fossil-only tree whose youngest tip is far from the present.
+
+    function timeAxisShown() {
+        return _state.showTimeAxis === true && !radialDisplay()
+            && _state.phylogram === true
+            && _timeInfo !== null && _timeInfo.type !== null
+            && _basicTreeProperties.branchLengths === true;
+    }
+
+    function timeAxisBottomReserve() {
+        if (!timeAxisShown()) {
+            return 0;
+        }
+        return _timeInfo.type === 'geologic' ? TIME_GEO_RESERVE : TIME_CAL_RESERVE;
+    }
+
+    // The MSA footer sits under the alignment band (right) and the time axis
+    // under the tree (left) -- horizontally disjoint, so the two reserves
+    // share the same strip rather than stacking.
+    function bottomOverlayReserve() {
+        // The navigation bar is fixed at the viewport bottom, so the track's
+        // own bottom rows (conservation, consensus, ruler) must end above it
+        // or the bar covers them -- the old bare slider did exactly that.
+        // The scale bar sits in the same band, under the tree's last row.
+        return Math.max(msaShown() ? MSA_BOTTOM_RESERVE + MSA_NAV_RESERVE : 0, timeAxisBottomReserve(),
+            scaleBarShown() && !radialDisplay() ? SCALE_BAR_RESERVE : 0);
+    }
+
+    // ===================== Scale bar =====================
+    // A phylogram carries a scale bar at the bottom left of the tree: a
+    // round number of branch-length units (forester.scaleBarLength) with
+    // end ticks and its length written above, drawn in the tree's own
+    // coordinates so it zooms and exports with the tree and its label stays
+    // true. Not in a cladogram (nothing to measure) and not under a time
+    // axis (which is a scale already); in the radial layouts it sits below
+    // the fan at its left edge.
+    const SCALE_BAR_TARGET_PX = 100;
+    const SCALE_BAR_RESERVE = 30;
+
+    function scaleBarShown() {
+        return _state.phylogram === true && _basicTreeProperties.branchLengths === true && !timeAxisShown();
+    }
+
+    // pixels per branch-length unit in the current layout's own coordinates
+    function branchLengthPixelsPerUnit() {
+        if (!_state.phylogram || !_yScale) {
+            return 0;
+        }
+        if (_state.unrootedDisplay) {
+            return (_unroot && _unroot.pxPerUnit) ? _unroot.pxPerUnit : 0;
+        }
+        let unit = _yScale(1) - _yScale(0);
+        if (_state.circularDisplay) {
+            return (_radial && _radial.maxY > 0) ? unit * (_radial.maxRad / _radial.maxY) : 0;
+        }
+        return unit;
+    }
+
+    function drawScaleBar() {
+        if (!_svgGroup) {
+            return;
+        }
+        _svgGroup.selectAll('g.aptx-scalebar').remove();
+        if (!scaleBarShown()) {
+            return;
+        }
+        let bar = forester.scaleBarLength(branchLengthPixelsPerUnit(), SCALE_BAR_TARGET_PX);
+        if (!bar) {
+            return;
+        }
+        let x, y;
+        if (radialDisplay()) {
+            let labelSpace = (_maxLabelLength * _state.externalNodeFontSize * LABEL_SIZE_CALC_FACTOR) + LABEL_SIZE_CALC_ADDITION;
+            let r = (_state.circularDisplay ? _radial.maxRad : _unroot.maxRad) + labelSpace;
+            x = -r;
+            y = r + 24;
+        } else {
+            x = 0;
+            y = _clusterH + SCALE_BAR_RESERVE - 12;
+        }
+        let stroke = _state.branchColorDefault;
+        let width = Math.max(1, _state.branchWidthDefault);
+        let fs = Math.max(9, _state.externalNodeFontSize);
+        let g = _svgGroup.append('g').attr('class', 'aptx-scalebar').style('pointer-events', 'none');
+        g.append('line')
+            .attr('x1', x).attr('y1', y).attr('x2', x + bar.px).attr('y2', y)
+            .style('stroke', stroke).style('stroke-width', width);
+        [x, x + bar.px].forEach(function (tx) {
+            g.append('line')
+                .attr('x1', tx).attr('y1', y - 4).attr('x2', tx).attr('y2', y + 4)
+                .style('stroke', stroke).style('stroke-width', width);
+        });
+        g.append('text')
+            .attr('x', x + (bar.px / 2)).attr('y', y - 6)
+            .attr('text-anchor', 'middle')
+            .style('font', fs + 'px ' + FONT_DEFAULTS)
+            .style('fill', _state.labelColorDefault)
+            .text(bar.label);
+    }
+
+    function hexToRgbTriple(hex) {
+        let h = hex.charAt(0) === '#' ? hex.substring(1) : hex;
+        return [parseInt(h.substring(0, 2), 16), parseInt(h.substring(2, 4), 16),
+            parseInt(h.substring(4, 6), 16)];
+    }
+
+    function drawTimeOverlays() {
+        if (!_svgGroup) {
+            return;
+        }
+        _svgGroup.selectAll('g.aptx-time').remove();
+        if (_floatGroup) {
+            _floatGroup.selectAll('g.aptx-time-axis').remove();
+            delete _floatStrips['aptx-time-axis'];
+        }
+        _svgGroup.selectAll('g.aptx-timegrid').remove();
+        if (!timeAxisShown() || !_root || !_yScale) {
+            return;
+        }
+        // recomputed per draw, so a subtree view calibrates to ITS oldest node
+        let info = forester.timeAxisInfo(_root);
+        if (!info.type) {
+            return;
+        }
+        let corr = Math.abs(_yScale(1) - _yScale(0));
+        if (!isFinite(corr) || corr <= 0) {
+            return;
+        }
+        // Anchor the age->x mapping at the DEEPEST DATED TIP rather than the
+        // root: the root and its direct children carry a synthetic half-
+        // average branch length (see bl()), which would shift every band.
+        let anchor = null;
+        let maxTipX = 0;
+        forEachDisplayed(function (n) {
+            if (n.children) {
+                return;
+            }
+            if (n.y > maxTipX) {
+                maxTipX = n.y;
+            }
+            if (n.date && typeof n.date.value === 'number') {
+                if (!anchor || n.distToRoot > anchor.distToRoot) {
+                    anchor = n;
+                }
+            }
+        });
         // mouse-transparent: the HPD bar rect sits right on top of an internal
         // node's circle and would otherwise swallow its hover and click
         let g = _svgGroup.append('g').attr('class', 'aptx-time')
@@ -6247,7 +8447,7 @@ function (root, d3, forester, phyloXml) {
         let sc = info.type === 'calendar' ? -corr : corr;
 
         // ---- HPD age bars (internal) + fossil range bars (tips) ----
-        forester.preOrderTraversal(_root, function (d) {
+        forEachDisplayed(function (d) {
             if (!d.date || typeof d.date.minimum !== 'number' || typeof d.date.maximum !== 'number'
                 || d.y === undefined) {
                 return;
@@ -6465,7 +8665,7 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         let labelSpace = (_maxLabelLength * _state.externalNodeFontSize * LABEL_SIZE_CALC_FACTOR) + LABEL_SIZE_CALC_ADDITION;
-        let outer = maxRad + labelSpace;
+        let outer = maxRad + labelSpace + domainRadialExtent();
         let W = +_baseSvg.attr('width'), H = +_baseSvg.attr('height');
         let scale = 0.9 * (Math.min(W, H) / (2 * outer));
         if (!isFinite(scale) || scale <= 0) {
@@ -6481,7 +8681,7 @@ function (root, d3, forester, phyloXml) {
             setZoomScale(1);
             update(_root, 0);
             _zoomed_x_or_y = true;
-            const uncollsed_nodes = forester.calcSumOfExternalDescendants(_root);
+            const uncollsed_nodes = displayedLeafCount();
             _displayHeight = _state.externalNodeFontSize * (uncollsed_nodes * 1.3);
             const min = 40;
             if (_displayHeight < min) {
@@ -6496,7 +8696,7 @@ function (root, d3, forester, phyloXml) {
             _root = _root_const;
             _in_subtree = false;
             _basicTreeProperties = forester.collectBasicTreeProperties(_root);
-            refreshVisualizations();
+            refreshVisualizations(false);
             search0();
             search1();
             zoomToFit();
@@ -6535,7 +8735,7 @@ function (root, d3, forester, phyloXml) {
                 }
 
                 _basicTreeProperties = forester.collectBasicTreeProperties(_root);
-                refreshVisualizations();
+                refreshVisualizations(false);
                 search0();
                 search1();
                 zoomToFit();
@@ -6554,13 +8754,10 @@ function (root, d3, forester, phyloXml) {
             if (_treeFn.visData.ladderize === undefined) {
                 _treeFn.visData.ladderize = true;
             }
-            ladderizeSubtree(_root, _treeFn.visData.ladderize, true);
+            let largestFirst = ladderizeSubtree(_root, _treeFn.visData.ladderize, true);
+            _viewOps.order = largestFirst ? 'asc' : 'desc';   // what a shared view replays
             _treeFn.visData.ladderize = !_treeFn.visData.ladderize;
-            // The glyph shows the direction the NEXT press will ladderize in.
-            let orderBtn = byId(LADDERIZE_BUTTON);
-            if (orderBtn) {
-                orderBtn.innerHTML = makeGlyph(_treeFn.visData.ladderize ? 'ladderize_asc' : 'ladderize_desc');
-            }
+            syncLadderizeGlyph();
             update(null, 0);
         }
     }
@@ -6583,6 +8780,7 @@ function (root, d3, forester, phyloXml) {
                 {
                     label: 'Midpoint re-root', action: function () {
                         forester.midpointRoot(_root);
+                        _viewOps.root = 'midpoint';   // what a shared view replays
                         zoomToFit();
                     }
                 },
@@ -6599,6 +8797,7 @@ function (root, d3, forester, phyloXml) {
             _root = _root_const;
             _in_subtree = false;
         }
+        clearCollapsedFlags(_root);   // the launch state has nothing collapsed
 
         _basicTreeProperties = forester.collectBasicTreeProperties(_root);
 
@@ -6608,7 +8807,7 @@ function (root, d3, forester, phyloXml) {
         _radialLabelsHorizontal = false;
         _msaColOffset = 0;
         syncZoomRowButtons();
-        refreshVisualizations();
+        refreshVisualizations(false);
         // Esc resets to the launch state -- the auto-applied colour, when its
         // field still exists in what remains of the tree.
         if (_vis) {
@@ -6744,12 +8943,14 @@ function (root, d3, forester, phyloXml) {
     }
 
     function resetSearch0() {
+        closeSuggestions();
         setValue(SEARCH_FIELD_0, '');
         setValue(SEARCH_VALUE2_0, '');
         runSearches();
     }
 
     function resetSearch1() {
+        closeSuggestions();
         setValue(SEARCH_FIELD_1, '');
         setValue(SEARCH_VALUE2_1, '');
         runSearches();
@@ -6763,12 +8964,10 @@ function (root, d3, forester, phyloXml) {
 
     // Read a search box's current field / mode / value(s) into a spec.
     function currentSearchSpec(idx) {
-        let key = getValue(idx === 0 ? SEARCH_FIELD_SELECT_0 : SEARCH_FIELD_SELECT_1);
-        let field = null;
-        for (let i = 0; i < _searchFields.length; ++i) {
-            if (_searchFields[i].key === key) { field = _searchFields[i]; break; }
-        }
-        if (!field) field = _searchFields[0] || { key: 'ANY', label: 'Any Text', numeric: false };
+        // the field menu's option values index _searchFields; before a tree
+        // is loaded there is only Any Text
+        let field = _searchFields[Number(getValue(idx === 0 ? SEARCH_FIELD_SELECT_0 : SEARCH_FIELD_SELECT_1))]
+            || _searchFields[0] || forester.availableSearchFields(null)[0];
         let mode = getValue(idx === 0 ? SEARCH_MODE_SELECT_0 : SEARCH_MODE_SELECT_1);
         if (!mode) mode = field.numeric ? 'eq' : 'contains';
         return {
@@ -6793,20 +8992,23 @@ function (root, d3, forester, phyloXml) {
     // Fill both search-field dropdowns from the loaded tree's available fields,
     // then set up each box's mode menu. Called when a tree is (re)loaded.
     function populateSearchMenus() {
+        let before = _searchFields;
         _searchFields = forester.availableSearchFields(_root);
         [SEARCH_FIELD_SELECT_0, SEARCH_FIELD_SELECT_1].forEach(function (selId) {
             let sel = byId(selId);
             if (!sel) return;
-            let prev = sel.value;
+            // a box keeps its field when the new tree still offers it (labels
+            // are unique: a property's label is its ref, which has a colon)
+            let prev = before[Number(sel.value)];
+            let keep = prev ? _searchFields.findIndex(f => f.label === prev.label) : -1;
             sel.innerHTML = '';
             for (let i = 0; i < _searchFields.length; ++i) {
                 let opt = document.createElement('option');
-                opt.value = _searchFields[i].key;
+                opt.value = String(i);
                 opt.textContent = _searchFields[i].label;
                 sel.appendChild(opt);
             }
-            if (prev && _searchFields.some(f => f.key === prev)) sel.value = prev;
-            else sel.value = 'ANY';
+            sel.value = String(keep >= 0 ? keep : 0);
         });
         populateSearchModeMenu(0);
         populateSearchModeMenu(1);
@@ -6853,24 +9055,252 @@ function (root, d3, forester, phyloXml) {
         if (idx === 0) { search0(); } else { search1(); }
     }
 
-    // Populate (or detach) the value box's <datalist> so the browser offers
-    // type-ahead value suggestions for specific text fields only.
+    // ===================== Search suggestions =====================
+    // The value box's type-ahead: the distinct values of the chosen field,
+    // filtered as you type, in an in-page list under the box drawn like the
+    // node menu in the panel's own theme. It replaces the browser's
+    // <datalist> widget -- the one control the page could not style, which
+    // sat in the panel like a stranger. Off, as before, for numeric fields,
+    // Any Text and the molecular sequence (field.suggest === false), and in
+    // regex mode. The values are gathered once per field or mode change
+    // (updateSearchAutocomplete), not per keystroke: on a big tree that is a
+    // walk of every node.
+
+    const SUGGEST_MAX_ROWS = 10;
+    let _suggestValues = [null, null];   // per box: the field's distinct values, or null when suggestions are off
+    let _suggest = null;                 // the open list: {idx, input, box, rows, active, onOutside}
+    let _suggestPicked = false;          // an Enter that picked a row must not also re-run the search on keyup
+    let _suggestSkipFocus = false;       // the focus a pick hands back must not reopen the list
+
     function updateSearchAutocomplete(idx) {
-        let dlId = idx === 0 ? SEARCH_DATALIST_0 : SEARCH_DATALIST_1;
-        let dl = byId(dlId);
-        let input = byId(idx === 0 ? SEARCH_FIELD_0 : SEARCH_FIELD_1);
-        if (!dl || !input) return;
+        closeSuggestions();
         let spec = currentSearchSpec(idx);
-        let enable = !spec.field.numeric && spec.field.key !== 'ANY' && spec.field.key !== 'MS' && spec.mode !== 'regex';
-        dl.innerHTML = '';
-        if (!enable) { input.removeAttribute('list'); return; }
-        let vals = forester.distinctSearchValues(_root, spec.field, SEARCH_AUTOCOMPLETE_CAP);
-        for (let i = 0; i < vals.length; ++i) {
-            let opt = document.createElement('option');
-            opt.value = vals[i];
-            dl.appendChild(opt);
+        let on = !spec.field.numeric && spec.field.suggest !== false && spec.mode !== 'regex';
+        _suggestValues[idx] = on ? forester.distinctSearchValues(_root, spec.field, SEARCH_AUTOCOMPLETE_CAP) : null;
+    }
+
+    // The term being typed is the last one: ',' is OR and '+' is AND in the
+    // plain-text modes, and a pick replaces just that term.
+    function suggestTermStart(text) {
+        return Math.max(text.lastIndexOf(','), text.lastIndexOf('+')) + 1;
+    }
+
+    // Suggestions compare the way the search will: verbatim while Match
+    // case is on, folded to lower case otherwise (Christian, 2026-09-13,
+    // joint with the desktop).
+    function suggestFold(s) {
+        return _state.searchIsCaseSensitive === true ? s : s.toLowerCase();
+    }
+
+    // The values the typed term admits, matched the way the box's mode will
+    // match them: a prefix for "starts with", a suffix for "ends with", a
+    // substring otherwise.
+    function suggestMatches(idx, term) {
+        let values = _suggestValues[idx] || [];
+        let mode = getValue(idx === 0 ? SEARCH_MODE_SELECT_0 : SEARCH_MODE_SELECT_1);
+        let needle = suggestFold(term);
+        return values.filter(function (v) {
+            if (needle.length === 0) {
+                return true;
+            }
+            let lv = suggestFold(v);
+            if (mode === 'starts_with') {
+                return lv.indexOf(needle) === 0;
+            }
+            if (mode === 'ends_with') {
+                return lv.length >= needle.length && lv.lastIndexOf(needle) === lv.length - needle.length;
+            }
+            return lv.indexOf(needle) >= 0;
+        });
+    }
+
+    function openSuggestions(idx) {
+        closeSuggestions();
+        let input = byId(idx === 0 ? SEARCH_FIELD_0 : SEARCH_FIELD_1);
+        if (!input || !_suggestValues[idx] || _suggestValues[idx].length === 0) {
+            return;
+        }
+        let text = input.value;
+        let start = suggestTermStart(text);
+        let term = text.substring(start).trim();
+        let matches = suggestMatches(idx, term);
+        // nothing to offer when nothing matches, or the one match is what is already typed
+        if (matches.length === 0 || (matches.length === 1 && suggestFold(matches[0]) === suggestFold(term))) {
+            return;
+        }
+        let box = document.createElement('div');
+        box.className = 'aptx-suggest';
+        if (_panelTheme) {
+            box.classList.add('aptx-' + _panelTheme); // follow the panel's light/dark choice
+        }
+        let needle = suggestFold(term);
+        let rows = [];
+        matches.slice(0, SUGGEST_MAX_ROWS).forEach(function (v) {
+            let b = document.createElement('button');
+            b.type = 'button';
+            b.tabIndex = -1;
+            b.title = v;
+            // the matched part in bold, wherever it sits in the value
+            let at = needle.length > 0 ? suggestFold(v).indexOf(needle) : -1;
+            if (at >= 0) {
+                b.appendChild(document.createTextNode(v.substring(0, at)));
+                let hit = document.createElement('b');
+                hit.textContent = v.substring(at, at + needle.length);
+                b.appendChild(hit);
+                b.appendChild(document.createTextNode(v.substring(at + needle.length)));
+            } else {
+                b.textContent = v;
+            }
+            b.addEventListener('mousedown', function (e) {
+                e.preventDefault();   // the focus stays in the box: no blur, no flicker
+            });
+            b.addEventListener('click', function (e) {
+                e.stopPropagation();
+                pickSuggestion(idx, v);
+            });
+            box.appendChild(b);
+            rows.push(b);
+        });
+        if (matches.length > SUGGEST_MAX_ROWS) {
+            let more = document.createElement('div');
+            more.className = 'aptx-suggest-more';
+            more.textContent = (matches.length - SUGGEST_MAX_ROWS) + ' more — keep typing';
+            box.appendChild(more);
+        }
+        document.body.appendChild(box);
+        // under the box and as wide as it, or above it when the window's
+        // bottom is too close
+        let r = input.getBoundingClientRect();
+        box.style.minWidth = Math.round(r.width) + 'px';
+        let h = box.getBoundingClientRect().height;
+        let below = r.bottom + 3;
+        let top = (below + h > document.documentElement.clientHeight - 8 && r.top - h - 3 > 8) ? r.top - h - 3 : below;
+        box.style.left = Math.round(r.left + window.scrollX) + 'px';
+        box.style.top = Math.round(top + window.scrollY) + 'px';
+        // a press anywhere else closes it -- in the capture phase, since d3's
+        // zoom stops mousedown on the tree from reaching the document
+        let onOutside = function (e) {
+            if (_suggest && !_suggest.box.contains(e.target) && e.target !== input) {
+                closeSuggestions();
+            }
+        };
+        document.addEventListener('mousedown', onOutside, true);
+        _suggest = {idx: idx, input: input, box: box, rows: rows, active: -1, onOutside: onOutside};
+    }
+
+    function closeSuggestions() {
+        if (!_suggest) {
+            return;
+        }
+        document.removeEventListener('mousedown', _suggest.onOutside, true);
+        _suggest.box.remove();
+        _suggest = null;
+    }
+
+    function setActiveSuggestion(i) {
+        if (!_suggest) {
+            return;
+        }
+        _suggest.rows.forEach(function (b, k) {
+            b.classList.toggle('aptx-active', k === i);
+        });
+        _suggest.active = i;
+    }
+
+    function pickSuggestion(idx, value) {
+        let input = byId(idx === 0 ? SEARCH_FIELD_0 : SEARCH_FIELD_1);
+        closeSuggestions();
+        if (!input) {
+            return;
+        }
+        let text = input.value;
+        input.value = text.substring(0, suggestTermStart(text)) + value;
+        _suggestSkipFocus = true;
+        input.focus();
+        runSearches();
+    }
+
+    // Keys in the value box: the arrows open the list and move along it,
+    // Enter picks, Escape and Tab close. An Escape that closed the list must
+    // not also reset the view, exactly as the node menu's does not.
+    function suggestKeydown(idx, e) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            if (!_suggest) {
+                openSuggestions(idx);
+                if (!_suggest) {
+                    return;
+                }
+            }
+            let n = _suggest.rows.length;
+            let a = _suggest.active;
+            // on a list with no row chosen yet, Down starts at the top and Up
+            // at the bottom (the desktop found Up landing one short of it)
+            setActiveSuggestion(e.key === 'ArrowDown' ? (a + 1) % n : (a < 0 ? n - 1 : (a - 1 + n) % n));
+            e.preventDefault();
+        } else if (e.key === 'Enter') {
+            if (_suggest && _suggest.active >= 0) {
+                _suggestPicked = true;
+                pickSuggestion(idx, _suggest.rows[_suggest.active].title);
+                e.preventDefault();
+            } else {
+                closeSuggestions();
+            }
+        } else if (e.key === 'Escape') {
+            if (_suggest) {
+                closeSuggestions();
+                _menuConsumedEsc = true;
+                e.stopPropagation();
+            }
+        } else if (e.key === 'Tab') {
+            closeSuggestions();
+        }
+    }
+
+    // The value box's keyup runs the search. A navigation key changes no
+    // value, and an Enter that just picked a row has already run it.
+    const SUGGEST_NAV_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Escape', 'Tab', 'Shift',
+        'Control', 'Alt', 'Meta', 'Home', 'End', 'PageUp', 'PageDown', 'CapsLock'];
+
+    function searchValueKeyup(e) {
+        if (SUGGEST_NAV_KEYS.indexOf(e.key) >= 0) {
+            return;
         }
-        input.setAttribute('list', dlId);
+        if (e.key === 'Enter' && _suggestPicked) {
+            _suggestPicked = false;
+            return;
+        }
+        runSearches();
+    }
+
+    function wireSuggestions(idx) {
+        let input = byId(idx === 0 ? SEARCH_FIELD_0 : SEARCH_FIELD_1);
+        if (!input) {
+            return;
+        }
+        input.addEventListener('keydown', function (e) {
+            suggestKeydown(idx, e);
+        });
+        input.addEventListener('input', function () {
+            openSuggestions(idx);
+        });
+        input.addEventListener('focus', function () {
+            if (_suggestSkipFocus) {
+                _suggestSkipFocus = false;
+                return;
+            }
+            if (input.value.length > 0) {
+                openSuggestions(idx);
+            }
+        });
+        input.addEventListener('blur', function () {
+            // after a tick: a click on a row keeps the focus, anything else
+            // that took it closes the list
+            setTimeout(function () {
+                if (_suggest && _suggest.idx === idx && document.activeElement !== input) {
+                    closeSuggestions();
+                }
+            }, 120);
+        });
     }
 
 
@@ -6898,7 +9328,12 @@ function (root, d3, forester, phyloXml) {
     function layoutButtonClicked() {
         _state.circularDisplay = getCheckboxValue(LAYOUT_CIRC_BUTTON);
         _state.unrootedDisplay = getCheckboxValue(LAYOUT_UNROOTED_BUTTON);
+        if (radialDisplay() && _state.showDomainArchitectures && _basicTreeProperties.domainArchitectures) {
+            // the domain boxes ride the tips' spokes, so the labels must too
+            _radialLabelsHorizontal = false;
+        }
         syncZoomRowButtons();
+        afterUpdate(syncDomainControls);   // the track width buttons follow the layout's own width
         zoomToFit();
     }
 
@@ -7098,6 +9533,27 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
+    // The desktop draws a box around "Auto-hide Labels" while labels are
+    // actually being hidden -- the switch being on is one thing, the tree
+    // being dense enough for it to bite is another. Same here, in the
+    // panel's accent: the checkbox item gets a box and its tooltip says how
+    // many labels are shown. Called on every redraw, since the density
+    // changes with the vertical zoom, the font size and the view.
+    function syncDynahideIndicator(active) {
+        let cb = byId(DYNAHIDE_CB);
+        let item = cb ? cb.closest('.aptx-check') : null;
+        if (!item) {
+            return;
+        }
+        if (item.dataset.baseTitle === undefined) {
+            item.dataset.baseTitle = item.title;
+        }
+        item.classList.toggle('aptx-check-active', !!active);
+        item.title = active
+            ? item.dataset.baseTitle + ' — hiding now: 1 in ' + _dynahide_factor + ' labels shown'
+            : item.dataset.baseTitle;
+    }
+
     function dynaHideCbClicked() {
         _state.dynahide = getCheckboxValue(DYNAHIDE_CB);
         resetVis();
@@ -7162,6 +9618,7 @@ function (root, d3, forester, phyloXml) {
 
     function searchOptionsCaseSenstiveCbClicked() {
         _state.searchIsCaseSensitive = getCheckboxValue(SEARCH_OPTIONS_CASE_SENSITIVE_CB);
+        closeSuggestions();   // an open list was filtered the other way; the next keystroke refilters
         search0();
         search1();
     }
@@ -7656,6 +10113,9 @@ function (root, d3, forester, phyloXml) {
             case 'ladderize_asc': sw = 8; cap = 'round'; body = glyphLadderize(true); break;
             case 'ladderize_desc': sw = 8; cap = 'round'; body = glyphLadderize(false); break;
             case 'midpoint': sw = 8; cap = 'round'; body = glyphMidpoint(); break;
+            case 'uncollapse_all': sw = 8.5; cap = 'round'; body = glyphUncollapseAll(); break;
+            case 'tree_prev': sw = 9; cap = 'round'; body = glyphChevron(false); break;
+            case 'tree_next': sw = 9; cap = 'round'; body = glyphChevron(true); break;
             case 'sun': body = glyphSun(); break;
             case 'moon': body = glyphMoon(); break;
             default: throw new Error('unknown control-panel glyph: ' + kind);
@@ -7665,6 +10125,20 @@ function (root, d3, forester, phyloXml) {
             + ' stroke-linecap="' + cap + '" stroke-linejoin="' + join + '">' + body + '</svg>';
     }
 
+    // The desktop's UNCOLLAPSE_ALL glyph (ControlButtonIcon.paintUncollapse),
+    // ported point for point into the 100-unit box: the collapsed-clade
+    // triangle, apex at the parent, base toward the tips it opens back out
+    // into -- three of them.
+    // A chevron pointing left or right: the previous / next tree buttons.
+    function glyphChevron(right) {
+        return right ? '<path d="M38,18 L66,50 L38,82"/>' : '<path d="M62,18 L34,50 L62,82"/>';
+    }
+
+    function glyphUncollapseAll() {
+        return '<path d="M6,50 L44,16 L44,84 Z" fill="currentColor" stroke="none"/>'
+            + '<path d="M56,20 H94 M56,50 H94 M56,80 H94"/>';
+    }
+
     function injectPanelStyles() {
         loadPanelTheme();
         if (document.getElementById(PANEL_STYLE_ID)) {
@@ -7701,16 +10175,16 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel * { box-sizing:border-box; }'
             + '@media (prefers-color-scheme:dark){ .aptx-panel:not(.aptx-light):not(.aptx-dark) {' + dark + '} }'
             + '.aptx-panel.aptx-dark {' + dark + '}'
-            // The node menu is a separate overlay (it cannot live inside the
-            // panel), so it carries its own copy of the palette and follows the
-            // same light / dark rules.
-            + '.aptx-node-menu {'
+            // The node menu and the search suggestions are separate overlays
+            // (they cannot live inside the panel), so they carry their own
+            // copy of the palette and follow the same light / dark rules.
+            + '.aptx-node-menu, .aptx-suggest {'
             + '  --p-bg: rgba(255,255,255,0.97); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2;'
             + '  --p-line:#e3e9f0; --p-line-strong:#cad6e1; --p-surface2:#f3f6fa;'
             + '  --p-accent:#2f83f2; --p-accent-ink:#1c5fbf; --p-accent-weak:rgba(47,131,242,0.12);'
             + '}'
-            + '@media (prefers-color-scheme:dark){ .aptx-node-menu:not(.aptx-light):not(.aptx-dark) {' + dark + '} }'
-            + '.aptx-node-menu.aptx-dark {' + dark + '}'
+            + '@media (prefers-color-scheme:dark){ .aptx-node-menu:not(.aptx-light):not(.aptx-dark), .aptx-suggest:not(.aptx-light):not(.aptx-dark) {' + dark + '} }'
+            + '.aptx-node-menu.aptx-dark, .aptx-suggest.aptx-dark {' + dark + '}'
             // The menu itself: fixed 11px type, so it does NOT scale with the
             // tree's zoom the way the old svg-drawn menu did.
             + '.aptx-node-menu { position:absolute; z-index:1000; min-width:196px; max-width:280px; padding:4px;'
@@ -7729,9 +10203,27 @@ function (root, d3, forester, phyloXml) {
             + '  transition:background .1s,color .1s; }'
             + '.aptx-node-menu button:hover, .aptx-node-menu button:focus-visible {'
             + '  background:var(--p-accent); color:#fff; outline:none; }'
+            + '.aptx-node-menu button:disabled, .aptx-node-menu button:disabled:hover {'
+            + '  background:transparent; color:var(--p-faint); cursor:default; }'
             + '.aptx-node-menu button.aptx-menu-danger:hover, .aptx-node-menu button.aptx-menu-danger:focus-visible {'
             + '  background:#e5484d; color:#fff; }'
             + '.aptx-node-menu hr { border:0; border-top:1px solid var(--p-line); margin:3px 4px; }'
+            // The search suggestions: the node menu's chrome under the value box.
+            + '.aptx-suggest { position:absolute; z-index:1000; max-width:320px; padding:4px; box-sizing:border-box;'
+            + '  border:1px solid var(--p-line-strong); border-radius:10px; background:var(--p-bg); color:var(--p-ink);'
+            + '  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);'
+            + '  box-shadow:0 12px 30px -12px rgba(23,34,46,0.42),0 2px 6px -2px rgba(23,34,46,0.2);'
+            + '  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;'
+            + '  font-size:11px; line-height:1.45; }'
+            + '.aptx-suggest button { display:block; width:100%; text-align:left; margin:0; padding:4px 9px;'
+            + '  border:0; border-radius:6px; background:transparent; color:var(--p-ink); font:inherit;'
+            + '  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;'
+            + '  transition:background .1s,color .1s; }'
+            + '.aptx-suggest button b { font-weight:700; color:var(--p-accent); }'
+            + '.aptx-suggest button:hover, .aptx-suggest button.aptx-active { background:var(--p-accent); color:#fff; }'
+            + '.aptx-suggest button:hover b, .aptx-suggest button.aptx-active b { color:#fff; }'
+            + '.aptx-suggest-more { padding:4px 9px 2px; margin-top:3px; border-top:1px solid var(--p-line);'
+            + '  font-size:10px; color:var(--p-faint); }'
             // The node-data dialog, on the same palette as the panel and the menu.
             + '.aptx-dialog, .aptx-busy, .aptx-msa-nav {'
             + '  --p-bg: rgba(255,255,255,0.98); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2;'
@@ -7744,9 +10236,13 @@ function (root, d3, forester, phyloXml) {
             // The "working" card shown over the tree area while a big tree is
             // drawn. It covers the whole container so nothing underneath --
             // panel included -- can be clicked into a half-built view.
+            // cursor stays default on purpose: `progress` draws the macOS
+            // beach ball next to the pointer, which reads as "the program has
+            // hung" when the card is already saying exactly what is happening
+            // and for how many nodes. One clear signal, not two.
             + '.aptx-busy { position:absolute; inset:0; z-index:1000; display:grid; place-items:center;'
             + '  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;'
-            + '  font-size:12px; color:var(--p-ink); cursor:progress; }'
+            + '  font-size:12px; color:var(--p-ink); cursor:default; }'
             + '.aptx-busy-card { display:flex; align-items:center; gap:10px; padding:10px 16px 10px 13px;'
             + '  border:1px solid var(--p-line-strong); border-radius:12px; background:var(--p-bg);'
             + '  box-shadow:0 24px 48px -16px rgba(23,34,46,0.45),0 4px 12px -4px rgba(23,34,46,0.22); }'
@@ -7801,6 +10297,12 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-dialog-line + .aptx-dialog-line { border-top:1px solid var(--p-line); }'
             + '.aptx-dialog-key { flex:0 0 42%; color:var(--p-muted); }'
             + '.aptx-dialog-val { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }'
+            // the shortcuts cheat sheet: key chips in the key column
+            + '.aptx-shortcuts .aptx-dialog-key { flex-basis:38%; display:flex; align-items:center; }'
+            + '.aptx-shortcuts .aptx-dialog-val { align-self:center; }'
+            + '.aptx-keys { display:inline-flex; gap:3px; flex-wrap:wrap; }'
+            + '.aptx-kbd { font-family:inherit; font-size:10.5px; line-height:1; padding:3px 5px; min-width:18px; text-align:center; color:var(--p-ink); background:var(--p-surface2); border:1px solid var(--p-line-strong); border-bottom-width:2px; border-radius:4px; }'
+            + '.aptx-shortcuts-note { margin:8px 0 0; font-size:10.5px; line-height:1.4; color:var(--p-muted); }'
             + '.aptx-dialog-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;'
             + '  font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }'
             // The hover tooltip, on the same palette.
@@ -7852,13 +10354,24 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .' + TREE_DESC + ' .aptx-tree-name { font-weight:600; font-size:11.5px; line-height:1.35; color:var(--p-ink); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }'
             + '.aptx-panel .' + TREE_DESC + ' .aptx-tree-descr { margin-top:3px; font-size:10px; line-height:1.45; color:var(--p-muted); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }'
             + '.aptx-panel .' + TREE_DESC + '.aptx-expanded .aptx-tree-name, .aptx-panel .' + TREE_DESC + '.aptx-expanded .aptx-tree-descr { display:block; -webkit-line-clamp:unset; overflow:visible; }'
+            // A file with several trees: previous / picker / next in one row
+            + '.aptx-panel .aptx-tree-picker { display:flex; align-items:center; gap:4px; min-width:0; }'
+            + '.aptx-panel .aptx-tree-picker select { flex:1 1 auto; min-width:0; height:24px; }'
+            + '.aptx-panel .aptx-tree-picker .aptx-gbtn { flex:0 0 auto; min-width:26px; padding:0 4px; margin:0; }'
+            + '.aptx-panel .aptx-tree-picker + .' + TREE_DESC + ' { margin-top:5px; }'
             + '.aptx-panel .aptx-panel-title { font-size:12px; }'
             + '.aptx-panel fieldset { border:0; border-top:1px solid var(--p-line); margin:0; padding:6px 12px; min-width:0; }'
             + '.aptx-panel legend { float:none; width:auto; padding:0; margin:0 0 5px; font-size:9px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--p-faint); }'
             + '.aptx-panel label { cursor:pointer; }'
             + '.aptx-panel input[type=checkbox],.aptx-panel input[type=radio] { accent-color:var(--p-accent); width:13px; height:13px; vertical-align:-2px; margin:0 4px 0 0; }'
             // checkbox/radio + label as one item (used by the Display Data grid and the inline P/A/C and search-option rows)
-            + '.aptx-panel .aptx-check { display:flex; align-items:center; gap:6px; cursor:pointer; min-width:0; }'
+            // every item carries an invisible box, so the one that lights up
+            // (Auto-hide Labels while it is hiding) does not shift its neighbours
+            + '.aptx-panel .aptx-check { display:flex; align-items:center; gap:6px; cursor:pointer; min-width:0;'
+            + '  padding:1px 4px; margin:-1px -4px; border:1px solid transparent; border-radius:5px;'
+            + '  transition:border-color .15s,background .15s; }'
+            + '.aptx-panel .aptx-check.aptx-check-active { border-color:var(--p-accent); background:var(--p-accent-weak); }'
+            + '.aptx-panel .aptx-check.aptx-check-active > span { color:var(--p-accent-ink); font-weight:600; }'
             + '.aptx-panel .aptx-check > input { margin:0; flex:none; }'
             + '.aptx-panel .aptx-check > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }'
             + '.aptx-panel .aptx-checkgrid { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; }'
@@ -7875,7 +10388,9 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-search-menus { display:flex; gap:4px; margin:2px 0 3px; }'
             + '.aptx-panel .aptx-search-menus select { flex:1 1 0; width:auto; min-width:0; height:24px; font:inherit; }'
             // red cue for an unmatchable query (bad regex / non-number); box-shadow, since the value boxes carry an inline outline:none
-            + '.aptx-panel .aptx-search-invalid { box-shadow:0 0 0 2px #e5484d; border-color:#e5484d; }'
+            // specific enough to beat the plain input rule (which used to keep
+            // the border in the line colour, leaving only the ring)
+            + '.aptx-panel input[type=text].aptx-search-invalid { box-shadow:0 0 0 2px #e5484d; border-color:#e5484d; }'
             + '.aptx-panel .aptx-combine { display:flex; align-items:center; gap:8px; margin:6px 0 2px; }'
             + '.aptx-panel .aptx-combine .aptx-field-label { margin:0; flex:none; }'
             + '.aptx-panel .aptx-combine select { flex:1 1 auto; min-width:0; height:26px; font:inherit; }'
@@ -7938,10 +10453,19 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-zoomrow { display:flex; }'
             + '.aptx-panel .aptx-zoomrow .aptx-gbtn { flex:1 1 0; padding:0; }'
             + '.aptx-panel .aptx-zoomrow .aptx-gbtn:last-child { margin-right:0; }'
+            + '.aptx-panel .aptx-domrow { display:flex; align-items:center; gap:4px; margin:3px 0; }'
+            + '.aptx-panel .aptx-domrow .aptx-domlabel { flex:0 0 64px; font-size:10px; color:var(--p-muted); }'
+            + '.aptx-panel .aptx-domrow input[type=button] { width:30px; padding:0; margin:0; }'
+            + '.aptx-panel .aptx-domrow select { flex:1 1 auto; min-width:0; }'
+            + '.aptx-panel .aptx-domreadout { flex:1 1 auto; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; color:var(--p-ink); }'
             + '.aptx-panel .aptx-glyph { height:14px; width:auto; display:block; overflow:visible; }'
             + '.aptx-panel .aptx-seg .aptx-glyph { height:13px; }'
             + '.aptx-panel input[type=text],.aptx-panel select { font-family:inherit; font-size:11px; color:var(--p-ink); background:var(--p-surface2); border:1px solid var(--p-line-strong); border-radius:6px; max-width:100%; padding:3px 6px; }'
             + '.aptx-panel input[type=text]:focus,.aptx-panel select:focus { outline:none; border-color:var(--p-accent); box-shadow:0 0 0 3px var(--p-accent-weak); }'
+            // an invalid regex or number stays red WHILE TYPING: without this
+            // the focus rule above, more specific and later, painted the box in
+            // the accent until the focus left it
+            + '.aptx-panel input[type=text].aptx-search-invalid:focus { border-color:#e5484d; box-shadow:0 0 0 2px #e5484d; }'
             // --- collapsible sections, internal scroll, whole-panel hide ---
             // the panel is a child of the tree's container now, so it can be held
             // to that container's height rather than the whole viewport's
@@ -8259,6 +10783,32 @@ function (root, d3, forester, phyloXml) {
                 if (s.type) {
                     text += '- Type: ' + s.type + '<br>';
                 }
+                // The domain architecture, which phyloXML has always carried
+                // and this dialog has never shown: a reader could find a node
+                // by searching for one of its domains -- forester indexes them
+                // as the "Domain" search field -- and then see nothing about it
+                // here. Listed in POSITION order rather than file order, since
+                // an architecture is a line along the protein and reading it
+                // out of order tells you nothing.
+                let da = s.domain_architecture;
+                if (da && da.domains && da.domains.length > 0) {
+                    text += '- Domain architecture: '
+                        + (da.length ? da.length + ' aa, ' : '')
+                        + da.domains.length + (da.domains.length === 1 ? ' domain' : ' domains')
+                        + '<br>';
+                    da.domains.slice().sort(function (a, b) {
+                        return (a.from - b.from) || (a.to - b.to);
+                    }).forEach(function (dom) {
+                        let name = dom.name || '(unnamed)';
+                        let span = (dom.from !== undefined && dom.to !== undefined)
+                            ? dom.from + '-' + dom.to : '';
+                        // the confidence on a domain is its e-value; an
+                        // explicit 0 is a real score, so test for undefined
+                        let ev = (dom.confidence !== undefined && dom.confidence !== null)
+                            ? ' (E=' + dom.confidence + ')' : '';
+                        text += '-- ' + name + ': ' + span + ev + '<br>';
+                    });
+                }
             }
         }
         if (d.events) {
@@ -8494,7 +11044,8 @@ function (root, d3, forester, phyloXml) {
         [['Website', WEBSITE, 'cmzmasek.github.io/archaeopteryx-js'],
             ['Desktop version', DESKTOP_WEBSITE, 'cmzmasek.github.io/archaeopteryx'],
             ['Source code', SOURCE_WEBSITE, 'github.com/cmzmasek/archaeopteryx-js'],
-            ['License', LICENSE_WEBSITE, LICENSE_NAME]].forEach(function (row) {
+            ['License', LICENSE_WEBSITE, LICENSE_NAME],
+            ['Keyboard', null, 'shortcuts (' + (IS_MAC ? '\u2318 /' : 'Ctrl+/') + ')']].forEach(function (row) {
             let line = document.createElement('div');
             line.className = 'aptx-dialog-line';
             let key = document.createElement('span');
@@ -8503,9 +11054,19 @@ function (root, d3, forester, phyloXml) {
             let val = document.createElement('span');
             val.className = 'aptx-dialog-val';
             let a = document.createElement('a');
-            a.href = row[1];
-            a.target = '_blank';
-            a.rel = 'noopener noreferrer';
+            if (row[1]) {
+                a.href = row[1];
+                a.target = '_blank';
+                a.rel = 'noopener noreferrer';
+            } else {
+                // the shortcuts row opens the cheat sheet in place of the About box
+                a.href = '#';
+                a.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    shell.dialog.close();
+                    showShortcutsDialog();
+                });
+            }
             a.textContent = row[2];
             val.appendChild(a);
             line.appendChild(key);
@@ -8668,6 +11229,8 @@ function (root, d3, forester, phyloXml) {
 
             c0.insertAdjacentHTML('beforeend',makeDisplayControl());
 
+            c0.insertAdjacentHTML('beforeend',makeDomainControls());
+
             c0.insertAdjacentHTML('beforeend',makeZoomControl());
 
 
@@ -8718,9 +11281,14 @@ function (root, d3, forester, phyloXml) {
         }
 
 
-        on(SEARCH_FIELD_0, 'keyup', search0);
+        on(SEARCH_FIELD_0, 'keyup', searchValueKeyup);
 
-        on(SEARCH_FIELD_1, 'keyup', search1);
+        on(SEARCH_FIELD_1, 'keyup', searchValueKeyup);
+        wireSuggestions(0);
+        wireSuggestions(1);
+        // the list is placed in page coordinates: a scroll or resize moves the box out from under it
+        window.addEventListener('resize', closeSuggestions);
+        document.addEventListener('scroll', closeSuggestions, true);
 
         on(SEARCH_VALUE2_0, 'keyup', search0);
 
@@ -8775,6 +11343,23 @@ function (root, d3, forester, phyloXml) {
 
         on(DYNAHIDE_CB, 'click', dynaHideCbClicked);
         on(MSA_CB, 'click', msaCbClicked);
+        on(DOMAINS_CB, 'click', domainsCbClicked);
+        on(UNCOLLAPSE_ALL_BUTTON, 'click', uncollapseAll);
+        on(TREE_PREV_BUTTON, 'click', function () {
+            showTree(_treeIndex - 1);
+        });
+        on(TREE_NEXT_BUTTON, 'click', function () {
+            showTree(_treeIndex + 1);
+        });
+        on(TREE_SELECT, 'change', function () {
+            showTree(parseInt(this.value, 10));
+        });
+        onHoldRepeat(DOMAIN_WIDTH_DEC, function () { domainWidthStep(false); });
+        onHoldRepeat(DOMAIN_WIDTH_INC, function () { domainWidthStep(true); });
+        on(DOMAIN_EVALUE_DEC, 'click', function () { domainEvalueStep(-1); });
+        on(DOMAIN_EVALUE_INC, 'click', function () { domainEvalueStep(1); });
+        on(DOMAIN_LABELS_SELECT, 'change', domainLabelsChanged);
+        on(DOMAIN_GLOW_CB, 'click', domainGlowCbClicked);
         on(TIME_AXIS_CB, 'click', timeAxisCbClicked);
         on(TIME_GRID_CB, 'click', timeGridCbClicked);
 
@@ -8937,12 +11522,11 @@ function (root, d3, forester, phyloXml) {
         _docListenersBound = true;
 
         bindDoc('keyup', function (e) {
-            // The DELIBERATELY minimal shortcut set (user decision,
-            // 2026-09-03): Esc/Home reset, O cycles the overview corner,
-            // PageUp/PageDown size the font, and the wheel zooms. Everything
-            // else is a button -- the old Alt+letter combos were near-
-            // undiscoverable (macOS labels the key Option and types glyphs
-            // with it).
+            // The plain keys: Esc/Home reset, O cycles the overview corner,
+            // PageUp/PageDown size the font, and the wheel zooms. The old
+            // Alt+letter combos were near-undiscoverable (macOS labels the
+            // key Option and types glyphs with it); the Ctrl / Cmd combos
+            // that replaced them in 2026-09 live in SHORTCUTS, on keydown.
             if (isTypingTarget(e.target)) {
                 return; // nothing fires from inside a text box
             }
@@ -8959,7 +11543,11 @@ function (root, d3, forester, phyloXml) {
         });
 
         bindDoc('keydown', function (e) {
-            if (isTypingTarget(e.target)) {
+            if (e.defaultPrevented) {
+                return;
+            }
+            shortcutKeyDown(e);   // the Ctrl / Cmd combos (SHORTCUTS)
+            if (e.defaultPrevented || isTypingTarget(e.target)) {
                 return;
             }
             if (e.keyCode === VK_PAGE_UP) {
@@ -9048,13 +11636,23 @@ function (root, d3, forester, phyloXml) {
         // so tree-file text needs no escaping here. Both can be very long, so CSS
         // clamps each to a few lines; the caller (enableTreeDescExpand) adds the
         // click/keyboard expand affordance only when the text actually overflows.
+        // A launch with several trees puts the tree picker in the same
+        // fieldset, above the description; the picker shows the name, so
+        // the name line is left out then.
         function makeTreeDesc() {
-            let name = _treeData.name ? String(_treeData.name).trim() : '';
+            let several = _trees.length > 1;
+            let name = (_treeData.name && !several) ? String(_treeData.name).trim() : '';
             let desc = _treeData.description ? String(_treeData.description).trim() : '';
-            if (!name && !desc) {
+            if (!name && !desc && !several) {
                 return null;
             }
             let fieldset = document.createElement('fieldset');
+            if (several) {
+                fieldset.appendChild(makeTreePicker());
+            }
+            if (!name && !desc) {
+                return fieldset;
+            }
             let block = document.createElement('div');
             block.className = TREE_DESC;
             let tooltip = '';
@@ -9077,6 +11675,35 @@ function (root, d3, forester, phyloXml) {
             return fieldset;
         }
 
+        // A file with several trees: previous / picker / next in one row,
+        // the picker listing every tree by its name (or its number). Each
+        // opens fresh in the same container (showTree). The end buttons are
+        // disabled at the ends: the panel is rebuilt per tree, so the
+        // state set here is always current.
+        function makeTreePicker() {
+            let n = _trees.length;
+            let row = document.createElement('div');
+            row.className = 'aptx-tree-picker';
+            row.insertAdjacentHTML('beforeend', makeGlyphButton('tree_prev', TREE_PREV_BUTTON, 'previous tree'));
+            let select = document.createElement('select');
+            select.id = TREE_SELECT;
+            select.name = TREE_SELECT;
+            select.title = 'Tree ' + (_treeIndex + 1) + ' of ' + n + ' -- pick another';
+            for (let i = 0; i < n; ++i) {
+                let opt = document.createElement('option');
+                opt.value = String(i);
+                let treeName = _trees[i].name ? String(_trees[i].name).trim() : '';
+                opt.textContent = treeName || ('Tree ' + (i + 1));
+                opt.selected = (i === _treeIndex);
+                select.appendChild(opt);
+            }
+            row.appendChild(select);
+            row.insertAdjacentHTML('beforeend', makeGlyphButton('tree_next', TREE_NEXT_BUTTON, 'next tree'));
+            row.querySelector('#' + TREE_PREV_BUTTON).disabled = (_treeIndex === 0);
+            row.querySelector('#' + TREE_NEXT_BUTTON).disabled = (_treeIndex === n - 1);
+            return row;
+        }
+
         // Make the tree name/description block a keyboard-accessible
         // expand/collapse control, but only while its text is actually clamped
         // (otherwise the pointer cursor + click would be a misleading no-op).
@@ -9242,6 +11869,9 @@ function (root, d3, forester, phyloXml) {
             if (_basicTreeProperties.alignedMolSeqs && _basicTreeProperties.maxMolSeqLength > 0) {
                 opts.push(makeCheckboxItem('Alignment', MSA_CB, 'to show/hide the sequence alignment beside the tree (rectangular layout only)'));
             }
+            if (_basicTreeProperties.domainArchitectures) {
+                opts.push(makeCheckboxItem('Domain Architectures', DOMAINS_CB, 'to show/hide the protein domain architectures beside the tips', true));
+            }
             if (_timeInfo && _timeInfo.type) {
                 opts.push(makeCheckboxItem('Time Axis', TIME_AXIS_CB, 'to show/hide the '
                     + (_timeInfo.type === 'geologic' ? 'geologic (ICS) time axis' : 'calendar time axis')
@@ -9283,6 +11913,7 @@ function (root, d3, forester, phyloXml) {
             h = h.concat(makeGlyphButton('ladderize_asc', LADDERIZE_BUTTON, 'ladderize all'));
             h = h.concat(makeGlyphButton('whole_tree', RETURN_TO_SUPERTREE_BUTTON, 'return all the way to the complete tree (if in a sub-tree)'));
             h = h.concat(makeGlyphButton('up_one_level', RETURN_TO_SUPERTREE_BUTTON_BY_ONE, 'move up by one level towards the complete tree (if in a sub-tree)'));
+            h = h.concat(makeGlyphButton('uncollapse_all', UNCOLLAPSE_ALL_BUTTON, 'uncollapse all'));
             h = h.concat(makeGlyphButton('midpoint', MIDPOINT_ROOT_BUTTON, 'midpoint re-root'));
             h = h.concat('</div>');
             h = h.concat('</fieldset>');
@@ -9319,6 +11950,35 @@ function (root, d3, forester, phyloXml) {
             return h;
         }
 
+        // The desktop's domain controls, shown only while the Domain
+        // Architectures toggle is on (syncDomainControls): the track width,
+        // the E-value threshold with its readout, the label mode, the glow.
+        function makeDomainControls() {
+            let h = '<fieldset id="' + DOMAIN_CONTROLS + '" style="display:none">';
+            h = h.concat('<legend>Domain Architectures</legend>');
+            h = h.concat('<div class="aptx-domrow"><span class="aptx-domlabel">Track width</span>');
+            h = h.concat(makeButton('−', DOMAIN_WIDTH_DEC, 'narrow the domain tracks (hold to repeat)'));
+            h = h.concat(makeButton('+', DOMAIN_WIDTH_INC, 'widen the domain tracks (hold to repeat)'));
+            h = h.concat('</div>');
+            h = h.concat('<div class="aptx-domrow"><span class="aptx-domlabel">E-value ≤</span>');
+            h = h.concat(makeButton('−', DOMAIN_EVALUE_DEC, 'Decrease the E-value threshold by a factor of 10'));
+            h = h.concat('<span class="aptx-domreadout" id="' + DOMAIN_EVALUE_READOUT
+                + '" title="domains with an E-value up to this are drawn"></span>');
+            h = h.concat(makeButton('+', DOMAIN_EVALUE_INC, 'Increase the E-value threshold by a factor of 10'));
+            h = h.concat('</div>');
+            h = h.concat('<div class="aptx-domrow"><label class="aptx-domlabel" for="' + DOMAIN_LABELS_SELECT + '">Labels</label>');
+            h = h.concat('<select name="' + DOMAIN_LABELS_SELECT + '" id="' + DOMAIN_LABELS_SELECT
+                + '" title="where the domain names go: on the boxes (rectangular layout only), in a legend, or nowhere">');
+            h = h.concat('<option value="domains">On domains</option>');
+            h = h.concat('<option value="legend">Legend</option>');
+            h = h.concat('<option value="none">None</option>');
+            h = h.concat('</select></div>');
+            h = h.concat('<div class="aptx-checkgrid">'
+                + makeCheckboxItem('Glow', DOMAIN_GLOW_CB, 'a soft glow in each domain\'s own colour around its box') + '</div>');
+            h = h.concat('</fieldset>');
+            return h;
+        }
+
         function makeSliders() {
             let h = "";
             h = h.concat('<fieldset>');
@@ -9374,7 +12034,6 @@ function (root, d3, forester, phyloXml) {
             let val2 = idx === 0 ? SEARCH_VALUE2_0 : SEARCH_VALUE2_1;
             let reset = idx === 0 ? RESET_SEARCH_A_BTN : RESET_SEARCH_B_BTN;
             let resetTip = idx === 0 ? RESET_SEARCH_A_BTN_TOOLTIP : RESET_SEARCH_B_BTN_TOOLTIP;
-            let dl = idx === 0 ? SEARCH_DATALIST_0 : SEARCH_DATALIST_1;
             let h = "";
             h = h.concat('<label class="aptx-field-label" for="' + val + '">' + label + '</label>');
             h = h.concat('<div class="aptx-search-menus">');
@@ -9386,7 +12045,6 @@ function (root, d3, forester, phyloXml) {
             h = h.concat('<input class="aptx-search-value2" style="display:none" title="upper bound of the range" type="text" name="' + val2 + '" id="' + val2 + '">');
             h = h.concat(makeButton('R', reset, resetTip));
             h = h.concat('</div>');
-            h = h.concat('<datalist id="' + dl + '"></datalist>');
             return h;
         }
 
@@ -9500,6 +12158,7 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(VIS_CB, _state.showVisualizations);
         setCheckboxValue(DYNAHIDE_CB, _state.dynahide);
         setCheckboxValue(MSA_CB, _state.showMsa);
+        syncDomainControls();
         setCheckboxValue(TIME_AXIS_CB, _state.showTimeAxis);
         setCheckboxValue(TIME_GRID_CB, _state.timeAxisGrid);
         setCheckboxValue(SHORTEN_NODE_NAME_CB, _state.shortenNodeNames);
@@ -9570,11 +12229,16 @@ function (root, d3, forester, phyloXml) {
     // definite result -- with it on, ladderizing a tree that is already
     // ladderized REVERSES it, so the outcome depends on the order the tree
     // happened to arrive in.
+    // Returns the direction actually applied (largest first or not): when
+    // the tree already stood that way and alternating was asked for, the
+    // other one.
     function ladderizeSubtree(n, largestFirst, alternateIfUnchanged) {
         let changed = forester.ladderize(n, largestFirst);
         if (alternateIfUnchanged && !changed) {
             forester.ladderize(n, !largestFirst);
+            return !largestFirst;
         }
+        return largestFirst;
     }
 
     function setDisplayTypeButtons() {
@@ -9593,6 +12257,8 @@ function (root, d3, forester, phyloXml) {
 
     function updateButtonEnabledState() {
         syncZoomRowButtons(); // layout- and tree-dependent disables track every render
+        // the uncollapse-all button lives only while something is collapsed, as on the desktop
+        ((_root && collapseAllowed() && hasCollapsedIn(_root)) ? enableButton : disableButton)(byId(UNCOLLAPSE_ALL_BUTTON));
         if (_in_subtree) {
             enableButton(byId(RETURN_TO_SUPERTREE_BUTTON_BY_ONE));
             enableButton(byId(RETURN_TO_SUPERTREE_BUTTON));
@@ -9965,8 +12631,65 @@ function (root, d3, forester, phyloXml) {
 // Convenience methods for loading tree on HTML page
 // --------------------------------------------------------------
 
+    // The mode as parseTree / parseTrees accept it. The retired brackets
+    // flag used to be the third argument, so a boolean there means the old
+    // four-argument shape and the mode is the fourth; a string is the mode
+    // itself. PARSE_DEFAULTS, not literals -- initializeSettings applies the
+    // same object, and it runs at launch(), AFTER this has already parsed.
+    function resolveInternalLabelsMode(mode, legacyMode) {
+        let m = (typeof mode === 'boolean' || mode === undefined) ? legacyMode : mode;
+        if (typeof m === 'boolean') {
+            // the retired positional flag: true meant "every numeric internal
+            // label is a confidence", which is 'confidence'.
+            return m ? 'confidence' : PARSE_DEFAULTS.internalNumericLabels;
+        }
+        return m === undefined ? PARSE_DEFAULTS.internalNumericLabels : m;
+    }
+
+    // Every tree the data holds, the format picked from the content and the
+    // location: a Nexus TREES block, a New Hampshire text with one tree per
+    // ';', a phyloXML with several phylogenies; an Auspice dataset is one
+    // tree. Bare numeric internal labels are promoted on every tree.
+    function parseAllTrees(location, data, mode) {
+        requireForester();
+        let loc = location ? String(location).toLowerCase() : '';
+        let text = forester.isString(data) ? data : '';
+        let trees;
+        // Nexus announces itself with "#NEXUS" on the first line, so the
+        // content decides; the filename alone is enough too.
+        if (/^\s*#nexus\b/i.test(text) || /\.(nex|nexus)$/.test(loc)) {
+            trees = forester.parseNexus(data, true, false);
+            if (trees.length === 0) {
+                throw new Error('no tree found in the Nexus data');
+            }
+            trees.forEach(function (t) {
+                promoteInternalLabels(t, mode);
+            });
+        } else if (/^\s*\{/.test(text) || /\.json$/.test(loc)) {
+            trees = [archaeopteryx.parseAuspiceJson(data)];
+        } else if (/^\s*</.test(text) || loc.substr(-3, 3) === 'xml') {
+            // No other supported format can start with '<', so content alone
+            // is enough -- pasted phyloXML has no filename to go by.
+            requirePhyloXml();
+            trees = phyloXml.parse(data, {trim: true, normalize: true});
+            if (trees.length === 0) {
+                throw new Error('no phylogeny found in the phyloXML data');
+            }
+            trees.forEach(function (t) {
+                forester.addParents(t);
+            });
+        } else {
+            trees = forester.parseNewHampshireTrees(data, true, false);
+            trees.forEach(function (t) {
+                promoteInternalLabels(t, mode);
+            });
+        }
+        return trees;
+    }
+
     /**
-     * Convenience method for loading tree on HTML page
+     * Parses tree data for an HTML page: the FIRST tree the data holds
+     * (parseTrees returns them all).
      *
      * @param location - file name (only its extension is used; the content is
      *                    sniffed too, so a pasted tree with no name works)
@@ -9977,41 +12700,21 @@ function (root, d3, forester, phyloXml) {
      *                    position and is still accepted (and ignored) there,
      *                    with the mode following it.
      * @param legacyMode - the mode, when the retired flag occupies `mode`
-     * @returns {*}
+     * @returns {*} the first tree
      */
     archaeopteryx.parseTree = function (location, data, mode, legacyMode) {
-        // The retired brackets flag used to be the third argument, so a
-        // boolean there means the old four-argument shape and the mode is the
-        // fourth. A string is the mode itself.
-        let internalNumericLabels = (typeof mode === 'boolean' || mode === undefined) ? legacyMode : mode;
-        // PARSE_DEFAULTS, not literals -- initializeSettings applies the same
-        // object, and it runs at launch(), AFTER this has already parsed.
-        if (typeof internalNumericLabels === 'boolean') {
-            // the retired positional flag: true meant "every numeric internal
-            // label is a confidence", which is 'confidence'.
-            internalNumericLabels = internalNumericLabels
-                ? 'confidence' : PARSE_DEFAULTS.internalNumericLabels;
-        } else if (internalNumericLabels === undefined) {
-            internalNumericLabels = PARSE_DEFAULTS.internalNumericLabels;
-        }
-        let tree;
-        let loc = location ? String(location).toLowerCase() : '';
-        // Nexus announces itself with "#NEXUS" on the first line, so the
-        // content decides; the filename alone is enough too.
-        if ((forester.isString(data) && /^\s*#nexus\b/i.test(data))
-            || /\.(nex|nexus)$/.test(loc)) {
-            tree = archaeopteryx.parseNexus(data, internalNumericLabels);
-        } else if ((forester.isString(data) && /^\s*\{/.test(data)) || /\.json$/.test(loc)) {
-            tree = archaeopteryx.parseAuspiceJson(data);
-        } else if ((forester.isString(data) && /^\s*</.test(data))
-            || loc.substr(-3, 3) === 'xml') {
-            // No other supported format can start with '<', so content alone
-            // is enough -- pasted phyloXML has no filename to go by.
-            tree = archaeopteryx.parsePhyloXML(data);
-        } else {
-            tree = archaeopteryx.parseNewHampshire(data, internalNumericLabels);
-        }
-        return tree;
+        return parseAllTrees(location, data, resolveInternalLabelsMode(mode, legacyMode))[0];
+    };
+
+    /**
+     * Every tree the data holds, in file order, as an array: a Nexus TREES
+     * block, a New Hampshire text with several ';'-terminated trees, a
+     * phyloXML with several phylogenies (an Auspice dataset is one tree).
+     * launch() takes the array and shows the first, with a picker in the
+     * control panel for the others. Same arguments as parseTree.
+     */
+    archaeopteryx.parseTrees = function (location, data, mode, legacyMode) {
+        return parseAllTrees(location, data, resolveInternalLabelsMode(mode, legacyMode));
     };
 
     // Show the viewer's own "working" card in a container. For the part of a
@@ -10084,9 +12787,11 @@ function (root, d3, forester, phyloXml) {
                 + ' "internalNumericLabels".');
         }
         let c = config || {};
-        let tree;
+        let trees;
         try {
-            tree = archaeopteryx.parseTree(fileName, data,
+            // every tree the file holds: launch() shows the first and the
+            // panel's picker offers the rest
+            trees = archaeopteryx.parseTrees(fileName, data,
                 effectiveInternalLabelsMode(c));
         } catch (e) {
             // Worth catching only to say that it was the parse, not the launch,
@@ -10100,7 +12805,7 @@ function (root, d3, forester, phyloXml) {
         // launch() already reports its own failures well enough; wrapping them
         // added nothing but a prefix, and swallowing them left the caller with
         // a blank page and no way to find out why.
-        return archaeopteryx.launch(container, tree, config);
+        return archaeopteryx.launch(container, trees, config);
     };