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

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;

package/esm/ui/RedErrorMessageBox.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     bg: {
@@ -16,7 +17,8 @@ const useStyles = makeStyles()(theme => ({
 // that still showed either failed loudly — but an MST type error surfacing here
 // over a view was captured and committed as if the figure were fine. Keying off
 // `#f88` instead would break on the dark theme and on any restyle.
-export default function RedErrorMessageBox({ children, }) {
+const RedErrorMessageBox = observer(function RedErrorMessageBox({ children, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: classes.bg, "data-testid": "error-message-box", children: children }));
-}
+});
+export default RedErrorMessageBox;

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

@@ -1,5 +1,6 @@
 import type { MenuItem } from '../Menu.tsx';
-export default function EndAdornment({ showHelp, menuItems, }: {
+declare const EndAdornment: ({ showHelp, menuItems, }: {
     showHelp?: boolean;
     menuItems?: MenuItem[];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default EndAdornment;

package/esm/ui/RefNameAutocomplete/EndAdornment.js

@@ -4,12 +4,13 @@ import Help from '@mui/icons-material/Help';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import SearchIcon from '@mui/icons-material/Search';
 import { InputAdornment } from '@mui/material';
+import { observer } from 'mobx-react';
 import CascadingMenuButton from '../CascadingMenuButton.js';
 const HelpDialog = lazy(() => import('./HelpDialog.js'));
 // The search-box overflow (⋮) menu: consumer-supplied rows (e.g. recent
 // locations) sit above the built-in help entry. Rendered only when there is
 // something to show, so a bare box keeps just its search icon.
-export default function EndAdornment({ showHelp, menuItems = [], }) {
+const EndAdornment = observer(function EndAdornment({ showHelp, menuItems = [], }) {
     const [helpDialogOpen, setHelpDialogOpen] = useState(false);
     const items = [
         ...menuItems,
@@ -28,4 +29,5 @@ export default function EndAdornment({ showHelp, menuItems = [], }) {
     return (_jsxs(InputAdornment, { position: "end", style: { marginRight: 7 }, children: [_jsx(SearchIcon, { fontSize: "small" }), items.length ? (_jsx(CascadingMenuButton, { menuItems: items, size: "small", stopPropagation: true, tooltip: "Search box options", children: _jsx(MoreVertIcon, { fontSize: "small" }) })) : null, helpDialogOpen ? (_jsx(Suspense, { fallback: null, children: _jsx(HelpDialog, { handleClose: () => {
                         setHelpDialogOpen(false);
                     } }) })) : null] }));
-}
+});
+export default EndAdornment;

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

@@ -1,3 +1,4 @@
-export default function HelpDialog({ handleClose, }: {
+declare const HelpDialog: ({ handleClose, }: {
     handleClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default HelpDialog;

package/esm/ui/RefNameAutocomplete/HelpDialog.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import InfoDialog from '../InfoDialog.js';
-export default function HelpDialog({ handleClose, }) {
+const HelpDialog = observer(function HelpDialog({ handleClose, }) {
     return (_jsxs(InfoDialog, { open: true, maxWidth: "xl", onClose: () => {
             handleClose();
         }, title: "Using the search box", children: [_jsx("h3", { children: "Searching" }), _jsxs("ul", { children: [_jsx("li", { children: "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter." }), _jsxs("li", { children: ["Jump to a specific region by typing the region into the location box as: ", _jsx("code", { children: "ref:start..end" }), " or ", _jsx("code", { children: "ref:start-end" }), ". Commas are allowed in the start and end coordinates. A space-separated list of locstrings can be used to open up multiple chromosomes at a time"] }), _jsxs("li", { children: ["Find a group of reference sequences by typing a pattern containing", ' ', _jsx("code", { children: "*" }), ", which stands for any run of characters. The matches appear in the dropdown, with a row at the top that opens all of them at once. Useful on a fragmented or haplotype-resolved assembly, where the useful selection is a pattern rather than a list you keep by hand."] })] }), _jsx("h3", { children: "Example Searches" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "BRCA" }), " - searches for the feature named BRCA"] }), _jsxs("li", { children: [_jsx("code", { children: "chr4" }), " - jumps to chromosome 4"] }), _jsxs("li", { children: [_jsx("code", { children: "chr4:79,500,000..80,000,000" }), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."] }), _jsxs("li", { children: [_jsx("code", { children: "chr1:1-100 chr2:1-100" }), " - create a split view of chr1:1-100 and chr2:1-100"] }), _jsxs("li", { children: [_jsx("code", { children: "chr1 chr2 chr3" }), " - open up multiple chromosomes at once"] }), _jsxs("li", { children: [_jsx("code", { children: "chr1:1-100[rev] chr2:1-100" }), " - open up the first region in the horizontally flipped orientation"] }), _jsxs("li", { children: [_jsx("code", { children: "chr1 100 200" }), " - use whitespace separated refname, start, end"] }), _jsxs("li", { children: [_jsx("code", { children: "*_hap1" }), " - list every reference sequence whose name ends in _hap1, and offer to open all of them"] })] })] }));
-}
+});
+export default HelpDialog;

package/esm/ui/ReplaceCurrentViewButton.d.ts

@@ -13,7 +13,8 @@
  * Pair it with `isSessionWithViewReplacement` — a session that cannot replace a
  * view should not be offered the choice.
  */
-export default function ReplaceCurrentViewButton({ disabled, onClick, }: {
+declare const ReplaceCurrentViewButton: ({ disabled, onClick, }: {
     disabled?: boolean;
     onClick: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ReplaceCurrentViewButton;

package/esm/ui/ReplaceCurrentViewButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 /**
  * The second way out of a launch dialog: put the view it builds in the slot the
  * launching view occupies instead of appending it below. Offered by every launch
@@ -15,8 +16,9 @@ import { Button } from '@mui/material';
  * Pair it with `isSessionWithViewReplacement` — a session that cannot replace a
  * view should not be offered the choice.
  */
-export default function ReplaceCurrentViewButton({ disabled, onClick, }) {
+const ReplaceCurrentViewButton = observer(function ReplaceCurrentViewButton({ disabled, onClick, }) {
     return (_jsx(Button, { type: "button", variant: "contained", color: "primary", disabled: disabled, onClick: () => {
             onClick();
         }, children: "Replace current view" }));
-}
+});
+export default ReplaceCurrentViewButton;

package/esm/ui/ResizeHandle.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-declare function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical, bar, grip, gain, className: originalClassName, onPointerDown, ...props }: {
+declare const ResizeHandle: ({ onDrag, onDragStart, onDragEnd, vertical, bar, grip, gain, className: originalClassName, onPointerDown, ...props }: {
     onDrag: (distance: number) => void;
     onDragStart?: () => void;
     onDragEnd?: () => void;
@@ -13,5 +13,5 @@ declare function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical, bar, g
      * and this handle sits below more than one of them.
      */
     gain?: number;
-} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onDrag' | 'onDragStart' | 'onDragEnd'>): React.JSX.Element;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onDrag' | 'onDragStart' | 'onDragEnd'>) => React.JSX.Element;
 export default ResizeHandle;

package/esm/ui/ResizeHandle.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { cx, makeStyles } from '../util/tss-react/index.js';
 import { useResizeDrag } from '../util/useResizeDrag.js';
 const layer = (color) => `linear-gradient(${color}, ${color})`;
@@ -57,7 +58,7 @@ const useStyles = makeStyles()(theme => ({
         borderLeft: `1px solid ${theme.palette.text.disabled}`,
     },
 }));
-function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar = false, grip = false, gain, className: originalClassName, onPointerDown, ...props }) {
+const ResizeHandle = observer(function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar = false, grip = false, gain, className: originalClassName, onPointerDown, ...props }) {
     const { classes } = useStyles();
     // The gesture, including the per-frame coalescing, the delta measurement and
     // the `data-gesture-owner` marker that keeps ancestor drags (the LGV
@@ -83,5 +84,5 @@ function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar =
             handleProps.onPointerDown(event);
             onPointerDown?.(event);
         } }));
-}
+});
 export default ResizeHandle;

package/esm/ui/SanitizedHTML.d.ts

@@ -3,7 +3,8 @@ declare global {
         setHTML?(html: string): void;
     }
 }
-export default function SanitizedHTML({ html: pre, className, }: {
+declare const SanitizedHTML: ({ html: pre, className, }: {
     className?: string;
     html: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SanitizedHTML;

package/esm/ui/SanitizedHTML.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, lazy, useLayoutEffect, useRef } from 'react';
+import { observer } from 'mobx-react';
 import { escapeHTML, looksLikeHTML } from '../util/htmlText.js';
 import { linkify } from '../util/index.js';
 import { rewriteExternalAnchors } from './rewriteExternalAnchors.js';
@@ -7,7 +8,7 @@ const DOMPurifySanitizedHTML = lazy(() => import('./DOMPurifySanitizedHTML.js'))
 function needsSanitization(str) {
     return str.includes('<') || str.includes('://');
 }
-function SetHTML({ value, className }) {
+const SetHTML = observer(function SetHTML({ value, className, }) {
     const spanRef = useRef(null);
     useLayoutEffect(() => {
         const el = spanRef.current;
@@ -22,8 +23,8 @@ function SetHTML({ value, className }) {
         }
     }, [value]);
     return _jsx("span", { ref: spanRef, className: className });
-}
-export default function SanitizedHTML({ html: pre, className, }) {
+});
+const SanitizedHTML = observer(function SanitizedHTML({ html: pre, className, }) {
     const str = `${pre}`;
     if (!needsSanitization(str)) {
         return _jsx("span", { className: className, children: str });
@@ -34,4 +35,5 @@ export default function SanitizedHTML({ html: pre, className, }) {
         return _jsx(SetHTML, { value: value, className: className });
     }
     return (_jsx(Suspense, { fallback: _jsx("span", { className: className }), children: _jsx(DOMPurifySanitizedHTML, { value: value, className: className }) }));
-}
+});
+export default SanitizedHTML;

package/esm/ui/ScrollChrome.d.ts

@@ -4,10 +4,11 @@ import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
  * shadow saying content is hidden, and the scrollbar to reach it. Renders
  * nothing when the content fits.
  */
-export default function ScrollChrome({ model, controlsId, top, }: {
+declare const ScrollChrome: ({ model, controlsId, top, }: {
     model: VirtualScrollModel;
     /** `id` of the scrolled viewport element, for `aria-controls`. */
     controlsId: string;
     /** Viewport offset from the top, for a display with a sticky band above it. */
     top?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ScrollChrome;

package/esm/ui/ScrollChrome.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 ScrollEdgeShadow from './ScrollEdgeShadow.js';
 import VerticalScrollbar from './VerticalScrollbar.js';
 /**
@@ -6,6 +7,7 @@ import VerticalScrollbar from './VerticalScrollbar.js';
  * shadow saying content is hidden, and the scrollbar to reach it. Renders
  * nothing when the content fits.
  */
-export default function ScrollChrome({ model, controlsId, top = 0, }) {
+const ScrollChrome = observer(function ScrollChrome({ model, controlsId, top = 0, }) {
     return (_jsxs(_Fragment, { children: [_jsx(ScrollEdgeShadow, { model: model, top: top }), _jsx(VerticalScrollbar, { model: model, controlsId: controlsId, top: top })] }));
-}
+});
+export default ScrollChrome;

package/esm/ui/ScrollEdgeShadow.d.ts

@@ -14,9 +14,9 @@ import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
  *
  * - **It costs nothing when nothing is hidden.** No content past an edge, no
  *   fade at that edge; a track that fits draws neither. So it is a readout of
- *   state, not a decoration — which a recoloured bottom border could not be
+ *   state, not a decoration — which a recolored bottom border could not be
  *   (and which would also need `showTrackOutlines`, an option the user can turn
- *   off, to have a border to recolour).
+ *   off, to have a border to recolor).
  * - **It says which way.** Scrolled to the bottom, the bottom fade goes and the
  *   top one appears, so "am I at the end" is answerable without scrolling.
  *

package/esm/ui/ScrollEdgeShadow.js

@@ -44,9 +44,9 @@ const useStyles = makeStyles()(theme => {
  *
  * - **It costs nothing when nothing is hidden.** No content past an edge, no
  *   fade at that edge; a track that fits draws neither. So it is a readout of
- *   state, not a decoration — which a recoloured bottom border could not be
+ *   state, not a decoration — which a recolored bottom border could not be
  *   (and which would also need `showTrackOutlines`, an option the user can turn
- *   off, to have a border to recolour).
+ *   off, to have a border to recolor).
  * - **It says which way.** Scrolled to the bottom, the bottom fade goes and the
  *   top one appears, so "am I at the end" is answerable without scrolling.
  *

package/esm/ui/SessionJsonPanel.d.ts

@@ -1,3 +1,4 @@
-export default function SessionJsonPanel({ session }: {
+declare const SessionJsonPanel: ({ session, }: {
     session: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SessionJsonPanel;

package/esm/ui/SessionJsonPanel.js

@@ -1,14 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { observer } from 'mobx-react';
 import LabeledCheckbox from './LabeledCheckbox.js';
 import MonospaceTextField from './MonospaceTextField.js';
 // The session a share or export dialog is about to hand over, as indented JSON
 // behind a checkbox, so the sender can read what they are sending whichever
 // link carries it. Shared by jbrowse-web's ShareDialog and jbrowse-desktop's
 // ExportToWebDialog.
-export default function SessionJsonPanel({ session }) {
+const SessionJsonPanel = observer(function SessionJsonPanel({ session, }) {
     const [show, setShow] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(LabeledCheckbox, { checked: show, onChange: val => {
                     setShow(val);
                 }, label: "Show readable JSON" }), show ? (_jsx(MonospaceTextField, { label: "Session JSON", value: JSON.stringify(session, null, 2), readOnly: true, fullWidth: true, maxRows: 20 })) : null] }));
-}
+});
+export default SessionJsonPanel;

package/esm/ui/ShareLinkField.d.ts

@@ -1,4 +1,5 @@
-export default function ShareLinkField({ value, label, }: {
+declare const ShareLinkField: ({ value, label, }: {
     value: string;
     label?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ShareLinkField;

package/esm/ui/ShareLinkField.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 // Read-only single-line field for a shareable URL; clicking selects the whole
 // value so it's easy to copy. Shared by jbrowse-web's ShareDialog and
 // jbrowse-desktop's ExportToWebDialog.
-export default function ShareLinkField({ value, label = 'URL', }) {
+const ShareLinkField = observer(function ShareLinkField({ value, label = 'URL', }) {
     return (_jsx(TextField, { label: label, value: value, variant: "filled", fullWidth: true, onClick: event => {
             const target = event.target;
             target.select();
@@ -12,4 +13,5 @@ export default function ShareLinkField({ value, label = 'URL', }) {
                 readOnly: true,
             },
         } }));
-}
+});
+export default ShareLinkField;

package/esm/ui/SingleSlider.d.ts

@@ -4,5 +4,5 @@ type Props = Omit<SliderProps, 'value' | 'defaultValue' | 'onChange' | 'onChange
     onChange?: (value: number) => void;
     onChangeCommitted?: (value: number) => void;
 };
-export default function SingleSlider(props: Props): import("react").JSX.Element;
-export {};
+declare const SingleSlider: (props: Props) => import("react").JSX.Element;
+export default SingleSlider;

package/esm/ui/SingleSlider.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slider } from '@mui/material';
+import { observer } from 'mobx-react';
 import SliderTooltip from './SliderTooltip.js';
-export default function SingleSlider(props) {
+const SingleSlider = observer(function SingleSlider(props) {
     const { onChange, onChangeCommitted, slots, ...rest } = props;
     return (_jsx(Slider, { ...rest, slots: { valueLabel: SliderTooltip, ...slots }, onChange: (_, value) => {
             onChange?.(typeof value === 'number' ? value : value[0]);
         }, onChangeCommitted: (_, value) => {
             onChangeCommitted?.(typeof value === 'number' ? value : value[0]);
         } }));
-}
+});
+export default SingleSlider;

package/esm/ui/SliderTooltip.d.ts

@@ -1,2 +1,3 @@
 import type { SliderValueLabelProps } from '@mui/material';
-export default function SliderTooltip(props: SliderValueLabelProps): import("react").JSX.Element;
+declare const SliderTooltip: (props: SliderValueLabelProps) => import("react").JSX.Element;
+export default SliderTooltip;

package/esm/ui/SliderTooltip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 // Arrow tooltip above the thumb, used as SingleSlider's default value label so
 // every slider (inline track-menu rows, the settings menus' size submenus, the
 // LGV zoom control) shows one consistent value affordance instead of MUI's default
@@ -11,7 +12,8 @@ import { Tooltip } from '@mui/material';
 // Popper. On the LGV zoom slider, whose value tracks live `bpPerPx`, that was a
 // Tooltip and a Popper re-rendering on every animation frame of a wheel zoom to
 // show nothing.
-export default function SliderTooltip(props) {
+const SliderTooltip = observer(function SliderTooltip(props) {
     const { children, open, value } = props;
     return open ? (_jsx(Tooltip, { open: true, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children })) : (children);
-}
+});
+export default SliderTooltip;

package/esm/ui/SnackbarContents.d.ts

@@ -1,5 +1,6 @@
 import type { SnackbarMessage } from './SnackbarModel.tsx';
-export default function SnackbarContents({ onClose, contents, }: {
+declare const SnackbarContents: ({ onClose, contents, }: {
     onClose: (_event: unknown, reason?: string) => void;
     contents: SnackbarMessage;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SnackbarContents;

package/esm/ui/SnackbarContents.js

@@ -5,6 +5,7 @@ import CloseIcon from '@mui/icons-material/Close';
 // See https://github.com/GMOD/jbrowse-components/issues/5325
 import Report from '@mui/icons-material/Report';
 import { Alert, Button, IconButton, Snackbar as MUISnackbar, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()({
     // preserve newlines in multi-line errors (e.g. MST validation dumps) while
@@ -17,7 +18,7 @@ const useStyles = makeStyles()({
         overflowY: 'auto',
     },
 });
-export default function SnackbarContents({ onClose, contents, }) {
+const SnackbarContents = observer(function SnackbarContents({ onClose, contents, }) {
     const { classes } = useStyles();
     const { actions } = contents;
     return (_jsx(MUISnackbar, { open: true, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, children: _jsx(Alert, { onClose: onClose, action: actions?.length ? (_jsxs(_Fragment, { children: [actions.map((action, idx) => (_jsx(Button
@@ -26,4 +27,5 @@ export default function SnackbarContents({ onClose, contents, }) {
                             action.onClick();
                             onClose(e);
                         }, children: action.name === 'report' ? _jsx(Report, {}) : action.name }, idx))), _jsx(IconButton, { color: "inherit", onClick: onClose, children: _jsx(CloseIcon, {}) })] })) : null, severity: contents.level || 'warning', "data-testid": `snackbar-${contents.level || 'warning'}`, children: _jsx("div", { className: classes.message, children: contents.message }) }) }));
-}
+});
+export default SnackbarContents;

package/esm/ui/SnackbarModel.d.ts

@@ -11,6 +11,8 @@ export interface ErrorDialogState {
 /**
  * #stateModel SnackbarModel
  * #category session
+ * Adds notifications to a session: the snackbar messages on screen, and the
+ * error shown in the stack-trace dialog.
  */
 export default function SnackbarModel(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
     /**

package/esm/ui/SnackbarModel.js

@@ -3,6 +3,8 @@ import { observable } from 'mobx';
 /**
  * #stateModel SnackbarModel
  * #category session
+ * Adds notifications to a session: the snackbar messages on screen, and the
+ * error shown in the stack-trace dialog.
  */
 export default function SnackbarModel() {
     return types