@jbrowse/core 5.0.0-beta.13 → 5.0.0-beta.14

package/esm/ui/FatalErrorDialog.d.ts

@@ -1,7 +1,8 @@
-export default function FatalErrorDialog({ componentStack, error, onFactoryReset, resetButtonText, extraActions, }: {
+declare const FatalErrorDialog: ({ componentStack, error, onFactoryReset, resetButtonText, extraActions, }: {
     componentStack?: string;
     error?: unknown;
     onFactoryReset: () => void;
     resetButtonText?: string;
     extraActions?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FatalErrorDialog;

package/esm/ui/FatalErrorDialog.js

@@ -1,19 +1,21 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, } from '@mui/material';
+import { observer } from 'mobx-react';
 import ErrorBanner from './ErrorBanner.js';
 import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
 import FactoryResetDialog from './FactoryResetDialog.js';
-const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
+const ResetComponent = observer(function ResetComponent({ onFactoryReset, resetButtonText, }) {
     const [dialogOpen, setDialogOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": "fatal-error", color: "primary", variant: "contained", onClick: () => {
                     setDialogOpen(true);
                 }, children: resetButtonText }), _jsx(FactoryResetDialog, { onClose: () => {
                     setDialogOpen(false);
                 }, open: dialogOpen, onFactoryReset: onFactoryReset })] }));
-};
-export default function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', extraActions, }) {
+});
+const FatalErrorDialog = observer(function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', extraActions, }) {
     return (_jsxs(Dialog, { maxWidth: "xl", open: true, children: [_jsx(DialogTitle, { children: "Fatal error" }), _jsxs(DialogContent, { children: [_jsx(ErrorBanner, { error: error }), componentStack ? (_jsx(ErrorMessageStackTraceContents, { text: componentStack })) : null] }), _jsxs(DialogActions, { children: [extraActions, _jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
                             window.location.reload();
                         }, children: "Refresh" }), _jsx(ResetComponent, { onFactoryReset: onFactoryReset, resetButtonText: resetButtonText })] })] }));
-}
+});
+export default FatalErrorDialog;

package/esm/ui/FileDropZone.d.ts

@@ -14,7 +14,7 @@ export interface FileRejection {
  * set, rejected files with their validation errors. Pass `message` to replace
  * the default prompt and `children` for extra content (e.g. a Browse button).
  */
-export default function FileDropZone({ onDrop, accept, maxSize, multiple, message, children, className, }: {
+declare const FileDropZone: ({ onDrop, accept, maxSize, multiple, message, children, className, }: {
     onDrop: (accepted: File[], rejected: FileRejection[]) => void;
     accept?: Accept;
     maxSize?: number;
@@ -22,4 +22,5 @@ export default function FileDropZone({ onDrop, accept, maxSize, multiple, messag
     message?: ReactNode;
     children?: ReactNode;
     className?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FileDropZone;

package/esm/ui/FileDropZone.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import { alpha } from './palette.js';
 const useStyles = makeStyles()(theme => ({
@@ -67,7 +68,7 @@ function validate(file, accept, maxSize) {
  * set, rejected files with their validation errors. Pass `message` to replace
  * the default prompt and `children` for extra content (e.g. a Browse button).
  */
-export default function FileDropZone({ onDrop, accept, maxSize, multiple = true, message, children, className, }) {
+const FileDropZone = observer(function FileDropZone({ onDrop, accept, maxSize, multiple = true, message, children, className, }) {
     const { classes, cx } = useStyles();
     const inputRef = useRef(null);
     // dragenter/dragleave fire for child elements too; ref-count them so
@@ -126,4 +127,5 @@ export default function FileDropZone({ onDrop, accept, maxSize, multiple = true,
                     // reset so selecting the same file again still fires onChange
                     event.target.value = '';
                 } }), _jsx(CloudUploadIcon, { className: classes.uploadIcon, fontSize: "large" }), _jsx(Typography, { color: "text.secondary", align: "center", children: message ?? 'Drag and drop files here, or click to browse' }), children] }));
-}
+});
+export default FileDropZone;

package/esm/ui/FileSelector/LocalFileChooser.js

@@ -58,7 +58,7 @@ async function pickFileHandleLocation() {
         throw e;
     }
 }
-function FilePickerButton({ setLocation, }) {
+const FilePickerButton = observer(function FilePickerButton({ setLocation, }) {
     if (supportsFileSystemAccess) {
         return (_jsx(Button, { variant: "outlined", onClick: async () => {
                 const loc = await pickFileHandleLocation();
@@ -91,8 +91,8 @@ function FilePickerButton({ setLocation, }) {
                         }
                     }
                 } })] }));
-}
-function ReloadPrompt({ location, setLocation, }) {
+});
+const ReloadPrompt = observer(function ReloadPrompt({ location, setLocation, }) {
     const handleReopen = async () => {
         if (isFileHandleLocation(location)) {
             try {
@@ -108,7 +108,7 @@ function ReloadPrompt({ location, setLocation, }) {
         }
     };
     return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { color: "error", children: "(need to reload)" }), isFileHandleLocation(location) && (_jsx(Button, { size: "small", variant: "text", color: "primary", onClick: handleReopen, children: "Reopen" }))] }));
-}
+});
 const LocalFileChooser = observer(function LocalFileChooser({ location, setLocation, }) {
     const { classes } = useStyles();
     const filename = getFilename(location);

package/esm/ui/FileSelector/LocationInput.d.ts

@@ -1,9 +1,10 @@
 import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index.ts';
 import type { FileLocation } from '../../util/types/index.ts';
-export default function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }: {
+declare const LocationInput: ({ toggleButtonValue, selectedAccount, location, inline, setLocation, }: {
     toggleButtonValue: string;
     selectedAccount?: BaseInternetAccountModel;
     location?: FileLocation;
     inline?: boolean;
     setLocation: (arg: FileLocation) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default LocationInput;

package/esm/ui/FileSelector/LocationInput.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import LocalFileChooser from './LocalFileChooser.js';
 import UrlChooser from './UrlChooser.js';
-export default function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }) {
+const LocationInput = observer(function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }) {
     // `file` is the only toggle with an input of its own — URL and every account
     // toggle share the URL box, which is what `selectorLabel` names. Anything
     // else falling through to `null` drew a field label and a toggle group with
     // nothing under them: picking Dropbox did it, and so did a location arriving
     // already stamped with an `internetAccountId`.
     return toggleButtonValue === 'file' ? (_jsx(LocalFileChooser, { location: location, setLocation: setLocation })) : (_jsx(UrlChooser, { location: location, setLocation: setLocation, label: selectedAccount?.selectorLabel, style: inline ? { margin: 0 } : undefined }));
-}
+});
+export default LocationInput;

package/esm/ui/FileSelector/SourceTypeSelector.d.ts

@@ -1,9 +1,10 @@
 import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index.ts';
-export default function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }: {
+declare const SourceTypeSelector: ({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }: {
     value: string;
     sourceTypes: string[];
     shownAccounts: BaseInternetAccountModel[];
     hiddenAccounts: BaseInternetAccountModel[];
     onChange: (event: React.MouseEvent, newValue: string | null) => void;
     onHiddenAccountSelect: (id: string) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SourceTypeSelector;

package/esm/ui/FileSelector/SourceTypeSelector.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import CascadingMenuButton from '../CascadingMenuButton.js';
 import { getAccountLabel } from './util.js';
-function AccountToggleButton({ account, }) {
+const AccountToggleButton = observer(function AccountToggleButton({ account, }) {
     return (_jsx(Tooltip, { title: account.name, children: _jsx(ToggleButton, { value: account.internetAccountId, children: getAccountLabel(account) }) }));
-}
-function MoreButton({ onClick, disabled, children, }) {
+});
+const MoreButton = observer(function MoreButton({ onClick, disabled, children, }) {
     return (_jsx(ToggleButton, { value: "more", selected: false, disabled: disabled, 
         // ToggleButton types its target as HTMLElement, but it always renders a
         // <button>, so narrowing to HTMLButtonElement for CascadingMenuButton's
@@ -14,12 +15,13 @@ function MoreButton({ onClick, disabled, children, }) {
         onClick: e => {
             onClick(e);
         }, children: children }));
-}
-export default function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }) {
+});
+const SourceTypeSelector = observer(function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }) {
     return (_jsxs(ToggleButtonGroup, { value: value, exclusive: true, size: "small", onChange: onChange, "aria-label": "file, url, or account picker", children: [sourceTypes.includes('file') && (_jsx(ToggleButton, { value: "file", "aria-label": "local file", children: "File" })), _jsx(ToggleButton, { value: "url", "aria-label": "url", children: "URL" }), shownAccounts.map(account => (_jsx(AccountToggleButton, { account: account }, account.internetAccountId))), hiddenAccounts.length > 0 && (_jsxs(CascadingMenuButton, { menuItems: hiddenAccounts.map(account => ({
                     label: account.name,
                     onClick: () => {
                         onHiddenAccountSelect(account.internetAccountId);
                     },
                 })), ButtonComponent: MoreButton, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: ["More", _jsx(ArrowDropDownIcon, {})] }))] }));
-}
+});
+export default SourceTypeSelector;

package/esm/ui/GpuFallbackButton.d.ts

@@ -6,7 +6,8 @@
  * predicate. Every place that repeated it is a place that could forget it, and
  * two already had.
  */
-export default function GpuFallbackButton({ error, onRetry, }: {
+declare const GpuFallbackButton: ({ error, onRetry, }: {
     error: unknown;
     onRetry: () => void;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default GpuFallbackButton;

package/esm/ui/GpuFallbackButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOfferGpuFallback, } from './gpuFallback.js';
 /**
  * The "Use Canvas2D" remedy on a GPU error banner, for the MUI chrome.
@@ -9,7 +10,7 @@ import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOf
  * predicate. Every place that repeated it is a place that could forget it, and
  * two already had.
  */
-export default function GpuFallbackButton({ error, onRetry, }) {
+const GpuFallbackButton = observer(function GpuFallbackButton({ error, onRetry, }) {
     if (!shouldOfferGpuFallback(error)) {
         return null;
     }
@@ -17,4 +18,5 @@ export default function GpuFallbackButton({ error, onRetry, }) {
                 disableGpuRendering();
                 onRetry();
             }, children: GPU_FALLBACK_LABEL }) }));
-}
+});
+export default GpuFallbackButton;

package/esm/ui/HoverMenu.d.ts

@@ -1,5 +1,5 @@
 import type { PopoverOrigin } from '@mui/material';
-declare function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
+declare const HoverMenu: ({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
     anchorEl: HTMLElement | null;
     onClose: () => void;
     onMouseEnter?: () => void;
@@ -8,5 +8,5 @@ declare function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOr
     transformOrigin: PopoverOrigin;
     zIndex?: React.CSSProperties['zIndex'];
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default HoverMenu;

package/esm/ui/HoverMenu.js

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 //  this code adapted from material-ui-popup-state by Andy Edwards, MIT license
 //  https://github.com/jcoreio/material-ui-popup-state/blob/9dba66241a0c25b172c93ae7d9e45a9745f138e8/LICENSE.md
 import { Menu } from '@mui/material';
+import { observer } from 'mobx-react';
+import { usePlacedMenuFocus } from './usePlacedMenuFocus.js';
 // A Menu a hovering pointer can cross into: the root (which spans the viewport)
 // is click-through so the gap between the opener row and the panel doesn't
 // swallow the pointer, while the paper itself stays interactive. That root can
@@ -18,13 +20,15 @@ import { Menu } from '@mui/material';
 // and `onMouseEnter`, which fires on the paper rather than the click-through
 // root and so means "the pointer arrived here", not "the pointer is somewhere
 // over the viewport".
-function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }) {
-    return (_jsx(Menu, { open: true, anchorEl: anchorEl, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, style: { pointerEvents: 'none', zIndex }, hideBackdrop: true, slotProps: {
+const HoverMenu = observer(function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }) {
+    const { onEntering, ...focus } = usePlacedMenuFocus();
+    return (_jsx(Menu, { ...focus, open: true, anchorEl: anchorEl, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, style: { pointerEvents: 'none', zIndex }, hideBackdrop: true, slotProps: {
             paper: {
                 style: { pointerEvents: 'auto' },
                 onMouseEnter,
                 ref: paperRef,
             },
+            transition: { onEntering },
         }, 
         // A submenu is portaled in the DOM but is still a React *descendant* of
         // the parent menu's list, so React replays its key events into the parent
@@ -36,5 +40,5 @@ function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, tr
         onKeyDown: e => {
             e.stopPropagation();
         }, children: children }));
-}
+});
 export default HoverMenu;

package/esm/ui/HoverTooltip.d.ts

@@ -19,9 +19,10 @@ import type React from 'react';
  * `BaseTooltip` is: it reaches @floating-ui (~266KB) and that barrel is on the
  * eager plugin-entry path.
  */
-export default function HoverTooltip({ hit, mouseState, children, }: {
+declare const HoverTooltip: ({ hit, mouseState, children, }: {
     /** The display's hover. Nothing is drawn when it is absent. */
     hit: unknown;
     mouseState: MouseState | undefined;
     children: React.ReactNode;
-}): React.JSX.Element | null;
+}) => React.JSX.Element | null;
+export default HoverTooltip;

package/esm/ui/HoverTooltip.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import BaseTooltip from './BaseTooltip.js';
 /**
  * `BaseTooltip` anchored to the chrome's pointer measurement, drawn only when
@@ -19,6 +20,7 @@ import BaseTooltip from './BaseTooltip.js';
  * `BaseTooltip` is: it reaches @floating-ui (~266KB) and that barrel is on the
  * eager plugin-entry path.
  */
-export default function HoverTooltip({ hit, mouseState, children, }) {
+const HoverTooltip = observer(function HoverTooltip({ hit, mouseState, children, }) {
     return hit && mouseState ? (_jsx(BaseTooltip, { clientPoint: { x: mouseState.clientX, y: mouseState.clientY }, children: children })) : null;
-}
+});
+export default HoverTooltip;

package/esm/ui/Icons.d.ts

@@ -1,7 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
 export { default as InfoIcon } from '@mui/icons-material/Info';
-export declare function Indexing(props: SvgIconProps): import("react").JSX.Element;
-export declare function TrackSelector(props: SvgIconProps): import("react").JSX.Element;
-export declare function DNA(props: SvgIconProps): import("react").JSX.Element;
-export declare function Highlighter(props: SvgIconProps): import("react").JSX.Element;
-export declare function Cable(props: SvgIconProps): import("react").JSX.Element;
+export declare const Indexing: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const TrackSelector: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const DNA: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const Highlighter: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const Cable: (props: SvgIconProps) => import("react").JSX.Element;

package/esm/ui/Icons.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SvgIcon from '@mui/material/SvgIcon';
+import { observer } from 'mobx-react';
 export { default as InfoIcon } from '@mui/icons-material/Info';
 // https://materialdesignicons.com/ text-search icon
-export function Indexing(props) {
+export const Indexing = observer(function Indexing(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" }) }));
-}
+});
 //  format-list-checkbox from https://materialdesignicons.com/
-export function TrackSelector(props) {
+export const TrackSelector = observer(function TrackSelector(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" }) }));
-}
+});
 //  dna from https://materialdesignicons.com/
-export function DNA(props) {
+export const DNA = observer(function DNA(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" }) }));
-}
+});
 // bx-highlight from https://boxicons.com/ (MIT License, Copyright (c) Aniket
 // Suvarna) — https://github.com/atisawd/boxicons/blob/master/svg/regular/bx-highlight.svg
-export function Highlighter(props) {
+export const Highlighter = observer(function Highlighter(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "m20.707 5.826-3.535-3.533a.999.999 0 0 0-1.408-.006L7.096 10.82a1.01 1.01 0 0 0-.273.488l-1.024 4.437L4 18h2.828l1.142-1.129 3.588-.828c.18-.042.345-.133.477-.262l8.667-8.535a1 1 0 0 0 .005-1.42zm-9.369 7.833-2.121-2.12 7.243-7.131 2.12 2.12-7.242 7.131zM4 20h16v2H4z" }) }));
-}
-export function Cable(props) {
+});
+export const Cable = observer(function Cable(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z" }) }));
-}
+});

package/esm/ui/InlineMenuControls.d.ts

@@ -1,6 +1,6 @@
 export { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.ts';
-export declare function ResetToDefaultButton({ disabled, title, onClick, }: {
+export declare const ResetToDefaultButton: ({ disabled, title, onClick, }: {
     disabled: boolean;
     title?: string;
     onClick: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/ui/InlineMenuControls.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react-refresh/only-export-components -- the shared row width belongs with these leaf menu-row primitives; no component state to fast-refresh */
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import { IconButton, Tooltip } from '@mui/material';
+/* eslint-disable react-refresh/only-export-components -- the shared row width belongs with these leaf menu-row primitives; no component state to fast-refresh */
+import { observer } from 'mobx-react';
 // Shared width for inline track-menu control rows (the size sliders and the
 // wiggle resolution stepper), so the rows line up when they stack in one menu
 // and can't drift apart.
@@ -10,8 +11,8 @@ export { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
 // a span so its Tooltip still shows while disabled at the default. Kept in one
 // place so the icon/size/padding and the disabled-at-default behavior stay
 // identical across the sibling controls.
-export function ResetToDefaultButton({ disabled, title = 'Reset to default', onClick, }) {
+export const ResetToDefaultButton = observer(function ResetToDefaultButton({ disabled, title = 'Reset to default', onClick, }) {
     return (_jsx(Tooltip, { title: title, children: _jsx("span", { children: _jsx(IconButton, { size: "small", sx: { p: 0.25 }, disabled: disabled, onClick: () => {
                     onClick();
                 }, children: _jsx(RestartAltIcon, { fontSize: "small" }) }) }) }));
-}
+});

package/esm/ui/JexlFilterRowEditors.d.ts

@@ -1,15 +1,15 @@
 import type { ConditionRow, FieldChoice, TextRow } from '../util/jexlFilterRows.ts';
 import type { Jexl } from '@jbrowse/jexl';
 export declare function compileError(line: string, jexl: Pick<Jexl, 'compile'>): string | undefined;
-export declare function ConditionRowEditor({ row, choices, onChange, onRemove, }: {
+export declare const ConditionRowEditor: ({ row, choices, onChange, onRemove, }: {
     row: ConditionRow;
     choices: FieldChoice[];
     onChange: (row: ConditionRow) => void;
     onRemove: () => void;
-}): import("react").JSX.Element;
-export declare function TextRowEditor({ row, jexl, onChange, onRemove, }: {
+}) => import("react").JSX.Element;
+export declare const TextRowEditor: ({ row, jexl, onChange, onRemove, }: {
     row: TextRow;
     jexl: Pick<Jexl, 'compile'>;
     onChange: (row: TextRow) => void;
     onRemove: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/ui/JexlFilterRowEditors.js

@@ -1,6 +1,7 @@
 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 { observer } from 'mobx-react';
 import { OPERATORS, stripJexlPrefix, typedField, withField, withOp, } from '../util/jexlFilterRows.js';
 import { makeStyles } from '../util/tss-react/index.js';
 import MonospaceTextField from './MonospaceTextField.js';
@@ -42,10 +43,10 @@ export function compileError(line, jexl) {
         return e instanceof Error ? e.message : String(e);
     }
 }
-function RemoveButton({ onClick }) {
+const RemoveButton = observer(function RemoveButton({ onClick, }) {
     return (_jsx(IconButton, { size: "small", "aria-label": "Remove condition", onClick: onClick, children: _jsx(CloseIcon, { fontSize: "small" }) }));
-}
-function ValueInput({ row, onChange, }) {
+});
+const ValueInput = observer(function ValueInput({ row, onChange, }) {
     const { classes } = useStyles();
     const { field, op, value } = row;
     if (op === 'set' || op === '!set') {
@@ -63,8 +64,8 @@ function ValueInput({ row, onChange, }) {
         }, 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, }) {
+});
+export const ConditionRowEditor = observer(function ConditionRowEditor({ row, choices, onChange, onRemove, }) {
     const { classes } = useStyles();
     const { field } = row;
     const grouped = choices.some(choice => choice.group);
@@ -81,10 +82,10 @@ export function ConditionRowEditor({ row, choices, onChange, onRemove, }) {
                 }, 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, }) {
+});
+export const TextRowEditor = observer(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/LabeledCheckbox.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
-export default function LabeledCheckbox({ checked, onChange, label, className, disabled, size, }: {
+declare const LabeledCheckbox: ({ checked, onChange, label, className, disabled, size, }: {
     checked: boolean;
     onChange: (checked: boolean) => void;
     label: ReactNode;
     className?: string;
     disabled?: boolean;
     size?: 'small' | 'medium';
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default LabeledCheckbox;

package/esm/ui/LabeledCheckbox.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox, FormControlLabel } from '@mui/material';
-export default function LabeledCheckbox({ checked, onChange, label, className, disabled, size, }) {
+import { observer } from 'mobx-react';
+const LabeledCheckbox = observer(function LabeledCheckbox({ checked, onChange, label, className, disabled, size, }) {
     return (_jsx(FormControlLabel, { className: className, disabled: disabled, control: _jsx(Checkbox, { size: size, checked: checked, onChange: event => {
                 onChange(event.target.checked);
             } }), label: label }));
-}
+});
+export default LabeledCheckbox;

package/esm/ui/LazyBaseTooltip.d.ts

@@ -1,4 +1,13 @@
 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 {};
+declare const Lazy: import("react").LazyExoticComponent<({ clientPoint: clientPointCoords, anchor, id, children, placement, }: {
+    placement?: import("./BaseTooltip.tsx").TooltipPlacement;
+    clientPoint?: {
+        x: number;
+        y: number;
+    };
+    anchor?: HTMLElement;
+    id?: string;
+    children: React.ReactNode;
+}) => import("react").ReactPortal | null>;
+declare const LazyBaseTooltip: (props: ComponentProps<typeof Lazy>) => import("react").JSX.Element;
+export default LazyBaseTooltip;

package/esm/ui/LazyBaseTooltip.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
+import { observer } from 'mobx-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) {
+const LazyBaseTooltip = observer(function LazyBaseTooltip(props) {
     return (_jsx(Suspense, { fallback: null, children: _jsx(Lazy, { ...props }) }));
-}
+});
+export default LazyBaseTooltip;

package/esm/ui/LegendSwatchGlyph.js

@@ -25,6 +25,7 @@ function glyphPathData(shape, size, x, y) {
 //
 // The shape fills the `size` box from (x, y) so a caller can lay swatches out on
 // a fixed pitch.
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 export function LegendSwatchGlyph({ swatch, size, x = 0, y = 0, }) {
     return swatch.shape ? (_jsx("path", { d: glyphPathData(swatch.shape, size, x, y), fill: swatch.color })) : (_jsx("rect", { x: x, y: y, width: size, height: size, fill: swatch.color }));
 }

package/esm/ui/LoadingDots.d.ts

@@ -1 +1,2 @@
-export default function LoadingDots(): import("react").JSX.Element;
+declare const LoadingDots: () => import("react").JSX.Element;
+export default LoadingDots;

package/esm/ui/LoadingDots.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import { dot1, dot2, dot3 } from './loadingDotKeyframes.js';
 const useStyles = makeStyles()({
@@ -24,7 +25,8 @@ const useStyles = makeStyles()({
         },
     },
 });
-export default function LoadingDots() {
+const LoadingDots = observer(function LoadingDots() {
     const { classes } = useStyles();
     return (_jsxs("span", { className: classes.dots, children: [_jsx("span", { children: "." }), _jsx("span", { children: "." }), _jsx("span", { children: "." })] }));
-}
+});
+export default LoadingDots;

package/esm/ui/LoadingEllipses.d.ts

@@ -1,6 +1,9 @@
 import type { TypographyProps } from '@mui/material';
 interface Props extends TypographyProps {
     message?: string;
+    /** false for a label that stands in for work not yet started, such as an
+     * off-screen view's placeholder, which a capture must not wait on */
+    busy?: boolean;
     children?: never;
 }
 /**
@@ -19,5 +22,5 @@ interface Props extends TypographyProps {
  * should carry the attribute too — see `isPageBusyInPage` in
  * `@jbrowse/capture`, which is what reads it.
  */
-export default function LoadingEllipses({ message, variant, ...rest }: Props): import("react").JSX.Element;
-export {};
+declare const LoadingEllipses: ({ message, variant, busy, ...rest }: Props) => import("react").JSX.Element;
+export default LoadingEllipses;

package/esm/ui/LoadingEllipses.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import LoadingDots from './LoadingDots.js';
 /**
  * The label every part of the app shows while it is working, and — through
@@ -17,6 +18,7 @@ import LoadingDots from './LoadingDots.js';
  * should carry the attribute too — see `isPageBusyInPage` in
  * `@jbrowse/capture`, which is what reads it.
  */
-export default function LoadingEllipses({ message, variant = 'body2', ...rest }) {
-    return (_jsxs(Typography, { ...rest, variant: variant, "data-busy": "true", children: [message || 'Loading', _jsx(LoadingDots, {})] }));
-}
+const LoadingEllipses = observer(function LoadingEllipses({ message, variant = 'body2', busy = true, ...rest }) {
+    return (_jsxs(Typography, { ...rest, variant: variant, "data-busy": busy || undefined, children: [message || 'Loading', _jsx(LoadingDots, {})] }));
+});
+export default LoadingEllipses;

package/esm/ui/LoadingOverlay.d.ts

@@ -12,7 +12,7 @@
  * one `setTimeout` per loading pulse, which is the floor for these semantics.
  */
 export declare function useDelayedFlag(active: boolean, delayMs: number): boolean;
-export default function LoadingOverlay({ statusMessage, progress, isVisible, immediate, canceled, onCancel, onRetry, }: {
+declare const LoadingOverlay: ({ statusMessage, progress, isVisible, immediate, canceled, onCancel, onRetry, }: {
     statusMessage?: string;
     progress?: number;
     isVisible?: boolean;
@@ -20,4 +20,5 @@ export default function LoadingOverlay({ statusMessage, progress, isVisible, imm
     canceled?: boolean;
     onCancel?: () => void;
     onRetry?: () => void;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default LoadingOverlay;