chore: clean up eslint config (#847)

.github/workflows/actions/pnpm/action.yml

@@ -29,4 +29,4 @@ runs:
 # Avoid running husky hooks on Github
 # http://typicode.github.io/husky/how-to.html
 env:
-  HUSKY: 0
+  HUSKY: 0

.github/workflows/pkg.pr.new.yml

@@ -30,9 +30,9 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Build
         run: pnpm build
-      - run: pnpx pkg-pr-new publish --compact --pnpm
+      - run: pnpx pkg-pr-new publish --compact --pnpm

.github/workflows/sponsorkit.yml

@@ -5,7 +5,7 @@ on:
   schedule:
     - cron: '0 0 * * *'
   push:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   update-sponsors:
@@ -34,6 +34,6 @@ jobs:
           author_name: GitHub Actions
           author_email: 41898282+github-actions[bot]@users.noreply.github.com
           message: 'chore: update sponsors.svg '
-          add: "sponsors.*"
+          add: 'sponsors.*'
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

docs/blog/announcing-cientos-3-2-0.md

@@ -1,112 +0,0 @@
----
-sidebar: false
----
-
-# Announcing cientos v3.2.0 🎉
-
-There is a lot going on in the TresJs Ecosystem.
-
-But for now let's hijack this space to announce what's happening in your favorite helper library for creating 3D experience with TresJs, the Cientos package! 😊
-
-- **Cientos v3.2.0**
-
-<iframe src="https://giphy.com/embed/vmon3eAOp1WfK" width="480" height="357" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/celebration-excited-loki-vmon3eAOp1WfK">via GIPHY</a></p>
-
-## Remove TweakPane from cientos 😱
-
-Ok ok, not really. We haven't dropped [TweakPane](https://cocopon.github.io/tweakpane/) from Cientos (just yet).
-
-In Cientos, we're constantly working to improve your development experience, and we have found that the tweakPane + plugin-essentials was taking up almost a third of the Cientos bundle size, so we have taken the decision to drop it from Cientos and add it as a peerDependency.
-
-This will mean that you have to manually install it to use `useTweakPane()`.
-
-So, as you may find in the logs, this package will be deprecated soon in the future.
-
-The good news is that we're working on a built-in solution... ok no more spoilers 😊
-
-![](/blog/announce-leches.jpg)
-
-## GlassMaterial 🍷
-
-![](/blog/glass-material.gif)
-
-¡We've something shiny here!
-
-A new fancy material only available in Cientos that emulates glass.
-
-As you should expect, it couldn't be easier to use:
-
-```html
-<MeshGlassMaterial ref="glassMaterialRef" />
-```
-
-This material is an adaptation of the MeshPhysicalMaterial so you can tweak the properties to achieve incredible results in the same way
-
-More info [here](https://cientos.tresjs.org/guide/materials/glass-material.html)
-
-## UseVideoTexture 🎞️
-
-![](/blog/useVideoTexture.gif)
-
-Yes!! the new loader allows you to easily use a video as a texture.
-
-```js
-import { useVideoTexture } from '@tresjs/cientos'
-import exampleVideo from '/myVideoPath'
-
-const texture = ref()
-texture.value = await useVideoTexture(exampleVideo) // you can pass options too
-```
-
-And in the component:
-
-```html
-...
-<Sphere :position="[0, 2, 0]">
-  <TresMeshBasicMaterial :map="texture" />
-</Sphere>
-...
-```
-
-For more information, you can check the official doc [useVideoTexture](https://cientos.tresjs.org/guide/loaders/use-video-texture.html)
-
-## Camera-controls 🎥
-
-Since the last version of Cientos was released, you have been able to use the famous Camera-controls library, made by [yomotsu](https://github.com/yomotsu).
-
-In case you don't know what I'm talking about, the CameraControls is a camera controller similar to OrbitControls yet it supports smooth transitions and more features.
-
-As always in Cientos we like to make things easy for you and so we created an abstraction that you can use like this:
-
-```html
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <CameraControls />
-  </TresCanvas>
-</template>
-```
-
-The number of tweaks you can do here is out of this world, check it out[here](https://cientos.tresjs.org/guide/controls/camera-controls.html)
-
-Big thanks to [notarun](https://github.com/notarun) for this amazing contribution.
-
-## New Event isLocked in (PointerLockControls)
-
-A new event has been added to the `PointerLockControls`, now you can effortlessly know if the PointerLock event is active or not. Simply add a couple of lines of code:
-
-```js
-const isActive = (state: boolean) => console.log(state)
-```
-
-```html
-...
-<PointerLockControls @is-lock="state => isActive(state)" />
-...
-```
-
----
-
-We hope you like this new release. We are working hard to bring you the best possible experience when using TresJS.
-
-- Cientos https://github.com/Tresjs/cientos/releases

docs/blog/announcing-cientos-3-4-0.md

@@ -1,110 +0,0 @@
----
-sidebar: false
----
-
-# Announcing cientos v3.4.0 🎉
-
-Cientos is here again with a new and exiting release 🎉.
-
-- **Cientos v3.4.0**
-
-<iframe src="https://giphy.com/embed/2XOL4zsm6V0nm" width="480" height="358" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/walking-2XOL4zsm6V0nm">via GIPHY</a></p>
-
-## LensFlare
-
-A new and completely original abstraction has arrived to Cientos ✨ Behold His Majesty `<LensFlare />`.
-
-It's a wrapper of the Three.js [LensFlare](https://threejs.org/docs/#examples/en/objects/Lensflare) addon.
-
-![](/blog/lensflare.gif)
-
-While it could look intimidating at first, this component has a lot of flexibility, so check out all the different options [here](https://cientos.tresjs.org/guide/abstractions/lensflare.html)
-
-We're going to say thanks to [andretchen0](https://github.com/andretchen0) for this incredible contribution.
-
-## Sky
-
-The `Sky` component allows you to create realistic outdoor scenes with the use of sky, which as the name implies creates sky gradients and more with just a few lines of code.
-
-![](/blog/sky.gif)
-
-This is  fancy wrapper of the addon [Sky](https://threejs.org/examples/?q=sky#webgl_shaders_sky).
-
-```vue
-<script setup lang="ts">
-import { Sky } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 100, 2000]" />
-    <Sky />
-  </TresCanvas>
-</template>
-```
-Could it be simpler?
-
-You can find the official docs [here](https://cientos.tresjs.org/guide/staging/sky.html)
-
-Another one of [andretchen0](https://github.com/andretchen0) amazing contributions!
-
-## SVG
-
-![](/blog/svg.gif)
-
-A classical one, the svg loader component has arrived in cientos this release, to bring the versatility of `svg` into a wrapper of the original [loader](https://threejs.org/docs/?q=svg#examples/en/loaders/SVGLoader) with basically one line of code (well two if you count the import 😅).
-
-```html
-<template>
-  <TresCanvas>
-    <Suspense>
-      <SVG src="/favicon.svg" /> // you can pass a path or a inline svg
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-You can find the official docs [here](https://cientos.tresjs.org/guide/loaders/svg.html).
-
-And yes, again big thanks to [andretchen0](https://github.com/andretchen0) 3 in a row!
-
-## Stats-gl
-
-![](/blog/stats-gl.png)
-
-
-Another exciting one is the addition of Stats-gl which is like statsjs but with superpowers, originally developed by [RenaudRohlinger](https://github.com/RenaudRohlinger/stats-gl) is a powerful performance monitoring tool.
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { StatsGl } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <StatsGl /> // as simple as this
-  </TresCanvas>
-</template>
-```
-
-Big thanks to [notarun](https://github.com/notarun) for this contribution.
-
-Official docs [here](https://cientos.tresjs.org/guide/misc/stats-gl.html).
-
-## Fix camera as a param problem in controls
-
-[damiankoper](https://github.com/damiankoper) discovered a bug when you tried to use the camera as a parameter.
-
-Thanks to [damiankoper](https://github.com/damiankoper) for this useful contribution.
-
-## New documentation full of examples
-
-![](/blog/docs-examples.png)
-
-In addition to all these amazing new features, we have been working internally to improve the UX, and now you can visit the [cientos](https://cientos.tresjs.org/) page and navigate through the components and see the inline examples right away.
-
-## Internal organization of code (will be easier to contribute)
-
-Also, we're constantly working on the DX: refactors, cleaning, and internal improvement. So now we have a clear structure, now it is easier than ever to contribute to the cientos package 😁.
-
-Thanks for reading and happy 3D coding  😊.

docs/blog/announcing-cientos-3-5-0.md

@@ -1,228 +0,0 @@
----
-sidebar: false
----
-
-# Announcing cientos v3.5.0 🎉
-
-We're excited to share with you a new release of `@tresjs/cientos`  full of exciting new features.
-
-
-## HTML component 🖥️
-
-Let's start with a versatile one, the `HTML` component has finally arrived to **Cientos** and brings with it a huge amount of possibilities! Just look at this:
-
-<video class="w-full overflow-hidden rounded" controls autoplay loop>
-  <source src="/blog/html-occlude.mp4" type="video/mp4">  
-</video>
-
-This component allows you to project HTML content or even Vuejs components into any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object.
-
-You can even use plain CSS or utilities like [tailwindcss](https://tailwindcss.com/) to style 🎨.
-
-```html
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import {  Html } from '@tresjs/cientos'
-
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[3, 3, 8]" />
-    <OrbitControls />
-    <TresMesh :position="[1, 1, 1]">
-      <TresBoxGeometry />
-      <TresMeshNormalMaterial />
-      <Html
-        center
-        transform
-        :distance-factor="4"
-        :position="[0, 0, 0.65]"
-        :scale="[0.75, 0.75, 0.75]"
-      >
-        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
-          I'm a Box 📦
-        </h1>
-      </Html>
-    </TresMesh>
-    <TresGridHelper />
-    <TresAmbientLight />
-  </TresCanvas>
-</template>
-```
-
-### `iframe` between threejs objects
-
-Yup.
-
-<video class="w-full overflow-hidden rounded" controls autoplay loop>
-  <source src="/blog/html-laptop.mp4" type="video/mp4">  
-</video>
-
-You can achieve pretty cool results with the `Html` component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage within a 3D model.
-
-
-Please check the official [docs](https://cientos.tresjs.org/guide/misc/html-component.html)
-
-This was provided by [Alvaro Saburido](https://github.com/alvarosabu).
-
-## FBO and useFBO 🪞
-
-The FBO (or Frame Buffer Object) technique allows you to put a render into a texture. We provide this feature as a component or as a composable.
-
-<video class="w-full overflow-hidden rounded" controls autoplay loop>
-  <source src="/blog/fbo.mp4" type="video/mp4">  
-</video>
-
-To learn more about this powerful component please check [this](https://cientos.tresjs.org/guide/abstractions/fbo.html)
-
-Big thanks to [Francesco Michelini](https://github.com/kekkorider)
-
-## Line2 📉
-
-We gave some love to the shape section in this release, bringing to you two new shapes componentes. The first one is `<Line2 />`, which allow you to create easy lines with just a few lines of code.
-
-![](/blog/line2.gif)
-
-For more info please check the [official documentation](https://cientos.tresjs.org/guide/shapes/line2.html). 
-
-This component was done by [andretchen0](https://github.com/andretchen0) big thanks to him.
-
-## CatmullRomCurve 💫
-
-Similar to the previous one, the `<CatmullRomCurve3 />` provides smooth curves with almost no configuration.
-
-![](/blog/CatmullRomCurve3.gif)
-
-You can learn more [here](https://cientos.tresjs.org/guide/shapes/catmullromcurve3.html).
-
-Another component made by [andretchen0](https://github.com/andretchen0) thanks.
-
-## GlobalAudio 🔊
-
-You can now add sound to your scene with just one component. `<GlobalAudio  />` has landed in **TresJs**. Simply import and use the `<GlobalAudio  />` component, give it music path and just like that you'll get sound.
-
-```vue{3,9}
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import { GlobalAudio } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 0, 7.5]" />
-    <GlobalAudio :src="exampleAudio" />
-  </TresCanvas>
-</template>
-```
-An abstraction of the three [Audio](https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio) instance.
-
-To learn more check this [here](https://cientos.tresjs.org/guide/abstractions/global-audio.html).
-
-This component was made by [JaimeTorrealba](https://github.com/JaimeTorrealba).
-
-## Directives
-
-A new exiting one, **Cientos** has been experimenting with the original Vue [Directives](https://vuejs.org/guide/reusability/custom-directives.html#introduction). This idea was born in a session between the **TresJs** Core team members, we explored the possibility, and now we're happy to announce that not only is it possible, it's really handy.
-
-So now we have 4 Directives and a new section in cientos for you guys:
-
-### v-log
-
-With v-log you can inspect your instance without the need to use template ref and watch... Just import the directive, and log what you need.
-
-```vue{2,10,12}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-      v-log:material  <!-- will print just the material 🎉 -->
-    />
-    <OrbitControls v-log />
-  </TresCanvas>
-</template>
-```
-
-Check [here](https://cientos.tresjs.org/guide/directives/v-log.html) for more info.
-
-### v-light-helper
-
-Also for debug purposes, `v-light-helper` aims to add the current helper for the light, this way you don't have to worry about any reference or bloated code, just import and use it with a light, and you'll get the right helper.
-
-```vue{2,8,11,14,17}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresDirectionalLight
-      v-light-helper
-    />
-    <TresPointLight
-      v-light-helper
-    />
-    <TresSpotLight
-      v-light-helper
-    />
-    <TresHemisphereLight
-      v-light-helper
-    />
-  </TresCanvas>
-</template>
-```
-
-Visit the [official documentation](https://cientos.tresjs.org/guide/directives/v-light-helper.html) to learn more.
-
-
-### v-always-look-at
-
-With the `v-always-look-at` as the name suggest you can force the element to always look at a point (even if this is in movement).
-
-```vue{2,10}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Box
-      v-always-look-at="new Vector3(0, 0, 0)"
-    />
-  </TresCanvas>
-</template>
-```
-
-Learn more [here](https://cientos.tresjs.org/guide/directives/v-always-look-at.html)
-
-### v-distance-to
-
-![v-distance-to directive tresjs](/blog/v-distance-to.png)
-
-Have you ever tried to measure the distance between objects in threejs? Well now it's easier than ever. Just use the `v-distance-to` and you'll get the exact distance. Example:
-
-```html{7}
-<Sphere
-  ref="sphere1Ref"
-  :position="[-2, slider, 0]"
-  :scale="0.5"
-/>
-<Sphere
-  v-distance-to="sphere1Ref"
-  :position="[2, 0, 0]"
-  :scale="0.5"
-/>
-```
-Learn more about these directives [here](https://cientos.tresjs.org/guide/directives/v-distance-to.html)
-
-You can take a look to the whole [Release](https://github.com/Tresjs/cientos/releases/tag/3.5.0)
-
-Thanks for reading and happy 3D coding  😊
-

docs/blog/announcing-tres-nuxt-module.md

@@ -1,131 +0,0 @@
----
-sidebar: false
----
-
-![Announcing TresJS Nuxt Module](/blog/tresjs-nuxt-module.png)
-
----
-
-# Announcing Nuxt Module `@tresjs/nuxt` <i class="i-logo-nuxt" /> 🎉
-
-We are absolutetly thriller to announce to the community the release of most anticipated **Nuxt module for TresJS** 🎉 .
-
-Special thanks to [NuxtJS](https://nuxtjs.org/) and [DanielRoe](https://twitter.com/danielcroe) for the support and for the amazing work they are doing for the Vue community.
-
-1. Add `@tresjs/nuxt` dependency to your project
-
-```bash
-# Using pnpm
-pnpm add @tresjs/nuxt
-
-# Using yarn
-yarn add @tresjs/nuxt
-
-# Using npm
-npm install @tresjs/nuxt
-```
-
-2. Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
-
-```js
-export default defineNuxtConfig({
-  modules: ["@tresjs/nuxt"],
-});
-```
-
-## What's Nuxt? 🔥
-
-We took advantage of the [Nuxt module system](https://nuxt.com/docs/guide/going-further/modules) to create a module that will allow you to use TresJS in your Nuxt app with 0-to-none configuration enjoying all the DX perks that comes with Nuxt like:
-
-### Auto import components and composables from the TresJS ecosystem 
-
-You don't need to import the components or composables from the TresJS ecosystem anymore, they will be auto-imported for you. This is a huge improvement for the DX, you can just start using the components and composables without worrying about importing them.
-
-You just need to install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️.
-
-```bash
-# Using pnpm
-pnpm add @tresjs/cientos @tresjs/post-processing
-```
-
-#### Before 
-
-```vue
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import { EffectComposer, Bloom } from '@tresjs/post-processing'
-const { onLoop } = useRenderLoop()
-
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <OrbitControls />
-    <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <EffectComposer>
-      <Bloom />
-    </EffectComposer>
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
-  </TresCanvas>
-</template>
-```
-  
-
-#### After 🥹
-
-```vue
-<script setup lang="ts">
-const { onLoop } = useRenderLoop()
-
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <OrbitControls />
-    <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <EffectComposer>
-      <Bloom />
-    </EffectComposer>
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
-  </TresCanvas>
-</template>
-```
-
-### Client-side only
-
-The `<TresCanvas>` is only loaded in the client-side, so you don't need to worry about **SSR** or **SSG** 😊.
-
-### Vue compiler optimizations ⚙️
-
-Automagically ✨ configure the Vue compiler to recognize the TresJS Components. This is because `<TresCanvas />` component creates a custom renderer for Vue, so we need to tell the outside Vue app to recognize the TresJS components.
-
-Without the module you need to configure the Vue compiler like this:
-
-```ts
-export default defineNuxtConfig({
-  vue: {
-    compilerOptions: {
-      isCustomElement: tag => (tag.startsWith('Tres') && tag !== 'TresCanvas') || tag === 'primitive',
-    },
-  }
-})
-```
-
-See more [here](http://tresjs.org/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)
-
-## Share your work 🎨
-
-We want to see what you are creating with TresJS and nuxt, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
-
-Happy coding! 🚀

docs/blog/announcing-v-2-1-0.md

@@ -1,172 +0,0 @@
----
-sidebar: false
----
-
-# Announcing v2.1.0 🎉
-
-We are excited to announce the release of **TresJS v2.1.0** 🎉 . First release since we open source the project an recieveing such a warm welcome from the vue community. We are so grateful for all the support and feedback we have received so far. More than 225 ⭐️ in the [github repo](https://github.com/Tresjs/tres) in just 2 weeks! 🤯.
-
-This new version comes with exciting new features and improvements in the ecosystem, let's dive in!
-
-## What's hot? 🔥
-
-### Export types and better intellisense 🦾
-
-We are now correctly exporting the types from the core package (thanks to [@userquin](https://github.com/userquin)), this means that you can use the types in your project and get better intellisense. Specially if you are using `moduleResolution: 'bundler'` in your `tsconfig.json`.
-
-#### Before 😨
-
-![Export types core 2.0.0](/blog/tres-core-2-0-0.png)
-
-[Source](https://arethetypeswrong.github.io/?p=%40tresjs%2Fcore%402..0.0)
-
-#### After 🥹
-
-![Export types core 2.1.1](/blog/tres-core-2-1-1.png)
-
-[Source](https://arethetypeswrong.github.io/?p=%40tresjs%2Fcore%402.1.1)
-
-Shoutout to the team behind this amazing tool [Are the types wrong](https://arethetypeswrong.github.io), a must-have for every library author.
-
-### Inherit types from THREE 🤓
-
-We are now inheriting the types from the `three` package instead of generating them on build time. That means that you no longer need to wait for a release of TresJS to get the latest types from ThreeJS which follows our goal of always being up to date with the latest ThreeJS features.
-
-::: tip
-Make sure you have the `@types/three` package installed in your project.
-:::
-
-We took serious inspiration from R3F v9 and how they are handling [the types](https://github.com/pmndrs/react-three-fiber/blob/v9/packages/fiber/src/three-types.ts), so thanks to [@CodyJasonBennett](https://github.com/CodyJasonBennett) from the Pmndrs team for pointing me in the right direction.
-
-```ts
-type ThreeExports = typeof THREE
-type ThreeInstancesImpl = {
-  [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation
-    ? ThreeElement<ThreeExports[K]>
-    : never
-}
-
-export interface ThreeInstances extends ThreeInstancesImpl {
-  primitive: Omit<ThreeElement<any>, 'args'> & { object: object }
-}
-
-type TresComponents = {
-  [K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>
-}
-
-declare module 'vue' {
-  export type GlobalComponents = TresComponents
-}
-```
-
-This is a simplified version of the code, you can check the full implementation [here](https://github.com/Tresjs/tres/blob/main/src/types/index.ts)
-
-Why is this so great? For example now you get a better intellisense of the `args` property for the instance constructor parameters:
-
-![Args intellisense](/blog/args-intellisense.png)
-
-### Improved HMR
-
-We have improved the HMR experience, now you can update the code without reloading the page. This is a huge improvement for the development experience but still not perfect. For example `OrbitControls` is not working correctly with HMR, so you will have to reload the page to see the changes.
-
-![HMR](/blog/hmr.gif)
-
-### Updated to Vue 3.3.4
-
-We are now using the latest version of [Vue 3.3.4](https://blog.vuejs.org/posts/vue-3-3) "Rurouni Kenshin", this means that you get all the latest features and bug fixes from Vue.
-
-## Ecossystem updates 🌳
-
-### Cientos v2.1.0
-
-We have updated the `@tresjs/cientos` package to v2.1.0, this version comes with a lot of improvements and new features. Check out the [release notes](https://github.com/Tresjs/cientos/releases/tag/2.1.0)
-
-#### Enhanced `OrbitControls`
-
-The abstraction for `OrbitControls` has been improved adding all the properties and methods from the original ThreeJS class such as `enableDamping` and `autoRotate` as well as events like `change` and `start`.
-
-This was highly requested by the community, so thanks to everyone that contributed to this release.
-
-```vue
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera
-      :args="[45, 1, 0.1, 1000]"
-    />
-    <OrbitControls
-      enable-damping
-      :damping-factor="
-        0.1"
-      @start="onOrbitControlStart"
-    />
-  </TresCanvas>
-</template>
-```
-
-#### Welcome `ContactShadows`
-
-![Contact Shadows](https://cientos.tresjs.org/cientos/contact-shadows.png)
-
-We have added support for [Contact Shadows](https://threejs.org/examples/?q=cont#webgl_shadow_contact). Is a technique used in 3D graphics to create shadows that appear where objects meet or "contact" each other. This is different from traditional shadowing techniques, which often only create shadows based on the position of a light source relative to an object.
-
-```html {11}
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
-      <TresMeshNormalMaterial />
-    </Box>
-    <Icosahedron ref="icoRef" :args="[0.3]" :position="[1, 1, 1]">
-      <TresMeshNormalMaterial />
-    </Icosahedron>
-    <ContactShadows :blur="0.5" :resolution="512" :opacity="0.2" />
-    <Plane :args="[10, 10, 10]" :position="[0, -0.02, 0]">
-      <TresMeshBasicMaterial :color="'#ffffff'" />
-    </Plane>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>
-```
-
-### Precipitation abstraction
-
-A new abstraction has arrived, the `precipitation` component creates an infinite flow of particles, in combination with different props, this allow you to create, rain/snow/hail and many more effect. Unlock your creativity
-
-![Precipitation](https://cientos.tresjs.org/cientos/precipitation.gif)
-
-```vue
-<template>
-  <TresCanvas>
-    ...
-    <Precipitation :speed="1" :count="2500" :randomness="0.7" />
-    ...
-  </TresCanvas>
-</template>
-```
-
-You can read all the documentation [here](https://cientos.tresjs.org/guide/abstractions/precipitation.html)
-
-### Update parallax mouse abstraction
-
-We have added improvements to `MouseParallax` (previously called PamCameraMouse)
-
-1. No conflicts with controls
-2. New prop ease factor allows you to add smooth movement
-3. Change to a better name
-
-### Improvements in DX
-
-It's also worth mentioning, in cientos we're working hard on improving the developer experience, as we know the details matter, these are some of them:
-
-- Update Vue 3.3.4
-- start of migration to new destructure props
-- Export types and better intellisense
-- Refactor folder structure
-- Creation of feature/bug forms in github for better issues report
-
-## Share your work 🎨
-
-We want to see what you are creating with TresJS, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
-
-Happy coding! 🚀

docs/blog/announcing-v-3-1-0.md

@@ -1,101 +0,0 @@
----
-sidebar: false
----
-
-# Vue Devtools are back on v3.1.0 🎉
-
-We are excited to announce the release of **TresJS v3.1.0**. This release brings back the support for Vue Devtools, which was broken since v2 🤯 thanks to [@enpitsuLin](https://github.com/enpitsuLin)
-
-<video controls>
-    <source src="https://res.cloudinary.com/alvarosaburido/video/upload/v1692768893/Tres/devtools-are-back_cuynao.mp4" type="video/mp4">
-</video>
-
-This is huge for DX since you can now inspect the internal state of the library and the components that are using it. Although, we are still working on improving the experience, so expect more improvements in the future.
-
-## What's hot 🔥?
-
-### Guess who is back? Back again? Vue Devtools are back 🎶
-
-![Vue Devtools](https://media.tenor.com/idcVQVMSDvMAAAAC/again-guess-whos-back-again.gif)
-
-So since v2, the Vue Devtools were broken whenever `<TresCanvas />` was mounted. This is because we were using the custom Renderer API `createApp` to mount a second App inside the `<TresCanvas />` component. This was causing the Vue Devtools to break since it only works with DOM based vue apps (See [issue](https://github.com/vuejs/devtools/issues/2078)).
-
-Now, we are using the `render` function from the custom Renderer API to render the `<TresCanvas />` component, which means that the Vue Devtools are working again 🎉
-
-```ts
-const { render } = createRenderer(nodeOps)
-
-const createInternalComponent = (context: TresContext) => {
-    return defineComponent({
-        setup() {
-            provide('useTres', context)
-            provide('extend', extend)
-            return () => h(Fragment, null, slots?.default ? slots.default() : [])
-        }
-    })
-}
-
-const mountCustomRenderer = (context: TresContext) => {
-    const InternalComponent = createInternalComponent(context)
-    render(h(InternalComponent), scene.value as unknown as TresObject)
-}
-
-mountCustomRenderer(context)
-```
-
-Thanks again to [@enpitsuLin](https://github.com/enpitsuLin) for solving this issue 🙏🥹.
-
-## Re-instancing of THREE Objects
-
-Another important caveheat of Tres was that it was not possible to reactively change the constructor params of a THREE Object via the props `args`. 
-
-### Before 😠
-
-```html
-<script lang="ts" setup>
-const color = ref('#ffffff')
-const intensity = ref(1)
-
-const lightRef = shallowRef<THREE.DirectionalLight>()
-
-watch([color, intensity], ([color, intensity]) => {
-    // this will not work
-    lightRef.value = new THREE.DirectionalLight(color, intensity)
-})
-</script>
-
-<template>
-    <TresDirectionalLight ref="lightRef" :args=[color, intensity] />
-</template>
-```
-
-As you can see, we are trying to re-instance the `THREE.DirectionalLight` object whenever the `color` or `intensity` refs change. So we needed to do it manually by using the `watch` function and re-assigning the template ref `lightRef` value.
-
-### After 😎
-
-```html
-<script lang="ts" setup>
-const color = ref('#ffffff')
-const intensity = ref(1)
-</script>
-
-<template>
-    <TresDirectionalLight :args=[color, intensity] />
-</template>
-```
-
-Now, we can just pass the `color` and `intensity` refs to the `args` prop and Tres will take care of re-instancing the `THREE.DirectionalLight` object whenever the refs change 🤭😉.
-
-## No more `useLegacyLights` warning
-
-Since [threejs v155](https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733) update there was pretty annoying warning on the console.
-
-![annoying useLegacyLights warning](/blog/annoying-warning.png)
-
-And it's GONEEEEEEE! 🎉🎉🎉
-
-## Share your work 🎨
-
-We want to see what you are creating with TresJS, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
-
-Happy coding! 🚀

docs/blog/announcing-v-3.md

@@ -1,109 +0,0 @@
----
-sidebar: false
----
-
-# Announcing v3.0.0 🎉
-
-Already? Yes! We are excited to announce the release of:
-
-- **TresJS v3.0.0**
-- **Cientos v3.0.0**
-
-But you might be wondering, why a major release so soon if we just released 2.x.x not so while ago 🤔? Does it means more breaking changes? 🤯
-
-<div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/ck5JRWob7folZ7d97I" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/nickelodeon-throwback-all-that-kel-ck5JRWob7folZ7d97I">via GIPHY</a></p>
-
-**Short answer no**, don't expect changes so big like the one from `1.x.x` to `2.x.x`, specially for you, the end user.
-
-Then why `3.x`? We have a good reason. The team has been working hard to bring you the best possible experience when using TresJS and authoring new packages that extend the core functionality, so we decided to **re-think the whole internal state management from a new perspective**.
-
-## Bye bye Store, hello Context Provider 🤓
-
-Until now, we were using a `Store` to manage the internal state of the library
-
-```ts
-const state: TresState = shallowReactive({
-  uuid: generateUUID(),
-  camera: undefined,
-  cameras: [],
-  canvas: undefined,
-  scene: undefined,
-  renderer: undefined,
-  aspectRatio: undefined,
-  pointerEventHandler: undefined,
-})
-```
-
-Important things for the abstractions like `camera`, `scene`, `renderer`, etc. were stored in the `Store` and we were using `reactive` and `shallowReactive` to make sure that the changes were propagated to the components that were using them.
-
-And we had some kind of "getters" and "setters" to access/edit the state from the outside, for example, on the Cientos package.
-
-```ts
-function getState(key: string) {
-  return state[key]
-}
-
-function setState(key: string, value: any) {
-  state[key] = value
-}
-```
-
-If a plugin author or a user wanted to create an abstraction around the `core`. They would have to use something like this:
-
-```ts
-const { state } = useTres()
-
-watch(
-  () => state.camera,
-  camera => {
-    // do something with the camera
-  },
-)
-```
-
-But this was far from ideal, authors could potentially mutate the state in a way that could break the library, and we were not able to control that.
-
-Also we experience lot of bugs related to the reactivity system, specially when using `shallowReactive` and `shallowRef` to avoid unnecessary re-renders.
-
-So we decided to **move away from the `Store` and use a `Context Provider` instead** where the state is a plain object with .
-
-```ts
-const toProvide: TresContext = {
-  sizes,
-  scene: shallowRef<Scene>(scene),
-  camera,
-  extend,
-  cameras: readonly(cameras),
-  renderer,
-  controls: ref(null),
-  raycaster: shallowRef(new Raycaster()),
-  setCameraActive,
-}
-
-provide('useTres', toProvide)
-```
-
-So now you can use any property of the state individually, like this:
-
-```html
-<script lang="ts" setup>
-  import { useTresContext } from '@tresjs/core'
-
-  const { camera, scene, renderer } = useTresContext()
-</script>
-```
-
-::: warning
-
-`useTresContext` can be only be used inside of a `TresCanvas` since it acts as the provider for the context data.
-
-:::
-
-See more here [useTresContext](/api/composables.html#usetrescontext-former-usetres).
-
----
-
-Hope you like this new release, we are working hard to bring you the best possible experience when using TresJS.
-
-- Releases https://github.com/Tresjs/tres/releases
-- Cientos https://github.com/Tresjs/cientos/releases

docs/blog/tres-ecosystem-update-8-11-23.md

@@ -1,199 +0,0 @@
----
-sidebar: false
----
-
-# Tres Ecosystem Update 8/11/23
-
-It's exciting that updates are coming out so fast, that we need a more general post about the whole ecosystem news rather than a post for each package updates 😊.
-
-![](https://media.giphy.com/media/ONxw4niC96zwk/giphy.gif)
-
-Lets jump right into it like it was a mountain of leaves. 🍂
-
-## TresJS `v3.5.0`
-
-Core package has been updated to v3.5.0, this update includes a new feature that comes extremely handy when working with gltf models.
-
-### useSeek new methods
-
-Until now the `seek` and `seekByName` function traverses the object and returns the child object with the specified property and value. If no child with the given property and value is found, it returns null and logs a warning.
-
-But it was not possible to retrieve multiple objects with similar name conventions like `"Cloth001"`, `"Cloth002"`, `"Cloth003"`, etc.
-
-![](/blog/seek-all.png)
-
-Now, you can use the new `seekAll` and `seekAllByName` methods to retrieve an array of objects with the specified property and value.
-
-```ts
-import { useSeek } from '@tresjs/core'
-
-const { seekAll, seekAllByName } = useSeek()
-
-const clothes = seekAllByName(model, 'Cloth')
-```
-
-Thanks to [Garret Walker](https://twitter.com/garrlker), [@PatrickByrn](https://github.com/PatrickByrn) and [@not-Ryan](https://github.com/not-Ryan) for their first contributions. 🎉 👏🏻
-
-Check the full changelog [here](https://github.com/Tresjs/tres/releases/tag/3.5.0)
-
-## Cientos v3.6.0
-
-Of course this ecosystem update wouldn't be complete without a new Cientos release. Welcome `v3.6.0` 🎉 to the party. This release includes a new feature and some bug fixes.
-
-### CustomShaderMaterial
-
-A convenient wrapper for creating custom shaders. It's a wrapper around the [three-custom-shader-material](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) library made by [@FarazzShaikh](https://github.com/FarazzShaikh) that makes it easier to extend ThreeJS standard materials with your own shaders.
-
-![](/blog/custom-shader-material.png)
-
-```html
-<script setup lang="ts">
-import {
-  CustomShaderMaterial,
-} from '@tresjs/cientos'
-import vertexShader from './vertex.glsl'
-import fragmentShader from './fragment.glsl'
-
-const texture01 = await useTexture({
-  matcap: '/matcap_01.png',
-})
-<script>
-
-<template>
-  <TresMesh>
-    <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
-    <CustomShaderMaterial
-      base-material="MeshStandardMaterial"
-      :matcap="texture01.matcap"
-      :vertex-shader="vertexShader"
-      :fragment-shader="fragmentShader"
-      :uniforms="{
-        u_Time: { value: 0 },
-        u_WobbleSpeed: { value: 3 },
-        u_WobbleAmplitude: { value: 0.07 },
-        u_WobbleFrequency: { value: 3 },
-      }"
-    />
-  </TresMesh>
-</template>
-```
-
-Thanks to [Francesco Michelini](https://twitter.com/fra_michelini) for this amazing contribution. 🎉 👏🏻
-
-Check the docs [here](https://cientos.tresjs.org/guide/materials/custom-shader-material.html#trescustomshadermaterial)
-
-### Sparkles ✨
-
-A new fancy abstraction `<Sparkles />` makes sparkles on your geometry's vertices – optionally guided by a directional light.
-
-![](/blog/sparkles.png)
-
-Not gonna lie,  I spent hours mesmerized by this effect when reviewing the PR by [@andretchen0](https://github.com/andretchen0). 🤤
-
-```html
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Sparkles, OrbitControls, Torus, Sphere } from '@tresjs/cientos'
-import { shallowRef } from 'vue'
-
-const lightRef = shallowRef()
-
-useRenderLoop().onLoop(({ elapsed }) => {
-  if (lightRef.value) {
-    lightRef.value.position.x = Math.cos(elapsed) * 2.5
-    lightRef.value.position.y = Math.sin(elapsed) * 2.5
-  }
-})
-</script>
-
-<template>
-  <TresCanvas clear-color="#333">
-    <TresPerspectiveCamera :position="[0, 0, 8]" />
-    <TresDirectionalLight ref="lightRef">
-      <Sphere
-        color="white"
-        :scale="0.1"
-      />
-    </TresDirectionalLight>
-    <Torus :args="[1, 0.25, 16, 48]">
-      <TresMeshBasicMaterial color="#222" />
-      <Sparkles :directional-light="lightRef" />
-    </Torus>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-More usage examples in the docs [here](https://cientos.tresjs.org/guide/staging/sparkles.html#sparkles)
-
-### Superformula 
-
-A new shape `<Superformula />` that generates a 3D shape based on the [superformula](https://en.wikipedia.org/wiki/Superformula) equation.
-
-![](/blog/superformula.gif)
-
-
-```html
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Superformula, OrbitControls } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas clear-color="#777">
-    <Superformula
-      :num-arms-b="24"
-      :exp-b="[40, 30, 20]"
-    >
-      <TresMeshNormalMaterial />
-    </Superformula>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-More usage examples in the docs [here](https://cientos.tresjs.org/guide/shapes/superformula.html#superformula)
-
-Thanks [@andretchen0](https://github.com/andretchen0) for another great contribution.
-
-### CSS Transitions on `<Html />`
-
-A highly requested bugfix that allows you to use CSS transitions on the `<Html />` component.
-
-![](/blog/html-css-transitions-fix.gif)
-
-
-```html
-<Html
-  v-bind="state"
-  transform
-  :occlude="[sphereRef]"
->
-  <h1
-    class="text-xs p-0.5 rounded transition-all duration-500"
-    :class="isActive ? 'bg-dark' : 'bg-white'"
-  >
-    Box
-  </h1>
-</Html>
-```
-
-## Time for dessert 🍰
-
-To finish this update, we have a new package in the ecosystem that's near to hit alpha soon. 🎉
-
-![Tresleches package](/blog/tres-leches.png)
-
-When you are building an 3D scene, you often need to fine-tune the position, rotation and scale of your objects. This can be a tedious task, especially when you are working with complex scenes.
-
-Tresleches is the missing VueJS GUI that allows you to easily create controls and monitor things like the `fps` of your scene and manipulate the position of an object, the rotation of a light, etc.
-
-Documentation available on https://tresleches.tresjs.org/
-
-More coming soon... in the next weeks. 😊
-
-## Thanks
-
-Thanks to all the contributors that made this update possible and the community for creating so many amazing showcases with TresJS. 🙏🏻
-
-You can join the community in our [Discord server](https://discord.gg/UCr96AQmWn) or follow us on [Twitter](https://twitter.com/tresjs_dev) to stay up to date with the latest news.

eslint.config.js

@@ -1,9 +1,4 @@
 import { tresLintConfig } from '@tresjs/eslint-config'
 
 export default tresLintConfig({
-  ignores: ['dist', 'node_modules', 'public', '.github', 'docs/blog', 'sponsorkit'],
-}, {
-  rules: {
-    'style/max-statements-per-line': 'off',
-  },
 })

package.json

@@ -78,7 +78,7 @@
     "@release-it/conventional-changelog": "^8.0.2",
     "@stackblitz/sdk": "^1.11.0",
     "@tresjs/cientos": "4.0.2",
-    "@tresjs/eslint-config": "^1.3.1",
+    "@tresjs/eslint-config": "^1.4.0",
     "@types/three": "^0.168.0",
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@typescript-eslint/parser": "^8.6.0",

pnpm-lock.yaml

@@ -26,10 +26,10 @@ importers:
         version: 1.11.0
       '@tresjs/cientos':
         specifier: 4.0.2
-        version: 4.0.2(@tresjs/core@4.2.10(three@0.168.0)(vue@3.5.6(typescript@5.5.4)))(three@0.168.0)(vue@3.5.6(typescript@5.5.4))
+        version: 4.0.2(@tresjs/core@4.3.0(three@0.168.0)(vue@3.5.6(typescript@5.5.4)))(three@0.168.0)(vue@3.5.6(typescript@5.5.4))
       '@tresjs/eslint-config':
-        specifier: ^1.3.1
-        version: 1.3.1(@typescript-eslint/utils@8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4))(@vue/compiler-sfc@3.5.6)(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)(vitest@2.1.1(@types/node@22.5.2)(@vitest/ui@2.1.1)(jsdom@25.0.0)(terser@5.31.6))
+        specifier: ^1.4.0
+        version: 1.4.0(@typescript-eslint/utils@8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4))(@vue/compiler-sfc@3.5.6)(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)(vitest@2.1.1(@types/node@22.5.2)(@vitest/ui@2.1.1)(jsdom@25.0.0)(terser@5.31.6))
       '@types/three':
         specifier: ^0.168.0
         version: 0.168.0
@@ -1970,12 +1970,6 @@ packages:
       three: '>=0.133'
       vue: '>=3.4'
 
-  '@tresjs/core@4.2.10':
-    resolution: {integrity: sha512-ZKS/G9s86t69TfPUdvAzQkcgqvsLhTGhSKI0BssT/+RZDU0ueFMDKW8g15rNjvs/OM0KEHEPl/W8g87H1YhAbw==}
-    peerDependencies:
-      three: '>=0.133'
-      vue: '>=3.4'
-
   '@tresjs/core@4.2.6':
     resolution: {integrity: sha512-z6Z49rr1vkzHR/yMf2ZA8UvWddYwBIQ6zinrSyacrt3UsayrETvjyZOUESqcX/Up3C8U7//fpA8rGSfL3G3YKw==}
     peerDependencies:
@@ -1988,8 +1982,14 @@ packages:
       three: '>=0.133'
       vue: '>=3.4'
 
-  '@tresjs/eslint-config@1.3.1':
-    resolution: {integrity: sha512-6bUTERPINUY4kTq54+EShmA4krEP7JI1V6me2pgZAic0GtROPltCOVPq3Av2J87grQ6GFsLq0B1m3R279olSAw==}
+  '@tresjs/core@4.3.0':
+    resolution: {integrity: sha512-OmtWJNOSWuV+oI8yD1Nj4Hd59BQ1nyd5E/lpXSrKyI0iwkfpwLKOnr5vHOt5fQYoWxEbZ47XzSCzcpTMwNN2GQ==}
+    peerDependencies:
+      three: '>=0.133'
+      vue: '>=3.4'
+
+  '@tresjs/eslint-config@1.4.0':
+    resolution: {integrity: sha512-2SMN5mDoENkMyo7OGkxTfD79GDyd64RoDe3XXPjgmkXGwhzsgJJRUFAKbCpEQuzRKqXlFP4n41T71QaID6gHvA==}
     peerDependencies:
       eslint: 9.x
 
@@ -2204,10 +2204,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/scope-manager@8.4.0':
-    resolution: {integrity: sha512-n2jFxLeY0JmKfUqy3P70rs6vdoPjHK8P/w+zJcV3fk0b0BwRXC/zxRTEnAsgYT7MwdQDt/ZEbtdzdVC+hcpF0A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.6.0':
     resolution: {integrity: sha512-ZuoutoS5y9UOxKvpc/GkvF4cuEmpokda4wRg64JEia27wX+PysIE9q+lzDtlHHgblwUWwo5/Qn+/WyTUvDwBHw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2221,23 +2217,10 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/types@8.4.0':
-    resolution: {integrity: sha512-T1RB3KQdskh9t3v/qv7niK6P8yvn7ja1mS7QK7XfRVL6wtZ8/mFs/FHf4fKvTA0rKnqnYxl/uHFNbnEt0phgbw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.6.0':
     resolution: {integrity: sha512-rojqFZGd4MQxw33SrOy09qIDS8WEldM8JWtKQLAjf/X5mGSeEFh5ixQlxssMNyPslVIk9yzWqXCsV2eFhYrYUw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.4.0':
-    resolution: {integrity: sha512-kJ2OIP4dQw5gdI4uXsaxUZHRwWAGpREJ9Zq6D5L0BweyOrWsL6Sz0YcAZGWhvKnH7fm1J5YFE1JrQL0c9dd53A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/typescript-estree@8.6.0':
     resolution: {integrity: sha512-MOVAzsKJIPIlLK239l5s06YXjNqpKTVhBVDnqUumQJja5+Y94V3+4VUFRA0G60y2jNnTVwRCkhyGQpavfsbq/g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2247,22 +2230,12 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/utils@8.4.0':
-    resolution: {integrity: sha512-swULW8n1IKLjRAgciCkTCafyTHHfwVQFt8DovmaF69sKbOxTSFMmIZaSHjqO9i/RV0wIblaawhzvtva8Nmm7lQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-
   '@typescript-eslint/utils@8.6.0':
     resolution: {integrity: sha512-eNp9cWnYf36NaOVjkEUznf6fEgVy1TWpE0o52e4wtojjBx7D1UV2WAWGzR+8Y5lVFtpMLPwNbC67T83DWSph4A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  '@typescript-eslint/visitor-keys@8.4.0':
-    resolution: {integrity: sha512-zTQD6WLNTre1hj5wp09nBIDiOc2U5r/qmzo7wxPn4ZgAjHql09EofqhF9WF+fZHzL5aCyaIpPcT2hyxl73kr9A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.6.0':
     resolution: {integrity: sha512-wapVFfZg9H0qOYh4grNVQiMklJGluQrOUiOhYRrQWhx7BY/+I1IYb8BczWNbbUpO+pqy0rDciv3lQH5E1bCLrg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -9915,7 +9888,7 @@ snapshots:
 
   '@stylistic/eslint-plugin@2.8.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/utils': 8.4.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)
       eslint: 9.10.0(jiti@1.21.6)
       eslint-visitor-keys: 4.0.0
       espree: 10.1.0
@@ -9975,9 +9948,9 @@ snapshots:
       - '@vue/composition-api'
       - react
 
-  '@tresjs/cientos@4.0.2(@tresjs/core@4.2.10(three@0.168.0)(vue@3.5.6(typescript@5.5.4)))(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
+  '@tresjs/cientos@4.0.2(@tresjs/core@4.3.0(three@0.168.0)(vue@3.5.6(typescript@5.5.4)))(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
     dependencies:
-      '@tresjs/core': 4.2.10(three@0.168.0)(vue@3.5.6(typescript@5.5.4))
+      '@tresjs/core': 4.3.0(three@0.168.0)(vue@3.5.6(typescript@5.5.4))
       '@vueuse/core': 11.0.3(vue@3.5.6(typescript@5.5.4))
       camera-controls: 2.9.0(three@0.168.0)
       stats-gl: 2.2.8
@@ -10067,7 +10040,7 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@tresjs/core@4.2.10(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
+  '@tresjs/core@4.2.6(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
     dependencies:
       '@alvarosabu/utils': 3.2.0
       '@vue/devtools-api': 6.6.3
@@ -10077,7 +10050,7 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@tresjs/core@4.2.6(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
+  '@tresjs/core@4.2.7(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
     dependencies:
       '@alvarosabu/utils': 3.2.0
       '@vue/devtools-api': 6.6.3
@@ -10087,17 +10060,17 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@tresjs/core@4.2.7(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
+  '@tresjs/core@4.3.0(three@0.168.0)(vue@3.5.6(typescript@5.5.4))':
     dependencies:
       '@alvarosabu/utils': 3.2.0
       '@vue/devtools-api': 6.6.3
-      '@vueuse/core': 10.11.0(vue@3.5.6(typescript@5.5.4))
+      '@vueuse/core': 11.1.0(vue@3.5.6(typescript@5.5.4))
       three: 0.168.0
       vue: 3.5.6(typescript@5.5.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@tresjs/eslint-config@1.3.1(@typescript-eslint/utils@8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4))(@vue/compiler-sfc@3.5.6)(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)(vitest@2.1.1(@types/node@22.5.2)(@vitest/ui@2.1.1)(jsdom@25.0.0)(terser@5.31.6))':
+  '@tresjs/eslint-config@1.4.0(@typescript-eslint/utils@8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4))(@vue/compiler-sfc@3.5.6)(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)(vitest@2.1.1(@types/node@22.5.2)(@vitest/ui@2.1.1)(jsdom@25.0.0)(terser@5.31.6))':
     dependencies:
       '@antfu/eslint-config': 3.6.2(@typescript-eslint/utils@8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4))(@vue/compiler-sfc@3.5.6)(eslint-plugin-format@0.1.2(eslint@9.10.0(jiti@1.21.6)))(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)(vitest@2.1.1(@types/node@22.5.2)(@vitest/ui@2.1.1)(jsdom@25.0.0)(terser@5.31.6))
       eslint: 9.10.0(jiti@1.21.6)
@@ -10769,11 +10742,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.4.0':
-    dependencies:
-      '@typescript-eslint/types': 8.4.0
-      '@typescript-eslint/visitor-keys': 8.4.0
-
   '@typescript-eslint/scope-manager@8.6.0':
     dependencies:
       '@typescript-eslint/types': 8.6.0
@@ -10791,25 +10759,8 @@ snapshots:
       - eslint
       - supports-color
 
-  '@typescript-eslint/types@8.4.0': {}
-
   '@typescript-eslint/types@8.6.0': {}
 
-  '@typescript-eslint/typescript-estree@8.4.0(typescript@5.5.4)':
-    dependencies:
-      '@typescript-eslint/types': 8.4.0
-      '@typescript-eslint/visitor-keys': 8.4.0
-      debug: 4.3.6
-      fast-glob: 3.3.2
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.6.0(typescript@5.5.4)':
     dependencies:
       '@typescript-eslint/types': 8.6.0
@@ -10825,17 +10776,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.4.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.10.0(jiti@1.21.6))
-      '@typescript-eslint/scope-manager': 8.4.0
-      '@typescript-eslint/types': 8.4.0
-      '@typescript-eslint/typescript-estree': 8.4.0(typescript@5.5.4)
-      eslint: 9.10.0(jiti@1.21.6)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@typescript-eslint/utils@8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.10.0(jiti@1.21.6))
@@ -10847,11 +10787,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/visitor-keys@8.4.0':
-    dependencies:
-      '@typescript-eslint/types': 8.4.0
-      eslint-visitor-keys: 3.4.3
-
   '@typescript-eslint/visitor-keys@8.6.0':
     dependencies:
       '@typescript-eslint/types': 8.6.0
@@ -13648,7 +13583,7 @@ snapshots:
 
   eslint-plugin-import-x@4.2.1(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4):
     dependencies:
-      '@typescript-eslint/utils': 8.4.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.6.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)
       debug: 4.3.6
       doctrine: 3.0.0
       eslint: 9.10.0(jiti@1.21.6)