@jbrowse/app-core 4.3.0 → 5.0.0-beta.10

package/esm/ui/App/AppFab.js

@@ -1,26 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FAB_Z_INDEX } from '@jbrowse/core/ui/zIndexes';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { Fab, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+// `absolute`, against the app root, rather than the `fixed` this used to
+// carry. Fixed measures against the window, and the app root is only the
+// window in a full-window app: under `--jbrowse-app-height` the app is a box
+// somewhere on a host's page (see react-app's fit-to-container example), and
+// this button was pinned to the page's corner instead of the app's. It is the
+// only way back from a minimized drawer, so it cannot be somewhere else on the
+// page.
 const useStyles = makeStyles()(theme => ({
-    left: {
-        zIndex: 10000,
-        position: 'fixed',
+    fab: {
+        zIndex: FAB_Z_INDEX,
+        position: 'absolute',
         bottom: theme.spacing(2),
+    },
+    left: {
         left: theme.spacing(2),
     },
     right: {
-        zIndex: 10000,
-        position: 'fixed',
-        bottom: theme.spacing(2),
         right: theme.spacing(2),
     },
 }));
 const AppFab = observer(function AppFab({ session, }) {
     const { minimized, activeWidgets, drawerPosition } = session;
-    const { classes } = useStyles();
-    return activeWidgets.size > 0 && minimized ? (_jsx(Tooltip, { title: "Open drawer widget", children: _jsx(Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => {
+    const { classes, cx } = useStyles();
+    return activeWidgets.size > 0 && minimized ? (_jsx(Tooltip, { title: "Open drawer widget", children: _jsx(Fab, { className: cx(classes.fab, drawerPosition === 'right' ? classes.right : classes.left), color: "primary", "data-testid": "drawer-maximize", onClick: () => {
                 session.showWidgetDrawer();
             }, children: _jsx(LaunchIcon, {}) }) })) : null;
 });

package/esm/ui/App/AppToolbar.d.ts

@@ -1,18 +1,6 @@
-import type { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-interface Menu {
-    label: string;
-    menuItems: JBMenuItem[] | (() => JBMenuItem[]);
-}
-type AppSession = SessionWithDrawerWidgets & {
-    menus: () => Menu[];
-    snackbarMessages: SnackbarMessage[];
-    renameCurrentSession: (arg: string) => void;
-    popSnackbarMessage: () => unknown;
-};
+import type { AppSession } from './types.ts';
 declare const AppToolbar: ({ session, HeaderButtons, }: {
     HeaderButtons?: React.ReactElement;
     session: AppSession;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default AppToolbar;

package/esm/ui/App/AppToolbar.js

@@ -3,14 +3,24 @@ import AppLogo from '@jbrowse/core/ui/AppLogo';
 import DropDownMenu from '@jbrowse/core/ui/DropDownMenu';
 import EditableTypography from '@jbrowse/core/ui/EditableTypography';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Toolbar, Tooltip } from '@mui/material';
+import { Toolbar, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
+import ThemeModeButton from './ThemeModeButton.js';
 const useStyles = makeStyles()(theme => ({
     grow: {
         flexGrow: 1,
     },
+    // a long session name ellipsizes rather than pushing Share off a phone
+    sessionName: {
+        minWidth: 0,
+    },
     inputBase: {
         color: theme.palette.primary.contrastText,
+        maxWidth: '100%',
+    },
+    input: {
+        maxWidth: '100%',
+        textOverflow: 'ellipsis',
     },
     inputRoot: {
         '&:hover': {
@@ -21,39 +31,43 @@ const useStyles = makeStyles()(theme => ({
         borderColor: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.light,
     },
+    logo: {
+        // stretch to the toolbar height so the logo's height follows the bar
+        // rather than a hardcoded pixel value
+        alignSelf: 'stretch',
+        display: 'flex',
+        alignItems: 'center',
+        // autofit any logo (custom <img> or the default svg): full toolbar height
+        // with auto width preserves aspect ratio, maxWidth caps horizontal room
+        '& img, & svg': {
+            height: '100%',
+            width: 'auto',
+            maxWidth: 150,
+            objectFit: 'contain',
+        },
+    },
 }));
-function wrapMenuItems(items, session) {
-    return items.map(item => ({
-        ...item,
-        ...('onClick' in item
-            ? {
-                onClick: () => {
-                    item.onClick(session);
-                },
-            }
-            : {}),
-        ...('subMenu' in item
-            ? { subMenu: wrapMenuItems(item.subMenu, session) }
-            : {}),
-    }));
-}
 const AppToolbar = observer(function AppToolbar({ session, HeaderButtons = _jsx("div", {}), }) {
     const { classes } = useStyles();
     const { name, menus } = session;
-    return (_jsxs(Toolbar, { children: [menus().map(menu => (_jsx(DropDownMenu, { menuTitle: menu.label, menuItems: () => {
-                    const items = typeof menu.menuItems === 'function'
-                        ? menu.menuItems()
-                        : menu.menuItems;
-                    return wrapMenuItems(items, session);
-                } }, menu.label))), _jsx("div", { className: classes.grow }), _jsx(Tooltip, { title: "Rename session", arrow: true, children: _jsx(EditableTypography, { value: name, variant: "body1", classes: {
-                        inputBase: classes.inputBase,
-                        inputRoot: classes.inputRoot,
-                        inputFocused: classes.inputFocused,
-                    }, setValue: newName => {
-                        session.renameCurrentSession(newName);
-                    } }) }), HeaderButtons, _jsx("div", { className: classes.grow }), _jsx("div", { style: {
-                    width: 150,
-                    maxHeight: 48,
-                }, children: _jsx(AppLogo, { session: session }) })] }));
+    // a phone needs the logo's 150px for the menus and Share
+    const narrow = useMediaQuery(useTheme().breakpoints.down('sm'), {
+        noSsr: true,
+    });
+    return (_jsxs(Toolbar, { children: [menus().map(menu => (_jsx(DropDownMenu, { menuTitle: menu.label, menuItems: menu.menuItems, 
+                // a root model's menu items take the session as their argument, and
+                // the renderer decides how to invoke onClick — so this is the whole
+                // binding. It used to be a recursive rewrite of every row of every
+                // menu, rebuilt on each open, to arrive at the same call
+                onMenuItemClick: callback => {
+                    callback(session);
+                } }, menu.label))), _jsx("div", { className: classes.grow }), _jsx(Tooltip, { title: "Rename session", arrow: true, children: _jsx("div", { className: classes.sessionName, children: _jsx(EditableTypography, { value: name, variant: "body1", classes: {
+                            input: classes.input,
+                            inputBase: classes.inputBase,
+                            inputRoot: classes.inputRoot,
+                            inputFocused: classes.inputFocused,
+                        }, setValue: newName => {
+                            session.renameCurrentSession(newName);
+                        } }) }) }), HeaderButtons, _jsx(ThemeModeButton, { session: session }), _jsx("div", { className: classes.grow }), narrow ? null : (_jsx("div", { className: classes.logo, children: _jsx(AppLogo, { session: session }) }))] }));
 });
 export default AppToolbar;

package/esm/ui/App/ClassicViewsContainer.d.ts

@@ -1,12 +1,6 @@
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { AbstractViewContainer, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
-type SessionType = SessionWithFocusedViewAndDrawerWidgets & AbstractViewContainer & {
-    renameCurrentSession: (arg: string) => void;
-    snackbarMessages: SnackbarMessage[];
-    popSnackbarMessage: () => unknown;
-};
-interface Props {
-    session: SessionType;
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+export interface ClassicViewsContainerProps {
+    session: SessionWithFocusedViewAndDrawerWidgets;
 }
-declare const ClassicViewsContainer: ({ session, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ClassicViewsContainer: ({ session, }: ClassicViewsContainerProps) => import("react").JSX.Element;
 export default ClassicViewsContainer;

package/esm/ui/App/ClassicViewsContainer.js

@@ -1,21 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { persistentScrollbarStyle } from '@jbrowse/core/ui/persistentScrollbarStyle';
+import { useScrollPortHeightVar } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import ViewContainer from "./ViewContainer.js";
-const useStyles = makeStyles()({
+import ViewStack from './ViewStack.js';
+const useStyles = makeStyles()(theme => ({
     container: {
         height: '100%',
         width: '100%',
         gridRow: 'components',
         overflowY: 'auto',
+        ...persistentScrollbarStyle(theme),
     },
-    spacer: {
-        height: 300,
-    },
-});
+}));
 const ClassicViewsContainer = observer(function ClassicViewsContainer({ session, }) {
     const { classes } = useStyles();
     const { views } = session;
-    return (_jsxs("div", { className: classes.container, children: [views.map(view => (_jsx(ViewContainer, { view: view, session: session }, view.id))), _jsx("div", { className: classes.spacer })] }));
+    const ref = useScrollPortHeightVar();
+    return (_jsx("div", { ref: ref, className: classes.container, children: _jsx(ViewStack, { views: views, session: session }) }));
 });
 export default ClassicViewsContainer;

package/esm/ui/App/DialogQueue.d.ts

@@ -1,5 +1,21 @@
 import type { AbstractSessionModel } from '@jbrowse/core/util';
+/**
+ * The session's dialog, and the boundary that keeps a dialog that throws from
+ * being an application-wide failure.
+ *
+ * `core/ui/Dialog` already wraps its own CHILDREN, which covers a dialog body
+ * that throws. It cannot cover the dialog component's own render, and that is
+ * where the reachable case is: a launch dialog resolves its source with
+ * `getSession` / `getContainingView` off a track, and "Replace current view"
+ * destroys the view that track lives in. This queue renders under `App`, above
+ * every per-view boundary, so without this the next one up is the product's —
+ * jbrowse-web's fatal-error dialog, which takes every view the user had open.
+ * ADR-069, and `cancer_sv/multihop_split_view` is the figure it took.
+ *
+ * Reset on the queue entry, so the queue advancing clears a banner belonging to
+ * the dialog before it, including one of the same component.
+ */
 declare const DialogQueue: ({ session, }: {
     session: AbstractSessionModel;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;
 export default DialogQueue;

package/esm/ui/App/DialogQueue.js

@@ -1,8 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
+import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
+import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
+// `removeActiveDialog` is BaseSession's, and every product session composes it,
+// but `AbstractSessionModel` does not declare it — so it is asked for rather
+// than assumed. A session without it leaves the fallback's close button doing
+// nothing, which is still better than the page it replaces.
+function dismissActiveDialog(session) {
+    ;
+    session.removeActiveDialog?.();
+}
+/**
+ * The session's dialog, and the boundary that keeps a dialog that throws from
+ * being an application-wide failure.
+ *
+ * `core/ui/Dialog` already wraps its own CHILDREN, which covers a dialog body
+ * that throws. It cannot cover the dialog component's own render, and that is
+ * where the reachable case is: a launch dialog resolves its source with
+ * `getSession` / `getContainingView` off a track, and "Replace current view"
+ * destroys the view that track lives in. This queue renders under `App`, above
+ * every per-view boundary, so without this the next one up is the product's —
+ * jbrowse-web's fatal-error dialog, which takes every view the user had open.
+ * ADR-069, and `cancer_sv/multihop_split_view` is the figure it took.
+ *
+ * Reset on the queue entry, so the queue advancing clears a banner belonging to
+ * the dialog before it, including one of the same component.
+ */
 const DialogQueue = observer(function DialogQueue({ session, }) {
     const { DialogComponent, DialogProps } = session;
-    return DialogComponent ? (_jsx(Suspense, { fallback: null, children: _jsx(DialogComponent, { ...DialogProps }) })) : null;
+    return DialogComponent ? (_jsx(ErrorBoundary, { resetKeys: [DialogComponent, DialogProps], FallbackComponent: ({ error }) => (_jsx(Dialog, { open: true, title: "Error", onClose: () => {
+                dismissActiveDialog(session);
+            }, children: _jsx(DialogContent, { children: _jsx(ErrorMessage, { error: error }) }) })), children: _jsx(Suspense, { fallback: null, children: _jsx(DialogComponent, { ...DialogProps }) }) })) : null;
 });
 export default DialogQueue;

package/esm/ui/App/Drawer.d.ts

@@ -2,5 +2,5 @@ import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/
 declare const Drawer: ({ children, session, }: {
     children: React.ReactNode;
     session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Drawer;

package/esm/ui/App/Drawer.js

@@ -1,45 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import ResizeHandle from '@jbrowse/core/ui/ResizeHandle';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Paper } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useFocusOnInteraction } from '@jbrowse/core/util/hooks';
+import { Drawer as DrawerShell } from '@jbrowse/product-core';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    paper: {
-        overflowY: 'auto',
-        height: '100%',
-        position: 'relative',
-        zIndex: theme.zIndex.drawer,
-        outline: 'none',
-        background: theme.palette.background.default,
-    },
-    resizeHandle: {
-        width: 4,
-        position: 'fixed',
-        top: 0,
-        zIndex: theme.zIndex.drawer + 1,
-    },
-}));
 const Drawer = observer(function Drawer({ children, session, }) {
-    const { drawerPosition, drawerWidth } = session;
-    const { classes } = useStyles();
     const ref = useRef(null);
-    useEffect(() => {
-        function handleSelectView(e) {
-            if (e.target instanceof Element && ref.current?.contains(e.target)) {
-                const visibleWidgetId = session.visibleWidget?.view?.id;
-                if (visibleWidgetId) {
-                    session.setFocusedViewId(visibleWidgetId);
-                }
-            }
+    useFocusOnInteraction(ref, () => {
+        const visibleWidgetId = session.visibleWidget?.view?.id;
+        if (visibleWidgetId) {
+            session.setFocusedViewId(visibleWidgetId);
         }
-        document.addEventListener('mousedown', handleSelectView);
-        document.addEventListener('keydown', handleSelectView);
-        return () => {
-            document.removeEventListener('mousedown', handleSelectView);
-            document.removeEventListener('keydown', handleSelectView);
-        };
-    }, [session]);
-    return (_jsxs(Paper, { ref: ref, className: classes.paper, elevation: 16, square: true, children: [drawerPosition === 'right' ? (_jsx(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null, children, drawerPosition === 'left' ? (_jsx(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null] }));
+    });
+    return (_jsx(DrawerShell, { session: session, ref: ref, children: children }));
 });
 export default Drawer;

package/esm/ui/App/DrawerHeader.d.ts

@@ -1,7 +1,6 @@
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const DrawerHeader: ({ session, setToolbarHeight, onPopoutDrawer, }: {
+declare const DrawerHeader: ({ session, setToolbarHeight, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
     setToolbarHeight: (arg: number) => void;
-    onPopoutDrawer: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerHeader;

package/esm/ui/App/DrawerHeader.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
+import { Suspense, lazy, useCallback } from 'react';
 import { getEnv } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { DrawerControls, DrawerWidgetSelector } from '@jbrowse/product-core';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { AppBar, IconButton, Toolbar, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import DrawerControls from "./DrawerControls.js";
-import DrawerWidgetSelector from "./DrawerWidgetSelector.js";
-const DrawerHeaderHelpButton = lazy(() => import("./DrawerHeaderHelpButton.js"));
+const DrawerHeaderHelpButton = lazy(() => import('./DrawerHeaderHelpButton.js'));
 const useStyles = makeStyles()(theme => ({
     spacer: {
         flexGrow: 1,
@@ -19,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight, onPopoutDrawer, }) {
+const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight, }) {
     const { classes } = useStyles();
     const focusedViewId = session.focusedViewId;
     const { visibleWidget } = session;
@@ -28,13 +27,27 @@ const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight,
     const widgetType = visibleWidget
         ? pluginManager.getWidgetType(visibleWidget.type)
         : undefined;
-    const { helpText } = widgetType || {};
-    return (_jsx(AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
+    const { helpText } = widgetType ?? {};
+    // Measured, and re-measured: the toolbar's height is the room a virtualized
+    // widget subtracts from the box it is given, and it changes without this
+    // component re-rendering -- MUI's Toolbar is 56px under the `sm` breakpoint
+    // and 64 above it, and grows again with the root font size. Read once at
+    // mount, a widget's list was that much too tall for the rest of the session.
+    const appBarRef = useCallback((node) => {
+        const publish = () => {
+            setToolbarHeight(node.getBoundingClientRect().height);
+        };
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [setToolbarHeight]);
+    return (_jsx(AppBar, { position: "sticky", className: viewWidgetId !== undefined && focusedViewId === viewWidgetId
             ? classes.headerFocused
-            : classes.headerUnfocused, ref: ref => {
-            setToolbarHeight(ref?.getBoundingClientRect().height || 0);
-        }, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx(DrawerWidgetSelector, { session: session }), _jsx(Tooltip, { title: "Open drawer in dialog", children: _jsx(IconButton, { color: "inherit", onClick: () => {
-                            onPopoutDrawer();
+            : classes.headerUnfocused, ref: appBarRef, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx(DrawerWidgetSelector, { session: session }), _jsx(Tooltip, { title: "Open drawer in dialog", children: _jsx(IconButton, { color: "inherit", "data-testid": "drawer-popout", onClick: () => {
+                            session.popoutWidget();
                         }, children: _jsx(LaunchIcon, {}) }) }), helpText ? (_jsx(Suspense, { fallback: null, children: _jsx(DrawerHeaderHelpButton, { helpText: helpText, session: session }) })) : null, _jsx("div", { className: classes.spacer }), _jsx(DrawerControls, { session: session })] }) }));
 });
 export default DrawerHeader;

package/esm/ui/App/DrawerHeaderHelpButton.d.ts

@@ -2,5 +2,5 @@ import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/
 declare const DrawerHeaderHelpButton: ({ session, helpText, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
     helpText: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerHeaderHelpButton;

package/esm/ui/App/DrawerHeaderHelpButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
-import HelpOutline from '@mui/icons-material/HelpOutline';
+import HelpOutlined from '@mui/icons-material/HelpOutlined';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-const DrawerHeaderHelpDialog = lazy(() => import("./DrawerHeaderHelpDialog.js"));
+const DrawerHeaderHelpDialog = lazy(() => import('./DrawerHeaderHelpDialog.js'));
 const DrawerHeaderHelpButton = observer(function DrawerHeaderHelpButton({ session, helpText, }) {
     return (_jsx(Tooltip, { title: "Help", children: _jsx(IconButton, { color: "inherit", onClick: () => {
                 session.queueDialog(handleClose => [
@@ -13,6 +13,6 @@ const DrawerHeaderHelpButton = observer(function DrawerHeaderHelpButton({ sessio
                         helpText,
                     },
                 ]);
-            }, children: _jsx(HelpOutline, {}) }) }));
+            }, children: _jsx(HelpOutlined, {}) }) }));
 });
 export default DrawerHeaderHelpButton;

package/esm/ui/App/DrawerHeaderHelpDialog.d.ts

@@ -1,4 +1,4 @@
 export default function DrawerHeaderHelpDialog({ onClose, helpText, }: {
-    onClose: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onClose: () => void;
     helpText: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/App/DrawerHeaderHelpDialog.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Dialog from '@jbrowse/core/ui/Dialog';
+import InfoDialog from '@jbrowse/core/ui/InfoDialog';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { DialogContent } from '@mui/material';
 const useStyles = makeStyles()({
     max: {
         minWidth: '40em',
@@ -9,7 +8,7 @@ const useStyles = makeStyles()({
 });
 export default function DrawerHeaderHelpDialog({ onClose, helpText, }) {
     const { classes } = useStyles();
-    return (_jsx(Dialog, { open: true, onClose: onClose, title: "Help", maxWidth: "xl", onClick: e => {
+    return (_jsx(InfoDialog, { open: true, onClose: onClose, title: "Help", maxWidth: "xl", onClick: e => {
             e.stopPropagation();
-        }, children: _jsx(DialogContent, { className: classes.max, children: helpText }) }));
+        }, children: _jsx("div", { className: classes.max, children: helpText }) }));
 }

package/esm/ui/App/DrawerWidget.d.ts

@@ -1,5 +1,5 @@
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
 declare const DrawerWidget: ({ session, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerWidget;

package/esm/ui/App/DrawerWidget.js

@@ -1,27 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useState } from 'react';
-import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
-import { getEnv } from '@jbrowse/core/util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { WidgetBody } from '@jbrowse/product-core';
 import { observer } from 'mobx-react';
-import Drawer from "./Drawer.js";
-import DrawerHeader from "./DrawerHeader.js";
-const ModalWidget = lazy(() => import("./ModalWidget.js"));
+import Drawer from './Drawer.js';
+import DrawerHeader from './DrawerHeader.js';
 const DrawerWidget = observer(function DrawerWidget({ session, }) {
     const { visibleWidget } = session;
-    const { pluginManager } = getEnv(session);
-    const DrawerComponent = visibleWidget
-        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', pluginManager.getWidgetType(visibleWidget.type).ReactComponent, {
-            session,
-            model: visibleWidget,
-        })
-        : null;
+    // we track the toolbar height because components that use virtualized
+    // height want to be able to fill the contained, minus the toolbar height
+    // (the position static/sticky is included in AutoSizer estimates)
     const [toolbarHeight, setToolbarHeight] = useState(0);
-    const [popoutDrawer, setPopoutDrawer] = useState(false);
-    return (_jsxs(Drawer, { session: session, children: [_jsx(DrawerHeader, { onPopoutDrawer: () => {
-                    setPopoutDrawer(true);
-                }, session: session, setToolbarHeight: setToolbarHeight }), _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(ErrorBoundary, { FallbackComponent: ({ error }) => _jsx(ErrorMessage, { error: error }), children: DrawerComponent ? (popoutDrawer ? (_jsxs(_Fragment, { children: [_jsx("div", { children: "Opened in dialog..." }), _jsx(ModalWidget, { session: session, onClose: () => {
-                                    setPopoutDrawer(false);
-                                } })] })) : (_jsxs(_Fragment, { children: [_jsx(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }), _jsx("div", { style: { height: 300 } })] }))) : null }) })] }));
+    return (_jsxs(Drawer, { session: session, children: [_jsx(DrawerHeader, { session: session, setToolbarHeight: setToolbarHeight }), visibleWidget ? (_jsx(WidgetBody, { session: session, widget: visibleWidget, toolbarHeight: toolbarHeight })) : null] }));
 });
 export default DrawerWidget;

package/esm/ui/App/JBrowseTabMenu.d.ts

@@ -1,5 +1,4 @@
-export default function JBrowseTabMenu({ isHovered, onRename, onClose, }: {
-    isHovered: boolean;
+export default function JBrowseTabMenu({ onRename, onClose, }: {
     onRename: () => void;
     onClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/App/JBrowseTabMenu.js

@@ -1,16 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import CloseIcon from '@mui/icons-material/Close';
 import EditIcon from '@mui/icons-material/Edit';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 const useStyles = makeStyles()({
+    // hidden until the tab is hovered or focused, by a rule in `TabStrip` keyed
+    // on the `jbrowse-tab-menu` class — hence the plain class name beside the
+    // generated one. `visibility` rather than `display`, so the tab does not
+    // change width under the pointer as it arrives.
     tabIcons: {
         display: 'flex',
         alignItems: 'center',
         visibility: 'hidden',
     },
-    tabIconsVisible: {
+    // the pointer is over the menu, not the tab, for as long as the menu is open,
+    // so the hover rule stops applying the moment it opens — leaving the popover
+    // anchored to an invisible button
+    open: {
         visibility: 'visible',
     },
     tabIcon: {
@@ -22,9 +30,20 @@ const useStyles = makeStyles()({
         fontSize: 14,
     },
 });
-export default function JBrowseTabMenu({ isHovered, onRename, onClose, }) {
-    const { classes } = useStyles();
-    return (_jsx("div", { className: `${classes.tabIcons} ${isHovered ? classes.tabIconsVisible : ''}`, children: _jsx(CascadingMenuButton, { menuItems: [
+export default function JBrowseTabMenu({ onRename, onClose, }) {
+    const { classes, cx } = useStyles();
+    const [open, setOpen] = useState(false);
+    return (_jsx("div", { className: cx('jbrowse-tab-menu', classes.tabIcons, open && classes.open), 
+        // The tab strip starts a tab drag on pointerdown and takes POINTER
+        // CAPTURE for it, and a captured pointer retargets the compatibility
+        // mouse events with it — so `click` is delivered to the tab rather than
+        // to this button, and the menu silently never opens. Stopping the
+        // pointerdown here means a press that starts on the menu is not a drag
+        // and never captures, which is the same reason the rename input in
+        // `WorkspaceTab` stops it.
+        onPointerDown: event => {
+            event.stopPropagation();
+        }, children: _jsx(CascadingMenuButton, { menuItems: [
                 {
                     label: 'Rename tab',
                     icon: EditIcon,
@@ -35,5 +54,5 @@ export default function JBrowseTabMenu({ isHovered, onRename, onClose, }) {
                     icon: CloseIcon,
                     onClick: onClose,
                 },
-            ], size: "small", className: classes.tabIcon, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
+            ], size: "small", className: classes.tabIcon, setOpen: setOpen, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
 }

package/esm/ui/App/ThemeModeButton.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeSwitchSession } from './types.ts';
+/**
+ * A light/dark switch for a session that follows the OS, showing the mode
+ * drawn. A click holds the other mode, a second click follows the OS again. A
+ * session on an explicit light or dark gets nothing, which is every session
+ * that has not asked for this in Preferences, so a light reader is offered no
+ * route into dark.
+ */
+declare const ThemeModeButton: ({ session, }: {
+    session: ThemeSwitchSession;
+}) => import("react").JSX.Element | null;
+export default ThemeModeButton;

package/esm/ui/App/ThemeModeButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+/**
+ * A light/dark switch for a session that follows the OS, showing the mode
+ * drawn. A click holds the other mode, a second click follows the OS again. A
+ * session on an explicit light or dark gets nothing, which is every session
+ * that has not asked for this in Preferences, so a light reader is offered no
+ * route into dark.
+ */
+const ThemeModeButton = observer(function ThemeModeButton({ session, }) {
+    const dark = session.themeIsDark;
+    const drawnMode = dark ? 'dark' : 'light';
+    // A palette pinned to its own mode draws dark whatever the OS says, so the
+    // two disagree and the system is steering nothing to report. Everything else
+    // that hides this control is `themeMode`.
+    const followsSystem = session.themeMode === 'system' && drawnMode === session.effectiveThemeMode;
+    if (!followsSystem) {
+        return null;
+    }
+    const held = session.systemThemeOverride;
+    const otherMode = dark ? 'light' : 'dark';
+    const Icon = dark ? DarkModeIcon : LightModeIcon;
+    const label = held
+        ? `${dark ? 'Dark' : 'Light'} until your system theme changes`
+        : `Following your system theme (${drawnMode})`;
+    const action = held ? `to follow it (${otherMode})` : `for ${otherMode}`;
+    return (_jsx(Tooltip, { title: `${label}. Click ${action}.`, arrow: true, children: _jsx(IconButton, { "data-testid": "theme-mode-button", "aria-label": label, color: "inherit", size: "small", onClick: () => {
+                session.setSystemThemeOverride(held ? undefined : otherMode);
+            }, children: _jsx(Icon, { fontSize: "small" }) }) }));
+});
+export default ThemeModeButton;