tokentracker-cli 0.5.9 → 0.5.12

package/dashboard/dist/clawd/happy.svg

@@ -0,0 +1,161 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Bouncing Character Body */
+      .bounce-anim {
+        transform-box: fill-box;
+        transform-origin: 50% 100%; /* Base of the feet */
+        animation: bounce 1s infinite ease-in-out;
+      }
+      
+      /* Ground Shadow Pulse */
+      .shadow-anim {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation: shadow 1s infinite ease-in-out;
+      }
+
+      /* Enthusiastic Waving Arms */
+      .arm-l {
+        transform-box: fill-box;
+        transform-origin: 100% 50%; /* Shoulder joint */
+        animation: wave-l 0.15s infinite alternate ease-in-out;
+      }
+      .arm-r {
+        transform-box: fill-box;
+        transform-origin: 0% 50%; /* Shoulder joint */
+        animation: wave-r 0.15s infinite alternate ease-in-out;
+      }
+
+      /* Happy Blinking Eyes */
+      .eyes-blink {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation: blink 2s infinite linear;
+      }
+
+      /* Pixel-Art Sparkle Animations (Frame-by-frame style) */
+      .spark-center {
+        opacity: 0;
+        animation: flash-center 1.5s infinite step-end;
+        animation-delay: var(--delay, 0s);
+      }
+      
+      .spark-outer {
+        opacity: 0;
+        animation: flash-outer 1.5s infinite step-end;
+        animation-delay: var(--delay, 0s);
+      }
+
+      /* Character Keyframes */
+      @keyframes bounce {
+        0%, 15%, 100% { transform: translateY(0) scaleY(1); }
+        20% { transform: translateY(0) scaleY(0.85); }     /* Anticipation squash */
+        40% { transform: translateY(-10px) scaleY(1.05); } /* Fast up + stretch */
+        50% { transform: translateY(-12px) scaleY(1); }    /* Hangtime peak */
+        60% { transform: translateY(-10px) scaleY(1.05); } /* Fast fall + stretch */
+        80% { transform: translateY(0) scaleY(0.85); }     /* Landing squash */
+        85% { transform: translateY(0) scaleY(1); }        /* Recover */
+      }
+
+      @keyframes shadow {
+        0%, 15%, 100% { transform: scale(1); opacity: 0.5; }
+        20% { transform: scale(1.1); opacity: 0.6; }
+        40% { transform: scale(0.6); opacity: 0.2; }
+        50% { transform: scale(0.5); opacity: 0.15; }
+        60% { transform: scale(0.6); opacity: 0.2; }
+        80% { transform: scale(1.1); opacity: 0.6; }
+        85% { transform: scale(1); opacity: 0.5; }
+      }
+
+      @keyframes wave-l {
+        0% { transform: rotate(45deg); }
+        100% { transform: rotate(85deg); }
+      }
+
+      @keyframes wave-r {
+        0% { transform: rotate(-45deg); }
+        100% { transform: rotate(-85deg); }
+      }
+
+      @keyframes blink {
+        0%, 46%, 54%, 100% { transform: scaleY(1); }
+        50% { transform: scaleY(0.1); }
+      }
+
+      /* 
+        True 8-Bit Sparkle Timeline:
+        1. Small center dot appears
+        2. Outer arms appear (Full Star)
+        3. Center dot disappears (Hollow Ring)
+        4. Everything disappears 
+      */
+      @keyframes flash-center {
+        0%  { opacity: 0; }
+        10% { opacity: 1; }  /* Small dot */
+        30% { opacity: 0; }  /* Disappears, leaving hollow star */
+        100%{ opacity: 0; }
+      }
+      
+      @keyframes flash-outer {
+        0%  { opacity: 0; }
+        20% { opacity: 1; }  /* Outer arms appear to complete the star */
+        40% { opacity: 0; }  /* Entire star disappears */
+        100%{ opacity: 0; }
+      }
+    </style>
+
+    <!-- Reusable Pixel Art Sparkle Definition -->
+    <g id="px-sparkle">
+      <!-- Center pixel -->
+      <rect class="spark-center" x="-0.5" y="-0.5" width="1" height="1" />
+      <!-- Outer 4 pixels forming the cross -->
+      <path class="spark-outer" d="M -0.5,-1.5 h1 v1 h-1 z 
+                                   M -0.5,0.5 h1 v1 h-1 z 
+                                   M -1.5,-0.5 h1 v1 h-1 z 
+                                   M 0.5,-0.5 h1 v1 h-1 z" />
+    </g>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+  <!-- Pixel-Art Sparkle Particles Group -->
+  <g class="sparkles">
+    <use href="#px-sparkle" x="-4" y="-2" fill="#FFD700" style="--delay: 0.0s"/>
+    <use href="#px-sparkle" x="18" y="-4" fill="#FFA000" style="--delay: 0.3s"/>
+    <use href="#px-sparkle" x="20" y="10" fill="#FFF59D" style="--delay: 0.6s"/>
+    <use href="#px-sparkle" x="-6" y="12" fill="#FFC107" style="--delay: 0.9s"/>
+    <use href="#px-sparkle" x="7" y="-8" fill="#FFF59D" style="--delay: 1.2s"/>
+    <use href="#px-sparkle" x="-2" y="6" fill="#FFD700" style="--delay: 0.7s"/>
+  </g>
+
+  <!-- Main Animated Character -->
+  <g class="bounce-anim">
+    <!-- Body Color Group -->
+    <g id="body-color-group" fill="#DE886D">
+      <!-- Legs (Move and squash with the body naturally) -->
+      <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
+      <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
+      <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
+      <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
+
+      <!-- Main Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      
+      <!-- Waving Arms -->
+      <g class="arm-l">
+        <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      </g>
+      <g class="arm-r">
+        <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+      </g>
+    </g>
+    
+    <!-- Eyes Color Group -->
+    <g class="eyes-blink" fill="#000000">
+      <rect id="left-eye" x="4" y="8" width="1" height="2"/>
+      <rect id="right-eye" x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/idle/collapse.svg

@@ -0,0 +1,101 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 0.8s Collapse — One-shot transition from yawn-end to sploot */
+      .body-collapse {
+        transform-origin: 7.5px 13px;
+        animation: body-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .shadow-collapse {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .legs-collapse {
+        transform-origin: 7.5px 12px;
+        animation: legs-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .arm-l-collapse {
+        transform-origin: 1px 10px;
+        animation: arm-l-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .arm-r-collapse {
+        transform-origin: 14px 10px;
+        animation: arm-r-collapse 1s ease-in -0.2s forwards;
+      }
+
+      /* Eyes stay shut the entire time */
+      .eyes-shut {
+        transform-origin: 7.5px 9px;
+        transform: scaleY(0.1);
+      }
+
+      /* Body sinks and widens gently — closer to sleeping proportions */
+      @keyframes body-collapse {
+        0% { transform: scale(1.05, 0.95) translate(0, 1px); }
+        40% { transform: scale(1.08, 0.85) translate(0, 1.5px); }
+        70% { transform: scale(1.12, 0.75) translate(0, 2px); }
+        100% { transform: scale(1.15, 0.7) translate(0, 3px); }
+      }
+
+      /* Shadow widens to match sleeping shadow */
+      @keyframes shadow-collapse {
+        0% { transform: scaleX(1.05); opacity: 0.55; }
+        100% { transform: scaleX(1.3); opacity: 0.45; }
+      }
+
+      /* Legs hold still at first, then shrink into short stubs */
+      @keyframes legs-collapse {
+        0%, 40% { transform: translate(0, 0) scaleY(1); }
+        70% { transform: translate(0, -1px) scaleY(0.6); }
+        100% { transform: translate(0, -2px) scaleY(0.33); }
+      }
+
+      /* Arms slide straight down, hugging body sides */
+      @keyframes arm-l-collapse {
+        0% { transform: translate(0, 1px) rotate(-15deg); }
+        50% { transform: translate(0, 2px) rotate(-5deg); }
+        100% { transform: translate(0, 3px) rotate(0deg); }
+      }
+
+      @keyframes arm-r-collapse {
+        0% { transform: translate(0, 1px) rotate(15deg); }
+        50% { transform: translate(0, 2px) rotate(5deg); }
+        100% { transform: translate(0, 3px) rotate(0deg); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-collapse" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.55"/>
+
+  <!-- Legs (shrink upward into short stubs) -->
+  <g class="legs-collapse" fill="#DE886D">
+    <rect x="3" y="12" width="1" height="3"/>
+    <rect x="5" y="12" width="1" height="3"/>
+    <rect x="9" y="12" width="1" height="3"/>
+    <rect x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Body (collapses/melts down) -->
+  <g class="body-collapse">
+    <!-- Torso -->
+    <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    <!-- Left Arm -->
+    <g class="arm-l-collapse">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Right Arm -->
+    <g class="arm-r-collapse">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Eyes stay shut -->
+    <g class="eyes-shut" fill="#000000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/idle/doze.svg

@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Dozing — looping gentle breathing in yawn-end squashed pose, eyes shut */
+      .doze-body {
+        transform-origin: 7.5px 13px;
+        animation: doze-breathe 4s infinite ease-in-out;
+      }
+
+      .doze-shadow {
+        transform-origin: 7.5px 15.5px;
+        animation: doze-shadow 4s infinite ease-in-out;
+      }
+
+      .eyes-shut {
+        transform-origin: 7.5px 9px;
+        transform: scaleY(0.1);
+        transition: transform 0.3s ease-out;
+      }
+
+      .arm-l-doze {
+        transform-origin: 1px 10px;
+        transform: translate(0px, 1px) rotate(-15deg);
+      }
+
+      .arm-r-doze {
+        transform-origin: 14px 10px;
+        transform: translate(0px, 1px) rotate(15deg);
+      }
+
+      @keyframes doze-breathe {
+        0%, 100% { transform: scale(1.05, 0.95) translate(0, 1px); }
+        50% { transform: scale(1.08, 0.92) translate(0, 1.8px); }
+      }
+
+      @keyframes doze-shadow {
+        0%, 100% { transform: scaleX(1.05); opacity: 0.55; }
+        50% { transform: scaleX(1.08); opacity: 0.5; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="doze-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.55"/>
+
+  <!-- Static Legs -->
+  <g id="legs" fill="#DE886D">
+    <rect x="3" y="12" width="1" height="3"/>
+    <rect x="5" y="12" width="1" height="3"/>
+    <rect x="9" y="12" width="1" height="3"/>
+    <rect x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Dozing Body (squashed yawn-end pose + gentle breathing) -->
+  <g class="doze-body">
+    <!-- Torso -->
+    <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    <!-- Left Arm (relaxed down) -->
+    <g class="arm-l-doze">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Right Arm (relaxed down) -->
+    <g class="arm-r-doze">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Eyes shut (JS can open via style.transform override) -->
+    <g id="eyes-doze" class="eyes-shut" fill="#000000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/idle/follow.svg

@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 4s infinite ease-in-out;
+      }
+
+      #eyes-js, #body-js, #shadow-js {
+        transition: transform 0.2s ease-out;
+      }
+      #shadow-js {
+        transform-origin: 7.5px 15px;
+      }
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes eye-blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow (JS-controlled horizontal shift) -->
+  <g id="shadow-js">
+    <rect x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+  </g>
+
+  <!-- Static Legs (slightly taller for upward body shift) -->
+  <g id="legs" fill="#DE886D">
+    <rect x="3" y="11" width="1" height="4"/>
+    <rect x="5" y="11" width="1" height="4"/>
+    <rect x="9" y="11" width="1" height="4"/>
+    <rect x="11" y="11" width="1" height="4"/>
+  </g>
+
+  <!-- Upper Body (JS body-shift + CSS breathe) -->
+  <g id="body-js">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      <!-- Left Arm -->
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Right Arm -->
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Eyes: JS translate wrapper + CSS blink -->
+      <g id="eyes-js" fill="#000000">
+        <g class="eyes-blink">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/idle/living.svg

@@ -0,0 +1,196 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 16-Second Master Sequence for Idle Actions */
+      .action-body {
+        transform-origin: 7.5px 13px; /* Pivot at the base of the torso */
+        animation: action-body 16s infinite ease-in-out;
+      }
+      
+      /* Continuous Subtle Breathing (Syncs exactly 5 times per 16s loop) */
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      /* Shadow shrinking and shifting matching actions */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-action 16s infinite ease-in-out;
+      }
+
+      /* Left Arm (Scratching and Yawn Stretching) */
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-idle 16s infinite ease-in-out;
+      }
+
+      /* Right Arm (Yawn Stretching) */
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r-idle 16s infinite ease-in-out;
+      }
+
+      /* Eye Tracking (Looking around) */
+      .eyes-look {
+        animation: eye-track 16s infinite ease-in-out;
+      }
+
+      /* Occasional Blinks and shutting during Yawn */
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 16s infinite linear;
+      }
+
+      /* Yawn Mouth Appearance */
+      .yawn-mouth {
+        transform-origin: 7.5px 11px;
+        animation: yawn-mouth-anim 16s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* Tiny tear that appears during the big yawn */
+      .yawn-tear {
+        animation: tear-fall 16s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes action-body {
+        0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scale(1, 1) translate(0, 0); }
+        /* Look Right Tilt */
+        12%, 22% { transform: scale(1, 1) translate(1px, 0); }
+        /* Look Left Tilt */
+        42%, 50% { transform: scale(1, 1) translate(-1px, 0); }
+        /* Scratching Lean */
+        30%, 36% { transform: scale(1, 1) translate(0.5px, 0); } 
+        /* Deep Yawn Stretch */
+        60% { transform: scale(0.95, 1.05) translate(0px, -1px); } /* Stretch up */
+        65% { transform: scale(0.9, 1.1) translate(0px, -2px); }   /* Peak stretch */
+        72% { transform: scale(1.05, 0.95) translate(0px, 1px); }  /* Heavy sigh / squash down */
+        76% { transform: scale(1, 1) translate(0px, 0px); }        /* Recover */
+      }
+
+      @keyframes shadow-action {
+        0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
+        42%, 50% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
+        30%, 36% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
+        60% { transform: scaleX(0.95) translate(0, 0); opacity: 0.45; }
+        65% { transform: scaleX(0.9) translate(0, 0); opacity: 0.4; }
+        72% { transform: scaleX(1.05) translate(0, 0); opacity: 0.55; }
+        76% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%, 10%, 25%, 38%, 52%, 58%, 80%, 100% { transform: translate(0px, 0px); }
+        12%, 22% { transform: translate(3px, 0px); } /* Look Right */
+        42%, 50% { transform: translate(-3px, 0px); } /* Look Left */
+        60%, 75% { transform: translate(0px, -1px); } /* Look slightly up during yawn */
+      }
+
+      @keyframes eye-blink {
+        0%, 3%, 7%, 18%, 22%, 43%, 47%, 56%, 83%, 87%, 100% { transform: scaleY(1); }
+        5%, 20%, 45%, 85% { transform: scaleY(0.1); } /* Quick Blinks */
+        /* Yawn Closed Eyes */
+        60% { transform: scaleY(1); }
+        62%, 72% { transform: scaleY(0.1); } /* Eyes completely shut */
+        75% { transform: scaleY(1); }
+      }
+
+      @keyframes arm-l-idle {
+        0%, 28% { transform: translate(0, 0) rotate(0deg); }
+        
+        /* Occasional Scratching Sequence (Left Arm) */
+        30% { transform: translate(1px, -3px) rotate(15deg); }
+        31% { transform: translate(1.5px, -4px) rotate(35deg); } /* Up */
+        32% { transform: translate(0.5px, -2.5px) rotate(0deg); } /* Down */
+        33% { transform: translate(1.5px, -4px) rotate(35deg); }
+        34% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        35% { transform: translate(1.5px, -4px) rotate(35deg); }
+        36% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        
+        38%, 58% { transform: translate(0, 0) rotate(0deg); }
+        
+        /* Yawn Stretch */
+        62% { transform: translate(-1px, -2px) rotate(45deg); }
+        65% { transform: translate(-2px, -3px) rotate(80deg); } /* Full outward stretch */
+        72% { transform: translate(0px, 1px) rotate(-15deg); } /* Relax down */
+        76%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes arm-r-idle {
+        0%, 58% { transform: translate(0, 0) rotate(0deg); }
+        /* Yawn Stretch */
+        62% { transform: translate(1px, -2px) rotate(-45deg); }
+        65% { transform: translate(2px, -3px) rotate(-80deg); } /* Full outward stretch */
+        72% { transform: translate(0px, 1px) rotate(15deg); } /* Relax down */
+        76%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes yawn-mouth-anim {
+        0%, 58%, 76%, 100% { opacity: 0; transform: scale(0.1); }
+        60% { opacity: 1; transform: scale(0.5, 0.2); }
+        65% { opacity: 1; transform: scale(1.1, 1.4); } /* Wide Open */
+        72% { opacity: 1; transform: scale(0.6, 0.4); } /* Shrinking */
+        75% { opacity: 0; transform: scale(0.1); }
+      }
+
+      @keyframes tear-fall {
+        0%, 64%, 80%, 100% { opacity: 0; transform: translateY(0); }
+        66% { opacity: 1; transform: translateY(0); } /* Appears at corner of eye */
+        72% { opacity: 1; transform: translateY(2.5px); } /* Slides down cheek */
+        75% { opacity: 0; transform: translateY(3px); } /* Fades out */
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Static Character Legs (extended up to stay connected during yawn stretch) -->
+  <g id="legs" fill="#DE886D">
+    <rect id="outer-left-leg" x="3" y="12" width="1" height="3"/>
+    <rect id="inner-left-leg" x="5" y="12" width="1" height="3"/>
+    <rect id="inner-right-leg" x="9" y="12" width="1" height="3"/>
+    <rect id="outer-right-leg" x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Animated Upper Body (Combines occasional actions + continuous breathing) -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      
+      <!-- Arms -->
+      <g class="arm-l">
+        <rect id="left-arm" x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <g class="arm-r">
+        <rect id="right-arm" x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Yawning Mouth (Hidden usually) -->
+      <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
+
+      <!-- Eyes Group -->
+      <g class="eyes-look" fill="#000000">
+        <g class="eyes-blink">
+          <rect id="left-eye" x="4" y="8" width="1" height="2"/>
+          <rect id="right-eye" x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+
+      <!-- Yawn Tear Drop (A tiny detail for the big stretch) -->
+      <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
+      
+    </g>
+  </g>
+</svg>