archaeopteryx 3.3.0 → 3.4.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.3.0
+// 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.3.0';
+    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';
@@ -371,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
@@ -412,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';
@@ -500,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;
@@ -591,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;
@@ -612,15 +639,33 @@ 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.
     function currentZoomScale() {
         return _baseSvg ? d3.zoomTransform(_baseSvg.node()).k : 1;
@@ -1032,6 +1077,9 @@ function (root, d3, forester, phyloXml) {
         // 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};
     }
@@ -1103,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});
@@ -1420,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();
@@ -2001,8 +2052,19 @@ function (root, d3, forester, phyloXml) {
     // 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, root);
+            let s = forester.visualizationSummary(c, tips);
             c.values = s.values;
             c.counts = s.counts;
             c.coverage = s.coverage;
@@ -2625,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) {
@@ -2646,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
@@ -2668,6 +2779,7 @@ function (root, d3, forester, phyloXml) {
         if (_state.phylogram === true) {
             _yScale = branchLengthScaling(forester.getAllExternalNodes(_root), _w);
         }
+        placeRootStub();
 
         if (_state.circularDisplay) {
             let maxY = 0;
@@ -2691,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;
@@ -2710,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;
@@ -2736,6 +2865,7 @@ function (root, d3, forester, phyloXml) {
                 });
             }
         }
+        syncDynahideIndicator(_state.dynahide && !_state.unrootedDisplay && _dynahide_factor >= 2);
 
         updateButtonEnabledState();
 
@@ -2795,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()
@@ -3218,12 +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
@@ -3257,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) {
@@ -3460,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]);
                     }
@@ -3728,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;
         }
@@ -4329,9 +4469,11 @@ function (root, d3, forester, phyloXml) {
         'ladderizeTree',
         'nhExportWriteConfidences',
         'nodeLabels',
+        'onViewChange',
         'pngExportScale',
         'rootOffset',
         'supportDotMinimum',
+        'view',
         'zoomToFitUponWindowResize'
     ];
 
@@ -4548,7 +4690,7 @@ function (root, d3, forester, phyloXml) {
             throw new Error(ERROR + '"domainEvalueExponent" must be an integer from '
                 + forester.DOMAIN_EVALUE_EXPONENT_MIN + ' to ' + forester.DOMAIN_EVALUE_EXPONENT_MAX);
         }
-        _domain = {width: null, palette: null, next: 0, legendFrac: null};
+        _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;
@@ -4790,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') {
@@ -4892,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();
         }
@@ -4905,6 +5063,7 @@ function (root, d3, forester, phyloXml) {
 
         search0();
         search1();
+        settleViewNotification();
     }
 
     function bindDoc(type, fn, opts) {
@@ -4922,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
         };
     }
@@ -4974,6 +5151,11 @@ 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;
@@ -5029,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();
@@ -5039,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) {
@@ -5180,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();
@@ -5240,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;
@@ -5255,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) {
@@ -5589,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) {
@@ -5665,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
@@ -6025,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;
@@ -6525,187 +6770,1214 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
-    // ===================== 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.
+    // ===================== 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
 
-    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);
+    function collapseAllowed() {
+        return !_state.unrootedDisplay;
     }
 
-    // The track width W: a quarter of the viewport at first use (the
-    // layout's width, if smaller); d+ / d- scale it by 1.2 / 0.8 and stop
-    // at 2000 / 20.
-    function domainTrackWidth() {
-        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));
+    function isCollapsed(d) {
+        return d.collapsed === true && !!d.children && collapseAllowed();
+    }
+
+    // visits the displayed tree: a collapsed node, not what it hides
+    function forEachDisplayed(fn) {
+        if (!_root) {
+            return;
         }
-        return _domain.width;
+        (function walk(n) {
+            fn(n);
+            if (n.children && !isCollapsed(n)) {
+                for (let i = 0; i < n.children.length; ++i) {
+                    walk(n.children[i]);
+                }
+            }
+        })(_root);
     }
 
-    // In a radial layout the track is capped at a share of the radius, or a
-    // long architecture would run off the circle.
-    function domainEffectiveWidth() {
-        let w = domainTrackWidth();
-        if (radialDisplay()) {
-            let r = _state.circularDisplay ? (_radial ? _radial.maxRad : 0) : (_unroot ? _unroot.maxRad : 0);
-            if (r > 0) {
-                w = Math.min(w, DOMAIN_RADIAL_WIDTH_FRACTION * r);
+    function displayedTips() {
+        let out = [];
+        forEachDisplayed(function (n) {
+            if (!n.children) {
+                out.push(n);
             }
-        }
-        return w;
+        });
+        return out;
     }
 
-    // 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;
+    function displayedLeafCount() {
+        let count = 0;
+        forEachDisplayed(function (n) {
+            if (!n.children || isCollapsed(n)) {
+                count++;
+            }
+        });
+        return count;
     }
 
-    // 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;
+    function hasCollapsedIn(node) {
+        let found = false;
+        forester.preOrderTraversal(node, function (n) {
+            if (n.collapsed === true && n.children) {
+                found = true;
+            }
+        });
+        return found;
     }
 
-    // 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;
+    function collapseToggle(d) {
+        if (!collapseAllowed() || !d.children || !d.parent || !d.parent.parent) {
+            return;
         }
-        return DOMAIN_TRACK_START_GAP + domainTrackWidth() + DOMAIN_TRACK_END_GAP;
+        d.collapsed = !d.collapsed;
+        calcMaxExtLabel();
+        scheduleUpdate(null, 0);
     }
 
-    function domainRadialExtent() {
-        if (!domainsShown() || !radialDisplay()) {
-            return 0;
-        }
-        return DOMAIN_RADIAL_GAP + domainEffectiveWidth() + DOMAIN_TRACK_END_GAP;
+    function uncollapse(node) {
+        forester.preOrderTraversal(node, function (n) {
+            n.collapsed = false;
+        });
+        calcMaxExtLabel();
+        scheduleUpdate(null, 0);
     }
 
-    // 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;
+    function uncollapseAll() {
+        if (_root) {
+            uncollapse(_root);
         }
-        return _domain.palette;
     }
 
-    function domainColor(name) {
-        if (!name) {
-            return forester.DOMAIN_UNNAMED_COLOR;
+    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();
         }
-        let palette = domainPalette();
-        if (palette[name] === undefined) {
-            palette[name] = _domain.next++;
+        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;
+            }
         }
-        return forester.domainQualitativeColor(palette[name]);
+        let prefix = forester.commonNamePrefix(d, forester.nodeLabelProperty(_treeData));
+        prefix = prefix ? prefix.replace(/[\s_\-.:|/]+$/, '') : '';
+        return prefix.length >= 2 ? prefix : '';
     }
 
-    function domainBoxHeight(pitch) {
-        return Math.max(DOMAIN_BOX_MIN_H, Math.min(DOMAIN_BOX_MAX_H, Math.round(pitch)));
+    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 drawDomainArchitectures() {
-        if (!_svgGroup) {
-            return;
+    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 + ']';
         }
-        _svgGroup.selectAll('g.aptx-domains').remove();
-        if (!domainsShown() || !_root) {
-            return;
+        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 tips = forester.getAllExternalNodes(_root).filter(function (d) {
-            return _state.unrootedDisplay ? (d.ux !== undefined) : (d.x !== undefined);
+        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;
+            }
         });
-        let f = domainScale();
-        if (tips.length === 0 || !(f > 0) || !isFinite(f)) {
-            return;
+        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));
+            }
         }
-        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 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');
             }
-            return 'url(#' + id + ')';
+        });
+    }
+
+    // ===================== 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 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);
+        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 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);
+    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
@@ -6782,7 +8054,7 @@ function (root, d3, forester, phyloXml) {
         // 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 = 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;
@@ -6918,9 +8190,16 @@ function (root, d3, forester, phyloXml) {
         if (grow ? w >= DOMAIN_WIDTH_MAX : w <= DOMAIN_WIDTH_MIN) {
             return;
         }
-        _domain.width = w * (grow ? DOMAIN_WIDTH_GROW : DOMAIN_WIDTH_SHRINK);
+        setDomainTrackWidth(w * (grow ? DOMAIN_WIDTH_GROW : DOMAIN_WIDTH_SHRINK));
         syncDomainControls();
-        scheduleUpdate(null, 0);
+        // 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) {
@@ -6969,7 +8248,9 @@ function (root, d3, forester, phyloXml) {
 
     // Search B starts hidden to keep the panel compact; one click (or a
     // configured initial value) reveals it, and it stays revealed.
-    function revealSearchB() {
+    // 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 = '';
@@ -6978,6 +8259,10 @@ function (root, d3, forester, phyloXml) {
         if (tgl) {
             tgl.style.display = 'none';
         }
+    }
+
+    function revealSearchB() {
+        showSearchB();
         let f = byId(SEARCH_FIELD_1);
         if (f) {
             f.focus();
@@ -7014,7 +8299,81 @@ function (root, d3, forester, phyloXml) {
         // 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());
+        // 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) {
@@ -7050,7 +8409,7 @@ function (root, d3, forester, phyloXml) {
         // average branch length (see bl()), which would shift every band.
         let anchor = null;
         let maxTipX = 0;
-        forester.preOrderTraversal(_root, function (n) {
+        forEachDisplayed(function (n) {
             if (n.children) {
                 return;
             }
@@ -7088,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;
@@ -7322,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) {
@@ -7395,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);
         }
     }
@@ -7424,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();
                     }
                 },
@@ -7440,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);
 
@@ -7585,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();
@@ -7695,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.suggest !== false && 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;
+        }
+        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.setAttribute('list', dlId);
+        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);
+        });
     }
 
 
@@ -7745,6 +9333,7 @@ function (root, d3, forester, phyloXml) {
             _radialLabelsHorizontal = false;
         }
         syncZoomRowButtons();
+        afterUpdate(syncDomainControls);   // the track width buttons follow the layout's own width
         zoomToFit();
     }
 
@@ -7944,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();
@@ -8008,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();
     }
@@ -8502,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);
@@ -8511,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)) {
@@ -8547,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;'
@@ -8575,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;'
@@ -8651,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.
@@ -8702,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; }'
@@ -8725,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; }'
@@ -8797,6 +10462,10 @@ function (root, d3, forester, phyloXml) {
             + '.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
@@ -9375,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');
@@ -9384,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);
@@ -9601,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);
 
@@ -9659,6 +11344,16 @@ 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); });
@@ -9827,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
             }
@@ -9849,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) {
@@ -9938,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 = '';
@@ -9967,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).
@@ -10176,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>');
@@ -10296,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">');
@@ -10308,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;
         }
 
@@ -10493,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() {
@@ -10516,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));
@@ -10888,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)
@@ -10900,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
@@ -11007,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,
@@ -11023,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);
     };