vatts 2.2.5 → 2.3.0-canary

package/dist/vue/DefaultNotFound.vue

@@ -1,329 +0,0 @@
-<!--
-  This file is part of the Vatts.js Project.
-  Copyright (c) 2026 mfraz
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
--->
-<script setup>
-import { ref, onMounted } from 'vue';
-
-const path = ref('/');
-
-onMounted(() => {
-  if (typeof window !== 'undefined') {
-    path.value = window.location.pathname;
-  }
-});
-
-const reload = () => {
-  window.location.reload();
-};
-</script>
-
-<template>
-  <div class="error-page-wrapper">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
-
-    <div class="container">
-      <div class="card">
-        <div class="neon-line"></div>
-
-        <div class="content">
-          <div class="code">404</div>
-
-          <div class="terminal-box">
-            <div class="terminal-dots">
-              <div class="dot"></div>
-              <div class="dot"></div>
-              <div class="dot"></div>
-            </div>
-            <div>
-              <span class="method">GET</span>
-              <span class="path">{{ path }}</span>
-            </div>
-            <div class="error-msg">
-              <span>Error: Route not found</span>
-            </div>
-          </div>
-
-          <div class="actions">
-            <a href="/" class="btn btn-primary">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" />
-              </svg>
-              Back Home
-            </a>
-            <button @click="reload" class="btn btn-secondary">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21 2v6h-6"></path>
-                <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
-                <path d="M3 22v-6h6"></path>
-                <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
-              </svg>
-              Retry
-            </button>
-          </div>
-        </div>
-
-        <div class="footer">
-          <span>Vatts Server</span>
-          <div class="status">
-            <div class="status-dot"></div>
-            <span class="status-text">Not Found</span>
-          </div>
-        </div>
-      </div>
-
-      <a href="https://npmjs.com/package/vatts" target="_blank" rel="noopener noreferrer" class="brand-link">
-        <img src="https://raw.githubusercontent.com/mfrazlab/vatts-docs/master/public/logo.png" alt="Vatts Logo" class="brand-logo" />
-        <span class="brand-text">
-            Vatts<span class="brand-highlight">.js</span>
-        </span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Reset global local e variáveis */
-.error-page-wrapper {
-  font-family: 'Inter', system-ui, sans-serif;
-  box-sizing: border-box;
-}
-
-/* Variáveis CSS locais para facilitar manutenção das cores Vue */
-.container {
-  --vue-green: #42b883;
-  --vue-dark: #35495e;
-  --bg-color: #000000;
-  --card-bg: #0a0a0a;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  background: var(--bg-color);
-  color: #ffffff;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-
-.card {
-  width: min(90%, 500px);
-  display: flex;
-  flex-direction: column;
-  background: var(--card-bg);
-  /* Sombra com leve toque de verde */
-  box-shadow: 0 0 0 1px rgba(66, 184, 131, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
-  border-radius: 20px;
-  overflow: hidden;
-  position: relative;
-}
-
-.neon-line {
-  height: 1px;
-  width: 100%;
-  /* Gradiente Verde Vue */
-  background: linear-gradient(90deg, transparent, var(--vue-dark), var(--vue-green), var(--vue-dark), transparent);
-  box-shadow: 0 0 15px rgba(66, 184, 131, 0.2);
-}
-
-.content {
-  padding: 32px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.code {
-  font-size: 80px;
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: -0.04em;
-  color: #fff;
-  /* Gradiente Texto: Branco para Verde */
-  background: linear-gradient(180deg, #ffffff 0%, var(--vue-green) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  /* Fallback */
-  color: var(--vue-green);
-  margin-bottom: 16px;
-  filter: drop-shadow(0 0 20px rgba(66, 184, 131, 0.1));
-}
-
-.terminal-box {
-  width: 100%;
-  /* Fundo esverdeado muito sutil */
-  background: rgba(66, 184, 131, 0.03);
-  border-radius: 12px;
-  padding: 16px;
-  margin-bottom: 24px;
-  /* Borda verde sutil */
-  border: 1px solid rgba(66, 184, 131, 0.1);
-  font-family: "JetBrains Mono", monospace;
-  font-size: 12px;
-  text-align: left;
-  color: #a7c4bc; /* Texto terminal mais claro */
-  box-sizing: border-box;
-}
-
-.terminal-dots {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 8px;
-  opacity: 0.3;
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #fff;
-}
-
-.method {
-  color: var(--vue-green); /* GET em verde */
-  margin-right: 4px;
-}
-
-.path {
-  color: #fff;
-}
-
-.error-msg {
-  margin-top: 4px;
-  color: #5f7e76; /* Verde acinzentado escuro */
-}
-
-.actions {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-}
-
-.btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border-radius: 10px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-  outline: none;
-  text-decoration: none;
-  font-family: 'Inter', sans-serif;
-  flex: 1;
-  justify-content: center;
-}
-
-.btn-primary {
-  /* Botão principal Verde Vue */
-  background: var(--vue-green);
-  color: #000000;
-}
-
-.btn-primary:hover {
-  background: #ffffff;
-  box-shadow: 0 0 20px rgba(66, 184, 131, 0.4);
-}
-
-.btn-secondary {
-  background: transparent;
-  color: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(66, 184, 131, 0.2);
-}
-
-.btn-secondary:hover {
-  background: rgba(66, 184, 131, 0.1);
-  color: #fff;
-  border-color: var(--vue-green);
-}
-
-.footer {
-  padding: 12px 32px;
-  background: rgba(66, 184, 131, 0.02);
-  border-top: 1px solid rgba(66, 184, 131, 0.05);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
-  box-sizing: border-box;
-}
-
-.status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  /* Ponto de status Verde */
-  background: var(--vue-green);
-  box-shadow: 0 0 6px var(--vue-green);
-}
-
-.status-text {
-  color: var(--vue-green);
-}
-
-.brand-link {
-  margin-top: 32px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  opacity: 0.4;
-  transition: opacity 0.3s;
-  text-decoration: none;
-  color: #fff;
-}
-
-.brand-link:hover {
-  opacity: 1;
-}
-
-.brand-logo {
-  width: 20px;
-  height: 20px;
-  /* Removi o grayscale para a logo brilhar normal, se preferir monocromático com verde, pode ajustar */
-  filter: none;
-}
-
-.brand-text {
-  font-size: 13px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.brand-highlight {
-  /* .js em verde */
-  color: var(--vue-green);
-}
-</style>

package/dist/vue/DevIndicator.vue

@@ -1,226 +0,0 @@
-<!--
-  This file is part of the Vatts.js Project.
-  Copyright (c) 2026 mfraz
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
--->
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-
-// Definição das props
-const props = defineProps({
-  hasBuildError: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// Eventos
-// Em vez de passar uma função callback como prop (React), emitimos um evento no Vue.
-const emit = defineEmits(['click-build-error']);
-
-const isVisible = ref(true);
-const hotState = ref('idle');
-const mounted = ref(false);
-
-const isReloading = computed(() => hotState.value === 'reloading');
-const isError = computed(() => !!props.hasBuildError);
-
-const handleBadgeClick = () => {
-  if (isError.value) {
-    emit('click-build-error');
-  }
-};
-
-onMounted(() => {
-  mounted.value = true;
-
-  const handler = (ev) => {
-    const detail = ev?.detail;
-    if (!detail || !detail.state) return;
-
-    if (detail.state === 'reloading' || detail.state === 'full-reload') {
-      hotState.value = 'reloading';
-    }
-    if (detail.state === 'idle') {
-      hotState.value = 'idle';
-    }
-  };
-
-  if (typeof window !== 'undefined') {
-    window.addEventListener('vatts:hotreload', handler);
-  }
-
-  onUnmounted(() => {
-    if (typeof window !== 'undefined') {
-      window.removeEventListener('vatts:hotreload', handler);
-    }
-  });
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <div
-        v-if="isVisible && mounted"
-        class="vatts-dev-badge"
-        :class="{ 'clickable': isError }"
-        @click="handleBadgeClick"
-    >
-      <!-- Loading Spinner ou Status Dot -->
-      <div v-if="isReloading" class="vatts-spinner"></div>
-      <div
-          v-else
-          class="vatts-status-dot"
-          :class="{ 'reloading': isReloading, 'error': isError }"
-      ></div>
-
-      <!-- Logo & Texto -->
-      <div class="vatts-logo">
-        VATTS<span>.JS</span>
-        <span v-if="isError" class="vatts-error-pill">ERROR</span>
-      </div>
-
-      <!-- Botão Fechar -->
-      <button
-          class="close-btn"
-          @click.stop="isVisible = false"
-          aria-label="Close badge"
-      >
-        ×
-      </button>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-/* Importando fonte (opcional se já existir globalmente, mas mantendo consistência com o original) */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');
-
-@keyframes vatts-pulse {
-  0% { opacity: 0.4; }
-  50% { opacity: 1; }
-  100% { opacity: 0.4; }
-}
-
-@keyframes vatts-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.vatts-dev-badge {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  /* Z-index alto para ficar acima de tudo */
-  z-index: 2147483647;
-
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
-  background: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-
-  border-radius: 10px;
-  color: #fff;
-  font-family: 'Inter', system-ui, sans-serif;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-
-  /* Estilo Monocromático Next.js */
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-  transition: all 0.2s ease;
-  cursor: default;
-  user-select: none;
-}
-
-.vatts-dev-badge.clickable {
-  cursor: pointer;
-}
-
-.vatts-dev-badge:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-  transform: translateY(-2px);
-  background: rgba(10, 10, 10, 0.95);
-}
-
-.vatts-status-dot {
-  width: 7px;
-  height: 7px;
-  background: #ffffff; /* Branco para status OK */
-  border-radius: 50%;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
-  animation: vatts-pulse 2.5s infinite ease-in-out;
-}
-
-.vatts-status-dot.reloading {
-  background: #64748b; /* Slate */
-  box-shadow: none;
-}
-
-.vatts-status-dot.error {
-  background: #ef4444; /* Vermelho para erro */
-  box-shadow: 0 0 10px #ef4444;
-  animation: vatts-pulse 1s infinite ease-in-out;
-}
-
-.vatts-spinner {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid rgba(255,255,255,0.1);
-  border-top-color: #ffffff;
-  animation: vatts-spin 0.8s linear infinite;
-}
-
-.vatts-logo {
-  color: #ffffff;
-  font-weight: 800;
-  display: flex;
-  align-items: center;
-}
-
-.vatts-logo span {
-  color: #64748b;
-}
-
-.vatts-error-pill {
-  margin-left: 8px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: #ffffff;
-  color: #000000;
-  font-size: 9px;
-  font-weight: 900;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  color: rgba(255,255,255,0.2);
-  cursor: pointer;
-  font-size: 16px;
-  padding: 0 0 0 4px;
-  margin-left: 4px;
-  display: flex;
-  align-items: center;
-}
-
-.close-btn:hover {
-  color: rgba(255,255,255,0.6);
-}
-</style>