archaeopteryx 3.15.0 → 3.17.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.15.0
+// v 3.17.0
 // 2026-09-17
 //
 // 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.15.0';
+    const VERSION = '3.17.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';
@@ -158,6 +158,7 @@ function (root, d3, forester, phyloXml) {
     const XML_SUFFIX = '.xml';
     const FASTA_SUFFIX = '.fasta';
     const NEXUS_SUFFIX = '.nexus';
+    const TSV_SUFFIX = '.tsv';
 
 
     // ---------------------------
@@ -188,13 +189,7 @@ function (root, d3, forester, phyloXml) {
     const BACKGROUND_COLOR_DARK = '#182029';
     const BRANCH_COLOR_DARK = '#8fa1b3';
     const LABEL_COLOR_DARK = '#e7eef5';
-    const NAME_FOR_NH_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + NH_SUFFIX;
-    const NAME_FOR_PHYLOXML_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + XML_SUFFIX;
-    const NAME_FOR_PDF_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + PDF_SUFFIX;
-    const NAME_FOR_PNG_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + PNG_SUFFIX;
-    const NAME_FOR_SVG_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + SVG_SUFFIX;
-    const NAME_FOR_FASTA_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + FASTA_SUFFIX;
-    const NAME_FOR_NEXUS_DOWNLOAD_DEFAULT = 'archaeopteryx_js' + NEXUS_SUFFIX;
+    const DOWNLOAD_STEM_DEFAULT = 'archaeopteryx_js';
     const NODE_LABEL_GAP_DEFAULT = 10;
     const NODE_SIZE_DEFAULT_DEFAULT = 3;
     const VISUALIZATIONS_LEGEND_YPOS_DEFAULT = 30;
@@ -242,6 +237,7 @@ function (root, d3, forester, phyloXml) {
     const DUPLICATION_AND_SPECIATION_COLOR_COLOR = '#E69F00';
     const DUPLICATION_COLOR = '#D55E00';
     const FASTA_EXPORT_FORMAT = 'Fasta';
+    const TSV_EXPORT_FORMAT = 'TSV';
     const FONT_SIZE_MAX = 26;
     const FONT_SIZE_MIN = 2;
     // branch-data (support / branch-length) text sits 2px under the label
@@ -361,6 +357,12 @@ function (root, d3, forester, phyloXml) {
     const SUPPORT_DOTS_CB = 'suppdots_cb';
     const MAD_VALUES_CB = 'mad_cb';
     const DOWNLOAD_BUTTON = 'dl_b';
+    const DOWNLOAD_NAME_FIELD = 'dl_name';
+    const DOWNLOAD_AS_SHOWN_BUTTON = 'dl_shown_b';
+    const DOWNLOAD_FULL_SIZE_BUTTON = 'dl_full_b';
+    const DOWNLOAD_PNG_SCALES = [2, 4, 8];
+    const COPY_NEWICK_BUTTON = 'copy_nh_b';
+    const COPY_PNG_BUTTON = 'copy_png_b';
     const DYNAHIDE_CB = 'dynahide_cb';
     const MSA_CB = 'msa_cb';
     const MSA_LOGO_CB = 'msa_logo_cb';
@@ -381,7 +383,6 @@ function (root, d3, forester, phyloXml) {
     const TIME_AXIS_CB = 'timeaxis_cb';
     const TIME_GRID_CB = 'timegrid_cb';
     const MSA_SCROLL_ID = 'aptxmsascroll';
-    const EXPORT_FORMAT_SELECT = 'exp_f_sel';
     const FONT_SIZE_SLIDER = 'fs_sl';
     const EXTERNAL_LABEL_CB = 'extl_cb';
     const INTERNAL_LABEL_CB = 'intl_cb';
@@ -408,6 +409,20 @@ function (root, d3, forester, phyloXml) {
     const VIS_CB = 'vis_cb';
     const LADDERIZE_BUTTON = 'ladderize_b';
     const PHYLOGRAM_ALIGNED_BUTTON = 'phya_b';
+    // What the three display types DO, in one place: the tooltip, the reason a
+    // type is greyed, and the cheat-sheet row are all this sentence. A control
+    // named only after itself ("phylogram display (uses branch length
+    // values)") tells a reader who already knows what it is.
+    // Each says WHEN it is greyed, whether or not it is greyed now: that is a
+    // property of the control, not of the view, and a reader of the sheet in
+    // one layout is owed what happens in the others.
+    const PHYLOGRAM_WHAT = 'phylogram: branch lengths drawn to scale, so the tips end ragged.'
+        + ' Greyed in the circular layout, which always carries its labels to the outer ring,'
+        + ' so there the aligned phylogram is the one drawn';
+    const PHYLOGRAM_ALIGNED_WHAT = 'aligned phylogram: branch lengths to scale, with every tip'
+        + ' carried on to a common column, or in the circular layout to the outer ring.'
+        + ' Greyed in the unrooted layout, which has no column or ring to carry them to';
+    const CLADOGRAM_WHAT = 'cladogram: topology only, branch lengths ignored, every tip flush';
     const PHYLOGRAM_BUTTON = 'phy_b';
     const PHYLOGRAM_CLADOGRAM_CONTROLGROUP = 'phy_cla_g';
     const BRANCH_SCALE_CONTROLGROUP = 'branch_scale_g';
@@ -484,6 +499,12 @@ function (root, d3, forester, phyloXml) {
     // "Instance variables"
     // ---------------------------
     let _baseSvg = null;
+    // The Download section's two choices. Full size is the default: a figure
+    // is usually wanted whole, and "as shown" crops it to wherever the view
+    // happened to be. _pngScale starts from pngExportScale, snapped to the
+    // nearest of the scales the section offers.
+    let _downloadFullSize = true;
+    let _pngScale = 4;
     let _basicTreeProperties = null;
     let _displayHeight = 0;
     let _displayWidth = 0;
@@ -1553,8 +1574,11 @@ function (root, d3, forester, phyloXml) {
         }
     }
 
-    // items: [{label, action, danger}]; anchored at the click position.
-    function showNodeMenu(items, event, titleText) {
+    // items: [{label, action, danger}]; anchored at the click position, or
+    // under (else above) `anchorEl` when one is given. An item may carry a
+    // `detail` line under its label (`warn` tints it), and {heading} starts
+    // a titled group.
+    function showNodeMenu(items, event, titleText, anchorEl) {
         removeNodeMenu();
         if (!items || items.length < 1) {
             return;
@@ -1582,9 +1606,22 @@ function (root, d3, forester, phyloXml) {
                 menu.appendChild(note);
                 return;
             }
+            if (item.heading) {
+                let heading = document.createElement('div');
+                heading.className = 'aptx-node-menu-title aptx-node-menu-heading';
+                heading.textContent = item.heading;
+                menu.appendChild(heading);
+                return;
+            }
             let b = document.createElement('button');
             b.type = 'button';
             b.textContent = item.label;
+            if (item.detail) {
+                let detail = document.createElement('span');
+                detail.className = 'aptx-menu-detail' + (item.warn ? ' aptx-menu-warn' : '');
+                detail.textContent = item.detail;
+                b.appendChild(detail);
+            }
             if (item.title) {
                 b.title = item.title;
             }
@@ -1604,10 +1641,19 @@ function (root, d3, forester, phyloXml) {
         document.body.appendChild(menu);
 
         // Place it at the pointer, nudged back inside the window if it would
-        // otherwise hang off the right or bottom edge.
+        // otherwise hang off the right or bottom edge. Opened from a button,
+        // it hangs under the button, or stands on it where there is no room
+        // below -- the Download button sits at the foot of the panel.
         let x = (event && event.pageX !== undefined) ? event.pageX : 0;
         let y = (event && event.pageY !== undefined) ? event.pageY : 0;
         let r = menu.getBoundingClientRect();
+        if (anchorEl) {
+            let a = anchorEl.getBoundingClientRect();
+            let below = document.documentElement.clientHeight - a.bottom;
+            x = window.scrollX + a.left;
+            y = window.scrollY + ((below >= r.height + 12 || a.top < r.height + 12)
+                ? a.bottom + 4 : a.top - r.height - 4);
+        }
         let maxX = window.scrollX + document.documentElement.clientWidth - r.width - 8;
         let maxY = window.scrollY + document.documentElement.clientHeight - r.height - 8;
         menu.style.left = Math.max(window.scrollX + 8, Math.min(x, maxX)) + 'px';
@@ -1629,6 +1675,14 @@ function (root, d3, forester, phyloXml) {
             if (_nodeMenu && _nodeMenu.contains(e.target)) {
                 return;
             }
+            // A click on the button the menu hangs from closes it and goes no
+            // further: the button's own handler would open it straight
+            // again. Stopped here, in the capture phase at the document, the
+            // click never reaches the button -- so the button toggles.
+            if (anchorEl && anchorEl.contains(e.target)) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
             removeNodeMenu();
         };
         let onKey = function (e) {
@@ -2966,7 +3020,6 @@ function (root, d3, forester, phyloXml) {
             return {source: link.source.data, target: link.target.data};
         });
         _overviewLinks = links;   // the overview is built from these, not from the DOM
-        let gap = _state.nodeLabelGap;
 
         if (_state.phylogram === true) {
             _yScale = branchLengthScaling(forester.getAllExternalNodes(_root), _w);
@@ -3048,9 +3101,20 @@ function (root, d3, forester, phyloXml) {
         }
 
         if (_state.dynahide) {
-            if (_state.unrootedDisplay) {
-                // as on the desktop: no label auto-hiding in unrooted (there
-                // is no even row spacing to decimate against)
+            if (radialDisplay()) {
+                // The every-k-th DECIMATION does not run in either radial
+                // layout: it thins by index against even ROW spacing, which a
+                // fan does not have. An unrooted fan has no rows at all; a
+                // circular one has a ring, whose room is set by its
+                // circumference and not by the display's height. Measured on
+                // Caliciviridae_100 at 1100x850, the index rule kept 48 of 97
+                // names in circular while all 97 fitted the ring with NOT ONE
+                // overlapping pair, and on flu_h5 it kept 59 of 354 where 118
+                // are readable. (118 is the shipped rule measured; 100 was a
+                // greedy estimate in DOM order made before it was built, and
+                // is what this comment said until a review caught it against
+                // README and CHANGELOG.) Both are now thinned by hideCrowdedTipLabels
+                // instead, on whether the names actually overprint.
                 forester.preOrderTraversal(_root, function (n) {
                     n.hide = false;
                 });
@@ -3062,8 +3126,6 @@ function (root, d3, forester, phyloXml) {
                 });
             }
         }
-        syncDynahideIndicator(_state.dynahide && !_state.unrootedDisplay && _dynahide_factor >= 2);
-
         updateButtonEnabledState();
 
         // Only the nodes with something drawn for them individually get a
@@ -3130,11 +3192,10 @@ function (root, d3, forester, phyloXml) {
                 return makeFoundOutlineColor(d) ? '0.9px' : null;
             })
             .style('paint-order', 'stroke')
+            // anchor, dy and x all come from nodeLabelPlacement, which the
+            // occupancy box is built from too
             .attr('text-anchor', function (d) {
-                if (radialDisplay()) {
-                    return labelFlip(d) ? 'end' : 'start';
-                }
-                return d.children ? 'end' : 'start';
+                return nodeLabelPlacement(d).anchor;
             })
             .attr('transform', function (d) {
                 if (_state.unrootedDisplay) {
@@ -3162,42 +3223,10 @@ function (root, d3, forester, phyloXml) {
                 return 'rotate(' + labelAngleDeg(d) + ') translate(' + off + ',0)' + (labelFlip(d) ? ' rotate(180)' : '');
             })
             .attr('dy', function (d) {
-                if (radialDisplay()) {
-                    return '0.32em';
-                }
-                if (d.children) {
-                    // the desktop's above-branch internal label: the baseline
-                    // is lifted so the glyph bottoms sit just clear of the
-                    // horizontal branch line, instead of straddling it
-                    return -(Math.round(0.2 * _state.internalNodeFontSize) + 1) + 'px';
-                }
-                return 0.3 * _state.externalNodeFontSize + 'px';
+                return nodeLabelPlacement(d).dy + 'px';
             })
             .attr('x', function (d) {
-                if (radialDisplay()) {
-                    return labelFlip(d) ? -gap : gap;
-                }
-                if (!(d.children)) {
-                    if (_state.phylogram && _state.alignPhylogram) {
-                        return (-_yScale(d.distToRoot) + _w + gap);
-                    } else {
-                        return gap;
-                    }
-                } else {
-                    // right-aligned so the label ends just left of the node
-                    // (the desktop's publication-style placement); a long
-                    // label on a node near the root shifts right so its
-                    // leading characters stay on the canvas rather than
-                    // clipping off the left edge
-                    let label = makeNodeLabel(d) || '';
-                    let est = label.length * _state.internalNodeFontSize * 0.55;
-                    let leftmost = d.y - gap - est;
-                    let minX = 2 - _settings.rootOffset;
-                    if (leftmost < minX) {
-                        return -gap + (minX - leftmost);
-                    }
-                    return -gap;
-                }
+                return nodeLabelPlacement(d).x;
             });
 
         node.select('text.bllabel')
@@ -3218,8 +3247,9 @@ function (root, d3, forester, phyloXml) {
                 if (radialDisplay()) {
                     return 0;
                 }
-                if (d.parent) {
-                    return (d.parent.y - d.y + 1);
+                let p = drawnParent(d);
+                if (p) {
+                    return (p.y - d.y + 1);
                 } else {
                     return 0;
                 }
@@ -3239,8 +3269,9 @@ function (root, d3, forester, phyloXml) {
                 if (radialDisplay()) {
                     return 0;
                 }
-                if (d.parent) {
-                    return (0.5 * (d.parent.y - d.y));
+                let p = drawnParent(d);
+                if (p) {
+                    return (0.5 * (p.y - d.y));
                 } else {
                     return 0;
                 }
@@ -3261,7 +3292,8 @@ function (root, d3, forester, phyloXml) {
                 if (radialDisplay()) {
                     return 0;
                 }
-                return d.parent ? (0.5 * (d.parent.y - d.y)) : 0;
+                let p = drawnParent(d);
+                return p ? (0.5 * (p.y - d.y)) : 0;
             });
 
         node.select('text.brancheventlabel')
@@ -3275,8 +3307,9 @@ function (root, d3, forester, phyloXml) {
                 if (radialDisplay()) {
                     return 0;
                 }
-                if (d.parent) {
-                    return (0.5 * (d.parent.y - d.y));
+                let p = drawnParent(d);
+                if (p) {
+                    return (0.5 * (p.y - d.y));
                 }
             });
 
@@ -3361,7 +3394,7 @@ function (root, d3, forester, phyloXml) {
         // a collapsed clade's label always shows, so its guide does too: from
         // past the wedge's farthest tip to the label column
         let collapsedGuides = alignedRect ? nodes.filter(function (d) {
-            return isCollapsed(d) && !(_state.dynahide && d.hide);
+            return isCollapsed(d) && nameDrawn(d);
         }) : [];
         if (tipGuides || collapsedGuides.length > 0) {
             let ext = _svgGroup.insert('g', 'g').attr('class', 'aptx-align-ext');
@@ -3374,7 +3407,7 @@ function (root, d3, forester, phyloXml) {
             if (tipGuides) {
                 guideStyle(ext.selectAll('path.aptx-tip-guide')
                     .data(links.filter(function (d) {
-                        return (!d.target.children && !(_state.dynahide && d.target.hide));
+                        return (!d.target.children && nameDrawn(d.target));
                     }))
                     .enter().append('path').attr('class', 'aptx-tip-guide'))
                     .attr('d', function (d) {
@@ -3397,7 +3430,7 @@ function (root, d3, forester, phyloXml) {
             // tips while their labels show; a collapsed clade always (its label
             // always shows), from its wedge's farthest reach out to the ring
             let connected = nodes.filter(function (d) {
-                if (_state.dynahide && d.hide) {
+                if (!nameDrawn(d)) {
                     return false;
                 }
                 if (isCollapsed(d)) {
@@ -3870,8 +3903,8 @@ function (root, d3, forester, phyloXml) {
     // in y as much as in x, and branch length only sees x. Measured here
     // before adopting it: with Auto-hide Labels already ON, 240 of 267 drawn
     // support numbers overlapped another on flu_h5.xml (90%), 149 of 262 on
-    // Adenoviridae, 13 of 119 on bcl2 -- our auto-hide decimates TIP labels
-    // and had never touched branch data.
+    // Adenoviridae, 13 of 119 on bcl2 -- our auto-hide only thinned TIP labels
+    // then, and had never touched branch data.
     //
     // WHAT MUST MATCH, or the two viewers drop different marks:
     //  - the tie-break: PREORDER, first claim wins, so the mark nearer the
@@ -3903,11 +3936,29 @@ function (root, d3, forester, phyloXml) {
     // Measured from the font rather than assumed. The fallback is what this
     // font actually reports at 9px -- ascent 9, descent 2, line 11 -- read off
     // a rendered label's getBBox rather than guessed.
-    let _branchFontCache = null;
+    let _fontMetricsCache = new Map();
+
+    // how many names the radial overlap rule took on the last render, for the
+    // Auto-hide indicator: those layouts thin by overlap, not by index, so
+    // _dynahide_factor says nothing about them
+    let _radialNamesHidden = 0;
+
+    // and how many branch marks the crowding rule refused on the last render.
+    // The switch governs three things -- the every-k-th thinning, the radial
+    // overlap thinning and the branch-data rule -- and the indicator used to
+    // ask only about names, so a view where every name fitted but 201 numbers
+    // were being refused showed a dark toggle over a tree it was thinning.
+    // (Caliciviridae circular; apaf RECTANGULAR did it too, so this half was
+    // never right in any layout.)
+    let _branchMarksHidden = 0;
 
     function branchFontMetrics(fontPx) {
-        if (_branchFontCache && _branchFontCache.px === fontPx) {
-            return _branchFontCache;
+        // One cache for every size asked for, not one slot: labels and branch
+        // marks run at different sizes in the same pass, and a single slot
+        // would re-measure on every alternation.
+        let hit = _fontMetricsCache.get(fontPx);
+        if (hit) {
+            return hit;
         }
         let ctx = measureCtx();
         ctx.font = fontPx + 'px ' + FONT_DEFAULTS;
@@ -3924,9 +3975,10 @@ function (root, d3, forester, phyloXml) {
         if (!(descent >= 0)) {
             descent = fontPx * (2 / 9);
         }
-        _branchFontCache = {px: fontPx, ascent: ascent, descent: descent,
+        let metrics = {px: fontPx, ascent: ascent, descent: descent,
             height: ascent + descent};
-        return _branchFontCache;
+        _fontMetricsCache.set(fontPx, metrics);
+        return metrics;
     }
 
     // Where a branch mark sits on its branch, read off the rendered elements
@@ -3970,12 +4022,14 @@ function (root, d3, forester, phyloXml) {
             if (d.ux === undefined) {
                 return null;
             }
-            let p = (d.parent && d.parent.ux !== undefined) ? d.parent : null;
+            let p = drawnParent(d);
+            p = (p && p.ux !== undefined) ? p : null;
             return p ? [0.5 * (d.ux + p.ux), 0.5 * (d.uy + p.uy), angle] : [d.ux, d.uy, angle];
         }
         let r = radialRadius(d.y);
-        if (d.parent) {
-            r = 0.5 * (r + radialRadius(d.parent.y));
+        let p = drawnParent(d);
+        if (p) {
+            r = 0.5 * (r + radialRadius(p.y));
         }
         let pt = polarXY(radialAngle(d.x), r);
         return [pt[0], pt[1], angle];
@@ -4011,13 +4065,246 @@ function (root, d3, forester, phyloXml) {
         // used to claim nothing -- so the first child's number, landing in
         // almost the same place, was granted and painted over them. The one
         // place the pass could not keep its promise.
-        let span = d.parent ? (d.parent.y - d.y) : 0;
+        let p = drawnParent(d);
+        let span = p ? (p.y - d.y) : 0;
         let x = at.mid
             ? (d.y + (0.5 * span) - (w / 2))          // middle-anchored
             : (d.y + span + 1);                       // start-anchored
         return [x, (d.x + at.dy) - fm.ascent, w, h];
     }
 
+    // ---- the node's own label: one source for drawing it and for reserving
+    // its space ----
+    //
+    // The three attributes below (text-anchor, x, dy) and the occupancy box
+    // that keeps branch numbers off the name are the same decision, so they
+    // are made once here. Modelled after branchMarkPlacement, and for the same
+    // reason: a box that is not where the text is reserves the wrong space,
+    // and two copies of the arithmetic drift the first time one is edited.
+    function nodeLabelPlacement(d) {
+        let gap = _state.nodeLabelGap;
+        if (radialDisplay()) {
+            let flip = labelFlip(d);
+            return {anchor: flip ? 'end' : 'start', x: flip ? -gap : gap,
+                dy: 0.32 * nodeLabelFontSize(d)};
+        }
+        if (!d.children) {
+            let x = (_state.phylogram && _state.alignPhylogram)
+                ? (-_yScale(d.distToRoot) + _w + gap)
+                : gap;
+            return {anchor: 'start', x: x, dy: 0.3 * _state.externalNodeFontSize};
+        }
+        // the desktop's above-branch internal label: right-aligned so it ends
+        // just left of the node, and shifted right when a long label on a node
+        // near the root would otherwise clip off the left edge
+        let label = makeNodeLabel(d) || '';
+        let est = label.length * _state.internalNodeFontSize * 0.55;
+        let leftmost = d.y - gap - est;
+        let minX = 2 - _settings.rootOffset;
+        let x = (leftmost < minX) ? (-gap + (minX - leftmost)) : -gap;
+        return {anchor: 'end', x: x,
+            dy: -(Math.round(0.2 * _state.internalNodeFontSize) + 1)};
+    }
+
+    // The size the label is actually drawn at: a per-node style overrides the
+    // internal/external default, and the box has to follow it or a styled
+    // tree reserves the wrong space.
+    function nodeLabelFontSize(d) {
+        let style = nodeStyle(d);
+        if (style && style.fontSize) {
+            return style.fontSize;
+        }
+        return d.children ? _state.internalNodeFontSize : _state.externalNodeFontSize;
+    }
+
+    // The label's rectangle in the tree group's coordinates, as a start point
+    // on the baseline, a direction the text runs in, and its extents.
+    // Returns null when there is no label drawn.
+    function nodeLabelGeometry(d) {
+        let text = d._extLabelText;
+        if (!text) {
+            return null;
+        }
+        let fontPx = nodeLabelFontSize(d);
+        let style = nodeStyle(d);
+        let bold = getFoundColor(d)
+            || (style && (style.fontStyle === 'bold' || style.fontStyle === 'bold_italic'));
+        let w = legendTextWidth(text, (bold ? 'bold ' : '') + fontPx + 'px ' + FONT_DEFAULTS);
+        let fm = branchFontMetrics(fontPx);
+        let p = nodeLabelPlacement(d);
+        let at = layoutPointXY(d);
+        if (at[0] === undefined || at[1] === undefined) {
+            return null;   // not laid out (an unrooted node the layout never reached)
+        }
+        if (!radialDisplay() || _radialLabelsHorizontal) {
+            // upright text, whatever the layout: one axis-aligned rectangle
+            let base = at;
+            if (_state.circularDisplay && _radialLabelsHorizontal && !d.children && _radial) {
+                // the label rides out to its point on the ring, in screen terms
+                base = polarXY(radialAngle(d.x), _radial.maxRad);
+            }
+            let x0 = base[0] + p.x - (p.anchor === 'end' ? w : 0);
+            return {x: x0, y: (base[1] + p.dy) - fm.ascent, w: w, h: fm.height, angle: 0};
+        }
+        // Radial: the text starts a gap beyond the node (or beyond the ring,
+        // for a circular tip) and runs OUTWARD along the spoke -- on both
+        // halves of the fan, because the 180-degree flip that keeps the far
+        // half upright also reverses which end the anchor is.
+        //
+        // Built as an offset FROM THE NODE, not as a distance from the origin.
+        // A circular node lies on the ray its label runs along, so radius
+        // arithmetic happens to work there; an unrooted one does not -- its
+        // spoke angle is the direction its own branch came in at, which has
+        // nothing to do with its bearing from the centre. Measured with the
+        // radius version: unrooted still had 7 of 12 numbers printing through
+        // a name on flu_h5, because the boxes were being reserved in places
+        // no label was.
+        let theta = spokeAngle(d);
+        let along = _state.nodeLabelGap;
+        if (_state.circularDisplay && !d.children && _radial) {
+            along += _radial.maxRad - radialRadius(d.y);   // the pull out to the ring
+        }
+        let flip = labelFlip(d);
+        // the baseline offset is perpendicular to the text, and the flip
+        // carries it across with everything else
+        let off = flip ? -p.dy : p.dy;
+        let top = flip ? (off - fm.descent) : (off - fm.ascent);
+        let cos = Math.cos(theta), sin = Math.sin(theta);
+        return {x: at[0] + (cos * along) - (sin * top),
+            y: at[1] + (sin * along) + (cos * top),
+            w: w, h: fm.height, angle: theta};
+    }
+
+    // The label's own outline, as four corners in the tree group's
+    // coordinates: what the turned-box occupancy tests against.
+    function nodeLabelQuad(g) {
+        if (!g || !(g.w > 0) || !(g.h > 0)) {
+            return null;
+        }
+        let cos = Math.cos(g.angle), sin = Math.sin(g.angle);
+        let corners = [[0, 0], [g.w, 0], [g.w, g.h], [0, g.h]];
+        let quad = [];
+        for (let i = 0; i < corners.length; ++i) {
+            quad.push([g.x + (cos * corners[i][0]) - (sin * corners[i][1]),
+                g.y + (sin * corners[i][0]) + (cos * corners[i][1])]);
+        }
+        return quad;
+    }
+
+    // ---- crowded TIP LABELS, in both radial layouts ----
+    //
+    // The desktop's rule: a tip label is drawn only if its own outline overlaps
+    // no label already drawn this pass. Both fans use it; the rectangular
+    // layout keeps the every-k-th thinning, whose row pitch is a real quantity
+    // there.
+    //
+    // Unrooted had nothing at all before this -- its labels sit wherever the
+    // equal-angle layout put the tip. Circular had the rectangular rule, which
+    // reads the display's HEIGHT against the node count and says nothing about
+    // a ring: it kept 48 of 97 names on Caliciviridae where all 97 fit with no
+    // overlap, and 59 of 354 on flu_h5 where 118 are readable.
+    //
+    // A SEARCH HIT is placed without being asked, so it can be drawn across a
+    // name already down -- intended (the hit is what is being looked for), and
+    // measured: a 3-hit search on confidences unrooted puts 3 hits across
+    // non-hits, 8.1 px deep. It is the one case where "drawn only where it
+    // overlaps nothing" does not hold, and the README says so.
+    // Measured at 1100x850 before this, overlapping pairs among the labels
+    // drawn: 172 of 97 labels on Caliciviridae_100, 71 of 42 on confidences,
+    // 10 of 31 on apaf -- clumps of a dozen names printed through each other.
+    //
+    // OUTLINES, not their axis-aligned bounds: a name lying near its spoke has
+    // bounds several times its own area, and on a 48-label ring those bounds
+    // called 28 pairs crowded where a reader sees none.
+    //
+    // Order is the tree's own, root first (forester.preorderOf), which is also
+    // what the desktop's unrooted painter does -- it reaches an internal node
+    // before its subtree -- so both programs keep the same label when two
+    // contend. A search HIT is placed without being asked, so the name being
+    // looked for is always on the screen and everything after it keeps clear
+    // of it (Christian, 2026-09-26: hits are exempt for tip labels, and for
+    // nothing else).
+    // Is this node's name on the screen? Asked by everything drawn to a label
+    // -- the aligned guides, the circular ring connectors -- and it must be
+    // ONE question. It used to be spelled `_state.dynahide && d.hide`, which
+    // is the every-k-th rule and nothing else: when the radial layouts started
+    // hiding by overlap they left `hide` false for everyone, so on flu_h5 in
+    // circular 354 dashed connectors ran out to the ring for 118 names, 236 of
+    // them ending at nothing. `_labelDropped` is set by BOTH rules.
+    function nameDrawn(d) {
+        return !d._labelDropped;
+    }
+
+    function hideCrowdedTipLabels(nodes) {
+        _radialNamesHidden = 0;
+        if (!_state.dynahide || !radialDisplay()) {
+            return;
+        }
+        // no layout, no honest outlines; bailing draws everything
+        if (_state.unrootedDisplay ? !_unroot : !_radial) {
+            return;
+        }
+        let labels = forester.orientedOccupancy(Math.max(4, _state.externalNodeFontSize));
+        let ordered = forester.preorderOf(nodes);
+        for (let i = 0, len = ordered.length; i !== len; ++i) {
+            let d = ordered[i];
+            if (d.children || d._extLabelText === '') {
+                continue;
+            }
+            let quad = nodeLabelQuad(nodeLabelGeometry(d));
+            if (!quad) {
+                continue;
+            }
+            if (getFoundColor(d)) {
+                labels.occupy(quad);
+            } else if (!labels.claim(quad)) {
+                d._extLabelText = '';
+                d._labelDropped = true;
+                ++_radialNamesHidden;
+            }
+        }
+    }
+
+    // The boxes to reserve for a label. An upright label is one rectangle. A
+    // rotated one is reserved as a RUN of short boxes along its baseline,
+    // never as one axis-aligned box around the whole thing: the bounds of a
+    // rotated rectangle grow with its LENGTH, so a 120 px name lying at 30
+    // degrees would reserve several times its own area. Stepping by the line
+    // height bounds the error at one step whatever the name is.
+    //
+    // Honestly measured: the run and the single box draw the SAME numbers on
+    // every tree tried (apaf, Caliciviridae, confidences) bar one -- flu_h5
+    // unrooted, 4 against 3 -- and a purpose-built sparse fixture with 28-
+    // character names could not separate them at all
+    // (test_trees/label_reservation.html). The views that would show the
+    // difference are already saturated, and the ones with room refuse nothing
+    // either way. It is kept for the bound, not for the count: the error of
+    // the single box grows without limit as names get longer, and this is
+    // ten lines.
+    function nodeLabelClaimBoxes(g) {
+        if (!g || !(g.w > 0) || !(g.h > 0)) {
+            return [];
+        }
+        if (g.angle === 0) {
+            return [[g.x, g.y, g.w, g.h]];
+        }
+        let cos = Math.cos(g.angle), sin = Math.sin(g.angle);
+        let step = Math.max(4, g.h);
+        let boxes = [];
+        for (let t = 0; t < g.w; t += step) {
+            let len = Math.min(step, g.w - t);
+            // the four corners of this slice, in tree coordinates
+            let xs = [], ys = [];
+            for (const [a, b] of [[t, 0], [t + len, 0], [t + len, g.h], [t, g.h]]) {
+                xs.push(g.x + (cos * a) - (sin * b));
+                ys.push(g.y + (sin * a) + (cos * b));
+            }
+            let x0 = Math.min(...xs), y0 = Math.min(...ys);
+            boxes.push([x0, y0, Math.max(...xs) - x0, Math.max(...ys) - y0]);
+        }
+        return boxes;
+    }
+
     function prepareNodeDrawing(nodes) {
         let wantBl = _state.showBranchLengthValues === true;
         let wantConf = _state.showConfidenceValues === true || _state.showMadValues === true;
@@ -4034,7 +4321,12 @@ function (root, d3, forester, phyloXml) {
             }
             // Empty is the common case on a big tree: Auto-hide Labels blanks
             // them exactly when there are most nodes to blank.
-            d._extLabelText = (!_state.dynahide || !d.hide) ? (makeNodeLabel(d) || '') : '';
+            // WHY the text is empty matters downstream: a label the crowding
+            // rule took away is a different thing from a label the user
+            // switched off, and marks that accompany a name must tell them
+            // apart (drawDomainArchitectures).
+            d._labelDropped = _state.dynahide === true && d.hide === true;
+            d._extLabelText = d._labelDropped ? '' : (makeNodeLabel(d) || '');
             d._blText = wantBl ? asText(makeBranchLengthLabel(d)) : '';
             d._confText = wantConf ? asText(makeConfidenceValuesLabel(d)) : '';
             d._eventText = wantEvent ? asText(makeBranchEventsLabel(d)) : '';
@@ -4044,7 +4336,13 @@ function (root, d3, forester, phyloXml) {
         // childless <g class="node"> behind, and those are transformed on
         // every animation frame. On the big tree that was ~18,000 empty groups
         // per redraw, defeating the very thing the `drawn` filter is for.
+        // names first: the ones that survive then reserve their space inside
+        // hideCrowdedBranchData, and the marks are placed against what is left
+        hideCrowdedTipLabels(nodes);
         hideCrowdedBranchData(nodes);
+        // told after the rules have run, not before: what the unrooted rule
+        // hid is only known once it has looked at the labels
+        syncDynahideIndicator();
         for (let i = 0, len = nodes.length; i !== len; ++i) {
             let d = nodes[i];
             if (d._extLabelText !== '' || d._blText !== '' || d._confText !== ''
@@ -4070,8 +4368,9 @@ function (root, d3, forester, phyloXml) {
     // built in the tree group's own coordinates, which is where every mark is
     // actually drawn, so the circular and unrooted views are measured in their
     // own space and not in the cluster's. (The tip-label decimation that shares
-    // the toggle is still skipped in unrooted: that one needs even row spacing
-    // to decimate against, and there is none.)
+    // the toggle runs in the rectangular layout alone; both fans have no rows
+    // to decimate against, and hideCrowdedTipLabels thins their names by
+    // overlap instead, running before this does.)
     function hideCrowdedBranchData(nodes) {
         if (!_state.dynahide) {
             return;
@@ -4082,6 +4381,24 @@ function (root, d3, forester, phyloXml) {
         if ((_state.circularDisplay && !_radial) || (_state.unrootedDisplay && !_unroot)) {
             return;
         }
+        _branchMarksHidden = 0;
+        // Each granted mark's claimed box is kept on the node, as a label's is
+        // (_labelBoxes). Names have had an ink-coverage check since the
+        // reservation went in -- every point of a drawn name must lie inside
+        // the space it claimed -- and branch MARKS never did, which is the
+        // half that failed on a Linux CI runner while the label half passed.
+        for (let i = 0; i < nodes.length; ++i) {
+            nodes[i]._markBoxes = null;
+        }
+        let stash = function (d, kind, box) {
+            if (!box) {
+                return;
+            }
+            if (!d._markBoxes) {
+                d._markBoxes = {};
+            }
+            d._markBoxes[kind] = box;
+        };
         let fontPx = _state.branchDataFontSize;
         let dotCell = 0;
         for (let i = 0; i < nodes.length; ++i) {
@@ -4093,6 +4410,33 @@ function (root, d3, forester, phyloXml) {
         let numbers = forester.labelOccupancy(cell);
         let symbols = forester.labelOccupancy(cell);
         let ordered = forester.preorderOf(nodes);
+
+        // THE NAMES GO DOWN FIRST, and they are not asked: a node label is
+        // drawn whatever else is there, so it reserves its space with occupy
+        // rather than claim. Everything below is then refused against it, and
+        // names outrank numbers -- the desktop's order, and the one a reader
+        // expects, since a name is what the tree is for and a value that has
+        // printed through one is worse than a value not drawn at all.
+        //
+        // Measured before this existed, at 1100x850 with both numbers on:
+        // 44 of 93 numbers printed through a name on flu_h5 in the
+        // rectangular layout, 30 of 55 on confidences, 10 of 15 unrooted.
+        // The 3.15.0 pass kept numbers off each OTHER and off nothing else.
+        for (let i = 0, len = ordered.length; i !== len; ++i) {
+            let boxes = nodeLabelClaimBoxes(nodeLabelGeometry(ordered[i]));
+            // kept on the node, beside the other per-render drawing state, so
+            // the reservation can be compared with the ink it is supposed to
+            // cover: a box that is merely SMALL -- short by a descent, or a
+            // few per cent narrow -- still hides nothing wrongly and still
+            // shows no overlap anywhere a number does not happen to sit. The
+            // desktop pins the same property pixel by pixel.
+            ordered[i]._labelBoxes = boxes.length ? boxes : null;
+            for (let b = 0; b < boxes.length; ++b) {
+                numbers.occupy(boxes[b][0], boxes[b][1], boxes[b][2], boxes[b][3]);
+                symbols.occupy(boxes[b][0], boxes[b][1], boxes[b][2], boxes[b][3]);
+            }
+        }
+
         for (let i = 0, len = ordered.length; i !== len; ++i) {
             let d = ordered[i];
             // Branch length first, then confidence: they sit on opposite sides
@@ -4102,12 +4446,18 @@ function (root, d3, forester, phyloXml) {
                 let b = branchMarkBox(d, 'bl', d._blText, fontPx);
                 if (b && !numbers.claim(b[0], b[1], b[2], b[3])) {
                     d._blText = '';
+                    ++_branchMarksHidden;
+                } else {
+                    stash(d, 'bl', b);
                 }
             }
             if (d._confText !== '') {
                 let b = branchMarkBox(d, 'conf', d._confText, fontPx);
                 if (b && !numbers.claim(b[0], b[1], b[2], b[3])) {
                     d._confText = '';
+                    ++_branchMarksHidden;
+                } else {
+                    stash(d, 'conf', b);
                 }
             }
             // Branch EVENTS are branch-anchored too, half a branch from the
@@ -4119,6 +4469,9 @@ function (root, d3, forester, phyloXml) {
                 let b = branchMarkBox(d, 'event', d._eventText, fontPx);
                 if (b && !numbers.claim(b[0], b[1], b[2], b[3])) {
                     d._eventText = '';
+                    ++_branchMarksHidden;
+                } else {
+                    stash(d, 'event', b);
                 }
             }
             if (d._suppDot) {
@@ -4129,9 +4482,10 @@ function (root, d3, forester, phyloXml) {
                 // do not rotate, so the radial case needs only the midpoint
                 let at = radialDisplay()
                     ? radialBranchMid(d)
-                    : [d.y + (0.5 * (d.parent.y - d.y)), d.x];
+                    : [d.y + (0.5 * (drawnParent(d).y - d.y)), d.x];   // one use
                 if (at && !symbols.claim(at[0] - r, at[1] - r, 2 * r, 2 * r)) {
                     d._suppDot = false;
+                    ++_branchMarksHidden;
                 }
             }
         }
@@ -4440,24 +4794,39 @@ function (root, d3, forester, phyloXml) {
         }
     };
 
+    // The node d's branch is DRAWN from: its parent in this layout. That is
+    // d.parent for every node but one -- in a subtree view the top node hangs
+    // from the wrapper the view was entered with, while its own parent keeps
+    // the coordinates of whatever layout last drew it. Every mark placed
+    // "halfway back to the parent" (support dots, confidence and branch length
+    // values, events) went there: into empty space, and further off with each
+    // subtree entered inside a subtree (Christian, 2026-09-28). Asked, not
+    // stored: a node link kept on every node made the representatives copy
+    // (copyTreeKeepingTips) deep-copy each node's whole ancestor chain --
+    // 5.4 s instead of 5 ms on a 6,000-deep tree (the review measured it).
+    function drawnParent(d) {
+        return (d === topNode()) ? _root : d.parent;
+    }
+
     // How long node d's branch is DRAWN, in layout units -- not its
     // branch_length: the gate for decorations that need room on the branch.
     function drawnBranchSpan(d) {
-        if (!d.parent) {
+        let p = drawnParent(d);
+        if (!p) {
             return 0;
         }
         if (_state.unrootedDisplay) {
-            if (d.ux === undefined || d.parent.ux === undefined) {
+            if (d.ux === undefined || p.ux === undefined) {
                 return 0;
             }
-            let dx = d.ux - d.parent.ux;
-            let dy = d.uy - d.parent.uy;
+            let dx = d.ux - p.ux;
+            let dy = d.uy - p.uy;
             return Math.sqrt((dx * dx) + (dy * dy));
         }
         if (_state.circularDisplay) {
-            return Math.abs(radialRadius(d.parent.y) - radialRadius(d.y));
+            return Math.abs(radialRadius(p.y) - radialRadius(d.y));
         }
-        return Math.abs(d.parent.y - d.y);
+        return Math.abs(p.y - d.y);
     }
 
     // The Support Dots threshold on the tree's own scale: the setting is a
@@ -4491,7 +4860,7 @@ function (root, d3, forester, phyloXml) {
     }
 
     function showSupportDot(d) {
-        if (!_state.showSupportDots || !d.parent
+        if (!_state.showSupportDots || !drawnParent(d)
             || !d.confidences || d.confidences.length === 0) {
             return false;
         }
@@ -4565,17 +4934,18 @@ function (root, d3, forester, phyloXml) {
     // Transform for a branch-data label (confidence / branch length / events):
     // rotate to the node's angle and sit at the midpoint of the branch (radially).
     function branchLabelTransform(d) {
-        if (!d.parent || (_state.unrootedDisplay && d.parent.ux === undefined)) {
+        let p = drawnParent(d);
+        if (!p || (_state.unrootedDisplay && p.ux === undefined)) {
             // no laid-out parent (the displayed subtree's root): angle only
             return 'rotate(' + labelAngleDeg(d) + ')';
         }
         let mid;
         if (_state.unrootedDisplay) {
-            let dx = d.ux - d.parent.ux;
-            let dy = d.uy - d.parent.uy;
+            let dx = d.ux - p.ux;
+            let dy = d.uy - p.uy;
             mid = -Math.sqrt((dx * dx) + (dy * dy)) / 2;
         } else {
-            mid = (radialRadius(d.parent.y) - radialRadius(d.y)) / 2;
+            mid = (radialRadius(p.y) - radialRadius(d.y)) / 2;
         }
         return 'rotate(' + labelAngleDeg(d) + ') translate(' + mid + ',0)' + (labelFlip(d) ? ' rotate(180)' : '');
     }
@@ -5089,11 +5459,11 @@ function (root, d3, forester, phyloXml) {
         internalNodeFontSize: 'font size is fixed at launch (11px) and changed only via the in-panel Font slider -- not a launch config key',
         branchDataFontSize: 'derived from the fixed label size (2px smaller, floor 6px) and changed only via the in-panel Font slider -- not a launch config key',
         // download filenames follow the tree's name
-        nameForNhDownload: 'download names follow "treeName"',
-        nameForPhyloXmlDownload: 'download names follow "treeName"',
-        nameForPngDownload: 'download names follow "treeName"',
-        nameForSvgDownload: 'download names follow "treeName"',
-        nameForFastaDownload: 'download names follow "treeName"',
+        nameForNhDownload: 'download names follow "treeName", or the Download section\'s Name field',
+        nameForPhyloXmlDownload: 'download names follow "treeName", or the Download section\'s Name field',
+        nameForPngDownload: 'download names follow "treeName", or the Download section\'s Name field',
+        nameForSvgDownload: 'download names follow "treeName", or the Download section\'s Name field',
+        nameForFastaDownload: 'download names follow "treeName", or the Download section\'s Name field',
         // which taxonomy / sequence field to label with is read off the tree
         showTaxonomyCode: 'taxonomy labelling follows what the tree contains',
         showTaxonomyScientificName: 'taxonomy labelling follows what the tree contains',
@@ -5165,8 +5535,12 @@ function (root, d3, forester, phyloXml) {
         showTaxonomyButton: 'shown automatically when the tree has taxonomies',
         showSequenceButton: 'shown automatically when the tree has sequences',
         showBranchColorsButton: 'the Visual Styles checkbox appears when the tree has branch colours or style properties',
-        showDynahideButton: 'shown automatically once the tree has enough tips to need it',
-        showShortenNodeNamesButton: 'shown automatically when the tree has long node names',
+        // These two are ALWAYS offered, deliberately: they do nothing on a tree
+        // that needs neither, and a control that comes and goes between trees
+        // is worse than one that is simply there. (Both messages used to
+        // promise a conditional appearance the code had already rejected.)
+        showDynahideButton: 'the Auto-hide Labels checkbox is always shown',
+        showShortenNodeNamesButton: 'the Short Names checkbox is always shown; it starts on when the tree has long node names',
         showExternalLabelsButton: 'always shown',
         showInternalLabelsButton: 'shown automatically when the tree has internal node data',
         // the collapse-by-depth / rank / feature feature is gone
@@ -5693,20 +6067,7 @@ function (root, d3, forester, phyloXml) {
         // The tree names itself; a caller-supplied name only ever disagreed with
         // the file. It is the stem of every download filename.
         _state.treeName = _treeData.name ? _treeData.name.trim().replace(/\W+/g, '_') : null;
-        _state.nameForNhDownload = _state.treeName
-            ? (_state.treeName + NH_SUFFIX) : NAME_FOR_NH_DOWNLOAD_DEFAULT;
-        _state.nameForPhyloXmlDownload = _state.treeName
-            ? (_state.treeName + XML_SUFFIX) : NAME_FOR_PHYLOXML_DOWNLOAD_DEFAULT;
-        _state.nameForPngDownload = _state.treeName
-            ? (_state.treeName + PNG_SUFFIX) : NAME_FOR_PNG_DOWNLOAD_DEFAULT;
-        _state.nameForPdfDownload = _state.treeName
-            ? (_state.treeName + PDF_SUFFIX) : NAME_FOR_PDF_DOWNLOAD_DEFAULT;
-        _state.nameForSvgDownload = _state.treeName
-            ? (_state.treeName + SVG_SUFFIX) : NAME_FOR_SVG_DOWNLOAD_DEFAULT;
-        _state.nameForFastaDownload = _state.treeName
-            ? (_state.treeName + FASTA_SUFFIX) : NAME_FOR_FASTA_DOWNLOAD_DEFAULT;
-        _state.nameForNexusDownload = _state.treeName
-            ? (_state.treeName + NEXUS_SUFFIX) : NAME_FOR_NEXUS_DOWNLOAD_DEFAULT;
+        _state.downloadStem = _state.treeName || DOWNLOAD_STEM_DEFAULT;
 
         // === undefined, not a truthy check: 0 is a legitimate explicit
         // position (the legend's top-left corner) and must survive, not be
@@ -6573,10 +6934,7 @@ function (root, d3, forester, phyloXml) {
                 } else {
                     filename = 'External_Node_Data_for_' + ext_nodes.length + '_Nodes.tsv';
                 }
-                const tsv = forester.externalNodeDataTsv(ext_nodes, function (n, i) {
-                    return (n.viewId !== undefined) ? n.viewId : i + 1;
-                });
-                saveAs(new Blob([tsv], {type: 'text/tab-separated-values'}), filename);
+                saveAs(new Blob([tipTableTsv(ext_nodes)], {type: 'text/tab-separated-values'}), filename);
                 update();
             }
 
@@ -9913,7 +10271,9 @@ function (root, d3, forester, phyloXml) {
         }
         if (_state.phylogram && !_state.alignPhylogram) {
             if (_state.unrootedDisplay) {
-                toCladegram();
+                toCladegram();          // unrooted cannot align
+            } else if (_state.circularDisplay) {
+                toCladegram();          // circular is already showing the aligned type
             } else {
                 toAlignedPhylogram();
             }
@@ -10017,6 +10377,274 @@ function (root, d3, forester, phyloXml) {
     }
 
     // The cheat sheet: every combo above, then the plain keys.
+    // ===================== The control-panel cheat sheet =====================
+    //
+    // Every control the panel is SHOWING, in the order it shows them, each
+    // beside the sentence that already explains it. The desktop's
+    // ControlPanelCheatSheet, and built the same way on one principle: nothing
+    // is written twice. A row's picture is the control's own glyph, cloned;
+    // a row's words are the tooltip the control already carries. So a new
+    // control needs no edit here -- it needs a tooltip, and
+    // test_trees/panel_descriptions.html fails by name for any visible control
+    // without one.
+    //
+    // Two rules of Christian's, 2026-09-25, which the desktop follows too:
+    // name and description are separated by a COLON, never a dash; and no live
+    // VALUES appear -- a label reading "Font size: 6" is cut at the colon, so
+    // the sheet says what the control is and never what it is currently set
+    // to. "A printed 40% is wrong for every reader but the one who printed
+    // it."
+    //
+    // Modeless, and placed beside the panel rather than over it: a sheet you
+    // must close to touch the control it describes is half a sheet.
+    const CHEAT_SHEET_DIALOG = 'aptx_cheatsheet';
+    let _cheatSheetBody = null;
+
+    // this viewer's own panel, not another viewer's on the same page
+    function cheatSheetPanel() {
+        return (_container && _container.querySelector(':scope > .aptx-panel'))
+            || document.querySelector('.aptx-panel');
+    }
+
+    // The words for one control: its own title, or the title of the <label>
+    // that names it -- which is a SIBLING, not an ancestor, for the select
+    // menus (makeSelectMenu puts it there).
+    function controlDescription(el) {
+        let n = el;
+        for (let i = 0; i < 4 && n; ++i) {
+            let t = (n.getAttribute && (n.getAttribute('title') || n.getAttribute('aria-label'))) || '';
+            if (t.trim() !== '') {
+                return t.trim();
+            }
+            n = n.parentElement;
+        }
+        if (el.id) {
+            let lab = document.querySelector('label[for="' + el.id + '"]');
+            let t = lab ? (lab.getAttribute('title') || lab.getAttribute('aria-label') || '') : '';
+            if (t.trim() !== '') {
+                return t.trim();
+            }
+        }
+        return '';
+    }
+
+    // What the control is called, with any live value cut away. A checkbox is
+    // named by its own text, a menu or slider by the label beside it, a glyph
+    // button by nothing -- its picture is its name, and the row shows that.
+    function controlName(el) {
+        // ONE cut, at the end, over whatever source the name came from.
+        //
+        // It used to be applied only to the two sources that could carry a
+        // value -- a <label for> and an aria-label -- and not to a checkbox's
+        // own text or a button's value. That left "no sheet name contains a
+        // colon" meaning two different things on the two programs: on the
+        // desktop every name IS a cut label, so the rule asserts the cut ran
+        // and can never fire on correct output; here it would ALSO have
+        // constrained what a control may be called, and a checkbox legitimately
+        // labelled "Ratio 1:1" would have failed it. Cutting everywhere makes
+        // the invariant mean the same thing on both sides.
+        //
+        // What the cut is doing here, exactly: our labels read "Color by:" and
+        // "Shape:", so it removes a TRAILING colon, and removing the cut fails
+        // the sheet's value rule by name ("Color by:"). What it is NOT doing
+        // here is removing a value -- nothing follows a colon on this panel,
+        // unlike the desktop's "Font size: 6". So it is exercised but for the
+        // lesser of its two reasons. (Said precisely because the looser
+        // version of this note -- "a no-op, removing it passes every check" --
+        // was true for about an hour and then was not, once the desktop's
+        // sharper value rule was adopted here.)
+        return cutAtValue(rawControlName(el));
+    }
+
+    // "Font size: 6" -> "Font size". The colon is where a value starts, and a
+    // value on a sheet is wrong for everyone but whoever was looking when it
+    // was made.
+    function cutAtValue(name) {
+        return name ? name.split(':')[0].trim() : '';
+    }
+
+    // What the control is called, before the cut. A checkbox is named by its
+    // own text, a menu or slider by the label beside it, a glyph button by
+    // nothing -- its picture is its name, and the row shows that.
+    function rawControlName(el) {
+        if (el.type === 'checkbox' || el.type === 'radio') {
+            let span = el.parentElement ? el.parentElement.querySelector('span') : null;
+            if (span && span.textContent.trim() !== '') {
+                return span.textContent.trim();
+            }
+        }
+        if (el.tagName === 'INPUT' && el.value && (el.type === 'button' || el.type === 'submit')) {
+            return el.value.trim();
+        }
+        if (el.id) {
+            let lab = document.querySelector('label[for="' + el.id + '"]');
+            if (lab && lab.textContent.trim() !== '') {
+                return lab.textContent.trim();
+            }
+        }
+        // a menu with no visible label of its own says what it is here
+        let aria = el.getAttribute('aria-label');
+        if (aria && aria.trim() !== '') {
+            return aria.trim();
+        }
+        // and a text button -- the hide toggle, the reset chips -- is its text
+        let own = (el.textContent || '').trim();
+        if (own !== '' && el.tagName === 'BUTTON' && !el.querySelector('svg')) {
+            return own;
+        }
+        // a segmented button drawn as TEXT rather than a glyph (Time / Div) is
+        // named by its own label, which is the only thing on it
+        let seg = el.closest ? el.closest('label.aptx-seg') : null;
+        if (seg && !seg.querySelector('svg')) {
+            let segText = (seg.textContent || '').trim();
+            if (segText !== '') {
+                return segText;
+            }
+        }
+        return '';
+    }
+
+    // What the user actually sees and clicks. A segmented button's <input> is
+    // 0x0 and transparent -- the visible thing is the <label> around it, which
+    // carries the glyph and the tooltip -- so asking the input whether it is
+    // on the screen answered no for all eight of them: the three layouts, the
+    // three display types and the time/divergence pair were absent from the
+    // sheet entirely (Christian, 2026-09-28).
+    function controlSurface(el) {
+        let box = el.getBoundingClientRect();
+        if (box.width > 0 || box.height > 0) {
+            return el;
+        }
+        let label = el.closest ? el.closest('label') : null;
+        if (label) {
+            let lb = label.getBoundingClientRect();
+            if (lb.width > 0 || lb.height > 0) {
+                return label;
+            }
+        }
+        return null;
+    }
+
+    function cheatSheetRows() {
+        let panel = cheatSheetPanel();
+        if (!panel) {
+            return [];
+        }
+        let rows = [];
+        let seen = new Set();
+        let all = panel.querySelectorAll('input, button, select');
+        for (let i = 0; i < all.length; ++i) {
+            let el = all[i];
+            // what the panel is SHOWING: a control the tree gives no data for
+            // is not on the screen and does not belong on the sheet. A
+            // DISABLED one is on the screen, and saying what it is is how a
+            // reader learns why it is greyed.
+            let surface = el.disabled ? (controlSurface(el) || el) : controlSurface(el);
+            if (!surface) {
+                continue;
+            }
+            let words = controlDescription(el);
+            if (words === '' || seen.has(el)) {
+                continue;
+            }
+            seen.add(el);
+            // the glyph belongs to the surface, not to a 0x0 input inside it
+            let svg = surface.querySelector ? surface.querySelector('svg.aptx-glyph') : null;
+            rows.push({name: controlName(el), words: words, glyph: svg});
+        }
+        return rows;
+    }
+
+    function renderCheatSheet(body) {
+        // everything but the standing lead paragraph
+        let keep = body.querySelector('.aptx-cheat-lead');
+        while (body.firstChild) {
+            body.removeChild(body.firstChild);
+        }
+        if (keep) {
+            body.appendChild(keep);
+        }
+        let rows = cheatSheetRows();
+        rows.forEach(function (row) {
+            let line = document.createElement('div');
+            line.className = 'aptx-dialog-line aptx-cheat-line';
+            let key = document.createElement('span');
+            key.className = 'aptx-dialog-key aptx-cheat-key';
+            if (row.glyph) {
+                let g = row.glyph.cloneNode(true);
+                g.removeAttribute('class');
+                g.setAttribute('class', 'aptx-glyph aptx-cheat-glyph');
+                key.appendChild(g);
+            }
+            if (row.name) {
+                let n = document.createElement('span');
+                n.className = 'aptx-cheat-name';
+                n.textContent = row.name;
+                key.appendChild(n);
+            }
+            let val = document.createElement('span');
+            val.className = 'aptx-dialog-val';
+            val.textContent = row.words;
+            line.appendChild(key);
+            line.appendChild(val);
+            body.appendChild(line);
+        });
+        if (rows.length === 0) {
+            let empty = document.createElement('p');
+            empty.className = 'aptx-shortcuts-note';
+            empty.textContent = 'No controls are showing.';
+            body.appendChild(empty);
+        }
+    }
+
+    // The panel is rebuilt on every render, so an open sheet is re-read from
+    // it rather than left describing a panel that has changed underneath.
+    function refreshCheatSheet() {
+        if (_cheatSheetBody && _cheatSheetBody.isConnected) {
+            renderCheatSheet(_cheatSheetBody);
+        }
+    }
+
+    function showCheatSheetDialog() {
+        let shell = makeDialogShell(CHEAT_SHEET_DIALOG, 'Control panel', 460);
+        shell.body.classList.add('aptx-shortcuts');
+        shell.body.classList.add('aptx-cheat');
+        // says what the reader is looking at, as the desktop's sheet does
+        let lead = document.createElement('p');
+        lead.className = 'aptx-cheat-lead';
+        lead.textContent = 'Every control the panel is showing, with the icon it draws and what it does.';
+        shell.body.appendChild(lead);
+        _cheatSheetBody = shell.body;
+        renderCheatSheet(shell.body);
+        shell.dialog.addEventListener('close', function () {
+            if (_cheatSheetBody === shell.body) {
+                _cheatSheetBody = null;
+            }
+        });
+        // modeless, as the colour picker is: the point is to read a row and
+        // click the control it names without closing anything
+        shell.dialog.show();
+        placeBesidePanel(shell.dialog);
+    }
+
+    // Beside the panel, never over it, and inside the window.
+    function placeBesidePanel(dialog) {
+        let panel = cheatSheetPanel();
+        let box = panel ? panel.getBoundingClientRect() : null;
+        let w = dialog.offsetWidth;
+        let h = dialog.offsetHeight;
+        let left = box ? (box.right + 10) : 10;
+        if (left + w > window.innerWidth - 6) {
+            left = box ? (box.left - w - 10) : 6;
+        }
+        setStyles(dialog, {
+            'position': 'fixed',
+            'margin': '0',
+            'left': Math.max(6, Math.min(window.innerWidth - w - 6, left)) + 'px',
+            'top': Math.max(6, Math.min(window.innerHeight - h - 6, box ? box.top : 10)) + 'px'
+        });
+    }
+
     function showShortcutsDialog() {
         let shell = makeDialogShell(SHORTCUTS_DIALOG, 'Keyboard shortcuts', 400);
         shell.body.classList.add('aptx-shortcuts');
@@ -10353,7 +10981,27 @@ function (root, d3, forester, phyloXml) {
             return;
         }
         let existing = _svgGroup.select('g.aptx-domains');
+        // An architecture goes WITH ITS NAME, and is left out when the name
+        // is. domainsShown() already ties the whole track to external labels
+        // being on; this is the same rule per tip, and it became necessary the
+        // day unrooted started hiding crowded names -- before that every tip
+        // in every layout kept its label, so a nameless architecture could not
+        // happen. Measured on apaf when it could: 7 of 31 tips drew an
+        // architecture with no name beside it, identifiable only by which
+        // spoke it sat on. (The desktop reached the same rule from the other
+        // end: a tip IMAGE painted before its label's claim was left orphaned
+        // under a neighbour's name.)
         let tips = (domainsShown() && _root) ? displayedTips().filter(function (d) {
+            // Keyed on "the RULE hid this name", not on "there is no name".
+            // The two part company the moment the user switches the name
+            // fields off: nothing is hidden by the rule then, every label is
+            // empty, and every architecture should still be drawn. Keying on
+            // the empty text took all 31 of apaf's architectures away with the
+            // Node Name checkbox -- shipped, and caught by the desktop
+            // warning us they had met the same reading of their own fix.
+            if (d._labelDropped) {
+                return false;
+            }
             return _state.unrootedDisplay ? (d.ux !== undefined) : (d.x !== undefined);
         }) : [];
         let f = tips.length > 0 ? domainScale() : 0;
@@ -11519,7 +12167,8 @@ function (root, d3, forester, phyloXml) {
 
     // what the viewer writes onto a tree's nodes, left off a tree cut out of it
     const VIEW_NODE_FIELDS = ['viewId', 'collapsed', 'x', 'y', 'x0', 'y0', 'id', 'hide', 'hasVis', 'distToRoot',
-        'ux', 'uy', 'uangle', '_style', '_suppDot', '_extLabelText', '_eventText', '_confText', '_blText'];
+        'ux', 'uy', 'uangle', '_style', '_suppDot', '_extLabelText', '_eventText', '_confText', '_blText',
+        '_labelBoxes', '_labelDropped', '_markBoxes'];
 
     // the whole tree's tip count, counted again only when the tree changes
     // (every change makes new _basicTreeProperties)
@@ -12315,16 +12964,27 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
+    // In CIRCULAR these two leave the aligned/unaligned flag alone. That
+    // layout aligns whatever the flag says, so the button shown as chosen
+    // there is "aligned" regardless -- and writing the flag from it would
+    // silently change the user's choice for the layouts that CAN express it.
+    // A user who likes the plain phylogram in rectangular, steps into
+    // circular, flips to the cladogram and back, and returns, would have
+    // found the aligned one waiting.
     function toAlignedPhylogram() {
         _state.phylogram = true;
-        _state.alignPhylogram = true;
+        if (!_state.circularDisplay) {
+            _state.alignPhylogram = true;
+        }
         setDisplayTypeButtons();
         scheduleUpdate(null, 0);
     }
 
     function toCladegram() {
         _state.phylogram = false;
-        _state.alignPhylogram = false;
+        if (!_state.circularDisplay) {
+            _state.alignPhylogram = false;
+        }
         setDisplayTypeButtons();
         scheduleUpdate(null, 0);
     }
@@ -12356,19 +13016,40 @@ function (root, d3, forester, phyloXml) {
         // against; an alignment / time axis is inherently horizontal. Synced
         // BEFORE the zoom-row early return, and (via updateButtonEnabledState)
         // on every render, so subtree switches keep them honest.
+        // WHICH of the two phylogram buttons is dead depends on the layout,
+        // and it is the one the layout CANNOT do -- not the one it always
+        // does. Circular always carries its external labels out to a common
+        // ring on dashed connectors, whatever is chosen, so the circular
+        // phylogram IS the aligned one: the unavailable option there is the
+        // UNALIGNED phylogram. Unrooted is the other way round -- it has no
+        // common edge to align to, so what it cannot do is align.
+        //
+        // (Greying the aligned button in circular was the first attempt, on
+        // the grounds that picking it changed nothing. True, but backwards:
+        // it disabled the button that describes what the layout does and left
+        // live the one it cannot do, and the panel then showed "phylogram"
+        // selected over a picture whose labels are plainly aligned. Christian
+        // spotted the inconsistency, 2026-09-27.)
+        let measured = _basicTreeProperties.branchLengths === true;
         let phyBtn = byId(PHYLOGRAM_BUTTON);
         if (phyBtn) {
-            phyBtn.disabled = _basicTreeProperties.branchLengths !== true;
+            phyBtn.disabled = !measured || _state.circularDisplay;
+            phyBtn.title = PHYLOGRAM_WHAT;
         }
         let alignBtn = byId(PHYLOGRAM_ALIGNED_BUTTON);
         if (alignBtn) {
-            alignBtn.disabled = _state.unrootedDisplay || _basicTreeProperties.branchLengths !== true;
+            alignBtn.disabled = !measured || _state.unrootedDisplay;
+            alignBtn.title = PHYLOGRAM_ALIGNED_WHAT;
         }
+        // Which button is SHOWN as chosen is layout-dependent too, and this
+        // was only re-synced when the display type changed -- so switching
+        // layout left the previous layout's answer on the screen.
+        setDisplayTypeButtons();
         // Auto-hide Labels stays live in every layout. It used to be greyed out
-        // in unrooted, where the tip-label decimation it governs does not run --
-        // but it also governs the crowded branch-data rule, which does run
-        // there, so greying it out left the user unable to switch off something
-        // that was happening.
+        // in unrooted, where the every-k-th tip-label decimation does not run --
+        // but it also governs the crowded branch-data rule, and now the
+        // unrooted tip-label rule, both of which do run there, so greying it
+        // out left the user unable to switch off what they could see.
         let msaCb = byId(MSA_CB);
         if (msaCb) {
             msaCb.disabled = radialDisplay();
@@ -12585,7 +13266,15 @@ function (root, d3, forester, phyloXml) {
     // 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) {
+    // Lights the toggle while it is actually taking something away, and says
+    // what. The switch governs three rules, and the light has to ask all three
+    // rather than whichever one was written first: the every-k-th thinning
+    // (rectangular, by index against the row pitch), the overlap thinning
+    // (both fans, by whether names would overprint) and the crowded
+    // branch-data rule (every layout). Asking only the first two left it dark
+    // over a circular tree with 201 numbers refused and every name drawn --
+    // and over a RECTANGULAR one with 18 refused, which was never right.
+    function syncDynahideIndicator() {
         let cb = byId(DYNAHIDE_CB);
         let item = cb ? cb.closest('.aptx-check') : null;
         if (!item) {
@@ -12594,10 +13283,23 @@ function (root, d3, forester, phyloXml) {
         if (item.dataset.baseTitle === undefined) {
             item.dataset.baseTitle = item.title;
         }
-        item.classList.toggle('aptx-check-active', !!active);
+        let parts = [];
+        if (!radialDisplay() && _dynahide_factor >= 2) {
+            parts.push('1 in ' + _dynahide_factor + ' labels shown');
+        } else if (radialDisplay() && _radialNamesHidden > 0) {
+            parts.push(_radialNamesHidden + ' name' + (_radialNamesHidden === 1 ? '' : 's')
+                + ' that would overprint');
+        }
+        if (_branchMarksHidden > 0) {
+            // said only when it is happening: the clause used to be printed
+            // unconditionally, which made a promise of every render
+            parts.push(_branchMarksHidden + ' branch value' + (_branchMarksHidden === 1 ? '' : 's')
+                + ' that would overlap');
+        }
+        let active = _state.dynahide === true && parts.length > 0;
+        item.classList.toggle('aptx-check-active', active);
         item.title = active
-            ? item.dataset.baseTitle + ', hiding now: 1 in ' + _dynahide_factor
-                + ' labels shown, and branch data that would overlap'
+            ? item.dataset.baseTitle + ', hiding now: ' + parts.join(', and ')
             : item.dataset.baseTitle;
     }
 
@@ -12617,12 +13319,163 @@ function (root, d3, forester, phyloXml) {
         scheduleUpdate(null, 0);
     }
 
-    function downloadButtonPressed() {
-        const s = byId(EXPORT_FORMAT_SELECT);
-        if (s) {
-            let format = s.value;
-            downloadTree(format);
+    // The Download button opens the format menu under itself; pressed again
+    // while the menu is open, it closes it.
+    function downloadButtonPressed(event) {
+        let btn = event.currentTarget;
+        showNodeMenu(downloadMenuItems(), null, null, btn);
+        // opened from the keyboard (a click with no pointer), the keyboard
+        // goes into the menu: Tab walks the formats, Escape closes it
+        if (event.detail === 0 && _nodeMenu) {
+            let first = _nodeMenu.querySelector('button');
+            if (first) {
+                first.focus();
+            }
+        }
+    }
+
+    // Every format says what it keeps: a Newick file silently drops
+    // everything but names, lengths and support, and a user picking by
+    // extension would never know.
+    function downloadMenuItems() {
+        let items = [];
+        let entry = function (format) {
+            return function () {
+                downloadTree(format);
+            };
+        };
+        items.push({heading: 'Graphics, ' + (_downloadFullSize ? 'full size' : 'as shown')});
+        items.push({label: 'SVG', detail: 'vector: edit it in Inkscape or Illustrator',
+            action: entry(SVG_EXPORT_FORMAT)});
+        if (pdfExportAvailable()) {
+            items.push({label: 'PDF', detail: 'vector: ready to print or to put in a paper',
+                action: entry(PDF_EXPORT_FORMAT)});
+        }
+        if (pngExportAvailable()) {
+            items.push({label: 'PNG', detail: 'image, at ' + _pngScale + '× the screen\'s resolution',
+                action: entry(PNG_EXPORT_FORMAT)});
+        }
+        let part = subtreeExtentNote();
+        items.push({heading: part ? 'Tree: ' + part : 'Tree'});
+        items.push({label: 'phyloXML', detail: 'keeps everything the tree carries: taxonomy, sequences, dates, properties',
+            action: entry(PHYLOXML_EXPORT_FORMAT)});
+        items.push({label: 'Newick', detail: 'names, branch lengths and support values only',
+            action: entry(NH_EXPORT_FORMAT)});
+        let nexus = nexusDownloadDetail();
+        items.push({label: 'Nexus', detail: nexus.text, warn: nexus.warn, action: entry(NEXUS_EXPORT_FORMAT)});
+        // FASTA only when there is something to write: a tip carrying a
+        // molecular sequence, aligned or not (same gate as the node menu's
+        // Fasta entries) -- on any other tree the download would be empty
+        items.push({heading: part ? 'Tip data: ' + part : 'Tip data'});
+        items.push({label: 'TSV', detail: 'a table, one row per tip: names, taxonomy, sequence names, '
+            + 'branch lengths and every property', action: entry(TSV_EXPORT_FORMAT)});
+        if (_basicTreeProperties && _basicTreeProperties.maxMolSeqLength > 0) {
+            items.push({label: 'FASTA', detail: 'every molecular sequence the tips carry',
+                action: entry(FASTA_EXPORT_FORMAT)});
+        }
+        return items;
+    }
+
+    // What a Nexus download will hold, asked of the WRITER rather than
+    // predicted: toNexus decides whether the sequences can form a matrix
+    // (equal lengths, unambiguous labels), and when they cannot it says why
+    // in a bracketed comment -- which is the sentence shown here, so the menu
+    // and the file can never disagree.
+    function nexusDownloadDetail() {
+        let plain = {text: 'the tree: names, branch lengths and support values', warn: false};
+        if (!_root || !_basicTreeProperties || !(_basicTreeProperties.maxMolSeqLength > 0)) {
+            return plain;
+        }
+        let nex;
+        try {
+            nex = forester.toNexus(treeForExport(), 9, _settings.nhExportWriteConfidences);
+        } catch {
+            return plain;
         }
+        if (nex.indexOf('Begin Characters;') >= 0) {
+            return {text: 'the tree and its alignment, in one file', warn: false};
+        }
+        // to the comment's own closing " ]" at the end of its line: a taxon
+        // label quoted inside the reason may itself hold a ']'
+        let why = /\[ Molecular sequences were not written: (.*?) \]$/m.exec(nex);
+        return {
+            text: 'the tree only, without the sequences: ' + (why ? why[1] : 'they cannot form a matrix')
+                + ' phyloXML and FASTA keep them.',
+            warn: true
+        };
+    }
+
+    // The file name the user typed, made safe, with the format's extension.
+    // A typed extension is not doubled up ("tree.svg" saves as tree.svg, and
+    // as tree.png from the PNG entry), and an empty field falls back to the
+    // tree's name.
+    function downloadFileName(suffix) {
+        let field = byId(DOWNLOAD_NAME_FIELD);
+        let stem = (field ? field.value : '').trim().replace(/[\\/:*?"<>|\u0000-\u001f]+/g, '_');
+        let lower = stem.toLowerCase();
+        [NH_SUFFIX, NEXUS_SUFFIX, XML_SUFFIX, FASTA_SUFFIX, TSV_SUFFIX, SVG_SUFFIX, PDF_SUFFIX, PNG_SUFFIX,
+            '.nex', '.nwk', '.newick', '.nh', '.nhx', '.tree', '.phyloxml', '.fa', '.fas', '.txt',
+            '.csv'].some(function (x) {
+            if (lower.length > x.length && lower.endsWith(x)) {
+                stem = stem.substring(0, stem.length - x.length);
+                return true;
+            }
+            return false;
+        });
+        if (stem.replace(/[._\s]/g, '') === '') {
+            stem = _state.downloadStem;
+        }
+        return stem + suffix;
+    }
+
+    function copyNewickPressed(event) {
+        let btn = event.currentTarget;
+        let nh = _root ? forester.toNewHampshire(_root, 9, true, _settings.nhExportWriteConfidences) : '';
+        copyText(nh).then(function (ok) {
+            flashButton(btn, ok ? 'Copied ✓' : 'Copy failed');
+        });
+    }
+
+    // The async clipboard API where the page allows it (a secure context);
+    // otherwise the old select-and-copy, so a page served over plain http
+    // still copies. Resolves to whether the text made it.
+    function copyText(text) {
+        let legacy = function () {
+            let ta = document.createElement('textarea');
+            ta.value = text;
+            ta.setAttribute('readonly', '');
+            ta.style.position = 'fixed';
+            ta.style.left = '-10000px';
+            document.body.appendChild(ta);
+            ta.select();
+            let ok = false;
+            try {
+                ok = document.execCommand('copy');
+            } catch {
+                ok = false;
+            }
+            ta.remove();
+            return ok;
+        };
+        if (navigator.clipboard && window.isSecureContext) {
+            return navigator.clipboard.writeText(text).then(function () {
+                return true;
+            }, legacy);
+        }
+        return Promise.resolve(legacy());
+    }
+
+    // A button says what just happened on its own face for a moment, then
+    // goes back to its name: no toast to find, and nothing left behind.
+    function flashButton(btn, text) {
+        if (btn.dataset.label === undefined) {
+            btn.dataset.label = btn.textContent;
+        }
+        btn.textContent = text;
+        clearTimeout(btn._flashTimer);
+        btn._flashTimer = setTimeout(function () {
+            btn.textContent = btn.dataset.label;
+        }, 1600);
     }
 
     function changeBaseBackgoundColor(color) {
@@ -12888,7 +13741,9 @@ function (root, d3, forester, phyloXml) {
     //    of open sections: three open sections measure anywhere from 215px to
     //    562px, so a count would not have bounded the height at all.
     const PANEL_SECTIONS_KEY = 'aptx-panel-sections';
-    const PANEL_SECTIONS_CLOSED_BY_DEFAULT = ['Zoom', 'Sizes', 'Domain Architectures'];
+    // Download too (Christian, 2026-09-28): four rows, and not something a
+    // session uses often.
+    const PANEL_SECTIONS_CLOSED_BY_DEFAULT = ['Zoom', 'Sizes', 'Domain Architectures', 'Download'];
 
     function loadPanelSections() {
         if (_panelSections) {
@@ -13236,6 +14091,14 @@ function (root, d3, forester, phyloXml) {
             + glyphDot(50, 29, 5.5);
     }
 
+    // a reference card: the outline, and the rows on it
+    function glyphCheatSheet() {
+        return '<rect x="18" y="12" width="64" height="76" rx="8"/>'
+            + glyphLine(32, 34, 68, 34)
+            + glyphLine(32, 50, 68, 50)
+            + glyphLine(32, 66, 56, 66);
+    }
+
     function glyphSun() {
         let s = glyphDot(50, 50, 20);
         for (let i = 0; i < 8; ++i) {
@@ -13304,6 +14167,7 @@ function (root, d3, forester, phyloXml) {
             case 'tree_prev': sw = 9; cap = 'round'; body = glyphChevron(false); break;
             case 'tree_next': sw = 9; cap = 'round'; body = glyphChevron(true); break;
             case 'info': sw = 7; cap = 'round'; body = glyphInfo(); break;
+            case 'cheat_sheet': sw = 7; cap = 'round'; body = glyphCheatSheet(); break;
             case 'sun': body = glyphSun(); break;
             case 'moon': body = glyphMoon(); break;
             default: throw new Error('unknown control-panel glyph: ' + kind);
@@ -13334,13 +14198,13 @@ function (root, d3, forester, phyloXml) {
         }
         // Dark palette tokens, shared by the system-preference default and the
         // explicit "dark" choice from the header light/dark switch.
-        let dark = '  --p-bg:rgba(24,35,46,0.86); --p-ink:#e7eef5; --p-muted:#94a4b3; --p-faint:#6f8090;'
+        let dark = '  --p-bg:rgba(24,35,46,0.86); --p-ink:#e7eef5; --p-muted:#94a4b3; --p-faint:#6f8090; --p-warn:#f0a35e;'
             + '  --p-line:#27343f; --p-line-strong:#35434f; --p-surface2:#202d38;'
             + '  --p-accent:#57a6ff; --p-accent-ink:#9cc7ff; --p-accent-weak:rgba(87,166,255,0.18);'
             + '  --p-shadow-sm:0 1px 2px rgba(0,0,0,0.4);';
         let css = ''
             + '.aptx-panel {'
-            + '  --p-bg: rgba(255,255,255,0.86); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2;'
+            + '  --p-bg: rgba(255,255,255,0.86); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2; --p-warn:#b15a0b;'
             + '  --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);'
             + '  --p-shadow-sm:0 1px 2px rgba(23,34,46,0.12);'
@@ -13367,7 +14231,7 @@ function (root, d3, forester, phyloXml) {
             // (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-bg: rgba(255,255,255,0.97); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2; --p-warn:#b15a0b;'
             + '  --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);'
             + '}'
@@ -13397,6 +14261,17 @@ function (root, d3, forester, phyloXml) {
             + '  background:#e5484d; color:#fff; }'
             + '.aptx-node-menu hr { border:0; border-top:1px solid var(--p-line); margin:3px 4px; }'
             + '.aptx-node-menu-note { padding:4px 9px 7px; color:var(--p-ink); white-space:normal; }'
+            // A group title inside a menu (the Download menu's Graphics / Tree
+            // / Sequences): the title's type, set off from the group above.
+            + '.aptx-node-menu-heading { margin-top:4px; }'
+            + '.aptx-node-menu-heading:first-child { margin-top:0; }'
+            // an entry's second line: what that choice keeps or does
+            + '.aptx-node-menu button .aptx-menu-detail { display:block; white-space:normal; font-size:10px;'
+            + '  line-height:1.35; color:var(--p-muted); margin-top:1px; }'
+            + '.aptx-node-menu button .aptx-menu-detail.aptx-menu-warn { color:var(--p-warn); }'
+            + '.aptx-node-menu button:hover .aptx-menu-detail, .aptx-node-menu button:focus-visible .aptx-menu-detail {'
+            + '  color:inherit; opacity:0.86; }'
+            + '.aptx-node-menu:has(.aptx-menu-detail) { width:264px; max-width:264px; }'
             // 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);'
@@ -13415,7 +14290,7 @@ function (root, d3, forester, phyloXml) {
             + '  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;'
+            + '  --p-bg: rgba(255,255,255,0.98); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2; --p-warn:#b15a0b;'
             + '  --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);'
             + '}'
@@ -13502,6 +14377,18 @@ function (root, d3, forester, phyloXml) {
             + '.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); }'
+            // the cheat sheet: a scrolling card of glyph + name : description
+            // 31 rows is taller than a short window; the card scrolls rather
+            // than running off the bottom, and the title bar stays put
+            + '#' + CHEAT_SHEET_DIALOG + ' { max-height:min(78vh, 760px); display:flex; flex-direction:column; }'
+            + '#' + CHEAT_SHEET_DIALOG + ' .aptx-dialog-body { min-height:0; }'
+            + '.aptx-cheat-lead { margin:0 0 9px; font-size:10.5px; line-height:1.4; color:var(--p-muted); }'
+            + '.aptx-cheat .aptx-dialog-line { padding:3px 0; align-items:flex-start; }'
+            + '.aptx-cheat .aptx-cheat-key { flex:0 0 38%; display:flex; align-items:center; gap:6px; color:var(--p-ink); }'
+            + '.aptx-cheat .aptx-cheat-glyph { width:14px; height:14px; flex:none; color:var(--p-muted); }'
+            + '.aptx-cheat .aptx-cheat-name { overflow-wrap:anywhere; }'
+            + '.aptx-cheat .aptx-dialog-val { color:var(--p-muted); line-height:1.35; }'
+            + '.aptx-cheat .aptx-cheat-key:not(:empty)::after { content:":"; color:var(--p-faint); }'
             // representative tips: the input dialog and its result
             + '.aptx-reps { line-height:1.35; }'
             + '.aptx-reps-lead { margin:0 0 4px; }'
@@ -13553,7 +14440,7 @@ function (root, d3, forester, phyloXml) {
             + '  font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }'
             // The hover tooltip, on the same palette.
             + '.aptx-tip {'
-            + '  --p-bg: rgba(255,255,255,0.97); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2;'
+            + '  --p-bg: rgba(255,255,255,0.97); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2; --p-warn:#b15a0b;'
             + '  --p-line:#e3e9f0; --p-line-strong:#cad6e1;'
             + '}'
             + '@media (prefers-color-scheme:dark){ .aptx-tip:not(.aptx-light):not(.aptx-dark) {' + dark + '} }'
@@ -13573,7 +14460,15 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-tip .aptx-dialog-line { padding:1px 0; }'
             + '.aptx-tip .aptx-dialog-line + .aptx-dialog-line { border-top:0; }'
             + '.aptx-tip .aptx-dialog-key { flex:0 0 auto; min-width:96px; }'
-            + '.aptx-panel .' + PROG_NAME + ' { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--p-line); font-weight:600; letter-spacing:-0.01em; }'
+            // WRAPS. The title's longest word cannot break, so on a narrow
+            // panel the buttons had nowhere to go and overflowed the padding:
+            // with four of them they ended 2.4 px past the panel's own right
+            // edge, and squeezed the title into two ragged centred lines on
+            // the way. Wrapping puts them on their own right-aligned row
+            // instead, which also gives the title back its full width -- so
+            // "Archaeopteryx.js 3.15.0" sits on ONE line where it used to
+            // break in two.
+            + '.aptx-panel .' + PROG_NAME + ' { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:9px 12px; border-bottom:1px solid var(--p-line); font-weight:600; letter-spacing:-0.01em; }'
             + '.aptx-panel .' + PROGNAMELINK + ',.aptx-panel .' + PROGNAMELINK + ':link,.aptx-panel .' + PROGNAMELINK + ':visited { color:var(--p-accent-ink); text-decoration:none; font-size:12px; border:0; }'
             + '.aptx-panel .' + PROGNAMELINK + ' { background:none; padding:0; margin:0; cursor:pointer;'
             + '  font-family:inherit; font-weight:inherit; letter-spacing:inherit; }'
@@ -13700,6 +14595,16 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-zoomrow .aptx-gbtn { flex:1 1 0; padding:0; }'
             + '.aptx-panel .aptx-zoomrow .aptx-gbtn:last-child { margin-right:0; }'
             + '.aptx-panel .aptx-domrow { display:flex; align-items:center; gap:4px; margin:3px 0; }'
+            // The Download section: a label column, then a control that fills
+            // the row -- the name field, a segmented choice, or the two buttons
+            // sharing it equally (their words centred, never clipped).
+            + '.aptx-panel .aptx-dlrow { display:flex; align-items:center; gap:6px; margin:4px 0; }'
+            + '.aptx-panel .aptx-dlrow .aptx-dllabel { flex:0 0 52px; font-size:10px; color:var(--p-muted); }'
+            + '.aptx-panel .aptx-dlrow input[type=text] { flex:1 1 auto; min-width:0; height:24px; box-sizing:border-box; }'
+            + '.aptx-panel .aptx-dlrow .aptx-segmented { flex:1 1 auto; display:flex; }'
+            + '.aptx-panel .aptx-dlrow .aptx-seg { flex:1 1 0; padding:3px 4px; font-weight:500; white-space:nowrap; }'
+            + '.aptx-panel .aptx-dlrow .aptx-dlbtn { flex:1 1 0; min-width:0; margin:0; padding:0 6px;'
+            + '  display:flex; align-items:center; justify-content:center; white-space:nowrap; }'
             + '.aptx-panel .aptx-domrow .aptx-domlabel { flex:0 0 64px; font-size:10px; color:var(--p-muted); }'
             + '.aptx-panel .aptx-domrow input[type=button] { width:30px; padding:0; margin:0; }'
             // ... except one that has a WORD on it: the rule above sizes the
@@ -13728,7 +14633,6 @@ function (root, d3, forester, phyloXml) {
             + '  line-height:1; color:var(--p-muted); transition:transform .15s,color .15s; }'
             + '.aptx-panel legend.aptx-legend-toggle:hover::after { color:var(--p-accent-ink); }'
             + '.aptx-panel legend.aptx-legend-toggle:hover { color:var(--p-accent-ink); }'
-            + '.aptx-panel #' + EXPORT_FORMAT_SELECT + ' { margin-left:6px; }'
             + '.aptx-panel fieldset.aptx-collapsed > legend.aptx-legend-toggle::after { transform:rotate(-90deg); }'
             + '.aptx-panel fieldset.aptx-collapsed > legend { margin-bottom:0; }'
             + '.aptx-panel fieldset.aptx-collapsed > .aptx-fieldset-body { display:none; }'
@@ -13824,6 +14728,18 @@ function (root, d3, forester, phyloXml) {
             });
             actions.appendChild(infoBtn);
 
+            let sheetBtn = document.createElement('button');
+            sheetBtn.type = 'button';
+            sheetBtn.className = 'aptx-info-btn';
+            sheetBtn.title = 'Control panel: what each control does';
+            sheetBtn.setAttribute('aria-label', 'Control panel cheat sheet');
+            sheetBtn.innerHTML = makeGlyph('cheat_sheet');
+            sheetBtn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                showCheatSheetDialog();
+            });
+            actions.appendChild(sheetBtn);
+
             let progName = header.querySelector('.' + PROGNAMELINK);
             if (progName) {
                 // Clicking the title used to navigate away to the project site;
@@ -13895,6 +14811,10 @@ function (root, d3, forester, phyloXml) {
                     fitPanelSections(panel, name);
                 }
                 savePanelSections();
+                // a folded section's controls are off the screen, so they
+                // leave the cheat sheet: it describes what the panel is
+                // showing, and folding does not go through a tree render
+                refreshCheatSheet();
             });
         }
         // What arrived open counts as opened, oldest at the BOTTOM: a panel is
@@ -14683,7 +15603,8 @@ function (root, d3, forester, phyloXml) {
             ['Desktop version', DESKTOP_WEBSITE, 'cmzmasek.github.io/archaeopteryx'],
             ['Source code', SOURCE_WEBSITE, 'github.com/cmzmasek/archaeopteryx-js'],
             ['License', LICENSE_WEBSITE, LICENSE_NAME],
-            ['Keyboard', null, 'shortcuts (' + (IS_MAC ? '\u2318 /' : 'Ctrl+/') + ')']].forEach(function (row) {
+            ['Keyboard', null, 'shortcuts (' + (IS_MAC ? '\u2318 /' : 'Ctrl+/') + ')'],
+            ['Control panel', null, 'what each control does']].forEach(function (row) {
             let line = document.createElement('div');
             line.className = 'aptx-dialog-line';
             let key = document.createElement('span');
@@ -14697,12 +15618,14 @@ function (root, d3, forester, phyloXml) {
                 a.target = '_blank';
                 a.rel = 'noopener noreferrer';
             } else {
-                // the shortcuts row opens the cheat sheet in place of the About box
+                // the two rows with no URL open another dialog in place of
+                // this one: the key list, and the control-panel sheet
+                let opener = row[0] === 'Control panel' ? showCheatSheetDialog : showShortcutsDialog;
                 a.href = '#';
                 a.addEventListener('click', function (e) {
                     e.preventDefault();
                     shell.dialog.close();
-                    showShortcutsDialog();
+                    opener();
                 });
             }
             a.textContent = row[2];
@@ -14915,14 +15838,6 @@ function (root, d3, forester, phyloXml) {
         // the stylesheet's job now: the search row sizes its R button, and the
         // zoom grid stretches Y+/Y- to the exact width of the button row.)
 
-        const downloadButton = byId(DOWNLOAD_BUTTON);
-
-        if (downloadButton) {
-            setStyles(downloadButton, {
-                'width': '60px', 'margin-bottom': '3px'
-            });
-        }
-
 
         on(SEARCH_FIELD_0, 'keyup', searchValueKeyup);
 
@@ -15139,12 +16054,19 @@ function (root, d3, forester, phyloXml) {
 
         // ----------------
 
-        if (downloadButton) {
-            downloadButton.addEventListener('click', downloadButtonPressed);
-        }
-
-        setStyles(byId(EXPORT_FORMAT_SELECT), {
-            'font': 'inherit', 'color': 'inherit'
+        on(DOWNLOAD_BUTTON, 'click', downloadButtonPressed);
+        on(COPY_NEWICK_BUTTON, 'click', copyNewickPressed);
+        on(COPY_PNG_BUTTON, 'click', copyPngPressed);
+        on(DOWNLOAD_AS_SHOWN_BUTTON, 'change', function () {
+            _downloadFullSize = false;
+        });
+        on(DOWNLOAD_FULL_SIZE_BUTTON, 'change', function () {
+            _downloadFullSize = true;
+        });
+        DOWNLOAD_PNG_SCALES.forEach(function (k) {
+            on('dl_png' + k + '_b', 'change', function () {
+                _pngScale = k;
+            });
         });
 
         // ---------------
@@ -15273,7 +16195,11 @@ function (root, d3, forester, phyloXml) {
         function makeProgramDesc() {
             let h = "";
             h = h.concat('<div class=' + PROG_NAME + '>');
-            h = h.concat('<button type="button" class="' + PROGNAMELINK + '" title="About ' + NAME + '">' + NAME + ' ' + VERSION + '</button>');
+            // aria-label without the version: the cheat sheet names a control
+            // by this, and a version is a value -- it belongs in the About box
+            // it opens, not in a row that says what the button is
+            h = h.concat('<button type="button" class="' + PROGNAMELINK + '" aria-label="' + NAME
+                + '" title="About ' + NAME + '">' + NAME + ' ' + VERSION + '</button>');
             h = h.concat('</div>');
             return h;
         }
@@ -15424,14 +16350,17 @@ function (root, d3, forester, phyloXml) {
             // desktop
             let layoutGroup = 'layout_control_radio';
             h = h.concat('<div class="aptx-segmented">');
-            h = h.concat(makeSegment(makeGlyph('rectangular'), LAYOUT_RECT_BUTTON, layoutGroup, 'rectangular, root at left'));
-            h = h.concat(makeSegment(makeGlyph('circular'), LAYOUT_CIRC_BUTTON, layoutGroup, 'circular'));
-            h = h.concat(makeSegment(makeGlyph('unrooted'), LAYOUT_UNROOTED_BUTTON, layoutGroup, 'unrooted (equal-angle)'));
+            h = h.concat(makeSegment(makeGlyph('rectangular'), LAYOUT_RECT_BUTTON, layoutGroup,
+                'rectangular layout: the root at the left, the tips in even rows down the page'));
+            h = h.concat(makeSegment(makeGlyph('circular'), LAYOUT_CIRC_BUTTON, layoutGroup,
+                'circular layout: the tree as a fan, every tip label carried out to a common ring'));
+            h = h.concat(makeSegment(makeGlyph('unrooted'), LAYOUT_UNROOTED_BUTTON, layoutGroup,
+                'unrooted layout: equal-angle, drawing no root branch at all'));
             h = h.concat('</div>');
             h = h.concat('<div class="' + PHYLOGRAM_CLADOGRAM_CONTROLGROUP + ' aptx-segmented">');
-            h = h.concat(makeSegment(makeGlyph('phylogram'), PHYLOGRAM_BUTTON, radioGroup, 'phylogram display (uses branch length values)'));
-            h = h.concat(makeSegment(makeGlyph('aligned_phylogram'), PHYLOGRAM_ALIGNED_BUTTON, radioGroup, 'phylogram display (uses branch length values) with aligned labels'));
-            h = h.concat(makeSegment(makeGlyph('cladogram'), CLADOGRAM_BUTTON, radioGroup, ' cladogram display (ignores branch length values)'));
+            h = h.concat(makeSegment(makeGlyph('phylogram'), PHYLOGRAM_BUTTON, radioGroup, PHYLOGRAM_WHAT));
+            h = h.concat(makeSegment(makeGlyph('aligned_phylogram'), PHYLOGRAM_ALIGNED_BUTTON, radioGroup, PHYLOGRAM_ALIGNED_WHAT));
+            h = h.concat(makeSegment(makeGlyph('cladogram'), CLADOGRAM_BUTTON, radioGroup, CLADOGRAM_WHAT));
             h = h.concat('</div>');
             // The branch SCALE, when the tree states two different things: its
             // nodes' dates, and its branches' divergence. Hidden otherwise,
@@ -15514,7 +16443,7 @@ function (root, d3, forester, phyloXml) {
             // "Auto-hide Labels" matches the desktop, which renamed the historical
             // "Dyna Hide" because that named the mechanism rather than what the user
             // sees. The _state.dynahide field keeps its name internally.
-            opts.push(makeCheckboxItem('Auto-hide Labels', DYNAHIDE_CB, 'automatically hide external labels, and branch values that would overprint each other, where the tree is too dense for them to be readable', true));
+            opts.push(makeCheckboxItem('Auto-hide Labels', DYNAHIDE_CB, 'automatically hide external labels, and branch values that would overprint a name or each other, where the tree is too dense for them to be readable', true));
             opts.push(makeCheckboxItem('Short Names', SHORTEN_NODE_NAME_CB, 'to shorten long node names'));
             if (_basicTreeProperties.confidences) {
                 opts.push(makeCheckboxItem('Support Dots', SUPPORT_DOTS_CB, 'to mark a branch with support of at least ' + _settings.supportDotMinimum + '% with a dot at its midpoint, where there is room to draw it'));
@@ -15588,33 +16517,49 @@ function (root, d3, forester, phyloXml) {
             return h;
         }
 
+        // A titled section like the others, so it folds. The format is picked
+        // from a menu the Download button opens (showDownloadMenu), where each
+        // format says what it keeps; the rows above it are the choices every
+        // graphic, or every file, shares.
         function makeDownloadSection() {
-            let h = "";
-            h = h.concat('<form action="#">');
-            h = h.concat('<fieldset>');
-            h = h.concat('<input type="button" value="Download" name="' + DOWNLOAD_BUTTON + '" title="download/export tree in a selected format" id="' + DOWNLOAD_BUTTON + '">');
-            //h = h.concat('<br>');
-            h = h.concat('<select name="' + EXPORT_FORMAT_SELECT + '" id="' + EXPORT_FORMAT_SELECT + '">');
+            let h = '<fieldset class="aptx-download">';
+            h = h.concat('<legend>Download</legend>');
+            h = h.concat('<div class="aptx-dlrow"><label class="aptx-dllabel" for="' + DOWNLOAD_NAME_FIELD
+                + '" title="the file name: each format adds its own extension">Name</label>');
+            h = h.concat('<input type="text" id="' + DOWNLOAD_NAME_FIELD + '" name="' + DOWNLOAD_NAME_FIELD
+                + '" spellcheck="false" autocomplete="off"'
+                + ' title="the file name: each format adds its own extension"></div>');
+            h = h.concat('<div class="aptx-dlrow"><span class="aptx-dllabel">Graphics</span>');
+            h = h.concat('<div class="aptx-segmented">');
+            h = h.concat(makeSegment('As shown', DOWNLOAD_AS_SHOWN_BUTTON, 'dl_extent_radio',
+                'SVG, PDF and PNG show what is on screen: the part of the tree in view, at the current zoom'));
+            h = h.concat(makeSegment('Full size', DOWNLOAD_FULL_SIZE_BUTTON, 'dl_extent_radio',
+                'SVG, PDF and PNG show the whole tree, drawn large enough for every name'));
+            h = h.concat('</div></div>');
             if (pngExportAvailable()) {
-                h = h.concat('<option value="' + PNG_EXPORT_FORMAT + '">' + PNG_EXPORT_FORMAT + '</option>');
-            }
-            if (pdfExportAvailable()) {
-                h = h.concat('<option value="' + PDF_EXPORT_FORMAT + '">' + PDF_EXPORT_FORMAT + '</option>');
-            }
-            h = h.concat('<option value="' + SVG_EXPORT_FORMAT + '">' + SVG_EXPORT_FORMAT + '</option>');
-            h = h.concat('<option value="' + PHYLOXML_EXPORT_FORMAT + '">' + PHYLOXML_EXPORT_FORMAT + '</option>');
-            h = h.concat('<option value="' + NH_EXPORT_FORMAT + '">' + NH_EXPORT_FORMAT + '</option>');
-            h = h.concat('<option value="' + NEXUS_EXPORT_FORMAT + '">' + NEXUS_EXPORT_FORMAT + '</option>');
-            // only when there is something to write: a tip carrying a
-            // molecular sequence, aligned or not (same gate as the node
-            // menu's Fasta entries) -- on any other tree the download would
-            // just be an empty file
-            if (_basicTreeProperties.maxMolSeqLength > 0) {
-                h = h.concat('<option value="' + FASTA_EXPORT_FORMAT + '">' + FASTA_EXPORT_FORMAT + '</option>');
+                h = h.concat('<div class="aptx-dlrow"><span class="aptx-dllabel">PNG</span>');
+                h = h.concat('<div class="aptx-segmented">');
+                DOWNLOAD_PNG_SCALES.forEach(function (k) {
+                    h = h.concat(makeSegment(k + '×', 'dl_png' + k + '_b', 'dl_png_radio',
+                        'PNG at ' + k + ' times the resolution of the screen'));
+                });
+                h = h.concat('</div></div>');
             }
-            h = h.concat('</select>');
+            h = h.concat('<div class="aptx-dlrow">');
+            h = h.concat('<button type="button" class="aptx-gbtn aptx-dlbtn" id="' + DOWNLOAD_BUTTON + '" name="'
+                + DOWNLOAD_BUTTON + '" aria-haspopup="menu"'
+                + ' title="download the tree: choose the format from the menu">Download…</button>');
+            h = h.concat('</div>');
+            h = h.concat('<div class="aptx-dlrow">');
+            h = h.concat('<button type="button" class="aptx-gbtn aptx-dlbtn" id="' + COPY_NEWICK_BUTTON + '" name="'
+                + COPY_NEWICK_BUTTON + '" title="copy the tree to the clipboard in Newick format">Copy Newick</button>');
+            if (pngCopyAvailable()) {
+                h = h.concat('<button type="button" class="aptx-gbtn aptx-dlbtn" id="' + COPY_PNG_BUTTON + '" name="'
+                    + COPY_PNG_BUTTON + '" title="copy the tree to the clipboard as a PNG image, to paste into'
+                    + ' a document or a slide: drawn as the Graphics and PNG choices above say">Copy PNG</button>');
+            }
+            h = h.concat('</div>');
             h = h.concat('</fieldset>');
-            h = h.concat('</form>');
             return h;
         }
 
@@ -15744,8 +16689,10 @@ function (root, d3, forester, phyloXml) {
             let h = "";
             h = h.concat('<label class="aptx-field-label" for="' + val + '">' + label + '</label>');
             h = h.concat('<div class="aptx-search-menus">');
-            h = h.concat('<select class="aptx-search-field" name="' + fsel + '" id="' + fsel + '" title="the field to search in"></select>');
-            h = h.concat('<select class="aptx-search-mode" name="' + msel + '" id="' + msel + '" title="how to match"></select>');
+            h = h.concat('<select class="aptx-search-field" name="' + fsel + '" id="' + fsel
+                + '" aria-label="' + label + ' field" title="the field to search in"></select>');
+            h = h.concat('<select class="aptx-search-mode" name="' + msel + '" id="' + msel
+                + '" aria-label="' + label + ' match" title="how to match"></select>');
             h = h.concat('</div>');
             h = h.concat('<div class="aptx-search-row">');
             h = h.concat('<input class="aptx-search-value" autocomplete="off" title="' + valTip + '" type="text" name="' + val + '" id="' + val + '">');
@@ -15865,6 +16812,27 @@ function (root, d3, forester, phyloXml) {
         setCheckboxValue(VISUAL_STYLES_CB, _state.useVisualStyles);
         setCheckboxValue(VIS_CB, _state.showVisualizations);
         setCheckboxValue(DYNAHIDE_CB, _state.dynahide);
+        {
+            let nameField = byId(DOWNLOAD_NAME_FIELD);
+            if (nameField) {
+                nameField.value = _state.downloadStem;
+            }
+            // once per launch, not in initializeSettings: zoom-to-fit re-runs
+            // that, and would throw the user's pick away
+            _pngScale = DOWNLOAD_PNG_SCALES.reduce(function (best, k) {
+                let want = _settings.pngExportScale;
+                return Math.abs(Math.log(k / want)) < Math.abs(Math.log(best / want)) ? k : best;
+            });
+            // any positive number used to be taken as it was; the panel offers
+            // 2x, 4x and 8x, and the setting is now the one it starts on
+            // (Christian, 2026-09-28) -- said, not done silently
+            if (_pngScale !== _settings.pngExportScale) {
+                console.warn(WARNING + ': pngExportScale ' + _settings.pngExportScale + ' is not one of '
+                    + DOWNLOAD_PNG_SCALES.join(', ') + ': the PNG starts at ' + _pngScale + 'x');
+            }
+            setRadioButtonValue(_downloadFullSize ? DOWNLOAD_FULL_SIZE_BUTTON : DOWNLOAD_AS_SHOWN_BUTTON, true);
+            setRadioButtonValue('dl_png' + _pngScale + '_b', true);
+        }
         setCheckboxValue(MSA_CB, _state.showMsa);
         setCheckboxValue(MSA_LOGO_CB, _state.showMsaLogo === true);
         setCheckboxValue(HEATMAP_CB, _state.showHeatmap);
@@ -15952,9 +16920,15 @@ function (root, d3, forester, phyloXml) {
     }
 
     function setDisplayTypeButtons() {
-        setRadioButtonValue(PHYLOGRAM_BUTTON, _state.phylogram && !_state.alignPhylogram);
-        setRadioButtonValue(CLADOGRAM_BUTTON, !_state.phylogram && !_state.alignPhylogram);
-        setRadioButtonValue(PHYLOGRAM_ALIGNED_BUTTON, _state.alignPhylogram && _state.phylogram);
+        // In circular the labels ARE aligned, whatever alignPhylogram says, so
+        // that is the button shown as chosen: the panel describes the picture.
+        // The flag itself is left alone -- it is the user's choice for the
+        // layouts that can express it, and returning to rectangular restores
+        // what they picked there.
+        let alignedLook = _state.phylogram && (_state.alignPhylogram || _state.circularDisplay);
+        setRadioButtonValue(PHYLOGRAM_BUTTON, _state.phylogram && !alignedLook);
+        setRadioButtonValue(CLADOGRAM_BUTTON, !_state.phylogram);
+        setRadioButtonValue(PHYLOGRAM_ALIGNED_BUTTON, alignedLook);
         setCheckboxValue(LAYOUT_CIRC_BUTTON, _state.circularDisplay);
         setCheckboxValue(LAYOUT_UNROOTED_BUTTON, _state.unrootedDisplay);
         setCheckboxValue(LAYOUT_RECT_BUTTON, !radialDisplay());
@@ -15975,6 +16949,7 @@ function (root, d3, forester, phyloXml) {
 
     function updateButtonEnabledState() {
         syncZoomRowButtons(); // layout- and tree-dependent disables track every render
+        refreshCheatSheet();  // an open sheet describes the panel as it is now
         // 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) {
@@ -16126,70 +17101,348 @@ function (root, d3, forester, phyloXml) {
         return svgText;
     }
 
-    function getTreeAsSvg() {
-        let svg = treeSvgElement();
-        if (!svg) {
+    // The live tree's <svg>, copied and cleaned for a file: the overview, the
+    // search halos and the hover glow are on-screen aids, not the tree.
+    function exportCopy(svg) {
+        return cleanExportCopy(svg.cloneNode(true));
+    }
+
+    function cleanExportCopy(copy) {
+        // Serialize a COPY with the overview taken out of it: the overview is
+        // an on-screen navigation aid, not part of the tree, and working on a
+        // copy leaves the live display untouched.
+        let overview = copy.querySelector('.aptx-overview');
+        if (overview) {
+            overview.remove();
+        }
+        // the halo discs' translucency and pulse live in page CSS the
+        // export cannot carry -- serialized as-is they become solid blobs
+        copy.querySelectorAll('circle.foundHalo').forEach(function (h) {
+            h.remove();
+        });
+        let glow = copy.querySelector('.aptx-hoverglow');
+        if (glow) {
+            glow.remove();
+        }
+        return copy;
+    }
+
+    // The same element of the copy as `live` is of the svg: children are
+    // cloned in order, so the index finds it -- in a copy nothing has been
+    // taken out of yet (cleaning it removes the overview, and every child
+    // after that would be off by one).
+    function copyCounterpart(svg, copy, live) {
+        let i = Array.prototype.indexOf.call(svg.children, live);
+        return i >= 0 ? copy.children[i] : null;
+    }
+
+    // The graphic an SVG, PDF or PNG download draws, as {text, w, h}: the
+    // serialized light-theme svg and its size in px. Which one follows the
+    // Download section's choice.
+    function exportGraphic() {
+        if (!treeSvgElement() || typeof window.XMLSerializer === 'undefined') {
             return null;
         }
-        let svgTree = null;
-        if (typeof window.XMLSerializer !== 'undefined') {
-            // Serialize a COPY with the overview taken out of it: the overview is
-            // an on-screen navigation aid, not part of the tree, and working on a
-            // copy leaves the live display untouched.
-            let copy = svg.cloneNode(true);
-            let overview = copy.querySelector('.aptx-overview');
-            if (overview) {
-                overview.remove();
-            }
-            // the halo discs' translucency and pulse live in page CSS the
-            // export cannot carry -- serialized as-is they become solid blobs
-            copy.querySelectorAll('circle.foundHalo').forEach(function (h) {
-                h.remove();
-            });
-            let glow = copy.querySelector('.aptx-hoverglow');
-            if (glow) {
-                glow.remove();
-            }
-            // The floating strips re-anchor to the TREE for export: on screen
-            // a strip may be stuck at the viewport bottom, but a figure must
-            // not carry an artefact of where the user happened to be scrolled
-            // -- the axis belongs at the bottom of the tree. (As the desktop
-            // does for PDF and graphics export.)
-            let t = d3.zoomTransform(svg);
-            copy.querySelectorAll('.aptx-float > g').forEach(function (strip) {
-                strip.setAttribute('transform', 'translate(' + t.x + ',' + t.y + ') scale(' + t.k + ')');
+        return _downloadFullSize ? graphicFullSize() : graphicAsShown();
+    }
+
+    // "As shown": the viewport, exactly as it is on screen.
+    function graphicAsShown() {
+        let svg = treeSvgElement();
+        let copy = exportCopy(svg);
+        // The floating strips re-anchor to the TREE for export: on screen
+        // a strip may be stuck at the viewport bottom, but a figure must
+        // not carry an artefact of where the user happened to be scrolled
+        // -- the axis belongs at the bottom of the tree. (As the desktop
+        // does for PDF and graphics export.)
+        let t = d3.zoomTransform(svg);
+        copy.querySelectorAll('.aptx-float > g').forEach(function (strip) {
+            strip.setAttribute('transform', 'translate(' + t.x + ',' + t.y + ') scale(' + t.k + ')');
+        });
+        return {
+            text: toLightExport((new XMLSerializer()).serializeToString(copy)),
+            w: svg.width.baseVal.value || _displayWidth,
+            h: svg.height.baseVal.value || _displayHeight
+        };
+    }
+
+    // How far apart a full-size drawing puts its tips, in label heights, and
+    // how large it may grow at the very most -- a bound on the file, not a
+    // size anyone should meet short of tens of thousands of tips.
+    const FULL_SIZE_ROW_PITCH = 1.3;
+    const FULL_SIZE_MAX_EXTENT = 200000;
+    const FULL_SIZE_MARGIN = 20;
+    const FULL_SIZE_LEGEND_GAP = 24;
+
+    // "Full size": the whole tree, whatever part of it is on screen and
+    // however far it is zoomed out, drawn large enough for every tip name.
+    //
+    // The tree is re-laid-out at that size -- not scaled: scaling the picture
+    // would enlarge the names with it and leave them exactly as crowded --
+    // serialized, and put back. All of it runs in one task, so the screen
+    // never paints the enlarged tree, and the zoom transform is never
+    // touched: the copy simply leaves it out.
+    function graphicFullSize() {
+        let svg = treeSvgElement();
+        let keepW = _displayWidth;
+        let keepH = _displayHeight;
+        let keepHide = _state.dynahide;
+        try {
+            growToFullSize(keepHide);
+            return serializeFullSize(svg);
+        } finally {
+            _state.dynahide = keepHide;
+            _displayWidth = keepW;
+            _displayHeight = keepH;
+            update(null, 0);
+        }
+    }
+
+    // Enlarge the layout until no tip name has to be dropped. Rectangular: the
+    // row pitch is set outright. Circular: the ring is sized from its tips
+    // first. Then every layout is ASKED -- the auto-hide rules, switched on
+    // for the question, are what decide whether a name fits -- and grown
+    // again until none is refused. The width never shrinks below the window,
+    // so a tree zoomed out to a sliver comes out at a readable width.
+    function growToFullSize(userHides) {
+        let pitch = Math.max(4, _state.externalNodeFontSize || 0) * FULL_SIZE_ROW_PITCH;
+        let fit = _settings.enableDynamicSizing ? displaySizeFromContainer() : null;
+        let fitW = (fit && fit.w > 0) ? fit.w : _settings.displayWidth;
+        let fitH = (fit && fit.h > 0) ? fit.h : _settings.displayHeight;
+        let cap = function (v) {
+            return Math.min(FULL_SIZE_MAX_EXTENT, v);
+        };
+        _state.dynahide = true;
+        if (radialDisplay()) {
+            let side = cap(Math.max(Math.min(_displayWidth, _displayHeight), Math.min(fitW, fitH)));
+            _displayWidth = side;
+            _displayHeight = side;
+            update(null, 0);
+            // Sized first so every tip has a label's height of arc: on the
+            // ring in circular, where the names stand; in unrooted, where
+            // there is no ring, as if the tips were spread evenly around the
+            // fan's rim -- the most a fan's size can promise.
+            let rows = 0;
+            forEachDisplayed(function (n) {
+                if (!n.children || isCollapsed(n)) {
+                    ++rows;
+                }
             });
-            svgTree = toLightExport((new XMLSerializer()).serializeToString(copy));
-        } else if (typeof svg.xml !== 'undefined') {
-            svgTree = svg.xml;
+            let span = (_state.circularDisplay && _radial) ? Math.max(0.1, _radial.angleSpan) : 2 * Math.PI;
+            let radius = (_state.circularDisplay && _radial) ? _radial.maxRad : _displayWidth * 0.42;
+            let need = (rows * pitch) / span;
+            if (radius > 0 && need > radius) {
+                _displayWidth = cap(_displayWidth * need / radius);
+                _displayHeight = _displayWidth;
+                update(null, 0);
+            }
+            // Then grown while growing still frees names, and no further. In
+            // an unrooted fan names collide that no size will part: flu_h5's
+            // clusters sit on branches a thousand times shorter than the tree,
+            // and at 67,000 px across 176 of its 354 names were still refused
+            // (332 at 850 px, 322 at 2,300) -- chasing them only made a file
+            // too large to paint as a PNG. The drawing kept is the smallest
+            // that showed the fewest refusals.
+            let best = {hidden: _radialNamesHidden, side: _displayWidth};
+            for (let i = 0; i < 12 && _radialNamesHidden > 0 && _displayWidth < FULL_SIZE_MAX_EXTENT; ++i) {
+                _displayWidth = cap(_displayWidth * 1.4);
+                _displayHeight = _displayWidth;
+                update(null, 0);
+                if (_radialNamesHidden < best.hidden * 0.95) {
+                    best = {hidden: _radialNamesHidden, side: _displayWidth};
+                } else {
+                    break;
+                }
+            }
+            if (_displayWidth !== best.side) {
+                _displayWidth = best.side;
+                _displayHeight = best.side;
+                update(null, 0);
+            }
+        } else {
+            _displayWidth = cap(Math.max(_displayWidth, fitW));
+            _displayHeight = cap(Math.max(_displayHeight, fitH));
+            update(null, 0);
+            for (let i = 0; i < 4 && (_rowUnit < pitch * 0.999 || _dynahide_factor >= 2)
+                && _displayHeight < FULL_SIZE_MAX_EXTENT; ++i) {
+                // the vertical span less the fixed reserves is what the rows
+                // share, so that is the part that scales
+                let span = layoutSpans().vertical;
+                let reserve = _displayHeight - span;
+                let f = Math.max(pitch / Math.max(_rowUnit, 1e-6), 1.05);
+                _displayHeight = cap(reserve + (span * f));
+                update(null, 0);
+            }
+        }
+        // drawn once more under the user's own auto-hide choice: with it off,
+        // what it would have hidden is drawn, as it is on screen
+        if (!userHides) {
+            _state.dynahide = false;
+            update(null, 0);
         }
-        return svgTree;
+    }
+
+    // The smallest box around every non-empty one of `boxes` (getBBox
+    // results), as {x0, y0, x1, y1}; null when none has any size.
+    function unionBox(boxes) {
+        let u = null;
+        boxes.forEach(function (b) {
+            if (!b || !(b.width > 0 || b.height > 0)) {
+                return;
+            }
+            if (!u) {
+                u = {x0: b.x, y0: b.y, x1: b.x + b.width, y1: b.y + b.height};
+            } else {
+                u.x0 = Math.min(u.x0, b.x);
+                u.y0 = Math.min(u.y0, b.y);
+                u.x1 = Math.max(u.x1, b.x + b.width);
+                u.y1 = Math.max(u.y1, b.y + b.height);
+            }
+        });
+        return u;
+    }
+
+    // Every card the viewer pins to the WINDOW rather than to the tree: the
+    // colour and shape legends, the domain legend, the heat-map ring's scale.
+    // On screen they sit where the window has room; in a full-size figure the
+    // window is gone, so they are stacked beside the tree instead.
+    const WINDOW_LEGEND_CLASSES = [LEGEND_LABEL_COLOR, LEGEND_NODE_SHAPE, LEGEND_DOMAINS, 'aptx-heatmap-ringlegend'];
+    const FULL_SIZE_LEGEND_STACK_GAP = 12;
+
+    // The enlarged drawing, cropped to what is actually drawn: the tree
+    // (with its floating strips, anchored to it) and, in a column to its left
+    // rather than over it, the legend cards.
+    function serializeFullSize(svg) {
+        let M = FULL_SIZE_MARGIN;
+        // a strip's content is drawn in tree coordinates; its own transform
+        // only places it on screen, and getBBox leaves that out
+        let strips = _floatGroup ? Array.prototype.slice.call(_floatGroup.node().children) : [];
+        let box = unionBox([_svgGroup.node().getBBox()].concat(strips.map(function (g) {
+            return g.getBBox();
+        })));
+        if (!box) {
+            return graphicAsShown();
+        }
+        let cards = [];
+        WINDOW_LEGEND_CLASSES.forEach(function (cls) {
+            let g = svg.querySelector(':scope > g.' + cls);
+            let b = g ? g.getBBox() : null;
+            if (b && (b.width > 0 || b.height > 0)) {
+                cards.push({g: g, b: b});
+            }
+        });
+        let columnW = 0;
+        let columnH = 0;
+        cards.forEach(function (c, i) {
+            columnW = Math.max(columnW, c.b.width);
+            columnH += c.b.height + (i > 0 ? FULL_SIZE_LEGEND_STACK_GAP : 0);
+        });
+        let legendW = cards.length > 0 ? columnW + FULL_SIZE_LEGEND_GAP : 0;
+        let treeW = box.x1 - box.x0;
+        let treeH = box.y1 - box.y0;
+        let W = Math.ceil(M + legendW + treeW + M);
+        let H = Math.ceil(M + Math.max(treeH, columnH) + M);
+
+        let copy = svg.cloneNode(true);
+        let place = 'translate(' + (M + legendW - box.x0) + ',' + (M - box.y0) + ')';
+        let tree = copyCounterpart(svg, copy, _svgGroup.node());
+        if (tree) {
+            tree.setAttribute('transform', place);
+        }
+        copy.querySelectorAll('.aptx-float > g').forEach(function (strip) {
+            strip.setAttribute('transform', place);
+        });
+        // A card's own transform, where it has one, only placed it in the
+        // window (getBBox leaves it out), so it is replaced, not added to.
+        let y = M;
+        cards.forEach(function (c) {
+            let cc = copyCounterpart(svg, copy, c.g);
+            if (cc) {
+                cc.setAttribute('transform', 'translate(' + (M - c.b.x) + ',' + (y - c.b.y) + ')');
+            }
+            y += c.b.height + FULL_SIZE_LEGEND_STACK_GAP;
+        });
+        cleanExportCopy(copy);
+        copy.setAttribute('width', W);
+        copy.setAttribute('height', H);
+        copy.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
+        return {text: toLightExport((new XMLSerializer()).serializeToString(copy)), w: W, h: H};
     }
 
     function downloadTree(format) {
-        if (format === PNG_EXPORT_FORMAT) {
-            changeBaseBackgoundColor(_state.backgroundColorForPrintExportDefault);
-            downloadAsPng();
-            changeBaseBackgoundColor(_state.backgroundColorDefault);
-        } else if (format === SVG_EXPORT_FORMAT) {
-            changeBaseBackgoundColor(_state.backgroundColorForPrintExportDefault);
-            downloadAsSVG();
-            changeBaseBackgoundColor(_state.backgroundColorDefault);
-        } else if (format === NH_EXPORT_FORMAT) {
+        if (format === NH_EXPORT_FORMAT) {
             downloadAsNH();
         } else if (format === NEXUS_EXPORT_FORMAT) {
             downloadAsNexus();
         } else if (format === PHYLOXML_EXPORT_FORMAT) {
             downloadAsPhyloXml();
-        } else if (format === PDF_EXPORT_FORMAT) {
-            changeBaseBackgoundColor(_state.backgroundColorForPrintExportDefault);
-            downloadAsPdf();
-            changeBaseBackgoundColor(_state.backgroundColorDefault);
         } else if (format === FASTA_EXPORT_FORMAT) {
             downloadAsFastaAll();
+        } else if (format === TSV_EXPORT_FORMAT) {
+            downloadAsTsvAll();
+        } else if (format === SVG_EXPORT_FORMAT || format === PDF_EXPORT_FORMAT || format === PNG_EXPORT_FORMAT) {
+            withGraphic(function (graphic) {
+                if (format === SVG_EXPORT_FORMAT) {
+                    downloadAsSVG(graphic);
+                } else if (format === PDF_EXPORT_FORMAT) {
+                    downloadAsPdf(graphic);
+                } else {
+                    downloadAsPng(graphic);
+                }
+            });
         }
     }
 
+    // Hands fn the graphic the Download section's choices describe, drawn in
+    // the light export colours; a failure -- no graphic, or a throw anywhere
+    // on the way -- goes to fail instead, so a caller waiting on the result
+    // (Copy PNG's clipboard write) always hears back. A full-size drawing
+    // re-lays-out the tree several times over, each pass larger than the
+    // redraw last timed, so the card goes up when that redraw was even a
+    // fraction of the card's threshold.
+    function withGraphic(fn, fail) {
+        // without a handler the error is thrown on, as it was before there
+        // was one -- to the page's error handling and the harnesses -- rather
+        // than turned into a console line and a click that did nothing
+        let failed = fail || function (err) {
+            throw err;
+        };
+        let draw = function () {
+            let graphic;
+            try {
+                changeBaseBackgoundColor(_state.backgroundColorForPrintExportDefault);
+                try {
+                    graphic = exportGraphic();
+                } finally {
+                    changeBaseBackgoundColor(_state.backgroundColorDefault);
+                }
+                if (!graphic) {
+                    throw new Error('this browser cannot serialize the tree');
+                }
+                fn(graphic);
+            } catch (err) {
+                failed(err);
+            }
+        };
+        if (_downloadFullSize && _redrawMs * FULL_SIZE_REDRAWS_EXPECTED >= REDRAW_CARD_MS && _container) {
+            showBusy(_container, 'Drawing the whole tree');
+            afterPaint(function () {
+                try {
+                    draw();
+                } finally {
+                    hideBusy();
+                }
+            });
+        } else {
+            draw();
+        }
+    }
+
+    // How many redraws a full-size drawing typically costs: the drawing at the
+    // window's size, one or two to reach the size, and the one that puts the
+    // window back -- more on a crowded fan.
+    const FULL_SIZE_REDRAWS_EXPECTED = 4;
+
     /**
      * Saves a Blob to a file using native browser APIs (an <a download> link
      * pointing at an object URL). This replaces the former FileSaver.js
@@ -16217,9 +17470,34 @@ function (root, d3, forester, phyloXml) {
         }, 1000);
     }
 
+    // What a tree file is written from. The whole tree as it is; a subtree
+    // view's root is a bare wrapper made when the subtree was entered, and
+    // written as it stands it gave the file no name at all (phyloXML wrote
+    // none, Nexus "tree1"). So it goes out under the tree's own name, marked
+    // as a subtree. A shallow copy: the drawing's wrapper is left alone, and
+    // the whole-tree files are byte for byte what they were.
+    function treeForExport() {
+        if (_root === _root_const || !_root_const) {
+            return _root;
+        }
+        let name = _root_const.name ? String(_root_const.name).trim() : '';
+        return Object.assign({}, _root, {name: name ? name + ' (subtree)' : undefined});
+    }
+
+    // "subtree, 19 of 50 tips" while a subtree is shown, else null: said in
+    // the Download menu, so nobody writes a part of the tree thinking it the
+    // whole.
+    function subtreeExtentNote() {
+        if (_root === _root_const || !_root_const) {
+            return null;
+        }
+        return 'subtree, ' + forester.getAllExternalNodes(_root).length.toLocaleString() + ' of '
+            + forester.getAllExternalNodes(_root_const).length.toLocaleString() + ' tips';
+    }
+
     function downloadAsPhyloXml() {
-        let x = phyloXml.toPhyloXML(_root, 9);
-        saveAs(new Blob([x], {type: "application/xml"}), _state.nameForPhyloXmlDownload);
+        let x = phyloXml.toPhyloXML(treeForExport(), 9);
+        saveAs(new Blob([x], {type: "application/xml"}), downloadFileName(XML_SUFFIX));
     }
 
     function downloadAsNH() {
@@ -16227,25 +17505,43 @@ function (root, d3, forester, phyloXml) {
         // not a preference: writing them out produces a file that will not parse
         // back in.
         let nh = forester.toNewHampshire(_root, 9, true, _settings.nhExportWriteConfidences);
-        saveAs(new Blob([nh], {type: "application/txt"}), _state.nameForNhDownload);
+        saveAs(new Blob([nh], {type: "application/txt"}), downloadFileName(NH_SUFFIX));
     }
 
     function downloadAsNexus() {
         // taxa and trees blocks as on the desktop, plus a characters block
         // when the tips carry an alignment -- carrying tree and alignment
         // in one file is what Nexus is for
-        let nex = forester.toNexus(_root, 9, _settings.nhExportWriteConfidences);
-        saveAs(new Blob([nex], {type: "application/txt"}), _state.nameForNexusDownload);
+        let phy = treeForExport();
+        let nex = forester.toNexus(phy, 9, _settings.nhExportWriteConfidences);
+        saveAs(new Blob([nex], {type: "application/txt"}), downloadFileName(NEXUS_SUFFIX));
+    }
+
+    function downloadAsSVG(graphic) {
+        saveAs(new Blob([graphic.text], {type: "image/svg+xml"}), downloadFileName(SVG_SUFFIX));
+    }
+
+    // Every tip's data, one row per tip top to bottom as drawn: the node
+    // menu's "Download Ext. Node Data" for the whole tree -- the desktop's
+    // columns, and a table that joins back onto the tree as metadata.
+    function downloadAsTsvAll() {
+        saveAs(new Blob([tipTableTsv(forester.getAllExternalNodes(_root).reverse())],
+            {type: 'text/tab-separated-values'}), downloadFileName(TSV_SUFFIX));
     }
 
-    function downloadAsSVG() {
-        let svg = getTreeAsSvg();
-        saveAs(new Blob([decodeURIComponent(encodeURIComponent(svg))], {type: "application/svg+xml"}), _state.nameForSvgDownload);
+    // The table of `tips` (top to bottom as drawn: getAllExternalNodes
+    // reversed) -- one writer for the Download menu's TSV and the node
+    // menu's Download Ext. Node Data, so their columns and ids cannot drift
+    // apart. The caller walks the tips, once, and may count them too.
+    function tipTableTsv(tips) {
+        return forester.externalNodeDataTsv(tips, function (n, i) {
+            return (n.viewId !== undefined) ? n.viewId : i + 1;
+        });
     }
 
     function downloadAsFastaAll() {
         let fasta_text = forester.getMolecularSequencesAsFasta(_root, '\n');
-        saveAs(new Blob([fasta_text], {type: "application/txt"}), _state.nameForFastaDownload);
+        saveAs(new Blob([fasta_text], {type: "application/txt"}), downloadFileName(FASTA_SUFFIX));
     }
 
     // Vector PDF via the OPTIONAL page-level libraries jsPDF and svg2pdf.js
@@ -16259,13 +17555,18 @@ function (root, d3, forester, phyloXml) {
             && window.jspdf.jsPDF.API.svg);
     }
 
-    function downloadAsPdf() {
+    // The largest page a PDF may have: 200 inches a side (ISO 32000, Annex C).
+    // Readers refuse, or quietly clip, anything past it -- and a full-size
+    // tree of a few thousand tips is past it -- so a larger drawing is scaled
+    // onto the largest page instead. It is vector: nothing is lost by that.
+    const PDF_MAX_PAGE_PT = 14400;
+
+    function downloadAsPdf(graphic) {
         if (!pdfExportAvailable()) {
             console.error(ERROR + 'PDF export needs the optional jspdf and svg2pdf.js libraries on the page');
             return;
         }
-        let svg = getTreeAsSvg();
-        let el = new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement;
+        let el = new DOMParser().parseFromString(graphic.text, 'image/svg+xml').documentElement;
         // the full-canvas background rect is sized in percentages, which
         // svg2pdf renders literally (a dark 100pt square at the origin); the
         // PDF page is white anyway, so the rect is simply dropped
@@ -16297,9 +17598,9 @@ function (root, d3, forester, phyloXml) {
                 }
             });
         });
-        let svgEl = treeSvgElement();
-        let w = (svgEl && svgEl.width.baseVal.value) || _displayWidth;
-        let h = (svgEl && svgEl.height.baseVal.value) || _displayHeight;
+        let fit = Math.min(1, PDF_MAX_PAGE_PT / Math.max(graphic.w, graphic.h));
+        let w = graphic.w * fit;
+        let h = graphic.h * fit;
         let pdf = new window.jspdf.jsPDF({
             orientation: w >= h ? 'landscape' : 'portrait',
             unit: 'pt',
@@ -16307,7 +17608,7 @@ function (root, d3, forester, phyloXml) {
             compress: true
         });
         pdf.svg(el, {x: 0, y: 0, width: w, height: h}).then(function () {
-            pdf.save(_state.nameForPdfDownload);
+            pdf.save(downloadFileName(PDF_SUFFIX));
             holder.remove();
         }, function (err) {
             holder.remove();
@@ -16324,23 +17625,62 @@ function (root, d3, forester, phyloXml) {
         return !!(window.Canvg && window.Canvg.fromString);
     }
 
-    function downloadAsPng() {
+    // The biggest canvas this browser will actually paint, at no more than
+    // the scale asked for. Browsers cap a canvas by side and by area, and
+    // differently (Safari's area cap is a sixteenth of Chrome's); past the
+    // cap a canvas is not an error, it is just blank -- which is what a
+    // full-size PNG of a large tree would silently have been. So the canvas
+    // is TRIED: filled, and its far corner read back.
+    function paintableCanvas(w, h, scale) {
+        for (let k = scale; k > 0.05; k *= 0.8) {
+            let canvas = document.createElement('canvas');
+            canvas.width = Math.max(1, Math.round(w * k));
+            canvas.height = Math.max(1, Math.round(h * k));
+            let ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                let px;
+                try {
+                    px = ctx.getImageData(canvas.width - 1, canvas.height - 1, 1, 1).data;
+                } catch {
+                    px = null;
+                }
+                if (px && px[3] === 255) {
+                    return {canvas: canvas, ctx: ctx, scale: k};
+                }
+            }
+        }
+        return null;
+    }
+
+    function downloadAsPng(graphic) {
+        renderPng(graphic).then(function (blob) {
+            saveAs(blob, downloadFileName(PNG_SUFFIX));
+        }, function (err) {
+            console.error(ERROR + 'PNG export failed: ' + err);
+        });
+    }
+
+    // The graphic as a PNG Blob, at the Download section's 2x/4x/8x -- less
+    // where the browser cannot paint a canvas that large (paintableCanvas).
+    function renderPng(graphic) {
+        if (!graphic) {
+            return Promise.reject(new Error('nothing to draw'));
+        }
         if (!pngExportAvailable()) {
-            console.error(ERROR + 'PNG export needs the optional canvg library on the page');
-            return;
+            return Promise.reject(new Error('PNG export needs the optional canvg library on the page'));
+        }
+        let target = paintableCanvas(graphic.w, graphic.h, _pngScale);
+        if (!target) {
+            return Promise.reject(new Error('this browser cannot paint a canvas of that size'));
+        }
+        if (target.scale < _pngScale) {
+            console.warn(WARNING + ': PNG exported at ' + target.scale.toFixed(2) + 'x rather than ' + _pngScale
+                + 'x: the largest image this browser can paint');
         }
-        let svg = getTreeAsSvg();
-        // Render onto an up-scaled canvas so the exported PNG is high-resolution
-        // rather than 1:1 with the on-screen SVG. Scale is configurable via
-        // _settings.pngExportScale (default 4x).
-        let svgEl = treeSvgElement();
-        let scale = _settings.pngExportScale > 0 ? _settings.pngExportScale : 4;
-        let w = (svgEl && svgEl.width.baseVal.value) || _displayWidth;
-        let h = (svgEl && svgEl.height.baseVal.value) || _displayHeight;
-        let canvas = document.createElement('canvas');
-        canvas.width = Math.round(w * scale);
-        canvas.height = Math.round(h * scale);
-        let ctx = canvas.getContext('2d');
+        let canvas = target.canvas;
+        let ctx = target.ctx;
         // The up-scaling is done on the CONTEXT, not through canvg's own
         // scaleWidth/scaleHeight: canvg 4's scaling pipeline mis-scales (a
         // requested 4x came out at 2.5x, leaving unpainted margins -- and any
@@ -16349,20 +17689,56 @@ function (root, d3, forester, phyloXml) {
         // background before canvg draws a thing. ignoreDimensions keeps canvg
         // from resizing the canvas to the SVG's size (which would erase both
         // the transform and the fill); ignoreClear keeps it from clearing the
-        // fill back to transparent. Content outside the on-screen viewport
-        // falls outside the canvas and is cropped, so the export shows
-        // exactly the visible view. v4's render() is async (v1's canvg()
+        // fill back to transparent. v4's render() is async (v1's canvg()
         // call drew synchronously, so toBlob could follow on the next line).
         ctx.fillStyle = _state.backgroundColorForPrintExportDefault;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.scale(scale, scale);
-        let v = window.Canvg.fromString(ctx, svg);
-        v.render({ignoreDimensions: true, ignoreClear: true}).then(function () {
-            canvas.toBlob(function (blob) {
-                saveAs(blob, _state.nameForPngDownload);
+        ctx.scale(target.scale, target.scale);
+        let v = window.Canvg.fromString(ctx, graphic.text);
+        return v.render({ignoreDimensions: true, ignoreClear: true}).then(function () {
+            return new Promise(function (resolve, reject) {
+                canvas.toBlob(function (blob) {
+                    if (blob) {
+                        resolve(blob);
+                    } else {
+                        reject(new Error('the canvas gave no image'));
+                    }
+                }, 'image/png');
             });
+        });
+    }
+
+    // Copying an image needs the async clipboard's write() and ClipboardItem
+    // (a secure page: https, or localhost) as well as canvg; the button is
+    // only offered where all three are there.
+    function pngCopyAvailable() {
+        return pngExportAvailable() && typeof window.ClipboardItem === 'function'
+            && !!(navigator.clipboard && navigator.clipboard.write);
+    }
+
+    // The desktop's "copy image": the picture straight onto the clipboard,
+    // for a Word document or a slide. The ClipboardItem is made at once, with
+    // the image as a PROMISE, inside the click: Safari allows a clipboard
+    // write only during the gesture, and drawing the PNG takes longer than
+    // that -- a promise-valued item is how it waits (Chrome takes it too).
+    function copyPngPressed(event) {
+        let btn = event.currentTarget;
+        let png = new Promise(function (resolve, reject) {
+            withGraphic(function (graphic) {
+                renderPng(graphic).then(resolve, reject);
+            }, reject);
+        });
+        let written;
+        try {
+            written = navigator.clipboard.write([new window.ClipboardItem({'image/png': png})]);
+        } catch (e) {
+            written = Promise.reject(e);
+        }
+        written.then(function () {
+            flashButton(btn, 'Copied ✓');
         }, function (err) {
-            console.error(ERROR + 'PNG export failed: ' + err);
+            console.error(ERROR + 'copying the PNG failed: ' + err);
+            flashButton(btn, 'Copy failed');
         });
     }