@dotcraft/avatar 0.6.4 → 0.6.5

package/dist/composer/styles/idle.css

@@ -2,74 +2,84 @@
   opacity: 0;
 }
 
-.composer-mascot-active-idle .composer-mascot-motion {
+/* A trip heads `--mascot-idle-dir`; each leg moves along `--mascot-idle-travel-sign` (left is -1). */
+.composer-mascot-active-idle {
+  --mascot-idle-dir: -1;
+  --mascot-idle-travel-sign: -1;
+}
+
+.composer-mascot-active-idle[data-mascot-idle-direction='right'] {
+  --mascot-idle-dir: 1;
+}
+
+.composer-mascot-active-idle[data-mascot-idle-travel='right'] {
+  --mascot-idle-travel-sign: 1;
+}
+
+.composer-mascot-active-idle .composer-mascot-stage {
+  position: relative;
   top: 0;
   left: 0;
 }
 
-.composer-mascot-active-idle[data-mascot-idle-phase='away'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-idle-phase='away'] .composer-mascot-body {
   animation: none;
   transform: scale(1);
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='away'] .composer-mascot-motion,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion {
-  left: -210px;
+/* The stage parks at the far end in its own (possibly scaled) space while the travel layer rests at zero. */
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='away'] .composer-mascot-stage,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-stage {
+  left: calc(280px * var(--mascot-idle-stage-scale, 1) * var(--mascot-idle-dir, -1));
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='away'] .composer-mascot-motion,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion {
-  left: -220px;
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='away'] .composer-mascot-stage,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-stage {
+  left: calc(293.33px * var(--mascot-idle-stage-scale, 1) * var(--mascot-idle-dir, -1));
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-motion,
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-motion {
-  top: -96px;
-  left: -150px;
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-stage,
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-stage {
+  top: calc(-128px * var(--mascot-idle-stage-scale, 1));
+  left: calc(200px * var(--mascot-idle-stage-scale, 1) * var(--mascot-idle-dir, -1));
 }
 
-.composer-mascot-active-idle .composer-mascot-motion > div:first-child,
-.composer-mascot-active-idle .composer-mascot-motion > div:first-child > div:first-child,
-.composer-mascot-active-idle .composer-mascot-breathe {
+.composer-mascot-active-idle .composer-mascot-travel,
+.composer-mascot-active-idle .composer-mascot-lift,
+.composer-mascot-active-idle .composer-mascot-body {
   transform-origin: bottom center;
   will-change: transform;
 }
 
-.composer-mascot-active-idle .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle .composer-mascot-travel {
+  position: relative;
+}
+
+.composer-mascot-active-idle .composer-mascot-lift {
   position: relative;
   z-index: 1;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-travel,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-travel {
   --mascot-hop-compress-y: 0.82px;
   --mascot-hop-apex-y: -11.44px;
   --mascot-hop-fall-y: -2.86px;
   --mascot-hop-land-y: 0.41px;
+  --mascot-hop-distance: calc(280px * var(--mascot-idle-travel-sign, -1));
+  --mascot-hop-x-1: calc(70px * var(--mascot-idle-travel-sign, -1));
+  --mascot-hop-x-2: calc(140px * var(--mascot-idle-travel-sign, -1));
+  --mascot-hop-x-3: calc(210px * var(--mascot-idle-travel-sign, -1));
   animation: composer-mascot-idle-hop-travel 2.4s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hop-distance: -280px;
-  --mascot-hop-x-1: -70px;
-  --mascot-hop-x-2: -140px;
-  --mascot-hop-x-3: -210px;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hop-distance: 280px;
-  --mascot-hop-x-1: 70px;
-  --mascot-hop-x-2: 140px;
-  --mascot-hop-x-3: 210px;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-breathe,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-body,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-body {
   animation: composer-mascot-idle-hop-body 600ms linear 4;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'] .composer-mascot-motion > div:first-child::before,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-motion > div:first-child::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'] .composer-mascot-travel::before,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-travel::before {
   content: '';
   position: absolute;
   bottom: -1px;
@@ -85,8 +95,8 @@
   transform-origin: center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child::before,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-travel::before,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-travel::before {
   animation: composer-mascot-idle-hop-shadow 600ms ease-in-out 4;
 }
 
@@ -115,48 +125,40 @@
   90% { opacity: 0.76; transform: translateX(-50%) scaleX(1.12); }
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-travel,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-travel {
   --mascot-rocket-apex-y: -66.99px;
   --mascot-rocket-crouch-y: 1.23px;
   --mascot-rocket-air-y: -2.04px;
   --mascot-rocket-approach-y: -0.82px;
   --mascot-rocket-rebound-y: -1.23px;
+  --mascot-flight-distance: calc(293.33px * var(--mascot-idle-travel-sign, -1));
+  --mascot-rocket-tilt: calc(8deg * var(--mascot-idle-travel-sign, -1));
   animation: composer-mascot-idle-rocket-flight-x 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child {
-  --mascot-flight-distance: -293.33px;
-  --mascot-rocket-tilt: -8deg;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
-  --mascot-flight-distance: 293.33px;
-  --mascot-rocket-tilt: 8deg;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child > div:first-child,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-lift,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-lift {
   animation: composer-mascot-idle-rocket-flight-y 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-breathe,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-body,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-body {
   animation: composer-mascot-idle-rocket-body 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child::before,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child::before {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-travel::before,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-travel::before {
   animation: composer-mascot-idle-flight-shadow 1.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-jelly {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-trail {
   position: relative;
   isolation: isolate;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::before,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-trail::before,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-trail::before {
   content: '';
   position: absolute;
   top: 17px;
@@ -169,7 +171,8 @@
   animation: composer-mascot-idle-rocket-trail 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::before {
+/* The exhaust streams behind the leg's direction of travel. */
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-travel='left'] .composer-mascot-trail::before {
   left: calc(100% - 2px);
   background:
     linear-gradient(90deg, #f5f7fa, #8fa5ff 28%, transparent 100%) 0 1px / 34px 2px no-repeat,
@@ -178,7 +181,7 @@
   transform-origin: left center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-travel='right'] .composer-mascot-trail::before {
   right: calc(100% - 2px);
   background:
     linear-gradient(90deg, transparent 0%, #8fa5ff 72%, #f5f7fa 100%) 100% 1px / 34px 2px no-repeat,
@@ -224,77 +227,78 @@
   86%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1.12); }
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hover-x: -200px;
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-travel {
+  --mascot-hover-x: calc(200px * var(--mascot-idle-travel-sign, -1));
   --mascot-hover-y: -128px;
   animation: composer-mascot-idle-hover-rise-x 1.8s cubic-bezier(0.26, 0.55, 0.24, 1) forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-lift {
   animation: composer-mascot-idle-hover-rise-y 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-lift {
   animation: composer-mascot-idle-hover-float 2.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hover-x: 200px;
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-travel {
+  --mascot-hover-x: calc(200px * var(--mascot-idle-travel-sign, -1));
   --mascot-hover-y: 128px;
   animation: composer-mascot-idle-hover-return-x 1.8s cubic-bezier(0.38, 0.04, 0.34, 1) forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-lift {
   animation: composer-mascot-idle-hover-return-y 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-body {
   animation: composer-mascot-idle-hover-launch-body 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-body {
   animation: composer-mascot-idle-hover-hold-body 2.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-body {
   animation: composer-mascot-idle-hover-land-body 1.8s ease-in forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-jelly {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-trail {
   animation: composer-mascot-idle-hover-scan-body 2.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-jelly {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-trail {
   position: relative;
   isolation: isolate;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-trail::before {
   content: '';
   position: absolute;
   top: 16px;
-  left: 40px;
   z-index: 1;
   width: 58px;
   height: 32px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* The side jet fires against the leg's direction of travel. */
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-travel='left'] .composer-mascot-trail::before {
+  --mascot-idle-jet-tilt: 22deg;
+  left: 40px;
   background:
     linear-gradient(90deg, #f8fbff 0%, #9fb5ff 28%, transparent 94%) 0 3px / 42px 3px no-repeat,
     linear-gradient(90deg, #f8fbff 0%, #7894f8 26%, transparent 96%) 0 14px / 58px 3px no-repeat,
     linear-gradient(90deg, #dce6ff 0%, #6f8cf5 32%, transparent 94%) 0 25px / 34px 3px no-repeat;
   filter: drop-shadow(6px 3px 5px color-mix(in srgb, #6f8dff 54%, transparent));
-  opacity: 0;
-  pointer-events: none;
   transform: rotate(22deg) scaleX(0.18);
   transform-origin: left center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::before {
-  animation: composer-mascot-idle-hover-side-jet-launch 1.8s ease-out forwards;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-travel='right'] .composer-mascot-trail::before {
+  --mascot-idle-jet-tilt: -18deg;
   right: 40px;
-  left: auto;
   background:
     linear-gradient(90deg, transparent 6%, #9fb5ff 72%, #f8fbff 100%) 100% 3px / 42px 3px no-repeat,
     linear-gradient(90deg, transparent 4%, #7894f8 74%, #f8fbff 100%) 100% 14px / 58px 3px no-repeat,
@@ -302,10 +306,17 @@
   filter: drop-shadow(-5px 3px 5px color-mix(in srgb, #6f8dff 54%, transparent));
   transform: rotate(-18deg) scaleX(0.18);
   transform-origin: right center;
+}
+
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-trail::before {
+  animation: composer-mascot-idle-hover-side-jet-launch 1.8s ease-out forwards;
+}
+
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-trail::before {
   animation: composer-mascot-idle-hover-side-jet-return 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-trail::after {
   content: '';
   position: absolute;
   top: 46px;
@@ -327,15 +338,15 @@
   transform-origin: top center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-trail::after {
   animation: composer-mascot-idle-hover-bottom-handoff 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-trail::after {
   animation: composer-mascot-idle-hover-bottom-hold 360ms ease-in-out infinite;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-trail::after {
   animation: composer-mascot-idle-hover-bottom-return 1.8s linear forwards;
 }
 
@@ -373,9 +384,9 @@
 @keyframes composer-mascot-idle-hover-launch-body {
   0% { transform: translateY(0) scale(1); }
   10% { transform: translateY(2px) scale(1.12, 0.82); }
-  22% { transform: translateY(-3px) rotate(-8deg) scale(0.94, 1.09); }
-  72% { transform: translateY(-2px) rotate(-5deg) scale(0.98, 1.035); }
-  90% { transform: translateY(1px) rotate(-2deg) scale(1.02, 0.98); }
+  22% { transform: translateY(-3px) rotate(calc(8deg * var(--mascot-idle-travel-sign, -1))) scale(0.94, 1.09); }
+  72% { transform: translateY(-2px) rotate(calc(5deg * var(--mascot-idle-travel-sign, -1))) scale(0.98, 1.035); }
+  90% { transform: translateY(1px) rotate(calc(2deg * var(--mascot-idle-travel-sign, -1))) scale(1.02, 0.98); }
   100% { transform: translateY(0) rotate(0) scale(1); }
 }
 
@@ -387,8 +398,8 @@
 
 @keyframes composer-mascot-idle-hover-land-body {
   0% { transform: translateY(0) rotate(0) scale(1); }
-  18% { transform: translateY(-1px) rotate(5deg) scale(0.99, 1.02); }
-  66% { transform: translateY(-1px) rotate(3deg) scale(0.99, 1.02); }
+  18% { transform: translateY(-1px) rotate(calc(5deg * var(--mascot-idle-travel-sign, -1))) scale(0.99, 1.02); }
+  66% { transform: translateY(-1px) rotate(calc(3deg * var(--mascot-idle-travel-sign, -1))) scale(0.99, 1.02); }
   86% { transform: translateY(0) rotate(0) scale(1); }
   91% { transform: translateY(1px) rotate(0) scale(1.1, 0.88); }
   95% { transform: translateY(-1px) rotate(0) scale(0.99, 1.02); }
@@ -402,19 +413,19 @@
 }
 
 @keyframes composer-mascot-idle-hover-side-jet-launch {
-  0% { opacity: 0.34; transform: rotate(22deg) scaleX(0.34); }
-  12% { opacity: 0.94; transform: rotate(22deg) scaleX(1.08); }
-  68% { opacity: 0.76; transform: rotate(22deg) scaleX(0.84); }
-  84% { opacity: 0.42; transform: rotate(22deg) scaleX(0.48); }
-  100% { opacity: 0; transform: rotate(22deg) scaleX(0.12); }
+  0% { opacity: 0.34; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.34); }
+  12% { opacity: 0.94; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(1.08); }
+  68% { opacity: 0.76; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.84); }
+  84% { opacity: 0.42; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.48); }
+  100% { opacity: 0; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.12); }
 }
 
 @keyframes composer-mascot-idle-hover-side-jet-return {
-  0% { opacity: 0.28; transform: rotate(-18deg) scaleX(0.28); }
-  12% { opacity: 0.88; transform: rotate(-18deg) scaleX(0.92); }
-  52% { opacity: 0.66; transform: rotate(-18deg) scaleX(0.62); }
-  74% { opacity: 0.3; transform: rotate(-18deg) scaleX(0.34); }
-  86%, 100% { opacity: 0; transform: rotate(-18deg) scaleX(0.12); }
+  0% { opacity: 0.28; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.28); }
+  12% { opacity: 0.88; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.92); }
+  52% { opacity: 0.66; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.62); }
+  74% { opacity: 0.3; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.34); }
+  86%, 100% { opacity: 0; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.12); }
 }
 
 @keyframes composer-mascot-idle-hover-bottom-handoff {
@@ -430,9 +441,9 @@
 
 @keyframes composer-mascot-idle-hover-bottom-return {
   0% { opacity: 0.78; transform: translateX(-50%) rotate(0) scaleY(0.72); animation-timing-function: ease-in-out; }
-  24% { opacity: 0.68; transform: translateX(-50%) rotate(8deg) scaleY(0.58); }
-  58% { opacity: 0.44; transform: translateX(-50%) rotate(7deg) scaleY(0.38); }
-  78% { opacity: 0.86; transform: translateX(-50%) rotate(3deg) scaleY(0.84); }
+  24% { opacity: 0.68; transform: translateX(-50%) rotate(calc(8deg * var(--mascot-idle-travel-sign, -1))) scaleY(0.58); }
+  58% { opacity: 0.44; transform: translateX(-50%) rotate(calc(7deg * var(--mascot-idle-travel-sign, -1))) scaleY(0.38); }
+  78% { opacity: 0.86; transform: translateX(-50%) rotate(calc(3deg * var(--mascot-idle-travel-sign, -1))) scaleY(0.84); }
   91% { opacity: 0.98; transform: translateX(-50%) rotate(0) scaleY(1.04); }
   100% { opacity: 0; transform: translateX(-50%) rotate(0) scaleY(0.14); }
 }

package/dist/composer/useComposerAvatarBehavior.d.ts

@@ -11,6 +11,7 @@ interface ComposerAvatarBehaviorOptions {
     activeIdle: boolean;
     bounceSignal: number;
     reducedMotion: boolean;
+    directionalGestures?: boolean;
 }
 export declare function useComposerAvatarBehavior(options: ComposerAvatarBehaviorOptions): {
     pose: AvatarPose;

package/dist/composer/useComposerAvatarBehavior.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComposerAvatarBehavior.d.ts","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,CAAA;AAExF,UAAU,6BAA6B;IACrC,YAAY,EAAE,UAAU,CAAA;IACxB,cAAc,EAAE,gBAAgB,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,6BAA6B,GAAG;IACjF,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAA;IAC/D,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAA;IAC1C,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAuEA"}
+{"version":3,"file":"useComposerAvatarBehavior.d.ts","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,CAAA;AAExF,UAAU,6BAA6B;IACrC,YAAY,EAAE,UAAU,CAAA;IACxB,cAAc,EAAE,gBAAgB,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,6BAA6B,GAAG;IACjF,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAA;IAC/D,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAA;IAC1C,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAuEA"}

package/dist/composer/useComposerAvatarBehavior.js

@@ -36,7 +36,7 @@ export function useComposerAvatarBehavior(options) {
                             : value < 0.86
                                 ? 'antenna-bob'
                                 : undefined;
-                    if (next) {
+                    if (next && (options.directionalGestures !== false || (next !== 'look-left' && next !== 'look-right'))) {
                         setGesture(next);
                         setGestureSequence((sequence) => sequence + 1);
                     }
@@ -46,7 +46,7 @@ export function useComposerAvatarBehavior(options) {
         };
         schedule();
         return () => { window.clearTimeout(timer); };
-    }, [options.sleeping, options.activeIdle, options.reducedMotion, options.baseExpression]);
+    }, [options.sleeping, options.activeIdle, options.reducedMotion, options.baseExpression, options.directionalGestures]);
     const clearGesture = useCallback(() => setGesture(undefined), []);
     const completeGesture = useCallback((sequence) => {
         setGesture((current) => sequence === gestureSequence ? undefined : current);

package/dist/composer/useComposerAvatarBehavior.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComposerAvatarBehavior.js","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useComposerAvatarBehavior.js","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"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"}

package/dist/composer/useMascotActiveIdle.d.ts

@@ -0,0 +1,33 @@
+import { type AnimationEvent } from 'react';
+import { type MascotActiveIdle, type MascotActiveIdleMotion, type MascotActiveIdlePhase, type MascotActiveIdlePlan, type MascotIdleDirection } from './constants.js';
+export interface MascotActiveIdleAttributes {
+    'data-mascot-active-idle'?: MascotActiveIdleMotion;
+    'data-mascot-idle-phase'?: MascotActiveIdlePhase;
+    'data-mascot-idle-direction'?: MascotIdleDirection;
+    'data-mascot-idle-travel'?: MascotIdleDirection;
+}
+export interface MascotActiveIdleOptions {
+    /** True while the character is free to wander: idle, awake, unfocused, and motion allowed. */
+    enabled: boolean;
+    onStart?: () => void;
+    /** Runs on user activity, before the schedule-reset throttle. */
+    onActivity?: () => void;
+    /** Decides direction and motion pool at launch; `null` skips this round. */
+    plan?: () => MascotActiveIdlePlan | null;
+    /** Whether pointer movement aborts a trip in flight; it always defers the next one. */
+    interruptOnPointerMove?: boolean;
+}
+export interface MascotActiveIdleHandle {
+    activeIdle: MascotActiveIdle | null;
+    activityRevision: number;
+    className: 'composer-mascot-active-idle' | undefined;
+    attributes: MascotActiveIdleAttributes;
+    cancel: () => void;
+    onAnimationEnd: (event: AnimationEvent<Element>) => void;
+}
+/**
+ * Schedules the traveling idle antics (hop, rocket, hover) after a quiet stretch. Any host that
+ * renders the stage classes (see MascotIdleStage) can spread the returned attributes on its root.
+ */
+export declare function useMascotActiveIdle(options: MascotActiveIdleOptions): MascotActiveIdleHandle;
+//# sourceMappingURL=useMascotActiveIdle.d.ts.map

package/dist/composer/useMascotActiveIdle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMascotActiveIdle.d.ts","sourceRoot":"","sources":["../../src/composer/useMascotActiveIdle.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AACrF,OAAO,EAOL,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,gBAAgB,CAAA;AAEvB,MAAM,WAAW,0BAA0B;IACzC,yBAAyB,CAAC,EAAE,sBAAsB,CAAA;IAClD,wBAAwB,CAAC,EAAE,qBAAqB,CAAA;IAChD,4BAA4B,CAAC,EAAE,mBAAmB,CAAA;IAClD,yBAAyB,CAAC,EAAE,mBAAmB,CAAA;CAChD;AAED,MAAM,WAAW,uBAAuB;IACtC,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,oBAAoB,GAAG,IAAI,CAAA;IACxC,uFAAuF;IACvF,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACnC,gBAAgB,EAAE,MAAM,CAAA;IACxB,SAAS,EAAE,6BAA6B,GAAG,SAAS,CAAA;IACpD,UAAU,EAAE,0BAA0B,CAAA;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;CACzD;AAsBD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CAsG5F"}

package/dist/composer/useMascotActiveIdle.js

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS, MASCOT_ACTIVE_IDLE_HOLD_MS, MASCOT_ACTIVE_IDLE_JITTER_MS, MASCOT_ACTIVE_IDLE_MIN_MS, MASCOT_ACTIVE_IDLE_TRAVEL_MS, pickMascotActiveIdle } from './constants.js';
+const RETRY_MS = 5000;
+const LEG_SETTLE_MS = 160;
+function opposite(direction) {
+    return direction === 'left' ? 'right' : 'left';
+}
+function finisherOf(trip) {
+    if (trip.motion === 'hop')
+        return 'composer-mascot-idle-hop-travel';
+    if (trip.motion === 'rocket')
+        return 'composer-mascot-idle-rocket-flight-x';
+    return trip.phase === 'outbound' ? 'composer-mascot-idle-hover-launch-body' : 'composer-mascot-idle-hover-land-body';
+}
+function advance(trip) {
+    if (!trip)
+        return null;
+    if (trip.phase === 'outbound')
+        return { ...trip, phase: 'away' };
+    if (trip.phase === 'away')
+        return { ...trip, phase: 'inbound', travel: opposite(trip.direction) };
+    return null;
+}
+/**
+ * Schedules the traveling idle antics (hop, rocket, hover) after a quiet stretch. Any host that
+ * renders the stage classes (see MascotIdleStage) can spread the returned attributes on its root.
+ */
+export function useMascotActiveIdle(options) {
+    const { enabled, interruptOnPointerMove = true } = options;
+    const [activeIdle, setActiveIdle] = useState(null);
+    const [activityRevision, setActivityRevision] = useState(0);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const activeRef = useRef(activeIdle);
+    activeRef.current = activeIdle;
+    const lastActivityRef = useRef(0);
+    const lastMotionRef = useRef(null);
+    const cancel = useCallback(() => setActiveIdle(null), []);
+    const markActivity = useCallback((interrupt) => {
+        if (interrupt)
+            setActiveIdle(null);
+        optionsRef.current.onActivity?.();
+        const now = Date.now();
+        if (now - lastActivityRef.current < MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS)
+            return;
+        lastActivityRef.current = now;
+        setActivityRevision((value) => value + 1);
+    }, []);
+    useEffect(() => {
+        const interrupt = () => markActivity(true);
+        const pointerMove = () => {
+            if (Date.now() - lastActivityRef.current >= MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS) {
+                markActivity(interruptOnPointerMove);
+            }
+        };
+        window.addEventListener('keydown', interrupt);
+        window.addEventListener('pointerdown', interrupt);
+        window.addEventListener('pointermove', pointerMove, { passive: true });
+        window.addEventListener('wheel', interrupt, { passive: true });
+        window.addEventListener('focusin', interrupt);
+        return () => {
+            window.removeEventListener('keydown', interrupt);
+            window.removeEventListener('pointerdown', interrupt);
+            window.removeEventListener('pointermove', pointerMove);
+            window.removeEventListener('wheel', interrupt);
+            window.removeEventListener('focusin', interrupt);
+        };
+    }, [markActivity, interruptOnPointerMove]);
+    useEffect(() => {
+        if (!enabled) {
+            setActiveIdle(null);
+            return undefined;
+        }
+        let timer = 0;
+        const wait = () => MASCOT_ACTIVE_IDLE_MIN_MS + Math.random() * MASCOT_ACTIVE_IDLE_JITTER_MS;
+        const start = () => {
+            if (document.hidden || activeRef.current) {
+                timer = window.setTimeout(start, RETRY_MS);
+                return;
+            }
+            const plan = optionsRef.current.plan?.();
+            if (plan === null) {
+                timer = window.setTimeout(start, wait());
+                return;
+            }
+            const motion = pickMascotActiveIdle(Math.random(), lastMotionRef.current, plan?.motions);
+            lastMotionRef.current = motion;
+            optionsRef.current.onStart?.();
+            const direction = plan?.direction ?? 'left';
+            setActiveIdle({ motion, phase: 'outbound', direction, travel: direction });
+        };
+        timer = window.setTimeout(start, wait());
+        return () => window.clearTimeout(timer);
+    }, [enabled, activityRevision]);
+    useEffect(() => {
+        if (!activeIdle)
+            return undefined;
+        const delay = activeIdle.phase === 'away'
+            ? MASCOT_ACTIVE_IDLE_HOLD_MS[activeIdle.motion]
+            : MASCOT_ACTIVE_IDLE_TRAVEL_MS[activeIdle.motion] + LEG_SETTLE_MS;
+        const timer = window.setTimeout(() => setActiveIdle(advance), delay);
+        return () => window.clearTimeout(timer);
+    }, [activeIdle]);
+    const onAnimationEnd = useCallback((event) => {
+        setActiveIdle((current) => {
+            if (!current || event.animationName !== finisherOf(current))
+                return current;
+            return current.phase === 'outbound' ? { ...current, phase: 'away' } : null;
+        });
+    }, []);
+    const attributes = activeIdle
+        ? {
+            'data-mascot-active-idle': activeIdle.motion,
+            'data-mascot-idle-phase': activeIdle.phase,
+            'data-mascot-idle-direction': activeIdle.direction,
+            'data-mascot-idle-travel': activeIdle.travel
+        }
+        : {};
+    return {
+        activeIdle,
+        activityRevision,
+        className: activeIdle ? 'composer-mascot-active-idle' : undefined,
+        attributes,
+        cancel,
+        onAnimationEnd
+    };
+}
+//# sourceMappingURL=useMascotActiveIdle.js.map