@jbrowse/display-ui 4.3.0

package/esm/tooltip/useTooltip.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useId, useRef, useState } from 'react';
+// The bubble is `BaseTooltip`, the same component the ten display tooltips draw
+// — this hook supplies the hover, the focus and the dismissal, and hands it an
+// element to hang off instead of a cursor position. There is one tooltip in
+// JBrowse and one @floating-ui in the tree; a second one here would have
+// differed only in which reference it positioned against.
+//
+// The `lazy` is the point rather than an optimization. @floating-ui is ~266KB
+// and this package's chrome — the plain overlay set, the corner control, the
+// legend — is imported eagerly by every display that renders one, so a static
+// import would put a positioning library on the cold shell's critical path of
+// every JBrowse product and every embed for a box nobody has hovered yet.
+// `@jbrowse/core` broke a published ABI over exactly this, moving `BaseTooltip`
+// out of its `ui` barrel onto its own lazy module (see `ReExports/modules.ts`);
+// `eagerBoundary.test.ts` beside this file is what stops someone quietly
+// turning the import below into an `import … from`.
+const BaseTooltip = lazy(() => import('@jbrowse/core/ui/BaseTooltip'));
+// How long the pointer rests before the tooltip appears. The browser's own
+// `title` waited about a second, which is long enough that people stop
+// expecting anything and move on; this is roughly Material UI's delay.
+//
+// Keyboard focus skips it entirely — a tab landing on a control is deliberate
+// in a way a pointer crossing it is not.
+const ENTER_DELAY_MS = 400;
+/**
+ * #api
+ * A hover/focus label for one control, as props to spread — the headless half
+ * of {@link Tooltip}, for a host writing its own chrome rather than restyling
+ * ours. Same relationship `useTrackControlMenu` has to `plainTrackControl`.
+ *
+ * ```tsx
+ * const { triggerProps, tooltip } = useTooltip('Hide legend')
+ * return (
+ *   <>
+ *     <button {...triggerProps} aria-label="Hide legend" onClick={onDismiss}>
+ *       ×
+ *     </button>
+ *     {tooltip}
+ *   </>
+ * )
+ * ```
+ *
+ * `triggerProps` carries no `onClick`, so a control's own handler does not
+ * collide with it. Any other handler on this list has to compose rather than
+ * replace — spread first, then call `triggerProps.onFocus` from yours.
+ */
+export function useTooltip(
+/** What the bubble says. It stays down while this is empty. */
+title, { placement = 'top' } = {}) {
+    const [anchor, setAnchor] = useState(null);
+    const [open, setOpen] = useState(false);
+    const timer = useRef(undefined);
+    const id = useId();
+    const cancel = () => {
+        clearTimeout(timer.current);
+        timer.current = undefined;
+    };
+    const hide = () => {
+        cancel();
+        setOpen(false);
+    };
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        // Escape is the one dismissal a pointer leaving cannot cover: a tooltip
+        // raised by keyboard focus stays up until the focus moves, and a bubble
+        // over the thing being read is in the way. Scrolling and resizing need no
+        // handler — the bubble follows its anchor through `autoUpdate` rather than
+        // being measured once, which is the difference between this and the menu in
+        // `useTrackControlMenu`, where a scroll dismisses.
+        const onKey = (event) => {
+            if (event.key === 'Escape') {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open]);
+    useEffect(() => () => {
+        clearTimeout(timer.current);
+    }, []);
+    const show = open && !!anchor && title !== '' && title !== undefined;
+    return {
+        open: show,
+        triggerProps: {
+            ref: setAnchor,
+            'aria-describedby': show ? id : undefined,
+            onPointerEnter: event => {
+                // A touch "hover" is the press that is also about to be a click, and a
+                // bubble over the thing being tapped helps nobody. Touch users get the
+                // `aria-label` the control already carries.
+                if (event.pointerType === 'touch') {
+                    return;
+                }
+                cancel();
+                timer.current = setTimeout(() => {
+                    setOpen(true);
+                }, ENTER_DELAY_MS);
+            },
+            onPointerLeave: hide,
+            // The press answers "what is this?", so a label still hanging over the
+            // control that just did something reads as a stuck tooltip.
+            onPointerDown: hide,
+            onFocus: () => {
+                cancel();
+                setOpen(true);
+            },
+            onBlur: hide,
+        },
+        tooltip: show ? (_jsx(Suspense, { children: _jsx(BaseTooltip, { id: id, anchor: anchor, placement: placement, children: title }) })) : null,
+    };
+}

package/esm/trackControl/plainTrackControl.d.ts

@@ -0,0 +1,17 @@
+import type { TrackControlProps } from './types.ts';
+/**
+ * #api
+ * A display's ambient bottom-right control — track sizing, the isoform notice,
+ * the show-only badge — drawn with no UI toolkit, the corner-control
+ * counterpart of `plainChromeOverlays`.
+ *
+ * `DisplayUIProvider` installs this by default. The behaviour is not in here:
+ * dismissal, the keyboard, focus, the top layer and the anchoring are
+ * `useTrackControlMenu`, so writing your own control means writing markup
+ * rather than re-deriving why the menu opens upward.
+ *
+ * The package exports it as `plainTrackControl`, lower-cased to match
+ * `plainChromeOverlays` — the two are a pair, and both are things you hand to a
+ * provider rather than render yourself.
+ */
+export default function PlainTrackControl({ icon, tooltip, label, options, onClick, onMenuClose, onDelete, warning, }: TrackControlProps): import("react").JSX.Element;

package/esm/trackControl/plainTrackControl.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import Tooltip from '../tooltip/Tooltip.js';
+import { useTrackControlMenu } from './useTrackControlMenu.js';
+// A dependency-free `TrackControlComponent`, the corner-control counterpart of
+// `plainChromeOverlays`: no theme provider to mount, no emotion injected into
+// the host page, and nothing that reads as a stray Material widget inside
+// someone else's design system. Install it with `TrackControlProvider` (or just
+// mount `DisplayUIProvider`) and a stock feature or alignments display stops
+// rendering Material UI in its corner.
+//
+// Deliberately plain rather than pretty. Colors come from `currentColor` and the
+// CSS system colors (`Canvas`/`CanvasText`), so the host's own cascade drives
+// them and light/dark tracks the host with no theme object.
+//
+// **The behaviour is not in here.** Dismissal, focus, the top layer and the
+// anchoring maths are `useTrackControlMenu`, so writing your own control means
+// writing markup rather than re-deriving why the menu opens upward. This file is
+// what is left once that is factored out, which is the size it should be.
+// Icon paths, drawn here rather than imported, because importing an icon set is
+// the thing this file exists to avoid. 16x16, stroked so one path serves any
+// size and any color.
+const ICON_PATHS = {
+    // vertical double-headed arrow: make me taller/shorter
+    height: 'M8 2.5v11M5 5.5 8 2.5l3 3M5 10.5l3 3 3-3',
+    // two chevrons folding onto a line: several things shown as one. The line is
+    // load-bearing -- without it the two chevrons read as an ✕ at this size.
+    isoform: 'M2.5 8h11M4 4l4 3 4-3M4 12l4-3 4 3',
+    // funnel: showing only some of them
+    filter: 'M2.5 3.5h11l-4.5 5v4l-2 1.5v-5.5z',
+};
+// The one literal color in this file. Every other rule reads the host's cascade,
+// but "something is wrong here" has no CSS system color to borrow, and the
+// warning state exists precisely so the user sees it without hovering. Chosen to
+// stay legible on both a light and a dark track.
+const WARNING_COLOR = '#d97706';
+function Icon({ icon }) {
+    return (_jsx("svg", { viewBox: "0 0 16 16", width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flex: 'none' }, children: _jsx("path", { d: ICON_PATHS[icon] }) }));
+}
+// The ▾ after a label whose press opens a menu. Drawn like the icons, for the
+// same reason; smaller, because it qualifies the label rather than naming it.
+function Caret() {
+    return (_jsx("svg", { viewBox: "0 0 8 8", width: 8, height: 8, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flex: 'none', marginLeft: -1 }, children: _jsx("path", { d: "M1.5 3l2.5 2.5L6.5 3" }) }));
+}
+function triggerStyle(warning) {
+    return {
+        font: 'inherit',
+        fontSize: '0.7rem',
+        lineHeight: 1.4,
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        padding: '1px 5px',
+        cursor: 'pointer',
+        color: warning ? WARNING_COLOR : 'CanvasText',
+        border: '1px solid',
+        borderColor: warning
+            ? WARNING_COLOR
+            : 'color-mix(in srgb, CanvasText 35%, transparent)',
+        borderRadius: 3,
+        // Nearly opaque: these sit over a canvas whose colors are not known here,
+        // and a translucent chip over dense data was measurably hard to read.
+        background: 'color-mix(in srgb, Canvas 94%, transparent)',
+    };
+}
+/**
+ * #api
+ * A display's ambient bottom-right control — track sizing, the isoform notice,
+ * the show-only badge — drawn with no UI toolkit, the corner-control
+ * counterpart of `plainChromeOverlays`.
+ *
+ * `DisplayUIProvider` installs this by default. The behaviour is not in here:
+ * dismissal, the keyboard, focus, the top layer and the anchoring are
+ * `useTrackControlMenu`, so writing your own control means writing markup
+ * rather than re-deriving why the menu opens upward.
+ *
+ * The package exports it as `plainTrackControl`, lower-cased to match
+ * `plainChromeOverlays` — the two are a pair, and both are things you hand to a
+ * provider rather than render yourself.
+ */
+export default function PlainTrackControl({ icon, tooltip, label, options, onClick, onMenuClose, onDelete, warning, }) {
+    const { open, triggerProps, menuProps, getOptionProps } = useTrackControlMenu(onMenuClose);
+    return (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsx(Tooltip, { title: tooltip, children: _jsxs("button", { type: "button", "aria-label": tooltip, "data-testid": `track-control-${icon}`, ...(options ? triggerProps : undefined), style: {
+                        ...triggerStyle(!!warning),
+                        // the (×) butts straight up against this one, so they read as a
+                        // single control rather than two
+                        borderRadius: onDelete ? '3px 0 0 3px' : 3,
+                    }, 
+                    // `options` and `onClick` are mutually exclusive, so this replaces
+                    // the spread handler rather than composing with it. Both stop the
+                    // click reaching the track/view (drag-select, deselect).
+                    onClick: options
+                        ? triggerProps.onClick
+                        : event => {
+                            event.stopPropagation();
+                            onClick?.();
+                        }, children: [_jsx(Icon, { icon: icon }), label, label !== undefined && options ? _jsx(Caret, {}) : null] }) }), onDelete ? (_jsx("button", { type: "button", "aria-label": "Dismiss", "data-testid": "track-control-dismiss", style: {
+                    ...triggerStyle(!!warning),
+                    marginLeft: -1,
+                    padding: '1px 4px',
+                    borderRadius: '0 3px 3px 0',
+                }, onClick: event => {
+                    event.stopPropagation();
+                    onDelete();
+                }, children: "\u00D7" })) : null, open && options
+                ? createPortal(_jsx("div", { ...menuProps, style: {
+                        ...menuProps.style,
+                        zIndex: 2147483647,
+                        padding: '2px 0',
+                        font: 'inherit',
+                        fontSize: '0.75rem',
+                        color: 'CanvasText',
+                        background: 'Canvas',
+                        border: '1px solid',
+                        borderColor: 'color-mix(in srgb, CanvasText 35%, transparent)',
+                        borderRadius: 4,
+                    }, children: options.map(option => (_jsxs("button", { type: "button", ...getOptionProps(option), style: {
+                            display: 'block',
+                            width: '100%',
+                            font: 'inherit',
+                            textAlign: 'left',
+                            padding: '3px 10px 3px 20px',
+                            whiteSpace: 'nowrap',
+                            // the check mark lives in the padding, so selecting an
+                            // option can't reflow the list
+                            textIndent: option.selected ? '-12px' : 0,
+                            cursor: 'pointer',
+                            color: 'inherit',
+                            background: 'transparent',
+                            border: 'none',
+                        }, children: [option.selected ? '✓ ' : '', option.label] }, option.label))) }), document.body)
+                : null] }));
+}

package/esm/trackControl/trackControlContext.d.ts

@@ -0,0 +1,7 @@
+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.
+ */
+export declare function useTrackControlOverride(): TrackControlComponent | undefined;

package/esm/trackControl/trackControlContext.js

@@ -0,0 +1,30 @@
+import { createContext, use } from 'react';
+// The context alone, apart from `MuiTrackControl` — the same split
+// `chromeOverlayContext.ts` makes, for the reason written there: an override
+// channel that lives in the module binding the default drags the default in
+// with it, and no DOM census can see that.
+/**
+ * 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.
+ * 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
+ * states (loading scrim, error bar, too-large gate) go through the overlay
+ * 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.
+ */
+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.
+ */
+export function useTrackControlOverride() {
+    return use(TrackControlContext);
+}

package/esm/trackControl/types.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentType } from 'react';
+/**
+ * Icons are *named* rather than passed in as elements, which is the whole
+ * mechanism: an element would have to come from somewhere, and every call site
+ * would end up importing `@mui/icons-material` whatever the renderer was. A name
+ * lets each implementation draw it its own way.
+ *
+ * A closed set on purpose — a display wanting a new one adds it here and to both
+ * implementations, which is the moment to check the plain set still has an
+ * answer.
+ */
+export type TrackControlIcon = 'height' | 'isoform' | 'filter';
+/** One row of the control's menu. Rendered as a radio group. */
+export interface TrackControlOption {
+    label: string;
+    selected: boolean;
+    onSelect: () => void;
+}
+export interface TrackControlProps {
+    icon: TrackControlIcon;
+    /**
+     * Always required: it is the only place the control explains itself, and
+     * these controls are deliberately small and wordless.
+     */
+    tooltip: string;
+    /**
+     * Present: a text chip, for a state the user should notice without looking
+     * (the isoform notice, the show-only count). Absent: a quiet icon button, for
+     * a control that is always there and should not shout.
+     */
+    label?: string;
+    /**
+     * Pressing opens these as a radio list. Mutually exclusive with `onClick`.
+     * A labelled control with options draws a ▾ after its label — the one thing
+     * telling a chip that opens a menu from one that acts (`onClick`), since the
+     * two are otherwise drawn alike.
+     */
+    options?: TrackControlOption[];
+    /** Pressing does this. Mutually exclusive with `options`. */
+    onClick?: () => void;
+    /**
+     * The `options` menu closed, by any route — a pick, Escape, a press outside.
+     * A notice that wants opening the menu to count as having been read hangs
+     * its acknowledgement here rather than on a (×) of its own. On close and not
+     * on open: a chip that shrinks while its menu is still up takes the menu's
+     * anchor with it.
+     */
+    onMenuClose?: () => void;
+    /** Adds a (×). What it means is the caller's business — dismiss, clear, undo. */
+    onDelete?: () => void;
+    /**
+     * Something is wrong and a tooltip nobody opens is not a disclosure — today
+     * this is features the layout dropped outright. Renders in an alert tone
+     * rather than the quiet default.
+     */
+    warning?: boolean;
+}
+export type TrackControlComponent = ComponentType<TrackControlProps>;

package/esm/trackControl/types.js

@@ -0,0 +1 @@
+export {};

package/esm/trackControl/useTrackControlMenu.d.ts

@@ -0,0 +1,51 @@
+import type { TrackControlOption } from './types.ts';
+import type { CSSProperties } from 'react';
+export interface TrackControlMenu {
+    /** Whether the menu is up. The caller renders `menuProps` only when true. */
+    open: boolean;
+    close: () => void;
+    /**
+     * Spread onto the button that opens the menu. `data-state` is a styling hook
+     * — a host's stylesheet can reach `[data-state='open']` without this having to
+     * take a `className` for every part.
+     */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-haspopup': 'menu';
+        'data-state': 'open' | 'closed';
+        onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    };
+    /** Spread onto the menu container — portal it to `document.body`. */
+    menuProps: {
+        ref: React.Ref<HTMLDivElement>;
+        role: 'menu';
+        tabIndex: -1;
+        style: CSSProperties;
+    };
+    /**
+     * Spread onto each option. Selecting closes and returns focus to the trigger.
+     *
+     * `role="menuitemradio"` is also how the arrow keys find their targets — the
+     * hook queries the container for it rather than collecting refs, so any markup
+     * that spreads these props is navigable without handing anything back.
+     */
+    getOptionProps: (option: TrackControlOption) => {
+        role: 'menuitemradio';
+        'aria-checked': boolean;
+        onClick: () => void;
+    };
+}
+/**
+ * #api
+ * The behaviour behind a bottom-right track control's menu, as prop getters to
+ * spread — dismissal (Escape, an outside press, an ancestor scrolling), the
+ * keyboard (arrows, Home/End), focus, and the anchoring that clears both the
+ * display's `contain: strict` box and the window edge.
+ *
+ * For writing your own control rather than restyling `plainTrackControl`: each
+ * of those rules is a bug when missed and none of them shows up in a
+ * screenshot. Render `menuProps` only while `open`, and portal it to
+ * `document.body` — `createPortal` is the caller's to aim, the maths is here.
+ * `menuProps.style` carries position only.
+ */
+export declare function useTrackControlMenu(onClose?: () => void): TrackControlMenu;

package/esm/trackControl/useTrackControlMenu.js

@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * #api
+ * The behaviour behind a bottom-right track control's menu, as prop getters to
+ * spread — dismissal (Escape, an outside press, an ancestor scrolling), the
+ * keyboard (arrows, Home/End), focus, and the anchoring that clears both the
+ * display's `contain: strict` box and the window edge.
+ *
+ * For writing your own control rather than restyling `plainTrackControl`: each
+ * of those rules is a bug when missed and none of them shows up in a
+ * screenshot. Render `menuProps` only while `open`, and portal it to
+ * `document.body` — `createPortal` is the caller's to aim, the maths is here.
+ * `menuProps.style` carries position only.
+ */
+export function useTrackControlMenu(
+// Runs on every close route — a pick, Escape, an outside press, a scroll —
+// so a caller acknowledging "the menu was opened" has one place to hear it.
+onClose) {
+    const [anchor, setAnchor] = useState(null);
+    const ref = useRef(null);
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    // Mirrors `anchor` so `close` can tell a real close from a repeat — two
+    // routes can fire off one gesture (a scroll and the resize it causes) — and
+    // fire `onClose` once. Not read inside the state updater: React re-runs
+    // updaters to check they are pure, and a side effect there ran twice.
+    const openRef = useRef(false);
+    openRef.current = !!anchor;
+    const close = useCallback(() => {
+        if (openRef.current) {
+            openRef.current = false;
+            onCloseRef.current?.();
+        }
+        setAnchor(null);
+    }, []);
+    useEffect(() => {
+        if (!anchor) {
+            return;
+        }
+        // Found by role rather than by a collected ref: the caller owns the markup,
+        // and `getOptionProps` already stamps the role onto every option.
+        const items = () => [
+            ...(ref.current?.querySelectorAll('[role="menuitemradio"]') ?? []),
+        ];
+        const moveFocus = (to) => {
+            const list = items();
+            if (list.length === 0) {
+                return;
+            }
+            const from = list.indexOf(document.activeElement);
+            const next = to === 'first'
+                ? 0
+                : to === 'last'
+                    ? list.length - 1
+                    : from === -1
+                        ? 0
+                        : // wraps, which is what a menu of a handful of options wants:
+                            // the list is short enough that walking off one end and
+                            // arriving at the other is faster than reversing
+                            (from + to + list.length) % list.length;
+            list[next]?.focus();
+        };
+        // Opening lands on the option already chosen, so the current setting is
+        // what a screen reader reads first and one keypress reaches its neighbour.
+        // Focusing the container instead announces the menu and none of its
+        // contents.
+        const list = items();
+        (list.find(el => el.getAttribute('aria-checked') === 'true') ??
+            list[0] ??
+            ref.current)?.focus();
+        const moves = {
+            ArrowDown: 1,
+            ArrowUp: -1,
+            Home: 'first',
+            End: 'last',
+        };
+        const onKey = (event) => {
+            if (event.key === 'Escape') {
+                close();
+                anchor.focus();
+                return;
+            }
+            const to = moves[event.key];
+            if (to !== undefined) {
+                // Without this the arrows scroll the page, and a page scroll closes
+                // this menu — so every attempt to walk the list would dismiss it.
+                event.preventDefault();
+                moveFocus(to);
+            }
+        };
+        // pointerdown rather than click: the press is what dismisses, and listening
+        // for the click would let the same press both close this and re-open it
+        // through the trigger underneath
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (target instanceof Node &&
+                !ref.current?.contains(target) &&
+                !anchor.contains(target)) {
+                close();
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('pointerdown', onPointerDown, true);
+        // The position below is measured off the trigger once, at open time, so
+        // anything that moves the trigger afterwards leaves the menu floating
+        // somewhere of its own. Close rather than re-measure: the trigger is on a
+        // track's bottom edge and a page scroll usually takes it off screen
+        // entirely, so a re-measured menu would follow it out of view instead of
+        // going away. Capture phase, so a scroll in any ancestor counts and not just
+        // one on the document.
+        window.addEventListener('scroll', close, true);
+        window.addEventListener('resize', close);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            window.removeEventListener('scroll', close, true);
+            window.removeEventListener('resize', close);
+        };
+    }, [anchor, close]);
+    const rect = anchor?.getBoundingClientRect();
+    return {
+        open: !!anchor,
+        close,
+        triggerProps: {
+            'aria-haspopup': 'menu',
+            'aria-expanded': !!anchor,
+            'data-state': anchor ? 'open' : 'closed',
+            onClick: event => {
+                // don't let the click bubble to the track/view (drag-select, deselect)
+                event.stopPropagation();
+                if (anchor) {
+                    close();
+                }
+                else {
+                    setAnchor(event.currentTarget);
+                }
+            },
+        },
+        menuProps: {
+            ref,
+            role: 'menu',
+            tabIndex: -1,
+            style: rect
+                ? {
+                    position: 'fixed',
+                    right: Math.max(4, window.innerWidth - rect.right),
+                    bottom: window.innerHeight - rect.top + 4,
+                    minWidth: rect.width,
+                    maxWidth: 'calc(100vw - 8px)',
+                }
+                : {},
+        },
+        getOptionProps: option => ({
+            role: 'menuitemradio',
+            'aria-checked': option.selected,
+            onClick: () => {
+                option.onSelect();
+                close();
+                anchor?.focus();
+            },
+        }),
+    };
+}

package/esm/trackOverlay/TrackOverlayContext.d.ts

@@ -0,0 +1 @@
+export declare const TrackOverlayContext: import("react").Context<HTMLElement | null>;

package/esm/trackOverlay/TrackOverlayContext.js

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+// A per-track DOM node the TrackContainer mounts *above* its inter-region masks
+// (PaddingBlocks: elided/boundary/region-separator blocks). A display's own
+// React tree — sealed inside a `contain:strict` sandbox that those masks paint
+// over — can `createPortal` floating chrome into this node to escape above the
+// masks, without the LGV knowing anything about that chrome. The multi-wiggle
+// color legend uses it so the separators don't bury it at whole-genome scale;
+// so do the tree sidebar's dendrogram panel and its per-sample row labels, which
+// otherwise get striped by a separator bar at every region boundary.
+//
+// The node is the display's own box — same origin, same height — so chrome
+// portaled here keeps the coordinates it would have had inline. A display that
+// draws its chrome somewhere other than its own top-left (maf stacks bands above
+// its rows) passes that offset down itself; nothing here can measure it.
+//
+// null when a display renders outside a TrackContainer (e.g. some tests); a
+// consumer must render nothing in that case.
+export const TrackOverlayContext = createContext(null);

package/esm/trackOverlay/TrackOverlayPortal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * #api
+ * Lift floating track chrome out of the display's `contain: strict` sandbox and
+ * into the host's overlay node, so the LGV's inter-region masks cannot bury it
+ * at multi-region scale. `TrackOverlaySlot` is the other end.
+ *
+ * The overlay node takes no pointer events, so anything of yours the user
+ * hovers or clicks sets `pointer-events: auto` on its own positioned box.
+ *
+ * With no slot above it this renders the children in place (`fallbackInline`,
+ * the default), which preserves chrome that is still meaningful unescaped. Pass
+ * `fallbackInline={false}` for chrome that only makes sense above the masks and
+ * draws itself some other way elsewhere.
+ */
+export declare const TrackOverlayPortal: ({ children, fallbackInline, }: {
+    children: React.ReactNode;
+    fallbackInline?: boolean;
+}) => import("react").ReactNode;