@wix/ai-assistant-avatar 0.43.0 → 0.45.0

package/dist/esm/Astro/Astro.js

@@ -1,6 +1,9 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import s from './Astro.module.css';
-import { ASTRO_SIZE } from './config';
+import { ASTRO_SIZE, TIMING } from './config';
+
+// Matches the `.astro` opacity transition in Astro.module.css.
+const AVATAR_REVEAL_DURATION = 80;
 import { useAvatarSetup, useMovement, useDotAnimation } from './hooks';
 import { DotTrail } from './components/DotTrail';
 import { AvatarEvent, AvatarState } from '@wix/aria-ai-avatar';
@@ -26,17 +29,45 @@ export const AiAssistantAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
     setAvatarHidden = _useAvatarSetup.setAvatarHidden;
   const _useMovement = useMovement(wrapperRef, ASTRO_SIZE.WIDTH, ASTRO_SIZE.HEIGHT),
     setCenter = _useMovement.setCenter;
-  const _useDotAnimation = useDotAnimation(setCenter, setAvatarHidden, AriaAvatar.setState),
+  const _useDotAnimation = useDotAnimation(setCenter, setAvatarHidden, AriaAvatar.setState, mode),
     leadDotRef = _useDotAnimation.leadDotRef,
     trailRefs = _useDotAnimation.trailRefs,
     hideDots = _useDotAnimation.hideDots,
     moveFromOffsetWithDots = _useDotAnimation.moveFromOffsetWithDots,
     moveToOffsetWithDots = _useDotAnimation.moveToOffsetWithDots;
+  const revealRef = useRef(null);
+  const cancelReveal = () => {
+    var _revealRef$current;
+    (_revealRef$current = revealRef.current) == null || _revealRef$current.cancel();
+    revealRef.current = null;
+  };
+
+  // The dots arrive on the compositor, so the avatar is revealed there too
+  // rather than when the main thread gets to `setAvatarHidden(false)`.
+  const scheduleReveal = () => {
+    cancelReveal();
+    const wrapper = wrapperRef.current;
+    if ((wrapper == null ? void 0 : wrapper.style.opacity) !== '0') {
+      return;
+    }
+    revealRef.current = wrapper.animate([{
+      opacity: 0
+    }, {
+      opacity: 1
+    }], {
+      delay: TIMING.TRAVEL_DURATION,
+      duration: AVATAR_REVEAL_DURATION,
+      fill: 'forwards'
+    });
+  };
   const onTravelHomeFrom = async (x, y, options) => {
     const pos = {
       x,
       y
     };
+    if (typeof x === 'number' && typeof y === 'number') {
+      scheduleReveal();
+    }
     await moveFromOffsetWithDots(pos, options);
   };
   const onTravelAwayTo = async (x, y, options) => {
@@ -44,6 +75,7 @@ export const AiAssistantAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
       x,
       y
     };
+    cancelReveal();
     await moveToOffsetWithDots(pos, options);
   };
   const onMouseMove = (clientX, clientY) => {
@@ -77,6 +109,7 @@ export const AiAssistantAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
     let _ref2 = _temp === void 0 ? {} : _temp,
       _ref2$withDots = _ref2.withDots,
       withDots = _ref2$withDots === void 0 ? false : _ref2$withDots;
+    cancelReveal();
     setAvatarHidden(true);
     if (withDots) {
       hideDots();

package/dist/esm/Astro/Astro.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useEffect","useImperativeHandle","useRef","useState","s","ASTRO_SIZE","useAvatarSetup","useMovement","useDotAnimation","DotTrail","AvatarEvent","AvatarState","AiAssistantAvatar","_ref","ref","mode","variant","sleepTimeout","wrapperRef","typingTimeout","_useState","isTyping","setIsTyping","_useState2","showBg","setShowBg","_useAvatarSetup","AriaAvatar","avatarHidden","setAvatarHidden","_useMovement","WIDTH","HEIGHT","setCenter","_useDotAnimation","setState","leadDotRef","trailRefs","hideDots","moveFromOffsetWithDots","moveToOffsetWithDots","onTravelHomeFrom","x","y","options","pos","onTravelAwayTo","onMouseMove","clientX","clientY","lookAt","onUserTyping","caretX","caretY","current","clearTimeout","setTimeout","err","console","error","hideAvatar","_temp","_ref2","_ref2$withDots","withDots","showAvatar","trigger","shrink","getState","SMALL","IDLE","smallLoader","SMALL_LOADER","pulse","Promise","resolve","idle","undo","fireEvent","UNDO_EVENT","boredom","SLEEPING","bigLoader","BIG_LOADER","ideaSpark","IDEA_SPARK","publish","PUBLISH_EVENT","wrapper","changeAstroColor","color","setAvatarColor","toggleAvatarBackground","hideBg","hide","show","createElement","className","avatar","astro","style","opacity","width","height"],"sources":["../../../src/Astro/Astro.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  Ref,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport s from './Astro.module.css';\nimport type { AstroRef, AstroProps, MoveOptions } from './types';\nimport { ASTRO_SIZE } from './config';\nimport { useAvatarSetup, useMovement, useDotAnimation } from './hooks';\nimport { DotTrail } from './components/DotTrail';\nimport { AvatarEvent, AvatarState } from '@wix/aria-ai-avatar';\n\nexport const AiAssistantAvatar = forwardRef<AstroRef, AstroProps>(\n  ({ mode, variant, sleepTimeout }, ref: Ref<AstroRef> | null) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const typingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const [isTyping, setIsTyping] = useState(false);\n\n    const [showBg, setShowBg] = useState(false);\n\n    const { AriaAvatar, avatarHidden, setAvatarHidden } = useAvatarSetup({\n      mode,\n      variant,\n      sleepTimeout,\n    });\n\n    const { setCenter } = useMovement(\n      wrapperRef,\n      ASTRO_SIZE.WIDTH,\n      ASTRO_SIZE.HEIGHT,\n    );\n\n    const {\n      leadDotRef,\n      trailRefs,\n      hideDots,\n      moveFromOffsetWithDots,\n      moveToOffsetWithDots,\n    } = useDotAnimation(setCenter, setAvatarHidden, AriaAvatar.setState);\n\n    const onTravelHomeFrom = async (\n      x: number,\n      y: number,\n      options?: MoveOptions,\n    ) => {\n      const pos = { x, y };\n      await moveFromOffsetWithDots(pos, options);\n    };\n\n    const onTravelAwayTo = async (\n      x: number,\n      y: number,\n      options?: MoveOptions,\n    ) => {\n      const pos = { x, y };\n      await moveToOffsetWithDots(pos, options);\n    };\n\n    const onMouseMove = (clientX: number, clientY: number) => {\n      if (isTyping) {\n        return;\n      }\n\n      AriaAvatar.lookAt(clientX, clientY);\n    };\n\n    const onUserTyping = (caretX: number, caretY: number) => {\n      try {\n        setIsTyping(true);\n        AriaAvatar.lookAt(caretX, caretY);\n\n        if (typingTimeout.current) {\n          clearTimeout(typingTimeout.current);\n        }\n\n        typingTimeout.current = setTimeout(() => {\n          setIsTyping(false);\n        }, 500);\n      } catch (err) {\n        console.error('[Astro] Error tracking typing:', err);\n      }\n    };\n\n    useEffect(() => {\n      return () => {\n        if (typingTimeout.current) {\n          clearTimeout(typingTimeout.current);\n        }\n      };\n    }, []);\n\n    const hideAvatar = ({ withDots = false }: { withDots?: boolean } = {}) => {\n      setAvatarHidden(true);\n\n      if (withDots) {\n        hideDots();\n      }\n    };\n\n    const showAvatar = () => {\n      setAvatarHidden(false);\n    };\n\n    useImperativeHandle(ref, () => ({\n      trigger: {\n        shrink: () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.SMALL);\n        },\n        smallLoader: () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL) {\n            return AriaAvatar.setState(AvatarState.SMALL_LOADER);\n          }\n          return AriaAvatar.setState(AvatarState.SMALL);\n        },\n        pulse: () => Promise.resolve(),\n        idle: async () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL_LOADER) {\n            await AriaAvatar.setState(AvatarState.SMALL);\n          }\n          return AriaAvatar.setState(AvatarState.IDLE);\n        },\n        undo: () => AriaAvatar.fireEvent(AvatarEvent.UNDO_EVENT),\n        boredom: () => {\n          if (AriaAvatar.getState() === AvatarState.SLEEPING) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.SLEEPING);\n        },\n        bigLoader: () => {\n          if (AriaAvatar.getState() === AvatarState.BIG_LOADER) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.BIG_LOADER);\n        },\n        ideaSpark: () => AriaAvatar.fireEvent(AvatarEvent.IDEA_SPARK),\n        publish: () => AriaAvatar.fireEvent(AvatarEvent.PUBLISH_EVENT),\n      },\n      avatarHidden,\n      wrapper: wrapperRef.current,\n      getState: AriaAvatar.getState,\n\n      onMouseMove,\n      onUserTyping,\n      onTravelHomeFrom,\n      onTravelAwayTo,\n\n      changeAstroColor: (color: string) => {\n        AriaAvatar.setAvatarColor(color);\n      },\n\n      toggleAvatarBackground: () => {\n        if (showBg) {\n          setShowBg(false);\n          AriaAvatar.hideBg();\n        } else {\n          setShowBg(true);\n          AriaAvatar.showBg();\n        }\n      },\n\n      hide: hideAvatar,\n      show: showAvatar,\n    }));\n\n    return (\n      <div className={s.avatar}>\n        <DotTrail leadDotRef={leadDotRef} trailRefs={trailRefs} />\n\n        <div\n          ref={wrapperRef}\n          className={s.astro}\n          style={{\n            opacity: avatarHidden ? 0 : 1,\n          }}\n        >\n          <div style={{ width: ASTRO_SIZE.WIDTH, height: ASTRO_SIZE.HEIGHT }}>\n            <AriaAvatar.AriaAvatar />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","useEffect","useImperativeHandle","useRef","useState","s","ASTRO_SIZE","TIMING","AVATAR_REVEAL_DURATION","useAvatarSetup","useMovement","useDotAnimation","DotTrail","AvatarEvent","AvatarState","AiAssistantAvatar","_ref","ref","mode","variant","sleepTimeout","wrapperRef","typingTimeout","_useState","isTyping","setIsTyping","_useState2","showBg","setShowBg","_useAvatarSetup","AriaAvatar","avatarHidden","setAvatarHidden","_useMovement","WIDTH","HEIGHT","setCenter","_useDotAnimation","setState","leadDotRef","trailRefs","hideDots","moveFromOffsetWithDots","moveToOffsetWithDots","revealRef","cancelReveal","_revealRef$current","current","cancel","scheduleReveal","wrapper","style","opacity","animate","delay","TRAVEL_DURATION","duration","fill","onTravelHomeFrom","x","y","options","pos","onTravelAwayTo","onMouseMove","clientX","clientY","lookAt","onUserTyping","caretX","caretY","clearTimeout","setTimeout","err","console","error","hideAvatar","_temp","_ref2","_ref2$withDots","withDots","showAvatar","trigger","shrink","getState","SMALL","IDLE","smallLoader","SMALL_LOADER","pulse","Promise","resolve","idle","undo","fireEvent","UNDO_EVENT","boredom","SLEEPING","bigLoader","BIG_LOADER","ideaSpark","IDEA_SPARK","publish","PUBLISH_EVENT","changeAstroColor","color","setAvatarColor","toggleAvatarBackground","hideBg","hide","show","createElement","className","avatar","astro","width","height"],"sources":["../../../src/Astro/Astro.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  Ref,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport s from './Astro.module.css';\nimport type { AstroRef, AstroProps, MoveOptions } from './types';\nimport { ASTRO_SIZE, TIMING } from './config';\n\n// Matches the `.astro` opacity transition in Astro.module.css.\nconst AVATAR_REVEAL_DURATION = 80;\nimport { useAvatarSetup, useMovement, useDotAnimation } from './hooks';\nimport { DotTrail } from './components/DotTrail';\nimport { AvatarEvent, AvatarState } from '@wix/aria-ai-avatar';\n\nexport const AiAssistantAvatar = forwardRef<AstroRef, AstroProps>(\n  ({ mode, variant, sleepTimeout }, ref: Ref<AstroRef> | null) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const typingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const [isTyping, setIsTyping] = useState(false);\n\n    const [showBg, setShowBg] = useState(false);\n\n    const { AriaAvatar, avatarHidden, setAvatarHidden } = useAvatarSetup({\n      mode,\n      variant,\n      sleepTimeout,\n    });\n\n    const { setCenter } = useMovement(\n      wrapperRef,\n      ASTRO_SIZE.WIDTH,\n      ASTRO_SIZE.HEIGHT,\n    );\n\n    const {\n      leadDotRef,\n      trailRefs,\n      hideDots,\n      moveFromOffsetWithDots,\n      moveToOffsetWithDots,\n    } = useDotAnimation(setCenter, setAvatarHidden, AriaAvatar.setState, mode);\n\n    const revealRef = useRef<Animation | null>(null);\n\n    const cancelReveal = () => {\n      revealRef.current?.cancel();\n      revealRef.current = null;\n    };\n\n    // The dots arrive on the compositor, so the avatar is revealed there too\n    // rather than when the main thread gets to `setAvatarHidden(false)`.\n    const scheduleReveal = () => {\n      cancelReveal();\n      const wrapper = wrapperRef.current;\n      if (wrapper?.style.opacity !== '0') {\n        return;\n      }\n      revealRef.current = wrapper.animate([{ opacity: 0 }, { opacity: 1 }], {\n        delay: TIMING.TRAVEL_DURATION,\n        duration: AVATAR_REVEAL_DURATION,\n        fill: 'forwards',\n      });\n    };\n\n    const onTravelHomeFrom = async (\n      x: number,\n      y: number,\n      options?: MoveOptions,\n    ) => {\n      const pos = { x, y };\n      if (typeof x === 'number' && typeof y === 'number') {\n        scheduleReveal();\n      }\n      await moveFromOffsetWithDots(pos, options);\n    };\n\n    const onTravelAwayTo = async (\n      x: number,\n      y: number,\n      options?: MoveOptions,\n    ) => {\n      const pos = { x, y };\n      cancelReveal();\n      await moveToOffsetWithDots(pos, options);\n    };\n\n    const onMouseMove = (clientX: number, clientY: number) => {\n      if (isTyping) {\n        return;\n      }\n\n      AriaAvatar.lookAt(clientX, clientY);\n    };\n\n    const onUserTyping = (caretX: number, caretY: number) => {\n      try {\n        setIsTyping(true);\n        AriaAvatar.lookAt(caretX, caretY);\n\n        if (typingTimeout.current) {\n          clearTimeout(typingTimeout.current);\n        }\n\n        typingTimeout.current = setTimeout(() => {\n          setIsTyping(false);\n        }, 500);\n      } catch (err) {\n        console.error('[Astro] Error tracking typing:', err);\n      }\n    };\n\n    useEffect(() => {\n      return () => {\n        if (typingTimeout.current) {\n          clearTimeout(typingTimeout.current);\n        }\n      };\n    }, []);\n\n    const hideAvatar = ({ withDots = false }: { withDots?: boolean } = {}) => {\n      cancelReveal();\n      setAvatarHidden(true);\n\n      if (withDots) {\n        hideDots();\n      }\n    };\n\n    const showAvatar = () => {\n      setAvatarHidden(false);\n    };\n\n    useImperativeHandle(ref, () => ({\n      trigger: {\n        shrink: () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.SMALL);\n        },\n        smallLoader: () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL) {\n            return AriaAvatar.setState(AvatarState.SMALL_LOADER);\n          }\n          return AriaAvatar.setState(AvatarState.SMALL);\n        },\n        pulse: () => Promise.resolve(),\n        idle: async () => {\n          if (AriaAvatar.getState() === AvatarState.SMALL_LOADER) {\n            await AriaAvatar.setState(AvatarState.SMALL);\n          }\n          return AriaAvatar.setState(AvatarState.IDLE);\n        },\n        undo: () => AriaAvatar.fireEvent(AvatarEvent.UNDO_EVENT),\n        boredom: () => {\n          if (AriaAvatar.getState() === AvatarState.SLEEPING) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.SLEEPING);\n        },\n        bigLoader: () => {\n          if (AriaAvatar.getState() === AvatarState.BIG_LOADER) {\n            return AriaAvatar.setState(AvatarState.IDLE);\n          }\n          return AriaAvatar.setState(AvatarState.BIG_LOADER);\n        },\n        ideaSpark: () => AriaAvatar.fireEvent(AvatarEvent.IDEA_SPARK),\n        publish: () => AriaAvatar.fireEvent(AvatarEvent.PUBLISH_EVENT),\n      },\n      avatarHidden,\n      wrapper: wrapperRef.current,\n      getState: AriaAvatar.getState,\n\n      onMouseMove,\n      onUserTyping,\n      onTravelHomeFrom,\n      onTravelAwayTo,\n\n      changeAstroColor: (color: string) => {\n        AriaAvatar.setAvatarColor(color);\n      },\n\n      toggleAvatarBackground: () => {\n        if (showBg) {\n          setShowBg(false);\n          AriaAvatar.hideBg();\n        } else {\n          setShowBg(true);\n          AriaAvatar.showBg();\n        }\n      },\n\n      hide: hideAvatar,\n      show: showAvatar,\n    }));\n\n    return (\n      <div className={s.avatar}>\n        <DotTrail leadDotRef={leadDotRef} trailRefs={trailRefs} />\n\n        <div\n          ref={wrapperRef}\n          className={s.astro}\n          style={{\n            opacity: avatarHidden ? 0 : 1,\n          }}\n        >\n          <div style={{ width: ASTRO_SIZE.WIDTH, height: ASTRO_SIZE.HEIGHT }}>\n            <AriaAvatar.AriaAvatar />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Astro/Astro.module.css

@@ -12,7 +12,24 @@
   transition: opacity 80ms linear;
   transform: translate3d(0, 0, 0);
 
-  clip-path: inset(23px 23px 23px 23px); /* cut off the edges to stop hijacking mouse events. maybe we need to reduce canvas size itself instead of this. */
+  clip-path: inset(12px); /* cut off the edges to stop hijacking mouse events. maybe we need to reduce canvas size itself instead of this. */
+
+  [class*='_wrapper_'] [class*='_hitbox_'] {
+    transform: scale(0.47);
+  }
+
+  [class*='_wrapper_'] [class*='_hitbox_'] [class*='_head_'][class*='_dark_'][class*='_shrunk_'] {
+    background: #557dff;
+  }
+
+  [class*='_wrapper_'] [class*='_hitbox_'] [class*='_head_'][class*='_dark_']:not([class*='_shrunk_']) {
+    box-shadow:
+      0 12px 15px #2f5dffb2,
+      0 8px 8px #3ca1ff40,
+      0 0 6px #ffffff60,
+      0 0 6px 2px #ffffff40,
+      0 0 6px #2f5dffb2;
+  }
 
   @starting-style {
     opacity: 0;

package/dist/esm/Astro/hooks/useDotAnimation.js

@@ -1,41 +1,84 @@
 import { useRef, useEffect } from 'react';
 import { ANIMATION_CONFIG, TIMING } from '../config';
-import { buildPathD, setMotionPath, setOffsetDistance, setOffsetRotate, setOffsetAnchor } from '../utils';
+import { buildPathControlPoints, samplePathByLength } from '../utils';
 import { AvatarState } from '@wix/aria-ai-avatar';
-export const useDotAnimation = (moveToPosition, setAvatarHidden, triggerAvatarAnimationState) => {
+const PATH_SAMPLES = 48;
+// Matches the dots' opacity transition in Astro.module.css.
+const DOT_FADE_OUT_DURATION = 150;
+const centerOf = el => {
+  const rect = el.getBoundingClientRect();
+  return {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2
+  };
+};
+
+/**
+ * Where path coordinate (0, 0) lies relative to the dot's own center, i.e.
+ * the translation that puts the dot where `offset-path` with a centered
+ * `offset-anchor` would.
+ */
+const measurePathOrigin = el => {
+  const natural = centerOf(el);
+  el.style.offsetPath = 'path("M 0,0 L 1,0")';
+  el.style.offsetDistance = '0%';
+  el.style.offsetAnchor = '50% 50%';
+  el.style.offsetRotate = '0deg';
+  const origin = centerOf(el);
+  el.style.offsetPath = '';
+  el.style.offsetDistance = '';
+  el.style.offsetAnchor = '';
+  el.style.offsetRotate = '';
+  return {
+    x: origin.x - natural.x,
+    y: origin.y - natural.y
+  };
+};
+export const useDotAnimation = (moveToPosition, setAvatarHidden, triggerAvatarAnimationState, mode) => {
   const leadDotRef = useRef(null);
   const trailRefs = useRef([]);
   const isMountedRef = useRef(true);
-  const animateDotsAlongPath = async function (start, end, options) {
+  const travelRunRef = useRef(0);
+  const isCurrentTravel = run => isMountedRef.current && run === travelRunRef.current;
+
+  /**
+   * Resolves `false` when a newer travel interrupted this one. The dots fade
+   * out on the compositor when they arrive, so a busy main thread doesn't
+   * leave them sitting at the end of the path.
+   */
+  const animateDotsAlongPath = async function (run, start, end, options) {
     if (options === void 0) {
       options = {};
     }
     if (!isMountedRef.current) {
-      return;
+      return true;
     }
     const lead = leadDotRef.current;
     if (!lead) {
-      return;
+      return true;
     }
     if (!options.skipShrink) {
       try {
         triggerAvatarAnimationState(AvatarState.SMALL);
       } catch {}
     }
-    trailRefs.current.forEach((d, i) => {
-      if (!d) {
-        return;
-      }
+    [lead, ...trailRefs.current].forEach(d => d == null ? void 0 : d.getAnimations().forEach(animation => animation.cancel()));
+    const trailStyles = trailRefs.current.map((d, i) => {
       const ratio = (i + 1) / ANIMATION_CONFIG.TRAIL_COUNT;
-      const scale = ANIMATION_CONFIG.TRAIL_MIN_SCALE + (1 - ANIMATION_CONFIG.TRAIL_MIN_SCALE) * (1 - ratio);
       const opacity = ANIMATION_CONFIG.TRAIL_FADE + (1 - ANIMATION_CONFIG.TRAIL_FADE) * (1 - ratio);
-      d.style.opacity = String(opacity);
-      d.style.transform = `scale(${scale})`;
+      if (d) {
+        d.style.opacity = String(opacity);
+      }
+      return {
+        opacity,
+        scale: ANIMATION_CONFIG.TRAIL_MIN_SCALE + (1 - ANIMATION_CONFIG.TRAIL_MIN_SCALE) * (1 - ratio)
+      };
     });
+    const leadStartColor = mode === 'dark' ? ANIMATION_CONFIG.DOT_COLOR : '#000000';
     lead.style.opacity = '1';
-    lead.style.background = '#000000';
+    lead.style.background = leadStartColor;
     lead.animate([{
-      background: '#000000'
+      background: leadStartColor
     }, {
       background: ANIMATION_CONFIG.DOT_COLOR
     }], {
@@ -43,45 +86,60 @@ export const useDotAnimation = (moveToPosition, setAvatarHidden, triggerAvatarAn
       easing: 'ease-out',
       fill: 'forwards'
     });
-    const pathD = buildPathD(start, end);
-    const prepDot = el => {
-      if (!el) {
-        return;
+    const origin = measurePathOrigin(lead);
+    const points = samplePathByLength(buildPathControlPoints(start, end), PATH_SAMPLES);
+    const pathFrames = function (scale) {
+      if (scale === void 0) {
+        scale = 1;
       }
-      setMotionPath(el, pathD);
-      setOffsetDistance(el, '0%');
-      setOffsetRotate(el, '0deg');
-      setOffsetAnchor(el, '50% 50%');
+      return points.map(_ref => {
+        let x = _ref.x,
+          y = _ref.y;
+        return {
+          transform: `translate3d(${x + origin.x}px, ${y + origin.y}px, 0) scale(${scale})`
+        };
+      });
     };
-    prepDot(lead);
-    trailRefs.current.forEach(td => td && prepDot(td));
-    const leadAnim = lead.animate([{
-      offsetDistance: '0%'
+    // Once faded, the inline opacity follows, so the next travel's opacity
+    // change runs the dots' CSS fade-in from 0.
+    const fadeOut = (el, opacity) => el.animate([{
+      opacity
     }, {
-      offsetDistance: '100%'
+      opacity: 0
     }], {
+      delay: TIMING.TRAVEL_DURATION,
+      duration: DOT_FADE_OUT_DURATION,
+      easing: 'ease-in-out',
+      fill: 'forwards'
+    }).finished.then(() => {
+      if (run === travelRunRef.current) {
+        el.style.opacity = '0';
+      }
+    }, () => {});
+    const leadAnim = lead.animate(pathFrames(), {
       duration: TIMING.TRAVEL_DURATION,
       easing: ANIMATION_CONFIG.EASING,
-      fill: 'forwards'
+      fill: 'both'
     });
+    fadeOut(lead, 1);
     trailRefs.current.forEach((td, i) => {
       if (!td) {
         return;
       }
-      td.animate([{
-        offsetDistance: '0%'
-      }, {
-        offsetDistance: '100%'
-      }], {
+      td.animate(pathFrames(trailStyles[i].scale), {
         duration: TIMING.TRAVEL_DURATION,
         delay: (i + 1) * ANIMATION_CONFIG.TRAIL_STAGGER,
         easing: ANIMATION_CONFIG.EASING,
-        fill: 'forwards'
+        fill: 'both'
       });
+      fadeOut(td, trailStyles[i].opacity);
     });
-    await leadAnim.finished;
-    lead.style.opacity = '0';
-    trailRefs.current.forEach(td => td && (td.style.opacity = '0'));
+    try {
+      await leadAnim.finished;
+    } catch {
+      return false;
+    }
+    return run === travelRunRef.current;
   };
   const hideDots = () => {
     const lead = leadDotRef.current;
@@ -103,15 +161,18 @@ export const useDotAnimation = (moveToPosition, setAvatarHidden, triggerAvatarAn
       console.log('[Astro] Invalid position, skipping animation');
       return;
     }
+    const run = ++travelRunRef.current;
     const home = {
       x: 0,
       y: 0
     };
-    await animateDotsAlongPath(currentPosition, home, options);
+    if (!(await animateDotsAlongPath(run, currentPosition, home, options))) {
+      return;
+    }
     moveToPosition(home);
     setAvatarHidden(false);
     await waitForNextFrame();
-    if (isMountedRef.current) {
+    if (isCurrentTravel(run)) {
       if (options.endState) {
         await triggerAvatarAnimationState(options.endState);
       } else {
@@ -127,14 +188,17 @@ export const useDotAnimation = (moveToPosition, setAvatarHidden, triggerAvatarAn
       console.log('[Astro] Invalid position, skipping animation');
       return;
     }
+    const run = ++travelRunRef.current;
     setAvatarHidden(true);
     await waitForNextFrame();
+    if (!isCurrentTravel(run)) {
+      return;
+    }
     const home = {
       x: 0,
       y: 0
     };
-    await animateDotsAlongPath(home, targetPosition, options);
-    hideDots();
+    await animateDotsAlongPath(run, home, targetPosition, options);
   };
   useEffect(() => {
     return () => {

package/dist/esm/Astro/hooks/useDotAnimation.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","ANIMATION_CONFIG","TIMING","buildPathD","setMotionPath","setOffsetDistance","setOffsetRotate","setOffsetAnchor","AvatarState","useDotAnimation","moveToPosition","setAvatarHidden","triggerAvatarAnimationState","leadDotRef","trailRefs","isMountedRef","animateDotsAlongPath","start","end","options","current","lead","skipShrink","SMALL","forEach","d","i","ratio","TRAIL_COUNT","scale","TRAIL_MIN_SCALE","opacity","TRAIL_FADE","style","String","transform","background","animate","DOT_COLOR","duration","DOT_FADE_DURATION","easing","fill","pathD","prepDot","el","td","leadAnim","offsetDistance","TRAVEL_DURATION","EASING","delay","TRAIL_STAGGER","finished","hideDots","waitForNextFrame","Promise","r","requestAnimationFrame","moveFromOffsetWithDots","currentPosition","x","y","console","log","home","endState","IDLE","moveToOffsetWithDots","targetPosition"],"sources":["../../../../src/Astro/hooks/useDotAnimation.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport type { Position, MoveOptions } from '../types';\nimport { ANIMATION_CONFIG, TIMING } from '../config';\nimport {\n  buildPathD,\n  setMotionPath,\n  setOffsetDistance,\n  setOffsetRotate,\n  setOffsetAnchor,\n} from '../utils';\nimport { AvatarState } from '@wix/aria-ai-avatar';\n\nexport const useDotAnimation = (\n  moveToPosition: (position: Position) => void,\n  setAvatarHidden: (hidden: boolean) => void,\n  triggerAvatarAnimationState: (state: AvatarState) => void,\n) => {\n  const leadDotRef = useRef<HTMLDivElement | null>(null);\n  const trailRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const isMountedRef = useRef(true);\n\n  const animateDotsAlongPath = async (\n    start: Position,\n    end: Position,\n    options: MoveOptions = {},\n  ): Promise<void> => {\n    if (!isMountedRef.current) {\n      return;\n    }\n\n    const lead = leadDotRef.current;\n    if (!lead) {\n      return;\n    }\n\n    if (!options.skipShrink) {\n      try {\n        triggerAvatarAnimationState(AvatarState.SMALL);\n      } catch {}\n    }\n\n    trailRefs.current.forEach((d, i) => {\n      if (!d) {\n        return;\n      }\n      const ratio = (i + 1) / ANIMATION_CONFIG.TRAIL_COUNT;\n      const scale =\n        ANIMATION_CONFIG.TRAIL_MIN_SCALE +\n        (1 - ANIMATION_CONFIG.TRAIL_MIN_SCALE) * (1 - ratio);\n      const opacity =\n        ANIMATION_CONFIG.TRAIL_FADE +\n        (1 - ANIMATION_CONFIG.TRAIL_FADE) * (1 - ratio);\n      d.style.opacity = String(opacity);\n      d.style.transform = `scale(${scale})`;\n    });\n\n    lead.style.opacity = '1';\n    lead.style.background = '#000000';\n\n    lead.animate(\n      [{ background: '#000000' }, { background: ANIMATION_CONFIG.DOT_COLOR }],\n      {\n        duration: TIMING.DOT_FADE_DURATION,\n        easing: 'ease-out',\n        fill: 'forwards',\n      },\n    );\n\n    const pathD = buildPathD(start, end);\n\n    const prepDot = (el: HTMLElement) => {\n      if (!el) {\n        return;\n      }\n      setMotionPath(el, pathD);\n      setOffsetDistance(el, '0%');\n      setOffsetRotate(el, '0deg');\n      setOffsetAnchor(el, '50% 50%');\n    };\n\n    prepDot(lead);\n\n    trailRefs.current.forEach((td) => td && prepDot(td));\n\n    const leadAnim = lead.animate(\n      [{ offsetDistance: '0%' }, { offsetDistance: '100%' }],\n      {\n        duration: TIMING.TRAVEL_DURATION,\n        easing: ANIMATION_CONFIG.EASING,\n        fill: 'forwards',\n      },\n    );\n\n    trailRefs.current.forEach((td, i) => {\n      if (!td) {\n        return;\n      }\n      td.animate([{ offsetDistance: '0%' }, { offsetDistance: '100%' }], {\n        duration: TIMING.TRAVEL_DURATION,\n        delay: (i + 1) * ANIMATION_CONFIG.TRAIL_STAGGER,\n        easing: ANIMATION_CONFIG.EASING,\n        fill: 'forwards',\n      });\n    });\n\n    await leadAnim.finished;\n\n    lead.style.opacity = '0';\n    trailRefs.current.forEach((td) => td && (td.style.opacity = '0'));\n  };\n\n  const hideDots = () => {\n    const lead = leadDotRef.current;\n    if (lead) {\n      lead.style.opacity = '0';\n    }\n    trailRefs.current.forEach((td) => {\n      if (td) {\n        td.style.opacity = '0';\n      }\n    });\n  };\n\n  const waitForNextFrame = () =>\n    new Promise<void>((r) => requestAnimationFrame(() => r()));\n\n  const moveFromOffsetWithDots = async (\n    currentPosition: Position,\n    options: MoveOptions = {},\n  ): Promise<void> => {\n    if (\n      typeof currentPosition.x !== 'number' ||\n      typeof currentPosition.y !== 'number'\n    ) {\n      console.log('[Astro] Invalid position, skipping animation');\n      return;\n    }\n\n    const home = { x: 0, y: 0 };\n    await animateDotsAlongPath(currentPosition, home, options);\n\n    moveToPosition(home);\n    setAvatarHidden(false);\n\n    await waitForNextFrame();\n\n    if (isMountedRef.current) {\n      if (options.endState) {\n        await triggerAvatarAnimationState(options.endState);\n      } else {\n        await triggerAvatarAnimationState(AvatarState.IDLE);\n      }\n    }\n  };\n\n  const moveToOffsetWithDots = async (\n    targetPosition: Position,\n    options: MoveOptions = {},\n  ): Promise<void> => {\n    if (\n      typeof targetPosition.x !== 'number' ||\n      typeof targetPosition.y !== 'number'\n    ) {\n      console.log('[Astro] Invalid position, skipping animation');\n      return;\n    }\n\n    setAvatarHidden(true);\n    await waitForNextFrame();\n\n    const home = { x: 0, y: 0 };\n    await animateDotsAlongPath(home, targetPosition, options);\n\n    hideDots();\n  };\n\n  useEffect(() => {\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  return {\n    leadDotRef,\n    trailRefs,\n    moveFromOffsetWithDots,\n    moveToOffsetWithDots,\n    hideDots,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useRef","useEffect","ANIMATION_CONFIG","TIMING","buildPathControlPoints","samplePathByLength","AvatarState","PATH_SAMPLES","DOT_FADE_OUT_DURATION","centerOf","el","rect","getBoundingClientRect","x","left","width","y","top","height","measurePathOrigin","natural","style","offsetPath","offsetDistance","offsetAnchor","offsetRotate","origin","useDotAnimation","moveToPosition","setAvatarHidden","triggerAvatarAnimationState","mode","leadDotRef","trailRefs","isMountedRef","travelRunRef","isCurrentTravel","run","current","animateDotsAlongPath","start","end","options","lead","skipShrink","SMALL","forEach","d","getAnimations","animation","cancel","trailStyles","map","i","ratio","TRAIL_COUNT","opacity","TRAIL_FADE","String","scale","TRAIL_MIN_SCALE","leadStartColor","DOT_COLOR","background","animate","duration","DOT_FADE_DURATION","easing","fill","points","pathFrames","_ref","transform","fadeOut","delay","TRAVEL_DURATION","finished","then","leadAnim","EASING","td","TRAIL_STAGGER","hideDots","waitForNextFrame","Promise","r","requestAnimationFrame","moveFromOffsetWithDots","currentPosition","console","log","home","endState","IDLE","moveToOffsetWithDots","targetPosition"],"sources":["../../../../src/Astro/hooks/useDotAnimation.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport type { Position, MoveOptions } from '../types';\nimport { ANIMATION_CONFIG, TIMING } from '../config';\nimport { buildPathControlPoints, samplePathByLength } from '../utils';\nimport { AvatarState } from '@wix/aria-ai-avatar';\n\nconst PATH_SAMPLES = 48;\n// Matches the dots' opacity transition in Astro.module.css.\nconst DOT_FADE_OUT_DURATION = 150;\n\nconst centerOf = (el: HTMLElement) => {\n  const rect = el.getBoundingClientRect();\n  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };\n};\n\n/**\n * Where path coordinate (0, 0) lies relative to the dot's own center, i.e.\n * the translation that puts the dot where `offset-path` with a centered\n * `offset-anchor` would.\n */\nconst measurePathOrigin = (el: HTMLElement): Position => {\n  const natural = centerOf(el);\n  el.style.offsetPath = 'path(\"M 0,0 L 1,0\")';\n  el.style.offsetDistance = '0%';\n  (el.style as any).offsetAnchor = '50% 50%';\n  el.style.offsetRotate = '0deg';\n  const origin = centerOf(el);\n  el.style.offsetPath = '';\n  el.style.offsetDistance = '';\n  (el.style as any).offsetAnchor = '';\n  el.style.offsetRotate = '';\n  return { x: origin.x - natural.x, y: origin.y - natural.y };\n};\n\nexport const useDotAnimation = (\n  moveToPosition: (position: Position) => void,\n  setAvatarHidden: (hidden: boolean) => void,\n  triggerAvatarAnimationState: (state: AvatarState) => void,\n  mode?: 'light' | 'dark',\n) => {\n  const leadDotRef = useRef<HTMLDivElement | null>(null);\n  const trailRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const isMountedRef = useRef(true);\n  const travelRunRef = useRef(0);\n\n  const isCurrentTravel = (run: number) =>\n    isMountedRef.current && run === travelRunRef.current;\n\n  /**\n   * Resolves `false` when a newer travel interrupted this one. The dots fade\n   * out on the compositor when they arrive, so a busy main thread doesn't\n   * leave them sitting at the end of the path.\n   */\n  const animateDotsAlongPath = async (\n    run: number,\n    start: Position,\n    end: Position,\n    options: MoveOptions = {},\n  ): Promise<boolean> => {\n    if (!isMountedRef.current) {\n      return true;\n    }\n\n    const lead = leadDotRef.current;\n    if (!lead) {\n      return true;\n    }\n\n    if (!options.skipShrink) {\n      try {\n        triggerAvatarAnimationState(AvatarState.SMALL);\n      } catch {}\n    }\n\n    [lead, ...trailRefs.current].forEach((d) =>\n      d?.getAnimations().forEach((animation) => animation.cancel()),\n    );\n\n    const trailStyles = trailRefs.current.map((d, i) => {\n      const ratio = (i + 1) / ANIMATION_CONFIG.TRAIL_COUNT;\n      const opacity =\n        ANIMATION_CONFIG.TRAIL_FADE +\n        (1 - ANIMATION_CONFIG.TRAIL_FADE) * (1 - ratio);\n      if (d) {\n        d.style.opacity = String(opacity);\n      }\n      return {\n        opacity,\n        scale:\n          ANIMATION_CONFIG.TRAIL_MIN_SCALE +\n          (1 - ANIMATION_CONFIG.TRAIL_MIN_SCALE) * (1 - ratio),\n      };\n    });\n\n    const leadStartColor =\n      mode === 'dark' ? ANIMATION_CONFIG.DOT_COLOR : '#000000';\n\n    lead.style.opacity = '1';\n    lead.style.background = leadStartColor;\n\n    lead.animate(\n      [\n        { background: leadStartColor },\n        { background: ANIMATION_CONFIG.DOT_COLOR },\n      ],\n      {\n        duration: TIMING.DOT_FADE_DURATION,\n        easing: 'ease-out',\n        fill: 'forwards',\n      },\n    );\n\n    const origin = measurePathOrigin(lead);\n    const points = samplePathByLength(\n      buildPathControlPoints(start, end),\n      PATH_SAMPLES,\n    );\n    const pathFrames = (scale = 1): Keyframe[] =>\n      points.map(({ x, y }) => ({\n        transform: `translate3d(${x + origin.x}px, ${\n          y + origin.y\n        }px, 0) scale(${scale})`,\n      }));\n    // Once faded, the inline opacity follows, so the next travel's opacity\n    // change runs the dots' CSS fade-in from 0.\n    const fadeOut = (el: HTMLElement, opacity: number) =>\n      el\n        .animate([{ opacity }, { opacity: 0 }], {\n          delay: TIMING.TRAVEL_DURATION,\n          duration: DOT_FADE_OUT_DURATION,\n          easing: 'ease-in-out',\n          fill: 'forwards',\n        })\n        .finished.then(\n          () => {\n            if (run === travelRunRef.current) {\n              el.style.opacity = '0';\n            }\n          },\n          () => {},\n        );\n\n    const leadAnim = lead.animate(pathFrames(), {\n      duration: TIMING.TRAVEL_DURATION,\n      easing: ANIMATION_CONFIG.EASING,\n      fill: 'both',\n    });\n    fadeOut(lead, 1);\n\n    trailRefs.current.forEach((td, i) => {\n      if (!td) {\n        return;\n      }\n      td.animate(pathFrames(trailStyles[i].scale), {\n        duration: TIMING.TRAVEL_DURATION,\n        delay: (i + 1) * ANIMATION_CONFIG.TRAIL_STAGGER,\n        easing: ANIMATION_CONFIG.EASING,\n        fill: 'both',\n      });\n      fadeOut(td, trailStyles[i].opacity);\n    });\n\n    try {\n      await leadAnim.finished;\n    } catch {\n      return false;\n    }\n    return run === travelRunRef.current;\n  };\n\n  const hideDots = () => {\n    const lead = leadDotRef.current;\n    if (lead) {\n      lead.style.opacity = '0';\n    }\n    trailRefs.current.forEach((td) => {\n      if (td) {\n        td.style.opacity = '0';\n      }\n    });\n  };\n\n  const waitForNextFrame = () =>\n    new Promise<void>((r) => requestAnimationFrame(() => r()));\n\n  const moveFromOffsetWithDots = async (\n    currentPosition: Position,\n    options: MoveOptions = {},\n  ): Promise<void> => {\n    if (\n      typeof currentPosition.x !== 'number' ||\n      typeof currentPosition.y !== 'number'\n    ) {\n      console.log('[Astro] Invalid position, skipping animation');\n      return;\n    }\n\n    const run = ++travelRunRef.current;\n    const home = { x: 0, y: 0 };\n\n    if (!(await animateDotsAlongPath(run, currentPosition, home, options))) {\n      return;\n    }\n\n    moveToPosition(home);\n    setAvatarHidden(false);\n\n    await waitForNextFrame();\n\n    if (isCurrentTravel(run)) {\n      if (options.endState) {\n        await triggerAvatarAnimationState(options.endState);\n      } else {\n        await triggerAvatarAnimationState(AvatarState.IDLE);\n      }\n    }\n  };\n\n  const moveToOffsetWithDots = async (\n    targetPosition: Position,\n    options: MoveOptions = {},\n  ): Promise<void> => {\n    if (\n      typeof targetPosition.x !== 'number' ||\n      typeof targetPosition.y !== 'number'\n    ) {\n      console.log('[Astro] Invalid position, skipping animation');\n      return;\n    }\n\n    const run = ++travelRunRef.current;\n    setAvatarHidden(true);\n    await waitForNextFrame();\n\n    if (!isCurrentTravel(run)) {\n      return;\n    }\n\n    const home = { x: 0, y: 0 };\n    await animateDotsAlongPath(run, home, targetPosition, options);\n  };\n\n  useEffect(() => {\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  return {\n    leadDotRef,\n    trailRefs,\n    moveFromOffsetWithDots,\n    moveToOffsetWithDots,\n    hideDots,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Astro/utils/pathGeneration.js

@@ -1,16 +1,85 @@
 import { ANIMATION_CONFIG } from '../config';
-export const buildPathD = (start, end) => {
+export const buildPathControlPoints = (start, end) => {
   const dx = end.x - start.x;
   const dy = end.y - start.y;
   const len = Math.max(1, Math.hypot(dx, dy));
   const nx = -dy / len;
   const ny = dx / len;
   const sway = ANIMATION_CONFIG.SWAY_AMOUNT * (0.85 + Math.random() * 0.3);
-  const c1x = start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_1 + nx * sway;
-  const c1y = start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_1 + ny * sway;
-  const c2x = start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_2 - nx * (sway * 0.65);
-  const c2y = start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_2 - ny * (sway * 0.65);
-  return `M ${start.x},${start.y} C ${c1x},${c1y} ${c2x},${c2y} ${end.x},${end.y}`;
+  return {
+    start,
+    c1: {
+      x: start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_1 + nx * sway,
+      y: start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_1 + ny * sway
+    },
+    c2: {
+      x: start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_2 - nx * (sway * 0.65),
+      y: start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_2 - ny * (sway * 0.65)
+    },
+    end
+  };
+};
+export const buildPathD = (start, end) => {
+  const _buildPathControlPoin = buildPathControlPoints(start, end),
+    c1 = _buildPathControlPoin.c1,
+    c2 = _buildPathControlPoin.c2;
+  return `M ${start.x},${start.y} C ${c1.x},${c1.y} ${c2.x},${c2.y} ${end.x},${end.y}`;
+};
+const pointOnCubic = (_ref, t) => {
+  let start = _ref.start,
+    c1 = _ref.c1,
+    c2 = _ref.c2,
+    end = _ref.end;
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const c = 3 * u * t * t;
+  const d = t * t * t;
+  return {
+    x: a * start.x + b * c1.x + c * c2.x + d * end.x,
+    y: a * start.y + b * c1.y + c * c2.y + d * end.y
+  };
+};
+
+/**
+ * Points evenly spaced by arc length, so a linear keyframe interpolation
+ * between them moves like `offset-distance` does along the same path.
+ */
+export const samplePathByLength = (path, count) => {
+  const STEPS = 200;
+  const lut = [];
+  let length = 0;
+  let prev = pointOnCubic(path, 0);
+  lut.push({
+    point: prev,
+    length: 0
+  });
+  for (let i = 1; i <= STEPS; i++) {
+    const point = pointOnCubic(path, i / STEPS);
+    length += Math.hypot(point.x - prev.x, point.y - prev.y);
+    lut.push({
+      point,
+      length
+    });
+    prev = point;
+  }
+  const points = [];
+  let j = 1;
+  for (let i = 0; i < count; i++) {
+    const target = length * i / (count - 1);
+    while (j < lut.length - 1 && lut[j].length < target) {
+      j++;
+    }
+    const from = lut[j - 1];
+    const to = lut[j];
+    const span = to.length - from.length || 1;
+    const k = Math.min(1, Math.max(0, (target - from.length) / span));
+    points.push({
+      x: from.point.x + (to.point.x - from.point.x) * k,
+      y: from.point.y + (to.point.y - from.point.y) * k
+    });
+  }
+  return points;
 };
 export const setMotionPath = (el, pathD) => {
   el.style.offsetPath = `path("${pathD}")`;

package/dist/esm/Astro/utils/pathGeneration.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_CONFIG","buildPathD","start","end","dx","x","dy","y","len","Math","max","hypot","nx","ny","sway","SWAY_AMOUNT","random","c1x","CONTROL_POINT_1","c1y","c2x","CONTROL_POINT_2","c2y","setMotionPath","el","pathD","style","offsetPath","setOffsetDistance","value","offsetDistance","setOffsetRotate","offsetRotate","setOffsetAnchor","offsetAnchor"],"sources":["../../../../src/Astro/utils/pathGeneration.ts"],"sourcesContent":["import type { Position } from '../types';\nimport { ANIMATION_CONFIG } from '../config';\n\nexport const buildPathD = (start: Position, end: Position): string => {\n  const dx = end.x - start.x;\n  const dy = end.y - start.y;\n  const len = Math.max(1, Math.hypot(dx, dy));\n  const nx = -dy / len;\n  const ny = dx / len;\n\n  const sway = ANIMATION_CONFIG.SWAY_AMOUNT * (0.85 + Math.random() * 0.3);\n\n  const c1x = start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_1 + nx * sway;\n  const c1y = start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_1 + ny * sway;\n  const c2x =\n    start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_2 - nx * (sway * 0.65);\n  const c2y =\n    start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_2 - ny * (sway * 0.65);\n\n  return `M ${start.x},${start.y} C ${c1x},${c1y} ${c2x},${c2y} ${end.x},${end.y}`;\n};\n\nexport const setMotionPath = (el: HTMLElement, pathD: string): void => {\n  el.style.offsetPath = `path(\"${pathD}\")`;\n};\n\nexport const setOffsetDistance = (el: HTMLElement, value: string): void => {\n  el.style.offsetDistance = value;\n};\n\nexport const setOffsetRotate = (el: HTMLElement, value: string): void => {\n  el.style.offsetRotate = value;\n};\n\nexport const setOffsetAnchor = (el: HTMLElement, value: string): void => {\n  (el.style as any).offsetAnchor = value;\n};\n"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,WAAW;AAE5C,OAAO,MAAMC,UAAU,GAAGA,CAACC,KAAe,EAAEC,GAAa,KAAa;EACpE,MAAMC,EAAE,GAAGD,GAAG,CAACE,CAAC,GAAGH,KAAK,CAACG,CAAC;EAC1B,MAAMC,EAAE,GAAGH,GAAG,CAACI,CAAC,GAAGL,KAAK,CAACK,CAAC;EAC1B,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACP,EAAE,EAAEE,EAAE,CAAC,CAAC;EAC3C,MAAMM,EAAE,GAAG,CAACN,EAAE,GAAGE,GAAG;EACpB,MAAMK,EAAE,GAAGT,EAAE,GAAGI,GAAG;EAEnB,MAAMM,IAAI,GAAGd,gBAAgB,CAACe,WAAW,IAAI,IAAI,GAAGN,IAAI,CAACO,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;EAExE,MAAMC,GAAG,GAAGf,KAAK,CAACG,CAAC,GAAGD,EAAE,GAAGJ,gBAAgB,CAACkB,eAAe,GAAGN,EAAE,GAAGE,IAAI;EACvE,MAAMK,GAAG,GAAGjB,KAAK,CAACK,CAAC,GAAGD,EAAE,GAAGN,gBAAgB,CAACkB,eAAe,GAAGL,EAAE,GAAGC,IAAI;EACvE,MAAMM,GAAG,GACPlB,KAAK,CAACG,CAAC,GAAGD,EAAE,GAAGJ,gBAAgB,CAACqB,eAAe,GAAGT,EAAE,IAAIE,IAAI,GAAG,IAAI,CAAC;EACtE,MAAMQ,GAAG,GACPpB,KAAK,CAACK,CAAC,GAAGD,EAAE,GAAGN,gBAAgB,CAACqB,eAAe,GAAGR,EAAE,IAAIC,IAAI,GAAG,IAAI,CAAC;EAEtE,OAAO,KAAKZ,KAAK,CAACG,CAAC,IAAIH,KAAK,CAACK,CAAC,MAAMU,GAAG,IAAIE,GAAG,IAAIC,GAAG,IAAIE,GAAG,IAAInB,GAAG,CAACE,CAAC,IAAIF,GAAG,CAACI,CAAC,EAAE;AAClF,CAAC;AAED,OAAO,MAAMgB,aAAa,GAAGA,CAACC,EAAe,EAAEC,KAAa,KAAW;EACrED,EAAE,CAACE,KAAK,CAACC,UAAU,GAAG,SAASF,KAAK,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMG,iBAAiB,GAAGA,CAACJ,EAAe,EAAEK,KAAa,KAAW;EACzEL,EAAE,CAACE,KAAK,CAACI,cAAc,GAAGD,KAAK;AACjC,CAAC;AAED,OAAO,MAAME,eAAe,GAAGA,CAACP,EAAe,EAAEK,KAAa,KAAW;EACvEL,EAAE,CAACE,KAAK,CAACM,YAAY,GAAGH,KAAK;AAC/B,CAAC;AAED,OAAO,MAAMI,eAAe,GAAGA,CAACT,EAAe,EAAEK,KAAa,KAAW;EACtEL,EAAE,CAACE,KAAK,CAASQ,YAAY,GAAGL,KAAK;AACxC,CAAC","ignoreList":[]}
+{"version":3,"names":["ANIMATION_CONFIG","buildPathControlPoints","start","end","dx","x","dy","y","len","Math","max","hypot","nx","ny","sway","SWAY_AMOUNT","random","c1","CONTROL_POINT_1","c2","CONTROL_POINT_2","buildPathD","_buildPathControlPoin","pointOnCubic","_ref","t","u","a","b","c","d","samplePathByLength","path","count","STEPS","lut","length","prev","push","point","i","points","j","target","from","to","span","k","min","setMotionPath","el","pathD","style","offsetPath","setOffsetDistance","value","offsetDistance","setOffsetRotate","offsetRotate","setOffsetAnchor","offsetAnchor"],"sources":["../../../../src/Astro/utils/pathGeneration.ts"],"sourcesContent":["import type { Position } from '../types';\nimport { ANIMATION_CONFIG } from '../config';\n\ntype CubicPath = { start: Position; c1: Position; c2: Position; end: Position };\n\nexport const buildPathControlPoints = (\n  start: Position,\n  end: Position,\n): CubicPath => {\n  const dx = end.x - start.x;\n  const dy = end.y - start.y;\n  const len = Math.max(1, Math.hypot(dx, dy));\n  const nx = -dy / len;\n  const ny = dx / len;\n\n  const sway = ANIMATION_CONFIG.SWAY_AMOUNT * (0.85 + Math.random() * 0.3);\n\n  return {\n    start,\n    c1: {\n      x: start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_1 + nx * sway,\n      y: start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_1 + ny * sway,\n    },\n    c2: {\n      x: start.x + dx * ANIMATION_CONFIG.CONTROL_POINT_2 - nx * (sway * 0.65),\n      y: start.y + dy * ANIMATION_CONFIG.CONTROL_POINT_2 - ny * (sway * 0.65),\n    },\n    end,\n  };\n};\n\nexport const buildPathD = (start: Position, end: Position): string => {\n  const { c1, c2 } = buildPathControlPoints(start, end);\n  return `M ${start.x},${start.y} C ${c1.x},${c1.y} ${c2.x},${c2.y} ${end.x},${end.y}`;\n};\n\nconst pointOnCubic = (\n  { start, c1, c2, end }: CubicPath,\n  t: number,\n): Position => {\n  const u = 1 - t;\n  const a = u * u * u;\n  const b = 3 * u * u * t;\n  const c = 3 * u * t * t;\n  const d = t * t * t;\n  return {\n    x: a * start.x + b * c1.x + c * c2.x + d * end.x,\n    y: a * start.y + b * c1.y + c * c2.y + d * end.y,\n  };\n};\n\n/**\n * Points evenly spaced by arc length, so a linear keyframe interpolation\n * between them moves like `offset-distance` does along the same path.\n */\nexport const samplePathByLength = (\n  path: CubicPath,\n  count: number,\n): Position[] => {\n  const STEPS = 200;\n  const lut: { point: Position; length: number }[] = [];\n  let length = 0;\n  let prev = pointOnCubic(path, 0);\n  lut.push({ point: prev, length: 0 });\n  for (let i = 1; i <= STEPS; i++) {\n    const point = pointOnCubic(path, i / STEPS);\n    length += Math.hypot(point.x - prev.x, point.y - prev.y);\n    lut.push({ point, length });\n    prev = point;\n  }\n\n  const points: Position[] = [];\n  let j = 1;\n  for (let i = 0; i < count; i++) {\n    const target = (length * i) / (count - 1);\n    while (j < lut.length - 1 && lut[j].length < target) {\n      j++;\n    }\n    const from = lut[j - 1];\n    const to = lut[j];\n    const span = to.length - from.length || 1;\n    const k = Math.min(1, Math.max(0, (target - from.length) / span));\n    points.push({\n      x: from.point.x + (to.point.x - from.point.x) * k,\n      y: from.point.y + (to.point.y - from.point.y) * k,\n    });\n  }\n  return points;\n};\n\nexport const setMotionPath = (el: HTMLElement, pathD: string): void => {\n  el.style.offsetPath = `path(\"${pathD}\")`;\n};\n\nexport const setOffsetDistance = (el: HTMLElement, value: string): void => {\n  el.style.offsetDistance = value;\n};\n\nexport const setOffsetRotate = (el: HTMLElement, value: string): void => {\n  el.style.offsetRotate = value;\n};\n\nexport const setOffsetAnchor = (el: HTMLElement, value: string): void => {\n  (el.style as any).offsetAnchor = value;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/types/Astro/Astro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Astro.d.ts","sourceRoot":"","sources":["../../../src/Astro/Astro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAe,MAAM,SAAS,CAAC;AAMjE,eAAO,MAAM,iBAAiB,6EA8K7B,CAAC"}
+{"version":3,"file":"Astro.d.ts","sourceRoot":"","sources":["../../../src/Astro/Astro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAe,MAAM,SAAS,CAAC;AASjE,eAAO,MAAM,iBAAiB,6EAyM7B,CAAC"}

package/dist/types/Astro/hooks/useDotAnimation.d.ts

@@ -1,6 +1,6 @@
 import type { Position, MoveOptions } from '../types';
 import { AvatarState } from '@wix/aria-ai-avatar';
-export declare const useDotAnimation: (moveToPosition: (position: Position) => void, setAvatarHidden: (hidden: boolean) => void, triggerAvatarAnimationState: (state: AvatarState) => void) => {
+export declare const useDotAnimation: (moveToPosition: (position: Position) => void, setAvatarHidden: (hidden: boolean) => void, triggerAvatarAnimationState: (state: AvatarState) => void, mode?: "light" | "dark") => {
     leadDotRef: import("react").MutableRefObject<HTMLDivElement | null>;
     trailRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     moveFromOffsetWithDots: (currentPosition: Position, options?: MoveOptions) => Promise<void>;

package/dist/types/Astro/hooks/useDotAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDotAnimation.d.ts","sourceRoot":"","sources":["../../../../src/Astro/hooks/useDotAnimation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAStD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,eAAO,MAAM,eAAe,GAC1B,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,EAC1C,6BAA6B,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI;;;8CAgHtC,QAAQ,YAChB,WAAW,KACnB,OAAO,CAAC,IAAI,CAAC;2CA2BE,QAAQ,YACf,WAAW,KACnB,OAAO,CAAC,IAAI,CAAC;;CA+BjB,CAAC"}
+{"version":3,"file":"useDotAnimation.d.ts","sourceRoot":"","sources":["../../../../src/Astro/hooks/useDotAnimation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA8BlD,eAAO,MAAM,eAAe,GAC1B,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,EAC1C,6BAA6B,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,EACzD,OAAO,OAAO,GAAG,MAAM;;;8CAoJJ,QAAQ,YAChB,WAAW,KACnB,OAAO,CAAC,IAAI,CAAC;2CA+BE,QAAQ,YACf,WAAW,KACnB,OAAO,CAAC,IAAI,CAAC;;CAkCjB,CAAC"}

package/dist/types/Astro/utils/pathGeneration.d.ts

@@ -1,7 +1,20 @@
 import type { Position } from '../types';
+type CubicPath = {
+    start: Position;
+    c1: Position;
+    c2: Position;
+    end: Position;
+};
+export declare const buildPathControlPoints: (start: Position, end: Position) => CubicPath;
 export declare const buildPathD: (start: Position, end: Position) => string;
+/**
+ * Points evenly spaced by arc length, so a linear keyframe interpolation
+ * between them moves like `offset-distance` does along the same path.
+ */
+export declare const samplePathByLength: (path: CubicPath, count: number) => Position[];
 export declare const setMotionPath: (el: HTMLElement, pathD: string) => void;
 export declare const setOffsetDistance: (el: HTMLElement, value: string) => void;
 export declare const setOffsetRotate: (el: HTMLElement, value: string) => void;
 export declare const setOffsetAnchor: (el: HTMLElement, value: string) => void;
+export {};
 //# sourceMappingURL=pathGeneration.d.ts.map

package/dist/types/Astro/utils/pathGeneration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pathGeneration.d.ts","sourceRoot":"","sources":["../../../../src/Astro/utils/pathGeneration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,eAAO,MAAM,UAAU,GAAI,OAAO,QAAQ,EAAE,KAAK,QAAQ,KAAG,MAiB3D,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAE9D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAElE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAEhE,CAAC"}
+{"version":3,"file":"pathGeneration.d.ts","sourceRoot":"","sources":["../../../../src/Astro/utils/pathGeneration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAA;CAAE,CAAC;AAEhF,eAAO,MAAM,sBAAsB,GACjC,OAAO,QAAQ,EACf,KAAK,QAAQ,KACZ,SAqBF,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,QAAQ,EAAE,KAAK,QAAQ,KAAG,MAG3D,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,SAAS,EACf,OAAO,MAAM,KACZ,QAAQ,EA8BV,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAE9D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAElE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,IAAI,WAAW,EAAE,OAAO,MAAM,KAAG,IAEhE,CAAC"}