feat(rosto): motor de palpebras, 4 rostos novos, formato do olho e tela Rosto

- rosto-motor.js: emocoes como posicao de palpebra (cima, inclinacao, baixo)
  com transicao suave; respiracao, sacadas e piscada que achata o olho
- rostos novos Carinha Viva, Bloco, Matriz (LEDs) e Lente (iris/pupila);
  os classicos continuam; emoji/figurinha nos olhos seguem no SVG
- formato do olho (padrao, redondo, pilula, quadrado, largo) para Viva,
  Bloco e Matriz; salvo na aparencia e enviado como ordem "formato X"
- toque na tela do S10: cutucar = susto e risada, deslizar = carinho,
  tocar dormindo acorda
- painel: tela Rosto (celular em destaque, cartoes de rosto, formatos,
  cores, testar emocoes so na previa ou no celular, lista do que ja esta
  pronto); Ao vivo leva a ela; paleta ganha rostos e formatos
- corrige /comando rosto que nao salvava a aparencia

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

web/src/App.svelte

@@ -10,12 +10,13 @@
   import { favoritos, gesto, pararTudo } from './lib/comandos.svelte';
   import { conectar, estado } from './lib/estado.svelte';
   import { paleta } from './lib/paleta.svelte';
-  import { nav, ROTAS, type Rota } from './lib/rotas.svelte';
+  import { nav, ROTAS, SECUNDARIAS, tituloDa, type Rota } from './lib/rotas.svelte';
   import AoVivo from './telas/AoVivo.svelte';
   import Ajustes from './telas/Ajustes.svelte';
   import Conversa from './telas/Conversa.svelte';
   import Movimento from './telas/Movimento.svelte';
   import Reacoes from './telas/Reacoes.svelte';
+  import Rosto from './telas/Rosto.svelte';
 
   const TELAS: Record<Rota, Component> = {
     'ao-vivo': AoVivo,
@@ -23,8 +24,9 @@
     reacoes: Reacoes,
     movimento: Movimento,
     ajustes: Ajustes,
+    rosto: Rosto,
   };
-  const ICONES: Record<Rota, Component<any>> = {
+  const ICONES: Record<string, Component<any>> = {
     'ao-vivo': Video,
     conversa: MessageCircle,
     reacoes: Smile,
@@ -32,6 +34,8 @@
     ajustes: Settings,
   };
   const Tela = $derived(TELAS[nav.atual]);
+  // Páginas secundárias acendem a seção de onde vieram.
+  const secao = $derived(SECUNDARIAS.find((r) => r.id === nav.atual)?.volta ?? nav.atual);
 
   // ---------- tema
   let tema = $state<'dark' | 'light'>('dark');
@@ -126,7 +130,7 @@
       {#each ROTAS as r (r.id)}
         {@const Icone = ICONES[r.id]}
         <li>
-          <a href={'#/' + r.id} aria-current={nav.atual === r.id ? 'page' : undefined}>
+          <a href={'#/' + r.id} aria-current={secao === r.id ? 'page' : undefined}>
             <Icone size={20} /> <span>{r.titulo}</span>
           </a>
         </li>
@@ -138,7 +142,7 @@
   </nav>
 
   <header class="topo">
-    <h1 class="titulo">{ROTAS.find((r) => r.id === nav.atual)?.titulo}</h1>
+    <h1 class="titulo">{tituloDa(nav.atual)}</h1>
     <div class="status linha">
       <Selo tom={estado.conexao === 'aberta' ? 'ok' : estado.conexao === 'conectando' ? 'aviso' : 'perigo'}>
         {conexaoTexto}
@@ -169,7 +173,7 @@
     <Tela />
   </main>
 
-  {#if nav.atual !== 'ao-vivo' && nav.atual !== 'reacoes'}
+  {#if nav.atual !== 'ao-vivo' && nav.atual !== 'reacoes' && nav.atual !== 'rosto'}
     <MiniRosto />
   {/if}
 </div>