react-cheminfo 0.27.0 → 0.29.0

package/lib/ir/ui/useIrEditor.js

@@ -0,0 +1,88 @@
+/**
+ * One viewer's state, and everything derived from it.
+ *
+ * The bands are derived here rather than held, and that is the one structural
+ * decision in this file. Picking is a pure function of a spectrum and the
+ * picking settings, so a band held in state would be an answer that has to be
+ * invalidated by hand every time either changes — and the version that is wrong
+ * is the one drawn on the chart. Derived, a stale band cannot exist.
+ *
+ * It is memoised on the selected spectrum rather than on all of them: picking
+ * runs a peak detection over a few thousand points, and doing it for six loaded
+ * spectra when the panels only ever show one would cost six times what it needs
+ * to on every change of a threshold.
+ */
+import { useEffect, useMemo, useReducer, useRef } from 'react';
+import { assignBands } from "../core/assignBands.js";
+import { createIrState, irReducer } from "../core/irReducer.js";
+import { pickBands } from "../core/pickBands.js";
+import { createIrActions } from "./irActions.js";
+/**
+ * Hold one viewer's state.
+ * @param options - What it opens on.
+ * @returns The state, what follows from it, and everything to do.
+ */
+export function useIrEditor(options = {}) {
+    const { onChange, ...initial } = options;
+    const [state, dispatch] = useReducer(irReducer, initial, createIrState);
+    const actions = useMemo(() => createIrActions(dispatch), [dispatch]);
+    const { spectra } = state.data;
+    const { selectedId } = state.view;
+    const { pickBands: picking, picking: pickingOptions } = state.settings;
+    const { assignmentTolerance } = state.settings;
+    const visibleSpectra = useMemo(() => {
+        const visible = [];
+        for (const spectrum of spectra) {
+            if (spectrum.visible)
+                visible.push(spectrum);
+        }
+        return visible;
+    }, [spectra]);
+    const selectedSpectrum = useMemo(() => {
+        if (selectedId === null)
+            return null;
+        for (const spectrum of spectra) {
+            if (spectrum.id === selectedId)
+                return spectrum;
+        }
+        return null;
+    }, [spectra, selectedId]);
+    const bands = useMemo(() => selectedSpectrum === null || !picking
+        ? []
+        : pickBands(selectedSpectrum, pickingOptions), [selectedSpectrum, picking, pickingOptions]);
+    // Assigning is a walk of thirty ranges per band, which is nothing beside the
+    // picking — so it is a memo of its own, and moving the tolerance does not
+    // re-pick.
+    const assigned = useMemo(() => assignBands(bands, { tolerance: assignmentTolerance }), [bands, assignmentTolerance]);
+    // What was reported last, so a host passing a fresh callback on every render
+    // is not told about spectra that did not change. The identities are compared
+    // rather than the array: every edit replaces it, including the ones that only
+    // change how a spectrum is drawn.
+    const reported = useRef(spectra);
+    useEffect(() => {
+        if (sameSpectra(reported.current, spectra))
+            return;
+        reported.current = spectra;
+        onChange?.(spectra);
+    }, [spectra, onChange]);
+    return useMemo(() => ({ state, visibleSpectra, selectedSpectrum, assigned, actions }), [state, visibleSpectra, selectedSpectrum, assigned, actions]);
+}
+/**
+ * Whether two lists hold the same spectra, by identity and in order.
+ * @param current - What was reported last.
+ * @param next - What is open now.
+ * @returns Whether the report can be skipped.
+ */
+function sameSpectra(current, next) {
+    if (current === next)
+        return true;
+    if (current.length !== next.length)
+        return false;
+    for (let index = 0; index < current.length; index++) {
+        if (current[index].id !== next[index].id) {
+            return false;
+        }
+    }
+    return true;
+}
+//# sourceMappingURL=useIrEditor.js.map

package/lib/ir/ui/useIrEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrEditor.js","sourceRoot":"","sources":["../../../src/ir/ui/useIrEditor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA6BjD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,UAA8B,EAAE;IAC1D,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC;IAEzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAClC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC;IACvE,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC;IAE/C,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,OAAO,GAAiB,EAAE,CAAC;QACjC,KAAK,MAAM,QAAQ,IAAI,OAAO,EAAE,CAAC;YAC/B,IAAI,QAAQ,CAAC,OAAO;gBAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,UAAU,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACrC,KAAK,MAAM,QAAQ,IAAI,OAAO,EAAE,CAAC;YAC/B,IAAI,QAAQ,CAAC,EAAE,KAAK,UAAU;gBAAE,OAAO,QAAQ,CAAC;QAClD,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1B,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CACH,gBAAgB,KAAK,IAAI,IAAI,CAAC,OAAO;QACnC,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,SAAS,CAAC,gBAAgB,EAAE,cAAc,CAAC,EACjD,CAAC,gBAAgB,EAAE,OAAO,EAAE,cAAc,CAAC,CAC5C,CAAC;IAEF,6EAA6E;IAC7E,0EAA0E;IAC1E,WAAW;IACX,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,EAC5D,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAC7B,CAAC;IAEF,6EAA6E;IAC7E,6EAA6E;IAC7E,8EAA8E;IAC9E,kCAAkC;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;YAAE,OAAO;QACnD,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC;QAC3B,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACtE,CAAC,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAC7D,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,WAAW,CAClB,OAA8B,EAC9B,IAA2B;IAE3B,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAClC,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACjD,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QACpD,IAAK,OAAO,CAAC,KAAK,CAAgB,CAAC,EAAE,KAAM,IAAI,CAAC,KAAK,CAAgB,CAAC,EAAE,EAAE,CAAC;YACzE,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/lib/ir/ui/useIrPointer.d.ts

@@ -0,0 +1,66 @@
+/**
+ * What an infrared chart reads under the pointer, and which band it is asking
+ * about.
+ *
+ * Following the pointer at all is `useChartPointer` in the shared chart.
+ * What it *reads* there is the part that is about infrared, and is the whole of
+ * this file — the wavenumber, the value in whichever axis is drawn, and the band
+ * within reach.
+ */
+import type { RefObject } from 'react';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { ChartPointer } from '../../chart/ui/useChartPointer.ts';
+import type { IrBand } from '../core/irBand.ts';
+import type { IrMode } from '../core/irSpectrum.ts';
+/** What the axes say under the pointer, which is what a readout prints. */
+export interface IrReadout {
+    /** What the wavenumber axis reads there, in cm⁻¹. */
+    wavenumber: number;
+    /** What the value axis reads there, in whichever mode is drawn. */
+    value: number;
+    /** Which axis that value is in, so a readout can label it. */
+    mode: IrMode;
+    /** The band within reach of the pointer, `null` when none is. */
+    band: IrBand | null;
+}
+export interface IrPointerOptions {
+    /** The SVG the chart is drawn on, as it was handed to its `ref`. */
+    svgRef: RefObject<SVGSVGElement | null>;
+    /** Where the plot sits inside that SVG. */
+    plot: PlotRect;
+    /** The wavenumber axis as it is currently zoomed, running right to left. */
+    xScale: ChartScale;
+    /** The value axis as it is currently zoomed. */
+    yScale: ChartScale;
+    /** Which value axis is being drawn. */
+    mode: IrMode;
+    /** The bands of every drawn spectrum, for the one under the pointer. */
+    bands: readonly IrBand[];
+    /**
+     * Told which band the pointer has come to rest on, and told `null` when it
+     * leaves one — called only when the answer changes, so it is safe to hang a
+     * highlight that redraws half the page on it.
+     * @default undefined
+     */
+    onBand?: (band: IrBand | null) => void;
+}
+/**
+ * Follow the pointer over an infrared chart.
+ * @param options - The chart, its axes and the bands it is showing.
+ * @returns Where the pointer is and what it reads, both `null` while it is
+ * anywhere but over the plot.
+ */
+export declare function useIrPointer(options: IrPointerOptions): ChartPointer<IrReadout>;
+/**
+ * Whether two readings are about the same band.
+ *
+ * The band alone, and never the wavenumber under the crosshair: that fractional
+ * value changes on every pixel the pointer moves, and comparing it would report a
+ * new answer for every tremor of a hand resting on one band.
+ * @param current - What was last read.
+ * @param next - What has just been read.
+ * @returns Whether both are about the same band.
+ */
+export declare function sameIrReadout(current: IrReadout, next: IrReadout): boolean;
+//# sourceMappingURL=useIrPointer.d.ts.map

package/lib/ir/ui/useIrPointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrPointer.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/useIrPointer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGpD,2EAA2E;AAC3E,MAAM,WAAW,SAAS;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC,2CAA2C;IAC3C,IAAI,EAAE,QAAQ,CAAC;IACf,4EAA4E;IAC5E,MAAM,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,MAAM,EAAE,UAAU,CAAC;IACnB,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,gBAAgB,GACxB,YAAY,CAAC,SAAS,CAAC,CA4BzB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAE1E"}

package/lib/ir/ui/useIrPointer.js

@@ -0,0 +1,53 @@
+/**
+ * What an infrared chart reads under the pointer, and which band it is asking
+ * about.
+ *
+ * Following the pointer at all is `useChartPointer` in the shared chart.
+ * What it *reads* there is the part that is about infrared, and is the whole of
+ * this file — the wavenumber, the value in whichever axis is drawn, and the band
+ * within reach.
+ */
+import { useCallback, useMemo } from 'react';
+import { chartValue } from "../../chart/core/chartScale.js";
+import { useChartPointer } from "../../chart/ui/useChartPointer.js";
+import { sameIrBand } from "../core/irBand.js";
+import { nearestBandAt } from "../core/nearestBand.js";
+/**
+ * Follow the pointer over an infrared chart.
+ * @param options - The chart, its axes and the bands it is showing.
+ * @returns Where the pointer is and what it reads, both `null` while it is
+ * anywhere but over the plot.
+ */
+export function useIrPointer(options) {
+    const { svgRef, plot, xScale, yScale, mode, bands, onBand } = options;
+    const read = useCallback((point) => ({
+        wavenumber: chartValue(xScale, point.x),
+        value: chartValue(yScale, point.y),
+        mode,
+        band: nearestBandAt(bands, xScale, point.x),
+    }), [xScale, yScale, mode, bands]);
+    const onReadout = useMemo(() => onBand === undefined
+        ? undefined
+        : (readout) => onBand(readout?.band ?? null), [onBand]);
+    return useChartPointer({
+        svgRef,
+        plot,
+        read,
+        sameReadout: sameIrReadout,
+        onReadout,
+    });
+}
+/**
+ * Whether two readings are about the same band.
+ *
+ * The band alone, and never the wavenumber under the crosshair: that fractional
+ * value changes on every pixel the pointer moves, and comparing it would report a
+ * new answer for every tremor of a hand resting on one band.
+ * @param current - What was last read.
+ * @param next - What has just been read.
+ * @returns Whether both are about the same band.
+ */
+export function sameIrReadout(current, next) {
+    return sameIrBand(current.band, next.band);
+}
+//# sourceMappingURL=useIrPointer.js.map

package/lib/ir/ui/useIrPointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrPointer.js","sourceRoot":"","sources":["../../../src/ir/ui/useIrPointer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAoCvD;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAC1B,OAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAEtE,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,KAAiB,EAAa,EAAE,CAAC,CAAC;QACjC,UAAU,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QACvC,KAAK,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAClC,IAAI;QACJ,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;KAC5C,CAAC,EACF,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAC9B,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CACH,MAAM,KAAK,SAAS;QAClB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,CAAC,OAAyB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,IAAI,IAAI,CAAC,EAClE,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,OAAO,eAAe,CAAC;QACrB,MAAM;QACN,IAAI;QACJ,IAAI;QACJ,WAAW,EAAE,aAAa;QAC1B,SAAS;KACV,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,OAAkB,EAAE,IAAe;IAC/D,OAAO,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC"}

package/lib/ir/ui/useIrShortcuts.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The keys, heard on the viewer's own root rather than on the document.
+ *
+ * On its own root and with `stopPropagation`, which is the deliberate half of a
+ * decision the repo has already taken once: two viewers on one page must not both
+ * answer `f`, and a page that holds this beside a glycan editor must not have its
+ * own keys eaten. So the viewer hears a key only while it holds the caret — the
+ * root carries `tabIndex={-1}` so a click anywhere in it does — and a key it
+ * acted on goes no further.
+ */
+import type { RefObject } from 'react';
+import type { IrCommandHandlers } from '../core/irCommands.ts';
+/**
+ * Fire the viewer's commands from the keyboard.
+ *
+ * The handlers are read live through a ref rather than closed over, so the
+ * listener is attached once for the life of the viewer instead of being torn down
+ * and rebuilt on every render — and the chart re-renders on every move of the
+ * pointer across it.
+ * @param root - The viewer's root, as it was handed to its `ref`.
+ * @param handlers - What each command does.
+ */
+export declare function useIrShortcuts(root: RefObject<HTMLElement | null> | HTMLElement | null, handlers: IrCommandHandlers): void;
+//# sourceMappingURL=useIrShortcuts.d.ts.map

package/lib/ir/ui/useIrShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrShortcuts.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/useIrShortcuts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,uBAAuB,CAAC;AAG/B;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,EACxD,QAAQ,EAAE,iBAAiB,GAC1B,IAAI,CAoCN"}

package/lib/ir/ui/useIrShortcuts.js

@@ -0,0 +1,73 @@
+/**
+ * The keys, heard on the viewer's own root rather than on the document.
+ *
+ * On its own root and with `stopPropagation`, which is the deliberate half of a
+ * decision the repo has already taken once: two viewers on one page must not both
+ * answer `f`, and a page that holds this beside a glycan editor must not have its
+ * own keys eaten. So the viewer hears a key only while it holds the caret — the
+ * root carries `tabIndex={-1}` so a click anywhere in it does — and a key it
+ * acted on goes no further.
+ */
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { isEditingField } from "../../panel/core/isEditingField.js";
+import { irCommands } from "../core/irCommands.js";
+/**
+ * Fire the viewer's commands from the keyboard.
+ *
+ * The handlers are read live through a ref rather than closed over, so the
+ * listener is attached once for the life of the viewer instead of being torn down
+ * and rebuilt on every render — and the chart re-renders on every move of the
+ * pointer across it.
+ * @param root - The viewer's root, as it was handed to its `ref`.
+ * @param handlers - What each command does.
+ */
+export function useIrShortcuts(root, handlers) {
+    const latest = useRef(handlers);
+    useLayoutEffect(() => {
+        latest.current = handlers;
+    });
+    const element = root === null || root instanceof HTMLElement ? root : null;
+    useEffect(() => {
+        if (element === null)
+            return;
+        function onKeyDown(event) {
+            // A key pressed with a modifier belongs to the browser or to the page:
+            // Ctrl+F is a search, and a viewer that swallowed it to fit its chart
+            // would be a viewer people stop typing in.
+            if (event.ctrlKey || event.metaKey || event.altKey)
+                return;
+            // Never while a name is being typed into the spectra panel.
+            if (isEditingField(event.target))
+                return;
+            const id = commandFor(event.key);
+            if (id === undefined)
+                return;
+            const handler = latest.current[id];
+            if (handler === undefined)
+                return;
+            event.preventDefault();
+            // So the same key does not also reach a viewer mounted beside this one.
+            event.stopPropagation();
+            handler();
+        }
+        element.addEventListener('keydown', onKeyDown);
+        return () => {
+            element.removeEventListener('keydown', onKeyDown);
+        };
+    }, [element]);
+}
+/**
+ * Which command a key runs, if any.
+ *
+ * Built once from the command table rather than looked up by walking it, and
+ * compared case-insensitively so a capital arriving from a held shift still
+ * reaches the command a lowercase key names.
+ * @param key - The `event.key` that arrived.
+ * @returns The command, or `undefined` when the key names none.
+ */
+function commandFor(key) {
+    return KEYS.get(key.toLowerCase());
+}
+/** Every key the viewer answers to, against the command it runs. */
+const KEYS = new Map(Object.entries(irCommands).flatMap(([id, command]) => (command.shortcut?.keys ?? []).map((key) => [key.toLowerCase(), id])));
+//# sourceMappingURL=useIrShortcuts.js.map

package/lib/ir/ui/useIrShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrShortcuts.js","sourceRoot":"","sources":["../../../src/ir/ui/useIrShortcuts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAMpE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc,CAC5B,IAAwD,EACxD,QAA2B;IAE3B,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAEhC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,YAAY,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAE7B,SAAS,SAAS,CAAC,KAAoB;YACrC,uEAAuE;YACvE,sEAAsE;YACtE,2CAA2C;YAC3C,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM;gBAAE,OAAO;YAC3D,4DAA4D;YAC5D,IAAI,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC;gBAAE,OAAO;YAEzC,MAAM,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACjC,IAAI,EAAE,KAAK,SAAS;gBAAE,OAAO;YAC7B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,OAAO,KAAK,SAAS;gBAAE,OAAO;YAElC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,wEAAwE;YACxE,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;AACrC,CAAC;AAED,oEAAoE;AACpE,MAAM,IAAI,GAAG,IAAI,GAAG,CAClB,MAAM,CAAC,OAAO,CAAC,UAAuC,CAAC,CAAC,OAAO,CAC7D,CAAC,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,CAChB,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAChC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,EAAiB,CAAU,CACzD,CACJ,CACF,CAAC"}

package/lib/ir/ui/useIrZoom.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The generic zoom, told what an infrared window is fitted to and how its value
+ * axis behaves.
+ *
+ * Every gesture is `useChartZoom` in the shared chart and none of it is
+ * written here. What is about infrared is the three things handed in: the fit,
+ * which has to refit when the mode changes because the value axis is replaced
+ * rather than nudged; the y axis rules, which are where percent transmittance
+ * says that its baseline is 100 and not zero; and which gestures the mode
+ * answers at all, which is where it says that a rectangle is the only drag worth
+ * making on it and that the wheel belongs to the page.
+ */
+import type { RefObject } from 'react';
+import type { ZoomDragMode } from '../../chart/core/chartDomain.ts';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartZoom } from '../../chart/ui/useChartZoom.ts';
+import type { IrDomain, IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+export interface IrZoomOptions {
+    /** Everything the chart holds, which is what the window is fitted to. */
+    spectra: readonly IrSpectrum[];
+    /** Which value axis is being drawn. */
+    mode: IrMode;
+    /** The SVG the gestures are made on, as it was handed to its `ref`. */
+    svgRef: RefObject<SVGSVGElement | null>;
+    /** Where the plot sits inside that SVG, which the axes are laid over. */
+    plot: PlotRect;
+    /**
+     * The window a host is imposing, `null` while it imposes none. Handed straight
+     * through; `useChartZoom` documents what imposing one does.
+     * @default null
+     */
+    domain?: IrDomain | null;
+    /**
+     * What a drag asks for **where the mode leaves the choice open** — the
+     * wavenumber axis, or the rectangle swept out. Percent transmittance takes the
+     * rectangle whatever this says; `zoomGestures` is where that is decided.
+     * @default 'xAxis'
+     */
+    drag?: ZoomDragMode;
+}
+/**
+ * Zoom an infrared chart by dragging it, and — reading absorbance — by the wheel.
+ *
+ * A double click always fits everything again, in either mode: it is the way
+ * back from a zoom, and a chart that offers a gesture has to offer the way out
+ * of it.
+ * @param options - The chart, what it holds and which axis it is read in.
+ * @returns The window and the gestures that move it.
+ */
+export declare function useIrZoom(options: IrZoomOptions): ChartZoom;
+//# sourceMappingURL=useIrZoom.d.ts.map

package/lib/ir/ui/useIrZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrZoom.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/useIrZoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAIhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B,yEAAyE;IACzE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC,yEAAyE;IACzE,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,aAAa,GAAG,SAAS,CA4B3D"}

package/lib/ir/ui/useIrZoom.js

@@ -0,0 +1,46 @@
+/**
+ * The generic zoom, told what an infrared window is fitted to and how its value
+ * axis behaves.
+ *
+ * Every gesture is `useChartZoom` in the shared chart and none of it is
+ * written here. What is about infrared is the three things handed in: the fit,
+ * which has to refit when the mode changes because the value axis is replaced
+ * rather than nudged; the y axis rules, which are where percent transmittance
+ * says that its baseline is 100 and not zero; and which gestures the mode
+ * answers at all, which is where it says that a rectangle is the only drag worth
+ * making on it and that the wheel belongs to the page.
+ */
+import { useMemo } from 'react';
+import { useChartZoom } from "../../chart/ui/useChartZoom.js";
+import { fittedTo, fullDomain } from "../core/irDomain.js";
+import { yAxisRules, zoomGestures } from "../core/irMode.js";
+/**
+ * Zoom an infrared chart by dragging it, and — reading absorbance — by the wheel.
+ *
+ * A double click always fits everything again, in either mode: it is the way
+ * back from a zoom, and a chart that offers a gesture has to offer the way out
+ * of it.
+ * @param options - The chart, what it holds and which axis it is read in.
+ * @returns The window and the gestures that move it.
+ */
+export function useIrZoom(options) {
+    const { spectra, mode, svgRef, plot, domain = null, drag = 'xAxis', } = options;
+    const fitted = useMemo(() => fullDomain(spectra, mode), [spectra, mode]);
+    const fitKey = useMemo(() => fittedTo(spectra, mode), [spectra, mode]);
+    const yAxis = useMemo(() => yAxisRules(mode), [mode]);
+    const gestures = useMemo(() => zoomGestures(mode, drag), [mode, drag]);
+    // `reverseX` is not decoration: the hook measures every gesture by inverting a
+    // pixel through the scale it builds, so it has to build the same reversed one
+    // the chart draws with.
+    return useChartZoom({
+        fitted,
+        fitKey,
+        svgRef,
+        plot,
+        yAxis,
+        domain,
+        gestures,
+        reverseX: true,
+    });
+}
+//# sourceMappingURL=useIrZoom.js.map

package/lib/ir/ui/useIrZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrZoom.js","sourceRoot":"","sources":["../../../src/ir/ui/useIrZoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA2B7D;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CAAC,OAAsB;IAC9C,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,OAAO,GACf,GAAG,OAAO,CAAC;IAEZ,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEvE,+EAA+E;IAC/E,8EAA8E;IAC9E,wBAAwB;IACxB,OAAO,YAAY,CAAC;QAClB,MAAM;QACN,MAAM;QACN,MAAM;QACN,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ;QACR,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC"}

package/lib/ir.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Displaying and assigning infrared spectra: the chart, the band table and the
+ * whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `ir-spectrum` for the band correlations, `convert-to-jcamp` for
+ * writing them back out, and a JCAMP or SPC reader fetched only once the bytes
+ * turn out to need it. A site with no spectra to look at installs none of it.
+ */
+export * from './ir/core/index.ts';
+export * from './ir/ui/index.ts';
+//# sourceMappingURL=ir.d.ts.map

package/lib/ir.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ir.d.ts","sourceRoot":"","sources":["../src/ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/lib/ir.js

@@ -0,0 +1,13 @@
+/**
+ * Displaying and assigning infrared spectra: the chart, the band table and the
+ * whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `ir-spectrum` for the band correlations, `convert-to-jcamp` for
+ * writing them back out, and a JCAMP or SPC reader fetched only once the bytes
+ * turn out to need it. A site with no spectra to look at installs none of it.
+ */
+export * from "./ir/core/index.js";
+export * from "./ir/ui/index.js";
+//# sourceMappingURL=ir.js.map

package/lib/ir.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ir.js","sourceRoot":"","sources":["../src/ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/lib/panel/core/dialogStyles.d.ts

@@ -0,0 +1,13 @@
+/** What a paragraph inside a dialog section looks like. */
+export declare const paragraphStyle: {
+    readonly margin: 0;
+};
+/** What a list of things a panel holds looks like. */
+export declare const listStyle: {
+    readonly margin: 0;
+    readonly paddingLeft: 18;
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: 4;
+};
+//# sourceMappingURL=dialogStyles.d.ts.map

package/lib/panel/core/dialogStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogStyles.d.ts","sourceRoot":"","sources":["../../../src/panel/core/dialogStyles.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,eAAO,MAAM,cAAc;;CAAyB,CAAC;AAErD,sDAAsD;AACtD,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC"}

package/lib/panel/core/dialogStyles.js

@@ -0,0 +1,11 @@
+/** What a paragraph inside a dialog section looks like. */
+export const paragraphStyle = { margin: 0 };
+/** What a list of things a panel holds looks like. */
+export const listStyle = {
+    margin: 0,
+    paddingLeft: 18,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+};
+//# sourceMappingURL=dialogStyles.js.map

package/lib/panel/core/dialogStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogStyles.js","sourceRoot":"","sources":["../../../src/panel/core/dialogStyles.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW,CAAC;AAErD,sDAAsD;AACtD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,EAAE;IACf,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACE,CAAC"}

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

@@ -0,0 +1,19 @@
+/**
+ * The chrome an editor is laid out with, below the components that wear it.
+ *
+ * A panel, a status bar and a dialog look the same in every editor of the
+ * family, and they have to: a reader who has learnt one editor has learnt the
+ * others, and that only holds while the parts are literally the same parts.
+ * What is here is the half that draws nothing — the style objects each part is
+ * built from, the questions the DOM is asked before a shortcut fires, and the
+ * sentences a reader is given when a file goes wrong.
+ */
+export { listStyle, paragraphStyle } from './dialogStyles.ts';
+export { isEditingField } from './isEditingField.ts';
+export { inlineLabelStyle, labelRowStyle, labelStyle, panelBodyStyle, panelCapsuleGroupStyle, panelCapsuleRowStyle, panelCapsulesStyle, panelCellStyle, panelColumnButtonStyle, panelEmptyStyle, panelHeaderCellStyle, panelHeadingStyle, panelNumberCellStyle, panelScrollAreaStyle, panelStickyHeaderStyle, panelStyle, panelTableStyle, panelToolbarCountStyle, panelToolbarStyle, shortPanelStyle, smallCapsuleStyle, } from './panelStyles.ts';
+export type { RowPlacement, RowSpacers } from './rowSpacers.ts';
+export { rowSpacers } from './rowSpacers.ts';
+export { countLabel, statusBarStyle, statusItemStyle, statusMutedStyle, statusSpacerStyle, } from './statusBar.ts';
+export { filterNeedle, matchesNeedle } from './textFilter.ts';
+export { yieldToPainting } from './yieldToPainting.ts';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panel/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/panel/core/index.js

@@ -0,0 +1,18 @@
+/**
+ * The chrome an editor is laid out with, below the components that wear it.
+ *
+ * A panel, a status bar and a dialog look the same in every editor of the
+ * family, and they have to: a reader who has learnt one editor has learnt the
+ * others, and that only holds while the parts are literally the same parts.
+ * What is here is the half that draws nothing — the style objects each part is
+ * built from, the questions the DOM is asked before a shortcut fires, and the
+ * sentences a reader is given when a file goes wrong.
+ */
+export { listStyle, paragraphStyle } from "./dialogStyles.js";
+export { isEditingField } from "./isEditingField.js";
+export { inlineLabelStyle, labelRowStyle, labelStyle, panelBodyStyle, panelCapsuleGroupStyle, panelCapsuleRowStyle, panelCapsulesStyle, panelCellStyle, panelColumnButtonStyle, panelEmptyStyle, panelHeaderCellStyle, panelHeadingStyle, panelNumberCellStyle, panelScrollAreaStyle, panelStickyHeaderStyle, panelStyle, panelTableStyle, panelToolbarCountStyle, panelToolbarStyle, shortPanelStyle, smallCapsuleStyle, } from "./panelStyles.js";
+export { rowSpacers } from "./rowSpacers.js";
+export { countLabel, statusBarStyle, statusItemStyle, statusMutedStyle, statusSpacerStyle, } from "./statusBar.js";
+export { filterNeedle, matchesNeedle } from "./textFilter.js";
+export { yieldToPainting } from "./yieldToPainting.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/panel/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/panel/core/isEditingField.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether an event belongs to something the user is typing in.
+ *
+ * An editor listens on the document for shortcuts and for pastes, so both have
+ * to keep their hands off every field on the page: an `f` typed into a mass box,
+ * a row filter or a sequence field is part of what is being written, not a chart
+ * being fitted or a glycan being drawn.
+ *
+ * `isContentEditable` is asked as well as the tag, because a rich text box is a
+ * `div` and swallowing its keys is the same mistake made less visibly. Two of
+ * the three copies this replaces had lost that line — one of them while keeping
+ * the sentence claiming it.
+ * @param target - What the event was delivered to.
+ * @returns Whether it should be left alone.
+ */
+export declare function isEditingField(target: EventTarget | null): boolean;
+//# sourceMappingURL=isEditingField.d.ts.map

package/lib/panel/core/isEditingField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isEditingField.d.ts","sourceRoot":"","sources":["../../../src/panel/core/isEditingField.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAIlE"}

package/lib/panel/core/isEditingField.js

@@ -0,0 +1,25 @@
+/**
+ * Whether an event belongs to something the user is typing in.
+ *
+ * An editor listens on the document for shortcuts and for pastes, so both have
+ * to keep their hands off every field on the page: an `f` typed into a mass box,
+ * a row filter or a sequence field is part of what is being written, not a chart
+ * being fitted or a glycan being drawn.
+ *
+ * `isContentEditable` is asked as well as the tag, because a rich text box is a
+ * `div` and swallowing its keys is the same mistake made less visibly. Two of
+ * the three copies this replaces had lost that line — one of them while keeping
+ * the sentence claiming it.
+ * @param target - What the event was delivered to.
+ * @returns Whether it should be left alone.
+ */
+export function isEditingField(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return EDITING_TAGS.has(target.tagName);
+}
+/** Elements an event belongs to rather than to the editor around them. */
+const EDITING_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+//# sourceMappingURL=isEditingField.js.map

package/lib/panel/core/isEditingField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isEditingField.js","sourceRoot":"","sources":["../../../src/panel/core/isEditingField.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,cAAc,CAAC,MAA0B;IACvD,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAC;IACnD,IAAI,MAAM,CAAC,iBAAiB;QAAE,OAAO,IAAI,CAAC;IAC1C,OAAO,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC1C,CAAC;AAED,0EAA0E;AAC1E,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC"}