@jbrowse/core 4.3.0 → 5.0.0-beta.1

package/esm/ui/ExternalLink.d.ts

@@ -1,2 +1,2 @@
 import type { LinkProps } from '@mui/material';
-export default function ExternalLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
+export default function ExternalLink(props: LinkProps): import("react").JSX.Element;

package/esm/ui/FactoryResetDialog.d.ts

@@ -2,4 +2,4 @@ export default function FactoryResetDialog({ onClose, open, onFactoryReset, }: {
     onClose: () => void;
     open: boolean;
     onFactoryReset: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/FactoryResetDialog.js

@@ -1,18 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
-import Dialog from "./Dialog.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogContentText } from '@mui/material';
+import ConfirmDialog from './ConfirmDialog.js';
 export default function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
-    function handleDialogClose(action) {
-        if (action === 'reset') {
+    return (_jsx(ConfirmDialog, { open: open, title: "Reset", submitText: "Reset", onCancel: onClose, onSubmit: () => {
             onFactoryReset();
-        }
-        onClose();
-    }
-    return (_jsxs(Dialog, { title: "Reset", onClose: () => {
-            handleDialogClose();
-        }, open: open, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: "Are you sure you want to reset? This will restore the default configuration." }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
-                            handleDialogClose();
-                        }, color: "primary", children: "Cancel" }), _jsx(Button, { onClick: () => {
-                            handleDialogClose('reset');
-                        }, color: "primary", variant: "contained", children: "OK" })] })] }));
+            onClose();
+        }, children: _jsx(DialogContentText, { children: "Are you sure you want to reset? This will restore the default configuration." }) }));
 }

package/esm/ui/FatalErrorDialog.d.ts

@@ -1,6 +1,7 @@
-export default function FatalErrorDialog({ componentStack, error, onFactoryReset, resetButtonText, }: {
+export default function FatalErrorDialog({ componentStack, error, onFactoryReset, resetButtonText, extraActions, }: {
     componentStack?: string;
     error?: unknown;
     onFactoryReset: () => void;
     resetButtonText?: string;
-}): import("react/jsx-runtime").JSX.Element;
+    extraActions?: React.ReactNode;
+}): import("react").JSX.Element;

package/esm/ui/FatalErrorDialog.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, } from '@mui/material';
-import ErrorMessage from "./ErrorMessage.js";
-import FactoryResetDialog from "./FactoryResetDialog.js";
+import ErrorBanner from './ErrorBanner.js';
+import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
+import FactoryResetDialog from './FactoryResetDialog.js';
 const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
     const [dialogOpen, setDialogOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": "fatal-error", color: "primary", variant: "contained", onClick: () => {
@@ -11,8 +12,8 @@ const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
                     setDialogOpen(false);
                 }, open: dialogOpen, onFactoryReset: onFactoryReset })] }));
 };
-export default function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', }) {
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, children: [_jsx(DialogTitle, { children: "Fatal error" }), _jsxs(DialogContent, { children: [_jsx(ErrorMessage, { error: error }), _jsx("pre", { children: componentStack })] }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
+export default function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', extraActions, }) {
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, children: [_jsx(DialogTitle, { children: "Fatal error" }), _jsxs(DialogContent, { children: [_jsx(ErrorBanner, { error: error }), componentStack ? (_jsx(ErrorMessageStackTraceContents, { text: componentStack })) : null] }), _jsxs(DialogActions, { children: [extraActions, _jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
                             window.location.reload();
                         }, children: "Refresh" }), _jsx(ResetComponent, { onFactoryReset: onFactoryReset, resetButtonText: resetButtonText })] })] }));
 }

package/esm/ui/FileDropZone.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type Accept = Record<string, string[]>;
+export interface FileRejection {
+    file: File;
+    errors: {
+        code: string;
+        message: string;
+    }[];
+}
+/**
+ * Shared dashed-border file dropzone (drag-and-drop plus click-to-browse) used
+ * by the bulk add-track, multi-wiggle, assembly, and session-import forms. The
+ * `onDrop` signature reports accepted files and, when `accept`/`maxSize` are
+ * set, rejected files with their validation errors. Pass `message` to replace
+ * the default prompt and `children` for extra content (e.g. a Browse button).
+ */
+export default function FileDropZone({ onDrop, accept, maxSize, multiple, message, children, className, }: {
+    onDrop: (accepted: File[], rejected: FileRejection[]) => void;
+    accept?: Accept;
+    maxSize?: number;
+    multiple?: boolean;
+    message?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/esm/ui/FileDropZone.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { Typography, alpha } from '@mui/material';
+import { makeStyles } from '../util/tss-react/index.js';
+const useStyles = makeStyles()(theme => ({
+    dropZone: {
+        textAlign: 'center',
+        padding: theme.spacing(2),
+        borderWidth: 2,
+        borderRadius: 2,
+        borderStyle: 'dashed',
+        outline: 'none',
+        cursor: 'pointer',
+        transition: 'border .24s ease-in-out, background-color .24s ease-in-out',
+    },
+    dropZoneActive: {
+        borderColor: theme.palette.secondary.light,
+        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    },
+    dropZoneInactive: {
+        borderColor: theme.palette.divider,
+        backgroundColor: theme.palette.background.default,
+    },
+    uploadIcon: {
+        color: theme.palette.text.secondary,
+    },
+}));
+// a file matches an Accept entry if its extension is listed or its MIME type
+// matches a key (with trailing-slash glob support, e.g. 'image/*')
+function mimeMatches(fileType, pattern) {
+    return pattern.endsWith('/*')
+        ? fileType.startsWith(pattern.slice(0, -1))
+        : fileType === pattern;
+}
+function validate(file, accept, maxSize) {
+    const errors = [];
+    if (maxSize !== undefined && file.size > maxSize) {
+        errors.push({
+            code: 'file-too-large',
+            message: `File is larger than ${maxSize} bytes`,
+        });
+    }
+    if (accept) {
+        const name = file.name.toLowerCase();
+        const extOk = Object.values(accept)
+            .flat()
+            .some(ext => name.endsWith(ext.toLowerCase()));
+        const mimeOk = Object.keys(accept).some(m => mimeMatches(file.type, m));
+        if (!extOk && !mimeOk) {
+            const allowed = Object.entries(accept)
+                .flatMap(([mime, exts]) => [mime, ...exts])
+                .join(', ');
+            errors.push({
+                code: 'file-invalid-type',
+                message: `File type must be ${allowed}`,
+            });
+        }
+    }
+    return errors;
+}
+/**
+ * Shared dashed-border file dropzone (drag-and-drop plus click-to-browse) used
+ * by the bulk add-track, multi-wiggle, assembly, and session-import forms. The
+ * `onDrop` signature reports accepted files and, when `accept`/`maxSize` are
+ * set, rejected files with their validation errors. Pass `message` to replace
+ * the default prompt and `children` for extra content (e.g. a Browse button).
+ */
+export default function FileDropZone({ onDrop, accept, maxSize, multiple = true, message, children, className, }) {
+    const { classes, cx } = useStyles();
+    const inputRef = useRef(null);
+    // dragenter/dragleave fire for child elements too; ref-count them so
+    // isDragActive does not flicker as the cursor moves over inner content
+    const dragDepthRef = useRef(0);
+    const [isDragActive, setIsDragActive] = useState(false);
+    function handleFiles(fileList) {
+        const files = fileList ? [...fileList] : [];
+        const chosen = multiple ? files : files.slice(0, 1);
+        const accepted = [];
+        const rejected = [];
+        for (const file of chosen) {
+            const errors = validate(file, accept, maxSize);
+            if (errors.length > 0) {
+                rejected.push({ file, errors });
+            }
+            else {
+                accepted.push(file);
+            }
+        }
+        onDrop(accepted, rejected);
+    }
+    function openBrowse() {
+        inputRef.current?.click();
+    }
+    const acceptAttr = accept
+        ? Object.entries(accept)
+            .flatMap(([mime, exts]) => [mime, ...exts])
+            .join(',')
+        : undefined;
+    return (_jsxs("div", { role: "button", tabIndex: 0, "data-testid": "file-drop-zone", className: cx(classes.dropZone, isDragActive ? classes.dropZoneActive : classes.dropZoneInactive, className), onClick: openBrowse, onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                openBrowse();
+            }
+        }, onDragEnter: (event) => {
+            event.preventDefault();
+            dragDepthRef.current += 1;
+            setIsDragActive(true);
+        }, onDragOver: (event) => {
+            event.preventDefault();
+        }, onDragLeave: (event) => {
+            event.preventDefault();
+            dragDepthRef.current -= 1;
+            if (dragDepthRef.current <= 0) {
+                dragDepthRef.current = 0;
+                setIsDragActive(false);
+            }
+        }, onDrop: (event) => {
+            event.preventDefault();
+            dragDepthRef.current = 0;
+            setIsDragActive(false);
+            handleFiles(event.dataTransfer.files);
+        }, children: [_jsx("input", { ref: inputRef, type: "file", accept: acceptAttr, multiple: multiple, style: { display: 'none' }, onChange: event => {
+                    handleFiles(event.target.files);
+                    // reset so selecting the same file again still fires onChange
+                    event.target.value = '';
+                } }), _jsx(CloudUploadIcon, { className: classes.uploadIcon, fontSize: "large" }), _jsx(Typography, { color: "text.secondary", align: "center", children: message ?? 'Drag and drop files here, or click to browse' }), children] }));
+}

package/esm/ui/FileSelector/FileSelector.d.ts

@@ -6,5 +6,5 @@ declare const FileSelector: ({ inline, location, name, description, rootModel, s
     inline?: boolean;
     rootModel?: AbstractRootModel;
     setLocation: (param: FileLocation) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default FileSelector;

package/esm/ui/FileSelector/FileSelector.js

@@ -1,40 +1,69 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import { Box, FormGroup, FormHelperText, InputLabel } from '@mui/material';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from 'react';
+import { Box, FormHelperText, InputLabel } from '@mui/material';
 import { observer } from 'mobx-react';
-import LocationInput from "./LocationInput.js";
-import SourceTypeSelector from "./SourceTypeSelector.js";
-import useInternetAccounts from "./useInternetAccounts.js";
-import { addAccountToLocation, getInitialSourceType } from "./util.js";
-import { notEmpty } from "../../util/index.js";
-import { isUriLocation } from "../../util/types/index.js";
+import { notEmpty } from '../../util/index.js';
+import { isUriLocation } from '../../util/types/index.js';
+import LocationInput from './LocationInput.js';
+import SourceTypeSelector from './SourceTypeSelector.js';
+import { useEmptySourceType } from './emptySourceType.js';
+import useInternetAccounts from './useInternetAccounts.js';
+import { addAccountToLocation, availableSourceTypes, getInitialSourceType, sourceTypeForLocation, } from './util.js';
 const FileSelector = observer(function FileSelector({ inline, location, name, description, rootModel, setLocation, }) {
-    const [sourceType, setSourceType] = useState(() => getInitialSourceType(location));
-    const { accountMap, shownAccountIds, hiddenAccountIds, recentlyUsed, setRecentlyUsed, } = useInternetAccounts(rootModel);
-    const selectedAccount = accountMap[sourceType];
+    const emptySourceType = useEmptySourceType();
+    const labelId = useId();
+    const descriptionId = useId();
+    const [sourceType, setSourceType] = useState(() => getInitialSourceType(location, emptySourceType));
+    const { accountMap, shownAccounts, hiddenAccounts, recentlyUsed, setRecentlyUsed, } = useInternetAccounts(rootModel);
+    // What a location wants and what the group draws are answered separately, so
+    // they have to be reconciled somewhere: a selection no button carries leaves
+    // the group with nothing pressed. Derived rather than clamped into state, so
+    // an account that installs after this mounted takes its selection back.
+    const sourceTypes = availableSourceTypes(Object.keys(accountMap));
+    const shownSourceType = sourceTypes.includes(sourceType) ? sourceType : 'url';
+    // A location the form filled in for the user has to be able to show itself.
+    // The toggle is picked once, at mount, from a slot that is usually still
+    // empty, so an index detected beside the main file went into the model and
+    // rendered as a blank box — under a note saying it had been filled in. Only a
+    // location the showing toggle CANNOT render moves it, so this never overrides
+    // a toggle the user picked for a slot they are still filling.
+    const [lastLocation, setLastLocation] = useState(location);
+    if (location !== lastLocation) {
+        setLastLocation(location);
+        const needed = sourceTypeForLocation(location, shownSourceType);
+        if (needed) {
+            setSourceType(needed);
+        }
+    }
+    const selectedAccount = accountMap[shownSourceType];
     const handleLocationChange = useCallback((loc) => {
         setLocation(addAccountToLocation(loc, selectedAccount));
     }, [setLocation, selectedAccount]);
-    useEffect(() => {
-        if (selectedAccount &&
-            isUriLocation(location) &&
-            location.internetAccountId !== selectedAccount.internetAccountId) {
-            handleLocationChange(location);
-        }
-    }, [location, selectedAccount, handleLocationChange]);
     const handleSourceTypeChange = useCallback((newValue) => {
-        if (newValue) {
-            setRecentlyUsed([
-                ...new Set([newValue, ...recentlyUsed].filter(notEmpty)),
-            ]);
-            setSourceType(newValue);
-            if (isUriLocation(location)) {
-                handleLocationChange(location);
+        if (!newValue) {
+            return;
+        }
+        setRecentlyUsed([
+            ...new Set([newValue, ...recentlyUsed].filter(notEmpty)),
+        ]);
+        setSourceType(newValue);
+        // re-stamp an existing URL for the source type just chosen — the account
+        // it names, or none at all if it names none. Read from accountMap rather
+        // than the closed-over selectedAccount, which still reflects the source
+        // type being left.
+        if (location && isUriLocation(location)) {
+            const next = addAccountToLocation(location, accountMap[newValue]);
+            if (next !== location) {
+                setLocation(next);
             }
         }
-    }, [location, recentlyUsed, setRecentlyUsed, handleLocationChange]);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", children: _jsx(InputLabel, { shrink: true, children: name }) }), _jsx(FormGroup, { children: _jsxs(Box, { display: "flex", flexDirection: inline ? 'row' : 'column', gap: 0.5, children: [_jsx(SourceTypeSelector, { value: sourceType, shownAccountIds: shownAccountIds, hiddenAccountIds: hiddenAccountIds, accountMap: accountMap, onChange: (_event, newValue) => {
-                                handleSourceTypeChange(newValue);
-                            }, onHiddenAccountSelect: handleSourceTypeChange }), _jsx(LocationInput, { toggleButtonValue: sourceType, selectedAccount: selectedAccount, location: location, inline: inline, setLocation: handleLocationChange })] }) }), _jsx(FormHelperText, { children: description })] }));
+    }, [location, recentlyUsed, setRecentlyUsed, accountMap, setLocation]);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { display: 'flex' }, children: _jsx(InputLabel, { id: labelId, shrink: true, children: name }) }), _jsxs(Box, { role: "group", "aria-labelledby": name ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, sx: {
+                    display: 'flex',
+                    flexDirection: inline ? 'row' : 'column',
+                    gap: 0.5,
+                }, children: [_jsx(SourceTypeSelector, { value: shownSourceType, sourceTypes: sourceTypes, shownAccounts: shownAccounts, hiddenAccounts: hiddenAccounts, onChange: (_event, newValue) => {
+                            handleSourceTypeChange(newValue);
+                        }, onHiddenAccountSelect: handleSourceTypeChange }), _jsx(LocationInput, { toggleButtonValue: shownSourceType, selectedAccount: selectedAccount, location: location, inline: inline, setLocation: handleLocationChange })] }), _jsx(FormHelperText, { id: descriptionId, children: description })] }));
 });
 export default FileSelector;

package/esm/ui/FileSelector/LocalFileChooser.d.ts

@@ -1,6 +1,11 @@
 import type { FileLocation } from '../../util/types/index.ts';
-declare function LocalFileChooser({ location, setLocation, }: {
+declare global {
+    interface Window {
+        showOpenFilePicker(): Promise<FileSystemFileHandle[]>;
+    }
+}
+declare const LocalFileChooser: ({ location, setLocation, }: {
     location?: FileLocation;
     setLocation: (arg: FileLocation) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default LocalFileChooser;

package/esm/ui/FileSelector/LocalFileChooser.js

@@ -1,35 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, FormControl, Typography } from '@mui/material';
-import { isFileSystemAccessSupported } from "../../util/fileHandleStore.js";
-import { isElectron } from "../../util/index.js";
-import { ensureFileHandleReady, getBlob, getFileFromCache, storeBlobLocation, storeFileHandleLocation, } from "../../util/tracks.js";
-import { makeStyles } from "../../util/tss-react/index.js";
-import { isBlobLocation, isFileHandleLocation, isLocalPathLocation, } from "../../util/types/index.js";
+import { observer } from 'mobx-react';
+import { isFileSystemAccessSupported } from '../../util/fileHandleStore.js';
+import { isElectron, localStorageGetItem, localStorageSetItem, } from '../../util/index.js';
+import { ensureFileHandleReady, getBlob, getFileFromCache, storeBlobLocation, storeFileHandleLocation, } from '../../util/tracks.js';
+import { makeStyles } from '../../util/tss-react/index.js';
+import { isBlobLocation, isFileHandleLocation, isLocalPathLocation, } from '../../util/types/index.js';
+import { dirFromPath } from './util.js';
 const useStyles = makeStyles()(theme => ({
     filename: {
         marginLeft: theme.spacing(1),
     },
 }));
 const supportsFileSystemAccess = isFileSystemAccessSupported() && !isElectron;
-function getFilename(location) {
-    if (!location) {
-        return undefined;
+const LAST_LOCAL_FILE_DIR_KEY = 'jbrowse-last-local-file-dir';
+function getLastLocalFileDir() {
+    return localStorageGetItem(LAST_LOCAL_FILE_DIR_KEY);
+}
+function setLastLocalFileDir(filePath) {
+    const dir = dirFromPath(filePath);
+    if (dir) {
+        localStorageSetItem(LAST_LOCAL_FILE_DIR_KEY, dir);
     }
-    if (isBlobLocation(location)) {
+}
+function getFilename(location) {
+    if (isBlobLocation(location) || isFileHandleLocation(location)) {
         return location.name;
     }
     if (isLocalPathLocation(location)) {
         return location.localPath;
     }
-    if (isFileHandleLocation(location)) {
-        return location.name;
-    }
     return undefined;
 }
 function needsReload(location) {
-    if (!location) {
-        return false;
-    }
     if (isBlobLocation(location)) {
         return !getBlob(location.blobId);
     }
@@ -38,38 +41,53 @@ function needsReload(location) {
     }
     return false;
 }
-async function openFileSystemAccessPicker() {
-    const [handle] = await window.showOpenFilePicker();
-    return storeFileHandleLocation(handle);
+// resolves the chosen file's location, or undefined if the user cancelled the
+// native picker (which surfaces as a DOMException AbortError)
+async function pickFileHandleLocation() {
+    try {
+        const [handle] = await window.showOpenFilePicker();
+        // showOpenFilePicker resolves with ≥1 handle on success. await before
+        // returning so a rejection unwinds through this try/catch (letting the
+        // AbortError check below see it) rather than escaping to the caller
+        return await storeFileHandleLocation(handle);
+    }
+    catch (e) {
+        if (e instanceof DOMException && e.name === 'AbortError') {
+            return undefined;
+        }
+        throw e;
+    }
 }
 function FilePickerButton({ setLocation, }) {
     if (supportsFileSystemAccess) {
         return (_jsx(Button, { variant: "outlined", onClick: async () => {
-                try {
-                    setLocation(await openFileSystemAccessPicker());
+                const loc = await pickFileHandleLocation();
+                if (loc) {
+                    setLocation(loc);
                 }
-                catch (e) {
-                    if (e.name !== 'AbortError') {
-                        throw e;
-                    }
+            }, children: "Choose File" }));
+    }
+    if (isElectron) {
+        return (_jsx(Button, { variant: "outlined", onClick: async () => {
+                // @ts-ignore - electron injects require onto window, needs to be ignore for now
+                const { ipcRenderer } = window.require('electron');
+                const result = await ipcRenderer.invoke('promptOpenLocalFile', getLastLocalFileDir());
+                const filePath = typeof result === 'string' ? result : undefined;
+                if (filePath) {
+                    setLastLocalFileDir(filePath);
+                    setLocation({
+                        localPath: filePath,
+                        locationType: 'LocalPathLocation',
+                    });
                 }
             }, children: "Choose File" }));
     }
     return (_jsxs(Button, { variant: "outlined", component: "label", children: ["Choose File", _jsx("input", { type: "file", hidden: true, onChange: ({ target }) => {
                     const file = target.files?.[0];
                     if (file) {
-                        if (isElectron) {
-                            const { webUtils } = window.require('electron');
-                            setLocation({
-                                localPath: webUtils.getPathForFile(file),
-                                locationType: 'LocalPathLocation',
-                            });
-                        }
-                        else {
-                            const loc = storeBlobLocation({ blob: file });
-                            if ('blobId' in loc) {
-                                setLocation(loc);
-                            }
+                        const loc = storeBlobLocation({ blob: file });
+                        if ('blobId' in loc) {
+                            setLocation(loc);
                         }
                     }
                 } })] }));
@@ -82,22 +100,18 @@ function ReloadPrompt({ location, setLocation, }) {
                 setLocation({ ...location });
             }
             catch {
-                try {
-                    setLocation(await openFileSystemAccessPicker());
-                }
-                catch (e) {
-                    if (e.name !== 'AbortError') {
-                        throw e;
-                    }
+                const loc = await pickFileHandleLocation();
+                if (loc) {
+                    setLocation(loc);
                 }
             }
         }
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Typography, { color: "error", children: "(need to reload)" }), isFileHandleLocation(location) && (_jsx(Button, { size: "small", variant: "text", color: "primary", onClick: handleReopen, children: "Reopen" }))] }));
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { color: "error", children: "(need to reload)" }), isFileHandleLocation(location) && (_jsx(Button, { size: "small", variant: "text", color: "primary", onClick: handleReopen, children: "Reopen" }))] }));
 }
-function LocalFileChooser({ location, setLocation, }) {
+const LocalFileChooser = observer(function LocalFileChooser({ location, setLocation, }) {
     const { classes } = useStyles();
     const filename = getFilename(location);
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Box, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(FilePickerButton, { setLocation: setLocation }) }) }), _jsxs(Box, { children: [_jsx(Typography, { component: "span", className: classes.filename, color: filename ? 'initial' : 'textSecondary', children: filename || 'No file chosen' }), location && needsReload(location) && (_jsx(ReloadPrompt, { location: location, setLocation: setLocation }))] })] }));
-}
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Box, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(FilePickerButton, { setLocation: setLocation }) }) }), _jsxs(Box, { children: [_jsx(Typography, { component: "span", className: classes.filename, color: filename ? 'initial' : 'textSecondary', children: filename || 'No file chosen' }), location && needsReload(location) && (_jsx(ReloadPrompt, { location: location, setLocation: setLocation }))] })] }));
+});
 export default LocalFileChooser;

package/esm/ui/FileSelector/LocationInput.d.ts

@@ -6,4 +6,4 @@ export default function LocationInput({ toggleButtonValue, selectedAccount, loca
     location?: FileLocation;
     inline?: boolean;
     setLocation: (arg: FileLocation) => void;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element;

package/esm/ui/FileSelector/LocationInput.js

@@ -1,15 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import LocalFileChooser from "./LocalFileChooser.js";
-import UrlChooser from "./UrlChooser.js";
+import LocalFileChooser from './LocalFileChooser.js';
+import UrlChooser from './UrlChooser.js';
 export default function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }) {
-    if (selectedAccount?.SelectorComponent) {
-        return (_jsx(selectedAccount.SelectorComponent, { setLocation: setLocation, selectedAccount: selectedAccount }));
-    }
-    if (toggleButtonValue === 'url') {
-        return (_jsx(UrlChooser, { location: location, setLocation: setLocation, label: selectedAccount?.selectorLabel, style: inline ? { margin: 0 } : undefined }));
-    }
-    if (toggleButtonValue === 'file') {
-        return _jsx(LocalFileChooser, { location: location, setLocation: setLocation });
-    }
-    return null;
+    // `file` is the only toggle with an input of its own — URL and every account
+    // toggle share the URL box, which is what `selectorLabel` names. Anything
+    // else falling through to `null` drew a field label and a toggle group with
+    // nothing under them: picking Dropbox did it, and so did a location arriving
+    // already stamped with an `internetAccountId`.
+    return toggleButtonValue === 'file' ? (_jsx(LocalFileChooser, { location: location, setLocation: setLocation })) : (_jsx(UrlChooser, { location: location, setLocation: setLocation, label: selectedAccount?.selectorLabel, style: inline ? { margin: 0 } : undefined }));
 }

package/esm/ui/FileSelector/SourceTypeSelector.d.ts

@@ -1,9 +1,9 @@
 import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index.ts';
-export default function SourceTypeSelector({ value, shownAccountIds, hiddenAccountIds, accountMap, onChange, onHiddenAccountSelect, }: {
+export default function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }: {
     value: string;
-    shownAccountIds: string[];
-    hiddenAccountIds: string[];
-    accountMap: Record<string, BaseInternetAccountModel>;
+    sourceTypes: string[];
+    shownAccounts: BaseInternetAccountModel[];
+    hiddenAccounts: BaseInternetAccountModel[];
     onChange: (event: React.MouseEvent, newValue: string | null) => void;
     onHiddenAccountSelect: (id: string) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/FileSelector/SourceTypeSelector.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import CascadingMenuButton from "../CascadingMenuButton.js";
-import { getAccountLabel, isAdminMode } from "./util.js";
+import CascadingMenuButton from '../CascadingMenuButton.js';
+import { getAccountLabel } from './util.js';
 function AccountToggleButton({ account, }) {
     return (_jsx(Tooltip, { title: account.name, children: _jsx(ToggleButton, { value: account.internetAccountId, children: getAccountLabel(account) }) }));
 }
 function MoreButton({ onClick, disabled, children, }) {
-    return (_jsx(ToggleButton, { value: "more", selected: false, disabled: disabled, onClick: e => {
+    return (_jsx(ToggleButton, { value: "more", selected: false, disabled: disabled, 
+        // ToggleButton types its target as HTMLElement, but it always renders a
+        // <button>, so narrowing to HTMLButtonElement for CascadingMenuButton's
+        // ButtonComponent contract is sound
+        onClick: e => {
             onClick(e);
         }, children: children }));
 }
-export default function SourceTypeSelector({ value, shownAccountIds, hiddenAccountIds, accountMap, onChange, onHiddenAccountSelect, }) {
-    const shownAccounts = shownAccountIds.map(id => accountMap[id]);
-    const hiddenAccounts = hiddenAccountIds.map(id => accountMap[id]);
-    return (_jsxs(ToggleButtonGroup, { value: value, exclusive: true, size: "small", onChange: onChange, "aria-label": "file, url, or account picker", children: [!isAdminMode() && (_jsx(ToggleButton, { value: "file", "aria-label": "local file", children: "File" })), _jsx(ToggleButton, { value: "url", "aria-label": "url", children: "URL" }), shownAccounts.map(account => (_jsx(AccountToggleButton, { account: account }, account.internetAccountId))), hiddenAccounts.length > 0 && (_jsxs(CascadingMenuButton, { menuItems: hiddenAccounts.map(account => ({
+export default function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }) {
+    return (_jsxs(ToggleButtonGroup, { value: value, exclusive: true, size: "small", onChange: onChange, "aria-label": "file, url, or account picker", children: [sourceTypes.includes('file') && (_jsx(ToggleButton, { value: "file", "aria-label": "local file", children: "File" })), _jsx(ToggleButton, { value: "url", "aria-label": "url", children: "URL" }), shownAccounts.map(account => (_jsx(AccountToggleButton, { account: account }, account.internetAccountId))), hiddenAccounts.length > 0 && (_jsxs(CascadingMenuButton, { menuItems: hiddenAccounts.map(account => ({
                     label: account.name,
                     onClick: () => {
                         onHiddenAccountSelect(account.internetAccountId);

package/esm/ui/FileSelector/UrlChooser.d.ts

@@ -4,5 +4,5 @@ declare const UrlChooser: ({ location, label, style, setLocation, }: {
     label?: string;
     style?: Record<string, unknown>;
     setLocation: (arg: FileLocation) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default UrlChooser;