@astryxdesign/lab 0.7.8-canary.36cde5e → 0.7.8-canary.3b41e2c

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA+OZ"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BAgPZ"}

package/dist/Chart/Chart.js

@@ -73,18 +73,19 @@ export function Chart({
   const containerRef = useRef(null);
   const svgRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+  const attachContainer = useCallback(container => {
+    containerRef.current = container;
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
         setContainerWidth(entry.contentRect.width);
       }
     });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      containerRef.current = null;
+    };
   }, []);
 
   // Block scroll/zoom on the container when interactive.
@@ -236,7 +237,7 @@ export function Chart({
   const accessibleLabel = label ?? `Chart of ${yKeys.join(', ')} by ${xKey}`;
   const showDataTable = data.length > 0 && data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
   return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
+    ref: attachContainer,
     style: containerStyle,
     children: [containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
       ref: svgRef,

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/dist/Comments/CommentActions.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file CommentActions.tsx
- * @input Uses React, React DOM flushSync, StyleX, IconButton, Button, Tooltip,
- *   ToggleButton, OverflowList, DropdownMenu, Popover, Text
+ * @input Uses React, React DOM flushSync, StyleX, useClipboard, IconButton,
+ *   Button, Tooltip, ToggleButton, OverflowList, DropdownMenu, Popover, Text
  * @output Exports CommentActions (a comment's header actions), ReactionSummary
  *   (its reaction toggles), and the action-lookup helpers rows use for focus
  *   hand-offs

package/dist/Comments/CommentActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentActions.d.ts","sourceRoot":"","sources":["../../src/Comments/CommentActions.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI/E,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AAazC,OAAO,EAAkB,KAAK,UAAU,EAAC,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAkB,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAoBpE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhF,oEAAoE;AACpE,MAAM,MAAM,aAAa,GAAG;IAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAC,CAAC;AAE9E;;sBAEsB;AACtB,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,MAAM,EAAE,eAAe,GACtB,WAAW,GAAG,IAAI,CAMpB;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,WAAW,GAAG,IAAI,GACvB,WAAW,GAAG,IAAI,CAIpB;AAiCD,kFAAkF;AAClF,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,sCA0CA;AAkDD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,EACT,YAAY,EACZ,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,GACd,EAAE;IACD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,SAAS,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CACP,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,qBAAqB,KAC3B,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,+BA6RA"}
+{"version":3,"file":"CommentActions.d.ts","sourceRoot":"","sources":["../../src/Comments/CommentActions.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AAczC,OAAO,EAAkB,KAAK,UAAU,EAAC,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAkB,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAmBpE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhF,oEAAoE;AACpE,MAAM,MAAM,aAAa,GAAG;IAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAC,CAAC;AAE9E;;sBAEsB;AACtB,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,MAAM,EAAE,eAAe,GACtB,WAAW,GAAG,IAAI,CAMpB;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,WAAW,GAAG,IAAI,GACvB,WAAW,GAAG,IAAI,CAIpB;AAiCD,kFAAkF;AAClF,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,sCA0CA;AAkDD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,EACT,YAAY,EACZ,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,GACd,EAAE;IACD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,SAAS,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CACP,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,qBAAqB,KAC3B,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,+BAuQA"}

package/dist/Comments/CommentActions.js

@@ -4,18 +4,19 @@
 
 /**
  * @file CommentActions.tsx
- * @input Uses React, React DOM flushSync, StyleX, IconButton, Button, Tooltip,
- *   ToggleButton, OverflowList, DropdownMenu, Popover, Text
+ * @input Uses React, React DOM flushSync, StyleX, useClipboard, IconButton,
+ *   Button, Tooltip, ToggleButton, OverflowList, DropdownMenu, Popover, Text
  * @output Exports CommentActions (a comment's header actions), ReactionSummary
  *   (its reaction toggles), and the action-lookup helpers rows use for focus
  *   hand-offs
  * @position Internal parts of a comment row in the Comments family
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import { Button } from '@astryxdesign/core/Button';
 import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
+import { useClipboard } from '@astryxdesign/core/hooks';
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { HStack, VStack } from '@astryxdesign/core/Layout';
@@ -31,7 +32,6 @@ import { reactionDescription } from "./i18n.js";
 import { CommentIcon } from "./icons.js";
 import { commentAnchorId } from "./utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const LINK_COPIED_RESET_MS = 2_000;
 const MORE_MENU_MIN_WIDTH = `calc(${spacingVars['--spacing-8']} * 5)`;
 const styles = {
   actionsList: {
@@ -218,7 +218,10 @@ export function CommentActions({
   resolveAction
 }) {
   const t = useTranslator();
-  const [isLinkCopied, setIsLinkCopied] = useState(false);
+  const {
+    copy: copyToClipboard,
+    isCopied: isLinkCopied
+  } = useClipboard();
   const [isLinkTooltipOpen, setIsLinkTooltipOpen] = useState(false);
   const [isPickerOpen, setIsPickerOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(NO_COLLAPSED_ACTIONS);
@@ -236,24 +239,7 @@ export function CommentActions({
   }) : /*#__PURE__*/_jsx(CommentIcon, {
     name: "copyLink"
   });
-  const copyCommentLink = async () => {
-    if (navigator.clipboard == null) {
-      return;
-    }
-    try {
-      await navigator.clipboard.writeText(new URL(href, window.location.href).href);
-      setIsLinkCopied(true);
-    } catch {
-      setIsLinkCopied(false);
-    }
-  };
-  useEffect(() => {
-    if (!isLinkCopied) {
-      return;
-    }
-    const timer = window.setTimeout(() => setIsLinkCopied(false), LINK_COPIED_RESET_MS);
-    return () => window.clearTimeout(timer);
-  }, [isLinkCopied]);
+  const copyCommentLink = () => copyToClipboard(new URL(href, window.location.href).href);
   const changePicker = isOpen => {
     setIsPickerOpen(isOpen);
     onOpenChange(isOpen);

package/dist/Sankey/SankeyChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsDD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,KAAsB,EACtB,QAAQ,GACT,EAAE,gBAAgB,+BAsHlB;yBAjIe,WAAW"}
+{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiC,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsDD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,KAAsB,EACtB,QAAQ,GACT,EAAE,gBAAgB,+BAiHlB;yBA5He,WAAW"}

package/dist/Sankey/SankeyChart.js

@@ -13,7 +13,7 @@
  * small graphs are mirrored in a visually hidden From/To/Value table.
  */
 
-import { useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { SankeyProvider } from "./SankeyContext.js";
 import { computeLayout } from "./layout.js";
@@ -100,18 +100,13 @@ export function SankeyChart({
   label = 'Sankey chart',
   children
 }) {
-  const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
+  const observeContainerWidth = useCallback(container => {
     const ro = new ResizeObserver(entries => {
       const w = entries[0]?.contentRect.width ?? 0;
       setContainerWidth(w);
     });
-    ro.observe(el);
+    ro.observe(container);
     return () => ro.disconnect();
   }, []);
   const colCount = useMemo(() => resolveColumnCount(columns, nodes, links), [columns, nodes, links]);
@@ -149,7 +144,7 @@ export function SankeyChart({
   const nodeLabelById = useMemo(() => new Map(nodes.map(n => [n.id, n.label || n.id])), [nodes]);
   const showDataTable = links.length > 0 && links.length <= MAX_TABLE_LINKS;
   return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
+    ref: observeContainerWidth,
     style: {
       width: '100%'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.8-canary.36cde5e",
+  "version": "0.7.8-canary.3b41e2c",
   "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.3b41e2c",
     "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.3b41e2c",
+    "@astryxdesign/cli": "0.7.8-canary.3b41e2c",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.3b41e2c",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chart/Chart.test.tsx

@@ -171,6 +171,37 @@ describe('Chart measurement gate', () => {
   });
 });
 
+describe('Chart container observation', () => {
+  it('observes its container while mounted and stops on unmount', () => {
+    const observed = new Set<Element>();
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe(element: Element) {
+          observed.add(element);
+        }
+        unobserve(element: Element) {
+          observed.delete(element);
+        }
+        disconnect() {
+          observed.clear();
+        }
+      },
+    );
+    const {container, unmount} = render(
+      <Chart data={data} xKey="month" yKeys={['revenue']}>
+        <g />
+      </Chart>,
+    );
+    const chartContainer = container.firstElementChild;
+    expect(chartContainer).not.toBeNull();
+    expect(observed.has(chartContainer!)).toBe(true);
+
+    unmount();
+    expect(observed.size).toBe(0);
+  });
+});
+
 describe('useChart', () => {
   it('throws a clear error when used outside <Chart>', () => {
     // React reports the uncaught render error via console.error; keep the

package/src/Chart/Chart.tsx

@@ -134,18 +134,19 @@ export function Chart({
   const svgRef = useRef<SVGSVGElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+  const attachContainer = useCallback((container: HTMLDivElement) => {
+    containerRef.current = container;
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
         setContainerWidth(entry.contentRect.width);
       }
     });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      containerRef.current = null;
+    };
   }, []);
 
   // Block scroll/zoom on the container when interactive.
@@ -320,7 +321,7 @@ export function Chart({
     data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
 
   return (
-    <div ref={containerRef} style={containerStyle}>
+    <div ref={attachContainer} style={containerStyle}>
       {containerWidth > 0 && (
         <svg
           ref={svgRef}

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/Chat/__tests__/ChatTypingIndicator.a11y.chromium.spec.ts

@@ -9,7 +9,7 @@ import {
   type CDPSession,
   type Locator,
   type Page,
-} from '@playwright/test';
+} from '@astryxdesign/a11y-spec/playwright';
 import {
   STATUS_MESSAGE_PATTERN,
   blockingResults,

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

@@ -14,7 +14,7 @@ import {
   type CDPSession,
   type Locator,
   type Page,
-} from '@playwright/test';
+} from '@astryxdesign/a11y-spec/playwright';
 import {
   PROGRESSBAR_PATTERN,
   blockingResults,

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

@@ -19,7 +19,7 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   DEFAULT_STORYBOOK_DIR,
   serveStorybook,
@@ -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 ({

package/src/Comments/CommentActions.tsx

@@ -4,15 +4,15 @@
 
 /**
  * @file CommentActions.tsx
- * @input Uses React, React DOM flushSync, StyleX, IconButton, Button, Tooltip,
- *   ToggleButton, OverflowList, DropdownMenu, Popover, Text
+ * @input Uses React, React DOM flushSync, StyleX, useClipboard, IconButton,
+ *   Button, Tooltip, ToggleButton, OverflowList, DropdownMenu, Popover, Text
  * @output Exports CommentActions (a comment's header actions), ReactionSummary
  *   (its reaction toggles), and the action-lookup helpers rows use for focus
  *   hand-offs
  * @position Internal parts of a comment row in the Comments family
  */
 
-import {useCallback, useEffect, useRef, useState, type ReactNode} from 'react';
+import {useCallback, useRef, useState, type ReactNode} from 'react';
 import {flushSync} from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import {Button} from '@astryxdesign/core/Button';
@@ -20,6 +20,7 @@ import {
   DropdownMenu,
   type DropdownMenuOption,
 } from '@astryxdesign/core/DropdownMenu';
+import {useClipboard} from '@astryxdesign/core/hooks';
 import {Icon} from '@astryxdesign/core/Icon';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {HStack, VStack} from '@astryxdesign/core/Layout';
@@ -35,7 +36,6 @@ import {CommentIcon} from './icons';
 import {commentAnchorId, type AnyComment} from './utils';
 import type {CommentReaction, CommentReactionOption} from './types';
 
-const LINK_COPIED_RESET_MS = 2_000;
 const MORE_MENU_MIN_WIDTH = `calc(${spacingVars['--spacing-8']} * 5)`;
 
 const styles = stylex.create({
@@ -256,7 +256,7 @@ export function CommentActions({
   resolveAction?: ResolveAction;
 }) {
   const t = useTranslator();
-  const [isLinkCopied, setIsLinkCopied] = useState(false);
+  const {copy: copyToClipboard, isCopied: isLinkCopied} = useClipboard();
   const [isLinkTooltipOpen, setIsLinkTooltipOpen] = useState(false);
   const [isPickerOpen, setIsPickerOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(NO_COLLAPSED_ACTIONS);
@@ -276,30 +276,8 @@ export function CommentActions({
     <CommentIcon name="copyLink" />
   );
 
-  const copyCommentLink = async () => {
-    if (navigator.clipboard == null) {
-      return;
-    }
-    try {
-      await navigator.clipboard.writeText(
-        new URL(href, window.location.href).href,
-      );
-      setIsLinkCopied(true);
-    } catch {
-      setIsLinkCopied(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!isLinkCopied) {
-      return;
-    }
-    const timer = window.setTimeout(
-      () => setIsLinkCopied(false),
-      LINK_COPIED_RESET_MS,
-    );
-    return () => window.clearTimeout(timer);
-  }, [isLinkCopied]);
+  const copyCommentLink = () =>
+    copyToClipboard(new URL(href, window.location.href).href);
 
   const changePicker = (isOpen: boolean) => {
     setIsPickerOpen(isOpen);

package/src/Comments/Comments.test.tsx

@@ -957,6 +957,38 @@ describe('Comments threads', () => {
     ).toBeTruthy();
   });
 
+  it('keeps the copied label for the full time after a second copy', async () => {
+    vi.useFakeTimers({toFake: ['setTimeout', 'clearTimeout']});
+    const wait = (ms: number) => act(() => vi.advanceTimersByTimeAsync(ms));
+    const copyButton = (name: string) => screen.getByRole('button', {name});
+    try {
+      render(
+        <Sized>
+          <Comments
+            comments={[{...COMMENTS[0], replies: []}]}
+            currentUser={OTHER}
+          />
+        </Sized>,
+      );
+      await click(copyButton('Copy comment link'));
+      await wait(0);
+      expect(copyButton('Comment link copied')).toBeTruthy();
+
+      await wait(1500);
+      await click(copyButton('Comment link copied'));
+      await wait(0);
+      // 2.5 s after the first copy and 1 s after the second one.
+      await wait(1000);
+      expect(writeText).toHaveBeenCalledTimes(2);
+      expect(copyButton('Comment link copied')).toBeTruthy();
+
+      await wait(1000);
+      expect(copyButton('Copy comment link')).toBeTruthy();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it('collapses header actions into the more menu when space runs low', async () => {
     overflowControl.collapsed = new Set(['reply', 'link']);
     const onSubmit = vi.fn();

package/src/Sankey/SankeyChart.test.tsx

@@ -76,6 +76,37 @@ describe('SankeyChart scroll container', () => {
   });
 });
 
+describe('SankeyChart container observation', () => {
+  it('observes its container while mounted and stops on unmount', () => {
+    const observed = new Set<Element>();
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe(element: Element) {
+          observed.add(element);
+        }
+        unobserve(element: Element) {
+          observed.delete(element);
+        }
+        disconnect() {
+          observed.clear();
+        }
+      },
+    );
+    const {container, unmount} = render(
+      <SankeyChart nodes={nodes} links={links}>
+        <SankeyNode />
+      </SankeyChart>,
+    );
+    const chartContainer = container.firstElementChild;
+    expect(chartContainer).not.toBeNull();
+    expect(observed.has(chartContainer!)).toBe(true);
+
+    unmount();
+    expect(observed.size).toBe(0);
+  });
+});
+
 describe('SankeyChart accessible name', () => {
   it('names the svg when the chart does not scroll', () => {
     render(

package/src/Sankey/SankeyChart.tsx

@@ -13,13 +13,7 @@
  * small graphs are mirrored in a visually hidden From/To/Value table.
  */
 
-import {
-  type ReactNode,
-  useMemo,
-  useRef,
-  useState,
-  useLayoutEffect,
-} from 'react';
+import {type ReactNode, useCallback, useMemo, useState} from 'react';
 import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {SankeyProvider} from './SankeyContext';
 import {computeLayout} from './layout';
@@ -154,19 +148,14 @@ export function SankeyChart({
   label = 'Sankey chart',
   children,
 }: SankeyChartProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
-  useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
+  const observeContainerWidth = useCallback((container: HTMLDivElement) => {
     const ro = new ResizeObserver(entries => {
       const w = entries[0]?.contentRect.width ?? 0;
       setContainerWidth(w);
     });
-    ro.observe(el);
+    ro.observe(container);
     return () => ro.disconnect();
   }, []);
 
@@ -225,7 +214,7 @@ export function SankeyChart({
   const showDataTable = links.length > 0 && links.length <= MAX_TABLE_LINKS;
 
   return (
-    <div ref={containerRef} style={{width: '100%'}}>
+    <div ref={observeContainerWidth} style={{width: '100%'}}>
       {ctx && (
         <div
           role={needsScroll ? 'group' : undefined}

package/src/Schedule/__tests__/ScheduleEventPopover.a11y.chromium.spec.ts

@@ -15,7 +15,7 @@
  *   focus ring, or produce a touch tap.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import pixelmatch from 'pixelmatch';
 // @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
 import {PNG} from 'pngjs';

package/src/Schedule/__tests__/ScheduleMonthChip.a11y.chromium.spec.ts

@@ -11,7 +11,7 @@
  *   layout, so it cannot tell whether a time fits beside a title.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   finishEvidence,
   openStory,

package/src/Schedule/__tests__/ScheduleMonthEventPopover.a11y.chromium.spec.ts

@@ -13,7 +13,7 @@
  *   cannot show a native popover, return focus through it, or lay out chips.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   finishEvidence,
   openStory,

package/src/Schedule/__tests__/ScheduleMonthOverflow.a11y.chromium.spec.ts

@@ -16,7 +16,7 @@
  *   through it, or paint a focus ring.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import pixelmatch from 'pixelmatch';
 // @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
 import {PNG} from 'pngjs';

package/src/Schedule/__tests__/ScheduleTimeDirection.a11y.chromium.spec.ts

@@ -12,7 +12,7 @@
  *   algorithm, so only a browser shows the painted order.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   finishEvidence,
   openStory,

package/src/Schedule/__tests__/ScheduleTimeGridGeometry.a11y.chromium.spec.ts

@@ -11,7 +11,7 @@
  *   ownership are checkable only here.
  */
 
-import {expect, test} from '@playwright/test';
+import {expect, test} from '@astryxdesign/a11y-spec/playwright';
 import pixelmatch from 'pixelmatch';
 // @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
 import {PNG} from 'pngjs';

package/src/Schedule/__tests__/ScheduleTimeGridInitialPosition.a11y.chromium.spec.ts

@@ -12,7 +12,7 @@
  *   the viewport really lands on.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   DAY,
   finishEvidence,

package/src/Schedule/__tests__/ScheduleTimeGridLongSpan.a11y.chromium.spec.ts

@@ -11,7 +11,7 @@
  *   no layout, so it cannot measure where a span paints or how wide a block is.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   finishEvidence,
   NARROW,

package/src/Schedule/__tests__/ScheduleTimeGridMidnight.a11y.chromium.spec.ts

@@ -9,7 +9,7 @@
  *   dropped) at the midnight boundary
  */
 
-import {expect, test} from '@playwright/test';
+import {expect, test} from '@astryxdesign/a11y-spec/playwright';
 import {
   finishEvidence,
   openStory,

package/src/Schedule/__tests__/ScheduleTimeGridOverlap.a11y.chromium.spec.ts

@@ -10,7 +10,7 @@
  *   is a question only a layout engine can answer.
  */
 
-import {expect, test} from '@playwright/test';
+import {expect, test} from '@astryxdesign/a11y-spec/playwright';
 import {
   blockOverlap,
   finishEvidence,

package/src/Schedule/__tests__/ScheduleTimeGridSkippedMidnight.a11y.chromium.spec.ts

@@ -10,7 +10,7 @@
  *   dropped) across a skipped midnight
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   finishEvidence,
   record,

package/src/SelectableCardGroup/__tests__/SelectableCardGroupRadio.a11y.chromium.spec.ts

@@ -10,7 +10,7 @@
  * jsdom has no native radio-group keyboard, so only a real engine shows it.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test, type Page} from '@astryxdesign/a11y-spec/playwright';
 import {
   DEFAULT_STORYBOOK_DIR,
   serveStorybook,

package/src/__tests__/ReorderGripPinchZoom.a11y.chromium.spec.ts

@@ -13,7 +13,12 @@
  *   (packages/lab/src/reorderStyles.ts)
  */
 
-import {expect, test, type CDPSession, type Page} from '@playwright/test';
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Page,
+} from '@astryxdesign/a11y-spec/playwright';
 import {
   DEFAULT_STORYBOOK_DIR,
   serveStorybook,