mocode-pet-app 1.4.0 → 1.7.0

package/dist/assets/pets/04-robo-panda.motion.css

@@ -0,0 +1,61 @@
+/* 机械熊猫(robo-panda)专属演出:体现"熊猫"的慵懒与迟缓,所有节奏都比通用更慢。
+ * 没有 #pet-arm-*,tool_call 改用身体大幅摇摆代替双臂摆动。 */
+
+/* ── thinking:非常慢的小幅点头,像在打盹时梦到什么 ── */
+@keyframes panda-think-drowsy {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-2deg); }
+}
+.pet-thinking #pet-body-group {
+  animation: panda-think-drowsy 2.4s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── idle:非常慢的慵懒浮动,曲线比通用 3s 更沉 ── */
+@keyframes panda-idle-lazy-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+.pet-idle #pet-body-group {
+  animation: panda-idle-lazy-float 4.2s ease-in-out infinite;
+}
+
+/* ── tool_call:慢慢左右晃身(代替双臂),动作幅度大但迟缓,像在嚼竹子 ── */
+@keyframes panda-tool-sway {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(6deg); }
+}
+.pet-tool #pet-body-group {
+  animation: panda-tool-sway 1.2s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-tired:缓慢下沉 + 略微变暗,疲惫感比通用更浓 ── */
+@keyframes panda-tired-sink {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(6px); opacity: 0.8; }
+}
+.mood-tired #pet-body-group {
+  animation: panda-tired-sink 4.8s ease-in-out infinite;
+}
+
+/* ── mood-bored:慢到极致的左右摇晃,像快睡着了 ── */
+@keyframes panda-bored-sway {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(3deg); }
+}
+.mood-bored #pet-body-group {
+  animation: panda-bored-sway 3.2s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── done:慵懒但满足的小弹 ── */
+@keyframes panda-done-soft-bounce {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: panda-done-soft-bounce 0.6s ease-out 1;
+  transform-origin: 128px 220px;
+}

package/dist/assets/pets/04-robo-panda.svg

@@ -43,7 +43,7 @@
 
   <!-- Nose + mouth -->
   <ellipse cx="128" cy="142" rx="8" ry="6" fill="#161a1e"/>
-  <rect x="112" y="150" width="32" height="5" rx="2.5" fill="#161a1e" fill-opacity="0.7"/>
+  <rect id="pet-mouth" x="112" y="150" width="32" height="5" rx="2.5" fill="#161a1e" fill-opacity="0.7"/>
 
   <!-- Legs / feet -->
   <rect x="76" y="200" width="20" height="26" rx="8" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="2.5"/>

package/dist/assets/pets/05-robo-owl.motion.css

@@ -0,0 +1,88 @@
+/* 机械猫头鹰(robo-owl)专属演出:体现"猫头鹰"的机警与睿智。
+ * 头身一体的体型让"转头巡视"成为招牌动作;
+ * 双翼作为 #pet-arm-* 在这里承担"扇翅"的语义而非"挥臂"。 */
+
+/* ── thinking:慢速 360° 巡视(大角度旋转,因为体型方,看起来像头部旋转) ── */
+@keyframes owl-think-slow-scan {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.pet-thinking #pet-body-group {
+  animation: owl-think-slow-scan 4s linear infinite;
+  transform-origin: 128px 140px;
+}
+
+/* ── idle:缓慢左右转头巡视 ── */
+@keyframes owl-idle-turn {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-8deg); }
+  75% { transform: rotate(8deg); }
+}
+.pet-idle #pet-body-group {
+  animation: owl-idle-turn 3.6s ease-in-out infinite;
+  transform-origin: 128px 140px;
+}
+
+/* ── tool_call:双翼大幅拍动代替通用"双臂小幅摆动" ── */
+@keyframes owl-tool-wing-left {
+  0%, 100% { transform: rotate(-12deg); }
+  50% { transform: rotate(-30deg); }
+}
+@keyframes owl-tool-wing-right {
+  0%, 100% { transform: rotate(12deg); }
+  50% { transform: rotate(30deg); }
+}
+.pet-tool #pet-arm-left {
+  animation: owl-tool-wing-left 0.4s ease-in-out infinite;
+  transform-origin: 26px 160px;
+}
+.pet-tool #pet-arm-right {
+  animation: owl-tool-wing-right 0.4s ease-in-out infinite 0.2s;
+  transform-origin: 230px 160px;
+}
+
+/* ── mood-urging:急促的翅膀拍打 + 身体前倾 ── */
+@keyframes owl-urging-wing-left {
+  0%, 100% { transform: rotate(-12deg); }
+  50% { transform: rotate(-40deg); }
+}
+@keyframes owl-urging-wing-right {
+  0%, 100% { transform: rotate(12deg); }
+  50% { transform: rotate(40deg); }
+}
+@keyframes owl-urging-lean {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-2px) rotate(-3deg); }
+}
+.mood-urging #pet-arm-left {
+  animation: owl-urging-wing-left 0.2s ease-in-out infinite;
+  transform-origin: 26px 160px;
+}
+.mood-urging #pet-arm-right {
+  animation: owl-urging-wing-right 0.2s ease-in-out infinite 0.1s;
+  transform-origin: 230px 160px;
+}
+.mood-urging #pet-body-group {
+  animation: owl-urging-lean 0.4s ease-in-out infinite;
+  transform-origin: 128px 140px;
+}
+
+/* ── done:展翅庆祝 ── */
+@keyframes owl-done-spread-left {
+  0% { transform: rotate(-12deg); }
+  40% { transform: rotate(-50deg); }
+  100% { transform: rotate(-12deg); }
+}
+@keyframes owl-done-spread-right {
+  0% { transform: rotate(12deg); }
+  40% { transform: rotate(50deg); }
+  100% { transform: rotate(12deg); }
+}
+.pet-done #pet-arm-left {
+  animation: owl-done-spread-left 0.5s ease-out 1;
+  transform-origin: 26px 160px;
+}
+.pet-done #pet-arm-right {
+  animation: owl-done-spread-right 0.5s ease-out 1;
+  transform-origin: 230px 160px;
+}

package/dist/assets/pets/05-robo-owl.svg

@@ -33,11 +33,11 @@
   </circle>
 
   <!-- Beak -->
-  <path d="M120 156 L128 172 L136 156 Z" fill="#ffb74d"/>
+  <path id="pet-mouth" d="M120 156 L128 172 L136 156 Z" fill="#ffb74d"/>
 
   <!-- Folded wing arms(填充块面而非线条,末端贴身收圆) -->
-  <ellipse cx="26" cy="160" rx="14" ry="30" transform="rotate(-12 26 160)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
-  <ellipse cx="230" cy="160" rx="14" ry="30" transform="rotate(12 230 160)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <ellipse id="pet-arm-left" cx="26" cy="160" rx="14" ry="30" transform="rotate(-12 26 160)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <ellipse id="pet-arm-right" cx="230" cy="160" rx="14" ry="30" transform="rotate(12 230 160)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
 
   <!-- Feet / talons -->
   <rect x="76" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>

package/dist/assets/pets/06-robo-bunny.motion.css

@@ -0,0 +1,84 @@
+/* 机械兔(robo-bunny)专属演出:体现"兔子"的轻快与活泼,节奏普遍偏快、幅度偏小。
+ * 注意:robo-bunny.svg 的 #pet-arm-left/right 自带 inline <animateTransform> 缓慢摆动,
+ * 这里在状态/mood class 下用更快的 keyframe 覆盖之;非覆盖状态下内置动画继续提供自然律动。 */
+
+/* ── thinking:短促高频的小点头 ── */
+@keyframes bunny-think-bob {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-3deg); }
+}
+.pet-thinking #pet-body-group {
+  animation: bunny-think-bob 0.6s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── idle:轻微上下小跳,代替通用浮动 ── */
+@keyframes bunny-idle-hop {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.pet-idle #pet-body-group {
+  animation: bunny-idle-hop 1.4s ease-in-out infinite;
+}
+
+/* ── tool_call:手臂快摆(覆盖内置慢摆),蹦跳式连续工作 ── */
+@keyframes bunny-tool-arm-left {
+  0%, 100% { transform: rotate(-18deg); }
+  50% { transform: rotate(-40deg); }
+}
+@keyframes bunny-tool-arm-right {
+  0%, 100% { transform: rotate(18deg); }
+  50% { transform: rotate(40deg); }
+}
+.pet-tool #pet-arm-left {
+  animation: bunny-tool-arm-left 0.3s ease-in-out infinite;
+  transform-origin: 34px 130px;
+}
+.pet-tool #pet-arm-right {
+  animation: bunny-tool-arm-right 0.3s ease-in-out infinite 0.15s;
+  transform-origin: 222px 130px;
+}
+
+/* ── mood-tired:身体略微下沉,叠加在内置慢摆之上 ── */
+@keyframes bunny-tired-sink {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(3px); opacity: 0.9; }
+}
+.mood-tired #pet-body-group {
+  animation: bunny-tired-sink 3.2s ease-in-out infinite;
+}
+
+/* ── mood-urging:高频小跳 + 急切摆臂 ── */
+@keyframes bunny-urging-hop {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+@keyframes bunny-urging-arm-left {
+  0%, 100% { transform: rotate(-18deg); }
+  50% { transform: rotate(-50deg); }
+}
+@keyframes bunny-urging-arm-right {
+  0%, 100% { transform: rotate(18deg); }
+  50% { transform: rotate(50deg); }
+}
+.mood-urging #pet-body-group {
+  animation: bunny-urging-hop 0.35s ease-in-out infinite;
+}
+.mood-urging #pet-arm-left {
+  animation: bunny-urging-arm-left 0.2s ease-in-out infinite;
+  transform-origin: 34px 130px;
+}
+.mood-urging #pet-arm-right {
+  animation: bunny-urging-arm-right 0.2s ease-in-out infinite 0.1s;
+  transform-origin: 222px 130px;
+}
+
+/* ── done:大弹跳一次 ── */
+@keyframes bunny-done-bounce {
+  0% { transform: translateY(0) scale(1); }
+  40% { transform: translateY(-14px) scale(1.05); }
+  100% { transform: translateY(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: bunny-done-bounce 0.5s ease-out 1;
+}

package/dist/assets/pets/06-robo-bunny.svg

@@ -43,10 +43,10 @@
   <path d="M122 148 L128 156 L134 148 Z" fill="#ff6ec7" filter="url(#glow)"/>
 
   <!-- Arms (gentle wave) -->
-  <ellipse cx="34" cy="150" rx="12" ry="22" transform="rotate(-18 34 130)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5">
+  <ellipse id="pet-arm-left" cx="34" cy="150" rx="12" ry="22" transform="rotate(-18 34 130)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5">
     <animateTransform attributeName="transform" type="rotate" values="-18 34 130;-30 34 130;-18 34 130;-6 34 130;-18 34 130" keyTimes="0;0.25;0.5;0.75;1" dur="2.6s" repeatCount="indefinite"/>
   </ellipse>
-  <ellipse cx="222" cy="150" rx="12" ry="22" transform="rotate(18 222 130)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5">
+  <ellipse id="pet-arm-right" cx="222" cy="150" rx="12" ry="22" transform="rotate(18 222 130)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5">
     <animateTransform attributeName="transform" type="rotate" values="18 222 130;30 222 130;18 222 130;6 222 130;18 222 130" keyTimes="0;0.25;0.5;0.75;1" dur="2.6s" repeatCount="indefinite"/>
   </ellipse>
 

package/dist/assets/pets/07-robo-frog.motion.css

@@ -0,0 +1,65 @@
+/* 机械蛙(robo-frog)专属演出:利用"挤压/弹跳"这个青蛙的核心视觉语言,
+ * SVG 里没有 #pet-arm-*,tool_call 用整体压扁弹起代替通用双臂摆动。 */
+
+/* ── thinking:嘴部开合(呱呱叫的雏形) ── */
+@keyframes frog-think-mouth {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.6); }
+}
+.pet-thinking #pet-mouth {
+  animation: frog-think-mouth 0.8s ease-in-out infinite;
+  transform-origin: 128px 150px;
+}
+
+/* ── idle:极轻微的鼓起呼吸 ── */
+@keyframes frog-idle-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+.pet-idle #pet-body-group {
+  animation: frog-idle-breathe 2.6s ease-in-out infinite;
+  transform-origin: 128px 200px;
+}
+
+/* ── tool_call:压扁弹起,代替双臂摆动,像青蛙蓄力跳 ── */
+@keyframes frog-tool-squash {
+  0%, 100% { transform: scaleY(1) scaleX(1); }
+  30% { transform: scaleY(0.78) scaleX(1.15); }
+  60% { transform: scaleY(1.18) scaleX(0.88); }
+}
+.pet-tool #pet-body-group {
+  animation: frog-tool-squash 0.55s ease-in-out infinite;
+  transform-origin: 128px 200px;
+}
+
+/* ── mood-urging:嘴部急速张合(急促呱呱催促) ── */
+@keyframes frog-urging-mouth {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(2.4); }
+}
+.mood-urging #pet-mouth {
+  animation: frog-urging-mouth 0.25s ease-in-out infinite;
+  transform-origin: 128px 150px;
+}
+
+/* ── mood-tired:身体整体慢慢压扁变矮,像没气了的蛙 ── */
+@keyframes frog-tired-squash {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(0.86); }
+}
+.mood-tired #pet-body-group {
+  animation: frog-tired-squash 4.4s ease-in-out infinite;
+  transform-origin: 128px 200px;
+}
+
+/* ── done:大跳跃一次 ── */
+@keyframes frog-done-jump {
+  0% { transform: translateY(0) scaleY(1); }
+  30% { transform: translateY(0) scaleY(0.78) scaleX(1.15); }
+  50% { transform: translateY(-18px) scaleY(1.1) scaleX(0.92); }
+  100% { transform: translateY(0) scaleY(1); }
+}
+.pet-done #pet-body-group {
+  animation: frog-done-jump 0.55s ease-out 1;
+  transform-origin: 128px 200px;
+}

package/dist/assets/pets/07-robo-frog.svg

@@ -12,7 +12,7 @@
       <feGaussianBlur stdDeviation="3" result="blur"/>
       <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
-  </defs>
+  </defs>
   <g id="pet-body-group">
 
   <!-- Body / head (wide, squat) -->
@@ -30,10 +30,10 @@
 
   <!-- Screen mouth panel -->
   <rect x="60" y="110" width="136" height="72" rx="14" fill="#0a1420" stroke="#69f0ae" stroke-opacity="0.4" stroke-width="1.5"/>
-  <path d="M76 150 Q128 176 180 150" stroke="url(#accentGrad)" stroke-width="5" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+  <path id="pet-mouth" d="M76 150 Q128 176 180 150" stroke="url(#accentGrad)" stroke-width="5" fill="none" stroke-linecap="round" filter="url(#glow)"/>
 
   <!-- Bent frog legs -->
   <path d="M50 176 Q20 190 30 224 Q46 236 56 214" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
   <path d="M206 176 Q236 190 226 224 Q210 236 200 214" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
-  </g>
+  </g>
 </svg>

package/dist/assets/pets/08-robo-bear.motion.css

@@ -0,0 +1,65 @@
+/* 机械熊(robo-bear)专属演出:体现"熊"的笨重与迟缓,所有动作幅度大但慢半拍。
+ * 没有 #pet-arm-*,tool_call 改为大角度身体摇摆代替双臂摆动。 */
+
+/* ── thinking:沉甸甸的大幅点头,模拟思考时整颗头都跟着动 ── */
+@keyframes bear-think-heavy-nod {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(7deg); }
+}
+.pet-thinking #pet-body-group {
+  animation: bear-think-heavy-nod 1.6s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── idle:比通用更慢更沉的浮动 ── */
+@keyframes bear-idle-heavy-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+.pet-idle #pet-body-group {
+  animation: bear-idle-heavy-float 4s ease-in-out infinite;
+}
+
+/* ── tool_call:大幅左右晃身(代替双臂),动作慢但幅度大 ── */
+@keyframes bear-tool-sway {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-8deg); }
+  75% { transform: rotate(8deg); }
+}
+.pet-tool #pet-body-group {
+  animation: bear-tool-sway 1s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-urging:熊式大甩头 ── */
+@keyframes bear-urging-shake {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-10deg); }
+  75% { transform: rotate(10deg); }
+}
+.mood-urging #pet-body-group {
+  animation: bear-urging-shake 0.5s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-bored:慢悠悠的左右晃,像无聊到打哈欠 ── */
+@keyframes bear-bored-sway {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(5deg); }
+}
+.mood-bored #pet-body-group {
+  animation: bear-bored-sway 3.4s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── done:笨重但兴奋的小弹跳 ── */
+@keyframes bear-done-stomp {
+  0% { transform: translateY(0) scale(1); }
+  40% { transform: translateY(0) scale(0.94); }
+  60% { transform: translateY(-10px) scale(1.06); }
+  100% { transform: translateY(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: bear-done-stomp 0.6s ease-out 1;
+  transform-origin: 128px 220px;
+}

package/dist/assets/pets/09-robo-penguin.motion.css

@@ -0,0 +1,94 @@
+/* 机械企鹅(robo-penguin)专属演出:体现"企鹅"的摇摆与笨拙,所有动作以"左右晃"为核心。
+ * #pet-arm-left/right 是扁平鳍翼,这里当作鳍状手臂处理;pet-mouth 是橙色喙。 */
+
+/* ── thinking:鳍翼小幅度拍打 + 身体轻摇 ── */
+@keyframes penguin-think-flipper-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-10deg); }
+}
+@keyframes penguin-think-flipper-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(10deg); }
+}
+.pet-thinking #pet-arm-left {
+  animation: penguin-think-flipper-left 0.9s ease-in-out infinite;
+  transform-origin: 42px 170px;
+}
+.pet-thinking #pet-arm-right {
+  animation: penguin-think-flipper-right 0.9s ease-in-out infinite 0.45s;
+  transform-origin: 214px 170px;
+}
+
+/* ── idle:站着轻微左右晃 ── */
+@keyframes penguin-idle-wobble {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(3deg); }
+}
+.pet-idle #pet-body-group {
+  animation: penguin-idle-wobble 2.2s ease-in-out infinite;
+  transform-origin: 128px 230px;
+}
+
+/* ── tool_call:企鹅招牌的左右摇摆(代替双臂摆动) + 鳍翼配合 ── */
+@keyframes penguin-tool-waddle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-7deg); }
+  75% { transform: rotate(7deg); }
+}
+@keyframes penguin-tool-flipper-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-18deg); }
+}
+@keyframes penguin-tool-flipper-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(18deg); }
+}
+.pet-tool #pet-body-group {
+  animation: penguin-tool-waddle 0.55s ease-in-out infinite;
+  transform-origin: 128px 230px;
+}
+.pet-tool #pet-arm-left {
+  animation: penguin-tool-flipper-left 0.55s ease-in-out infinite;
+  transform-origin: 42px 170px;
+}
+.pet-tool #pet-arm-right {
+  animation: penguin-tool-flipper-right 0.55s ease-in-out infinite 0.27s;
+  transform-origin: 214px 170px;
+}
+
+/* ── mood-urging:急促的鳍翼拍打 + 嘴部(喙)开合催促 ── */
+@keyframes penguin-urging-flipper-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-22deg); }
+}
+@keyframes penguin-urging-flipper-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(22deg); }
+}
+@keyframes penguin-urging-beak {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.5); }
+}
+.mood-urging #pet-arm-left {
+  animation: penguin-urging-flipper-left 0.18s ease-in-out infinite;
+  transform-origin: 42px 170px;
+}
+.mood-urging #pet-arm-right {
+  animation: penguin-urging-flipper-right 0.18s ease-in-out infinite 0.09s;
+  transform-origin: 214px 170px;
+}
+.mood-urging #pet-mouth {
+  animation: penguin-urging-beak 0.18s ease-in-out infinite;
+  transform-origin: 128px 156px;
+}
+
+/* ── done:小滑步式的弹跳 ── */
+@keyframes penguin-done-slide {
+  0% { transform: translateX(0) scale(1); }
+  40% { transform: translateX(0) scale(1.08); }
+  100% { transform: translateX(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: penguin-done-slide 0.45s ease-out 1;
+  transform-origin: 128px 230px;
+}

package/dist/assets/pets/09-robo-penguin.svg

@@ -36,11 +36,11 @@
   </g>
 
   <!-- Beak -->
-  <path d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
+  <path id="pet-mouth" d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
 
   <!-- Flipper arms(填充块面而非线条,贴身收成圆润小翼) -->
-  <path d="M42 146 Q16 162 22 190 Q26 204 42 202 Q50 200 46 188 Q40 168 46 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
-  <path d="M214 146 Q240 162 234 190 Q230 204 214 202 Q206 200 210 188 Q216 168 210 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
+  <path id="pet-arm-left" d="M42 146 Q16 162 22 190 Q26 204 42 202 Q50 200 46 188 Q40 168 46 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
+  <path id="pet-arm-right" d="M214 146 Q240 162 234 190 Q230 204 214 202 Q206 200 210 188 Q216 168 210 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
 
   <!-- Feet -->
   <ellipse cx="104" cy="234" rx="16" ry="8" fill="#ffb74d"/>

package/dist/assets/pets/10-robo-dino.motion.css

@@ -0,0 +1,91 @@
+/* 机械龙(robo-dino)专属演出:体现"小龙"的凶猛与小只的暴躁,动作短促、节奏快、幅度大。
+ * #pet-arm-left/right 是两只小短手,只能用 rotate 模拟拍打;
+ * 嘴部 (#pet-mouth) 是锯齿状,适合用 scaleY 模拟咬合。 */
+
+/* ── thinking:上下颌咬合(嘴部张合,模拟正在思考时"哼"的表情) ── */
+@keyframes dino-think-jaw {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.7); }
+}
+.pet-thinking #pet-mouth {
+  animation: dino-think-jaw 0.5s ease-in-out infinite;
+  transform-origin: 128px 148px;
+}
+
+/* ── idle:小幅度来回甩头(像小恐龙好动) ── */
+@keyframes dino-idle-shake {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-3deg); }
+  75% { transform: rotate(3deg); }
+}
+.pet-idle #pet-body-group {
+  animation: dino-idle-shake 1.8s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── tool_call:小短手快速拍打 + 嘴部跟随咬合 ── */
+@keyframes dino-tool-arm-left {
+  0%, 100% { transform: rotate(-34deg); }
+  50% { transform: rotate(-65deg); }
+}
+@keyframes dino-tool-arm-right {
+  0%, 100% { transform: rotate(34deg); }
+  50% { transform: rotate(65deg); }
+}
+@keyframes dino-tool-jaw {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.4); }
+}
+.pet-tool #pet-arm-left {
+  animation: dino-tool-arm-left 0.25s ease-in-out infinite;
+  transform-origin: 31px 142px;
+}
+.pet-tool #pet-arm-right {
+  animation: dino-tool-arm-right 0.25s ease-in-out infinite 0.12s;
+  transform-origin: 223px 142px;
+}
+.pet-tool #pet-mouth {
+  animation: dino-tool-jaw 0.25s ease-in-out infinite;
+  transform-origin: 128px 148px;
+}
+
+/* ── mood-frustrated:暴躁甩头(替换通用 0.15s 平移抖动为更"角色化"的旋转甩头) ── */
+@keyframes dino-frustrated-slam {
+  0%, 100% { transform: rotate(0deg) translateX(0); }
+  20% { transform: rotate(-6deg) translateX(-4px); }
+  60% { transform: rotate(6deg) translateX(4px); }
+}
+.mood-frustrated #pet-body-group {
+  animation: dino-frustrated-slam 0.18s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-urging:急躁跺脚 ── */
+@keyframes dino-urging-stomp {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(0) rotate(-5deg); }
+}
+@keyframes dino-urging-jaw {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.8); }
+}
+.mood-urging #pet-body-group {
+  animation: dino-urging-stomp 0.35s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+.mood-urging #pet-mouth {
+  animation: dino-urging-jaw 0.35s ease-in-out infinite;
+  transform-origin: 128px 148px;
+}
+
+/* ── done:跺脚庆祝 ── */
+@keyframes dino-done-stomp {
+  0% { transform: translateY(0) scale(1); }
+  30% { transform: translateY(0) scaleY(0.88) scaleX(1.1); }
+  60% { transform: translateY(-10px) scale(1.08); }
+  100% { transform: translateY(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: dino-done-stomp 0.5s ease-out 1;
+  transform-origin: 128px 220px;
+}

package/dist/assets/pets/10-robo-dino.svg

@@ -39,12 +39,12 @@
   </g>
 
   <!-- Jagged mouth -->
-  <path d="M108 148 L118 156 L128 148 L138 156 L148 148" stroke="#69f0ae" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+  <path id="pet-mouth" d="M108 148 L118 156 L128 148 L138 156 L148 148" stroke="#69f0ae" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
 
   <!-- Small arms(填充块面而非线条,末端一颗圆球小手) -->
-  <ellipse cx="31" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(-34 31 142)"/>
+  <ellipse id="pet-arm-left" cx="31" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(-34 31 142)"/>
   <circle cx="25" cy="156" r="5" fill="url(#accentGrad)"/>
-  <ellipse cx="223" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(34 223 142)"/>
+  <ellipse id="pet-arm-right" cx="223" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(34 223 142)"/>
   <circle cx="231" cy="156" r="5" fill="url(#accentGrad)"/>
 
   <!-- Legs / feet -->