react-cheminfo 0.17.0 → 0.18.0

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

@@ -1,21 +1,6 @@
 import type { ReactElement } from 'react';
 import type { CanvasEditorInputFormat } from 'react-ocl';
-/** What the editor draws: one structure, or a reaction with its arrow. */
-export type StructureEditorMode = 'molecule' | 'reaction';
-/** Everything the editor holds at the moment it changed. */
-export interface StructureEditorChange {
-    /** Which kind of editor produced it. */
-    mode: StructureEditorMode;
-    /**
-     * The idCode, with the coordinates the editor laid out written after a
-     * space. `splitIdCode` takes the two apart.
-     */
-    idCode: string;
-    /** The V2000 molfile of a molecule, or the RXN file of a reaction. */
-    molfile: string;
-    /** The SMILES of a molecule, or the reaction SMILES. */
-    smiles: string;
-}
+import type { StructureEditorChange, StructureEditorMode } from './editorChange.ts';
 interface EditorCanvasProps {
     /** Called on every stroke, with the editor read out synchronously. */
     onChange: (change: StructureEditorChange) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,uBAAuB,EAGxB,MAAM,WAAW,CAAC;AAGnB,0EAA0E;AAC1E,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,4DAA4D;AAC5D,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,iBAAiB;IACzB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2DnE"}
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,uBAAuB,EAGxB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAG3B,UAAU,iBAAiB;IACzB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA6CnE"}

package/lib/structure/ui/EditorCanvas.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { CanvasMoleculeEditor, CanvasReactionEditor } from 'react-ocl';
+import { moleculeChange, reactionChange } from "./editorChange.js";
 /**
  * The react-ocl canvas, filling whatever box it is put in.
  *
@@ -12,24 +13,10 @@ import { CanvasMoleculeEditor, CanvasReactionEditor } from 'react-ocl';
 export function EditorCanvas(props) {
     const { onChange, fragment = false, inputFormat = 'idcode', value = '', mode = 'molecule', } = props;
     const [initialValue] = useState(value);
-    const handleMolecule = useCallback((event) => {
-        // The event describes the editor only while the callback runs, so every
-        // notation is read now and whatever waiting there is happens afterwards.
-        onChange({
-            mode: 'molecule',
-            idCode: event.getIdcode(),
-            molfile: event.getMolfile(),
-            smiles: event.getSmiles(),
-        });
-    }, [onChange]);
-    const handleReaction = useCallback((event) => {
-        onChange({
-            mode: 'reaction',
-            idCode: event.getIdcode(),
-            molfile: event.getRxn(),
-            smiles: event.getSmiles(),
-        });
-    }, [onChange]);
+    // The event describes the editor only while the callback runs, so it is read
+    // out now and whatever waiting there is happens afterwards.
+    const handleMolecule = useCallback((event) => onChange(moleculeChange(event)), [onChange]);
+    const handleReaction = useCallback((event) => onChange(reactionChange(event)), [onChange]);
     return (_jsx("div", { style: CANVAS_STYLE, children: mode === 'reaction' ? (_jsx(CanvasReactionEditor, { width: "100%", height: "100%", fragment: fragment, inputFormat: inputFormat, inputValue: initialValue, onChange: handleReaction })) : (_jsx(CanvasMoleculeEditor, { width: "100%", height: "100%", fragment: fragment, inputFormat: inputFormat, inputValue: initialValue, onChange: handleMolecule })) }));
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvas.js","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAgDvE;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,QAAQ,EACtB,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,UAAU,GAClB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAmC,EAAE,EAAE;QACtC,wEAAwE;QACxE,yEAAyE;QACzE,QAAQ,CAAC;YACP,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;YACzB,OAAO,EAAE,KAAK,CAAC,UAAU,EAAE;YAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;SAC1B,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAmC,EAAE,EAAE;QACtC,QAAQ,CAAC;YACP,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;YACzB,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE;YACvB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;SAC1B,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,YAAY,YACrB,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,KAAC,oBAAoB,IACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,cAAc,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,cAAc,GACxB,CACH,GACG,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC"}
+{"version":3,"file":"EditorCanvas.js","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAMvE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA8BnE;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,QAAQ,EACtB,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,UAAU,GAClB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEvC,6EAA6E;IAC7E,4DAA4D;IAC5D,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,YAAY,YACrB,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,KAAC,oBAAoB,IACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,cAAc,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,cAAc,GACxB,CACH,GACG,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { ReactElement, RefObject } from 'react';
+import type { StructureEditorMode } from './editorChange.ts';
+/** What {@link EditorHelpButton} needs. */
+export interface EditorHelpButtonProps {
+    /** The element wrapping the editor, which F1 is listened for on. */
+    containerRef: RefObject<HTMLElement | null>;
+    /** Which editor the guide is written for. */
+    mode: StructureEditorMode;
+    /** Whether the editor draws a query fragment. */
+    fragment: boolean;
+}
+/**
+ * The editor's help button, in the corner of the drawing, opening the guide to
+ * the mouse and the keyboard.
+ *
+ * F1 opens it too: openchemlib binds that key to a help dialog it does not
+ * implement on the web.
+ * @param props - See {@link EditorHelpButtonProps}.
+ * @returns The button and its popover.
+ */
+export declare function EditorHelpButton(props: EditorHelpButtonProps): ReactElement;
+//# sourceMappingURL=EditorHelpButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorHelpButton.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/EditorHelpButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,oEAAoE;IACpE,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,6CAA6C;IAC7C,IAAI,EAAE,mBAAmB,CAAC;IAC1B,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAmC3E"}

package/lib/structure/ui/EditorHelpButton.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, PopoverNext, Tooltip } from '@blueprintjs/core';
+import { useEffect, useState } from 'react';
+import { StructureEditorHelp } from "./StructureEditorHelp.js";
+/**
+ * The editor's help button, in the corner of the drawing, opening the guide to
+ * the mouse and the keyboard.
+ *
+ * F1 opens it too: openchemlib binds that key to a help dialog it does not
+ * implement on the web.
+ * @param props - See {@link EditorHelpButtonProps}.
+ * @returns The button and its popover.
+ */
+export function EditorHelpButton(props) {
+    const { containerRef, mode, fragment } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'F1')
+                return;
+            event.preventDefault();
+            setIsOpen(true);
+        };
+        container.addEventListener('keydown', onKeyDown);
+        return () => container.removeEventListener('keydown', onKeyDown);
+    }, [containerRef]);
+    return (_jsx("div", { style: CORNER_STYLE, children: _jsx(PopoverNext, { isOpen: isOpen, onInteraction: setIsOpen, placement: "left-start", content: _jsx(StructureEditorHelp, { mode: mode, fragment: fragment }), children: _jsx(Tooltip, { content: LABEL, placement: "left", disabled: isOpen, children: _jsx(Button, { variant: "minimal", size: "small", icon: "help", "aria-label": LABEL }) }) }) }));
+}
+const LABEL = 'Mouse and keyboard';
+const CORNER_STYLE = {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+};
+//# sourceMappingURL=EditorHelpButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorHelpButton.js","sourceRoot":"","sources":["../../../src/structure/ui/EditorHelpButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAahE;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAC/B,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI;gBAAE,OAAO;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;QACF,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,cAAK,KAAK,EAAE,YAAY,YACtB,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,KAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,YAEhE,KAAC,OAAO,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,EAAC,QAAQ,EAAE,MAAM,YACxD,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,MAAM,gBACC,KAAK,GACjB,GACM,GACE,GACV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,oBAAoB,CAAC;AAEnC,MAAM,YAAY,GAAkB;IAClC,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;CACT,CAAC"}

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

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+/**
+ * Keys pressed together, each drawn as a key cap, `Mod` as the modifier the
+ * editor listens to on this platform.
+ * @param props - The keys.
+ * @param props.keys - The keys, unique within the list.
+ * @returns The key caps.
+ */
+export declare function KeyCaps(props: {
+    keys: readonly string[];
+}): ReactElement;
+//# sourceMappingURL=KeyCaps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyCaps.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/KeyCaps.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,GAAG,YAAY,CAWxE"}

package/lib/structure/ui/KeyCaps.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Classes } from '@blueprintjs/core';
+import { editorKeyLabel } from "../core/editorGuide.js";
+/**
+ * Keys pressed together, each drawn as a key cap, `Mod` as the modifier the
+ * editor listens to on this platform.
+ * @param props - The keys.
+ * @param props.keys - The keys, unique within the list.
+ * @returns The key caps.
+ */
+export function KeyCaps(props) {
+    const isMac = isMacPlatform();
+    return (_jsx("span", { style: KEYS_STYLE, children: props.keys.map((key) => (_jsx("kbd", { className: Classes.KEY, children: editorKeyLabel(key, isMac) }, key))) }));
+}
+/**
+ * Whether the page runs on a Mac, decided as openchemlib decides it, so the
+ * cap shown is the modifier the editor actually reads: ⌘ there, Ctrl elsewhere.
+ * @returns True on a Mac.
+ */
+function isMacPlatform() {
+    return typeof navigator !== 'undefined' && navigator.platform === 'MacIntel';
+}
+const KEYS_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 3,
+    whiteSpace: 'nowrap',
+};
+//# sourceMappingURL=KeyCaps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyCaps.js","sourceRoot":"","sources":["../../../src/structure/ui/KeyCaps.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,KAAkC;IACxD,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,OAAO,CACL,eAAM,KAAK,EAAE,UAAU,YACpB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACvB,cAAe,SAAS,EAAE,OAAO,CAAC,GAAG,YAClC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IADnB,GAAG,CAEP,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,aAAa;IACpB,OAAO,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,CAAC,QAAQ,KAAK,UAAU,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;IACN,UAAU,EAAE,QAAQ;CACrB,CAAC"}

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

@@ -8,7 +8,7 @@
  */
 import type { CSSProperties, ReactElement } from 'react';
 import type { CanvasEditorInputFormat } from 'react-ocl';
-import type { StructureEditorChange, StructureEditorMode } from './EditorCanvas.tsx';
+import type { StructureEditorChange, StructureEditorMode } from './editorChange.ts';
 /** What {@link StructureEditor} needs. */
 export interface StructureEditorProps {
     /**
@@ -61,6 +61,12 @@ export interface StructureEditorProps {
      * @default 'molecule'
      */
     mode?: StructureEditorMode;
+    /**
+     * Explain each toolbar button in a tooltip, and put a button in the corner
+     * that opens a guide to the mouse and the keyboard, which F1 opens too.
+     * @default true
+     */
+    help?: boolean;
     /**
      * Class the container carries, so a site can reach it from its stylesheet.
      * @default undefined
@@ -74,7 +80,8 @@ export interface StructureEditorProps {
 }
 /**
  * The canvas structure editor, sized to fill its container and never to hide
- * part of its toolbar.
+ * part of its toolbar, with a tooltip on every toolbar button and a guide to
+ * the keys.
  * @param props - What to draw, when to reload it, and where to send it.
  * @returns The editor.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"StructureEditor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAIzD,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAQ5B,0CAA0C;AAC1C,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAmCzE"}
+{"version":3,"file":"StructureEditor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AASzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAOzD,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAQ3B,0CAA0C;AAC1C,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8CzE"}

package/lib/structure/ui/StructureEditor.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, lazy, useCallback, useEffect, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState, } from 'react';
 import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { createPendingCall } from "../core/pendingCall.js";
+import { EditorHelpButton } from "./EditorHelpButton.js";
+import { ToolbarTooltip } from "./ToolbarTooltip.js";
 import { useToolbarFloor } from "./useToolbarFloor.js";
 const EditorCanvas = lazy(async () => {
     const module = await import("./EditorCanvas.js");
@@ -8,21 +11,24 @@ const EditorCanvas = lazy(async () => {
 });
 /**
  * The canvas structure editor, sized to fill its container and never to hide
- * part of its toolbar.
+ * part of its toolbar, with a tooltip on every toolbar button and a guide to
+ * the keys.
  * @param props - What to draw, when to reload it, and where to send it.
  * @returns The editor.
  */
 export function StructureEditor(props) {
-    const { onChange, fragment = false, inputFormat = 'idcode', value = '', revision = 0, debounce = 300, minHeight = 320, mode = 'molecule', className, style, } = props;
+    const { onChange, fragment = false, inputFormat = 'idcode', value = '', revision = 0, debounce = 300, minHeight = 320, mode = 'molecule', help = true, className, style, } = props;
     const containerRef = useToolbarFloor({ minHeight, revision });
     const handleChange = useDebounced(onChange, debounce, revision);
-    return (_jsx("div", { ref: containerRef, className: className, style: { ...ROOT_STYLE, minHeight, ...style }, children: _jsx(Suspense, { fallback: _jsx("div", { style: LOADING_STYLE, children: "Loading the editor\u2026" }), children: _jsx(EditorCanvas, { onChange: handleChange, fragment: fragment, inputFormat: inputFormat, value: value, mode: mode }, revision) }) }));
+    return (_jsx("div", { ref: containerRef, className: className, style: { ...ROOT_STYLE, minHeight, ...style }, children: _jsxs(Suspense, { fallback: _jsx("div", { style: LOADING_STYLE, children: "Loading the editor\u2026" }), children: [_jsx(EditorCanvas, { onChange: handleChange, fragment: fragment, inputFormat: inputFormat, value: value, mode: mode }, revision), help ? (_jsxs(_Fragment, { children: [_jsx(ToolbarTooltip, { containerRef: containerRef, mode: mode }), _jsx(EditorHelpButton, { containerRef: containerRef, mode: mode, fragment: fragment })] })) : null] }) }));
 }
 /**
  * Report the last edit of a burst rather than every one of them.
  *
  * The editor's own event is read out before the wait starts, so what arrives
  * late is a plain object rather than a handle on an editor that has moved on.
+ * An editor removed mid-burst — a tab switched, a card folded — still reports
+ * its last edit, which would otherwise be lost with the timer.
  * @param onChange - What the caller wants told.
  * @param delay - How long the drawing has to be still, in milliseconds.
  * @param resetKey - Dropped edits: a burst still waiting when the caller
@@ -30,31 +36,18 @@ export function StructureEditor(props) {
  * @returns The handler to give the canvas.
  */
 function useDebounced(onChange, delay, resetKey) {
-    const timerRef = useRef(null);
+    const [pending] = useState((createPendingCall));
     const onChangeRef = useRef(onChange);
     useEffect(() => {
         onChangeRef.current = onChange;
     });
     useEffect(() => {
-        return () => {
-            if (timerRef.current !== null) {
-                clearTimeout(timerRef.current);
-                timerRef.current = null;
-            }
-        };
-    }, [resetKey]);
+        pending.drop();
+    }, [pending, resetKey]);
+    useEffect(() => () => pending.flush(), [pending]);
     return useCallback((change) => {
-        if (timerRef.current !== null)
-            clearTimeout(timerRef.current);
-        if (delay <= 0) {
-            onChangeRef.current(change);
-            return;
-        }
-        timerRef.current = setTimeout(() => {
-            timerRef.current = null;
-            onChangeRef.current(change);
-        }, delay);
-    }, [delay]);
+        pending.push(change, delay, (value) => onChangeRef.current(value));
+    }, [pending, delay]);
 }
 /**
  * The canvas is positioned out of the height computation, so the container's

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * What the keyboard and the mouse do in the structure editor, shown in the
+ * editor's help popover, and usable by a site on a page of its own.
+ */
+import type { ReactElement } from 'react';
+import type { EditorGuideOptions } from '../core/editorGuide.ts';
+/** What {@link StructureEditorHelp} is written for. */
+export type StructureEditorHelpProps = EditorGuideOptions;
+/**
+ * The guide to the structure editor: the keys that change the atom or bond
+ * under the pointer, the selection gestures, the stereo conventions, and links
+ * to the full documentation. Gestures that do nothing in the given editor are
+ * left out.
+ * @param props - See {@link StructureEditorHelpProps}.
+ * @returns The guide.
+ */
+export declare function StructureEditorHelp(props: StructureEditorHelpProps): ReactElement;
+//# sourceMappingURL=StructureEditorHelp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StructureEditorHelp.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditorHelp.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAiB,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQhF,uDAAuD;AACvD,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,CAAC;AAE1D;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAwCd"}

package/lib/structure/ui/StructureEditorHelp.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What the keyboard and the mouse do in the structure editor, shown in the
+ * editor's help popover, and usable by a site on a page of its own.
+ */
+import { Classes } from '@blueprintjs/core';
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { STRUCTURE_EDITOR_DOCS, editorGuideSections, } from "../core/editorGuide.js";
+import { KeyCaps } from "./KeyCaps.js";
+/**
+ * The guide to the structure editor: the keys that change the atom or bond
+ * under the pointer, the selection gestures, the stereo conventions, and links
+ * to the full documentation. Gestures that do nothing in the given editor are
+ * left out.
+ * @param props - See {@link StructureEditorHelpProps}.
+ * @returns The guide.
+ */
+export function StructureEditorHelp(props) {
+    const sections = editorGuideSections(props);
+    return (_jsxs("div", { style: PANEL_STYLE, "data-testid": "structure-editor-help", children: [_jsx("p", { className: Classes.TEXT_MUTED, style: PARAGRAPH_STYLE, children: "Hover a toolbar button to see what it does and its key." }), _jsx("div", { style: GRID_STYLE, children: sections.map((section) => (_jsxs("section", { style: ROW_STYLE, children: [_jsx("h4", { style: HEADING_STYLE, children: section.title }), section.gestures.map((gesture) => (_jsxs("div", { style: ROW_STYLE, children: [_jsx(GestureInput, { input: gesture.input }), _jsx("span", { children: gesture.action })] }, gestureKey(gesture)))), section.note === undefined ? null : (_jsx("p", { className: Classes.TEXT_MUTED, style: NOTE_STYLE, children: section.note }))] }, section.title))) }), _jsxs("p", { style: PARAGRAPH_STYLE, children: ["Learn more:", ' ', STRUCTURE_EDITOR_DOCS.map((link, index) => (_jsxs("span", { children: [index === 0 ? null : ' · ', _jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title })] }, link.url)))] })] }));
+}
+function GestureInput(props) {
+    return (_jsx("span", { style: INPUT_STYLE, children: props.input.map((part) => typeof part === 'string' ? (_jsx("span", { children: part }, part)) : (_jsx(KeyCaps, { keys: [part.key] }, part.key))) }));
+}
+function gestureKey(gesture) {
+    const input = gesture.input
+        .map((part) => (typeof part === 'string' ? part : part.key))
+        .join(' ');
+    return `${input} ${gesture.action}`;
+}
+const PANEL_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    width: 400,
+    maxHeight: 'min(70vh, 36rem)',
+    overflowY: 'auto',
+    padding: 12,
+    fontSize: 12,
+};
+const GRID_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: 'max-content minmax(0, 1fr)',
+    alignItems: 'center',
+    columnGap: 12,
+    rowGap: 6,
+};
+const ROW_STYLE = { display: 'contents' };
+const HEADING_STYLE = {
+    gridColumn: '1 / -1',
+    margin: '8px 0 0',
+    paddingBottom: 3,
+    borderBottom: `1px solid ${TOKEN.border}`,
+    color: TOKEN.textMuted,
+    fontSize: 11,
+    fontWeight: 700,
+    letterSpacing: '0.04em',
+    textTransform: 'uppercase',
+};
+const INPUT_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    whiteSpace: 'nowrap',
+};
+const PARAGRAPH_STYLE = { margin: 0, lineHeight: 1.45 };
+const NOTE_STYLE = { ...PARAGRAPH_STYLE, gridColumn: '1 / -1' };
+//# sourceMappingURL=StructureEditorHelp.js.map

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

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

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

@@ -0,0 +1,20 @@
+import type { ReactElement, RefObject } from 'react';
+import type { StructureEditorMode } from './editorChange.ts';
+/** What {@link ToolbarTooltip} needs. */
+export interface ToolbarTooltipProps {
+    /** The positioned element wrapping the editor. */
+    containerRef: RefObject<HTMLElement | null>;
+    /** Which editor the toolbar belongs to, since some buttons are greyed. */
+    mode: StructureEditorMode;
+}
+/**
+ * The name, key and purpose of the toolbar button under the pointer.
+ *
+ * The toolbar is a canvas, so the tooltip is anchored to an invisible box laid
+ * over the button rather than to the button itself; the box lets the pointer
+ * through, so the editor still sees every hover and click.
+ * @param props - See {@link ToolbarTooltipProps}.
+ * @returns The tooltip, or nothing before a button has been hovered.
+ */
+export declare function ToolbarTooltip(props: ToolbarTooltipProps): ReactElement | null;
+//# sourceMappingURL=ToolbarTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTooltip.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/ToolbarTooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,kDAAkD;IAClD,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,0EAA0E;IAC1E,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,mBAAmB,GACzB,YAAY,GAAG,IAAI,CAiBrB"}

package/lib/structure/ui/ToolbarTooltip.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Classes, Tooltip } from '@blueprintjs/core';
+import { EDITOR_TOOLBAR_BUTTONS, isEditorToolbarButtonAvailable, } from "../core/editorToolbar.js";
+import { KeyCaps } from "./KeyCaps.js";
+import { useToolbarHover } from "./useToolbarHover.js";
+/**
+ * The name, key and purpose of the toolbar button under the pointer.
+ *
+ * The toolbar is a canvas, so the tooltip is anchored to an invisible box laid
+ * over the button rather than to the button itself; the box lets the pointer
+ * through, so the editor still sees every hover and click.
+ * @param props - See {@link ToolbarTooltipProps}.
+ * @returns The tooltip, or nothing before a button has been hovered.
+ */
+export function ToolbarTooltip(props) {
+    const { containerRef, mode } = props;
+    const hover = useToolbarHover(containerRef);
+    if (hover === null)
+        return null;
+    const button = EDITOR_TOOLBAR_BUTTONS[hover.button];
+    if (button === undefined)
+        return null;
+    return (_jsx(Tooltip, { isOpen: hover.open, placement: "right", content: _jsx(ButtonTip, { button: button, mode: mode }), renderTarget: ({ ref }) => (_jsx("span", { ref: ref, "aria-hidden": true, style: { ...TARGET_STYLE, ...hover.box } })) }));
+}
+function ButtonTip(props) {
+    const { button, mode } = props;
+    const available = isEditorToolbarButtonAvailable(button, mode);
+    return (_jsxs("div", { style: TIP_STYLE, "data-testid": "structure-editor-tooltip", children: [_jsxs("div", { style: HEAD_STYLE, children: [_jsx("strong", { children: button.name }), button.keys === undefined ? null : _jsx(KeyCaps, { keys: button.keys })] }), _jsx("div", { children: button.description }), available ? null : (_jsx("div", { className: Classes.TEXT_MUTED, children: button.availability === 'reaction'
+                    ? 'Only when drawing a reaction.'
+                    : 'Not available in this editor.' }))] }));
+}
+const TARGET_STYLE = {
+    position: 'absolute',
+    pointerEvents: 'none',
+};
+const TIP_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    maxWidth: 260,
+    lineHeight: 1.4,
+};
+const HEAD_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+};
+//# sourceMappingURL=ToolbarTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTooltip.js","sourceRoot":"","sources":["../../../src/structure/ui/ToolbarTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,EACL,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAe,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAUvD;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAC5B,KAA0B;IAE1B,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,KAAK,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC5C,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,MAAM,MAAM,GAAG,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACpD,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAEtC,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,KAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,EAClD,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CACzB,eAAM,GAAG,EAAE,GAAG,uBAAc,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC,GAAG,EAAE,GAAI,CACzE,GACD,CACH,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAGlB;IACC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/B,MAAM,SAAS,GAAG,8BAA8B,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,eAAK,KAAK,EAAE,SAAS,iBAAc,0BAA0B,aAC3D,eAAK,KAAK,EAAE,UAAU,aACpB,2BAAS,MAAM,CAAC,IAAI,GAAU,EAC7B,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,IAC9D,EACN,wBAAM,MAAM,CAAC,WAAW,GAAO,EAC9B,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClB,cAAK,SAAS,EAAE,OAAO,CAAC,UAAU,YAC/B,MAAM,CAAC,YAAY,KAAK,UAAU;oBACjC,CAAC,CAAC,+BAA+B;oBACjC,CAAC,CAAC,+BAA+B,GAC/B,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAkB;IAClC,QAAQ,EAAE,UAAU;IACpB,aAAa,EAAE,MAAM;CACtB,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,QAAQ,EAAE,GAAG;IACb,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,EAAE;CACR,CAAC"}

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

@@ -0,0 +1,52 @@
+/**
+ * What the structure editor reports after an edit.
+ *
+ * Only types are imported from react-ocl and openchemlib, so this module can be
+ * reached from the `react-cheminfo/structure` barrel without pulling either in.
+ */
+import type { Molecule } from 'openchemlib';
+import type { CanvasEditorOnChangeMolecule, CanvasEditorOnChangeReaction } from 'react-ocl';
+/** What the editor draws: one structure, or a reaction with its arrow. */
+export type StructureEditorMode = 'molecule' | 'reaction';
+/** The notations every change carries, whichever the editor. */
+interface StructureEditorNotations {
+    /**
+     * The idCode, with the coordinates the editor laid out written after a
+     * space. `splitIdCode` takes the two apart.
+     */
+    idCode: string;
+    /** The V2000 molfile of a molecule, or the RXN file of a reaction. */
+    molfile: string;
+    /** The SMILES of a molecule, or the reaction SMILES. */
+    smiles: string;
+}
+/** What a molecule editor holds at the moment it changed. */
+export interface StructureEditorMoleculeChange extends StructureEditorNotations {
+    mode: 'molecule';
+    /**
+     * A copy of the drawn molecule, with its coordinates. It is taken when the
+     * edit happens, so it still describes that edit when it arrives after the
+     * debounce, and the caller may modify it without touching the canvas.
+     */
+    molecule: Molecule;
+}
+/** What a reaction editor holds at the moment it changed. */
+export interface StructureEditorReactionChange extends StructureEditorNotations {
+    mode: 'reaction';
+}
+/** Everything the editor holds at the moment it changed. */
+export type StructureEditorChange = StructureEditorMoleculeChange | StructureEditorReactionChange;
+/**
+ * Read a molecule editor's event out, while it still describes the edit.
+ * @param event - The event react-ocl passes to its callback.
+ * @returns The change, independent of the editor from then on.
+ */
+export declare function moleculeChange(event: CanvasEditorOnChangeMolecule): StructureEditorMoleculeChange;
+/**
+ * Read a reaction editor's event out, while it still describes the edit.
+ * @param event - The event react-ocl passes to its callback.
+ * @returns The change, independent of the editor from then on.
+ */
+export declare function reactionChange(event: CanvasEditorOnChangeReaction): StructureEditorReactionChange;
+export {};
+//# sourceMappingURL=editorChange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editorChange.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/editorChange.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EACV,4BAA4B,EAC5B,4BAA4B,EAC7B,MAAM,WAAW,CAAC;AAEnB,0EAA0E;AAC1E,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,gEAAgE;AAChE,UAAU,wBAAwB;IAChC;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,6DAA6D;AAC7D,MAAM,WAAW,6BAA8B,SAAQ,wBAAwB;IAC7E,IAAI,EAAE,UAAU,CAAC;IACjB;;;;OAIG;IACH,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,6DAA6D;AAC7D,MAAM,WAAW,6BAA8B,SAAQ,wBAAwB;IAC7E,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,4DAA4D;AAC5D,MAAM,MAAM,qBAAqB,GAC/B,6BAA6B,GAAG,6BAA6B,CAAC;AAEhE;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,4BAA4B,GAClC,6BAA6B,CAQ/B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,4BAA4B,GAClC,6BAA6B,CAO/B"}

package/lib/structure/ui/editorChange.js

@@ -0,0 +1,34 @@
+/**
+ * What the structure editor reports after an edit.
+ *
+ * Only types are imported from react-ocl and openchemlib, so this module can be
+ * reached from the `react-cheminfo/structure` barrel without pulling either in.
+ */
+/**
+ * Read a molecule editor's event out, while it still describes the edit.
+ * @param event - The event react-ocl passes to its callback.
+ * @returns The change, independent of the editor from then on.
+ */
+export function moleculeChange(event) {
+    return {
+        mode: 'molecule',
+        idCode: event.getIdcode(),
+        molfile: event.getMolfile(),
+        smiles: event.getSmiles(),
+        molecule: event.getMolecule(),
+    };
+}
+/**
+ * Read a reaction editor's event out, while it still describes the edit.
+ * @param event - The event react-ocl passes to its callback.
+ * @returns The change, independent of the editor from then on.
+ */
+export function reactionChange(event) {
+    return {
+        mode: 'reaction',
+        idCode: event.getIdcode(),
+        molfile: event.getRxn(),
+        smiles: event.getSmiles(),
+    };
+}
+//# sourceMappingURL=editorChange.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editorChange.js","sourceRoot":"","sources":["../../../src/structure/ui/editorChange.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AA4CH;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAmC;IAEnC,OAAO;QACL,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;QACzB,OAAO,EAAE,KAAK,CAAC,UAAU,EAAE;QAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;QACzB,QAAQ,EAAE,KAAK,CAAC,WAAW,EAAE;KAC9B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAmC;IAEnC,OAAO;QACL,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;QACzB,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE;QACvB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE;KAC1B,CAAC;AACJ,CAAC"}