react-cheminfo 0.50.0 → 0.52.0

package/src/locales/de.json

@@ -76,7 +76,6 @@
   "share.copyIframe": "Iframe kopieren",
   "share.copyIframeHelpTitle": "Die Seite in Ihre einbauen",
   "share.copyIframeHelp": "Ein HTML-Schnipsel, das dort eingefügt wird, wo das HTML Ihrer Seite bearbeitet wird: das Werkzeug läuft dann darin.",
-  "share.done": "Fertig",
   "cite.button": "Zitieren",
   "cite.copyReferenceAs": "Literaturangabe kopieren als",
   "cite.pleaseCiteBoth": "Bitte zitieren Sie beide Arbeiten",
@@ -155,13 +154,19 @@
   "color.custom": "Eigene",
   "color.customEllipsis": "Eigene…",
   "color.inUse": "in Gebrauch",
+  "color.uniform": "Eine Farbe",
+  "color.uniformDescription": "Alle Werte in einer Farbe, die Abbildung braucht keine Legende.",
+  "color.uniformColour": "Die Farbe wählen",
   "color.colourScale": "Farbskala",
   "color.legendLabel": "{what} von {low} bis {high}",
   "color.scaleBeingEdited": "Die bearbeitete Skala",
   "color.anchorColour": "Farbe des Ankers {index}",
   "color.anchorPosition": "Position des Ankers {index}",
   "color.removeAnchor": "Anker {index} entfernen",
-  "color.addColour": "Eine Farbe hinzufügen",
+  "color.editorHint": "Klicken Sie auf den Streifen, um eine Farbe hinzuzufügen. Ziehen Sie einen Anker, um ihn zu verschieben, doppelklicken Sie, um ihn umzufärben, zeigen Sie darauf und drücken Sie die Rücktaste, um ihn zu entfernen.",
+  "color.saturation": "Sättigung",
+  "color.brightness": "Helligkeit",
+  "color.toneHelp": "Alle Anker auf einmal; jeder behält seinen Farbton.",
   "color.path": "Weg zwischen zwei Ankern",
   "color.interpolation.rgb": "RGB — die Kanäle mischen",
   "color.interpolation.hsv": "HSV — den kurzen Weg drehen",
@@ -266,7 +271,24 @@
   "periodic.table": "Periodensystem",
   "periodic.group": "Gruppe {group}",
   "periodic.period": "Periode {period}",
+  "periodic.block": "{block}-Block",
   "periodic.allElements": "Alle Elemente",
+  "periodic.help.title": "Elemente auswählen",
+  "periodic.help.click": "Klick",
+  "periodic.help.modClick": "+ Klick",
+  "periodic.help.element": "Ein Element",
+  "periodic.help.elementClick": "Zeigt es an",
+  "periodic.help.elementMod": "Fügt es hinzu oder entfernt es",
+  "periodic.help.number": "Eine Perioden- oder Gruppennummer",
+  "periodic.help.numberClick": "Wählt die Zeile oder Spalte",
+  "periodic.help.runMod": "Fügt sie der Auswahl hinzu",
+  "periodic.help.block": "s, p, d oder f, unter der Tabelle",
+  "periodic.help.blockClick": "Wählt den Block",
+  "periodic.help.corner": "Die Ecke ◢ oben links",
+  "periodic.help.cornerClick": "Wählt alle Elemente",
+  "periodic.help.arrowsClick": "Durch die Tabelle gehen",
+  "periodic.help.note": "Ein zweiter Klick auf eine Nummer oder einen Block hebt sie auf. Nicht Ausgewähltes wird abgeblendet.",
+  "periodic.help.ctrl": "Strg",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Alkalimetall",
   "periodic.category.alkaline-earth-metal": "Erdalkalimetall",
@@ -470,6 +492,10 @@
   "molecule3d.solventProbeHelp": "Radius der Lösungsmittelkugel, die über die Atome gerollt wird. 1,4 Å entspricht einem Wassermolekül; eine größere Sonde glättet die Oberfläche und schließt die engen Taschen.",
   "molecule3d.surfaceColour": "Farbe der Oberfläche",
   "molecule3d.colour": "Farbe",
+  "molecule3d.resetSettings": "Auf Standardwerte zurücksetzen",
+  "molecule3d.atDefaults": "Bereits auf Standardwerten",
+  "molecule3d.surfaceOff": "Die Oberfläche ist ausgeblendet.",
+  "molecule3d.showSurface": "Anzeigen",
   "molecule3d.coloring.uniform": "Einfarbig",
   "molecule3d.coloring.element": "Element",
   "molecule3d.coloring.polarity": "Polarität",

package/src/locales/en.json

@@ -76,7 +76,6 @@
   "share.copyIframe": "Copy the iframe",
   "share.copyIframeHelpTitle": "Put the page inside yours",
   "share.copyIframeHelp": "A snippet of HTML to paste where your own page's HTML is edited: the tool then runs inside it.",
-  "share.done": "Done",
   "cite.button": "Cite",
   "cite.copyReferenceAs": "Copy the reference as",
   "cite.pleaseCiteBoth": "Please cite both works",
@@ -155,13 +154,19 @@
   "color.custom": "Custom",
   "color.customEllipsis": "Custom…",
   "color.inUse": "in use",
+  "color.uniform": "One colour",
+  "color.uniformDescription": "Every value in one colour, so the figure needs no key.",
+  "color.uniformColour": "Pick the one colour",
   "color.colourScale": "Colour scale",
   "color.legendLabel": "{what} from {low} to {high}",
   "color.scaleBeingEdited": "The scale being edited",
   "color.anchorColour": "Colour of anchor {index}",
   "color.anchorPosition": "Position of anchor {index}",
   "color.removeAnchor": "Remove anchor {index}",
-  "color.addColour": "Add a colour",
+  "color.editorHint": "Click the strip to add a colour. Drag an anchor to move it, double-click it to recolour it, point at it and press Backspace to remove it.",
+  "color.saturation": "Saturation",
+  "color.brightness": "Brightness",
+  "color.toneHelp": "Every anchor at once; each keeps its hue.",
   "color.path": "Path between two anchors",
   "color.interpolation.rgb": "RGB — mix the channels",
   "color.interpolation.hsv": "HSV — turn the short way",
@@ -412,7 +417,24 @@
   "periodic.table": "Periodic table",
   "periodic.group": "Group {group}",
   "periodic.period": "Period {period}",
+  "periodic.block": "{block}-block",
   "periodic.allElements": "All elements",
+  "periodic.help.title": "Picking elements",
+  "periodic.help.click": "Click",
+  "periodic.help.modClick": "+ click",
+  "periodic.help.element": "An element",
+  "periodic.help.elementClick": "Reads it",
+  "periodic.help.elementMod": "Adds or removes it",
+  "periodic.help.number": "A period or group number",
+  "periodic.help.numberClick": "Picks that row or column",
+  "periodic.help.runMod": "Adds it to the set",
+  "periodic.help.block": "s, p, d or f, under the table",
+  "periodic.help.blockClick": "Picks that block",
+  "periodic.help.corner": "The ◢ corner, top left",
+  "periodic.help.cornerClick": "Picks every element",
+  "periodic.help.arrowsClick": "Walk the table",
+  "periodic.help.note": "Clicking a number or a block again drops it. What is not picked is dimmed.",
+  "periodic.help.ctrl": "Ctrl",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Alkali metal",
   "periodic.category.alkaline-earth-metal": "Alkaline earth",
@@ -446,6 +468,10 @@
   "molecule3d.solventProbeHelp": "Radius of the solvent sphere rolled over the atoms. 1.4 Å is a water molecule; a larger probe smooths the surface and closes the narrow pockets.",
   "molecule3d.surfaceColour": "Surface colour",
   "molecule3d.colour": "Colour",
+  "molecule3d.resetSettings": "Reset to defaults",
+  "molecule3d.atDefaults": "Already at the defaults",
+  "molecule3d.surfaceOff": "The surface is hidden.",
+  "molecule3d.showSurface": "Show it",
   "molecule3d.coloring.uniform": "Uniform",
   "molecule3d.coloring.element": "Element",
   "molecule3d.coloring.polarity": "Polarity",

package/src/locales/es.json

@@ -76,7 +76,6 @@
   "share.copyIframe": "Copiar el iframe",
   "share.copyIframeHelpTitle": "Poner la página dentro de la tuya",
   "share.copyIframeHelp": "Un fragmento de HTML para pegar donde se edita el HTML de tu página: la herramienta funciona dentro de él.",
-  "share.done": "Listo",
   "cite.button": "Citar",
   "cite.copyReferenceAs": "Copiar la referencia como",
   "cite.pleaseCiteBoth": "Por favor, cite ambos trabajos",
@@ -155,13 +154,19 @@
   "color.custom": "A medida",
   "color.customEllipsis": "A medida…",
   "color.inUse": "en uso",
+  "color.uniform": "Un solo color",
+  "color.uniformDescription": "Todos los valores en un solo color: la figura no necesita leyenda.",
+  "color.uniformColour": "Elegir el color",
   "color.colourScale": "Escala de color",
   "color.legendLabel": "{what} de {low} a {high}",
   "color.scaleBeingEdited": "La escala que se está editando",
   "color.anchorColour": "Color del ancla {index}",
   "color.anchorPosition": "Posición del ancla {index}",
   "color.removeAnchor": "Quitar el ancla {index}",
-  "color.addColour": "Añadir un color",
+  "color.editorHint": "Haga clic en la franja para añadir un color. Arrastre un ancla para moverla, haga doble clic para cambiar su color, señálela y pulse Retroceso para quitarla.",
+  "color.saturation": "Saturación",
+  "color.brightness": "Brillo",
+  "color.toneHelp": "Todas las anclas a la vez; cada una conserva su tono.",
   "color.path": "Camino entre dos anclas",
   "color.interpolation.rgb": "RGB — mezclar los canales",
   "color.interpolation.hsv": "HSV — girar por el camino corto",
@@ -266,7 +271,24 @@
   "periodic.table": "Tabla periódica",
   "periodic.group": "Grupo {group}",
   "periodic.period": "Periodo {period}",
+  "periodic.block": "Bloque {block}",
   "periodic.allElements": "Todos los elementos",
+  "periodic.help.title": "Elegir elementos",
+  "periodic.help.click": "Clic",
+  "periodic.help.modClick": "+ clic",
+  "periodic.help.element": "Un elemento",
+  "periodic.help.elementClick": "Lo muestra",
+  "periodic.help.elementMod": "Lo añade o lo quita",
+  "periodic.help.number": "Un número de periodo o de grupo",
+  "periodic.help.numberClick": "Elige esa fila o columna",
+  "periodic.help.runMod": "Lo añade a la selección",
+  "periodic.help.block": "s, p, d o f, bajo la tabla",
+  "periodic.help.blockClick": "Elige ese bloque",
+  "periodic.help.corner": "La esquina ◢, arriba a la izquierda",
+  "periodic.help.cornerClick": "Elige todos los elementos",
+  "periodic.help.arrowsClick": "Recorren la tabla",
+  "periodic.help.note": "Otro clic en un número o un bloque lo quita. Lo que no está elegido aparece atenuado.",
+  "periodic.help.ctrl": "Ctrl",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Metal alcalino",
   "periodic.category.alkaline-earth-metal": "Alcalinotérreo",
@@ -470,6 +492,10 @@
   "molecule3d.solventProbeHelp": "Radio de la esfera de disolvente que se hace rodar sobre los átomos. 1,4 Å corresponde a una molécula de agua; una sonda mayor suaviza la superficie y cierra los huecos estrechos.",
   "molecule3d.surfaceColour": "Color de la superficie",
   "molecule3d.colour": "Color",
+  "molecule3d.resetSettings": "Restablecer los valores predeterminados",
+  "molecule3d.atDefaults": "Ya en los valores predeterminados",
+  "molecule3d.surfaceOff": "La superficie está oculta.",
+  "molecule3d.showSurface": "Mostrar",
   "molecule3d.coloring.uniform": "Uniforme",
   "molecule3d.coloring.element": "Elemento",
   "molecule3d.coloring.polarity": "Polaridad",

package/src/locales/fr.json

@@ -76,7 +76,6 @@
   "share.copyIframe": "Copier l'iframe",
   "share.copyIframeHelpTitle": "Mettre la page dans la vôtre",
   "share.copyIframeHelp": "Un extrait de HTML à coller là où le HTML de votre page s'édite : l'outil s'exécute alors à l'intérieur.",
-  "share.done": "Terminé",
   "cite.button": "Citer",
   "cite.copyReferenceAs": "Copier la référence en",
   "cite.pleaseCiteBoth": "Merci de citer les deux travaux",
@@ -155,13 +154,19 @@
   "color.custom": "Sur mesure",
   "color.customEllipsis": "Sur mesure…",
   "color.inUse": "en usage",
+  "color.uniform": "Une seule couleur",
+  "color.uniformDescription": "Toutes les valeurs dans une seule couleur : la figure n’a pas besoin de légende.",
+  "color.uniformColour": "Choisir la couleur",
   "color.colourScale": "Échelle de couleurs",
   "color.legendLabel": "{what} de {low} à {high}",
   "color.scaleBeingEdited": "L'échelle en cours d'édition",
   "color.anchorColour": "Couleur de l'ancre {index}",
   "color.anchorPosition": "Position de l'ancre {index}",
   "color.removeAnchor": "Retirer l'ancre {index}",
-  "color.addColour": "Ajouter une couleur",
+  "color.editorHint": "Cliquez sur la bande pour ajouter une couleur. Faites glisser une ancre pour la déplacer, double-cliquez pour la recolorer, survolez-la et appuyez sur Retour arrière pour la retirer.",
+  "color.saturation": "Saturation",
+  "color.brightness": "Luminosité",
+  "color.toneHelp": "Toutes les ancres à la fois ; chacune garde sa teinte.",
   "color.path": "Chemin entre deux ancres",
   "color.interpolation.rgb": "RVB — mélanger les canaux",
   "color.interpolation.hsv": "TSV — tourner par le court chemin",
@@ -266,7 +271,24 @@
   "periodic.table": "Tableau périodique",
   "periodic.group": "Groupe {group}",
   "periodic.period": "Période {period}",
+  "periodic.block": "Bloc {block}",
   "periodic.allElements": "Tous les éléments",
+  "periodic.help.title": "Choisir des éléments",
+  "periodic.help.click": "Clic",
+  "periodic.help.modClick": "+ clic",
+  "periodic.help.element": "Un élément",
+  "periodic.help.elementClick": "Le lit",
+  "periodic.help.elementMod": "L’ajoute ou le retire",
+  "periodic.help.number": "Un numéro de période ou de groupe",
+  "periodic.help.numberClick": "Choisit la ligne ou la colonne",
+  "periodic.help.runMod": "L’ajoute à la sélection",
+  "periodic.help.block": "s, p, d ou f, sous le tableau",
+  "periodic.help.blockClick": "Choisit le bloc",
+  "periodic.help.corner": "Le coin ◢, en haut à gauche",
+  "periodic.help.cornerClick": "Choisit tous les éléments",
+  "periodic.help.arrowsClick": "Parcourent le tableau",
+  "periodic.help.note": "Un second clic sur un numéro ou un bloc le retire. Ce qui n’est pas choisi est estompé.",
+  "periodic.help.ctrl": "Ctrl",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Métal alcalin",
   "periodic.category.alkaline-earth-metal": "Alcalino-terreux",
@@ -470,6 +492,10 @@
   "molecule3d.solventProbeHelp": "Rayon de la sphère de solvant roulée sur les atomes. 1,4 Å correspond à une molécule d'eau ; une sonde plus grande lisse la surface et ferme les poches étroites.",
   "molecule3d.surfaceColour": "Couleur de la surface",
   "molecule3d.colour": "Couleur",
+  "molecule3d.resetSettings": "Rétablir les valeurs par défaut",
+  "molecule3d.atDefaults": "Déjà aux valeurs par défaut",
+  "molecule3d.surfaceOff": "La surface est masquée.",
+  "molecule3d.showSurface": "Afficher",
   "molecule3d.coloring.uniform": "Uniforme",
   "molecule3d.coloring.element": "Élément",
   "molecule3d.coloring.polarity": "Polarité",

package/src/locales/it.json

@@ -76,7 +76,6 @@
   "share.copyIframe": "Copia l'iframe",
   "share.copyIframeHelpTitle": "Mettere la pagina dentro la tua",
   "share.copyIframeHelp": "Un frammento di HTML da incollare dove si modifica l'HTML della tua pagina: lo strumento funziona al suo interno.",
-  "share.done": "Fatto",
   "cite.button": "Cita",
   "cite.copyReferenceAs": "Copia il riferimento come",
   "cite.pleaseCiteBoth": "Si prega di citare entrambi i lavori",
@@ -155,13 +154,19 @@
   "color.custom": "Personalizzata",
   "color.customEllipsis": "Personalizzata…",
   "color.inUse": "in uso",
+  "color.uniform": "Un solo colore",
+  "color.uniformDescription": "Tutti i valori in un solo colore: la figura non ha bisogno di legenda.",
+  "color.uniformColour": "Scegliere il colore",
   "color.colourScale": "Scala di colore",
   "color.legendLabel": "{what} da {low} a {high}",
   "color.scaleBeingEdited": "La scala in corso di modifica",
   "color.anchorColour": "Colore dell'ancora {index}",
   "color.anchorPosition": "Posizione dell'ancora {index}",
   "color.removeAnchor": "Rimuovi l'ancora {index}",
-  "color.addColour": "Aggiungi un colore",
+  "color.editorHint": "Fai clic sulla striscia per aggiungere un colore. Trascina un'ancora per spostarla, fai doppio clic per cambiarne il colore, puntala e premi Backspace per rimuoverla.",
+  "color.saturation": "Saturazione",
+  "color.brightness": "Luminosità",
+  "color.toneHelp": "Tutte le ancore insieme; ognuna conserva la sua tinta.",
   "color.path": "Percorso fra due ancore",
   "color.interpolation.rgb": "RGB — mescolare i canali",
   "color.interpolation.hsv": "HSV — girare dal lato corto",
@@ -412,7 +417,24 @@
   "periodic.table": "Tavola periodica",
   "periodic.group": "Gruppo {group}",
   "periodic.period": "Periodo {period}",
+  "periodic.block": "Blocco {block}",
   "periodic.allElements": "Tutti gli elementi",
+  "periodic.help.title": "Scegliere gli elementi",
+  "periodic.help.click": "Clic",
+  "periodic.help.modClick": "+ clic",
+  "periodic.help.element": "Un elemento",
+  "periodic.help.elementClick": "Lo mostra",
+  "periodic.help.elementMod": "Lo aggiunge o lo toglie",
+  "periodic.help.number": "Un numero di periodo o di gruppo",
+  "periodic.help.numberClick": "Sceglie la riga o la colonna",
+  "periodic.help.runMod": "Lo aggiunge alla selezione",
+  "periodic.help.block": "s, p, d o f, sotto la tavola",
+  "periodic.help.blockClick": "Sceglie il blocco",
+  "periodic.help.corner": "L’angolo ◢, in alto a sinistra",
+  "periodic.help.cornerClick": "Sceglie tutti gli elementi",
+  "periodic.help.arrowsClick": "Percorrono la tavola",
+  "periodic.help.note": "Un altro clic su un numero o un blocco lo toglie. Ciò che non è scelto appare attenuato.",
+  "periodic.help.ctrl": "Ctrl",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Metallo alcalino",
   "periodic.category.alkaline-earth-metal": "Alcalino terroso",
@@ -446,6 +468,10 @@
   "molecule3d.solventProbeHelp": "Raggio della sfera di solvente fatta rotolare sugli atomi. 1,4 Å corrisponde a una molecola d'acqua; una sonda più grande liscia la superficie e chiude le tasche strette.",
   "molecule3d.surfaceColour": "Colore della superficie",
   "molecule3d.colour": "Colore",
+  "molecule3d.resetSettings": "Ripristina i valori predefiniti",
+  "molecule3d.atDefaults": "Già ai valori predefiniti",
+  "molecule3d.surfaceOff": "La superficie è nascosta.",
+  "molecule3d.showSurface": "Mostra",
   "molecule3d.coloring.uniform": "Uniforme",
   "molecule3d.coloring.element": "Elemento",
   "molecule3d.coloring.polarity": "Polarità",

package/src/molecule3d/core/index.ts

@@ -45,5 +45,7 @@ export {
   isRepresentationId,
   isSurfaceColoringId,
   normalizeMolecule3DSettings,
+  resetMolecule3DSettings,
   resolveMolecule3DTools,
+  sameMolecule3DSettings,
 } from './settings.ts';

package/src/molecule3d/core/settings.ts

@@ -185,6 +185,41 @@ export function normalizeMolecule3DSettings(
   };
 }
 
+/**
+ * What the options' reset button returns to: the defaults, with the surface
+ * left on or off as it is — that is the toolbar's toggle, not an option.
+ * @param settings - The settings in force.
+ * @param defaults - The settings the viewer opened on.
+ * @returns The defaults, keeping `showSurface`.
+ */
+export function resetMolecule3DSettings(
+  settings: Molecule3DSettings,
+  defaults: Molecule3DSettings = DEFAULT_MOLECULE_3D_SETTINGS,
+): Molecule3DSettings {
+  return { ...defaults, showSurface: settings.showSurface };
+}
+
+/**
+ * Whether two settings draw the same picture.
+ * @param first - One settings record.
+ * @param second - The other.
+ * @returns True when every field is equal.
+ */
+export function sameMolecule3DSettings(
+  first: Molecule3DSettings,
+  second: Molecule3DSettings,
+): boolean {
+  return (
+    first.representation === second.representation &&
+    first.sizeFactor === second.sizeFactor &&
+    first.showSurface === second.showSurface &&
+    first.surfaceAlpha === second.surfaceAlpha &&
+    first.probeRadius === second.probeRadius &&
+    first.surfaceColoring === second.surfaceColoring &&
+    first.surfaceColor === second.surfaceColor
+  );
+}
+
 /**
  * Complete a partial tool selection.
  * @param tools - The tools a site switched on or off.

package/src/molecule3d/ui/Molecule3DExport.tsx

@@ -6,6 +6,7 @@
 import type { ReactElement } from 'react';
 import { useState } from 'react';
 
+import type { FigureNotice } from '../../download/core/copyFigure.ts';
 import type { FigureFormat } from '../../download/core/downloadFigure.ts';
 import type { FigurePixels } from '../../download/core/figureScale.ts';
 import {
@@ -13,6 +14,7 @@ import {
   FIGURE_SCALES,
 } from '../../download/core/figureScale.ts';
 import { FigureDownloadPanel } from '../../download/ui/FigureDownloadPanel.tsx';
+import { useFigureTask } from '../../download/ui/useFigureTask.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 
 /** Props of {@link Molecule3DExport}. */
@@ -21,6 +23,8 @@ export interface Molecule3DExportProps {
   getSize: () => FigurePixels | null;
   /** Writes the file. */
   onExport: (format: FigureFormat, scale: number) => Promise<void>;
+  /** Puts a PNG at that scale on the clipboard, and says what came of it. */
+  onCopy: (scale: number) => Promise<FigureNotice>;
 }
 
 /**
@@ -29,24 +33,19 @@ export interface Molecule3DExportProps {
  * @returns The panel.
  */
 export function Molecule3DExport(props: Molecule3DExportProps): ReactElement {
-  const { getSize, onExport } = props;
+  const { getSize, onExport, onCopy } = props;
   const t = useChromeT();
   const [size] = useState(getSize);
   const [format, setFormat] = useState<FigureFormat>('png');
   const [scale, setScale] = useState(DEFAULT_FIGURE_SCALE);
-  const [failure, setFailure] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
+  const { run, busy, failure, notice, clear } = useFigureTask();
 
-  async function save(): Promise<void> {
-    setSaving(true);
-    try {
-      await onExport(format, scale);
-      setFailure(null);
-    } catch (error) {
-      setFailure(error instanceof Error ? error.message : String(error));
-    } finally {
-      setSaving(false);
-    }
+  // What the last copy came to only describes the choices it was made with.
+  function changed<T>(apply: (value: T) => void): (value: T) => void {
+    return (value) => {
+      clear();
+      apply(value);
+    };
   }
 
   return (
@@ -57,11 +56,13 @@ export function Molecule3DExport(props: Molecule3DExportProps): ReactElement {
       scales={FIGURE_SCALES}
       size={size}
       failure={failure}
-      saving={saving}
+      notice={notice}
+      saving={busy}
       rasterSvg
-      onFormatChange={setFormat}
-      onScaleChange={setScale}
-      onSave={() => void save()}
+      onFormatChange={changed(setFormat)}
+      onScaleChange={changed(setScale)}
+      onSave={() => run(onExport(format, scale).then(() => null))}
+      onCopy={() => run(onCopy(scale))}
     />
   );
 }

package/src/molecule3d/ui/Molecule3DOptions.tsx

@@ -1,10 +1,10 @@
 /**
  * The display options of the molecule viewer, shown in the toolbar's popover:
  * the representation, the size, and the surface's opacity, solvent probe and
- * colours.
+ * colours, with a button returning them all to the defaults.
  */
 
-import { SegmentedControl, Slider } from '@blueprintjs/core';
+import { Button, SegmentedControl, Slider } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { formatDecimal } from '../../format/core/numbers.ts';
@@ -15,6 +15,8 @@ import {
   REPRESENTATIONS,
   REPRESENTATION_LABELS,
   isRepresentationId,
+  resetMolecule3DSettings,
+  sameMolecule3DSettings,
 } from '../core/settings.ts';
 
 import { Molecule3DSurfaceColors } from './Molecule3DSurfaceColors.tsx';
@@ -25,6 +27,8 @@ export interface Molecule3DOptionsProps {
   onChange: (settings: Molecule3DSettings) => void;
   /** Topological polar surface area in Ų, or `null` when unknown. */
   polarSurfaceArea: number | null;
+  /** What the reset button returns to; `showSurface` is left as it is. */
+  defaults: Molecule3DSettings;
 }
 
 /**
@@ -33,8 +37,10 @@ export interface Molecule3DOptionsProps {
  * @returns The panel.
  */
 export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
-  const { settings, onChange, polarSurfaceArea } = props;
+  const { settings, onChange, polarSurfaceArea, defaults } = props;
   const t = useChromeT();
+  const reset = resetMolecule3DSettings(settings, defaults);
+  const atDefaults = sameMolecule3DSettings(settings, reset);
 
   return (
     <div style={PANEL_STYLE}>
@@ -67,6 +73,20 @@ export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
             onChange({ ...settings, sizeFactor });
           }}
         />
+        {settings.showSurface ? null : (
+          <span style={SURFACE_OFF_STYLE} data-testid="molecule3d-surface-off">
+            {t('molecule3d.surfaceOff')}
+            <Button
+              variant="minimal"
+              size="small"
+              intent="primary"
+              text={t('molecule3d.showSurface')}
+              onClick={() => {
+                onChange({ ...settings, showSurface: true });
+              }}
+            />
+          </span>
+        )}
         <SliderRow
           label={t('molecule3d.surfaceOpacity')}
           range={MOLECULE_3D_RANGES.surfaceAlpha}
@@ -96,6 +116,22 @@ export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
         onChange={onChange}
         polarSurfaceArea={polarSurfaceArea}
       />
+      <span style={FOOTER_STYLE}>
+        {/* A disabled button fires no hover, so the wrapper carries the why. */}
+        <span title={atDefaults ? t('molecule3d.atDefaults') : undefined}>
+          <Button
+            variant="minimal"
+            size="small"
+            icon="reset"
+            text={t('molecule3d.resetSettings')}
+            disabled={atDefaults}
+            data-testid="molecule3d-reset-settings"
+            onClick={() => {
+              onChange(reset);
+            }}
+          />
+        </span>
+      </span>
     </div>
   );
 }
@@ -158,6 +194,18 @@ const GRID_STYLE: CSSProperties = {
 
 const LABEL_STYLE: CSSProperties = { fontSize: 12 };
 
+/** Spans the grid, between the size and the surface rows it explains. */
+const SURFACE_OFF_STYLE: CSSProperties = {
+  display: 'flex',
+  gridColumn: '1 / -1',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  color: 'var(--text-muted)',
+  fontSize: 12,
+};
+
+const FOOTER_STYLE: CSSProperties = { display: 'flex', justifyContent: 'end' };
+
 /** Room on both sides, so the handle is never clipped at either end. */
 const SLIDER_STYLE: CSSProperties = { display: 'block', paddingInline: 8 };
 

package/src/molecule3d/ui/MoleculeCanvas3D.tsx

@@ -60,9 +60,12 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
     onFailureChange,
   } = props;
   const tools = resolveMolecule3DTools(toolsProp);
+  const [initialSettings] = useState(() =>
+    normalizeMolecule3DSettings(defaultSettings),
+  );
   const [settings, setSettings] = useControlledState(
     settingsProp,
-    () => normalizeMolecule3DSettings(defaultSettings),
+    initialSettings,
     onSettingsChange,
   );
   const [spinning, setSpinning] = useControlledState(
@@ -140,7 +143,7 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
     camera: props,
   });
 
-  const { canvasSize, exportImage } = useImageExport(
+  const { canvasSize, exportImage, copyImage } = useImageExport(
     container,
     viewerRef,
     fileName,
@@ -171,10 +174,15 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
                 settings={settings}
                 onChange={setSettings}
                 polarSurfaceArea={polarSurfaceArea}
+                defaults={initialSettings}
               />
             }
             exportPanel={
-              <Molecule3DExport getSize={canvasSize} onExport={exportImage} />
+              <Molecule3DExport
+                getSize={canvasSize}
+                onExport={exportImage}
+                onCopy={copyImage}
+              />
             }
           />
         </div>

package/src/molecule3d/ui/exportMoleculeImage.ts

@@ -24,6 +24,26 @@ export interface MoleculeImageRequest {
   fileName: string;
 }
 
+/**
+ * Render the scene as a PNG, for the clipboard.
+ * @param viewer - The viewer holding the scene.
+ * @param scale - Multiple of the canvas on screen it is rendered at.
+ * @param size - Size of the canvas on screen, CSS pixels.
+ * @returns The PNG.
+ * @throws {Error} When the viewer has nothing to render.
+ */
+export async function captureMoleculePng(
+  viewer: SceneCapture,
+  scale: number,
+  size: ImageSize,
+): Promise<Blob> {
+  const dataUri = await viewer.captureImage(figurePixels(size, scale));
+  if (dataUri === undefined) {
+    throw new Error('There is no picture to copy yet.');
+  }
+  return new Blob([dataUriBytes(dataUri)], { type: FIGURE_PNG_TYPE });
+}
+
 /**
  * Render the scene and hand it to the browser as a file.
  * @param viewer - The viewer holding the scene.

package/src/molecule3d/ui/moleculeViewer3DProps.ts

@@ -38,7 +38,8 @@ export interface MoleculeViewer3DProps {
    */
   settings?: Molecule3DSettings;
   /**
-   * Starting settings when the component owns them.
+   * Starting settings when the component owns them, and what the options'
+   * reset button returns to either way.
    * @default DEFAULT_MOLECULE_3D_SETTINGS
    */
   defaultSettings?: Partial<Molecule3DSettings>;