react-cheminfo 0.17.0 → 0.19.0

package/lib/structure/core/editorToolbarGeometry.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Where the openchemlib editor draws each toolbar button.
+ *
+ * The toolbar is two columns of seventeen square buttons inside a thin border,
+ * numbered down the first column and then down the second, as
+ * `EDITOR_TOOLBAR_BUTTONS` lists them. Every length here is in CSS pixels at
+ * the size openchemlib draws the toolbar, and is scaled by the height the
+ * toolbar is measured at, so a toolbar drawn larger still maps correctly.
+ */
+/** Buttons in one column of the toolbar. */
+export declare const EDITOR_TOOLBAR_ROWS = 17;
+/** Columns of the toolbar. */
+export declare const EDITOR_TOOLBAR_COLUMNS = 2;
+/** Where a button is drawn, in CSS pixels from the toolbar's top left corner. */
+export interface EditorToolbarButtonBox {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * The button under a point of the toolbar.
+ * @param x - Distance from the toolbar's left edge, in CSS pixels.
+ * @param y - Distance from the toolbar's top edge, in CSS pixels.
+ * @param toolbarHeight - Height the toolbar is measured at, in CSS pixels.
+ * @returns The button's index, or -1 when the point is on no button.
+ */
+export declare function editorToolbarButtonAt(x: number, y: number, toolbarHeight: number): number;
+/**
+ * Where a button is drawn.
+ * @param button - The button's index.
+ * @param toolbarHeight - Height the toolbar is measured at, in CSS pixels.
+ * @returns The button's box, relative to the toolbar.
+ */
+export declare function editorToolbarButtonBox(button: number, toolbarHeight: number): EditorToolbarButtonBox;
+//# sourceMappingURL=editorToolbarGeometry.d.ts.map

package/lib/structure/core/editorToolbarGeometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorToolbarGeometry.d.ts","sourceRoot":"","sources":["../../../src/structure/core/editorToolbarGeometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,4CAA4C;AAC5C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,8BAA8B;AAC9B,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAWxC,iFAAiF;AACjF,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,aAAa,EAAE,MAAM,GACpB,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,GACpB,sBAAsB,CAUxB"}

package/lib/structure/core/editorToolbarGeometry.js

@@ -0,0 +1,61 @@
+/**
+ * Where the openchemlib editor draws each toolbar button.
+ *
+ * The toolbar is two columns of seventeen square buttons inside a thin border,
+ * numbered down the first column and then down the second, as
+ * `EDITOR_TOOLBAR_BUTTONS` lists them. Every length here is in CSS pixels at
+ * the size openchemlib draws the toolbar, and is scaled by the height the
+ * toolbar is measured at, so a toolbar drawn larger still maps correctly.
+ */
+/** Buttons in one column of the toolbar. */
+export const EDITOR_TOOLBAR_ROWS = 17;
+/** Columns of the toolbar. */
+export const EDITOR_TOOLBAR_COLUMNS = 2;
+/** Side of one button, in CSS pixels. */
+const BUTTON_SIZE = 21;
+/** Border around the buttons, in CSS pixels. */
+const BORDER = 2;
+/** Height of the toolbar as openchemlib draws it, in CSS pixels. */
+const DRAWN_HEIGHT = EDITOR_TOOLBAR_ROWS * BUTTON_SIZE + 2 * BORDER;
+/**
+ * The button under a point of the toolbar.
+ * @param x - Distance from the toolbar's left edge, in CSS pixels.
+ * @param y - Distance from the toolbar's top edge, in CSS pixels.
+ * @param toolbarHeight - Height the toolbar is measured at, in CSS pixels.
+ * @returns The button's index, or -1 when the point is on no button.
+ */
+export function editorToolbarButtonAt(x, y, toolbarHeight) {
+    const scale = scaleOf(toolbarHeight);
+    if (scale === 0)
+        return -1;
+    const column = Math.floor((x / scale - BORDER) / BUTTON_SIZE);
+    const row = Math.floor((y / scale - BORDER) / BUTTON_SIZE);
+    if (column < 0 || column >= EDITOR_TOOLBAR_COLUMNS)
+        return -1;
+    if (row < 0 || row >= EDITOR_TOOLBAR_ROWS)
+        return -1;
+    return column * EDITOR_TOOLBAR_ROWS + row;
+}
+/**
+ * Where a button is drawn.
+ * @param button - The button's index.
+ * @param toolbarHeight - Height the toolbar is measured at, in CSS pixels.
+ * @returns The button's box, relative to the toolbar.
+ */
+export function editorToolbarButtonBox(button, toolbarHeight) {
+    const scale = scaleOf(toolbarHeight);
+    const column = Math.floor(button / EDITOR_TOOLBAR_ROWS);
+    const row = button % EDITOR_TOOLBAR_ROWS;
+    return {
+        left: (BORDER + column * BUTTON_SIZE) * scale,
+        top: (BORDER + row * BUTTON_SIZE) * scale,
+        width: BUTTON_SIZE * scale,
+        height: BUTTON_SIZE * scale,
+    };
+}
+function scaleOf(toolbarHeight) {
+    return Number.isFinite(toolbarHeight) && toolbarHeight > 0
+        ? toolbarHeight / DRAWN_HEIGHT
+        : 0;
+}
+//# sourceMappingURL=editorToolbarGeometry.js.map

package/lib/structure/core/editorToolbarGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorToolbarGeometry.js","sourceRoot":"","sources":["../../../src/structure/core/editorToolbarGeometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,4CAA4C;AAC5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAEtC,8BAA8B;AAC9B,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC;AAExC,yCAAyC;AACzC,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,gDAAgD;AAChD,MAAM,MAAM,GAAG,CAAC,CAAC;AAEjB,oEAAoE;AACpE,MAAM,YAAY,GAAG,mBAAmB,GAAG,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC;AAUpE;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,CAAS,EACT,CAAS,EACT,aAAqB;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IACrC,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,CAAC,CAAC,CAAC;IAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC;IAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC;IAC3D,IAAI,MAAM,GAAG,CAAC,IAAI,MAAM,IAAI,sBAAsB;QAAE,OAAO,CAAC,CAAC,CAAC;IAC9D,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,mBAAmB;QAAE,OAAO,CAAC,CAAC,CAAC;IACrD,OAAO,MAAM,GAAG,mBAAmB,GAAG,GAAG,CAAC;AAC5C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CACpC,MAAc,EACd,aAAqB;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC,CAAC;IACxD,MAAM,GAAG,GAAG,MAAM,GAAG,mBAAmB,CAAC;IACzC,OAAO;QACL,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,GAAG,KAAK;QAC7C,GAAG,EAAE,CAAC,MAAM,GAAG,GAAG,GAAG,WAAW,CAAC,GAAG,KAAK;QACzC,KAAK,EAAE,WAAW,GAAG,KAAK;QAC1B,MAAM,EAAE,WAAW,GAAG,KAAK;KAC5B,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,aAAqB;IACpC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,aAAa,GAAG,CAAC;QACxD,CAAC,CAAC,aAAa,GAAG,YAAY;QAC9B,CAAC,CAAC,CAAC,CAAC;AACR,CAAC"}

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

@@ -1,5 +1,11 @@
 export type { AtomLabelPlacement, LabelledMolecule } from './atomLabels.ts';
 export { applyAtomLabels, customAtomLabel } from './atomLabels.ts';
+export type { EditorGesture, EditorGuideKey, EditorGuideLink, EditorGuideOptions, EditorGuideScope, EditorGuideSection, } from './editorGuide.ts';
+export { STRUCTURE_EDITOR_DOCS, STRUCTURE_EDITOR_GUIDE, editorGuideSections, editorKeyLabel, } from './editorGuide.ts';
+export type { EditorToolbarAvailability, EditorToolbarButton, } from './editorToolbar.ts';
+export { EDITOR_TOOLBAR_BUTTONS, isEditorToolbarButtonAvailable, } from './editorToolbar.ts';
+export type { EditorToolbarButtonBox } from './editorToolbarGeometry.ts';
+export { EDITOR_TOOLBAR_COLUMNS, EDITOR_TOOLBAR_ROWS, editorToolbarButtonAt, editorToolbarButtonBox, } from './editorToolbarGeometry.ts';
 export type { EditorLine, EditorValue } from './editorValue.ts';
 export type { IdCodeValue } from './editorValue.ts';
 export { isEmptyIdCode, splitEditorValue, splitIdCode } from './editorValue.ts';

package/lib/structure/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,YAAY,EACV,aAAa,EACb,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/structure/core/index.js

@@ -1,4 +1,7 @@
 export { applyAtomLabels, customAtomLabel } from "./atomLabels.js";
+export { STRUCTURE_EDITOR_DOCS, STRUCTURE_EDITOR_GUIDE, editorGuideSections, editorKeyLabel, } from "./editorGuide.js";
+export { EDITOR_TOOLBAR_BUTTONS, isEditorToolbarButtonAvailable, } from "./editorToolbar.js";
+export { EDITOR_TOOLBAR_COLUMNS, EDITOR_TOOLBAR_ROWS, editorToolbarButtonAt, editorToolbarButtonBox, } from "./editorToolbarGeometry.js";
 export { isEmptyIdCode, splitEditorValue, splitIdCode } from "./editorValue.js";
 export { fragmentQuery, sameFragmentQuery } from "./fragmentQuery.js";
 export { classifyMolfile, looksLikeMolfile, molfileAtomCount, } from "./molfile.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGnE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASnE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAK1B,OAAO,EACL,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/structure/core/pendingCall.d.ts

@@ -0,0 +1,21 @@
+/** A call held back until its value has been still, which can be cut short. */
+export interface PendingCall<TValue> {
+    /**
+     * Hold a value back, replacing whichever one was waiting.
+     * @param value - The value to deliver.
+     * @param delay - How long to wait, in milliseconds; `0` or less delivers now.
+     * @param deliver - What the value is handed to.
+     */
+    push: (value: TValue, delay: number, deliver: (value: TValue) => void) => void;
+    /** Forget the value waiting, which is then never delivered. */
+    drop: () => void;
+    /** Deliver the value waiting now rather than when its delay runs out. */
+    flush: () => void;
+}
+/**
+ * A trailing debounce for one value at a time, whose waiting value can be
+ * delivered early or thrown away.
+ * @returns The pending call, holding nothing.
+ */
+export declare function createPendingCall<TValue>(): PendingCall<TValue>;
+//# sourceMappingURL=pendingCall.d.ts.map

package/lib/structure/core/pendingCall.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pendingCall.d.ts","sourceRoot":"","sources":["../../../src/structure/core/pendingCall.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,WAAW,WAAW,CAAC,MAAM;IACjC;;;;;OAKG;IACH,IAAI,EAAE,CACJ,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAC7B,IAAI,CAAC;IACV,+DAA+D;IAC/D,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,yEAAyE;IACzE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,CAAC,CAkC/D"}

package/lib/structure/core/pendingCall.js

@@ -0,0 +1,37 @@
+/**
+ * A trailing debounce for one value at a time, whose waiting value can be
+ * delivered early or thrown away.
+ * @returns The pending call, holding nothing.
+ */
+export function createPendingCall() {
+    let pending = null;
+    function drop() {
+        if (pending === null)
+            return;
+        clearTimeout(pending.timer);
+        pending = null;
+    }
+    return {
+        push(value, delay, deliver) {
+            drop();
+            if (delay <= 0) {
+                deliver(value);
+                return;
+            }
+            const timer = setTimeout(() => {
+                pending = null;
+                deliver(value);
+            }, delay);
+            pending = { value, deliver, timer };
+        },
+        drop,
+        flush() {
+            if (pending === null)
+                return;
+            const { value, deliver } = pending;
+            drop();
+            deliver(value);
+        },
+    };
+}
+//# sourceMappingURL=pendingCall.js.map

package/lib/structure/core/pendingCall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pendingCall.js","sourceRoot":"","sources":["../../../src/structure/core/pendingCall.ts"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,MAAM,UAAU,iBAAiB;IAC/B,IAAI,OAAO,GAIA,IAAI,CAAC;IAEhB,SAAS,IAAI;QACX,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,OAAO,GAAG,IAAI,CAAC;IACjB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO;YACxB,IAAI,EAAE,CAAC;YACP,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,OAAO,GAAG,IAAI,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,EAAE,KAAK,CAAC,CAAC;YACV,OAAO,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACtC,CAAC;QACD,IAAI;QACJ,KAAK;YACH,IAAI,OAAO,KAAK,IAAI;gBAAE,OAAO;YAC7B,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;YACnC,IAAI,EAAE,CAAC;YACP,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}

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":";AAUA,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAKtD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE;IACnC,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,mBAAoB,CAAC,CAAC;IAClD,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC;AAC1C,CAAC,CAAC,CAAC;AAwEH;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,QAAQ,EACtB,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,SAAS,GAAG,GAAG,EACf,IAAI,GAAG,UAAU,EACjB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,KAAK,GACN,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAEhE,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,YAE7C,MAAC,QAAQ,IAAC,QAAQ,EAAE,cAAK,KAAK,EAAE,aAAa,yCAA2B,aACtE,KAAC,YAAY,IAEX,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IALL,QAAQ,CAMb,EACD,IAAI,CAAC,CAAC,CAAC,CACN,8BACE,KAAC,cAAc,IAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAI,EAC1D,KAAC,gBAAgB,IACf,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,IACD,CACJ,CAAC,CAAC,CAAC,IAAI,IACC,GACP,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,SAAS,YAAY,CACnB,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;AAED;;;;;;GAMG;AACH,MAAM,UAAU,GAAkB;IAChC,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,EAAE;IACnC,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,MAAM;CACnB,CAAC;AAEF,kEAAkE;AAClE,MAAM,aAAa,GAAkB;IACnC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,EAAE;CACb,CAAC"}

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