@jbrowse/core 4.3.0 → 5.0.0-beta.1

package/esm/ui/RefNameAutocomplete/util.js

@@ -0,0 +1,168 @@
+import BaseResult, { RefSequenceResult } from '../../TextSearch/BaseResults.js';
+import { measureText } from '../../util/index.js';
+import { MAX_GLOB_REGIONS, matchRefNames, } from '../../util/selectNamedRegions.js';
+// Above the 13.71px the TextField renders at, and left there deliberately. The
+// table is Helvetica's and the box draws in Roboto, so measuring the value at 14
+// comes out about 3% over what the browser paints — `ctgA:1..20,000` measures
+// 90.04 against a drawn 87.74 — and that margin is what lets the reserves below
+// be the chrome's exact width rather than a padded guess.
+const INPUT_FONT_SIZE = 14;
+// What the box spends on everything that is not the locstring, less the ⋮
+// button: the search icon (17), the adornment's right margin (7), and the input
+// padding and border (20). Measured in a built jbrowse-web, where
+// `products/jbrowse-web/browser-tests/probe-lgv-header-fit.ts` prints the box
+// decomposed — adding MUI's documented defaults up instead is what had this
+// reserving 100 for a 71px chrome, so every box stood 29px wider than its
+// contents.
+const ADORNMENT_RESERVE_PX = 44;
+// The ⋮ IconButton, only reserved when it is actually drawn
+const OVERFLOW_BUTTON_RESERVE_PX = 27;
+// quantize the computed width to this step so short locstring length changes (a
+// digit/comma appearing while panning/zooming) don't reflow the box and jitter
+// the surrounding header; also gives short values a little pleasant slack
+const WIDTH_STEP_PX = 30;
+// MUI Autocomplete is not virtualized, so a broad query that returns thousands
+// of hits would render thousands of DOM nodes; cap the visible list instead
+const MAX_OPTIONS = 100;
+export function cap(options) {
+    return options.length > MAX_OPTIONS
+        ? [
+            ...options.slice(0, MAX_OPTIONS),
+            {
+                isLimit: true,
+                result: new BaseResult({ label: 'keep typing for more results' }),
+            },
+        ]
+        : options;
+}
+/**
+ * One option carrying every match as a whitespace-separated locstring — the
+ * multi-region form the box already accepts, and the form it already displays
+ * once a view holds more than one region. So picking it takes exactly the path
+ * typing those names by hand takes (`parseLocStrings` → `navToLocations` →
+ * `setDisplayedRegions` + `showAllRegions`), and there is no bulk-navigation
+ * code anywhere to keep in step with the single-region kind.
+ *
+ * It goes first in the list, and it is the reason a glob belongs in the picker
+ * rather than in the locstring parser: the set is on screen, and counted, before
+ * it is committed to. A pattern typed straight at the parser would resolve to
+ * however many regions it happened to match, sight unseen.
+ */
+function selectAllOption(matches, pattern) {
+    return {
+        result: new BaseResult({
+            label: `Show all ${matches.length} regions matching ${pattern}`,
+            locString: matches.join(' '),
+        }),
+    };
+}
+/**
+ * The refName the typed text names outright, canonicalized — or undefined.
+ *
+ * Reading the name out of `allRefNames` before canonicalizing is what keeps
+ * `getCanonicalRefName`, which throws before aliases load, off a name the
+ * assembly never listed.
+ */
+function literalRefName(assembly, inputValue) {
+    const query = inputValue.toLowerCase();
+    const named = assembly?.allRefNames?.find(n => n.toLowerCase() === query);
+    return named === undefined
+        ? undefined
+        : (assembly?.getCanonicalRefName(named) ?? named);
+}
+/**
+ * The browse/pre-fetch fallback list, shown while a typed query is in flight and
+ * when it comes back empty (typed queries otherwise resolve through
+ * fetchResults).
+ *
+ * The matching itself is `matchRefNames`, in core beside the glob semantics,
+ * because Enter answers for the same typed text and the two must not each grow
+ * their own reading of it. What is left here is presentation: how many rows to
+ * materialize, and the bulk row.
+ *
+ * **AN EXACT REFNAME BEATS THE GLOB READING here too**, the rule
+ * `selectNamedRegions` states and `searchUtils` orders its glob branch after.
+ * `*` is a legal refName character and GRCh38's ALT decoys are HLA allele names,
+ * so `HLA-A*01:01:01:01` is a contig somebody typed in full — offering "Show all
+ * 4 regions matching HLA-A*01:01:01:01" above it is the box promising a set that
+ * Enter, on the same text, does not open. The individual matches still list: the
+ * pattern reading is not wrong, it is just not what leads.
+ *
+ * A glob may gather up to MAX_GLOB_REGIONS for that bulk row; a plain query
+ * never needs more than the visible list, so it keeps the tighter bound and the
+ * cost it always had. Collecting one past MAX_OPTIONS is what lets `cap` render
+ * its "keep typing" hint.
+ */
+export function getRefNameOptions(assembly, inputValue) {
+    const literal = literalRefName(assembly, inputValue);
+    const isGlob = literal === undefined && inputValue.includes('*');
+    const matches = matchRefNames(assembly, inputValue, isGlob ? MAX_GLOB_REGIONS : MAX_OPTIONS);
+    // hoisted only when the scan actually reached it — past the ceiling
+    // `matchRefNames` stops early, and a name with no region behind it is not an
+    // option anyone can pick
+    const ordered = literal !== undefined && matches.includes(literal)
+        ? [literal, ...matches.filter(refName => refName !== literal)]
+        : matches;
+    const options = ordered.slice(0, MAX_OPTIONS + 1).map(refName => ({
+        result: new RefSequenceResult({ refName, label: refName }),
+    }));
+    return isGlob && matches.length > 1 && matches.length <= MAX_GLOB_REGIONS
+        ? [selectAllOption(matches, inputValue), ...options]
+        : options;
+}
+// group hits sharing a display string into a single multi-result option (the
+// picker pops a dialog), leaving unique hits as plain options
+export function getDeduplicatedResult(results) {
+    const m = new Map();
+    for (const result of results) {
+        const key = result.getDisplayString();
+        const dupes = m.get(key);
+        if (dupes) {
+            dupes.push(result);
+        }
+        else {
+            m.set(key, [result]);
+        }
+    }
+    return [...m].map(([displayString, dupes]) => dupes.length === 1
+        ? { result: dupes[0] }
+        : {
+            result: new BaseResult({
+                displayString,
+                results: dupes,
+                label: displayString,
+            }),
+        });
+}
+// MUI freeSolo hands back the raw typed string when nothing in the list is
+// selected; wrap it so callers always get a BaseResult
+export function coerceToResult(option) {
+    return typeof option === 'string'
+        ? new BaseResult({ label: option })
+        : option.result;
+}
+export function getOptionLabel(option) {
+    return typeof option === 'string' ? option : option.result.getDisplayString();
+}
+/**
+ * What the end adornment occupies, and the number a caller passes as
+ * `adornmentWidth`.
+ *
+ * The ⋮ button is drawn for consumer-supplied rows as well as for the help one,
+ * so the reservation follows `menuItemCount || showHelp` — the same expression
+ * `EndAdornment` renders on. Both read it here rather than adding the constants
+ * up at the call site, which yields a box that has the button and is sized as
+ * if it did not.
+ */
+export function adornmentReservePx({ showHelp, menuItemCount = 0, }) {
+    return (ADORNMENT_RESERVE_PX +
+        (menuItemCount || showHelp ? OVERFLOW_BUTTON_RESERVE_PX : 0));
+}
+// sized to the committed locstring, not the in-progress typed text, so the box
+// doesn't jitter while typing a long query. Quantized to WIDTH_STEP_PX so small
+// length changes during navigation don't continuously reflow the box.
+export function getInputWidth(value, minWidth, maxWidth, adornmentWidth = ADORNMENT_RESERVE_PX + OVERFLOW_BUTTON_RESERVE_PX) {
+    const raw = measureText(value, INPUT_FONT_SIZE) + adornmentWidth;
+    const stepped = Math.ceil(raw / WIDTH_STEP_PX) * WIDTH_STEP_PX;
+    return Math.min(Math.max(stepped, minWidth), maxWidth);
+}

package/esm/ui/ReplaceCurrentViewButton.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The second way out of a launch dialog: put the view it builds in the slot the
+ * launching view occupies instead of appending it below. Offered by every launch
+ * that is anchored on what the current view is already showing — the synteny
+ * launches, "read vs ref" — where keeping both leaves two views of one place
+ * stacked and the taller of the two below the fold.
+ *
+ * Lives here rather than in one of those plugins because the gotcha it exists to
+ * carry belongs to `SubmitForm`, which is also here: an extra action is rendered
+ * inside that form, where an unset `type` means submit and one click would run
+ * BOTH actions.
+ *
+ * Pair it with `isSessionWithViewReplacement` — a session that cannot replace a
+ * view should not be offered the choice.
+ */
+export default function ReplaceCurrentViewButton({ disabled, onClick, }: {
+    disabled?: boolean;
+    onClick: () => void;
+}): import("react").JSX.Element;

package/esm/ui/ReplaceCurrentViewButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+/**
+ * The second way out of a launch dialog: put the view it builds in the slot the
+ * launching view occupies instead of appending it below. Offered by every launch
+ * that is anchored on what the current view is already showing — the synteny
+ * launches, "read vs ref" — where keeping both leaves two views of one place
+ * stacked and the taller of the two below the fold.
+ *
+ * Lives here rather than in one of those plugins because the gotcha it exists to
+ * carry belongs to `SubmitForm`, which is also here: an extra action is rendered
+ * inside that form, where an unset `type` means submit and one click would run
+ * BOTH actions.
+ *
+ * Pair it with `isSessionWithViewReplacement` — a session that cannot replace a
+ * view should not be offered the choice.
+ */
+export default function ReplaceCurrentViewButton({ disabled, onClick, }) {
+    return (_jsx(Button, { type: "button", variant: "contained", color: "primary", disabled: disabled, onClick: () => {
+            onClick();
+        }, children: "Replace current view" }));
+}

package/esm/ui/ResizeHandle.d.ts

@@ -1,9 +1,15 @@
-declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, onMouseDown, ...props }: {
-    onDrag: (lastFrameDistance: number, totalDistance: number) => number | undefined;
-    onMouseDown?: (event: React.MouseEvent) => void;
+import type React from 'react';
+declare function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical, bar, gain, className: originalClassName, onPointerDown, ...props }: {
+    onDrag: (distance: number) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
     vertical?: boolean;
-    flexbox?: boolean;
-    className?: string;
-    [props: string]: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+    bar?: boolean;
+    /**
+     * How many px this handle moves per px of the value it drags — see
+     * `useResizeDrag`. Pass it when the value is shared by several stacked bands
+     * and this handle sits below more than one of them.
+     */
+    gain?: number;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onDrag' | 'onDragStart' | 'onDragEnd'>): React.JSX.Element;
 export default ResizeHandle;

package/esm/ui/ResizeHandle.js

@@ -1,67 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { cx, makeStyles } from "../util/tss-react/index.js";
-const useStyles = makeStyles()({
+import { cx, makeStyles } from '../util/tss-react/index.js';
+import { useResizeDrag } from '../util/useResizeDrag.js';
+// Two kinds of handle, one ladder of weight between them. A handle that draws
+// nothing at rest reveals itself under the pointer at exactly the weight a
+// visible one rests at (`action.disabled`); a visible one then goes past that,
+// to `action.active` — the same resting/hover pair `VerticalScrollbar`'s thumb
+// uses.
+//
+// `action.selected` (0.08 light / 0.16 dark) used to be the hover for both, and
+// was too faint to answer "is this the thing I grab?" over a dense pileup — and
+// on a `bar`, which rests at 0.26, it made the handle go *fainter* under the
+// pointer, since `:hover` beats the plain class whatever the source order.
+const useStyles = makeStyles()(theme => ({
     horizontalHandle: {
         cursor: 'row-resize',
         width: '100%',
+        // stop the browser turning a touch-drag into a scroll/pan gesture so the
+        // pointer stream reaches us
+        touchAction: 'none',
+        '&:hover': { background: theme.palette.action.disabled },
     },
     verticalHandle: {
         cursor: 'col-resize',
         height: '100%',
+        touchAction: 'none',
+        '&:hover': { background: theme.palette.action.disabled },
     },
-    flexbox_verticalHandle: {
-        cursor: 'col-resize',
-        alignSelf: 'stretch',
-    },
-    flexbox_horizontalHandle: {
-        cursor: 'row-resize',
-        alignSelf: 'stretch',
-    },
-});
-function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
-    const [mouseDragging, setMouseDragging] = useState(false);
-    const initialPosition = useRef(0);
-    const prevPos = useRef(0);
+    // `bar` opt-in: the standard always-visible resize divider used at the bottom
+    // (or side) of views and tracks. Other call sites stay invisible until hover.
+    bar: { '&:hover': { background: theme.palette.action.active } },
+    horizontalBar: { height: 4, background: theme.palette.action.disabled },
+    verticalBar: { width: 4, background: theme.palette.action.disabled },
+}));
+function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar = false, gain, className: originalClassName, onPointerDown, ...props }) {
     const { classes } = useStyles();
-    const getPosition = useCallback((event) => vertical ? event.clientX : event.clientY, [vertical]);
-    useEffect(() => {
-        if (!mouseDragging) {
-            return;
-        }
-        function mouseMove(event) {
-            event.preventDefault();
-            const pos = getPosition(event);
-            const totalDistance = initialPosition.current - pos;
-            const lastFrameDistance = pos - prevPos.current;
-            prevPos.current = pos;
-            onDrag(lastFrameDistance, totalDistance);
-        }
-        function mouseUp() {
-            setMouseDragging(false);
-        }
-        window.addEventListener('mousemove', mouseMove, true);
-        window.addEventListener('mouseup', mouseUp, true);
-        return () => {
-            window.removeEventListener('mousemove', mouseMove, true);
-            window.removeEventListener('mouseup', mouseUp, true);
-        };
-    }, [mouseDragging, onDrag, getPosition]);
-    const handleMouseDown = useCallback((event) => {
-        event.preventDefault();
-        const pos = getPosition(event);
-        initialPosition.current = pos;
-        prevPos.current = pos;
-        setMouseDragging(true);
-        onMouseDown?.(event);
-    }, [getPosition, onMouseDown]);
-    const className = flexbox
-        ? vertical
-            ? classes.flexbox_verticalHandle
-            : classes.flexbox_horizontalHandle
-        : vertical
-            ? classes.verticalHandle
-            : classes.horizontalHandle;
-    return (_jsx("div", { "data-resizer": "true", onMouseDown: handleMouseDown, className: cx(originalClassName, className), ...props }));
+    // The gesture, including the per-frame coalescing, the delta measurement and
+    // the `data-gesture-owner` marker that keeps ancestor drags (the LGV
+    // click-drag pan, MAF's drag-selection) off this press. All of it is published
+    // as a hook rather than living here, because an embedder drawing their own
+    // track divider needs exactly this and none of the styling below.
+    const handleProps = useResizeDrag({
+        onDrag,
+        onDragStart,
+        onDragEnd,
+        vertical,
+        gain,
+    });
+    return (_jsx("div", { ...props, className: cx(originalClassName, vertical ? classes.verticalHandle : classes.horizontalHandle, bar && classes.bar, bar && (vertical ? classes.verticalBar : classes.horizontalBar)), ...handleProps, onPointerDown: event => {
+            handleProps.onPointerDown(event);
+            onPointerDown?.(event);
+        } }));
 }
 export default ResizeHandle;

package/esm/ui/ReturnToImportFormDialog.d.ts

@@ -3,5 +3,5 @@ declare const ReturnToImportFormDialog: ({ model, handleClose, }: {
         clearView: () => void;
     };
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ReturnToImportFormDialog;

package/esm/ui/ReturnToImportFormDialog.js

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogContentText } from '@mui/material';
 import { observer } from 'mobx-react';
-import Dialog from "./Dialog.js";
+import ConfirmDialog from './ConfirmDialog.js';
 const ReturnToImportFormDialog = observer(function ReturnToImportFormDialog({ model, handleClose, }) {
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence", children: [_jsx(DialogContent, { children: _jsx(Typography, { children: "Are you sure you want to return to the import form? This will lose your current view" }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
-                            model.clearView();
-                            handleClose();
-                        }, variant: "contained", color: "primary", autoFocus: true, children: "OK" }), _jsx(Button, { onClick: () => {
-                            handleClose();
-                        }, color: "secondary", variant: "contained", children: "Cancel" })] })] }));
+    return (_jsx(ConfirmDialog, { open: true, title: "Return to import form?", onCancel: handleClose, onSubmit: () => {
+            model.clearView();
+            handleClose();
+        }, children: _jsx(DialogContentText, { children: "Are you sure you want to return to the import form? This will lose your current view." }) }));
 });
 export default ReturnToImportFormDialog;

package/esm/ui/SanitizedHTML.d.ts

@@ -1,4 +1,9 @@
+declare global {
+    interface Element {
+        setHTML?(html: string): void;
+    }
+}
 export default function SanitizedHTML({ html: pre, className, }: {
     className?: string;
     html: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/SanitizedHTML.js

@@ -1,46 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, lazy, useLayoutEffect, useRef } from 'react';
-import escapeHTML from 'escape-html';
-import { linkify } from "../util/index.js";
-const htmlTags = [
-    'a',
-    'b',
-    'br',
-    'code',
-    'div',
-    'em',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'i',
-    'img',
-    'li',
-    'mark',
-    'p',
-    'pre',
-    'span',
-    'small',
-    'strong',
-    'table',
-    'tbody',
-    'sup',
-    'sub',
-    'td',
-    'tfoot',
-    'th',
-    'thead',
-    'tr',
-    'u',
-    'ul',
-];
-const DOMPurifySanitizedHTML = lazy(() => import("./DOMPurifySanitizedHTML.js"));
-const full = new RegExp(htmlTags.map(tag => String.raw `<${tag}\b[^>]*>`).join('|'), 'i');
-function isHTML(str) {
-    return full.test(str);
-}
+import { escapeHTML, looksLikeHTML } from '../util/htmlText.js';
+import { linkify } from '../util/index.js';
+import { rewriteExternalAnchors } from './rewriteExternalAnchors.js';
+const DOMPurifySanitizedHTML = lazy(() => import('./DOMPurifySanitizedHTML.js'));
 function needsSanitization(str) {
     return str.includes('<') || str.includes('://');
 }
@@ -50,11 +13,8 @@ function SetHTML({ value, className }) {
         const el = spanRef.current;
         if (el) {
             try {
-                el.setHTML(value);
-                for (const a of el.querySelectorAll('a')) {
-                    a.setAttribute('rel', 'noopener noreferrer');
-                    a.setAttribute('target', '_blank');
-                }
+                el.setHTML?.(value);
+                rewriteExternalAnchors(el);
             }
             catch (e) {
                 console.error(e);
@@ -69,7 +29,7 @@ export default function SanitizedHTML({ html: pre, className, }) {
         return _jsx("span", { className: className, children: str });
     }
     const html = linkify(str);
-    const value = isHTML(html) ? html : escapeHTML(html);
+    const value = looksLikeHTML(html) ? html : escapeHTML(html);
     if (typeof Element !== 'undefined' && Element.prototype.setHTML) {
         return _jsx(SetHTML, { value: value, className: className });
     }

package/esm/ui/ScrollEdgeShadow.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ * 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
+ * dense track is missed even by someone looking for it — GMOD/jbrowse-components#5589,
+ * and the figure review that read `k562_bcr_abl_split` past a scrolled-away
+ * pileup twice.
+ *
+ * Two properties are what keep it from being noise, and both are worth keeping
+ * if this is ever restyled:
+ *
+ * - **It costs nothing when nothing is hidden.** No content past an edge, no
+ *   fade at that edge; a track that fits draws neither. So it is a readout of
+ *   state, not a decoration — which a recoloured bottom border could not be
+ *   (and which would also need `showTrackOutlines`, an option the user can turn
+ *   off, to have a border to recolour).
+ * - **It says which way.** Scrolled to the bottom, the bottom fade goes and the
+ *   top one appears, so "am I at the end" is answerable without scrolling.
+ *
+ * Shadowing with ink rather than dissolving the content into the track's own
+ * background is a decision, not the obvious default, and the reason is the
+ * sparse case: a dissolve over empty background is background-over-background,
+ * so a track whose last visible strip happens to be blank — with rows below it —
+ * is marked by nothing at all. Ink marks the edge whatever is under it. The cost
+ * is that the dark theme's white ink brightens the last row of a dense pileup
+ * rather than darkening it; both were drawn and compared, and covering the
+ * sparse case won.
+ *
+ * The actionable half lives in the bottom-right corner (`TrackHeightIndicator`
+ * — 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;
+    /** viewport offset from the top, for a display with a sticky band above it */
+    top?: number;
+}): import("react").JSX.Element | null;

package/esm/ui/ScrollEdgeShadow.js

@@ -0,0 +1,98 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp } from '../util/numericUtils.js';
+import { makeStyles } from '../util/tss-react/index.js';
+/**
+ * How deep each edge fade is. Enough to read as a soft edge under the content
+ * rather than as a rule, not so deep that it dims a whole row (the shortest row
+ * 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.
+ */
+const EPSILON = 0.5;
+const useStyles = makeStyles()(theme => {
+    // The ink flips with the theme, and has to: a black shadow is invisible on
+    // the dark theme's #121212 canvas, which is the same trap the scrollbar thumb
+    // hit before it became theme-aware.
+    const ink = theme.palette.mode === 'dark' ? '255,255,255' : '0,0,0';
+    // 0.18, down from the 0.3 this shipped at: over a dense pileup the deep end
+    // of the ramp read as a band of its own and drew the eye before the features
+    // did, which inverts what it is for. It only has to be findable when someone
+    // asks "is that everything?", not noticeable when nobody asked.
+    const from = `rgba(${ink},0.18)`;
+    // NOT the `transparent` keyword, which is transparent BLACK: interpolating to
+    // it puts a grey cast through the middle of the ramp, and on the dark theme's
+    // white ink that is the whole ramp.
+    const to = `rgba(${ink},0)`;
+    return {
+        edge: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            pointerEvents: 'none',
+        },
+        top: { background: `linear-gradient(to bottom, ${from}, ${to})` },
+        bottom: { background: `linear-gradient(to top, ${from}, ${to})` },
+    };
+});
+/**
+ * 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.
+ *
+ * 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
+ * dense track is missed even by someone looking for it — GMOD/jbrowse-components#5589,
+ * and the figure review that read `k562_bcr_abl_split` past a scrolled-away
+ * pileup twice.
+ *
+ * Two properties are what keep it from being noise, and both are worth keeping
+ * if this is ever restyled:
+ *
+ * - **It costs nothing when nothing is hidden.** No content past an edge, no
+ *   fade at that edge; a track that fits draws neither. So it is a readout of
+ *   state, not a decoration — which a recoloured bottom border could not be
+ *   (and which would also need `showTrackOutlines`, an option the user can turn
+ *   off, to have a border to recolour).
+ * - **It says which way.** Scrolled to the bottom, the bottom fade goes and the
+ *   top one appears, so "am I at the end" is answerable without scrolling.
+ *
+ * Shadowing with ink rather than dissolving the content into the track's own
+ * background is a decision, not the obvious default, and the reason is the
+ * sparse case: a dissolve over empty background is background-over-background,
+ * so a track whose last visible strip happens to be blank — with rows below it —
+ * is marked by nothing at all. Ink marks the edge whatever is under it. The cost
+ * is that the dark theme's white ink brightens the last row of a dense pileup
+ * rather than darkening it; both were drawn and compared, and covering the
+ * sparse case won.
+ *
+ * The actionable half lives in the bottom-right corner (`TrackHeightIndicator`
+ * — 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 { classes, cx } = useStyles();
+    const scrollableHeight = Math.max(0, contentHeight - viewportHeight);
+    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 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] }));
+}

package/esm/ui/ScrollZoomToggle.d.ts

@@ -0,0 +1,38 @@
+/**
+ * What a view reads and writes to offer scroll-to-zoom. Duck-typed rather than
+ * a model, like the rest of the wheel-zoom layer — every view here delegates
+ * both to the session, which is where the preference lives.
+ */
+export interface ScrollZoomToggleModel {
+    scrollZoom: boolean;
+    setScrollZoom: (flag: boolean) => void;
+}
+/**
+ * The persistent control for scroll-to-zoom, shared by every view that has one.
+ *
+ * **Carries its own label.** Scroll-to-zoom is off by default, so a wheel over
+ * the tracks does nothing until someone finds this — and the words in the header
+ * are the whole of how they find it. An icon alone is not findable, whichever
+ * icon: the glyph says "zoom" at best and nothing at all about the wheel. The
+ * tooltip is where ctrl/⌘+scroll, which zooms whatever the preference says, is
+ * named.
+ *
+ * **And it pulses when the preference changes.** The other ways to write it are
+ * somewhere else on the screen — a view menu, the Preferences dialog — so the
+ * moment the setting is learned is also the moment this button is not being
+ * looked at. The ring is what connects the two: it says the thing you just
+ * turned on lives *here*, which is what a user who wants it back off has to
+ * know. Its own click pulses too — the answer to "where is this" should not
+ * depend on which of the several places wrote it, and the other views' copies
+ * of this button pulse with it, which is the preference being session-wide made
+ * visible.
+ *
+ * `iconOnly` is for a header where this sits inside a run of icon buttons (the
+ * comparative views), where a single labelled button reads as a mistake rather
+ * than as emphasis. The tooltip carries the same words either way.
+ */
+declare const ScrollZoomToggle: ({ model, iconOnly, }: {
+    model: ScrollZoomToggleModel;
+    iconOnly?: boolean;
+}) => import("react").JSX.Element;
+export default ScrollZoomToggle;