react-cheminfo 0.17.0 → 0.19.0

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"}

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

@@ -9,11 +9,13 @@
  * optional peers are not installed — which is what a site wanting only the
  * Tools menu does. Type-only re-exports are erased and so are safe.
  */
-export type { StructureEditorChange, StructureEditorMode, } from './EditorCanvas.tsx';
+export type { StructureEditorChange, StructureEditorMode, StructureEditorMoleculeChange, StructureEditorReactionChange, } from './editorChange.ts';
 export type { StructureLabels, StructureProps } from './Structure.tsx';
 export { Structure } from './Structure.tsx';
 export type { StructureEditorProps } from './StructureEditor.tsx';
 export { StructureEditor } from './StructureEditor.tsx';
+export type { StructureEditorHelpProps } from './StructureEditorHelp.tsx';
+export { StructureEditorHelp } from './StructureEditorHelp.tsx';
 export type { ToolbarFloorOptions } from './useToolbarFloor.ts';
 export { useToolbarFloor } from './useToolbarFloor.ts';
 //# sourceMappingURL=index.d.ts.map

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;;;;;;;;;;GAUG;AAEH,YAAY,EACV,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,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,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;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,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/structure/ui/index.js

@@ -11,5 +11,6 @@
  */
 export { Structure } from "./Structure.js";
 export { StructureEditor } from "./StructureEditor.js";
+export { StructureEditorHelp } from "./StructureEditorHelp.js";
 export { useToolbarFloor } from "./useToolbarFloor.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;;;;;;;;;;GAUG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AASH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useToolbarFloor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,0CAA0C;AAC1C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,mBAAwB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAiDlC"}
+{"version":3,"file":"useToolbarFloor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,0CAA0C;AAC1C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,mBAAwB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAyBlC"}

package/lib/structure/ui/useToolbarFloor.js

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useRef } from 'react';
 import { toolbarFloorHeight } from "../core/toolbarFloor.js";
+import { watchToolbar } from "./watchToolbar.js";
 /**
  * Give an editor's container a minimum height that shows the whole toolbar.
  *
@@ -16,18 +17,11 @@ export function useToolbarFloor(options = {}) {
         const container = containerRef.current;
         if (container === null)
             return;
-        let toolbar = null;
-        let size = null;
-        const attach = () => {
-            const found = findToolbar(container);
-            if (found === null)
-                return;
-            size?.disconnect();
-            toolbar = found;
-            size = new ResizeObserver(() => {
+        return watchToolbar(container, (toolbar) => {
+            const size = new ResizeObserver(() => {
                 // offsetHeight, because a dialog opens under a scaling transform and a
                 // measured rectangle would be that of the half drawn toolbar.
-                const height = found.offsetHeight;
+                const height = toolbar.offsetHeight;
                 // Zero is a toolbar being torn down or not yet laid out, never a
                 // toolbar that needs no room: writing the fallback for it would undo a
                 // correct floor and leave the palette cut off.
@@ -35,43 +29,10 @@ export function useToolbarFloor(options = {}) {
                     return;
                 container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
             });
-            size.observe(found);
-        };
-        // The editor is imported lazily and builds itself asynchronously, so it is
-        // almost never there on the first look, and how long it takes is a cold
-        // module graph and a network away from anything this code can predict. So
-        // the arrival is watched for rather than waited out: a deadline that
-        // expires leaves the toolbar cut off for the life of the page, with
-        // nothing on screen to say why.
-        const arrivals = new MutationObserver(() => {
-            if (toolbar?.isConnected === true)
-                return;
-            attach();
+            size.observe(toolbar);
+            return () => size.disconnect();
         });
-        arrivals.observe(container, { childList: true, subtree: true });
-        attach();
-        return () => {
-            arrivals.disconnect();
-            size?.disconnect();
-        };
     }, [minHeight, revision]);
     return containerRef;
 }
-/**
- * Find the toolbar canvas of the editor.
- *
- * The editor builds itself inside a shadow root and puts the toolbar there as
- * a direct child, the drawing canvas being nested deeper.
- * @param container - The element wrapping the editor.
- * @returns The toolbar canvas, or null while the editor has not drawn one.
- */
-function findToolbar(container) {
-    for (const element of container.querySelectorAll('*')) {
-        for (const child of element.shadowRoot?.children ?? []) {
-            if (child instanceof HTMLCanvasElement)
-                return child;
-        }
-    }
-    return null;
-}
 //# sourceMappingURL=useToolbarFloor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useToolbarFloor.js","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAkB7D;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,UAA+B,EAAE;IAEjC,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAE/B,IAAI,OAAO,GAA6B,IAAI,CAAC;QAC7C,IAAI,IAAI,GAA0B,IAAI,CAAC;QAEvC,MAAM,MAAM,GAAG,GAAS,EAAE;YACxB,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,KAAK,KAAK,IAAI;gBAAE,OAAO;YAC3B,IAAI,EAAE,UAAU,EAAE,CAAC;YACnB,OAAO,GAAG,KAAK,CAAC;YAChB,IAAI,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC7B,uEAAuE;gBACvE,8DAA8D;gBAC9D,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;gBAClC,iEAAiE;gBACjE,uEAAuE;gBACvE,+CAA+C;gBAC/C,IAAI,MAAM,KAAK,CAAC;oBAAE,OAAO;gBACzB,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,kBAAkB,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC;YAC3E,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,2EAA2E;QAC3E,wEAAwE;QACxE,0EAA0E;QAC1E,qEAAqE;QACrE,oEAAoE;QACpE,gCAAgC;QAChC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,IAAI,OAAO,EAAE,WAAW,KAAK,IAAI;gBAAE,OAAO;YAC1C,MAAM,EAAE,CAAC;QACX,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAChE,MAAM,EAAE,CAAC;QAET,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,IAAI,EAAE,UAAU,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,SAAsB;IACzC,KAAK,MAAM,OAAO,IAAI,SAAS,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;QACtD,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,EAAE,CAAC;YACvD,IAAI,KAAK,YAAY,iBAAiB;gBAAE,OAAO,KAAK,CAAC;QACvD,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"useToolbarFloor.js","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkBjD;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,UAA+B,EAAE;IAEjC,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAE/B,OAAO,YAAY,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE;YACzC,MAAM,IAAI,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBACnC,uEAAuE;gBACvE,8DAA8D;gBAC9D,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;gBACpC,iEAAiE;gBACjE,uEAAuE;gBACvE,+CAA+C;gBAC/C,IAAI,MAAM,KAAK,CAAC;oBAAE,OAAO;gBACzB,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,kBAAkB,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC;YAC3E,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACtB,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,YAAY,CAAC;AACtB,CAAC"}

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

@@ -0,0 +1,28 @@
+import type { RefObject } from 'react';
+import type { EditorToolbarButtonBox } from '../core/editorToolbarGeometry.ts';
+/** The toolbar button the pointer rests on, or last rested on. */
+export interface ToolbarHover {
+    /** The button's index in `EDITOR_TOOLBAR_BUTTONS`. */
+    button: number;
+    /** Where the button is drawn, relative to the container's padding box. */
+    box: EditorToolbarButtonBox;
+    /**
+     * Whether its tooltip is showing. The last button is kept after the pointer
+     * leaves, so a closing tooltip fades out with its text rather than empty.
+     */
+    open: boolean;
+}
+/**
+ * Follow the pointer over the editor's toolbar.
+ *
+ * The first button waits for the pointer to rest, so crossing the toolbar on
+ * the way to the drawing opens nothing; once one is showing, the next follows
+ * at once. Pressing a button hides its tooltip until the pointer moves on,
+ * since whoever pressed it no longer needs telling. Touch is ignored: a finger
+ * has no hover, and a tooltip opened by a tap would cover the canvas.
+ * @param containerRef - The element wrapping the editor, positioned so the
+ * returned box can be laid over the button.
+ * @returns The button under the pointer, or null before any has been hovered.
+ */
+export declare function useToolbarHover(containerRef: RefObject<HTMLElement | null>): ToolbarHover | null;
+//# sourceMappingURL=useToolbarHover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarHover.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarHover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAQ/E,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,GAAG,EAAE,sBAAsB,CAAC;IAC5B;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC1C,YAAY,GAAG,IAAI,CA4ErB"}

package/lib/structure/ui/useToolbarHover.js

@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+import { editorToolbarButtonAt, editorToolbarButtonBox, } from "../core/editorToolbarGeometry.js";
+import { watchToolbar } from "./watchToolbar.js";
+/**
+ * Follow the pointer over the editor's toolbar.
+ *
+ * The first button waits for the pointer to rest, so crossing the toolbar on
+ * the way to the drawing opens nothing; once one is showing, the next follows
+ * at once. Pressing a button hides its tooltip until the pointer moves on,
+ * since whoever pressed it no longer needs telling. Touch is ignored: a finger
+ * has no hover, and a tooltip opened by a tap would cover the canvas.
+ * @param containerRef - The element wrapping the editor, positioned so the
+ * returned box can be laid over the button.
+ * @returns The button under the pointer, or null before any has been hovered.
+ */
+export function useToolbarHover(containerRef) {
+    const [hover, setHover] = useState(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        let timer;
+        let current = -1;
+        let pressed = -1;
+        let open = false;
+        const show = (toolbar, button) => {
+            open = true;
+            setHover({ button, box: boxIn(container, toolbar, button), open });
+        };
+        const hide = () => {
+            clearTimeout(timer);
+            if (!open)
+                return;
+            open = false;
+            setHover((previous) => previous === null ? null : { ...previous, open: false });
+        };
+        const onLeave = () => {
+            current = -1;
+            pressed = -1;
+            hide();
+        };
+        const onDown = () => {
+            pressed = current;
+            hide();
+        };
+        const stop = watchToolbar(container, (toolbar) => {
+            const onMove = (event) => {
+                if (event.pointerType === 'touch')
+                    return;
+                const button = editorToolbarButtonAt(event.offsetX, event.offsetY, toolbar.offsetHeight);
+                if (button === current)
+                    return;
+                current = button;
+                if (button !== pressed)
+                    pressed = -1;
+                if (button === -1 || button === pressed) {
+                    hide();
+                    return;
+                }
+                clearTimeout(timer);
+                if (open) {
+                    show(toolbar, button);
+                    return;
+                }
+                timer = setTimeout(() => show(toolbar, button), OPEN_DELAY);
+            };
+            toolbar.addEventListener('pointermove', onMove);
+            toolbar.addEventListener('pointerleave', onLeave);
+            toolbar.addEventListener('pointerdown', onDown);
+            return () => {
+                toolbar.removeEventListener('pointermove', onMove);
+                toolbar.removeEventListener('pointerleave', onLeave);
+                toolbar.removeEventListener('pointerdown', onDown);
+                onLeave();
+            };
+        });
+        return () => {
+            stop();
+            clearTimeout(timer);
+        };
+    }, [containerRef]);
+    return hover;
+}
+// Long enough that sweeping the pointer across the toolbar opens nothing.
+const OPEN_DELAY = 250;
+function boxIn(container, toolbar, button) {
+    const box = editorToolbarButtonBox(button, toolbar.offsetHeight);
+    const toolbarRect = toolbar.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    return {
+        ...box,
+        left: toolbarRect.left - containerRect.left - container.clientLeft + box.left,
+        top: toolbarRect.top - containerRect.top - container.clientTop + box.top,
+    };
+}
+//# sourceMappingURL=useToolbarHover.js.map

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * Run something against the editor's toolbar canvas as soon as it exists, and
+ * again against each new one the editor builds.
+ *
+ * The editor is imported lazily and builds itself asynchronously, so the
+ * toolbar is almost never there on the first look, and how long it takes is a
+ * cold module graph and a network away from anything this code can predict.
+ * So its arrival is watched for rather than waited out: a deadline that
+ * expires leaves whatever depends on the toolbar missing for the life of the
+ * page, with nothing on screen to say why.
+ * @param container - The element wrapping the editor.
+ * @param onToolbar - Called with each toolbar found; what it returns is called
+ * when that toolbar is replaced or the watch ends.
+ * @returns A function ending the watch.
+ */
+export declare function watchToolbar(container: HTMLElement, onToolbar: (toolbar: HTMLCanvasElement) => () => void): () => void;
+//# sourceMappingURL=watchToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"watchToolbar.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/watchToolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,MAAM,IAAI,GACpD,MAAM,IAAI,CAuBZ"}

package/lib/structure/ui/watchToolbar.js

@@ -0,0 +1,56 @@
+/**
+ * Run something against the editor's toolbar canvas as soon as it exists, and
+ * again against each new one the editor builds.
+ *
+ * The editor is imported lazily and builds itself asynchronously, so the
+ * toolbar is almost never there on the first look, and how long it takes is a
+ * cold module graph and a network away from anything this code can predict.
+ * So its arrival is watched for rather than waited out: a deadline that
+ * expires leaves whatever depends on the toolbar missing for the life of the
+ * page, with nothing on screen to say why.
+ * @param container - The element wrapping the editor.
+ * @param onToolbar - Called with each toolbar found; what it returns is called
+ * when that toolbar is replaced or the watch ends.
+ * @returns A function ending the watch.
+ */
+export function watchToolbar(container, onToolbar) {
+    let toolbar = null;
+    let release = null;
+    const attach = () => {
+        const found = findToolbar(container);
+        if (found === null)
+            return;
+        release?.();
+        toolbar = found;
+        release = onToolbar(found);
+    };
+    const arrivals = new MutationObserver(() => {
+        if (toolbar?.isConnected === true)
+            return;
+        attach();
+    });
+    arrivals.observe(container, { childList: true, subtree: true });
+    attach();
+    return () => {
+        arrivals.disconnect();
+        release?.();
+    };
+}
+/**
+ * Find the toolbar canvas of the editor.
+ *
+ * The editor builds itself inside a shadow root and puts the toolbar there as
+ * a direct child, the drawing canvas being nested deeper.
+ * @param container - The element wrapping the editor.
+ * @returns The toolbar canvas, or null while the editor has not drawn one.
+ */
+function findToolbar(container) {
+    for (const element of container.querySelectorAll('*')) {
+        for (const child of element.shadowRoot?.children ?? []) {
+            if (child instanceof HTMLCanvasElement)
+                return child;
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=watchToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"watchToolbar.js","sourceRoot":"","sources":["../../../src/structure/ui/watchToolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,YAAY,CAC1B,SAAsB,EACtB,SAAqD;IAErD,IAAI,OAAO,GAA6B,IAAI,CAAC;IAC7C,IAAI,OAAO,GAAwB,IAAI,CAAC;IAExC,MAAM,MAAM,GAAG,GAAS,EAAE;QACxB,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO;QAC3B,OAAO,EAAE,EAAE,CAAC;QACZ,OAAO,GAAG,KAAK,CAAC;QAChB,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QACzC,IAAI,OAAO,EAAE,WAAW,KAAK,IAAI;YAAE,OAAO;QAC1C,MAAM,EAAE,CAAC;IACX,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,MAAM,EAAE,CAAC;IAET,OAAO,GAAG,EAAE;QACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,SAAsB;IACzC,KAAK,MAAM,OAAO,IAAI,SAAS,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;QACtD,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,EAAE,CAAC;YACvD,IAAI,KAAK,YAAY,iBAAiB;gBAAE,OAAO,KAAK,CAAC;QACvD,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.17.0",
+  "version": "0.19.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",