chore: alinhar projeto às regras do agent

src/playground/App.vue

@@ -1,16 +1,42 @@
 <template>
-  <EliOlaMundo />
- 
+  <v-container class="py-6">
+    <h1 class="text-h5 mb-4">Playground — eli-vue</h1>
+
+    <v-tabs v-model="aba" color="primary" density="comfortable">
+      <v-tab value="botao">Botão</v-tab>
+      <v-tab value="indicador">Indicador</v-tab>
+      <v-tab value="campo">Campo</v-tab>
+      <v-tab value="ola_mundo">Demo</v-tab>
+    </v-tabs>
+
+    <v-divider class="my-4" />
+
+    <BotaoPlayground v-if="aba === 'botao'" />
+    <IndicadorPlayground v-else-if="aba === 'indicador'" />
+    <CampoPlayground v-else-if="aba === 'campo'" />
+    <OlaMundoPlayground v-else />
+  </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { EliOlaMundo } from '@/componentes/EliOlaMundo'
+import BotaoPlayground from "./botao.playground.vue";
+import IndicadorPlayground from "./indicador.playground.vue";
+import CampoPlayground from "./campo.playground.vue";
+import OlaMundoPlayground from "./ola_mundo.playground.vue";
 
 export default defineComponent({
   name: 'App',
   components: {
-    EliOlaMundo,
+    BotaoPlayground,
+    IndicadorPlayground,
+    CampoPlayground,
+    OlaMundoPlayground,
+  },
+  data() {
+    return {
+      aba: "botao" as "botao" | "indicador" | "campo" | "ola_mundo",
+    };
   }
 })
 </script>