@jbrowse/core 5.0.0-beta.8 → 5.0.0-beta.9

package/esm/util/categoricalField.d.ts

@@ -0,0 +1,37 @@
+/** #api */
+export declare const STRAND_FIELD = "strand";
+/**
+ * #api
+ * The row a feature with nothing in a categorical field lands on, so a key
+ * says why a mark is grey rather than listing a blank value.
+ */
+export declare const NO_VALUE_LABEL = "(no value)";
+/**
+ * #api
+ * One categorical field as every channel reads it — a facet's sections, a
+ * color's range entries, a key's rows. `key` files a value, `compare`
+ * orders keys (the `domain` first, the rest by `compareGroupKeys`, `''`
+ * after them), `label` names a key in a legend, `sectionLabel` on a chip, and
+ * `color` paints it. A key's color depends only on the key and the
+ * declaration, so every region agrees on it.
+ */
+export interface CategoricalField {
+    field: string;
+    /** The declared order, or the field's own where none is declared. */
+    domain: readonly string[];
+    /**
+     * Every key a value can file under is in `domain`, as a threshold scale's
+     * bins are, so a key lists all of them whether or not anything painted one.
+     */
+    closed?: boolean;
+    key: (value: unknown) => string;
+    compare: (a: string, b: string) => number;
+    label: (key: string) => string;
+    sectionLabel: (key: string) => string;
+    color: (key: string) => string;
+}
+/** #api */
+export declare function categoricalField(field: string, { domain, range, }?: {
+    domain?: readonly string[];
+    range?: readonly string[];
+}): CategoricalField;

package/esm/util/categoricalField.js

@@ -0,0 +1,52 @@
+import { categoricalColorScale } from '../ui/colors.js';
+import { NO_CATEGORY_COLOR } from './color/index.js';
+import { groupKeyComparator, valueText } from './groupKeys.js';
+/** #api */
+export const STRAND_FIELD = 'strand';
+/**
+ * #api
+ * The row a feature with nothing in a categorical field lands on, so a key
+ * says why a mark is grey rather than listing a blank value.
+ */
+export const NO_VALUE_LABEL = '(no value)';
+// A field whose values have names, an order and colors of their own, so
+// every channel reading it agrees without a config saying so. Red forward and
+// blue reverse is the vocabulary the synteny ribbons paint too.
+const VOCABULARIES = {
+    [STRAND_FIELD]: {
+        missing: '0',
+        domain: ['1', '-1', '0'],
+        range: ['tomato', 'cornflowerblue', 'goldenrod'],
+        labels: {
+            '1': 'Forward strand',
+            '-1': 'Reverse strand',
+            '0': 'No strand',
+        },
+    },
+};
+/** #api */
+export function categoricalField(field, { domain = [], range = [], } = {}) {
+    const vocabulary = VOCABULARIES[field];
+    const order = domain.length > 0 ? domain : (vocabulary?.domain ?? []);
+    const colors = range.length > 0 ? range : (vocabulary?.range ?? []);
+    const named = (key) => vocabulary?.labels[key];
+    let colorOf;
+    return {
+        field,
+        domain: order,
+        key: value => {
+            const key = valueText(value);
+            return key === '' && vocabulary ? vocabulary.missing : key;
+        },
+        compare: groupKeyComparator(order),
+        label: key => named(key) ?? (key === '' ? NO_VALUE_LABEL : key),
+        sectionLabel: key => named(key) ?? `${field}: ${key === '' ? 'none' : key}`,
+        color: key => {
+            if (key === '') {
+                return NO_CATEGORY_COLOR;
+            }
+            colorOf ??= categoricalColorScale(order, colors);
+            return colorOf(key);
+        },
+    };
+}

package/esm/util/color/cssColorsLevel4.d.ts

@@ -1,2 +1,3 @@
 export declare function namedColorToHex(name: string): string | undefined;
 export declare function isNamedColor(name: string): boolean;
+export declare const CSS_COLOR_NAMES: readonly string[];

package/esm/util/color/cssColorsLevel4.js

@@ -158,3 +158,4 @@ export function namedColorToHex(name) {
 export function isNamedColor(name) {
     return Object.hasOwn(colors, name);
 }
+export const CSS_COLOR_NAMES = Object.keys(colors);

package/esm/util/color/index.d.ts

@@ -20,7 +20,9 @@ export declare function emphasize(color: string, coefficient?: number): string;
  * default refName colors.
  */
 export declare function makeContrasting(foreground: string, background?: string, minContrastRatio?: number): string;
-export { isNamedColor, namedColorToHex } from './cssColorsLevel4.ts';
+export { CSS_COLOR_NAMES, isNamedColor, namedColorToHex, } from './cssColorsLevel4.ts';
+export declare const NO_CATEGORY_COLOR = "#afafaf";
+export declare const MISCONFIGURED_COLOR = "#808080";
 /**
  * #api
  * Move a color's OKLCH lightness by `lightnessShift` and scale its chroma,
@@ -69,8 +71,8 @@ export declare function relight(color: string, lightnessShift: number, chromaSca
  *
  * A value that is absent gets NO_CATEGORY_COLOR rather than a hue, and that is
  * the difference between this being usable on real data and not. The everyday
- * caller is the Color-by-attribute dialog, which writes
- * `jexl:randomColor(get(feature,'<attr>'))` over a whole track — and most files
+ * caller is a `jexl:randomColor(get(feature,'<attr>'))` color slot over a
+ * whole track — and most files
  * have the attribute on some features and not others, so most of the time this
  * is handed `undefined`. It used to throw on that (`str.length` of undefined),
  * once per feature, and what a reader saw was every unlabelled feature in one

package/esm/util/color/index.js

@@ -72,7 +72,7 @@ export function makeContrasting(foreground, background = 'white', minContrastRat
     }
     return best;
 }
-export { isNamedColor, namedColorToHex } from './cssColorsLevel4.js';
+export { CSS_COLOR_NAMES, isNamedColor, namedColorToHex, } from './cssColorsLevel4.js';
 // The (lightness, chroma) tiers randomColor picks between, in OKLCH. Values are
 // in the band a hand-built categorical palette occupies — bright enough to tell
 // apart, dark enough that black text over one still reads, and never near
@@ -81,7 +81,10 @@ export { isNamedColor, namedColorToHex } from './cssColorsLevel4.js';
 // What a value-less feature is painted. Neutral and unsaturated on purpose: it
 // has to read as "not in a category" beside a palette whose every member is
 // equally light and equally colorful, so it cannot be one more hue.
-const NO_CATEGORY_COLOR = '#afafaf';
+export const NO_CATEGORY_COLOR = '#afafaf';
+// What a colour declaration paints where it reads nothing it can colour, so a
+// misconfiguration surfaces rather than passing for the no-category grey.
+export const MISCONFIGURED_COLOR = '#808080';
 const RANDOM_COLOR_TIERS = [
     { lightness: 0.66, chroma: 0.15 },
     { lightness: 0.56, chroma: 0.14 },
@@ -175,8 +178,8 @@ export function relight(color, lightnessShift, chromaScale = 1) {
  *
  * A value that is absent gets NO_CATEGORY_COLOR rather than a hue, and that is
  * the difference between this being usable on real data and not. The everyday
- * caller is the Color-by-attribute dialog, which writes
- * `jexl:randomColor(get(feature,'<attr>'))` over a whole track — and most files
+ * caller is a `jexl:randomColor(get(feature,'<attr>'))` color slot over a
+ * whole track — and most files
  * have the attribute on some features and not others, so most of the time this
  * is handed `undefined`. It used to throw on that (`str.length` of undefined),
  * once per feature, and what a reader saw was every unlabelled feature in one

package/esm/util/colorBits.d.ts

@@ -1,7 +1,7 @@
 import { abgrToCssRgba } from '@jbrowse/render-core/marks/colorFill';
-import type { Color } from './color-bits/index.ts';
 import type { Feature } from './simpleFeature.ts';
 export { abgrToCssRgba };
+export { isCssColor, parseCssColorOr } from './cssColorParse.ts';
 export { alpha, blend, darken, formatHEX, formatHEXA, formatRGBA, getAlpha, getBlue, getGreen, getLuminance, getRed, lighten, newColor, parse, toHSLA, toRGBA, } from './color-bits/index.ts';
 export type { Color } from './color-bits/index.ts';
 /**
@@ -19,7 +19,6 @@ export declare function featureItemRgb(raw: unknown): string | undefined;
  * undefined if it declares none.
  */
 export declare function featureBedColor(feature: Feature): string | undefined;
-export declare function parseCssColorOr(color: string, fallback: Color): Color;
 export declare function parseCssColor(color: string | undefined | null): number;
 export declare function cssColorToNormalizedRgb(color: string): [number, number, number];
 export declare function cssColorToRgb(color: string): [number, number, number];

package/esm/util/colorBits.js

@@ -1,7 +1,8 @@
 import { abgrToCssRgba } from '@jbrowse/render-core/marks/colorFill';
-import { getAlpha, getBlue, getGreen, getRed, newColor, parse, } from './color-bits/index.js';
-import { namedColorToHex } from './color/cssColorsLevel4.js';
+import { getAlpha, getBlue, getGreen, getRed, newColor, } from './color-bits/index.js';
+import { bedTriple, parseCssColorOr } from './cssColorParse.js';
 export { abgrToCssRgba };
+export { isCssColor, parseCssColorOr } from './cssColorParse.js';
 export { alpha, blend, darken, formatHEX, formatHEXA, formatRGBA, getAlpha, getBlue, getGreen, getLuminance, getRed, lighten, newColor, parse, toHSLA, toRGBA, } from './color-bits/index.js';
 // Magenta sentinel for invalid input. User-written jexl color callbacks can
 // legitimately return undefined (e.g. when a feature lacks the field they
@@ -9,10 +10,6 @@ export { alpha, blend, darken, formatHEX, formatHEXA, formatRGBA, getAlpha, getB
 // Returning magenta makes the bad slot visually obvious without breaking the
 // rest of the render.
 const INVALID_COLOR = newColor(255, 0, 255, 255);
-// A bare BED color triple ("255,0,0"), which is not a CSS color but is what
-// BED-family adapters put on the feature verbatim. The spec has no spaces, but
-// tolerate them rather than silently ignoring an otherwise-usable color.
-const BED_TRIPLE = /^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/;
 // UCSC's convention is that a color of "0" means "no color specified", and plain
 // BED12 files fill the column with that placeholder (often spelled as the
 // all-zero triple) rather than omitting it — every itemRgb in our own
@@ -20,17 +17,6 @@ const BED_TRIPLE = /^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/;
 // ordinary BED12 track solid black, so read them as absent. A file that really
 // wants black can say so with an explicit `color` slot.
 const BED_TRIPLE_UNSET = /^0(,0,0)?$/;
-/**
- * Normalize a bare BED color triple to canonical "r,g,b", or undefined if the
- * string isn't one. Each component must be in range: the underlying parser
- * masks to 8 bits, so a bogus "999,0,0" would otherwise *wrap* to 231 and paint
- * a plausible-looking but wrong color rather than being caught.
- */
-function bedTriple(str) {
-    const m = BED_TRIPLE.exec(str.trim());
-    const rgb = m?.slice(1, 4).map(Number);
-    return rgb?.every(n => n <= 255) ? rgb.join(',') : undefined;
-}
 /**
  * One raw attribute value as a usable BED color, or undefined when it isn't
  * one. Deliberately strict: this feeds an *automatic* coloring path, so a value
@@ -75,27 +61,6 @@ export function featureBedColor(feature) {
     }
     return found;
 }
-// Resolve a CSS color string to a Color: honors named colors, `transparent`,
-// and bare BED color triples, and returns `fallback` on malformed-but-nonempty
-// input. `parse` throws on e.g. an empty "rgb()"; callers pass a fallback so one
-// bad per-feature color can't crash a whole render/RPC. An out-of-range triple
-// is left to throw into `fallback` (magenta) rather than wrapping to a wrong
-// color — the same rule featureItemRgb applies, so a jexl callback reading an
-// itemRgb column and the automatic path agree on what counts as a color.
-export function parseCssColorOr(color, fallback) {
-    const str = color.trim().toLowerCase();
-    if (str === 'transparent') {
-        return newColor(0, 0, 0, 0);
-    }
-    try {
-        const hex = namedColorToHex(str);
-        const triple = bedTriple(str);
-        return parse(hex ? hex : triple ? `rgb(${triple})` : str);
-    }
-    catch {
-        return fallback;
-    }
-}
 export function parseCssColor(color) {
     if (typeof color !== 'string' || color.length === 0) {
         return INVALID_COLOR;
@@ -120,9 +85,22 @@ export function cssColorToRgba(color) {
 export function packAbgr(r, g, b, a) {
     return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0;
 }
+// A packer resolves the same few strings once per primitive, so the parse is
+// cached by string. Capped, because BED itemRgb triples are unbounded.
+const ABGR_CACHE_LIMIT = 4096;
+const abgrByCss = new Map();
 export function cssColorToABGR(color) {
+    const cached = abgrByCss.get(color);
+    if (cached !== undefined) {
+        return cached;
+    }
     const c = parseCssColor(color);
-    return packAbgr(getRed(c), getGreen(c), getBlue(c), getAlpha(c));
+    const packed = packAbgr(getRed(c), getGreen(c), getBlue(c), getAlpha(c));
+    if (abgrByCss.size >= ABGR_CACHE_LIMIT) {
+        abgrByCss.clear();
+    }
+    abgrByCss.set(color, packed);
+    return packed;
 }
 // Replace the alpha byte of an ABGR-packed u32, keeping its RGB. RGB already
 // occupies the low 24 bits (b<<16 | g<<8 | r), so this is a mask + or — no

package/esm/util/colorRamp.d.ts

@@ -1,4 +1,5 @@
 import type { RampStop } from '../ui/colorScale.ts';
+import type { ColorSchemeName } from './colorSchemes.ts';
 /** One evenly-spaced ramp stop: 8-bit red, green, blue, alpha. */
 export type ColorRampStop = readonly [number, number, number, number];
 /**
@@ -8,6 +9,25 @@ export type ColorRampStop = readonly [number, number, number, number];
  * stops.
  */
 export declare const VIRIDIS_STOPS: readonly ColorRampStop[];
+/**
+ * #api
+ * The domain a continuous colour scale spans: each end `min` or `max` pins,
+ * else the extent's, ascending, since a span has no direction and `reverse`
+ * is the ramp's. An open end stops at a pinned one rather than crossing it,
+ * and an extent holding no value (`[Infinity, -Infinity]`) spans [0, 1].
+ */
+export declare function rampDomain(min: number | undefined, max: number | undefined, extent: readonly [number, number]): [number, number];
+/**
+ * #api
+ * The stops a continuous colour scale samples: `range`'s CSS colours where it
+ * lists any, else the named `scheme`, viridis while that is unset, turned
+ * round under `reverse`.
+ */
+export declare function colorRampStops({ range, scheme, reverse, }: {
+    range?: readonly string[];
+    scheme?: ColorSchemeName;
+    reverse?: boolean;
+}): readonly ColorRampStop[];
 /**
  * #api
  * The color at `t` in `[0, 1]` across a list of EVENLY SPACED stops, linearly
@@ -22,8 +42,14 @@ export declare function sampleColorRamp(stops: readonly ColorRampStop[], t: numb
  * texture both GPU backends upload and the Canvas2D twins index — entry `i` is
  * the color at `t = i / (N - 1)`. N comes off the shader that samples it, so
  * the table and `rampColor`'s texel mapping cannot disagree.
+ *
+ * `mid` is where the stop list's own midpoint lands in the table, so a
+ * diverging ramp whose middle colour belongs at a value off the centre of the
+ * domain is baked into the bytes. Every reader — the shader, the Canvas2D
+ * fillStyle table, the legend bar — then samples one evenly spaced table and
+ * cannot disagree about the warp.
  */
-export declare function buildColorRampLut(stops: readonly ColorRampStop[]): Uint8Array<ArrayBuffer>;
+export declare function buildColorRampLut(stops: readonly ColorRampStop[], mid?: number): Uint8Array<ArrayBuffer>;
 /**
  * #api
  * `n` evenly spaced legend stops read straight out of a

package/esm/util/colorRamp.js

@@ -1,4 +1,5 @@
 import { COLOR_RAMP_LUT_ENTRIES } from '@jbrowse/render-core/colorRampLut';
+import { cssColorToRgba } from './colorBits.js';
 // Viridis full 256-color hex spec, kept whole so a LUT built from these stops
 // carries the smooth perceptually-uniform gradient rather than an
 // interpolation over a subset. Lived in the hic plugin until wiggle density
@@ -25,6 +26,42 @@ function viridisStopsFromHex() {
  * stops.
  */
 export const VIRIDIS_STOPS = viridisStopsFromHex();
+const SCHEME_STOPS = {
+    viridis: VIRIDIS_STOPS,
+};
+const EMPTY_EXTENT_DOMAIN = [0, 1];
+/**
+ * #api
+ * The domain a continuous colour scale spans: each end `min` or `max` pins,
+ * else the extent's, ascending, since a span has no direction and `reverse`
+ * is the ramp's. An open end stops at a pinned one rather than crossing it,
+ * and an extent holding no value (`[Infinity, -Infinity]`) spans [0, 1].
+ */
+export function rampDomain(min, max, extent) {
+    const [lo, hi] = extent[0] <= extent[1] ? extent : EMPTY_EXTENT_DOMAIN;
+    if (min !== undefined && max !== undefined) {
+        return min <= max ? [min, max] : [max, min];
+    }
+    if (min !== undefined) {
+        return [min, Math.max(min, hi)];
+    }
+    if (max !== undefined) {
+        return [Math.min(lo, max), max];
+    }
+    return [lo, hi];
+}
+/**
+ * #api
+ * The stops a continuous colour scale samples: `range`'s CSS colours where it
+ * lists any, else the named `scheme`, viridis while that is unset, turned
+ * round under `reverse`.
+ */
+export function colorRampStops({ range, scheme, reverse, }) {
+    const stops = range?.length
+        ? range.map(c => cssColorToRgba(c))
+        : SCHEME_STOPS[scheme ?? 'viridis'];
+    return reverse ? stops.toReversed() : stops;
+}
 function lerp8(a, b, t) {
     return Math.round(a * (1 - t) + b * t);
 }
@@ -54,12 +91,20 @@ export function sampleColorRamp(stops, t) {
  * texture both GPU backends upload and the Canvas2D twins index — entry `i` is
  * the color at `t = i / (N - 1)`. N comes off the shader that samples it, so
  * the table and `rampColor`'s texel mapping cannot disagree.
+ *
+ * `mid` is where the stop list's own midpoint lands in the table, so a
+ * diverging ramp whose middle colour belongs at a value off the centre of the
+ * domain is baked into the bytes. Every reader — the shader, the Canvas2D
+ * fillStyle table, the legend bar — then samples one evenly spaced table and
+ * cannot disagree about the warp.
  */
-export function buildColorRampLut(stops) {
+export function buildColorRampLut(stops, mid = 0.5) {
     const last = COLOR_RAMP_LUT_ENTRIES - 1;
     const data = new Uint8Array(COLOR_RAMP_LUT_ENTRIES * 4);
+    const m = Math.min(1, Math.max(0, mid));
     for (let i = 0; i < COLOR_RAMP_LUT_ENTRIES; i++) {
-        const [r, g, b, a] = sampleColorRamp(stops, i / last);
+        const t = i / last;
+        const [r, g, b, a] = sampleColorRamp(stops, unwarp(t, m));
         data[i * 4] = r;
         data[i * 4 + 1] = g;
         data[i * 4 + 2] = b;
@@ -67,6 +112,15 @@ export function buildColorRampLut(stops) {
     }
     return data;
 }
+function unwarp(t, mid) {
+    if (mid <= 0) {
+        return t >= 1 ? 1 : 0.5 + 0.5 * t;
+    }
+    if (mid >= 1) {
+        return t <= 0 ? 0 : 0.5 * t;
+    }
+    return t <= mid ? (0.5 * t) / mid : 0.5 + (0.5 * (t - mid)) / (1 - mid);
+}
 /**
  * #api
  * `n` evenly spaced legend stops read straight out of a

package/esm/util/colorSchemes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * #api
+ * The named ramps a continuous colour scale's `scheme` takes, each one a stop
+ * table in `colorRamp.ts` that every ramp baker reads, so no display can name
+ * a scheme nothing bakes.
+ */
+export declare const COLOR_SCHEMES: readonly ['viridis'];
+/** #api */
+export type ColorSchemeName = (typeof COLOR_SCHEMES)[number];

package/esm/util/colorSchemes.js

@@ -0,0 +1,7 @@
+/**
+ * #api
+ * The named ramps a continuous colour scale's `scheme` takes, each one a stop
+ * table in `colorRamp.ts` that every ramp baker reads, so no display can name
+ * a scheme nothing bakes.
+ */
+export const COLOR_SCHEMES = ['viridis'];

package/esm/util/{createStopTokenRotation.d.ts → createAbortRotation.d.ts}

@@ -1,5 +1,4 @@
 import type { RpcStatus, StatusWindow } from './progress.ts';
-import type { StopToken } from './stopToken.ts';
 import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 /**
  * Where a rotation reports, in the one of two modes the host is actually in.
@@ -51,8 +50,7 @@ export interface StatusChannel {
 }
 export declare function createStatusChannel(): StatusChannel;
 export interface ActiveFetch {
-    /** stop token to forward to the RPC call */
-    stopToken: StopToken;
+    signal: AbortSignal;
     /**
      * True only while this is still the most recent fetch AND `self` is alive.
      * Gate every post-await write — result commit, error set — on it so a
@@ -73,8 +71,8 @@ export interface ActiveFetch {
      * other operation on the host is still reporting.
      *
      * Both together, because a caller doing it by hand gets a subset.
-     * `isCurrent` is `token === current && isAlive`, and a run that *completes*
-     * never rotates its own token — so without this the guard stays open past the
+     * `isCurrent` is `signal === current && isAlive`, and a run that *completes*
+     * never rotates its own signal — so without this the guard stays open past the
      * work and a trailing write lands on top of a hand-written
      * `setStatusMessage(undefined)` up to a window later.
      *
@@ -85,19 +83,18 @@ export interface ActiveFetch {
     end: () => void;
 }
 /**
- * Latest-wins stop-token rotation for a fetch that runs in a bare `autorun`
+ * Latest-wins abort rotation for a fetch that runs in a bare `autorun`
  * rather than through `FetchMixin.runFetch` (which welds the same mechanics to
  * `fetchGeneration`, so it's only for viewport-driven LGV fetches). Each
- * `begin()` aborts the prior fetch's token and returns a fresh one plus an
- * `isCurrent()` guard that captures this run's token — gate every post-await
- * write on it and a superseded or torn-down fetch can never clobber fresher
- * data. The guard is the return value, so a caller can't forget to compare a
- * token by hand.
+ * `begin()` aborts the prior fetch and returns a fresh signal plus an
+ * `isCurrent()` guard that captures this run — gate every post-await write on
+ * it and a superseded or torn-down fetch can never clobber fresher data. The
+ * guard is the return value, so a caller can't forget to compare by hand.
  *
  * `end()` in the run's `finally` is the other half, and for the same reason —
  * see {@link ActiveFetch.end} for the two things it does together.
  *
- * Owns the token mechanics and the status channel; the caller keeps its own
+ * Owns the controller and the status channel; the caller keeps its own
  * loading/error/commit side-effects. Three holders: `FetchMixin` as a member
  * (so `cancelFetch` can reach it), `installFetch` one per installation (every
  * other fetch in the tree runs on that skeleton), and the synteny diagonalize
@@ -111,8 +108,8 @@ export interface ActiveFetch {
  * passes a {@link createStatusChannel}, which is one volatile instead of two
  * fields and an action.
  */
-export type StopTokenRotation = ReturnType<typeof createStopTokenRotation>;
-export declare function createStopTokenRotation(self: IStateTreeNode, report: StatusReporter): {
+export type AbortRotation = ReturnType<typeof createAbortRotation>;
+export declare function createAbortRotation(self: IStateTreeNode, report: StatusReporter): {
     begin(): ActiveFetch;
     cancel: () => void;
     dispose(): void;

package/esm/util/{createStopTokenRotation.js → createAbortRotation.js}

@@ -1,7 +1,6 @@
 import { isAlive } from '@jbrowse/mobx-state-tree';
 import { observable, runInAction } from 'mobx';
 import { createStatusWindow, statusFraction, statusMessageText, } from './progress.js';
-import { createStopToken, stopStopToken } from './stopToken.js';
 export function createStatusChannel() {
     // MobX rather than MST, so this is a value a model can hold rather than a
     // node it has to parent. A volatile is `observable.ref`, so the fields have
@@ -28,8 +27,8 @@ export function createStatusChannel() {
         },
     };
 }
-export function createStopTokenRotation(self, report) {
-    let currentStopToken;
+export function createAbortRotation(self, report) {
+    let current;
     // The host's window when it has one, so a display composing `FetchMixin` has
     // one window rather than two writing one field; our own otherwise. Lent means
     // this fetch is one slot beside the host's others rather than a second writer
@@ -49,8 +48,8 @@ export function createStopTokenRotation(self, report) {
     /**
      * Stop the in-flight fetch without starting one, and retire its slot.
      *
-     * Dropping `currentStopToken` rather than only stopping it is what closes
-     * every outstanding guard: `isCurrent` compares against this field, so one
+     * Dropping `current` rather than only aborting it is what closes every
+     * outstanding guard: `isCurrent` compares against this field, so one
      * assignment makes a fetch already past its await stale, whether it is the one
      * being cancelled or a superseded predecessor still unwinding.
      *
@@ -61,10 +60,8 @@ export function createStopTokenRotation(self, report) {
      * works: `addDisposer(self, rotation.dispose)` is a shape callers reach for.
      */
     const cancel = () => {
-        if (currentStopToken) {
-            stopStopToken(currentStopToken);
-            currentStopToken = undefined;
-        }
+        current?.abort();
+        current = undefined;
         // a fetch in flight when this is called never reaches its `finally`, and a
         // slot nobody retires goes on voting
         openStream?.clear();
@@ -72,17 +69,15 @@ export function createStopTokenRotation(self, report) {
     };
     return {
         begin() {
-            if (currentStopToken) {
-                stopStopToken(currentStopToken);
-            }
-            const stopToken = createStopToken();
-            currentStopToken = stopToken;
+            current?.abort();
+            const controller = new AbortController();
+            current = controller;
             // `ended` is the term a completed fetch has no other way to express: the
-            // token comparison catches a SUPERSEDED one, but a fetch that simply
-            // finished still holds the current token. The stream reads it as well as
+            // controller comparison catches a SUPERSEDED one, but a fetch that simply
+            // finished still holds the current one. The stream reads it as well as
             // the caller's commit guard, which is why both go through this closure.
             let ended = false;
-            const isCurrent = () => !ended && stopToken === currentStopToken && isAlive(self);
+            const isCurrent = () => !ended && controller === current && isAlive(self);
             // Opened BEFORE the superseded run reaches its `finally`, which is what
             // keeps the label the user is looking at from blanking between the two:
             // the run being replaced is suspended at an await and resumes a microtask
@@ -92,18 +87,11 @@ export function createStopTokenRotation(self, report) {
             const stream = statusWindow.open({ isCurrent });
             openStream = stream;
             return {
-                stopToken,
+                signal: controller.signal,
                 isCurrent,
                 statusCallback: stream.statusCallback,
                 end() {
                     ended = true;
-                    // A completed fetch's token is released here, not only on supersede
-                    // or cancel — otherwise it pins its AbortSignal controllers (and blob
-                    // URL) until the next `begin()`, forever for a one-shot fetch that
-                    // succeeds and never reruns. `stopStopToken` is guarded, so the
-                    // superseded and cancelled runs that arrive here already-stopped cost
-                    // nothing.
-                    stopStopToken(stopToken);
                     if (openStream === stream) {
                         openStream = undefined;
                     }
@@ -114,7 +102,7 @@ export function createStopTokenRotation(self, report) {
         cancel,
         dispose() {
             cancel();
-            // the window outlives the token: a trailing write is queued on a timer,
+            // the window outlives the fetch: a trailing write is queued on a timer,
             // and while the sink's `isCurrent` makes it a no-op rather than a write to
             // a dead node, the timer itself still stands for up to a window past
             // teardown. Only ours — resetting a lent one drops a write the host's

package/esm/util/cssColorParse.d.ts

@@ -0,0 +1,15 @@
+import type { Color } from './color-bits/core.ts';
+/**
+ * Normalize a bare BED color triple to canonical "r,g,b", or undefined if the
+ * string isn't one. Each component must be in range: the underlying parser
+ * masks to 8 bits, so a bogus "999,0,0" would otherwise *wrap* to 231 and paint
+ * a plausible-looking but wrong color rather than being caught.
+ */
+export declare function bedTriple(str: string): string | undefined;
+export declare function parseCssColorOr(color: string, fallback: Color): Color;
+/**
+ * Whether the painters read `color` as a color — a CSS name, hex, functional
+ * form, `transparent` or a BED triple — rather than as the invalid sentinel.
+ * What a `color` config slot admits.
+ */
+export declare function isCssColor(color: string): boolean;

package/esm/util/cssColorParse.js

@@ -0,0 +1,53 @@
+import { newColor } from './color-bits/core.js';
+import { parse } from './color-bits/parse.js';
+import { namedColorToHex } from './color/cssColorsLevel4.js';
+// Split out of colorBits.ts so a config slot can ask "is this a color?" without
+// taking that module's re-export of render-core's packers: the closure ceiling
+// in scripts/moduleClosure.test.ts is what says so.
+// A bare BED color triple ("255,0,0"), which is not a CSS color but is what
+// BED-family adapters put on the feature verbatim. The spec has no spaces, but
+// tolerate them rather than silently ignoring an otherwise-usable color.
+const BED_TRIPLE = /^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/;
+/**
+ * Normalize a bare BED color triple to canonical "r,g,b", or undefined if the
+ * string isn't one. Each component must be in range: the underlying parser
+ * masks to 8 bits, so a bogus "999,0,0" would otherwise *wrap* to 231 and paint
+ * a plausible-looking but wrong color rather than being caught.
+ */
+export function bedTriple(str) {
+    const m = BED_TRIPLE.exec(str.trim());
+    const rgb = m?.slice(1, 4).map(Number);
+    return rgb?.every(n => n <= 255) ? rgb.join(',') : undefined;
+}
+function tryParseCssColor(color) {
+    const str = color.trim().toLowerCase();
+    if (str === 'transparent') {
+        return newColor(0, 0, 0, 0);
+    }
+    try {
+        const hex = namedColorToHex(str);
+        const triple = bedTriple(str);
+        return parse(hex ? hex : triple ? `rgb(${triple})` : str);
+    }
+    catch {
+        return undefined;
+    }
+}
+// Resolve a CSS color string to a Color: honors named colors, `transparent`,
+// and bare BED color triples, and returns `fallback` on malformed-but-nonempty
+// input. `parse` throws on e.g. an empty "rgb()"; callers pass a fallback so one
+// bad per-feature color can't crash a whole render/RPC. An out-of-range triple
+// is left to throw into `fallback` (magenta) rather than wrapping to a wrong
+// color — the same rule featureItemRgb applies, so a jexl callback reading an
+// itemRgb column and the automatic path agree on what counts as a color.
+export function parseCssColorOr(color, fallback) {
+    return tryParseCssColor(color) ?? fallback;
+}
+/**
+ * Whether the painters read `color` as a color — a CSS name, hex, functional
+ * form, `transparent` or a BED triple — rather than as the invalid sentinel.
+ * What a `color` config slot admits.
+ */
+export function isCssColor(color) {
+    return tryParseCssColor(color) !== undefined;
+}