@astryxdesign/lab 0.1.6-canary.2829fc5 → 0.1.6-canary.2d8ba8b

package/dist/Chart/ChartDotGLInteractive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartDotGLInteractive.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartDotGLInteractive.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC9E;AAoHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,KAAK,EACL,IAAQ,EACR,OAAa,EACb,aAAa,GACd,EAAE,0BAA0B,sCAyV5B"}
+{"version":3,"file":"ChartDotGLInteractive.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartDotGLInteractive.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC9E;AA+GD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,KAAK,EACL,IAAQ,EACR,OAAa,EACb,aAAa,GACd,EAAE,0BAA0B,sCAyV5B"}

package/dist/Chart/ChartDotGLInteractive.js

@@ -13,12 +13,8 @@
 import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { useChart } from "./ChartContext.js";
 import { xPixel } from "./utils.js";
+import { hexToGL } from "./webgl.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-function hexToGL(hex) {
-  const n = parseInt(hex.replace('#', ''), 16);
-  return [(n >> 16) / 255, (n >> 8 & 0xff) / 255, (n & 0xff) / 255];
-}
-
 /** Encode a point index as an RGB color (supports up to 16.7M points) */
 function indexToColor(i) {
   // Add 1 so index 0 isn't black (which is our clear color)

package/dist/Chart/getChartColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getChartColors.d.ts","sourceRoot":"","sources":["../../src/Chart/getChartColors.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAM3D,kDAAkD;AAClD,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,UAAU,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;AAEX,8EAA8E;AAC9E,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC;IAC3D,SAAS,EAAE;QACT,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACtC,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,MAAM,CACJ,GAAG,EAAE,aAAa,EAClB,GAAG,EAAE,aAAa,EAClB,CAAC,EAAE,MAAM,EACT,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,EAAE,CAAC;KACb,CAAC;IACF,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,qEAAqE;IACrE,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7C;AAED,iEAAiE;AACjE,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;AAgErD;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,aAAa,GACrB,cAAc,CA+EhB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,cAAc,CAsBhB"}
+{"version":3,"file":"getChartColors.d.ts","sourceRoot":"","sources":["../../src/Chart/getChartColors.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAO3D,kDAAkD;AAClD,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,UAAU,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;AAEX,8EAA8E;AAC9E,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC;IAC3D,SAAS,EAAE;QACT,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACtC,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,MAAM,CACJ,GAAG,EAAE,aAAa,EAClB,GAAG,EAAE,aAAa,EAClB,CAAC,EAAE,MAAM,EACT,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,EAAE,CAAC;KACb,CAAC;IACF,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,qEAAqE;IACrE,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7C;AAED,iEAAiE;AACjE,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;AAoErD;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,aAAa,GACrB,cAAc,CA+EhB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,cAAc,CAsBhB"}

package/dist/Chart/getChartColors.js

@@ -9,6 +9,8 @@
  * the full chart colors API. The useChartColors hook wraps this.
  */
 
+import { parseHex, parseColor, formatColor } from '@astryxdesign/core/utils';
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -39,15 +41,25 @@ function pickFromRamp(stops, n) {
     length: n
   }, (_, i) => stops[Math.round(i * 4 / (n - 1))]);
 }
+
+/**
+ * Apply an opacity to a concrete CSS color (hex — with or without the leading
+ * `#` — `rgb()`/`rgba()`, named). The `opacity` argument always wins over any
+ * alpha already in the color. Unparseable input (e.g. `var()`) is returned
+ * unchanged.
+ */
 function hexAlpha(hex, opacity) {
-  const match = hex.match(/^#?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);
-  if (!match) {
+  // parseColor requires the `#` for hex; fall back to parseHex so bare hex
+  // strings (`0064E0`) keep working as they did before #3739.
+  const rgba = parseColor(hex) ?? parseHex(hex);
+  if (rgba === null) {
     return hex;
   }
-  const r = parseInt(match[1], 16);
-  const g = parseInt(match[2], 16);
-  const b = parseInt(match[3], 16);
-  return `rgba(${r},${g},${b},${Math.max(0, Math.min(1, opacity))})`;
+  const a = Number.isFinite(opacity) ? Math.max(0, Math.min(1, opacity)) : 1;
+  return formatColor({
+    ...rgba,
+    a
+  });
 }
 
 // =============================================================================

package/dist/Chart/webgl.d.ts

@@ -1,19 +1,11 @@
-/**
- * @file webgl.ts
- * @output Shared WebGL utilities for chart components
- * @position Internal helpers; consumed by all GL mark components
- *
- * Provides:
- * - Canvas mounting outside SVG (avoids foreignObject DPR blur)
- * - Premultiplied alpha setup (correct compositing over page)
- * - Shader compilation helpers
- * - Smoothstep circle fragment for crisp point sprites
- */
 /** Compile a WebGL shader, returns null on failure */
 export declare function compileShader(gl: WebGLRenderingContext, type: number, src: string): WebGLShader | null;
 /** Link a vertex + fragment shader into a program */
 export declare function createProgram(gl: WebGLRenderingContext, vertSrc: string, fragSrc: string): WebGLProgram | null;
-/** Parse hex (#RRGGBB) to [r, g, b] floats 0-1 */
+/**
+ * Parse a hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) to [r, g, b]
+ * floats 0-1. Unparseable input returns a neutral fallback instead of NaN.
+ */
 export declare function hexToGL(hex: string): [number, number, number];
 /** DPR with supersampling for crisp circles */
 export declare function getCanvasDPR(): number;

package/dist/Chart/webgl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["../../src/Chart/webgl.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,sDAAsD;AACtD,wBAAgB,aAAa,CAC3B,EAAE,EAAE,qBAAqB,EACzB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GACV,WAAW,GAAG,IAAI,CAYpB;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAC3B,EAAE,EAAE,qBAAqB,EACzB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,GACd,YAAY,GAAG,IAAI,CAkBrB;AAED,kDAAkD;AAClD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAG7D;AAED,+CAA+C;AAC/C,wBAAgB,YAAY,IAAI,MAAM,CAErC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,GACxB,qBAAqB,GAAG,IAAI,CAM9B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,qBAAqB,GAAG,IAAI,CAK5D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,MAAM,CAOR;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,kBAAkB,EAC7B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAwC1B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,iPAO5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,QAAa,CAAC"}
+{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["../../src/Chart/webgl.ts"],"names":[],"mappings":"AAkBA,sDAAsD;AACtD,wBAAgB,aAAa,CAC3B,EAAE,EAAE,qBAAqB,EACzB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GACV,WAAW,GAAG,IAAI,CAYpB;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAC3B,EAAE,EAAE,qBAAqB,EACzB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,GACd,YAAY,GAAG,IAAI,CAkBrB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAE7D;AAED,+CAA+C;AAC/C,wBAAgB,YAAY,IAAI,MAAM,CAErC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,GACxB,qBAAqB,GAAG,IAAI,CAM9B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,qBAAqB,GAAG,IAAI,CAK5D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,MAAM,CAOR;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,kBAAkB,EAC7B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAwC1B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,iPAO5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,QAAa,CAAC"}

package/dist/Chart/webgl.js

@@ -10,8 +10,12 @@
  * - Premultiplied alpha setup (correct compositing over page)
  * - Shader compilation helpers
  * - Smoothstep circle fragment for crisp point sprites
+ * - Hex-to-GL color conversion via the shared @astryxdesign/core/utils/color
+ *   parsers (fallback instead of NaN)
  */
 
+import { parseHex, toGLFloats } from '@astryxdesign/core/utils';
+
 /** Compile a WebGL shader, returns null on failure */
 export function compileShader(gl, type, src) {
   const s = gl.createShader(type);
@@ -48,10 +52,12 @@ export function createProgram(gl, vertSrc, fragSrc) {
   return p;
 }
 
-/** Parse hex (#RRGGBB) to [r, g, b] floats 0-1 */
+/**
+ * Parse a hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) to [r, g, b]
+ * floats 0-1. Unparseable input returns a neutral fallback instead of NaN.
+ */
 export function hexToGL(hex) {
-  const n = parseInt(hex.replace('#', ''), 16);
-  return [(n >> 16) / 255, (n >> 8 & 0xff) / 255, (n & 0xff) / 255];
+  return toGLFloats(parseHex(hex));
 }
 
 /** DPR with supersampling for crisp circles */

package/dist/ThreeD/ThreeDScatterGL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreeDScatterGL.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDScatterGL.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA4FD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAQ,EACR,OAAc,GACf,EAAE,oBAAoB,sCAuJtB"}
+{"version":3,"file":"ThreeDScatterGL.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDScatterGL.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuFD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAQ,EACR,OAAc,GACf,EAAE,oBAAoB,sCAuJtB"}

package/dist/ThreeD/ThreeDScatterGL.js

@@ -14,13 +14,9 @@
  */
 
 import { useRef, useEffect, useMemo } from 'react';
+import { parseHex, toGLFloats } from '@astryxdesign/core/utils';
 import { use3D } from "./ThreeDContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function hexToGL(hex) {
-  const n = parseInt(hex.replace('#', ''), 16);
-  return [(n >> 16) / 255, (n >> 8 & 0xff) / 255, (n & 0xff) / 255];
-}
-
 // SYNC: Steps 1-5 match ThreeDChart.project() exactly.
 const VERT = `
   attribute vec3 a_position;
@@ -218,7 +214,7 @@ export function ThreeDScatterGL({
     const azRad = camera.azimuth * Math.PI / 180;
     const elRad = camera.elevation * Math.PI / 180;
     const scale = Math.min(width, height) * 0.35;
-    const [r, g, b] = hexToGL(color);
+    const [r, g, b] = toGLFloats(parseHex(color));
     gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
     gl.uniform2f(gl.getUniformLocation(program, 'u_center'), width / 2, height / 2);
     gl.uniform1f(gl.getUniformLocation(program, 'u_scale'), scale);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.1.6-canary.2829fc5",
+  "version": "0.1.6-canary.2d8ba8b",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.1.6-canary.2829fc5",
+    "@astryxdesign/core": "0.1.6-canary.2d8ba8b",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },

package/src/Chart/ChartDotGLInteractive.tsx

@@ -20,6 +20,7 @@ import {
 } from 'react';
 import {useChart} from './ChartContext';
 import {xPixel} from './utils';
+import {hexToGL} from './webgl';
 
 export interface ChartDotGLInteractiveProps {
   /** Which data key for the y values */
@@ -37,11 +38,6 @@ export interface ChartDotGLInteractiveProps {
   renderTooltip?: (datum: Record<string, unknown>, index: number) => ReactNode;
 }
 
-function hexToGL(hex: string): [number, number, number] {
-  const n = parseInt(hex.replace('#', ''), 16);
-  return [(n >> 16) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
-}
-
 /** Encode a point index as an RGB color (supports up to 16.7M points) */
 function indexToColor(i: number): [number, number, number] {
   // Add 1 so index 0 isn't black (which is our clear color)

package/src/Chart/getChartColors.test.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {getChartColorsFromResolver} from './getChartColors';
+
+describe('getChartColorsFromResolver alpha', () => {
+  const colors = getChartColorsFromResolver(name => `resolved(${name})`);
+
+  it('applies opacity to a hex color', () => {
+    expect(colors.alpha('#0064E0', 0.2)).toBe('rgba(0, 100, 224, 0.2)');
+  });
+
+  it('applies opacity to bare hex without the leading # (pre-#3739 behavior)', () => {
+    expect(colors.alpha('0064E0', 0.2)).toBe('rgba(0, 100, 224, 0.2)');
+  });
+
+  it('applies opacity to rgba() input, overriding its alpha', () => {
+    expect(colors.alpha('rgba(0, 100, 224, 0.9)', 0.2)).toBe(
+      'rgba(0, 100, 224, 0.2)',
+    );
+  });
+
+  it('preserves unparseable input unchanged', () => {
+    expect(colors.alpha('var(--color-accent)', 0.5)).toBe(
+      'var(--color-accent)',
+    );
+  });
+});

package/src/Chart/getChartColors.ts

@@ -10,6 +10,7 @@
  */
 
 import type {DefinedTheme} from '@astryxdesign/core/theme';
+import {parseHex, parseColor, formatColor} from '@astryxdesign/core/utils';
 
 // =============================================================================
 // Types
@@ -105,17 +106,21 @@ function pickFromRamp(stops: string[], n: number): string[] {
   );
 }
 
+/**
+ * Apply an opacity to a concrete CSS color (hex — with or without the leading
+ * `#` — `rgb()`/`rgba()`, named). The `opacity` argument always wins over any
+ * alpha already in the color. Unparseable input (e.g. `var()`) is returned
+ * unchanged.
+ */
 function hexAlpha(hex: string, opacity: number): string {
-  const match = hex.match(
-    /^#?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/,
-  );
-  if (!match) {
+  // parseColor requires the `#` for hex; fall back to parseHex so bare hex
+  // strings (`0064E0`) keep working as they did before #3739.
+  const rgba = parseColor(hex) ?? parseHex(hex);
+  if (rgba === null) {
     return hex;
   }
-  const r = parseInt(match[1], 16);
-  const g = parseInt(match[2], 16);
-  const b = parseInt(match[3], 16);
-  return `rgba(${r},${g},${b},${Math.max(0, Math.min(1, opacity))})`;
+  const a = Number.isFinite(opacity) ? Math.max(0, Math.min(1, opacity)) : 1;
+  return formatColor({...rgba, a});
 }
 
 // =============================================================================

package/src/Chart/webgl.ts

@@ -10,8 +10,12 @@
  * - Premultiplied alpha setup (correct compositing over page)
  * - Shader compilation helpers
  * - Smoothstep circle fragment for crisp point sprites
+ * - Hex-to-GL color conversion via the shared @astryxdesign/core/utils/color
+ *   parsers (fallback instead of NaN)
  */
 
+import {parseHex, toGLFloats} from '@astryxdesign/core/utils';
+
 /** Compile a WebGL shader, returns null on failure */
 export function compileShader(
   gl: WebGLRenderingContext,
@@ -56,10 +60,12 @@ export function createProgram(
   return p;
 }
 
-/** Parse hex (#RRGGBB) to [r, g, b] floats 0-1 */
+/**
+ * Parse a hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) to [r, g, b]
+ * floats 0-1. Unparseable input returns a neutral fallback instead of NaN.
+ */
 export function hexToGL(hex: string): [number, number, number] {
-  const n = parseInt(hex.replace('#', ''), 16);
-  return [(n >> 16) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
+  return toGLFloats(parseHex(hex));
 }
 
 /** DPR with supersampling for crisp circles */

package/src/ThreeD/ThreeDScatterGL.tsx

@@ -14,6 +14,7 @@
  */
 
 import {useRef, useEffect, useMemo} from 'react';
+import {parseHex, toGLFloats} from '@astryxdesign/core/utils';
 import {use3D} from './ThreeDContext';
 
 export interface ThreeDScatterGLProps {
@@ -22,11 +23,6 @@ export interface ThreeDScatterGLProps {
   opacity?: number;
 }
 
-function hexToGL(hex: string): [number, number, number] {
-  const n = parseInt(hex.replace('#', ''), 16);
-  return [(n >> 16) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
-}
-
 // SYNC: Steps 1-5 match ThreeDChart.project() exactly.
 const VERT = `
   attribute vec3 a_position;
@@ -240,7 +236,7 @@ export function ThreeDScatterGL({
     const azRad = (camera.azimuth * Math.PI) / 180;
     const elRad = (camera.elevation * Math.PI) / 180;
     const scale = Math.min(width, height) * 0.35;
-    const [r, g, b] = hexToGL(color);
+    const [r, g, b] = toGLFloats(parseHex(color));
 
     gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
     gl.uniform2f(