queen-mq 0.1.0 → 0.1.2

package/assets/queen-logo-rose.svg

@@ -0,0 +1,239 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  
+  <!-- Decorative sparkles -->
+  <g id="sparkles">
+    <circle cx="25" cy="30" r="1" fill="url(#sparkleGradient)" opacity="0.8">
+      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="95" cy="35" r="1.5" fill="url(#sparkleGradient)" opacity="0.6">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="90" cy="85" r="1" fill="url(#sparkleGradient)" opacity="0.7">
+      <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="30" cy="90" r="1.2" fill="url(#sparkleGradient)" opacity="0.5">
+      <animate attributeName="opacity" values="0.5;0.9;0.5" dur="2.8s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  
+  <!-- Queue lines flowing (messages being managed) -->
+  <g id="queue-lines">
+    <!-- Left side queues -->
+    <g opacity="0.8">
+      <rect x="15" y="65" width="20" height="3" rx="1.5" fill="url(#queueGradient1)">
+        <animate attributeName="x" values="15;20;15" dur="4s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="18" y="72" width="15" height="3" rx="1.5" fill="url(#queueGradient2)">
+        <animate attributeName="x" values="18;23;18" dur="3.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="12" y="79" width="25" height="3" rx="1.5" fill="url(#queueGradient3)">
+        <animate attributeName="x" values="12;17;12" dur="4.5s" repeatCount="indefinite"/>
+      </rect>
+    </g>
+    
+    <!-- Right side queues -->
+    <g opacity="0.8">
+      <rect x="85" y="65" width="20" height="3" rx="1.5" fill="url(#queueGradient1)">
+        <animate attributeName="x" values="85;80;85" dur="4s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="87" y="72" width="15" height="3" rx="1.5" fill="url(#queueGradient2)">
+        <animate attributeName="x" values="87;82;87" dur="3.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="83" y="79" width="25" height="3" rx="1.5" fill="url(#queueGradient3)">
+        <animate attributeName="x" values="83;78;83" dur="4.5s" repeatCount="indefinite"/>
+      </rect>
+    </g>
+  </g>
+  
+  <!-- Main duck with crown -->
+  <g id="queen-duck" transform="translate(60, 60)">
+    <!-- Shadow -->
+    <ellipse cx="0" cy="35" rx="25" ry="8" fill="#000000" opacity="0.15"/>
+    
+    <!-- Body with elegant curves -->
+    <path d="M -20 5 Q -25 15 -22 28 Q -18 38 -5 40 L 5 40 Q 18 38 22 28 Q 25 15 20 5 Q 15 -2 8 -3 L -8 -3 Q -15 -2 -20 5 Z" 
+          fill="url(#bodyGradient)" stroke="url(#bodyStroke)" stroke-width="1.5"/>
+    
+    <!-- Chest highlight -->
+    <ellipse cx="0" cy="15" rx="12" ry="15" fill="url(#chestHighlight)" opacity="0.6"/>
+    
+    <!-- Wing detail left -->
+    <path d="M -18 8 Q -23 12 -22 20 Q -20 25 -15 22 Q -12 18 -13 12 Z" 
+          fill="url(#wingGradient)" stroke="url(#wingStroke)" stroke-width="0.8" opacity="0.9"/>
+    
+    <!-- Wing detail right -->
+    <path d="M 18 8 Q 23 12 22 20 Q 20 25 15 22 Q 12 18 13 12 Z" 
+          fill="url(#wingGradient)" stroke="url(#wingStroke)" stroke-width="0.8" opacity="0.9"/>
+    
+    <!-- Neck -->
+    <path d="M -5 -3 Q -6 -8 -5 -12 L 5 -12 Q 6 -8 5 -3" 
+          fill="url(#neckGradient)" stroke="none"/>
+    
+    <!-- Head with better proportions -->
+    <ellipse cx="0" cy="-18" rx="12" ry="13" fill="url(#headGradient)" stroke="url(#headStroke)" stroke-width="1.2"/>
+    
+    <!-- Head highlight -->
+    <ellipse cx="-2" cy="-20" rx="6" ry="7" fill="url(#headHighlight)" opacity="0.5"/>
+    
+    <!-- Beak with royal touch -->
+    <path d="M 8 -18 Q 14 -18 15 -17 Q 15 -15 14 -14 Q 13 -13 8 -14 Z" 
+          fill="url(#beakGradient)" stroke="#FCD34D" stroke-width="0.8"/>
+    
+    <!-- Eye with elegant details -->
+    <ellipse cx="4" cy="-19" rx="3" ry="3.5" fill="white"/>
+    <ellipse cx="4.5" cy="-19" rx="2" ry="2.5" fill="url(#eyeGradient)"/>
+    <circle cx="5" cy="-19.5" r="1" fill="#1F2937"/>
+    <circle cx="5.5" cy="-20" r="0.4" fill="white"/>
+    
+    <!-- Eyelashes for feminine touch -->
+    <path d="M 6 -22 L 7 -23.5 M 7 -21.5 L 8.5 -22.5 M 7.5 -21 L 9 -21.5" 
+          stroke="#1F2937" stroke-width="0.4" fill="none" stroke-linecap="round"/>
+    
+    <!-- Cheek blush -->
+    <ellipse cx="1" cy="-15" rx="2.5" ry="1.5" fill="#FFB6C1" opacity="0.4"/>
+    
+    <!-- Crown -->
+    <g id="crown" transform="translate(0, -32)">
+      <ellipse cx="0" cy="2" rx="12" ry="3" fill="#000000" opacity="0.1"/>
+      <path d="M -12 0 L -10 -8 L -6 -3 L -3 -10 L 0 -5 L 3 -10 L 6 -3 L 10 -8 L 12 0 Q 10 2 0 2 Q -10 2 -12 0 Z" 
+            fill="url(#crownGradient)" stroke="url(#crownStroke)" stroke-width="1.2" stroke-linejoin="round"/>
+      <path d="M -10 0 L -8 -6 L -5 -2 L -2 -8 L 0 -4 L 2 -8 L 5 -2 L 8 -6 L 10 0" 
+            fill="none" stroke="#FEF3C7" stroke-width="0.5" opacity="0.6"/>
+      <circle cx="0" cy="-2" r="2.5" fill="url(#centerJewelGradient)" stroke="#f43f5e" stroke-width="0.5"/>
+      <circle cx="0" cy="-2" r="1.5" fill="url(#jewelSparkle)" opacity="0.8"/>
+      <circle cx="-6" cy="-1" r="1.8" fill="url(#leftJewelGradient)" stroke="#fb7185" stroke-width="0.4"/>
+      <circle cx="6" cy="-1" r="1.8" fill="url(#rightJewelGradient)" stroke="#e11d48" stroke-width="0.4"/>
+      <circle cx="-3" cy="-4" r="1" fill="#fda4af" opacity="0.9"/>
+      <circle cx="3" cy="-4" r="1" fill="#fda4af" opacity="0.9"/>
+      <circle cx="0" cy="-10" r="1.2" fill="#FEF3C7"/>
+      <circle cx="-6" cy="-8" r="1" fill="#FEF3C7"/>
+      <circle cx="6" cy="-8" r="1" fill="#FEF3C7"/>
+    </g>
+    
+    <!-- Tail feathers -->
+    <g id="tail" transform="translate(-22, 25)">
+      <path d="M 0 0 Q -3 3 -2 7 Q -1 9 1 8 Q 2 5 0 0" fill="url(#tailGradient)" opacity="0.8"/>
+      <path d="M 2 -1 Q -1 2 0 6 Q 1 8 3 7 Q 4 4 2 -1" fill="url(#tailGradient)" opacity="0.7"/>
+      <path d="M 4 -2 Q 1 1 2 5 Q 3 7 5 6 Q 6 3 4 -2" fill="url(#tailGradient)" opacity="0.6"/>
+    </g>
+  </g>
+  
+  <defs>
+    <radialGradient id="sparkleGradient">
+      <stop offset="0%" style="stop-color:#fb7185;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fda4af;stop-opacity:0" />
+    </radialGradient>
+    
+    <linearGradient id="queueGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#f43f5e;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#f43f5e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#f43f5e;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <linearGradient id="queueGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#3B82F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <linearGradient id="queueGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#F59E0B;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#F59E0B;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F59E0B;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <radialGradient id="bodyGradient" cx="50%" cy="30%">
+      <stop offset="0%" style="stop-color:#fecdd3;stop-opacity:1" />
+      <stop offset="70%" style="stop-color:#fda4af;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#f43f5e;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="bodyStroke" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#fb7185;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#e11d48;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="chestHighlight">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#fff1f2;stop-opacity:0.2" />
+    </radialGradient>
+    
+    <linearGradient id="wingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#fda4af;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#e11d48;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="wingStroke">
+      <stop offset="0%" style="stop-color:#f43f5e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#be123c;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="neckGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#fda4af;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fecdd3;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="headGradient" cx="40%" cy="40%">
+      <stop offset="0%" style="stop-color:#ffe4e6;stop-opacity:1" />
+      <stop offset="60%" style="stop-color:#fecdd3;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fb7185;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="headStroke">
+      <stop offset="0%" style="stop-color:#fb7185;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#f43f5e;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="headHighlight">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fff1f2;stop-opacity:0" />
+    </radialGradient>
+    
+    <linearGradient id="beakGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#FDE68A;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FCD34D;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="eyeGradient">
+      <stop offset="0%" style="stop-color:#92400E;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#451A03;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="crownGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#FDE68A;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#FCD34D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FEF3C7;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="crownStroke">
+      <stop offset="0%" style="stop-color:#FCD34D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="centerJewelGradient">
+      <stop offset="0%" style="stop-color:#ffe4e6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#f43f5e;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="leftJewelGradient">
+      <stop offset="0%" style="stop-color:#fecdd3;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#e11d48;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="rightJewelGradient">
+      <stop offset="0%" style="stop-color:#ffe4e6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#be123c;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="jewelSparkle">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0" />
+    </radialGradient>
+    
+    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#fb7185;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#e11d48;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>
+

package/assets/queen-logo.svg

@@ -0,0 +1,263 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  
+  <!-- Decorative sparkles -->
+  <g id="sparkles">
+    <circle cx="25" cy="30" r="1" fill="url(#sparkleGradient)" opacity="0.8">
+      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="95" cy="35" r="1.5" fill="url(#sparkleGradient)" opacity="0.6">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="90" cy="85" r="1" fill="url(#sparkleGradient)" opacity="0.7">
+      <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="30" cy="90" r="1.2" fill="url(#sparkleGradient)" opacity="0.5">
+      <animate attributeName="opacity" values="0.5;0.9;0.5" dur="2.8s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  
+  <!-- Queue lines flowing (messages being managed) -->
+  <g id="queue-lines">
+    <!-- Left side queues -->
+    <g opacity="0.8">
+      <rect x="15" y="65" width="20" height="3" rx="1.5" fill="url(#queueGradient1)">
+        <animate attributeName="x" values="15;20;15" dur="4s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="18" y="72" width="15" height="3" rx="1.5" fill="url(#queueGradient2)">
+        <animate attributeName="x" values="18;23;18" dur="3.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="12" y="79" width="25" height="3" rx="1.5" fill="url(#queueGradient3)">
+        <animate attributeName="x" values="12;17;12" dur="4.5s" repeatCount="indefinite"/>
+      </rect>
+    </g>
+    
+    <!-- Right side queues -->
+    <g opacity="0.8">
+      <rect x="85" y="65" width="20" height="3" rx="1.5" fill="url(#queueGradient1)">
+        <animate attributeName="x" values="85;80;85" dur="4s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="87" y="72" width="15" height="3" rx="1.5" fill="url(#queueGradient2)">
+        <animate attributeName="x" values="87;82;87" dur="3.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="83" y="79" width="25" height="3" rx="1.5" fill="url(#queueGradient3)">
+        <animate attributeName="x" values="83;78;83" dur="4.5s" repeatCount="indefinite"/>
+      </rect>
+    </g>
+  </g>
+  
+  <!-- Main duck with crown -->
+  <g id="queen-duck" transform="translate(60, 60)">
+    <!-- Shadow -->
+    <ellipse cx="0" cy="35" rx="25" ry="8" fill="#000000" opacity="0.15"/>
+    
+    <!-- Body with elegant curves -->
+    <path d="M -20 5 Q -25 15 -22 28 Q -18 38 -5 40 L 5 40 Q 18 38 22 28 Q 25 15 20 5 Q 15 -2 8 -3 L -8 -3 Q -15 -2 -20 5 Z" 
+          fill="url(#bodyGradient)" stroke="url(#bodyStroke)" stroke-width="1.5"/>
+    
+    <!-- Chest highlight -->
+    <ellipse cx="0" cy="15" rx="12" ry="15" fill="url(#chestHighlight)" opacity="0.6"/>
+    
+    <!-- Wing detail left -->
+    <path d="M -18 8 Q -23 12 -22 20 Q -20 25 -15 22 Q -12 18 -13 12 Z" 
+          fill="url(#wingGradient)" stroke="url(#wingStroke)" stroke-width="0.8" opacity="0.9"/>
+    
+    <!-- Wing detail right -->
+    <path d="M 18 8 Q 23 12 22 20 Q 20 25 15 22 Q 12 18 13 12 Z" 
+          fill="url(#wingGradient)" stroke="url(#wingStroke)" stroke-width="0.8" opacity="0.9"/>
+    
+    <!-- Neck -->
+    <path d="M -5 -3 Q -6 -8 -5 -12 L 5 -12 Q 6 -8 5 -3" 
+          fill="url(#neckGradient)" stroke="none"/>
+    
+    <!-- Head with better proportions -->
+    <ellipse cx="0" cy="-18" rx="12" ry="13" fill="url(#headGradient)" stroke="url(#headStroke)" stroke-width="1.2"/>
+    
+    <!-- Head highlight -->
+    <ellipse cx="-2" cy="-20" rx="6" ry="7" fill="url(#headHighlight)" opacity="0.5"/>
+    
+      <!-- Beak with royal touch -->
+      <path d="M 8 -18 Q 14 -18 15 -17 Q 15 -15 14 -14 Q 13 -13 8 -14 Z" 
+            fill="url(#beakGradient)" stroke="#FCD34D" stroke-width="0.8"/>
+    
+    <!-- Eye with elegant details -->
+    <ellipse cx="4" cy="-19" rx="3" ry="3.5" fill="white"/>
+    <ellipse cx="4.5" cy="-19" rx="2" ry="2.5" fill="url(#eyeGradient)"/>
+    <circle cx="5" cy="-19.5" r="1" fill="#1F2937"/>
+    <circle cx="5.5" cy="-20" r="0.4" fill="white"/> <!-- Eye sparkle -->
+    
+    <!-- Eyelashes for feminine touch -->
+    <path d="M 6 -22 L 7 -23.5 M 7 -21.5 L 8.5 -22.5 M 7.5 -21 L 9 -21.5" 
+          stroke="#1F2937" stroke-width="0.4" fill="none" stroke-linecap="round"/>
+    
+    <!-- Cheek blush -->
+    <ellipse cx="1" cy="-15" rx="2.5" ry="1.5" fill="#FFB6C1" opacity="0.4"/>
+    
+    <!-- Crown - more elegant and detailed -->
+    <g id="crown" transform="translate(0, -32)">
+      <!-- Crown shadow -->
+      <ellipse cx="0" cy="2" rx="12" ry="3" fill="#000000" opacity="0.1"/>
+      
+      <!-- Main crown shape with better design -->
+      <path d="M -12 0 L -10 -8 L -6 -3 L -3 -10 L 0 -5 L 3 -10 L 6 -3 L 10 -8 L 12 0 Q 10 2 0 2 Q -10 2 -12 0 Z" 
+            fill="url(#crownGradient)" stroke="url(#crownStroke)" stroke-width="1.2" stroke-linejoin="round"/>
+      
+        <!-- Crown inner detail -->
+        <path d="M -10 0 L -8 -6 L -5 -2 L -2 -8 L 0 -4 L 2 -8 L 5 -2 L 8 -6 L 10 0" 
+              fill="none" stroke="#FEF3C7" stroke-width="0.5" opacity="0.6"/>
+      
+        <!-- Center jewel (main) -->
+        <circle cx="0" cy="-2" r="2.5" fill="url(#centerJewelGradient)" stroke="#10B981" stroke-width="0.5"/>
+        <circle cx="0" cy="-2" r="1.5" fill="url(#jewelSparkle)" opacity="0.8"/>
+        
+        <!-- Side jewels -->
+        <circle cx="-6" cy="-1" r="1.8" fill="url(#leftJewelGradient)" stroke="#059669" stroke-width="0.4"/>
+        <circle cx="6" cy="-1" r="1.8" fill="url(#rightJewelGradient)" stroke="#047857" stroke-width="0.4"/>
+        
+        <!-- Small decorative gems -->
+        <circle cx="-3" cy="-4" r="1" fill="#6EE7B7" opacity="0.9"/>
+        <circle cx="3" cy="-4" r="1" fill="#6EE7B7" opacity="0.9"/>
+      
+        <!-- Crown peaks -->
+        <circle cx="0" cy="-10" r="1.2" fill="#FEF3C7"/>
+        <circle cx="-6" cy="-8" r="1" fill="#FEF3C7"/>
+        <circle cx="6" cy="-8" r="1" fill="#FEF3C7"/>
+    </g>
+    
+    <!-- Tail feathers -->
+    <g id="tail" transform="translate(-22, 25)">
+      <path d="M 0 0 Q -3 3 -2 7 Q -1 9 1 8 Q 2 5 0 0" fill="url(#tailGradient)" opacity="0.8"/>
+      <path d="M 2 -1 Q -1 2 0 6 Q 1 8 3 7 Q 4 4 2 -1" fill="url(#tailGradient)" opacity="0.7"/>
+      <path d="M 4 -2 Q 1 1 2 5 Q 3 7 5 6 Q 6 3 4 -2" fill="url(#tailGradient)" opacity="0.6"/>
+    </g>
+  </g>
+  
+  <!-- Gradient definitions -->
+  <defs>
+    <!-- Sparkle gradient -->
+    <radialGradient id="sparkleGradient">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#6EE7B7;stop-opacity:0" />
+    </radialGradient>
+    
+    <!-- Queue gradients -->
+    <linearGradient id="queueGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#10B981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <linearGradient id="queueGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#3B82F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <linearGradient id="queueGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#F59E0B;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#F59E0B;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F59E0B;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <!-- Body gradients -->
+    <radialGradient id="bodyGradient" cx="50%" cy="30%">
+      <stop offset="0%" style="stop-color:#A7F3D0;stop-opacity:1" />
+      <stop offset="70%" style="stop-color:#6EE7B7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="bodyStroke" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="chestHighlight">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#D1FAE5;stop-opacity:0.2" />
+    </radialGradient>
+    
+    <!-- Wing gradients -->
+    <linearGradient id="wingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6EE7B7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="wingStroke">
+      <stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#047857;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Neck gradient -->
+    <linearGradient id="neckGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#6EE7B7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#86EFAC;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Head gradients -->
+    <radialGradient id="headGradient" cx="40%" cy="40%">
+      <stop offset="0%" style="stop-color:#BBF7D0;stop-opacity:1" />
+      <stop offset="60%" style="stop-color:#86EFAC;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="headStroke">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="headHighlight">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F0FDF4;stop-opacity:0" />
+    </radialGradient>
+    
+    <!-- Beak gradient -->
+    <linearGradient id="beakGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#FDE68A;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FCD34D;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Eye gradient -->
+    <radialGradient id="eyeGradient">
+      <stop offset="0%" style="stop-color:#92400E;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#451A03;stop-opacity:1" />
+    </radialGradient>
+    
+    <!-- Crown gradients -->
+    <linearGradient id="crownGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#FDE68A;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#FCD34D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FEF3C7;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="crownStroke">
+      <stop offset="0%" style="stop-color:#FCD34D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Jewel gradients -->
+    <radialGradient id="centerJewelGradient">
+      <stop offset="0%" style="stop-color:#D1FAE5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="leftJewelGradient">
+      <stop offset="0%" style="stop-color:#A7F3D0;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="rightJewelGradient">
+      <stop offset="0%" style="stop-color:#D1FAE5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#047857;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="jewelSparkle">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0" />
+    </radialGradient>
+    
+    <!-- Tail gradient -->
+    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>

package/examples/batch-processing.js

@@ -0,0 +1,58 @@
+import { Queen } from '../src/client/client.js';
+
+const q = new Queen({ baseUrl: 'http://localhost:6632' });
+
+await q.queue('demo-queue', {
+  leaseTime: 30,
+  retryLimit: 3
+});
+
+console.log('=== Example 1: take() - Individual message processing ===');
+let count1 = 0;
+for await (const message of q.take('demo-queue', { 
+  batch: 10,      // Fetch 10 at a time internally
+  limit: 25,      // Process 25 total
+  wait: false 
+})) {
+  console.log(`Message ${++count1}:`, message.payload);
+  await q.ack(message);
+}
+
+console.log('\n=== Example 2: takeBatch() - Batch processing ===');
+let count2 = 0;
+for await (const messages of q.takeBatch('demo-queue', { 
+  batch: 10,      // Fetch 10 at a time
+  limit: 25,      // Process 25 total (across batches)
+  wait: false 
+})) {
+  console.log(`Batch ${++count2}: ${messages.length} messages`);
+  
+  // Process entire batch
+  for (const msg of messages) {
+    console.log(`  - ${msg.payload}`);
+  }
+  
+  // Acknowledge entire batch at once
+  await q.ack(messages);
+}
+
+console.log('\n=== Example 3: High-throughput batch processing ===');
+let totalProcessed = 0;
+const startTime = Date.now();
+
+for await (const messages of q.takeBatch('demo-queue', { 
+  batch: 1000,       // Large batches for throughput
+  wait: true,        // Long polling
+  idleTimeout: 5000  // Exit after 5s of no messages
+})) {
+  totalProcessed += messages.length;
+  await q.ack(messages);
+  
+  const rate = totalProcessed / ((Date.now() - startTime) / 1000);
+  console.log(`Processed ${messages.length} | Total: ${totalProcessed} | Rate: ${rate.toFixed(0)} msg/s`);
+}
+
+console.log(`\nCompleted: ${totalProcessed} messages`);
+
+await q.close();
+