@astryxdesign/lab 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/src/ChartV2/marks/streamGL.tsx

@@ -0,0 +1,251 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/streamGL.tsx
+ * @output WebGL streaming time-series line — ring buffer, canvas outside SVG
+ *
+ * Data is pushed imperatively via the returned handle, not from the static dataset.
+ * The chart's xScale/yScale map pushed values to pixel coordinates.
+ */
+
+import {
+  useRef,
+  useEffect,
+  useImperativeHandle,
+  useCallback,
+  type MutableRefObject,
+} from 'react';
+import type {SeriesDef} from '../types';
+import {useChartV2} from '../ChartV2Context';
+import {
+  hexToGL,
+  getWebGLContext,
+  setupGLState,
+  sizeCanvas,
+  mountCanvasOverSVG,
+  createProgram,
+} from '../../Chart/webgl';
+
+export interface StreamGLHandle {
+  push(x: number, y: number): void;
+  clear(): void;
+}
+
+export interface StreamGLOptions {
+  color: string;
+  bufferSize?: number;
+  lineWidth?: number;
+  opacity?: number;
+  /** Ref to receive the push/clear handle */
+  handleRef?: MutableRefObject<StreamGLHandle | null>;
+}
+
+const VERT = `
+  attribute vec2 a_position;
+  uniform vec2 u_resolution;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+
+const FRAG = `
+  precision mediump float;
+  uniform vec3 u_color;
+  uniform float u_opacity;
+  void main() {
+    float a = u_opacity;
+    gl_FragColor = vec4(u_color * a, a);
+  }
+`;
+
+/**
+ * Inline component — manages the ring buffer, canvas, and rAF draw loop.
+ */
+function StreamGLCanvas({
+  color,
+  bufferSize,
+  lineWidth,
+  opacity,
+  width,
+  height,
+  handleRef,
+}: {
+  color: string;
+  bufferSize: number;
+  lineWidth: number;
+  opacity: number;
+  width: number;
+  height: number;
+  handleRef?: MutableRefObject<StreamGLHandle | null>;
+}) {
+  const {xScale, yScale} = useChartV2();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const glRef = useRef<WebGLRenderingContext | null>(null);
+  const programRef = useRef<WebGLProgram | null>(null);
+  const bufRef = useRef<WebGLBuffer | null>(null);
+  const markerRef = useRef<SVGGElement>(null);
+
+  const ring = useRef({
+    data: new Float32Array(bufferSize * 2),
+    head: 0,
+    count: 0,
+  });
+
+  // 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]);
+
+  // Size canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || width <= 0 || height <= 0) {
+      return;
+    }
+    sizeCanvas(canvas, width, height);
+  }, [width, height]);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    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;
+    }
+
+    if (!bufRef.current) {
+      bufRef.current = gl.createBuffer();
+    }
+
+    const {data: ringData, head, count} = ring.current;
+    if (count < 2) {
+      return;
+    }
+
+    const linearX = xScale as (v: number) => number;
+    const drawBuf = new Float32Array(count * 2);
+    for (let i = 0; i < count; i++) {
+      const idx = ((head - count + i + bufferSize) % bufferSize) * 2;
+      drawBuf[i * 2] = linearX(ringData[idx]);
+      drawBuf[i * 2 + 1] = yScale(ringData[idx + 1]);
+    }
+
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    setupGLState(gl);
+    gl.useProgram(program);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufRef.current);
+    gl.bufferData(gl.ARRAY_BUFFER, drawBuf, gl.DYNAMIC_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_opacity'), opacity);
+
+    gl.lineWidth(lineWidth);
+    gl.drawArrays(gl.LINE_STRIP, 0, count);
+  }, [width, height, color, lineWidth, opacity, bufferSize, xScale, yScale]);
+
+  // Expose push/clear handle via ref
+  useImperativeHandle(
+    handleRef as MutableRefObject<StreamGLHandle | null>,
+    () => ({
+      push(x: number, y: number) {
+        const r = ring.current;
+        const idx = r.head * 2;
+        r.data[idx] = x;
+        r.data[idx + 1] = y;
+        r.head = (r.head + 1) % bufferSize;
+        r.count = Math.min(r.count + 1, bufferSize);
+        draw();
+      },
+      clear() {
+        ring.current.head = 0;
+        ring.current.count = 0;
+        const gl = glRef.current;
+        if (gl) {
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+        }
+      },
+    }),
+    [bufferSize, draw],
+  );
+
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return <g ref={markerRef} />;
+}
+
+/**
+ * WebGL streaming line. Data is pushed imperatively via handleRef,
+ * not from the chart's static dataset. Internally uses a ring buffer.
+ *
+ * @example
+ * ```
+ * const streamRef = useRef<StreamGLHandle>(null);
+ * // Push data points in a rAF loop or event handler:
+ * streamRef.current?.push(Date.now(), value);
+ *
+ * <Chart series={[streamGL({color: '#10b981', handleRef: streamRef})]} />
+ * ```
+ */
+export function streamGL(options: StreamGLOptions): SeriesDef {
+  const {color} = options;
+  const bufferSize = options.bufferSize ?? 500;
+  const lineWidth = options.lineWidth ?? 2;
+  const opacity = options.opacity ?? 1;
+  const handleRef = options.handleRef;
+
+  return {
+    type: 'streamGL',
+    key: 'stream',
+    dataKeys: [],
+    layout: {},
+
+    // Streaming data is pushed, not in the static dataset
+    resolve() {
+      return [];
+    },
+
+    render(_resolved, ctx) {
+      return (
+        <StreamGLCanvas
+          color={color}
+          bufferSize={bufferSize}
+          lineWidth={lineWidth}
+          opacity={opacity}
+          width={ctx.width}
+          height={ctx.height}
+          handleRef={handleRef}
+        />
+      );
+    },
+  };
+}

package/src/ChartV2/tooltip.ts

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tooltip.ts
+ * @output Tooltip types + series-value derivation
+ * @position Used by Chart to bridge series + hovered datum → tooltip rows.
+ *           Mirrors the legend.ts split: data shaping lives here, presentation
+ *           lives in ChartTooltip.tsx.
+ */
+
+import {isUtilityMarkType, type SeriesDef} from './types';
+
+/**
+ * One row of tooltip data — represents a single series' value at the
+ * hovered x-position. Stable shape so custom `render` functions can rely on it.
+ */
+export interface TooltipSeriesValue {
+  /** Series key (matches SeriesDef.key) */
+  key: string;
+  /** Display label — falls back to key when not set on the series */
+  label: string;
+  /** Series color token */
+  color: string;
+  /** Mark type — drives swatch variant in the default render */
+  type: string;
+  /** Raw value at the hovered x for this series */
+  value: unknown;
+}
+
+/**
+ * Build the ordered list of tooltip rows for a given hovered datum.
+ * Skips utility marks and any series the layout couldn't resolve.
+ *
+ * Pure / synchronous — safe to memoize on the caller.
+ */
+export function deriveTooltipSeriesValues(
+  series: readonly SeriesDef[],
+  datum: Record<string, unknown> | undefined,
+  resolvedKeys: ReadonlySet<string>,
+): TooltipSeriesValue[] {
+  if (!datum) {
+    return [];
+  }
+  const out: TooltipSeriesValue[] = [];
+  for (const s of series) {
+    if (isUtilityMarkType(s.type)) {
+      continue;
+    }
+    if (!resolvedKeys.has(s.key)) {
+      continue;
+    }
+    out.push({
+      key: s.key,
+      label: s.label ?? s.key,
+      color: s.color ?? 'var(--color-text-primary)',
+      type: s.type,
+      value: datum[s.dataKeys[0]],
+    });
+  }
+  return out;
+}
+
+/**
+ * Whether a series should render a hover dot at the focused index.
+ * Bars get a band-highlight rect instead, and utility marks have no
+ * data point to highlight.
+ */
+export function shouldRenderHoverDot(seriesType: string): boolean {
+  return seriesType !== 'bar' && !isUtilityMarkType(seriesType);
+}

package/src/ChartV2/types.ts

@@ -0,0 +1,129 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file types.ts
+ * @output Core types for the v2 chart architecture
+ * @position Foundation — consumed by layout, renderers, and interactions
+ */
+
+import type {ReactNode} from 'react';
+import type {ScaleLinear, ScaleBand} from 'd3-scale';
+
+export type ChartScale = ScaleLinear<number, number> | ScaleBand<string>;
+
+export interface ChartMargin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+/** Resolved pixel position for a single data point in a series */
+export interface ResolvedPoint {
+  /** Pixel x in plot area coordinates */
+  px: number;
+  /** Pixel y in plot area coordinates (top of mark) */
+  py: number;
+  /** Pixel y baseline (bottom of mark) — differs from py when stacked */
+  py0: number;
+  /** Index into the data array */
+  dataIndex: number;
+}
+
+/** Context passed to resolve() and render() on each series */
+export interface SeriesContext {
+  data: Record<string, unknown>[];
+  xKey: string;
+  xScale: ChartScale;
+  yScale: ScaleLinear<number, number>;
+  /** Width of the plot area */
+  width: number;
+  /** Height of the plot area */
+  height: number;
+}
+
+/**
+ * The standardized shape every mark helper returns.
+ * Each mark type is self-contained: it knows how to resolve positions
+ * and how to render itself. The chart root just iterates and calls.
+ */
+export interface SeriesDef {
+  /** Mark type identifier */
+  readonly type: string;
+  /** Unique key for this series (typically the dataKey) */
+  readonly key: string;
+  /** Data keys this series reads from — used to compute y domain */
+  readonly dataKeys: string[];
+  /** Whether this series is the topmost in its stack (set during layout) */
+  _isTopOfStack?: boolean;
+  /** Static color for legend display. Undefined if color is dynamic (accessor function). */
+  readonly color?: string;
+  /** Human-readable label for legend. Falls back to key if not provided. */
+  readonly label?: string;
+  /** Layout hints the chart root uses for cross-series coordination */
+  readonly layout: {
+    /** Stack group — series with same stack accumulate */
+    stack?: string;
+    /** Bar group — series with same group subdivide bandwidth */
+    group?: string;
+    /** Whether this series contributes to y-domain zero inclusion */
+    includeZero?: boolean;
+  };
+  /**
+   * Resolve pixel positions for each data point.
+   * Called by the chart root during the layout pass.
+   * Receives pre-computed stack offsets if stacked.
+   */
+  resolve(
+    ctx: SeriesContext,
+    stackOffsets?: {y0: number; y1: number}[],
+    groupInfo?: {index: number; count: number},
+  ): ResolvedPoint[];
+  /**
+   * Render the mark given resolved positions.
+   * Called by the chart root during the render pass.
+   * Returns SVG elements (or manages its own canvas for WebGL).
+   */
+  render(resolved: ResolvedPoint[], ctx: SeriesContext): ReactNode;
+}
+
+/** Resolved positions for all series */
+export type ResolvedPositions = Map<string, ResolvedPoint[]>;
+
+/** Pointer event normalized to plot-area coordinates */
+export interface ChartPointerEvent {
+  x: number;
+  y: number;
+  nearest: (ResolvedPoint & {seriesKey: string}) | null;
+  active: boolean;
+}
+
+/** Context provided by Chart to interaction children */
+export interface ChartV2Context {
+  width: number;
+  height: number;
+  margin: ChartMargin;
+  data: Record<string, unknown>[];
+  xKey: string;
+  xScale: ChartScale;
+  yScale: ScaleLinear<number, number>;
+  resolved: Map<string, ResolvedPoint[]>;
+  onPointer: (handler: (e: ChartPointerEvent) => void) => () => void;
+  svgRef: React.RefObject<SVGSVGElement | null>;
+}
+
+/**
+ * Series mark types that are utility / annotation marks rather than primary
+ * data. They're skipped from chrome surfaces (legend, tooltip rows) since
+ * they don't represent values the user is comparing.
+ */
+export const UTILITY_MARK_TYPES: ReadonlySet<string> = new Set([
+  'referenceLine',
+  'errorBar',
+  'band',
+]);
+
+/** True if the series type is a utility / annotation mark. */
+export function isUtilityMarkType(type: string): boolean {
+  return UTILITY_MARK_TYPES.has(type);
+}

package/src/CodeEditor/CodeEditor.tsx

@@ -131,8 +131,6 @@ export interface CodeEditorProps extends Omit<
   onChange: (value: string) => void;
   /** Language for highlighting. @default "plaintext" */
   language?: string;
-  /** Label for the code editor — used as the accessible name of the editable region. */
-  label: string;
   /** Show line numbers. @default false */
   hasLineNumbers?: boolean;
   /** Read-only mode. @default false */
@@ -184,7 +182,6 @@ let editorInstanceCounter = 0;
  * ```tsx
  * const [code, setCode] = useState('');
  * <CodeEditor
- *   label="Source code"
  *   value={code}
  *   onChange={setCode}
  *   language="typescript"
@@ -202,7 +199,6 @@ export function CodeEditor({
   maxHeight,
   size = 'md',
   tokenizer: customTokenizer,
-  label,
   xstyle,
   className,
   style,
@@ -451,7 +447,6 @@ export function CodeEditor({
             contentEditable={isReadOnly ? false : ('plaintext-only' as any)}
             role="textbox"
             aria-multiline="true"
-            aria-label={label}
             aria-readonly={isReadOnly}
             spellCheck={false}
             onInput={handleInput}

package/src/Sankey/SankeyChart.tsx

@@ -202,9 +202,6 @@ export function SankeyChart({
     <div ref={containerRef} style={{width: '100%'}}>
       {ctx && (
         <div
-          role={needsScroll ? 'group' : undefined}
-          aria-label={needsScroll ? 'Sankey chart' : undefined}
-          tabIndex={needsScroll ? 0 : undefined}
           style={
             needsScroll ? {overflowX: 'auto', overflowY: 'hidden'} : undefined
           }>

package/src/Schedule/ListView.tsx

@@ -52,7 +52,7 @@ export interface ScheduleListViewOptions {
 function ScheduleListView(
   _props: ScheduleViewComponentProps<ScheduleListViewOptions>,
 ) {
-  const {events, timezoneID, range, isLoading, headingLevel} = useScheduleContext();
+  const {events, timezoneID, range, isLoading} = useScheduleContext();
   const days = enumerateDates(range.startDate, range.endDate);
   const currentTime = useCurrentTime();
   const currentPlainDate = plainDateFromInstant(currentTime, timezoneID);
@@ -97,7 +97,6 @@ function ScheduleListView(
               day={day}
               isCurrentDay={isCurrentDay}
               timezoneID={timezoneID}
-              headingLevel={headingLevel}
             />
             <div {...stylex.props(styles.listEvents)}>
               {renderListRows({
@@ -118,16 +117,14 @@ function ListDayHeading({
   day,
   isCurrentDay,
   timezoneID,
-  headingLevel,
 }: {
   day: PlainDate;
   isCurrentDay: boolean;
   timezoneID: string;
-  headingLevel: 2 | 3 | 4 | 5 | 6;
 }) {
   return (
     <Heading
-      level={headingLevel}
+      level={4}
       color="secondary"
       display="block"
       aria-label={formatFullDate(day, timezoneID)}

package/src/Schedule/MonthlyView.tsx

@@ -57,7 +57,7 @@ export interface ScheduleMonthlyViewOptions {
 function ScheduleMonthlyView(
   _props: ScheduleViewComponentProps<ScheduleMonthlyViewOptions>,
 ) {
-  const {events, categories, date, focusDate, timezoneID, range, isLoading, headingLevel} =
+  const {events, categories, date, focusDate, timezoneID, range, isLoading} =
     useScheduleContext();
   const rangeDate = date.toPlainDate();
   const highlightedDate = focusDate.toPlainDate();
@@ -86,7 +86,7 @@ function ScheduleMonthlyView(
               aria-colindex={index + 1}
               {...stylex.props(styles.weekdayLabel)}>
               <Heading
-                level={headingLevel}
+                level={4}
                 color="secondary"
                 display="block"
                 xstyle={styles.weekdayHeading}>

package/src/Schedule/Schedule.test.tsx

@@ -99,45 +99,6 @@ describe('Schedule', () => {
     expect(screen.queryByText('Outside range')).not.toBeInTheDocument();
   });
 
-  it('renders monthly weekday headings at the configured headingLevel (default 3)', async () => {
-    render(
-      <Schedule
-        view={createScheduleMonthlyView()}
-        events={events}
-        categories={categories}
-        date={Date.UTC(2026, 4, 13)}
-        focusDate={Date.UTC(2026, 4, 13)}
-        timezoneID="UTC"
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Visible sync')).toBeInTheDocument();
-    });
-    expect(
-      screen.getAllByRole('heading', {level: 3}).length,
-    ).toBeGreaterThan(0);
-  });
-
-  it('renders list day headings at the configured headingLevel (default 3)', async () => {
-    render(
-      <Schedule
-        view={createScheduleListView({days: 7})}
-        events={events}
-        categories={categories}
-        date={Date.UTC(2026, 4, 13)}
-        timezoneID="UTC"
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Visible sync')).toBeInTheDocument();
-    });
-    expect(
-      screen.getAllByRole('heading', {level: 3}).length,
-    ).toBeGreaterThan(0);
-  });
-
   it('loads async events with Instant range boundaries', async () => {
     const loader = vi.fn(
       async (_start: Instant, _end: Instant) =>

package/src/Schedule/Schedule.tsx

@@ -56,8 +56,6 @@ export interface ScheduleProps<
   timezoneID?: string;
   /** Header/rendering plugins. Defaults to pagination controls. */
   plugins?: ReadonlyArray<SchedulePlugin>;
-  /** Heading level for sub-headings (day labels, weekday headers) within the schedule. @default 3 */
-  headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
 
 interface EventRecord {
@@ -160,7 +158,6 @@ function ScheduleViewContent<Options extends ScheduleViewOptions>({
   onNextDate,
   nextDateLabel,
   plugins,
-  headingLevel,
 }: {
   view: ScheduleView<Options>;
   eventSource: ScheduleEventSource;
@@ -174,7 +171,6 @@ function ScheduleViewContent<Options extends ScheduleViewOptions>({
   onNextDate: () => void;
   nextDateLabel: string;
   plugins: ReadonlyArray<SchedulePlugin>;
-  headingLevel: 2 | 3 | 4 | 5 | 6;
 }) {
   const Component = view.component;
   const range = getRange(view, date);
@@ -199,7 +195,6 @@ function ScheduleViewContent<Options extends ScheduleViewOptions>({
         nextDateLabel,
         view,
         plugins,
-        headingLevel,
       }}>
       <Component options={view.options} />
     </ScheduleContext.Provider>
@@ -215,7 +210,6 @@ export function Schedule({
   onChangeDate,
   timezoneID: timezoneIDProp,
   plugins = defaultSchedulePlugins,
-  headingLevel = 3,
   xstyle,
   className,
   style,
@@ -291,7 +285,6 @@ export function Schedule({
             onNextDate={onNextDate}
             nextDateLabel={nextDateRange.label}
             plugins={plugins}
-            headingLevel={headingLevel}
           />
         }>
         <ScheduleViewContent
@@ -307,7 +300,6 @@ export function Schedule({
           onNextDate={onNextDate}
           nextDateLabel={nextDateRange.label}
           plugins={plugins}
-          headingLevel={headingLevel}
         />
       </Suspense>
     </div>

package/src/Schedule/TimeGridView.tsx

@@ -65,7 +65,7 @@ export function TimeGridView({
   maxHour: number;
   hourHeight: number;
 }) {
-  const {categories, headingLevel} = useScheduleContext();
+  const {categories} = useScheduleContext();
   const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
   const normalizedMaxHour = Math.max(
     normalizedMinHour + 1,
@@ -114,7 +114,7 @@ export function TimeGridView({
                 index === days.length - 1 && styles.timeGridHeaderCellLast,
               )}>
               <Heading
-                level={headingLevel}
+                level={4}
                 color="secondary"
                 display="block"
                 xstyle={styles.timeGridHeaderHeading}>

package/src/Schedule/context.tsx

@@ -34,8 +34,6 @@ export interface ScheduleContextValue {
   nextDateLabel: string;
   view: ScheduleViewBase;
   plugins: ReadonlyArray<SchedulePlugin>;
-  /** Heading level used for sub-headings within the schedule (day labels, weekday headers). */
-  headingLevel: 2 | 3 | 4 | 5 | 6;
 }
 
 export const ScheduleContext = createContext<ScheduleContextValue | null>(