@workflow/web-shared 5.0.0-beta.5 → 5.0.0-beta.7

package/src/components/new-trace-viewer/trace-viewer.tsx

@@ -10,6 +10,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useReducedMotion } from '../../hooks/use-reduced-motion';
 import { ErrorBoundary } from '../error-boundary';
 import {
   EntityDetailPanel,
@@ -51,6 +52,7 @@ function useAnimatedViewport(initial: Viewport) {
   } | null>(null);
   const currentRef = useRef(initial);
   currentRef.current = viewport;
+  const reducedMotion = useReducedMotion();
 
   const cancel = useCallback(() => {
     if (animRef.current) {
@@ -62,6 +64,13 @@ function useAnimatedViewport(initial: Viewport) {
   const animateTo = useCallback(
     (target: Viewport) => {
       cancel();
+
+      if (reducedMotion) {
+        currentRef.current = target;
+        setViewportState(target);
+        return;
+      }
+
       const from = currentRef.current;
       const anim = { raf: 0, from, to: target, start: performance.now() };
 
@@ -79,7 +88,7 @@ function useAnimatedViewport(initial: Viewport) {
       animRef.current = anim;
       anim.raf = requestAnimationFrame(tick);
     },
-    [cancel]
+    [cancel, reducedMotion]
   );
 
   const setViewport = useCallback(
@@ -543,7 +552,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
           <button
             type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={zoomOut}
             aria-label="Zoom out"
           >
@@ -551,7 +560,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </button>
           <button
             type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={resetZoom}
             aria-label="Reset zoom"
           >
@@ -559,7 +568,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </button>
           <button
             type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={zoomIn}
             aria-label="Zoom in"
           >
@@ -587,9 +596,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                             ? 'bg-green-200 text-green-900'
                             : selectedResource === 'run'
                               ? 'bg-blue-200 text-blue-900'
-                              : selectedResource === 'hook'
-                                ? 'bg-yellow-200 text-yellow-900'
-                                : 'bg-gray-200 text-gray-900'
+                              : 'bg-gray-200 text-gray-900'
                         }`}
                       >
                         {selectedResource.charAt(0).toUpperCase() +

package/src/components/new-trace-viewer/utils.ts

@@ -130,18 +130,50 @@ export function computeSpanGaps(
 
 export const RESOURCE_COLORS: Record<
   string,
-  { bar: string; errorBar?: string }
+  {
+    bg: string;
+    border: string;
+    errorBg?: string;
+    errorBorder?: string;
+  }
 > = {
-  run: { bar: 'var(--ds-blue-700)', errorBar: 'var(--ds-red-700)' },
-  step: { bar: 'var(--ds-green-700)', errorBar: 'var(--ds-red-700)' },
-  hook: { bar: 'var(--ds-amber-700)', errorBar: 'var(--ds-red-700)' },
-  sleep: { bar: 'var(--ds-purple-700)', errorBar: 'var(--ds-red-700)' },
-  default: { bar: 'var(--ds-gray-500)', errorBar: 'var(--ds-red-700)' },
+  run: {
+    bg: 'var(--ds-blue-200)',
+    border: 'var(--ds-blue-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  step: {
+    bg: 'var(--ds-green-200)',
+    border: 'var(--ds-green-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  hook: {
+    bg: 'var(--ds-amber-200)',
+    border: 'var(--ds-amber-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  sleep: {
+    bg: 'var(--ds-purple-200)',
+    border: 'var(--ds-purple-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  default: {
+    bg: 'var(--ds-gray-200)',
+    border: 'var(--ds-gray-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
 };
 
 export function getResourceColor(resource: string): {
-  bar: string;
-  errorBar?: string;
+  bg: string;
+  border: string;
+  errorBg?: string;
+  errorBorder?: string;
 } {
   return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
 }

package/src/hooks/use-reduced-motion.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+/**
+ * Hook that detects whether the user has requested reduced motion and reacts
+ * to changes. Mirrors the `prefers-reduced-motion: reduce` media query so
+ * components can skip or shorten animations for users with motion
+ * sensitivities (e.g. vestibular disorders).
+ *
+ * @returns `true` if the user prefers reduced motion, `false` otherwise
+ */
+export const useReducedMotion = (): boolean => {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+
+    const media = window.matchMedia(QUERY);
+    const onChange = (): void => setReduced(media.matches);
+
+    media.addEventListener('change', onChange);
+    onChange();
+
+    return () => media.removeEventListener('change', onChange);
+  }, []);
+
+  return reduced;
+};