react-cheminfo 0.74.0 → 0.76.0

package/src/ir/core/bandAssignments.ts

@@ -54,6 +54,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 500,
     to: 600,
     strength: 'S',
+    note: 'Only with bromine in the formula; the mass spectrum shows its 1:1 M+2',
   },
   {
     id: 'c-cl-stretch',
@@ -62,6 +63,16 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 600,
     to: 800,
     strength: 'S',
+    note: 'Only with chlorine in the formula; the mass spectrum shows its 3:1 M+2',
+  },
+  {
+    id: 'alkyne-ch-bend',
+    group: 'alkyne',
+    vibration: '≡C–H bend',
+    from: 610,
+    to: 700,
+    strength: 'S',
+    note: 'Broad, and only beside the sharp ≡C–H stretch near 3300',
   },
   {
     id: 'aromatic-ch-oop',
@@ -97,6 +108,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 1000,
     to: 1400,
     strength: 'S',
+    note: 'Only with fluorine in the formula; a CF₃ gives several strong bands',
   },
   {
     id: 'c-n-stretch',
@@ -105,6 +117,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 1080,
     to: 1360,
     strength: 'm',
+    note: 'Only with nitrogen in the formula, and rarely decisive on its own',
   },
   {
     id: 'nitro-symmetric',
@@ -122,6 +135,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 1330,
     to: 1430,
     strength: 'm',
+    note: 'Only beside the broad O–H stretch above 3200',
   },
   {
     id: 'alkane-ch-bend',
@@ -148,6 +162,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 1500,
     to: 1560,
     strength: 'S',
+    note: 'Never alone: the symmetric partner sits near 1300–1390',
   },
   {
     id: 'nh-bend',
@@ -156,6 +171,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 1550,
     to: 1640,
     strength: 'm',
+    note: 'Only beside an N–H stretch between 3300 and 3500',
   },
   {
     id: 'alkene-cc-stretch',
@@ -218,6 +234,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 1770,
     to: 1815,
     strength: 'S',
+    note: 'The highest single carbonyl, and only with chlorine in the formula',
   },
   {
     id: 'anhydride-co-stretch',
@@ -228,6 +245,15 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     strength: 'S',
     note: 'Two bands, about 60 apart, which is what names it',
   },
+  {
+    id: 'allene-stretch',
+    group: 'allene',
+    vibration: 'C=C=C asymmetric stretch',
+    from: 1900,
+    to: 2000,
+    strength: 'm',
+    note: 'Near 1950, where only a cumulated double bond absorbs',
+  },
   {
     id: 'nitrile-stretch',
     group: 'nitrile',
@@ -289,6 +315,7 @@ export const BAND_ASSIGNMENTS: readonly BandAssignment[] = [
     from: 3000,
     to: 3100,
     strength: 'm',
+    note: 'Above 3000, with the ring pair near 1500 and 1600',
   },
   {
     id: 'alkyne-ch-stretch',

package/src/ir/ui/BandRow.tsx

@@ -1,4 +1,5 @@
 import { Button, Icon } from '@blueprintjs/core';
+import { useState } from 'react';
 
 import {
   panelCellStyle,
@@ -34,10 +35,10 @@ export interface BandRowProps {
 /**
  * One band: where it is, how strong, and every vibration it could be.
  *
- * The candidates are written as one line rather than a list, so a strong band
- * with four of them stays one row of the table and the wavenumbers keep reading
- * down the column. The `title` carries them again with each one's note, which is
- * where the reason to prefer one lives.
+ * The candidates start as one line rather than a list, so a strong band with
+ * four of them stays one row of the table and the wavenumbers keep reading down
+ * the column. Its "more" opens the row onto every candidate with its note, which
+ * is where the reason to prefer one lives.
  * @param props - Component props.
  * @returns The row.
  */
@@ -47,7 +48,7 @@ export function BandRow(props: BandRowProps) {
 
   return (
     <tr
-      style={lit ? litRowStyle : undefined}
+      style={lit ? litRowStyle : rowStyle}
       onPointerEnter={() => onHighlight?.(band)}
       onPointerLeave={() => onHighlight?.(null)}
     >
@@ -80,35 +81,63 @@ interface CandidatesCellProps {
 }
 
 /**
- * What a band could be: the narrowest candidate, and how many more there are.
+ * What a band could be: the narrowest candidate and how many more there are,
+ * opened on a click into every candidate with the note that tells it apart.
  * @param props - Component props.
  * @returns The cell.
  */
 function CandidatesCell(props: CandidatesCellProps) {
   const { candidates } = props.entry;
-  const detail = candidates
-    .map((candidate) =>
-      candidate.note === undefined
-        ? `${candidate.group} ${candidate.vibration}`
-        : `${candidate.group} ${candidate.vibration} — ${candidate.note}`,
-    )
-    .join('\n');
+  const [open, setOpen] = useState(false);
 
-  return (
-    <td style={panelCellStyle} title={detail}>
-      {candidates.length === 0 ? (
+  if (candidates.length === 0) {
+    return (
+      <td style={panelCellStyle}>
         <span style={{ opacity: 0.5 }}>—</span>
+      </td>
+    );
+  }
+
+  const [first] = candidates;
+  const others = candidates.length - 1;
+
+  return (
+    <td style={candidatesCellStyle}>
+      {open ? (
+        <ul style={candidateListStyle}>
+          {candidates.map((candidate) => (
+            <li key={candidate.id}>
+              {candidate.group} {candidate.vibration}
+              {candidate.note === undefined ? null : (
+                <div style={candidateNoteStyle}>{candidate.note}</div>
+              )}
+            </li>
+          ))}
+        </ul>
       ) : (
-        <span style={{ whiteSpace: 'normal' }}>
-          {candidates[0]?.group} {candidates[0]?.vibration}
-          {candidates.length > 1 ? (
-            <span style={{ opacity: 0.6 }}>
-              {' '}
-              <Icon icon="more" size={10} /> {candidates.length - 1} more
-            </span>
-          ) : null}
-        </span>
+        <>
+          {first?.group} {first?.vibration}
+        </>
       )}
+      {others > 0 ? (
+        <>
+          {open ? null : ' '}
+          <button
+            type="button"
+            style={moreButtonStyle}
+            aria-expanded={open}
+            onClick={() => setOpen(!open)}
+          >
+            {open ? (
+              'less'
+            ) : (
+              <>
+                <Icon icon="more" size={10} /> {others} more
+              </>
+            )}
+          </button>
+        </>
+      ) : null}
     </td>
   );
 }
@@ -120,6 +149,35 @@ const STRENGTH_TITLES = {
   S: 'strong, relative to this spectrum',
 } as const;
 
-const litRowStyle = { background: '#fff3e0' } as const;
+// Top, so an opened row keeps its wavenumber on the line of its first candidate.
+const rowStyle = { verticalAlign: 'top' } as const;
+
+const litRowStyle = { ...rowStyle, background: '#fff3e0' } as const;
 
 const removeCellStyle = { ...panelCellStyle, padding: 0, width: 1 } as const;
+
+const candidatesCellStyle = {
+  ...panelCellStyle,
+  whiteSpace: 'normal',
+} as const;
+
+const candidateListStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  margin: 0,
+  padding: 0,
+  listStyle: 'none',
+} as const;
+
+const candidateNoteStyle = { fontSize: '0.9em', opacity: 0.6 } as const;
+
+const moreButtonStyle = {
+  padding: 0,
+  border: 0,
+  background: 'none',
+  color: 'inherit',
+  font: 'inherit',
+  opacity: 0.6,
+  cursor: 'pointer',
+} as const;

package/src/locales/de.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Reguläre Ausdrücke in einer interaktiven Spielwiese lernen.",
   "site.pdb.tagline": "Ein schneller Blick auf jeden Eintrag der Protein Data Bank.",
   "site.elucidation.tagline": "Eine Struktur aus einem 1H-NMR-Spektrum und einer Formel.",
+  "site.spectroscopy.tagline": "Eine Struktur aus ihren IR-, Massen- und NMR-Spektren bestimmen.",
   "site.equilibrium.tagline": "Chemische Gleichgewichte: pH, Speziation und Titrationskurven.",
   "site.polycarp.tagline": "Die Mikrostruktur einer radikalischen Copolymerisation vorhersagen.",
   "site.3d.tagline": "Konformere in 3D aus einer Struktur, die Sie zeichnen.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "„{formula}“ gibt einem Atom die Anzahl {count}; Anzahlen sind ganze Zahlen.",
   "formula.unknownNotation": "„{formula}“ verwendet eine Schreibweise, die dieses Werkzeug nicht zählt.",
   "formula.unreadable": "„{formula}“ ist keine Formel, die dieses Werkzeug lesen kann ({reason}).",
+  "formula.lookup.title": "Formelsuche",
+  "formula.lookup.reset": "Masse und Elementbereiche zurücksetzen",
+  "formula.lookup.mass": "Monoisotopische Masse",
+  "formula.lookup.massPlaceholder": "z. B. 128.0626",
+  "formula.lookup.neutral": "Die des neutralen Moleküls: Ziehen Sie die Protonen ab, die das Spektrum hinzugefügt hat.",
+  "formula.lookup.fewest": "Mindestzahl der {element}-Atome",
+  "formula.lookup.most": "Höchstzahl der {element}-Atome",
+  "formula.lookup.typeMass": "Geben Sie eine Masse ein, um die Formeln aufzulisten, die diese Bereiche zulassen.",
+  "formula.lookup.closest": "Die {count} nächsten von {total} Formeln",
+  "formula.lookup.countOne": "{count} Formel",
+  "formula.lookup.countMany": "{count} Formeln",
+  "formula.lookup.nothingFits": "Keine Formel passt. Erweitern Sie einen Bereich oder prüfen Sie die Masse.",
+  "formula.lookup.tooWide": "Diese Bereiche lassen zu viele Formeln für die Suche zu. Schränken Sie einen ein.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, Unsättigungsgrad {unsaturation}",
   "slides.exit": "Beenden",
   "slides.previousSlide": "Vorige Folie",
   "slides.nextSlide": "Nächste Folie",
@@ -571,6 +587,8 @@
   "structure.export.saveSvg": "Als SVG speichern",
   "structure.export.savePng": "Als PNG speichern",
   "structure.export.copyPng": "PNG kopieren",
+  "structure.export.copySvg": "SVG kopieren",
+  "structure.export.svgCopied": "In die Zwischenablage kopiert: SVG.",
   "structure.export.smiles": "SMILES",
   "structure.export.smilesHelp": "Die Struktur in einer Zeile, Stereochemie eingeschlossen. Jedes Programm liest sie.",
   "structure.export.molfileV3000": "Molfile V3000",

package/src/locales/en.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Learn regular expressions in a live playground.",
   "site.pdb.tagline": "A fast look at any Protein Data Bank entry.",
   "site.elucidation.tagline": "A structure from a 1H NMR spectrum and a formula.",
+  "site.spectroscopy.tagline": "Find a structure from its IR, mass and NMR spectra.",
   "site.equilibrium.tagline": "Chemical equilibria: pH, speciation and titration curves.",
   "site.polycarp.tagline": "Predict the microstructure of a radical copolymerisation.",
   "site.3d.tagline": "Conformers in 3D from a structure you draw.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "“{formula}” gives an atom a count of {count}; counts are whole numbers.",
   "formula.unknownNotation": "“{formula}” uses a notation this tool does not count.",
   "formula.unreadable": "“{formula}” is not a formula this tool can read ({reason}).",
+  "formula.lookup.title": "Formula lookup",
+  "formula.lookup.reset": "Reset the mass and the element ranges",
+  "formula.lookup.mass": "Monoisotopic mass",
+  "formula.lookup.massPlaceholder": "e.g. 128.0626",
+  "formula.lookup.neutral": "Of the neutral molecule: take the protons the spectrum added back off.",
+  "formula.lookup.fewest": "Fewest {element} atoms",
+  "formula.lookup.most": "Most {element} atoms",
+  "formula.lookup.typeMass": "Type a mass to list the formulas these ranges allow.",
+  "formula.lookup.closest": "The {count} closest of {total} formulas",
+  "formula.lookup.countOne": "{count} formula",
+  "formula.lookup.countMany": "{count} formulas",
+  "formula.lookup.nothingFits": "Nothing fits. Widen a range, or check the mass.",
+  "formula.lookup.tooWide": "These ranges allow too many formulas to search. Narrow one.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, unsaturation {unsaturation}",
   "slides.exit": "Exit",
   "slides.previousSlide": "Previous slide",
   "slides.nextSlide": "Next slide",
@@ -515,6 +531,8 @@
   "structure.export.saveSvg": "Save SVG",
   "structure.export.savePng": "Save PNG",
   "structure.export.copyPng": "Copy PNG",
+  "structure.export.copySvg": "Copy SVG",
+  "structure.export.svgCopied": "Copied the SVG to the clipboard.",
   "structure.export.smiles": "SMILES",
   "structure.export.smilesHelp": "The structure on one line, stereochemistry included. Every tool reads it.",
   "structure.export.molfileV3000": "Molfile V3000",

package/src/locales/es.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Aprender expresiones regulares en un entorno interactivo.",
   "site.pdb.tagline": "Una mirada rápida a cualquier entrada del Protein Data Bank.",
   "site.elucidation.tagline": "Una estructura a partir de un espectro de RMN de 1H y una fórmula.",
+  "site.spectroscopy.tagline": "Encontrar una estructura a partir de sus espectros IR, de masas y de RMN.",
   "site.equilibrium.tagline": "Equilibrios químicos: pH, especiación y curvas de valoración.",
   "site.polycarp.tagline": "Predecir la microestructura de una copolimerización radicalaria.",
   "site.3d.tagline": "Confórmeros en 3D a partir de una estructura que usted dibuja.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "«{formula}» da a un átomo la cantidad {count}; las cantidades son números enteros.",
   "formula.unknownNotation": "«{formula}» usa una notación que esta herramienta no cuenta.",
   "formula.unreadable": "«{formula}» no es una fórmula que esta herramienta sepa leer ({reason}).",
+  "formula.lookup.title": "Búsqueda de fórmulas",
+  "formula.lookup.reset": "Restablecer la masa y los intervalos de elementos",
+  "formula.lookup.mass": "Masa monoisotópica",
+  "formula.lookup.massPlaceholder": "p. ej. 128.0626",
+  "formula.lookup.neutral": "La de la molécula neutra: reste los protones que el espectro añadió.",
+  "formula.lookup.fewest": "Mínimo de átomos de {element}",
+  "formula.lookup.most": "Máximo de átomos de {element}",
+  "formula.lookup.typeMass": "Escriba una masa para listar las fórmulas que permiten estos intervalos.",
+  "formula.lookup.closest": "Las {count} más cercanas de {total} fórmulas",
+  "formula.lookup.countOne": "{count} fórmula",
+  "formula.lookup.countMany": "{count} fórmulas",
+  "formula.lookup.nothingFits": "Ninguna fórmula encaja. Amplíe un intervalo o compruebe la masa.",
+  "formula.lookup.tooWide": "Estos intervalos permiten demasiadas fórmulas para buscarlas. Reduzca uno.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, insaturación {unsaturation}",
   "slides.exit": "Salir",
   "slides.previousSlide": "Diapositiva anterior",
   "slides.nextSlide": "Diapositiva siguiente",
@@ -571,6 +587,8 @@
   "structure.export.saveSvg": "Guardar en SVG",
   "structure.export.savePng": "Guardar en PNG",
   "structure.export.copyPng": "Copiar el PNG",
+  "structure.export.copySvg": "Copiar el SVG",
+  "structure.export.svgCopied": "Copiado al portapapeles: SVG.",
   "structure.export.smiles": "SMILES",
   "structure.export.smilesHelp": "La estructura en una línea, con su estereoquímica. Todas las herramientas la leen.",
   "structure.export.molfileV3000": "Molfile V3000",

package/src/locales/fr.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Apprendre les expressions régulières dans un bac à sable interactif.",
   "site.pdb.tagline": "Un coup d'œil rapide sur n'importe quelle entrée de la Protein Data Bank.",
   "site.elucidation.tagline": "Une structure à partir d'un spectre RMN 1H et d'une formule.",
+  "site.spectroscopy.tagline": "Trouver une structure à partir de ses spectres IR, de masse et RMN.",
   "site.equilibrium.tagline": "Équilibres chimiques : pH, spéciation et courbes de titrage.",
   "site.polycarp.tagline": "Prédire la microstructure d'une copolymérisation radicalaire.",
   "site.3d.tagline": "Les conformères en 3D d'une structure que vous dessinez.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "« {formula} » compte {count} pour un atome ; un nombre d’atomes est entier.",
   "formula.unknownNotation": "« {formula} » utilise une notation que cet outil ne compte pas.",
   "formula.unreadable": "« {formula} » n’est pas une formule que cet outil sait lire ({reason}).",
+  "formula.lookup.title": "Recherche de formule",
+  "formula.lookup.reset": "Réinitialiser la masse et les intervalles d’éléments",
+  "formula.lookup.mass": "Masse monoisotopique",
+  "formula.lookup.massPlaceholder": "p. ex. 128.0626",
+  "formula.lookup.neutral": "Celle de la molécule neutre : retirez les protons que le spectre a ajoutés.",
+  "formula.lookup.fewest": "{element} : nombre minimal d’atomes",
+  "formula.lookup.most": "{element} : nombre maximal d’atomes",
+  "formula.lookup.typeMass": "Tapez une masse pour lister les formules que ces intervalles permettent.",
+  "formula.lookup.closest": "Les {count} plus proches sur {total} formules",
+  "formula.lookup.countOne": "{count} formule",
+  "formula.lookup.countMany": "{count} formules",
+  "formula.lookup.nothingFits": "Aucune formule ne convient. Élargissez un intervalle, ou vérifiez la masse.",
+  "formula.lookup.tooWide": "Ces intervalles permettent trop de formules pour les parcourir. Resserrez-en un.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, insaturation {unsaturation}",
   "slides.exit": "Quitter",
   "slides.previousSlide": "Diapositive précédente",
   "slides.nextSlide": "Diapositive suivante",
@@ -571,6 +587,8 @@
   "structure.export.saveSvg": "Enregistrer en SVG",
   "structure.export.savePng": "Enregistrer en PNG",
   "structure.export.copyPng": "Copier le PNG",
+  "structure.export.copySvg": "Copier le SVG",
+  "structure.export.svgCopied": "Copié dans le presse-papiers : SVG.",
   "structure.export.smiles": "SMILES",
   "structure.export.smilesHelp": "La structure sur une ligne, stéréochimie comprise. Tous les logiciels le lisent.",
   "structure.export.molfileV3000": "Molfile V3000",

package/src/locales/it.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Imparare le espressioni regolari in un ambiente interattivo.",
   "site.pdb.tagline": "Uno sguardo rapido a qualsiasi voce della Protein Data Bank.",
   "site.elucidation.tagline": "Una struttura da uno spettro NMR 1H e da una formula.",
+  "site.spectroscopy.tagline": "Trovare una struttura dai suoi spettri IR, di massa e NMR.",
   "site.equilibrium.tagline": "Equilibri chimici: pH, speciazione e curve di titolazione.",
   "site.polycarp.tagline": "Prevedere la microstruttura di una copolimerizzazione radicalica.",
   "site.3d.tagline": "Conformeri in 3D a partire da una struttura che si disegna.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "«{formula}» dà a un atomo il numero {count}; i numeri di atomi sono interi.",
   "formula.unknownNotation": "«{formula}» usa una notazione che questo strumento non conta.",
   "formula.unreadable": "«{formula}» non è una formula che questo strumento sa leggere ({reason}).",
+  "formula.lookup.title": "Ricerca di formule",
+  "formula.lookup.reset": "Reimposta la massa e gli intervalli degli elementi",
+  "formula.lookup.mass": "Massa monoisotopica",
+  "formula.lookup.massPlaceholder": "es. 128.0626",
+  "formula.lookup.neutral": "Quella della molecola neutra: togli i protoni che lo spettro ha aggiunto.",
+  "formula.lookup.fewest": "Numero minimo di atomi di {element}",
+  "formula.lookup.most": "Numero massimo di atomi di {element}",
+  "formula.lookup.typeMass": "Scrivi una massa per elencare le formule che questi intervalli consentono.",
+  "formula.lookup.closest": "Le {count} più vicine su {total} formule",
+  "formula.lookup.countOne": "{count} formula",
+  "formula.lookup.countMany": "{count} formule",
+  "formula.lookup.nothingFits": "Nessuna formula corrisponde. Allarga un intervallo o controlla la massa.",
+  "formula.lookup.tooWide": "Questi intervalli consentono troppe formule per la ricerca. Restringine uno.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, insaturazione {unsaturation}",
   "slides.exit": "Esci",
   "slides.previousSlide": "Diapositiva precedente",
   "slides.nextSlide": "Diapositiva successiva",
@@ -515,6 +531,8 @@
   "structure.export.saveSvg": "Salva in SVG",
   "structure.export.savePng": "Salva in PNG",
   "structure.export.copyPng": "Copia il PNG",
+  "structure.export.copySvg": "Copia l’SVG",
+  "structure.export.svgCopied": "Copiato negli appunti: SVG.",
   "structure.export.smiles": "SMILES",
   "structure.export.smilesHelp": "La struttura su una riga, stereochimica compresa. Ogni strumento la legge.",
   "structure.export.molfileV3000": "Molfile V3000",

package/src/structure/ui/CardStructure.tsx

@@ -0,0 +1,76 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import { OverlayLayer } from '../../overlay/ui/OverlayLayer.tsx';
+import { structureSource } from '../core/structureSource.ts';
+
+import type { StructureProps } from './Structure.tsx';
+import { Structure } from './Structure.tsx';
+import { StructureExportButton } from './StructureExportButton.tsx';
+
+/** What {@link CardStructure} draws and hands over. */
+export interface CardStructureProps extends StructureProps {
+  /**
+   * Base name of every file saved from the export, extension excluded.
+   * @default 'structure'
+   */
+  name?: string;
+  /**
+   * Whether the structure is a query fragment, such as a toxicophore, whose
+   * idCode is not a molecule's.
+   * @default false
+   */
+  fragment?: boolean;
+  /**
+   * What the glyph is called, for the pointer and for a screen reader.
+   * @default the chrome's own line, `Copy or save the structure: SMILES,
+   *   molfile`
+   */
+  label?: string;
+  /**
+   * The drawing, when the site draws the structure itself — its own
+   * highlights, its own numbering. The export still reads the notations.
+   * @default a `Structure` drawn from the same notations, at the same size
+   */
+  children?: ReactNode;
+}
+
+/**
+ * A structure of a card, with the glyph that hands it over: the export
+ * dialog, which copies it as an SVG or a PNG, a SMILES or a molfile, V2000 or
+ * V3000. Every structure an answer draws carries it, alone or in a grid, so
+ * none has to be redrawn to be reused.
+ *
+ * The glyph stands beside the top right corner, faded until the structure is
+ * pointed at, as the glyphs of `CardFigure` (`react-cheminfo/card`) do;
+ * `styles/card.css` draws both. A structure with nothing to read draws its
+ * placeholder alone.
+ * @param props - The structure, its size, and the name of its files.
+ * @returns The structure and its glyph.
+ */
+export function CardStructure(props: CardStructureProps): ReactElement {
+  const { name, fragment, label, children, ...structure } = props;
+  const { idCode, coordinates, molfile, smiles } = structure;
+  const drawing = children ?? <Structure {...structure} />;
+  const source = structureSource({ idCode, coordinates, molfile, smiles });
+  if (source.kind === 'empty') return <>{drawing}</>;
+
+  return (
+    <div className="card-figure card-structure">
+      <div className="card-figure__drawing">{drawing}</div>
+      {/* Compact: the glyphs of a figure shown in somebody else's page. */}
+      <OverlayLayer density="compact" awake>
+        <div className="card-figure__tools" data-testid="figure-tools">
+          <StructureExportButton
+            idCode={idCode}
+            coordinates={coordinates}
+            molfile={molfile}
+            smiles={smiles}
+            name={name}
+            fragment={fragment}
+            label={label}
+          />
+        </div>
+      </OverlayLayer>
+    </div>
+  );
+}

package/src/structure/ui/StructurePicturePane.tsx

@@ -4,6 +4,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useMemo, useState } from 'react';
 
 import { copyFigure } from '../../download/core/copyFigure.ts';
+import { copySvg } from '../../download/core/copySvg.ts';
 import { downloadBlob } from '../../download/core/downloadBlob.ts';
 import { downloadText } from '../../download/core/downloadText.ts';
 import { figurePng } from '../../download/core/figurePng.ts';
@@ -37,7 +38,7 @@ const DEFAULT_SCALE = 2;
 
 /**
  * The structure as a picture: what it looks like, how big it leaves, and the
- * three ways it leaves.
+ * four ways it leaves.
  *
  * What is shown is the file: the preview is the very SVG the save button
  * writes, laid out smaller, so nobody saves a picture they have not seen. The
@@ -136,6 +137,18 @@ export function StructurePicturePane(
             })
           }
         />
+        <Button
+          icon="clipboard"
+          size="small"
+          text={t('structure.export.copySvg')}
+          onClick={() =>
+            void run(async () =>
+              (await copySvg(picture.markup))
+                ? t('structure.export.svgCopied')
+                : t('clipboard.failed'),
+            )
+          }
+        />
         <Button
           icon="clipboard"
           size="small"

package/src/structure/ui/index.ts

@@ -33,6 +33,8 @@ export type { StructureExportDialogProps } from './StructureExportDialog.tsx';
 export { StructureExportDialog } from './StructureExportDialog.tsx';
 export type { StructureExportButtonProps } from './StructureExportButton.tsx';
 export { StructureExportButton } from './StructureExportButton.tsx';
+export type { CardStructureProps } from './CardStructure.tsx';
+export { CardStructure } from './CardStructure.tsx';
 export type { StructureExportPanelProps } from './StructureExportPanel.tsx';
 export type { ToolbarFloorOptions } from './useToolbarFloor.ts';
 export { useToolbarFloor } from './useToolbarFloor.ts';

package/src/structure/ui/useToolbarFloor.ts

@@ -41,18 +41,28 @@ export function useToolbarFloor(
     if (container === null) return;
 
     return watchToolbar(container, (toolbar) => {
+      let frame = 0;
       const size = new ResizeObserver(() => {
-        // offsetHeight, because a dialog opens under a scaling transform and a
-        // measured rectangle would be that of the half drawn toolbar.
-        const height = toolbar.offsetHeight;
-        // Zero is a toolbar being torn down or not yet laid out, never a
-        // toolbar that needs no room: writing the fallback for it would undo a
-        // correct floor and leave the palette cut off.
-        if (height === 0) return;
-        container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
+        // Written on the next frame: growing the box from inside this callback
+        // resizes the editor element above the toolbar, whose own observer the
+        // browser then drops with a "ResizeObserver loop" error.
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          // offsetHeight, because a dialog opens under a scaling transform and
+          // a measured rectangle would be that of the half drawn toolbar.
+          const height = toolbar.offsetHeight;
+          // Zero is a toolbar being torn down or not yet laid out, never a
+          // toolbar that needs no room: writing the fallback for it would undo
+          // a correct floor and leave the palette cut off.
+          if (height === 0) return;
+          container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
+        });
       });
       size.observe(toolbar);
-      return () => size.disconnect();
+      return () => {
+        cancelAnimationFrame(frame);
+        size.disconnect();
+      };
     });
   }, [minHeight, revision]);