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

package/esm/ui/TagTextField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Chip, Stack, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 import { isValidTag } from '../util/tags.js';
 /**
  * Uncontrolled-style TextField for a two-character SAM tag (e.g. HP, RG, XS).
@@ -9,7 +10,7 @@ import { isValidTag } from '../util/tags.js';
  * error once two invalid characters are entered. Optional `quickPicks` render a
  * chip row of common tags that fill the field on click.
  */
-export default function TagTextField(props) {
+const TagTextField = observer(function TagTextField(props) {
     const { defaultValue = '', onValueChange, helperText, inputTestId, quickPicks, ...rest } = props;
     const [text, setText] = useState(defaultValue);
     const showError = text.length === 2 && !isValidTag(text);
@@ -29,4 +30,5 @@ export default function TagTextField(props) {
                 }, onChange: event => {
                     setValue(event.target.value);
                 } })] }));
-}
+});
+export default TagTextField;

package/esm/ui/ViewLoadingScreen.d.ts

@@ -18,8 +18,9 @@
  * {@link LoadingProgress} directly — bare, it renders an unconstrained
  * full-width bar under an unaligned label.
  */
-export default function ViewLoadingScreen({ message, progress, source, }: {
+declare const ViewLoadingScreen: ({ message, progress, source, }: {
     message?: string;
     progress?: number;
     source?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ViewLoadingScreen;

package/esm/ui/ViewLoadingScreen.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { useSlowLoad, useStalled } from '../util/hooks.js';
 import { makeStyles } from '../util/tss-react/index.js';
 import LoadingProgress from './LoadingProgress.js';
@@ -44,9 +45,10 @@ const useStyles = makeStyles()(theme => ({
  * {@link LoadingProgress} directly — bare, it renders an unconstrained
  * full-width bar under an unaligned label.
  */
-export default function ViewLoadingScreen({ message, progress, source, }) {
+const ViewLoadingScreen = observer(function ViewLoadingScreen({ message, progress, source, }) {
     const { classes } = useStyles();
     const slow = useSlowLoad();
     const stalled = useStalled(`${message}|${progress}|${source}`);
     return (_jsxs("div", { className: classes.root, children: [_jsx(LoadingProgress, { variant: "h6", message: slow ? message : undefined, fraction: slow ? progress : undefined, barClassName: classes.bar }), stalled && source ? (_jsxs(Typography, { variant: "body2", className: classes.stalled, children: ["still waiting on ", source] })) : null] }));
-}
+});
+export default ViewLoadingScreen;

package/esm/ui/colorScale.d.ts

@@ -56,7 +56,7 @@ export interface RampScale {
     format?: (value: number) => string;
     /**
      * The loaded values' extremes. An end of `domain` the data runs past prints
-     * `≤` or `≥`, since the ramp paints every value beyond it in its end colour.
+     * `≤` or `≥`, since the ramp paints every value beyond it in its end color.
      */
     extent?: readonly [number, number];
 }
@@ -66,6 +66,10 @@ export interface RampScale {
  * the key cannot list a color nothing painted.
  */
 export type ColorScale = CategoricalScale | RampScale;
+export declare function rampLabels({ domain, format, extent, }: RampScale): {
+    minLabel: string;
+    maxLabel: string;
+};
 /**
  * The one derivation of a legend from a display's color scales: a section per
  * scale, in the order declared. On screen `FloatingLegend` renders the result

package/esm/ui/colorScale.js

@@ -1,9 +1,6 @@
 import { groupKeyComparator } from '../util/groupKeys.js';
 import { formatScore } from '../util/numericUtils.js';
-// A lone ramp names itself on its row: `FloatingLegend` and `legendEntries`
-// draw a section's title only beside other sections, and a bar of numbers
-// with nothing saying what they count is not a key.
-function rampItem({ title, domain, stops, format = formatScore, extent }, lone) {
+export function rampLabels({ domain, format = formatScore, extent, }) {
     const [min, max] = domain;
     const [lo, hi] = extent ?? domain;
     // compared at float32 as well, since a value lane carries the extent in one
@@ -11,12 +8,17 @@ function rampItem({ title, domain, stops, format = formatScore, extent }, lone)
     const below = lo < min && Math.fround(lo) < Math.fround(min);
     const above = hi > max && Math.fround(hi) > Math.fround(max);
     return {
-        label: lone ? (title ?? '') : '',
-        gradient: {
-            stops,
-            minLabel: `${below ? '≤' : ''}${format(min)}`,
-            maxLabel: `${above ? '≥' : ''}${format(max)}`,
-        },
+        minLabel: `${below ? '≤' : ''}${format(min)}`,
+        maxLabel: `${above ? '≥' : ''}${format(max)}`,
+    };
+}
+// A lone ramp names itself on its row: `FloatingLegend` and `legendEntries`
+// draw a section's title only beside other sections, and a bar of numbers
+// with nothing saying what they count is not a key.
+function rampItem(scale, lone) {
+    return {
+        label: lone ? (scale.title ?? '') : '',
+        gradient: { stops: scale.stops, ...rampLabels(scale) },
     };
 }
 function sectionOf(scale, lone) {

package/esm/ui/colors.d.ts

@@ -15,7 +15,7 @@ export declare const paletteColors: {
  * The wide qualitative palette: every scheme above, in order, deduped and with
  * the neutrals dropped. ~40 entries.
  *
- * A feature's categorical colour deals from it; a row's deals from
+ * A feature's categorical color deals from it; a row's deals from
  * `rowPaletteColorAt`, which re-lights tableau10 rather than reaching for
  * another scheme's hues.
  *
@@ -111,7 +111,7 @@ export declare function getQueryColor(queryName: string): string;
 /** The palette color for a chromosome at `position` in its assembly. */
 export declare function refNamePaletteColorAt(position: number): string;
 /**
- * The colour the row palette deals the row or value at `position`: tableau10
+ * The color the row palette deals the row or value at `position`: tableau10
  * less its grey, then re-lit laps of it, as a karyotype's are.
  */
 export declare function rowPaletteColorAt(position: number): string;
@@ -132,7 +132,7 @@ export declare function rowPaletteColorAt(position: number): string;
 export declare function refNameColor(name: string, position: number | undefined): string;
 /**
  * A palette named in `namedPalettes`, or a comma-separated list of CSS
- * colours; undefined, with a warning, for anything else.
+ * colors; undefined, with a warning, for anything else.
  */
 export declare function paletteFromSpec(spec: unknown): readonly string[] | undefined;
 export { category10, set1 };

package/esm/ui/colors.js

@@ -98,7 +98,7 @@ export const paletteColors = {
  * The wide qualitative palette: every scheme above, in order, deduped and with
  * the neutrals dropped. ~40 entries.
  *
- * A feature's categorical colour deals from it; a row's deals from
+ * A feature's categorical color deals from it; a row's deals from
  * `rowPaletteColorAt`, which re-lights tableau10 rather than reaching for
  * another scheme's hues.
  *
@@ -341,7 +341,7 @@ const PALETTE_LAP_TONES = [
     // and pinks all pin against the top of the sRGB gamut and converge there.
     { lightnessShift: 0.18, chromaScale: 0.8 },
 ];
-// The colour at `position` in `hexes`, each lap past the end re-lit.
+// The color at `position` in `hexes`, each lap past the end re-lit.
 function lapColorAt(hexes, position) {
     const hex = hexes[position % hexes.length];
     const lap = PALETTE_LAP_TONES[Math.floor(position / hexes.length) % PALETTE_LAP_TONES.length];
@@ -353,7 +353,7 @@ export function refNamePaletteColorAt(position) {
 }
 const rowColorHexes = tableau10.filter(hex => !NEUTRALS.has(hex));
 /**
- * The colour the row palette deals the row or value at `position`: tableau10
+ * The color the row palette deals the row or value at `position`: tableau10
  * less its grey, then re-lit laps of it, as a karyotype's are.
  */
 export function rowPaletteColorAt(position) {
@@ -390,7 +390,7 @@ const okabeIto = [
     '#d55e00',
     '#cc79a7',
 ];
-// Paul Tol, "Colour Schemes", SRON/EPS/TN/09-002 (2021), the bright scheme
+// Paul Tol, "Color Schemes", SRON/EPS/TN/09-002 (2021), the bright scheme
 const tolBright = [
     '#4477aa',
     '#ee6677',
@@ -399,7 +399,7 @@ const tolBright = [
     '#66ccee',
     '#aa3377',
 ];
-// Paul Tol, "Colour Schemes", SRON/EPS/TN/09-002 (2021), the muted scheme
+// Paul Tol, "Color Schemes", SRON/EPS/TN/09-002 (2021), the muted scheme
 const tolMuted = [
     '#cc6677',
     '#332288',
@@ -448,7 +448,7 @@ const namedPalettes = {
 };
 /**
  * A palette named in `namedPalettes`, or a comma-separated list of CSS
- * colours; undefined, with a warning, for anything else.
+ * colors; undefined, with a warning, for anything else.
  */
 export function paletteFromSpec(spec) {
     if (typeof spec !== 'string' || spec === '') {
@@ -461,7 +461,7 @@ export function paletteFromSpec(spec) {
     if (colors.every(isCssColor)) {
         return colors;
     }
-    console.warn(`palette "${spec}" is neither one of ${Object.keys(namedPalettes).join(', ')} nor a comma-separated list of CSS colours`);
+    console.warn(`palette "${spec}" is neither one of ${Object.keys(namedPalettes).join(', ')} nor a comma-separated list of CSS colors`);
     return undefined;
 }
 export { category10, set1 };

package/esm/ui/filterMenuItems.d.ts

@@ -13,7 +13,7 @@ import type { MenuItem } from './MenuTypes.ts';
  *   layout-affecting, and reachable only from the pinned feature's own
  *   right-click menu, so a pin left on another chromosome could not be reached);
  * - an undo derived from the state's ABSENCE, so it vanished with the thing it
- *   undid (the canvas colour key's "×" was a one-way door for the session);
+ *   undid (the canvas color key's "×" was a one-way door for the session);
  * - a count derived from a different predicate than the state's actual effect
  *   ("Filter by... (1)" for opening the filter dialog and pressing Submit).
  *
@@ -57,41 +57,20 @@ export declare function clearAll(items: Reversibles): void;
 export declare function undoItems(items: Reversibles, priority?: number): MenuItem[];
 export interface FilterMenuOpts {
     /**
-     * The display's narrowings, declared once (see {@link Reversible}). Supplying
-     * this derives `activeCount`, `recoveryItems` and `onClear` together, so the
-     * count in the label, the rows inside the submenu and what "Clear all filters"
-     * actually clears cannot disagree. Prefer it to spelling the three out.
+     * The display's narrowings, declared once (see {@link Reversible}). The count
+     * in the label, the undo rows inside the submenu and what "Clear all filters"
+     * clears all derive from it, so they cannot disagree. Count a narrowing when
+     * its value is not its **no-op** value, which is not always its config
+     * default: the alignments flag masks default non-zero and are the
+     * no-filtering state.
      */
-    narrowings?: Reversibles;
-    /**
-     * How many independent filters are narrowing the view right now, so the label
-     * can say that something is hiding data. Count a filter when its value is not
-     * its **no-op** value, which is not always its config default: the LD
-     * display's `minorAlleleFrequencyFilter` ships at 0.1 and is genuinely
-     * dropping variants, while the alignments flag masks default non-zero and are
-     * the no-filtering state, so they count only when edited away from it.
-     *
-     * This is usually the only affordance telling the user a filter is silently
-     * hiding rows — nothing else in the track chrome says so.
-     *
-     * Ignored when `narrowings` is given.
-     */
-    activeCount?: number;
+    narrowings: Reversibles;
     /** Opens the display's filter dialog, where it has a single one. */
     onEdit?: () => void;
     /** Controls that belong inside the submenu (inline sliders, further dialogs). */
     subItems?: MenuItem[];
-    /**
-     * Recovery rows offered alongside "Clear all filters" once something is
-     * filtering — the canvas display's "Show N hidden features", for one.
-     */
-    recoveryItems?: MenuItem[];
-    /** Turn every filter off. Offered only while `activeCount` is non-zero. */
-    onClear?: () => void;
-    /** Rides the top-level row; see the canvas display's RECOVERY_PRIORITY. */
+    /** Rides the top-level row, `TRACK_MENU_PRIORITY.recovery` on the canvas display. */
     priority?: number;
-    /** Label for the dialog opener inside the submenu. */
-    editLabel?: string;
 }
 /**
  * The "Filter by..." family, in the one shape every display uses.
@@ -109,4 +88,4 @@ export interface FilterMenuOpts {
  * multi-sample variant track said nothing, anywhere, about the rows it was
  * dropping.
  */
-export declare function filterMenuItems({ narrowings, activeCount: explicitCount, onEdit, subItems, recoveryItems: explicitRecovery, onClear: explicitClear, priority, editLabel, }: FilterMenuOpts): MenuItem[];
+export declare function filterMenuItems({ narrowings, onEdit, subItems, priority, }: FilterMenuOpts): MenuItem[];

package/esm/ui/filterMenuItems.js

@@ -46,36 +46,35 @@ export function undoItems(items, priority) {
  * multi-sample variant track said nothing, anywhere, about the rows it was
  * dropping.
  */
-export function filterMenuItems({ narrowings, activeCount: explicitCount = 0, onEdit, subItems = [], recoveryItems: explicitRecovery = [], onClear: explicitClear, priority, editLabel = 'Edit filters...', }) {
-    // One declaration drives all three, or the caller supplies them separately —
-    // the pre-`Reversible` shape, kept for the displays that haven't adopted it.
-    const count = narrowings ? activeCount(narrowings) : explicitCount;
-    const recoveryItems = narrowings ? undoItems(narrowings) : explicitRecovery;
-    const onClear = narrowings
-        ? () => {
-            clearAll(narrowings);
-        }
-        : explicitClear;
+export function filterMenuItems({ narrowings, onEdit, subItems = [], priority, }) {
+    const count = activeCount(narrowings);
     const label = count > 0 ? `Filter by... (${count})` : 'Filter by...';
     const editItem = onEdit
         ? [
             {
-                label: editLabel,
+                label: 'Edit filters...',
                 icon: FilterAltIcon,
                 onClick: onEdit,
             },
         ]
         : [];
-    const clearItem = onClear && count > 0
+    const clearItem = count > 0
         ? [
             {
                 label: 'Clear all filters',
                 icon: FilterAltOffIcon,
-                onClick: onClear,
+                onClick: () => {
+                    clearAll(narrowings);
+                },
             },
         ]
         : [];
-    const rows = [...editItem, ...subItems, ...recoveryItems, ...clearItem];
+    const rows = [
+        ...editItem,
+        ...subItems,
+        ...undoItems(narrowings),
+        ...clearItem,
+    ];
     if (!rows.length) {
         return [];
     }

package/esm/ui/index.d.ts

@@ -81,7 +81,7 @@ export { hoverBoxStyle } from './hoverBoxStyle.ts';
 export { useMouseState, useMouseTracking } from './useMouseTracking.ts';
 export type { MouseState, MouseTracker } from './useMouseTracking.ts';
 export { VIEW_HEADER_HEIGHT } from './viewHeaderHeight.ts';
-export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
+export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
 export type { ColorLegendEntry } from './SvgColorLegend.tsx';
 export { measureLegendText } from './measureLegendText.ts';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.tsx';

package/esm/ui/index.js

@@ -75,7 +75,7 @@ export { default as Crosshairs } from './Crosshairs.js';
 export { hoverBoxStyle } from './hoverBoxStyle.js';
 export { useMouseState, useMouseTracking } from './useMouseTracking.js';
 export { VIEW_HEADER_HEIGHT } from './viewHeaderHeight.js';
-export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.js';
+export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.js';
 export { measureLegendText } from './measureLegendText.js';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.js';
 export { MAX_LEGEND_ITEMS, legendEntries, legendIsReadable, legendSwatches, nonEmptyLegendSections, } from './legendSpec.js';

package/esm/ui/launchTargetsMenuItem.js

@@ -1,3 +1,4 @@
+import { subMenuIfAny } from './MenuTypes.js';
 /**
  * One launch offer, over the datasets that can serve it: nothing at all when
  * none can, otherwise a submenu naming each. Which dataset a launch reads from
@@ -8,17 +9,12 @@
  * data.
  */
 export function launchTargetsMenuItem({ label, icon, entries, entryLabel, onSelect, }) {
-    return entries.length
-        ? [
-            {
-                label,
-                icon,
-                type: 'subMenu',
-                subMenu: entries.map(entry => ({
-                    label: entryLabel(entry),
-                    onClick: onSelect(entry),
-                })),
-            },
-        ]
-        : [];
+    return subMenuIfAny({
+        label,
+        icon,
+        subMenu: entries.map(entry => ({
+            label: entryLabel(entry),
+            onClick: onSelect(entry),
+        })),
+    });
 }

package/esm/ui/legendMenuItem.d.ts

@@ -1,9 +1,9 @@
 import type { MenuItem } from './MenuTypes.ts';
 import type { SettingRowOptions } from './toggleMenuItems.ts';
 /**
- * The "Show legend" checkbox behind `LegendMixin`'s row and the circular
- * view's. Takes the value and the toggle, in `checkboxItem`'s order, which is
- * all this adds a label to.
+ * The "Show legend" checkbox for a menu with no "Show..." submenu, such as the
+ * circular view's. Inside "Show..." the row reads "Legend"
+ * (`legendCheckboxItem` in `@jbrowse/display-kit/LegendMixin`).
  *
  * The `showLegend` **config slots** stay per display: their default values
  * legitimately differ (a Hi-C color scale is off by default, a variant genotype
@@ -12,5 +12,5 @@ import type { SettingRowOptions } from './toggleMenuItems.ts';
  * `synteny-core`'s color-by legend has no toggle at all: it comes up with the
  * modes that have a key and is dismissed from its own close button.
  */
-/** #menuBuilder showLegendCheckboxItem | the shared "Show legend" checkbox */
+/** #menuBuilder showLegendCheckboxItem | a "Show legend" checkbox outside a "Show..." submenu */
 export declare function showLegendCheckboxItem(checked: boolean, onToggle: () => void, opts?: SettingRowOptions): MenuItem;

package/esm/ui/legendMenuItem.js

@@ -1,8 +1,8 @@
 import { checkboxItem } from './toggleMenuItems.js';
 /**
- * The "Show legend" checkbox behind `LegendMixin`'s row and the circular
- * view's. Takes the value and the toggle, in `checkboxItem`'s order, which is
- * all this adds a label to.
+ * The "Show legend" checkbox for a menu with no "Show..." submenu, such as the
+ * circular view's. Inside "Show..." the row reads "Legend"
+ * (`legendCheckboxItem` in `@jbrowse/display-kit/LegendMixin`).
  *
  * The `showLegend` **config slots** stay per display: their default values
  * legitimately differ (a Hi-C color scale is off by default, a variant genotype
@@ -11,7 +11,7 @@ import { checkboxItem } from './toggleMenuItems.js';
  * `synteny-core`'s color-by legend has no toggle at all: it comes up with the
  * modes that have a key and is dismissed from its own close button.
  */
-/** #menuBuilder showLegendCheckboxItem | the shared "Show legend" checkbox */
+/** #menuBuilder showLegendCheckboxItem | a "Show legend" checkbox outside a "Show..." submenu */
 export function showLegendCheckboxItem(checked, onToggle, opts) {
     return checkboxItem('Show legend', checked, onToggle, opts);
 }

package/esm/ui/menuItemAdornment.d.ts

@@ -3,7 +3,7 @@ import type { MenuItem } from './MenuTypes.ts';
  * The trailing control a menu row draws, resolved at the point of drawing.
  *
  * `endAdornment` is an element the builder already made — synteny's and
- * wiggle's colour swatches — so the row hands it straight through.
+ * wiggle's color swatches — so the row hands it straight through.
  *
  * Lives in one place rather than at each of the four render sites, because the
  * "does any row have one?" predicate and the rendering have to agree — a row

package/esm/ui/menuItemAdornment.js

@@ -2,7 +2,7 @@
  * The trailing control a menu row draws, resolved at the point of drawing.
  *
  * `endAdornment` is an element the builder already made — synteny's and
- * wiggle's colour swatches — so the row hands it straight through.
+ * wiggle's color swatches — so the row hands it straight through.
  *
  * Lives in one place rather than at each of the four render sites, because the
  * "does any row have one?" predicate and the rendering have to agree — a row

package/esm/ui/menuItems.d.ts

@@ -19,5 +19,5 @@ export { withHint } from './menuLabels.ts';
 export { makeRadioSubMenu } from './radioSubMenu.ts';
 export { showLegendCheckboxItem } from './legendMenuItem.ts';
 export type { RadioOption, SettingRowOptions } from './toggleMenuItems.ts';
-export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.ts';
+export { TRACK_MENU_PRIORITY, resolveSubMenu, staysOpenOnClick, subMenuIfAny, } from './MenuTypes.ts';
 export type { BaseMenuItem, CheckboxMenuItem, ClickableMenuItem, CustomMenuItem, MenuDivider, MenuItem, MenuItemClickHandler, MenuItemsGetter, MenuSubHeader, NormalMenuItem, RadioMenuItem, SubMenuItem, } from './MenuTypes.ts';

package/esm/ui/menuItems.js

@@ -18,4 +18,4 @@ export { checkboxItem, radioItem, radioItems, toggleItem, withSubHeader, } from
 export { withHint } from './menuLabels.js';
 export { makeRadioSubMenu } from './radioSubMenu.js';
 export { showLegendCheckboxItem } from './legendMenuItem.js';
-export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
+export { TRACK_MENU_PRIORITY, resolveSubMenu, staysOpenOnClick, subMenuIfAny, } from './MenuTypes.js';

package/esm/ui/menuLabels.d.ts

@@ -14,7 +14,7 @@
 /**
  * #menuBuilder withHint | a row label carrying an aside that is only sometimes there
  *
- * `withHint('Show row separators', tooShort ? 'needs rows 4px or taller' :
+ * `withHint('Row separators', tooShort ? 'needs rows 4px or taller' :
  * undefined)`.
  *
  * The rows that want this are the ones that can be on, correctly on, and doing
@@ -29,7 +29,7 @@
  * has no reason to hover, since from the tick it looks like it already works.
  *
  * AN EM DASH, NOT PARENTHESES. Two of these labels already end in a
- * parenthetical of their own ("Show conservation (% identity)", "Codon changes
+ * parenthetical of their own ("Conservation (% identity)", "Codon changes
  * (amino acids)"), and a second pair straight after the first reads as a typo.
  * It also keeps the aside distinct from the ` - ` that names a permanent half of
  * a label ("Square view - average bp per pixel").

package/esm/ui/menuLabels.js

@@ -14,7 +14,7 @@
 /**
  * #menuBuilder withHint | a row label carrying an aside that is only sometimes there
  *
- * `withHint('Show row separators', tooShort ? 'needs rows 4px or taller' :
+ * `withHint('Row separators', tooShort ? 'needs rows 4px or taller' :
  * undefined)`.
  *
  * The rows that want this are the ones that can be on, correctly on, and doing
@@ -29,7 +29,7 @@
  * has no reason to hover, since from the tick it looks like it already works.
  *
  * AN EM DASH, NOT PARENTHESES. Two of these labels already end in a
- * parenthetical of their own ("Show conservation (% identity)", "Codon changes
+ * parenthetical of their own ("Conservation (% identity)", "Codon changes
  * (amino acids)"), and a second pair straight after the first reads as a typo.
  * It also keeps the aside distinct from the ` - ` that names a permanent half of
  * a label ("Square view - average bp per pixel").

package/esm/ui/palette.d.ts

@@ -253,10 +253,10 @@ export interface JBrowsePalette extends StringColors, NeutralTokens, SemanticCol
     mode: 'light' | 'dark';
     primary: ColorQuad;
     /**
-     * The primary colour where it marks something on the page's own ground,
+     * The primary color where it marks something on the page's own ground,
      * such as a checked box or a selected row. `primary.main` in light mode. In
      * dark mode a primary as deep as midnight vanishes against the background,
-     * so it is the secondary text colour, which the Material controls take there
+     * so it is the secondary text color, which the Material controls take there
      * too.
      */
     accent: string;

package/esm/ui/palette.js

@@ -264,7 +264,7 @@ export const colorPairRR = '#5555bb';
 // the dullest (C* 20.4 against 34.6), which together is what "reads as a smudge"
 // means. Reported on `cancer_sv/k562_bcr_abl_split`: "the arcs for the
 // interchromosomal reads are very dark". The tell is a 2 px stroke — at that
-// weight it was the only colour in either scheme that disappeared, while as a
+// weight it was the only color in either scheme that disappeared, while as a
 // large flat read fill it was merely dull. This slot has to survive both.
 //
 // The fix is that unmappedMate left the warm family (see its own note), which
@@ -330,7 +330,7 @@ export const colorShortInsert = '#f582c0';
  * #color alignments-pair-orientation | Mate unmapped | Mate aligned nowhere
  * #color alignments-insert-size | Mate unmapped | Mate aligned nowhere
  */
-// A NON-COLOUR, at the dark end of the neutral scale on BOTH themes. It takes
+// A NON-COLOR, at the dark end of the neutral scale on BOTH themes. It takes
 // the first half of the `readOverlap` pattern and not the second, and that split
 // is the thing to understand here.
 //
@@ -371,7 +371,7 @@ export const colorShortInsert = '#f582c0';
 // has to survive, not a 40 px square.
 //
 // White was the previous dark value, and it reads as the loudest thing in a dark
-// pileup — louder than the coloured categories it is meant to be quieter than —
+// pileup — louder than the colored categories it is meant to be quieter than —
 // which is the "glaring near-white blocks" failure `colorPairLRDark` already
 // exists to avoid. Going dark also drops the one real cost white carried, dE 9.4
 // to `readOverlap`'s dark #e4e4e4 — which the note that shipped it called dE 7,
@@ -385,10 +385,10 @@ export const colorShortInsert = '#f582c0';
 //
 // IGV goes further than any of this: `setPairOrientation` requires
 // `mate.isMapped()`, so an unmapped mate falls through every branch and takes
-// the default read colour. Going that far loses the one thing the category is
+// the default read color. Going that far loses the one thing the category is
 // for — under insert size, tlen is 0 and would otherwise paint
 // `colorShortInsert`, a false claim — so it keeps a mark, and makes the mark a
-// non-colour.
+// non-color.
 export const colorUnmappedMate = '#000000';
 // See colorUnmappedMate: the same dark neutral, lifted off the #121212 ground by
 // the least that still reads as a read rather than as a hole.
@@ -594,12 +594,12 @@ const defaultBases = {
 };
 const defaultFramesCDS = [
     null,
-    { main: '#FF8080' },
-    { main: '#80FF80' },
+    { main: '#F46868' },
+    { main: '#2EAA2E' },
     { main: '#8080FF' },
     { main: '#8080FF' },
-    { main: '#80FF80' },
-    { main: '#FF8080' },
+    { main: '#2EAA2E' },
+    { main: '#F46868' },
 ];
 const defaultFrames = [
     null,
@@ -726,7 +726,7 @@ export function resolvePalette(args = {}) {
     const preset = presets[themeName] ?? presets.default ?? {};
     const declared = themeName === 'default' ? { ...preset, ...configTheme?.palette } : preset;
     // A palette that declares a `mode` is pinned to it: an admin who registers a
-    // dark `extraThemes` entry picked its colours for dark, and the light half
+    // dark `extraThemes` entry picked its colors for dark, and the light half
     // they never wrote is not JBrowse's to invent. A `mode` in the config `theme`
     // slot is the opposite — the site's starting point for the one palette that
     // merges it — so a reader's own pick wins over that.

package/esm/ui/radioSubMenu.d.ts

@@ -1,4 +1,5 @@
 import type { MenuItem } from './MenuTypes.ts';
+import type { RadioOption } from './toggleMenuItems.ts';
 import type React from 'react';
 /**
  * Build a radio submenu from a `[value, label]` option table keyed on the
@@ -8,7 +9,7 @@ import type React from 'react';
  * appended after the radios (e.g. a related checkbox) within the same submenu.
  *
  * Every display has a submenu of this shape naming the one thing it draws —
- * wiggle's "Plot type", MAF's "Row coloring", Hi-C's "Color scheme", the arc
+ * wiggle's and MAF's "Plot type", Hi-C's "Color scheme", the arc
  * display's "Display mode". The labels stay display-specific (they name
  * genuinely different choices); the construction is shared so a hand-rolled
  * copy can't forget that a settings row keeps the menu open.
@@ -20,9 +21,10 @@ import type React from 'react';
 export declare function makeRadioSubMenu<T extends string>(opts: {
     label: string;
     icon?: React.ElementType;
-    value: T;
+    value: T | undefined;
     onChange: (value: T) => void;
-    options: readonly (readonly [T, string])[];
+    /** `[value, label]` pairs, or `RadioOption`s for rows gated one by one */
+    options: readonly (readonly [T, string] | RadioOption<T>)[];
     extraItems?: MenuItem[];
     /**
      * Prose for the group, on the row that opens it. One "?" here rather than one

package/esm/ui/radioSubMenu.js

@@ -7,7 +7,7 @@ import { radioItems } from './toggleMenuItems.js';
  * appended after the radios (e.g. a related checkbox) within the same submenu.
  *
  * Every display has a submenu of this shape naming the one thing it draws —
- * wiggle's "Plot type", MAF's "Row coloring", Hi-C's "Color scheme", the arc
+ * wiggle's and MAF's "Plot type", Hi-C's "Color scheme", the arc
  * display's "Display mode". The labels stay display-specific (they name
  * genuinely different choices); the construction is shared so a hand-rolled
  * copy can't forget that a settings row keeps the menu open.
@@ -25,7 +25,7 @@ export function makeRadioSubMenu(opts) {
         subMenu: [
             // via radioItems so these keep the menu open like every other
             // setting row — a plot type is usually picked by trying a couple
-            ...radioItems(options.map(([value, label]) => ({ value, label })), value, onChange),
+            ...radioItems(options.map(option => 'value' in option ? option : { value: option[0], label: option[1] }), value, onChange),
             ...extraItems,
         ],
     };

package/esm/ui/rampKey.d.ts

@@ -0,0 +1,15 @@
+import type { RampScale } from './colorScale.ts';
+/**
+ * A ramp's bar as columns, for a host that draws the key itself, such as R
+ * through V8: each stop's `offset`, `#rrggbb` `color` and `opacity`, and the
+ * end labels the on-screen bar prints.
+ */
+export declare function rampKeyOf(scale: RampScale): {
+    minLabel: string;
+    maxLabel: string;
+    id: string;
+    title: string;
+    offset: number[];
+    color: string[];
+    opacity: number[];
+};