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

package/dist/Chart/index.d.ts

@@ -0,0 +1,29 @@
+export { Chart, type ChartProps, type YBaseline } from './Chart';
+export { ChartAxis, type ChartAxisProps } from './ChartAxis';
+export { compactNumber, currency, percent, shortDate, monthYear, } from './formatters';
+export { ChartGrid, type ChartGridProps } from './ChartGrid';
+export { ChartBar, type ChartBarProps } from './ChartBar';
+export { ChartLine, type ChartLineProps } from './ChartLine';
+export { ChartArea, type ChartAreaProps } from './ChartArea';
+export { ChartErrorBar, type ChartErrorBarProps } from './ChartErrorBar';
+export { ChartCandlestick, type ChartCandlestickProps, } from './ChartCandlestick';
+export { ChartDot, type ChartDotProps } from './ChartDot';
+export { ChartDotGL, type ChartDotGLProps } from './ChartDotGL';
+export { ChartDotGLInteractive, type ChartDotGLInteractiveProps, } from './ChartDotGLInteractive';
+export { ChartHeatmapGL, type ChartHeatmapGLProps, } from './ChartHeatmapGL';
+export { ChartStreamGL, type ChartStreamGLProps, type ChartStreamGLHandle, } from './ChartStreamGL';
+export { ChartTooltip, type ChartTooltipProps, type ChartCrosshairMode, } from './ChartTooltip';
+export { ChartLegend, type ChartLegendProps, type ChartLegendItem, } from './ChartLegend';
+export { useChart } from './ChartContext';
+export type { ChartContext, ChartMargin, ChartScale, DataPoint } from './types';
+export { m4Reduce, type M4Point } from './m4';
+export { isBandScale, xPixel } from './utils';
+export { useChartColors } from './useChartColors';
+export { getChartColors, getChartColorsFromResolver, type ChartColorsAPI, type SequentialHue, type TokenResolver, } from './getChartColors';
+export { useChartRange, type UseChartRangeOptions, type UseChartRangeReturn, } from './useChartRange';
+export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader, createProgram as createGLProgram, CIRCLE_FRAG_BODY, POINT_SIZE_COMPENSATION, } from './webgl';
+export { ChartBrush, type ChartBrushProps, type BrushMode, type BrushRange, } from './ChartBrush';
+export { ChartZoom, type ChartZoomProps, type ZoomToolbarPosition, } from './ChartZoom';
+export { ChartSelect, type ChartSelectProps } from './ChartSelect';
+export { ChartReferenceLine, type ChartReferenceLineProps, } from './ChartReferenceLine';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chart/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAC,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAE,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AACxD,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,aAAa,EAAE,KAAK,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACvE,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAE,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AACxD,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAE,KAAK,OAAO,EAAC,MAAM,MAAM,CAAC;AAC5C,OAAO,EAAC,WAAW,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,IAAI,eAAe,EAChC,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACzB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,sBAAsB,CAAC"}

package/dist/Chart/index.js

@@ -0,0 +1,29 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { Chart } from "./Chart.js";
+export { ChartAxis } from "./ChartAxis.js";
+export { compactNumber, currency, percent, shortDate, monthYear } from "./formatters.js";
+export { ChartGrid } from "./ChartGrid.js";
+export { ChartBar } from "./ChartBar.js";
+export { ChartLine } from "./ChartLine.js";
+export { ChartArea } from "./ChartArea.js";
+export { ChartErrorBar } from "./ChartErrorBar.js";
+export { ChartCandlestick } from "./ChartCandlestick.js";
+export { ChartDot } from "./ChartDot.js";
+export { ChartDotGL } from "./ChartDotGL.js";
+export { ChartDotGLInteractive } from "./ChartDotGLInteractive.js";
+export { ChartHeatmapGL } from "./ChartHeatmapGL.js";
+export { ChartStreamGL } from "./ChartStreamGL.js";
+export { ChartTooltip } from "./ChartTooltip.js";
+export { ChartLegend } from "./ChartLegend.js";
+export { useChart } from "./ChartContext.js";
+export { m4Reduce } from "./m4.js";
+export { isBandScale, xPixel } from "./utils.js";
+export { useChartColors } from "./useChartColors.js";
+export { getChartColors, getChartColorsFromResolver } from "./getChartColors.js";
+export { useChartRange } from "./useChartRange.js";
+export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader, createProgram as createGLProgram, CIRCLE_FRAG_BODY, POINT_SIZE_COMPENSATION } from "./webgl.js";
+export { ChartBrush } from "./ChartBrush.js";
+export { ChartZoom } from "./ChartZoom.js";
+export { ChartSelect } from "./ChartSelect.js";
+export { ChartReferenceLine } from "./ChartReferenceLine.js";

package/dist/Chart/m4.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file m4.ts
+ * @output m4Reduce — pixel-aware time series data reduction
+ * @position Utility consumed by chart line/stream components for large datasets
+ *
+ * Implements the M4 algorithm from "M4: A Visualization-Oriented Time Series
+ * Data Aggregation" (Jugel et al., VLDB 2014).
+ *
+ * For each pixel column, retains 4 values: first, last, min, max.
+ * This is the minimum set needed to visually reproduce a line chart at the
+ * target resolution. A 1M-point dataset becomes ~4×width points.
+ */
+export interface M4Point {
+    x: number;
+    y: number;
+}
+/**
+ * Reduce a time-series dataset to at most 4 points per pixel column.
+ *
+ * The output preserves all visual features (peaks, troughs, trends) that
+ * are distinguishable at the given pixel width. Points within the same
+ * pixel column are collapsed to first/min/max/last.
+ *
+ * @param data — input points, must be sorted by x ascending
+ * @param width — chart width in pixels (determines bucket count)
+ * @param xDomain — [min, max] of the x-axis. If omitted, derived from data.
+ * @returns reduced points (at most 4 × width, typically much fewer)
+ *
+ * @example
+ * ```
+ * // Reduce 100k points to fit a 600px chart
+ * const reduced = m4Reduce(rawData, 600);
+ * ```
+ */
+export declare function m4Reduce(data: M4Point[], width: number, xDomain?: [number, number]): M4Point[];
+//# sourceMappingURL=m4.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"m4.d.ts","sourceRoot":"","sources":["../../src/Chart/m4.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,OAAO;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,OAAO,EAAE,EACf,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GACzB,OAAO,EAAE,CAqFX"}

package/dist/Chart/m4.js

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file m4.ts
+ * @output m4Reduce — pixel-aware time series data reduction
+ * @position Utility consumed by chart line/stream components for large datasets
+ *
+ * Implements the M4 algorithm from "M4: A Visualization-Oriented Time Series
+ * Data Aggregation" (Jugel et al., VLDB 2014).
+ *
+ * For each pixel column, retains 4 values: first, last, min, max.
+ * This is the minimum set needed to visually reproduce a line chart at the
+ * target resolution. A 1M-point dataset becomes ~4×width points.
+ */
+
+/**
+ * Reduce a time-series dataset to at most 4 points per pixel column.
+ *
+ * The output preserves all visual features (peaks, troughs, trends) that
+ * are distinguishable at the given pixel width. Points within the same
+ * pixel column are collapsed to first/min/max/last.
+ *
+ * @param data — input points, must be sorted by x ascending
+ * @param width — chart width in pixels (determines bucket count)
+ * @param xDomain — [min, max] of the x-axis. If omitted, derived from data.
+ * @returns reduced points (at most 4 × width, typically much fewer)
+ *
+ * @example
+ * ```
+ * // Reduce 100k points to fit a 600px chart
+ * const reduced = m4Reduce(rawData, 600);
+ * ```
+ */
+export function m4Reduce(data, width, xDomain) {
+  if (data.length === 0 || width <= 0) {
+    return [];
+  }
+
+  // If data fits without reduction, return as-is
+  if (data.length <= width * 4) {
+    return data;
+  }
+  const xMin = xDomain ? xDomain[0] : data[0].x;
+  const xMax = xDomain ? xDomain[1] : data[data.length - 1].x;
+  const xRange = xMax - xMin;
+  if (xRange <= 0) {
+    return [data[0]];
+  }
+  const bucketCount = Math.ceil(width);
+
+  // Each bucket tracks: first, last, min, max
+
+  const buckets = Array.from({
+    length: bucketCount
+  }, () => ({
+    first: null,
+    last: null,
+    min: null,
+    max: null
+  }));
+
+  // Single pass through the data
+  for (const point of data) {
+    const bucketIdx = Math.min(bucketCount - 1, Math.floor((point.x - xMin) / xRange * bucketCount));
+    const bucket = buckets[bucketIdx];
+    if (!bucket.first) {
+      bucket.first = point;
+      bucket.last = point;
+      bucket.min = point;
+      bucket.max = point;
+    } else {
+      bucket.last = point;
+      if (bucket.min && point.y < bucket.min.y) {
+        bucket.min = point;
+      }
+      if (bucket.max && point.y > bucket.max.y) {
+        bucket.max = point;
+      }
+    }
+  }
+
+  // Emit points in order: first, min, max, last per bucket
+  // Sort min/max by x within bucket to maintain temporal order
+  const result = [];
+  for (const bucket of buckets) {
+    if (!bucket.first || !bucket.min || !bucket.max || !bucket.last) {
+      continue;
+    }
+    const points = [bucket.first, bucket.min, bucket.max, bucket.last];
+
+    // Deduplicate (some may be the same point)
+    const seen = new Set();
+    const unique = [];
+    for (const p of points) {
+      if (!seen.has(p)) {
+        seen.add(p);
+        unique.push(p);
+      }
+    }
+
+    // Sort by x to maintain line continuity
+    unique.sort((a, b) => a.x - b.x);
+    result.push(...unique);
+  }
+  return result;
+}

package/dist/Chart/types.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @file types.ts
+ * @output Chart types, scale context, and margin convention
+ * @position Foundation types consumed by all chart sub-components
+ */
+import type { ScaleLinear, ScaleBand, ScaleTime } from 'd3-scale';
+/** Margin convention for chart SVG */
+export interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/** Any d3 scale that maps a domain to a pixel range */
+export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
+/** Resolved data coordinates from pixel position */
+export interface DataPoint {
+    /** X value in data space (number for linear, string for band) */
+    x: number | string | null;
+    /** Y value in data space */
+    y: number;
+    /** Pixel x within the plot area */
+    px: number;
+    /** Pixel y within the plot area */
+    py: number;
+}
+/** Scale context provided by Chart to children */
+export interface ChartContext {
+    /** Inner width (SVG width minus margins) */
+    width: number;
+    /** Inner height (SVG height minus margins) */
+    height: number;
+    /** Margin offsets */
+    margin: ChartMargin;
+    /** The data key used for x-axis values */
+    xKey: string;
+    /** The full dataset */
+    data: Record<string, unknown>[];
+    /** X scale — band for categorical, linear/time for continuous */
+    xScale: ChartScale;
+    /** Y scale — typically linear */
+    yScale: ScaleLinear<number, number>;
+    /** Ref to the SVG element — used for coordinate transforms */
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    /**
+     * Convert a pointer event to data coordinates.
+     * Handles SVG coordinate transform (margin offset) automatically.
+     */
+    pointerToData: (e: React.PointerEvent) => DataPoint;
+    /**
+     * Convert pixel coordinates (relative to plot area) to data values.
+     */
+    pixelToData: (px: number, py: number) => DataPoint;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Chart/types.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,WAAW,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,UAAU,CAAC;AAEhE,sCAAsC;AACtC,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAClB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,SAAS,CAAC,MAAM,CAAC,GACjB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9B,oDAAoD;AACpD,MAAM,WAAW,SAAS;IACxB,iEAAiE;IACjE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1B,4BAA4B;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,kDAAkD;AAClD,MAAM,WAAW,YAAY;IAC3B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,MAAM,EAAE,WAAW,CAAC;IACpB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,iEAAiE;IACjE,MAAM,EAAE,UAAU,CAAC;IACnB,iCAAiC;IACjC,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAC9C;;;OAGG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,SAAS,CAAC;IACpD;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;CACpD"}

package/dist/Chart/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Chart/useChartColors.d.ts

@@ -0,0 +1,16 @@
+import type { ChartColorsAPI } from './getChartColors';
+/**
+ * Theme-aware chart colors. Resolves data-viz tokens from the current
+ * theme context — respects light/dark mode and custom themes.
+ *
+ * @example
+ * ```
+ * const colors = useChartColors();
+ * colors.categorical(5)
+ * colors.sequential.blue(3)
+ * colors.diverging.positiveNegative(5)
+ * colors.alpha('#0171E3', 0.5)
+ * ```
+ */
+export declare function useChartColors(): ChartColorsAPI;
+//# sourceMappingURL=useChartColors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChartColors.d.ts","sourceRoot":"","sources":["../../src/Chart/useChartColors.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAErD;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,IAAI,cAAc,CAO/C"}

package/dist/Chart/useChartColors.js

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useChartColors.ts
+ * @output Theme-aware chart color palette hook
+ * @position React hook wrapping getChartColors — resolves from live theme context
+ */
+
+import { useMemo } from 'react';
+import { useTheme } from '@astryxdesign/core/theme';
+import { getChartColorsFromResolver } from "./getChartColors.js";
+/**
+ * Theme-aware chart colors. Resolves data-viz tokens from the current
+ * theme context — respects light/dark mode and custom themes.
+ *
+ * @example
+ * ```
+ * const colors = useChartColors();
+ * colors.categorical(5)
+ * colors.sequential.blue(3)
+ * colors.diverging.positiveNegative(5)
+ * colors.alpha('#0171E3', 0.5)
+ * ```
+ */
+export function useChartColors() {
+  const {
+    token
+  } = useTheme();
+  return useMemo(() => getChartColorsFromResolver(name => token(name) || ''), [token]);
+}

package/dist/Chart/useChartRange.d.ts

@@ -0,0 +1,50 @@
+import type { ChartStreamGLHandle } from './ChartStreamGL';
+export interface UseChartRangeOptions {
+    /** Sliding window size for x-axis (number of ticks visible). Required. */
+    xWindow: number;
+    /**
+     * Fixed y-axis domain. When provided, y auto-tracking is disabled.
+     * Use when the range is known (e.g. 0-100 for percentages).
+     */
+    yDomain?: [number, number];
+    /**
+     * Padding factor for auto-tracked y-axis (default: 0.1 = 10%).
+     * Applied symmetrically above max and below min.
+     */
+    yPadding?: number;
+    /**
+     * Anchor y=0 in the center of the y-axis (default: false).
+     * When true, y-domain is always symmetric around 0.
+     */
+    yCenter?: boolean;
+}
+export interface UseChartRangeReturn {
+    /** Current x-axis domain — pass to Chart xDomain prop */
+    xDomain: [number, number];
+    /** Current y-axis domain — pass to Chart yDomain prop */
+    yDomain: [number, number];
+    /**
+     * Push a data point. Updates domains synchronously, then optionally
+     * forwards to a stream ref.
+     */
+    push(x: number, y: number, streamRef?: React.RefObject<ChartStreamGLHandle | null>): void;
+    /** Reset all tracking state */
+    reset(): void;
+}
+/**
+ * Tracks streaming data ranges and provides xDomain/yDomain for Chart.
+ *
+ * Domain updates are synchronous with every push — no throttling, no lag.
+ * This ensures the chart's declared domain always matches the rendered data.
+ *
+ * @example
+ * ```
+ * const {xDomain, yDomain, push} = useChartRange({xWindow: 300, yPadding: 0.1});
+ *
+ * <Chart xDomain={xDomain} yDomain={yDomain} ...>
+ *   <ChartStreamGL handleRef={streamRef} ... />
+ * </Chart>
+ * ```
+ */
+export declare function useChartRange({ xWindow, yDomain: fixedYDomain, yPadding, yCenter, }: UseChartRangeOptions): UseChartRangeReturn;
+//# sourceMappingURL=useChartRange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChartRange.d.ts","sourceRoot":"","sources":["../../src/Chart/useChartRange.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,yDAAyD;IACzD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,yDAAyD;IACzD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,IAAI,CACF,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,GACtD,IAAI,CAAC;IACR,+BAA+B;IAC/B,KAAK,IAAI,IAAI,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,OAAO,EAAE,YAAY,EACrB,QAAc,EACd,OAAe,GAChB,EAAE,oBAAoB,GAAG,mBAAmB,CAwE5C"}

package/dist/Chart/useChartRange.js

@@ -0,0 +1,90 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useChartRange.ts
+ * @output Hook that tracks streaming data ranges and provides domains for Chart
+ * @position Helper hook; sits between the data source and Chart props
+ *
+ * Manages xDomain/yDomain as state. Domain updates are synchronous with
+ * every push — no throttling. The chart's declared domain must always
+ * match the data being rendered (Tier 1 guarantee).
+ */
+
+import { useState, useRef, useCallback } from 'react';
+/**
+ * Tracks streaming data ranges and provides xDomain/yDomain for Chart.
+ *
+ * Domain updates are synchronous with every push — no throttling, no lag.
+ * This ensures the chart's declared domain always matches the rendered data.
+ *
+ * @example
+ * ```
+ * const {xDomain, yDomain, push} = useChartRange({xWindow: 300, yPadding: 0.1});
+ *
+ * <Chart xDomain={xDomain} yDomain={yDomain} ...>
+ *   <ChartStreamGL handleRef={streamRef} ... />
+ * </Chart>
+ * ```
+ */
+export function useChartRange({
+  xWindow,
+  yDomain: fixedYDomain,
+  yPadding = 0.1,
+  yCenter = false
+}) {
+  const [xDomain, setXDomain] = useState([0, 0]);
+  const [yDomain, setYDomain] = useState(fixedYDomain ?? [0, 1]);
+  const rangeRef = useRef({
+    yMin: fixedYDomain ? fixedYDomain[0] : Infinity,
+    yMax: fixedYDomain ? fixedYDomain[1] : -Infinity
+  });
+  const push = useCallback((x, y, streamRef) => {
+    // Forward to stream
+    streamRef?.current?.push(x, y);
+
+    // x domain: during warmup grow from [0, x], once full slide
+    const xMin = x >= xWindow ? x - xWindow : 0;
+    const xMax = x >= xWindow ? x : Math.max(x, 1);
+    setXDomain([xMin, xMax]);
+
+    // y domain: track min/max, update on every push
+    if (!fixedYDomain) {
+      const r = rangeRef.current;
+      let changed = false;
+      if (y < r.yMin) {
+        r.yMin = y;
+        changed = true;
+      }
+      if (y > r.yMax) {
+        r.yMax = y;
+        changed = true;
+      }
+      if (changed) {
+        const range = r.yMax - r.yMin || 1;
+        const pad = range * yPadding;
+        let min = r.yMin - pad;
+        let max = r.yMax + pad;
+        if (yCenter) {
+          const abs = Math.max(Math.abs(min), Math.abs(max));
+          min = -abs;
+          max = abs;
+        }
+        setYDomain([min, max]);
+      }
+    }
+  }, [xWindow, fixedYDomain, yPadding, yCenter]);
+  const reset = useCallback(() => {
+    rangeRef.current = {
+      yMin: fixedYDomain ? fixedYDomain[0] : Infinity,
+      yMax: fixedYDomain ? fixedYDomain[1] : -Infinity
+    };
+    setXDomain([0, 0]);
+    setYDomain(fixedYDomain ?? [0, 1]);
+  }, [fixedYDomain]);
+  return {
+    xDomain,
+    yDomain: fixedYDomain ?? yDomain,
+    push,
+    reset
+  };
+}

package/dist/Chart/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file utils.ts
+ * @output Shared utilities for chart components
+ * @position Internal helpers; consumed by mark, axis, and interaction components
+ */
+import type { ScaleBand } from 'd3-scale';
+import type { ChartScale } from './types';
+/** Type guard for d3 band scales */
+export declare function isBandScale(scale: ChartScale): scale is ScaleBand<string>;
+/**
+ * Get the x pixel position for a datum using the chart's xKey and xScale.
+ * For band scales, returns the center of the band.
+ */
+export declare function xPixel(d: Record<string, unknown>, xKey: string, xScale: ChartScale): number;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/Chart/utils.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAExC,oCAAoC;AACpC,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,CAEzE;AAED;;;GAGG;AACH,wBAAgB,MAAM,CACpB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,UAAU,GACjB,MAAM,CAMR"}

package/dist/Chart/utils.js

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file utils.ts
+ * @output Shared utilities for chart components
+ * @position Internal helpers; consumed by mark, axis, and interaction components
+ */
+
+/** Type guard for d3 band scales */
+export function isBandScale(scale) {
+  return typeof scale === 'function' && 'bandwidth' in scale;
+}
+
+/**
+ * Get the x pixel position for a datum using the chart's xKey and xScale.
+ * For band scales, returns the center of the band.
+ */
+export function xPixel(d, xKey, xScale) {
+  const raw = d[xKey];
+  if (isBandScale(xScale)) {
+    return (xScale(String(raw)) ?? 0) + xScale.bandwidth() / 2;
+  }
+  return xScale(raw);
+}

package/dist/Chart/webgl.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @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 */
+export declare function hexToGL(hex: string): [number, number, number];
+/** DPR with supersampling for crisp circles */
+export declare function getCanvasDPR(): number;
+/**
+ * Create or get a WebGL context with correct alpha settings.
+ * Uses premultiplied alpha for correct compositing over the page.
+ */
+export declare function getWebGLContext(canvas: HTMLCanvasElement): WebGLRenderingContext | null;
+/**
+ * Set up standard GL state for chart rendering:
+ * - Clear with transparent
+ * - Enable premultiplied alpha blending
+ */
+export declare function setupGLState(gl: WebGLRenderingContext): void;
+/**
+ * Size a canvas for sharp rendering, accounting for DPR.
+ * Returns the DPR used.
+ */
+export declare function sizeCanvas(canvas: HTMLCanvasElement, width: number, height: number): number;
+/**
+ * Mount a canvas as an absolute-positioned sibling to an SVG element.
+ * Automatically aligns with the SVG marker's position — no manual margin
+ * offset needed. This is a Tier 1 guarantee: the canvas lands exactly
+ * where the SVG content area is, regardless of chart margins or transforms.
+ *
+ * Call from a useEffect. Returns a cleanup function.
+ */
+export declare function mountCanvasOverSVG(svgMarker: SVGGraphicsElement, canvas: HTMLCanvasElement, width: number, height: number): (() => void) | undefined;
+/**
+ * GLSL fragment for premultiplied-alpha circle with smoothstep AA.
+ * Use in fragment shaders that render point sprites.
+ *
+ * Expects:
+ * - varying float v_alpha (the final alpha before edge AA)
+ * - uniform vec3 u_color
+ *
+ * Returns: gl_FragColor with premultiplied alpha
+ */
+export declare const CIRCLE_FRAG_BODY = "\n    vec2 coord = gl_PointCoord - vec2(0.5);\n    float dist = length(coord);\n    if (dist > 0.5) discard;\n    float edge = 1.0 - smoothstep(0.48, 0.5, dist);\n    float a = v_alpha * edge;\n    gl_FragColor = vec4(u_color * a, a);\n";
+/**
+ * Smoothstep compensation factor for gl_PointSize.
+ * The visible circle radius is 0.48 of the point sprite (smoothstep starts there),
+ * so we scale up by 1/0.96 to match SVG circle radius exactly.
+ */
+export declare const POINT_SIZE_COMPENSATION: number;
+//# sourceMappingURL=webgl.d.ts.map

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

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