@perspective-dev/viewer-charts 5.2.0 → 5.3.0

package/dist/esm/plugin/plugin.d.ts

@@ -87,8 +87,10 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
      */
     static setBlitMode(mode: "direct" | "blit"): void;
     get_static_config(): PluginStaticConfig;
-    column_config_schema(column_type: string, _group: string | undefined, _column_name: string, current_value: Record<string, unknown> | null, _viewer_config?: {
+    column_config_schema(column_type: string, group: string | undefined, column_name: string, current_value: Record<string, unknown> | null, viewer_config?: {
+        columns?: (string | null)[];
         group_by?: string[];
+        split_by?: string[];
         group_rollup_mode?: string;
     }): {
         fields: (Record<string, unknown> & {
@@ -103,6 +105,11 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
             kind: string;
         })[];
     };
+    private _resolvedTheme;
+    private static readonly GRADIENT_PALETTE_FALLBACK_COUNT;
+    private _themeSeriesPaletteHex;
+    private _themeSeriesColorHex;
+    private _themeGradientStopsSpec;
     draw(view: View): Promise<void>;
     update(view: View): Promise<void>;
     /**

package/dist/esm/theme/gradient.d.ts

@@ -15,6 +15,37 @@ export interface GradientStop {
  * that never set the gradient still produce sane output.
  */
 export declare function parseCssGradient(src: string | null | undefined): GradientStop[];
+/**
+ * A color literal — `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` or
+ * `rgba()` — as a `[0, 1]` RGB triple, or `null` for anything else.
+ */
+export declare function parseCssColorStrict(src: string): [number, number, number] | null;
+/**
+ * The shared `linear-gradient(...)` tokenizer of the viewer's CSS-valued
+ * config grammar.
+ */
+export declare function tokenizeLinearGradient(src: string): Array<[[number, number, number], number | null]> | null;
+/**
+ * Strict gradient reader: a `linear-gradient(...)` with ≥ 2 stops,
+ * positions optional, offsets clamped to `[0, 1]` and sorted, or `null`
+ * on malformed input.
+ */
+export declare function parseCssGradientStrict(src: string): GradientStop[] | null;
+/**
+ * Strict palette reader: a `linear-gradient(...)` of ≥ 1 colors with no
+ * positions, or `null` on malformed input.
+ */
+export declare function parseCssColorList(src: string): Array<[number, number, number]> | null;
+/**
+ * The viewer's canonical gradient string for `stops`: `linear-gradient(to
+ * right, #rrggbb P%, …)`, sorted, positions at 0.1% resolution.
+ */
+export declare function stopsToCss(stops: GradientStop[]): string;
+/**
+ * The viewer's canonical palette string for `colors`: the same frame
+ * with bare `#rrggbb` entries and no positions.
+ */
+export declare function colorsToCss(colors: Array<[number, number, number]>): string;
 /**
  * Piecewise-linear color sample at `t ∈ [0, 1]`. Returns RGBA in [0, 1].
  * Clamps `t` to the gradient's first/last stop outside `[0, 1]`.

package/dist/esm/theme/overrides.d.ts

@@ -0,0 +1,19 @@
+import { type GradientStop } from "./gradient";
+import type { Theme } from "./theme";
+import type { Vec3 } from "./palette";
+/**
+ * Per-column color-scale overrides from the viewer's `columns_config`,
+ * patched into the resolved `Theme`'s `seriesPalette` / `gradientStops`
+ * fields.
+ */
+export declare function applyColumnColorOverrides(theme: Theme, columnsConfig: Record<string, any> | undefined, colorColumn: string | null): Theme;
+/**
+ * Parse a stored `palette` value into the `seriesPalette` shape, or
+ * `null` on anything malformed.
+ */
+export declare function parsePaletteOverride(raw: unknown): Vec3[] | null;
+/**
+ * Parse a stored `gradient` value into sorted `GradientStop[]`, or
+ * `null` on malformed input or fewer than 2 stops.
+ */
+export declare function parseGradientOverride(raw: unknown): GradientStop[] | null;

package/dist/esm/transport/protocol.d.ts

@@ -49,8 +49,19 @@ export interface InitMsg {
      * `dpr` and there is no host-side GL drawing buffer.
      */
     glCanvas?: OffscreenCanvas;
-    gridlinesCanvas: OffscreenCanvas;
-    chromeCanvas: OffscreenCanvas;
+    /**
+     * The gridlines (bottom) and chrome/axes (top) 2D layers.
+     * Transferred via `transferControlToOffscreen` on the host, present
+     * iff `renderMode === "direct"` — their pixels reach the screen
+     * through the compositor. In blit mode the renderer allocates
+     * worker-local surfaces instead and composites both layers into the
+     * shipped `FrameBitmapMsg`, so every layer of the frame rides the
+     * host's staged-present hold (a transferred canvas presents on the
+     * compositor's own schedule, unsynchronized with the host's layout
+     * commits — the one-frame axes warp on anticipated resizes).
+     */
+    gridlinesCanvas?: OffscreenCanvas;
+    chromeCanvas?: OffscreenCanvas;
     /**
      * `MessagePort` to the host's `ProxySession`. Worker mode only —
      * the worker bootstraps a fresh `Client` and bridges it through

package/dist/esm/utils/css.d.ts

@@ -1 +1,5 @@
 export declare function parseCSSColorToVec3(colorStr: string): [number, number, number];
+/**
+ * Format a `[0, 1]`-range RGB triple as a plain `#rrggbb` string.
+ */
+export declare function vec3ToHexColor(c: [number, number, number]): string;

package/dist/esm/worker/renderer.worker.d.ts

@@ -13,6 +13,17 @@ export declare class WorkerRenderer {
     cssWidth: number;
     cssHeight: number;
     dpr: number;
+    /**
+     * Blit-mode compose surface: gridlines + GL frame + chrome are
+     * drawn here each `endFrame` and shipped as ONE `ImageBitmap`, so
+     * every layer rides the host's staged-present hold (see
+     * `InitMsg.gridlinesCanvas`). `null` in direct mode.
+     */
+    private _composeCanvas;
+    private _composeCtx;
+    private _lastPlot;
+    private _frameSerial;
+    private _overlayPresentQueued;
     client: Client;
     view: View;
     /**
@@ -104,6 +115,22 @@ export declare class WorkerRenderer {
      * mouse-event branches fall through.
      */
     private _tooltip;
+    /**
+     * Blit-mode frame composite: draw the gridlines (bottom), the GL
+     * plot bitmap (middle) and the chrome/axes (top) into the compose
+     * surface and transfer the result — the single `ImageBitmap` the
+     * host blits, and the unit the staged-present hold stages. Runs in
+     * `endFrame`, which the scheduler orders after `render2D`'s 2D
+     * flush, so both layers hold this frame's content.
+     *
+     * A layer whose buffer differs from the plot's dimensions is
+     * skipped rather than scaled: its content is a stale-sized frame
+     * mid-resize (the 2D draws re-size their canvas to `css × dpr` on
+     * the next flush), and scaling it would re-introduce exactly the
+     * warp this composite exists to prevent.
+     */
+    private _composeFrame;
+    private _presentOverlay;
     /**
      * Composite the three layers into a single PNG `Blob`.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-charts",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Perspective.js WebGL Plugin",
   "unpkg": "./dist/cdn/perspective-viewer-charts.js",
   "jsdelivr": "./dist/cdn/perspective-viewer-charts.js",

package/src/ts/charts/candlestick/candlestick-build.ts

@@ -281,6 +281,7 @@ export function buildCandlestickPipeline(
         numRows,
         groupBy.length,
         levelTypes,
+        axisMode,
     );
     if (numCategories === 0) {
         return {

package/src/ts/charts/candlestick/candlestick-render.ts

@@ -230,7 +230,15 @@ export function renderCandlestickFrame(
     chart._defer2D(() => renderCandlestickChromeOverlay(chart));
 }
 
+/**
+ * Draw axes chrome + (optional) tooltip onto the overlay canvas.
+ */
 export function renderCandlestickChromeOverlay(chart: CandlestickChart): void {
+    paintCandlestickChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintCandlestickChromeOverlay(chart: CandlestickChart): void {
     if (
         !chart._chromeCanvas ||
         !chart._lastLayout ||

package/src/ts/charts/candlestick/candlestick.ts

@@ -212,9 +212,10 @@ export class CandlestickChart extends CategoricalYChart {
 
         const catIdx = this._candles.catIdx[idx];
         const splitIdx = this._candles.splitIdx[idx];
-        const groupByValues: (string | null)[] = this._rowPaths.map(
-            (level) => level.labels[catIdx] ?? null,
-        );
+        const groupByValues: (string | number | null)[] =
+            this._categoryAxisMode === "numeric" && this._categoryPositions
+                ? [this._categoryPositions[catIdx] ?? null]
+                : this._rowPaths.map((level) => level.labels[catIdx] ?? null);
         const splitKey = this._splitPrefixes[splitIdx] ?? "";
         const splitByValues =
             this._splitBy.length > 0 && splitKey !== ""

package/src/ts/charts/cartesian/cartesian-render.ts

@@ -699,6 +699,11 @@ function renderFacetedFrame(
  * Redraw the chrome canvas only. Used for lightweight hover updates.
  */
 export function renderCartesianChromeOverlay(chart: CartesianChart): void {
+    paintCartesianChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintCartesianChromeOverlay(chart: CartesianChart): void {
     if (
         !chart._chromeCanvas ||
         !chart._lastLayout ||

package/src/ts/charts/cartesian/cartesian.ts

@@ -61,6 +61,10 @@ export class CartesianChart extends AbstractChart {
         this.glyph = glyph;
     }
 
+    protected override colorScaleColumn(): string | null {
+        return this._colorName || null;
+    }
+
     /**
      * Rendering pipeline selector. `"cartesian"` is the default —
      * draws axes, gridlines, and ticks via the chrome canvas.

package/src/ts/charts/chart-base.ts

@@ -44,6 +44,7 @@ import {
 import type { PerspectiveClickDetail } from "../event-detail";
 import type { ViewConfig } from "@perspective-dev/client";
 import { resolveThemeFromVars, type Theme } from "../theme/theme";
+import { applyColumnColorOverrides } from "../theme/overrides";
 import { requestRender as scheduleRender } from "../render/scheduler";
 
 // TODO I don't know if this is the behavior we want. On the plus side, this
@@ -141,6 +142,7 @@ export abstract class AbstractChart implements ChartImplementation {
     _glManager: WebGLContextManager | null = null;
     _gridlineCanvas: HTMLCanvasElement | OffscreenCanvas | null = null;
     _chromeCanvas: HTMLCanvasElement | OffscreenCanvas | null = null;
+    _overlayPresenter: (() => void) | null = null;
 
     /**
      * 2D-canvas draw closures collected during `_fullRender` (the GL
@@ -259,12 +261,16 @@ export abstract class AbstractChart implements ChartImplementation {
 
     /**
      * Cached resolved theme — populated on first `_resolveTheme()` call,
-     * cleared by `invalidateTheme()` (driven from `plugin.restyle()`).
-     * `getComputedStyle` / `getPropertyValue` reads cost ~100µs each;
-     * zoom/hover dispatch redraws at 60Hz so we resolve once and reuse.
+     * cleared by `invalidateTheme()` (driven from `plugin.restyle()`)
+     * and by `setColumnsConfig` (per-column color overrides patch the
+     * resolved theme). `getComputedStyle` / `getPropertyValue` reads
+     * cost ~100µs each; zoom/hover dispatch redraws at 60Hz so we
+     * resolve once and reuse.
      */
     _theme: Theme | null = null;
 
+    _themeColorColumn: string | null = null;
+
     /**
      * On-demand single-row fetcher used by lazy tooltip column
      * lookups. Reset on every `setView` call; subclasses read
@@ -287,6 +293,18 @@ export abstract class AbstractChart implements ChartImplementation {
         this._chromeCanvas = canvas;
     }
 
+    setOverlayPresenter(cb: () => void): void {
+        this._overlayPresenter = cb;
+    }
+
+    /**
+     * Present a chrome-overlay repaint that ran outside the scheduler's
+     * frame chain.
+     */
+    presentOverlay(): void {
+        this._overlayPresenter?.();
+    }
+
     setTheme(vars: Record<string, string>): void {
         this._themeVars = vars;
         this._theme = null;
@@ -434,6 +452,8 @@ export abstract class AbstractChart implements ChartImplementation {
     setColumnsConfig(cfg: Record<string, any>): void {
         this._columnsConfig = cfg ?? {};
         this._rebuildColumnFormatters();
+
+        this._theme = null;
     }
 
     /**
@@ -599,16 +619,28 @@ export abstract class AbstractChart implements ChartImplementation {
             cfg.series_zoom_mode === "dynamic";
     }
 
+    protected colorScaleColumn(): string | null {
+        return null;
+    }
+
     /**
-     * Lazily decode the host-supplied theme vars. Subsequent calls hit
-     * the cache until `invalidateTheme()` clears it. Render-path
-     * callers should always read theme values through this method so
-     * the parsed `Theme` (gradient stops, palette, etc.) amortizes
-     * across an entire frame.
+     * Lazily decode the host-supplied theme vars, then patch in any
+     * per-column color-scale override for `colorScaleColumn()`.
+     * Subsequent calls hit the cache until `invalidateTheme()` /
+     * `setColumnsConfig` clears it or the color column changes.
+     * Render-path callers should always read theme values through this
+     * method so the parsed `Theme` (gradient stops, palette, etc.)
+     * amortizes across an entire frame.
      */
     _resolveTheme(): Theme {
-        if (!this._theme) {
-            this._theme = resolveThemeFromVars(this._themeVars);
+        const colorColumn = this.colorScaleColumn();
+        if (!this._theme || this._themeColorColumn !== colorColumn) {
+            this._themeColorColumn = colorColumn;
+            this._theme = applyColumnColorOverrides(
+                resolveThemeFromVars(this._themeVars),
+                this._columnsConfig,
+                colorColumn,
+            );
         }
 
         return this._theme;

package/src/ts/charts/chart.ts

@@ -84,6 +84,11 @@ export interface ChartImplementation {
      */
     setChromeCanvas?(canvas: HTMLCanvasElement | OffscreenCanvas): void;
 
+    /**
+     * Install the renderer's overlay-present hook.
+     */
+    setOverlayPresenter?(cb: () => void): void;
+
     /**
      * Hand the chart a pre-computed CSS-variable map produced on the
      * main thread via `snapshotThemeVars(el)`, which it can decode into

package/src/ts/charts/common/category-axis-resolver.ts

@@ -203,15 +203,27 @@ export function synthesizeStringLevel(
     const seen = new Map<string, number>();
     seen.set("", 0);
 
+    const valueIdx = new Map<number, number>();
+
     for (let r = 0; r < numRows; r++) {
         const isValid = valid ? !!((valid[r >> 3] >> (r & 7)) & 1) : true;
+        if (!isValid) {
+            indices[r] = 0;
+            continue;
+        }
+
         const v = values[r] as number;
-        const label = formatLevelValue(v, isValid, levelType);
-        let dictIdx = seen.get(label);
+        let dictIdx = valueIdx.get(v);
         if (dictIdx === undefined) {
-            dictIdx = dictionary.length;
-            dictionary.push(label);
-            seen.set(label, dictIdx);
+            const label = formatLevelValue(v, true, levelType);
+            dictIdx = seen.get(label);
+            if (dictIdx === undefined) {
+                dictIdx = dictionary.length;
+                dictionary.push(label);
+                seen.set(label, dictIdx);
+            }
+
+            valueIdx.set(v, dictIdx);
         }
 
         indices[r] = dictIdx;
@@ -240,7 +252,34 @@ export function resolveCategoryAxis(
     numRows: number,
     groupByLen: number,
     levelTypes: string[] = [],
+    axisMode?: AxisMode,
 ): CategoryAxisResult {
+    if (axisMode?.mode === "numeric") {
+        const rp = columns.get("__ROW_PATH_0__");
+        if (rp && rp.type !== "string" && rp.values) {
+            let rowOffset = 0;
+            const values = rp.values;
+            const valid = rp.valid;
+            while (rowOffset < numRows) {
+                const isValid = valid
+                    ? !!((valid[rowOffset >> 3] >> (rowOffset & 7)) & 1)
+                    : true;
+                const v = values[rowOffset] as number;
+                if (isValid && v != null && !Number.isNaN(v)) {
+                    break;
+                }
+
+                rowOffset++;
+            }
+
+            return {
+                rowPaths: [],
+                numCategories: Math.max(0, numRows - rowOffset),
+                rowOffset,
+            };
+        }
+    }
+
     type RawLevel = { indices: Int32Array; dictionary: string[] };
     const rawRowPaths: RawLevel[] = [];
     for (let n = 0; ; n++) {

package/src/ts/charts/common/tree-chart.ts

@@ -40,6 +40,10 @@ export function firstNonMetadataColumn(columns: ColumnDataMap): string {
  * layout modules can read/write them without friction.
  */
 export abstract class TreeChartBase extends AbstractChart {
+    protected override colorScaleColumn(): string | null {
+        return this._columnSlots[1] || null;
+    }
+
     //  Shared column-slot resolution
     _sizeName = "";
     _colorName = "";

package/src/ts/charts/heatmap/heatmap-build.ts

@@ -128,7 +128,13 @@ export function buildHeatmapPipeline(
         rowPaths: xLevels,
         numCategories: numX,
         rowOffset,
-    } = resolveCategoryAxis(columns, numRows, groupBy.length, levelTypes);
+    } = resolveCategoryAxis(
+        columns,
+        numRows,
+        groupBy.length,
+        levelTypes,
+        xAxisMode,
+    );
 
     // Numeric X domain: sourced from `__ROW_PATH_0__`'s raw values when
     // the single group_by is non-string.

package/src/ts/charts/heatmap/heatmap-interact.ts

@@ -215,6 +215,7 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
     let layout: import("../../layout/plot-layout").PlotLayout | null;
     let xLevels: CategoricalLevel[];
     let yLevels: CategoricalLevel[];
+    let xPositions: Float64Array | null;
     let facetLabel: string | null = null;
 
     if (chart._hoveredFacetIdx >= 0) {
@@ -226,6 +227,7 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
         layout = facet.layout;
         xLevels = facet.pipeline.xLevels;
         yLevels = facet.pipeline.yLevels;
+        xPositions = facet.pipeline.xPositions;
         facetLabel = facet.label;
     } else {
         if (!chart._lastLayout) {
@@ -235,6 +237,7 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
         layout = chart._lastLayout;
         xLevels = chart._xLevels;
         yLevels = chart._yLevels;
+        xPositions = chart._xPositions;
     }
 
     const cell = chart._hoveredCell;
@@ -249,7 +252,13 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
         lines.push(facetLabel);
     }
 
-    const xPath = formatHierarchicalPath(xLevels, cell.xIdx);
+    const xPath =
+        chart._xAxisMode.mode === "numeric" && xPositions
+            ? chart.getColumnFormatter(
+                  chart._groupBy[0],
+                  "value",
+              )(xPositions[cell.xIdx])
+            : formatHierarchicalPath(xLevels, cell.xIdx);
     const yPath = formatHierarchicalPath(yLevels, cell.yIdx);
     if (xPath) {
         lines.push(xPath);

package/src/ts/charts/heatmap/heatmap-render.ts

@@ -392,6 +392,11 @@ function drawCellsInstanced(
  * Chrome overlay: X axis + Y axis + color legend + (optional) tooltip.
  */
 export function renderHeatmapChromeOverlay(chart: HeatmapChart): void {
+    paintHeatmapChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintHeatmapChromeOverlay(chart: HeatmapChart): void {
     if (!chart._chromeCanvas) {
         return;
     }

package/src/ts/charts/heatmap/heatmap.ts

@@ -69,6 +69,10 @@ export interface HeatmapFacet {
  * scale and a single legend.
  */
 export class HeatmapChart extends AbstractChart {
+    protected override colorScaleColumn(): string | null {
+        return this._columnSlots[0] || null;
+    }
+
     _program: WebGLProgram | null = null;
     _locations: HeatmapLocations | null = null;
     _cornerBuffer: WebGLBuffer | null = null;
@@ -176,9 +180,10 @@ export class HeatmapChart extends AbstractChart {
         xIdx: number,
         yIdx: number,
     ): Promise<void> {
-        const groupByValues: (string | null)[] = this._xLevels.map(
-            (level) => level.labels[xIdx] ?? null,
-        );
+        const groupByValues: (string | number | null)[] =
+            this._xAxisMode.mode === "numeric" && this._xPositions
+                ? [this._xPositions[xIdx] ?? null]
+                : this._xLevels.map((level) => level.labels[xIdx] ?? null);
         const splitByValues: (string | null)[] = this._yLevels
             .slice(0, this._splitBy.length)
             .map((level) => level.labels[yIdx] ?? null);

package/src/ts/charts/series/series-build.ts

@@ -473,6 +473,7 @@ export function buildSeriesPipeline(
         numRows,
         groupBy.length,
         levelTypes,
+        axisMode,
     );
 
     if (numCategories === 0) {

package/src/ts/charts/series/series-interact.ts

@@ -628,19 +628,8 @@ export function formatBarCategoryPath(
     chart: SeriesChart,
     catIdx: number,
 ): string {
-    // Numeric category mode: resolve from the bar's xCenter (real data
-    // value) rather than the row-path label array, which is empty when
-    // the single group_by level is non-string.
-    if (chart._categoryAxisMode === "numeric" && chart._numericCategoryDomain) {
-        const bars = chart._bars;
-        let v: number | null = null;
-        for (let i = 0; i < bars.count; i++) {
-            if (bars.catIdx[i] === catIdx) {
-                v = bars.xCenter[i];
-                break;
-            }
-        }
-
+    if (chart._categoryAxisMode === "numeric" && chart._categoryPositions) {
+        const v = chart._categoryPositions[catIdx];
         if (v == null) {
             return "";
         }

package/src/ts/charts/series/series-render.ts

@@ -1088,6 +1088,11 @@ export function layoutForRecord(
  * Draw axes chrome + legend + tooltip onto the overlay canvas.
  */
 export function renderBarChromeOverlay(chart: SeriesChart): void {
+    paintBarChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintBarChromeOverlay(chart: SeriesChart): void {
     if (
         !chart._chromeCanvas ||
         !chart._lastLayout ||

package/src/ts/charts/series/series-type.ts

@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import { parseCssColorList, parseCssColorStrict } from "../../theme/gradient";
+
 export type ChartType = "bar" | "line" | "scatter" | "area";
 
 /**
@@ -45,6 +47,18 @@ export interface ColumnChartConfig {
      * `"skip"`). Default `"skip"`. No effect on bar / scatter.
      */
     interpolate?: InterpolateMode;
+
+    /**
+     * Single series-color override (`#rrggbb`) — the no-`split_by`
+     * shape.
+     */
+    color?: string;
+
+    /**
+     * Discrete color palette cycled over this column's split-generated
+     * series — the `split_by` shape.
+     */
+    palette?: string;
 }
 
 /**
@@ -98,6 +112,57 @@ export function resolveAltAxis(
     return cfg?.[aggName]?.alt_axis === true;
 }
 
+/**
+ * Resolve a per-series color override from `columns_config`, or `null`
+ * when the theme palette applies.
+ */
+export function resolveSeriesColorOverride(
+    series: { aggName: string; splitIdx: number },
+    facetActive: boolean,
+    cfg: Record<string, ColumnChartConfig> | undefined,
+): [number, number, number] | null {
+    const entry = cfg?.[series.aggName];
+    if (!entry) {
+        return null;
+    }
+
+    const palette =
+        typeof entry.palette === "string"
+            ? parsePaletteCached(entry.palette)
+            : null;
+    if (palette && palette.length > 0) {
+        const idx = facetActive ? 0 : series.splitIdx % palette.length;
+        return palette[idx];
+    }
+
+    if (typeof entry.color === "string") {
+        return parseCssColorStrict(entry.color) ?? null;
+    }
+
+    return null;
+}
+
+const PALETTE_PARSE_CACHE = new Map<
+    string,
+    Array<[number, number, number]> | null
+>();
+
+function parsePaletteCached(
+    src: string,
+): Array<[number, number, number]> | null {
+    let parsed = PALETTE_PARSE_CACHE.get(src);
+    if (parsed === undefined) {
+        parsed = parseCssColorList(src);
+        if (PALETTE_PARSE_CACHE.size > 256) {
+            PALETTE_PARSE_CACHE.clear();
+        }
+
+        PALETTE_PARSE_CACHE.set(src, parsed);
+    }
+
+    return parsed;
+}
+
 /**
  * Resolve the interpolation mode for this aggregate.
  */