react-cheminfo 0.27.0 → 0.29.0

package/lib/panel/ui/Section.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One titled block of a dialog.
+ * @param props - Component props.
+ * @returns The section.
+ */
+export function Section(props) {
+    const { title, children } = props;
+    return (_jsxs("div", { style: sectionStyle, children: [_jsx("div", { style: sectionTitleStyle, children: title }), children] }));
+}
+/**
+ * A link out of a dialog, opened away from the editor so a drawing in progress
+ * or a spectrum being read is never lost to a click.
+ * @param props - Component props.
+ * @returns The link.
+ */
+export function Link(props) {
+    const { href, children } = props;
+    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: linkStyle, children: children }));
+}
+const sectionStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+};
+const sectionTitleStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.04em',
+    opacity: 0.6,
+};
+// Spelled out rather than left to the page: nothing says a host application
+// styles its anchors, and a credit nobody can tell is a link is not a credit.
+const linkStyle = {
+    // The site's own accent, and the inherited ink on a page that declares none —
+    // the underline is what makes it a link either way.
+    color: 'var(--accent, inherit)',
+    textDecoration: 'underline',
+};
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../src/panel/ui/Section.tsx"],"names":[],"mappings":";AASA;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,eAAK,KAAK,EAAE,YAAY,aACtB,cAAK,KAAK,EAAE,iBAAiB,YAAG,KAAK,GAAO,EAC3C,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAOD;;;;;GAKG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACjC,OAAO,CACL,YAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,KAAK,EAAE,SAAS,YACtE,QAAQ,GACP,CACL,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACE,CAAC;AAEX,MAAM,iBAAiB,GAAG;IACxB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,QAAQ;IACvB,OAAO,EAAE,GAAG;CACJ,CAAC;AAEX,4EAA4E;AAC5E,8EAA8E;AAC9E,MAAM,SAAS,GAAG;IAChB,8EAA8E;IAC9E,oDAAoD;IACpD,KAAK,EAAE,wBAAwB;IAC/B,cAAc,EAAE,WAAW;CACnB,CAAC"}

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

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import type { ActivityBarItemProps } from 'react-science/ui';
+/** What a rail reads about one panel, wherever that rail is drawn. */
+export interface PanelDescriptor {
+    /** Identity, as the activity bar and the list of open panels address it. */
+    id: string;
+    /** What the header says, and what the icon's tooltip reads. */
+    title: string;
+    /** The icon stacked in the rail. */
+    icon: ActivityBarItemProps['icon'];
+}
+export interface SidePanelStackProps<TPanel extends PanelDescriptor> {
+    /** Every panel on offer, in the order their icons are stacked. */
+    panels: readonly TPanel[];
+    /** Which of them are open, named as each editor's own view names them. */
+    openPanelIds: readonly string[];
+    /**
+     * Called with the panel whose close cross was pressed. It is the id of one of
+     * `panels` rather than any string, so an editor whose panels are a fixed set
+     * hands its own `togglePanel` straight in.
+     * @param id - Identity of that panel.
+     */
+    onClose: (id: TPanel['id']) => void;
+    /**
+     * What to draw inside one panel.
+     * @param panel - The panel to draw.
+     * @returns Its body.
+     */
+    children: (panel: TPanel) => ReactNode;
+}
+/**
+ * The panels that are open, stacked one under the other down the side.
+ *
+ * Every open panel gets a share of the height rather than a turn: the things
+ * they hold are read together — which spectrum is selected and what its peaks
+ * are, the residues to pick from and what the drawing adds up to — so closing
+ * one to see the other would be a step backwards. A header click still folds a
+ * single panel away, and shift-click folds every other one.
+ *
+ * They are drawn in the order the rail stacks their icons rather than the order
+ * they were switched on, so a panel always comes back where it was.
+ *
+ * The header carries the shell's own two gestures and nothing about what the
+ * panel holds: the chevron that folds it away and the cross that closes it.
+ * What a panel switches on and off is a toolbar at the top of its own body, so
+ * it travels with the panel when it is folded, reordered or lent to another
+ * editor, and every header in every editor reads the same — which is the reason
+ * this is one component rather than one per editor.
+ *
+ * The chevron is there because nothing else says which panels are folded. The
+ * accordion draws every header identically and hides only the body, so a side
+ * of four closed panels and a side of four open ones differ by white space, and
+ * a reader looking for a panel that is already open reaches for its icon and
+ * closes it. It is a real button rather than a glyph because the header's own
+ * click never reaches the toolbar — clicks there are stopped so the close cross
+ * does not also fold the panel — so a chevron that did nothing when pressed
+ * would be an affordance that lies.
+ * @param props - Component props.
+ * @returns The stack.
+ */
+export declare function SidePanelStack<TPanel extends PanelDescriptor>(props: SidePanelStackProps<TPanel>): import("react").JSX.Element;
+//# sourceMappingURL=SidePanelStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelStack.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7D,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,eAAe;IACjE,kEAAkE;IAClE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,0EAA0E;IAC1E,YAAY,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,MAAM,SAAS,eAAe,EAC3D,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,+BA2CnC"}

package/lib/panel/ui/SidePanelStack.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionProvider, Button } from 'react-science/ui';
+/**
+ * The panels that are open, stacked one under the other down the side.
+ *
+ * Every open panel gets a share of the height rather than a turn: the things
+ * they hold are read together — which spectrum is selected and what its peaks
+ * are, the residues to pick from and what the drawing adds up to — so closing
+ * one to see the other would be a step backwards. A header click still folds a
+ * single panel away, and shift-click folds every other one.
+ *
+ * They are drawn in the order the rail stacks their icons rather than the order
+ * they were switched on, so a panel always comes back where it was.
+ *
+ * The header carries the shell's own two gestures and nothing about what the
+ * panel holds: the chevron that folds it away and the cross that closes it.
+ * What a panel switches on and off is a toolbar at the top of its own body, so
+ * it travels with the panel when it is folded, reordered or lent to another
+ * editor, and every header in every editor reads the same — which is the reason
+ * this is one component rather than one per editor.
+ *
+ * The chevron is there because nothing else says which panels are folded. The
+ * accordion draws every header identically and hides only the body, so a side
+ * of four closed panels and a side of four open ones differ by white space, and
+ * a reader looking for a panel that is already open reaches for its icon and
+ * closes it. It is a real button rather than a glyph because the header's own
+ * click never reaches the toolbar — clicks there are stopped so the close cross
+ * does not also fold the panel — so a chevron that did nothing when pressed
+ * would be an affordance that lies.
+ * @param props - Component props.
+ * @returns The stack.
+ */
+export function SidePanelStack(props) {
+    const { panels, openPanelIds, onClose, children } = props;
+    const open = panels.filter((panel) => openPanelIds.includes(panel.id));
+    return (_jsx(AccordionProvider, { children: _jsx(Accordion, { children: open.map((panel) => (_jsx(Accordion.Item, { id: panel.id, title: panel.title, defaultOpen: true, renderToolbar: ({ isOpen, controls }) => (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "minimal", icon: isOpen ? 'chevron-down' : 'chevron-right', "data-panel-open": isOpen, "aria-expanded": isOpen, "aria-label": `${isOpen ? 'Fold' : 'Unfold'} the ${panel.title.toLowerCase()} panel`, tooltipProps: {
+                                content: isOpen ? 'Fold this panel away' : 'Unfold it',
+                            }, onClick: () => controls.toggle() }), _jsx(Button, { variant: "minimal", icon: "cross", tooltipProps: { content: 'Close this panel' }, "aria-label": `Close the ${panel.title.toLowerCase()} panel`, onClick: () => onClose(panel.id) })] })), children: children(panel) }, panel.id))) }) }));
+}
+//# sourceMappingURL=SidePanelStack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelStack.js","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelStack.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAgCxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAkC;IAElC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,SAAS,cACP,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnB,KAAC,SAAS,CAAC,IAAI,IAEb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,QACX,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACvC,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,qBAC9B,MAAM,mBACR,MAAM,gBACT,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,QAAQ,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAClF,YAAY,EAAE;gCACZ,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,WAAW;6BACvD,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,GAChC,EACF,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,gBACjC,aAAa,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAC1D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAChC,IACD,CACJ,YAEA,QAAQ,CAAC,KAAK,CAAC,IA3BX,KAAK,CAAC,EAAE,CA4BE,CAClB,CAAC,GACQ,GACM,CACrB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,33 @@
+export interface SpectrumColorSwatchProps {
+    /** The colour the spectrum is drawn in. */
+    color: string;
+    /** What the list calls it, for the labels a screen reader reads out. */
+    name: string;
+    /** Called with the colour that was picked. */
+    onPick: (color: string) => void;
+}
+/**
+ * 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 declare function SpectrumColorSwatch(props: SpectrumColorSwatchProps): import("react").JSX.Element;
+//# sourceMappingURL=SpectrumColorSwatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpectrumColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SpectrumColorSwatch.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BA8ClE"}

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