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

package/esm/ui/StackTraceButton.d.ts

@@ -1,5 +1,6 @@
 import type { IconButtonProps } from '@mui/material';
-export default function StackTraceButton({ error, color, }: {
+declare const StackTraceButton: ({ error, color, }: {
     error: unknown;
     color?: IconButtonProps['color'];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default StackTraceButton;

package/esm/ui/StackTraceButton.js

@@ -2,15 +2,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Suspense, lazy, useState } from 'react';
 import ReportIcon from '@mui/icons-material/Report';
 import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 const ErrorMessageStackTraceDialog = lazy(() => import('./ErrorMessageStackTraceDialog.js'));
 // "Show stack trace" icon button that lazy-loads and opens the stack-trace
 // dialog. Shared by ErrorBanner and ErrorBar so the lazy import and open/close
 // state live in one place.
-export default function StackTraceButton({ error, color, }) {
+const StackTraceButton = observer(function StackTraceButton({ error, color, }) {
     const [showStack, setShowStack] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { color: color, onClick: () => {
                         setShowStack(true);
                     }, children: _jsx(ReportIcon, {}) }) }), showStack ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
                         setShowStack(false);
                     } }) })) : null] }));
-}
+});
+export default StackTraceButton;

package/esm/ui/StatusProgressBar.d.ts

@@ -30,8 +30,9 @@
  * two modules deep, and its own test asserts the rendered tree carries no `Mui*`
  * class, which catches a Material component rendered directly.
  */
-export default function StatusProgressBar({ fraction, className, style, }: {
+declare const StatusProgressBar: ({ fraction, className, style, }: {
     fraction?: number;
     className?: string;
     style?: React.CSSProperties;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default StatusProgressBar;

package/esm/ui/StatusProgressBar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { cx, makeStyles } from '../util/tss-react/index.js';
 import { indeterminateSweep } from './statusProgressKeyframes.js';
 const HEIGHT = 4;
@@ -64,7 +65,7 @@ const useStyles = makeStyles()(theme => ({
  * two modules deep, and its own test asserts the rendered tree carries no `Mui*`
  * class, which catches a Material component rendered directly.
  */
-export default function StatusProgressBar({ fraction, className, style, }) {
+const StatusProgressBar = observer(function StatusProgressBar({ fraction, className, style, }) {
     const { classes } = useStyles();
     const determinate = fraction !== undefined;
     // one clamp for both halves. `statusFraction` clamps its own output, but a
@@ -73,4 +74,5 @@ export default function StatusProgressBar({ fraction, className, style, }) {
     // a negative announce a value below the `aria-valuemin` declared beside it.
     const filled = Math.min(1, Math.max(0, fraction ?? 0));
     return (_jsx("div", { className: cx(classes.track, className), style: style, role: "progressbar", "aria-valuemin": determinate ? 0 : undefined, "aria-valuemax": determinate ? 100 : undefined, "aria-valuenow": determinate ? Math.round(filled * 100) : undefined, children: _jsx("div", { className: cx(classes.bar, determinate ? undefined : classes.sweep), style: determinate ? { transform: `scaleX(${filled})` } : undefined }) }));
-}
+});
+export default StatusProgressBar;

package/esm/ui/SubmitForm.d.ts

@@ -20,4 +20,5 @@ export interface SubmitFormProps {
  * outer chrome) is shared across several tab panes uses this directly, so the
  * panes get the same keyboard behavior without each owning a Dialog.
  */
-export default function SubmitForm({ onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, }: SubmitFormProps): import("react").JSX.Element;
+declare const SubmitForm: ({ onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, }: SubmitFormProps) => import("react").JSX.Element;
+export default SubmitForm;

package/esm/ui/SubmitForm.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, DialogActions, DialogContent } from '@mui/material';
+import { observer } from 'mobx-react';
 /**
  * Content plus a Cancel/Submit footer, wrapped in a form so Enter submits.
  * SubmitDialog is this with a Dialog around it; a dialog whose Dialog (and
  * outer chrome) is shared across several tab panes uses this directly, so the
  * panes get the same keyboard behavior without each owning a Dialog.
  */
-export default function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel', submitText = 'Submit', submitDisabled = false, submitColor = 'primary', submitStartIcon, onReset, resetText = 'Restore default', actions, contentClassName, children, }) {
+const SubmitForm = observer(function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel', submitText = 'Submit', submitDisabled = false, submitColor = 'primary', submitStartIcon, onReset, resetText = 'Restore default', actions, contentClassName, children, }) {
     return (_jsxs("form", { onSubmit: event => {
             event.preventDefault();
             if (!submitDisabled) {
@@ -20,4 +21,5 @@ export default function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel',
                                 onCancel();
                             }
                         }, children: onReset ? resetText : cancelText }), actions, _jsx(Button, { type: "submit", color: submitColor, variant: "contained", disabled: submitDisabled, startIcon: submitStartIcon, children: submitText })] })] }));
-}
+});
+export default SubmitForm;

package/esm/ui/SvgColorLegend.d.ts

@@ -3,11 +3,10 @@ export type { ColorLegendEntry } from './legendSpec.ts';
 export declare const LEGEND_ROW_HEIGHT = 14;
 export declare const LEGEND_SWATCH = 10;
 /**
- * Horizontal space the LGV export reserves beside the plot for a display whose
- * legend asked to sit off the plot (`LegendMixin.svgLegendWidth`): the widest
- * row this draws for a ramp, plus a margin either side.
+ * Width of the paper `SvgColorLegend` draws for `entries` under `maxHeight`, 0
+ * when it draws nothing.
  */
-export declare const LEGEND_SVG_GUTTER_WIDTH: number;
+export declare function svgColorLegendWidth(entries: ColorLegendEntry[], maxHeight?: number): number;
 export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }: {
     entries: ColorLegendEntry[];
     canvasWidth: number;

package/esm/ui/SvgColorLegend.js

@@ -15,12 +15,6 @@ const GRADIENT_BAR_WIDTH = 100;
 const GRADIENT_BAR_HEIGHT = 10;
 // the bar plus the row of domain labels under it
 const GRADIENT_ROW_HEIGHT = GRADIENT_BAR_HEIGHT + 4 + LEGEND_ROW_HEIGHT;
-/**
- * Horizontal space the LGV export reserves beside the plot for a display whose
- * legend asked to sit off the plot (`LegendMixin.svgLegendWidth`): the widest
- * row this draws for a ramp, plus a margin either side.
- */
-export const LEGEND_SVG_GUTTER_WIDTH = GRADIENT_BAR_WIDTH + 40;
 // A row's swatches, with the flat `color` shorthand read as the single
 // square it has always drawn.
 function entrySwatches(entry) {
@@ -59,23 +53,16 @@ function fitEntries(entries, maxHeight) {
     }
     return shown;
 }
+// eslint-disable-next-line no-restricted-syntax -- drawn inside a frozen SVG figure
 function GradientRow({ entry, width, gradientId, }) {
     const { stops, minLabel, maxLabel } = entry.gradient;
     const barTop = (entry.label ? LEGEND_ROW_HEIGHT : 0) + 2;
     const labelY = barTop + GRADIENT_BAR_HEIGHT + 2 + FONT_SIZE;
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: 0, width: width, height: rowHeight(entry), fill: "rgba(255,255,255,0.95)" }), entry.label ? (_jsx("text", { x: SWATCH_LEFT, y: 11, fontSize: FONT_SIZE, fill: "black", children: entry.label })) : null, _jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: stops.map(stop => (_jsx("stop", { offset: stop.offset, style: { stopColor: stop.color, stopOpacity: stop.opacity ?? 1 } }, stop.offset))) }) }), _jsx("rect", { x: SWATCH_LEFT, y: barTop, width: GRADIENT_BAR_WIDTH, height: GRADIENT_BAR_HEIGHT, fill: `url(#${gradientId})`, rx: 2 }), _jsx("text", { x: SWATCH_LEFT, y: labelY, fontSize: FONT_SIZE, fill: "black", children: minLabel }), _jsx("text", { x: SWATCH_LEFT + GRADIENT_BAR_WIDTH, y: labelY, fontSize: FONT_SIZE, fill: "black", textAnchor: "end", children: maxLabel })] }));
 }
-// Shared SVG color key: one translucent row per entry — a swatch and a label,
-// or a ramp bar with its domain ends — right-aligned within `canvasWidth`, or
-// at `x` when the caller places it (the LGV export's legend gutter). A <g>, so
-// an on-screen SVG overlay and the export share one renderer.
-//
-// `maxHeight` (the display height) caps the box: entries past what fits
-// collapse into a trailing "+N more" summary row, so the legend never overflows
-// its display — the full list stays reachable via the track menu.
-export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }) {
-    const reactId = useId();
-    const legendId = idPrefix ?? reactId;
+// What the key draws for `entries` under `maxHeight`, and how wide its paper
+// is, so a caller sizing a gutter measures the box this renders.
+function legendBox(entries, maxHeight) {
     const shown = maxHeight === undefined ? entries : fitEntries(entries, maxHeight);
     const cutRows = entries.slice(shown.length).filter(keysAColor).length;
     const overflowLabel = cutRows > 0 ? `+${cutRows} more` : undefined;
@@ -95,12 +82,34 @@ export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, tes
         contentRight = Math.max(contentRight, textLeft + measureLegendText(overflowLabel, FONT_SIZE));
     }
     const totalWidth = contentRight + 6;
-    const left = x ?? Math.max(0, canvasWidth - totalWidth - 4);
     const rowTops = [];
     let y = 0;
     for (const entry of shown) {
         rowTops.push(y);
         y += rowHeight(entry);
     }
+    return { shown, overflowLabel, textLeft, totalWidth, rowTops, bottom: y };
+}
+/**
+ * Width of the paper `SvgColorLegend` draws for `entries` under `maxHeight`, 0
+ * when it draws nothing.
+ */
+export function svgColorLegendWidth(entries, maxHeight) {
+    const { shown, overflowLabel, totalWidth } = legendBox(entries, maxHeight);
+    return shown.length || overflowLabel ? totalWidth : 0;
+}
+// Shared SVG color key: one translucent row per entry — a swatch and a label,
+// or a ramp bar with its domain ends — right-aligned within `canvasWidth`, or
+// at `x` when the caller places it (an export's legend gutter). A <g>, so
+// an on-screen SVG overlay and the export share one renderer.
+//
+// `maxHeight` (the display height) caps the box: entries past what fits
+// collapse into a trailing "+N more" summary row, so the legend never overflows
+// its display — the full list stays reachable via the track menu.
+export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, testid, idPrefix, }) {
+    const reactId = useId();
+    const legendId = idPrefix ?? reactId;
+    const { shown, overflowLabel, textLeft, totalWidth, rowTops, bottom: y, } = legendBox(entries, maxHeight);
+    const left = x ?? Math.max(0, canvasWidth - totalWidth - 4);
     return shown.length || overflowLabel ? (_jsxs("g", { transform: `translate(${left} 0)`, "data-testid": testid, children: [shown.map((entry, idx) => (_jsx("g", { transform: `translate(0 ${rowTops[idx]})`, children: entry.gradient ? (_jsx(GradientRow, { entry: entry, width: totalWidth, gradientId: svgSafeId(`${legendId}-${entry.key}`) })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: 0, width: totalWidth, height: LEGEND_ROW_HEIGHT, fill: "rgba(255,255,255,0.95)" }), _jsxs("g", { opacity: entry.hidden ? 0.35 : 1, children: [entrySwatches(entry).map((swatch, i) => (_jsx(LegendSwatchGlyph, { swatch: swatch, size: LEGEND_SWATCH, x: SWATCH_LEFT + i * (LEGEND_SWATCH + SWATCH_GAP), y: 2 }, `${swatch.shape}-${swatch.color}`))), _jsx("text", { x: textLeft, y: 11, fontSize: FONT_SIZE, fill: "black", textDecoration: entry.hidden ? 'line-through' : undefined, children: entry.label })] })] })) }, entry.key))), overflowLabel === undefined ? null : (_jsxs("g", { transform: `translate(0 ${y})`, children: [_jsx("rect", { x: 0, y: 0, width: totalWidth, height: LEGEND_ROW_HEIGHT, fill: "rgba(255,255,255,0.95)" }), _jsx("text", { x: textLeft, y: 11, fontSize: FONT_SIZE, fill: "#555", children: overflowLabel })] }))] })) : null;
 }

package/esm/ui/TagTextField.d.ts

@@ -36,5 +36,5 @@ type Props = Omit<TextFieldProps, 'value' | 'onChange' | 'error' | 'helperText'
  * 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: Props): import("react").JSX.Element;
-export {};
+declare const TagTextField: (props: Props) => import("react").JSX.Element;
+export default TagTextField;

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/buildExtraTrackMenuItems.d.ts

@@ -1,10 +1,10 @@
 import type PluginManager from '../PluginManager.ts';
-import type { AnyConfigurationModel } from '../configuration/index.ts';
+import type { AnyTrackConfig } from '../configuration/index.ts';
 import type { AbstractSessionModel, TrackActionView } from '../util/types/index.ts';
 import type { MenuItem } from './MenuTypes.ts';
 export interface ExtraTrackMenuItemsProps {
     session: AbstractSessionModel;
-    config: AnyConfigurationModel;
+    config: AnyTrackConfig;
     view?: TrackActionView;
 }
 /** Return the items to add, or nothing when the track isn't yours. */

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,11 +15,9 @@ export declare const paletteColors: {
  * The wide qualitative palette: every scheme above, in order, deduped and with
  * the neutrals dropped. ~40 entries.
  *
- * One list, because "give each row a distinct color" is one question this repo
- * answers in two places — the multi-row painter handing colors out by row
- * index, and the arrangement dialog's palette-by-attribute — and two lists
- * would mean a track's automatic colors and the colors it takes when a user
- * palettes it by hand were different palettes for no reason a reader could see.
+ * 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.
  *
  * `tableau10` leads because its hues are the most evenly separated, so a track
  * with a handful of rows spends only that. The tail is what makes the 26
@@ -31,21 +29,16 @@ export declare const paletteColors: {
  * re-palettes), while a by-position painter has no value to hash and wraps.
  *
  * **It holds 14 pairs `similarColors` calls the same** — five schemes' blues,
- * oranges, greens, reds and pinks — and deduping it at construction is the
- * wrong reading of that, measured on the 38 GENCODE gene biotypes. Hashed,
- * which is what a track with no `colorDomain` does, 30 of them land on 22
- * colors and 38 on 26; the loss is the birthday collision on 40 slots, not the
- * near-twins, and only 3 of the pairs they land on read alike. Pruning to the
- * 30 distinct entries makes that 23 and 24, so it costs ten colors and buys
- * nothing.
+ * oranges, greens, reds and pinks. A dealt scale (`categoricalScale`'s `held`)
+ * steps over a twin of a color already dealt, so they cost a track only once
+ * it has more values than the 30 distinct entries.
  *
- * The near-twins bite the PINNED case instead, where a `domain` spends the
- * list in order: 30 listed values take 30 colors today and 7 of those pairs
- * read alike. Ordering the distinct 30 first and the twins behind them fixes
- * that outright (0 pairs at 30 listed values, 11 at 38 where the twins are
- * reached anyway) and costs no colors — but it moves every hashed color in
- * marks, GWAS, canvas, multi-row and the arrangement dialog, so it is a pass
- * with a figure refresh in it.
+ * The near-twins bite a `domain` instead, which spends the list in order: 30
+ * listed values take 30 colors and 7 of those pairs read alike. Ordering the
+ * distinct 30 first and the twins behind them fixes that outright (0 pairs at
+ * 30 listed values, 11 at 38 where the twins are reached anyway) and costs no
+ * colors — but it moves every hashed color in marks, GWAS, canvas, multi-row
+ * and the arrangement dialog, so it is a pass with a figure refresh in it.
  */
 export declare const categoricalPalette: string[];
 /**
@@ -60,18 +53,30 @@ export declare const categoricalPalette: string[];
 export declare function categoricalValueColor(value: string): string;
 export declare function categoricalValueColor<T>(value: string, palette: readonly T[]): T;
 /**
- * The categorical rule every scaled channel resolves through. With no
- * `domain` a value takes `categoricalValueColor`'s slot in `range`. With one,
- * the listed values take `range` in order, continuing into the `fallback`
- * entries `range` lacks past its end, and any other value takes a slot of the
- * whole list derived from itself that no listed value holds, nor one
- * `isNear` calls the same. A value's entry depends only on the value and the
- * declaration, so every region agrees on it, and adding a listed value moves
- * only the unlisted values on the slots it takes.
+ * The slots a categorical scale has dealt the values it met that its `domain`
+ * does not list, each recorded on first sight and never dealt again. The
+ * caller owns it and hands the same one to every scale that should agree.
  */
-export declare function categoricalScale<T>(domain: readonly (string | number)[] | undefined, range: readonly T[], { fallback, isNear, }?: {
+export type HeldSlots = Map<string, number>;
+/**
+ * The categorical rule every scaled channel resolves through. The values
+ * `domain` lists take `range` in order, continuing into the `fallback`
+ * entries `range` lacks past its end. Any other value takes the slot derived
+ * from itself (`categoricalValueColor`'s, with no `domain`) unless a listed
+ * value holds it or one `isNear` calls the same, and then another slot derived
+ * from itself.
+ *
+ * With `held`, a value is dealt once, on first sight: its slot avoids every
+ * slot `held` already records and their near twins as well, so values met
+ * together never share an entry while the list has room, and the slot is
+ * recorded so the value keeps it as others arrive. A value nothing else
+ * collides with keeps the entry it takes without `held`. With no `domain`, the
+ * deal spends `range` before spilling into the `fallback` entries it lacks.
+ */
+export declare function categoricalScale<T>(domain: readonly (string | number)[] | undefined, range: readonly T[], { fallback, isNear, held, }?: {
     fallback?: readonly T[];
     isNear?: (a: T, b: T) => boolean;
+    held?: HeldSlots;
 }): (value: string) => T;
 /**
  * Whether two CSS colors read as one: under 0.05 apart in OKLab, where the
@@ -81,9 +86,10 @@ export declare function similarColors(a: string, b: string): boolean;
 /**
  * `categoricalScale` for a color channel: `palette` (the wide palette when
  * empty) spent in `domain` order and continued into the wide palette, and an
- * unlisted value never on a listed value's color or one that reads the same.
+ * unlisted value never on a listed value's color or one that reads the same,
+ * nor, with `held`, on the color of a value met before it.
  */
-export declare function categoricalColorScale(domain: readonly (string | number)[] | undefined, palette?: readonly string[]): (value: string) => string;
+export declare function categoricalColorScale(domain: readonly (string | number)[] | undefined, palette?: readonly string[], held?: HeldSlots): (value: string) => string;
 /**
  * The color one value of a categorical color channel paints, by
  * `categoricalColorScale`. A value-less feature is neutral grey, and an array
@@ -104,6 +110,11 @@ export declare function hashString(str: string): number;
 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 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;
 /**
  * The color a refName paints, BY POSITION IN THE ASSEMBLY where the caller
  * knows its chromosome order.
@@ -121,7 +132,7 @@ export declare function refNamePaletteColorAt(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 };