@jbrowse/core 5.0.0-beta.13 → 5.0.0-beta.14

package/esm/pluggableElementTypes/models/baseTrackConfig.js

@@ -162,7 +162,7 @@ export function createBaseTrackConfig(pluginManager) {
         },
         /**
          * #slot
-         * where this track's data comes from. Its `type` names the adapter for
+         * The source of this track's data. Its `type` names the adapter for
          * the file format (`BamAdapter`, `Gff3TabixAdapter`, ...) and the rest of
          * the object is that adapter's own slots — see the adapter pages for
          * each. Most adapters also accept a `uri` shorthand in place of writing
@@ -258,5 +258,13 @@ export function createBaseTrackConfig(pluginManager) {
          */
         explicitIdentifier: 'trackId',
         explicitlyTyped: true,
+        closed: true,
+        // v1.3 wrote the text-search adapter and its attributes on the track,
+        // before `textSearching`
+        retired: {
+            rpcDriverName: () => ({}),
+            textSearchAdapter: () => ({}),
+            textSearchIndexingAttributes: () => ({}),
+        },
     });
 }

package/esm/pluggableElementTypes/models/components/SaveTrackData.js

@@ -56,7 +56,7 @@ function useTrackDataExport({ model, regions, regionStr, type, options, }) {
  * The format picker, owning the per-format help text and the dialog that shows
  * it — nothing above needs to know a format can carry one.
  */
-function FormatSelector({ options, type, setType, usedAdapterExport, }) {
+const FormatSelector = observer(function FormatSelector({ options, type, setType, usedAdapterExport, }) {
     const { classes } = useStyles();
     const [helpText, setHelpText] = useState();
     return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: `File type${usedAdapterExport ? ' (adapter export)' : ''}` }), _jsx(RadioGroup, { value: type, onChange: e => {
@@ -66,7 +66,7 @@ function FormatSelector({ options, type, setType, usedAdapterExport, }) {
                             }, title: "Show help for this format", children: _jsx(HelpOutlineIcon, { fontSize: "small" }) })) : null] }, key))) }), _jsx(InfoDialog, { open: helpText !== undefined, onClose: () => {
                     setHelpText(undefined);
                 }, title: "Format Information", children: _jsx(DialogContentText, { children: helpText }) })] }));
-}
+});
 /**
  * What the preview pane says — the export itself only once there is one, and
  * before that whichever of the four other states the dialog is in. In

package/esm/pluggableElementTypes/models/expandTrackConfigShorthand.d.ts

@@ -8,7 +8,7 @@ export interface DisplaySnapshot {
 /**
  * Route each shorthand `displayDefaults: {...}` setting to the display types
  * whose member of that name takes its value: `color: 'red'` reaches every
- * display with a colour, `color: { field: 'type' }` only those whose colour
+ * display with a color, `color: { field: 'type' }` only those whose color
  * maps a field, and a spelling a display retired reaches that display as the
  * members it became. `reached` names the displays each key went to. A key no
  * display knows is an `unknownKeys` entry, and one every display that knows it

package/esm/pluggableElementTypes/models/expandTrackConfigShorthand.js

@@ -35,7 +35,7 @@ function verdictOf(schema, key, value) {
 /**
  * Route each shorthand `displayDefaults: {...}` setting to the display types
  * whose member of that name takes its value: `color: 'red'` reaches every
- * display with a colour, `color: { field: 'type' }` only those whose colour
+ * display with a color, `color: { field: 'type' }` only those whose color
  * maps a field, and a spelling a display retired reaches that display as the
  * members it became. `reached` names the displays each key went to. A key no
  * display knows is an `unknownKeys` entry, and one every display that knows it

package/esm/pluginDefinitions.d.ts

@@ -129,6 +129,13 @@ export declare function pluginDescriptionString(d: PluginDefinition): string;
  * the same plugin just because neither has a url.
  */
 export declare function maybePluginUrl(d: PluginDefinition): string | undefined;
+/**
+ * The absolute url PluginLoader fetches the definition from: a `umdLoc` or
+ * `esmLoc` against its own `baseUri`, any other form against the page. Trust
+ * decisions key on this rather than `maybePluginUrl`, under which one relative
+ * `plugin.js` names a different file in every config that lists it.
+ */
+export declare function resolvedPluginUrl(d: PluginDefinition, pageUri?: string | undefined): string | undefined;
 export declare function pluginUrl(d: PluginDefinition): string;
 /**
  * Whether a definition loads from exactly `url` — the question behind "which

package/esm/pluginDefinitions.js

@@ -114,6 +114,26 @@ export function maybePluginUrl(d) {
         return undefined;
     }
 }
+/**
+ * The absolute url PluginLoader fetches the definition from: a `umdLoc` or
+ * `esmLoc` against its own `baseUri`, any other form against the page. Trust
+ * decisions key on this rather than `maybePluginUrl`, under which one relative
+ * `plugin.js` names a different file in every config that lists it.
+ */
+export function resolvedPluginUrl(d, pageUri = typeof location === 'undefined' ? undefined : location.href) {
+    const url = maybePluginUrl(d);
+    const base = 'umdLoc' in d
+        ? d.umdLoc.baseUri
+        : 'esmLoc' in d
+            ? d.esmLoc.baseUri
+            : pageUri;
+    try {
+        return url === undefined ? undefined : new URL(url, base).href;
+    }
+    catch {
+        return undefined;
+    }
+}
 export function pluginUrl(d) {
     return maybePluginUrl(d) ?? 'unknown url';
 }

package/esm/rpc/RpcRegistry.d.ts

@@ -1,4 +1,3 @@
-import type { FeatureDensity } from '../data_adapters/BaseAdapter/featureDensity.ts';
 import type { CoreGetEncodedLayersArgs, EncodedLayersResult } from '../util/markEncodingTypes.ts';
 import type { StatusCallback } from '../util/progress.ts';
 import type { UnwrapRpcResult } from '../util/rpc.ts';
@@ -64,15 +63,6 @@ export interface RpcRegistry {
         };
         return: number | undefined;
     };
-    CoreGetFeatureDensity: {
-        args: {
-            adapterConfig: Record<string, unknown>;
-            regions: RegionLike[];
-            bpPerPx: number;
-            headers?: Record<string, string>;
-        };
-        return: FeatureDensity[] | undefined;
-    };
     CoreGetInfo: {
         args: {
             adapterConfig: Record<string, unknown>;

package/esm/rpc/byteBudget.d.ts

@@ -42,6 +42,14 @@ export declare function isRegionRefused(result: unknown): result is RegionTooLar
 export declare function isRegionTooLargeError(error: unknown): error is Error;
 /** Undefined, never 0, when no region could be measured. */
 export declare function largestRegionBytes(perRegion: (number | undefined)[]): number | undefined;
+/**
+ * The regions' index-only byte estimates summed, for a reader that holds
+ * every region at once; undefined, never 0, when no region could be measured.
+ */
+export declare function totalRegionBytes(dataAdapter: ByteMeasurableAdapter, regions: AugmentedRegion[], opts?: {
+    signal?: AbortSignal;
+    statusCallback?: StatusCallback;
+}): Promise<number | undefined>;
 /** A non-positive declared limit means "no opinion" (htsget reports 0). */
 export declare function adapterByteLimit(declared: unknown, fallback: number): number;
 export declare function overByteBudget(bytes: number | undefined, byteLimit: number | undefined): bytes is number;

package/esm/rpc/byteBudget.js

@@ -23,6 +23,19 @@ export function largestRegionBytes(perRegion) {
     }
     return largest;
 }
+/**
+ * The regions' index-only byte estimates summed, for a reader that holds
+ * every region at once; undefined, never 0, when no region could be measured.
+ */
+export async function totalRegionBytes(dataAdapter, regions, opts) {
+    let total;
+    for (const bytes of await Promise.all(regions.map(region => dataAdapter.getRegionByteSize([region], opts)))) {
+        if (bytes !== undefined) {
+            total = (total ?? 0) + bytes;
+        }
+    }
+    return total;
+}
 /** A non-positive declared limit means "no opinion" (htsget reports 0). */
 export function adapterByteLimit(declared, fallback) {
     return typeof declared === 'number' && declared > 0 ? declared : fallback;

package/esm/rpc/configSchema.d.ts

@@ -1,6 +1,8 @@
 /**
  * #config RpcOptions
  * #category root
+ * Chooses whether data fetching runs on the main thread or in web workers, and
+ * how many workers to start. Found on the root config as `configuration.rpc`.
  */
 declare const _default: import("../configuration/configurationSchema.ts").ConfigurationSchemaType<{
     readonly defaultDriver: {

package/esm/rpc/configSchema.js

@@ -2,11 +2,13 @@ import { ConfigurationSchema } from '../configuration/index.js';
 /**
  * #config RpcOptions
  * #category root
+ * Chooses whether data fetching runs on the main thread or in web workers, and
+ * how many workers to start. Found on the root config as `configuration.rpc`.
  */
 export default ConfigurationSchema('RpcOptions', {
     /**
      * #slot
-     * which RPC backend to use. Empty means "use the host application's
+     * The RPC backend. Empty means "use the host application's
      * default" (web/desktop default to the web worker driver, embedded/headless
      * to the main thread). Every call in the session runs on the driver this
      * names; there is no per-track or per-call override.

package/esm/rpc/coreRpcMethods.d.ts

@@ -8,6 +8,5 @@ export { default as CoreGetSequence } from './methods/CoreGetSequence.ts';
 export { default as CoreFreeResources } from './methods/CoreFreeResources.ts';
 export { default as CoreLoadTrackCode } from './methods/CoreLoadTrackCode.ts';
 export { default as CoreGetRegionByteEstimate } from './methods/CoreGetRegionByteEstimate.ts';
-export { default as CoreGetFeatureDensity } from './methods/CoreGetFeatureDensity.ts';
 export { default as CoreGetRegions } from './methods/CoreGetRegions.ts';
 export { default as CoreGetExportData } from './methods/CoreGetExportData.ts';

package/esm/rpc/coreRpcMethods.js

@@ -8,6 +8,5 @@ export { default as CoreGetSequence } from './methods/CoreGetSequence.js';
 export { default as CoreFreeResources } from './methods/CoreFreeResources.js';
 export { default as CoreLoadTrackCode } from './methods/CoreLoadTrackCode.js';
 export { default as CoreGetRegionByteEstimate } from './methods/CoreGetRegionByteEstimate.js';
-export { default as CoreGetFeatureDensity } from './methods/CoreGetFeatureDensity.js';
 export { default as CoreGetRegions } from './methods/CoreGetRegions.js';
 export { default as CoreGetExportData } from './methods/CoreGetExportData.js';

package/esm/rpc/methods/CoreGetEncodedLayers.d.ts

@@ -6,9 +6,9 @@ import type { RpcExecuteArgs } from '../RpcRegistry.ts';
  * split them by the facet where the request names one, run each layer's own
  * steps (per section, under a facet), and evaluate the layer's encoding over
  * what is left in the worker, where the `Feature` objects are, filling the
- * lanes its mark reads. The colours come back packed, the scale tables
+ * lanes its mark reads. The colors come back packed, the scale tables
  * resolved, and the main thread reads the same table for its legend that the
- * colours were drawn from.
+ * colors were drawn from.
  */
 export default class CoreGetEncodedLayers extends RpcMethodTypeWithRenameRegion<'CoreGetEncodedLayers'> {
     name: 'CoreGetEncodedLayers';

package/esm/rpc/methods/CoreGetEncodedLayers.js

@@ -10,9 +10,9 @@ import { layerFeatures } from './layerFeatures.js';
  * split them by the facet where the request names one, run each layer's own
  * steps (per section, under a facet), and evaluate the layer's encoding over
  * what is left in the worker, where the `Feature` objects are, filling the
- * lanes its mark reads. The colours come back packed, the scale tables
+ * lanes its mark reads. The colors come back packed, the scale tables
  * resolved, and the main thread reads the same table for its legend that the
- * colours were drawn from.
+ * colors were drawn from.
  */
 export default class CoreGetEncodedLayers extends RpcMethodTypeWithRenameRegion {
     name = 'CoreGetEncodedLayers';
@@ -34,10 +34,10 @@ export default class CoreGetEncodedLayers extends RpcMethodTypeWithRenameRegion
             return tooLarge;
         }
         const { jexl } = pluginManager;
-        const { layers: layered, sections, zoomRange, notices, } = await layerFeatures(dataAdapter, args, jexl);
+        const { layers: layered, sections, zoomRange, notices, facts, } = await layerFeatures(dataAdapter, args, jexl);
         const layers = requested.map((request, i) => {
-            const { table, row } = layered[i];
-            return encodeFeatures(table, { ...request.encoding, row }, request.lanes, {
+            const { table, row, series, gapBp } = layered[i];
+            const encoded = encodeFeatures(table, { ...request.encoding, row, series }, request.lanes, {
                 jexl,
                 report: createProgressReporter({
                     label: 'Processing features',
@@ -46,6 +46,7 @@ export default class CoreGetEncodedLayers extends RpcMethodTypeWithRenameRegion
                     signal,
                 }),
             });
+            return gapBp === undefined ? encoded : { ...encoded, gapBp };
         });
         const result = {
             layers,
@@ -53,6 +54,7 @@ export default class CoreGetEncodedLayers extends RpcMethodTypeWithRenameRegion
             bytes,
             zoomRange,
             ...(notices.length > 0 ? { notices } : {}),
+            ...(Object.keys(facts).length > 0 ? { facts } : {}),
         };
         return rpcResult(result, layers.flatMap(l => encodedChannelTransferables(l)));
     }

package/esm/rpc/methods/layerFeatures.d.ts

@@ -11,23 +11,26 @@ import type { StatusCallback } from '../../util/progress.ts';
 export interface LayerFeatures {
     table: FeatureTable;
     row: FieldRef | ArrayLike<number> | undefined;
+    /** Each row's series, for a layer whose request names a path. */
+    series?: Uint32Array;
+    /** The stretch a path breaks across, for a layer whose request names a path. */
+    gapBp?: number;
 }
 /**
  * The table each layer of a `CoreGetEncodedLayers` request encodes: the
  * region's features through the shared steps, split by the facet where the
  * request names one, then through each layer's own steps, with each faceted
- * layer's stacked rows beside it. An instance's `featureIndex` indexes its
- * layer's table, so the same request answers which row an instance is.
+ * layer's stacked rows beside it, and a path layer's rows in series order.
+ * An instance's `featureIndex` indexes its layer's table, so the same request
+ * answers which row an instance is.
  */
 export declare function layerFeatures(dataAdapter: BaseFeatureDataAdapter, args: Pick<CoreGetEncodedLayersArgs, 'region' | 'layers' | 'transform' | 'facet' | 'bpPerPx' | 'opts'> & {
     signal?: AbortSignal;
     statusCallback?: StatusCallback;
 }, jexl: JexlInstance): Promise<{
-    layers: {
-        table: FeatureTable;
-        row: FieldRef | Uint32Array | undefined;
-    }[];
+    layers: LayerFeatures[];
     sections: import("../../util/markEncodingTypes.ts").FacetSection[] | undefined;
     zoomRange: import("../../data_adapters/BaseAdapter/zoomRange.ts").ZoomRange | undefined;
     notices: string[];
+    facts: Record<string, unknown>;
 }>;

package/esm/rpc/methods/layerFeatures.js

@@ -1,23 +1,33 @@
 import { checkAbortSignal } from '../../util/aborting.js';
 import { layerTables } from '../../util/featureTransforms.js';
+import { pathSeries } from '../../util/pathSeries.js';
 import { updateStatus } from '../../util/progress.js';
 /**
  * The table each layer of a `CoreGetEncodedLayers` request encodes: the
  * region's features through the shared steps, split by the facet where the
  * request names one, then through each layer's own steps, with each faceted
- * layer's stacked rows beside it. An instance's `featureIndex` indexes its
- * layer's table, so the same request answers which row an instance is.
+ * layer's stacked rows beside it, and a path layer's rows in series order.
+ * An instance's `featureIndex` indexes its layer's table, so the same request
+ * answers which row an instance is.
  */
 export async function layerFeatures(dataAdapter, args, jexl) {
     const { region, layers: requested, transform = [], facet, bpPerPx, opts, signal, statusCallback, } = args;
     const notices = [];
-    const fetchOpts = { ...opts, bpPerPx, statusCallback, signal, notices };
+    const facts = {};
+    const fetchOpts = {
+        ...opts,
+        bpPerPx,
+        statusCallback,
+        signal,
+        notices,
+        facts,
+    };
     const [fetched, zoomRange] = await updateStatus('Downloading features', statusCallback, () => Promise.all([
         dataAdapter.getFeatureTable(region, fetchOpts),
         dataAdapter.getZoomRange(fetchOpts),
     ]));
     checkAbortSignal(signal);
-    const { layers, sections } = layerTables(fetched, {
+    const tables = layerTables(fetched, {
         transform,
         facet,
         layers: requested.map(r => ({
@@ -25,5 +35,11 @@ export async function layerFeatures(dataAdapter, args, jexl) {
             row: r.encoding.row,
         })),
     }, jexl);
-    return { layers, sections, zoomRange, notices };
+    const layers = tables.layers.map((layer, i) => {
+        const { path, transform: own = [] } = requested[i];
+        return path
+            ? pathSeries(layer.table, layer.row, path, [...transform, ...(facet?.transform ?? []), ...own], jexl)
+            : layer;
+    });
+    return { layers, sections: tables.sections, zoomRange, notices, facts };
 }

package/esm/ui/ActionLink.d.ts

@@ -1,7 +1,8 @@
 /** A Link that acts as a button — no real navigation, just calls onClick. */
-export default function ActionLink({ onClick, children, className, title, }: {
+declare const ActionLink: ({ onClick, children, className, title, }: {
     onClick: () => void;
     children: React.ReactNode;
     className?: string;
     title?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ActionLink;

package/esm/ui/ActionLink.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from '@mui/material';
+import { observer } from 'mobx-react';
 /** A Link that acts as a button — no real navigation, just calls onClick. */
-export default function ActionLink({ onClick, children, className, title, }) {
+const ActionLink = observer(function ActionLink({ onClick, children, className, title, }) {
     return (_jsx(Link, { href: "#", className: className, title: title, onClick: (e) => {
             e.preventDefault();
             onClick();
         }, children: children }));
-}
+});
+export default ActionLink;

package/esm/ui/AddCustomPluginDialog.d.ts

@@ -8,7 +8,8 @@ import type { PluginDefinition } from '../pluginDefinitions.ts';
  * `onAdd` returns false to reject the definition and keep the dialog open (the
  * plugin store rejects a name already installed).
  */
-export default function AddCustomPluginDialog({ onClose, onAdd, }: {
+declare const AddCustomPluginDialog: ({ onClose, onAdd, }: {
     onClose: () => void;
     onAdd: (definition: PluginDefinition) => boolean;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default AddCustomPluginDialog;

package/esm/ui/AddCustomPluginDialog.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Collapse, DialogContentText, IconButton, TextField, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { cx, makeStyles } from '../util/tss-react/index.js';
 import SubmitDialog from './SubmitDialog.js';
 const useStyles = makeStyles()({
@@ -28,7 +29,7 @@ const useStyles = makeStyles()({
  * `onAdd` returns false to reject the definition and keep the dialog open (the
  * plugin store rejects a name already installed).
  */
-export default function AddCustomPluginDialog({ onClose, onAdd, }) {
+const AddCustomPluginDialog = observer(function AddCustomPluginDialog({ onClose, onAdd, }) {
     const { classes } = useStyles();
     const [umdPluginName, setUMDPluginName] = useState('');
     const [umdPluginUrl, setUMDPluginUrl] = useState('');
@@ -44,13 +45,14 @@ export default function AddCustomPluginDialog({ onClose, onAdd, }) {
             }
         }, children: _jsxs("div", { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build." }), _jsx(TextField, { label: "Plugin name", variant: "outlined", fullWidth: true, margin: "dense", value: umdPluginName, onChange: event => {
                         setUMDPluginName(event.target.value);
-                    } }), _jsx(TextField, { label: "Plugin URL", variant: "outlined", fullWidth: true, margin: "dense", value: umdPluginUrl, onChange: event => {
+                    } }), _jsx(TextField, { label: "Plugin URL", "data-testid": "custom-plugin-url", variant: "outlined", fullWidth: true, margin: "dense", value: umdPluginUrl, onChange: event => {
                         setUMDPluginUrl(event.target.value);
                     } }), _jsxs(DialogContentText, { onClick: () => {
                         setAdvancedOptionsOpen(!advancedOptionsOpen);
                     }, children: [_jsx(IconButton, { className: cx(classes.expand, {
                                 [classes.expandOpen]: advancedOptionsOpen,
-                            }), "aria-expanded": advancedOptionsOpen, "aria-label": "show more", children: _jsx(ExpandMoreIcon, {}) }), "Advanced options"] }), _jsx(Collapse, { in: advancedOptionsOpen, children: _jsxs("div", { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "The above fields assume that the plugin is built in UMD format. For an ESM build, enter its URL here instead; it carries its own name, so the fields above stay empty." }), _jsx(TextField, { label: "ESM build URL", variant: "outlined", fullWidth: true, margin: "dense", value: esmPluginUrl, onChange: event => {
+                            }), "aria-expanded": advancedOptionsOpen, "aria-label": "show more", children: _jsx(ExpandMoreIcon, {}) }), "Advanced options"] }), _jsx(Collapse, { in: advancedOptionsOpen, children: _jsxs("div", { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "The above fields assume that the plugin is built in UMD format. For an ESM build, enter its URL here instead; it carries its own name, so the fields above stay empty." }), _jsx(TextField, { label: "ESM build URL", "data-testid": "custom-plugin-esm-url", variant: "outlined", fullWidth: true, margin: "dense", value: esmPluginUrl, onChange: event => {
                                     setESMPluginUrl(event.target.value);
                                 } })] }) })] }) }));
-}
+});
+export default AddCustomPluginDialog;

package/esm/ui/BaseTooltip.d.ts

@@ -1,5 +1,5 @@
 export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id, children, placement, }: {
+declare const BaseTooltip: ({ clientPoint: clientPointCoords, anchor, id, children, placement, }: {
     placement?: TooltipPlacement;
     /** Follow the pointer. The cursor-anchored mode, and the older of the two. */
     clientPoint?: {
@@ -16,4 +16,5 @@ export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id
     /** For a trigger pointing at this with `aria-describedby`. */
     id?: string;
     children: React.ReactNode;
-}): import("react").ReactPortal | null;
+}) => import("react").ReactPortal | null;
+export default BaseTooltip;

package/esm/ui/BaseTooltip.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { autoUpdate, flip, offset, shift, useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
+import { observer } from 'mobx-react';
 import { createPortal } from 'react-dom';
 import { useStyleTheme } from './PaletteContext.js';
 import { alpha, grey } from './palette.js';
@@ -76,7 +77,7 @@ if (typeof window !== 'undefined') {
 // from a point the pointer happens to be at. 15px off a button reads as a
 // tooltip belonging to nothing in particular.
 const ANCHOR_GAP_PX = 6;
-export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id, children, placement = anchor ? 'top' : 'right', }) {
+const BaseTooltip = observer(function BaseTooltip({ clientPoint: clientPointCoords, anchor, id, children, placement = anchor ? 'top' : 'right', }) {
     // The style theme is read for two things and neither is a Material import:
     // the colors below, and the portal container a shadow-DOM embed configures
     // through `MuiPopper.defaultProps.container` — the same slot every other
@@ -156,4 +157,5 @@ export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id
                 ? 'hidden'
                 : undefined,
         }, ...getFloatingProps(), children: children }), target);
-}
+});
+export default BaseTooltip;

package/esm/ui/CascadingMenu.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, memo, use, useEffect, useMemo, useState } from 'react';
+import { createContext, use, useEffect, useMemo, useState } from 'react';
 import { Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem, Tooltip, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
@@ -8,6 +8,7 @@ import { MenuItemTrailing } from './MenuItemTrailing.js';
 import { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
 import { hasMenuItemAdornment } from './menuItemAdornment.js';
 import { isAimedAtPanel } from './submenuAim.js';
+import { usePlacedMenuFocus } from './usePlacedMenuFocus.js';
 // Compact section headers so tall menus (e.g. a display's flat "Show..."
 // settings list with several subHeader-separated radio groups) stay short.
 // Row heights are left at the MUI default.
@@ -266,9 +267,9 @@ function makeTestId(kind, label) {
 }
 // Leading icon slot shared by submenu rows and clickable rows; renders nothing
 // when the item has no icon (the row insets instead to stay column-aligned).
-function MenuItemLeadingIcon({ Icon, }) {
+const MenuItemLeadingIcon = observer(function MenuItemLeadingIcon({ Icon, }) {
     return Icon ? (_jsx(ListItemIcon, { children: _jsx(Icon, {}) })) : null;
-}
+});
 // Which decoration columns the menu needs, computed menu-wide (true if ANY row
 // needs it) so every row reserves matching slots and the decorations stack into
 // aligned columns down the menu. Per list, so a submenu's own rows answer it for
@@ -322,7 +323,7 @@ function getMenuColumnFlags(menuItems) {
 // Escape is the exception, and has to be: MUI's Modal reads it off the same
 // React tree, so a row that swallowed every key left the menu with no way out
 // for anyone whose focus was inside the slider.
-function CustomMenuRow({ item, onHover, }) {
+const CustomMenuRow = observer(function CustomMenuRow({ item, onHover, }) {
     const { onCloseRoot } = useCascadingMenu();
     return (_jsx("li", { style: { padding: '4px 16px' }, onMouseEnter: onHover, onMouseDown: e => {
             e.stopPropagation();
@@ -331,15 +332,15 @@ function CustomMenuRow({ item, onHover, }) {
                 e.stopPropagation();
             }
         }, children: item.render(onCloseRoot) }));
-}
+});
 // A disabled MenuItem has pointer-events:none, so a Tooltip placed directly on
 // it never fires; the span wrapper (per MUI guidance) restores hover. Disabled
 // rows aren't keyboard-focusable, so the extra wrapper doesn't affect menu
 // navigation. Renders children untouched unless the item is disabled and has
 // disabledHelpText.
-function DisabledTooltip({ item, children, }) {
+const DisabledTooltip = observer(function DisabledTooltip({ item, children, }) {
     return item.disabled && item.disabledHelpText ? (_jsx(Tooltip, { title: item.disabledHelpText, placement: "left", children: _jsx("span", { children: children }) })) : (children);
-}
+});
 // One submenu row: label (with optional leading icon), the same trailing
 // decorations a clickable row draws, and the panel it opens.
 //
@@ -349,7 +350,7 @@ function DisabledTooltip({ item, children, }) {
 // toggle), whose content stops its own click so using it doesn't also open the
 // submenu. Both go through `MenuItemTrailing`, so they land in the columns the
 // clickable rows reserve rather than in a hand-assembled copy of them.
-const CascadingSubmenu = memo(function CascadingSubmenu({ item, itemKey, inset, columns, open, hover, onNavigateBack, }) {
+const CascadingSubmenu = observer(function CascadingSubmenu({ item, itemKey, inset, columns, open, hover, onNavigateBack, }) {
     const { zIndex } = useCascadingMenu();
     const [anchorEl, setAnchorEl] = useState(null);
     // a rebuild can disable the row while its panel is up, and a disabled row has
@@ -392,7 +393,7 @@ const SubMenuList = observer(function SubMenuList({ item, onNavigateBack, }) {
 // One clickable menu row: label (with optional leading icon) plus its trailing
 // value/help/adornment decorations. The menu-wide `columns` flags let every row
 // reserve matching decoration slots so the columns line up down the menu.
-const CascadingMenuItem = memo(function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
+const CascadingMenuItem = observer(function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
     const { closeAfterItemClick, onMenuItemClick, onCloseRoot } = useCascadingMenu();
     return (_jsx(DisabledTooltip, { item: item, children: _jsxs(MenuItem, { "data-testid": makeTestId('menuitem', item.label), disabled: item.disabled, 
             // A checkbox or radio row states its own value. The glyph
@@ -422,7 +423,7 @@ const CascadingMenuItem = memo(function CascadingMenuItem({ item, inset, columns
                 }
             }, children: [_jsx(MenuItemLeadingIcon, { Icon: item.icon }), _jsx(ListItemText, { primary: item.label, secondary: item.subLabel, inset: inset }), _jsx(MenuItemTrailing, { item: item, columns: columns })] }) }));
 });
-function CascadingMenuList({ menuItems, onNavigateBack, }) {
+const CascadingMenuList = observer(function CascadingMenuList({ menuItems, onNavigateBack, }) {
     const { classes, cx } = useStyles();
     const { openSubmenu, hover } = useSubmenuHover();
     const { closeOnHover } = hover;
@@ -447,10 +448,11 @@ function CascadingMenuList({ menuItems, onNavigateBack, }) {
             }
             return (_jsx(CascadingMenuItem, { item: item, inset: hasIcon && !item.icon, columns: columns, onNavigateBack: onNavigateBack, onHover: closeOnHover }, key));
         }) }));
-}
+});
 const CascadingMenu = observer(function CascadingMenu({ onMenuItemClick, closeAfterItemClick = true, menuItems, open, onClose, anchorEl, anchorOrigin, transformOrigin, anchorReference, anchorPosition, style, }) {
     const items = Array.isArray(menuItems) ? menuItems : menuItems();
-    return (_jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, anchorReference: anchorReference, anchorPosition: anchorPosition, style: style, children: _jsx(CascadingMenuContext, { value: {
+    const { onEntering, ...focus } = usePlacedMenuFocus();
+    return (_jsx(Menu, { ...focus, anchorEl: anchorEl, open: open, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, anchorReference: anchorReference, anchorPosition: anchorPosition, style: style, slotProps: { transition: { onEntering } }, children: _jsx(CascadingMenuContext, { value: {
                 closeAfterItemClick,
                 onMenuItemClick,
                 onCloseRoot: onClose,

package/esm/ui/CascadingMenuButton.d.ts

@@ -1,7 +1,7 @@
 import type { MenuItemsGetter } from './CascadingMenu.tsx';
 import type { MenuItemClickHandler } from './MenuTypes.ts';
 import type { PopoverOrigin } from '@mui/material';
-declare function CascadingMenuButton({ children, menuItems, closeAfterItemClick, stopPropagation, disabled, setOpen, ButtonComponent, onClick: onClickExtra, onMenuItemClick, anchorOrigin, transformOrigin, tooltip, ...rest }: {
+declare const CascadingMenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, disabled, setOpen, ButtonComponent, onClick: onClickExtra, onMenuItemClick, anchorOrigin, transformOrigin, tooltip, ...rest }: {
     children?: React.ReactNode;
     menuItems: MenuItemsGetter;
     closeAfterItemClick?: boolean;
@@ -20,5 +20,5 @@ declare function CascadingMenuButton({ children, menuItems, closeAfterItemClick,
     transformOrigin?: PopoverOrigin;
     tooltip?: string;
     [key: string]: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default CascadingMenuButton;

package/esm/ui/CascadingMenuButton.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { observer } from 'mobx-react';
 import CascadingMenu from './CascadingMenu.js';
 // drop the menu below the trigger icon rather than overlapping it (MUI's
 // default top/left anchor)
@@ -10,10 +11,10 @@ const dropdownTransformOrigin = { vertical: 'top', horizontal: 'left' };
 // A disabled button has pointer-events:none, so a Tooltip placed directly on it
 // never fires; wrap it in a span (per MUI guidance) to restore the hover. The
 // wrapper is only added when disabled, so enabled buttons keep their layout.
-function MaybeTooltip({ title, disabled, children, }) {
+const MaybeTooltip = observer(function MaybeTooltip({ title, disabled, children, }) {
     return title ? (_jsx(Tooltip, { title: title, children: disabled ? _jsx("span", { children: children }) : children })) : (children);
-}
-function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, disabled, setOpen, ButtonComponent = IconButton, onClick: onClickExtra, onMenuItemClick = callback => {
+});
+const CascadingMenuButton = observer(function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, disabled, setOpen, ButtonComponent = IconButton, onClick: onClickExtra, onMenuItemClick = callback => {
     callback();
 }, anchorOrigin = dropdownAnchorOrigin, transformOrigin = dropdownTransformOrigin, tooltip, ...rest }) {
     const [anchorEl, setAnchorEl] = useState(null);
@@ -38,5 +39,5 @@ function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true,
                     setAnchorEl(null);
                     setOpen?.(false);
                 }, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick })) : null] }));
-}
+});
 export default CascadingMenuButton;

package/esm/ui/CascadingMenuHelpDialog.d.ts

@@ -1,5 +1,6 @@
-export default function CascadingMenuHelpDialog({ onClose, helpText, label, }: {
+declare const CascadingMenuHelpDialog: ({ onClose, helpText, label, }: {
     onClose: () => void;
     helpText: React.ReactNode;
     label?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default CascadingMenuHelpDialog;

package/esm/ui/CascadingMenuHelpDialog.js

@@ -1,9 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import InfoDialog from './InfoDialog.js';
-export default function CascadingMenuHelpDialog({ onClose, helpText, label, }) {
+const CascadingMenuHelpDialog = observer(function CascadingMenuHelpDialog({ onClose, helpText, label, }) {
     return (_jsx(InfoDialog, { open: true, onClose: onClose, title: "Help", titleNode: label ? _jsxs(_Fragment, { children: ["Help: ", label] }) : undefined, onClick: e => {
             e.stopPropagation();
         }, onMouseDown: e => {
             e.stopPropagation();
         }, children: helpText }));
-}
+});
+export default CascadingMenuHelpDialog;