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

package/README.md

@@ -34,19 +34,19 @@ above them.
 
 ## What is here
 
-|                                             |                                                                                         |
-| ------------------------------------------- | --------------------------------------------------------------------------------------- |
-| `DisplayChromeOverlays`                     | the `displayPhase` states, as a five-component set, with the model shape each is handed |
-| `DisplayChromeOverlayProvider`              | redirects those states for JBrowse's own displays                                       |
-| `TrackControlComponent`                     | one shape for every ambient bottom-right control, icons named rather than passed        |
-| `TrackControlProvider`                      | redirects those                                                                         |
-| `DisplayUIProvider`                         | both at once, defaulting to the plain sets — what an embedder mounts                    |
-| `plainChromeOverlays` / `plainTrackControl` | the toolkit-free sets, CSS system colours, no theme object                              |
-| `TrackOverlaySlot` / `TrackOverlayPortal`   | the per-track overlay layer, and the host's half of it                                  |
-| `FloatingLegend`                            | the one legend box every display with colours to explain draws                          |
-| `BottomRightCornerContext`                  | the corner `BackgroundProgress` is laid out in, which its prop types cannot express     |
-| `tooLargeBannerText`                        | what the byte gate says, shared by every set that renders it                            |
-| `isLiveModel`                               | the liveness guard an overlay's one button needs, for an MST node or a plain object     |
+|                                             |                                                                                     |
+| ------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `DisplayChromeOverlays`                     | the `displayPhase` states, as a five-component set taking plain props               |
+| `DisplayChromeOverlayProvider`              | redirects those states for JBrowse's own displays                                   |
+| `TrackControlComponent`                     | one shape for every ambient bottom-right control, icons named rather than passed    |
+| `TrackControlProvider`                      | redirects those                                                                     |
+| `DisplayUIProvider`                         | both at once, defaulting to the plain sets — what an embedder mounts                |
+| `plainChromeOverlays` / `plainTrackControl` | the toolkit-free sets, CSS system colors, no theme object                           |
+| `TrackOverlaySlot` / `TrackOverlayPortal`   | the per-track overlay layer, and the host's half of it                              |
+| `FloatingLegend`                            | the one legend box every display with colors to explain draws                       |
+| `BottomRightCornerContext`                  | the corner `BackgroundProgress` is laid out in, which its prop types cannot express |
+| `tooLargeBannerText`                        | what the byte gate says, shared by every set that renders it                        |
+| `isLiveModel`                               | the liveness guard an overlay's one button needs, for an MST node or a plain object |
 
 ## What is _not_ here, and cannot be
 
@@ -69,42 +69,23 @@ Auto-generated from `#api` JSDoc tags in this package. Do not edit by hand.
 
 The one box per display that owns the bottom-right corner.
 
-It lives beside the overlay contract rather than with the chrome that mounts it,
-because it is the half of that contract the types cannot carry:
-`DisplayChromeOverlays.BackgroundProgress` is the one state told to render an
-in-flow chip with no `position` and no corner offsets, and this is the box it is
-laid out in. A host writing their own display over `DisplayChromeBase` needs to
-be able to build that corner; while this sat one layer up in the LGV plugin, the
-rule was a paragraph they could only obey by hand.
-
-Two independent things want that corner and neither could see the other: the
-display's own control row (`BottomRightIndicators` — track sizing, the isoform
-notice, the solo chip) and the chrome's background-progress chip
-(`DisplayChromeOverlays.BackgroundProgress`, the status channel for work with no
-fetch behind it). Both portal into the _same_ per-track overlay node, and both
-used to claim `bottom: 2; right: 2` there with their own `position: absolute`
-box — so they simply drew on top of each other, the controls winning on z-index
-and the status text disappearing under them.
-
-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). 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
-picking their own position and colliding". This makes that true of the chip too:
-the chrome renders the anchor, puts its chip in it, and publishes the node here
-so the display's row — rendered several components away, inside the chrome's
-body — lands in the same flex box instead of over it.
-
-`null` outside a chrome (a display an embedder mounts standalone, a unit test,
-the SVG export), where `BottomRightIndicators` keeps its own anchored box. That
-fallback is why this can be added without every consumer changing.
+Two members share it: the display's own control row (`BottomRightIndicators`)
+and the chrome's background-progress chip
+(`DisplayChromeOverlays.BackgroundProgress`). Both portal into the same
+per-track overlay node, so each claiming the corner with its own
+`position: absolute` box draws one over the other. The chrome renders this box,
+lays its chip out in it, and publishes the node here so the control row,
+rendered inside the chrome's body, lands in the same flex column.
+
+- A host writing their own display over `DisplayChromeBase` builds the corner
+  from this; the chip is told to render in-flow, with no `position` and no
+  corner offsets.
+- `null` outside a chrome (a standalone mount, a unit test, the SVG export),
+  where `BottomRightIndicators` anchors its own box.
 
 ```js
+import { BottomRightCornerContext } from '@jbrowse/display-ui'
+
 // type signature
 Context<HTMLElement | null>
 ```
@@ -172,33 +153,32 @@ no toolkit. See
 [DISPLAYCHROME.md](https://github.com/GMOD/jbrowse-components/blob/main/agent-docs/reference/DISPLAYCHROME.md).
 
 ```js
+import { DisplayUIProvider } from '@jbrowse/display-ui'
+
 // type signature
-({ overlays, trackControl, children, }: { overlays?: Partial<…> | undefined; trackControl?: TrackControlComponent | undefined; children: ReactNode; }) => Element
+({ overlays, trackControl, children, }: { overlays?: Partial<DisplayChromeOverlays> | undefined; trackControl?: TrackControlComponent | undefined; children: ReactNode; }) => Element
 ```
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/display-ui/src/DisplayUIProvider.tsx)
 
 ### isLiveModel
 
-Whether an overlay's model can still be called into.
+Whether a display model can still be called into.
 
-The terminal states unmount the canvas, so a click landing after the track was
-closed would otherwise run an action on a destroyed node — which is why both
-overlay sets guard their one button with `isAlive`.
+The chrome's overlay slots guard every button with it: the terminal states
+unmount the canvas, so a click landing after the track was closed would
+otherwise run an action on a destroyed node.
 
-**`isAlive` alone is wrong here, and it throws rather than answering.** The four
-model shapes in `chromeOverlays.ts` are structural on purpose ("A display
-satisfies one by having the fields; no mixin has to be composed"), so a host
-writing their own display over `DisplayChromeBase` may hand these components a
-plain object. `isAlive` runs `assertIsStateTreeNode` and throws on one, inside
-an event handler, where React logs it and moves on — leaving the Force load
-button looking live and doing nothing, which is the exact state
-`DisplayChromeOverlays.TooLarge` documents itself as existing to prevent.
-
-A plain object is never destroyed, so it is always callable. The liveness
-question only exists for an MST node.
+**`isAlive` alone is wrong here, and it throws rather than answering.** A host
+writing their own display over `DisplayChromeBase` may hand the chrome a plain
+object, and `isAlive` runs `assertIsStateTreeNode`, which throws inside the
+click handler, where React logs it and moves on: a Force load button that looks
+live and does nothing. A plain object is never destroyed, so it is always
+callable.
 
 ```js
+import { isLiveModel } from '@jbrowse/display-ui'
+
 // type signature
 (model: unknown) => boolean
 ```
@@ -213,7 +193,7 @@ inside someone else's design system.
 
 `DisplayUIProvider` installs this by default, so mount that rather than naming
 this — reach for it directly only to wrap a state or to build a context value by
-hand. Colours come from `currentColor` and the CSS system colours, so the host's
+hand. Colors come from `currentColor` and the CSS system colors, so the host's
 own cascade drives them in both light and dark.
 
 The `data-testid` values it renders are a contract four of JBrowse's test
@@ -221,6 +201,8 @@ systems key on, so a replacement set that keeps them can be driven by those
 suites too.
 
 ```js
+import { plainChromeOverlays } from '@jbrowse/display-ui'
+
 // type signature
 DisplayChromeOverlays
 ```
@@ -265,6 +247,8 @@ two consecutive measurements rather than from a threshold; see
 `ByteEstimate.zoomIneffective`.
 
 ```js
+import { tooLargeBannerText } from '@jbrowse/display-ui'
+
 // type signature
 (regionTooLargeReason: string, { zoomCanRelease }?: { zoomCanRelease?: boolean | undefined; }) => string
 ```
@@ -303,8 +287,10 @@ chrome is built on, uses the same trigger pattern; only the toolkit differs.
 without the cloning, for a host writing its own markup.
 
 ```js
+import { Tooltip } from '@jbrowse/display-ui'
+
 // type signature
-({ title, placement, children, }: { title: ReactNode; placement?: TooltipPlacement | undefined; children: ReactElement<…>; }) => Element
+({ title, placement, children, }: { title: ReactNode; placement?: TooltipPlacement | undefined; children: ReactElement<TriggerProps, string | JSXElementConstructor<any>>; }) => Element
 ```
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/display-ui/src/tooltip/Tooltip.tsx)
@@ -324,6 +310,8 @@ default), which preserves chrome that is still meaningful unescaped. Pass
 draws itself some other way elsewhere.
 
 ```js
+import { TrackOverlayPortal } from '@jbrowse/display-ui'
+
 // type signature
 ({ children, fallbackInline, }: { children: ReactNode; fallbackInline?: boolean | undefined; }) => ReactNode
 ```
@@ -338,7 +326,7 @@ escapes into. Pair to `TrackOverlayPortal`, which is the other end.
 A display's React tree is sealed in a `contain: strict` sandbox — that is what
 isolates its paint, and dropping it is measured and rejected (ADR-058). A
 stacking context comes with the isolation, so floating chrome a display draws (a
-colour key, hi-c's overlay panel, maf's row labels) cannot out-z-index anything
+color key, hi-c's overlay panel, maf's row labels) cannot out-z-index anything
 painted over the track stack from outside. The escape is a node mounted _beside_
 the sandbox rather than inside it, published through `TrackOverlayContext`; this
 component is that node, its context and the paint order between them, in the one
@@ -373,6 +361,8 @@ wants them takes them back on its own positioned box; it also carries
 click-drag pan.
 
 ```js
+import { TrackOverlaySlot } from '@jbrowse/display-ui'
+
 // type signature
 ({ children, zIndex, style, overlayStyle, }: { children: ReactNode; zIndex: number; style?: CSSProperties | undefined; overlayStyle?: CSSProperties | undefined; }) => Element
 ```
@@ -402,6 +392,8 @@ with it. Any other handler on this list has to compose rather than replace —
 spread first, then call `triggerProps.onFocus` from yours.
 
 ```js
+import { useTooltip } from '@jbrowse/display-ui'
+
 // type signature
 (title: ReactNode, { placement }?: { placement?: TooltipPlacement | undefined; }) => TooltipTrigger
 ```
@@ -422,6 +414,8 @@ Render `menuProps` only while `open`, and portal it to `document.body` —
 carries position only.
 
 ```js
+import { useTrackControlMenu } from '@jbrowse/display-ui'
+
 // type signature
 (onClose?: (() => void) | undefined) => TrackControlMenu
 ```
@@ -431,7 +425,7 @@ carries position only.
 ### ValueScale
 
 A value scale a display places its y through, declared so the chrome can derive
-the axis from it — the score axis's counterpart to a colour scale.
+the axis from it — the score axis's counterpart to a color scale.
 
 `domain` is the resolved `[min, max]`; `height` the band it rules and `offset`
 the inset of the plot box inside that band (`axisPlotBox(height, offset)`);
@@ -444,15 +438,15 @@ geometry); `ScoreScaleMixin` derives one through `computeYTicks` otherwise.
 display stacks the same plot: the multi-wiggle's rows, a grouped alignments
 track's coverage band per group, each projected through the display's own
 scroll; the chrome drops the ones off screen. `[]` is a scale the display maps
-to colour rather than to y (density rows each in their own colour), which gets
-the `[min, max]` caption and no axis, as a scale whose bands are too short for
-one does. `side` and `left` are which of the band's edges the display's own
-panels leave clear for a gutter: `right` where a group label chip takes the
-left, `left: n` where a dendrogram takes the first `n` px. `caption` is what the
-scale measures (`TLEN`), as a colour scale's `field` is; the chrome draws it
-once for the scale, beside the bands on screen, however many it rules. `rules`
-are the reference lines the scale declares and `grid` a line at every tick, both
-drawn across every band.
+to color rather than to y (density rows each in their own color), which gets the
+`[min, max]` caption and no axis, as a scale whose bands are too short for one
+does. `side` and `left` are which of the band's edges the display's own panels
+leave clear for a gutter: `right` where a group label chip takes the left,
+`left: n` where a dendrogram and row labels take the first `n` px. `caption` is
+what the scale measures (`TLEN`), as a color scale's `field` is; the chrome
+draws it once for the scale, beside the bands on screen, however many it rules.
+`rules` are the reference lines the scale declares and `grid` a line at every
+tick, both drawn across every band.
 
 A member describes the scale or the band it rules, never the axis — not an
 orientation, a form, a gutter width or a font. The chrome reads a member to keep

package/esm/AxisCaption.d.ts

@@ -16,9 +16,9 @@ export default function AxisCaption({ axis, bandTops, height, }: {
  * The on-screen caption of one scale: an `<svg>` over the gutter column, the
  * height of the display, with `AxisCaption` inside.
  */
-export declare function AxisCaptionOverlay({ axis, bandTops, width, height, }: {
+export declare const AxisCaptionOverlay: ({ axis, bandTops, width, height, }: {
     axis: YAxis;
     bandTops: number[];
     width: number;
     height: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/AxisCaption.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { VERTICAL_SCROLLBAR_CLEARANCE } from '@jbrowse/core/ui/VerticalScrollbar';
 import { measureText } from '@jbrowse/core/util/measureText';
-import { axisCaptionY, axisGutterLeft, axisGutterWidth, } from './axisPlacement.js';
+import { observer } from 'mobx-react';
+import { axisCaptionY, axisGutterLeft, axisGutterWidth, numbersGrowRight, } from './axisPlacement.js';
 import { AXIS_FONT_PX, CAPTION_INSET_PX } from './yAxisConstants.js';
 // The caption and its length, cut to an ellipsis where it is longer than
 // `room`, as a Vega-Lite axis title is cut at its `titleLimit`. The ellipsis
@@ -28,9 +29,10 @@ function fitCaption(caption, room) {
  * and the export both draw through this, so the two cannot place a caption
  * differently.
  */
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 export default function AxisCaption({ axis, bandTops, height, }) {
     const palette = usePalette();
-    const x = axis.side === 'right'
+    const x = numbersGrowRight(axis)
         ? axisGutterWidth(axis) - CAPTION_INSET_PX
         : CAPTION_INSET_PX;
     const caption = fitCaption(axis.caption ?? '', height);
@@ -45,7 +47,7 @@ export default function AxisCaption({ axis, bandTops, height, }) {
  * The on-screen caption of one scale: an `<svg>` over the gutter column, the
  * height of the display, with `AxisCaption` inside.
  */
-export function AxisCaptionOverlay({ axis, bandTops, width, height, }) {
+export const AxisCaptionOverlay = observer(function AxisCaptionOverlay({ axis, bandTops, width, height, }) {
     return (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
@@ -54,4 +56,4 @@ export function AxisCaptionOverlay({ axis, bandTops, width, height, }) {
             height,
             width: axisGutterWidth(axis),
         }, children: _jsx(AxisCaption, { axis: axis, bandTops: bandTops, height: height }) }));
-}
+});

package/esm/AxisGutter.d.ts

@@ -1,8 +1,8 @@
 import type { YAxis } from './valueScale.ts';
 /**
  * One band's axis drawn inside its gutter, the origin at the gutter's left
- * edge: the spine on the gutter's inner edge — its right for a left-side
- * axis, its left for a right-side one — with the numbers growing outward. The
+ * edge: the spine on the gutter's left edge with the numbers growing right
+ * where `numbersGrowRight` says so, and on its right edge otherwise. The
  * on-screen overlay and the export both draw through this, so the two cannot
  * place a spine differently. The scale's caption is `AxisCaption`'s, drawn once
  * for the scale and not per band.

package/esm/AxisGutter.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import YScaleBar from './YScaleBar.js';
-import { axisGutterWidth } from './axisPlacement.js';
+import { axisGutterWidth, numbersGrowRight } from './axisPlacement.js';
 /**
  * One band's axis drawn inside its gutter, the origin at the gutter's left
- * edge: the spine on the gutter's inner edge — its right for a left-side
- * axis, its left for a right-side one — with the numbers growing outward. The
+ * edge: the spine on the gutter's left edge with the numbers growing right
+ * where `numbersGrowRight` says so, and on its right edge otherwise. The
  * on-screen overlay and the export both draw through this, so the two cannot
  * place a spine differently. The scale's caption is `AxisCaption`'s, drawn once
  * for the scale and not per band.
  */
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 export default function AxisGutter({ axis }) {
-    const right = axis.side === 'right';
+    const right = numbersGrowRight(axis);
     return (_jsx("g", { transform: `translate(${right ? 0 : axisGutterWidth(axis)} 0)`, children: _jsx(YScaleBar, { ticks: axis.ticks, orientation: right ? 'right' : 'left', bandHeight: axis.height }) }));
 }

package/esm/CrossHatches.d.ts

@@ -4,9 +4,10 @@ export declare function CrossHatchLines({ ticks, width, offsetY, }: {
     width: number;
     offsetY?: number;
 }): import("react").JSX.Element;
-export default function CrossHatches({ ticks, width, height, bandTops, }: {
+declare const CrossHatches: ({ ticks, width, height, bandTops, }: {
     ticks: YScaleTicks;
     width: number;
     height: number;
     bandTops: number[];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default CrossHatches;

package/esm/CrossHatches.js

@@ -1,8 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { clampStrokeInsideAxis } from './yScaleTicks.js';
 // Bare <line> set for the Y-scale tick guide lines, no wrapping <svg>. Shared by
 // the absolutely-positioned on-screen CrossHatches overlay and the flat SVG
 // export, so the two can't drift. `offsetY` is the band's top.
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 export function CrossHatchLines({ ticks, width, offsetY = 0, }) {
     return (_jsx(_Fragment, { children: ticks.items.map(({ value, y }) => {
             // Same clamp the axis ticks take, so a guide line and the tick it
@@ -19,7 +21,7 @@ export function CrossHatchLines({ ticks, width, offsetY = 0, }) {
 }
 // Horizontal guide lines at each Y-scale tick, once per band the scale rules.
 // Pointer-events disabled so the underlying canvas still receives mouse events.
-export default function CrossHatches({ ticks, width, height, bandTops, }) {
+const CrossHatches = observer(function CrossHatches({ ticks, width, height, bandTops, }) {
     return (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
@@ -28,4 +30,5 @@ export default function CrossHatches({ ticks, width, height, bandTops, }) {
             height,
             width,
         }, children: bandTops.map(top => (_jsx(CrossHatchLines, { ticks: ticks, width: width, offsetY: top }, top))) }));
-}
+});
+export default CrossHatches;

package/esm/DisplayUIProvider.d.ts

@@ -63,8 +63,9 @@ export declare function resolveOverlays(overlays?: Partial<DisplayChromeOverlays
  * prop and imports no toolkit. See
  * [DISPLAYCHROME.md](https://github.com/GMOD/jbrowse-components/blob/main/agent-docs/reference/DISPLAYCHROME.md).
  */
-export default function DisplayUIProvider({ overlays, trackControl, children, }: {
+declare const DisplayUIProvider: ({ overlays, trackControl, children, }: {
     overlays?: Partial<DisplayChromeOverlays>;
     trackControl?: TrackControlComponent;
     children: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default DisplayUIProvider;

package/esm/DisplayUIProvider.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { DisplayChromeOverlayProvider } from './chromeOverlayContext.js';
 import plainChromeOverlays from './plainChromeOverlays.js';
 import plainTrackControl from './trackControl/plainTrackControl.js';
@@ -91,6 +92,7 @@ export function resolveOverlays(overlays) {
  * prop and imports no toolkit. See
  * [DISPLAYCHROME.md](https://github.com/GMOD/jbrowse-components/blob/main/agent-docs/reference/DISPLAYCHROME.md).
  */
-export default function DisplayUIProvider({ overlays, trackControl = plainTrackControl, children, }) {
+const DisplayUIProvider = observer(function DisplayUIProvider({ overlays, trackControl = plainTrackControl, children, }) {
     return (_jsx(DisplayChromeOverlayProvider, { value: resolveOverlays(overlays), children: _jsx(TrackControlProvider, { value: trackControl, children: children }) }));
-}
+});
+export default DisplayUIProvider;

package/esm/FloatingLegend.js

@@ -193,7 +193,7 @@ function gradientCss({ stops }, paper) {
     });
     return `linear-gradient(to right, ${list.join(', ')})`;
 }
-function GradientRow({ label, gradient, }) {
+const GradientRow = observer(function GradientRow({ label, gradient, }) {
     const { classes, theme } = useStyles();
     return (_jsxs("div", { className: classes.gradientRow, children: [label ? _jsx("div", { className: classes.label, children: label }) : null, _jsx("div", { className: classes.gradientBar, 
                 // backgroundImage (longhand), not the `background` shorthand: the
@@ -202,7 +202,7 @@ function GradientRow({ label, gradient, }) {
                 style: {
                     backgroundImage: gradientCss(gradient, theme.palette.background.paper),
                 } }), _jsxs("div", { className: classes.gradientLabels, children: [_jsx("span", { children: gradient.minLabel }), _jsx("span", { children: gradient.maxLabel })] })] }));
-}
+});
 // One list of swatches with its own independent collapse state, so each section
 // in a multi-section legend expands/collapses on its own.
 const LegendItemList = observer(function LegendItemList({ items, maxItems, onItemClick, }) {
@@ -223,7 +223,7 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
                 }
                 const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.swatches, style: { minWidth: columns * SWATCH + (columns - 1) * 2 }, children: legendSwatches(item).map(swatch => (_jsx("svg", { width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, `${swatch.shape}-${swatch.color}`))) }), _jsx("span", { className: classes.label, children: item.label })] }));
                 const itemClass = cx(classes.item, item.hidden && classes.hiddenItem);
-                return onItemClick ? (_jsx("button", { type: "button", className: cx(itemClass, classes.itemButton), title: "Show only these rows", onClick: () => {
+                return onItemClick && legendSwatches(item).length > 0 ? (_jsx("button", { type: "button", className: cx(itemClass, classes.itemButton), title: "Show only these rows", onClick: () => {
                         onItemClick(item);
                     }, children: row }, `${item.label}-${i}`)) : (_jsx("div", { className: itemClass, children: row }, `${item.label}-${i}`));
             }), collapsible ? (_jsx("button", { type: "button", className: classes.toggle, onClick: () => {
@@ -239,6 +239,10 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
 // `onItemClick` makes the rows of a section declaring `focusesRows` act —
 // clicking an entry focuses the rows it names. A section coloring features or
 // cells stays inert text beside it.
+//
+// The key covers data at the lane's top right, an overlap Colin accepted on
+// 2026-09-30. A lane shorter than the key scrolls it rather than clipping it,
+// which a still cannot show, so a figure gives that lane more height.
 const FloatingLegend = observer(function FloatingLegend({ sections, title, onDismiss, onDismissSection, onItemClick, maxItems = DEFAULT_MAX_ITEMS, maxWidth = DEFAULT_MAX_WIDTH, top = FLOATING_LEGEND_TOP_PX, right = FLOATING_LEGEND_RIGHT_PX, }) {
     const { classes } = useStyles();
     const nonEmpty = nonEmptyLegendSections(sections);

package/esm/FloatingText.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from 'react';
 /**
- * Four offset shadows in the surface colour: a halo under a line of DOM text
+ * Four offset shadows in the surface color: a halo under a line of DOM text
  * that needs no measured stroke and reads the same over a mark and over the
  * background.
  */
@@ -17,11 +17,11 @@ export declare const TEXT_BASELINE_RATIO = 0.84;
  * The canvas feature labels and the mark display's text marks emit through
  * this, so the typography of a floated label is one declaration; what places
  * each label is its display's own rule. `halo` draws {@link textHalo} under
- * the glyphs in that colour. Everything else a caller passes reaches the div:
+ * the glyphs in that color. Everything else a caller passes reaches the div:
  * a class for the pointer and the cursor, the data attributes a delegated
  * handler reads, a `title`.
  */
-export declare function FloatingText({ x, y, color, fontSize, halo, style, children, ...rest }: {
+export declare const FloatingText: ({ x, y, color, fontSize, halo, style, children, ...rest }: {
     x: number;
     y: number;
     color: string;
@@ -29,13 +29,14 @@ export declare function FloatingText({ x, y, color, fontSize, halo, style, child
     halo?: string;
     style?: CSSProperties;
     children: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'style' | 'color' | 'children'>): import("react").JSX.Element;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'style' | 'color' | 'children'>) => import("react").JSX.Element;
 /**
  * The same line in an SVG export: two `<text>`s at the baseline `y`, a stroke
- * in the surface colour under the glyphs, since SVG paints stroke over fill
+ * in the surface color under the glyphs, since SVG paints stroke over fill
  * and a thick stroke beneath a second copy is how a halo is drawn there. Both
- * carry the size and family explicitly, because a `<text>` with neither takes
- * SVG's 16px default in a saved file.
+ * carry the size, because a `<text>` without one takes SVG's 16px default in a
+ * saved file. An export leaves `fontFamily` out, so the label inherits the
+ * family the export dialog put on the root.
  */
 export declare function SvgHaloText({ x, y, fill, halo, haloWidth, fontSize, fontFamily, anchor, children, }: {
     x: number;
@@ -44,7 +45,7 @@ export declare function SvgHaloText({ x, y, fill, halo, haloWidth, fontSize, fon
     halo: string;
     haloWidth: number | string;
     fontSize: number;
-    fontFamily: string;
+    fontFamily?: string;
     anchor?: 'start' | 'middle' | 'end';
     children: ReactNode;
 }): import("react").JSX.Element;

package/esm/FloatingText.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 /**
- * Four offset shadows in the surface colour: a halo under a line of DOM text
+ * Four offset shadows in the surface color: a halo under a line of DOM text
  * that needs no measured stroke and reads the same over a mark and over the
  * background.
  */
@@ -19,11 +20,11 @@ export const TEXT_BASELINE_RATIO = 0.84;
  * The canvas feature labels and the mark display's text marks emit through
  * this, so the typography of a floated label is one declaration; what places
  * each label is its display's own rule. `halo` draws {@link textHalo} under
- * the glyphs in that colour. Everything else a caller passes reaches the div:
+ * the glyphs in that color. Everything else a caller passes reaches the div:
  * a class for the pointer and the cursor, the data attributes a delegated
  * handler reads, a `title`.
  */
-export function FloatingText({ x, y, color, fontSize, halo, style, children, ...rest }) {
+export const FloatingText = observer(function FloatingText({ x, y, color, fontSize, halo, style, children, ...rest }) {
     return (_jsx("div", { ...rest, style: {
             position: 'absolute',
             lineHeight: 1,
@@ -34,13 +35,14 @@ export function FloatingText({ x, y, color, fontSize, halo, style, children, ...
             ...(halo ? { textShadow: textHalo(halo) } : {}),
             ...style,
         }, children: children }));
-}
+});
 /**
  * The same line in an SVG export: two `<text>`s at the baseline `y`, a stroke
- * in the surface colour under the glyphs, since SVG paints stroke over fill
+ * in the surface color under the glyphs, since SVG paints stroke over fill
  * and a thick stroke beneath a second copy is how a halo is drawn there. Both
- * carry the size and family explicitly, because a `<text>` with neither takes
- * SVG's 16px default in a saved file.
+ * carry the size, because a `<text>` without one takes SVG's 16px default in a
+ * saved file. An export leaves `fontFamily` out, so the label inherits the
+ * family the export dialog put on the root.
  */
 export function SvgHaloText({ x, y, fill, halo, haloWidth, fontSize, fontFamily, anchor = 'start', children, }) {
     const attrs = { x, y, fontSize, fontFamily, textAnchor: anchor };

package/esm/ScoreDomainCaption.d.ts

@@ -1,8 +1,8 @@
 /**
  * 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
+ * track whose rows each carry their own color, so no single ramp describes
+ * them. An axis stand-in rather than a key, which is why it is not a color
  * 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.

package/esm/ScoreDomainCaption.js

@@ -7,12 +7,13 @@ 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
+ * track whose rows each carry their own color, so no single ramp describes
+ * them. An axis stand-in rather than a key, which is why it is not a color
  * 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.
  */
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, caption, }) {
     const palette = usePalette();
     const suffix = scaleType === 'log' ? ' (log)' : scaleType === 'symlog' ? ' (symlog)' : '';

package/esm/ScoreRules.d.ts

@@ -13,9 +13,10 @@ export declare function ScoreRuleLines({ marks, width, offsetY, }: {
     width: number;
     offsetY?: number;
 }): import("react").JSX.Element;
-export default function ScoreRules({ marks, width, height, bandTops, }: {
+declare const ScoreRules: ({ marks, width, height, bandTops, }: {
     marks: ScoreRuleMark[];
     width: number;
     height: number;
     bandTops: number[];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ScoreRules;

package/esm/ScoreRules.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { observer } from 'mobx-react';
 import { DEFAULT_RULE_COLOR } from './yAxisConstants.js';
 const LABEL_FONT_SIZE = 10;
 const LABEL_GAP = 2;
@@ -12,6 +13,7 @@ function labelY(y, offsetY) {
 }
 // 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.
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 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
@@ -34,7 +36,7 @@ export function ScoreRuleLines({ marks, width, offsetY = 0, }) {
 }
 // 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, }) {
+const ScoreRules = observer(function ScoreRules({ marks, width, height, bandTops, }) {
     return (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
@@ -43,4 +45,5 @@ export default function ScoreRules({ marks, width, height, bandTops, }) {
             height,
             width,
         }, children: bandTops.map(top => (_jsx(ScoreRuleLines, { marks: marks, width: width, offsetY: top }, top))) }));
-}
+});
+export default ScoreRules;