@astryxdesign/lab 0.7.8-canary.36cde5e → 0.7.8-canary.55aaeda

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

@@ -1 +1 @@
-{"version":3,"file":"ChartZoom.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartZoom.tsx"],"names":[],"mappings":"AAmBA,6CAA6C;AAC7C,MAAM,MAAM,mBAAmB,GAC7B,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,mBAAmB,CAAC;CACvC;AAiDD,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,eAAe,EACf,SAAe,EACf,KAAa,EACb,KAAa,EACb,OAAqB,GACtB,EAAE,cAAc,+BAwShB"}
+{"version":3,"file":"ChartZoom.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartZoom.tsx"],"names":[],"mappings":"AAmBA,6CAA6C;AAC7C,MAAM,MAAM,mBAAmB,GAC7B,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,mBAAmB,CAAC;CACvC;AAiDD,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,eAAe,EACf,SAAe,EACf,KAAa,EACb,KAAa,EACb,OAAqB,GACtB,EAAE,cAAc,+BA6RhB"}

package/dist/Chart/ChartZoom.js

@@ -7,10 +7,10 @@
  *
  * Zoom is aspect-ratio-normalized: both axes scale by the same visual
  * factor regardless of their domain ranges. Reset button restores
- * the initial domains captured on mount.
+ * the domains of the first render.
  */
 
-import { useCallback, useRef, useEffect } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { useChart } from "./ChartContext.js";
@@ -77,20 +77,10 @@ export function ChartZoom({
     yScale,
     svgRef
   } = useChart();
-
-  // Capture initial domains on mount for reset
-  const initialDomainsRef = useRef(null);
-  useEffect(() => {
-    if (initialDomainsRef.current) {
-      return;
-    } // only capture once
-    const xDomain = isBandScale(xScale) ? null : xScale.domain();
-    const yDomain = yScale.domain();
-    initialDomainsRef.current = {
-      x: xDomain,
-      y: yDomain
-    };
-  }, [xScale, yScale]);
+  const [initialDomains] = useState(() => ({
+    x: isBandScale(xScale) ? null : xScale.domain(),
+    y: yScale.domain()
+  }));
   const dragRef = useRef(null);
   const pointersRef = useRef(new Map());
   const pinchRef = useRef(null);
@@ -219,15 +209,11 @@ export function ChartZoom({
     }
   }, []);
   const handleReset = useCallback(() => {
-    const init = initialDomainsRef.current;
-    if (!init) {
-      return;
-    }
-    if (init.x) {
-      onXDomainChange?.(init.x);
+    if (initialDomains.x) {
+      onXDomainChange?.(initialDomains.x);
     }
-    onYDomainChange?.(init.y);
-  }, [onXDomainChange, onYDomainChange]);
+    onYDomainChange?.(initialDomains.y);
+  }, [initialDomains, onXDomainChange, onYDomainChange]);
 
   // Toolbar portal target
   const portalTarget = svgRef.current?.parentElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.8-canary.36cde5e",
+  "version": "0.7.8-canary.55aaeda",
   "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",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.8-canary.36cde5e",
+    "@astryxdesign/core": "0.7.8-canary.55aaeda",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,9 +59,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.8-canary.36cde5e",
-    "@astryxdesign/cli": "0.7.8-canary.36cde5e",
-    "@astryxdesign/interaction-harness": "0.7.8-canary.36cde5e",
+    "@astryxdesign/a11y-spec": "0.7.8-canary.55aaeda",
+    "@astryxdesign/cli": "0.7.8-canary.55aaeda",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.55aaeda",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chart/ChartZoom.test.tsx

@@ -3,14 +3,15 @@
 /**
  * @file ChartZoom.test.tsx
  * @input Renders ChartZoom inside Chart with a stubbed ResizeObserver
- * @output Render-smoke coverage for zoom: capture surface, portaled toolbar, toolbar opt-out.
+ * @output Render-smoke coverage for zoom: capture surface, portaled toolbar, toolbar opt-out,
+ *   and Reset back to the first render's domains.
  *   Wheel/pinch gestures need createSVGPoint/getScreenCTM, which do not exist in
  *   jsdom, so they are intentionally out of scope here. (#4295)
  * @position Colocated test for ChartZoom.tsx
  */
 
 import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
-import {render, screen, act} from '@testing-library/react';
+import {render, screen, act, fireEvent} from '@testing-library/react';
 import {Chart} from './Chart';
 import {ChartZoom} from './ChartZoom';
 
@@ -87,6 +88,44 @@ describe('ChartZoom', () => {
     ).toBeInTheDocument();
   });
 
+  it("resets to the first render's domains after the caller changes them", () => {
+    const onXDomainChange = vi.fn();
+    const onYDomainChange = vi.fn();
+    function ZoomedChart({
+      xDomain,
+      yDomain,
+    }: {
+      xDomain: [number, number];
+      yDomain: [number, number];
+    }) {
+      return (
+        <Chart
+          data={data}
+          xKey="x"
+          yKeys={['y']}
+          xDomain={xDomain}
+          yDomain={yDomain}
+          interactive>
+          <ChartZoom
+            onXDomainChange={onXDomainChange}
+            onYDomainChange={onYDomainChange}
+          />
+        </Chart>
+      );
+    }
+    const {rerender} = render(
+      <ZoomedChart xDomain={[0, 2]} yDomain={[0, 4]} />,
+    );
+    reportWidth(464);
+    reportWidth(465);
+
+    rerender(<ZoomedChart xDomain={[0.5, 1.5]} yDomain={[1, 3]} />);
+    fireEvent.click(screen.getByRole('button', {name: 'Reset zoom'}));
+
+    expect(onXDomainChange).toHaveBeenLastCalledWith([0, 2]);
+    expect(onYDomainChange).toHaveBeenLastCalledWith([0, 4]);
+  });
+
   it('renders no toolbar when toolbar is false', () => {
     render(
       <Chart data={data} xKey="x" yKeys={['y']} interactive>

package/src/Chart/ChartZoom.tsx

@@ -7,10 +7,10 @@
  *
  * Zoom is aspect-ratio-normalized: both axes scale by the same visual
  * factor regardless of their domain ranges. Reset button restores
- * the initial domains captured on mount.
+ * the domains of the first render.
  */
 
-import {type CSSProperties, useCallback, useRef, useEffect} from 'react';
+import {type CSSProperties, useCallback, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {useChart} from './ChartContext';
@@ -101,22 +101,15 @@ export function ChartZoom({
 }: ChartZoomProps) {
   const {width, height, xScale, yScale, svgRef} = useChart();
 
-  // Capture initial domains on mount for reset
-  const initialDomainsRef = useRef<{
+  const [initialDomains] = useState<{
     x: [number, number] | null;
     y: [number, number];
-  } | null>(null);
-
-  useEffect(() => {
-    if (initialDomainsRef.current) {
-      return;
-    } // only capture once
-    const xDomain = isBandScale(xScale)
+  }>(() => ({
+    x: isBandScale(xScale)
       ? null
-      : ((xScale as ScaleLinear<number, number>).domain() as [number, number]);
-    const yDomain = yScale.domain() as [number, number];
-    initialDomainsRef.current = {x: xDomain, y: yDomain};
-  }, [xScale, yScale]);
+      : ((xScale as ScaleLinear<number, number>).domain() as [number, number]),
+    y: yScale.domain() as [number, number],
+  }));
 
   const dragRef = useRef<{
     startX: number;
@@ -303,15 +296,11 @@ export function ChartZoom({
   }, []);
 
   const handleReset = useCallback(() => {
-    const init = initialDomainsRef.current;
-    if (!init) {
-      return;
-    }
-    if (init.x) {
-      onXDomainChange?.(init.x);
+    if (initialDomains.x) {
+      onXDomainChange?.(initialDomains.x);
     }
-    onYDomainChange?.(init.y);
-  }, [onXDomainChange, onYDomainChange]);
+    onYDomainChange?.(initialDomains.y);
+  }, [initialDomains, onXDomainChange, onYDomainChange]);
 
   // Toolbar portal target
   const portalTarget = svgRef.current?.parentElement;

package/src/CircularProgress/__tests__/CircularProgressMotion.a11y.chromium.spec.ts

@@ -28,8 +28,10 @@ import {
 import {
   busyWindowProof,
   CONTROL_RGB,
+  countBetween,
   inPresentationOrder,
   startBusyControl,
+  traceRendering,
   trackMarker,
   type TrackedFrame,
 } from '@astryxdesign/interaction-harness';
@@ -413,50 +415,47 @@ test('a value change keeps moving while a script holds the main thread', async (
   ).toBeLessThanOrEqual(6);
 });
 
-test('a value change lays out and paints nothing per frame', async ({
-  page,
-  browser,
-}) => {
+test('a value change lays out and paints nothing per frame', async ({page}) => {
   await open(page, 20);
-  // Stretch the theme's duration so the trace sits wholly inside the change.
+  // Stretch the theme's duration so the second judged below sits wholly
+  // inside the change.
   await page.evaluate(() =>
     (
       document.querySelector('.astryx-circular-progress-fill') as HTMLElement
     ).style.setProperty('--duration-medium', '3000ms'),
   );
-  await setArgs(page, {value: 80});
-  await page.waitForTimeout(200);
-  await browser.startTracing(page, {
-    categories: ['devtools.timeline', 'disabled-by-default-devtools.timeline'],
+  // Tracing starts before the change, so however long it takes to start, it
+  // takes none of the change's time. The judged second starts two frames
+  // after the change's animations are ready, 200 ms in.
+  let from = 0;
+  let to = 0;
+  let moving = false;
+  const trace = await traceRendering(page, async () => {
+    await setArgs(page, {value: 80});
+    await page.waitForTimeout(200);
+    from = await page.evaluate(async () => {
+      await Promise.all(document.getAnimations().map(async a => a.ready));
+      await new Promise(resolve =>
+        requestAnimationFrame(() => requestAnimationFrame(resolve)),
+      );
+      return performance.timeOrigin + performance.now();
+    });
+    await page.waitForTimeout(1000);
+    [to, moving] = await page.evaluate(
+      () =>
+        [
+          performance.timeOrigin + performance.now(),
+          document.getAnimations().some(a => a.playState === 'running'),
+        ] as const,
+    );
   });
-  await page.waitForTimeout(1000);
-  const moving = await page.evaluate(() =>
-    document.getAnimations().some(a => a.playState === 'running'),
-  );
-  const trace = JSON.parse((await browser.stopTracing()).toString()) as {
-    traceEvents: {
-      name: string;
-      ph: string;
-      pid: number;
-      tid: number;
-      args?: {name?: string};
-    }[];
-  };
-  const mainThreads = new Set(
-    trace.traceEvents
-      .filter(e => e.ph === 'M' && e.name === 'thread_name')
-      .filter(e => e.args?.name === 'CrRendererMain')
-      .map(e => `${e.pid}:${e.tid}`),
-  );
-  const count = (name: string) =>
-    trace.traceEvents.filter(
-      e => e.name === name && mainThreads.has(`${e.pid}:${e.tid}`),
-    ).length;
+  const counts = countBetween(trace, from, to);
   // A full second of the change: nothing lays out or paints. A
   // stroke-dashoffset transition repainted every frame (36 paints in 410 ms).
+  expect(to - from).toBeGreaterThanOrEqual(1000);
   expect(moving).toBe(true);
-  expect(count('Layout')).toBe(0);
-  expect(count('Paint')).toBe(0);
+  expect(counts.Layout ?? 0).toBe(0);
+  expect(counts.Paint ?? 0).toBe(0);
 });
 
 test('at rest the ring draws what the stroked circle drew', async ({