@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/PaletteContext.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useEffect, useMemo, useSyncExternalStore, } from 'react';
+import { onColorSchemeChange, prefersDarkColorScheme, } from '../util/systemColorScheme.js';
+import { defaultStyleTheme } from './styleTheme.js';
+/**
+ * How a React component asks for JBrowse's design tokens.
+ *
+ * This is the toolkit-free counterpart to Material UI's `useTheme`, and it is
+ * the seam that lets a display component render without Material UI at all: a
+ * display reads `usePalette()` for its content colors, an embedding app
+ * supplies them by mounting `PaletteProvider` rather than a `ThemeProvider`,
+ * and `makeStyles` reads the whole thing through `useStyleTheme`.
+ *
+ * JBrowse's own products mount both, from the same session, so the Material UI
+ * chrome and the display content cannot disagree.
+ *
+ * With no provider above it this falls back to the default style theme,
+ * mirroring `useTheme`'s fall back to the default theme. That keeps a bare
+ * display mountable in a test or a minimal host without ceremony.
+ */
+const StyleThemeContext = createContext(undefined);
+/**
+ * Supply the whole style theme — colors plus spacing and type scale. This is
+ * what JBrowse's own products mount, from `session.styleTheme`, so a config
+ * `theme` that sets `spacing` or `typography` reaches `makeStyles` and Material
+ * UI alike.
+ */
+export function StyleThemeProvider({ theme, children, }) {
+    return _jsx(StyleThemeContext, { value: theme, children: children });
+}
+/**
+ * Supply colors only, leaving JBrowse's default sizing in place. The narrower
+ * of the two, and what a host that already holds a palette mounts: it is saying
+ * what JBrowse should draw *with*, not restating its type scale.
+ *
+ * **A host following its own light/dark state wants
+ * {@link SessionPaletteProvider} instead**, which is this plus the session
+ * write that the worker-side half of the rendering derives from. This one
+ * colors React and nothing else.
+ */
+export function PaletteProvider({ palette, children, }) {
+    const theme = useMemo(() => ({ ...defaultStyleTheme, palette }), [palette]);
+    return _jsx(StyleThemeProvider, { theme: theme, children: children });
+}
+export function useStyleTheme() {
+    return use(StyleThemeContext) ?? defaultStyleTheme;
+}
+export function usePalette() {
+    return useStyleTheme().palette;
+}
+function subscribeToColorScheme(onChange) {
+    const unsubscribe = onColorSchemeChange(onChange);
+    const observer = typeof MutationObserver === 'function'
+        ? new MutationObserver(onChange)
+        : undefined;
+    observer?.observe(document.documentElement, { attributes: true });
+    return () => {
+        unsubscribe();
+        observer?.disconnect();
+    };
+}
+// The page's declared `color-scheme`, as the browser resolves it for form
+// controls: a page that declares only one of light or dark gets that one, and
+// one that declares both, or neither, gets the OS preference.
+function readColorScheme() {
+    const declared = getComputedStyle(document.documentElement)
+        .getPropertyValue('color-scheme')
+        .split(/\s+/)
+        .filter((word) => ['light', 'dark'].includes(word));
+    return declared.length === 1
+        ? declared[0]
+        : prefersDarkColorScheme()
+            ? 'dark'
+            : 'light';
+}
+const alwaysLight = () => 'light';
+const subscribeToNothing = () => () => { };
+function useResolvedMode(mode) {
+    const systemMode = useSyncExternalStore(mode === undefined ? subscribeToColorScheme : subscribeToNothing, mode === undefined ? readColorScheme : alwaysLight, alwaysLight);
+    return mode === undefined ? systemMode : mode;
+}
+/**
+ * Point a session at light or dark and get back the palette it resolves to,
+ * for a host that wants the palette itself — to read a color out of, or to
+ * hand somewhere other than a provider. A host that only wants JBrowse to
+ * follow its dark mode mounts {@link SessionPaletteProvider}, which is this
+ * hook and the provider in one.
+ *
+ * Pass no mode and JBrowse follows the page: its declared CSS `color-scheme`
+ * when that names one of light or dark, the OS preference otherwise, tracking
+ * both. A host whose mode lives somewhere a stylesheet cannot see passes it.
+ *
+ * **Both halves are load-bearing, which is why the pairing is published as a
+ * component.** The palette is what *React* draws with; the config `theme` slot
+ * this writes is also what ships to the RPC worker, where feature labels are
+ * baked into the rendered image. Mount `PaletteProvider` on a palette from
+ * somewhere else and those labels stay in the old mode — light text on a light
+ * image, and no error anywhere. `setThemeMode` writes the one slot both are
+ * derived from, which is why this returns the palette rather than taking one.
+ *
+ * The write lands in an effect, so the first paint after a mode change uses
+ * the previous palette. That is a frame on a canvas that is about to be
+ * redrawn anyway; it is not somewhere to add a suspense boundary.
+ */
+export function useSessionPalette(session, mode) {
+    const resolved = useResolvedMode(mode);
+    useEffect(() => {
+        session.setThemeMode(resolved);
+    }, [session, resolved]);
+    return session.palette;
+}
+/**
+ * #api
+ * Make JBrowse follow the host's light/dark state — the whole of it, in one
+ * mount:
+ *
+ * ```tsx
+ * <SessionPaletteProvider session={session} mode={myAppIsDark ? 'dark' : 'light'}>
+ *   {tracks}
+ * </SessionPaletteProvider>
+ * ```
+ *
+ * `mode` is optional. Left out, JBrowse follows the page's declared
+ * `color-scheme` — so a host whose dark-mode toggle sets it, as most do, mounts
+ * this with a session and nothing else — and the OS preference where the page
+ * declares none.
+ *
+ * A component rather than a documented pair of calls because the pair has a
+ * half that can be left out with nothing to show for it. `PaletteProvider` is
+ * the name a host reaches for, and it colors the React side alone; the session
+ * write is what reaches the RPC worker, which bakes feature labels into the
+ * rendered image. So a host that mounts only the provider gets light-mode
+ * labels on a dark page, from a canvas whose every other pixel is right, and
+ * nothing errors. See {@link useSessionPalette} for the mechanism.
+ *
+ * The session is the only thing that resolves a palette here, so a host
+ * supplying colors of its own mounts `PaletteProvider` directly instead.
+ */
+export function SessionPaletteProvider({ session, mode, children, }) {
+    const palette = useSessionPalette(session, mode);
+    return _jsx(PaletteProvider, { palette: palette, children: children });
+}

package/esm/ui/PluggableComponent.d.ts

@@ -0,0 +1,10 @@
+import type PluginManager from '../PluginManager';
+import type { ExtensionPointName, ExtensionPointProps } from '../PluginManager';
+import type React from 'react';
+declare const PluggableComponent: <N extends ExtensionPointName, P extends object>({ pluginManager, name, component: DefaultComponent, props, }: {
+    pluginManager: PluginManager;
+    name: N;
+    component: React.ComponentType<P> | React.LazyExoticComponent<React.ComponentType<P>>;
+    props: P & ExtensionPointProps<N>;
+}) => React.JSX.Element;
+export default PluggableComponent;

package/esm/ui/PluggableComponent.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+// A point rendered here is a single-component fold: its registry entry declares
+// `args`/`result` as the component type and `props` as that component's prop
+// bag (see Core-replaceWidget for the canonical shape). Taking the name as a
+// registry key rather than a bare string is what checks the default component
+// and the props against the contract, instead of trusting the call site.
+//
+// observer so that observable reads inside evaluateExtensionPoint callbacks
+// (e.g. model.trackAdapterType) are tracked here — re-evaluates when they
+// change without relying on the parent being an observer
+const PluggableComponent = observer(function PluggableComponent({ pluginManager, name, component: DefaultComponent, props, }) {
+    // the result is the point's declared component type, and `props` satisfies
+    // the point's declared props by the signature above. TS can't narrow either
+    // through the generic key, so both are restated here
+    const Component = pluginManager.evaluateComponentExtensionPoint(name, DefaultComponent, ...[props]);
+    return _jsx(Component, { ...props });
+});
+export default PluggableComponent;

package/esm/ui/PluggableComponents.d.ts

@@ -0,0 +1,29 @@
+import type PluginManager from '../PluginManager.ts';
+import type { ExtensionPointRegistry, PointsOfKind } from '../PluginManager.ts';
+/**
+ * The extension points that accumulate an array of components — every point
+ * declared `ComponentList`. Points accumulating rendered `ReactNode`s are
+ * `ElementList` instead, and belong to {@link PluggableElements}.
+ */
+export type ComponentExtensionPointName = PointsOfKind<'componentList'>;
+/** The props a component point hands each of its panels. */
+export type PanelProps<N extends ComponentExtensionPointName> = ExtensionPointRegistry[N]['props'];
+/**
+ * Render every component contributed to an accumulating point, in registration
+ * order, each with the point's props.
+ *
+ * The component sibling of {@link PluggableElements}. Owning the loop here is
+ * what makes a new panel seam one tag rather than a producer that re-derives
+ * the `Suspense` boundary, the keys and the legacy normalization — each of
+ * which was wrong in one of the two producers that used to hand-roll it.
+ *
+ * A contributed panel scopes itself, rendering `null` when it does not apply —
+ * {@link matchesTrackSelector} is what decides that. It also draws its own card
+ * chrome, since only the panel knows whether it wants a title.
+ */
+declare const PluggableComponents: <N extends ComponentExtensionPointName>({ pluginManager, name, props, }: {
+    pluginManager: PluginManager;
+    name: N;
+    props: PanelProps<N>;
+}) => import("react").JSX.Element;
+export default PluggableComponents;

package/esm/ui/PluggableComponents.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { observer } from 'mobx-react';
+/**
+ * Render every component contributed to an accumulating point, in registration
+ * order, each with the point's props.
+ *
+ * The component sibling of {@link PluggableElements}. Owning the loop here is
+ * what makes a new panel seam one tag rather than a producer that re-derives
+ * the `Suspense` boundary, the keys and the legacy normalization — each of
+ * which was wrong in one of the two producers that used to hand-roll it.
+ *
+ * A contributed panel scopes itself, rendering `null` when it does not apply —
+ * {@link matchesTrackSelector} is what decides that. It also draws its own card
+ * chrome, since only the panel knows whether it wants a title.
+ */
+const PluggableComponents = observer(function PluggableComponents({ pluginManager, name, props, }) {
+    // restated for the same reason as PluggableElements: neither the empty
+    // accumulator nor the props narrow through the generic key. [x].flat()
+    // tolerates a pre-v5 callback that returned one component instead of appending
+    const components = [
+        pluginManager.evaluateExtensionPoint(name, [], ...[props]),
+    ].flat();
+    return (_jsx(_Fragment, { children: components.map((Component, i) => (_jsx(Suspense
+        // eslint-disable-next-line @eslint-react/no-array-index-key -- registration-ordered, so stable across renders
+        , { fallback: null, children: _jsx(Component, { ...props }) }, i))) }));
+});
+export default PluggableComponents;

package/esm/ui/PluggableElements.d.ts

@@ -0,0 +1,23 @@
+import type PluginManager from '../PluginManager.ts';
+import type { ExtensionPointProps } from '../PluginManager.ts';
+import type { ElementExtensionPointName } from './addExtensionElement.tsx';
+/**
+ * Render every element contributed to an accumulating point — the overlay
+ * points, whose entries are `ReactNode`s put there by `addExtensionElement`.
+ *
+ * The list sibling of {@link PluggableComponent}, which renders the single
+ * component a `single` point resolves to. Which one a point takes is decided by
+ * its registry entry, not by the call site: `ElementExtensionPointName` accepts
+ * only the points whose `args` are `ReactNode[]`, so asking for a slot point
+ * here is a compile error rather than a component that renders nothing.
+ *
+ * observer for the same reason PluggableComponent is one: a contributor may
+ * scope itself on an observable, and the fold runs here rather than in the
+ * producer, so the read has to be tracked by this component's own reaction.
+ */
+declare const PluggableElements: <N extends ElementExtensionPointName>({ pluginManager, name, props, }: {
+    pluginManager: PluginManager;
+    name: N;
+    props: ExtensionPointProps<N>;
+}) => import("react").JSX.Element;
+export default PluggableElements;

package/esm/ui/PluggableElements.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+/**
+ * Render every element contributed to an accumulating point — the overlay
+ * points, whose entries are `ReactNode`s put there by `addExtensionElement`.
+ *
+ * The list sibling of {@link PluggableComponent}, which renders the single
+ * component a `single` point resolves to. Which one a point takes is decided by
+ * its registry entry, not by the call site: `ElementExtensionPointName` accepts
+ * only the points whose `args` are `ReactNode[]`, so asking for a slot point
+ * here is a compile error rather than a component that renders nothing.
+ *
+ * observer for the same reason PluggableComponent is one: a contributor may
+ * scope itself on an observable, and the fold runs here rather than in the
+ * producer, so the read has to be tracked by this component's own reaction.
+ */
+const PluggableElements = observer(function PluggableElements({ pluginManager, name, props, }) {
+    // the empty accumulator is the point's own array type, and `props` satisfies
+    // its declared props by the signature above. TS can't narrow either through
+    // the generic key, so both are restated here — same as PluggableComponent
+    const elements = pluginManager.evaluateExtensionPoint(name, [], ...[props]);
+    return _jsx(_Fragment, { children: elements });
+});
+export default PluggableElements;

package/esm/ui/PluginStoreCard.d.ts

@@ -0,0 +1,17 @@
+import type { PluginDefinition } from '../pluginDefinitions.ts';
+import type { ResolvedPlugin } from '../util/pluginStore.ts';
+import type { JBrowsePlugin } from '../util/types/index.ts';
+/**
+ * One plugin-store entry. Presentational, and shared by every surface that
+ * installs from the store (the in-session plugin store widget, Desktop's global
+ * plugins dialog) so all of them install the version `resolvePlugin` picked —
+ * version-pinned, integrity-carrying, and refused when no published version
+ * supports this JBrowse.
+ */
+export default function PluginStoreCard({ plugin, resolved, installed, disabled, onInstall, }: {
+    plugin: JBrowsePlugin;
+    resolved: ResolvedPlugin;
+    installed: boolean;
+    disabled?: boolean;
+    onInstall: (definition: PluginDefinition) => void;
+}): import("react").JSX.Element;

package/esm/ui/PluginStoreCard.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AddIcon from '@mui/icons-material/Add';
+import CheckIcon from '@mui/icons-material/Check';
+import PersonIcon from '@mui/icons-material/Person';
+import { Button, Card, CardActions, CardContent, Chip, Typography, } from '@mui/material';
+import { makeStyles } from '../util/tss-react/index.js';
+import ExternalLink from './ExternalLink.js';
+const useStyles = makeStyles()({
+    card: {
+        margin: '0.5em',
+    },
+    bold: {
+        fontWeight: 600,
+    },
+    dataField: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    mr: {
+        marginRight: '0.5em',
+    },
+    tagRow: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '0.3em',
+        marginTop: '0.5em',
+    },
+});
+/**
+ * One plugin-store entry. Presentational, and shared by every surface that
+ * installs from the store (the in-session plugin store widget, Desktop's global
+ * plugins dialog) so all of them install the version `resolvePlugin` picked —
+ * version-pinned, integrity-carrying, and refused when no published version
+ * supports this JBrowse.
+ */
+export default function PluginStoreCard({ plugin, resolved, installed, disabled, onInstall, }) {
+    const { classes } = useStyles();
+    const { definition, compatible, supportedRanges, pluginVersion } = resolved;
+    const installable = compatible && definition !== undefined;
+    return (_jsxs(Card, { variant: "outlined", className: classes.card, children: [_jsxs(CardContent, { children: [_jsx(Typography, { variant: "h5", children: _jsxs(ExternalLink, { href: `${plugin.location}#readme`, children: [plugin.name, pluginVersion ? ` (v${pluginVersion})` : ''] }) }), _jsxs("div", { className: classes.dataField, children: [_jsx(PersonIcon, { className: classes.mr }), _jsx(Typography, { children: plugin.authors.join(', ') })] }), _jsx(Typography, { className: classes.bold, children: "Description:" }), _jsx(Typography, { children: plugin.description }), plugin.tags?.length ? (_jsx("div", { className: classes.tagRow, children: plugin.tags.map(tag => (_jsx(Chip, { label: tag, size: "small", variant: "outlined" }, tag))) })) : null, compatible ? null : (_jsxs(Typography, { color: "error", children: ["Not compatible with this version of JBrowse (requires JBrowse", ' ', supportedRanges.join(' or '), ")"] }))] }), _jsx(CardActions, { children: _jsx(Button, { variant: "contained", disabled: installed || disabled || !installable, startIcon: installed ? _jsx(CheckIcon, {}) : _jsx(AddIcon, {}), onClick: () => {
+                        if (definition !== undefined) {
+                            onInstall(definition);
+                        }
+                    }, children: installed ? 'Installed' : 'Install' }) })] }));
+}

package/esm/ui/PopoverPicker.d.ts

@@ -0,0 +1,6 @@
+export default function PopoverPicker({ color, onChange, presetAlpha, unset, }: {
+    color: string;
+    onChange: (color: string) => void;
+    presetAlpha?: number;
+    unset?: boolean;
+}): import("react").JSX.Element;

package/esm/ui/PopoverPicker.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { makeStyles } from '../util/tss-react/index.js';
+import { ColorPopover } from './ColorPicker.js';
+import { swatchStyle } from './colorSwatchStyle.js';
+const useStyles = makeStyles()({
+    picker: { position: 'relative' },
+    swatch: swatchStyle,
+    // Signals a color that isn't explicitly set — the swatch shows the effective
+    // (auto) color, dashed to distinguish it from a user-chosen value.
+    unset: {
+        border: '2px dashed #999',
+        boxSizing: 'border-box',
+    },
+});
+export default function PopoverPicker({ color, onChange, presetAlpha, unset, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { classes, cx } = useStyles();
+    const isAuto = color === 'auto';
+    return (_jsxs("div", { className: classes.picker, children: [_jsx("div", { className: cx(classes.swatch, unset ? classes.unset : undefined), style: { backgroundColor: isAuto ? 'transparent' : color }, title: unset ? 'Automatic — click to set a custom color' : undefined, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                } }), _jsx(ColorPopover, { anchorEl: anchorEl, onClose: () => {
+                    setAnchorEl(null);
+                }, color: isAuto ? 'blue' : color, onChange: onChange, presetAlpha: presetAlpha })] }));
+}

package/esm/ui/PrerenderedCanvas.d.ts

@@ -6,5 +6,5 @@ declare function PrerenderedCanvas(props: {
     imageData?: unknown;
     showSoftClip?: boolean;
     blockKey?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export default PrerenderedCanvas;

package/esm/ui/PrerenderedCanvas.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { drawImageOntoCanvasContext } from "../util/offscreenCanvasPonyfill.js";
+import { drawImageOntoCanvasContext } from '../util/offscreenCanvasPonyfill.js';
 function PrerenderedCanvas(props) {
     const { width, height, highResolutionScaling = 1, style = {}, imageData, blockKey, showSoftClip, } = props;
     const [done, setDone] = useState(false);
-    const featureCanvas = useRef(null);
+    const featureCanvasRef = useRef(null);
     useEffect(() => {
         if (!imageData) {
             return;
         }
-        const canvas = featureCanvas.current;
+        const canvas = featureCanvasRef.current;
         if (!canvas) {
             return;
         }
@@ -19,6 +19,7 @@ function PrerenderedCanvas(props) {
         }
         context.clearRect(0, 0, canvas.width, canvas.height);
         drawImageOntoCanvasContext(imageData, context);
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
         setDone(true);
     }, [imageData]);
     return (_jsx("canvas", { "data-testid": [
@@ -28,6 +29,6 @@ function PrerenderedCanvas(props) {
             done ? 'done' : '',
         ]
             .filter(f => !!f)
-            .join('_'), ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+            .join('_'), ref: featureCanvasRef, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 }
 export default PrerenderedCanvas;

package/esm/ui/ProgressChip.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Bottom-right progress chip for work running while usable content is already on
+ * screen: a refetch over stale geometry (dotplot, linear synteny), or a
+ * background job that is not a fetch at all (clustering, via `DisplayChrome`).
+ * It stays small and out of the way instead of masking the canvas the way the
+ * full loading overlay would, and surfaces the statusCallback message plus a
+ * determinate bar when the phase reports progress.
+ *
+ * Pure presentation — the caller owns the gate (its own `refetching` getter, or
+ * the chrome's "a status is set while the phase is ready") and the containing
+ * element owns the positioning context.
+ *
+ * It also owns the corner, unless `anchored={false}` says something else does.
+ * That escape exists because on the LGV side the corner is shared: the chrome
+ * anchors one box for both this and the display's control row, and a chip that
+ * pins itself lands *under* that row rather than above it.
+ */
+declare const ProgressChip: ({ status, anchored, }: {
+    /**
+     * What to show. One object rather than a message and a fraction side by side,
+     * so a `createStatusChannel` holder passes `status={model.fetchStatus}` and
+     * nothing has to restate the pair — the field names are the channel's, and
+     * {@link LoadingProgress}'s.
+     */
+    status: {
+        message?: string;
+        fraction?: number;
+    };
+    /**
+     * Pin to the bottom-right of the containing block (the default, and what a
+     * caller dropping this into its own positioned box wants). Pass `false` where
+     * something else already owns that corner and lays this out — `DisplayChrome`
+     * shares it with the display's control row.
+     */
+    anchored?: boolean;
+}) => import("react").JSX.Element;
+export default ProgressChip;

package/esm/ui/ProgressChip.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { keyframes, makeStyles } from '../util/tss-react/index.js';
+import LoadingProgress from './LoadingProgress.js';
+// anti-flash: hold the chip hidden for the first moments so a fast job (which
+// unmounts the chip before the delay elapses) never flashes. The chip remounts
+// per job, so the delay restarts each time. 0s duration = no fade, it just
+// appears after the delay.
+const appear = keyframes `
+  from { opacity: 0; }
+  to { opacity: 0.8; }
+`;
+const useStyles = makeStyles()(theme => ({
+    root: {
+        // Kept out of `anchored` below, because it has to hold in both modes and
+        // does: a flex item honours `z-index` with no `position` of its own
+        // (Flexbox §5.4). In the chrome's shared corner this is what keeps the chip
+        // under the tree sidebar and the legends at 100, where it has always been.
+        zIndex: 2,
+        pointerEvents: 'none',
+        padding: '0 4px',
+        borderRadius: 4,
+        background: theme.palette.background.paper,
+        opacity: 0.8,
+        animation: `${appear} 0s linear 0.25s both`,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    // Separated from the presentation above because the two callers differ on who
+    // owns the corner. The comparative views drop this chip straight into their
+    // own positioned box and want it anchored; `DisplayChrome` puts it in a corner
+    // the chrome itself anchors and shares with the display's control row, and an
+    // absolutely-positioned chip there sits *under* that row instead of above it
+    // — which is the collision this split fixes.
+    anchored: {
+        position: 'absolute',
+        bottom: 2,
+        right: 2,
+    },
+    bar: {
+        width: 120,
+    },
+}));
+/**
+ * Bottom-right progress chip for work running while usable content is already on
+ * screen: a refetch over stale geometry (dotplot, linear synteny), or a
+ * background job that is not a fetch at all (clustering, via `DisplayChrome`).
+ * It stays small and out of the way instead of masking the canvas the way the
+ * full loading overlay would, and surfaces the statusCallback message plus a
+ * determinate bar when the phase reports progress.
+ *
+ * Pure presentation — the caller owns the gate (its own `refetching` getter, or
+ * the chrome's "a status is set while the phase is ready") and the containing
+ * element owns the positioning context.
+ *
+ * It also owns the corner, unless `anchored={false}` says something else does.
+ * That escape exists because on the LGV side the corner is shared: the chrome
+ * anchors one box for both this and the display's control row, and a chip that
+ * pins itself lands *under* that row rather than above it.
+ */
+const ProgressChip = observer(function ProgressChip({ status, anchored = true, }) {
+    const { classes, cx } = useStyles();
+    return (_jsx("div", { className: cx(classes.root, anchored ? classes.anchored : undefined), "data-testid": "progress-chip", children: _jsx(LoadingProgress, { message: status.message, fraction: status.fraction, barClassName: classes.bar }) }));
+});
+export default ProgressChip;

package/esm/ui/RedErrorMessageBox.d.ts

@@ -1,3 +1,3 @@
 export default function RedErrorMessageBox({ children, }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/RedErrorMessageBox.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles } from "../util/tss-react/index.js";
+import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     bg: {
         padding: 4,
         margin: 4,
         overflow: 'auto',
-        maxHeight: 200,
         background: theme.palette.mode === 'dark' ? '#833' : '#f88',
         border: `1px solid ${theme.palette.divider}`,
     },
 }));
+// The test-id, not the color, is what says "an error is on screen": this is the
+// box ErrorMessage and ErrorBanner both render into, and it is the one error
+// surface the website capture harness could not see. `ErrorBar` publishes
+// `reload_button` and `notifyError` publishes `snackbar-error`, so a capture
+// that still showed either failed loudly — but an MST type error surfacing here
+// over a view was captured and committed as if the figure were fine. Keying off
+// `#f88` instead would break on the dark theme and on any restyle.
 export default function RedErrorMessageBox({ children, }) {
     const { classes } = useStyles();
-    return _jsx("div", { className: classes.bg, children: children });
+    return (_jsx("div", { className: classes.bg, "data-testid": "error-message-box", children: children }));
 }

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

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

package/esm/ui/RefNameAutocomplete/EndAdornment.js

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

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

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

package/esm/ui/RefNameAutocomplete/HelpDialog.js

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

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

@@ -0,0 +1,13 @@
+import type { Assembly } from '../../assemblyManager/assembly.ts';
+import type { TrackCatalog } from '../../util/index.ts';
+import type { Option } from './util.ts';
+import type { HTMLAttributes, Key } from 'react';
+declare const SearchOption: ({ props, option, session, assembly, }: {
+    props: HTMLAttributes<HTMLLIElement> & {
+        key: Key;
+    };
+    option: Option;
+    session: TrackCatalog;
+    assembly?: Assembly;
+}) => import("react").JSX.Element;
+export default SearchOption;