@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/SliderTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+// 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
+// bubble. Callers can still override via `slots={{ valueLabel }}`.
+//
+// Unmounted while closed rather than rendered with `open={false}`. `open` is the
+// Slider's own hover/drag state (it passes `open === index || active === index`),
+// so nothing here is what detects the hover — a closed Tooltip only costs its
+// 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 { children, open, value } = props;
+    return open ? (_jsx(Tooltip, { open: true, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children })) : (children);
+}

package/esm/ui/Snackbar.d.ts

@@ -1,10 +1,12 @@
-import type { SnackbarMessage } from './SnackbarModel.tsx';
 import type { AbstractSessionModel } from '../util/index.ts';
+import type { ErrorDialogState, SnackbarMessage } from './SnackbarModel.tsx';
 interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => void;
+    errorDialog: ErrorDialogState | undefined;
+    setErrorDialog: (state: ErrorDialogState | undefined) => void;
 }
 declare const Snackbar: ({ session, }: {
     session: SnackbarSession;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element;
 export default Snackbar;

package/esm/ui/Snackbar.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
 import { observer } from 'mobx-react';
-const SnackbarContents = lazy(() => import("./SnackbarContents.js"));
+const SnackbarContents = lazy(() => import('./SnackbarContents.js'));
+const ErrorMessageStackTraceDialog = lazy(() => import('./ErrorMessageStackTraceDialog.js'));
 const Snackbar = observer(function Snackbar({ session, }) {
-    const { snackbarMessages } = session;
+    const { snackbarMessages, errorDialog } = session;
     const latestMessage = snackbarMessages.at(-1);
-    return latestMessage ? (_jsx(Suspense, { fallback: null, children: _jsx(SnackbarContents, { onClose: (_event, reason) => {
-                if (reason !== 'clickaway') {
-                    session.popSnackbarMessage();
-                }
-            }, contents: latestMessage }) })) : null;
+    return (_jsxs(_Fragment, { children: [latestMessage ? (_jsx(Suspense, { fallback: null, children: _jsx(SnackbarContents, { onClose: (_event, reason) => {
+                        if (reason !== 'clickaway') {
+                            session.popSnackbarMessage();
+                        }
+                    }, contents: latestMessage }) })) : null, errorDialog ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: errorDialog.error, extra: errorDialog.extra, onClose: () => {
+                        session.setErrorDialog(undefined);
+                    } }) })) : null] }));
 });
 export default Snackbar;

package/esm/ui/SnackbarContents.d.ts

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

package/esm/ui/SnackbarContents.js

@@ -1,11 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CloseIcon from '@mui/icons-material/Close';
+// Report icon is rendered here instead of in SnackbarModel to avoid storing
+// JSX in MobX observables, which causes Chrome-specific issues
+// 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 { makeStyles } from '../util/tss-react/index.js';
+const useStyles = makeStyles()({
+    // preserve newlines in multi-line errors (e.g. MST validation dumps) while
+    // still wrapping long lines and capping height so the snackbar can't grow
+    // off-screen
+    message: {
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'anywhere',
+        maxHeight: 200,
+        overflowY: 'auto',
+    },
+});
 export default 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, { color: "inherit", onClick: e => {
+    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
+                    // eslint-disable-next-line @eslint-react/no-array-index-key -- fixed, never-reordered list of snackbar action buttons
+                    , { color: "inherit", onClick: e => {
                             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', children: contents.message }) }));
+                        }, 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 }) }) }));
 }

package/esm/ui/SnackbarModel.d.ts

@@ -4,14 +4,54 @@ export interface SnackbarMessage {
     level?: NotificationLevel;
     actions?: SnackAction[];
 }
+export interface ErrorDialogState {
+    error: unknown;
+    extra?: unknown;
+}
+/**
+ * #stateModel SnackbarModel
+ * #category session
+ */
 export default function SnackbarModel(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
+    /**
+     * #volatile
+     */
     snackbarMessages: import("mobx").IObservableArray<SnackbarMessage>;
+    /**
+     * #volatile
+     * the error currently shown in the stack-trace dialog. Kept off the
+     * dialog queue so it can stack on top of an already-open dialog (e.g. the
+     * one whose action raised the error) instead of waiting behind it
+     */
+    errorDialog: ErrorDialogState | undefined;
 } & {
+    /**
+     * #getter
+     */
     readonly snackbarMessageSet: Map<string, SnackbarMessage>;
 } & {
+    /**
+     * #action
+     */
     notify(message: string, level?: NotificationLevel, action?: SnackAction | SnackAction[]): void;
+    /**
+     * #action
+     */
     notifyError(errorMessage: string, error?: unknown, extra?: unknown, action?: SnackAction): void;
+    /**
+     * #action
+     */
+    setErrorDialog(state: ErrorDialogState | undefined): void;
+    /**
+     * #action
+     */
     pushSnackbarMessage(message: string, level?: NotificationLevel, actions?: SnackAction[]): void;
+    /**
+     * #action
+     */
     popSnackbarMessage(): SnackbarMessage | undefined;
+    /**
+     * #action
+     */
     removeSnackbarMessage(message: string): void;
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;

package/esm/ui/SnackbarModel.js

@@ -1,66 +1,110 @@
-import { lazy } from 'react';
-import { types } from '@jbrowse/mobx-state-tree';
+import { addDisposer, types } from '@jbrowse/mobx-state-tree';
 import { observable } from 'mobx';
-const ErrorMessageStackTraceDialog = lazy(() => import("./ErrorMessageStackTraceDialog.js"));
+/**
+ * #stateModel SnackbarModel
+ * #category session
+ */
 export default function SnackbarModel() {
     return types
         .model({})
         .volatile(() => ({
+        /**
+         * #volatile
+         */
         snackbarMessages: observable.array(),
+        /**
+         * #volatile
+         * the error currently shown in the stack-trace dialog. Kept off the
+         * dialog queue so it can stack on top of an already-open dialog (e.g. the
+         * one whose action raised the error) instead of waiting behind it
+         */
+        errorDialog: undefined,
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get snackbarMessageSet() {
             return new Map(self.snackbarMessages.map(s => [s.message, s]));
         },
     }))
-        .actions(self => ({
-        notify(message, level, action) {
-            const actions = action
-                ? Array.isArray(action)
-                    ? action
-                    : [action]
-                : undefined;
-            this.pushSnackbarMessage(message, level, actions);
-            if (level === 'info' || level === 'success') {
-                setTimeout(() => {
-                    this.removeSnackbarMessage(message);
-                }, 5000);
+        .actions(self => {
+        // A pending auto-dismiss would otherwise fire on a destroyed session, and
+        // in node keeps the process alive for its five seconds.
+        const dismissTimers = new Set();
+        addDisposer(self, () => {
+            for (const timer of dismissTimers) {
+                clearTimeout(timer);
             }
-        },
-        notifyError(errorMessage, error, extra, action) {
-            const reportAction = {
-                name: 'report',
-                onClick: () => {
-                    self.queueDialog((onClose) => [
-                        ErrorMessageStackTraceDialog,
-                        {
-                            onClose,
-                            error,
-                            extra,
-                        },
-                    ]);
-                },
-            };
-            const actions = action ? [reportAction, action] : [reportAction];
-            this.pushSnackbarMessage(errorMessage, 'error', actions);
-        },
-        pushSnackbarMessage(message, level, actions) {
-            if (actions?.length || !self.snackbarMessageSet.has(message)) {
-                self.snackbarMessages.push({
-                    message,
-                    level,
-                    actions,
-                });
-            }
-        },
-        popSnackbarMessage() {
-            return self.snackbarMessages.pop();
-        },
-        removeSnackbarMessage(message) {
-            const element = self.snackbarMessageSet.get(message);
-            if (element !== undefined) {
-                self.snackbarMessages.remove(element);
-            }
-        },
-    }));
+        });
+        return {
+            /**
+             * #action
+             */
+            notify(message, level, action) {
+                const actions = action
+                    ? Array.isArray(action)
+                        ? action
+                        : [action]
+                    : undefined;
+                this.pushSnackbarMessage(message, level, actions);
+                // A plain info/success toast auto-hides; an actionable one persists
+                // until acted on or dismissed (5s is too short to read and click the
+                // action, and warning/error already persist).
+                if ((level === 'info' || level === 'success') && !actions?.length) {
+                    const timer = setTimeout(() => {
+                        dismissTimers.delete(timer);
+                        this.removeSnackbarMessage(message);
+                    }, 5000);
+                    dismissTimers.add(timer);
+                }
+            },
+            /**
+             * #action
+             */
+            notifyError(errorMessage, error, extra, action) {
+                const reportAction = {
+                    name: 'report',
+                    onClick: () => {
+                        this.setErrorDialog({ error, extra });
+                    },
+                };
+                const actions = action ? [reportAction, action] : [reportAction];
+                this.pushSnackbarMessage(errorMessage, 'error', actions);
+            },
+            /**
+             * #action
+             */
+            setErrorDialog(state) {
+                self.errorDialog = state;
+            },
+            /**
+             * #action
+             */
+            pushSnackbarMessage(message, level, actions) {
+                if (actions?.length || !self.snackbarMessageSet.has(message)) {
+                    self.snackbarMessages.push({
+                        message,
+                        level,
+                        actions,
+                    });
+                }
+            },
+            /**
+             * #action
+             */
+            popSnackbarMessage() {
+                return self.snackbarMessages.pop();
+            },
+            /**
+             * #action
+             */
+            removeSnackbarMessage(message) {
+                const element = self.snackbarMessageSet.get(message);
+                if (element !== undefined) {
+                    self.snackbarMessages.remove(element);
+                }
+            },
+        };
+    });
 }

package/esm/ui/StackTraceButton.d.ts

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

package/esm/ui/StackTraceButton.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
+import ReportIcon from '@mui/icons-material/Report';
+import { IconButton, Tooltip } from '@mui/material';
+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 [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] }));
+}

package/esm/ui/StatusProgressBar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * A progress bar driven by a completion fraction in [0,1]: determinate (filling
+ * to the fraction) when one is given, indeterminate when `undefined`. The single
+ * place that maps a fraction to determinate-vs-indeterminate, shared by every
+ * loading/clustering/diagonalize/refetch indicator. Callers with an
+ * {@link RpcStatus} pass `statusFraction(status)`.
+ *
+ * **Toolkit-free, and that is the point rather than a detail.** It was a MUI
+ * `LinearProgress`, and it is reached from `LoadingOverlay` — whose every other
+ * element is already a `makeStyles` span — so it was the one Material component
+ * that rendered on a page whose host had asked for none. That reaches further
+ * than it sounds: a comparative display's first load draws this through
+ * `ComparativeFetchStatus`, which then sat behind neither bring-your-own seam,
+ * so an embedder who mounted `DisplayUIProvider` got a `MuiLinearProgress`
+ * anyway. It was invisible to the examples site's MUI census for the ordinary
+ * reason a loading state is: the census runs once the page has settled. (That
+ * component goes through the seam now, so a host supplying their own overlays
+ * replaces this rather than restyling it — but it is still what JBrowse's own
+ * comparative loading draws.)
+ *
+ * **What that bought is the look, not the bytes.** `LoadingOverlay` one level up
+ * still imports `IconButton` and `Tooltip`, so Material UI is in that page's
+ * bundle either way — 42 first-party eager modules hold it on the synteny page.
+ * Nothing here is a step toward getting it out; EAGER_BUNDLE.md owns that and
+ * says what it needs.
+ *
+ * `makeStyles` hands it `JBrowseStyleTheme`, so it follows the app's palette in
+ * both modes exactly as the Material one did. Two guards keep it from drifting
+ * back: `muiFree.test.ts` traces its imports, which catches an `alpha()` reached
+ * 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, }: {
+    fraction?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react").JSX.Element;

package/esm/ui/StatusProgressBar.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, makeStyles } from '../util/tss-react/index.js';
+import { indeterminateSweep } from './statusProgressKeyframes.js';
+const HEIGHT = 4;
+const useStyles = makeStyles()(theme => ({
+    track: {
+        position: 'relative',
+        overflow: 'hidden',
+        height: HEIGHT,
+        borderRadius: HEIGHT / 2,
+        // `color-mix` rather than MUI's `alpha`, which is the one import that would
+        // put this component back in the toolkit. Same idiom `plainChromeOverlays`
+        // uses, and it tints against the surface rather than compositing over
+        // whatever the bar happens to be drawn on.
+        background: `color-mix(in srgb, ${theme.palette.accent} 26%, transparent)`,
+    },
+    bar: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        background: theme.palette.accent,
+        // scaled from the left rather than sized, so a progress update is a
+        // compositor transform instead of a layout
+        transformOrigin: 'left center',
+        transition: 'transform 200ms linear',
+    },
+    sweep: {
+        width: '40%',
+        transition: 'none',
+        animation: `${indeterminateSweep} 1.6s infinite linear`,
+    },
+}));
+/**
+ * A progress bar driven by a completion fraction in [0,1]: determinate (filling
+ * to the fraction) when one is given, indeterminate when `undefined`. The single
+ * place that maps a fraction to determinate-vs-indeterminate, shared by every
+ * loading/clustering/diagonalize/refetch indicator. Callers with an
+ * {@link RpcStatus} pass `statusFraction(status)`.
+ *
+ * **Toolkit-free, and that is the point rather than a detail.** It was a MUI
+ * `LinearProgress`, and it is reached from `LoadingOverlay` — whose every other
+ * element is already a `makeStyles` span — so it was the one Material component
+ * that rendered on a page whose host had asked for none. That reaches further
+ * than it sounds: a comparative display's first load draws this through
+ * `ComparativeFetchStatus`, which then sat behind neither bring-your-own seam,
+ * so an embedder who mounted `DisplayUIProvider` got a `MuiLinearProgress`
+ * anyway. It was invisible to the examples site's MUI census for the ordinary
+ * reason a loading state is: the census runs once the page has settled. (That
+ * component goes through the seam now, so a host supplying their own overlays
+ * replaces this rather than restyling it — but it is still what JBrowse's own
+ * comparative loading draws.)
+ *
+ * **What that bought is the look, not the bytes.** `LoadingOverlay` one level up
+ * still imports `IconButton` and `Tooltip`, so Material UI is in that page's
+ * bundle either way — 42 first-party eager modules hold it on the synteny page.
+ * Nothing here is a step toward getting it out; EAGER_BUNDLE.md owns that and
+ * says what it needs.
+ *
+ * `makeStyles` hands it `JBrowseStyleTheme`, so it follows the app's palette in
+ * both modes exactly as the Material one did. Two guards keep it from drifting
+ * back: `muiFree.test.ts` traces its imports, which catches an `alpha()` reached
+ * 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 { classes } = useStyles();
+    const determinate = fraction !== undefined;
+    // one clamp for both halves. `statusFraction` clamps its own output, but a
+    // caller passing a fraction of its own does not — `CurrentJobCard` divides an
+    // external job's self-reported `progressPct` — and clamping the top alone let
+    // 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 }) }));
+}

package/esm/ui/SubmitDialog.d.ts

@@ -0,0 +1,6 @@
+import type { Props as DialogComponentProps } from './Dialog.tsx';
+import type { SubmitFormProps } from './SubmitForm.tsx';
+export interface SubmitDialogProps extends Omit<DialogComponentProps, 'onSubmit' | 'onReset'>, Omit<SubmitFormProps, 'children'> {
+}
+declare const SubmitDialog: (props: SubmitDialogProps) => import("react").JSX.Element;
+export default SubmitDialog;

package/esm/ui/SubmitDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import Dialog from './Dialog.js';
+import SubmitForm from './SubmitForm.js';
+const SubmitDialog = observer(function SubmitDialog(props) {
+    const { onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, ...dialogProps } = props;
+    return (_jsx(Dialog, { onClose: onCancel, ...dialogProps, children: _jsx(SubmitForm, { onSubmit: onSubmit, onCancel: onCancel, cancelText: cancelText, submitText: submitText, submitDisabled: submitDisabled, submitColor: submitColor, submitStartIcon: submitStartIcon, onReset: onReset, resetText: resetText, actions: actions, contentClassName: contentClassName, children: children }) }));
+});
+export default SubmitDialog;

package/esm/ui/SubmitForm.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export interface SubmitFormProps {
+    onCancel: () => void;
+    onSubmit: () => void;
+    cancelText?: string;
+    submitText?: string;
+    submitDisabled?: boolean;
+    submitColor?: ButtonProps['color'];
+    submitStartIcon?: ReactNode;
+    onReset?: () => void;
+    resetText?: string;
+    actions?: ReactNode;
+    contentClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * 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, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, }: SubmitFormProps): import("react").JSX.Element;

package/esm/ui/SubmitForm.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent } from '@mui/material';
+/**
+ * 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, }) {
+    return (_jsxs("form", { onSubmit: event => {
+            event.preventDefault();
+            if (!submitDisabled) {
+                onSubmit();
+            }
+        }, children: [_jsx(DialogContent, { className: contentClassName, children: children }), _jsxs(DialogActions, { children: [_jsx(Button, { type: "button", color: "secondary", variant: "contained", onClick: () => {
+                            if (onReset) {
+                                onReset();
+                            }
+                            else {
+                                onCancel();
+                            }
+                        }, children: onReset ? resetText : cancelText }), actions, _jsx(Button, { type: "submit", color: submitColor, variant: "contained", disabled: submitDisabled, startIcon: submitStartIcon, children: submitText })] })] }));
+}

package/esm/ui/SvgColorLegend.d.ts

@@ -0,0 +1,18 @@
+import type { ColorLegendEntry } from './legendSpec.ts';
+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.
+ */
+export declare const LEGEND_SVG_GUTTER_WIDTH: number;
+export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }: {
+    entries: ColorLegendEntry[];
+    canvasWidth: number;
+    x?: number;
+    maxHeight?: number;
+    idPrefix?: string;
+    testid?: string;
+}): import("react").JSX.Element | null;