@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/ui/ShareLinkField.js

@@ -1,42 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, TextField, Typography } from '@mui/material';
-import { formatBytes } from '../util/formatBytes.js';
-import { makeStyles } from '../util/tss-react/index.js';
-// Two ceilings, because a long link fails two different ways.
-//
-// Past LARGE_URL_LENGTH the link still opens everywhere, but it stops
-// surviving delivery: mail and chat clients wrap or truncate it, and anything
-// that moves it from a hash into a request line meets the ~8k a server accepts
-// there.
-//
-// Past UNUSABLE_URL_LENGTH it does not open at all — WebKit caps a url around
-// 80k characters, so Safari and everything on iOS refuse it however it arrives.
-// Chromium's own cap is 2 MB, which is why the person who made the link sees
-// nothing wrong with it and the recipient sees a browser error.
-const LARGE_URL_LENGTH = 8000;
-const UNUSABLE_URL_LENGTH = 80000;
-const useStyles = makeStyles()(theme => ({
-    warning: {
-        color: theme.palette.warning.main,
-    },
-}));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
 // Read-only single-line field for a shareable URL; clicking selects the whole
-// value so it's easy to copy, and overly long URLs surface a size warning.
-// Shared by jbrowse-web's ShareDialog and jbrowse-desktop's ExportToWebDialog.
-//
-// `action` is what the caller can do about a url too long to open — in practice
-// "switch to a short link", which is the mode that solves it. Only rendered at
-// the unusable tier, where saying so without offering the fix leaves the user
-// with a link and no way to make a working one.
-export default function ShareLinkField({ value, label = 'URL', action, }) {
-    const { classes } = useStyles();
-    const size = formatBytes(value.length);
-    return (_jsxs(_Fragment, { children: [_jsx(TextField, { label: label, value: value, variant: "filled", fullWidth: true, onClick: event => {
-                    const target = event.target;
-                    target.select();
-                }, slotProps: {
-                    input: {
-                        readOnly: true,
-                    },
-                } }), value.length > UNUSABLE_URL_LENGTH ? (_jsxs(Alert, { severity: "warning", action: action, children: ["This URL is ", size, ", which Safari and iOS browsers refuse to open and most mail clients will truncate. It may work where you test it \u2014 Chrome accepts far longer \u2014 and fail for whoever you send it to. Use a short link instead."] })) : value.length > LARGE_URL_LENGTH ? (_jsxs(Typography, { variant: "caption", className: classes.warning, children: ["This URL is ", size, " and may be too long for some browsers or tools \u2014 prefer a short link if possible."] })) : null] }));
+// value so it's easy to copy. Shared by jbrowse-web's ShareDialog and
+// jbrowse-desktop's ExportToWebDialog.
+export default function ShareLinkField({ value, label = 'URL', }) {
+    return (_jsx(TextField, { label: label, value: value, variant: "filled", fullWidth: true, onClick: event => {
+            const target = event.target;
+            target.select();
+        }, slotProps: {
+            input: {
+                readOnly: true,
+            },
+        } }));
 }

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(value)})` } })) : 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/SnackbarModel.js

@@ -1,4 +1,4 @@
-import { types } from '@jbrowse/mobx-state-tree';
+import { addDisposer, types } from '@jbrowse/mobx-state-tree';
 import { observable } from 'mobx';
 /**
  * #stateModel SnackbarModel
@@ -28,71 +28,83 @@ export default function SnackbarModel() {
             return new Map(self.snackbarMessages.map(s => [s.message, s]));
         },
     }))
-        .actions(self => ({
-        /**
-         * #action
-         */
-        notify(message, level, action) {
-            const actions = action
-                ? Array.isArray(action)
-                    ? action
-                    : [action]
-                : undefined;
-            this.pushSnackbarMessage(message, level, actions);
-            // A plain info/success toast auto-hides; an actionable one persists
-            // until acted on or dismissed (5s is too short to read and click the
-            // action, and warning/error already persist).
-            if ((level === 'info' || level === 'success') && !actions?.length) {
-                setTimeout(() => {
-                    this.removeSnackbarMessage(message);
-                }, 5000);
-            }
-        },
-        /**
-         * #action
-         */
-        notifyError(errorMessage, error, extra, action) {
-            const reportAction = {
-                name: 'report',
-                onClick: () => {
-                    this.setErrorDialog({ error, extra });
-                },
-            };
-            const actions = action ? [reportAction, action] : [reportAction];
-            this.pushSnackbarMessage(errorMessage, 'error', actions);
-        },
-        /**
-         * #action
-         */
-        setErrorDialog(state) {
-            self.errorDialog = state;
-        },
-        /**
-         * #action
-         */
-        pushSnackbarMessage(message, level, actions) {
-            if (actions?.length || !self.snackbarMessageSet.has(message)) {
-                self.snackbarMessages.push({
-                    message,
-                    level,
-                    actions,
-                });
-            }
-        },
-        /**
-         * #action
-         */
-        popSnackbarMessage() {
-            return self.snackbarMessages.pop();
-        },
-        /**
-         * #action
-         */
-        removeSnackbarMessage(message) {
-            const element = self.snackbarMessageSet.get(message);
-            if (element !== undefined) {
-                self.snackbarMessages.remove(element);
+        .actions(self => {
+        // A pending auto-dismiss would otherwise fire on a destroyed session, and
+        // in node keeps the process alive for its five seconds.
+        const dismissTimers = new Set();
+        addDisposer(self, () => {
+            for (const timer of dismissTimers) {
+                clearTimeout(timer);
             }
-        },
-    }));
+        });
+        return {
+            /**
+             * #action
+             */
+            notify(message, level, action) {
+                const actions = action
+                    ? Array.isArray(action)
+                        ? action
+                        : [action]
+                    : undefined;
+                this.pushSnackbarMessage(message, level, actions);
+                // A plain info/success toast auto-hides; an actionable one persists
+                // until acted on or dismissed (5s is too short to read and click the
+                // action, and warning/error already persist).
+                if ((level === 'info' || level === 'success') && !actions?.length) {
+                    const timer = setTimeout(() => {
+                        dismissTimers.delete(timer);
+                        this.removeSnackbarMessage(message);
+                    }, 5000);
+                    dismissTimers.add(timer);
+                }
+            },
+            /**
+             * #action
+             */
+            notifyError(errorMessage, error, extra, action) {
+                const reportAction = {
+                    name: 'report',
+                    onClick: () => {
+                        this.setErrorDialog({ error, extra });
+                    },
+                };
+                const actions = action ? [reportAction, action] : [reportAction];
+                this.pushSnackbarMessage(errorMessage, 'error', actions);
+            },
+            /**
+             * #action
+             */
+            setErrorDialog(state) {
+                self.errorDialog = state;
+            },
+            /**
+             * #action
+             */
+            pushSnackbarMessage(message, level, actions) {
+                if (actions?.length || !self.snackbarMessageSet.has(message)) {
+                    self.snackbarMessages.push({
+                        message,
+                        level,
+                        actions,
+                    });
+                }
+            },
+            /**
+             * #action
+             */
+            popSnackbarMessage() {
+                return self.snackbarMessages.pop();
+            },
+            /**
+             * #action
+             */
+            removeSnackbarMessage(message) {
+                const element = self.snackbarMessageSet.get(message);
+                if (element !== undefined) {
+                    self.snackbarMessages.remove(element);
+                }
+            },
+        };
+    });
 }

package/esm/ui/StatusProgressBar.js

@@ -12,7 +12,7 @@ const useStyles = makeStyles()(theme => ({
         // put this component back in the toolkit. Same idiom `plainChromeOverlays`
         // uses, and it tints against the surface rather than compositing over
         // whatever the bar happens to be drawn on.
-        background: `color-mix(in srgb, ${theme.palette.primary.main} 26%, transparent)`,
+        background: `color-mix(in srgb, ${theme.palette.accent} 26%, transparent)`,
     },
     bar: {
         position: 'absolute',
@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
         bottom: 0,
         left: 0,
         width: '100%',
-        background: theme.palette.primary.main,
+        background: theme.palette.accent,
         // scaled from the left rather than sized, so a progress update is a
         // compositor transform instead of a layout
         transformOrigin: 'left center',

package/esm/ui/SvgColorLegend.d.ts

@@ -1,13 +1,18 @@
 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, 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,65 +1,106 @@
-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;
-// 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
+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) {
     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 row keying a color, as opposed to a title or note over such rows.
+function keysAColor(entry) {
+    return entry.gradient !== undefined || entrySwatches(entry).length > 0;
+}
+// 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`, leaving room for a "+N more" summary when
+// they do not all fit. A heading the cut separated from every row under it is
+// dropped with them.
+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);
+    }
+    while (shown.length > 1 &&
+        shown.length < entries.length &&
+        !keysAColor(shown.at(-1))) {
+        shown.pop();
+    }
+    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.
-//
-// `onDismiss` adds a clickable "×" in the top-right corner (with its own
-// 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, testid, idPrefix, }) {
+    const reactId = useId();
+    const legendId = idPrefix ?? reactId;
+    const shown = maxHeight === undefined ? entries : fitEntries(entries, maxHeight);
+    const cutRows = entries.slice(shown.length).filter(keysAColor).length;
+    const overflowLabel = cutRows > 0 ? `+${cutRows} 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;
+    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: () => {
-                    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;
+    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/VerticalScrollbar.d.ts

@@ -1,45 +1,24 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
 /**
- * How much of a display's right edge this occupies while it is drawn.
- *
- * Exported because the things that have to *clear* it are drawn by the displays
- * that mount it, not by this file: the bottom-right indicator row and the
- * alignments coverage axis label. Both kept a private copy of the number (and
- * the alignments indicator row kept none at all, so its chips were drawn over
- * the thumb), which is a copy that can only be checked by looking at two files
- * at once.
+ * How much of a display's right edge this occupies while it is drawn, for the
+ * chrome the displays draw beside it.
  */
 export declare const VERTICAL_SCROLLBAR_WIDTH = 12;
-/**
- * Where the right edge of anything that has to sit *beside* the thumb goes: the
- * track's width plus a hair of air, so a chip or an axis label doesn't touch it.
- *
- * The four call sites all spelled `VERTICAL_SCROLLBAR_WIDTH + 2` inline, which
- * is the same copy the width constant was exported to stop — one addition
- * further along. The `+ 2` is a gap and belongs to the thing being cleared, not
- * to the scrollbar's own geometry, so it is named rather than folded into the
- * width (`right: 2` on the thumb is a different 2 and must not move with it).
- */
+/** Where the right edge of something sitting beside the thumb goes. */
 export declare const VERTICAL_SCROLLBAR_CLEARANCE: number;
 /**
- * Draggable vertical scrollbar overlay for canvas-backed displays that scroll
- * their content via a `scrollTop` value (alignments pileup, variant matrix).
- * Renders nothing when the content fits the viewport. The thumb geometry and
- * the drag-to-scroll mapping live here so the consumers don't each re-derive
- * them; the wheel handling stays per-display (their gesture semantics differ).
+ * Draggable vertical scrollbar overlay for a virtually scrolled display.
+ * Renders nothing when the content fits.
  *
- * Deliberately NOT a keyboard tab stop: the surrounding views have no working
- * keyboard navigation to reach the scrolled content anyway, so a per-track
- * `tabIndex` would only add noise to the tab order. The `role="scrollbar"` +
- * `aria-value*` semantics are kept — they cost nothing and expose scroll
- * position to pointer/voice assistive tech.
+ * Not a keyboard tab stop: the views have no keyboard navigation to reach the
+ * scrolled content, so `tabIndex` would only add noise. The `role="scrollbar"`
+ * semantics stay for pointer and voice assistive tech.
  */
-export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top, }: {
-    scrollTop: number;
-    setScrollTop: (n: number) => void;
-    viewportHeight: number;
-    contentHeight: number;
+declare const VerticalScrollbar: ({ model, controlsId, top, }: {
+    model: VirtualScrollModel;
     /** `id` of the scrolled viewport element, for `aria-controls`. */
     controlsId: string;
     /** Track offset from the top, for displays with a sticky band above it. */
     top?: number;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default VerticalScrollbar;