@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Chart/ChartContext.js

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartContext.ts
+ * @output React context for sharing scales and dimensions between chart components
+ * @position Consumed by Chart (provider) and all child components (consumers)
+ */
+
+import { createContext, useContext } from 'react';
+const ChartCtx = /*#__PURE__*/createContext(null);
+export const ChartProvider = ChartCtx.Provider;
+
+/** Access the chart context. Throws if used outside <Chart>. */
+export function useChart() {
+  const ctx = useContext(ChartCtx);
+  if (!ctx) {
+    throw new Error('Chart components must be used inside <Chart>');
+  }
+  return ctx;
+}

package/dist/Chart/ChartDot.d.ts

@@ -0,0 +1,18 @@
+export interface ChartDotProps {
+    /** Which data key for the y values */
+    dataKey: string;
+    /** Dot fill color */
+    color: string;
+    /** Dot radius */
+    radius?: number;
+}
+/**
+ * Scatter dot marks.
+ *
+ * @example
+ * ```
+ * <ChartDot dataKey="outliers" color={useChartColors().categorical(3)[2]} />
+ * ```
+ */
+export declare function ChartDot({ dataKey, color, radius }: ChartDotProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartDot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDot.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartDot.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,MAAU,EAAC,EAAE,aAAa,+BAenE"}

package/dist/Chart/ChartDot.js

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartDot.tsx
+ * @output Renders scatter dots for a data key
+ * @position Child of Chart; reads scales from context
+ */
+
+import { useChart } from "./ChartContext.js";
+import { xPixel } from "./utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Scatter dot marks.
+ *
+ * @example
+ * ```
+ * <ChartDot dataKey="outliers" color={useChartColors().categorical(3)[2]} />
+ * ```
+ */
+export function ChartDot({
+  dataKey,
+  color,
+  radius = 4
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale
+  } = useChart();
+  return /*#__PURE__*/_jsx("g", {
+    children: data.map((d, i) => {
+      const x = xPixel(d, xKey, xScale);
+      const yVal = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+      return /*#__PURE__*/_jsx("circle", {
+        cx: x,
+        cy: yScale(yVal),
+        r: radius,
+        fill: color
+      }, i);
+    })
+  });
+}

package/dist/Chart/ChartDotGL.d.ts

@@ -0,0 +1,16 @@
+export interface ChartDotGLProps {
+    dataKey: string;
+    color: string;
+    size?: number;
+    opacity?: number;
+}
+/**
+ * WebGL scatter plot. Canvas mounted outside SVG for sharp Retina rendering.
+ *
+ * @example
+ * ```
+ * <ChartDotGL dataKey="value" color={colors.categorical(1)[0]} />
+ * ```
+ */
+export declare function ChartDotGL({ dataKey, color, size, opacity, }: ChartDotGLProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartDotGL.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDotGL.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartDotGL.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA+BD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,IAAQ,EACR,OAAa,GACd,EAAE,eAAe,sCAgFjB"}

package/dist/Chart/ChartDotGL.js

@@ -0,0 +1,135 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartDotGL.tsx
+ * @output WebGL scatter — single draw call, canvas mounted outside SVG for sharp DPR
+ * @position Child of Chart; reads scales from context
+ */
+
+import { useRef, useEffect, useCallback } from 'react';
+import { useChart } from "./ChartContext.js";
+import { xPixel } from "./utils.js";
+import { hexToGL, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, createProgram, POINT_SIZE_COMPENSATION } from "./webgl.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VERT = `
+  attribute vec2 a_position;
+  uniform vec2 u_resolution;
+  uniform float u_size;
+  varying float v_alpha;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    gl_PointSize = u_size * ${POINT_SIZE_COMPENSATION.toFixed(6)};
+    v_alpha = 1.0;
+  }
+`;
+const FRAG = `
+  precision mediump float;
+  uniform vec3 u_color;
+  uniform float u_opacity;
+  varying float v_alpha;
+  void main() {
+    float v_alpha_final = u_opacity;
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+    if (dist > 0.5) discard;
+    float edge = 1.0 - smoothstep(0.48, 0.5, dist);
+    float a = v_alpha_final * edge;
+    gl_FragColor = vec4(u_color * a, a);
+  }
+`;
+
+/**
+ * WebGL scatter plot. Canvas mounted outside SVG for sharp Retina rendering.
+ *
+ * @example
+ * ```
+ * <ChartDotGL dataKey="value" color={colors.categorical(1)[0]} />
+ * ```
+ */
+export function ChartDotGL({
+  dataKey,
+  color,
+  size = 6,
+  opacity = 0.8
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale,
+    width,
+    height
+  } = useChart();
+  const canvasRef = useRef(null);
+  const glRef = useRef(null);
+  const programRef = useRef(null);
+  const markerRef = useRef(null);
+  const getPositions = useCallback(() => {
+    const positions = [];
+    for (const d of data) {
+      const x = xPixel(d, xKey, xScale);
+      const yVal = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+      positions.push(x, yScale(yVal));
+    }
+    return new Float32Array(positions);
+  }, [data, xKey, dataKey, xScale, yScale]);
+
+  // Mount canvas outside SVG
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) {
+      return;
+    }
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement('canvas');
+    }
+    return mountCanvasOverSVG(marker, canvasRef.current, width, height);
+  }, [width, height]);
+
+  // Draw
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || width <= 0 || height <= 0) {
+      return;
+    }
+    const dpr = sizeCanvas(canvas, width, height);
+    if (!glRef.current) {
+      glRef.current = getWebGLContext(canvas);
+    }
+    const gl = glRef.current;
+    if (!gl) {
+      return;
+    }
+    if (!programRef.current) {
+      programRef.current = createProgram(gl, VERT, FRAG);
+    }
+    const program = programRef.current;
+    if (!program) {
+      return;
+    }
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    setupGLState(gl);
+    gl.useProgram(program);
+    const positions = getPositions();
+    const posBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    const [r, g, b] = hexToGL(color);
+    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
+    gl.uniform3f(gl.getUniformLocation(program, 'u_color'), r, g, b);
+    gl.uniform1f(gl.getUniformLocation(program, 'u_size'), size * dpr);
+    gl.uniform1f(gl.getUniformLocation(program, 'u_opacity'), opacity);
+    gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+    gl.deleteBuffer(posBuffer);
+  }, [width, height, color, size, opacity, getPositions]);
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    ref: markerRef
+  });
+}

package/dist/Chart/ChartDotGLInteractive.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @file ChartDotGLInteractive.tsx
+ * @output WebGL scatter with GPU color-picking for O(1) nearest-point hover detection
+ * @position Child of Chart; renders to two canvases — one visible, one offscreen pick buffer
+ *
+ * Technique: Each point is assigned a unique color encoding its index.
+ * On hover, we readPixels from the offscreen framebuffer at the cursor position
+ * and decode the index. No JS iteration over data points — hover is O(1).
+ */
+import { type ReactNode } from 'react';
+export interface ChartDotGLInteractiveProps {
+    /** Which data key for the y values */
+    dataKey: string;
+    /** Dot fill color (hex string) */
+    color: string;
+    /** Point size in pixels */
+    size?: number;
+    /** Opacity 0-1 */
+    opacity?: number;
+    /**
+     * Tooltip render function. Receives the hovered data point and its index.
+     * If omitted, a default tooltip is rendered.
+     */
+    renderTooltip?: (datum: Record<string, unknown>, index: number) => ReactNode;
+}
+/**
+ * WebGL scatter with built-in GPU hover detection.
+ * Uses color-picking on an offscreen framebuffer — readPixels at cursor
+ * gives the hovered point index in O(1), no matter how many points.
+ *
+ * @example
+ * ```
+ * <ChartDotGLInteractive
+ *   dataKey="value"
+ *   color={useChartColors().categorical(1)[0]}
+ *   renderTooltip={(d, i) => <span>Point {i}: {d.value}</span>}
+ * />
+ * ```
+ */
+export declare function ChartDotGLInteractive({ dataKey, color, size, opacity, renderTooltip, }: ChartDotGLInteractiveProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartDotGLInteractive.d.ts.map

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

@@ -0,0 +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"}