@jbrowse/core 5.0.0-beta.4 → 5.0.0-beta.7

package/esm/ui/LegendSwatchGlyph.js

@@ -1,25 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// The one place that decides what each `LegendMark` looks like. Returns bare SVG
-// shapes rather than a rooted <svg>, so the floating legend (which wraps them in
-// an inline <svg>) and the SVG export (which drops them into a row <g>) draw the
-// identical glyph — a display's on-screen key and its exported figure disagreeing
-// about which color is a curve would be worse than neither having marks.
+import { appendGlyph } from '@jbrowse/render-core/marks/glyphPaint';
+import { DIAMOND_GLYPH_SCALE } from '@jbrowse/render-core/shaders/pointMarkConsts';
+import { GLYPH_CODES } from '../util/glyphNames.js';
+// The point shape's own painter, recorded as SVG path data, so the key draws
+// the glyph the plot draws. The diamond paints wider than its diameter and
+// is scaled down to fit the box.
+function glyphPathData(glyph, size, x, y) {
+    const d = [];
+    const path = {
+        moveTo: (px, py) => d.push(`M${px} ${py}`),
+        lineTo: (px, py) => d.push(`L${px} ${py}`),
+        closePath: () => d.push('Z'),
+        rect: (px, py, w, h) => d.push(`M${px} ${py}h${w}v${h}h${-w}Z`),
+        arc: (cx, cy, r) => d.push(`A${r} ${r} 0 1 0 ${cx - r} ${cy}A${r} ${r} 0 1 0 ${cx + r} ${cy}Z`),
+    };
+    const diameter = glyph === 'diamond' ? size / DIAMOND_GLYPH_SCALE : size;
+    appendGlyph(path, GLYPH_CODES[glyph], x + size / 2, y + size / 2, diameter);
+    return d.join('');
+}
+// The one place that decides what a legend swatch looks like. Returns a bare
+// shape rather than a rooted <svg>, so the floating legend (which wraps it in an
+// inline <svg>) and the SVG export (which drops it into a row <g>) draw the
+// identical box.
 //
-// Every shape fills the `size` box from (x, y) so a caller can lay swatches out
-// on a fixed pitch without knowing which mark it is placing.
+// The shape fills the `size` box from (x, y) so a caller can lay swatches out on
+// a fixed pitch.
 export function LegendSwatchGlyph({ swatch, size, x = 0, y = 0, }) {
-    const { color, mark = 'fill' } = swatch;
-    // Thin enough to read as a stroke next to a solid block, thick enough to
-    // carry a color at 10-12px.
-    const strokeWidth = Math.max(2, Math.round(size / 5));
-    if (mark === 'line') {
-        return (_jsx("line", { x1: x, x2: x + size, y1: y + size / 2, y2: y + size / 2, stroke: color, strokeWidth: strokeWidth }));
-    }
-    if (mark === 'curve') {
-        // An arc bulging up out of the box's lower corners, which is the shape of
-        // the connector itself — a pair of endpoints with the curve between them.
-        const inset = strokeWidth / 2;
-        return (_jsx("path", { d: `M${x},${y + size - inset} Q${x + size / 2},${y - size / 3} ${x + size},${y + size - inset}`, fill: "none", stroke: color, strokeWidth: strokeWidth }));
-    }
-    return _jsx("rect", { x: x, y: y, width: size, height: size, fill: color });
+    return swatch.glyph ? (_jsx("path", { d: glyphPathData(swatch.glyph, size, x, y), fill: swatch.color })) : (_jsx("rect", { x: x, y: y, width: size, height: size, fill: swatch.color }));
 }

package/esm/ui/MenuTypes.d.ts

@@ -1,4 +1,3 @@
-import type { Pin } from '../configuration/promotablePin.ts';
 /** #menuItem divider | a horizontal rule; not clickable */
 export interface MenuDivider {
     priority?: number;
@@ -51,7 +50,7 @@ export interface BaseMenuItem {
      */
     keepMenuOpen?: boolean;
     /**
-     * #menuField arbitrary trailing content; prefer `pin`
+     * #menuField arbitrary trailing content
      *
      * Extra content rendered at the trailing (right) edge of the row, after the
      * checkbox/radio decoration and help icon — e.g. a secondary toggle. The
@@ -59,56 +58,10 @@ export interface BaseMenuItem {
      * onClick or dismiss the menu.
      *
      * An **element**, so a module that sets it drags React and whatever it renders
-     * into its own graph. That is fine for the one-off it exists for (synteny's
-     * color swatch) and wrong for the common case, which is why the pin below is
-     * a description instead. Prefer `pin`; reach for this only when the
-     * content is genuinely arbitrary.
+     * into its own graph. Reach for it only when the content is genuinely
+     * arbitrary — synteny's and wiggle's colour swatches are what it exists for.
      */
     endAdornment?: React.ReactNode;
-    /**
-     * #menuField the "apply this to all open tracks of this type" pin; set it through a row builder's `pin` option
-     *
-     * The trailing "default for all tracks of this type" pin, as a **description**
-     * rather than an element — the renderer builds `PinAdornment` from
-     * it. Same rule as a `TrackControlProps` icon name (reference/DISPLAYCHROME.md):
-     * menu-item builders are called from state models and menu modules, which are
-     * eager, so an element here puts MUI's `ToggleButton`, `Tooltip` and two icons
-     * into every host's first paint. It did, until 2026-08-05; see
-     * reference/EAGER_BUNDLE.md.
-     *
-     * Set it through the `pin` option of `checkboxItem` / `toggleItem` /
-     * `radioItem` / `radioItems`, not by hand.
-     *
-     * A `type: 'custom'` row (`makePromotableSizeMenu`) draws its own pin inside
-     * its rendered content and still sets this — the declaration is what lets a
-     * built menu be asked which promotable slots it offers a pin for at all. Such
-     * a row is excluded from the trailing-column reservation; see
-     * `hasMenuItemAdornment`.
-     */
-    pin?: MenuItemPin;
-}
-/**
- * A row's pin declaration: the {@link Pin} `makePin` built, plus the one thing
- * the row knows and the pin doesn't — what to call the setting.
- *
- * **`control` holds the pin by reference; don't flatten this into
- * `interface MenuItemPin extends Pin`.** That was tried, to save the hop every
- * reader spells (`item.pin.control.active`), and it turns the declaration into a
- * *copy* of the control — so a `Pin` whose `toggle` resolves anything through
- * `this` silently mutates the copy and the real control never changes. Nothing in
- * `Pin` promises copy-safety: `makePin` happens to close over what it needs, but
- * the interface is a plain object a plugin can build by hand, and the failure is
- * a pin that draws correctly and does nothing. Two hops in `pinnedSlots` and
- * `menuItemAdornment` is the whole cost of not having that.
- */
-export interface MenuItemPin {
-    control: Pin;
-    /**
-     * Names the setting in the pin's tooltip and aria-label. Carried here rather
-     * than read off the row's `label`, which is a `ReactNode` and may not be a
-     * string; a pin that can't name what it promotes reads as a bug.
-     */
-    label: string;
 }
 /** #menuItem normal | an action row; the default when `type` is omitted */
 export interface NormalMenuItem extends BaseMenuItem {
@@ -133,8 +86,8 @@ export interface RadioMenuItem extends BaseMenuItem {
  * The function form is called when the submenu opens (or a walker asks for its
  * rows), not when the parent menu is built — for a submenu whose rows cost a
  * scan of the display's data to name. Read the field through `resolveSubMenu`
- * rather than by hand, so the two forms stay one thing to the renderer, the
- * pin-coverage walk and every test helper that flattens a menu.
+ * rather than by hand, so the two forms stay one thing to the renderer and to
+ * every test helper that flattens a menu.
  */
 export interface SubMenuItem extends BaseMenuItem {
     type?: 'subMenu';

package/esm/ui/SizeSliderRow.d.ts

@@ -1,6 +1,5 @@
-import type { Pin } from '../configuration/promotablePin.ts';
 import type { SliderScale } from './sliderScale.ts';
-export declare const SizeSliderRow: ({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, pin, }: {
+export declare const SizeSliderRow: ({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, }: {
     title: string;
     getValue: () => number;
     min: number;
@@ -12,5 +11,4 @@ export declare const SizeSliderRow: ({ title, getValue, min, max, step, scale, f
     commitOnRelease?: boolean;
     onChange: (n: number) => void;
     onReset: () => void;
-    pin?: Pin;
 }) => import("react").JSX.Element;

package/esm/ui/SizeSliderRow.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The drawn half of a `makeSizeMenu` row, split out so the builder can reach
 // it through `lazy()`. Everything Material UI in a size row is here: the
-// slider, the reset button, the pin, the caption. See makeSizeMenu.tsx.
+// slider, the reset button, the caption. See makeSizeMenu.tsx.
 import { useState } from 'react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import { ResetToDefaultButton } from './InlineMenuControls.js';
-import { PinAdornment } from './PinAdornment.js';
 import SingleSlider from './SingleSlider.js';
 import { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
 import { sliderScale } from './sliderScale.js';
@@ -24,16 +23,15 @@ const useStyles = makeStyles()(theme => ({
         flex: 1,
     },
 }));
-export const SizeSliderRow = observer(function SizeSliderRow({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, pin, }) {
+export const SizeSliderRow = observer(function SizeSliderRow({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, }) {
     const { classes } = useStyles();
-    const modelValue = getValue();
     const [dragValue, setDragValue] = useState(undefined);
-    const value = dragValue ?? modelValue;
+    const value = dragValue ?? getValue();
     const { toSlider, fromSlider, sliderStep } = sliderScale(scale);
     const slug = title.toLowerCase().replaceAll(' ', '-');
     return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", className: classes.label, children: [title, ": ", format(value)] }), _jsx(ResetToDefaultButton, { disabled: isDefault, onClick: () => {
                             onReset();
-                        } }), pin ? (_jsx(PinAdornment, { pin: { control: pin, label: `${title} (${format(modelValue)})` } })) : null] }), _jsx(SingleSlider, { value: toSlider(value), min: toSlider(min), max: toSlider(max), step: sliderStep ?? step, size: "small", "aria-label": title.toLowerCase(), "data-testid": `${slug}-slider`, valueLabelDisplay: "auto", valueLabelFormat: (v) => format(fromSlider(v)), sx: { py: 0.5, display: 'block' }, onChange: v => {
+                        } })] }), _jsx(SingleSlider, { value: toSlider(value), min: toSlider(min), max: toSlider(max), step: sliderStep ?? step, size: "small", "aria-label": title.toLowerCase(), "data-testid": `${slug}-slider`, valueLabelDisplay: "auto", valueLabelFormat: (v) => format(fromSlider(v)), sx: { py: 0.5, display: 'block' }, onChange: v => {
                     const n = fromSlider(v);
                     if (commitOnRelease) {
                         setDragValue(n);

package/esm/ui/SvgColorLegend.d.ts

@@ -1,13 +1,19 @@
 import type { ColorLegendEntry } from './legendSpec.ts';
-import type { ReactNode } from 'react';
 export type { ColorLegendEntry } from './legendSpec.ts';
 export declare const LEGEND_ROW_HEIGHT = 14;
 export declare const LEGEND_SWATCH = 10;
-export default function SvgColorLegend({ entries, canvasWidth, maxHeight, onDismiss, children, testid, }: {
+/**
+ * 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 declare const LEGEND_SVG_GUTTER_WIDTH: number;
+export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, onDismiss, testid, idPrefix, }: {
     entries: ColorLegendEntry[];
     canvasWidth: number;
+    x?: number;
     maxHeight?: number;
     onDismiss?: () => void;
-    children?: ReactNode;
+    idPrefix?: string;
     testid?: string;
 }): import("react").JSX.Element | null;

package/esm/ui/SvgColorLegend.js

@@ -1,35 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react-refresh/only-export-components -- geometry constants belong with this leaf SVG primitive; no component state to fast-refresh */
+import { useId } from 'react';
+import { svgSafeId } from '../svg/svgId.js';
 import { LegendSwatchGlyph } from './LegendSwatchGlyph.js';
 import { measureLegendText } from './measureLegendText.js';
 const FONT_SIZE = 10;
 const SWATCH_LEFT = 2;
 const SWATCH_GAP = 2;
-// Row geometry, exported so callers positioning `children` (or sizing an outer
-// container) stay in lockstep with what this draws.
+// Row geometry, exported so callers sizing an outer container stay in lockstep
+// with what this draws.
 export const LEGEND_ROW_HEIGHT = 14;
 export const LEGEND_SWATCH = 10;
+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;
 // narrow right-side gutter reserved for the small dismiss "×"
 const DISMISS_GUTTER = 11;
-// A row's marks, with the flat `color` shorthand read as the single filled
+// A row's swatches, with the flat `color` shorthand read as the single
 // square it has always drawn.
 function entrySwatches(entry) {
     return (entry.swatches ??
         (entry.color === undefined ? [] : [{ color: entry.color }]));
 }
-// Shared SVG categorical color key: one translucent row per entry, each a swatch
-// + label, right-aligned within canvasWidth. Used by any display that colors by
-// a discrete vocabulary (wiggle multi-source overlays, multi-row per-feature
-// paintings). A <g> so the on-screen overlay and the SVG export share one
-// renderer.
-//
-// Two escape hatches keep it usable for less-uniform legends without a second
-// component: a per-entry `marker` overrides the color square, and `children`
-// render inside the positioned box below the rows (from the box's top-left; the
-// rows occupy `shownEntryCount * LEGEND_ROW_HEIGHT`). Draws nothing when there's
-// neither an entry nor a child.
+// A ramp row is the bar and its labels, captioned when the entry has a label.
+function rowHeight(entry) {
+    return entry.gradient
+        ? GRADIENT_ROW_HEIGHT + (entry.label ? LEGEND_ROW_HEIGHT : 0)
+        : LEGEND_ROW_HEIGHT;
+}
+// The rows that fit `maxHeight`, with the last fitting row given over to a
+// "+N more" summary when they do not all fit.
+function fitEntries(entries, maxHeight) {
+    let used = 0;
+    const shown = [];
+    for (const [idx, entry] of entries.entries()) {
+        const rest = entries.length - idx - 1;
+        const reserve = rest > 0 ? LEGEND_ROW_HEIGHT : 0;
+        if (used + rowHeight(entry) + reserve > maxHeight && shown.length > 0) {
+            break;
+        }
+        used += rowHeight(entry);
+        shown.push(entry);
+    }
+    return shown;
+}
+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` (e.g. the display height) caps the box: entries past what fits
+// `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.
 //
@@ -37,29 +70,37 @@ function entrySwatches(entry) {
 // pointer-events so it works under a pointer-events:none overlay). Pass it only
 // on interactive paths where the legend can be re-shown — never on the SVG
 // export, which has no way to click it.
-export default function SvgColorLegend({ entries, canvasWidth, maxHeight, onDismiss, children, testid, }) {
-    const fit = maxHeight === undefined
-        ? entries.length
-        : Math.max(1, Math.floor(maxHeight / LEGEND_ROW_HEIGHT));
-    // reserve the last fitting row for the summary when truncating
-    const shown = entries.length > fit ? entries.slice(0, fit - 1) : entries;
-    const overflowLabel = entries.length > fit ? `+${entries.length - shown.length} more` : undefined;
+export default function SvgColorLegend({ entries, canvasWidth, x, maxHeight, onDismiss, testid, idPrefix, }) {
+    const reactId = useId();
+    const legendId = idPrefix ?? reactId;
+    const shown = maxHeight === undefined ? entries : fitEntries(entries, maxHeight);
+    const overflowLabel = entries.length > shown.length
+        ? `+${entries.length - shown.length} more`
+        : undefined;
     // Labels line up across rows, so the swatch column is sized by the row with
-    // the most marks — otherwise a two-mark row shoves its own label out of the
-    // column the others share. One mark reproduces the original 16px inset.
+    // the most swatches — otherwise a two-box row shoves its own label out of the
+    // column the others share. One box reproduces the original 16px inset.
     const swatchColumns = Math.max(1, ...shown.map(e => entrySwatches(e).length));
     const textLeft = SWATCH_LEFT + swatchColumns * (LEGEND_SWATCH + SWATCH_GAP) + 2;
-    let maxLabelWidth = 0;
+    let contentRight = 0;
     for (const entry of shown) {
-        maxLabelWidth = Math.max(maxLabelWidth, measureLegendText(entry.label, FONT_SIZE));
+        contentRight = Math.max(contentRight, entry.gradient
+            ? SWATCH_LEFT +
+                Math.max(GRADIENT_BAR_WIDTH, measureLegendText(entry.label, FONT_SIZE))
+            : textLeft + measureLegendText(entry.label, FONT_SIZE));
     }
     if (overflowLabel !== undefined) {
-        maxLabelWidth = Math.max(maxLabelWidth, measureLegendText(overflowLabel, FONT_SIZE));
+        contentRight = Math.max(contentRight, textLeft + measureLegendText(overflowLabel, FONT_SIZE));
+    }
+    const totalWidth = contentRight + 6 + (onDismiss ? DISMISS_GUTTER : 0);
+    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);
     }
-    const totalWidth = textLeft + maxLabelWidth + 6 + (onDismiss ? DISMISS_GUTTER : 0);
-    const x = Math.max(0, canvasWidth - totalWidth - 4);
-    return shown.length || overflowLabel || children ? (_jsxs("g", { transform: `translate(${x} 0)`, "data-testid": testid, children: [shown.map((entry, idx) => (_jsxs("g", { transform: `translate(0 ${idx * LEGEND_ROW_HEIGHT})`, 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: [entry.marker ??
-                                entrySwatches(entry).map((swatch, i) => (_jsx(LegendSwatchGlyph, { swatch: swatch, size: LEGEND_SWATCH, x: SWATCH_LEFT + i * (LEGEND_SWATCH + SWATCH_GAP), y: 2 }, `${swatch.color}-${swatch.mark ?? 'fill'}`))), _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 ${shown.length * LEGEND_ROW_HEIGHT})`, 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 })] })), onDismiss === undefined ? null : (_jsxs("g", { transform: `translate(${totalWidth - DISMISS_GUTTER} 0)`, style: { cursor: 'pointer', pointerEvents: 'auto' }, "data-gesture-owner": "true", onClick: () => {
+    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.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 })] })), onDismiss === undefined ? null : (_jsxs("g", { transform: `translate(${totalWidth - DISMISS_GUTTER} 0)`, style: { cursor: 'pointer', pointerEvents: 'auto' }, "data-gesture-owner": "true", onClick: () => {
                     onDismiss();
-                }, children: [_jsx("title", { children: "Hide legend" }), _jsx("rect", { x: 0, y: 0, width: DISMISS_GUTTER, height: LEGEND_ROW_HEIGHT, fill: "transparent" }), _jsx("text", { x: DISMISS_GUTTER / 2, y: 9, fontSize: 9, fill: "#777", textAnchor: "middle", children: "\u00D7" })] })), children] })) : null;
+                }, children: [_jsx("title", { children: "Hide legend" }), _jsx("rect", { x: 0, y: 0, width: DISMISS_GUTTER, height: LEGEND_ROW_HEIGHT, fill: "transparent" }), _jsx("text", { x: DISMISS_GUTTER / 2, y: 9, fontSize: 9, fill: "#777", textAnchor: "middle", children: "\u00D7" })] }))] })) : null;
 }

package/esm/ui/colorScale.d.ts

@@ -0,0 +1,64 @@
+import type { LegendSpec, LegendSwatch } from './legendSpec.ts';
+/**
+ * One value a categorical scale colors. `value` is the datum the color
+ * classifies (an SV type, a sample group, an impact tier), `label` how the key
+ * names it. A row with no `color` is a note in the key rather than a swatch —
+ * "+N more", or a rule the swatches cannot state.
+ */
+export interface CategoricalEntry {
+    value: string;
+    label: string;
+    color?: string;
+    swatches?: LegendSwatch[];
+    hidden?: boolean;
+}
+/**
+ * A color vocabulary: a finite set of values, each drawn in one color. ADR-094's
+ * palette-index and per-instance-value cardinalities both resolve to this once
+ * the values are enumerated.
+ */
+export interface CategoricalScale {
+    kind: 'categorical';
+    id: string;
+    title?: string;
+    entries: CategoricalEntry[];
+}
+/** One stop of a continuous ramp, `offset` in `[0, 1]`. */
+export interface RampStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+}
+/**
+ * A scalar through a color ramp: ADR-094's scalar-through-a-scale
+ * cardinality. `stops` are what the painter samples — read them out of the
+ * same LUT the GPU uploads (`stopsFromRampLut`) so the bar is byte-identical
+ * to the plot. `format` prints the domain ends; `toLocale` by default.
+ */
+export interface RampScale {
+    kind: 'ramp';
+    id: string;
+    title?: string;
+    domain: [number, number];
+    stops: RampStop[];
+    format?: (value: number) => string;
+}
+/**
+ * What a display says about one of its color channels. A display declares a
+ * list of these (`LegendMixin.colorScales`) and the legend derives from it, so
+ * the key cannot list a color nothing painted.
+ */
+export type ColorScale = CategoricalScale | RampScale;
+/**
+ * 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
+ * and the export flattens it through `legendEntries`, so the two cannot
+ * describe different colors.
+ *
+ * A lone scale names itself: section titles draw only beside other sections,
+ * so a lone categorical scale's title becomes the box's (Manhattan's field
+ * name over its values) and a lone ramp's goes on its row.
+ */
+export declare function legendSpecOf(scales: ColorScale[]): LegendSpec;
+/** Whether a scale has anything for a key to show. */
+export declare function colorScaleIsEmpty(scale: ColorScale): boolean;

package/esm/ui/colorScale.js

@@ -0,0 +1,41 @@
+import { toLocale } 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 = toLocale }, lone) {
+    const [min, max] = domain;
+    return {
+        label: lone ? (title ?? '') : '',
+        gradient: { stops, minLabel: format(min), maxLabel: format(max) },
+    };
+}
+function sectionOf(scale, lone) {
+    return {
+        id: scale.id,
+        title: scale.title,
+        items: scale.kind === 'categorical'
+            ? scale.entries.map(entry => ({ ...entry }))
+            : [rampItem(scale, lone)],
+    };
+}
+/**
+ * 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
+ * and the export flattens it through `legendEntries`, so the two cannot
+ * describe different colors.
+ *
+ * A lone scale names itself: section titles draw only beside other sections,
+ * so a lone categorical scale's title becomes the box's (Manhattan's field
+ * name over its values) and a lone ramp's goes on its row.
+ */
+export function legendSpecOf(scales) {
+    const lone = scales.length === 1 ? scales[0] : undefined;
+    return {
+        title: lone?.kind === 'categorical' ? lone.title : undefined,
+        sections: scales.map(scale => sectionOf(scale, scales.length === 1)),
+    };
+}
+/** Whether a scale has anything for a key to show. */
+export function colorScaleIsEmpty(scale) {
+    return scale.kind === 'categorical' && scale.entries.length === 0;
+}

package/esm/ui/colors.d.ts

@@ -31,6 +31,17 @@ export declare const paletteColors: {
  * re-palettes), while a by-position painter has no value to hash and wraps.
  */
 export declare const categoricalPalette: string[];
+/**
+ * The palette color a categorical value paints, derived from the value rather
+ * than from the order it was met: values stream in as regions load, and a
+ * discovery-order slot would let one region paint `chr2` blue and the next
+ * paint it pink. A non-negative integer takes the slot it names, anchored at
+ * 1, so `1`, `2`, `3` walk the palette in order and stay distinct; anything
+ * else hashes in, stable for the same reason at the cost of an occasional
+ * collision.
+ */
+export declare function categoricalValueColor(value: string): string;
+export declare function categoricalValueColor<T>(value: string, palette: readonly T[]): T;
 /**
  * Deterministic non-negative 32-bit hash of a string.
  */

package/esm/ui/colors.js

@@ -112,6 +112,13 @@ export const paletteColors = {
 export const categoricalPalette = [
     ...new Set([...tableau10, ...set1, ...dark2, ...set2, ...category10].filter(hex => !NEUTRALS.has(hex.toLowerCase()))),
 ];
+export function categoricalValueColor(value, palette = categoricalPalette) {
+    const n = palette.length;
+    const num = Number(value);
+    return value !== '' && Number.isInteger(num) && num >= 0
+        ? palette[(num + n - 1) % n]
+        : palette[hashString(value) % n];
+}
 // only category10 and set1 are imported by name; the rest are reached through
 // paletteColors above
 /**

package/esm/ui/index.d.ts

@@ -37,7 +37,7 @@ export { default as MonospaceTextField } from './MonospaceTextField.tsx';
 export { default as ShareLinkField } from './ShareLinkField.tsx';
 export { default as SingleSlider } from './SingleSlider.tsx';
 export { default as SliderTooltip } from './SliderTooltip.tsx';
-export { makePromotableSizeMenu, makeSizeMenu, makeSizeSubMenu, } from './makeSizeMenu.tsx';
+export { makeSizeMenu, makeSizeSubMenu } from './makeSizeMenu.tsx';
 export { INLINE_MENU_ROW_WIDTH, ResetToDefaultButton, } from './InlineMenuControls.tsx';
 export { sliderScale } from './sliderScale.ts';
 export type { SliderScale } from './sliderScale.ts';
@@ -78,15 +78,13 @@ export { default as Crosshairs } from './Crosshairs.tsx';
 export { hoverBoxStyle } from './hoverBoxStyle.ts';
 export { useMouseState, useMouseTracking } from './useMouseTracking.ts';
 export type { MouseState, MouseTracker } from './useMouseTracking.ts';
-export { PinAdornment } from './PinAdornment.tsx';
-export { displayTypesWithPromotableSlots, misKindedPins, promotableSlotsWithoutPin, } from './promotablePinCoverage.ts';
 export declare const VIEW_HEADER_HEIGHT = 28;
-export { GRADIENT_LEGEND_HEIGHT, GRADIENT_LEGEND_SVG_AREA_WIDTH, GRADIENT_LEGEND_WIDTH, default as SvgGradientLegend, } from './SvgGradientLegend.tsx';
-export type { GradientLabel, GradientStop } from './SvgGradientLegend.tsx';
-export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
+export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
 export type { ColorLegendEntry } from './SvgColorLegend.tsx';
 export { measureLegendText } from './measureLegendText.ts';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.tsx';
 export { MAX_LEGEND_ITEMS, legendEntries, legendIsReadable, legendSwatches, nonEmptyLegendSections, } from './legendSpec.ts';
-export type { LegendItem, LegendMark, LegendSection, LegendSpec, LegendSwatch, } from './legendSpec.ts';
+export type { LegendGradient, LegendItem, LegendSection, LegendSpec, LegendSwatch, } from './legendSpec.ts';
+export { colorScaleIsEmpty, legendSpecOf } from './colorScale.ts';
+export type { CategoricalEntry, CategoricalScale, ColorScale, RampScale, RampStop, } from './colorScale.ts';
 export { checkboxItem, radioItems } from './toggleMenuItems.ts';

package/esm/ui/index.js

@@ -34,7 +34,7 @@ export { default as MonospaceTextField } from './MonospaceTextField.js';
 export { default as ShareLinkField } from './ShareLinkField.js';
 export { default as SingleSlider } from './SingleSlider.js';
 export { default as SliderTooltip } from './SliderTooltip.js';
-export { makePromotableSizeMenu, makeSizeMenu, makeSizeSubMenu, } from './makeSizeMenu.js';
+export { makeSizeMenu, makeSizeSubMenu } from './makeSizeMenu.js';
 export { INLINE_MENU_ROW_WIDTH, ResetToDefaultButton, } from './InlineMenuControls.js';
 export { sliderScale } from './sliderScale.js';
 export { default as ErrorBar } from './ErrorBar.js';
@@ -72,20 +72,10 @@ export { launchTargetsMenuItem } from './launchTargetsMenuItem.js';
 export { default as Crosshairs } from './Crosshairs.js';
 export { hoverBoxStyle } from './hoverBoxStyle.js';
 export { useMouseState, useMouseTracking } from './useMouseTracking.js';
-export { PinAdornment } from './PinAdornment.js';
-// Not on the React-free `menuItems.ts` entry beside the row builders: this
-// reads a config's slot table, so it pulls `configuration/promotableSlots.ts`
-// in, and that entry exists precisely to stay out of every plugin's eager graph.
-//
-// `pinnedSlots`, the walk underneath it, stays module-private: the question a
-// caller has is "which promotable slots does this menu miss", and answering the
-// half of it that lists what a menu *does* offer needs the schema's slot table
-// to mean anything.
-export { displayTypesWithPromotableSlots, misKindedPins, promotableSlotsWithoutPin, } from './promotablePinCoverage.js';
 export const VIEW_HEADER_HEIGHT = 28;
-export { GRADIENT_LEGEND_HEIGHT, GRADIENT_LEGEND_SVG_AREA_WIDTH, GRADIENT_LEGEND_WIDTH, default as SvgGradientLegend, } from './SvgGradientLegend.js';
-export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.js';
+export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, 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';
+export { colorScaleIsEmpty, legendSpecOf } from './colorScale.js';
 export { checkboxItem, radioItems } from './toggleMenuItems.js';

package/esm/ui/legendMenuItem.d.ts

@@ -1,5 +1,5 @@
 import type { MenuItem } from './MenuTypes.ts';
-import type { CheckboxRowOptions } from './toggleMenuItems.ts';
+import type { SettingRowOptions } from './toggleMenuItems.ts';
 /**
  * The "Show legend" checkbox, which seven displays build by hand — Hi-C, LD,
  * alignments, LGVSynteny, multi-wiggle, multi-row features, both multi-sample
@@ -10,23 +10,12 @@ import type { CheckboxRowOptions } from './toggleMenuItems.ts';
  * and would otherwise need an adapter object at the call site. Same argument
  * order as `checkboxItem`, which is all this adds a label to.
  *
- * The `showLegend` **config slots** stay per display: their `promotedBase`
- * values legitimately differ (a Hi-C color scale is off by default, a variant
- * genotype key on), and their descriptions describe genuinely different legends.
- * What they now share is being *promotable* — pass `opts.pin` and the row gains
- * the pin that toggles the legend on every open track of this display type,
- * offering the new state as the display-type default in its snackbar. Every
- * display whose legend is backed by a config slot passes one, and gets it from
- * `LegendMixin`'s `showLegendDisplayTypeDefault` rather than calling
- * `makeTogglePin` itself: the slot is the per-display half, the accessors over
- * it are not.
- *
- * `pin` is optional because two callers have no slot to promote: the Manhattan
- * plot's LD legend and `LinearBasicDisplay`'s color key are a volatile and a
- * per-legend `dismissed` flag respectively, neither of which is config at all.
+ * The `showLegend` **config slots** stay per display: their default values
+ * legitimately differ (a Hi-C color scale is off by default, a variant genotype
+ * key on), and their descriptions describe genuinely different legends.
  *
  * `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 */
-export declare function showLegendCheckboxItem(checked: boolean, onToggle: () => void, opts?: CheckboxRowOptions): MenuItem;
+export declare function showLegendCheckboxItem(checked: boolean, onToggle: () => void, opts?: SettingRowOptions): MenuItem;

package/esm/ui/legendMenuItem.js

@@ -9,20 +9,9 @@ import { checkboxItem } from './toggleMenuItems.js';
  * and would otherwise need an adapter object at the call site. Same argument
  * order as `checkboxItem`, which is all this adds a label to.
  *
- * The `showLegend` **config slots** stay per display: their `promotedBase`
- * values legitimately differ (a Hi-C color scale is off by default, a variant
- * genotype key on), and their descriptions describe genuinely different legends.
- * What they now share is being *promotable* — pass `opts.pin` and the row gains
- * the pin that toggles the legend on every open track of this display type,
- * offering the new state as the display-type default in its snackbar. Every
- * display whose legend is backed by a config slot passes one, and gets it from
- * `LegendMixin`'s `showLegendDisplayTypeDefault` rather than calling
- * `makeTogglePin` itself: the slot is the per-display half, the accessors over
- * it are not.
- *
- * `pin` is optional because two callers have no slot to promote: the Manhattan
- * plot's LD legend and `LinearBasicDisplay`'s color key are a volatile and a
- * per-legend `dismissed` flag respectively, neither of which is config at all.
+ * The `showLegend` **config slots** stay per display: their default values
+ * legitimately differ (a Hi-C color scale is off by default, a variant genotype
+ * key on), and their descriptions describe genuinely different legends.
  *
  * `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.