feat: Trigger deploy

docs-v3/.gitignore

@@ -99,3 +99,5 @@ Thumbs.db
 # Temporary files
 *.tmp
 *.temp
+
+.vercel

docs-v3/app.vue

@@ -24,9 +24,7 @@ useHead({
 
 // Fetch navigation and search data using the correct Nuxt Content composables
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
-  server: false
-})
+const { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('content'))
 
 const searchTerm = ref('')
 </script>

docs-v3/assets/css/main.css

@@ -5,6 +5,11 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+/* Tailwind v4 theme customization */
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', Monaco, Consolas, monospace;
+}
 
 /* Base styles */
 html {
@@ -17,6 +22,13 @@ html {
   background-color: rgb(239 246 255);
 }
 
+.dark .nav-link-active {
+  color: rgb(96 165 250);
+  background-color: rgba(59 130 246 / 0.2);
+  color: rgb(37 99 235);
+  background-color: rgb(239 246 255);
+}
+
 .dark .nav-link-active {
   color: rgb(96 165 250);
   background-color: rgba(59 130 246 / 0.2);
@@ -61,4 +73,9 @@ html {
 /* Focus ring utility */
 .focus-ring {
   @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
+
+  /* Focus ring utility */
+  .focus-ring {
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
+  }
 }

docs-v3/components/CopyButton.vue

@@ -61,14 +61,14 @@ const handleCopy = async () => {
 
   } catch (error) {
     console.error('❌ All copy methods failed:', error)
-    const { error: showError } = useToast()
+    const { error: showError } = useAppToast()
     showError('Copy failed - please manually select and copy the text')
   }
 }
 
 const showSuccess = () => {
   iscopied.value = true
-  const { success } = useToast()
+  const { success } = useAppToast()
   success('Copied to clipboard!')
 
   setTimeout(() => {
@@ -78,6 +78,8 @@ const showSuccess = () => {
 </script>
 
 <style scoped>
+@reference "tailwindcss";
+
 .copy-btn {
   @apply absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-all duration-200 p-2 bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 active:scale-95;
 }

docs-v3/components/TheHeader.vue

@@ -10,9 +10,7 @@
             class="lg:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white focus-ring"
             aria-label="Toggle menu"
           >
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
+            <Bars3Icon class="h-6 w-6" />
           </button>
 
           <!-- Logo -->
@@ -79,6 +77,8 @@
 </template>
 
 <script setup lang="ts">
+import { Bars3Icon } from '@heroicons/vue/24/outline'
+
 // Inject mobile menu state from layout
 const toggleMobileMenu = inject('toggleMobileMenu', () => {})
 </script>

docs-v3/components/ThemeToggle.vue

@@ -5,40 +5,22 @@
     :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
   >
     <!-- Sun icon (light mode) -->
-    <svg
-      v-if="isDark"
+    <SunIcon
+      v-if="$colorMode.value === 'dark'"
       class="h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-      />
-    </svg>
+    />
 
     <!-- Moon icon (dark mode) -->
-    <svg
+    <MoonIcon
       v-else
       class="h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-      />
-    </svg>
+    />
   </button>
 </template>
 
 <script setup lang="ts">
+import { SunIcon, MoonIcon } from '@heroicons/vue/24/outline'
+
 const colorMode = useColorMode()
 
 const isDark = computed(() => colorMode.value === 'dark')

docs-v3/components/ToastContainer.vue

@@ -20,34 +20,22 @@
         >
           <div class="flex-shrink-0 mr-3">
             <!-- Success icon -->
-            <svg
+            <CheckCircleIcon
               v-if="toast.type === 'success'"
               class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-            </svg>
+            />
 
             <!-- Error icon -->
-            <svg
+            <XCircleIcon
               v-else-if="toast.type === 'error'"
               class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-            </svg>
+            />
 
             <!-- Info icon -->
-            <svg
+            <InformationCircleIcon
               v-else
               class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
-            </svg>
+            />
           </div>
 
           <div class="flex-1 text-sm font-medium">
@@ -68,8 +56,11 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-const { toasts, removeToast } = useToast()
+<script setup>
+import { CheckCircleIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/vue/24/outline'
+import { useAppToast } from '~/composables/useAppToast'
+
+const { toasts, removeToast } = useAppToast()
 </script>
 
 <style scoped>

docs-v3/components/website/CodeSection.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="space-y-4 md:space-y-6">
+    <!-- Section Header -->
+    <div class="flex items-center gap-2 mb-4">
+      <div :class="`w-2 h-2 ${type === 'input' ? 'bg-blue-400' : 'bg-green-400'} rounded-full animate-pulse`"></div>
+      <span :class="`${type === 'input' ? 'text-blue-400' : 'text-green-400'} text-sm font-semibold uppercase tracking-wider`">
+        {{ title }}
+      </span>
+    </div>
+
+    <!-- Input Code Blocks -->
+    <div v-if="type === 'input'" class="space-y-4">
+      <div v-for="(block, index) in codeBlocks" :key="index">
+        <div class="text-gray-500 text-xs mb-2 font-mono">{{ block.comment }}</div>
+        <pre class="text-emerald-400 font-mono text-xs md:text-sm leading-relaxed overflow-x-auto"><code v-html="block.code"></code></pre>
+      </div>
+    </div>
+
+    <!-- Output Blocks -->
+    <div v-if="type === 'output'" class="space-y-4">
+      <div 
+        v-for="(block, index) in outputBlocks" 
+        :key="index"
+        class="bg-gray-800/50 rounded-lg p-3 md:p-4 border border-gray-700/30"
+      >
+        <div class="flex items-center gap-2 mb-2">
+          <div :class="`w-3 h-3 bg-${block.color}-500 rounded-full`"></div>
+          <span :class="`text-${block.color}-400 text-xs font-bold`">{{ block.title }}</span>
+        </div>
+        <div class="space-y-1 text-xs font-mono text-gray-300 overflow-x-auto">
+          <div v-for="(item, itemIndex) in block.items" :key="itemIndex">
+            <span v-if="item.method" :class="`text-${item.color}-400`">{{ item.method }}</span>
+            <span v-if="item.endpoint">{{ item.endpoint }}</span>
+            <span v-if="item.text">{{ item.text }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface CodeBlock {
+  comment: string
+  code: string
+}
+
+interface OutputItem {
+  method?: string
+  endpoint?: string
+  color?: string
+  text?: string
+}
+
+interface OutputBlock {
+  title: string
+  color: string
+  items: OutputItem[]
+}
+
+interface Props {
+  type: 'input' | 'output'
+  title: string
+  codeBlocks?: CodeBlock[]
+  outputBlocks?: OutputBlock[]
+}
+
+defineProps<Props>()
+</script>