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

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.d.ts

@@ -7,7 +7,7 @@ import type { FeatureFormatter, FieldActions } from '../types.tsx';
  * to make the same call.
  */
 export declare function isObjectArray(value: unknown[]): value is Record<string, unknown>[];
-export default function ArrayValue({ name, value, description, formatter, fieldActions, prefix, width, }: {
+declare const ArrayValue: ({ name, value, description, formatter, fieldActions, prefix, width, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown[];
@@ -15,4 +15,5 @@ export default function ArrayValue({ name, value, description, formatter, fieldA
     fieldActions?: FieldActions;
     prefix?: string[];
     width?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ArrayValue;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { observer } from 'mobx-react';
 import { isObject } from '../../util/index.js';
 import { makeStyles } from '../../util/tss-react/index.js';
 import Attributes from './Attributes.js';
@@ -33,7 +34,7 @@ const useStyles = makeStyles()(theme => ({
 export function isObjectArray(value) {
     return value.every(isObject);
 }
-export default function ArrayValue({ name, value, description, formatter, fieldActions, prefix = [], width, }) {
+const ArrayValue = observer(function ArrayValue({ name, value, description, formatter, fieldActions, prefix = [], width, }) {
     const { classes, cx } = useStyles();
     const reveal = useRevealFieldActions();
     const [showAll, setShowAll] = useState(false);
@@ -49,4 +50,5 @@ export default function ArrayValue({ name, value, description, formatter, fieldA
                         }, children: showAll
                             ? 'Show less'
                             : `Showing ${limit} of ${value.length}. Show all...` })) : null] }))] }));
-}
+});
+export default ArrayValue;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Attributes.d.ts

@@ -2,7 +2,7 @@ import type { Descriptors, FeatureFormatter, FieldActions } from '../types.tsx';
 export declare function withoutLocations(attributes: Record<string, unknown>): Record<string, unknown>;
 /** Whether `Attributes` given these `attributes` and `omit` draws any row. */
 export declare function hasAttributeRows(attributes: Record<string, unknown>, omit?: string[]): boolean;
-export default function Attributes(props: {
+declare const Attributes: (props: {
     attributes: Record<string, unknown>;
     omit?: string[];
     omitSingleLevel?: string[];
@@ -16,4 +16,5 @@ export default function Attributes(props: {
      * down the recursion. Set by `Attributes` itself; a caller leaves it alone.
      */
     labelWidth?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default Attributes;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
+import { observer } from 'mobx-react';
 import { isLocalPathLocation, isObject, isUriLocation, measureText, } from '../../util/index.js';
 import ArrayValue, { isObjectArray } from './ArrayValue.js';
 import SimpleField from './SimpleField.js';
@@ -119,7 +120,7 @@ export function hasAttributeRows(attributes, omit = []) {
 function widestLabel(attributes, opts) {
     return Math.ceil(measureLabels(attributes, opts)) + FIELD_NAME_PADDING;
 }
-export default function Attributes(props) {
+const Attributes = observer(function Attributes(props) {
     const { omit = [], omitSingleLevel = [], descriptions, formatter, fieldActions, hideUris, prefix = [], labelWidth, } = props;
     const attributes = hideUris
         ? withoutLocations(props.attributes)
@@ -156,4 +157,5 @@ export default function Attributes(props) {
                 return (_jsx(SimpleField, { name: key, formatter: formatter, fieldActions: fieldActions, value: value, description: description, prefix: prefix, width: width }, key));
             }
         }) }));
-}
+});
+export default Attributes;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseAttributes.d.ts

@@ -1,2 +1,3 @@
 import type { BaseProps } from '../types.tsx';
-export default function BaseAttributes(props: BaseProps): import("react").JSX.Element;
+declare const BaseAttributes: (props: BaseProps) => import("react").JSX.Element;
+export default BaseAttributes;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseAttributes.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import Attributes from './Attributes.js';
 import BaseCard from './BaseCard.js';
-export default function BaseAttributes(props) {
+const BaseAttributes = observer(function BaseAttributes(props) {
     const { title = 'Attributes', defaultExpanded, feature } = props;
     return (_jsx(BaseCard, { title: title, defaultExpanded: defaultExpanded, children: _jsx(Attributes, { ...props, attributes: feature }) }));
-}
+});
+export default BaseAttributes;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCard.d.ts

@@ -1,2 +1,3 @@
 import type { BaseCardProps } from '../types.tsx';
-export default function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): import("react").JSX.Element;
+declare const BaseCard: ({ children, title, defaultExpanded, }: BaseCardProps) => import("react").JSX.Element;
+export default BaseCard;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { Accordion, AccordionDetails, AccordionSummary, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     expansionPanelDetails: {
@@ -8,7 +9,8 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(1),
     },
 }));
-export default function BaseCard({ children, title, defaultExpanded = true, }) {
+const BaseCard = observer(function BaseCard({ children, title, defaultExpanded = true, }) {
     const { classes } = useStyles();
     return (_jsxs(Accordion, { defaultExpanded: defaultExpanded, slotProps: { transition: { unmountOnExit: true } }, "data-testid": `BaseCard-${title}`, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsx(Typography, { variant: "button", children: title }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, children: children })] }));
-}
+});
+export default BaseCard;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCoreDetails.d.ts

@@ -1,2 +1,3 @@
 import type { BaseProps } from '../types.tsx';
-export default function BaseCoreDetails(props: BaseProps): import("react").JSX.Element;
+declare const BaseCoreDetails: (props: BaseProps) => import("react").JSX.Element;
+export default BaseCoreDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCoreDetails.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import BaseCard from './BaseCard.js';
 import CoreDetails from './CoreDetails.js';
-export default function BaseCoreDetails(props) {
+const BaseCoreDetails = observer(function BaseCoreDetails(props) {
     const { title = 'Primary data', defaultExpanded } = props;
     return (_jsx(BaseCard, { title: title, defaultExpanded: defaultExpanded, children: _jsx(CoreDetails, { ...props }) }));
-}
+});
+export default BaseCoreDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BasicValue.d.ts

@@ -6,9 +6,10 @@ export declare function valueText(value: unknown): string;
  * open in a new tab: navigating in place discards the session, and in an
  * embedded JBrowse it takes the host page with it.
  */
-export declare function ValueText({ text }: {
+export declare const ValueText: ({ text, }: {
     text: string;
-}): import("react").JSX.Element;
-export default function BasicValue({ value }: {
+}) => import("react").JSX.Element;
+declare const BasicValue: ({ value }: {
     value: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default BasicValue;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement, useState } from 'react';
 import { Link } from '@mui/material';
+import { observer } from 'mobx-react';
 import { SanitizedHTML } from '../../ui/index.js';
 import { isObject } from '../../util/index.js';
 import { makeStyles } from '../../util/tss-react/index.js';
@@ -36,10 +37,10 @@ export function valueText(value) {
  * open in a new tab: navigating in place discards the session, and in an
  * embedded JBrowse it takes the host page with it.
  */
-export function ValueText({ text }) {
+export const ValueText = observer(function ValueText({ text, }) {
     return isBareUrl(text) ? (_jsx(Link, { href: text, target: "_blank", rel: "noopener noreferrer", children: text })) : (_jsx(SanitizedHTML, { html: text }));
-}
-export default function BasicValue({ value }) {
+});
+const BasicValue = observer(function BasicValue({ value }) {
     const { classes, cx } = useStyles();
     const [expanded, setExpanded] = useState(false);
     const [ref, { height }] = useMeasure('height');
@@ -47,4 +48,5 @@ export default function BasicValue({ value }) {
     return (_jsxs("div", { className: classes.fieldValue, children: [_jsx("div", { className: cx(classes.clip, !expanded && classes.clamped, !expanded && overflows && classes.faded), children: _jsx("div", { ref: ref, children: isValidElement(value) ? (value) : (_jsx(ValueText, { text: valueText(value) })) }) }), overflows ? (_jsx(Link, { component: "button", variant: "caption", onClick: () => {
                     setExpanded(v => !v);
                 }, children: expanded ? 'Show less' : 'Show more' })) : null] }));
-}
+});
+export default BasicValue;

package/esm/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.d.ts

@@ -1,2 +1,3 @@
 import type { BaseProps } from '../types.tsx';
-export default function CoreDetails({ feature }: BaseProps): import("react").JSX.Element;
+declare const CoreDetails: ({ feature }: BaseProps) => import("react").JSX.Element;
+export default CoreDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { assembleLocString, toLocale } from '../../util/index.js';
 import { getStrandStr } from '../util.js';
 import SimpleField from './SimpleField.js';
-export default function CoreDetails({ feature }) {
+const CoreDetails = observer(function CoreDetails({ feature }) {
     const { name, description, type, start, end, strand } = feature;
     // only a formatDetails callback sets `length`, to rewrite or hide the row:
     // an adapter's own field of that name is in Attributes' globalOmit
@@ -16,4 +17,5 @@ export default function CoreDetails({ feature }) {
     return (_jsxs(_Fragment, { children: [_jsx(SimpleField, { name: "Position", value: [assembleLocString(feature), getStrandStr(strand)]
                     .filter(Boolean)
                     .join(' ') }), rows.map(([label, value]) => (_jsx(SimpleField, { name: label, value: Array.isArray(value) ? value.join(', ') : value }, label)))] }));
-}
+});
+export default CoreDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.d.ts

@@ -1,5 +1,6 @@
-export default function DataGridDetails({ value, prefix, name, }: {
+declare const DataGridDetails: ({ value, prefix, name, }: {
     name: string;
     prefix?: string[];
     value: Record<string, unknown>[];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default DataGridDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Typography } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
+import { observer } from 'mobx-react';
 import DataGridFlexContainer from '../../ui/DataGridFlexContainer.js';
 import { LabeledCheckbox, SanitizedHTML } from '../../ui/index.js';
 import { getStr, measureGridWidth } from '../../util/index.js';
@@ -17,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
         textOverflow: 'ellipsis',
     },
 }));
-export default function DataGridDetails({ value, prefix, name, }) {
+const DataGridDetails = observer(function DataGridDetails({ value, prefix, name, }) {
     const { classes } = useStyles();
     const [checked, setChecked] = useState(false);
     // DataGrid needs a unique row id; rather than commandeering any 'id' field
@@ -33,4 +34,5 @@ export default function DataGridDetails({ value, prefix, name, }) {
                         width: widths[index],
                         renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value ?? '') }) })),
                     })) }) })] }));
-}
+});
+export default DataGridDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.js

@@ -10,9 +10,9 @@ import Attributes from './Attributes.js';
 import BaseCard from './BaseCard.js';
 import CoreDetails from './CoreDetails.js';
 import { generateTitle } from './util.js';
-function SectionHeader({ title }) {
+const SectionHeader = observer(function SectionHeader({ title, }) {
     return _jsx(Typography, { variant: "overline", children: title });
-}
+});
 const shownByCoreDetails = [
     'name',
     'start',

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureWash.d.ts

@@ -14,7 +14,8 @@
  * sample grid); inside such a key this remounts on every swap and its counter
  * never leaves zero, so it silently never plays.
  */
-export default function FeatureWash({ uniqueId, children, }: {
+declare const FeatureWash: ({ uniqueId, children, }: {
     uniqueId: string | undefined;
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FeatureWash;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureWash.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { observer } from 'mobx-react';
 import { alpha } from '../../ui/palette.js';
 import { keyframes, makeStyles } from '../../util/tss-react/index.js';
 // Long enough to register out of the corner of an eye that was on the track,
@@ -43,7 +44,7 @@ const useStyles = makeStyles()(theme => {
  * sample grid); inside such a key this remounts on every swap and its counter
  * never leaves zero, so it silently never plays.
  */
-export default function FeatureWash({ uniqueId, children, }) {
+const FeatureWash = observer(function FeatureWash({ uniqueId, children, }) {
     const { classes } = useStyles();
     // Keyed on the feature's identity, not on the feature object: a widget's
     // formatDetails callbacks re-resolve into a fresh object, and a re-format of
@@ -63,4 +64,5 @@ export default function FeatureWash({ uniqueId, children, }) {
         });
     }
     return (_jsxs("div", { className: classes.root, children: [children, wash.count ? (_jsx("span", { className: classes.wash, "data-testid": "feature-details-wash" }, wash.count)) : null] }));
-}
+});
+export default FeatureWash;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldActionsButton.d.ts

@@ -1,8 +1,9 @@
 import type { FieldActions } from '../types.tsx';
 /** A class for a field row that shows its FieldActionsButton on hover or focus. */
 export declare function useRevealFieldActions(): string;
-export default function FieldActionsButton({ path, value, fieldActions, }: {
+declare const FieldActionsButton: ({ path, value, fieldActions, }: {
     path: string[];
     value: unknown;
     fieldActions?: FieldActions;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default FieldActionsButton;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldActionsButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import FilterListIcon from '@mui/icons-material/FilterList';
+import { observer } from 'mobx-react';
 import CascadingMenuButton from '../../ui/CascadingMenuButton.js';
 import { makeStyles } from '../../util/tss-react/index.js';
 // on a wrapper because MUI folds an Emotion class handed to one of its
@@ -17,8 +18,9 @@ export function useRevealFieldActions() {
         [`&:hover .${reveal}, &:focus-within .${reveal}`]: { opacity: 1 },
     });
 }
-export default function FieldActionsButton({ path, value, fieldActions, }) {
+const FieldActionsButton = observer(function FieldActionsButton({ path, value, fieldActions, }) {
     const { classes } = useStyles();
     const items = fieldActions?.(path, value) ?? [];
     return items.length > 0 ? (_jsx("span", { className: classes.reveal, children: _jsx(CascadingMenuButton, { menuItems: items, size: "small", tooltip: "Filter by this value", style: { padding: 0 }, children: _jsx(FilterListIcon, { fontSize: "small" }) }) })) : null;
-}
+});
+export default FieldActionsButton;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldName.d.ts

@@ -1,6 +1,7 @@
-export default function FieldName({ description, name, width, prefix, }: {
+declare const FieldName: ({ description, name, width, prefix, }: {
     description?: React.ReactNode;
     name: string;
     prefix?: string[];
     width?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FieldName;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldName.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import { cx, makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     fieldDescription: {
@@ -17,8 +18,9 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(0.5),
     },
 }));
-export default function FieldName({ description, name, width, prefix = [], }) {
+const FieldName = observer(function FieldName({ description, name, width, prefix = [], }) {
     const { classes } = useStyles();
     const val = [...prefix, name].join('.');
     return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), style: { width }, children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width }, children: val }));
-}
+});
+export default FieldName;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Formatter.d.ts

@@ -1,3 +1,4 @@
-export default function Formatter({ value }: {
+declare const Formatter: ({ value }: {
     value: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default Formatter;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Formatter.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { observer } from 'mobx-react';
 import { useCopyToClipboard } from '../../ui/useCopyToClipboard.js';
 import { ValueText, isBareUrl, valueText } from './BasicValue.js';
 const TRUNCATE_LENGTH = 100;
@@ -7,7 +8,7 @@ const TRUNCATE_LENGTH = 100;
 // (e.g. a SEQ/CRAM string, or a long read's worth of data in a single div) can
 // slow down the rest of the app, so they are truncated until expanded. A URL
 // is left whole, since a truncated one links nowhere
-export default function Formatter({ value }) {
+const Formatter = observer(function Formatter({ value }) {
     const [show, setShow] = useState(false);
     const { copied, copy } = useCopyToClipboard(700);
     const display = valueText(value);
@@ -16,4 +17,5 @@ export default function Formatter({ value }) {
                 }, children: copied ? 'Copied to clipboard' : 'Copy' }), _jsx("button", { type: "button", onClick: () => {
                     setShow(val => !val);
                 }, children: show ? 'Show less' : 'Show more' }), _jsx("div", { children: show ? (_jsx(ValueText, { text: display })) : (`${display.slice(0, TRUNCATE_LENGTH)}...`) })] })) : (_jsx(ValueText, { text: display }));
-}
+});
+export default Formatter;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ParentFeatureLine.d.ts

@@ -1,4 +1,5 @@
 import type { ParentFeatureSummary } from '../../util/index.ts';
-export default function ParentFeatureLine({ parentFeature, }: {
+declare const ParentFeatureLine: ({ parentFeature, }: {
     parentFeature: ParentFeatureSummary;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ParentFeatureLine;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ParentFeatureLine.js

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     line: {
@@ -10,8 +11,9 @@ const useStyles = makeStyles()(theme => ({
 // The panel is opened on the exact isoform the click resolved to, and that
 // isoform's own record is regularly the only place its accession appears --
 // nothing in `NM_004006.2 - mRNA` says DMD.
-export default function ParentFeatureLine({ parentFeature, }) {
+const ParentFeatureLine = observer(function ParentFeatureLine({ parentFeature, }) {
     const { classes } = useStyles();
     const { name, type } = parentFeature;
     return (_jsxs(Typography, { variant: "body2", color: "textSecondary", className: classes.line, "data-testid": "parent-feature-line", children: ["in ", type ? `${type} ` : '', name] }));
-}
+});
+export default ParentFeatureLine;

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.d.ts

@@ -1,5 +1,5 @@
 import type { FeatureFormatter, FieldActions } from '../types.tsx';
-export default function SimpleField({ name, value, description, prefix, width, formatter, fieldActions, }: {
+declare const SimpleField: ({ name, value, description, prefix, width, formatter, fieldActions, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown;
@@ -7,4 +7,5 @@ export default function SimpleField({ name, value, description, prefix, width, f
     width?: number;
     formatter?: FeatureFormatter;
     fieldActions?: FieldActions;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default SimpleField;

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { makeStyles } from '../../util/tss-react/index.js';
 import BasicValue from './BasicValue.js';
 import FieldActionsButton, { useRevealFieldActions, } from './FieldActionsButton.js';
@@ -9,8 +10,9 @@ const useStyles = makeStyles()({
         flexWrap: 'wrap',
     },
 });
-export default function SimpleField({ name, value, description, prefix, width, formatter, fieldActions, }) {
+const SimpleField = observer(function SimpleField({ name, value, description, prefix, width, formatter, fieldActions, }) {
     const { classes, cx } = useStyles();
     const reveal = useRevealFieldActions();
     return value != null ? (_jsxs("div", { className: cx(classes.field, reveal), children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), _jsx(BasicValue, { value: formatter ? formatter(value, name) : value }), _jsx(FieldActionsButton, { path: [...(prefix ?? []), name], value: value, fieldActions: fieldActions })] })) : null;
-}
+});
+export default SimpleField;

package/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.d.ts

@@ -1,4 +1,4 @@
-export default function UriField({ value, prefix, name, width, }: {
+declare const UriField: ({ value, prefix, name, width, }: {
     value: {
         uri: string;
         baseUri?: string;
@@ -6,4 +6,5 @@ export default function UriField({ value, prefix, name, width, }: {
     name: string;
     prefix: string[];
     width?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default UriField;

package/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import SimpleField from './SimpleField.js';
-export default function UriField({ value, prefix, name, width, }) {
+const UriField = observer(function UriField({ value, prefix, name, width, }) {
     const { uri, baseUri = '' } = value;
     let href;
     try {
@@ -12,4 +13,5 @@ export default function UriField({ value, prefix, name, width, }) {
     // width forwarded like any other field's: without it a URI row sized its own
     // label to content and sat out of the column every row beside it shares
     return _jsx(SimpleField, { name: name, prefix: prefix, value: href, width: width });
-}
+});
+export default UriField;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceBody.d.ts

@@ -2,7 +2,7 @@ import type { RpcStatus, SimpleFeatureSerialized } from '../../util/index.ts';
 import type { ErrorState, SeqState } from '../util.tsx';
 import type { SequenceDisplayMode, SequenceFeatureDetailsModel, SequenceHoverTarget } from './model.ts';
 import type { RefObject } from 'react';
-export default function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }: {
+declare const SequenceBody: ({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }: {
     error: unknown;
     sequence: SeqState | ErrorState | undefined;
     status?: RpcStatus;
@@ -15,4 +15,5 @@ export default function SequenceBody({ error, sequence, status, feature, seqPane
     assemblyName?: string;
     hoverTarget?: SequenceHoverTarget;
     onForceLoad: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SequenceBody;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceBody.js

@@ -1,10 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { ErrorBanner, LoadingEllipses } from '../../ui/index.js';
 import { statusProgressLabel } from '../../util/progress.js';
 import SequencePanel from './SequencePanel.js';
-export default function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }) {
+const SequenceBody = observer(function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }) {
     return (_jsx("div", { children: error ? (_jsx(ErrorBanner, { error: error })) : !sequence ? (_jsx(LoadingEllipses, { message: statusProgressLabel(status) })) : 'error' in sequence ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "error", children: sequence.error }), _jsx(Button, { onClick: () => {
                         onForceLoad();
                     }, children: "Force load" })] })) : (_jsx(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: model, mode: mode, revcomp: revcomp, assemblyGeneticCodeId: assemblyGeneticCodeId, assemblyName: assemblyName, hoverTarget: hoverTarget })) }));
-}
+});
+export default SequenceBody;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.d.ts

@@ -10,5 +10,5 @@ interface SequenceFeatureDetailsProps {
     showOpenInDialog?: boolean;
     canonicalTranscripts?: CanonicalTranscripts;
 }
-declare function SequenceFeatureDetails(props: SequenceFeatureDetailsProps): import("react").JSX.Element;
+declare const SequenceFeatureDetails: (props: SequenceFeatureDetailsProps) => import("react").JSX.Element;
 export default SequenceFeatureDetails;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -5,7 +5,7 @@ import { LoadingEllipses } from '../../ui/index.js';
 import SequenceFeatureMenu from './dialogs/SequenceFeatureMenu.js';
 import SequenceTypeSelector from './dialogs/SequenceTypeSelector.js';
 import TranscriptSelector from './dialogs/TranscriptSelector.js';
-import { getDefaultMode, getTranscripts, pickDefaultTranscriptIndex, } from './featureTypeUtil.js';
+import { getTranscripts, pickDefaultTranscriptIndex, resolveMode, } from './featureTypeUtil.js';
 import { useSequenceFetch } from './useSequenceFetch.js';
 // lazies
 const SequenceBody = lazy(() => import('./SequenceBody.js'));
@@ -20,10 +20,7 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
     const transcripts = getTranscripts(feature);
     const [transcriptIndex, setTranscriptIndex] = useState(() => pickDefaultTranscriptIndex(transcripts, canonicalTranscripts));
     const effectiveFeature = transcripts[transcriptIndex] ?? feature;
-    // mode and revcomp are per-panel state, not on the shared model, so each
-    // subfeature panel (e.g. coding vs noncoding transcripts of one gene) picks
-    // its own sequence type and strand
-    const [mode, setMode] = useState(() => getDefaultMode(effectiveFeature));
+    const mode = resolveMode(model.recentModes, effectiveFeature);
     const [revcomp, setRevcomp] = useState(false);
     const [openInDialog, setOpenInDialog] = useState(false);
     // spread into whichever readout is mounted, rather than forwarded field by
@@ -40,11 +37,8 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
     // transcript lives in this component's state, so a dialog without the
     // selector strands a multi-transcript gene on whichever one was picked
     // before it opened (the inline copy is behind the modal and unclickable)
-    const transcriptSelector = transcripts.length > 1 ? (_jsx(TranscriptSelector, { transcripts: transcripts, transcriptIndex: transcriptIndex, setTranscriptIndex: index => {
-            setTranscriptIndex(index);
-            setMode(getDefaultMode(transcripts[index]));
-        } })) : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [transcriptSelector, _jsx(SequenceTypeSelector, { model: model, feature: effectiveFeature, mode: mode, setMode: setMode }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: model, session: session, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp, extraItems: showOpenInDialog
+    const transcriptSelector = transcripts.length > 1 ? (_jsx(TranscriptSelector, { transcripts: transcripts, transcriptIndex: transcriptIndex, setTranscriptIndex: setTranscriptIndex })) : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [transcriptSelector, _jsx(SequenceTypeSelector, { model: model, feature: effectiveFeature, mode: mode }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: model, session: session, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp, extraItems: showOpenInDialog
                             ? [
                                 {
                                     label: 'Open in dialog',
@@ -53,7 +47,7 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
                                     },
                                 },
                             ]
-                            : [] })] }), openInDialog ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { ...fetched, sequenceFeatureDetails: model, session: session, transcriptSelector: transcriptSelector, feature: effectiveFeature, mode: mode, setMode: setMode, revcomp: revcomp, setRevcomp: setRevcomp, assemblyName: assemblyName, hoverTarget: hoverTarget, handleClose: () => {
+                            : [] })] }), openInDialog ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { ...fetched, sequenceFeatureDetails: model, session: session, transcriptSelector: transcriptSelector, feature: effectiveFeature, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp, assemblyName: assemblyName, hoverTarget: hoverTarget, handleClose: () => {
                         setOpenInDialog(false);
                     } }) })) : (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceBody, { ...fetched, feature: effectiveFeature, seqPanelRef: seqPanelRef, model: model, mode: mode, revcomp: revcomp, assemblyName: assemblyName, hoverTarget: hoverTarget }) }))] }));
 });
@@ -61,13 +55,10 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
 // a feature-detail widget, so anything holding a SequenceFeatureDetails model
 // (the widget, a track's right-click dialog) renders the same readout.
 //
-// The panel's sequence type, transcript and revcomp are initialized from the
-// feature, and the widget is reused (not remounted) when the user clicks a
-// different feature — so key the panel on the feature to reinitialize them.
-// Otherwise a mode picked on a coding transcript ('cds') survives onto a
-// feature that doesn't offer it, which renders the wrong sequence and puts an
-// out-of-range value in the sequence type selector.
-function SequenceFeatureDetails(props) {
+// The panel's transcript and revcomp are initialized from the feature, and the
+// widget is reused (not remounted) when the user clicks a different feature —
+// so key the panel on the feature to reinitialize them.
+const SequenceFeatureDetails = observer(function SequenceFeatureDetails(props) {
     return _jsx(SequenceFeatureDetailsPanel, { ...props }, props.feature.uniqueId);
-}
+});
 export default SequenceFeatureDetails;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceLegend.d.ts

@@ -1,6 +1,7 @@
-export default function SequenceLegend({ items, }: {
+declare const SequenceLegend: ({ items, }: {
     items: {
         color: string;
         label: string;
     }[];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SequenceLegend;