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

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;

package/esm/ui/LoadingOverlay.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import { progressLabel } from '../util/progress.js';
 import { makeStyles } from '../util/tss-react/index.js';
 import LoadingDots from './LoadingDots.js';
@@ -98,7 +99,7 @@ const useStyles = makeStyles()(theme => {
         },
     };
 });
-export default function LoadingOverlay({ statusMessage, progress, isVisible, immediate, canceled, onCancel, onRetry, }) {
+const LoadingOverlay = observer(function LoadingOverlay({ statusMessage, progress, isVisible, immediate, canceled, onCancel, onRetry, }) {
     const { classes } = useStyles();
     const hasProgress = progress !== undefined;
     // anti-flash: only render after the load has run long enough to be worth
@@ -136,4 +137,5 @@ export default function LoadingOverlay({ statusMessage, progress, isVisible, imm
                             }, children: _jsx(RefreshIcon, { fontSize: "inherit" }) }) })) : null] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: classes.row, children: [_jsxs("span", { className: classes.text, children: [progressLabel(statusMessage || 'Loading', progress), hasProgress ? null : _jsx(LoadingDots, {})] }), onCancel && cancelable ? (_jsx(Tooltip, { title: "Cancel", children: _jsx(IconButton, { size: "small", "data-testid": "loading-overlay-cancel", onClick: () => {
                                         onCancel();
                                     }, children: _jsx(CloseIcon, { fontSize: "inherit" }) }) })) : null] }), hasProgress ? (_jsx(StatusProgressBar, { className: classes.bar, fraction: progress })) : null] })) }) })) : null;
-}
+});
+export default LoadingOverlay;

package/esm/ui/LoadingProgress.d.ts

@@ -8,9 +8,10 @@ import type { TypographyProps } from '@mui/material';
  * no bar). Callers own the surrounding layout and supply `barClassName` for the
  * bar width.
  */
-export default function LoadingProgress({ message, fraction, variant, barClassName, }: {
+declare const LoadingProgress: ({ message, fraction, variant, barClassName, }: {
     message?: string;
     fraction?: number;
     variant?: TypographyProps['variant'];
     barClassName?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default LoadingProgress;

package/esm/ui/LoadingProgress.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { progressLabel } from '../util/progress.js';
 import LoadingEllipses from './LoadingEllipses.js';
 import StatusProgressBar from './StatusProgressBar.js';
@@ -11,6 +12,7 @@ import StatusProgressBar from './StatusProgressBar.js';
  * no bar). Callers own the surrounding layout and supply `barClassName` for the
  * bar width.
  */
-export default function LoadingProgress({ message, fraction, variant, barClassName, }) {
+const LoadingProgress = observer(function LoadingProgress({ message, fraction, variant, barClassName, }) {
     return (_jsxs(_Fragment, { children: [_jsx(LoadingEllipses, { variant: variant, message: progressLabel(message || 'Loading', fraction) }), fraction === undefined ? null : (_jsx(StatusProgressBar, { className: barClassName, fraction: fraction }))] }));
-}
+});
+export default LoadingProgress;

package/esm/ui/Logo.d.ts

@@ -2,6 +2,6 @@ type LogoVariant = 'color' | 'black' | 'white';
 interface LogoProps {
     variant?: LogoVariant;
 }
-export declare function Logomark({ variant }: LogoProps): import("react").JSX.Element;
-export declare function LogoFull({ variant }: LogoProps): import("react").JSX.Element;
+export declare const Logomark: ({ variant }: LogoProps) => import("react").JSX.Element;
+export declare const LogoFull: ({ variant }: LogoProps) => import("react").JSX.Element;
 export {};

package/esm/ui/Logo.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 const colorSets = {
     black: {
         midnight: '#808080',
@@ -25,17 +26,17 @@ const colorSets = {
 function getColors(variant = 'color') {
     return colorSets[variant];
 }
-export function Logomark({ variant }) {
+export const Logomark = observer(function Logomark({ variant }) {
     return (_jsx("svg", { viewBox: "0 0 175 175", children: _jsx(Icon, { variant: variant }) }));
-}
-export function LogoFull({ variant }) {
+});
+export const LogoFull = observer(function LogoFull({ variant }) {
     return (_jsxs("svg", { viewBox: "0 0 641 175", children: [_jsx(Text, { variant: variant }), _jsx(Icon, { variant: variant })] }));
-}
-function Icon({ variant }) {
+});
+const Icon = observer(function Icon({ variant }) {
     const colors = getColors(variant);
     return (_jsxs(_Fragment, { children: [_jsx("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }), _jsx("path", { style: { fill: colors.forest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }), _jsx("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }), _jsx("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }), _jsx("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })] }));
-}
-function Text({ variant }) {
+});
+const Text = observer(function Text({ variant }) {
     const colors = getColors(variant);
     return (_jsxs("g", { "aria-label": "JBrowse", transform: "translate(213.084 144.241)", style: { fill: colors.midnight }, children: [_jsx("path", { d: "m 26.355,-71.505 v 54.075 2.835 q 0,6.825 -0.42,10.185 -0.735,5.67 -2.835,9.135 -3.255,5.355 -8.505,8.4 -4.83,2.73 -11.55,3.57 L 1.47,11.76 Q 7.35,10.185 9.24,4.2 10.605,-0.105 10.605,-9.975 v -5.565 -55.965 q 1.785,0 4.62,0.315 2.835,0.21 3.255,0.21 1.785,0 2.94,-0.105 4.515,-0.42 4.935,-0.42 z" }), _jsx("path", { d: "m 60.68836,-65.415 v 24.78 h 3.255 q 2.94,0 4.935,-0.525 2.1,-0.525 3.885,-2.1 2.31,-1.995 3.36,-4.83 1.155,-2.835 1.155,-6.09 0,-5.565 -2.94,-8.61 -2.94,-3.045 -8.295,-3.045 -2.52,0 -5.355,0.42 z m 0,30.87 V -6.09 h 5.25 q 4.725,0 8.505,-3.675 3.885,-3.78 3.885,-10.08 0,-8.19 -4.62,-11.655 -4.095,-3.045 -13.02,-3.045 z M 44.93836,0 v -71.505 h 27.09 q 9.135,0 14.385,3.255 6.51,3.99 6.51,12.6 0,7.035 -5.25,11.655 -4.62,4.095 -11.97,5.145 v 0.945 q 7.56,0.735 12.285,3.99 6.615,4.62 6.615,13.335 0,10.185 -7.98,15.75 -6.93,4.83 -17.43,4.83 z" }), _jsx("path", { d: "M 109.44281,0.525 V -50.4 q 1.785,0.21 3.99,0.42 2.31,0.105 3.255,0.105 2.31,0 4.2,-0.21 1.89,-0.21 3.045,-0.315 v 13.02 q 1.89,-6.51 5.46,-9.87 4.41,-4.095 11.655,-4.095 -0.315,2.73 -0.42,6.825 -0.105,3.99 -0.105,7.455 l -0.945,0.84 q -0.945,-0.735 -2.415,-1.05 -1.47,-0.315 -2.94,-0.315 -3.57,0 -6.195,1.89 -2.52,1.785 -3.465,5.04 -0.42,1.155 -0.525,3.15 -0.105,1.89 -0.105,4.515 v 4.515 19.005 q -1.785,-0.21 -2.625,-0.21 -3.675,-0.315 -4.62,-0.315 -2.31,0 -4.2,0.21 -1.89,0.21 -3.045,0.315 z" }), _jsx("path", { d: "m 173.77337,1.47 q -11.655,0 -18.585,-6.825 -6.93,-6.825 -6.93,-18.48 0,-12.6 6.72,-20.055 6.825,-7.455 18.9,-7.455 11.97,0 18.9,6.72 6.93,6.72 6.93,18.48 0,12.285 -6.72,19.74 -7.14,7.875 -19.215,7.875 z m 0.735,-48.09 q -5.88,0 -8.505,6.51 -2.205,5.565 -2.205,15.96 0,8.19 1.47,12.915 2.415,7.98 8.505,7.98 5.565,0 8.19,-7.875 2.205,-6.51 2.205,-16.695 0,-8.505 -2.1,-13.23 -2.52,-5.565 -7.56,-5.565 z" }), _jsx("path", { d: "m 222.03563,-50.4 10.5,36.015 q 3.675,-11.235 5.67,-17.85 2.415,-8.085 5.04,-18.165 1.05,0.105 3.045,0.315 2.1,0.21 2.835,0.21 1.995,0 3.15,-0.105 1.26,-0.21 2.73,-0.42 l 10.71,36.015 q 5.88,-17.43 10.71,-36.015 l 4.2,0.315 4.095,-0.315 q -5.145,13.125 -9.135,24.57 -5.04,14.28 -8.505,26.355 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.205,-0.105 -1.89,0 -3.36,0.21 -1.365,0.21 -2.31,0.315 l -10.605,-34.755 q -4.41,13.65 -6.72,21.105 -2.31,7.35 -4.095,13.65 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.31,-0.105 -1.995,0 -3.465,0.21 -1.365,0.21 -2.31,0.315 -3.78,-12.81 -5.04,-17.01 -2.205,-7.245 -5.46,-17.01 -2.835,-8.4 -5.88,-16.905 1.575,0 4.305,0.315 2.73,0.21 3.36,0.21 1.47,0 4.305,-0.21 2.835,-0.315 3.465,-0.315 z" }), _jsx("path", { d: "m 292.84172,-12.81 h 2.625 q 1.47,4.095 4.62,6.51 3.15,2.415 7.35,2.415 2.94,0 5.46,-1.785 2.625,-1.89 2.625,-4.62 0,-3.885 -6.195,-6.615 -10.395,-4.62 -11.655,-5.46 -6.405,-4.515 -6.405,-12.285 0,-7.77 5.25,-12.18 5.25,-4.515 12.81,-4.515 3.99,0 8.085,1.365 4.095,1.26 7.14,3.57 l -2.52,9.24 h -2.94 q -0.63,-3.57 -3.57,-6.195 -2.835,-2.625 -6.405,-2.625 -3.15,0 -5.46,1.575 -2.31,1.47 -2.31,4.515 0,3.885 6.405,6.51 10.185,4.095 11.865,5.25 6.405,4.41 6.405,12.81 0,7.455 -5.46,12.18 -5.355,4.62 -14.805,4.62 -8.19,0 -14.49,-4.305 z" }), _jsx("path", { d: "m 349.61228,-29.925 h 15.54 q 0,-6.51 -1.05,-10.395 -1.68,-6.3 -5.88,-6.3 -5.04,0 -7.14,6.195 -1.47,4.305 -1.47,10.5 z m 30.03,5.04 h -30.03 q 0,9.135 3.045,13.86 3.57,5.67 11.55,5.67 3.255,0 6.405,-1.26 3.15,-1.26 5.88,-3.465 l 1.26,0.945 -2.31,5.88 q -6.72,4.725 -15.015,4.725 -12.915,0 -19.635,-7.245 -6.72,-7.245 -6.72,-20.37 0,-11.235 6.405,-18.165 6.51,-7.035 17.64,-7.035 11.655,0 16.905,7.56 4.62,6.615 4.62,18.9 z" })] }));
-}
+});

package/esm/ui/MenuItemChevron.d.ts

@@ -1,3 +1,3 @@
-export declare function MenuItemChevron({ hidden }: {
+export declare const MenuItemChevron: ({ hidden, }: {
     hidden?: boolean;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/ui/MenuItemChevron.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ChevronRight from '@mui/icons-material/ChevronRight';
+import { observer } from 'mobx-react';
 // The chevron a submenu row ends in, and — `hidden` — an invisible copy
 // reserving the identical footprint on a clickable row that has none, so a menu
 // carrying help on both kinds lands every "?" in one column.
@@ -14,6 +15,6 @@ import ChevronRight from '@mui/icons-material/ChevronRight';
 // actually draws at ~20.6px and every clickable row's "?" sat ~3.4px inboard of
 // the submenu rows'. Rendering the icon itself cannot be off by a scale factor
 // nothing here gets to see.
-export function MenuItemChevron({ hidden }) {
+export const MenuItemChevron = observer(function MenuItemChevron({ hidden, }) {
     return _jsx(ChevronRight, { style: hidden ? { visibility: 'hidden' } : undefined });
-}
+});

package/esm/ui/MenuItemEndDecoration.d.ts

@@ -1,4 +1,4 @@
-export declare function MenuItemEndDecoration({ type, checked, }: {
+export declare const MenuItemEndDecoration: ({ type, checked, }: {
     type: 'checkbox' | 'radio';
     checked: boolean;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/ui/MenuItemEndDecoration.js

@@ -3,6 +3,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()({
     menuItemEndDecoration: {
@@ -11,7 +12,7 @@ const useStyles = makeStyles()({
         height: 16,
     },
 });
-export function MenuItemEndDecoration({ type, checked, }) {
+export const MenuItemEndDecoration = observer(function MenuItemEndDecoration({ type, checked, }) {
     const { classes } = useStyles();
     let icon;
     switch (type) {
@@ -25,4 +26,4 @@ export function MenuItemEndDecoration({ type, checked, }) {
         }
     }
     return _jsx("div", { className: classes.menuItemEndDecoration, children: icon });
-}
+});

package/esm/ui/MenuItemTrailing.d.ts

@@ -6,7 +6,7 @@ export interface MenuColumnFlags {
     hasSubmenuWithHelp: boolean;
     sharedActionColumn: boolean;
 }
-export declare function MenuItemTrailing({ item, columns: { hasCheckboxOrRadioWithHelp, hasEndAdornment, hasSubmenuWithHelp, sharedActionColumn, }, }: {
+export declare const MenuItemTrailing: ({ item, columns: { hasCheckboxOrRadioWithHelp, hasEndAdornment, hasSubmenuWithHelp, sharedActionColumn, }, }: {
     item: DecoratedMenuItem;
     columns: MenuColumnFlags;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/ui/MenuItemTrailing.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import CascadingMenuHelpIconButton, { CascadingMenuHelpIconSpacer, } from './CascadingMenuHelpIconButton.js';
 import { MenuItemChevron } from './MenuItemChevron.js';
 import { MenuItemEndDecoration } from './MenuItemEndDecoration.js';
@@ -10,27 +11,27 @@ const valueActionGap = 8;
 const endAdornmentColumnWidth = 28;
 // The checkbox/radio glyph reflecting a row's value. Held slightly apart from
 // the action column when the menu has one, so state and actions don't blur.
-function MenuItemValueGlyph({ type, checked, separated, }) {
+const MenuItemValueGlyph = observer(function MenuItemValueGlyph({ type, checked, separated, }) {
     return (_jsx("div", { style: { marginRight: separated ? valueActionGap : 0 }, children: _jsx(MenuItemEndDecoration, { type: type, checked: checked }) }));
-}
+});
 // Fixed-width column holding an item's endAdornment (e.g. the "default for all"
 // pin). Reserved on every row of a menu that has any adornment so they
 // right-align into their own column.
-function MenuItemEndAdornmentSlot({ children }) {
+const MenuItemEndAdornmentSlot = observer(function MenuItemEndAdornmentSlot({ children, }) {
     return (_jsx("div", { style: {
             width: endAdornmentColumnWidth,
             display: 'flex',
             justifyContent: 'flex-end',
             alignItems: 'center',
         }, children: children }));
-}
+});
 // Everything trailing a menu row's label, for a clickable row and a submenu row
 // alike: a flex spacer that right-aligns the decorations, then the value glyph,
 // help affordance, endAdornment column, and the chevron column. When
 // `sharedActionColumn` is set, no row in the menu combines help with an
 // adornment, so the two share one trailing column (whichever this row has)
 // rather than each claiming its own.
-export function MenuItemTrailing({ item, columns: { hasCheckboxOrRadioWithHelp, hasEndAdornment, hasSubmenuWithHelp, sharedActionColumn, }, }) {
+export const MenuItemTrailing = observer(function MenuItemTrailing({ item, columns: { hasCheckboxOrRadioWithHelp, hasEndAdornment, hasSubmenuWithHelp, sharedActionColumn, }, }) {
     const isSubmenu = 'subMenu' in item;
     const isCheckOrRadio = item.type === 'checkbox' || item.type === 'radio';
     const hasActionColumn = hasCheckboxOrRadioWithHelp || hasEndAdornment;
@@ -39,4 +40,4 @@ export function MenuItemTrailing({ item, columns: { hasCheckboxOrRadioWithHelp,
     const helpButton = item.helpText && !item.disabled ? (_jsx(CascadingMenuHelpIconButton, { helpText: item.helpText, label: item.label })) : undefined;
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: { flexGrow: 1, minWidth: 10 } }), isCheckOrRadio ? (_jsx(MenuItemValueGlyph, { type: item.type, checked: item.checked, separated: hasActionColumn })) : null, sharedActionColumn ? (_jsx(MenuItemEndAdornmentSlot, { children: helpButton ?? menuItemAdornment(item) })) : (_jsxs(_Fragment, { children: [helpButton ??
                         (isCheckOrRadio && hasCheckboxOrRadioWithHelp ? (_jsx(CascadingMenuHelpIconSpacer, {})) : null), hasEndAdornment ? (_jsx(MenuItemEndAdornmentSlot, { children: menuItemAdornment(item) })) : null] })), isSubmenu ? (_jsx(MenuItemChevron, {})) : hasSubmenuWithHelp ? (_jsx(MenuItemChevron, { hidden: true })) : null] }));
-}
+});

package/esm/ui/MenuTypes.d.ts

@@ -67,7 +67,7 @@ export interface BaseMenuItem {
      *
      * An **element**, so a module that sets it drags React and whatever it renders
      * into its own graph. Reach for it only when the content is genuinely
-     * arbitrary — synteny's and wiggle's colour swatches are what it exists for.
+     * arbitrary — synteny's and wiggle's color swatches are what it exists for.
      */
     endAdornment?: React.ReactNode;
 }
@@ -101,6 +101,26 @@ export interface SubMenuItem extends BaseMenuItem {
     type?: 'subMenu';
     subMenu: MenuItem[] | (() => MenuItem[]);
 }
+/**
+ * #menuBuilder TRACK_MENU_PRIORITY | the `priority` of each shared track menu row, higher first
+ *
+ * A display's own rows sit at 0, between the track's actions above and the
+ * recovery, Advanced and Display types rows below.
+ */
+export declare const TRACK_MENU_PRIORITY: {
+    readonly aboutTrack: 1002;
+    readonly trackActions: 1001;
+    readonly trackOrder: 1000;
+    readonly saveTrackData: 998;
+    readonly trackActionsDivider: 997;
+    readonly recovery: -100;
+    readonly advanced: -999;
+    readonly displayTypes: -1000;
+};
+/** #menuBuilder subMenuIfAny | a submenu row, or no row while it has nothing to hold */
+export declare function subMenuIfAny(item: BaseMenuItem & {
+    subMenu: MenuItem[];
+}): MenuItem[];
 export declare function resolveSubMenu(item: SubMenuItem): MenuItem[];
 /**
  * #menuItem custom | renders arbitrary React content inline, e.g. a slider

package/esm/ui/MenuTypes.js

@@ -1,3 +1,23 @@
+/**
+ * #menuBuilder TRACK_MENU_PRIORITY | the `priority` of each shared track menu row, higher first
+ *
+ * A display's own rows sit at 0, between the track's actions above and the
+ * recovery, Advanced and Display types rows below.
+ */
+export const TRACK_MENU_PRIORITY = {
+    aboutTrack: 1002,
+    trackActions: 1001,
+    trackOrder: 1000,
+    saveTrackData: 998,
+    trackActionsDivider: 997,
+    recovery: -100,
+    advanced: -999,
+    displayTypes: -1000,
+};
+/** #menuBuilder subMenuIfAny | a submenu row, or no row while it has nothing to hold */
+export function subMenuIfAny(item) {
+    return item.subMenu.length ? [{ ...item, type: 'subMenu' }] : [];
+}
 export function resolveSubMenu(item) {
     return typeof item.subMenu === 'function' ? item.subMenu() : item.subMenu;
 }

package/esm/ui/MonospaceTextField.d.ts

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

package/esm/ui/MonospaceTextField.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputLabel, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import { alpha } from './palette.js';
 const monospaceFontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
@@ -19,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
 // error turns it red and takes the helper text's place under the field, so
 // the text does not move while it flips between valid and invalid. `children`
 // render below the field (e.g. a description or help button).
-export default function MonospaceTextField({ value, onChange, error, label, children, style, className, readOnly, inputTestId, helperText, variant = 'outlined', ...rest }) {
+const MonospaceTextField = observer(function MonospaceTextField({ value, onChange, error, label, children, style, className, readOnly, inputTestId, helperText, variant = 'outlined', ...rest }) {
     const { classes, cx } = useStyles();
     return (_jsxs("div", { className: classes.container, children: [label ? _jsx(InputLabel, { shrink: true, children: label }) : null, _jsx(TextField, { ...rest, variant: variant, multiline: true, error: !!error, helperText: error ? `${error}` : helperText, value: value, onChange: event => {
                     onChange?.(event.target.value);
@@ -37,4 +38,5 @@ export default function MonospaceTextField({ value, onChange, error, label, chil
                         autoCapitalize: 'off',
                     },
                 } }), children] }));
-}
+});
+export default MonospaceTextField;

package/esm/ui/NumberTextField.d.ts

@@ -27,5 +27,5 @@ type Props = Omit<TextFieldProps, 'value' | 'onChange' | 'type' | 'error'> & Own
  * spinners). This component keeps a plain text input and validates with
  * `Number.isFinite` + optional min/max.
  */
-export default function NumberTextField(props: Props): import("react").JSX.Element;
-export {};
+declare const NumberTextField: (props: Props) => import("react").JSX.Element;
+export default NumberTextField;

package/esm/ui/NumberTextField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 /**
  * Uncontrolled-style numeric TextField. Owns the input *text* internally;
  * emits the parsed *number* (or undefined) to the parent on every change.
@@ -10,7 +11,7 @@ import { TextField } from '@mui/material';
  * spinners). This component keeps a plain text input and validates with
  * `Number.isFinite` + optional min/max.
  */
-export default function NumberTextField(props) {
+const NumberTextField = observer(function NumberTextField(props) {
     const { defaultValue, onValueChange, min, max, errorText = 'Must be a valid number', helperText, ...rest } = props;
     const [text, setText] = useState(defaultValue === undefined ? '' : `${defaultValue}`);
     const parsed = parseInBounds(text, min, max);
@@ -20,7 +21,8 @@ export default function NumberTextField(props) {
             setText(next);
             onValueChange(parseInBounds(next, min, max));
         } }));
-}
+});
+export default NumberTextField;
 function parseInBounds(text, min, max) {
     if (text === '') {
         return undefined;

package/esm/ui/PaletteContext.d.ts

@@ -21,10 +21,10 @@ export declare function StyleThemeProvider({ theme, children, }: {
  * write that the worker-side half of the rendering derives from. This one
  * colors React and nothing else.
  */
-export declare function PaletteProvider({ palette, children, }: {
+export declare const PaletteProvider: ({ palette, children, }: {
     palette: JBrowsePalette;
     children: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export declare function useStyleTheme(): JBrowseStyleTheme;
 export declare function usePalette(): JBrowsePalette;
 /** What {@link useSessionPalette} needs of a session. */
@@ -39,9 +39,11 @@ export interface ThemeModeSession {
  * follow its dark mode mounts {@link SessionPaletteProvider}, which is this
  * hook and the provider in one.
  *
- * Pass no mode and JBrowse follows the page: its declared CSS `color-scheme`
- * when that names one of light or dark, the OS preference otherwise, tracking
- * both. A host whose mode lives somewhere a stylesheet cannot see passes it.
+ * Pass no mode and JBrowse follows the page's CSS `color-scheme`: light or dark
+ * where the page names one, the OS preference where it names both, and light
+ * where it names neither, so a page with no dark styling never gets a dark
+ * JBrowse from a dark OS. A host whose mode lives somewhere a stylesheet cannot
+ * see passes it.
  *
  * **Both halves are load-bearing, which is why the pairing is published as a
  * component.** The palette is what *React* draws with; the config `theme` slot
@@ -69,8 +71,8 @@ export declare function useSessionPalette(session: ThemeModeSession, mode?: 'lig
  *
  * `mode` is optional. Left out, JBrowse follows the page's declared
  * `color-scheme` — so a host whose dark-mode toggle sets it, as most do, mounts
- * this with a session and nothing else — and the OS preference where the page
- * declares none.
+ * this with a session and nothing else. A page that declares `light dark`
+ * follows the OS, and a page that declares nothing stays light.
  *
  * A component rather than a documented pair of calls because the pair has a
  * half that can be left out with nothing to show for it. `PaletteProvider` is
@@ -83,8 +85,8 @@ export declare function useSessionPalette(session: ThemeModeSession, mode?: 'lig
  * The session is the only thing that resolves a palette here, so a host
  * supplying colors of its own mounts `PaletteProvider` directly instead.
  */
-export declare function SessionPaletteProvider({ session, mode, children, }: {
+export declare const SessionPaletteProvider: ({ session, mode, children, }: {
     session: ThemeModeSession;
     mode?: 'light' | 'dark';
     children: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;