@astryxdesign/lab 0.7.8-canary.f50bc74 → 0.7.8-canary.f60d2bb

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/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.f50bc74",
+  "version": "0.7.8-canary.f60d2bb",
   "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.f50bc74",
+    "@astryxdesign/core": "0.7.8-canary.f60d2bb",
     "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.f50bc74",
-    "@astryxdesign/cli": "0.7.8-canary.f50bc74",
-    "@astryxdesign/interaction-harness": "0.7.8-canary.f50bc74",
+    "@astryxdesign/a11y-spec": "0.7.8-canary.f60d2bb",
+    "@astryxdesign/cli": "0.7.8-canary.f60d2bb",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.f60d2bb",
     "@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/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,

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,