@perspective-dev/viewer-charts 4.3.0

package/src/ts/shaders/sunburst-arc.frag.glsl

@@ -0,0 +1,19 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+precision highp float;
+
+varying vec4 v_color;
+
+void main() {
+    gl_FragColor = v_color;
+}

package/src/ts/shaders/sunburst-arc.vert.glsl

@@ -0,0 +1,79 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Per-vertex (divisor=0): position in the unit triangle-strip template.
+//   a_strip_t ∈ [0, 1]  angular parameter along the arc
+//   a_side    ∈ {0, 1}  0 = inner radius, 1 = outer radius
+attribute float a_strip_t;
+attribute float a_side;
+
+// Per-instance (divisor=1) arc geometry.
+attribute vec2 a_angles;  // (a0, a1)  in radians
+attribute vec2 a_radii;   // (r0, r1)  inner / outer pixel radius
+attribute vec4 a_color;
+
+uniform vec2 u_center;      // chart center in pixel space
+uniform vec2 u_resolution;  // viewport size in device pixels
+uniform float u_border_px;   // symmetric inset, in device pixels
+
+varying vec4 v_color;
+varying vec2 v_edge;         // (angular t, radial t)  for optional AA fringe
+
+void main() {
+    // Symmetric inset: shrink the arc by half the border on every edge
+    // so adjacent arcs each give up half, producing a
+    // `u_border_px`-wide gap in pixel space.
+    //
+    // Radial inset is constant; angular inset is computed per-vertex
+    // based on the vertex's *actual* radius. This keeps the angular gap
+    // at exactly `u_border_px` pixels wide at every radial position —
+    // without it, the gap narrows toward the center (since the same
+    // dTheta corresponds to fewer pixels at smaller r).
+    //
+    // Side effect: the arc's side edges are slightly non-radial (they
+    // curve so that the outer endpoint sits inside the inner endpoint's
+    // wedge). At 1 px borders this is imperceptible; at very wide
+    // borders the arc looks like a thin curved parallelogram — which
+    // is, in fact, the shape with constant pixel-width gaps.
+    float half_border = u_border_px * 0.5;
+
+    float adjR0 = a_radii.x + half_border;
+    float adjR1 = a_radii.y - half_border;
+    if(adjR1 <= adjR0) {
+        // Arc thinner than the border radially — nothing to draw.
+        gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
+        v_color = vec4(0.0);
+        v_edge = vec2(0.0);
+        return;
+    }
+
+    // Per-vertex radius + angular inset. dTheta scales with 1/r so the
+    // pixel-space gap is constant at every radial position. Clamp to
+    // at most `span / 2` so narrow arcs collapse their inner edge to
+    // a point at the midpoint angle instead of inverting (which would
+    // send inner vertices past outer ones and rasterize degenerate
+    // triangles across the screen). Every vertex of an instance takes
+    // the same clamp path, so the triangle strip stays well-formed.
+    float r = mix(adjR0, adjR1, a_side);
+    float dTheta = half_border / max(r, 1.0);
+    float span = a_angles.y - a_angles.x;
+    dTheta = min(dTheta, span * 0.5);
+    float angle = mix(a_angles.x + dTheta, a_angles.y - dTheta, a_strip_t);
+
+    vec2 pixel = u_center + vec2(cos(angle), sin(angle)) * r;
+    // Pixel → clip: origin top-left, Y flipped to match 2D canvas conv.
+    vec2 clip = (pixel / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+
+    v_color = a_color;
+    v_edge = vec2(a_strip_t, a_side);
+}

package/src/ts/shaders/tile.frag.glsl

@@ -0,0 +1,27 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+precision highp float;
+
+varying vec2 v_uv;
+
+uniform sampler2D u_tile;
+
+// Optional alpha multiplier (0.0..1.0). Used to fade the tile basemap
+// when the chart's theme prefers a subdued backdrop behind the glyph
+// layer; defaults to 1.0 so callers can omit it.
+uniform float u_alpha;
+
+void main() {
+    vec4 c = texture2D(u_tile, v_uv);
+    gl_FragColor = vec4(c.rgb, c.a * u_alpha);
+}

package/src/ts/shaders/tile.vert.glsl

@@ -0,0 +1,35 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Unit-quad vertex shader for one map tile. The same static [0..1]
+// corner buffer is bound for every tile in a frame; per-tile uniforms
+// stretch the corner into Mercator space and pick the UV sub-rect.
+// Sub-rect support is for the parent-tile fallback path (sample the
+// loaded parent at the child's quadrant while the child fetches).
+attribute vec2 a_corner;
+
+uniform mat4 u_projection;
+uniform vec2 u_extent_min;
+uniform vec2 u_extent_max;
+uniform vec2 u_uv_min;
+uniform vec2 u_uv_max;
+
+varying vec2 v_uv;
+
+void main() {
+    vec2 pos = mix(u_extent_min, u_extent_max, a_corner);
+    // Tiles ship north-up; the WebGL Y axis points up at clip
+    // coordinates so flip the V channel before sampling.
+    vec2 uv = mix(u_uv_min, u_uv_max, vec2(a_corner.x, 1.0 - a_corner.y));
+    v_uv = uv;
+    gl_Position = u_projection * vec4(pos, 0.0, 1.0);
+}

package/src/ts/shaders/treemap.frag.glsl

@@ -0,0 +1,19 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+precision highp float;
+
+varying vec4 v_color;
+
+void main() {
+    gl_FragColor = v_color;
+}

package/src/ts/shaders/treemap.vert.glsl

@@ -0,0 +1,25 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+attribute vec2 a_position;
+attribute vec4 a_color;
+
+uniform vec2 u_resolution;
+
+varying vec4 v_color;
+
+void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    clip.y = -clip.y;
+    gl_Position = vec4(clip, 0.0, 1.0);
+    v_color = a_color;
+}

package/src/ts/shaders/y-scatter.frag.glsl

@@ -0,0 +1,30 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+precision highp float;
+
+varying vec3 v_color;
+varying float v_point_size;
+
+void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+
+    if(dist > 0.5)
+        discard;
+
+    // Anti-alias at the circle edge.
+    float pixelWidth = 1.5 / max(v_point_size, 1.0);
+    float alpha = 1.0 - smoothstep(0.5 - pixelWidth, 0.5, dist);
+
+    gl_FragColor = vec4(v_color, alpha);
+}

package/src/ts/shaders/y-scatter.vert.glsl

@@ -0,0 +1,31 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Per-vertex: one point per (series, category) sample. Color is carried
+// per-vertex so a single draw call can render every scatter series with
+// its palette color, no gradient lookup.
+
+attribute vec2 a_position;
+attribute vec3 a_color;
+
+uniform mat4 u_projection;
+uniform float u_point_size;
+
+varying vec3 v_color;
+varying float v_point_size;
+
+void main() {
+    gl_Position = u_projection * vec4(a_position, 0.0, 1.0);
+    gl_PointSize = u_point_size;
+    v_point_size = u_point_size;
+    v_color = a_color;
+}

package/src/ts/theme/gradient.ts

@@ -0,0 +1,312 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { parseCSSColorToVec3 } from "../utils/css";
+
+/**
+ * A single stop on a parsed CSS gradient. `offset` ∈ [0, 1].
+ */
+export interface GradientStop {
+    offset: number;
+    color: [number, number, number, number]; // RGBA, each ∈ [0, 1]
+}
+
+const DEFAULT_STOPS: GradientStop[] = [
+    { offset: 0, color: [0x03 / 255, 0x66 / 255, 0xd6 / 255, 1] },
+    { offset: 1, color: [0xff / 255, 0x7f / 255, 0x0e / 255, 1] },
+];
+
+/**
+ * Parse a `linear-gradient(...)` CSS expression into ordered stops. Tolerates
+ * missing percentages (distributes linearly between known offsets, matching
+ * the CSS standard) and leading direction tokens (`to right`, `90deg`, etc.)
+ * which are simply skipped.
+ *
+ * Returns the default blue → orange two-stop on any parse failure so themes
+ * that never set the gradient still produce sane output.
+ */
+export function parseCssGradient(
+    src: string | null | undefined,
+): GradientStop[] {
+    if (!src) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    const trimmed = src.trim();
+    if (!trimmed) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    // Strip the `linear-gradient(` wrapper. Bail out if we don't find it.
+    const openIdx = trimmed.indexOf("(");
+    if (openIdx < 0) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    if (!/^linear-gradient\s*\(/i.test(trimmed)) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    const closeIdx = trimmed.lastIndexOf(")");
+    if (closeIdx <= openIdx) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    const body = trimmed.substring(openIdx + 1, closeIdx);
+
+    // Split on commas at depth 0 (respecting nested `rgb(...)` / `rgba(...)` /
+    // `hsl(...)` parens which also contain commas).
+    const parts: string[] = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < body.length; i++) {
+        const ch = body[i];
+        if (ch === "(") {
+            depth++;
+        } else if (ch === ")") {
+            depth--;
+        } else if (ch === "," && depth === 0) {
+            parts.push(body.substring(start, i));
+            start = i + 1;
+        }
+    }
+
+    parts.push(body.substring(start));
+
+    // First part may be a direction (`to right`, `90deg`, `to bottom right`)
+    // rather than a color-stop. Detect by: no matching color syntax.
+    const stops: Array<{
+        color: [number, number, number];
+        offset: number | null;
+    }> = [];
+    let startIdx = 0;
+    if (parts.length > 0) {
+        const firstNorm = parts[0].trim().toLowerCase();
+        if (
+            firstNorm.startsWith("to ") ||
+            /^[-\d.]+(deg|rad|grad|turn)/.test(firstNorm)
+        ) {
+            startIdx = 1;
+        }
+    }
+
+    for (let i = startIdx; i < parts.length; i++) {
+        const piece = parts[i].trim();
+        if (!piece) {
+            continue;
+        }
+
+        // Peel off an optional trailing `<number>%` or `<number>px`.
+        const pctMatch = piece.match(/\s([\-\d.]+)%\s*$/);
+        const color = pctMatch
+            ? piece.substring(0, pctMatch.index).trim()
+            : piece;
+        const offset = pctMatch ? parseFloat(pctMatch[1]) / 100 : null;
+        try {
+            const rgb = parseCSSColorToVec3(color);
+            stops.push({ color: rgb, offset });
+        } catch {
+            // skip unparseable stop
+        }
+    }
+
+    if (stops.length === 0) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    if (stops.length === 1) {
+        // Single stop → solid color. Duplicate across [0, 1] so sampling works.
+        const [r, g, b] = stops[0].color;
+        return [
+            { offset: 0, color: [r, g, b, 1] },
+            { offset: 1, color: [r, g, b, 1] },
+        ];
+    }
+
+    // Fill in missing offsets by linear interpolation of neighbours with
+    // known positions (CSS implicit-position semantics).
+    if (stops[0].offset === null) {
+        stops[0].offset = 0;
+    }
+
+    if (stops[stops.length - 1].offset === null) {
+        stops[stops.length - 1].offset = 1;
+    }
+
+    for (let i = 1; i < stops.length - 1; i++) {
+        if (stops[i].offset !== null) {
+            continue;
+        }
+
+        // Find next known offset.
+        let j = i + 1;
+        while (j < stops.length && stops[j].offset === null) {
+            j++;
+        }
+
+        const before = stops[i - 1].offset!;
+        const after = stops[j].offset!;
+        const span = j - (i - 1);
+        for (let k = i; k < j; k++) {
+            stops[k].offset =
+                before + ((k - (i - 1)) / span) * (after - before);
+        }
+
+        i = j - 1;
+    }
+
+    // Clamp offsets to [0, 1] and ensure non-decreasing order.
+    let prev = 0;
+    const result: GradientStop[] = stops.map((s) => {
+        const off = Math.max(prev, Math.min(1, s.offset!));
+        prev = off;
+        return {
+            offset: off,
+            color: [s.color[0], s.color[1], s.color[2], 1],
+        };
+    });
+
+    return result;
+}
+
+/**
+ * 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]`.
+ */
+export function sampleGradient(
+    stops: GradientStop[],
+    t: number,
+): [number, number, number, number] {
+    if (stops.length === 0) {
+        return [0, 0, 0, 1];
+    }
+
+    if (t <= stops[0].offset) {
+        return stops[0].color.slice() as [number, number, number, number];
+    }
+
+    const last = stops[stops.length - 1];
+    if (t >= last.offset) {
+        return last.color.slice() as [number, number, number, number];
+    }
+
+    // Bisect for the interval containing `t`.
+    let lo = 0;
+    let hi = stops.length - 1;
+    while (hi - lo > 1) {
+        const mid = (lo + hi) >> 1;
+        if (stops[mid].offset <= t) {
+            lo = mid;
+        } else {
+            hi = mid;
+        }
+    }
+
+    const a = stops[lo];
+    const b = stops[hi];
+    const span = b.offset - a.offset;
+    const u = span > 0 ? (t - a.offset) / span : 0;
+    return [
+        a.color[0] + (b.color[0] - a.color[0]) * u,
+        a.color[1] + (b.color[1] - a.color[1]) * u,
+        a.color[2] + (b.color[2] - a.color[2]) * u,
+        a.color[3] + (b.color[3] - a.color[3]) * u,
+    ];
+}
+
+/**
+ * Sign-aware normalization. Returns `t ∈ [0, 1]` where the 50% stop is
+ * always the sign pivot:
+ *   - crosses zero → `[-maxAbs, maxAbs]` stretched symmetrically; 0 → 0.5.
+ *   - all-positive → `[0, colorMax]` occupies top half `[0.5, 1]`.
+ *   - all-negative → `[colorMin, 0]` occupies bottom half `[0, 0.5]`.
+ *   - degenerate   → 0.5 (single colour at the midpoint).
+ */
+export function colorValueToT(
+    value: number,
+    colorMin: number,
+    colorMax: number,
+): number {
+    if (!isFinite(value) || colorMin === colorMax) {
+        return 0.5;
+    }
+
+    let denom: number;
+    if (colorMin >= 0) {
+        denom = colorMax;
+    } else if (colorMax <= 0) {
+        denom = -colorMin;
+    } else {
+        denom = Math.max(-colorMin, colorMax);
+    }
+
+    if (denom <= 0) {
+        return 0.5;
+    }
+
+    const t = 0.5 + 0.5 * (value / denom);
+    return t < 0 ? 0 : t > 1 ? 1 : t;
+}
+
+/**
+ * Convert a discrete series palette (from `--psp-charts--series-N--color`)
+ * into a `GradientStop[]` with stops at `i / (N - 1)`. The resulting
+ * stops can feed `buildGradientLUT` / `ensureGradientTexture` / any
+ * other code path that already accepts a gradient — so categorical
+ * coloring and numeric gradients share one LUT pipeline. Integer idx
+ * sampling via `t = idx / (N - 1)` lands exactly on a palette color;
+ * the linear blend between stops is only hit by non-integer samples
+ * (which categorical data doesn't produce).
+ */
+export function paletteToStops(
+    palette: [number, number, number][],
+): GradientStop[] {
+    if (palette.length === 0) {
+        return DEFAULT_STOPS.slice();
+    }
+
+    if (palette.length === 1) {
+        const [r, g, b] = palette[0];
+        return [
+            { offset: 0, color: [r, g, b, 1] },
+            { offset: 1, color: [r, g, b, 1] },
+        ];
+    }
+
+    const denom = palette.length - 1;
+    return palette.map(([r, g, b], i) => ({
+        offset: i / denom,
+        color: [r, g, b, 1],
+    }));
+}
+
+/**
+ * Bake a sampled LUT for GPU upload as RGBA8 (`size × 1`). Default 256
+ * samples — visually indistinguishable from a denser sample at typical
+ * viewport sizes and keeps the texture tiny (1 KB).
+ */
+export function buildGradientLUT(
+    stops: GradientStop[],
+    size: number = 256,
+): Uint8Array {
+    const out = new Uint8Array(size * 4);
+    for (let i = 0; i < size; i++) {
+        const t = size === 1 ? 0 : i / (size - 1);
+        const c = sampleGradient(stops, t);
+        out[i * 4] = Math.round(c[0] * 255);
+        out[i * 4 + 1] = Math.round(c[1] * 255);
+        out[i * 4 + 2] = Math.round(c[2] * 255);
+        out[i * 4 + 3] = Math.round(c[3] * 255);
+    }
+
+    return out;
+}

package/src/ts/theme/palette.ts

@@ -0,0 +1,64 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { sampleGradient, type GradientStop } from "./gradient";
+
+export type Vec3 = [number, number, number];
+
+/**
+ * Build a series palette of length `count` by sampling the theme gradient
+ * at evenly-spaced offsets. For count == 1 returns the 50% stop.
+ */
+export function interpolatePalette(
+    stops: GradientStop[],
+    count: number,
+): Vec3[] {
+    if (count <= 0) {
+        return [];
+    }
+
+    const out: Vec3[] = new Array(count);
+    for (let i = 0; i < count; i++) {
+        const t = count === 1 ? 0.5 : i / (count - 1);
+        const c = sampleGradient(stops, t);
+        out[i] = [c[0], c[1], c[2]];
+    }
+
+    return out;
+}
+
+/**
+ * Resolve a series palette: use the discrete `--psp-charts--series-N--color`
+ * palette when available, otherwise fall back to evenly-spaced samples of
+ * the theme gradient.
+ */
+export function resolvePalette(
+    discrete: Vec3[],
+    stops: GradientStop[],
+    count: number,
+): Vec3[] {
+    if (discrete.length > 0) {
+        if (discrete.length >= count) {
+            return discrete.slice(0, count);
+        }
+
+        // Cycle through the discrete palette for overflow indices.
+        const out: Vec3[] = new Array(count);
+        for (let i = 0; i < count; i++) {
+            out[i] = discrete[i % discrete.length];
+        }
+
+        return out;
+    }
+
+    return interpolatePalette(stops, count);
+}