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

package/esm/ui/VerticalScrollbar.js

@@ -1,31 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
+import { observer } from 'mobx-react';
 import { clamp } from '../util/numericUtils.js';
 import { makeStyles } from '../util/tss-react/index.js';
 import { usePointerDrag } from '../util/usePointerDrag.js';
 import { useRafCommit } from '../util/useRafCommit.js';
 import { useVirtualScrollWheel } from '../util/useVirtualScrollWheel.js';
 /**
- * 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 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 const VERTICAL_SCROLLBAR_CLEARANCE = VERTICAL_SCROLLBAR_WIDTH + 2;
 const MIN_THUMB_HEIGHT = 20;
 const useStyles = makeStyles()(theme => ({
@@ -35,12 +21,8 @@ const useStyles = makeStyles()(theme => ({
         width: VERTICAL_SCROLLBAR_WIDTH,
         cursor: 'default',
         zIndex: 10,
-        // `usePointerDrag`'s one caller-owned requirement: without it the browser
-        // claims a touch drag on this strip as a page scroll and no pointer stream
-        // arrives at all, so the thumb simply doesn't drag by finger.
+        // without it the browser claims a touch drag as a page scroll
         touchAction: 'none',
-        // theme-aware so the thumb stays visible in dark mode (a hardcoded black
-        // thumb vanished against a dark canvas)
         '&:hover > *': {
             background: theme.palette.action.active,
         },
@@ -55,71 +37,41 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 /**
- * 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 = 0, }) {
+const VerticalScrollbar = observer(function VerticalScrollbar({ model, controlsId, top = 0, }) {
     const { classes } = useStyles();
-    // ephemeral drag anchor; null when not dragging. Pointer capture (set on the
-    // track) delivers move/up here even when the pointer leaves the thin track,
-    // and auto-releases on unmount — so no document listeners or effect cleanup.
     const dragRef = useRef(undefined);
     const [trackEl, setTrackEl] = useState(null);
-    // A thumb drag's pointermove can fire faster than the frame rate, so coalesce
-    // its scroll writes to one commit per frame; pointer-up flushes the final
-    // (absolute) target so the resting position is exact.
-    const { schedule: scheduleScroll, flush: flushScroll } = useRafCommit(setScrollTop);
-    const scrollableHeight = Math.max(0, contentHeight - viewportHeight);
-    // Wheeling while the pointer is over the scrollbar always scrolls the panel,
-    // never zooms the view. The scrollbar overlay is a sibling of the canvas, so
-    // its wheel events would otherwise bubble straight past the canvas's own
-    // handler to the containing view's scroll-zoom. A native non-passive listener
-    // here (via useVirtualScrollWheel) consumes the vertical delta into
-    // setScrollTop and stopPropagation keeps it from reaching that scroll-zoom.
-    useVirtualScrollWheel(trackEl, (e, applyScroll) => {
-        applyScroll(e, { scrollTop, viewportHeight, scrollableHeight }, n => {
-            setScrollTop(n);
-        });
+    const { schedule: scheduleScroll, flush: flushScroll } = useRafCommit((n) => {
+        model.setScrollTop(n);
+    });
+    const { scrollTop, scrollableHeight, scrollViewportHeight: viewportHeight, } = model;
+    // Wheeling the scrollbar always scrolls the panel, whatever `scrollZoom`
+    // says, and never reaches the view.
+    useVirtualScrollWheel(trackEl, model, (e, scroll) => {
+        scroll();
         e.stopPropagation();
     });
     const clampedScrollTop = clamp(scrollTop, 0, scrollableHeight);
-    // never taller than the track itself — on a very short viewport the
-    // MIN_THUMB_HEIGHT floor would otherwise exceed viewportHeight, pushing
-    // thumbTop negative (thumb drawn above the track) and making usableTrack
-    // negative (drag mapping dead)
+    const contentHeight = viewportHeight + scrollableHeight;
     const thumbHeight = Math.min(viewportHeight, Math.max(MIN_THUMB_HEIGHT, viewportHeight * (viewportHeight / contentHeight)));
     const usableTrack = viewportHeight - thumbHeight;
-    // clamp so a scrollTop past scrollableHeight (virtual-scroll displays don't
-    // self-correct like a native overflow container) can't draw the thumb below
-    // the track
     const thumbTop = clamp((clampedScrollTop / scrollableHeight) * usableTrack, 0, usableTrack);
-    // The press lifecycle is `usePointerDrag`'s: primary button only, one drag per
-    // pointer, capture on the track so moves keep arriving once the pointer leaves
-    // the 12px strip, and auto-release on unmount. Hand-rolled here before that
-    // existed, which cost two of the bugs it is written to prevent — a right-press
-    // started a drag that then ran underneath its own context menu, and a second
-    // finger landing mid-drag re-anchored the gesture.
+    // A press on the track above or below the thumb pages one viewport toward it
+    // rather than starting a drag; `dragRef` staying unset makes the captured
+    // moves that follow do nothing.
     const drag = usePointerDrag({
-        // Click-to-page: a press on the track above/below the thumb jumps one
-        // viewport toward it (like a native scrollbar) rather than starting a drag.
-        // The thumb is pointerEvents:none so every press lands on the track; decide
-        // page-vs-drag from its Y relative to the thumb. `dragRef` staying undefined
-        // is what makes the paging branch ignore the moves that follow — the pointer
-        // is captured either way, and a page press simply has nothing to do with them.
         onDragStart: e => {
             const clickY = e.clientY - e.currentTarget.getBoundingClientRect().top;
             if (clickY < thumbTop || clickY > thumbTop + thumbHeight) {
                 const dir = clickY < thumbTop ? -1 : 1;
-                setScrollTop(clamp(clampedScrollTop + dir * viewportHeight, 0, scrollableHeight));
+                model.setScrollTop(clamp(clampedScrollTop + dir * viewportHeight, 0, scrollableHeight));
             }
             else {
                 dragRef.current = { startY: e.clientY, startScroll: clampedScrollTop };
@@ -137,22 +89,16 @@ export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHei
             dragRef.current = undefined;
         },
     });
-    // Below every hook, not above the geometry it reads: "the content fits" is a
-    // prop-driven condition that flips while mounted, so an early return above
-    // `usePointerDrag` would call a different number of hooks per render. The
-    // geometry it closes over is computed either way and simply goes unused here —
-    // nothing renders, so nothing can dispatch a pointer event at it.
+    // below every hook: "the content fits" flips while mounted
     if (scrollableHeight <= 0) {
         return null;
     }
     return (_jsx("div", { ref: setTrackEl, "data-testid": "vertical-scrollbar", "data-gesture-owner": "true", className: classes.track, style: { top, height: viewportHeight }, role: "scrollbar", "aria-label": "Vertical scrollbar", "aria-controls": controlsId, "aria-orientation": "vertical", "aria-valuemin": 0, "aria-valuemax": Math.round(scrollableHeight), "aria-valuenow": Math.round(clampedScrollTop), ...drag, 
-        // Wraps the hook's own handler rather than replacing it: stopPropagation
-        // so the press doesn't also pan the view, and it runs for every button, so
-        // a right-press the drag ignores still doesn't reach the view. No
-        // preventDefault, so the native focus shift can still close open popups
-        // and the context menu still opens.
+        // every button, so a right-press the drag ignores doesn't pan the view
+        // either; no preventDefault, so focus still moves and menus still open
         onPointerDown: e => {
             e.stopPropagation();
             drag.onPointerDown(e);
         }, children: _jsx("div", { className: classes.thumb, style: { top: thumbTop, height: thumbHeight } }) }));
-}
+});
+export default VerticalScrollbar;

package/esm/ui/ViewLoadingScreen.d.ts

@@ -1,8 +1,9 @@
 /**
  * The "view exists but isn't ready yet" screen a view renders instead of its
  * content — LGV, dotplot and linear synteny all show it while the assembly they
- * name is still loading, labelled with which of the assembly's files is
- * downloading and a determinate bar when that download reports one.
+ * name is still loading. A load past two seconds is labelled with which of the
+ * assembly's files is downloading, and a determinate bar when that download
+ * reports one; a faster one says only "Loading".
  *
  * A load that then stops reporting names the file it is waiting on. The phase
  * label alone does not: "Downloading chromosome aliases" is a fair description
@@ -17,8 +18,8 @@
  * {@link LoadingProgress} directly — bare, it renders an unconstrained
  * full-width bar under an unaligned label.
  */
-export default function ViewLoadingScreen({ message, fraction, source, }: {
+export default function ViewLoadingScreen({ message, progress, source, }: {
     message?: string;
-    fraction?: number;
+    progress?: number;
     source?: string;
 }): import("react").JSX.Element;

package/esm/ui/ViewLoadingScreen.js

@@ -1,12 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import { Typography } from '@mui/material';
+import { useSlowLoad, useStalled } from '../util/hooks.js';
 import { makeStyles } from '../util/tss-react/index.js';
 import LoadingProgress from './LoadingProgress.js';
-// Long enough that a load which is merely slow never says it, short enough to
-// beat the point where someone decides the app is broken. Every status write
-// resets it, so a download that is still moving its bar never reaches it
-const STALL_MS = 5000;
 const useStyles = makeStyles()(theme => ({
     root: {
         display: 'flex',
@@ -28,33 +24,12 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
-/**
- * Has this load said the same thing for {@link STALL_MS}? `key` is everything
- * the screen is showing, so any status at all — a new phase, another chunk of
- * bytes — restarts the wait, and only a load that has genuinely stopped saying
- * anything gets there.
- *
- * The timeout stores the key it fired for rather than a boolean, which is what
- * makes the reset free: a key that has moved on is not the key that was stalled,
- * so the notice goes away on the next status without a write to undo it.
- */
-function useStalled(key) {
-    const [stalledKey, setStalledKey] = useState();
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setStalledKey(key);
-        }, STALL_MS);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [key]);
-    return stalledKey === key;
-}
 /**
  * The "view exists but isn't ready yet" screen a view renders instead of its
  * content — LGV, dotplot and linear synteny all show it while the assembly they
- * name is still loading, labelled with which of the assembly's files is
- * downloading and a determinate bar when that download reports one.
+ * name is still loading. A load past two seconds is labelled with which of the
+ * assembly's files is downloading, and a determinate bar when that download
+ * reports one; a faster one says only "Loading".
  *
  * A load that then stops reporting names the file it is waiting on. The phase
  * label alone does not: "Downloading chromosome aliases" is a fair description
@@ -69,8 +44,9 @@ function useStalled(key) {
  * {@link LoadingProgress} directly — bare, it renders an unconstrained
  * full-width bar under an unaligned label.
  */
-export default function ViewLoadingScreen({ message, fraction, source, }) {
+export default function ViewLoadingScreen({ message, progress, source, }) {
     const { classes } = useStyles();
-    const stalled = useStalled(`${message}|${fraction}|${source}`);
-    return (_jsxs("div", { className: classes.root, children: [_jsx(LoadingProgress, { variant: "h6", message: message, fraction: fraction, barClassName: classes.bar }), stalled && source ? (_jsxs(Typography, { variant: "body2", className: classes.stalled, children: ["still waiting on ", source] })) : null] }));
+    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] }));
 }

package/esm/ui/colorScale.d.ts

@@ -0,0 +1,92 @@
+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;
+    /**
+     * Every value painted in this row's color where the key is derived from
+     * the painting (`derivedColorScale`), `value` being the first; the label
+     * names them all. A row declared one value at a time leaves it unset.
+     */
+    values?: string[];
+    label: string;
+    color?: string;
+    swatches?: LegendSwatch[];
+    hidden?: boolean;
+    missing?: 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[];
+    domain?: readonly string[];
+    focusesRows?: boolean;
+    note?: string;
+}
+/** 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; `formatScore` by default, so
+ * a domain measured off the data prints `24.4` and not the float it was
+ * measured as.
+ */
+export interface RampScale {
+    kind: 'ramp';
+    id: string;
+    title?: string;
+    domain: [number, number];
+    stops: RampStop[];
+    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.
+     */
+    extent?: readonly [number, number];
+}
+/**
+ * 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 (a field's name over
+ * its values) and a lone ramp's goes on its row. Empty scales are
+ * dropped first, so one waiting for data does not leave its sibling untitled.
+ */
+export declare function legendSpecOf(scales: ColorScale[]): LegendSpec;
+/**
+ * The no-value row goes after every value a `domain` orders: the domain never
+ * lists it, so ordering by the domain alone ranks it with the values the
+ * domain leaves out.
+ */
+export declare function missingRowLast(a: {
+    missing?: boolean;
+}, b: {
+    missing?: boolean;
+}): number;
+/** 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,72 @@
+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) {
+    const [min, max] = domain;
+    const [lo, hi] = extent ?? domain;
+    // compared at float32 as well, since a value lane carries the extent in one
+    // and a pinned 0.3 is then a hair under the 0.3 it read
+    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)}`,
+        },
+    };
+}
+function sectionOf(scale, lone) {
+    if (scale.kind !== 'categorical') {
+        return { id: scale.id, title: scale.title, items: [rampItem(scale, lone)] };
+    }
+    // A key a display ordered itself keeps that order, rows it lists after the
+    // no-value row included.
+    const compare = scale.domain?.length
+        ? groupKeyComparator(scale.domain)
+        : undefined;
+    const items = compare
+        ? scale.entries.toSorted((a, b) => missingRowLast(a, b) || compare(a.value, b.value))
+        : scale.entries;
+    return {
+        id: scale.id,
+        title: scale.title,
+        note: scale.note,
+        items,
+        focusesRows: scale.focusesRows,
+    };
+}
+/**
+ * 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 (a field's name over
+ * its values) and a lone ramp's goes on its row. Empty scales are
+ * dropped first, so one waiting for data does not leave its sibling untitled.
+ */
+export function legendSpecOf(scales) {
+    const drawn = scales.filter(scale => !colorScaleIsEmpty(scale));
+    const lone = drawn.length === 1 ? drawn[0] : undefined;
+    return {
+        title: lone?.kind === 'categorical' ? lone.title : undefined,
+        sections: drawn.map(scale => sectionOf(scale, lone !== undefined)),
+    };
+}
+/**
+ * The no-value row goes after every value a `domain` orders: the domain never
+ * lists it, so ordering by the domain alone ranks it with the values the
+ * domain leaves out.
+ */
+export function missingRowLast(a, b) {
+    return Number(a.missing ?? false) - Number(b.missing ?? false);
+}
+/** 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

@@ -29,8 +29,67 @@ export declare const paletteColors: {
  * Past the end is the caller's problem, and the two callers answer differently
  * on purpose: an attribute palette-by hashes the VALUE (stable across
  * 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.
+ *
+ * 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.
  */
 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. `categoricalScale` is the same rule with a domain.
+ */
+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.
+ */
+export declare function categoricalScale<T>(domain: readonly (string | number)[] | undefined, range: readonly T[], { fallback, isNear, }?: {
+    fallback?: readonly T[];
+    isNear?: (a: T, b: T) => boolean;
+}): (value: string) => T;
+/**
+ * Whether two CSS colors read as one: under 0.05 apart in OKLab, where the
+ * wide palette's tableau and category10 oranges sit 0.003 apart.
+ */
+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.
+ */
+export declare function categoricalColorScale(domain: readonly (string | number)[] | undefined, palette?: readonly string[]): (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
+ * value joins the way a group key does.
+ */
+export declare function categoricalColor(value: unknown, domain?: readonly string[], palette?: readonly string[]): string;
 /**
  * Deterministic non-negative 32-bit hash of a string.
  */
@@ -60,4 +119,9 @@ export declare function refNamePaletteColorAt(position: number): string;
  * it falls back to the hash.
  */
 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.
+ */
+export declare function paletteFromSpec(spec: unknown): readonly string[] | undefined;
 export { category10, set1 };