@jbrowse/display-ui 5.0.0-beta.13 → 5.0.0-beta.14

package/esm/embed/legend.js

@@ -8,7 +8,7 @@ function gradientCss({ stops }) {
         .map(({ color, opacity = 1, offset }) => `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent) ${offset * 100}%`)
         .join(', ')})`;
 }
-function Row({ item }) {
+const Row = observer(function Row({ item }) {
     const { gradient, label, hidden } = item;
     return gradient ? (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 4 }, children: [label, _jsx("span", { children: gradient.minLabel }), _jsx("span", { style: {
                     width: 80,
@@ -21,7 +21,7 @@ function Row({ item }) {
             opacity: hidden ? 0.5 : undefined,
             textDecoration: hidden ? 'line-through' : undefined,
         }, children: [legendSwatches(item).map(swatch => (_jsx("svg", { "aria-hidden": true, width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, swatch.color))), label] }));
-}
+});
 function legendSpecIn(display) {
     return display && typeof display === 'object' && 'legendSpec' in display
         ? display.legendSpec

package/esm/embed/location.d.ts

@@ -1,3 +1,4 @@
+import type { SearchPickerView } from './searchPicker.tsx';
 import type React from 'react';
 export interface LocationView {
     coarseVisibleLocStrings: string;
@@ -12,6 +13,6 @@ export declare function useLocationBox(view: LocationView): {
     go(input?: string): void;
 };
 export declare const LocationBox: ({ view, style, }: {
-    view: LocationView;
+    view: LocationView & SearchPickerView;
     style?: React.CSSProperties;
 }) => React.JSX.Element;

package/esm/embed/location.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { observer } from 'mobx-react';
+import { SearchPicker } from './searchPicker.js';
 export function useLocationBox(view) {
     const [draft, setDraft] = useState();
     const [pending, setPending] = useState(false);
@@ -46,20 +47,20 @@ export function useLocationBox(view) {
 }
 export const LocationBox = observer(function LocationBox({ view, style, }) {
     const box = useLocationBox(view);
-    return (_jsxs("form", { style: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            gap: 4,
-            ...style,
-        }, onSubmit: event => {
-            event.preventDefault();
-            box.go();
-        }, children: [_jsx("input", { "aria-label": "Location", value: box.value, size: 38, style: { font: 'inherit', padding: '2px 4px' }, onChange: event => {
-                    box.edit(event.target.value);
-                }, onKeyDown: event => {
-                    if (event.key === 'Escape') {
-                        box.reset();
-                    }
-                } }), _jsx("button", { type: "submit", disabled: box.pending, style: { font: 'inherit' }, children: "Go" }), box.error ? (_jsx("span", { role: "alert", children: box.error instanceof Error ? box.error.message : String(box.error) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: 4,
+                    ...style,
+                }, onSubmit: event => {
+                    event.preventDefault();
+                    box.go();
+                }, children: [_jsx("input", { "aria-label": "Location", value: box.value, size: 38, style: { font: 'inherit', padding: '2px 4px' }, onChange: event => {
+                            box.edit(event.target.value);
+                        }, onKeyDown: event => {
+                            if (event.key === 'Escape') {
+                                box.reset();
+                            }
+                        } }), _jsx("button", { type: "submit", disabled: box.pending, style: { font: 'inherit' }, children: "Go" }), box.error ? (_jsx("span", { role: "alert", children: box.error instanceof Error ? box.error.message : String(box.error) })) : null] }), _jsx(SearchPicker, { view: view })] }));
 });

package/esm/embed/notifications.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+export interface NotificationsSession {
+    snackbarMessages: readonly {
+        message: string;
+        level?: string;
+        actions?: readonly {
+            name: React.ReactNode;
+            onClick: () => void;
+        }[];
+    }[];
+    popSnackbarMessage: () => unknown;
+    queueOfDialogs: readonly unknown[];
+    removeActiveDialog: () => void;
+}
+/**
+ * Draws the two session channels a host with its own UI otherwise drops: the
+ * latest of `session.snackbarMessages`, where a failed navigation, track launch
+ * or config lands, and a line for each dialog JBrowse queued, which only a
+ * Material host can open. A name search's picker is not one: it is
+ * `view.searchPicker`, drawn by `SearchPicker`.
+ *
+ * `EmbedProvider` mounts one below its children. Pass it
+ * `notifications={false}` to place this elsewhere or to draw the two queues
+ * yourself.
+ */
+export declare const Notifications: ({ session, style, }: {
+    session: NotificationsSession;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;

package/esm/embed/notifications.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { observer } from 'mobx-react';
+/**
+ * Draws the two session channels a host with its own UI otherwise drops: the
+ * latest of `session.snackbarMessages`, where a failed navigation, track launch
+ * or config lands, and a line for each dialog JBrowse queued, which only a
+ * Material host can open. A name search's picker is not one: it is
+ * `view.searchPicker`, drawn by `SearchPicker`.
+ *
+ * `EmbedProvider` mounts one below its children. Pass it
+ * `notifications={false}` to place this elsewhere or to draw the two queues
+ * yourself.
+ */
+export const Notifications = observer(function Notifications({ session, style, }) {
+    const palette = usePalette();
+    const latest = session.snackbarMessages.at(-1);
+    const queued = session.queueOfDialogs.length;
+    const row = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        marginTop: 8,
+        padding: '4px 8px',
+        fontSize: '0.8rem',
+        colorScheme: palette.mode,
+        color: palette.text.primary,
+        background: `color-mix(in srgb, ${palette.text.primary} 8%, ${palette.background.paper})`,
+    };
+    return (_jsxs(_Fragment, { children: [latest ? (_jsxs("div", { role: latest.level === 'error' ? 'alert' : 'status', "data-testid": "embed-notification", style: { ...row, ...style }, children: [_jsx("span", { style: { flex: 1, overflowWrap: 'anywhere' }, children: latest.message }), latest.actions
+                        // 'report' opens the stack-trace dialog, which is Material
+                        ?.filter(action => action.name !== 'report')
+                        .map((action, i) => (_jsx("button", { type: "button", onClick: action.onClick, children: action.name }, i))), _jsx("button", { type: "button", "aria-label": "Dismiss notification", onClick: () => {
+                            session.popSnackbarMessage();
+                        }, children: "\u2715" })] })) : null, queued ? (_jsxs("div", { role: "status", "data-testid": "queued-dialog-notice", style: { ...row, ...style }, children: [_jsxs("span", { style: { flex: 1 }, children: ["JBrowse queued ", queued, " dialog", queued > 1 ? 's' : '', ", and this page draws none."] }), _jsx("button", { type: "button", onClick: () => {
+                            session.removeActiveDialog();
+                        }, children: "Dismiss" })] })) : null] }));
+});

package/esm/embed/provider.d.ts

@@ -1,11 +1,13 @@
 import type { DisplayChromeOverlays } from '../chromeOverlays.ts';
 import type { TrackControlComponent } from '../trackControl/types.ts';
+import type { NotificationsSession } from './notifications.tsx';
 import type { ThemeModeSession } from '@jbrowse/core/ui/PaletteContext';
 import type React from 'react';
-export declare function EmbedProvider({ session, mode, overlays, trackControl, children, }: {
-    session: ThemeModeSession;
+export declare const EmbedProvider: ({ session, mode, overlays, trackControl, notifications, children, }: {
+    session: ThemeModeSession & NotificationsSession;
     mode?: 'light' | 'dark';
     overlays?: Partial<DisplayChromeOverlays>;
     trackControl?: TrackControlComponent;
+    notifications?: boolean;
     children: React.ReactNode;
-}): React.JSX.Element;
+}) => React.JSX.Element;

package/esm/embed/provider.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SessionPaletteProvider } from '@jbrowse/core/ui/PaletteContext';
+import { observer } from 'mobx-react';
 import DisplayUIProvider from '../DisplayUIProvider.js';
-export function EmbedProvider({ session, mode, overlays, trackControl, children, }) {
-    return (_jsx(SessionPaletteProvider, { session: session, mode: mode, children: _jsx(DisplayUIProvider, { overlays: overlays, trackControl: trackControl, children: children }) }));
-}
+import { Notifications } from './notifications.js';
+export const EmbedProvider = observer(function EmbedProvider({ session, mode, overlays, trackControl, notifications = true, children, }) {
+    return (_jsx(SessionPaletteProvider, { session: session, mode: mode, children: _jsxs(DisplayUIProvider, { overlays: overlays, trackControl: trackControl, children: [children, notifications ? _jsx(Notifications, { session: session }) : null] }) }));
+});

package/esm/embed/regions.d.ts

@@ -1,3 +1,4 @@
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 import type React from 'react';
 export interface RegionSeamsView {
     staticBlocksTranslateX: number;
@@ -28,7 +29,7 @@ export interface ScalebarView {
         caption?: string;
     };
 }
-export interface HighlightsView {
+export interface HighlightsView extends IStateTreeNode {
     highlights: readonly {
         assemblyName?: string;
         refName: string;
@@ -47,7 +48,7 @@ export declare const RegionSeams: ({ view, }: {
 }) => React.JSX.Element;
 export declare const Highlights: ({ view, }: {
     view: HighlightsView;
-}) => (React.JSX.Element | null)[];
+}) => (React.JSX.Element | null)[] | null;
 export declare const Scalebar: ({ view, style, ...props }: {
     view: ScalebarView;
 } & React.ComponentProps<'div'>) => React.JSX.Element;

package/esm/embed/regions.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { highlightKey } from '@jbrowse/core/util/highlights';
+import { getSession } from '@jbrowse/core/util/mstUtils';
 import { observer } from 'mobx-react';
-const spanFill = {
-    seam: 'color-mix(in srgb, CanvasText 45%, Canvas)',
-    boundary: 'color-mix(in srgb, CanvasText 12%, Canvas)',
-    elided: 'color-mix(in srgb, CanvasText 30%, Canvas)',
-};
+const spanInk = { seam: 45, boundary: 12, elided: 30 };
 export const RegionSeams = observer(function RegionSeams({ view, }) {
+    const { text, background } = usePalette();
     return (_jsx("div", { "aria-hidden": true, "data-region-seams": true, style: {
             position: 'absolute',
             top: 0,
@@ -22,11 +20,15 @@ export const RegionSeams = observer(function RegionSeams({ view, }) {
                 bottom: 0,
                 left: x,
                 width,
-                background: spanFill[kind],
+                background: `color-mix(in srgb, ${text.primary} ${spanInk[kind]}%, ${background.default})`,
             } }, key))) }));
 });
 export const Highlights = observer(function Highlights({ view, }) {
     const palette = usePalette();
+    const { highlightsVisible, highlightLabelsVisible } = getSession(view);
+    if (!highlightsVisible) {
+        return null;
+    }
     return view.highlights.map((highlight, i) => {
         const coords = view.getHighlightCoords(highlight);
         return coords ? (_jsx("div", { "data-testid": "highlight-band", style: {
@@ -40,7 +42,7 @@ export const Highlights = observer(function Highlights({ view, }) {
                 pointerEvents: 'none',
                 background: highlight.color ??
                     `color-mix(in srgb, ${palette.highlight.main} 20%, transparent)`,
-            }, children: highlight.label ? (_jsx("span", { style: {
+            }, children: highlight.label && highlightLabelsVisible ? (_jsx("span", { style: {
                     position: 'absolute',
                     top: 0,
                     left: 3,

package/esm/embed/searchPicker.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+export interface SearchPickerView {
+    searchPicker?: {
+        query: string;
+        rows: readonly {
+            id: string;
+            label: string;
+            location: string;
+            trackName: string;
+        }[];
+        pick: (id: string) => Promise<unknown>;
+    };
+    closeSearchPicker: () => void;
+}
+/**
+ * Lists the places a name search points at when it matches several and none
+ * exactly, which `view.navToLocString` leaves to the host instead of
+ * navigating. Draws nothing until a search sets `view.searchPicker`. A
+ * `LocationBox` mounts one under itself.
+ */
+export declare const SearchPicker: ({ view, style, }: {
+    view: SearchPickerView;
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;

package/esm/embed/searchPicker.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+/**
+ * Lists the places a name search points at when it matches several and none
+ * exactly, which `view.navToLocString` leaves to the host instead of
+ * navigating. Draws nothing until a search sets `view.searchPicker`. A
+ * `LocationBox` mounts one under itself.
+ */
+export const SearchPicker = observer(function SearchPicker({ view, style, }) {
+    const { searchPicker } = view;
+    return searchPicker ? (_jsxs("div", { role: "dialog", "aria-label": "Search results", "data-testid": "search-picker", style: { fontSize: '0.8rem', paddingBottom: 8, ...style }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsxs("strong", { style: { flex: 1 }, children: ["\u201C", searchPicker.query, "\u201D matches ", searchPicker.rows.length, " places"] }), _jsx("button", { type: "button", "aria-label": "Close search results", onClick: view.closeSearchPicker, children: "\u2715" })] }), _jsx("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: searchPicker.rows.map(row => (_jsx("li", { children: _jsxs("button", { type: "button", style: { width: '100%', textAlign: 'left' }, onClick: () => {
+                            void searchPicker.pick(row.id);
+                        }, children: [_jsx("strong", { children: row.label }), " ", row.location, " ", row.trackName] }) }, row.id))) })] })) : null;
+});

package/esm/embed/toolbar.d.ts

@@ -0,0 +1,16 @@
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+import type React from 'react';
+export declare const Toolbar: ({ style, children, }: {
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export interface NavView extends IStateTreeNode {
+    navToLocString: (input: string) => Promise<unknown>;
+}
+export declare const NavButton: ({ view, loc, onClick, style, children, }: {
+    view: NavView;
+    loc: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/esm/embed/toolbar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getSession } from '@jbrowse/core/util/mstUtils';
+import { observer } from 'mobx-react';
+export const Toolbar = observer(function Toolbar({ style, children, }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 12,
+            paddingBottom: 8,
+            fontSize: '0.85rem',
+            ...style,
+        }, children: children }));
+});
+export const NavButton = observer(function NavButton({ view, loc, onClick, style, children, }) {
+    return (_jsx("button", { type: "button", style: style, onClick: () => {
+            onClick?.();
+            view.navToLocString(loc).catch((e) => {
+                getSession(view).notifyError(`${e}`, e);
+            });
+        }, children: children ?? loc }));
+});

package/esm/index.d.ts

@@ -1,7 +1,7 @@
 export { default as DisplayUIProvider, resolveOverlays, } from './DisplayUIProvider.tsx';
 export { DisplayChromeOverlayProvider, useChromeOverlayOverride, } from './chromeOverlayContext.ts';
 export { default as plainChromeOverlays } from './plainChromeOverlays.tsx';
-export type { DisplayBackgroundProgressModel, DisplayChromeOverlays, DisplayErrorBarModel, DisplayLoadingOverlayModel, TooLargeMessageModel, } from './chromeOverlays.ts';
+export type { BackgroundProgressProps, DisplayChromeOverlays, ErrorBarProps, LoadingProps, RenderErrorProps, TooLargeProps, } from './chromeOverlays.ts';
 export { TrackControlProvider, useTrackControlOverride, } from './trackControl/trackControlContext.ts';
 export { default as plainTrackControl } from './trackControl/plainTrackControl.tsx';
 export { useTrackControlMenu } from './trackControl/useTrackControlMenu.tsx';

package/esm/isLiveModel.d.ts

@@ -1,21 +1,16 @@
 /**
  * #api
- * Whether an overlay's model can still be called into.
+ * Whether a display model can still be called into.
  *
- * The terminal states unmount the canvas, so a click landing after the track was
- * closed would otherwise run an action on a destroyed node — which is why both
- * overlay sets guard their one button with `isAlive`.
+ * The chrome's overlay slots guard every button with it: the terminal states
+ * unmount the canvas, so a click landing after the track was closed would
+ * otherwise run an action on a destroyed node.
  *
- * **`isAlive` alone is wrong here, and it throws rather than answering.** The
- * four model shapes in `chromeOverlays.ts` are structural on purpose ("A display
- * satisfies one by having the fields; no mixin has to be composed"), so a host
- * writing their own display over `DisplayChromeBase` may hand these components a
- * plain object. `isAlive` runs `assertIsStateTreeNode` and throws on one, inside
- * an event handler, where React logs it and moves on — leaving the Force load
- * button looking live and doing nothing, which is the exact state
- * `DisplayChromeOverlays.TooLarge` documents itself as existing to prevent.
- *
- * A plain object is never destroyed, so it is always callable. The liveness
- * question only exists for an MST node.
+ * **`isAlive` alone is wrong here, and it throws rather than answering.** A
+ * host writing their own display over `DisplayChromeBase` may hand the chrome a
+ * plain object, and `isAlive` runs `assertIsStateTreeNode`, which throws inside
+ * the click handler, where React logs it and moves on: a Force load button that
+ * looks live and does nothing. A plain object is never destroyed, so it is
+ * always callable.
  */
 export declare function isLiveModel(model: unknown): boolean;

package/esm/isLiveModel.js

@@ -1,23 +1,18 @@
 import { isAlive, isStateTreeNode } from '@jbrowse/mobx-state-tree';
 /**
  * #api
- * Whether an overlay's model can still be called into.
+ * Whether a display model can still be called into.
  *
- * The terminal states unmount the canvas, so a click landing after the track was
- * closed would otherwise run an action on a destroyed node — which is why both
- * overlay sets guard their one button with `isAlive`.
+ * The chrome's overlay slots guard every button with it: the terminal states
+ * unmount the canvas, so a click landing after the track was closed would
+ * otherwise run an action on a destroyed node.
  *
- * **`isAlive` alone is wrong here, and it throws rather than answering.** The
- * four model shapes in `chromeOverlays.ts` are structural on purpose ("A display
- * satisfies one by having the fields; no mixin has to be composed"), so a host
- * writing their own display over `DisplayChromeBase` may hand these components a
- * plain object. `isAlive` runs `assertIsStateTreeNode` and throws on one, inside
- * an event handler, where React logs it and moves on — leaving the Force load
- * button looking live and doing nothing, which is the exact state
- * `DisplayChromeOverlays.TooLarge` documents itself as existing to prevent.
- *
- * A plain object is never destroyed, so it is always callable. The liveness
- * question only exists for an MST node.
+ * **`isAlive` alone is wrong here, and it throws rather than answering.** A
+ * host writing their own display over `DisplayChromeBase` may hand the chrome a
+ * plain object, and `isAlive` runs `assertIsStateTreeNode`, which throws inside
+ * the click handler, where React logs it and moves on: a Force load button that
+ * looks live and does nothing. A plain object is never destroyed, so it is
+ * always callable.
  */
 export function isLiveModel(model) {
     return !isStateTreeNode(model) || isAlive(model);

package/esm/plainChromeOverlays.d.ts

@@ -7,8 +7,8 @@ import type { DisplayChromeOverlays } from './chromeOverlays.ts';
  *
  * `DisplayUIProvider` installs this by default, so mount that rather than
  * naming this — reach for it directly only to wrap a state or to build a
- * context value by hand. Colours come from `currentColor` and the CSS system
- * colours, so the host's own cascade drives them in both light and dark.
+ * context value by hand. Colors come from `currentColor` and the CSS system
+ * colors, so the host's own cascade drives them in both light and dark.
  *
  * The `data-testid` values it renders are a contract four of JBrowse's test
  * systems key on, so a replacement set that keeps them can be driven by those

package/esm/plainChromeOverlays.js

@@ -1,12 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isRegionTooLargeError } from '@jbrowse/core/rpc/byteBudget';
 // the subpath, not the `@jbrowse/core/ui` barrel: this file is the MUI-free
 // chrome, and gpuFallback.ts is React-free for exactly that reason
 import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOfferGpuFallback, } from '@jbrowse/core/ui/gpuFallback';
 import { progressLabel } from '@jbrowse/core/util/progress';
 import { observer } from 'mobx-react';
-import { isLiveModel } from './isLiveModel.js';
-import { tooLargeBannerText } from './tooLargeBannerText.js';
 import Tooltip from './tooltip/Tooltip.js';
 // A dependency-free `DisplayChromeOverlays` for embedders who don't want MUI:
 // no theme provider to mount, no emotion injected into the host page, and
@@ -38,9 +35,9 @@ const overlayBox = {
     pointerEvents: 'none',
     zIndex: 1,
 };
-// Nearly opaque on purpose. These sit over a canvas whose colours are not known
+// Nearly opaque on purpose. These sit over a canvas whose colors are not known
 // here, and a translucent chip over dense data was measurably hard to read.
-// `Canvas`/`CanvasText` are the CSS system colours, so this tracks the host's
+// `Canvas`/`CanvasText` are the CSS system colors, so this tracks the host's
 // light/dark mode without needing a theme object.
 const chip = {
     pointerEvents: 'auto',
@@ -99,7 +96,7 @@ function errorText(error) {
 // toolkit-free, but it paints the palette's `accent`; every rule in this
 // file reads the host's own cascade instead, so the bar is drawn here rather
 // than imported.
-function ProgressBar({ fraction }) {
+const ProgressBar = observer(function ProgressBar({ fraction, }) {
     const filled = Math.min(1, Math.max(0, fraction));
     return (_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(filled * 100), style: {
             overflow: 'hidden',
@@ -117,57 +114,33 @@ function ProgressBar({ fraction }) {
                 transform: `scaleX(${filled})`,
                 transition: 'transform 200ms linear',
             } }) }));
-}
+});
 const PlainRenderError = observer(function PlainRenderError({ error, onRetry, height, }) {
     return (_jsxs("div", { style: banner(height), role: "alert", children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(error) }), _jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: onRetry, children: "Retry" }), shouldOfferGpuFallback(error) ? (_jsx(Tooltip, { title: GPU_FALLBACK_TOOLTIP, children: _jsx("button", { type: "button", style: button, "data-testid": "use_canvas2d_button", onClick: () => {
                         disableGpuRendering();
                         onRetry();
                     }, children: GPU_FALLBACK_LABEL }) })) : null] }));
 });
-const PlainTooLarge = observer(function PlainTooLarge({ model, }) {
-    return (_jsxs("div", { style: banner(), role: "status", children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: tooLargeBannerText(model.regionTooLargeReason, {
-                    zoomCanRelease: model.zoomCanReleaseGate,
-                }) }), _jsx("button", { type: "button", style: button, onClick: () => {
-                    // the banner unmounts the canvas, so a click landing after the track
-                    // was closed would otherwise call an action on a dead node. Not bare
-                    // `isAlive` — this model may be the plain object the contract invites,
-                    // which that throws on. See isLiveModel.ts.
-                    if (isLiveModel(model)) {
-                        model.forceLoad();
-                    }
-                }, children: "Force load" })] }));
+const PlainTooLarge = observer(function PlainTooLarge({ message, onForceLoad, }) {
+    return (_jsxs("div", { style: banner(), role: "status", children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: message }), _jsx("button", { type: "button", style: button, onClick: onForceLoad, children: "Force load" })] }));
 });
-const PlainErrorBar = observer(function PlainErrorBar({ model, visible, }) {
-    const { error } = model;
-    if (!visible || !error) {
-        return null;
-    }
-    return isRegionTooLargeError(error) ? (_jsx("div", { style: overlayBox, role: "status", children: _jsx("div", { style: chip, children: _jsx("span", { style: { wordBreak: 'break-word' }, children: error.message }) }) })) : (_jsx("div", { style: overlayBox, role: "alert", children: _jsxs("div", { style: chip, children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(error) }), _jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: () => {
-                        model.reload();
-                    }, children: "Retry" })] }) }));
+const PlainErrorBar = observer(function PlainErrorBar({ error, onRetry, }) {
+    return (_jsx("div", { style: overlayBox, role: onRetry ? 'alert' : 'status', children: _jsxs("div", { style: chip, children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(error) }), onRetry ? (_jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: onRetry, children: "Retry" })) : null] }) }));
 });
 // No anti-flash delay here, unlike the MUI set: that timing is a product
 // judgment JBrowse made for its own UI, and an embedder pacing their own
 // loading affordances shouldn't inherit it invisibly. Wrap this if you want it.
-const PlainLoading = observer(function PlainLoading({ model, visible, }) {
+const PlainLoading = observer(function PlainLoading({ visible, message, progress, canceled, onCancel, onRetry, }) {
     if (!visible) {
         return null;
     }
-    const { statusMessage, statusProgress, fetchCanceled } = model;
-    return (_jsx("div", { style: overlayBox, "data-testid": fetchCanceled ? 'loading-overlay-canceled' : 'loading-overlay', children: _jsx("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", children: fetchCanceled ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Loading canceled" }), model.reload ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-retry", onClick: () => {
-                            model.reload?.();
-                        }, children: "Retry" })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: statusProgress === undefined
-                            ? `${statusMessage || 'Loading'}...`
-                            : progressLabel(statusMessage || 'Loading', statusProgress) }), statusProgress === undefined ? null : (_jsx(ProgressBar, { fraction: statusProgress })), model.cancelFetchByUser ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-cancel", onClick: () => {
-                            model.cancelFetchByUser?.();
-                        }, children: "Cancel" })) : null] })) }) }));
+    return (_jsx("div", { style: overlayBox, "data-testid": canceled ? 'loading-overlay-canceled' : 'loading-overlay', children: _jsx("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", children: canceled ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Loading canceled" }), onRetry ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-retry", onClick: onRetry, children: "Retry" })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: progress === undefined
+                            ? `${message || 'Loading'}...`
+                            : progressLabel(message || 'Loading', progress) }), progress === undefined ? null : (_jsx(ProgressBar, { fraction: progress })), onCancel ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-cancel", onClick: onCancel, children: "Cancel" })) : null] })) }) }));
 });
-const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ model, visible, }) {
-    // The only state that renders no positioned box of its own: the chrome
-    // anchors the bottom-right corner and shares it with the display's control
-    // row, so this is laid out there. Claiming `inset: 0` here would collapse
-    // against that box, and pinning to the corner would sit under the row.
-    return visible && model.statusMessage ? (_jsxs("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", "data-testid": "progress-chip", children: [_jsx("span", { children: progressLabel(model.statusMessage, model.statusProgress) }), model.statusProgress === undefined ? null : (_jsx(ProgressBar, { fraction: model.statusProgress }))] })) : null;
+const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ message, progress, }) {
+    // in-flow: the chrome anchors the corner it shares with the control row
+    return (_jsxs("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", "data-testid": "progress-chip", children: [_jsx("span", { children: progressLabel(message || 'Loading', progress) }), progress === undefined ? null : _jsx(ProgressBar, { fraction: progress })] }));
 });
 /**
  * #api
@@ -177,8 +150,8 @@ const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ mode
  *
  * `DisplayUIProvider` installs this by default, so mount that rather than
  * naming this — reach for it directly only to wrap a state or to build a
- * context value by hand. Colours come from `currentColor` and the CSS system
- * colours, so the host's own cascade drives them in both light and dark.
+ * context value by hand. Colors come from `currentColor` and the CSS system
+ * colors, so the host's own cascade drives them in both light and dark.
  *
  * The `data-testid` values it renders are a contract four of JBrowse's test
  * systems key on, so a replacement set that keeps them can be driven by those

package/esm/tooltip/Tooltip.d.ts

@@ -41,12 +41,12 @@ interface TriggerProps {
  * `aria-describedby` and never `aria-label` — see {@link useTooltip}, which is
  * this without the cloning, for a host writing its own markup.
  */
-export default function Tooltip({ title, placement, children, }: {
+declare const Tooltip: ({ title, placement, children, }: {
     /** What the bubble says. Nothing renders while this is empty. */
     title: ReactNode;
     /** Preferred side. `flip()` overrides it near a viewport edge. */
     placement?: TooltipPlacement;
     /** Exactly one element, cloned rather than wrapped. */
     children: ReactElement<TriggerProps>;
-}): import("react").JSX.Element;
-export {};
+}) => import("react").JSX.Element;
+export default Tooltip;

package/esm/tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement } from 'react';
+import { observer } from 'mobx-react';
 import { useTooltip } from './useTooltip.js';
 function compose(theirs, ours) {
     return (event) => {
@@ -40,7 +41,7 @@ function compose(theirs, ours) {
  * `aria-describedby` and never `aria-label` — see {@link useTooltip}, which is
  * this without the cloning, for a host writing its own markup.
  */
-export default function Tooltip({ title, placement, children, }) {
+const Tooltip = observer(function Tooltip({ title, placement, children, }) {
     const { triggerProps, tooltip } = useTooltip(title, { placement });
     const props = children.props;
     // eslint-disable-next-line @eslint-react/no-clone-element -- wrapping instead would move the absolutely-positioned and flex-row controls this exists for
@@ -64,4 +65,5 @@ export default function Tooltip({ title, placement, children, }) {
         onBlur: compose(props.onBlur, triggerProps.onBlur),
     });
     return (_jsxs(_Fragment, { children: [trigger, tooltip] }));
-}
+});
+export default Tooltip;

package/esm/trackControl/plainTrackControl.d.ts

@@ -14,4 +14,5 @@ import type { TrackControlProps } from './types.ts';
  * `plainChromeOverlays` — the two are a pair, and both are things you hand to a
  * provider rather than render yourself.
  */
-export default function PlainTrackControl({ icon, tooltip, label, options, onClick, onMenuClose, onDelete, warning, }: TrackControlProps): import("react").JSX.Element;
+declare const PlainTrackControl: ({ icon, tooltip, label, options, onClick, onMenuClose, onDelete, warning, }: TrackControlProps) => import("react").JSX.Element;
+export default PlainTrackControl;