react-cheminfo 0.2.0 → 0.4.0

package/lib/structure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"structure.d.ts","sourceRoot":"","sources":["../src/structure.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC"}

package/lib/structure.js

@@ -0,0 +1,3 @@
+export * from "./structure/core/index.js";
+export * from "./structure/ui/index.js";
+//# sourceMappingURL=structure.js.map

package/lib/structure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"structure.js","sourceRoot":"","sources":["../src/structure.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC"}

package/lib/ui.d.ts

@@ -1,4 +1,17 @@
+export * from './capsule/ui/index.ts';
+export * from './chrome/ui/index.ts';
 export * from './citation/ui/index.ts';
+export * from './clipboard/ui/index.ts';
+export * from './color/ui/index.ts';
+export * from './credits/ui/index.ts';
+export * from './delimited/ui/index.ts';
+export * from './disclosure/ui/index.ts';
 export * from './ecosystem/ui/index.ts';
+export * from './error/ui/index.ts';
+export * from './help/ui/index.ts';
+export * from './hooks/ui/index.ts';
+export * from './pedagogy/ui/index.ts';
+export * from './share/ui/index.ts';
 export * from './shared/ui/index.ts';
+export * from './state/ui/index.ts';
 //# sourceMappingURL=ui.d.ts.map

package/lib/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/lib/ui.js

@@ -1,4 +1,17 @@
+export * from "./capsule/ui/index.js";
+export * from "./chrome/ui/index.js";
 export * from "./citation/ui/index.js";
+export * from "./clipboard/ui/index.js";
+export * from "./color/ui/index.js";
+export * from "./credits/ui/index.js";
+export * from "./delimited/ui/index.js";
+export * from "./disclosure/ui/index.js";
 export * from "./ecosystem/ui/index.js";
+export * from "./error/ui/index.js";
+export * from "./help/ui/index.js";
+export * from "./hooks/ui/index.js";
+export * from "./pedagogy/ui/index.js";
+export * from "./share/ui/index.js";
 export * from "./shared/ui/index.js";
+export * from "./state/ui/index.js";
 //# sourceMappingURL=ui.js.map

package/lib/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/lib/worker/core/errors.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Rejection of a request nobody is waiting for any more: its signal was
+ * aborted, or the channel it was posted on was terminated.
+ *
+ * It is the normal outcome of dragging a slider or clicking through a list, so
+ * a caller catches it and draws nothing rather than reporting a failure.
+ */
+export declare class CancelledRequestError extends Error {
+    name: string;
+}
+/** Rejection of a request that outlived its budget and was given up on. */
+export declare class RequestTimeoutError extends Error {
+    name: string;
+}
+//# sourceMappingURL=errors.d.ts.map

package/lib/worker/core/errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/worker/core/errors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,qBAAa,qBAAsB,SAAQ,KAAK;IACrC,IAAI,SAA2B;CACzC;AAED,2EAA2E;AAC3E,qBAAa,mBAAoB,SAAQ,KAAK;IACnC,IAAI,SAAyB;CACvC"}

package/lib/worker/core/errors.js

@@ -0,0 +1,15 @@
+/**
+ * Rejection of a request nobody is waiting for any more: its signal was
+ * aborted, or the channel it was posted on was terminated.
+ *
+ * It is the normal outcome of dragging a slider or clicking through a list, so
+ * a caller catches it and draws nothing rather than reporting a failure.
+ */
+export class CancelledRequestError extends Error {
+    name = 'CancelledRequestError';
+}
+/** Rejection of a request that outlived its budget and was given up on. */
+export class RequestTimeoutError extends Error {
+    name = 'RequestTimeoutError';
+}
+//# sourceMappingURL=errors.js.map

package/lib/worker/core/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","sourceRoot":"","sources":["../../../src/worker/core/errors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,KAAK;IACrC,IAAI,GAAG,uBAAuB,CAAC;CACzC;AAED,2EAA2E;AAC3E,MAAM,OAAO,mBAAoB,SAAQ,KAAK;IACnC,IAAI,GAAG,qBAAqB,CAAC;CACvC"}

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

@@ -0,0 +1,5 @@
+export { CancelledRequestError, RequestTimeoutError } from './errors.ts';
+export type { WorkerLike } from './messages.ts';
+export type { WorkerChannel, WorkerChannelOptions, WorkerRequestOptions, } from './workerChannel.ts';
+export { createWorkerChannel } from './workerChannel.ts';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/worker/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/worker/core/index.js

@@ -0,0 +1,3 @@
+export { CancelledRequestError, RequestTimeoutError } from "./errors.js";
+export { createWorkerChannel } from "./workerChannel.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/worker/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/worker/core/messages.d.ts

@@ -0,0 +1,48 @@
+/** What a channel posts to its worker: one job, tagged with an identifier. */
+export interface WorkerRequestMessage<TRequest> {
+    /** Serial number of the request, which the answer must echo. */
+    id: number;
+    /** The job itself, exactly as the caller wrote it. */
+    request: TRequest;
+}
+/**
+ * What a worker posts back. An `Error` does not survive the boundary, so a
+ * failure travels as its message and becomes an `Error` again on this side.
+ */
+export type WorkerResponseMessage<TResponse> = {
+    id: number;
+    ok: true;
+    response: TResponse;
+} | {
+    id: number;
+    ok: false;
+    message: string;
+};
+/**
+ * As much of a `Worker` as a channel uses. A real `Worker` satisfies it, and so
+ * does anything else that speaks the same three calls — which is what lets the
+ * scheduling be unit-tested without a thread.
+ */
+export interface WorkerLike {
+    /** Send one message to the worker. */
+    postMessage(message: unknown): void;
+    /** Listen to what the worker answers, or to its failing outright. */
+    addEventListener(type: 'message' | 'error', listener: (event: WorkerEventLike) => void): void;
+    /** Stop the worker; whatever it was doing is lost. */
+    terminate(): void;
+}
+/** As much of a worker event as a channel reads. */
+export interface WorkerEventLike {
+    /**
+     * The message the worker posted, before anything checks it against the
+     * protocol. Absent on an error event.
+     * @default undefined
+     */
+    readonly data?: unknown;
+    /**
+     * What went wrong, on an error event. Absent on a message event.
+     * @default undefined
+     */
+    readonly message?: string;
+}
+//# sourceMappingURL=messages.d.ts.map

package/lib/worker/core/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../src/worker/core/messages.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,MAAM,WAAW,oBAAoB,CAAC,QAAQ;IAC5C,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,OAAO,EAAE,QAAQ,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,CAAC,SAAS,IACvC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,GAC7C;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,sCAAsC;IACtC,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC,qEAAqE;IACrE,gBAAgB,CACd,IAAI,EAAE,SAAS,GAAG,OAAO,EACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,GACzC,IAAI,CAAC;IACR,sDAAsD;IACtD,SAAS,IAAI,IAAI,CAAC;CACnB;AAED,oDAAoD;AACpD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/lib/worker/core/messages.js

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

package/lib/worker/core/messages.js.map

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

package/lib/worker/core/workerChannel.d.ts

@@ -0,0 +1,69 @@
+import type { WorkerLike } from './messages.ts';
+/**
+ * Turn a worker into something a page can await.
+ *
+ * Several requests may be in flight at once; each one is tagged with an
+ * identifier the answer echoes, so replies are matched to callers whatever
+ * order they arrive in. A request that rejects — cancelled, timed out, or
+ * failed — drops out of the pending map at that moment, so a page that fires
+ * one job per keystroke never accumulates them.
+ *
+ * The worker is the caller's: the channel posts to it and terminates it when
+ * asked, but never creates one, which is what lets a site keep its own lazy
+ * construction and its own in-process fallback.
+ * @param worker - The worker to talk to, or anything that speaks its three calls.
+ * @param options - See {@link WorkerChannelOptions}.
+ * @returns The channel.
+ */
+export declare function createWorkerChannel<TRequest, TResponse>(worker: WorkerLike, options?: WorkerChannelOptions): WorkerChannel<TRequest, TResponse>;
+/** How a channel names itself and how long it waits. */
+export interface WorkerChannelOptions {
+    /**
+     * What the channel is called in the message of an error it raises, e.g.
+     * `conformers`.
+     * @default 'worker'
+     */
+    name?: string;
+    /**
+     * Milliseconds a request waits before it is given up on, when the call passes
+     * no budget of its own. A value that is not a positive finite number falls
+     * back to two minutes.
+     * @default 120000
+     */
+    defaultTimeoutMs?: number;
+}
+/** What one call may ask of the channel. */
+export interface WorkerRequestOptions {
+    /**
+     * Abort the call. Its promise then rejects with a
+     * {@link CancelledRequestError}; the worker itself is left alone, since a job
+     * already running cannot be interrupted from outside.
+     * @default undefined
+     */
+    signal?: AbortSignal;
+    /**
+     * Milliseconds this call alone waits, overriding the channel default —
+     * a calculation budget is often a user preference. A value that is not a
+     * positive finite number falls back to the channel default.
+     * @default the channel's defaultTimeoutMs
+     */
+    timeoutMs?: number;
+}
+/** A channel to one worker, over which several jobs may be in flight. */
+export interface WorkerChannel<TRequest, TResponse> {
+    /**
+     * Post one job and wait for the answer that carries its identifier.
+     * @param payload - The job.
+     * @param options - Per-call signal and budget.
+     * @returns What the worker answered.
+     */
+    request: (payload: TRequest, options?: WorkerRequestOptions) => Promise<TResponse>;
+    /** How many requests are still waiting for an answer. */
+    readonly pendingCount: number;
+    /**
+     * Terminate the worker, rejecting everything still waiting with a
+     * {@link CancelledRequestError}. The channel accepts no further request.
+     */
+    terminate: () => void;
+}
+//# sourceMappingURL=workerChannel.d.ts.map

package/lib/worker/core/workerChannel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workerChannel.d.ts","sourceRoot":"","sources":["../../../src/worker/core/workerChannel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,EAGX,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,SAAS,EACrD,MAAM,EAAE,UAAU,EAClB,OAAO,GAAE,oBAAyB,GACjC,aAAa,CAAC,QAAQ,EAAE,SAAS,CAAC,CA0GpC;AAED,wDAAwD;AACxD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yEAAyE;AACzE,MAAM,WAAW,aAAa,CAAC,QAAQ,EAAE,SAAS;IAChD;;;;;OAKG;IACH,OAAO,EAAE,CACP,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,oBAAoB,KAC3B,OAAO,CAAC,SAAS,CAAC,CAAC;IACxB,yDAAyD;IACzD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/lib/worker/core/workerChannel.js

@@ -0,0 +1,121 @@
+import { CancelledRequestError, RequestTimeoutError } from "./errors.js";
+/**
+ * Turn a worker into something a page can await.
+ *
+ * Several requests may be in flight at once; each one is tagged with an
+ * identifier the answer echoes, so replies are matched to callers whatever
+ * order they arrive in. A request that rejects — cancelled, timed out, or
+ * failed — drops out of the pending map at that moment, so a page that fires
+ * one job per keystroke never accumulates them.
+ *
+ * The worker is the caller's: the channel posts to it and terminates it when
+ * asked, but never creates one, which is what lets a site keep its own lazy
+ * construction and its own in-process fallback.
+ * @param worker - The worker to talk to, or anything that speaks its three calls.
+ * @param options - See {@link WorkerChannelOptions}.
+ * @returns The channel.
+ */
+export function createWorkerChannel(worker, options = {}) {
+    const name = options.name ?? 'worker';
+    const defaultTimeoutMs = positiveMilliseconds(options.defaultTimeoutMs, DEFAULT_TIMEOUT_MS);
+    const pending = new Map();
+    let nextId = 0;
+    let terminated = false;
+    function settle(id) {
+        const entry = pending.get(id);
+        if (entry === undefined)
+            return undefined;
+        pending.delete(id);
+        entry.dispose();
+        return entry;
+    }
+    function rejectAll(error) {
+        for (const entry of pending.values()) {
+            entry.dispose();
+            entry.reject(error);
+        }
+        pending.clear();
+    }
+    worker.addEventListener('message', (event) => {
+        const message = event.data;
+        if (!isResponseMessage(message))
+            return;
+        const entry = settle(message.id);
+        if (entry === undefined)
+            return;
+        if (message.ok)
+            entry.resolve(message.response);
+        else
+            entry.reject(new Error(message.message));
+    });
+    worker.addEventListener('error', (event) => {
+        const detail = event.message ?? '';
+        rejectAll(new Error(detail === '' ? `${name} failed` : `${name} failed: ${detail}`));
+    });
+    return {
+        get pendingCount() {
+            return pending.size;
+        },
+        request: (payload, requestOptions = {}) => {
+            const { signal, timeoutMs } = requestOptions;
+            if (terminated) {
+                return Promise.reject(new CancelledRequestError(`${name} was terminated`));
+            }
+            if (signal?.aborted === true) {
+                return Promise.reject(new CancelledRequestError(`${name} request was cancelled`));
+            }
+            nextId += 1;
+            const id = nextId;
+            const budget = positiveMilliseconds(timeoutMs, defaultTimeoutMs);
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    settle(id)?.reject(new RequestTimeoutError(`${name} request ${id} timed out after ${budget} ms`));
+                }, budget);
+                const onAbort = () => {
+                    settle(id)?.reject(new CancelledRequestError(`${name} request ${id} was cancelled`));
+                };
+                signal?.addEventListener('abort', onAbort);
+                pending.set(id, {
+                    resolve,
+                    reject,
+                    dispose: () => {
+                        clearTimeout(timeout);
+                        signal?.removeEventListener('abort', onAbort);
+                    },
+                });
+                const message = {
+                    id,
+                    request: payload,
+                };
+                try {
+                    worker.postMessage(message);
+                }
+                catch (error) {
+                    settle(id);
+                    reject(error instanceof Error ? error : new Error(String(error)));
+                }
+            });
+        },
+        terminate: () => {
+            terminated = true;
+            rejectAll(new CancelledRequestError(`${name} was terminated`));
+            worker.terminate();
+        },
+    };
+}
+const DEFAULT_TIMEOUT_MS = 120_000;
+function isResponseMessage(message) {
+    if (typeof message !== 'object' || message === null)
+        return false;
+    const candidate = message;
+    if (typeof candidate.id !== 'number' || typeof candidate.ok !== 'boolean') {
+        return false;
+    }
+    return candidate.ok || typeof candidate.message === 'string';
+}
+function positiveMilliseconds(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0
+        ? value
+        : fallback;
+}
+//# sourceMappingURL=workerChannel.js.map

package/lib/worker/core/workerChannel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workerChannel.js","sourceRoot":"","sources":["../../../src/worker/core/workerChannel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOzE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,mBAAmB,CACjC,MAAkB,EAClB,UAAgC,EAAE;IAElC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,QAAQ,CAAC;IACtC,MAAM,gBAAgB,GAAG,oBAAoB,CAC3C,OAAO,CAAC,gBAAgB,EACxB,kBAAkB,CACnB,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,GAAG,EAAqC,CAAC;IAC7D,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,IAAI,UAAU,GAAG,KAAK,CAAC;IAEvB,SAAS,MAAM,CAAC,EAAU;QACxB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9B,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;QAC1C,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACnB,KAAK,CAAC,OAAO,EAAE,CAAC;QAChB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,SAAS,SAAS,CAAC,KAAY;QAC7B,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;YACrC,KAAK,CAAC,OAAO,EAAE,CAAC;YAChB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QACD,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;QAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;YAAE,OAAO;QACxC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACjC,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAChC,IAAI,OAAO,CAAC,EAAE;YAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,QAAqB,CAAC,CAAC;;YACxD,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;QACzC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QACnC,SAAS,CACP,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,YAAY,MAAM,EAAE,CAAC,CAC1E,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,IAAI,YAAY;YACd,OAAO,OAAO,CAAC,IAAI,CAAC;QACtB,CAAC;QACD,OAAO,EAAE,CAAC,OAAiB,EAAE,iBAAuC,EAAE,EAAE,EAAE;YACxE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC;YAC7C,IAAI,UAAU,EAAE,CAAC;gBACf,OAAO,OAAO,CAAC,MAAM,CACnB,IAAI,qBAAqB,CAAC,GAAG,IAAI,iBAAiB,CAAC,CACpD,CAAC;YACJ,CAAC;YACD,IAAI,MAAM,EAAE,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC7B,OAAO,OAAO,CAAC,MAAM,CACnB,IAAI,qBAAqB,CAAC,GAAG,IAAI,wBAAwB,CAAC,CAC3D,CAAC;YACJ,CAAC;YAED,MAAM,IAAI,CAAC,CAAC;YACZ,MAAM,EAAE,GAAG,MAAM,CAAC;YAClB,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;YAEjE,OAAO,IAAI,OAAO,CAAY,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBAChD,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,CAChB,IAAI,mBAAmB,CACrB,GAAG,IAAI,YAAY,EAAE,oBAAoB,MAAM,KAAK,CACrD,CACF,CAAC;gBACJ,CAAC,EAAE,MAAM,CAAC,CAAC;gBACX,MAAM,OAAO,GAAG,GAAG,EAAE;oBACnB,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,CAChB,IAAI,qBAAqB,CAAC,GAAG,IAAI,YAAY,EAAE,gBAAgB,CAAC,CACjE,CAAC;gBACJ,CAAC,CAAC;gBACF,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;gBAE3C,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE;oBACd,OAAO;oBACP,MAAM;oBACN,OAAO,EAAE,GAAG,EAAE;wBACZ,YAAY,CAAC,OAAO,CAAC,CAAC;wBACtB,MAAM,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;oBAChD,CAAC;iBACF,CAAC,CAAC;gBAEH,MAAM,OAAO,GAAmC;oBAC9C,EAAE;oBACF,OAAO,EAAE,OAAO;iBACjB,CAAC;gBACF,IAAI,CAAC;oBACH,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC9B,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,MAAM,CAAC,EAAE,CAAC,CAAC;oBACX,MAAM,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACpE,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACd,UAAU,GAAG,IAAI,CAAC;YAClB,SAAS,CAAC,IAAI,qBAAqB,CAAC,GAAG,IAAI,iBAAiB,CAAC,CAAC,CAAC;YAC/D,MAAM,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC;AAgED,MAAM,kBAAkB,GAAG,OAAO,CAAC;AAEnC,SAAS,iBAAiB,CACxB,OAAgB;IAEhB,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAClE,MAAM,SAAS,GAAG,OAIjB,CAAC;IACF,IAAI,OAAO,SAAS,CAAC,EAAE,KAAK,QAAQ,IAAI,OAAO,SAAS,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC1E,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,SAAS,CAAC,EAAE,IAAI,OAAO,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC;AAC/D,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAyB,EAAE,QAAgB;IACvE,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC;QACrE,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,QAAQ,CAAC;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "Assembled React components shared by the cheminfo sites: a Cite button and an ecosystem menu",
   "author": "Luc Patiny",
@@ -13,11 +13,15 @@
   "type": "module",
   "exports": {
     "./core": "./lib/core.js",
-    "./ui": "./lib/ui.js"
+    "./orbital": "./lib/orbital.js",
+    "./structure": "./lib/structure.js",
+    "./ui": "./lib/ui.js",
+    "./styles/*.css": "./styles/*.css"
   },
   "files": [
     "lib",
-    "src"
+    "src",
+    "styles"
   ],
   "scripts": {
     "build-storybook": "storybook build",
@@ -52,9 +56,12 @@
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
+    "molstar": "^5.11.0",
+    "openchemlib": "^9.25.0",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-ocl": "^8.7.2",
     "react-science": "^23.0.0",
     "rimraf": "^6.1.3",
     "storybook": "^10.5.8",
@@ -64,8 +71,11 @@
   },
   "peerDependencies": {
     "@blueprintjs/core": "^6.18.0",
+    "molstar": "^5.11.0",
+    "openchemlib": "^9.24.0",
     "react": "^18.3.1 || >=19",
     "react-dom": "^18.3.1 || >=19",
+    "react-ocl": "^8.7.1",
     "react-science": "^20.6.2 || ^21.0.0 || ^22.0.0 || ^23.0.0"
   },
   "repository": {
@@ -75,5 +85,16 @@
   "bugs": {
     "url": "https://github.com/cheminfo/react-cheminfo/issues"
   },
-  "homepage": "https://github.com/cheminfo/react-cheminfo#readme"
+  "homepage": "https://github.com/cheminfo/react-cheminfo#readme",
+  "peerDependenciesMeta": {
+    "molstar": {
+      "optional": true
+    },
+    "openchemlib": {
+      "optional": true
+    },
+    "react-ocl": {
+      "optional": true
+    }
+  }
 }

package/src/capsule/ui/CapsuleFilter.tsx

@@ -0,0 +1,119 @@
+import type { Intent } from '@blueprintjs/core';
+import { Tag } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+/** One capsule of a {@link CapsuleFilter} row. */
+export interface CapsuleOption<TValue extends string = string> {
+  /** What picking this capsule selects. */
+  value: TValue;
+  /** What the capsule reads. */
+  label: string;
+  /**
+   * How many rows the capsule keeps, written after the label.
+   * @default undefined — the capsule carries no count
+   */
+  count?: number;
+  /**
+   * Colour of the capsule, which says what the outcome means rather than
+   * whether it is selected.
+   * @default 'none'
+   */
+  intent?: Intent;
+  /**
+   * What the pointer is told when it rests on the capsule.
+   * @default undefined
+   */
+  title?: string;
+}
+
+/** What a row of filter capsules needs. */
+export interface CapsuleFilterProps<TValue extends string = string> {
+  /** One entry per capsule, in the order they are drawn. */
+  options: ReadonlyArray<CapsuleOption<TValue>>;
+  /** The selected capsule. */
+  value: TValue;
+  /** Called with the newly picked value. */
+  onChange: (value: TValue) => void;
+  /**
+   * What the group is called, for a screen reader reaching the row.
+   * @default 'Filter'
+   */
+  label?: string;
+  /**
+   * How a count is written.
+   * @default the number in the reader's locale, e.g. `1,204`
+   */
+  formatCount?: (count: number) => string;
+  /**
+   * Class the row carries, in addition to `capsule-filter`.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * The row of capsules that narrows a table to one outcome.
+ *
+ * Every capsule keeps its semantic colour whether or not it is selected, so
+ * what a status means stays learnable — the filled shape is what encodes the
+ * selection. Each is a real interactive tag, so the row is reachable by tab and
+ * a capsule answers to Enter and Space.
+ * @param props - See {@link CapsuleFilterProps}.
+ * @returns The capsule row.
+ */
+export function CapsuleFilter<TValue extends string = string>(
+  props: CapsuleFilterProps<TValue>,
+): ReactElement {
+  const {
+    options,
+    value,
+    onChange,
+    label = 'Filter',
+    formatCount = defaultFormatCount,
+    className,
+  } = props;
+
+  return (
+    <div
+      role="group"
+      aria-label={label}
+      className={
+        className === undefined
+          ? 'capsule-filter'
+          : `capsule-filter ${className}`
+      }
+      style={ROW_STYLE}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <Tag
+            key={option.value}
+            interactive
+            round
+            minimal={!selected}
+            intent={option.intent}
+            aria-pressed={selected}
+            htmlTitle={option.title}
+            onClick={() => onChange(option.value)}
+          >
+            {option.count === undefined
+              ? option.label
+              : `${option.label} (${formatCount(option.count)})`}
+          </Tag>
+        );
+      })}
+    </div>
+  );
+}
+
+function defaultFormatCount(count: number): string {
+  return count.toLocaleString();
+}
+
+const ROW_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 6,
+} as const satisfies CSSProperties;

package/src/capsule/ui/index.ts

@@ -0,0 +1,2 @@
+export type { CapsuleFilterProps, CapsuleOption } from './CapsuleFilter.tsx';
+export { CapsuleFilter } from './CapsuleFilter.tsx';

package/src/chrome/ui/NavLink.tsx

@@ -0,0 +1,88 @@
+import { Icon } from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+
+import type { NavItem } from './navItem.ts';
+import { isModifiedClick } from './navItem.ts';
+
+export interface NavLinkProps {
+  /** The entry being drawn. */
+  item: NavItem;
+  /**
+   * Whether this is the page on show, which is the one thing in the bar the
+   * brand tint is spent on.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Extra class names, for a site reaching one entry of its own bar.
+   * `nav-link` is always carried as well.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * One entry of a site header, as a link when it has an address and as a button
+ * otherwise. Both carry `nav-link`, so the row reads as one menu rather than as
+ * a button dropped among addresses.
+ * @param props - The entry, whether it is the page on show, and extra classes.
+ * @returns The entry.
+ */
+export function NavLink(props: NavLinkProps): ReactElement {
+  const { item, active = false, className } = props;
+  const { href, external = false, onSelect, title } = item;
+
+  const classes = [
+    'nav-link',
+    active ? 'nav-link--active' : null,
+    className ?? null,
+  ]
+    .filter((part) => part !== null)
+    .join(' ');
+
+  if (href === undefined) {
+    return (
+      <button
+        type="button"
+        className={classes}
+        title={title}
+        aria-label={title}
+        onClick={onSelect}
+      >
+        <NavLinkBody item={item} />
+      </button>
+    );
+  }
+
+  return (
+    <a
+      className={classes}
+      href={href}
+      title={title}
+      aria-label={title}
+      target={external ? '_blank' : undefined}
+      rel={external ? 'noreferrer' : undefined}
+      onClick={(event) => {
+        if (onSelect === undefined || external || isModifiedClick(event)) {
+          return;
+        }
+        event.preventDefault();
+        onSelect();
+      }}
+    >
+      <NavLinkBody item={item} />
+    </a>
+  );
+}
+
+function NavLinkBody(props: { item: NavItem }): ReactNode {
+  const { icon, label, after } = props.item;
+
+  return (
+    <>
+      {icon === undefined ? null : <Icon icon={icon} size={14} />}
+      {label}
+      {after}
+    </>
+  );
+}