feat(criacao): estúdio para criar expressões, atividades e figurinhas com IA

Menu "Criar com IA" (Ao vivo › Gestos e Reações) com grade igual à dos
favoritos. Para cada pedido escolhe-se o tipo (expressão, atividade ou
figurinha) e a IA: Gemini, IA local (qualquer servidor compatível com
OpenAI na rede, como o ROG Ally com LM Studio/llama-server) ou o Qwen do S10.

- A IA não escreve código: responde uma receita de formato fixo (schema
  JSON) montada só com peças que o rosto já anima. O servidor valida,
  limita números e descarta peças desconhecidas antes de chegar ao celular.
- Reaproveita o que existe: o prompt leva exemplos reais dos gestos e
  atividades atuais, e "Basear em" manda a receita de um gesto, atividade
  ou criação para a IA fazer uma variação.
- Expressões viram sequências como as de sequencias(), com mãos e espiral.
- Atividades usam uma cena genérica com o bonequinho (poses, pernas, pulo,
  balanço) e os objetos das cenas feitas à mão (bola, livro, xícara,
  notas, estrelas, coração, Zzz, chama, bolha, halter, microfone,
  controle, pincel, flor), com movimentos pular/girar/subir/orbitar.
- Figurinhas reaproveitam o desenho e a biblioteca de reações.
- A estrela põe expressões e atividades criadas nos favoritos (e nas
  teclas 1 a 9); a IA local é configurada na própria tela, com teste.

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

web/src/lib/componentes/Gestos.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
   import { Star } from '@lucide/svelte';
-  import { favoritos, gesto, GESTOS_INFO, gestosDisponiveis } from '../comandos.svelte';
+  import { favoritos, GESTOS_INFO, gestosDisponiveis, tocarFavorito } from '../comandos.svelte';
+  import { criacao } from '../criacao.svelte';
 
-  // compacto: só os favoritos com atalho 1–9 (dock). Completo: todos, com estrela para fixar.
+  // compacto: só os favoritos com atalho 1–9 (dock), inclusive criações do estúdio. Completo: todos, com estrela.
   let { completo = false }: { completo?: boolean } = $props();
-  const lista = $derived(completo ? gestosDisponiveis() : favoritos.lista.filter((g) => g in GESTOS_INFO));
+  $effect(() => {
+    if (!completo && !criacao.status && favoritos.lista.some((g) => g.startsWith('criado:'))) criacao.carregar();
+  });
+  function infoDe(g: string) {
+    if (g.startsWith('criado:')) {
+      const c = criacao.item(Number(g.slice(7)));
+      return c ? { nome: c.nome, emoji: c.emoji } : null;
+    }
+    return GESTOS_INFO[g] ?? null;
+  }
+  const lista = $derived(completo ? gestosDisponiveis() : favoritos.lista.filter((g) => infoDe(g)));
 </script>
 
 <div class="gestos" class:completo>
   {#each lista as g, i (g)}
-    {@const info = GESTOS_INFO[g]}
+    {@const info = infoDe(g)!}
     <div class="item">
-      <button class="gesto" onclick={() => gesto(g)} title={completo || i > 8 ? info.nome : `${info.nome} (tecla ${i + 1})`}>
+      <button class="gesto" class:criado={g.startsWith('criado:')} onclick={() => tocarFavorito(g)} title={completo || i > 8 ? info.nome : `${info.nome} (tecla ${i + 1})`}>
         <span class="emoji" aria-hidden="true">{info.emoji}</span>
         <span class="nome">{info.nome}</span>
         {#if !completo && i < 9}<kbd>{i + 1}</kbd>{/if}
@@ -71,6 +82,13 @@
     color: var(--texto-2);
     text-align: center;
   }
+  .gesto.criado::after {
+    content: '✨';
+    position: absolute;
+    left: 6px;
+    top: 4px;
+    font-size: 10px;
+  }
   kbd {
     position: absolute;
     top: 4px;