docs: add clarifications and update docs

docs/.vitepress/cache/deps/@tresjs_cientos.js

@@ -12394,7 +12394,7 @@ var Ph = {
         });
       }
       play() {
-        this.stop(), this.updateMarker_(0), this.markerElem_.classList.add(Ct("m", "a")), this.startTime_ = new Date().getTime() + _n, this.stopped_ = false, requestAnimationFrame(this.onTimer_);
+        this.stop(), this.updateMarker_(0), this.markerElem_.classList.add(Ct("m", "a")), this.startTime_ = (/* @__PURE__ */ new Date()).getTime() + _n, this.stopped_ = false, requestAnimationFrame(this.onTimer_);
       }
       stop() {
         this.stopped_ = true, this.markerElem_.classList.remove(Ct("m", "a"));
@@ -12417,7 +12417,7 @@ var Ph = {
       onTimer_() {
         if (this.startTime_ === null)
           return;
-        const o = new Date().getTime() - this.startTime_, p = o / Si;
+        const o = (/* @__PURE__ */ new Date()).getTime() - this.startTime_, p = o / Si;
         this.updateMarker_(p), o > Si + _n && this.stop(), this.stopped_ || requestAnimationFrame(this.onTimer_);
       }
       onValueChange_() {
@@ -12708,10 +12708,10 @@ var Ph = {
         });
       }
       begin() {
-        this.stopwatch_.begin(new Date());
+        this.stopwatch_.begin(/* @__PURE__ */ new Date());
       }
       end() {
-        this.stopwatch_.end(new Date());
+        this.stopwatch_.end(/* @__PURE__ */ new Date());
       }
       onTick_() {
         const o = this.stopwatch_.fps;

docs/.vitepress/cache/deps/@vueuse_core.js

@@ -970,9 +970,9 @@ var formatDate = (date, formatStr, options = {}) => {
 };
 var normalizeDate = (date) => {
   if (date === null)
-    return new Date(NaN);
+    return /* @__PURE__ */ new Date(NaN);
   if (date === void 0)
-    return new Date();
+    return /* @__PURE__ */ new Date();
   if (date instanceof Date)
     return new Date(date);
   if (typeof date === "string" && !/Z$/i.test(date)) {
@@ -5546,8 +5546,8 @@ function useNow(options = {}) {
     controls: exposeControls = false,
     interval = "requestAnimationFrame"
   } = options;
-  const now2 = ref(new Date());
-  const update = () => now2.value = new Date();
+  const now2 = ref(/* @__PURE__ */ new Date());
+  const update = () => now2.value = /* @__PURE__ */ new Date();
   const controls = interval === "requestAnimationFrame" ? useRafFn(update, { immediate: true }) : useIntervalFn(update, interval, { immediate: true });
   if (exposeControls) {
     return __spreadValues$72({

docs/.vitepress/cache/deps/_metadata.json

@@ -1,59 +1,59 @@
 {
-  "hash": "02bd31c1",
-  "browserHash": "823e2554",
+  "hash": "848fe1b3",
+  "browserHash": "cd515ae6",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "e62c8883",
+      "fileHash": "c9f10eeb",
       "needsInterop": false
     },
     "three": {
       "src": "../../../../node_modules/.pnpm/three@0.151.3/node_modules/three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "36538c0a",
+      "fileHash": "2d323184",
       "needsInterop": false
     },
     "@tresjs/cientos": {
       "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.0.0-alpha.5_three@0.151.3/node_modules/@tresjs/cientos/dist/trescientos.js",
       "file": "@tresjs_cientos.js",
-      "fileHash": "ef210087",
+      "fileHash": "33f4f4eb",
       "needsInterop": false
     },
     "@stackblitz/sdk": {
       "src": "../../../../node_modules/.pnpm/@stackblitz+sdk@1.8.2/node_modules/@stackblitz/sdk/bundles/sdk.m.js",
       "file": "@stackblitz_sdk.js",
-      "fileHash": "0b9798ce",
+      "fileHash": "d44a5cc0",
+      "needsInterop": false
+    },
+    "@tresjs/core": {
+      "src": "../../../../node_modules/.pnpm/@tresjs+core@2.0.0-alpha.1_three@0.151.3+vue@3.2.47/node_modules/@tresjs/core/dist/tres.js",
+      "file": "@tresjs_core.js",
+      "fileHash": "535db069",
       "needsInterop": false
     },
     "gsap": {
       "src": "../../../../node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/index.js",
       "file": "gsap.js",
-      "fileHash": "5d5aba65",
+      "fileHash": "e5cac61b",
+      "needsInterop": false
+    },
+    "@alvarosabu/utils": {
+      "src": "../../../../node_modules/.pnpm/@alvarosabu+utils@2.3.0/node_modules/@alvarosabu/utils/dist/as-utils.js",
+      "file": "@alvarosabu_utils.js",
+      "fileHash": "003e834f",
       "needsInterop": false
     },
     "@vueuse/core": {
       "src": "../../../../node_modules/.pnpm/@vueuse+core@9.13.0/node_modules/@vueuse/core/index.mjs",
       "file": "@vueuse_core.js",
-      "fileHash": "c8b219d1",
+      "fileHash": "238d33fe",
       "needsInterop": false
     },
     "three/src/math/MathUtils": {
       "src": "../../../../node_modules/.pnpm/three@0.151.3/node_modules/three/src/math/MathUtils.js",
       "file": "three_src_math_MathUtils.js",
-      "fileHash": "b451a408",
-      "needsInterop": false
-    },
-    "@alvarosabu/utils": {
-      "src": "../../../../node_modules/.pnpm/@alvarosabu+utils@2.3.0/node_modules/@alvarosabu/utils/dist/as-utils.js",
-      "file": "@alvarosabu_utils.js",
-      "fileHash": "e66a408e",
-      "needsInterop": false
-    },
-    "@tresjs/core": {
-      "src": "../../../../node_modules/.pnpm/@tresjs+core@2.0.0-alpha.1_three@0.151.3+vue@3.2.47/node_modules/@tresjs/core/dist/tres.js",
-      "file": "@tresjs_core.js",
-      "fileHash": "013cca1c",
+      "fileHash": "29b46742",
       "needsInterop": false
     }
   },

docs/advanced/extending.md

@@ -2,22 +2,21 @@
 
 Tres offers bare bones functionality, but it's easy to add third-party elements and extend them into its internal catalogue.
 
-Most of 3D experience uses `OrbitControls` which is not part of the core library. You can add it to your project by importing it from the `three/examples/jsm/controls/OrbitControls` module.
+Most of 3D experience uses `OrbitControls` which is not part of the core library. You can add it to your project by importing it from the `three/addons/controls/OrbitControls` module.
 
 ```js
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 ```
 
 ## Extending an element dynamically
 
 Or you can also add it dynamically in your components:
 
-```vue {2,3,5,8,17,19}
+```vue {2,3,4,7,13,15}
 <script setup lang="ts">
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
-
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
 // Add the element to the catalogue
 extend({ TextGeometry, OrbitControls })

docs/api/composables.md

@@ -150,31 +150,6 @@ Then you can bind the textures to the material.
 
 Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
 
-## useCatalogue
-
-The `useCatalogue` composable allows you to extend the internal catalogue of components. It returns a function that you can use to register new components.
-
-This is specially useful if you want to use objects that are not part of ThreeJS core like[OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls) or third party functionality, like physics.
-
-```ts
-import { useCatalogue } from '@tresjs/core'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-const { extend } = useCatalogue()
-
-extend({ OrbitControls })
-```
-
-Then you can use the new component in your template. Notice that the new component is prefixed with `Tres` to avoid name collisions with native HTML elements, similar to the rest of the core components.
-
-```vue
-<template>
-  <TresCanvas shadows alpha>
-    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-  </TresCanvas>
-</template>
-```
-
 ## useSeek
 
 The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports two functions, `seek` and `seekByName`, which allow you to find child objects based on specific properties.
@@ -214,3 +189,23 @@ const { state } = useTres()
 console.log(state.camera) // THREE.PerspectiveCamera
 console.log(state.renderer) // THREE.WebGLRenderer
 ```
+
+::: warning
+useTres composable can be only be used between the context of `TresCanvas` (inside sub-components) since Canvas component is the provider.
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTres } from '@tresjs/core'
+
+const { state } = useTres()
+</script>
+```