@jbrowse/display-ui 4.3.0 → 5.0.0-beta.10

package/esm/embed/index.js

@@ -0,0 +1,72 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, Suspense } from 'react';
+import AppReadyMarker from '@jbrowse/core/ui/AppReadyMarker';
+import { useSlowLoad, useStalled, useWidthSetter, } from '@jbrowse/core/util/hooks';
+import { getSession } from '@jbrowse/core/util/mstUtils';
+import { usePanZoom } from '@jbrowse/core/util/usePanZoom';
+import { useResizeDrag } from '@jbrowse/core/util/useResizeDrag';
+import { observer } from 'mobx-react';
+import { TrackOverlaySlot } from '../trackOverlay/TrackOverlaySlot.js';
+export { Legend } from './legend.js';
+export { LocationBox, useLocationBox } from './location.js';
+export { EmbedProvider } from './provider.js';
+export { Highlights, RegionSeams, Scalebar } from './regions.js';
+export const Track = observer(function Track({ view, trackId, }) {
+    const display = view.getTrack(trackId)?.activeDisplay;
+    if (!display) {
+        return null;
+    }
+    const { RenderingComponent } = display;
+    return (_jsx(TrackOverlaySlot, { zIndex: 3, style: { height: display.height }, children: _jsx("div", { style: { position: 'absolute', inset: 0, contain: 'strict' }, children: _jsx(Suspense, { fallback: null, children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: view.horizontalScroll }) }) }) }));
+});
+export const ResizeHandle = observer(function ResizeHandle({ view, trackId, style, }) {
+    const display = view.getTrack(trackId)?.activeDisplay;
+    const props = useResizeDrag({
+        onDragStart: () => {
+            display?.setResizing(true);
+        },
+        onDrag: distance => {
+            display?.resizeHeight(distance);
+        },
+        onDragEnd: () => {
+            display?.setResizing(false);
+        },
+    });
+    return display ? (_jsx("div", { ...props, "data-gesture-owner": "true", "aria-label": `Resize ${trackId}`, style: {
+            height: 4,
+            cursor: 'row-resize',
+            touchAction: 'none',
+            background: 'color-mix(in srgb, currentColor 20%, transparent)',
+            ...style,
+        } })) : null;
+});
+export const TrackToggle = observer(function TrackToggle({ view, trackId, style, children, }) {
+    return (_jsxs("label", { style: style, children: [_jsx("input", { type: "checkbox", checked: view.tracks.some(t => t.configuration.trackId === trackId), onChange: () => {
+                    void view.launchToggleTrack(trackId);
+                } }), children] }));
+});
+function ViewLoading({ message, progress, source }) {
+    const slow = useSlowLoad();
+    const stalled = useStalled(`${message}|${progress}|${source}`);
+    return (_jsxs(_Fragment, { children: [slow ? message : 'Loading', !slow || progress === undefined ? null : (_jsx("progress", { value: progress, max: 1, style: { display: 'block', width: 300, maxWidth: '100%' } })), stalled && source ? (_jsxs("div", { style: { overflowWrap: 'anywhere' }, children: ["still waiting on ", source] })) : null] }));
+}
+export const ViewStatus = observer(function ViewStatus({ view, style, }) {
+    const { status } = view;
+    return status.type === 'ready' ? null : (_jsx("div", { role: status.type === 'error' ? 'alert' : 'status', style: {
+            padding: '10px 12px',
+            fontSize: '0.85rem',
+            opacity: 0.75,
+            ...style,
+        }, children: status.type === 'error' ? (`Could not load: ${status.error instanceof Error ? status.error.message : String(status.error)}`) : status.type === 'loading' ? (_jsx(ViewLoading, { ...status })) : ('Nothing to show yet') }));
+});
+export const TrackStack = observer(function TrackStack({ view, trackIds, renderTrack, style, children, }) {
+    const ref = useWidthSetter(view);
+    const { containerProps } = usePanZoom(ref, view);
+    const ids = trackIds ?? view.tracks.map(t => t.configuration.trackId);
+    return (_jsxs("div", { ref: ref, ...containerProps, style: {
+            position: 'relative',
+            overflow: 'hidden',
+            cursor: 'grab',
+            ...style,
+        }, children: [view.status.type === 'ready' ? (_jsxs(_Fragment, { children: [children, ids.map(id => renderTrack ? (_jsx(Fragment, { children: renderTrack(id) }, id)) : (_jsx(Track, { view: view, trackId: id }, id)))] })) : (_jsx(ViewStatus, { view: view })), _jsx(AppReadyMarker, { session: getSession(view) })] }));
+});

package/esm/embed/legend.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export declare const Legend: ({ view, trackId, style, }: {
+    view: {
+        getTrack: (trackId: string) => {
+            activeDisplay: unknown;
+        } | undefined;
+    };
+    trackId: string;
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;

package/esm/embed/legend.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LegendSwatchGlyph } from '@jbrowse/core/ui/LegendSwatchGlyph';
+import { legendSwatches, nonEmptyLegendSections, } from '@jbrowse/core/ui/legendSpec';
+import { observer } from 'mobx-react';
+const SWATCH = 12;
+function gradientCss({ stops }) {
+    return `linear-gradient(to right, ${stops
+        .map(({ color, opacity = 1, offset }) => `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent) ${offset * 100}%`)
+        .join(', ')})`;
+}
+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,
+                    height: SWATCH,
+                    backgroundImage: gradientCss(gradient),
+                } }), _jsx("span", { children: gradient.maxLabel })] })) : (_jsxs("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 4,
+            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
+        : undefined;
+}
+export const Legend = observer(function Legend({ view, trackId, style, }) {
+    const legendSpec = legendSpecIn(view.getTrack(trackId)?.activeDisplay);
+    const sections = nonEmptyLegendSections(legendSpec?.sections ?? []);
+    return legendSpec && sections.length ? (_jsxs("div", { "data-testid": "embed-legend", style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '2px 12px',
+            fontSize: '0.75rem',
+            ...style,
+        }, children: [legendSpec.title ? _jsx("strong", { children: legendSpec.title }) : null, sections.map(section => (_jsxs("span", { style: { display: 'contents' }, children: [sections.length > 1 && section.title ? (_jsx("strong", { children: section.title })) : null, section.note ? (_jsx("span", { style: { opacity: 0.7 }, children: section.note })) : null, section.items.map((item, i) => (_jsx(Row, { item: item }, i)))] }, section.id)))] })) : null;
+});

package/esm/embed/location.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+export interface LocationView {
+    coarseVisibleLocStrings: string;
+    navToLocString: (input: string) => Promise<unknown>;
+}
+export declare function useLocationBox(view: LocationView): {
+    value: string;
+    pending: boolean;
+    error: unknown;
+    edit(text: string): void;
+    reset(): void;
+    go(input?: string): void;
+};
+export declare const LocationBox: ({ view, style, }: {
+    view: LocationView;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;

package/esm/embed/location.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { observer } from 'mobx-react';
+export function useLocationBox(view) {
+    const [draft, setDraft] = useState();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState();
+    const requests = useRef(0);
+    const value = draft ?? view.coarseVisibleLocStrings;
+    return {
+        value,
+        pending,
+        error,
+        edit(text) {
+            setDraft(text);
+        },
+        reset() {
+            setDraft(undefined);
+            setError(undefined);
+        },
+        go(input = value) {
+            const request = ++requests.current;
+            const isLatest = () => request === requests.current;
+            setDraft(input);
+            setError(undefined);
+            setPending(true);
+            view
+                .navToLocString(input)
+                .then(() => {
+                if (isLatest()) {
+                    setDraft(undefined);
+                }
+            })
+                .catch((e) => {
+                if (isLatest()) {
+                    setError(e);
+                }
+            })
+                .finally(() => {
+                if (isLatest()) {
+                    setPending(false);
+                }
+            });
+        },
+    };
+}
+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] }));
+});

package/esm/embed/provider.d.ts

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

package/esm/embed/provider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SessionPaletteProvider } from '@jbrowse/core/ui/PaletteContext';
+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 }) }));
+}

package/esm/embed/regions.d.ts

@@ -0,0 +1,53 @@
+import type React from 'react';
+export interface RegionSeamsView {
+    staticBlocksTranslateX: number;
+    paddingSpans: readonly {
+        key: string;
+        x: number;
+        width: number;
+        kind: 'seam' | 'elided' | 'boundary';
+    }[];
+}
+export interface ScalebarView {
+    staticBlocks: {
+        totalWidthPx: number;
+    };
+    staticBlocksTranslateX: number;
+    scalebarLabels: readonly {
+        x: number;
+        label: string;
+    }[];
+    scalebarRefNameLabels: {
+        labels: readonly {
+            key: string;
+            text: string;
+            transform: number;
+            maxWidth: number;
+            paddingLeft: number;
+        }[];
+        caption?: string;
+    };
+}
+export interface HighlightsView {
+    highlights: readonly {
+        assemblyName?: string;
+        refName: string;
+        start: number;
+        end: number;
+        color?: string;
+        label?: string;
+    }[];
+    getHighlightCoords: (highlight: HighlightsView['highlights'][number]) => {
+        left: number;
+        width: number;
+    } | undefined;
+}
+export declare const RegionSeams: ({ view, }: {
+    view: RegionSeamsView;
+}) => React.JSX.Element;
+export declare const Highlights: ({ view, }: {
+    view: HighlightsView;
+}) => (React.JSX.Element | null)[];
+export declare const Scalebar: ({ view, style, ...props }: {
+    view: ScalebarView;
+} & React.ComponentProps<'div'>) => React.JSX.Element;

package/esm/embed/regions.js

@@ -0,0 +1,95 @@
+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 { 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)',
+};
+export const RegionSeams = observer(function RegionSeams({ view, }) {
+    return (_jsx("div", { "aria-hidden": true, "data-region-seams": true, style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 2,
+            pointerEvents: 'none',
+            transform: `translateX(${view.staticBlocksTranslateX}px)`,
+        }, children: view.paddingSpans.map(({ key, x, width, kind }) => (_jsx("div", { "data-span": kind, style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: x,
+                width,
+                background: spanFill[kind],
+            } }, key))) }));
+});
+export const Highlights = observer(function Highlights({ view, }) {
+    const palette = usePalette();
+    return view.highlights.map((highlight, i) => {
+        const coords = view.getHighlightCoords(highlight);
+        return coords ? (_jsx("div", { "data-testid": "highlight-band", style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                width: coords.width,
+                transform: `translateX(${coords.left}px)`,
+                zIndex: 3,
+                pointerEvents: 'none',
+                background: highlight.color ??
+                    `color-mix(in srgb, ${palette.highlight.main} 20%, transparent)`,
+            }, children: highlight.label ? (_jsx("span", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 3,
+                    fontSize: '0.7rem',
+                    whiteSpace: 'nowrap',
+                    color: palette.text.primary,
+                }, children: highlight.label })) : null }, highlightKey(highlight, i))) : null;
+    });
+});
+const SCALEBAR_HEIGHT = 20;
+export const Scalebar = observer(function Scalebar({ view, style, ...props }) {
+    const palette = usePalette();
+    const { scalebarLabels, scalebarRefNameLabels, staticBlocks, staticBlocksTranslateX, } = view;
+    const chip = {
+        position: 'absolute',
+        top: 0,
+        whiteSpace: 'nowrap',
+        background: palette.background.paper,
+        color: palette.text.primary,
+    };
+    return (_jsxs("div", { "data-gesture-owner": "true", ...props, style: {
+            position: 'relative',
+            height: SCALEBAR_HEIGHT,
+            lineHeight: `${SCALEBAR_HEIGHT}px`,
+            fontSize: '0.7rem',
+            overflow: 'clip',
+            userSelect: 'none',
+            borderBottom: `1px solid ${palette.divider}`,
+            ...style,
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    height: '100%',
+                    width: staticBlocks.totalWidthPx,
+                    transform: `translateX(${Math.round(staticBlocksTranslateX)}px)`,
+                }, children: scalebarLabels.map(({ x, label }, i) => (_jsx("span", { style: {
+                        ...chip,
+                        left: x,
+                        transform: 'translateX(-50%)',
+                        padding: '0 3px',
+                    }, children: label }, i))) }), scalebarRefNameLabels.labels.map(({ key, text, transform, maxWidth, paddingLeft }) => (_jsx("span", { style: {
+                    ...chip,
+                    left: 0,
+                    transform: `translateX(${transform}px)`,
+                    maxWidth,
+                    paddingLeft,
+                    boxSizing: 'border-box',
+                    fontWeight: 'bold',
+                    overflow: 'clip',
+                }, children: text }, key))), scalebarRefNameLabels.caption === undefined ? null : (_jsx("span", { style: { ...chip, left: 0, fontWeight: 'bold' }, children: scalebarRefNameLabels.caption }))] }));
+});

package/esm/floatingLegendTop.d.ts

@@ -0,0 +1,2 @@
+export declare const FLOATING_LEGEND_TOP_PX = 10;
+export declare const FLOATING_LEGEND_RIGHT_PX = 10;

package/esm/floatingLegendTop.js

@@ -0,0 +1,3 @@
+// The key's own inset from the display's top-right corner.
+export const FLOATING_LEGEND_TOP_PX = 10;
+export const FLOATING_LEGEND_RIGHT_PX = 10;

package/esm/index.d.ts

@@ -8,7 +8,12 @@ export { useTrackControlMenu } from './trackControl/useTrackControlMenu.tsx';
 export type { TrackControlMenu } from './trackControl/useTrackControlMenu.tsx';
 export type { TrackControlComponent, TrackControlIcon, TrackControlOption, TrackControlProps, } from './trackControl/types.ts';
 export { default as FloatingLegend } from './FloatingLegend.tsx';
+export { FLOATING_LEGEND_RIGHT_PX, FLOATING_LEGEND_TOP_PX, } from './floatingLegendTop.ts';
 export type { LegendItem, LegendSection } from './FloatingLegend.tsx';
+export { FloatingSvgOverlay } from './FloatingSvgOverlay.tsx';
+export { FloatingText, SvgHaloText, TEXT_BASELINE_RATIO, textHalo, } from './FloatingText.tsx';
+export { cullOverlappingLabels } from './cullOverlappingLabels.ts';
+export type { LabelBox } from './cullOverlappingLabels.ts';
 export { default as Tooltip } from './tooltip/Tooltip.tsx';
 export { useTooltip } from './tooltip/useTooltip.tsx';
 export type { TooltipTrigger } from './tooltip/useTooltip.tsx';
@@ -20,3 +25,17 @@ export { TrackOverlaySlot } from './trackOverlay/TrackOverlaySlot.tsx';
 export { tooLargeBannerText } from './tooLargeBannerText.ts';
 export { isLiveModel } from './isLiveModel.ts';
 export { BOTTOM_RIGHT_CONTROLS_ORDER, BottomRightCornerContext, } from './bottomRightCorner.ts';
+export type { AxisSide, ValueScale, ValueScaleRule, YAxis, } from './valueScale.ts';
+export { AXIS_GUTTER_WIDTH_PX, axisPlotBox, clampStrokeInsideAxis, scoreToAxisY, } from './yScaleTicks.ts';
+export type { YScaleTicks } from './yScaleTicks.ts';
+export { DEFAULT_RULE_COLOR, SCORE_CAPTION_HEIGHT, YSCALEBAR_LABEL_OFFSET, } from './yAxisConstants.ts';
+export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, } from './axisPlacement.ts';
+export { default as AxisGutter } from './AxisGutter.tsx';
+export { AxisCaptionOverlay, default as AxisCaption } from './AxisCaption.tsx';
+export { default as YScaleBar } from './YScaleBar.tsx';
+export { default as YScaleBarOverlay } from './YScaleBarOverlay.tsx';
+export { default as ScoreDomainCaption } from './ScoreDomainCaption.tsx';
+export { formatScore } from '@jbrowse/core/util/numericUtils';
+export { CrossHatchLines, default as CrossHatches } from './CrossHatches.tsx';
+export { ScoreRuleLines, default as ScoreRules } from './ScoreRules.tsx';
+export type { ScoreRuleMark } from './ScoreRules.tsx';

package/esm/index.js

@@ -23,6 +23,19 @@ export { useTrackControlMenu } from './trackControl/useTrackControlMenu.js';
 // a display draws that is not its data. `@jbrowse/plugin-linear-genome-view`
 // re-exports it, so its published name is unchanged.
 export { default as FloatingLegend } from './FloatingLegend.js';
+export { FLOATING_LEGEND_RIGHT_PX, FLOATING_LEGEND_TOP_PX, } from './floatingLegendTop.js';
+// The <svg> counterpart of that legend, for a display whose key is drawn by an
+// SVG-export path as well as on screen. Beside it for the same reasons — it
+// reaches no UI toolkit, and portaling chrome above the region masks is what
+// this package is — and re-exported by `@jbrowse/plugin-linear-genome-view`, so
+// its published name is unchanged.
+export { FloatingSvgOverlay } from './FloatingSvgOverlay.js';
+// One line of text floated over a display, and its `<text>` twin for an
+// export: the canvas feature labels, the mark display's text marks and the
+// arc labels' export emit through these, so a floated label's typography is
+// one declaration and each display keeps only where it puts them.
+export { FloatingText, SvgHaloText, TEXT_BASELINE_RATIO, textHalo, } from './FloatingText.js';
+export { cullOverlappingLabels } from './cullOverlappingLabels.js';
 // The hover label every control in here used to delegate to the browser's
 // `title` attribute. The box it draws is `@jbrowse/core`'s `BaseTooltip`, the
 // same one the display tooltips draw, anchored to the control instead of to the
@@ -49,3 +62,14 @@ export { isLiveModel } from './isLiveModel.js';
 // contract the prop types cannot carry, so it belongs with them rather than
 // with the chrome that happens to mount it.
 export { BOTTOM_RIGHT_CONTROLS_ORDER, BottomRightCornerContext, } from './bottomRightCorner.js';
+export { AXIS_GUTTER_WIDTH_PX, axisPlotBox, clampStrokeInsideAxis, scoreToAxisY, } from './yScaleTicks.js';
+export { DEFAULT_RULE_COLOR, SCORE_CAPTION_HEIGHT, YSCALEBAR_LABEL_OFFSET, } from './yAxisConstants.js';
+export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, } from './axisPlacement.js';
+export { default as AxisGutter } from './AxisGutter.js';
+export { AxisCaptionOverlay, default as AxisCaption } from './AxisCaption.js';
+export { default as YScaleBar } from './YScaleBar.js';
+export { default as YScaleBarOverlay } from './YScaleBarOverlay.js';
+export { default as ScoreDomainCaption } from './ScoreDomainCaption.js';
+export { formatScore } from '@jbrowse/core/util/numericUtils';
+export { CrossHatchLines, default as CrossHatches } from './CrossHatches.js';
+export { ScoreRuleLines, default as ScoreRules } from './ScoreRules.js';

package/esm/plainChromeOverlays.d.ts

@@ -1,7 +1,7 @@
 import type { DisplayChromeOverlays } from './chromeOverlays.ts';
 /**
  * #api
- * The five `displayPhase` states drawn with no UI toolkit: no theme provider to
+ * The `displayPhase` states drawn with no UI toolkit: no theme provider to
  * mount, no emotion in the host page, and nothing that reads as a stray Material
  * widget inside someone else's design system.
  *

package/esm/plainChromeOverlays.js

@@ -19,9 +19,9 @@ import Tooltip from './tooltip/Tooltip.js';
 // host's own cascade drives them. Restyle by wrapping these, or write your own
 // set against the same interface.
 //
-// The testids are NOT cosmetic. `loading-overlay`, `loading-overlay-cancel`,
-// `loading-overlay-retry`, `progress-chip`, `reload_button` and
-// `use_canvas2d_button` are a contract across four test systems (jest, browser
+// The testids are NOT cosmetic. `loading-overlay`, `loading-overlay-canceled`,
+// `loading-overlay-cancel`, `loading-overlay-retry`, `progress-chip`,
+// `reload_button` and `use_canvas2d_button` are a contract across four test systems (jest, browser
 // tests, screenshot harness, jbrowse-img), so a replacement set that wants to
 // run the existing suites has to keep them.
 // The scrim and the too-large/error banners all need to sit over the canvas
@@ -95,7 +95,7 @@ function errorText(error) {
 // `aria-valuenow` changes on a `progressbar`, so the value is reachable on
 // demand and silent otherwise — which is the behaviour a progress indicator
 // should have. `StatusProgressBar` in core does the same thing and is
-// toolkit-free, but it paints `theme.palette.primary.main`; every rule in this
+// 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 }) {
@@ -149,7 +149,7 @@ const PlainLoading = observer(function PlainLoading({ model, visible, }) {
         return null;
     }
     const { statusMessage, statusProgress, fetchCanceled } = model;
-    return (_jsx("div", { style: overlayBox, "data-testid": "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: () => {
+    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'}...`
@@ -166,7 +166,7 @@ const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ mode
 });
 /**
  * #api
- * The five `displayPhase` states drawn with no UI toolkit: no theme provider to
+ * The `displayPhase` states drawn with no UI toolkit: no theme provider to
  * mount, no emotion in the host page, and nothing that reads as a stray Material
  * widget inside someone else's design system.
  *

package/esm/tooltip/Tooltip.d.ts

@@ -25,9 +25,9 @@ interface TriggerProps {
  * Takes a single element child and clones it rather than wrapping it: the
  * controls that want a tooltip are absolutely positioned inside a legend or sit
  * in a flex row, where an extra `<span>` moves them. The child keeps its own
- * handlers — these compose on top of them. This is the same trigger pattern
- * MUI's own `Tooltip` uses, which is what the rest of JBrowse's chrome is built
- * on; the toolkit is what differs here, not the shape.
+ * handlers — these compose on top of them. MUI's `Tooltip`, which the rest of
+ * JBrowse's chrome is built on, uses the same trigger pattern; only the toolkit
+ * differs.
  *
  * ```tsx
  * <Tooltip title="Hide legend">

package/esm/tooltip/Tooltip.js

@@ -24,9 +24,9 @@ function compose(theirs, ours) {
  * Takes a single element child and clones it rather than wrapping it: the
  * controls that want a tooltip are absolutely positioned inside a legend or sit
  * in a flex row, where an extra `<span>` moves them. The child keeps its own
- * handlers — these compose on top of them. This is the same trigger pattern
- * MUI's own `Tooltip` uses, which is what the rest of JBrowse's chrome is built
- * on; the toolkit is what differs here, not the shape.
+ * handlers — these compose on top of them. MUI's `Tooltip`, which the rest of
+ * JBrowse's chrome is built on, uses the same trigger pattern; only the toolkit
+ * differs.
  *
  * ```tsx
  * <Tooltip title="Hide legend">

package/esm/trackControl/trackControlContext.d.ts

@@ -2,6 +2,6 @@ import type { TrackControlComponent } from './types.ts';
 export declare const TrackControlProvider: import("react").Provider<TrackControlComponent | undefined>;
 /**
  * The component a provider installed, or `undefined` for "nobody asked". The
- * caller supplies the default, which is what keeps this module free of one.
+ * caller supplies the default, so this module binds none.
  */
 export declare function useTrackControlOverride(): TrackControlComponent | undefined;

package/esm/trackControl/trackControlContext.js

@@ -6,9 +6,9 @@ import { createContext, use } from 'react';
 /**
  * Runtime override for how ambient track controls are drawn. **Defaults to
  * undefined, not to a component** — the same choice the overlay context makes,
- * for the same reason: a plain default would silently change the look of every
- * display that renders outside a provider (unit tests, SVG export,
- * breakpoint-split-view's overlayUtils), and that degradation is invisible.
+ * for the same reason: a plain default would change the look of every display
+ * that renders outside a provider (unit tests, SVG export,
+ * breakpoint-split-view's overlayUtils) while the display keeps working.
  * Undefined means "nobody asked", so JBrowse keeps its own look.
  *
  * This is the corner-control half of the bring-your-own-UI story; the status
@@ -16,14 +16,14 @@ import { createContext, use } from 'react';
  * context. Two contexts because two different things render them — the chrome
  * renders the status states, the display's own component renders the controls —
  * and folding them together would put entries in `DisplayChromeOverlays` that
- * `DisplayChromeBase` never uses. `DisplayUIProvider` mounts both, which is what
- * an embedder actually wants.
+ * `DisplayChromeBase` never uses. An embedder usually wants both, and
+ * `DisplayUIProvider` mounts both.
  */
 const TrackControlContext = createContext(undefined);
 export const TrackControlProvider = TrackControlContext.Provider;
 /**
  * The component a provider installed, or `undefined` for "nobody asked". The
- * caller supplies the default, which is what keeps this module free of one.
+ * caller supplies the default, so this module binds none.
  */
 export function useTrackControlOverride() {
     return use(TrackControlContext);

package/esm/trackOverlay/TrackOverlaySlot.d.ts

@@ -32,8 +32,8 @@
  * this component: JBrowse's own track container passes 100, which is positioned
  * above `PaddingBlocks` and below `TrackLabel` at 200, and means nothing to a
  * host whose masks sit at 2. A default would be a number that is right in one
- * layout and silently wrong in every other, and the failure — chrome painted
- * under a mask — is invisible until someone looks at the right zoom.
+ * layout and wrong in every other, and the failure — chrome painted under a
+ * mask — goes unseen until someone looks at the right zoom.
  *
  * The node takes no pointer events, so it does not eat the canvas's. Chrome that
  * wants them takes them back on its own positioned box; it also carries

package/esm/trackOverlay/TrackOverlaySlot.js

@@ -35,8 +35,8 @@ import { TrackOverlayContext } from './TrackOverlayContext.js';
  * this component: JBrowse's own track container passes 100, which is positioned
  * above `PaddingBlocks` and below `TrackLabel` at 200, and means nothing to a
  * host whose masks sit at 2. A default would be a number that is right in one
- * layout and silently wrong in every other, and the failure — chrome painted
- * under a mask — is invisible until someone looks at the right zoom.
+ * layout and wrong in every other, and the failure — chrome painted under a
+ * mask — goes unseen until someone looks at the right zoom.
  *
  * The node takes no pointer events, so it does not eat the canvas's. Chrome that
  * wants them takes them back on its own positioned box; it also carries