mocode-pet-app 0.1.0 → 1.0.0

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

@@ -0,0 +1,46 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b388ff"/>
+      <stop offset="1" stop-color="#7c4dff"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Ear tufts -->
+  <path d="M60 58 L50 26 L76 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M196 58 L206 26 L180 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="40" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Big round eyes -->
+  <circle cx="93" cy="118" r="30" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="163" cy="118" r="30" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="93" cy="118" r="13" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="13;3;13" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="163" cy="118" r="13" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="13;3;13" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Beak -->
+  <path d="M120 156 L128 172 L136 156 Z" fill="#ffb74d"/>
+
+  <!-- Folded wing arms -->
+  <path d="M40 130 Q14 150 26 186" stroke="url(#accentGrad)" stroke-width="10" stroke-linecap="round" fill="none"/>
+  <path d="M216 130 Q242 150 230 186" stroke="url(#accentGrad)" stroke-width="10" stroke-linecap="round" fill="none"/>
+
+  <!-- Feet / talons -->
+  <rect x="76" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

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

@@ -0,0 +1,52 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff6ec7"/>
+      <stop offset="1" stop-color="#f48fb1"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Long ears (top kept at y=12 to leave clearance for the idle float animation's -6px translateY, so ear tips don't get clipped by the viewBox edge) -->
+  <rect x="66" y="12" width="22" height="54" rx="11" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="168" y="12" width="22" height="54" rx="11" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="72" y="20" width="10" height="30" rx="5" fill="#ff6ec7" fill-opacity="0.5"/>
+  <rect x="174" y="20" width="10" height="30" rx="5" fill="#ff6ec7" fill-opacity="0.5"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="30" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ff6ec7" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Nose -->
+  <path d="M122 148 L128 156 L134 148 Z" fill="#ff6ec7" filter="url(#glow)"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Fluffy tail -->
+  <circle cx="224" cy="184" r="16" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  </g>
+</svg>

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

@@ -0,0 +1,39 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#69f0ae"/>
+      <stop offset="1" stop-color="#00e676"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Body / head (wide, squat) -->
+  <rect x="34" y="66" width="188" height="134" rx="36" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Bulging top eyes -->
+  <circle cx="88" cy="60" r="26" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="168" cy="60" r="26" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="88" cy="60" r="11" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="11;2;11" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="168" cy="60" r="11" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="11;2;11" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 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)"/>
+
+  <!-- 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>
+</svg>

package/dist/assets/pets/08-robo-bear.svg

@@ -0,0 +1,48 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffb74d"/>
+      <stop offset="1" stop-color="#ffa726"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Round ears -->
+  <circle cx="56" cy="46" r="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="200" cy="46" r="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="30" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Round snout patch -->
+  <ellipse cx="128" cy="148" rx="26" ry="18" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.5" stroke-width="1.5"/>
+  <ellipse cx="128" cy="142" rx="6" ry="5" fill="#ffb74d"/>
+
+  <!-- Legs / feet -->
+  <rect x="72" y="200" width="24" height="26" rx="9" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="24" height="26" rx="9" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

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

@@ -0,0 +1,49 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Body (oval) -->
+  <ellipse cx="128" cy="140" rx="88" ry="100" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <!-- Belly patch -->
+  <ellipse cx="128" cy="156" rx="52" ry="66" fill="#eef2f6"/>
+
+  <!-- Screen face -->
+  <rect x="76" y="86" width="104" height="62" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="98" y="108" width="12" height="20" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="20;2;20" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="108;117;108" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="146" y="108" width="12" height="20" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="20;2;20" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="108;117;108" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Beak -->
+  <path d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
+
+  <!-- Flipper arms -->
+  <path d="M42 148 Q22 172 40 200" stroke="url(#bodyGrad)" stroke-width="20" stroke-linecap="round" fill="none"/>
+  <path d="M214 148 Q234 172 216 200" stroke="url(#bodyGrad)" stroke-width="20" stroke-linecap="round" fill="none"/>
+
+  <!-- Feet -->
+  <ellipse cx="104" cy="234" rx="16" ry="8" fill="#ffb74d"/>
+  <ellipse cx="152" cy="234" rx="16" ry="8" fill="#ffb74d"/>
+  </g>
+</svg>

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

@@ -0,0 +1,56 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#69f0ae"/>
+      <stop offset="1" stop-color="#00c853"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Back spikes -->
+  <path d="M64 52 L76 24 L90 52 Z" fill="url(#accentGrad)"/>
+  <path d="M110 46 L122 16 L136 46 Z" fill="url(#accentGrad)"/>
+  <path d="M156 52 L168 24 L182 52 Z" fill="url(#accentGrad)"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="76" width="136" height="86" rx="14" fill="#0a1420" stroke="#69f0ae" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Red eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="106" width="14" height="24" rx="6" fill="#ff5252">
+      <animate attributeName="height" values="24;2;24" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="106;118;106" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="106" width="14" height="24" rx="6" fill="#ff5252">
+      <animate attributeName="height" values="24;2;24" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="106;118;106" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </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)"/>
+
+  <!-- Small arms -->
+  <path d="M40 130 Q24 138 26 156" stroke="url(#accentGrad)" stroke-width="7" stroke-linecap="round" fill="none"/>
+  <path d="M216 130 Q232 138 230 156" stroke="url(#accentGrad)" stroke-width="7" stroke-linecap="round" fill="none"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Spiky tail -->
+  <path d="M216 176 Q248 178 244 150" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none"/>
+  <path d="M240 150 L248 138 L252 154 Z" fill="url(#accentGrad)"/>
+  </g>
+</svg>

package/dist/assets/pets/11-slime-blob.svg

@@ -0,0 +1,43 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="blobGrad" x1="48" y1="60" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#26c6da" stop-opacity="0.9"/>
+      <stop offset="1" stop-color="#00acc1" stop-opacity="0.75"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Blob body -->
+  <path d="M128 40
+           C182 40 214 78 210 128
+           C232 150 224 190 198 202
+           C210 224 176 232 158 216
+           C132 236 96 234 78 214
+           C50 224 34 196 48 176
+           C24 158 30 118 62 96
+           C64 62 96 40 128 40 Z"
+        fill="url(#blobGrad)" stroke="#4dd0e1" stroke-width="2.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <circle cx="102" cy="132" r="9" fill="#0a1420"/>
+    <circle cx="154" cy="132" r="9" fill="#0a1420"/>
+    <circle cx="105" cy="129" r="2.5" fill="#e0fbff"/>
+    <circle cx="157" cy="129" r="2.5" fill="#e0fbff"/>
+  </g>
+
+  <!-- Smile -->
+  <path d="M110 156 Q128 170 146 156" stroke="#0a1420" stroke-width="3.5" fill="none" stroke-linecap="round"/>
+
+  <!-- Drips -->
+  <path d="M84 216 Q84 232 92 232 Q100 232 96 216 Z" fill="url(#blobGrad)"/>
+  <path d="M160 220 Q160 236 168 236 Q176 236 172 220 Z" fill="url(#blobGrad)"/>
+
+  <!-- Highlight -->
+  <ellipse cx="92" cy="86" rx="18" ry="10" fill="#ffffff" fill-opacity="0.25"/>
+  </g>
+</svg>

package/dist/assets/pets/12-ghost-byte.svg

@@ -0,0 +1,41 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="ghostGrad" x1="48" y1="40" x2="208" y2="200" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e1f5fe" stop-opacity="0.92"/>
+      <stop offset="1" stop-color="#81d4fa" stop-opacity="0.7"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Floating shadow -->
+  <ellipse cx="128" cy="234" rx="50" ry="8" fill="#000" fill-opacity="0.15"/>
+
+  <!-- Ghost body -->
+  <path d="M128 34
+           C176 34 208 70 208 120
+           L208 190
+           C208 190 196 176 184 190
+           C172 204 160 176 148 190
+           C136 204 120 176 108 190
+           C96 204 84 176 72 190
+           C60 176 48 190 48 190
+           L48 120
+           C48 70 80 34 128 34 Z"
+        fill="url(#ghostGrad)" stroke="#4dd0e1" stroke-width="2">
+    <animateTransform attributeName="transform" type="translate" values="0 0;0 -8;0 0" dur="2.4s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <ellipse cx="98" cy="112" rx="9" ry="12" fill="#0a1420"/>
+    <ellipse cx="158" cy="112" rx="9" ry="12" fill="#0a1420"/>
+  </g>
+
+  <!-- Mouth -->
+  <ellipse cx="128" cy="142" rx="10" ry="8" fill="#0a1420" fill-opacity="0.85"/>
+  </g>
+</svg>

package/dist/assets/pets/13-cactus-bot.svg

@@ -0,0 +1,52 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2e7d32"/>
+      <stop offset="1" stop-color="#1b5e20"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#aed581"/>
+      <stop offset="1" stop-color="#66bb6a"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Flower -->
+  <circle cx="108" cy="30" r="8" fill="#ff8a65"/>
+  <circle cx="122" cy="22" r="8" fill="#ffab91"/>
+  <circle cx="136" cy="30" r="8" fill="#ff8a65"/>
+  <circle cx="122" cy="34" r="7" fill="#ffe082"/>
+
+  <!-- Body segments -->
+  <rect x="60" y="46" width="136" height="120" rx="46" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="48" y="150" width="160" height="70" rx="40" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Spike arms -->
+  <path d="M60 110 Q28 118 30 148" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none"/>
+  <path d="M196 110 Q228 118 226 148" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none"/>
+  <path d="M34 118 L24 108 M34 128 L22 124 M222 118 L232 108 M222 128 L234 124"
+        stroke="url(#accentGrad)" stroke-width="3" stroke-linecap="round"/>
+
+  <!-- Screen face -->
+  <rect x="80" y="76" width="96" height="66" rx="14" fill="#0a1420" stroke="#aed581" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="100" y="98" width="12" height="22" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="22;2;22" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="98;108;98" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="144" y="98" width="12" height="22" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="22;2;22" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="98;108;98" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Pot base / feet -->
+  <path d="M56 220 L200 220 L184 244 L72 244 Z" fill="#8d6e63" stroke="#a1887f" stroke-width="2"/>
+  </g>
+</svg>

package/dist/assets/pets/14-crystal-bot.svg

@@ -0,0 +1,32 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="crystalGrad" x1="48" y1="30" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b388ff" stop-opacity="0.85"/>
+      <stop offset="0.5" stop-color="#2afadf" stop-opacity="0.7"/>
+      <stop offset="1" stop-color="#7c4dff" stop-opacity="0.85"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Shadow (floating) -->
+  <ellipse cx="128" cy="236" rx="46" ry="8" fill="#000" fill-opacity="0.15"/>
+
+  <!-- Faceted crystal body -->
+  <path d="M128 26 L184 78 L168 190 L128 232 L88 190 L72 78 Z"
+        fill="url(#crystalGrad)" stroke="#e1bee7" stroke-width="2.5" filter="url(#glow)">
+    <animateTransform attributeName="transform" type="translate" values="0 0;0 -10;0 0" dur="3s" repeatCount="indefinite"/>
+  </path>
+  <!-- Inner facet lines -->
+  <line x1="128" y1="26" x2="128" y2="232" stroke="#ffffff" stroke-opacity="0.35" stroke-width="1.5"/>
+  <line x1="72" y1="78" x2="184" y2="78" stroke="#ffffff" stroke-opacity="0.35" stroke-width="1.5"/>
+  <line x1="88" y1="190" x2="168" y2="190" stroke="#ffffff" stroke-opacity="0.35" stroke-width="1.5"/>
+
+  <!-- Angular eyes -->
+  <path d="M100 110 L112 122 L100 134 L92 122 Z" fill="#0a1420"/>
+  <path d="M156 110 L168 122 L156 134 L148 122 Z" fill="#0a1420"/>
+  </g>
+</svg>

package/dist/assets/pets/15-satellite-bot.svg

@@ -0,0 +1,55 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Antenna dish (kept 8px lower than original so the dish curve's peak stays clear
+       of the viewBox top edge during the idle float animation's -6px translateY) -->
+  <line x1="128" y1="24" x2="128" y2="54" stroke="url(#accentGrad)" stroke-width="4"/>
+  <path d="M100 24 Q128 4 156 24 Q128 36 100 24 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Solar panel wings -->
+  <rect x="4" y="88" width="50" height="70" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <line x1="4" y1="105" x2="54" y2="105" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="4" y1="123" x2="54" y2="123" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="4" y1="141" x2="54" y2="141" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <rect x="202" y="88" width="50" height="70" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <line x1="202" y1="105" x2="252" y2="105" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="202" y1="123" x2="252" y2="123" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="202" y1="141" x2="252" y2="141" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <rect x="54" y="116" width="16" height="10" fill="url(#accentGrad)"/>
+  <rect x="186" y="116" width="16" height="10" fill="url(#accentGrad)"/>
+
+  <!-- Round body -->
+  <circle cx="128" cy="140" r="76" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="82" y="106" width="92" height="64" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <circle cx="112" cy="138" r="9" fill="url(#accentGrad)">
+      <animate attributeName="r" values="9;2;9" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="144" cy="138" r="9" fill="url(#accentGrad)">
+      <animate attributeName="r" values="9;2;9" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- Struts / feet -->
+  <line x1="106" y1="212" x2="90" y2="236" stroke="url(#accentGrad)" stroke-width="6" stroke-linecap="round"/>
+  <line x1="150" y1="212" x2="166" y2="236" stroke="url(#accentGrad)" stroke-width="6" stroke-linecap="round"/>
+  </g>
+</svg>

package/dist/assets/pets/16-jellyfish-bot.svg

@@ -0,0 +1,47 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="domeGrad" x1="48" y1="30" x2="208" y2="120" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ce93d8" stop-opacity="0.85"/>
+      <stop offset="1" stop-color="#7e57c2" stop-opacity="0.8"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Dome head -->
+  <path d="M46 110 C46 56 82 26 128 26 C174 26 210 56 210 110 Z"
+        fill="url(#domeGrad)" stroke="#e1bee7" stroke-width="2.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <circle cx="102" cy="86" r="8" fill="#0a1420"/>
+    <circle cx="154" cy="86" r="8" fill="#0a1420"/>
+  </g>
+  <path d="M112 104 Q128 114 144 104" stroke="#0a1420" stroke-width="3" fill="none" stroke-linecap="round"/>
+
+  <!-- Tentacles -->
+  <path d="M64 110 Q56 150 66 190 Q72 210 62 232" stroke="#ba68c8" stroke-width="7" fill="none" stroke-linecap="round">
+    <animate attributeName="d" values="M64 110 Q56 150 66 190 Q72 210 62 232;M64 110 Q72 150 58 190 Q64 210 74 232;M64 110 Q56 150 66 190 Q72 210 62 232" dur="2.6s" repeatCount="indefinite"/>
+  </path>
+  <path d="M98 112 Q92 156 100 200 Q104 218 96 236" stroke="#ba68c8" stroke-width="7" fill="none" stroke-linecap="round">
+    <animate attributeName="d" values="M98 112 Q92 156 100 200 Q104 218 96 236;M98 112 Q104 156 92 200 Q96 218 106 236;M98 112 Q92 156 100 200 Q104 218 96 236" dur="2.9s" repeatCount="indefinite"/>
+  </path>
+  <path d="M132 114 Q128 158 134 202 Q136 220 130 238" stroke="#ba68c8" stroke-width="7" fill="none" stroke-linecap="round">
+    <animate attributeName="d" values="M132 114 Q128 158 134 202 Q136 220 130 238;M132 114 Q138 158 126 202 Q130 220 138 238;M132 114 Q128 158 134 202 Q136 220 130 238" dur="2.4s" repeatCount="indefinite"/>
+  </path>
+  <path d="M166 112 Q160 156 168 200 Q172 218 164 236" stroke="#ba68c8" stroke-width="7" fill="none" stroke-linecap="round">
+    <animate attributeName="d" values="M166 112 Q160 156 168 200 Q172 218 164 236;M166 112 Q172 156 160 200 Q164 218 174 236;M166 112 Q160 156 168 200 Q172 218 164 236" dur="2.7s" repeatCount="indefinite"/>
+  </path>
+  <path d="M196 110 Q204 150 194 190 Q188 210 198 232" stroke="#ba68c8" stroke-width="7" fill="none" stroke-linecap="round">
+    <animate attributeName="d" values="M196 110 Q204 150 194 190 Q188 210 198 232;M196 110 Q188 150 202 190 Q196 210 186 232;M196 110 Q204 150 194 190 Q188 210 198 232" dur="3.1s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- Glow dots -->
+  <circle cx="66" cy="170" r="3" fill="#e040fb" filter="url(#glow)"/>
+  <circle cx="132" cy="180" r="3" fill="#e040fb" filter="url(#glow)"/>
+  <circle cx="196" cy="170" r="3" fill="#e040fb" filter="url(#glow)"/>
+  </g>
+</svg>