@jbrowse/core 5.0.0-beta.7 → 5.0.0-beta.9

package/esm/ui/JexlFilterRowEditors.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/Close';
+import { Autocomplete, IconButton, ListItemText, MenuItem, TextField, } from '@mui/material';
+import { OPERATORS, stripJexlPrefix, typedField, withField, withOp, } from '../util/jexlFilterRows.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import MonospaceTextField from './MonospaceTextField.js';
+const useStyles = makeStyles()(theme => ({
+    row: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: theme.spacing(1),
+        marginBottom: theme.spacing(1),
+    },
+    field: {
+        width: 220,
+        flexShrink: 0,
+    },
+    op: {
+        width: 130,
+        flexShrink: 0,
+    },
+    value: {
+        flex: 1,
+    },
+    expression: {
+        width: 24,
+        flexShrink: 0,
+        textAlign: 'center',
+        fontStyle: 'italic',
+        fontFamily: 'serif',
+        fontSize: 18,
+        paddingTop: 6,
+        color: theme.palette.text.secondary,
+    },
+}));
+export function compileError(line, jexl) {
+    try {
+        jexl.compile(stripJexlPrefix(line.trim()));
+        return undefined;
+    }
+    catch (e) {
+        return e instanceof Error ? e.message : String(e);
+    }
+}
+function RemoveButton({ onClick }) {
+    return (_jsx(IconButton, { size: "small", "aria-label": "Remove condition", onClick: onClick, children: _jsx(CloseIcon, { fontSize: "small" }) }));
+}
+function ValueInput({ row, onChange, }) {
+    const { classes } = useStyles();
+    const { field, op, value } = row;
+    if (op === 'set' || op === '!set') {
+        return _jsx("div", { className: classes.value });
+    }
+    const suggestions = field?.values ?? [];
+    if (op === 'in') {
+        return (_jsx(Autocomplete, { className: classes.value, size: "small", multiple: true, freeSolo: true, autoSelect: true, options: suggestions, value: [value].flat(), onChange: (_, next) => {
+                onChange({ ...row, value: next });
+            }, renderInput: params => (_jsx(TextField, { ...params, placeholder: "Values, Enter after each" })) }));
+    }
+    const text = [value].flat()[0] ?? '';
+    return suggestions.length > 0 && op !== '~' ? (_jsx(Autocomplete, { className: classes.value, size: "small", freeSolo: true, options: suggestions, inputValue: text, onInputChange: (_, next) => {
+            onChange({ ...row, value: next });
+        }, renderInput: params => _jsx(TextField, { ...params, placeholder: "Value" }) })) : (_jsx(TextField, { className: classes.value, size: "small", placeholder: op === '~' ? 'Regular expression' : 'Value', type: field?.type === 'number' ? 'number' : 'text', disabled: !field, value: text, onChange: event => {
+            onChange({ ...row, value: event.target.value });
+        } }));
+}
+export function ConditionRowEditor({ row, choices, onChange, onRemove, }) {
+    const { classes } = useStyles();
+    const { field } = row;
+    const grouped = choices.some(choice => choice.group);
+    return (_jsxs("div", { className: classes.row, children: [_jsx(Autocomplete, { className: classes.field, size: "small", freeSolo: true, autoSelect: true, options: choices, groupBy: grouped ? choice => choice.group ?? '' : undefined, getOptionLabel: choice => typeof choice === 'string' ? choice : choice.label, getOptionKey: choice => typeof choice === 'string' ? choice : choice.key, isOptionEqualToValue: (a, b) => typeof b !== 'string' && a.key === b.key, value: field ?? null, onChange: (_, next) => {
+                    const chosen = typeof next !== 'string'
+                        ? next
+                        : next === field?.label
+                            ? field
+                            : (choices.find(choice => choice.label === next) ??
+                                typedField(next));
+                    if (chosen && chosen.key !== field?.key) {
+                        onChange(withField(row, chosen));
+                    }
+                }, renderOption: ({ key, ...props }, choice) => (_jsx("li", { ...props, children: _jsx(ListItemText, { primary: choice.label, secondary: choice.description }) }, key)), renderInput: params => _jsx(TextField, { ...params, placeholder: "Field" }) }), _jsx(TextField, { className: classes.op, select: true, size: "small", disabled: !field, value: row.op, helperText: field?.multi ? 'any value' : undefined, onChange: event => {
+                    onChange(withOp(row, event.target.value));
+                }, children: OPERATORS[field?.type ?? 'any'].map(({ op, label }) => (_jsx(MenuItem, { value: op, children: label }, op))) }), _jsx(ValueInput, { row: row, onChange: onChange }), _jsx(RemoveButton, { onClick: onRemove })] }));
+}
+export function TextRowEditor({ row, jexl, onChange, onRemove, }) {
+    const { classes } = useStyles();
+    return (_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.expression, title: "An expression the field pickers cannot show", children: "\u0192" }), _jsx(MonospaceTextField, { className: classes.value, variant: "standard", fullWidth: true, value: row.text, error: compileError(row.text, jexl), onChange: text => {
+                    onChange({ ...row, text });
+                } }), _jsx(RemoveButton, { onClick: onRemove })] }));
+}

package/esm/ui/LazyBaseTooltip.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+declare const Lazy: import("react").LazyExoticComponent<typeof import("./BaseTooltip.tsx").default>;
+export default function LazyBaseTooltip(props: ComponentProps<typeof Lazy>): import("react").JSX.Element;
+export {};

package/esm/ui/LazyBaseTooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+// The tooltip, behind its own chunk: @floating-ui is ~266KB and this is what
+// lets the ui barrel export it without putting that on the startup path. A
+// consumer that wants the eager component deep-imports './BaseTooltip.tsx'.
+const Lazy = lazy(() => import('./BaseTooltip.js'));
+export default function LazyBaseTooltip(props) {
+    return (_jsx(Suspense, { fallback: null, children: _jsx(Lazy, { ...props }) }));
+}

package/esm/ui/LoadingOverlay.js

@@ -129,7 +129,9 @@ export default function LoadingOverlay({ statusMessage, progress, isVisible, imm
     // swallow clicks/hovers over the top-center of every track it overlays. There
     // is no fade transition, so mount/unmount is visually identical to toggling
     // opacity anyway.
-    return shown ? (_jsx("span", { className: classes.overlay, "data-testid": "loading-overlay", children: _jsx("span", { className: classes.content, children: canceled ? (_jsxs("span", { className: classes.row, children: [_jsx("span", { className: classes.text, children: "Loading canceled" }), onRetry ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { size: "small", "data-testid": "loading-overlay-retry", onClick: () => {
+    // `loading-overlay` is a readiness selector meaning work in flight, so the
+    // canceled state, which is finished, publishes its own
+    return shown ? (_jsx("span", { className: classes.overlay, "data-testid": canceled ? 'loading-overlay-canceled' : 'loading-overlay', children: _jsx("span", { className: classes.content, children: canceled ? (_jsxs("span", { className: classes.row, children: [_jsx("span", { className: classes.text, children: "Loading canceled" }), onRetry ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { size: "small", "data-testid": "loading-overlay-retry", onClick: () => {
                                 onRetry();
                             }, children: _jsx(RefreshIcon, { fontSize: "inherit" }) }) })) : null] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: classes.row, children: [_jsxs("span", { className: classes.text, children: [progressLabel(statusMessage || 'Loading', progress), hasProgress ? null : _jsx(LoadingDots, {})] }), onCancel && cancelable ? (_jsx(Tooltip, { title: "Cancel", children: _jsx(IconButton, { size: "small", "data-testid": "loading-overlay-cancel", onClick: () => {
                                         onCancel();

package/esm/ui/MonospaceTextField.d.ts

@@ -1,9 +1,10 @@
 import type { TextFieldProps } from '@mui/material';
-export default function MonospaceTextField({ value, onChange, error, label, children, style, className, readOnly, variant, ...rest }: {
+export default function MonospaceTextField({ value, onChange, error, label, children, style, className, readOnly, inputTestId, helperText, variant, ...rest }: {
     value: string;
     onChange?: (value: string) => void;
     error?: unknown;
     label?: React.ReactNode;
     children?: React.ReactNode;
     readOnly?: boolean;
+    inputTestId?: string;
 } & Omit<TextFieldProps, 'value' | 'onChange' | 'error' | 'slotProps'>): import("react").JSX.Element;

package/esm/ui/MonospaceTextField.js

@@ -1,12 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputLabel, TextField, alpha } from '@mui/material';
 import { makeStyles } from '../util/tss-react/index.js';
 const monospaceFontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
 const useStyles = makeStyles()(theme => ({
-    error: {
-        color: theme.palette.error.main,
-        fontSize: '0.8em',
-    },
     container: {
         width: '100%',
         overflowX: 'auto',
@@ -18,20 +14,26 @@ const useStyles = makeStyles()(theme => ({
         background: alpha(theme.palette.error.main, 0.15),
     },
 }));
-// Monospace multiline TextField for code/jexl/JSON/sequence content. Turns red
-// on a parse error, renders an optional error banner above and an InputLabel,
-// and applies the shared monospace font stack to the input slot. `children`
+// Monospace multiline TextField for code/jexl/JSON/sequence content. A parse
+// error turns it red and takes the helper text's place under the field, so
+// the text does not move while it flips between valid and invalid. `children`
 // render below the field (e.g. a description or help button).
-export default function MonospaceTextField({ value, onChange, error, label, children, style, className, readOnly, variant = 'outlined', ...rest }) {
+export default function MonospaceTextField({ value, onChange, error, label, children, style, className, readOnly, inputTestId, helperText, variant = 'outlined', ...rest }) {
     const { classes, cx } = useStyles();
-    return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.container, children: [label ? _jsx(InputLabel, { shrink: true, children: label }) : null, _jsx(TextField, { ...rest, variant: variant, multiline: true, value: value, onChange: event => {
-                            onChange?.(event.target.value);
-                        }, className: cx(className, error ? classes.errorField : undefined), style: style, slotProps: {
-                            input: {
-                                readOnly,
-                                classes: {
-                                    input: classes.field,
-                                },
-                            },
-                        } }), children] })] }));
+    return (_jsxs("div", { className: classes.container, children: [label ? _jsx(InputLabel, { shrink: true, children: label }) : null, _jsx(TextField, { ...rest, variant: variant, multiline: true, error: !!error, helperText: error ? `${error}` : helperText, value: value, onChange: event => {
+                    onChange?.(event.target.value);
+                }, className: cx(className, error ? classes.errorField : undefined), style: style, slotProps: {
+                    input: {
+                        readOnly,
+                        classes: {
+                            input: classes.field,
+                        },
+                    },
+                    htmlInput: {
+                        'data-testid': inputTestId,
+                        spellCheck: false,
+                        autoCorrect: 'off',
+                        autoCapitalize: 'off',
+                    },
+                } }), children] }));
 }

package/esm/ui/PaletteContext.d.ts

@@ -39,10 +39,9 @@ export interface ThemeModeSession {
  * follow its dark mode mounts {@link SessionPaletteProvider}, which is this
  * hook and the provider in one.
  *
- * How the host knows its own mode is the host's business — an attribute on
- * `<html>`, a design-system context, a toggle in its own state. Pass no mode
- * and JBrowse follows `prefers-color-scheme` instead, tracking OS changes; a
- * host whose mode is only ever the OS preference has nothing to write.
+ * Pass no mode and JBrowse follows the page: its declared CSS `color-scheme`
+ * when that names one of light or dark, the OS preference otherwise, tracking
+ * both. A host whose mode lives somewhere a stylesheet cannot see passes it.
  *
  * **Both halves are load-bearing, which is why the pairing is published as a
  * component.** The palette is what *React* draws with; the config `theme` slot
@@ -68,11 +67,10 @@ export declare function useSessionPalette(session: ThemeModeSession, mode?: 'lig
  * </SessionPaletteProvider>
  * ```
  *
- * `mode` is optional. Left out, JBrowse follows `prefers-color-scheme` and
- * re-themes when the OS preference changes, through the same session write an
- * explicit mode takes — so a host whose dark mode *is* the OS preference mounts
- * this with a session and nothing else. Pass a mode as soon as the host has a
- * toggle of its own, since the media query cannot see it.
+ * `mode` is optional. Left out, JBrowse follows the page's declared
+ * `color-scheme` — so a host whose dark-mode toggle sets it, as most do, mounts
+ * this with a session and nothing else — and the OS preference where the page
+ * declares none.
  *
  * A component rather than a documented pair of calls because the pair has a
  * half that can be left out with nothing to show for it. `PaletteProvider` is

package/esm/ui/PaletteContext.js

@@ -55,12 +55,28 @@ function darkSchemeQuery() {
 function subscribeToColorScheme(onChange) {
     const media = darkSchemeQuery();
     media?.addEventListener('change', onChange);
+    const observer = typeof MutationObserver === 'function'
+        ? new MutationObserver(onChange)
+        : undefined;
+    observer?.observe(document.documentElement, { attributes: true });
     return () => {
         media?.removeEventListener('change', onChange);
+        observer?.disconnect();
     };
 }
+// The page's declared `color-scheme`, as the browser resolves it for form
+// controls: a page that declares only one of light or dark gets that one, and
+// one that declares both, or neither, gets the OS preference.
 function readColorScheme() {
-    return darkSchemeQuery()?.matches ? 'dark' : 'light';
+    const declared = getComputedStyle(document.documentElement)
+        .getPropertyValue('color-scheme')
+        .split(/\s+/)
+        .filter((word) => ['light', 'dark'].includes(word));
+    return declared.length === 1
+        ? declared[0]
+        : darkSchemeQuery()?.matches
+            ? 'dark'
+            : 'light';
 }
 const alwaysLight = () => 'light';
 const subscribeToNothing = () => () => { };
@@ -75,10 +91,9 @@ function useResolvedMode(mode) {
  * follow its dark mode mounts {@link SessionPaletteProvider}, which is this
  * hook and the provider in one.
  *
- * How the host knows its own mode is the host's business — an attribute on
- * `<html>`, a design-system context, a toggle in its own state. Pass no mode
- * and JBrowse follows `prefers-color-scheme` instead, tracking OS changes; a
- * host whose mode is only ever the OS preference has nothing to write.
+ * Pass no mode and JBrowse follows the page: its declared CSS `color-scheme`
+ * when that names one of light or dark, the OS preference otherwise, tracking
+ * both. A host whose mode lives somewhere a stylesheet cannot see passes it.
  *
  * **Both halves are load-bearing, which is why the pairing is published as a
  * component.** The palette is what *React* draws with; the config `theme` slot
@@ -110,11 +125,10 @@ export function useSessionPalette(session, mode) {
  * </SessionPaletteProvider>
  * ```
  *
- * `mode` is optional. Left out, JBrowse follows `prefers-color-scheme` and
- * re-themes when the OS preference changes, through the same session write an
- * explicit mode takes — so a host whose dark mode *is* the OS preference mounts
- * this with a session and nothing else. Pass a mode as soon as the host has a
- * toggle of its own, since the media query cannot see it.
+ * `mode` is optional. Left out, JBrowse follows the page's declared
+ * `color-scheme` — so a host whose dark-mode toggle sets it, as most do, mounts
+ * this with a session and nothing else — and the OS preference where the page
+ * declares none.
  *
  * A component rather than a documented pair of calls because the pair has a
  * half that can be left out with nothing to show for it. `PaletteProvider` is

package/esm/ui/RefNameAutocomplete/index.d.ts

@@ -1,12 +1,11 @@
 import type BaseResult from '../../TextSearch/BaseResults.ts';
 import type { AbstractSessionModel } from '../../util/index.ts';
-import type { StopToken } from '../../util/stopToken.ts';
 import type { CSSProperties, ReactNode } from 'react';
 declare const RefNameAutocomplete: ({ session, assemblyName, value, fetchResults, onSelect, onChange, minWidth, maxWidth, adornmentWidth, style, endAdornment, helperText, inputStyle, }: {
     session: AbstractSessionModel;
     assemblyName?: string;
     value?: string;
-    fetchResults: (query: string, stopToken?: StopToken) => Promise<BaseResult[]>;
+    fetchResults: (query: string, signal?: AbortSignal) => Promise<BaseResult[]>;
     onSelect?: (region: BaseResult) => void;
     onChange?: (val: string) => void;
     minWidth?: number;

package/esm/ui/RefNameAutocomplete/index.js

@@ -24,7 +24,7 @@ const RefNameAutocomplete = observer(function RefNameAutocomplete({ session, ass
     // the named parameters below cannot be destructured out of
     shouldSearch
         ? ['refNameSearch', assemblyName, debouncedSearch]
-        : null, async (_tag, _assembly, query, stopToken) => getDeduplicatedResult(await fetchResults(query, stopToken)), {
+        : null, async (_tag, _assembly, query, signal) => getDeduplicatedResult(await fetchResults(query, signal)), {
         onError: e => {
             session.notifyError(`${e}`, e);
         },

package/esm/ui/ScrollChrome.d.ts

@@ -1,14 +1,11 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
 /**
- * The chrome a display that scrolls its content virtually mounts over its
- * viewport: `ScrollEdgeShadow` saying content is hidden past an edge, and
- * `VerticalScrollbar` to reach it. Both read the same three numbers, so a
- * display hands them over once here. Renders nothing when the content fits.
+ * The chrome a virtually scrolled display mounts over its viewport: the edge
+ * shadow saying content is hidden, and the scrollbar to reach it. Renders
+ * nothing when the content fits.
  */
-export default function ScrollChrome({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top, }: {
-    scrollTop: number;
-    setScrollTop: (n: number) => void;
-    viewportHeight: number;
-    contentHeight: number;
+export default function ScrollChrome({ model, controlsId, top, }: {
+    model: VirtualScrollModel;
     /** `id` of the scrolled viewport element, for `aria-controls`. */
     controlsId: string;
     /** Viewport offset from the top, for a display with a sticky band above it. */

package/esm/ui/ScrollChrome.js

@@ -2,11 +2,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import ScrollEdgeShadow from './ScrollEdgeShadow.js';
 import VerticalScrollbar from './VerticalScrollbar.js';
 /**
- * The chrome a display that scrolls its content virtually mounts over its
- * viewport: `ScrollEdgeShadow` saying content is hidden past an edge, and
- * `VerticalScrollbar` to reach it. Both read the same three numbers, so a
- * display hands them over once here. Renders nothing when the content fits.
+ * The chrome a virtually scrolled display mounts over its viewport: the edge
+ * shadow saying content is hidden, and the scrollbar to reach it. Renders
+ * nothing when the content fits.
  */
-export default function ScrollChrome({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top = 0, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(ScrollEdgeShadow, { scrollTop: scrollTop, viewportHeight: viewportHeight, contentHeight: contentHeight, top: top }), _jsx(VerticalScrollbar, { scrollTop: scrollTop, setScrollTop: setScrollTop, viewportHeight: viewportHeight, contentHeight: contentHeight, controlsId: controlsId, top: top })] }));
+export default function ScrollChrome({ model, controlsId, top = 0, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollEdgeShadow, { model: model, top: top }), _jsx(VerticalScrollbar, { model: model, controlsId: controlsId, top: top })] }));
 }

package/esm/ui/ScrollEdgeShadow.d.ts

@@ -1,7 +1,7 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
 /**
  * The "there is more content this way" edge shadow for a display that scrolls
- * its content virtually — the same displays that mount `VerticalScrollbar`,
- * drawn from the same three numbers.
+ * its content virtually, mounted beside `VerticalScrollbar` by `ScrollChrome`.
  *
  * It answers a question the scrollbar technically also answers and in practice
  * does not: **is this track showing me all of its features?** A 6px thumb on a
@@ -33,12 +33,9 @@
  * — autogrow/fit, and the truncation warning for features that were dropped
  * rather than merely scrolled away). This says *that*; that says *what to do*.
  */
-export default function ScrollEdgeShadow({ scrollTop, viewportHeight, contentHeight, top, }: {
-    scrollTop: number;
-    /** the visible viewport height */
-    viewportHeight: number;
-    /** the full scrollable content height */
-    contentHeight: number;
+declare const ScrollEdgeShadow: ({ model, top, }: {
+    model: VirtualScrollModel;
     /** viewport offset from the top, for a display with a sticky band above it */
     top?: number;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default ScrollEdgeShadow;

package/esm/ui/ScrollEdgeShadow.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { clamp } from '../util/numericUtils.js';
 import { makeStyles } from '../util/tss-react/index.js';
 /**
@@ -7,17 +8,7 @@ import { makeStyles } from '../util/tss-react/index.js';
  * a display draws is ~7px in its most compact mode).
  */
 const SHADOW_HEIGHT = 16;
-/**
- * Sub-pixel slack before an edge counts as scrolled away from. A fit/grow mode
- * scale leaves float epsilon in `contentHeight`, and without this a track that
- * exactly fits draws a permanent bottom fade — the one thing this must never
- * do, since "nothing is hidden" is the state it exists to distinguish.
- *
- * `VerticalScrollbar` has no equivalent and so still draws a full-height thumb
- * on that same sub-pixel overflow. Deliberately not lifted there: a thumb
- * filling its track reads as "nothing to scroll", where a permanent fade reads
- * as "something is hidden" — the wrong answer rather than a redundant one.
- */
+// Slack at each edge, so a float residue in `scrollTop` doesn't mark one.
 const EPSILON = 0.5;
 const useStyles = makeStyles()(theme => {
     // The ink flips with the theme, and has to: a black shadow is invisible on
@@ -46,8 +37,7 @@ const useStyles = makeStyles()(theme => {
 });
 /**
  * The "there is more content this way" edge shadow for a display that scrolls
- * its content virtually — the same displays that mount `VerticalScrollbar`,
- * drawn from the same three numbers.
+ * its content virtually, mounted beside `VerticalScrollbar` by `ScrollChrome`.
  *
  * It answers a question the scrollbar technically also answers and in practice
  * does not: **is this track showing me all of its features?** A 6px thumb on a
@@ -79,20 +69,15 @@ const useStyles = makeStyles()(theme => {
  * — autogrow/fit, and the truncation warning for features that were dropped
  * rather than merely scrolled away). This says *that*; that says *what to do*.
  */
-export default function ScrollEdgeShadow({ scrollTop, viewportHeight, contentHeight, top = 0, }) {
+const ScrollEdgeShadow = observer(function ScrollEdgeShadow({ model, top = 0, }) {
     const { classes, cx } = useStyles();
-    const scrollableHeight = Math.max(0, contentHeight - viewportHeight);
+    const { scrollableHeight, scrollViewportHeight: viewportHeight } = model;
     if (scrollableHeight <= 0) {
         return null;
     }
-    const clamped = clamp(scrollTop, 0, scrollableHeight);
-    // never deeper than the viewport itself: the bottom edge is placed by
-    // subtracting this from the viewport's floor, so an unclamped SHADOW_HEIGHT
-    // on a viewport shorter than it puts the ink above the viewport's own top,
-    // over whatever pinned band the display stacked there. Reachable both ways —
-    // the variants displays floor availableHeight at 0 because lineZoneHeight can
-    // exceed the display height on its own, and the pileup's coverage band drags
-    // up to the same place.
+    const clamped = clamp(model.scrollTop, 0, scrollableHeight);
+    // never deeper than the viewport, or the bottom edge inks the band above it
     const height = Math.min(SHADOW_HEIGHT, viewportHeight);
     return (_jsxs(_Fragment, { children: [clamped > EPSILON ? (_jsx("div", { "data-testid": "scroll-edge-shadow-top", className: cx(classes.edge, classes.top), style: { top, height } })) : null, clamped < scrollableHeight - EPSILON ? (_jsx("div", { "data-testid": "scroll-edge-shadow-bottom", className: cx(classes.edge, classes.bottom), style: { top: top + viewportHeight - height, height } })) : null] }));
-}
+});
+export default ScrollEdgeShadow;

package/esm/ui/SettingsChangesTable.js

@@ -16,9 +16,9 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
-// Many config values are `{ type: 'x' }` discriminated unions (colorBy,
-// groupBy, sortedBy, ...). Show just the type when that is the whole object so
-// the table reads "methylation" rather than `{"type":"methylation"}`; richer
+// Many config values are `{ type: 'x' }` discriminated unions (sortedBy,
+// ...). Show just the type when that is the whole object so
+// the table reads "basePair" rather than `{"type":"basePair"}`; richer
 // objects keep full JSON so no detail is hidden.
 function isSoleTypeObject(v) {
     return ('type' in v && typeof v.type === 'string' && Object.keys(v).length === 1);

package/esm/ui/VerticalScrollbar.d.ts

@@ -1,45 +1,24 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
 /**
- * How much of a display's right edge this occupies while it is drawn.
- *
- * Exported because the things that have to *clear* it are drawn by the displays
- * that mount it, not by this file: the bottom-right indicator row and the
- * alignments coverage axis label. Both kept a private copy of the number (and
- * the alignments indicator row kept none at all, so its chips were drawn over
- * the thumb), which is a copy that can only be checked by looking at two files
- * at once.
+ * How much of a display's right edge this occupies while it is drawn, for the
+ * chrome the displays draw beside it.
  */
 export declare const VERTICAL_SCROLLBAR_WIDTH = 12;
-/**
- * Where the right edge of anything that has to sit *beside* the thumb goes: the
- * track's width plus a hair of air, so a chip or an axis label doesn't touch it.
- *
- * The four call sites all spelled `VERTICAL_SCROLLBAR_WIDTH + 2` inline, which
- * is the same copy the width constant was exported to stop — one addition
- * further along. The `+ 2` is a gap and belongs to the thing being cleared, not
- * to the scrollbar's own geometry, so it is named rather than folded into the
- * width (`right: 2` on the thumb is a different 2 and must not move with it).
- */
+/** Where the right edge of something sitting beside the thumb goes. */
 export declare const VERTICAL_SCROLLBAR_CLEARANCE: number;
 /**
- * Draggable vertical scrollbar overlay for canvas-backed displays that scroll
- * their content via a `scrollTop` value (alignments pileup, variant matrix).
- * Renders nothing when the content fits the viewport. The thumb geometry and
- * the drag-to-scroll mapping live here so the consumers don't each re-derive
- * them; the wheel handling stays per-display (their gesture semantics differ).
+ * Draggable vertical scrollbar overlay for a virtually scrolled display.
+ * Renders nothing when the content fits.
  *
- * Deliberately NOT a keyboard tab stop: the surrounding views have no working
- * keyboard navigation to reach the scrolled content anyway, so a per-track
- * `tabIndex` would only add noise to the tab order. The `role="scrollbar"` +
- * `aria-value*` semantics are kept — they cost nothing and expose scroll
- * position to pointer/voice assistive tech.
+ * Not a keyboard tab stop: the views have no keyboard navigation to reach the
+ * scrolled content, so `tabIndex` would only add noise. The `role="scrollbar"`
+ * semantics stay for pointer and voice assistive tech.
  */
-export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top, }: {
-    scrollTop: number;
-    setScrollTop: (n: number) => void;
-    viewportHeight: number;
-    contentHeight: number;
+declare const VerticalScrollbar: ({ model, controlsId, top, }: {
+    model: VirtualScrollModel;
     /** `id` of the scrolled viewport element, for `aria-controls`. */
     controlsId: string;
     /** Track offset from the top, for displays with a sticky band above it. */
     top?: number;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default VerticalScrollbar;