react-cheminfo 0.75.0 → 0.76.0

package/lib/structure/ui/CardStructure.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayLayer } from "../../overlay/ui/OverlayLayer.js";
+import { structureSource } from "../core/structureSource.js";
+import { Structure } from "./Structure.js";
+import { StructureExportButton } from "./StructureExportButton.js";
+/**
+ * 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) {
+    const { name, fragment, label, children, ...structure } = props;
+    const { idCode, coordinates, molfile, smiles } = structure;
+    const drawing = children ?? _jsx(Structure, { ...structure });
+    const source = structureSource({ idCode, coordinates, molfile, smiles });
+    if (source.kind === 'empty')
+        return _jsx(_Fragment, { children: drawing });
+    return (_jsxs("div", { className: "card-figure card-structure", children: [_jsx("div", { className: "card-figure__drawing", children: drawing }), _jsx(OverlayLayer, { density: "compact", awake: true, children: _jsx("div", { className: "card-figure__tools", "data-testid": "figure-tools", children: _jsx(StructureExportButton, { idCode: idCode, coordinates: coordinates, molfile: molfile, smiles: smiles, name: name, fragment: fragment, label: label }) }) })] }));
+}
+//# sourceMappingURL=CardStructure.js.map

package/lib/structure/ui/CardStructure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardStructure.js","sourceRoot":"","sources":["../../../src/structure/ui/CardStructure.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAmC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AA6BpE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC3D,MAAM,OAAO,GAAG,QAAQ,IAAI,KAAC,SAAS,OAAK,SAAS,GAAI,CAAC;IACzD,MAAM,MAAM,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IACzE,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO;QAAE,OAAO,4BAAG,OAAO,GAAI,CAAC;IAEnD,OAAO,CACL,eAAK,SAAS,EAAC,4BAA4B,aACzC,cAAK,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAO,EAErD,KAAC,YAAY,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,kBACnC,cAAK,SAAS,EAAC,oBAAoB,iBAAa,cAAc,YAC5D,KAAC,qBAAqB,IACpB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,GACE,GACO,IACX,CACP,CAAC;AACJ,CAAC"}

package/lib/structure/ui/StructurePicturePane.d.ts

@@ -9,7 +9,7 @@ export interface StructurePicturePaneProps {
 }
 /**
  * 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

package/lib/structure/ui/StructurePicturePane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StructurePicturePane.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructurePicturePane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAwBzD,yDAAyD;AACzD,MAAM,WAAW,yBAAyB;IACxC,mCAAmC;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAKD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,yBAAyB,GAC/B,YAAY,CAgHd"}
+{"version":3,"file":"StructurePicturePane.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructurePicturePane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAyBzD,yDAAyD;AACzD,MAAM,WAAW,yBAAyB;IACxC,mCAAmC;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAKD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,yBAAyB,GAC/B,YAAY,CA4Hd"}

package/lib/structure/ui/StructurePicturePane.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, SegmentedControl } from '@blueprintjs/core';
 import { useMemo, useState } from 'react';
 import { copyFigure } from "../../download/core/copyFigure.js";
+import { copySvg } from "../../download/core/copySvg.js";
 import { downloadBlob } from "../../download/core/downloadBlob.js";
 import { downloadText } from "../../download/core/downloadText.js";
 import { figurePng } from "../../download/core/figurePng.js";
@@ -16,7 +17,7 @@ import { STRUCTURE_BOND_LENGTH, structurePicture, } from "../core/structurePictu
 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
@@ -64,7 +65,9 @@ export function StructurePicturePane(props) {
                         }) }), _jsx(Button, { icon: "download", size: "small", intent: "primary", text: t('structure.export.savePng'), onClick: () => void run(async () => {
                             downloadBlob(await png(), `${fileName}.png`);
                             return null;
-                        }) }), _jsx(Button, { icon: "clipboard", size: "small", text: t('structure.export.copyPng'), onClick: () => 
+                        }) }), _jsx(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')) }), _jsx(Button, { icon: "clipboard", size: "small", text: t('structure.export.copyPng'), onClick: () => 
                         // Safari only allows a clipboard write the click itself started,
                         // so the image is handed over as a promise rather than awaited
                         // first — see `copyFigure`.

package/lib/structure/ui/StructurePicturePane.js.map

@@ -1 +1 @@
-{"version":3,"file":"StructurePicturePane.js","sourceRoot":"","sources":["../../../src/structure/ui/StructurePicturePane.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StructurePicturePane.js","sourceRoot":"","sources":["../../../src/structure/ui/StructurePicturePane.tsx"],"names":[],"mappings":"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"}

package/lib/structure/ui/index.d.ts

@@ -27,6 +27,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/lib/structure/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,6BAA6B,EAC7B,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,YAAY,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,6BAA6B,EAC7B,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,YAAY,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/structure/ui/index.js

@@ -18,6 +18,7 @@ export { StructureSearchDialog } from "./StructureSearchDialog.js";
 export { useStructureSearchModes } from "./useStructureSearchModes.js";
 export { StructureExportDialog } from "./StructureExportDialog.js";
 export { StructureExportButton } from "./StructureExportButton.js";
+export { CardStructure } from "./CardStructure.js";
 export { useToolbarFloor } from "./useToolbarFloor.js";
 export { useStructureDraft } from "./useStructureDraft.js";
 //# sourceMappingURL=index.js.map

package/lib/structure/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAEpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAGpE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAEpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAEpE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",

package/src/download/core/copySvg.ts

@@ -0,0 +1,40 @@
+import { writeClipboardItem } from '../../clipboard/core/clipboardItem.ts';
+import { writeToClipboard } from '../../clipboard/core/writeToClipboard.ts';
+
+/** The type a picture is put on the clipboard as: no `charset`, which it refuses. */
+const SVG_CLIPBOARD_TYPE = 'image/svg+xml';
+
+/**
+ * Put an SVG document on the clipboard, without ever throwing at the caller.
+ *
+ * Where the browser takes an SVG picture, the document goes on as one and as
+ * its text, in one item: a slide or a vector editor pastes the drawing, a text
+ * editor the markup. Elsewhere — Firefox and Safari take no SVG picture — the
+ * text alone, which a vector editor still pastes as a drawing.
+ * @param markup - The SVG document.
+ * @returns Whether the clipboard now holds it, at least as text.
+ */
+export async function copySvg(markup: string): Promise<boolean> {
+  if (takesSvgPicture()) {
+    const written = await writeClipboardItem({
+      [SVG_CLIPBOARD_TYPE]: new Blob([markup], { type: SVG_CLIPBOARD_TYPE }),
+      'text/plain': new Blob([markup], { type: 'text/plain' }),
+    });
+    if (written) return true;
+  }
+  return writeToClipboard(markup);
+}
+
+/**
+ * Whether the clipboard says it takes an SVG picture. Asked before writing:
+ * a write it refuses would spend the click, and the text after it would be
+ * refused too in Safari.
+ * @returns Whether `ClipboardItem.supports` names the SVG type.
+ */
+function takesSvgPicture(): boolean {
+  if (typeof ClipboardItem === 'undefined') return false;
+  const item = ClipboardItem as { supports?: (type: string) => boolean };
+  return (
+    typeof item.supports === 'function' && item.supports(SVG_CLIPBOARD_TYPE)
+  );
+}

package/src/download/core/index.ts

@@ -1,5 +1,6 @@
 export type { FigureNotice } from './copyFigure.ts';
 export { copyFigure } from './copyFigure.ts';
+export { copySvg } from './copySvg.ts';
 export { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
 export { downloadBlob } from './downloadBlob.ts';
 export type { DownloadFigureOptions, FigureFormat } from './downloadFigure.ts';

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

@@ -587,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

@@ -531,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

@@ -587,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

@@ -587,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

@@ -531,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/styles/chrome.css

@@ -850,9 +850,9 @@ a.source-badge:hover {
   gap: 8px;
 }
 
-/* Two columns, so the three buttons are one size: a row of buttons whose
-   widths are set by the length of their labels reads as three unrelated
-   controls. */
+/* Two columns, so the buttons are one size — the saves over the copies, SVG
+   over SVG: a row of buttons whose widths are set by the length of their
+   labels reads as unrelated controls. */
 .structure-export__actions {
   display: grid;
   margin-top: 2px;