@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/ReturnToImportFormDialog.js

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogContentText } from '@mui/material';
 import { observer } from 'mobx-react';
-import Dialog from "./Dialog.js";
+import ConfirmDialog from './ConfirmDialog.js';
 const ReturnToImportFormDialog = observer(function ReturnToImportFormDialog({ model, handleClose, }) {
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence", children: [_jsx(DialogContent, { children: _jsx(Typography, { children: "Are you sure you want to return to the import form? This will lose your current view" }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
-                            model.clearView();
-                            handleClose();
-                        }, variant: "contained", color: "primary", autoFocus: true, children: "OK" }), _jsx(Button, { onClick: () => {
-                            handleClose();
-                        }, color: "secondary", variant: "contained", children: "Cancel" })] })] }));
+    return (_jsx(ConfirmDialog, { open: true, title: "Return to import form?", onCancel: handleClose, onSubmit: () => {
+            model.clearView();
+            handleClose();
+        }, children: _jsx(DialogContentText, { children: "Are you sure you want to return to the import form? This will lose your current view." }) }));
 });
 export default ReturnToImportFormDialog;

package/esm/ui/SanitizedHTML.d.ts

@@ -1,4 +1,9 @@
+declare global {
+    interface Element {
+        setHTML?(html: string): void;
+    }
+}
 export default function SanitizedHTML({ html: pre, className, }: {
     className?: string;
     html: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/SanitizedHTML.js

@@ -1,46 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, lazy, useLayoutEffect, useRef } from 'react';
-import escapeHTML from 'escape-html';
-import { linkify } from "../util/index.js";
-const htmlTags = [
-    'a',
-    'b',
-    'br',
-    'code',
-    'div',
-    'em',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'i',
-    'img',
-    'li',
-    'mark',
-    'p',
-    'pre',
-    'span',
-    'small',
-    'strong',
-    'table',
-    'tbody',
-    'sup',
-    'sub',
-    'td',
-    'tfoot',
-    'th',
-    'thead',
-    'tr',
-    'u',
-    'ul',
-];
-const DOMPurifySanitizedHTML = lazy(() => import("./DOMPurifySanitizedHTML.js"));
-const full = new RegExp(htmlTags.map(tag => String.raw `<${tag}\b[^>]*>`).join('|'), 'i');
-function isHTML(str) {
-    return full.test(str);
-}
+import { escapeHTML, looksLikeHTML } from '../util/htmlText.js';
+import { linkify } from '../util/index.js';
+import { rewriteExternalAnchors } from './rewriteExternalAnchors.js';
+const DOMPurifySanitizedHTML = lazy(() => import('./DOMPurifySanitizedHTML.js'));
 function needsSanitization(str) {
     return str.includes('<') || str.includes('://');
 }
@@ -50,11 +13,8 @@ function SetHTML({ value, className }) {
         const el = spanRef.current;
         if (el) {
             try {
-                el.setHTML(value);
-                for (const a of el.querySelectorAll('a')) {
-                    a.setAttribute('rel', 'noopener noreferrer');
-                    a.setAttribute('target', '_blank');
-                }
+                el.setHTML?.(value);
+                rewriteExternalAnchors(el);
             }
             catch (e) {
                 console.error(e);
@@ -69,7 +29,7 @@ export default function SanitizedHTML({ html: pre, className, }) {
         return _jsx("span", { className: className, children: str });
     }
     const html = linkify(str);
-    const value = isHTML(html) ? html : escapeHTML(html);
+    const value = looksLikeHTML(html) ? html : escapeHTML(html);
     if (typeof Element !== 'undefined' && Element.prototype.setHTML) {
         return _jsx(SetHTML, { value: value, className: className });
     }

package/esm/ui/ScrollChrome.d.ts

@@ -0,0 +1,13 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
+/**
+ * The chrome a virtually scrolled display mounts over its viewport: the edge
+ * shadow saying content is hidden, and the scrollbar to reach it. Renders
+ * nothing when the content fits.
+ */
+export default function 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;

package/esm/ui/ScrollChrome.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ScrollEdgeShadow from './ScrollEdgeShadow.js';
+import VerticalScrollbar from './VerticalScrollbar.js';
+/**
+ * The chrome a virtually scrolled display mounts over its viewport: the edge
+ * 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, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollEdgeShadow, { model: model, top: top }), _jsx(VerticalScrollbar, { model: model, controlsId: controlsId, top: top })] }));
+}

package/esm/ui/ScrollEdgeShadow.d.ts

@@ -0,0 +1,41 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
+/**
+ * The "there is more content this way" edge shadow for a display that scrolls
+ * its content virtually, mounted beside `VerticalScrollbar` by `ScrollChrome`.
+ *
+ * It answers a question the scrollbar technically also answers and in practice
+ * does not: **is this track showing me all of its features?** A 6px thumb on a
+ * dense track is missed even by someone looking for it — GMOD/jbrowse-components#5589,
+ * and the figure review that read `k562_bcr_abl_split` past a scrolled-away
+ * pileup twice.
+ *
+ * Two properties are what keep it from being noise, and both are worth keeping
+ * if this is ever restyled:
+ *
+ * - **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
+ *   (and which would also need `showTrackOutlines`, an option the user can turn
+ *   off, to have a border to recolour).
+ * - **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.
+ *
+ * Shadowing with ink rather than dissolving the content into the track's own
+ * background is a decision, not the obvious default, and the reason is the
+ * sparse case: a dissolve over empty background is background-over-background,
+ * so a track whose last visible strip happens to be blank — with rows below it —
+ * is marked by nothing at all. Ink marks the edge whatever is under it. The cost
+ * is that the dark theme's white ink brightens the last row of a dense pileup
+ * rather than darkening it; both were drawn and compared, and covering the
+ * sparse case won.
+ *
+ * The actionable half lives in the bottom-right corner (`TrackHeightIndicator`
+ * — autogrow/fit, and the truncation warning for features that were dropped
+ * rather than merely scrolled away). This says *that*; that says *what to do*.
+ */
+declare const ScrollEdgeShadow: ({ model, top, }: {
+    model: VirtualScrollModel;
+    /** viewport offset from the top, for a display with a sticky band above it */
+    top?: number;
+}) => import("react").JSX.Element | null;
+export default ScrollEdgeShadow;

package/esm/ui/ScrollEdgeShadow.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { clamp } from '../util/numericUtils.js';
+import { makeStyles } from '../util/tss-react/index.js';
+// deep enough to read as a soft edge rather than a rule
+const SHADOW_HEIGHT = 10;
+// Slack at each edge, so a float residue in `scrollTop` doesn't mark one.
+const EPSILON = 0.5;
+const useStyles = makeStyles()(theme => {
+    // The ink flips with the theme, and has to: a black shadow is invisible on
+    // the dark theme's #121212 canvas, which is the same trap the scrollbar thumb
+    // hit before it became theme-aware.
+    const ink = theme.palette.mode === 'dark' ? '255,255,255' : '0,0,0';
+    // findable when someone asks "is that everything?", not noticeable when
+    // nobody asked
+    const from = `rgba(${ink},0.1)`;
+    // NOT the `transparent` keyword, which is transparent BLACK: interpolating to
+    // it puts a grey cast through the middle of the ramp, and on the dark theme's
+    // white ink that is the whole ramp.
+    const to = `rgba(${ink},0)`;
+    return {
+        edge: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            pointerEvents: 'none',
+        },
+        top: { background: `linear-gradient(to bottom, ${from}, ${to})` },
+        bottom: { background: `linear-gradient(to top, ${from}, ${to})` },
+    };
+});
+/**
+ * The "there is more content this way" edge shadow for a display that scrolls
+ * its content virtually, mounted beside `VerticalScrollbar` by `ScrollChrome`.
+ *
+ * It answers a question the scrollbar technically also answers and in practice
+ * does not: **is this track showing me all of its features?** A 6px thumb on a
+ * dense track is missed even by someone looking for it — GMOD/jbrowse-components#5589,
+ * and the figure review that read `k562_bcr_abl_split` past a scrolled-away
+ * pileup twice.
+ *
+ * Two properties are what keep it from being noise, and both are worth keeping
+ * if this is ever restyled:
+ *
+ * - **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
+ *   (and which would also need `showTrackOutlines`, an option the user can turn
+ *   off, to have a border to recolour).
+ * - **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.
+ *
+ * Shadowing with ink rather than dissolving the content into the track's own
+ * background is a decision, not the obvious default, and the reason is the
+ * sparse case: a dissolve over empty background is background-over-background,
+ * so a track whose last visible strip happens to be blank — with rows below it —
+ * is marked by nothing at all. Ink marks the edge whatever is under it. The cost
+ * is that the dark theme's white ink brightens the last row of a dense pileup
+ * rather than darkening it; both were drawn and compared, and covering the
+ * sparse case won.
+ *
+ * The actionable half lives in the bottom-right corner (`TrackHeightIndicator`
+ * — autogrow/fit, and the truncation warning for features that were dropped
+ * rather than merely scrolled away). This says *that*; that says *what to do*.
+ */
+const ScrollEdgeShadow = observer(function ScrollEdgeShadow({ model, top = 0, }) {
+    const { classes, cx } = useStyles();
+    const { scrollableHeight, scrollViewportHeight: viewportHeight } = model;
+    if (scrollableHeight <= 0) {
+        return null;
+    }
+    const clamped = clamp(model.scrollTop, 0, scrollableHeight);
+    // never deeper than the viewport, or the bottom edge inks the band above it
+    const height = Math.min(SHADOW_HEIGHT, viewportHeight);
+    return (_jsxs(_Fragment, { children: [clamped > EPSILON ? (_jsx("div", { "data-testid": "scroll-edge-shadow-top", className: cx(classes.edge, classes.top), style: { top, height } })) : null, clamped < scrollableHeight - EPSILON ? (_jsx("div", { "data-testid": "scroll-edge-shadow-bottom", className: cx(classes.edge, classes.bottom), style: { top: top + viewportHeight - height, height } })) : null] }));
+});
+export default ScrollEdgeShadow;

package/esm/ui/ScrollZoomToggle.d.ts

@@ -0,0 +1,15 @@
+export interface ScrollZoomToggleModel {
+    scrollZoom: boolean;
+    setScrollZoom: (flag: boolean) => void;
+}
+/**
+ * The header control for scroll-to-zoom, shared by every view that has one: a
+ * labelled checkbox, or with `iconOnly` a button that fills when on. It rings
+ * whenever the preference changes, including from a menu or the Preferences
+ * dialog, so the user sees where the setting lives.
+ */
+declare const ScrollZoomToggle: ({ model, iconOnly, }: {
+    model: ScrollZoomToggleModel;
+    iconOnly?: boolean;
+}) => import("react").JSX.Element;
+export default ScrollZoomToggle;

package/esm/ui/ScrollZoomToggle.js

@@ -0,0 +1,75 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
+import { Checkbox, FormControlLabel, ToggleButton, Tooltip, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { keyframes, makeStyles } from '../util/tss-react/index.js';
+import { alpha } from './palette.js';
+import { SCROLL_ZOOM_HELP, SCROLL_ZOOM_LABEL } from './scrollZoomLabels.js';
+const PULSE_MS = 550;
+const PULSE_COUNT = 2;
+const useStyles = makeStyles()(theme => {
+    const { palette } = theme;
+    const ringBase = palette.mode === 'dark' ? palette.accent : palette.tertiary.main;
+    const ringColor = alpha(ringBase, 0.7);
+    const ring = keyframes `
+    from { box-shadow: 0 0 0 0 ${ringColor}; }
+    to { box-shadow: 0 0 0 9px ${alpha(ringBase, 0)}; }
+  `;
+    const steadyRing = keyframes `
+    from { box-shadow: 0 0 0 4px ${ringColor}; }
+    to { box-shadow: 0 0 0 4px ${alpha(ringBase, 0)}; }
+  `;
+    return {
+        label: {
+            position: 'relative',
+            marginLeft: 0,
+            marginRight: 0,
+            paddingRight: 8,
+            borderRadius: 4,
+            whiteSpace: 'nowrap',
+        },
+        checkbox: {
+            padding: 6,
+        },
+        iconButton: {
+            border: 'none',
+            '&.Mui-selected, &.Mui-selected:hover': {
+                backgroundColor: palette.accent,
+                color: palette.background.paper,
+            },
+        },
+        pulse: {
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+            animation: `${ring} ${PULSE_MS}ms ease-out ${PULSE_COUNT}`,
+            '@media (prefers-reduced-motion: reduce)': {
+                animation: `${steadyRing} ${PULSE_MS * PULSE_COUNT}ms ease-out`,
+            },
+        },
+    };
+});
+/**
+ * The header control for scroll-to-zoom, shared by every view that has one: a
+ * labelled checkbox, or with `iconOnly` a button that fills when on. It rings
+ * whenever the preference changes, including from a menu or the Preferences
+ * dialog, so the user sees where the setting lives.
+ */
+const ScrollZoomToggle = observer(function ScrollZoomToggle({ model, iconOnly, }) {
+    const { classes } = useStyles();
+    const { scrollZoom } = model;
+    // `count` doubles as the restart key, since a class alone won't replay a
+    // running CSS animation
+    const [pulse, setPulse] = useState({ shownFor: scrollZoom, count: 0 });
+    if (pulse.shownFor !== scrollZoom) {
+        setPulse({ shownFor: scrollZoom, count: pulse.count + 1 });
+    }
+    const ring = pulse.count ? (_jsx("span", { className: classes.pulse, "data-testid": "scroll-zoom-pulse" }, pulse.count)) : null;
+    const flip = () => {
+        model.setScrollZoom(!scrollZoom);
+    };
+    return iconOnly ? (_jsx(Tooltip, { title: SCROLL_ZOOM_HELP, children: _jsxs(ToggleButton, { "data-testid": "scroll-zoom-toggle", value: "scrollZoom", selected: scrollZoom, onChange: flip, className: classes.iconButton, size: "small", children: [_jsx(ZoomInMapIcon, { fontSize: "small" }), ring] }) })) : (_jsx(Tooltip, { title: SCROLL_ZOOM_HELP, describeChild: true, children: _jsx(FormControlLabel, { "data-testid": "scroll-zoom-toggle", className: classes.label, control: _jsx(Checkbox, { size: "small", checked: scrollZoom, onChange: flip, className: classes.checkbox }), label: _jsxs(_Fragment, { children: [SCROLL_ZOOM_LABEL, ring] }), slotProps: { typography: { variant: 'body2' } } }) }));
+});
+export default ScrollZoomToggle;

package/esm/ui/SequenceAdapterInputs.d.ts

@@ -0,0 +1,9 @@
+import type { FormState } from '../util/assemblyConfigUtils.ts';
+import type { FileLocation } from '../util/types/index.ts';
+declare const SequenceAdapterInputs: ({ form, setForm, setPrimaryFile, setTwoBitFile, }: {
+    form: FormState;
+    setForm: (update: (prev: FormState) => FormState) => void;
+    setPrimaryFile: (location: FileLocation) => void;
+    setTwoBitFile: (location: FileLocation) => void;
+}) => import("react").JSX.Element;
+export default SequenceAdapterInputs;

package/esm/ui/SequenceAdapterInputs.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, MenuItem, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { adapterLabels, adapterTypes, makeSetField, } from '../util/assemblyConfigUtils.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import FileSelector from './FileSelector/FileSelector.js';
+const useStyles = makeStyles()(theme => ({
+    fastaWarning: {
+        margin: theme.spacing(1),
+    },
+}));
+// The sequence "Format" dropdown, shared so every add-assembly surface offers
+// the same friendly labels for the same adapter types.
+const AdapterTypeSelector = observer(function AdapterTypeSelector({ adapterSelection, setAdapterSelection, }) {
+    return (_jsx(TextField, { value: adapterSelection, label: "Format", variant: "outlined", select: true, fullWidth: true, onChange: event => {
+            setAdapterSelection(event.target.value);
+        }, children: adapterTypes.map(type => (_jsx(MenuItem, { value: type, children: adapterLabels[type] }, type))) }));
+});
+// The per-adapter file selectors (FASTA/.fai/.gzi/2bit/.chrom.sizes) driven by
+// the chosen format. Shared by the jbrowse-desktop Open genome(s) guided form
+// and the in-app Assembly manager add form. The primary-file setters are passed
+// in so each surface controls how picking a file updates state (e.g. desktop's
+// applyPrimaryFile auto-detects the adapter and prefills sidecars).
+const SequenceAdapterInputs = observer(function SequenceAdapterInputs({ form, setForm, setPrimaryFile, setTwoBitFile, }) {
+    const { classes } = useStyles();
+    const setField = makeSetField(setForm);
+    const { adapterSelection } = form;
+    return (_jsxs(_Fragment, { children: [_jsx(AdapterTypeSelector, { adapterSelection: adapterSelection, setAdapterSelection: setField('adapterSelection') }), adapterSelection === 'FastaAdapter' ? (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "warning", className: classes.fastaWarning, children: "Note: a FASTA index will be generated automatically. For large genomes, providing a pre-made .fai (choose \"FASTA with index\") is faster, and a remote file may be downloaded in full." }), _jsx(FileSelector, { inline: true, name: "FASTA file", location: form.fastaLocation, setLocation: setPrimaryFile })] })) : adapterSelection === 'IndexedFastaAdapter' ? (_jsxs(_Fragment, { children: [_jsx(FileSelector, { inline: true, name: "FASTA file", location: form.fastaLocation, setLocation: setPrimaryFile }), _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: form.faiLocation, setLocation: setField('faiLocation') })] })) : adapterSelection === 'BgzipFastaAdapter' ? (_jsxs(_Fragment, { children: [_jsx(FileSelector, { inline: true, name: "FASTA file (.fa.gz)", location: form.fastaLocation, setLocation: setPrimaryFile }), _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: form.faiLocation, setLocation: setField('faiLocation') }), _jsx(FileSelector, { inline: true, name: "FASTA gzip index (.gzi) file", location: form.gziLocation, setLocation: setField('gziLocation') })] })) : adapterSelection === 'ChromSizesAdapter' ? (_jsx(FileSelector, { inline: true, name: ".chrom.sizes file", description: "One name<TAB>length line per reference sequence. The assembly gets its names and lengths from this and carries no sequence.", location: form.chromSizesLocation, setLocation: setField('chromSizesLocation') })) : (_jsxs(_Fragment, { children: [_jsx(FileSelector, { inline: true, name: "2bit file", location: form.twoBitLocation, setLocation: setTwoBitFile }), _jsx(FileSelector, { inline: true, name: ".chrom.sizes (optional)", description: "Can speed up loading 2bit files with many contigs.", location: form.chromSizesLocation, setLocation: setField('chromSizesLocation') })] }))] }));
+});
+export default SequenceAdapterInputs;

package/esm/ui/SessionJsonPanel.d.ts

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

package/esm/ui/SessionJsonPanel.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from '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 [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] }));
+}

package/esm/ui/SettingsChangesTable.d.ts

@@ -0,0 +1,15 @@
+import type { TrackConfigChange } from '../util/trackConfigDelta.ts';
+export declare function formatSettingValue(value: unknown): string;
+/**
+ * Shared three-column diff table (Setting / Default / Current) used by both the
+ * per-track "changes" dialog and the global preferences-reset dialog, so the two
+ * read identically. Each row is a `TrackConfigChange` — a dotted `path` and its
+ * `from` (default) / `to` (current) values. Passing `onResetRow` adds a trailing
+ * per-row revert button, letting the caller reset a single entry (the
+ * preferences dialog uses this so a reset need not be all-or-nothing).
+ */
+declare const SettingsChangesTable: ({ changes, onResetRow, }: {
+    changes: TrackConfigChange[];
+    onResetRow?: (change: TrackConfigChange) => void;
+}) => import("react").JSX.Element;
+export default SettingsChangesTable;

package/esm/ui/SettingsChangesTable.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import UndoIcon from '@mui/icons-material/Undo';
+import { IconButton, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from '../util/tss-react/index.js';
+const useStyles = makeStyles()(theme => ({
+    value: {
+        fontFamily: 'monospace',
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
+    },
+    path: {
+        fontWeight: 'bold',
+    },
+    defaultCell: {
+        color: theme.palette.text.secondary,
+    },
+}));
+// Many config values are `{ type: 'x' }` discriminated unions (sortedBy,
+// ...). Show just the type when that is the whole object so
+// the table reads "basePair" rather than `{"type":"basePair"}`; richer
+// objects keep full JSON so no detail is hidden.
+function isSoleTypeObject(v) {
+    return ('type' in v && typeof v.type === 'string' && Object.keys(v).length === 1);
+}
+// Past this many entries a list or a map is summarised by its count and its
+// first few members: a row order names every sample of a cohort, and a label
+// map every one the reader renamed, and a 2,500-name cell says nothing a
+// count and a glimpse do not.
+const LISTED_ENTRIES = 6;
+// Past this many characters a string is a cluster tree's newick or a jexl
+// callback, and the head is what tells them apart.
+const STRING_HEAD = 80;
+function summarizeList(values) {
+    const head = values
+        .slice(0, LISTED_ENTRIES)
+        .map(v => (typeof v === 'string' ? v : JSON.stringify(v)))
+        .join(', ');
+    return `${values.length} values: ${head}, …`;
+}
+function summarizeMap(entries) {
+    const head = entries
+        .slice(0, LISTED_ENTRIES)
+        .map(([k, v]) => `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`)
+        .join(', ');
+    return `${entries.length} entries: ${head}, …`;
+}
+export function formatSettingValue(value) {
+    if (value === undefined) {
+        return '(default)';
+    }
+    if (typeof value === 'string') {
+        return value.length > STRING_HEAD
+            ? `${value.slice(0, STRING_HEAD)}… (${value.length} characters)`
+            : value;
+    }
+    if (Array.isArray(value)) {
+        return value.length > LISTED_ENTRIES
+            ? summarizeList(value)
+            : JSON.stringify(value);
+    }
+    if (typeof value === 'object' && value !== null) {
+        if (isSoleTypeObject(value)) {
+            return value.type;
+        }
+        const entries = Object.entries(value);
+        return entries.length > LISTED_ENTRIES
+            ? summarizeMap(entries)
+            : JSON.stringify(value);
+    }
+    return JSON.stringify(value);
+}
+/**
+ * Shared three-column diff table (Setting / Default / Current) used by both the
+ * per-track "changes" dialog and the global preferences-reset dialog, so the two
+ * read identically. Each row is a `TrackConfigChange` — a dotted `path` and its
+ * `from` (default) / `to` (current) values. Passing `onResetRow` adds a trailing
+ * per-row revert button, letting the caller reset a single entry (the
+ * preferences dialog uses this so a reset need not be all-or-nothing).
+ */
+const SettingsChangesTable = observer(function SettingsChangesTable({ changes, onResetRow, }) {
+    const { classes } = useStyles();
+    return (_jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Setting" }), _jsx(TableCell, { children: "Default" }), _jsx(TableCell, { children: "Current" }), onResetRow ? _jsx(TableCell, {}) : null] }) }), _jsx(TableBody, { children: changes.map(change => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.path, children: change.label ?? change.path.join(' › ') }), _jsx(TableCell, { className: `${classes.value} ${classes.defaultCell}`, children: formatSettingValue(change.from) }), _jsx(TableCell, { className: classes.value, children: formatSettingValue(change.to) }), onResetRow ? (_jsx(TableCell, { padding: "none", children: _jsx(Tooltip, { title: "Reset this preference", children: _jsx(IconButton, { size: "small", onClick: () => {
+                                        onResetRow(change);
+                                    }, children: _jsx(UndoIcon, { fontSize: "small" }) }) }) })) : null] }, change.path.join('.')))) })] }));
+});
+export default SettingsChangesTable;

package/esm/ui/ShareLinkField.d.ts

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

package/esm/ui/ShareLinkField.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+// 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', }) {
+    return (_jsx(TextField, { label: label, value: value, variant: "filled", fullWidth: true, onClick: event => {
+            const target = event.target;
+            target.select();
+        }, slotProps: {
+            input: {
+                readOnly: true,
+            },
+        } }));
+}

package/esm/ui/SingleSlider.d.ts

@@ -0,0 +1,8 @@
+import type { SliderProps } from '@mui/material';
+type Props = Omit<SliderProps, 'value' | 'defaultValue' | 'onChange' | 'onChangeCommitted'> & {
+    value: number;
+    onChange?: (value: number) => void;
+    onChangeCommitted?: (value: number) => void;
+};
+export default function SingleSlider(props: Props): import("react").JSX.Element;
+export {};

package/esm/ui/SingleSlider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slider } from '@mui/material';
+import SliderTooltip from './SliderTooltip.js';
+export default 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]);
+        } }));
+}

package/esm/ui/SizeSliderRow.d.ts

@@ -0,0 +1,14 @@
+import type { SliderScale } from './sliderScale.ts';
+export declare const SizeSliderRow: ({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, }: {
+    title: string;
+    getValue: () => number;
+    min: number;
+    max: number;
+    step: number;
+    scale: SliderScale;
+    format: (n: number) => string;
+    isDefault: boolean;
+    commitOnRelease?: boolean;
+    onChange: (n: number) => void;
+    onReset: () => void;
+}) => import("react").JSX.Element;

package/esm/ui/SizeSliderRow.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The drawn half of a `makeSizeMenu` row, split out so the builder can reach
+// it through `lazy()`. Everything Material UI in a size row is here: the
+// slider, the reset button, the caption. See makeSizeMenu.tsx.
+import { useState } from 'react';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from '../util/tss-react/index.js';
+import { ResetToDefaultButton } from './InlineMenuControls.js';
+import SingleSlider from './SingleSlider.js';
+import { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
+import { sliderScale } from './sliderScale.js';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        width: INLINE_MENU_ROW_WIDTH,
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    },
+    label: {
+        flex: 1,
+    },
+}));
+export const SizeSliderRow = observer(function SizeSliderRow({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, }) {
+    const { classes } = useStyles();
+    const [dragValue, setDragValue] = useState(undefined);
+    const value = dragValue ?? getValue();
+    const { toSlider, fromSlider, sliderStep } = sliderScale(scale);
+    const slug = title.toLowerCase().replaceAll(' ', '-');
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", className: classes.label, children: [title, ": ", format(value)] }), _jsx(ResetToDefaultButton, { disabled: isDefault, onClick: () => {
+                            onReset();
+                        } })] }), _jsx(SingleSlider, { value: toSlider(value), min: toSlider(min), max: toSlider(max), step: sliderStep ?? step, size: "small", "aria-label": title.toLowerCase(), "data-testid": `${slug}-slider`, valueLabelDisplay: "auto", valueLabelFormat: (v) => format(fromSlider(v)), sx: { py: 0.5, display: 'block' }, onChange: v => {
+                    const n = fromSlider(v);
+                    if (commitOnRelease) {
+                        setDragValue(n);
+                    }
+                    else {
+                        onChange(n);
+                    }
+                }, onChangeCommitted: commitOnRelease
+                    ? v => {
+                        onChange(fromSlider(v));
+                        setDragValue(undefined);
+                    }
+                    : undefined })] }));
+});

package/esm/ui/SliderTooltip.d.ts

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