react-cheminfo 0.66.0 → 0.67.0

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

@@ -0,0 +1,98 @@
+import type { CSSProperties } from 'react';
+import type { CanvasEditorInputFormat } from 'react-ocl';
+import type { StructureTransfer } from '../core/structureTransfer.ts';
+import type { StructureEditorChange, StructureEditorMode } from './editorChange.ts';
+/** What `StructureEditor` needs. */
+export interface StructureEditorProps {
+    /**
+     * Called after every edit, once the drawing has been still for `debounce`
+     * milliseconds, with every notation read out of the editor.
+     */
+    onChange: (change: StructureEditorChange) => void;
+    /**
+     * Draw a query fragment rather than a whole structure, which is what a
+     * substructure filter needs.
+     * @default false
+     */
+    fragment?: boolean;
+    /**
+     * How `value` is written.
+     * @default 'idcode'
+     */
+    inputFormat?: CanvasEditorInputFormat;
+    /**
+     * What the canvas holds. Read once, when the editor appears and again on
+     * every change of `revision`: the editor is uncontrolled, so feeding the
+     * drawing back into it would replace the structure and reset every
+     * coordinate under the pen.
+     * @default ''
+     */
+    value?: string;
+    /**
+     * Bumped by the caller to load `value` into the canvas again, which is what
+     * an example, a share link or a Clear button does. Changing it discards
+     * whatever was being drawn.
+     * @default 0
+     */
+    revision?: number;
+    /**
+     * How long the drawing has to be still before `onChange` is called, in
+     * milliseconds. Long enough that drawing a ring does not publish six
+     * structures; `0` reports every stroke.
+     * @default 300
+     */
+    debounce?: number;
+    /**
+     * Smallest height of the drawing area, in pixels. Raised to whatever the
+     * toolbar needs, which is usually more.
+     * @default 320
+     */
+    minHeight?: number;
+    /**
+     * Whether the editor draws one structure or a reaction. A reaction canvas
+     * has its own toolbar and its own arrow.
+     * @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;
+    /**
+     * Put a button in the corner that opens every notation of the drawing — its
+     * SMILES, its molfiles, its canonical identifiers — and the picture of it,
+     * ready to copy or to save. A reaction has none of those, so it is never
+     * offered one.
+     * @default true
+     */
+    exportable?: boolean;
+    /**
+     * Take a structure dropped on the canvas — a molfile, an SDF, a SMILES or
+     * an idCode, as a file or as text dragged from another page — and put a
+     * button in the corner that opens one from disk. A reaction canvas takes
+     * none.
+     * @default true
+     */
+    importable?: boolean;
+    /**
+     * Take what is dropped or opened yourself instead of letting the editor read
+     * it, for a page that reads more than the canvas does — an XYZ, a PDB, a 3D
+     * geometry the canvas would flatten. The page then loads the structure back
+     * through `value` and `revision`, like any other.
+     * @default undefined
+     */
+    onImport?: (transfer: StructureTransfer) => void;
+    /**
+     * Class the container carries, so a site can reach it from its stylesheet.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Extra style for the container, merged over the packaged one.
+     * @default undefined
+     */
+    style?: CSSProperties;
+}
+//# sourceMappingURL=structureEditorProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"structureEditorProps.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/structureEditorProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAE3B,oCAAoC;AACpC,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;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}

package/lib/structure/ui/structureEditorProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=structureEditorProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"structureEditorProps.js","sourceRoot":"","sources":["../../../src/structure/ui/structureEditorProps.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,16 @@
+import type { StructureEditorChange } from './editorChange.ts';
+/**
+ * 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
+ * replaces the structure describes a canvas that no longer exists.
+ * @returns The handler to give the canvas.
+ */
+export declare function useDebouncedChange(onChange: (change: StructureEditorChange) => void, delay: number, resetKey: number): (change: StructureEditorChange) => void;
+//# sourceMappingURL=useDebouncedChange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedChange.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useDebouncedChange.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,EACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,GACf,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAiBzC"}

package/lib/structure/ui/useDebouncedChange.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPendingCall } from "../core/pendingCall.js";
+/**
+ * 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
+ * replaces the structure describes a canvas that no longer exists.
+ * @returns The handler to give the canvas.
+ */
+export function useDebouncedChange(onChange, delay, resetKey) {
+    const [pending] = useState((createPendingCall));
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    });
+    useEffect(() => {
+        pending.drop();
+    }, [pending, resetKey]);
+    useEffect(() => () => pending.flush(), [pending]);
+    return useCallback((change) => {
+        pending.push(change, delay, (value) => onChangeRef.current(value));
+    }, [pending, delay]);
+}
+//# sourceMappingURL=useDebouncedChange.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedChange.js","sourceRoot":"","sources":["../../../src/structure/ui/useDebouncedChange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAI3D;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAChC,QAAiD,EACjD,KAAa,EACb,QAAgB;IAEhB,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAA,iBAAwC,CAAA,CAAC,CAAC;IACrE,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,IAAI,EAAE,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACxB,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAElD,OAAO,WAAW,CAChB,CAAC,MAA6B,EAAE,EAAE;QAChC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IACrE,CAAC,EACD,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,30 @@
+import type { DragEvent } from 'react';
+import type { StructureTransfer } from '../core/structureTransfer.ts';
+/** The drag handlers of one element. */
+export interface DropHandlers {
+    onDragEnter?: (event: DragEvent<HTMLElement>) => void;
+    onDragOver?: (event: DragEvent<HTMLElement>) => void;
+    onDragLeave?: (event: DragEvent<HTMLElement>) => void;
+    onDrop?: (event: DragEvent<HTMLElement>) => void;
+}
+/** A drop target, in two parts: the element and the overlay it raises. */
+export interface StructureDropTarget {
+    /** Whether a file or text is being dragged over the target. */
+    over: boolean;
+    /** Put on the element that takes the drop. */
+    targetProps: DropHandlers;
+    /**
+     * Put on the overlay drawn while `over`. It covers the target and takes
+     * every drag event from then on, so moving across the canvas and the buttons
+     * underneath never reads as leaving, and leaving the overlay is leaving.
+     */
+    overlayProps: DropHandlers;
+}
+/**
+ * Take a file or text dropped on an element.
+ * @param onDrop - Where the drop goes; `undefined` takes none.
+ * @returns Whether a drag is over the element, and the handlers to put on it
+ * and on its overlay.
+ */
+export declare function useStructureDrop(onDrop: ((transfer: StructureTransfer) => void) | undefined): StructureDropTarget;
+//# sourceMappingURL=useStructureDrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStructureDrop.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useStructureDrop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAMtE,wCAAwC;AACxC,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAClD;AAED,0EAA0E;AAC1E,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,IAAI,EAAE,OAAO,CAAC;IACd,8CAA8C;IAC9C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,GAC1D,mBAAmB,CAoCrB"}

package/lib/structure/ui/useStructureDrop.js

@@ -0,0 +1,49 @@
+import { useMemo, useState } from 'react';
+import { carriesStructure, readStructureTransfer, } from "../core/structureTransfer.js";
+/**
+ * Take a file or text dropped on an element.
+ * @param onDrop - Where the drop goes; `undefined` takes none.
+ * @returns Whether a drag is over the element, and the handlers to put on it
+ * and on its overlay.
+ */
+export function useStructureDrop(onDrop) {
+    const [over, setOver] = useState(false);
+    return useMemo(() => {
+        if (onDrop === undefined) {
+            return { over: false, targetProps: {}, overlayProps: {} };
+        }
+        const accept = (event) => {
+            if (!carriesStructure(event.dataTransfer.types))
+                return false;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'copy';
+            return true;
+        };
+        return {
+            over,
+            targetProps: {
+                onDragEnter: (event) => {
+                    if (accept(event))
+                        setOver(true);
+                },
+                onDragOver: accept,
+            },
+            overlayProps: {
+                onDragOver: accept,
+                onDragLeave: (event) => {
+                    if (event.target === event.currentTarget)
+                        setOver(false);
+                },
+                onDrop: (event) => {
+                    setOver(false);
+                    const transfer = readStructureTransfer(event.dataTransfer);
+                    if (transfer === null)
+                        return;
+                    event.preventDefault();
+                    onDrop(transfer);
+                },
+            },
+        };
+    }, [onDrop, over]);
+}
+//# sourceMappingURL=useStructureDrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStructureDrop.js","sourceRoot":"","sources":["../../../src/structure/ui/useStructureDrop.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EACL,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,8BAA8B,CAAC;AAwBtC;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAA2D;IAE3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAC5D,CAAC;QACD,MAAM,MAAM,GAAG,CAAC,KAA6B,EAAW,EAAE;YACxD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;gBAAE,OAAO,KAAK,CAAC;YAC9D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;YACvC,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;QACF,OAAO;YACL,IAAI;YACJ,WAAW,EAAE;gBACX,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,MAAM,CAAC,KAAK,CAAC;wBAAE,OAAO,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC;gBACD,UAAU,EAAE,MAAM;aACnB;YACD,YAAY,EAAE;gBACZ,UAAU,EAAE,MAAM;gBAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa;wBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;gBAC3D,CAAC;gBACD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACf,MAAM,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;oBAC3D,IAAI,QAAQ,KAAK,IAAI;wBAAE,OAAO;oBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACnB,CAAC;aACF;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AACrB,CAAC"}

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

@@ -0,0 +1,45 @@
+import type { StructureTransfer } from '../core/structureTransfer.ts';
+import type { StructureEditorMoleculeChange } from './editorChange.ts';
+/** What {@link useStructureImport} needs. */
+export interface StructureImportOptions {
+    /** Bumped by the caller to load its own value, which drops any import. */
+    revision: number;
+    /** Whether the editor draws a query fragment. */
+    fragment: boolean;
+    /** The caller's own reader, which then takes every drop instead. */
+    onImport: ((transfer: StructureTransfer) => void) | undefined;
+    /** Where a structure the editor read goes: the path an edit takes. */
+    onRead: (change: StructureEditorMoleculeChange) => void;
+}
+/** Why the last drop loaded nothing. */
+export interface StructureImportProblem {
+    /** The file that was read, `null` for dragged text. */
+    file: string | null;
+}
+/** The editor's imports, as the canvas and its corner need them. */
+export interface StructureImport {
+    /**
+     * The idCode the canvas loads instead of the caller's value, `null` while it
+     * shows that value.
+     */
+    idCode: string | null;
+    /** The canvas's key: a new one per import, which loads it. */
+    canvasKey: string;
+    /** Read a drop or a chosen file. */
+    load: (transfer: StructureTransfer) => void;
+    /** Why the last drop loaded nothing, `null` when it did. */
+    problem: StructureImportProblem | null;
+    /** Forget the problem. */
+    dismiss: () => void;
+}
+/**
+ * Load what is dropped on the editor, or opened from disk, into its canvas.
+ *
+ * The canvas is uncontrolled, so a dropped structure — one the editor never
+ * produced — remounts it with a new key, and is then reported like an edit.
+ * A drop overtaken by a later one is dropped rather than applied late.
+ * @param options - See {@link StructureImportOptions}.
+ * @returns See {@link StructureImport}.
+ */
+export declare function useStructureImport(options: StructureImportOptions): StructureImport;
+//# sourceMappingURL=useStructureImport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStructureImport.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useStructureImport.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAEvE,6CAA6C;AAC7C,MAAM,WAAW,sBAAsB;IACrC,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,sEAAsE;IACtE,MAAM,EAAE,CAAC,MAAM,EAAE,6BAA6B,KAAK,IAAI,CAAC;CACzD;AAED,wCAAwC;AACxC,MAAM,WAAW,sBAAsB;IACrC,uDAAuD;IACvD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,oEAAoE;AACpE,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8DAA8D;IAC9D,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,IAAI,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,4DAA4D;IAC5D,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvC,0BAA0B;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AASD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,sBAAsB,GAC9B,eAAe,CAyCjB"}

package/lib/structure/ui/useStructureImport.js

@@ -0,0 +1,62 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Load what is dropped on the editor, or opened from disk, into its canvas.
+ *
+ * The canvas is uncontrolled, so a dropped structure — one the editor never
+ * produced — remounts it with a new key, and is then reported like an edit.
+ * A drop overtaken by a later one is dropped rather than applied late.
+ * @param options - See {@link StructureImportOptions}.
+ * @returns See {@link StructureImport}.
+ */
+export function useStructureImport(options) {
+    const { revision, fragment, onImport, onRead } = options;
+    const [imported, setImported] = useState(null);
+    const [problem, setProblem] = useState(null);
+    const token = useRef(0);
+    const load = useCallback((transfer) => {
+        setProblem(null);
+        if (onImport !== undefined) {
+            onImport(transfer);
+            return;
+        }
+        const current = ++token.current;
+        void readTransfer(transfer, fragment).then(({ file, change }) => {
+            if (current !== token.current)
+                return;
+            if (change === null) {
+                setProblem({ file });
+                return;
+            }
+            setImported((previous) => ({
+                revision,
+                count: previous?.revision === revision ? previous.count + 1 : 1,
+                idCode: change.idCode,
+            }));
+            onRead(change);
+        });
+    }, [fragment, onImport, onRead, revision]);
+    const dismiss = useCallback(() => setProblem(null), []);
+    const current = imported?.revision === revision ? imported : null;
+    return {
+        idCode: current?.idCode ?? null,
+        canvasKey: `${revision}.${current?.count ?? 0}`,
+        load,
+        problem,
+        dismiss,
+    };
+}
+async function readTransfer(transfer, fragment) {
+    const file = transfer.kind === 'files' ? transfer.files[0] : undefined;
+    try {
+        const text = transfer.kind === 'text' ? transfer.text : ((await file?.text()) ?? '');
+        const { readImportedStructure } = await import("./importedStructure.js");
+        return {
+            file: file?.name ?? null,
+            change: readImportedStructure(text, fragment),
+        };
+    }
+    catch {
+        return { file: file?.name ?? null, change: null };
+    }
+}
+//# sourceMappingURL=useStructureImport.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.66.0",
+  "version": "0.67.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",
@@ -71,6 +71,7 @@
   },
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^3.5.20",
+    "@pdf-lib/upng": "^1.0.1",
     "@tanstack/react-virtual": "^3.14.13",
     "ajv": "^8.20.0",
     "cheminfo-font": "^1.28.0",
@@ -97,6 +98,7 @@
     "@playwright/test": "^1.62.1",
     "@storybook/addon-docs": "^10.5.8",
     "@storybook/react-vite": "^10.5.8",
+    "@testing-library/dom": "^10.4.2",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
@@ -109,6 +111,7 @@
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
+    "fast-png": "^8.0.0",
     "fastify": "^5.12.7",
     "jsdom": "^30.1.1",
     "ml-dataset-iris": "^1.2.1",

package/src/download/ui/FigureDownloadPanel.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import { OverlayAction } from '../../overlay/ui/OverlayAction.tsx';
@@ -67,6 +67,12 @@ export interface FigureDownloadPanelProps {
    * @default undefined
    */
   sizing?: FigureSizing;
+  /**
+   * Rows of the figure's own, shown after the format: what else decides the
+   * file, such as which frames of an animation go into it.
+   * @default undefined
+   */
+  children?: ReactNode;
 }
 
 /**
@@ -93,7 +99,7 @@ export function FigureDownloadPanel(
 ): ReactElement {
   const { title, format, scale, scales, size, failure, saving } = props;
   const { onFormatChange, onScaleChange, onSave, rasterSvg = false } = props;
-  const { sizing, onCopy, notice = null } = props;
+  const { sizing, onCopy, notice = null, children } = props;
   const t = useChromeT();
 
   // What the file is drawn at: the figure on screen, or the shape picked.
@@ -142,6 +148,7 @@ export function FigureDownloadPanel(
         options={FORMAT_CHOICES}
         onChange={onFormatChange}
       />
+      {children}
       {sizing === undefined ? null : (
         <FigureSizeRows sizing={sizing} size={size} />
       )}

package/src/ecosystem/core/sites.ts

@@ -141,9 +141,9 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     mark: { plate: '#1e293b', accent: '#127ba3' },
   },
   {
-    id: 'surge',
-    name: { lead: 'surge', alt: 'cheminfo', dot: true },
-    host: 'surge.cheminfo.org',
+    id: 'isomers',
+    name: { lead: 'isomers', alt: 'cheminfo', dot: true },
+    host: 'isomers.cheminfo.org',
     tagline: 'Every constitutional isomer of a molecular formula.',
     group: 'structures',
     brand: '#4338ca',

package/src/ecosystem/core/types.ts

@@ -13,7 +13,7 @@ export type SiteId =
   | 'nmrium'
   | 'metabo'
   | 'derepflow'
-  | 'surge'
+  | 'isomers'
   | 'tex'
   | 'lcao'
   | 'regexp'

package/src/ecosystem/ui/glyphs.tsx

@@ -216,7 +216,7 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
     </>
   ),
   // One formula branching into every structure it can be.
-  surge: (alt) => (
+  isomers: (alt) => (
     <>
       <g
         fill="none"

package/src/i18n/core/messageCatalog.ts

@@ -26,7 +26,7 @@ export type MessagesLoader = () => Promise<{ default: Messages }>;
 /**
  * A key the catalog declares, or any other string.
  *
- * Many keys are built from the data — `site.surge.tagline`, `element.Fe.name`
+ * Many keys are built from the data — `site.isomers.tagline`, `element.Fe.name`
  * — so a row added before the catalogs have caught up must read as itself
  * rather than fail to compile.
  */
@@ -51,7 +51,7 @@ export interface TranslateOptions {
 export interface MessageCatalogOptions<TKey extends string> {
   /**
    * The name the page knows the catalog by, unique on the page, e.g.
-   * `react-cheminfo` or `surge.cheminfo.org`.
+   * `react-cheminfo` or `isomers.cheminfo.org`.
    */
   id: string;
   /** The GitHub repository the files live in, written `owner/repo`. */

package/src/i18n/vite/localeCatalog.ts

@@ -38,7 +38,7 @@ import { DEFAULT_LANGUAGE, LANGUAGES, MessageCatalog } from '../core/index.ts';
 export interface LocaleCatalogSource {
   /**
    * The name the page knows the catalog by, which is the site's host, e.g.
-   * `surge.cheminfo.org`. A translator's edit is routed back to the right
+   * `isomers.cheminfo.org`. A translator's edit is routed back to the right
    * repository with it, so the build and the page must agree on it.
    */
   id: string;

package/src/ir/core/index.ts

@@ -50,7 +50,11 @@ export {
   fittedTo,
   fullDomain,
 } from './irDomain.ts';
-export type { IrEditorHandle, ZoomToBandOptions } from './irEditorApi.ts';
+export type {
+  IrEditorHandle,
+  IrPlotClick,
+  ZoomToBandOptions,
+} from './irEditorApi.ts';
 export {
   ABSORBANCE_DECIMALS,
   INTENSITY_DIGITS,
@@ -129,5 +133,5 @@ export {
 } from './spectrumJcamp.ts';
 export type { ToIrSpectrumOptions } from './toIrSpectrum.ts';
 export { toIrSpectra, toIrSpectrum } from './toIrSpectrum.ts';
-export type { IrSidePanelId } from './irSidePanels.ts';
+export type { IrPanelId, IrSidePanelId } from './irSidePanels.ts';
 export { irSidePanels } from './irSidePanels.ts';

package/src/ir/core/irEditorApi.ts

@@ -42,3 +42,16 @@ export interface IrEditorHandle {
   /** Point the panels at one spectrum, or at none. */
   selectSpectrum: (id: string | null) => void;
 }
+
+/**
+ * A click on the plot, as the viewer tells its host about it.
+ *
+ * A click is a press let go over the plot without travelling: the end of a
+ * zoom drag is never one, and a click on the axis labels is not reported.
+ */
+export interface IrPlotClick {
+  /** Where it landed on the horizontal axis, in cm⁻¹ — a Raman shift for Raman. */
+  wavenumber: number;
+  /** Identity of the spectrum selected when it was made, `null` for none. */
+  spectrumId: string | null;
+}

package/src/ir/core/irReducer.ts

@@ -13,7 +13,7 @@
  * closed.
  */
 
-import type { IrSidePanelId } from './irSidePanels.ts';
+import type { IrPanelId } from './irSidePanels.ts';
 import type { IrDomain, IrSpectrum } from './irSpectrum.ts';
 import type { IrSettings, IrState, IrTool, PartialIrState } from './irState.ts';
 import { isIrWindow, mergeIrSettings } from './irState.ts';
@@ -30,7 +30,7 @@ export type IrAction =
   | { type: 'setDomain'; domain: IrDomain }
   | { type: 'resetDomain' }
   | { type: 'setTool'; tool: IrTool }
-  | { type: 'togglePanel'; panelId: IrSidePanelId }
+  | { type: 'togglePanel'; panelId: IrPanelId }
   | { type: 'setError'; error: string | null }
   | { type: 'setSettings'; settings: Partial<IrSettings> }
   | { type: 'loadState'; state: PartialIrState }

package/src/ir/core/irSidePanels.ts

@@ -16,5 +16,12 @@ export const irSidePanels = [
   icon: ActivityBarItemProps['icon'];
 }>;
 
-/** Identity of one of the panels the activity bar offers. */
+/** Identity of one of the panels the viewer offers of its own. */
 export type IrSidePanelId = (typeof irSidePanels)[number]['id'];
+
+/**
+ * Identity of any panel the side can hold: one of the viewer's own, or one a
+ * host added to them. Still a union with the viewer's own ids, so those keep
+ * autocompleting where a plain `string` would swallow them.
+ */
+export type IrPanelId = IrSidePanelId | (string & Record<never, never>);

package/src/ir/core/irState.ts

@@ -13,7 +13,7 @@
  * a stale band is then impossible rather than merely unlikely.
  */
 
-import type { IrSidePanelId } from './irSidePanels.ts';
+import type { IrPanelId, IrSidePanelId } from './irSidePanels.ts';
 import type { IrDomain, IrMode, IrSpectrum } from './irSpectrum.ts';
 import type { IrTechnique } from './irTechnique.ts';
 import { defaultIrMode, irModeFor, offersIrMode } from './irTechnique.ts';
@@ -42,8 +42,11 @@ export interface IrView {
   domain: IrDomain | null;
   /** Which tool a drag across the chart is running. */
   tool: IrTool;
-  /** The side panels that are open, in the order their icons are stacked. */
-  openPanelIds: IrSidePanelId[];
+  /**
+   * The side panels that are open: the viewer's own and any a host added. An id
+   * no panel on offer answers to opens nothing.
+   */
+  openPanelIds: IrPanelId[];
   /** Why the last action was refused, `null` as soon as one succeeds. */
   error: string | null;
 }
@@ -139,10 +142,10 @@ export interface CreateIrStateOptions {
    */
   settings?: Partial<IrSettings>;
   /**
-   * The panels open to begin with.
+   * The panels open to begin with, the viewer's own or a host's.
    * @default DEFAULT_SIDE_PANELS
    */
-  panelIds?: IrSidePanelId[];
+  panelIds?: readonly IrPanelId[];
 }
 
 /**