docs: nuxt 4 (#1069)

- Upgraded TypeScript and various dependencies in `pnpm-lock.yaml` and `package.json` to ensure compatibility with the latest features and improvements.
- Enhanced the `AppHeader.vue` component for better responsive design by adding a class to control visibility on different screen sizes.
- Updated documentation links and metadata in `index.md` to reflect new features and improve user navigation.
- Refactored the `useTres` composable documentation to clarify its usage context within the TresCanvas component, enhancing user understanding.

docs/app/components/AppHeader.vue

@@ -88,6 +88,7 @@ const version = useRuntimeConfig().public.pkgVersion
         <UButton
           v-for="(link, index) of header.links"
           :key="index"
+          class="hidden md:flex"
           v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
         />
       </template>

docs/app/pages/[...slug].vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { findPageHeadline } from '#ui-pro/utils/content'
-
 definePageMeta({
   layout: 'docs',
 })
 
 const route = useRoute()
 const { toc } = useAppConfig()
-const navigation = inject(navigationInjectionKey)
 
 const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
 if (!page.value) {
@@ -32,8 +29,6 @@ useSeoMeta({
   twitterDescription: description,
 })
 
-const headline = computed(() => findPageHeadline(navigation?.value, page.value))
-
 const links = computed(() => {
   const links = []
   if (toc?.bottom?.edit) {
@@ -55,7 +50,6 @@ const links = computed(() => {
       :title="page.title"
       :description="page.description"
       :links="page.links"
-      :headline="headline"
       :ui="{
         headline: 'uppercase font-mono font-light text-default-500 text-dim',
       }"

docs/content/3.api/1.index.md

@@ -4,13 +4,13 @@ description: Explore the TresJS components, composables, utilities and more.
 ---
 
 ::card-group
-  ::card{icon="i-lucide-box" title="Components" to="/api/components/tres-canvas"}
+  ::card{icon="i-lucide-box" title="Components" to="/api/components/tres-canvas" spotlight}
   Explore the TresJS components.
   ::
-  ::card{icon="i-lucide-arrow-right-left" title="Composables" to="/api/composables/use-tres"}
+  ::card{icon="i-lucide-arrow-right-left" title="Composables" to="/api/composables/use-tres" spotlight}
   Discover TresJS composables for context access, loading resources, animation and more.
   ::
-  ::card{icon="i-lucide-brain-circuit" title="Advanced" to="/api/advanced/primitives"}
+  ::card{icon="i-lucide-brain-circuit" title="Advanced" to="/api/advanced/primitives" spotlight}
   Go a step further with advanced topics like performance optimization and more.
   ::
 ::

docs/package.json

@@ -2,7 +2,7 @@
   "name": "tresjs-docs",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.14.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -13,23 +13,23 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.47",
-    "@iconify-json/simple-icons": "^1.2.38",
-    "@iconify-json/vscode-icons": "^1.2.22",
-    "@nuxt/content": "^3.5.1",
-    "@nuxt/image": "^1.10.0",
-    "@nuxt/ui-pro": "^3.1.3",
+    "@iconify-json/lucide": "^1.2.61",
+    "@iconify-json/simple-icons": "^1.2.46",
+    "@iconify-json/vscode-icons": "^1.2.24",
+    "@nuxt/content": "^3.6.3",
+    "@nuxt/image": "^1.11.0",
+    "@nuxt/ui-pro": "^3.3.0",
     "@tresjs/cientos": "5.0.0-next.0",
     "@tresjs/core": "workspace:^",
-    "better-sqlite3": "^12.0.0",
-    "nuxt": "^3.17.5",
+    "better-sqlite3": "^12.2.0",
+    "nuxt": "^4.0.3",
     "nuxt-llms": "0.1.3",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "eslint": "^9.28.0",
-    "typescript": "^5.8.3",
-    "vue-tsc": "^2.2.10"
+    "eslint": "^9.33.0",
+    "typescript": "^5.9.2",
+    "vue-tsc": "^3.0.5"
   }
 }