archaeopteryx 3.16.0 → 3.18.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.16.0
+// v 3.18.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.16.0';
+    const VERSION = '3.18.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';
@@ -498,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;
@@ -1567,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;
@@ -1596,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;
             }
@@ -1618,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';
@@ -1643,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) {
@@ -3207,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;
                 }
@@ -3228,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;
                 }
@@ -3250,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')
@@ -3264,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));
                 }
             });
 
@@ -3978,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];
@@ -4019,7 +4065,8 @@ 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
@@ -4435,7 +4482,7 @@ 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;
@@ -4747,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
@@ -4798,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;
         }
@@ -4872,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)' : '');
     }
@@ -5396,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',
@@ -6004,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
@@ -6399,11 +6449,11 @@ function (root, d3, forester, phyloXml) {
         // and a tree whose dates carry a unit is never touched. The desktop
         // converts at the same point, next to its internal-label policy
         // (their HeightDateConverter, 0.11.151).
-        // Each node's cumulative divergence is recorded from the branch
-        // lengths AS LOADED, before anything rewrites them, so the time <->
-        // divergence switch is reversible rather than one-way. Auspice states
-        // divergence outright (nextstrain:div) and is unaffected; every other
-        // tree states it as its branch lengths, which the time view overwrites.
+        // What the Time | Div switch needs to be lossless is kept from the
+        // branch lengths AS LOADED, before anything rewrites them: the
+        // lengths a tree arrived with in time, and on a BEAST clock-model
+        // tree its divergence, each length times its rate (see
+        // forester.captureDivergence).
         trees.forEach(function (t) {
             forester.captureDivergence(t);
         });
@@ -6884,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();
             }
 
@@ -7170,6 +7217,7 @@ function (root, d3, forester, phyloXml) {
                     items.push({label: deleteLabel, danger: true, action: function () {
                         forester.deleteSubtree(tree, d);
                         _treeData = tree;
+                        branchScaleAfterEdit();
                         _basicTreeProperties = forester.collectBasicTreeProperties(_treeData);
                         refreshVisualizations(true);
                         search0();
@@ -10239,10 +10287,12 @@ function (root, d3, forester, phyloXml) {
 
     /**
      * Redraws the tree with its branch lengths taken from the chosen metric:
-     * TIME (the gaps between the nodes' dates) or DIVERGENCE (what the file's
-     * own branch lengths measured, recorded at load). Both metrics stay on the
-     * tree, so this is reversible and lossless -- a round trip restores the
-     * loaded branch lengths exactly.
+     * TIME (the lengths the tree arrived with, where it arrived in time; its
+     * date gaps otherwise) or DIVERGENCE (what its nodes record, or on a BEAST
+     * clock-model tree each branch's time times its clock rate). Both stay on
+     * the tree, so this is reversible and lossless -- a round trip restores
+     * the branch lengths exactly. Always the WHOLE tree, whatever is on view.
+     * The rules are forester.hasTimeAndDivergence's, shared with the desktop.
      *
      * @param scale 'time' or 'divergence'
      */
@@ -10257,13 +10307,53 @@ function (root, d3, forester, phyloXml) {
             forester.applyDivergenceBranchLengths(_treeData);
         }
         // the branch lengths ARE the layout, so everything measured from them
-        // has to be measured again
-        _basicTreeProperties = forester.collectBasicTreeProperties(_treeData);
-        setCheckboxValue(BRANCH_SCALE_TIME_BUTTON, scale === 'time');
-        setCheckboxValue(BRANCH_SCALE_DIV_BUTTON, scale !== 'time');
+        // has to be measured again -- for the tree ON VIEW, as switchToSubtree
+        // measures it: a clade's properties are not the whole tree's
+        _basicTreeProperties = forester.collectBasicTreeProperties(displayedRoot());
+        syncBranchScaleControls();
         zoomToFit();
     }
 
+    // The switch's two buttons and whether the pair is shown at all, from the
+    // state: most trees state only one thing, and a control offering a choice
+    // that does not exist is worse than no control.
+    function syncBranchScaleControls() {
+        setCheckboxValue(BRANCH_SCALE_TIME_BUTTON, _state.branchScale === 'time');
+        setCheckboxValue(BRANCH_SCALE_DIV_BUTTON, _state.branchScale !== 'time');
+        let scaleGroup = document.querySelector('.' + BRANCH_SCALE_CONTROLGROUP);
+        if (scaleGroup) {
+            scaleGroup.style.display = _branchScaleAvailable ? '' : 'none';
+        }
+    }
+
+    // The tree was EDITED (a node deleted). Whether it has two layouts is asked
+    // of the tree as it is now, and the layout on screen is laid out again
+    // from what the tree keeps and records: the branch that took the place of
+    // a removed node's is as long as both were, in either layout. A tree that
+    // was never offered the switch still has the branch lengths of its file,
+    // so what it keeps is taken afresh -- deleting the one tip without a
+    // clock rate leaves a tree with a rate on every branch.
+    function branchScaleAfterEdit() {
+        if (!_treeData) {
+            return;
+        }
+        let was = _branchScaleAvailable;
+        if (!was) {
+            forester.captureDivergence(_treeData);
+        }
+        _branchScaleAvailable = forester.hasTimeAndDivergence(_treeData);
+        if (was && _branchScaleAvailable && _state.branchScale === 'divergence') {
+            forester.applyDivergenceBranchLengths(_treeData);
+        } else if (was) {
+            // in time, or no longer a tree with two layouts: back in time
+            forester.applyTimeBranchLengths(_treeData);
+            _state.branchScale = 'time';
+        } else {
+            _state.branchScale = forester.branchLengthScale(_treeData);
+        }
+        syncBranchScaleControls();
+    }
+
     function branchScaleButtonClicked() {
         setBranchScale(getCheckboxValue(BRANCH_SCALE_TIME_BUTTON) ? 'time' : 'divergence');
     }
@@ -11476,23 +11566,37 @@ function (root, d3, forester, phyloXml) {
     // the tree's own branch scale, so the bands line up with the branches
     // even on a fossil-only tree whose youngest tip is far from the present.
 
+    // Whether the branch lengths on screen measure divergence: the switch says
+    // so where it is offered; the tree's own unit where it is not (a build
+    // that opened in divergence, a tree saved from Div).
+    function branchesShowDivergence() {
+        if (_branchScaleAvailable) {
+            return _state.branchScale === 'divergence';
+        }
+        return !!_treeData && typeof _treeData.branch_length_unit === 'string'
+            && _treeData.branch_length_unit.trim() === 'subs/site';
+    }
+
     function timeAxisShown() {
-        return _state.showTimeAxis === true && !radialDisplay()
+        return _state.showTimeAxis === true && !_state.unrootedDisplay
             && _state.phylogram === true
             && _timeInfo !== null && _timeInfo.type !== null
             && _basicTreeProperties.branchLengths === true
             // The axis is an overlay calibrated to the tree's own branch scale,
-            // so it must be hidden when the branches are showing DIVERGENCE
-            // and divergence is a different measure -- calendar years against
-            // substitutions reads as a confident lie. Only then: where the two
-            // metrics agree (a BEAST time tree, whose branch lengths ARE time)
-            // there is no switch and the axis is calibrated correctly, which
-            // is what makes a converted BEAST tree show its years at all.
-            && !(_branchScaleAvailable && _state.branchScale === 'divergence');
+            // so it must be hidden when the branches are showing DIVERGENCE --
+            // calendar years against substitutions reads as a confident lie.
+            // Whether the switch is offered is not the question: a Nextstrain
+            // build with one undated node opens in divergence, says so in its
+            // unit, and is refused the switch; its axis was drawn over
+            // substitutions until 2026-09-29. A tree in time shows its axis
+            // (a converted BEAST tree its years) whether or not it has a
+            // second layout.
+            && !branchesShowDivergence();
     }
 
     function timeAxisBottomReserve() {
-        if (!timeAxisShown()) {
+        // circular draws its ruler in the tree's own gap, not under it
+        if (!timeAxisShown() || _state.circularDisplay) {
             return 0;
         }
         return _timeInfo.type === 'geologic' ? TIME_GEO_RESERVE : TIME_CAL_RESERVE;
@@ -11652,6 +11756,48 @@ function (root, d3, forester, phyloXml) {
         }
 
         let sc = info.type === 'calendar' ? -corr : corr;
+        let circular = _state.circularDisplay;
+
+        // A bar spanning depths x0..x1 at node d: a band across the branch in
+        // rectangular, a segment along the node's spoke in circular.
+        function timeBar(d, x0, x1, thick, fill, cls) {    // bound to d, for probes
+            let el;
+            if (circular) {
+                // A bound older than the root's own estimate is a NEGATIVE
+                // radius, and the bar runs on through the centre onto the far
+                // side of its spoke's line, as the rectangular bar straddles
+                // the root's x. As on the desktop (hpdRadialRange).
+                let a = radialAngle(d.x);
+                let p0 = polarXY(a, radialRadius(x0));
+                let p1 = polarXY(a, radialRadius(x1));
+                el = g.append('line').attr('x1', p0[0]).attr('y1', p0[1])
+                    .attr('x2', p1[0]).attr('y2', p1[1])
+                    .attr('stroke', fill).attr('stroke-width', thick);
+            } else {
+                el = g.append('rect').attr('x', Math.min(x0, x1)).attr('y', d.x - (thick / 2))
+                    .attr('width', Math.max(1, Math.abs(x1 - x0))).attr('height', thick)
+                    .attr('fill', fill);
+            }
+            el.datum(d).attr('class', cls);
+        }
+        // a short stroke ACROSS the branch at depth x: a fossil range's end cap
+        function timeCap(d, x) {
+            let p;
+            let q;
+            if (circular) {
+                let a = radialAngle(d.x);
+                let r = radialRadius(x);    // negative past the centre, as the bar's end is
+                let half = 4 / Math.max(Math.abs(r), 4);    // 4px either side, as an angle
+                p = polarXY(a - half, r);
+                q = polarXY(a + half, r);
+            } else {
+                p = [x, d.x - 4];
+                q = [x, d.x + 4];
+            }
+            g.append('line').attr('x1', p[0]).attr('y1', p[1]).attr('x2', q[0]).attr('y2', q[1])
+                .attr('stroke', FOSSIL_BAR_COLOR).attr('stroke-width', 1)
+                .datum(d).attr('class', 'aptx-fossil-cap');
+        }
 
         // ---- HPD age bars (internal) + tip bars: fossil ranges, or sampling dates ----
         forEachDisplayed(function (d) {
@@ -11672,9 +11818,15 @@ function (root, d3, forester, phyloXml) {
             let s = sc;
             let xa = d.y - ((max - value) * s);
             let xb = d.y + ((value - min) * s);
-            let left = Math.min(xa, xb);
-            let w = Math.max(1, Math.abs(xb - xa));
-            let y = d.x;
+            if (circular && Math.abs(radialRadius(xb) - radialRadius(xa)) < 1) {
+                // the 1px floor, along the spoke: from the bar's inner end
+                // outward, as the rectangular bar is floored from its left
+                // end and as the desktop draws it (hpdRadialRange). It was
+                // centred on the interval until 2026-09-29.
+                let inner = Math.min(xa, xb);
+                xa = inner;
+                xb = inner + (_radial.maxY / _radial.maxRad);
+            }
             // What a TIP's interval means is the axis's to say. On geologic
             // time it is a fossil's observed range, FAD to LAD, and is drawn
             // as one below. On CALENDAR time it is the uncertainty of a
@@ -11687,27 +11839,24 @@ function (root, d3, forester, phyloXml) {
             // the desktop alike). The width test is the entry guard above.
             let sampledTip = !d.children && info.type === 'calendar';
             if (d.children) {
-                g.append('rect').attr('x', left).attr('y', y - 3.5)
-                    .attr('width', w).attr('height', 7)
-                    .attr('fill', HPD_BAR_COLOR);
+                timeBar(d, xa, xb, 7, HPD_BAR_COLOR, 'aptx-age-bar');
             } else if (sampledTip) {
-                g.append('rect').attr('class', 'aptx-sampling-bar')
-                    .attr('x', left).attr('y', y - 2.5)
-                    .attr('width', w).attr('height', 5)
-                    .attr('fill', HPD_BAR_COLOR);
+                timeBar(d, xa, xb, 5, HPD_BAR_COLOR, 'aptx-sampling-bar');
             } else {
-                g.append('rect').attr('x', left).attr('y', y - 2.5)
-                    .attr('width', w).attr('height', 5)
-                    .attr('fill', FOSSIL_BAR_COLOR);
+                timeBar(d, xa, xb, 5, FOSSIL_BAR_COLOR, 'aptx-fossil-bar');
                 // FAD/LAD end caps, so the range reads as a bracketed interval
-                [left, left + w].forEach(function (cx) {
-                    g.append('line').attr('x1', cx).attr('x2', cx)
-                        .attr('y1', y - 4).attr('y2', y + 4)
-                        .attr('stroke', FOSSIL_BAR_COLOR).attr('stroke-width', 1);
-                });
+                let lo = Math.min(xa, xb);
+                let hi = Math.max(xa, xb, lo + 1);
+                timeCap(d, lo);
+                timeCap(d, hi);
             }
         });
 
+        if (circular) {
+            drawCircularTimeRuler(info, anchor, maxTipX, corr, g, grid, ink);
+            return;
+        }
+
         // ---- the axis itself: a FLOATING strip (see floatStripGroup) ----
         let ax = floatStripGroup('aptx-time-axis', axisTop - 4, timeAxisBottomReserve() + 4);
         function axisBackdrop(x0, x1) {
@@ -11864,6 +12013,151 @@ function (root, d3, forester, phyloXml) {
         placeFloatingOverlays();
     }
 
+    // The circular layout's time axis. Its ruler runs along the gap between
+    // the last tip and the first -- the one ray no branch crosses -- from the
+    // root out to the tips, so it turns with the tree. "Time Grid" draws each
+    // tick as a full ring behind the tree; a geologic axis lays its intervals
+    // down as coloured rings, as the desktop does.
+    function drawCircularTimeRuler(info, anchor, maxTipX, corr, g, grid, ink) {
+        let depthOf;       // a date -> depth, the axis the radius is drawn from
+        let ticks = [];
+        let from;          // the root end and the tip end, as dates
+        let to;
+        let bands = [];
+        if (info.type === 'geologic') {
+            let rootAge = info.rootAge;
+            if (!(rootAge > 0)) {
+                return;
+            }
+            let anchorAge = anchor ? anchor.date.value : rootAge;
+            let anchorX = anchor ? anchor.y : _root.y;
+            depthOf = function (age) {
+                return anchorX + ((anchorAge - age) * corr);
+            };
+            from = rootAge;
+            to = Math.max(0, anchorAge - ((maxTipX - anchorX) / corr));
+            forester.maAxisTickValues(rootAge).forEach(function (v) {
+                if (v >= to - 1e-9 && v <= rootAge + 1e-9) {
+                    ticks.push({value: v, text: String(v)});
+                }
+            });
+            if (to > 0) {
+                ticks.push({value: to, text: String(Math.round(to * 100) / 100), first: true});
+            }
+            bands = forester.geoOverlapping(forester.geoBandRanks(to, rootAge)[1], to, rootAge);
+        } else {
+            let present = info.presentDate;
+            if (!(present > 0)) {
+                return;
+            }
+            let anchorYear = anchor ? anchor.date.value : present;
+            let anchorX = anchor ? anchor.y : maxTipX;
+            depthOf = function (yv) {
+                return anchorX - ((anchorYear - yv) * corr);
+            };
+            from = anchorYear - ((anchorX - _root.y) / corr);
+            to = present;
+            forester.calendarTickYears(from, to).forEach(function (yv) {
+                ticks.push({value: yv, text: String(Math.round(yv))});
+            });
+        }
+        let radiusOf = function (v) {
+            return Math.max(0, radialRadius(depthOf(v)));
+        };
+        let r0 = radiusOf(from);
+        let r1 = radiusOf(to);
+        if (!(r1 > r0)) {
+            return;
+        }
+        // behind the tree: the geologic rings, then the grid rings
+        let behind = null;
+        if (bands.length > 0 || grid) {
+            behind = grid || _svgGroup.insert('g', 'g').attr('class', 'aptx-timegrid')
+                .style('pointer-events', 'none');
+        }
+        let ring = d3.arc().startAngle(0).endAngle(2 * Math.PI);
+        let named = [];
+        bands.forEach(function (iv) {
+            let a = radiusOf(Math.min(iv.old, from));
+            let b = radiusOf(Math.max(iv.young, to));
+            if (b - a <= 0) {
+                return;
+            }
+            behind.append('path').attr('d', ring.innerRadius(a).outerRadius(b)())
+                .attr('fill', iv.color).attr('fill-opacity', 0.35);
+            named.push({r: (a + b) / 2, span: b - a, text: iv.name, color: iv.color});
+        });
+        if (grid) {
+            ticks.forEach(function (t) {
+                let r = radiusOf(t.value);
+                if (r > r0 + 0.5 && r < r1 - 0.5) {
+                    grid.append('circle').attr('r', r).attr('fill', 'none')
+                        .attr('stroke', ink).attr('stroke-opacity', 0.18).attr('stroke-width', 1);
+                }
+            });
+        }
+
+        // the ruler, on the gap's centre line
+        let gap = _radialRotation + _radial.angleSpan + ((2 * Math.PI - _radial.angleSpan) / 2);
+        let screen = gap - (Math.PI / 2);
+        let along = [Math.cos(screen), Math.sin(screen)];
+        let across = [-along[1], along[0]];
+        let flip = along[0] < -1e-9;       // keep every number upright
+        let deg = (screen * 180 / Math.PI) + (flip ? 180 : 0);
+        let at = function (r, off) {
+            return [(along[0] * r) + (across[0] * off), (along[1] * r) + (across[1] * off)];
+        };
+        let ax = g.append('g').attr('class', 'aptx-time-ruler');
+        let e0 = at(r0, 0);
+        let e1 = at(r1, 0);
+        ax.append('line').attr('x1', e0[0]).attr('y1', e0[1]).attr('x2', e1[0]).attr('y2', e1[1])
+            .attr('stroke', ink).attr('stroke-width', 1);
+        // numbers on one side of the ruler, interval names on the other; the
+        // headline value first, then the round ticks outward, none overlapping
+        function label(r, off, text, fill, backdrop) {
+            let p = at(r, off);
+            let t = ax.append('g')
+                .attr('transform', 'translate(' + p[0] + ',' + p[1] + ') rotate(' + deg + ')');
+            let w = text.length * 5.5;
+            if (backdrop) {
+                t.append('rect').attr('x', -(w / 2) - 2).attr('y', -6).attr('width', w + 4).attr('height', 12)
+                    .attr('rx', 2).attr('fill', _state.backgroundColorDefault).attr('fill-opacity', 0.85);
+            }
+            t.append('text').attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
+                .style('font-size', '9px').style('fill', fill).text(text);
+        }
+        let side = flip ? -1 : 1;
+        let placed = [];
+        ticks.sort(function (p, q) {
+            return (q.first ? 1 : 0) - (p.first ? 1 : 0) || radiusOf(p.value) - radiusOf(q.value);
+        });
+        ticks.forEach(function (t) {
+            let r = radiusOf(t.value);
+            let c0 = at(r, -4);
+            let c1 = at(r, 4);
+            ax.append('line').attr('x1', c0[0]).attr('y1', c0[1]).attr('x2', c1[0]).attr('y2', c1[1])
+                .attr('stroke', ink).attr('stroke-width', 1);
+            let half = t.text.length * 2.8;
+            for (let i = 0; i < placed.length; ++i) {
+                if (Math.abs(placed[i] - r) < (half * 2) + 6) {
+                    if (!t.first) {
+                        return;
+                    }
+                }
+            }
+            label(r, side * 11, t.text, ink, true);
+            placed.push(r);
+        });
+        if (info.type === 'geologic') {
+            label(r1 + 14, 0, 'Ma', ink, false);
+            named.forEach(function (n) {
+                if ((n.text.length * 5.5) + 4 <= n.span) {
+                    label(n.r, -side * 11, n.text, ink, true);
+                }
+            });
+        }
+    }
+
     function timeAxisCbClicked() {
         _state.showTimeAxis = getCheckboxValue(TIME_AXIS_CB);
         scheduleUpdate(null, 0);
@@ -13020,12 +13314,13 @@ function (root, d3, forester, phyloXml) {
         syncHeatmapControls();
         let timeCb = byId(TIME_AXIS_CB);
         if (timeCb) {
-            timeCb.disabled = radialDisplay();
+            // circular draws it along the gap; only unrooted cannot
+            timeCb.disabled = _state.unrootedDisplay === true;
         }
         let timeGridCb = byId(TIME_GRID_CB);
         if (timeGridCb) {
             // grid lines hang off the time axis: no axis, nothing to grid
-            timeGridCb.disabled = radialDisplay() || _state.showTimeAxis !== true;
+            timeGridCb.disabled = _state.unrootedDisplay === true || _state.showTimeAxis !== true;
         }
         let minus = byId(ZOOM_OUT_X);
         let plus = byId(ZOOM_IN_X);
@@ -13272,14 +13567,165 @@ 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) {
         setStylesAll('.' + BASE_BACKGROUND, {
             'fill': color
@@ -13543,7 +13989,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 = ['View & Tools', 'Sizes', 'Domain Architectures', 'Download'];
 
     function loadPanelSections() {
         if (_panelSections) {
@@ -13558,6 +14006,11 @@ function (root, d3, forester, phyloXml) {
                         _panelSections[k] = saved[k];
                     }
                 });
+                // the section was called Zoom until 2026-09-30: a fold
+                // remembered under that name still counts
+                if (typeof saved.Zoom === 'boolean' && _panelSections['View & Tools'] === undefined) {
+                    _panelSections['View & Tools'] = saved.Zoom;
+                }
             }
         } catch {
             // no storage (private mode), or junk written by something else:
@@ -13998,13 +14451,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);'
@@ -14031,7 +14484,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);'
             + '}'
@@ -14061,6 +14514,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);'
@@ -14079,7 +14543,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);'
             + '}'
@@ -14229,7 +14693,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 + '} }'
@@ -14384,6 +14848,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
@@ -14412,7 +14886,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; }'
@@ -15618,14 +16091,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);
 
@@ -15842,12 +16307,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;
+            });
         });
 
         // ---------------
@@ -16143,14 +16615,14 @@ function (root, d3, forester, phyloXml) {
             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,
+            // The branch SCALE, when the tree can be laid out by time and by
+            // divergence (forester.hasTimeAndDivergence). Hidden otherwise,
             // which is most trees.
             h = h.concat('<div class="' + BRANCH_SCALE_CONTROLGROUP + ' aptx-segmented">');
             h = h.concat(makeSegment('Time', BRANCH_SCALE_TIME_BUTTON, 'branch_scale_radio',
-                'branch lengths measure TIME (the nodes\' dates)'));
+                'lay the tree out by TIME (each branch at its stated length in time; from the node dates where the tree arrived showing divergence)'));
             h = h.concat(makeSegment('Div', BRANCH_SCALE_DIV_BUTTON, 'branch_scale_radio',
-                'branch lengths measure DIVERGENCE (substitutions, as the file states them)'));
+                'lay the tree out by DIVERGENCE (substitutions per site: as the tree records it, or on a BEAST tree each branch\'s time x its clock rate)'));
             h = h.concat('</div>');
             h = h.concat('</div>');
             h = h.concat('</fieldset>');
@@ -16252,8 +16724,8 @@ function (root, d3, forester, phyloXml) {
             if (_timeInfo && _timeInfo.type) {
                 opts.push(makeCheckboxItem('Time Axis', TIME_AXIS_CB, 'to show/hide the '
                     + (_timeInfo.type === 'geologic' ? 'geologic (ICS) time axis' : 'calendar time axis')
-                    + ' and node-age bars (phylogram, rectangular layout only)'));
-                opts.push(makeCheckboxItem('Time Grid', TIME_GRID_CB, 'to show/hide vertical grid lines at the '
+                    + ' and node-age bars (phylogram; rectangular and circular layouts)'));
+                opts.push(makeCheckboxItem('Time Grid', TIME_GRID_CB, 'to show/hide grid lines (rings, in circular) at the '
                     + (_timeInfo.type === 'geologic' ? 'geologic interval boundaries' : 'calendar year ticks')));
             }
 
@@ -16272,7 +16744,7 @@ function (root, d3, forester, phyloXml) {
             // syncZoomRowButtons). The Y buttons span the whole row.
             let h = "";
             h = h.concat('<fieldset>');
-            h = h.concat('<legend>Zoom</legend>');
+            h = h.concat('<legend>View &amp; Tools</legend>');
             h = h.concat('<div class="aptx-zoomgrid">');
             h = h.concat(makeButton('Y+', ZOOM_IN_Y, 'zoom in vertically (or Shift+mousewheel)'));
             h = h.concat('<div class="aptx-zoomrow">');
@@ -16284,8 +16756,9 @@ function (root, d3, forester, phyloXml) {
             h = h.concat('</div>');
             h = h.concat(makeButton('Y-', ZOOM_OUT_Y, 'zoom out vertically (or Shift+mousewheel)'));
             h = h.concat('</div>');
-            // the tool buttons share the Zoom section rather than paying for
-            // a fieldset of their own
+            // the tool buttons share the section with the zoom row rather
+            // than paying for a fieldset of their own -- hence its name
+            // (Christian, 2026-09-30: "ZOOM" named only half of it)
             h = h.concat('<div class="aptx-toolrow">');
             h = h.concat(makeGlyphButton('ladderize_asc', LADDERIZE_BUTTON, 'ladderize all'));
             h = h.concat(makeGlyphButton('whole_tree', RETURN_TO_SUPERTREE_BUTTON, 'return all the way to the complete tree (if in a sub-tree)'));
@@ -16298,34 +16771,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
-                + '" aria-label="Download format" title="the file format the Download button writes">');
+            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;
         }
 
@@ -16578,6 +17066,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);
@@ -16681,14 +17190,7 @@ function (root, d3, forester, phyloXml) {
             disableCheckbox('#' + PHYLOGRAM_BUTTON);
             disableCheckbox('#' + PHYLOGRAM_ALIGNED_BUTTON);
         }
-        setCheckboxValue(BRANCH_SCALE_TIME_BUTTON, _state.branchScale === 'time');
-        setCheckboxValue(BRANCH_SCALE_DIV_BUTTON, _state.branchScale !== 'time');
-        // most trees state only one thing, and a control offering a choice
-        // that does not exist is worse than no control
-        let scaleGroup = document.querySelector('.' + BRANCH_SCALE_CONTROLGROUP);
-        if (scaleGroup) {
-            scaleGroup.style.display = _branchScaleAvailable ? '' : 'none';
-        }
+        syncBranchScaleControls();
     }
 
 
@@ -16846,70 +17348,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
@@ -16937,9 +17717,42 @@ 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() : '';
+        // what the phylogeny itself states goes with the part: without its
+        // branch_length_unit a subtree saved from Div opened again as time
+        let part = Object.assign({}, _root, {name: name ? name + ' (subtree)' : undefined});
+        ['rooted', 'rerootable', 'type', 'branch_length_unit'].forEach(function (k) {
+            if (_root_const[k] !== undefined && _root_const[k] !== null) {
+                part[k] = _root_const[k];
+            }
+        });
+        return part;
+    }
+
+    // "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() {
@@ -16947,25 +17760,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));
     }
 
-    function downloadAsSVG() {
-        let svg = getTreeAsSvg();
-        saveAs(new Blob([decodeURIComponent(encodeURIComponent(svg))], {type: "application/svg+xml"}), _state.nameForSvgDownload);
+    // 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));
+    }
+
+    // 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
@@ -16979,13 +17810,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
@@ -17017,9 +17853,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',
@@ -17027,7 +17863,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();
@@ -17044,23 +17880,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 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 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 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
@@ -17069,20 +17944,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');
         });
     }