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

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;

package/esm/ui/PaletteContext.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, use, useEffect, useMemo, useSyncExternalStore, } from 'react';
+import { observer } from 'mobx-react';
 import { onColorSchemeChange, prefersDarkColorScheme, } from '../util/systemColorScheme.js';
 import { defaultStyleTheme } from './styleTheme.js';
 /**
@@ -25,6 +26,7 @@ const StyleThemeContext = createContext(undefined);
  * `theme` that sets `spacing` or `typography` reaches `makeStyles` and Material
  * UI alike.
  */
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 export function StyleThemeProvider({ theme, children, }) {
     return _jsx(StyleThemeContext, { value: theme, children: children });
 }
@@ -38,10 +40,10 @@ export function StyleThemeProvider({ theme, children, }) {
  * write that the worker-side half of the rendering derives from. This one
  * colors React and nothing else.
  */
-export function PaletteProvider({ palette, children, }) {
+export const PaletteProvider = observer(function PaletteProvider({ palette, children, }) {
     const theme = useMemo(() => ({ ...defaultStyleTheme, palette }), [palette]);
     return _jsx(StyleThemeProvider, { theme: theme, children: children });
-}
+});
 export function useStyleTheme() {
     return use(StyleThemeContext) ?? defaultStyleTheme;
 }
@@ -59,17 +61,28 @@ function subscribeToColorScheme(onChange) {
         observer?.disconnect();
     };
 }
-// The page's declared `color-scheme`, as the browser resolves it for form
-// controls: a page that declares only one of light or dark gets that one, and
-// one that declares both, or neither, gets the OS preference.
-function readColorScheme() {
-    const declared = getComputedStyle(document.documentElement)
-        .getPropertyValue('color-scheme')
+function schemesNamedIn(value) {
+    return value
         .split(/\s+/)
         .filter((word) => ['light', 'dark'].includes(word));
-    return declared.length === 1
-        ? declared[0]
-        : prefersDarkColorScheme()
+}
+// The page's `color-scheme`, as the browser resolves it for form controls and
+// the canvas: a page that names one of light or dark gets that one, a page that
+// names both gets the OS preference, and a page that names neither is light
+// whatever the OS says. The `<meta name="color-scheme">` tag stands in where no
+// stylesheet sets the property, since the computed value does not reflect it.
+function readColorScheme() {
+    const computed = schemesNamedIn(getComputedStyle(document.documentElement).getPropertyValue('color-scheme'));
+    const declared = new Set(computed.length > 0
+        ? computed
+        : schemesNamedIn(document
+            .querySelector('meta[name="color-scheme"]')
+            ?.getAttribute('content') ?? ''));
+    return declared.size === 2
+        ? prefersDarkColorScheme()
+            ? 'dark'
+            : 'light'
+        : declared.has('dark')
             ? 'dark'
             : 'light';
 }
@@ -86,9 +99,11 @@ function useResolvedMode(mode) {
  * 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
@@ -122,8 +137,8 @@ export function useSessionPalette(session, mode) {
  *
  * `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
@@ -136,7 +151,7 @@ export function useSessionPalette(session, mode) {
  * The session is the only thing that resolves a palette here, so a host
  * supplying colors of its own mounts `PaletteProvider` directly instead.
  */
-export function SessionPaletteProvider({ session, mode, children, }) {
+export const SessionPaletteProvider = observer(function SessionPaletteProvider({ session, mode, children, }) {
     const palette = useSessionPalette(session, mode);
     return _jsx(PaletteProvider, { palette: palette, children: children });
-}
+});

package/esm/ui/PluginStoreCard.d.ts

@@ -8,10 +8,11 @@ import type { JBrowsePlugin } from '../util/types/index.ts';
  * version-pinned, integrity-carrying, and refused when no published version
  * supports this JBrowse.
  */
-export default function PluginStoreCard({ plugin, resolved, installed, disabled, onInstall, }: {
+declare const PluginStoreCard: ({ plugin, resolved, installed, disabled, onInstall, }: {
     plugin: JBrowsePlugin;
     resolved: ResolvedPlugin;
     installed: boolean;
     disabled?: boolean;
     onInstall: (definition: PluginDefinition) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default PluginStoreCard;

package/esm/ui/PluginStoreCard.js

@@ -3,6 +3,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CheckIcon from '@mui/icons-material/Check';
 import PersonIcon from '@mui/icons-material/Person';
 import { Button, Card, CardActions, CardContent, Chip, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ExternalLink from './ExternalLink.js';
 const useStyles = makeStyles()({
@@ -33,7 +34,7 @@ const useStyles = makeStyles()({
  * version-pinned, integrity-carrying, and refused when no published version
  * supports this JBrowse.
  */
-export default function PluginStoreCard({ plugin, resolved, installed, disabled, onInstall, }) {
+const PluginStoreCard = observer(function PluginStoreCard({ plugin, resolved, installed, disabled, onInstall, }) {
     const { classes } = useStyles();
     const { definition, compatible, supportedRanges, pluginVersion } = resolved;
     const installable = compatible && definition !== undefined;
@@ -42,4 +43,5 @@ export default function PluginStoreCard({ plugin, resolved, installed, disabled,
                             onInstall(definition);
                         }
                     }, children: installed ? 'Installed' : 'Install' }) })] }));
-}
+});
+export default PluginStoreCard;

package/esm/ui/PopoverPicker.d.ts

@@ -1,6 +1,7 @@
-export default function PopoverPicker({ color, onChange, presetAlpha, unset, }: {
+declare const PopoverPicker: ({ color, onChange, presetAlpha, unset, }: {
     color: string;
     onChange: (color: string) => void;
     presetAlpha?: number;
     unset?: boolean;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default PopoverPicker;

package/esm/ui/PopoverPicker.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import { ColorPopover } from './ColorPicker.js';
 import { swatchStyle } from './colorSwatchStyle.js';
@@ -13,7 +14,7 @@ const useStyles = makeStyles()({
         boxSizing: 'border-box',
     },
 });
-export default function PopoverPicker({ color, onChange, presetAlpha, unset, }) {
+const PopoverPicker = observer(function PopoverPicker({ color, onChange, presetAlpha, unset, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const { classes, cx } = useStyles();
     const isAuto = color === 'auto';
@@ -22,4 +23,5 @@ export default function PopoverPicker({ color, onChange, presetAlpha, unset, })
                 } }), _jsx(ColorPopover, { anchorEl: anchorEl, onClose: () => {
                     setAnchorEl(null);
                 }, color: isAuto ? 'blue' : color, onChange: onChange, presetAlpha: presetAlpha })] }));
-}
+});
+export default PopoverPicker;

package/esm/ui/PrerenderedCanvas.d.ts

@@ -1,4 +1,4 @@
-declare function PrerenderedCanvas(props: {
+declare const PrerenderedCanvas: (props: {
     width: number;
     height: number;
     highResolutionScaling?: number;
@@ -6,5 +6,5 @@ declare function PrerenderedCanvas(props: {
     imageData?: unknown;
     showSoftClip?: boolean;
     blockKey?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default PrerenderedCanvas;

package/esm/ui/PrerenderedCanvas.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { observer } from 'mobx-react';
 import { drawImageOntoCanvasContext } from '../util/offscreenCanvasPonyfill.js';
-function PrerenderedCanvas(props) {
+const PrerenderedCanvas = observer(function PrerenderedCanvas(props) {
     const { width, height, highResolutionScaling = 1, style = {}, imageData, blockKey, showSoftClip, } = props;
     const [done, setDone] = useState(false);
     const featureCanvasRef = useRef(null);
@@ -30,5 +31,5 @@ function PrerenderedCanvas(props) {
         ]
             .filter(f => !!f)
             .join('_'), ref: featureCanvasRef, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
-}
+});
 export default PrerenderedCanvas;

package/esm/ui/RedErrorMessageBox.d.ts

@@ -1,3 +1,4 @@
-export default function RedErrorMessageBox({ children, }: {
+declare const RedErrorMessageBox: ({ children, }: {
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default RedErrorMessageBox;