@jbrowse/app-core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/menus.d.ts

@@ -1,4 +1,4 @@
-import type { MenuItem, MenuItemsGetter } from '@jbrowse/core/ui';
+import type { MenuItem } from '@jbrowse/core/ui/menuItems';
 /**
  * Ensure a top-level menu exists. `position` appends when omitted and counts
  * from the end when negative. A menu whose label is already on the bar is left
@@ -22,47 +22,33 @@ interface AddItemAction {
     menuItem: MenuItem;
     position?: number;
 }
-interface SetMenusAction {
-    type: 'setMenus';
-    newMenus: MenuDefinition[];
-}
-/**
- * `addMenu`/`setMenus` change which menus exist, so they resolve eagerly — the
- * app bar renders one button per menu before anything is opened. `addItem` only
- * changes a menu's contents, so it resolves when that menu opens, against
- * whatever its items are at that moment.
- */
-export type MenuAction = AddMenuAction | AddItemAction | SetMenusAction;
 /**
- * A menu as a root model authors it. Items may be a plain array, or a thunk for
- * a menu whose contents depend on state that would otherwise be read — and so
- * tracked — every time the app bar renders.
+ * `addMenu` changes which menus exist, so it resolves eagerly — the app bar
+ * renders one button per menu before anything is opened. `addItem` only changes
+ * a menu's contents, so it resolves when that menu opens, against whatever its
+ * items are at that moment.
  */
-export interface MenuDefinition {
-    label: string;
-    menuItems: MenuItemsGetter;
-}
+export type MenuAction = AddMenuAction | AddItemAction;
 /**
- * A menu as the app bar consumes it. Always a thunk returning a fresh array: a
- * menu's items are produced when it opens and never before, so no consumer has
- * to care which form the root model authored, and a plugin's contributions are
- * merged in at that point rather than spliced into the definition.
+ * A top-level menu. `menuItems` is a thunk the app bar calls when the menu
+ * opens and never before, so a root model's reads stay out of the bar's
+ * tracking scope and a plugin's contributions are merged onto each fresh
+ * result rather than spliced into a definition.
  */
 export interface Menu {
     label: string;
     menuItems: () => MenuItem[];
 }
 /**
- * Resolve a root model's menu definitions against the contributions plugins
- * have pushed (via `RootAppMenuMixin`). Structural contributions apply now;
- * item contributions are recorded against their target menu and applied when
- * that menu opens, so a menu that computes its items lazily stays lazy and
- * nothing is ever spliced into a definition.
+ * Resolve a root model's menus against the contributions plugins have pushed
+ * (via `RootAppMenuMixin`). Structural contributions apply now; item
+ * contributions are grouped by path and merged when the menu they target
+ * opens.
  *
  * Runs on every `menus()` evaluation, so it must not mutate `base` or anything
  * an action carries.
  */
-export declare function processMutableMenuActions(base: MenuDefinition[], actions: MenuAction[]): Menu[];
+export declare function processMutableMenuActions(base: Menu[], actions: MenuAction[]): Menu[];
 /**
  * Flatten resolved menus to plain data by opening every one of them. For tests
  * and other callers that want to assert on menu contents rather than render

package/esm/menus.js

@@ -1,82 +1,77 @@
-// a contribution that threw is reported once rather than on every open — the
-// menu re-resolves on each open and, while open, on each observer re-render
+// a conflict is reported once rather than on every open — the menu re-resolves
+// on each open and, while open, on each observer re-render — and the action is
+// what outlives the nodes, which are rebuilt on every menus() evaluation
 const reported = new WeakSet();
-/**
- * The action log is permanent; the menu it builds is thrown away when the menu
- * closes. Everything a resolution walks therefore has to belong to the
- * throwaway, because resolving a path is a **write**:
- * `appendToSubMenu(['Add', 'My plugin'], two)` means "find the array labelled
- * My plugin and push into it".
- *
- * So when an earlier action is what supplied that array —
- * `appendToMenu('Add', { label: 'My plugin', subMenu: [one] })` — and it goes
- * into the menu by reference, the push lands in the stored action instead. The
- * next open replays a log that now reads `subMenu: [one, two]` and pushes
- * again, so the sub-menu gains an item on every open, and on every observer
- * re-render while open.
- *
- * Cloning is what keeps the two apart: the copy is what the path resolves to
- * and what gets written, and it dies with the open. Leaf items are shared by
- * reference — nothing writes into them — so this costs an allocation only for
- * the rows that nest.
- */
-function cloneMenuItem(item) {
-    return 'subMenu' in item
-        ? { ...item, subMenu: cloneMenuItems(item.subMenu) }
-        : item;
-}
-function cloneMenuItems(items) {
-    return items.map(item => cloneMenuItem(item));
-}
-function materialize(menuItems) {
-    return typeof menuItems === 'function' ? menuItems() : menuItems;
+function register(node, action, depth) {
+    const label = action.menuPath[depth];
+    if (label === undefined) {
+        node.entries.push(action);
+    }
+    else {
+        let entry = node.entries.find((e) => e.type === 'subMenu' && e.label === label);
+        if (!entry) {
+            entry = {
+                type: 'subMenu',
+                label,
+                path: action.menuPath.slice(0, depth + 1),
+                node: { entries: [] },
+                first: action,
+            };
+            node.entries.push(entry);
+        }
+        register(entry.node, action, depth + 1);
+    }
 }
 // splice is already the "counts from the end when negative" rule, and clamps
 // rather than wrapping past the start; the default is what makes it an append
 function insertAt(items, item, position = items.length) {
     items.splice(position, 0, item);
 }
+// the author's form is kept: an array sub-menu resolves now, a thunk sub-menu
+// resolves when its panel opens, with the contributions merged in either way
+function withContributions(item, node) {
+    const { subMenu } = item;
+    return {
+        ...item,
+        subMenu: typeof subMenu === 'function'
+            ? () => apply(subMenu(), node)
+            : apply(subMenu, node),
+    };
+}
 /**
- * Walk `menuPath` past its first segment (the top-level menu, already
- * resolved), creating empty sub-menus as needed, and return the deepest
- * sub-menu's item array. Throws if a path segment names an item that is not a
- * sub-menu.
+ * Return a copy of `items` with a node's contributions merged in. Nothing is
+ * written into `items`, into any sub-menu it holds, or into a contribution's
+ * own payload: a sub-menu that gains contributions is replaced by a copy whose
+ * `subMenu` resolves them, so the arrays behind a definition or an action are
+ * the same on every open.
+ *
+ * A path segment naming a row that is not a sub-menu is a plugin bug. It
+ * costs that subtree of contributions, reported once, and nothing else — this
+ * runs from the app bar's click handler, where a throw goes straight through
+ * React.
  */
-function resolveSubMenu(items, menuPath) {
-    let level = items;
-    for (const [idx, menuName] of menuPath.slice(1).entries()) {
-        let sub = level.find((mi) => 'subMenu' in mi && mi.label === menuName);
-        if (!sub) {
-            if (level.some(mi => 'label' in mi && mi.label === menuName)) {
-                const pathSoFar = menuPath.slice(0, idx + 2).join(' > ');
-                throw new Error(`"${menuName}" in path "${pathSoFar}" is not a subMenu`);
-            }
-            sub = { label: menuName, subMenu: [] };
-            level.push(sub);
+function apply(items, node) {
+    const result = [...items];
+    for (const entry of node.entries) {
+        if (entry.type === 'addItem') {
+            insertAt(result, entry.menuItem, entry.position);
         }
-        level = sub.subMenu;
-    }
-    return level;
-}
-// each contribution is applied independently: a plugin that names a bad path
-// loses its own item rather than every other plugin's, and never the session —
-// this runs from the app bar's click handler, where a throw goes straight
-// through React
-function applyItemActions(items, actions) {
-    for (const action of actions) {
-        try {
-            const target = resolveSubMenu(items, action.menuPath);
-            // cloned rather than inserted by reference — see cloneMenuItem
-            insertAt(target, cloneMenuItem(action.menuItem), action.position);
-        }
-        catch (error) {
-            if (!reported.has(action)) {
-                reported.add(action);
-                console.error(error);
+        else {
+            const idx = result.findIndex(mi => 'label' in mi && mi.label === entry.label);
+            const found = result[idx];
+            if (found === undefined) {
+                result.push({ label: entry.label, subMenu: apply([], entry.node) });
+            }
+            else if ('subMenu' in found) {
+                result[idx] = withContributions(found, entry.node);
+            }
+            else if (!reported.has(entry.first)) {
+                reported.add(entry.first);
+                console.error(new Error(`"${entry.label}" in path "${entry.path.join(' > ')}" is not a subMenu`));
             }
         }
     }
-    return items;
+    return result;
 }
 // first menu with this label, or a new empty one — an item action naming a menu
 // that doesn't exist creates it, so a plugin can populate its own menu without
@@ -86,47 +81,33 @@ function findOrCreateMenu(pending, label, position) {
     if (found) {
         return found;
     }
-    const menu = { label, base: [], itemActions: [] };
-    insertAt(pending, menu, position);
-    return menu;
-}
-function toMenu({ label, base, itemActions }) {
-    return {
+    const menu = {
         label,
-        menuItems: () => applyItemActions(cloneMenuItems(materialize(base)), itemActions),
+        menuItems: () => [],
+        node: { entries: [] },
     };
+    insertAt(pending, menu, position);
+    return menu;
 }
 /**
- * Resolve a root model's menu definitions against the contributions plugins
- * have pushed (via `RootAppMenuMixin`). Structural contributions apply now;
- * item contributions are recorded against their target menu and applied when
- * that menu opens, so a menu that computes its items lazily stays lazy and
- * nothing is ever spliced into a definition.
+ * Resolve a root model's menus against the contributions plugins have pushed
+ * (via `RootAppMenuMixin`). Structural contributions apply now; item
+ * contributions are grouped by path and merged when the menu they target
+ * opens.
  *
  * Runs on every `menus()` evaluation, so it must not mutate `base` or anything
  * an action carries.
  */
 export function processMutableMenuActions(base, actions) {
-    const toPending = (m) => ({
-        label: m.label,
-        base: m.menuItems,
-        itemActions: [],
-    });
-    let pending = base.map(toPending);
+    const pending = base.map(m => ({ ...m, node: { entries: [] } }));
     for (const action of actions) {
         switch (action.type) {
-            case 'setMenus': {
-                // replaces the menu bar wholesale, so item contributions made before it
-                // are dropped along with the menus they targeted
-                pending = action.newMenus.map(toPending);
-                break;
-            }
             case 'addMenu': {
                 findOrCreateMenu(pending, action.menuName, action.position);
                 break;
             }
             case 'addItem': {
-                findOrCreateMenu(pending, action.menuPath[0]).itemActions.push(action);
+                register(findOrCreateMenu(pending, action.menuPath[0]).node, action, 1);
                 break;
             }
             default: {
@@ -134,7 +115,10 @@ export function processMutableMenuActions(base, actions) {
             }
         }
     }
-    return pending.map(m => toMenu(m));
+    return pending.map(({ label, menuItems, node }) => ({
+        label,
+        menuItems: () => apply(menuItems(), node),
+    }));
 }
 /**
  * Flatten resolved menus to plain data by opening every one of them. For tests

package/esm/queryParams.d.ts

@@ -1,5 +1,5 @@
 export declare function readQueryParams<T extends string>(keys: T[]): Record<T, string | undefined>;
-export declare function readAllQueryParams(): URLSearchParams;
+export declare function readAllQueryParams(url?: URL | Location): URLSearchParams;
 export declare function deleteQueryParams(keys: readonly string[]): void;
 export declare function setQueryParams(values: Record<string, string | undefined>): void;
 /**

package/esm/queryParams.js

@@ -1,11 +1,11 @@
 import { useCallback, useSyncExternalStore } from 'react';
 // The single decision of where this URL keeps its params. Computed once per
 // operation and threaded through read+write so the two can't disagree.
-function paramLocation() {
-    return window.location.hash.includes('=') ? 'hash' : 'search';
+function paramLocation(url = window.location) {
+    return url.hash.includes('=') ? 'hash' : 'search';
 }
-function readParams(loc) {
-    return new URLSearchParams(loc === 'hash' ? window.location.hash.slice(1) : window.location.search);
+function readParams(loc, url = window.location) {
+    return new URLSearchParams(loc === 'hash' ? url.hash.slice(1) : url.search);
 }
 // history.replaceState fires no event, so a write has to notify readers itself.
 // popstate alone covers only back/forward, which nothing here does: desktop's
@@ -52,11 +52,12 @@ export function readQueryParams(keys) {
     }
     return result;
 }
-// Reads the full current param set from wherever this URL keeps them (hash XOR
-// search). Producers that need every param at once (buildShareUrl) share this
-// so the hash/search decision stays in this one module.
-export function readAllQueryParams() {
-    return readParams(paramLocation());
+// Reads the full param set from wherever a URL keeps them (hash XOR search),
+// the page's own by default. Producers that need every param at once
+// (buildShareUrl) share this so the hash/search decision stays in this one
+// module.
+export function readAllQueryParams(url = window.location) {
+    return readParams(paramLocation(url), url);
 }
 export function deleteQueryParams(keys) {
     const loc = paramLocation();

package/esm/ui/App/App.js

@@ -1,18 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
+import { Suspense, useEffect } from 'react';
 import Snackbar from '@jbrowse/core/ui/Snackbar';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { ModalWidget, drawerGridTemplateColumns } from '@jbrowse/product-core';
-import { AppBar } from '@mui/material';
+import { AppReadyMarker, ModalWidget, drawerGridTemplateColumns, } from '@jbrowse/product-core';
+import { AppBar, useMediaQuery, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import AppFab from './AppFab.js';
-import AppReadyMarker from './AppReadyMarker.js';
 import AppToolbar from './AppToolbar.js';
 import DialogQueue from './DialogQueue.js';
 import ViewsContainer from './ViewsContainer.js';
-import { lazyChunk } from './lazyChunk.js';
-// lazies
-const DrawerWidget = lazy(lazyChunk('DrawerWidget', () => import('./DrawerWidget.js')));
+import { DrawerWidget } from './lazyParts.js';
 const useStyles = makeStyles()(theme => ({
     root: {
         display: 'grid',
@@ -33,6 +30,9 @@ const useStyles = makeStyles()(theme => ({
         gridColumn: 'main',
         display: 'grid',
         gridTemplateRows: '[menubar] min-content [components] minmax(0, 1fr)',
+        // an implicit column floors at the toolbar's min-content, which widened
+        // the page past a phone's screen rather than ellipsizing the session name
+        gridTemplateColumns: 'minmax(0, 1fr)',
         height: '100%',
     },
     appBar: {
@@ -43,14 +43,21 @@ const useStyles = makeStyles()(theme => ({
 const App = observer(function App(props) {
     const { session } = props;
     const { classes } = useStyles();
-    const { drawerVisible, drawerWidth, drawerPosition, poppedOut } = session;
+    const { drawerVisible, drawerWidth, drawerPosition, modalWidgetVisible } = session;
+    // a phone has no room for a drawer column beside the views
+    const narrow = useMediaQuery(useTheme().breakpoints.down('sm'), {
+        noSsr: true,
+    });
+    useEffect(() => {
+        session.setModalWidgets(narrow);
+    }, [session, narrow]);
     const gridTemplateColumns = drawerGridTemplateColumns({
         drawerVisible,
         drawerPosition,
         drawerWidth,
     });
-    return (_jsxs("div", { className: classes.root, style: { gridTemplateColumns }, children: [poppedOut ? (_jsx(ModalWidget, { session: session, onClose: () => {
-                    session.returnWidgetToDrawer();
-                } })) : null, _jsx(DialogQueue, { session: session }), _jsxs("div", { className: classes.appContainer, children: [_jsx(AppBar, { className: classes.appBar, position: "static", "data-testid": "app-bar", children: _jsx(AppToolbar, { ...props }) }), _jsx(ViewsContainer, { ...props })] }), _jsx(AppFab, { session: session }), _jsx(AppReadyMarker, { session: session }), drawerVisible ? (_jsx(Suspense, { fallback: null, children: _jsx(DrawerWidget, { session: session }) })) : null, _jsx(Snackbar, { session: session })] }));
+    return (_jsxs("div", { className: classes.root, style: { gridTemplateColumns }, children: [modalWidgetVisible ? (_jsx(ModalWidget, { session: session, fullScreen: narrow, onClose: () => {
+                    session.closeModalWidget();
+                } })) : null, _jsx(DialogQueue, { session: session }), _jsxs("div", { className: classes.appContainer, children: [_jsx(AppBar, { className: classes.appBar, position: "static", "data-testid": "app-bar", children: _jsx(AppToolbar, { ...props }) }), _jsx(ViewsContainer, { session: session })] }), _jsx(AppFab, { session: session }), _jsx(AppReadyMarker, { session: session }), drawerVisible ? (_jsx(Suspense, { fallback: null, children: _jsx(DrawerWidget, { session: session }) })) : null, _jsx(Snackbar, { session: session })] }));
 });
 export { App };

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': {
@@ -40,6 +50,10 @@ const useStyles = makeStyles()(theme => ({
 const AppToolbar = observer(function AppToolbar({ session, HeaderButtons = _jsx("div", {}), }) {
     const { classes } = useStyles();
     const { name, menus } = 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
@@ -47,12 +61,13 @@ const AppToolbar = observer(function AppToolbar({ session, HeaderButtons = _jsx(
                 // 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(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", { className: classes.logo, children: _jsx(AppLogo, { session: 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,6 +1,6 @@
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
-interface Props {
+export interface ClassicViewsContainerProps {
     session: SessionWithFocusedViewAndDrawerWidgets;
 }
-declare const ClassicViewsContainer: ({ session, }: Props) => import("react").JSX.Element;
+declare const ClassicViewsContainer: ({ session, }: ClassicViewsContainerProps) => import("react").JSX.Element;
 export default ClassicViewsContainer;

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

@@ -12,8 +12,8 @@ import type { AbstractSessionModel } from '@jbrowse/core/util';
  * 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.
  *
- * Keyed on the component so the queue advancing to a different dialog clears a
- * banner belonging to the one before it.
+ * 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;

package/esm/ui/App/DialogQueue.js

@@ -25,12 +25,12 @@ function dismissActiveDialog(session) {
  * 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.
  *
- * Keyed on the component so the queue advancing to a different dialog clears a
- * banner belonging to the one before it.
+ * 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(ErrorBoundary, { resetKeys: [DialogComponent], FallbackComponent: ({ error }) => (_jsx(Dialog, { open: true, title: "Error", onClose: () => {
+    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;
 });

package/esm/ui/App/DrawerHeader.js

@@ -2,11 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback } from 'react';
 import { getEnv } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { DrawerWidgetSelector } from '@jbrowse/product-core';
+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';
 const DrawerHeaderHelpButton = lazy(() => import('./DrawerHeaderHelpButton.js'));
 const useStyles = makeStyles()(theme => ({
     spacer: {
@@ -45,7 +44,7 @@ const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight,
             observer.disconnect();
         };
     }, [setToolbarHeight]);
-    return (_jsx(AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
+    return (_jsx(AppBar, { position: "sticky", className: viewWidgetId !== undefined && focusedViewId === viewWidgetId
             ? classes.headerFocused
             : 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();

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;

package/esm/ui/App/ViewButtons.js

@@ -20,9 +20,9 @@ const useStyles = makeStyles()(theme => ({
 const ViewButtons = observer(function ViewButtons({ view, }) {
     const { classes } = useStyles();
     const session = getSession(view);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "data-testid": "minimize_view", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": view.minimized ? 'Restore view' : 'Minimize view', "data-testid": "minimize_view", onClick: () => {
                     view.setMinimized(!view.minimized);
-                }, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "data-testid": "close_view", onClick: () => {
+                }, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "aria-label": "Close view", "data-testid": "close_view", onClick: () => {
                     session.removeView(view);
                 }, children: _jsx(CloseIcon, { className: classes.icon, fontSize: "small" }) })] }));
 });

package/esm/ui/App/ViewContainer.js

@@ -9,22 +9,6 @@ import ViewHeader from './ViewHeader.js';
 import ViewWrapper from './ViewWrapper.js';
 import { useViewVisibility } from './useViewVisibility.js';
 import { viewTitle } from './viewTitle.js';
-// Intended to keep views mounted within ~1.5 viewport-heights of the visible
-// band. **It does nothing, and making it work was measured as a regression.**
-//
-// An observer clips the target against every scrolling ancestor before applying
-// the margin, which expands only the root's box — and both view containers are
-// `overflow-y: auto`, so through one of them `150% 0px` qualifies exactly the
-// views a `0px` margin would. Rooting the observer at the scroll port instead
-// (`scrollPortOf`) does restore the band, and it came out a wash on scroll cost
-// while holding 9-13 live GPU canvases instead of 6. The mount band trades
-// pipeline rebuilds for live contexts, and with the ceiling at 16 live WebGL2
-// contexts the contexts are the tighter constraint.
-// See agent-docs/reference/GPU_CONTEXT_BUDGET.md.
-//
-// So don't tune this number expecting an effect, and don't make it live without
-// first cutting contexts per display.
-const VIEW_VISIBILITY_ROOT_MARGIN = '150% 0px';
 // Scroll-space reserved for a view that has never been measured yet, so a fresh
 // load spreads views down the page instead of stacking them all in the viewport
 // (which would mark them all visible and defeat the lazy mount).
@@ -100,7 +84,7 @@ const useStyles = makeStyles()(theme => ({
 const ViewContainer = observer(function ViewContainer({ view, session, scrollOnMount, }) {
     const ref = useWidthSetter(view);
     const { classes } = useStyles();
-    const { ref: bodyRef, visible, measuredHeight, } = useViewVisibility(VIEW_VISIBILITY_ROOT_MARGIN);
+    const { ref: bodyRef, visible, measuredHeight } = useViewVisibility();
     useFocusOnInteraction(ref, () => {
         session.setFocusedViewId(view.id);
     });