@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/RefNameAutocomplete/SearchOption.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { groupByPlace } from '../../TextSearch/places.js';
+import { getTrackName } from '../../util/tracks.js';
+import { makeStyles } from '../../util/tss-react/index.js';
+import { optionDetail } from './util.js';
+const useStyles = makeStyles()(theme => ({
+    row: {
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: theme.spacing(2),
+    },
+    label: {
+        flexShrink: 0,
+        whiteSpace: 'nowrap',
+    },
+    detail: {
+        marginLeft: 'auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontSize: '0.8em',
+        color: theme.palette.text.secondary,
+    },
+}));
+const SearchOption = observer(function SearchOption({ props, option, session, assembly, }) {
+    const { classes, cx } = useStyles();
+    const { key, className, ...rest } = props;
+    const { result } = option;
+    const detail = optionDetail(result, {
+        trackNameOf: trackId => {
+            const conf = session.getTrackById(trackId);
+            return conf ? getTrackName(conf, session) : undefined;
+        },
+        lengthOf: refName => {
+            const index = assembly?.refNameToIndex?.get(refName);
+            const region = index === undefined ? undefined : assembly?.regions?.[index];
+            return region ? region.end - region.start : undefined;
+        },
+        placesOf: results => groupByPlace(results, assembly),
+    });
+    return (_jsxs("li", { className: cx(className, classes.row), ...rest, children: [_jsx("span", { className: classes.label, children: result.getDisplayString() }), detail ? _jsx("span", { className: classes.detail, children: detail }) : null] }, key));
+});
+export default SearchOption;

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

@@ -0,0 +1,21 @@
+import type BaseResult from '../../TextSearch/BaseResults.ts';
+import type { AbstractSessionModel } from '../../util/index.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, signal?: AbortSignal) => Promise<BaseResult[]>;
+    onSelect?: (region: BaseResult) => void;
+    onChange?: (val: string) => void;
+    minWidth?: number;
+    maxWidth?: number;
+    adornmentWidth?: number;
+    style?: CSSProperties;
+    endAdornment?: ReactNode;
+    helperText?: string;
+    inputStyle?: CSSProperties;
+}) => import("react").JSX.Element;
+export default RefNameAutocomplete;
+export { default as RefNameAutocompleteEndAdornment } from './EndAdornment.tsx';
+export { adornmentReservePx, getInputWidth } from './util.ts';

package/esm/ui/RefNameAutocomplete/index.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { useDebounce } from '../../util/hooks.js';
+import { useFetch } from '../../util/useFetch.js';
+import SearchOption from './SearchOption.js';
+import { cap, coerceToResult, getDeduplicatedResult, getInputWidth, getOptionLabel, getRefNameOptions, } from './util.js';
+const RefNameAutocomplete = observer(function RefNameAutocomplete({ session, assemblyName, value, fetchResults, onSelect, onChange, minWidth = 200, maxWidth = 550, adornmentWidth, style, endAdornment, helperText, inputStyle, }) {
+    const { assemblyManager } = session;
+    const externalValue = value ?? '';
+    // MUI Autocomplete tracks `inputValue` (displayed text) separately from
+    // `value` (selected item). We echo every MUI event into `inputValue` so
+    // external value changes, blur snap-back, and keystrokes all stay in sync.
+    const [inputValue, setInputValue] = useState(externalValue);
+    // `searchQuery` drives the fetch and filter — only updated on real typing
+    // so blur/reset events don't trigger phantom searches.
+    const [searchQuery, setSearchQuery] = useState('');
+    const debouncedSearch = useDebounce(searchQuery, 50);
+    const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
+    const shouldSearch = !!assemblyName && debouncedSearch !== '';
+    const { data: searchOptions, isLoading } = useFetch(
+    // `as const` so the key is a fixed-arity tuple: useFetch derives the
+    // fetcher's parameter list from it, and a plain array widens to a variadic
+    // the named parameters below cannot be destructured out of
+    shouldSearch
+        ? ['refNameSearch', assemblyName, debouncedSearch]
+        : null, async (_tag, _assembly, query, signal) => getDeduplicatedResult(await fetchResults(query, signal)), {
+        onError: e => {
+            session.notifyError(`${e}`, e);
+        },
+    });
+    const width = getInputWidth(externalValue, minWidth, maxWidth, adornmentWidth);
+    const hasSearchResults = !!searchOptions?.length;
+    return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, clearOnBlur: true, style: { ...style, width }, value: externalValue, loading: isLoading, inputValue: inputValue, onInputChange: (_event, newInputValue, reason) => {
+            setInputValue(newInputValue);
+            if (reason === 'input') {
+                setSearchQuery(newInputValue);
+                onChange?.(newInputValue);
+            }
+            else if (reason === 'blur' || reason === 'selectOption') {
+                // clear so stale results don't linger; skip 'reset' because MUI
+                // fires that during its own re-render loop and clearing it kills
+                // an in-flight search
+                setSearchQuery('');
+            }
+        }, loadingText: "loading results", onChange: (_event, selectedOption) => {
+            if (selectedOption) {
+                onSelect?.(coerceToResult(selectedOption));
+                // snap back to the current loc; if navigation succeeds the parent
+                // updates `value` and MUI's 'reset' event will reflect the new loc
+                setInputValue(externalValue);
+            }
+        }, 
+        // built inside the branch rather than every render: it scans the
+        // assembly's regions and materializes up to the cap in option objects,
+        // which is wasted work on the keystrokes that do have search results
+        options: hasSearchResults
+            ? searchOptions
+            : getRefNameOptions(assembly, searchQuery), getOptionDisabled: option => !!option.isLimit, 
+        // both sources arrive already matched against a query — searchOptions
+        // server-side for `debouncedSearch`, regionOptions live for `searchQuery`
+        // — so MUI must not re-filter them (its default filter would drop hits
+        // matching on a description rather than the display string). Only cap.
+        filterOptions: cap, renderInput: ({ slotProps: paramSlotProps, ...restParams }) => (_jsx(TextField, { ...restParams, variant: "outlined", size: "small", 
+            // override global theme default (margin="dense") whose asymmetric
+            // 8/4 top/bottom margins offset the input 2px downward
+            margin: "none", helperText: helperText, slotProps: {
+                ...paramSlotProps,
+                input: {
+                    ...paramSlotProps.input,
+                    style: inputStyle,
+                    ...(endAdornment !== undefined && { endAdornment }),
+                },
+            }, placeholder: "Search for location" })), getOptionLabel: getOptionLabel, slotProps: {
+            popper: {
+                placement: 'bottom-start',
+                style: { width: 'max-content', minWidth: width, maxWidth: 480 },
+            },
+        }, renderOption: (props, option) => (_jsx(SearchOption, { props: props, option: option, session: session, assembly: assembly }, props.key)) }));
+});
+export default RefNameAutocomplete;
+export { default as RefNameAutocompleteEndAdornment } from './EndAdornment.js';
+export { adornmentReservePx, getInputWidth } from './util.js';

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

@@ -0,0 +1,62 @@
+import BaseResult from '../../TextSearch/BaseResults.ts';
+import type { RefNameMatchSource } from '../../util/selectNamedRegions.ts';
+export interface Option {
+    isLimit?: boolean;
+    result: BaseResult;
+}
+export declare function cap(options: Option[]): Option[];
+/**
+ * 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 declare function getRefNameOptions(assembly: RefNameMatchSource | undefined, inputValue: string): Option[];
+export declare function getDeduplicatedResult(results: BaseResult[]): Option[];
+/**
+ * The muted line under a row: a sequence's length, where a hit goes and the
+ * track it came from, or how many places share the row. A row sharing its name
+ * with a sequence is about the sequence, since an annotation's region feature
+ * names it too. A row whose hits all go to one place says where, without a
+ * track, since the pick lands through whichever of them the view has open. A
+ * row standing for many regions needs none.
+ */
+export declare function optionDetail(result: BaseResult, lookups: {
+    trackNameOf: (trackId: string) => string | undefined;
+    lengthOf: (refName: string) => number | undefined;
+    placesOf: (results: BaseResult[]) => BaseResult[][];
+}): string | undefined;
+export declare function coerceToResult(option: string | Option): BaseResult;
+export declare function getOptionLabel(option: string | Option): string;
+/**
+ * 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 declare function adornmentReservePx({ showHelp, menuItemCount, }: {
+    showHelp?: boolean;
+    menuItemCount?: number;
+}): number;
+export declare function getInputWidth(value: string, minWidth: number, maxWidth: number, adornmentWidth?: number): number;

package/esm/ui/RefNameAutocomplete/util.js

@@ -0,0 +1,209 @@
+import BaseResult, { RefSequenceResult } from '../../TextSearch/BaseResults.js';
+import { getBpDisplayStr, measureText, toLocale } 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,
+            }),
+        });
+}
+function formatLocString(locString) {
+    const match = /^(.+):(\d+)\.\.(\d+)$/.exec(locString);
+    return match
+        ? `${match[1]}:${toLocale(Number(match[2]))}-${toLocale(Number(match[3]))}`
+        : locString;
+}
+/**
+ * The muted line under a row: a sequence's length, where a hit goes and the
+ * track it came from, or how many places share the row. A row sharing its name
+ * with a sequence is about the sequence, since an annotation's region feature
+ * names it too. A row whose hits all go to one place says where, without a
+ * track, since the pick lands through whichever of them the view has open. A
+ * row standing for many regions needs none.
+ */
+export function optionDetail(result, lookups) {
+    const { trackNameOf, lengthOf, placesOf } = lookups;
+    const locString = result.getLocation();
+    const trackId = result.getTrackId();
+    const sequence = result.results?.find(r => r instanceof RefSequenceResult);
+    if (sequence) {
+        return optionDetail(sequence, lookups);
+    }
+    else if (result.results?.length) {
+        const places = placesOf(result.results);
+        const only = places.length === 1 ? places[0][0].getLocation() : undefined;
+        return only === undefined
+            ? `${places.length} matches`
+            : formatLocString(only);
+    }
+    else if (!locString || /\s/.test(locString)) {
+        return undefined;
+    }
+    else if (result instanceof RefSequenceResult) {
+        const length = lengthOf(locString);
+        return length === undefined ? undefined : getBpDisplayStr(length);
+    }
+    else {
+        const trackName = trackId === undefined ? undefined : trackNameOf(trackId);
+        return [formatLocString(locString), trackName].filter(Boolean).join(' · ');
+    }
+}
+// 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,17 @@
-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, grip, 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;
+    /** An opaque `bar` with a grip pill, for the bottom edge of a view */
+    grip?: boolean | 'hover';
+    /**
+     * 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,87 @@
 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';
+const layer = (color) => `linear-gradient(${color}, ${color})`;
+// Three 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. A `grip` bar sits on an opaque paper fill so a view's gridlines stop at
+// it, and a centred pill marks it as something to grab. `grip="hover"` draws
+// that grip only under the pointer or mid-drag.
+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': { backgroundColor: theme.palette.action.disabled },
     },
     verticalHandle: {
         cursor: 'col-resize',
         height: '100%',
+        touchAction: 'none',
+        '&:hover': { backgroundColor: theme.palette.action.disabled },
     },
-    flexbox_verticalHandle: {
-        cursor: 'col-resize',
-        alignSelf: 'stretch',
+    // `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 },
+    grip: {
+        backgroundColor: theme.palette.background.paper,
+        backgroundImage: `${layer(theme.palette.text.disabled)}, ${layer(theme.palette.action.disabled)}`,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        '&:hover': {
+            backgroundColor: theme.palette.background.paper,
+            backgroundImage: `${layer(theme.palette.text.secondary)}, ${layer(theme.palette.text.disabled)}`,
+        },
     },
-    flexbox_horizontalHandle: {
-        cursor: 'row-resize',
-        alignSelf: 'stretch',
+    gripOnHover: {
+        '&:not(:hover):not(:active)': {
+            backgroundColor: 'transparent',
+            backgroundImage: 'none',
+            borderColor: 'transparent',
+        },
+    },
+    horizontalGrip: {
+        height: 6,
+        backgroundSize: '24px 3px, auto',
+        borderTop: `1px solid ${theme.palette.text.disabled}`,
+    },
+    verticalGrip: {
+        width: 6,
+        backgroundSize: '3px 24px, auto',
+        borderLeft: `1px solid ${theme.palette.text.disabled}`,
     },
-});
-function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
-    const [mouseDragging, setMouseDragging] = useState(false);
-    const initialPosition = useRef(0);
-    const prevPos = useRef(0);
+}));
+function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar = false, grip = 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, grip && [
+            classes.grip,
+            vertical ? classes.verticalGrip : classes.horizontalGrip,
+            grip === 'hover' && classes.gripOnHover,
+        ], bar &&
+            !grip && [
+            classes.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;