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

package/esm/PointerLayer.d.ts

@@ -1,26 +1,20 @@
 import type { MouseState, MouseTracker } from '@jbrowse/core/ui/useMouseTracking';
 import type { ReactNode } from 'react';
 /**
- * The part of a display that follows the pointer — guides, a tooltip, a
- * highlighted column — rendered off the chrome's `mouseTracker` in a leaf of
- * its own, so a mousemove re-renders this and nothing else. Read in the
- * component that mounts `DisplayChrome` instead, the position would re-render
- * the chrome, its status container and every overlay under it on each move
- * (see `useMouseTracking`).
+ * The part of a display that follows the pointer, in a leaf of its own so a
+ * mousemove re-renders this and not the chrome, its status container and every
+ * overlay under it (see `useMouseTracking`). An observer, so a model read in
+ * `children` is tracked here too rather than freezing under a stationary
+ * cursor.
  *
- * `rowsTopOffset` answers whether the pointer is over the rows rather than a
- * band stacked above them, for a display that gates its crosshair to the rows:
- * a guide drawn while the pointer is over a variant lane or a connector zone
- * names a row the pointer is not on. The tooltip is usually not gated with it,
- * which is why the child decides. `children` is also handed an absent state, so
- * a layer that has to render while nothing is hovered — the matrix display's
- * connector lines, with no column highlighted — can.
- *
- * Four displays used to write this component out, with the same paragraph over
- * each.
+ * `inRows` is whether the pointer is past `rowsTopOffset`, the bands a display
+ * stacks above its rows — a crosshair drawn over one names a row the pointer is
+ * not on, and `>=` because the rows begin AT the offset. A tooltip usually
+ * wants it ungated, which is why the child decides, and `children` is handed an
+ * absent state so a layer that draws with nothing hovered still can.
  */
-export declare function PointerLayer({ mouseTracker, rowsTopOffset, children, }: {
+export declare const PointerLayer: ({ mouseTracker, rowsTopOffset, children, }: {
     mouseTracker: MouseTracker;
     rowsTopOffset?: number;
     children: (state: MouseState | undefined, inRows: boolean) => ReactNode;
-}): import("react").JSX.Element;
+}) => ReactNode;

package/esm/PointerLayer.js

@@ -1,27 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 // deep subpath, never the `@jbrowse/core/ui` barrel: this package reaches no
 // UI toolkit, and the barrel pulls MUI in
 import { useMouseState } from '@jbrowse/core/ui/useMouseTracking';
+import { observer } from 'mobx-react';
 /**
- * The part of a display that follows the pointer — guides, a tooltip, a
- * highlighted column — rendered off the chrome's `mouseTracker` in a leaf of
- * its own, so a mousemove re-renders this and nothing else. Read in the
- * component that mounts `DisplayChrome` instead, the position would re-render
- * the chrome, its status container and every overlay under it on each move
- * (see `useMouseTracking`).
+ * The part of a display that follows the pointer, in a leaf of its own so a
+ * mousemove re-renders this and not the chrome, its status container and every
+ * overlay under it (see `useMouseTracking`). An observer, so a model read in
+ * `children` is tracked here too rather than freezing under a stationary
+ * cursor.
  *
- * `rowsTopOffset` answers whether the pointer is over the rows rather than a
- * band stacked above them, for a display that gates its crosshair to the rows:
- * a guide drawn while the pointer is over a variant lane or a connector zone
- * names a row the pointer is not on. The tooltip is usually not gated with it,
- * which is why the child decides. `children` is also handed an absent state, so
- * a layer that has to render while nothing is hovered — the matrix display's
- * connector lines, with no column highlighted — can.
- *
- * Four displays used to write this component out, with the same paragraph over
- * each.
+ * `inRows` is whether the pointer is past `rowsTopOffset`, the bands a display
+ * stacks above its rows — a crosshair drawn over one names a row the pointer is
+ * not on, and `>=` because the rows begin AT the offset. A tooltip usually
+ * wants it ungated, which is why the child decides, and `children` is handed an
+ * absent state so a layer that draws with nothing hovered still can.
  */
-export function PointerLayer({ mouseTracker, rowsTopOffset = 0, children, }) {
+export const PointerLayer = observer(function PointerLayer({ mouseTracker, rowsTopOffset = 0, children, }) {
     const state = useMouseState(mouseTracker);
-    return _jsx(_Fragment, { children: children(state, !!state && state.y > rowsTopOffset) });
-}
+    return children(state, !!state && state.y >= rowsTopOffset);
+});

package/esm/ScoreDomainCaption.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The one-line `[min, max]` caption that stands in for a y axis where none can
+ * be drawn — a scale whose bands are too short for tick labels, and a density
+ * track whose rows each carry their own colour, so no single ramp describes
+ * them. An axis stand-in rather than a key, which is why it is not a colour
+ * scale and draws whether or not the legend does. Right-aligned to
+ * `canvasWidth` at the top of the display, led by the scale's `caption` where
+ * it has one, which has no gutter to sit in here.
+ */
+export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, caption, }: {
+    domain: [number, number];
+    scaleType: string;
+    canvasWidth: number;
+    caption?: string;
+}): import("react").JSX.Element;

package/esm/ScoreDomainCaption.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { measureLegendText } from '@jbrowse/core/ui/measureLegendText';
+import { formatScore } from '@jbrowse/core/util/numericUtils';
+import { stripAlpha } from '@jbrowse/core/util/svgColorProps';
+import { SCORE_CAPTION_HEIGHT } from './yAxisConstants.js';
+/**
+ * The one-line `[min, max]` caption that stands in for a y axis where none can
+ * be drawn — a scale whose bands are too short for tick labels, and a density
+ * track whose rows each carry their own colour, so no single ramp describes
+ * them. An axis stand-in rather than a key, which is why it is not a colour
+ * scale and draws whether or not the legend does. Right-aligned to
+ * `canvasWidth` at the top of the display, led by the scale's `caption` where
+ * it has one, which has no gutter to sit in here.
+ */
+export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, caption, }) {
+    const palette = usePalette();
+    const suffix = scaleType === 'log' ? ' (log)' : scaleType === 'symlog' ? ' (symlog)' : '';
+    const text = `${caption ? `${caption} ` : ''}[${formatScore(domain[0])}, ${formatScore(domain[1])}]${suffix}`;
+    const len = measureLegendText(text, 12);
+    const xpos = Math.max(0, canvasWidth - len - 10);
+    return (_jsxs("g", { children: [_jsx("rect", { x: xpos - 3, y: 0, width: len + 6, height: SCORE_CAPTION_HEIGHT, fill: stripAlpha(palette.background.paper), fillOpacity: 0.8 }), _jsx("text", { y: 12, x: xpos, fontSize: 12, fill: palette.text.primary, children: text })] }));
+}

package/esm/ScoreRules.d.ts

@@ -0,0 +1,21 @@
+/**
+ * One horizontal rule across a score plot at a chosen value, placed in the
+ * plot's own pixel space; `label` is free text the reader chose.
+ */
+export interface ScoreRuleMark {
+    value: number;
+    y: number;
+    label?: string;
+    color?: string;
+}
+export declare function ScoreRuleLines({ marks, width, offsetY, }: {
+    marks: ScoreRuleMark[];
+    width: number;
+    offsetY?: number;
+}): import("react").JSX.Element;
+export default function ScoreRules({ marks, width, height, bandTops, }: {
+    marks: ScoreRuleMark[];
+    width: number;
+    height: number;
+    bandTops: number[];
+}): import("react").JSX.Element;

package/esm/ScoreRules.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { DEFAULT_RULE_COLOR } from './yAxisConstants.js';
+const LABEL_FONT_SIZE = 10;
+const LABEL_GAP = 2;
+// Above its line, unless the band's top edge leaves the label no room: a rule
+// at the top of the axis, like a pinned maximum, captions itself below.
+function labelY(y, offsetY) {
+    return y >= LABEL_FONT_SIZE + LABEL_GAP
+        ? offsetY + y - LABEL_GAP
+        : offsetY + y + LABEL_FONT_SIZE + LABEL_GAP;
+}
+// Bare marks, no wrapping <svg>, so the on-screen overlay and the SVG export
+// draw the same elements from the same y. Same split as CrossHatchLines.
+export function ScoreRuleLines({ marks, width, offsetY = 0, }) {
+    // A caption sits over the plot, not beside it, so it needs the halo the tick
+    // labels next to it already draw (YScaleBar) — without one a rule crossing
+    // filled bars captions itself in grey on the fill and cannot be read. From
+    // the palette rather than a hardcoded white, which inverts into a glare in
+    // dark mode.
+    const haloColor = usePalette().background.default;
+    return (_jsx(_Fragment, { children: marks.map(({ value, label, color, y }) => {
+            const lineY = offsetY + y;
+            const stroke = color ?? DEFAULT_RULE_COLOR;
+            return (_jsxs("g", { children: [_jsx("line", { x1: 0, x2: width, y1: lineY, y2: lineY, stroke: stroke, 
+                        // separate attribute rather than an rgba() string: the SVG
+                        // export's renderToStaticMarkup strips rgba() alpha
+                        strokeOpacity: 0.9, strokeWidth: 1, strokeDasharray: "4 3" }), label ? (_jsx("text", { x: width - 4, y: labelY(y, offsetY), textAnchor: "end", fontSize: LABEL_FONT_SIZE, 
+                        // full alpha, unlike the line: 0.9 is there to let the rule
+                        // recede into the plot, and a caption that has to be read wants
+                        // the opposite
+                        fill: stroke, stroke: haloColor, strokeWidth: 2.5, paintOrder: "stroke", children: label })) : null] }, `${value}-${y}`));
+        }) }));
+}
+// Once per band the scale rules, like CrossHatches; pointer-events disabled so
+// the canvas underneath still gets mouse events.
+export default function ScoreRules({ marks, width, height, bandTops, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            height,
+            width,
+        }, children: bandTops.map(top => (_jsx(ScoreRuleLines, { marks: marks, width: width, offsetY: top }, top))) }));
+}

package/esm/YScaleBar.d.ts

@@ -0,0 +1,6 @@
+import type { YScaleTicks } from './yScaleTicks.ts';
+export default function YScaleBar({ ticks, orientation, bandHeight, }: {
+    ticks: YScaleTicks | undefined;
+    orientation?: 'left' | 'right';
+    bandHeight?: number;
+}): import("react").JSX.Element | null;

package/esm/YScaleBar.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { AXIS_FONT_PX, TICK_LABEL_X_PX } from './yAxisConstants.js';
+import { clampStrokeInsideAxis } from './yScaleTicks.js';
+// Not an `observer`, and deliberately: there is nothing here to observe. Every
+// caller already reads `model.ticks` inside its own observer and hands the
+// resolved plain object down, and `usePalette` is a React context, not MobX.
+// Wrapping it anyway allocated a Reaction per instance — multi-wiggle renders
+// one per sample row, on screen as well as in export — and, per CLAUDE.md, put
+// the component out of `babel-plugin-react-compiler`'s reach, so it got neither
+// the MobX tracking it doesn't need nor the memoization it does. Its sibling
+// `CrossHatchLines`, consuming the same ticks, is already plain.
+// Half the vertical space a 10px label needs, halo included: digits reach about
+// 3.6px above the centered baseline and the 2.5px-wide background stroke another
+// 1.25px past that.
+const LABEL_HALF_HEIGHT_PX = 5;
+export default function YScaleBar({ ticks, orientation, bandHeight, }) {
+    const palette = usePalette();
+    if (!ticks) {
+        return null;
+    }
+    const { items, yTop, yBottom } = ticks;
+    const bg = palette.background.default;
+    const fg = palette.text.primary;
+    const isLeft = orientation !== 'right';
+    const k = isLeft ? -1 : 1;
+    const tickLength = 6;
+    // Crispen to `y + 0.5` so each 1px stroke fills one pixel instead of
+    // straddling two, then clamp, which only bites at the bottom edge: there the
+    // stroke goes on the last pixel inside the box rather than the first one
+    // below it.
+    const strokeY = (y) => clampStrokeInsideAxis(y + 0.5, yBottom);
+    // The tick keeps the group transform; only the text moves off it, and only
+    // under `bandHeight` within half a label of an end. A tick is where the data
+    // is, so it never moves — the label is then drawn against the tick rather than
+    // across it, which is what any axis does at the edge of its own frame.
+    // `undefined` rather than 0 for the labels that don't move, so the markup this
+    // emits is unchanged wherever the inset doesn't apply.
+    const labelDy = (sy) => {
+        if (bandHeight === undefined) {
+            return undefined;
+        }
+        const inset = Math.min(Math.max(sy, LABEL_HALF_HEIGHT_PX), bandHeight - LABEL_HALF_HEIGHT_PX);
+        return inset === sy ? undefined : inset - sy;
+    };
+    return (_jsxs("g", { fontSize: AXIS_FONT_PX, textAnchor: isLeft ? 'end' : 'start', stroke: fg, strokeWidth: 1, children: [_jsx("path", { fill: "none", d: `M${k * tickLength} ${strokeY(yTop)}H0.5V${strokeY(yBottom)}H${k * tickLength}` }), items.map(({ value, y, label }) => (_jsxs("g", { transform: `translate(0,${strokeY(y)})`, children: [_jsx("line", { x2: k * tickLength }), _jsx("text", { stroke: bg, strokeWidth: 2.5, paintOrder: "stroke", fill: fg, y: labelDy(strokeY(y)), dy: "0.32em", x: k * TICK_LABEL_X_PX, children: label ?? value })] }, `${value}-${y}`)))] }));
+}

package/esm/YScaleBarOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { YAxis } from './valueScale.ts';
+/**
+ * The on-screen axis of one band: an `<svg>` the width of the gutter,
+ * positioned absolutely over the band at `top`, with `AxisGutter` inside. A
+ * right-side gutter clears the vertical scrollbar a display may mount.
+ */
+export default function YScaleBarOverlay({ axis, top, width, }: {
+    axis: YAxis;
+    top: number;
+    width: number;
+}): import("react").JSX.Element;

package/esm/YScaleBarOverlay.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VERTICAL_SCROLLBAR_CLEARANCE } from '@jbrowse/core/ui/VerticalScrollbar';
+import AxisGutter from './AxisGutter.js';
+import { axisGutterLeft, axisGutterWidth } from './axisPlacement.js';
+/**
+ * The on-screen axis of one band: an `<svg>` the width of the gutter,
+ * positioned absolutely over the band at `top`, with `AxisGutter` inside. A
+ * right-side gutter clears the vertical scrollbar a display may mount.
+ */
+export default function YScaleBarOverlay({ axis, top, width, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top,
+            left: axisGutterLeft(axis, width, VERTICAL_SCROLLBAR_CLEARANCE),
+            pointerEvents: 'none',
+            height: axis.height,
+            width: axisGutterWidth(axis),
+            overflow: 'visible',
+        }, children: _jsx(AxisGutter, { axis: axis }) }));
+}

package/esm/axisPlacement.d.ts

@@ -0,0 +1,44 @@
+import type { ValueScale, YAxis } from './valueScale.ts';
+/**
+ * Below this band height a full `YScaleBar`'s tick labels overlap each other,
+ * so the chrome draws one `ScoreDomainCaption` for the scale instead of an
+ * axis per band. Its own module because `YScaleBar`'s label geometry is what
+ * makes 30 the number.
+ */
+export declare const COMPACT_AXIS_HEIGHT = 30;
+/**
+ * Whether a scale places anything by y, which is whether its rules draw: it
+ * rules at least one band, where `[]` is a scale mapped to colour instead.
+ */
+export declare function rulesABand(scale: Pick<ValueScale, 'bandTops'>): boolean;
+/**
+ * Whether a scale gets an axis at all: it rules at least one band, and the
+ * band has room for tick labels. A scale that fails either is captioned.
+ */
+export declare function axisDrawn(scale: Pick<ValueScale, 'height' | 'bandTops'>): boolean;
+/**
+ * The y a scale's one caption centres on: halfway down the extent of the bands
+ * given, from the first's top tick to the last's bottom. One band gives the
+ * middle of its own axis.
+ */
+export declare function axisCaptionY(axis: Pick<YAxis, 'ticks'>, bandTops: number[]): number;
+/**
+ * How wide an axis's gutter is: the ordinary width, grown inward over the plot
+ * where a caption and the widest tick label cannot share it, so neither is
+ * drawn over the other. The caption keeps the outer edge and the labels stay
+ * beside the spine.
+ */
+export declare function axisGutterWidth(axis: Pick<YAxis, 'ticks' | 'caption'>): number;
+/** How far in from the plot's right edge a right-side gutter ends in an export. */
+export declare const AXIS_RIGHT_INSET_PX = 4;
+/**
+ * Left edge of the gutter an axis is drawn in. A right-side axis takes the
+ * gutter inside the plot's right edge, less `rightInset` (the vertical
+ * scrollbar a display may mount on screen; a margin in an export). A left-side
+ * axis takes the gutter at the display's left edge, past whatever panel the
+ * scale's `left` reserves — except in an export, whose margin is the gutter,
+ * so an axis nothing pushes right sits in the margin with its numbers outside
+ * the plot and its spine on the content edge, or past it by what
+ * `axisGutterWidth` grew.
+ */
+export declare function axisGutterLeft(axis: Pick<YAxis, 'side' | 'left' | 'ticks' | 'caption'>, width: number, rightInset: number, exportContentLeft?: number): number;

package/esm/axisPlacement.js

@@ -0,0 +1,70 @@
+import { measureText } from '@jbrowse/core/util/measureText';
+import { AXIS_FONT_PX, CAPTION_BAND_PX, TICK_LABEL_X_PX, } from './yAxisConstants.js';
+import { AXIS_GUTTER_WIDTH_PX } from './yScaleTicks.js';
+/**
+ * Below this band height a full `YScaleBar`'s tick labels overlap each other,
+ * so the chrome draws one `ScoreDomainCaption` for the scale instead of an
+ * axis per band. Its own module because `YScaleBar`'s label geometry is what
+ * makes 30 the number.
+ */
+export const COMPACT_AXIS_HEIGHT = 30;
+/**
+ * Whether a scale places anything by y, which is whether its rules draw: it
+ * rules at least one band, where `[]` is a scale mapped to colour instead.
+ */
+export function rulesABand(scale) {
+    return (scale.bandTops?.length ?? 1) > 0;
+}
+/**
+ * Whether a scale gets an axis at all: it rules at least one band, and the
+ * band has room for tick labels. A scale that fails either is captioned.
+ */
+export function axisDrawn(scale) {
+    return rulesABand(scale) && scale.height >= COMPACT_AXIS_HEIGHT;
+}
+/**
+ * The y a scale's one caption centres on: halfway down the extent of the bands
+ * given, from the first's top tick to the last's bottom. One band gives the
+ * middle of its own axis.
+ */
+export function axisCaptionY(axis, bandTops) {
+    const { yTop, yBottom } = axis.ticks;
+    return (Math.min(...bandTops) + yTop + Math.max(...bandTops) + yBottom) / 2;
+}
+/**
+ * How wide an axis's gutter is: the ordinary width, grown inward over the plot
+ * where a caption and the widest tick label cannot share it, so neither is
+ * drawn over the other. The caption keeps the outer edge and the labels stay
+ * beside the spine.
+ */
+export function axisGutterWidth(axis) {
+    if (!axis.caption) {
+        return AXIS_GUTTER_WIDTH_PX;
+    }
+    let widest = 0;
+    for (const { value, label } of axis.ticks.items) {
+        widest = Math.max(widest, measureText(label ?? value, AXIS_FONT_PX));
+    }
+    return Math.max(AXIS_GUTTER_WIDTH_PX, Math.ceil(CAPTION_BAND_PX + widest + TICK_LABEL_X_PX));
+}
+/** How far in from the plot's right edge a right-side gutter ends in an export. */
+export const AXIS_RIGHT_INSET_PX = 4;
+/**
+ * Left edge of the gutter an axis is drawn in. A right-side axis takes the
+ * gutter inside the plot's right edge, less `rightInset` (the vertical
+ * scrollbar a display may mount on screen; a margin in an export). A left-side
+ * axis takes the gutter at the display's left edge, past whatever panel the
+ * scale's `left` reserves — except in an export, whose margin is the gutter,
+ * so an axis nothing pushes right sits in the margin with its numbers outside
+ * the plot and its spine on the content edge, or past it by what
+ * `axisGutterWidth` grew.
+ */
+export function axisGutterLeft(axis, width, rightInset, exportContentLeft) {
+    if (axis.side === 'right') {
+        return width - rightInset - axisGutterWidth(axis);
+    }
+    const left = axis.left ?? 0;
+    return exportContentLeft !== undefined && left === 0
+        ? exportContentLeft - AXIS_GUTTER_WIDTH_PX
+        : left;
+}

package/esm/bottomRightCorner.d.ts

@@ -22,10 +22,9 @@
  * It has never been reachable: the two displays that render the control row
  * (alignments, canvas) are not among the four that report a `ready`-phase
  * status (clustering, on multi-wiggle / multi-row features / maf / the
- * multi-sample variant pair). That is the *reason* to make it structural rather
- * than to leave it — nothing on either side is aware of the constraint, so the
- * first display to want both would find the bug, and it presents as a status
- * message that silently never appears.
+ * multi-sample variant pair). The layout is structural anyway, because neither
+ * side checks for the constraint, so the first display to want both would hit
+ * the bug as a status message that never appears.
  *
  * `BottomRightIndicators` already described itself as "the single anchor point
  * for every bottom-right overlay ... so they lay out as one row instead of each

package/esm/bottomRightCorner.js

@@ -23,10 +23,9 @@ import { createContext } from 'react';
  * It has never been reachable: the two displays that render the control row
  * (alignments, canvas) are not among the four that report a `ready`-phase
  * status (clustering, on multi-wiggle / multi-row features / maf / the
- * multi-sample variant pair). That is the *reason* to make it structural rather
- * than to leave it — nothing on either side is aware of the constraint, so the
- * first display to want both would find the bug, and it presents as a status
- * message that silently never appears.
+ * multi-sample variant pair). The layout is structural anyway, because neither
+ * side checks for the constraint, so the first display to want both would hit
+ * the bug as a status message that never appears.
  *
  * `BottomRightIndicators` already described itself as "the single anchor point
  * for every bottom-right overlay ... so they lay out as one row instead of each

package/esm/chromeOverlayContext.d.ts

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

package/esm/chromeOverlayContext.js

@@ -18,10 +18,9 @@ import { createContext, use } from 'react';
 // `muiFreeSeam.test.ts` fails naming the import trail if that stops being true.
 /**
  * Runtime override for the overlay set. **Defaults to undefined, not to a
- * component set** — that is deliberate. A plain default would silently degrade
- * every display that renders outside a provider (unit tests, SVG export,
- * breakpoint-split-view's overlayUtils), and that degradation is invisible: the
- * display still works, it just stops looking like JBrowse. Undefined means
+ * component set**. A plain default would degrade every display that renders
+ * outside a provider (unit tests, SVG export, breakpoint-split-view's
+ * overlayUtils): the display would still work, but stop looking like JBrowse. Undefined means
  * "nobody asked", so `DisplayChrome` keeps its MUI set and nothing changes.
  *
  * This is the escape hatch for embedders who want JBrowse's *own* displays
@@ -37,7 +36,7 @@ const DisplayChromeOverlayContext = createContext(undefined);
 export const DisplayChromeOverlayProvider = DisplayChromeOverlayContext.Provider;
 /**
  * The set a provider installed, or `undefined` for "nobody asked". The caller
- * supplies the default, which is what keeps this module free of one.
+ * supplies the default, so this module binds none.
  */
 export function useChromeOverlayOverride() {
     return use(DisplayChromeOverlayContext);

package/esm/chromeOverlays.d.ts

@@ -54,8 +54,10 @@ export interface DisplayChromeOverlays {
         visible: boolean;
     }>;
     /**
-     * The loading scrim. `visible` is `displayPhase === 'loading'`; `immediate`
-     * asks it to skip its anti-flash delay because nothing is painted yet.
+     * The loading scrim. `visible` is `displayPhase` `loading` or `canceled`,
+     * the second drawn from `model.fetchCanceled` with Retry in place of Cancel;
+     * `immediate` asks it to skip its anti-flash delay because nothing is painted
+     * yet.
      *
      * Mounted unconditionally, so it must handle `visible === false` itself — and
      * that is load-bearing rather than a style choice: the anti-flash delay is

package/esm/cullOverlappingLabels.d.ts

@@ -0,0 +1,14 @@
+export interface LabelBox {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/**
+ * The labels to keep, left to right: one survives only where the plot holds its
+ * glyphs whole and no kept label's halo meets them, as ggplot2's
+ * `check_overlap` leaves them. A sweep over the kept labels still reaching the
+ * current left edge, so a screen of labels costs a sort and a short walk each.
+ * Sorts `candidates` in place; `tieBreak` orders two starting at the same x.
+ */
+export declare function cullOverlappingLabels<T extends LabelBox>(candidates: T[], width: number, height: number, haloPx: number, tieBreak?: (a: T, b: T) => number): T[];

package/esm/cullOverlappingLabels.js

@@ -0,0 +1,31 @@
+/**
+ * The labels to keep, left to right: one survives only where the plot holds its
+ * glyphs whole and no kept label's halo meets them, as ggplot2's
+ * `check_overlap` leaves them. A sweep over the kept labels still reaching the
+ * current left edge, so a screen of labels costs a sort and a short walk each.
+ * Sorts `candidates` in place; `tieBreak` orders two starting at the same x.
+ */
+export function cullOverlappingLabels(candidates, width, height, haloPx, tieBreak = () => 0) {
+    candidates.sort((a, b) => a.left - b.left || tieBreak(a, b));
+    const gap = 2 * haloPx;
+    const kept = [];
+    const active = [];
+    for (const c of candidates) {
+        if (c.left < 0 || c.right > width || c.top < 0 || c.bottom > height) {
+            continue;
+        }
+        let n = 0;
+        for (const a of active) {
+            if (a.right + gap > c.left) {
+                active[n++] = a;
+            }
+        }
+        active.length = n;
+        if (active.some(a => a.top - gap < c.bottom && a.bottom + gap > c.top)) {
+            continue;
+        }
+        active.push(c);
+        kept.push(c);
+    }
+    return kept;
+}

package/esm/embed/index.d.ts

@@ -0,0 +1,70 @@
+import type { PanZoomView } from '@jbrowse/core/util/usePanZoom';
+import type { ViewStatus as ViewStatusValue } from '@jbrowse/core/util/viewStatus';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+import type React from 'react';
+export { Legend } from './legend.tsx';
+export { LocationBox, useLocationBox } from './location.tsx';
+export { EmbedProvider } from './provider.tsx';
+export { Highlights, RegionSeams, Scalebar } from './regions.tsx';
+export interface EmbedDisplay {
+    height: number;
+    RenderingComponent: React.ComponentType<{
+        model: EmbedDisplay;
+        onHorizontalScroll?: (distance: number) => void;
+    }>;
+}
+export interface EmbedView extends PanZoomView, IStateTreeNode {
+    status: ViewStatusValue;
+    tracks: {
+        configuration: {
+            trackId: string;
+        };
+    }[];
+    getTrack: (trackId: string) => {
+        activeDisplay: EmbedDisplay;
+    } | undefined;
+    setWidth: (width: number) => void;
+}
+export declare const Track: ({ view, trackId, }: {
+    view: EmbedView;
+    trackId: string;
+}) => React.JSX.Element | null;
+export interface ResizableDisplay {
+    setResizing: (resizing: boolean) => void;
+    resizeHeight: (distance: number) => unknown;
+}
+export declare const ResizeHandle: ({ view, trackId, style, }: {
+    view: {
+        getTrack: (trackId: string) => {
+            activeDisplay: ResizableDisplay;
+        } | undefined;
+    };
+    trackId: string;
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;
+export declare const TrackToggle: ({ view, trackId, style, children, }: {
+    view: {
+        tracks: {
+            configuration: {
+                trackId: string;
+            };
+        }[];
+        launchToggleTrack: (trackId: string) => Promise<unknown>;
+    };
+    trackId: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ViewStatus: ({ view, style, }: {
+    view: {
+        status: ViewStatusValue;
+    };
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;
+export declare const TrackStack: ({ view, trackIds, renderTrack, style, children, }: {
+    view: EmbedView;
+    trackIds?: string[];
+    renderTrack?: (trackId: string) => React.ReactNode;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;