Add 150 UI and page state stickers in three pending sections

404s, loaders, success, errors, empty states, confirmation, under
construction, offline and more: 50 monochrome (ui), 50 colored (uicolor)
and 50 with an anime girl (uianime), on /test until approved.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

gen/ui/error/bug.js

@@ -0,0 +1,26 @@
+// a little beetle scuttles in a figure eight over a code editor, the line it's crawling on lights up as the buggy one
+const{sin,cos,PI,atan2,round,min,max}=Math,T=2*PI
+export const frames=24,delay=70
+const C=[[0,[28,1],[40,0],[22,0]],[1,[22,1],[58,0]],[2,[30,0],[18,1],[36,0]],[2,[46,0],[26,0]],[1,[16,1],[40,0]],[0,[12,1]],[0,[34,1],[50,0]]]
+export default(c,t)=>{
+  const x=128+74*sin(T*t),y=148+44*sin(2*T*t),h=atan2(88*cos(2*T*t),74*cos(T*t)),r=min(6,max(0,round((y-88)/20))),st=sin(T*t*8)
+  c.beginPath();c.roundRect(16,36,224,188,14);c.fill();c.stroke()
+  c.beginPath();c.moveTo(16,64);c.lineTo(240,64);c.stroke()
+  c.lineWidth=4;for(const k of[0,1,2])c.beginPath(),c.arc(36+k*18,50,5,0,T),k?c.stroke():(c.fillStyle='#111',c.fill(),c.stroke())
+  c.fillStyle='#ddd';c.beginPath();c.roundRect(26,79+r*20,204,18,5);c.fill()
+  C.forEach(([n,...s],k)=>{
+    const y=88+k*20;let x=60+n*18
+    c.lineWidth=8;c.strokeStyle='#bbb';c.beginPath();c.moveTo(34,y);c.lineTo(42,y);c.stroke()
+    for(const[l,d]of s)c.strokeStyle=d?'#111':'#aaa',c.beginPath(),c.moveTo(x,y),c.lineTo(x+l,y),c.stroke(),x+=l+12
+  })
+  c.strokeStyle='#111';c.lineWidth=3;c.beginPath();for(let k=0;k<=30;k++)c.lineTo(60+k*4,88+r*20+10+(k%2?2:-2));c.stroke()
+  c.translate(x,y);c.rotate(h);c.scale(1.25,1.25)
+  c.lineWidth=4.5
+  for(const s of[-1,1])for(const k of[-1,0,1]){const g=(k+s)%2?st:-st;c.beginPath();c.moveTo(k*9,s*10);c.lineTo(k*12+g*6,s*22);c.lineTo(k*16+g*7,s*28);c.stroke()}
+  for(const s of[-1,1]){c.beginPath();c.moveTo(26,s*5);c.quadraticCurveTo(36,s*8,40,s*16+st*2*s);c.stroke()}
+  c.fillStyle='#111';c.lineWidth=6;c.beginPath();c.arc(22,0,11,0,T);c.fill();c.stroke()
+  c.beginPath();c.ellipse(-2,0,23,18,0,0,T);c.fill();c.stroke()
+  c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.moveTo(14,0);c.lineTo(-22,0);c.stroke()
+  c.fillStyle='#fff';for(const[a,b,r]of[[2,-9,4],[-12,-8,3],[2,9,4],[-12,8,3]])c.beginPath(),c.arc(a,b,r,0,T),c.fill()
+  for(const s of[-1,1])c.beginPath(),c.arc(26,s*5,4,0,T),c.fill();c.fillStyle='#111';for(const s of[-1,1])c.beginPath(),c.arc(28,s*5,2,0,T),c.fill()
+}

gen/ui/error/cross.js

@@ -0,0 +1,13 @@
+// round error badge with a big X shaking its head side to side like "nope nope", then pausing
+const{sin,PI,abs,min}=Math,T=2*PI
+export const frames=20,delay=60
+export default(c,t)=>{
+  const D=(f,a=12,b=5)=>{for(const[w,s]of[[a,'#111'],[b,'#fff']])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),f(),c.stroke();c.lineWidth=7;c.strokeStyle='#111'}
+  const u=min(1,t/.6),s=sin(T*u*3)*sin(PI*u)**.6
+  if(abs(s)>.6){const d=s>0?-1:1;for(const r of[96,114])D(()=>c.arc(128+16*s,128,r,d>0?-.4:PI-.4,d>0?.4:PI+.4),11,4)}
+  c.translate(128+16*s,128);c.rotate(.1*s);c.scale(1-.06*abs(s),1)
+  c.beginPath();c.arc(0,0,84,0,T);c.fill();c.stroke()
+  c.lineWidth=5;c.beginPath();c.arc(0,0,70,0,T);c.stroke()
+  c.translate(18*s,0);c.scale(1-.2*abs(s),1);c.lineWidth=26
+  c.beginPath();c.moveTo(-30,-30);c.lineTo(30,30);c.moveTo(30,-30);c.lineTo(-30,30);c.stroke()
+}

gen/ui/error/robot.js

@@ -0,0 +1,34 @@
+// broken robot slumped on the floor: head drooping, bent antenna sparking, one eye flickering, a loose spring boinging out of its head
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=16,delay=90
+const FL=[1,1,0,1,0,0,1,1,1,1,0,1,1,0,1,1],SP=[1,0,0,1,1,0,0,0,1,0,1,1,0,0,0,0]
+export default(c,t,i)=>{
+  const D=(f,a=20,b=8)=>{for(const[l,s]of[[a,'#111'],[b,'#fff']])c.lineWidth=l,c.strokeStyle=s,c.beginPath(),f(),c.stroke();c.lineWidth=7;c.strokeStyle='#111'}
+  c.translate(-8,0)
+  const br=2*sin(T*t),ha=.5+.04*sin(T*t-.6)
+  for(const d of[-1,1]){D(()=>{c.moveTo(118+d*24,206);c.lineTo(118+d*44,220)});c.beginPath();c.roundRect(118+d*50-18,210,36,22,9);c.fill();c.stroke()}
+  for(const d of[-1,1]){
+    D(()=>{c.moveTo(118+d*44,160+br);c.quadraticCurveTo(118+d*66,176,118+d*66,206)})
+    c.lineWidth=6;c.beginPath();c.arc(118+d*66,214,10,0,T);c.fill();c.stroke();c.lineWidth=7
+  }
+  c.beginPath();c.roundRect(72,144+br,92,70-br,14);c.fill();c.stroke()
+  c.fillStyle='#111';c.beginPath();c.arc(100,168+br,6,0,T);c.fill()
+  c.lineWidth=4;c.beginPath();c.arc(118,168+br,6,0,T);c.stroke()
+  c.beginPath();c.moveTo(131,162+br);c.lineTo(141,172+br);c.moveTo(141,162+br);c.lineTo(131,172+br);c.stroke()
+  for(const y of[188,198])c.beginPath(),c.moveTo(98,y+br*.5),c.lineTo(138,y+br*.5),c.stroke()
+  c.fillStyle='#fff';c.lineWidth=7
+  c.translate(126,146+br);c.rotate(ha)
+  c.beginPath();c.rect(-8,-10,16,12);c.fill();c.stroke()
+  c.save();c.translate(-44,-48);c.rotate(-1.75+.35*sin(2*T*t))
+  D(()=>{for(let k=0;k<=60;k++){const u=k/60;c.lineTo(9*sin(u*T*4.5),-u*46)}},13,5)
+  c.beginPath();c.arc(0,-52,9,0,T);c.fill();c.stroke();c.restore()
+  D(()=>{c.moveTo(16,-70);c.lineTo(26,-92);c.lineTo(50,-90)},12,5)
+  if(SP[i])for(let k=0;k<4;k++){const a=-1.6+k*1.05+(i%3)*.25,x=55+cos(a)*13,y=-90+sin(a)*13,p=a+1.4;D(()=>{c.moveTo(x,y);c.lineTo(x+cos(a)*10+cos(p)*5,y+sin(a)*10+sin(p)*5);c.lineTo(x+cos(a)*12-cos(p)*5,y+sin(a)*12-sin(p)*5);c.lineTo(x+cos(a)*19,y+sin(a)*19)},10,4)}
+  c.beginPath();c.arc(55,-90,8,0,T);c.fill();c.stroke()
+  c.beginPath();c.roundRect(-46,-72,92,64,15);c.fill();c.stroke()
+  c.fillStyle='#111'
+  if(FL[i])c.beginPath(),c.roundRect(-28,-52,14,20,7),c.fill()
+  else c.lineWidth=5,c.beginPath(),c.moveTo(-28,-41),c.lineTo(-14,-41),c.stroke()
+  c.lineWidth=6;c.beginPath();c.moveTo(13,-51);c.lineTo(27,-35);c.moveTo(27,-51);c.lineTo(13,-35);c.stroke()
+  c.lineWidth=5;c.beginPath();for(let k=0;k<=4;k++)c.lineTo(-14+k*7,-20+(k%2?-4:2));c.stroke()
+}