react-cheminfo 0.28.0 → 0.29.0

package/lib/panel/ui/SpectrumColorSwatch.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PopoverNext } from '@blueprintjs/core';
+import { useState } from 'react';
+import { EXTRA_SPECTRUM_COLORS, SPECTRUM_COLORS, } from "../../chart/core/spectrumColor.js";
+/**
+ * The chip that says what colour a spectrum is drawn in, and changes it.
+ *
+ * The palette is what `spectrumColor.ts` holds and nothing else: a free colour
+ * picker would let two spectra be set to the same blue, or to a hue that
+ * disappears against the chart, and telling the traces apart is the whole job
+ * the colour has.
+ *
+ * Its two tiers are drawn as two rows, in that order and unlabelled. A row is
+ * enough: the top one is what the chart uses by itself, so a reader who never
+ * looks below it is already right, and one who does is choosing deliberately —
+ * which is the only way a colour that asks more of its reader's eyes should
+ * ever be picked. A legend explaining the difference would be read once and be
+ * in the way afterwards; `spectrumColor.ts` is where the difference is written
+ * down.
+ *
+ * One component for every viewer rather than one per package: a swatch that
+ * opens a picker in the mass panel and walks the palette in the infrared one is
+ * two different controls wearing the same chip, and whichever a reader learned
+ * first is the wrong one in the other editor.
+ * @param props - Component props.
+ * @returns The chip.
+ */
+export function SpectrumColorSwatch(props) {
+    const { color, name, onPick } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    function offer(offered) {
+        return (_jsx("button", { type: "button", title: offered, "aria-label": `Draw ${name} in ${offered}`, style: {
+                ...(offered === color ? activeSwatchStyle : swatchStyle),
+                background: offered,
+            }, onClick: () => {
+                onPick(offered);
+                setIsOpen(false);
+            } }, offered));
+    }
+    return (_jsx(PopoverNext
+    // A handful of chips need no arrow pointing back at a chip of the same
+    // size.
+    , { 
+        // A handful of chips need no arrow pointing back at a chip of the same
+        // size.
+        arrow: false, isOpen: isOpen, placement: "bottom-start", onInteraction: setIsOpen, content: _jsxs("div", { style: paletteStyle, children: [_jsx("div", { style: paletteRowStyle, children: SPECTRUM_COLORS.map(offer) }), _jsx("div", { style: paletteRowStyle, children: EXTRA_SPECTRUM_COLORS.map(offer) })] }), children: _jsx("button", { type: "button", title: "Draw this spectrum in another colour", "aria-label": `Colour of ${name}`, style: { ...swatchStyle, background: color } }) }));
+}
+/**
+ * A round chip rather than a square one: it is the mark the chart's own
+ * tooltip uses for a series, so the row and the chart name the same spectrum
+ * the same way.
+ */
+const swatchStyle = {
+    flex: 'none',
+    width: 14,
+    height: 14,
+    padding: 0,
+    borderRadius: '50%',
+    border: '1px solid rgba(17, 20, 24, 0.2)',
+    cursor: 'pointer',
+};
+const activeSwatchStyle = {
+    ...swatchStyle,
+    border: '2px solid rgb(17 20 24)',
+};
+const paletteStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    padding: 8,
+};
+const paletteRowStyle = {
+    display: 'flex',
+    gap: 6,
+};
+//# sourceMappingURL=SpectrumColorSwatch.js.map

package/lib/panel/ui/SpectrumColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpectrumColorSwatch.js","sourceRoot":"","sources":["../../../src/panel/ui/SpectrumColorSwatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,qBAAqB,EACrB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAW3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,KAAK,CAAC,OAAe;QAC5B,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,gBACF,QAAQ,IAAI,OAAO,OAAO,EAAE,EACxC,KAAK,EAAE;gBACL,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC;gBACxD,UAAU,EAAE,OAAO;aACpB,EACD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,CAAC,CAAC;gBAChB,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,IAXI,OAAO,CAYZ,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW;IACV,uEAAuE;IACvE,QAAQ;;QADR,uEAAuE;QACvE,QAAQ;QACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,cAAc,EACxB,aAAa,EAAE,SAAS,EACxB,OAAO,EACL,eAAK,KAAK,EAAE,YAAY,aACtB,cAAK,KAAK,EAAE,eAAe,YAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,GAAO,EAC/D,cAAK,KAAK,EAAE,eAAe,YAAG,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAO,IACjE,YAGR,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sCAAsC,gBAChC,aAAa,IAAI,EAAE,EAC/B,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAC5C,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,CAAC;IACV,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,iCAAiC;IACzC,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,iBAAiB,GAAG;IACxB,GAAG,WAAW;IACd,MAAM,EAAE,yBAAyB;CACzB,CAAC;AAEX,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,CAAC;CACF,CAAC;AAEX,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,CAAC;CACE,CAAC"}

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

@@ -0,0 +1,37 @@
+/**
+ * The parts an editor is assembled from: its panels, its dialogs and the rail
+ * they are opened from.
+ *
+ * Every one of them is handed what it shows and reports what was pressed, so
+ * none of them reads a store and none of them knows which editor it is in.
+ * That is what lets the same panel stack carry a spectrum, a chromatogram and
+ * a drawing.
+ */
+export type { AboutDialogFrameProps } from './AboutDialogFrame.tsx';
+export { AboutDialogFrame } from './AboutDialogFrame.tsx';
+export type { ClearButtonProps } from './ClearButton.tsx';
+export { ClearButton } from './ClearButton.tsx';
+export type { DocumentationDialogFrameProps, DocumentationSection, } from './DocumentationDialogFrame.tsx';
+export { DocumentationDialogFrame } from './DocumentationDialogFrame.tsx';
+export type { FilterInputProps } from './FilterInput.tsx';
+export { FilterInput } from './FilterInput.tsx';
+export type { HelpLabelProps } from './HelpLabel.tsx';
+export { HelpLabel } from './HelpLabel.tsx';
+export type { PanelEmptyProps, PanelMessageIntent, PanelMessageProps, } from './PanelMessage.tsx';
+export { PanelEmpty, PanelMessage } from './PanelMessage.tsx';
+export type { PanelRailProps, RailPanel } from './PanelRail.tsx';
+export { PanelRail } from './PanelRail.tsx';
+export type { LinkProps, SectionProps } from './Section.tsx';
+export { Link, Section } from './Section.tsx';
+export type { PanelDescriptor, SidePanelStackProps, } from './SidePanelStack.tsx';
+export { SidePanelStack } from './SidePanelStack.tsx';
+export type { SpectrumColorSwatchProps } from './SpectrumColorSwatch.tsx';
+export { SpectrumColorSwatch } from './SpectrumColorSwatch.tsx';
+export { useConfirmOnEnter } from './useConfirmOnEnter.ts';
+export type { FilterBox } from './useFilterBox.ts';
+export { useFilterBox } from './useFilterBox.ts';
+export type { VirtualRows } from './useVirtualRows.ts';
+export { useVirtualRows } from './useVirtualRows.ts';
+export type { VirtualWindowRows } from './useVirtualWindowRows.ts';
+export { useVirtualWindowRows } from './useVirtualWindowRows.ts';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,YAAY,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,6BAA6B,EAC7B,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC9C,YAAY,EACV,eAAe,EACf,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/panel/ui/index.js

@@ -0,0 +1,24 @@
+/**
+ * The parts an editor is assembled from: its panels, its dialogs and the rail
+ * they are opened from.
+ *
+ * Every one of them is handed what it shows and reports what was pressed, so
+ * none of them reads a store and none of them knows which editor it is in.
+ * That is what lets the same panel stack carry a spectrum, a chromatogram and
+ * a drawing.
+ */
+export { AboutDialogFrame } from "./AboutDialogFrame.js";
+export { ClearButton } from "./ClearButton.js";
+export { DocumentationDialogFrame } from "./DocumentationDialogFrame.js";
+export { FilterInput } from "./FilterInput.js";
+export { HelpLabel } from "./HelpLabel.js";
+export { PanelEmpty, PanelMessage } from "./PanelMessage.js";
+export { PanelRail } from "./PanelRail.js";
+export { Link, Section } from "./Section.js";
+export { SidePanelStack } from "./SidePanelStack.js";
+export { SpectrumColorSwatch } from "./SpectrumColorSwatch.js";
+export { useConfirmOnEnter } from "./useConfirmOnEnter.js";
+export { useFilterBox } from "./useFilterBox.js";
+export { useVirtualRows } from "./useVirtualRows.js";
+export { useVirtualWindowRows } from "./useVirtualWindowRows.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/panel/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAKhD,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAAgC,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAM5C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAe,CAAC;AAK9C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/panel/ui/useConfirmOnEnter.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Enter as the answer to whatever a dialog is asking.
+ */
+/**
+ * Run a dialog's primary action when Enter is pressed while it is open.
+ *
+ * On the document rather than on the dialog's own subtree, because an open
+ * overlay holds the focus on a container above the content, so a press never
+ * reaches a handler put on the body. Esc needs nothing of the sort: Blueprint
+ * closes an overlay on it already.
+ *
+ * A press that something else has a use for is left alone — a button under the
+ * focus is activated by Enter on its own, and a newline typed into a text area
+ * is a newline — so the shortcut never fires twice or eats what was typed.
+ * @param isOpen - Whether the dialog is showing.
+ * @param onConfirm - Its primary action, the one the footer button runs.
+ */
+export declare function useConfirmOnEnter(isOpen: boolean, onConfirm: () => void): void;
+//# sourceMappingURL=useConfirmOnEnter.d.ts.map

package/lib/panel/ui/useConfirmOnEnter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmOnEnter.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/useConfirmOnEnter.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,MAAM,IAAI,GACpB,IAAI,CAwBN"}

package/lib/panel/ui/useConfirmOnEnter.js

@@ -0,0 +1,64 @@
+/**
+ * Enter as the answer to whatever a dialog is asking.
+ */
+import { useEffect, useLayoutEffect, useRef } from 'react';
+/**
+ * Run a dialog's primary action when Enter is pressed while it is open.
+ *
+ * On the document rather than on the dialog's own subtree, because an open
+ * overlay holds the focus on a container above the content, so a press never
+ * reaches a handler put on the body. Esc needs nothing of the sort: Blueprint
+ * closes an overlay on it already.
+ *
+ * A press that something else has a use for is left alone — a button under the
+ * focus is activated by Enter on its own, and a newline typed into a text area
+ * is a newline — so the shortcut never fires twice or eats what was typed.
+ * @param isOpen - Whether the dialog is showing.
+ * @param onConfirm - Its primary action, the one the footer button runs.
+ */
+export function useConfirmOnEnter(isOpen, onConfirm) {
+    // Held in a ref so a caller passing a fresh closure on every render does not
+    // have the listener taken down and put back up.
+    const current = useRef(onConfirm);
+    useLayoutEffect(() => {
+        current.current = onConfirm;
+    });
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handleKeyDown(event) {
+            if (event.key !== 'Enter' || event.defaultPrevented)
+                return;
+            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            if (activatesOnEnter(event.target) || takesNewlines(event.target))
+                return;
+            event.preventDefault();
+            current.current();
+        }
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen]);
+}
+/**
+ * Whether Enter is already the way to work what the press was delivered to.
+ * @param target - What the event was delivered to.
+ * @returns Whether it runs itself on Enter.
+ */
+function activatesOnEnter(target) {
+    if (!(target instanceof Element))
+        return false;
+    return target.closest('a[href], button, summary, [role="button"]') !== null;
+}
+/**
+ * Whether the press is a newline being typed rather than an answer.
+ * @param target - What the event was delivered to.
+ * @returns Whether it should be left alone.
+ */
+function takesNewlines(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return target.isContentEditable || target.tagName === 'TEXTAREA';
+}
+//# sourceMappingURL=useConfirmOnEnter.js.map

package/lib/panel/ui/useConfirmOnEnter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmOnEnter.js","sourceRoot":"","sources":["../../../src/panel/ui/useConfirmOnEnter.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAe,EACf,SAAqB;IAErB,6EAA6E;IAC7E,gDAAgD;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAClC,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,SAAS,aAAa,CAAC,KAAoB;YACzC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,gBAAgB;gBAAE,OAAO;YAC5D,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBACrE,OAAO;YACT,CAAC;YACD,IAAI,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;gBAAE,OAAO;YAC1E,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC;AAED;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,MAA0B;IAClD,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IAC/C,OAAO,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,IAAI,CAAC;AAC9E,CAAC;AAED;;;;GAIG;AACH,SAAS,aAAa,CAAC,MAA0B;IAC/C,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAC;IACnD,OAAO,MAAM,CAAC,iBAAiB,IAAI,MAAM,CAAC,OAAO,KAAK,UAAU,CAAC;AACnE,CAAC"}

package/lib/panel/ui/useFilterBox.d.ts

@@ -0,0 +1,23 @@
+/** The filter box of a panel, and the toolbar item that reveals it. */
+export interface FilterBox {
+    /** What the user typed, empty while nothing is filtered out. */
+    filter: string;
+    /** Called with what the user typed. */
+    setFilter: (filter: string) => void;
+    /** Whether the box is showing. */
+    showFilter: boolean;
+    /** Reveals the box, or hides it and drops what was typed. */
+    toggleFilter: () => void;
+}
+/**
+ * A filter box that is out of the way until it is asked for.
+ *
+ * Closing it drops what was typed, because a box that is out of sight can no
+ * longer explain why half the list is missing — which is the one rule every
+ * panel offering a filter has to keep, so it is kept here rather than in each
+ * of them.
+ * @param defaultShowFilter - Whether the box is open to begin with.
+ * @returns The state of the box, and the toggle a toolbar item calls.
+ */
+export declare function useFilterBox(defaultShowFilter?: boolean): FilterBox;
+//# sourceMappingURL=useFilterBox.d.ts.map

package/lib/panel/ui/useFilterBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterBox.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/useFilterBox.ts"],"names":[],"mappings":"AAEA,uEAAuE;AACvE,MAAM,WAAW,SAAS;IACxB,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,kCAAkC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,iBAAiB,UAAQ,GAAG,SAAS,CAUjE"}

package/lib/panel/ui/useFilterBox.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+/**
+ * A filter box that is out of the way until it is asked for.
+ *
+ * Closing it drops what was typed, because a box that is out of sight can no
+ * longer explain why half the list is missing — which is the one rule every
+ * panel offering a filter has to keep, so it is kept here rather than in each
+ * of them.
+ * @param defaultShowFilter - Whether the box is open to begin with.
+ * @returns The state of the box, and the toggle a toolbar item calls.
+ */
+export function useFilterBox(defaultShowFilter = false) {
+    const [filter, setFilter] = useState('');
+    const [showFilter, setShowFilter] = useState(defaultShowFilter);
+    function toggleFilter() {
+        if (showFilter)
+            setFilter('');
+        setShowFilter(!showFilter);
+    }
+    return { filter, setFilter, showFilter, toggleFilter };
+}
+//# sourceMappingURL=useFilterBox.js.map

package/lib/panel/ui/useFilterBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterBox.js","sourceRoot":"","sources":["../../../src/panel/ui/useFilterBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAcjC;;;;;;;;;GASG;AACH,MAAM,UAAU,YAAY,CAAC,iBAAiB,GAAG,KAAK;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAEhE,SAAS,YAAY;QACnB,IAAI,UAAU;YAAE,SAAS,CAAC,EAAE,CAAC,CAAC;QAC9B,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;AACzD,CAAC"}

package/lib/panel/ui/useVirtualRows.d.ts

@@ -0,0 +1,46 @@
+import type { RefObject } from 'react';
+import type { RowSpacers } from '../core/rowSpacers.ts';
+/** Which rows a scrolled table draws, and the empty room around them. */
+export interface VirtualRows extends RowSpacers {
+    /** The indices of the rows to draw, in the order they are listed. */
+    indices: number[];
+    /**
+     * What a drawn row reports its height through, as its `ref`. A row also has
+     * to carry `data-index`, which is how the measurement finds its way back to
+     * the row it was taken from.
+     *
+     * Any element, not a `<tr>`: a peak table's rows are table rows, while a
+     * fragment list's are `<div>`s carrying a drawing, and both are measured the
+     * same way.
+     */
+    measure: (node: HTMLElement | null) => void;
+}
+/**
+ * Draw only the rows the scroll region is showing, however long the list is.
+ *
+ * A peak table is a few hundred rows at rest and several thousand once the
+ * window is opened onto the whole spectrum, and every one of those rows is four
+ * cells the browser lays out, styles and keeps — a cost paid on the sort, on the
+ * filter, and on every zoom, for rows nobody is looking at. Drawing the twenty
+ * or so in view and standing two empty rows in for the rest makes that cost the
+ * size of the panel rather than the size of the spectrum.
+ *
+ * The rows are measured rather than assumed: a row is a line of text, so its
+ * height follows the font the page is rendered at and a hard-coded one would
+ * put the end of a five thousand row list several screens away from the bottom
+ * of the scrollbar. `estimatedRowHeight` is only what the list is worth before
+ * a single row has been drawn.
+ *
+ * The table header scrolls inside the same region and is not part of the list,
+ * so the rows really sit one header lower than this reckons. It is left that
+ * way deliberately: the overscan already draws more rows than are in view, on
+ * both sides, and it absorbs a header's worth of offset without the extra
+ * measurement — and without the render that measuring it would cost on the way
+ * to the same picture.
+ * @param scrollRef - The region the rows scroll in.
+ * @param count - How many rows the list holds.
+ * @param estimatedRowHeight - What one row is worth until one has been drawn.
+ * @returns The rows to draw and the spacers standing in for the others.
+ */
+export declare function useVirtualRows(scrollRef: RefObject<HTMLDivElement | null>, count: number, estimatedRowHeight: number): VirtualRows;
+//# sourceMappingURL=useVirtualRows.d.ts.map

package/lib/panel/ui/useVirtualRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualRows.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/useVirtualRows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,yEAAyE;AACzE,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,qEAAqE;IACrE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAC3C,KAAK,EAAE,MAAM,EACb,kBAAkB,EAAE,MAAM,GACzB,WAAW,CAmBb"}

package/lib/panel/ui/useVirtualRows.js

@@ -0,0 +1,56 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { rowSpacers } from "../core/rowSpacers.js";
+/**
+ * Draw only the rows the scroll region is showing, however long the list is.
+ *
+ * A peak table is a few hundred rows at rest and several thousand once the
+ * window is opened onto the whole spectrum, and every one of those rows is four
+ * cells the browser lays out, styles and keeps — a cost paid on the sort, on the
+ * filter, and on every zoom, for rows nobody is looking at. Drawing the twenty
+ * or so in view and standing two empty rows in for the rest makes that cost the
+ * size of the panel rather than the size of the spectrum.
+ *
+ * The rows are measured rather than assumed: a row is a line of text, so its
+ * height follows the font the page is rendered at and a hard-coded one would
+ * put the end of a five thousand row list several screens away from the bottom
+ * of the scrollbar. `estimatedRowHeight` is only what the list is worth before
+ * a single row has been drawn.
+ *
+ * The table header scrolls inside the same region and is not part of the list,
+ * so the rows really sit one header lower than this reckons. It is left that
+ * way deliberately: the overscan already draws more rows than are in view, on
+ * both sides, and it absorbs a header's worth of offset without the extra
+ * measurement — and without the render that measuring it would cost on the way
+ * to the same picture.
+ * @param scrollRef - The region the rows scroll in.
+ * @param count - How many rows the list holds.
+ * @param estimatedRowHeight - What one row is worth until one has been drawn.
+ * @returns The rows to draw and the spacers standing in for the others.
+ */
+export function useVirtualRows(scrollRef, count, estimatedRowHeight) {
+    const virtualizer = useVirtualizer({
+        count,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => estimatedRowHeight,
+        overscan: OVERSCAN,
+    });
+    const drawn = virtualizer.getVirtualItems();
+    const indices = new Array(drawn.length);
+    for (let position = 0; position < drawn.length; position++) {
+        indices[position] = drawn[position].index;
+    }
+    return {
+        indices,
+        ...rowSpacers(drawn, virtualizer.getTotalSize()),
+        measure: virtualizer.measureElement,
+    };
+}
+/**
+ * How many rows are drawn beyond each end of the region.
+ *
+ * Enough that a wheel gesture or a drag of the scrollbar never reaches the edge
+ * of what was drawn before the next render has run, and enough to cover the
+ * header the list is offset by.
+ */
+const OVERSCAN = 12;
+//# sourceMappingURL=useVirtualRows.js.map

package/lib/panel/ui/useVirtualRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualRows.js","sourceRoot":"","sources":["../../../src/panel/ui/useVirtualRows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAkBnD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,cAAc,CAC5B,SAA2C,EAC3C,KAAa,EACb,kBAA0B;IAE1B,MAAM,WAAW,GAAG,cAAc,CAAC;QACjC,KAAK;QACL,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QACzC,YAAY,EAAE,GAAG,EAAE,CAAC,kBAAkB;QACtC,QAAQ,EAAE,QAAQ;KACnB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,WAAW,CAAC,eAAe,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAI,KAAK,CAAS,KAAK,CAAC,MAAM,CAAC,CAAC;IAChD,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;QAC3D,OAAO,CAAC,QAAQ,CAAC,GAAI,KAAK,CAAC,QAAQ,CAAuB,CAAC,KAAK,CAAC;IACnE,CAAC;IAED,OAAO;QACL,OAAO;QACP,GAAG,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC;QAChD,OAAO,EAAE,WAAW,CAAC,cAAc;KACpC,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,EAAE,CAAC"}

package/lib/panel/ui/useVirtualWindowRows.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Drawing only the rows the page is showing, for a list that scrolls with it.
+ *
+ * `useVirtualRows` measures a scroll region of its own, which is what a panel
+ * beside a chart has. A table filling a tab has none: it flows down the document
+ * and the browser window is what scrolls it, so giving the list its own
+ * `overflow` would grow a second scrollbar inside the first and cap the table at
+ * whatever height it was handed — a layout change made to serve the virtualiser
+ * rather than the reader.
+ */
+import type { VirtualRows } from './useVirtualRows.ts';
+/** The rows to draw, and what the list reports its own position through. */
+export interface VirtualWindowRows extends VirtualRows {
+    /**
+     * What the element holding the rows reports its position through, as its
+     * `ref`. Without it every offset is reckoned from the top of the document and
+     * the wrong rows are drawn, by however tall whatever sits above the list is.
+     */
+    measureList: (node: HTMLElement | null) => void;
+}
+/**
+ * Draw only the rows the page is showing, however long the list is.
+ *
+ * The rows are measured against the window, so the list only has to say how far
+ * down the page it begins — which is what the virtualiser calls its scroll
+ * margin, and what `measureList` reports.
+ *
+ * That position is read in a ref callback rather than in an effect, which is
+ * how `useChartSize` reads a box for the same reason: the node is the only
+ * thing the measurement needs, so it is taken the moment React has one and
+ * taken again whenever it hands over another. A filter that cuts a thousand
+ * rows to fifty changes how tall the list is and not where it starts, so there
+ * is nothing to remeasure when the count moves.
+ * @param count - How many rows the list holds.
+ * @param estimatedRowHeight - What one row is worth until one has been drawn.
+ * @returns The rows to draw, the spacers standing in for the others, and the
+ * ref the list reports its position through.
+ */
+export declare function useVirtualWindowRows(count: number, estimatedRowHeight: number): VirtualWindowRows;
+//# sourceMappingURL=useVirtualWindowRows.d.ts.map

package/lib/panel/ui/useVirtualWindowRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualWindowRows.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/useVirtualWindowRows.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,4EAA4E;AAC5E,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;;OAIG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,kBAAkB,EAAE,MAAM,GACzB,iBAAiB,CA2BnB"}

package/lib/panel/ui/useVirtualWindowRows.js

@@ -0,0 +1,65 @@
+/**
+ * Drawing only the rows the page is showing, for a list that scrolls with it.
+ *
+ * `useVirtualRows` measures a scroll region of its own, which is what a panel
+ * beside a chart has. A table filling a tab has none: it flows down the document
+ * and the browser window is what scrolls it, so giving the list its own
+ * `overflow` would grow a second scrollbar inside the first and cap the table at
+ * whatever height it was handed — a layout change made to serve the virtualiser
+ * rather than the reader.
+ */
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useState } from 'react';
+import { rowSpacers } from "../core/rowSpacers.js";
+/**
+ * Draw only the rows the page is showing, however long the list is.
+ *
+ * The rows are measured against the window, so the list only has to say how far
+ * down the page it begins — which is what the virtualiser calls its scroll
+ * margin, and what `measureList` reports.
+ *
+ * That position is read in a ref callback rather than in an effect, which is
+ * how `useChartSize` reads a box for the same reason: the node is the only
+ * thing the measurement needs, so it is taken the moment React has one and
+ * taken again whenever it hands over another. A filter that cuts a thousand
+ * rows to fifty changes how tall the list is and not where it starts, so there
+ * is nothing to remeasure when the count moves.
+ * @param count - How many rows the list holds.
+ * @param estimatedRowHeight - What one row is worth until one has been drawn.
+ * @returns The rows to draw, the spacers standing in for the others, and the
+ * ref the list reports its position through.
+ */
+export function useVirtualWindowRows(count, estimatedRowHeight) {
+    const [scrollMargin, setScrollMargin] = useState(0);
+    const measureList = useCallback((node) => {
+        if (node === null)
+            return;
+        setScrollMargin(node.getBoundingClientRect().top + window.scrollY);
+    }, []);
+    const virtualizer = useWindowVirtualizer({
+        count,
+        estimateSize: () => estimatedRowHeight,
+        overscan: OVERSCAN,
+        scrollMargin,
+    });
+    const drawn = virtualizer.getVirtualItems();
+    const indices = new Array(drawn.length);
+    for (let position = 0; position < drawn.length; position++) {
+        indices[position] = drawn[position].index;
+    }
+    return {
+        indices,
+        ...rowSpacers(drawn, virtualizer.getTotalSize()),
+        measure: virtualizer.measureElement,
+        measureList,
+    };
+}
+/**
+ * How many rows are drawn beyond each end of the window.
+ *
+ * The same reasoning as `useVirtualRows`, and the same number: enough that a
+ * wheel gesture never reaches the edge of what was drawn before the next render
+ * has run.
+ */
+const OVERSCAN = 12;
+//# sourceMappingURL=useVirtualWindowRows.js.map

package/lib/panel/ui/useVirtualWindowRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualWindowRows.js","sourceRoot":"","sources":["../../../src/panel/ui/useVirtualWindowRows.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAcnD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAa,EACb,kBAA0B;IAE1B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,IAAwB,EAAE,EAAE;QAC3D,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAC1B,eAAe,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACrE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,oBAAoB,CAAC;QACvC,KAAK;QACL,YAAY,EAAE,GAAG,EAAE,CAAC,kBAAkB;QACtC,QAAQ,EAAE,QAAQ;QAClB,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,WAAW,CAAC,eAAe,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAI,KAAK,CAAS,KAAK,CAAC,MAAM,CAAC,CAAC;IAChD,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;QAC3D,OAAO,CAAC,QAAQ,CAAC,GAAI,KAAK,CAAC,QAAQ,CAAuB,CAAC,KAAK,CAAC;IACnE,CAAC;IAED,OAAO;QACL,OAAO;QACP,GAAG,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC;QAChD,OAAO,EAAE,WAAW,CAAC,cAAc;QACnC,WAAW;KACZ,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,EAAE,CAAC"}

package/lib/ui.d.ts

@@ -17,6 +17,7 @@ export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
 export * from './overlay/ui/index.ts';
+export * from './panel/ui/index.ts';
 export * from './parallel/ui/index.ts';
 export * from './pedagogy/ui/index.ts';
 export * from './periodic/ui/index.ts';

package/lib/ui.d.ts.map

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

package/lib/ui.js

@@ -17,6 +17,7 @@ export * from "./hooks/ui/index.js";
 export * from "./i18n/ui/index.js";
 export * from "./language/ui/index.js";
 export * from "./overlay/ui/index.js";
+export * from "./panel/ui/index.js";
 export * from "./parallel/ui/index.js";
 export * from "./pedagogy/ui/index.js";
 export * from "./periodic/ui/index.js";

package/lib/ui.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",
@@ -18,6 +18,7 @@
     "./build-info": "./lib/build-info.js",
     "./conformers": "./lib/conformers.js",
     "./core": "./lib/core.js",
+    "./ir": "./lib/ir.js",
     "./molecule3d": "./lib/molecule3d.js",
     "./orbital": "./lib/orbital.js",
     "./slides": "./lib/slides.js",
@@ -61,9 +62,14 @@
   },
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^3.5.20",
+    "@tanstack/react-virtual": "^3.14.13",
     "cheminfo-font": "^1.28.0",
+    "cheminfo-types": "^1.16.0",
+    "convert-to-jcamp": "^7.0.1",
     "intl-messageformat": "^11.2.15",
+    "ir-spectrum": "^4.2.0",
     "leven": "^4.1.0",
+    "ml-spectra-processing": "^14.35.1",
     "openchemlib": "^9.25.0",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
@@ -85,6 +91,7 @@
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
+    "jsdom": "^30.1.1",
     "ml-dataset-iris": "^1.2.1",
     "ml-pca": "^4.1.1",
     "ml-signal-processing": "^2.2.2",