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

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

package/esm/ui/StackTraceButton.d.ts

@@ -1,5 +1,6 @@
 import type { IconButtonProps } from '@mui/material';
-export default function StackTraceButton({ error, color, }: {
+declare const StackTraceButton: ({ error, color, }: {
     error: unknown;
     color?: IconButtonProps['color'];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default StackTraceButton;

package/esm/ui/StackTraceButton.js

@@ -2,15 +2,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Suspense, lazy, useState } from 'react';
 import ReportIcon from '@mui/icons-material/Report';
 import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 const ErrorMessageStackTraceDialog = lazy(() => import('./ErrorMessageStackTraceDialog.js'));
 // "Show stack trace" icon button that lazy-loads and opens the stack-trace
 // dialog. Shared by ErrorBanner and ErrorBar so the lazy import and open/close
 // state live in one place.
-export default function StackTraceButton({ error, color, }) {
+const StackTraceButton = observer(function StackTraceButton({ error, color, }) {
     const [showStack, setShowStack] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { color: color, onClick: () => {
                         setShowStack(true);
                     }, children: _jsx(ReportIcon, {}) }) }), showStack ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
                         setShowStack(false);
                     } }) })) : null] }));
-}
+});
+export default StackTraceButton;

package/esm/ui/StatusProgressBar.d.ts

@@ -30,8 +30,9 @@
  * two modules deep, and its own test asserts the rendered tree carries no `Mui*`
  * class, which catches a Material component rendered directly.
  */
-export default function StatusProgressBar({ fraction, className, style, }: {
+declare const StatusProgressBar: ({ fraction, className, style, }: {
     fraction?: number;
     className?: string;
     style?: React.CSSProperties;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default StatusProgressBar;

package/esm/ui/StatusProgressBar.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 { indeterminateSweep } from './statusProgressKeyframes.js';
 const HEIGHT = 4;
@@ -64,7 +65,7 @@ const useStyles = makeStyles()(theme => ({
  * two modules deep, and its own test asserts the rendered tree carries no `Mui*`
  * class, which catches a Material component rendered directly.
  */
-export default function StatusProgressBar({ fraction, className, style, }) {
+const StatusProgressBar = observer(function StatusProgressBar({ fraction, className, style, }) {
     const { classes } = useStyles();
     const determinate = fraction !== undefined;
     // one clamp for both halves. `statusFraction` clamps its own output, but a
@@ -73,4 +74,5 @@ export default function StatusProgressBar({ fraction, className, style, }) {
     // a negative announce a value below the `aria-valuemin` declared beside it.
     const filled = Math.min(1, Math.max(0, fraction ?? 0));
     return (_jsx("div", { className: cx(classes.track, className), style: style, role: "progressbar", "aria-valuemin": determinate ? 0 : undefined, "aria-valuemax": determinate ? 100 : undefined, "aria-valuenow": determinate ? Math.round(filled * 100) : undefined, children: _jsx("div", { className: cx(classes.bar, determinate ? undefined : classes.sweep), style: determinate ? { transform: `scaleX(${filled})` } : undefined }) }));
-}
+});
+export default StatusProgressBar;

package/esm/ui/SubmitForm.d.ts

@@ -20,4 +20,5 @@ export interface SubmitFormProps {
  * outer chrome) is shared across several tab panes uses this directly, so the
  * panes get the same keyboard behavior without each owning a Dialog.
  */
-export default function SubmitForm({ onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, }: SubmitFormProps): import("react").JSX.Element;
+declare const SubmitForm: ({ onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, }: SubmitFormProps) => import("react").JSX.Element;
+export default SubmitForm;

package/esm/ui/SubmitForm.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, DialogActions, DialogContent } from '@mui/material';
+import { observer } from 'mobx-react';
 /**
  * Content plus a Cancel/Submit footer, wrapped in a form so Enter submits.
  * SubmitDialog is this with a Dialog around it; a dialog whose Dialog (and
  * outer chrome) is shared across several tab panes uses this directly, so the
  * panes get the same keyboard behavior without each owning a Dialog.
  */
-export default function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel', submitText = 'Submit', submitDisabled = false, submitColor = 'primary', submitStartIcon, onReset, resetText = 'Restore default', actions, contentClassName, children, }) {
+const SubmitForm = observer(function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel', submitText = 'Submit', submitDisabled = false, submitColor = 'primary', submitStartIcon, onReset, resetText = 'Restore default', actions, contentClassName, children, }) {
     return (_jsxs("form", { onSubmit: event => {
             event.preventDefault();
             if (!submitDisabled) {
@@ -20,4 +21,5 @@ export default function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel',
                                 onCancel();
                             }
                         }, children: onReset ? resetText : cancelText }), actions, _jsx(Button, { type: "submit", color: submitColor, variant: "contained", disabled: submitDisabled, startIcon: submitStartIcon, children: submitText })] })] }));
-}
+});
+export default SubmitForm;

package/esm/ui/SvgColorLegend.d.ts

@@ -3,11 +3,10 @@ export type { ColorLegendEntry } from './legendSpec.ts';
 export declare const LEGEND_ROW_HEIGHT = 14;
 export declare const LEGEND_SWATCH = 10;
 /**
- * Horizontal space the LGV export reserves beside the plot for a display whose
- * legend asked to sit off the plot (`LegendMixin.svgLegendWidth`): the widest
- * row this draws for a ramp, plus a margin either side.
+ * Width of the paper `SvgColorLegend` draws for `entries` under `maxHeight`, 0
+ * when it draws nothing.
  */
-export declare const LEGEND_SVG_GUTTER_WIDTH: number;
+export declare function svgColorLegendWidth(entries: ColorLegendEntry[], maxHeight?: number): number;
 export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }: {
     entries: ColorLegendEntry[];
     canvasWidth: number;

package/esm/ui/SvgColorLegend.js

@@ -15,12 +15,6 @@ const GRADIENT_BAR_WIDTH = 100;
 const GRADIENT_BAR_HEIGHT = 10;
 // the bar plus the row of domain labels under it
 const GRADIENT_ROW_HEIGHT = GRADIENT_BAR_HEIGHT + 4 + LEGEND_ROW_HEIGHT;
-/**
- * Horizontal space the LGV export reserves beside the plot for a display whose
- * legend asked to sit off the plot (`LegendMixin.svgLegendWidth`): the widest
- * row this draws for a ramp, plus a margin either side.
- */
-export const LEGEND_SVG_GUTTER_WIDTH = GRADIENT_BAR_WIDTH + 40;
 // A row's swatches, with the flat `color` shorthand read as the single
 // square it has always drawn.
 function entrySwatches(entry) {
@@ -59,23 +53,16 @@ function fitEntries(entries, maxHeight) {
     }
     return shown;
 }
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 function GradientRow({ entry, width, gradientId, }) {
     const { stops, minLabel, maxLabel } = entry.gradient;
     const barTop = (entry.label ? LEGEND_ROW_HEIGHT : 0) + 2;
     const labelY = barTop + GRADIENT_BAR_HEIGHT + 2 + FONT_SIZE;
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: 0, width: width, height: rowHeight(entry), fill: "rgba(255,255,255,0.95)" }), entry.label ? (_jsx("text", { x: SWATCH_LEFT, y: 11, fontSize: FONT_SIZE, fill: "black", children: entry.label })) : null, _jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: stops.map(stop => (_jsx("stop", { offset: stop.offset, style: { stopColor: stop.color, stopOpacity: stop.opacity ?? 1 } }, stop.offset))) }) }), _jsx("rect", { x: SWATCH_LEFT, y: barTop, width: GRADIENT_BAR_WIDTH, height: GRADIENT_BAR_HEIGHT, fill: `url(#${gradientId})`, rx: 2 }), _jsx("text", { x: SWATCH_LEFT, y: labelY, fontSize: FONT_SIZE, fill: "black", children: minLabel }), _jsx("text", { x: SWATCH_LEFT + GRADIENT_BAR_WIDTH, y: labelY, fontSize: FONT_SIZE, fill: "black", textAnchor: "end", children: maxLabel })] }));
 }
-// Shared SVG color key: one translucent row per entry — a swatch and a label,
-// or a ramp bar with its domain ends — right-aligned within `canvasWidth`, or
-// at `x` when the caller places it (the LGV export's legend gutter). A <g>, so
-// an on-screen SVG overlay and the export share one renderer.
-//
-// `maxHeight` (the display height) caps the box: entries past what fits
-// collapse into a trailing "+N more" summary row, so the legend never overflows
-// its display — the full list stays reachable via the track menu.
-export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }) {
-    const reactId = useId();
-    const legendId = idPrefix ?? reactId;
+// What the key draws for `entries` under `maxHeight`, and how wide its paper
+// is, so a caller sizing a gutter measures the box this renders.
+function legendBox(entries, maxHeight) {
     const shown = maxHeight === undefined ? entries : fitEntries(entries, maxHeight);
     const cutRows = entries.slice(shown.length).filter(keysAColor).length;
     const overflowLabel = cutRows > 0 ? `+${cutRows} more` : undefined;
@@ -95,12 +82,34 @@ export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, tes
         contentRight = Math.max(contentRight, textLeft + measureLegendText(overflowLabel, FONT_SIZE));
     }
     const totalWidth = contentRight + 6;
-    const left = x ?? Math.max(0, canvasWidth - totalWidth - 4);
     const rowTops = [];
     let y = 0;
     for (const entry of shown) {
         rowTops.push(y);
         y += rowHeight(entry);
     }
+    return { shown, overflowLabel, textLeft, totalWidth, rowTops, bottom: y };
+}
+/**
+ * Width of the paper `SvgColorLegend` draws for `entries` under `maxHeight`, 0
+ * when it draws nothing.
+ */
+export function svgColorLegendWidth(entries, maxHeight) {
+    const { shown, overflowLabel, totalWidth } = legendBox(entries, maxHeight);
+    return shown.length || overflowLabel ? totalWidth : 0;
+}
+// Shared SVG color key: one translucent row per entry — a swatch and a label,
+// or a ramp bar with its domain ends — right-aligned within `canvasWidth`, or
+// at `x` when the caller places it (an export's legend gutter). A <g>, so
+// an on-screen SVG overlay and the export share one renderer.
+//
+// `maxHeight` (the display height) caps the box: entries past what fits
+// collapse into a trailing "+N more" summary row, so the legend never overflows
+// its display — the full list stays reachable via the track menu.
+export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }) {
+    const reactId = useId();
+    const legendId = idPrefix ?? reactId;
+    const { shown, overflowLabel, textLeft, totalWidth, rowTops, bottom: y, } = legendBox(entries, maxHeight);
+    const left = x ?? Math.max(0, canvasWidth - totalWidth - 4);
     return shown.length || overflowLabel ? (_jsxs("g", { transform: `translate(${left} 0)`, "data-testid": testid, children: [shown.map((entry, idx) => (_jsx("g", { transform: `translate(0 ${rowTops[idx]})`, children: entry.gradient ? (_jsx(GradientRow, { entry: entry, width: totalWidth, gradientId: svgSafeId(`${legendId}-${entry.key}`) })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: 0, width: totalWidth, height: LEGEND_ROW_HEIGHT, fill: "rgba(255,255,255,0.95)" }), _jsxs("g", { opacity: entry.hidden ? 0.35 : 1, children: [entrySwatches(entry).map((swatch, i) => (_jsx(LegendSwatchGlyph, { swatch: swatch, size: LEGEND_SWATCH, x: SWATCH_LEFT + i * (LEGEND_SWATCH + SWATCH_GAP), y: 2 }, `${swatch.shape}-${swatch.color}`))), _jsx("text", { x: textLeft, y: 11, fontSize: FONT_SIZE, fill: "black", textDecoration: entry.hidden ? 'line-through' : undefined, children: entry.label })] })] })) }, entry.key))), overflowLabel === undefined ? null : (_jsxs("g", { transform: `translate(0 ${y})`, children: [_jsx("rect", { x: 0, y: 0, width: totalWidth, height: LEGEND_ROW_HEIGHT, fill: "rgba(255,255,255,0.95)" }), _jsx("text", { x: textLeft, y: 11, fontSize: FONT_SIZE, fill: "#555", children: overflowLabel })] }))] })) : null;
 }

package/esm/ui/TagTextField.d.ts

@@ -36,5 +36,5 @@ type Props = Omit<TextFieldProps, 'value' | 'onChange' | 'error' | 'helperText'
  * error once two invalid characters are entered. Optional `quickPicks` render a
  * chip row of common tags that fill the field on click.
  */
-export default function TagTextField(props: Props): import("react").JSX.Element;
-export {};
+declare const TagTextField: (props: Props) => import("react").JSX.Element;
+export default TagTextField;